/* ==========================================================================
   site.css — de bouwstenen. Alles hier haalt zijn waarden uit tokens.css.
   Volgorde: basis, hulpmiddelen, menubalk, voettekst, bouwstenen, beweging.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Basis */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Zodat een sprong naar een anker niet onder de vaste menubalk verdwijnt. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--c-mist);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-3xl); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-semi); }

p { margin: 0; }
p + p { margin-top: var(--s-4); }

a { color: var(--c-petrol); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--c-petrol-dark); }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--c-ice); color: var(--c-ink); }

/* Alleen zichtbaar voor schermlezers en bij tabben. */
.skip {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-200%);
  background: var(--c-ink); color: var(--c-ink-inverse);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-btn);
  z-index: 100; text-decoration: none;
  transition: transform var(--dur-base) var(--ease-settle);
}
.skip:focus { transform: translateY(0); color: var(--c-ink-inverse); }

/* Wel voorgelezen, niet te zien. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- 2. Indeling en ruimte */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 48rem) { .wrap { padding-inline: var(--s-8); } }

.section { padding-block: var(--s-section); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--mist  { background: var(--c-mist); }
.section--white { background: var(--c-white); }
.section--ice   { background: var(--c-ice); }
.section--ink   { background: var(--c-ink); color: var(--c-ink-inverse); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--c-ink-inverse); }

.measure { max-width: var(--w-text); }
.narrow  { max-width: var(--w-narrow); }

.stack { display: flex; flex-direction: column; }
.stack--2 { gap: var(--s-2); } .stack--3 { gap: var(--s-3); }
.stack--4 { gap: var(--s-4); } .stack--5 { gap: var(--s-5); }
.stack--6 { gap: var(--s-6); } .stack--8 { gap: var(--s-8); }
.stack--10 { gap: var(--s-10); } .stack--12 { gap: var(--s-12); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------ 3. Tekststijlen */

.label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-petrol);
}
.section--ink .label { color: var(--c-ice); }

.lead  { font-size: var(--fs-lg); color: var(--c-ink); }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }

.tabular { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- 4. Menubalk */

.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-mist) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-calm),
              background var(--dur-base) var(--ease-calm);
}
.header.is-scrolled {
  border-bottom-color: var(--c-line);
  background: color-mix(in srgb, var(--c-mist) 96%, transparent);
}

.header__bar {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 4.5rem;
}

.header__logo { display: block; flex: none; }
.header__logo img { width: 148px; }

.nav { display: none; margin-inline-start: auto; }
@media (min-width: 62rem) { .nav { display: flex; align-items: center; gap: var(--s-6); } }

.nav__link {
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding-block: var(--s-2);
  position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--c-petrol);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-settle);
}
.nav__link:hover { color: var(--c-petrol); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-petrol); }

.header__actions { display: none; gap: var(--s-3); margin-inline-start: var(--s-4); }
@media (min-width: 62rem) { .header__actions { display: flex; } }

/* Hamburger, alleen op smalle schermen */
.header__toggle {
  margin-inline-start: auto;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-btn); cursor: pointer; padding: 0 0.7rem;
}
@media (min-width: 62rem) { .header__toggle { display: none; } }
.header__toggle span {
  display: block; height: 1.5px; background: var(--c-ink); border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-settle), opacity var(--dur-fast) linear;
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Uitschuifmenu */
.drawer {
  position: fixed; inset: 4.5rem 0 0 auto;
  width: min(22rem, 100%);
  background: var(--c-white);
  border-inline-start: 1px solid var(--c-line);
  padding: var(--s-6) var(--s-5) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-2);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-settle),
              visibility 0s linear var(--dur-base);
  z-index: 49;
  overflow-y: auto;
}
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}
@media (min-width: 62rem) { .drawer { display: none; } }
.drawer a {
  color: var(--c-ink); text-decoration: none;
  font-size: var(--fs-lg); font-weight: var(--fw-medium);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.drawer a[aria-current="page"] { color: var(--c-petrol); }
.drawer__actions { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.drawer__actions .btn { width: 100%; justify-content: center; }

.scrim {
  position: fixed; inset: 0; background: rgb(63 28 63 / 0.28);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-calm);
  z-index: 48;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 62rem) { .scrim { display: none; } }

/* --------------------------------------------------------------- 5. Knoppen */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 0.6875rem var(--s-5);
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm),
              color var(--dur-fast) var(--ease-calm);
}
.btn__arrow { transition: transform var(--dur-base) var(--ease-settle); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { background: var(--c-petrol); color: var(--c-white); }
.btn--primary:hover { background: var(--c-petrol-dark); color: var(--c-white); }

.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-petrol); color: var(--c-petrol); background: var(--c-white); }

.btn--quiet { background: transparent; color: var(--c-petrol); padding-inline: 0; }
.btn--quiet:hover { color: var(--c-petrol-dark); }

.btn--onink { background: var(--c-ice); color: var(--c-ink); }
.btn--onink:hover { background: var(--c-white); color: var(--c-ink); }

.btn--lg { font-size: var(--fs-base); padding: 0.875rem var(--s-6); }

/* ---------------------------------------------------------------- 6. Kaarten */

.card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: transform var(--dur-base) var(--ease-settle),
              border-color var(--dur-base) var(--ease-calm),
              box-shadow var(--dur-base) var(--ease-calm);
}
.card h3 { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.card p { color: var(--c-muted); font-size: var(--fs-sm); }

a.card { text-decoration: none; color: inherit; }
a.card:hover, .card--hover:hover {
  transform: translateY(-2px);
  border-color: var(--c-petrol);
  box-shadow: var(--sh-hover);
}

/* Eén kaart per raster mag koraal zijn. Meer wordt lawaai. */
.card--accent { background: var(--c-coral); border-color: transparent; }
.card--accent h3, .card--accent p { color: #40100C; }
.card--ice { background: var(--c-ice); border-color: transparent; }
.card--ice p { color: #2E4B4F; }

/* Kader waar een schermafbeelding in komt te staan. */
.shot {
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  background: var(--c-white);
  box-shadow: var(--sh-panel);
}
.shot--bizz { border-color: color-mix(in srgb, var(--c-bizz) 30%, var(--c-line-strong)); }

/* ---- Een schermafbeelding groot bekijken --------------------------------
   De knop eromheen zet JavaScript erin. Zonder JavaScript blijft het een
   gewone afbeelding, en dat is precies goed: er valt dan niets te klikken
   wat niet werkt.                                                         */
.shot__knop {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; font: inherit; color: inherit;
}
.shot__knop::after {
  content: ""; position: absolute; inset: 0;
  background: var(--c-ink); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-calm);
  pointer-events: none;
}
.shot:has(.shot__knop) { position: relative; }
.shot__knop:hover::after { opacity: 0.05; }
.shot__knop:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

.vergroot {
  border: 0; padding: 0; background: transparent;
  max-width: min(96vw, 1800px); max-height: 94vh;
  overflow: visible;
}
.vergroot::backdrop { background: rgb(63 28 63 / 0.84); }
.vergroot__beeld {
  display: block; margin-inline: auto;
  max-width: 100%; max-height: 80vh; width: auto; height: auto;
  border-radius: var(--r-panel); background: var(--c-white);
  box-shadow: 0 24px 64px -20px rgb(0 0 0 / 0.55);
}
.vergroot__balk {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-6); margin-top: var(--s-4); color: var(--c-white);
}
.vergroot__tekst { font-size: var(--fs-sm); max-width: 62ch; margin: 0; }
.vergroot__sluit {
  flex: none; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.5rem var(--s-4); border-radius: var(--r-btn);
  border: 1px solid rgb(255 255 255 / 0.45);
  background: transparent; color: var(--c-white); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-calm);
}
.vergroot__sluit:hover { background: rgb(255 255 255 / 0.14); }
.vergroot__sluit:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }

.vergroot[open] { animation: vergrootIn var(--dur-base) var(--ease-settle); }
.vergroot[open]::backdrop { animation: vervagenIn var(--dur-base) var(--ease-calm); }
@keyframes vergrootIn { from { opacity: 0; transform: scale(0.98); } }
@keyframes vervagenIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .vergroot[open], .vergroot[open]::backdrop { animation: none; }
}
@media (max-width: 40rem) {
  .vergroot__balk { flex-direction: column-reverse; align-items: stretch; gap: var(--s-3); }
  .vergroot__sluit { justify-content: center; }
}
.shot__stub {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--c-mist) 0 12px, var(--c-white) 12px 24px);
  color: var(--c-muted); font-size: var(--fs-sm); text-align: center; padding: var(--s-6);
}

.pill {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0.04em;
  padding: 0.15rem var(--s-2);
  border-radius: var(--r-btn);
  background: var(--c-ice); color: var(--c-petrol-dark);
  vertical-align: 0.1em;
}
.pill--dev { background: var(--c-mist); color: var(--c-muted); border: 1px solid var(--c-line); }

/* Houdt een naam en zijn label bij elkaar op één regel. */
.nowrap { white-space: nowrap; }

/* Twee kolommen: tekst links, een blok ernaast. Op smalle schermen onder elkaar. */
.split { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-16); }
}

/* Compacte samenvatting van het systeem, naast de opening. */
.summary {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.summary__row { display: flex; gap: var(--s-4); align-items: baseline; justify-content: space-between; }
.summary__key { font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.summary__val { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: right; }
.summary__dots { display: flex; gap: var(--s-2); }
.summary__dots span { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: block; }
.summary hr { border: 0; border-top: 1px solid var(--c-line); margin: 0; }

/* ------------------------------------------------------------ 7. Formulier */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field .hint { font-size: var(--fs-xs); color: var(--c-muted); }

.input, .textarea, .select {
  font: inherit; font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-btn);
  padding: 0.6875rem var(--s-4);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur-fast) var(--ease-calm);
}
.input::placeholder, .textarea::placeholder { color: var(--c-muted); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--c-muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-petrol);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-petrol) 18%, transparent);
}
.textarea { min-height: 8rem; resize: vertical; }

.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.check input {
  appearance: none; flex: none;
  width: 1.2rem; height: 1.2rem; margin-top: 0.22rem;
  border: 1.5px solid var(--c-line-strong); border-radius: 4px;
  background: var(--c-white); cursor: pointer; position: relative;
  transition: background var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm);
}
.check input:checked { background: var(--c-petrol); border-color: var(--c-petrol); }
.check input:checked::after {
  content: ""; position: absolute; left: 0.36rem; top: 0.14rem;
  width: 0.3rem; height: 0.6rem;
  border: solid var(--c-white); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check span { font-size: var(--fs-sm); }

.error { color: var(--c-coral-ink); font-size: var(--fs-sm); }

/* ------------------------------------------------------------- 8. Voettekst */

.footer { background: var(--c-ink); color: var(--c-ink-inverse); padding-block: var(--s-16) var(--s-8); }
.footer a { color: var(--c-ice); text-decoration: none; }
.footer a:hover { color: var(--c-white); text-decoration: underline; }

.footer__grid { display: grid; gap: var(--s-10); }
@media (min-width: 40rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) {
  /* De drie linkkolommen krijgen precies de breedte van hun langste link.
     Wat overblijft gaat naar contact, waar het formulier de ruimte nodig heeft. */
  .footer__grid {
    grid-template-columns: repeat(3, max-content) minmax(17rem, 1fr);
    column-gap: var(--s-10);
    row-gap: var(--s-10);
  }
}

.footer__head {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ice); margin-bottom: var(--s-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.footer__list a { font-size: var(--fs-sm); }

.footer__contact { font-size: var(--fs-sm); color: color-mix(in srgb, var(--c-ice) 82%, transparent); font-style: normal; }
.footer__contact strong { color: var(--c-white); font-weight: var(--fw-semi); }

.footer__signup { display: flex; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; }
.footer__signup .input { flex: 1 1 10rem; min-width: 0; }
.footer__signup .btn { flex: none; }

.footer__base {
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid color-mix(in srgb, var(--c-ice) 22%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: color-mix(in srgb, var(--c-ice) 72%, transparent);
}
.footer__logo img { width: 168px; }

/* ---------------------------------------------------------- 9. Paginablokken
   Onderdelen die op meerdere pagina's terugkomen: de opening, de stappen,
   de modulepanelen en het slotblok.                                        */

/* --- De opening ---------------------------------------------------------- */

/* De opening bestaat uit twee toestanden. Bij het laden vallen de pillen
   binnen; bij het scrollen blijft de opening plakken, glijden de pillen
   opzij en komt de zin tevoorschijn. Alles wat met dat scrollen te maken
   heeft zit achter .hero--wissel, dat JavaScript aanzet. Zonder JavaScript,
   op een telefoon en bij verminderde beweging staat alles er gewoon.      */

.hero-zone { position: relative; }

/* De opening vult het scherm onder de menubalk en zet alles wat erin staat
   verticaal in het midden. Op elke schermhoogte, dus ook op een telefoon en
   op een breed bureaublad: bij openen en bij verversen staat de kop met de
   knoppen en het veld altijd midden in beeld. */
.hero {
  padding-block: clamp(2rem, 1rem + 3.5vw, 3.5rem);
  overflow: hidden;              /* de pillen glijden het beeld uit */
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100svh - 4.5rem);
}
.hero { position: relative; }

/* Het pijltje onderaan de opening. Nu de opening het scherm vult, is er
   zonder dit teken niets wat verraadt dat er meer onder staat. Het wipt
   rustig en verdwijnt zodra iemand ook maar iets scrolt. */
.scrolhint {
  position: absolute; left: 50%; bottom: clamp(0.75rem, 2vh, 1.75rem);
  transform: translateX(-50%);
  color: var(--c-muted);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-calm);
}
.hero--gescrold .scrolhint { opacity: 0; }
.scrolhint svg { display: block; animation: wippen 2.6s var(--ease-calm) infinite; }
@keyframes wippen {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) { .scrolhint svg { animation: none; } }

.hero__kop { max-width: 22ch; margin-inline: auto; }
.hero__sub { max-width: 34rem; margin-inline: auto; }
.hero .row { justify-content: center; }

/* De vastgeplakte variant. De zone is hoger dan het scherm; het verschil is
   precies de afstand waarover de wissel speelt. */
@media (min-width: 62rem) {
  .hero-zone { height: 168vh; }
  .hero {
    /* Plakt onder de menubalk in plaats van eronderdoor, zodat de afstand
       tussen balk en kop bij het scrollen precies gelijk blijft. */
    position: sticky; top: 4.5rem;
    padding-block: var(--s-12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-zone { height: auto; }
  .hero { position: static; min-height: 0; }
}

/* --- Het veld waarin de drie regels landen ------------------------------
   Vage balken als ondergrond, en daarop de drie pillen die gekanteld komen
   binnenvallen en op hun plek blijven liggen.                            */

.veld {
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-block: var(--s-6);
}

/* De laag met de balken en de pillen. De zin staat daarbuiten, zodat de
   balken niet achter de tekst door lopen als die eronder staat. */
.veld__laag { position: relative; }

.veld__raster {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4) var(--s-3);
  align-content: center;
  pointer-events: none;
}
.veld__raster span {
  display: block; height: clamp(2rem, 1.4rem + 1.6vw, 2.9rem);
  border-radius: 9px;
  background: color-mix(in srgb, var(--c-ice) 42%, var(--c-mist));
}
.veld__raster span:nth-child(3n)   { grid-column: span 2; }
.veld__raster span:nth-child(7)    { grid-column: span 1; }
.veld__raster span:nth-child(4n+1) { opacity: 0.62; }
@media (max-width: 44rem) {
  /* Op drie kolommen passen de dubbelbrede balken niet meer netjes: het
     raster valt dan uiteen in vijf rijen die onder de pillen uitsteken.
     Daarom hier allemaal even breed, negen stuks, precies drie rijen. */
  .veld__raster { grid-template-columns: repeat(3, 1fr); gap: var(--s-3) var(--s-2); }
  .veld__raster span:nth-child(3n)   { grid-column: span 1; }
  .veld__raster span:nth-child(n+10) { display: none; }
  .veld__zin { margin-top: var(--s-10); }
}

.veld__pillen {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.5rem, 0.3rem + 0.5vw, 0.85rem);
}

.pil {
  display: inline-block;
  padding: clamp(0.6rem, 0.45rem + 0.4vw, 0.9rem) clamp(1.1rem, 0.8rem + 1.2vw, 2rem);
  border-radius: 11px;
  font-size: clamp(1rem, 0.88rem + 0.75vw, 1.6rem);
  font-weight: var(--fw-semi);
  line-height: 1.25;
  box-shadow: 0 10px 26px -14px rgb(63 28 63 / 0.45);
  will-change: transform;
}
.pil--inkt   { background: var(--c-ink);   color: var(--c-ink-inverse); }
.pil--ijs    { background: var(--c-ice);   color: var(--c-ink); }
.pil--koraal { background: var(--c-coral); color: #40100C; }

/* De rusttoestand: licht gekanteld en versprongen, alsof ze zijn neergelegd.
   De verspringing zit in een variabele, zodat hij op een telefoon klein blijft
   en op een breed scherm echt verstrooid oogt. --uit en --draai bepalen naar
   welke kant en hoe ver de pil straks wegglijdt: om en om.                */
.pil:nth-child(1) { --x: -6%;  --r: -2.4deg; --uit: -88vw; --draai: -20deg; --p: var(--p1, 0); }
.pil:nth-child(2) { --x: 14%;  --r:  1.6deg; --uit:  88vw; --draai:  18deg; --p: var(--p2, 0); }
.pil:nth-child(3) { --x: -3%;  --r: -0.9deg; --uit: -88vw; --draai: -16deg; --p: var(--p3, 0); }
@media (min-width: 48rem) {
  .pil:nth-child(1) { --x: -22%; }
  .pil:nth-child(2) { --x:  40%; }
  .pil:nth-child(3) { --x:  -8%; }
}
.pil { transform: translate3d(var(--x), 0, 0) rotate(var(--r)); }

/* --- Het binnenvallen bij het laden -------------------------------------
   Rustig onderweg, en met een duidelijke doorveer: eerst ver voorbij de
   rustplek, dan terug over de plek heen, en dan pas stil.                */

.js .pil { opacity: 0; }
.js .hero--speel .pil:nth-child(1) { animation: vallen 1100ms var(--ease-settle) 300ms both; }
.js .hero--speel .pil:nth-child(2) { animation: vallen 1100ms var(--ease-settle) 560ms both; }
.js .hero--speel .pil:nth-child(3) { animation: vallen 1100ms var(--ease-settle) 820ms both; }

@keyframes vallen {
  0%   { opacity: 0; transform: translate3d(calc(var(--x) + 46%), -360px, 0) rotate(calc(var(--r) - 13deg)); }
  52%  { opacity: 1; transform: translate3d(var(--x), 38px, 0) rotate(calc(var(--r) + 6deg)); }
  76%  { opacity: 1; transform: translate3d(var(--x), -13px, 0) rotate(calc(var(--r) - 2.5deg)); }
  90%  { opacity: 1; transform: translate3d(var(--x), 4px, 0) rotate(calc(var(--r) + 0.8deg)); }
  100% { opacity: 1; transform: translate3d(var(--x), 0, 0) rotate(var(--r)); }
}

/* Zodra het vallen klaar is neemt de scrollstand het over. De rusttoestand
   van de animatie en de scrollstand bij nul zijn gelijk, dus dat wisselen
   is niet te zien. */
.hero--klaar .pil {
  animation: none !important;
  opacity: 1;
  transform:
    translate3d(calc(var(--x) + var(--p) * var(--uit)), 0, 0)
    rotate(calc(var(--r) + var(--p) * var(--draai)));
}

/* --- De kop en de knoppen bij het laden --------------------------------- */

.js .hero .hero__kop, .js .hero .hero__acties { opacity: 0; }
.js .hero--speel .hero__kop    { animation: op-zijn-plek 620ms var(--ease-settle) 80ms both; }
.js .hero--speel .hero__acties { animation: op-zijn-plek 560ms var(--ease-settle) 300ms both; }

@keyframes op-zijn-plek {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- De zin die tevoorschijn komt als de pillen weggaan ------------------
   Hij ligt over het veld heen, precies waar de pillen lagen, zodat er niets
   verschuift op het moment dat hij verschijnt.                            */

.veld__zin {
  margin: var(--s-8) auto 0;
  max-width: 40rem;
  font-size: clamp(1.25rem, 1.05rem + 0.95vw, 1.85rem);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--c-ink);
  text-wrap: balance;
}
.hero--wissel .veld__zin {
  position: absolute;
  inset-inline: 0;
  top: 40%;
  opacity: var(--ps, 0);
  transform: translateY(calc(-50% + (1 - var(--ps, 0)) * 42px));
}

/* --- Het scherm onder de opening ---------------------------------------- */

.beeldband { background: var(--c-white); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 0; }
.beeldband .shot { max-width: 62rem; margin-inline: auto; }

/* --- Losse uitspraken naast elkaar --------------------------------------- */

.klachten { display: grid; gap: var(--s-8); }
@media (min-width: 56rem) { .klachten { grid-template-columns: repeat(3, 1fr); gap: var(--s-10); } }
.klacht { display: flex; flex-direction: column; gap: var(--s-3); }
.klacht__streep { width: 2rem; height: 3px; background: var(--c-coral); border-radius: 2px; }
.klacht p { font-size: var(--fs-lg); line-height: 1.5; }

/* --- Stappen. Hier ís de nummering informatie. --------------------------- */

.stappen { counter-reset: stap; display: grid; gap: var(--s-8); list-style: none; margin: 0; padding: 0; }
@media (min-width: 56rem) { .stappen { grid-template-columns: repeat(3, 1fr); gap: var(--s-10); } }
.stap { counter-increment: stap; display: flex; flex-direction: column; gap: var(--s-3); }
.stap::before {
  content: counter(stap);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-ice); color: var(--c-petrol-dark);
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.stap h3 { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.stap p { color: var(--c-muted); }

/* --- Modulepanelen ------------------------------------------------------- */

.panelen { display: grid; gap: var(--s-4); }
@media (min-width: 44rem) { .panelen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .panelen { grid-template-columns: repeat(3, 1fr); } }

.paneel {
  display: flex; flex-direction: column; gap: var(--s-3);
  min-height: 13rem;
  padding: var(--s-6);
  border-radius: var(--r-panel);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  color: inherit; text-decoration: none;
  transition: transform var(--dur-base) var(--ease-settle),
              box-shadow var(--dur-base) var(--ease-calm);
}
.paneel h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.paneel p { font-size: var(--fs-sm); line-height: 1.55; }
.paneel__pijl { margin-top: auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); display: inline-flex; gap: var(--s-2); }
.paneel__pijl span { transition: transform var(--dur-base) var(--ease-settle); }
.paneel:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); }
.paneel:hover .paneel__pijl span { transform: translateX(4px); }

/* Zes vullingen, zo verdeeld dat geen twee dezelfde naast of onder elkaar
   staan, en de twee donkere panelen diagonaal tegenover elkaar liggen. */

.paneel--wit   { color: var(--c-ink); }
.paneel--wit p { color: var(--c-muted); }
.paneel--wit .paneel__pijl { color: var(--c-petrol); }

.paneel--ijs   { background: var(--c-ice); border-color: transparent; color: var(--c-ink); }
.paneel--ijs p { color: #2E4B4F; }
.paneel--ijs .paneel__pijl { color: var(--c-petrol-dark); }

.paneel--blush { background: var(--c-blush); border-color: transparent; color: var(--c-ink); }
.paneel--blush p { color: #6B4340; }
.paneel--blush .paneel__pijl { color: var(--c-coral-ink); }

.paneel--lila  { background: var(--c-lila); border-color: transparent; color: var(--c-ink); }
.paneel--lila p { color: #5E4B5C; }
.paneel--lila .paneel__pijl { color: var(--c-petrol); }

.paneel--koraal { background: var(--c-coral); border-color: transparent; color: #40100C; }
.paneel--koraal h3, .paneel--koraal p, .paneel--koraal .paneel__pijl { color: #40100C; }

.paneel--inkt  { background: var(--c-ink); border-color: transparent; color: var(--c-ink-inverse); }
.paneel--inkt h3 { color: var(--c-ink-inverse); }
.paneel--inkt p, .paneel--inkt .paneel__pijl { color: var(--c-ice); }

.paneel--petrol { background: var(--c-petrol); border-color: transparent; color: var(--c-white); }
.paneel--petrol h3 { color: var(--c-white); }
.paneel--petrol p, .paneel--petrol .paneel__pijl { color: #EAF5F6; }

/* --- Wat het oplevert ---------------------------------------------------- */

.opbrengsten { display: grid; gap: var(--s-8); }
@media (min-width: 56rem) { .opbrengsten { grid-template-columns: repeat(3, 1fr); gap: var(--s-10); } }
.opbrengst { display: flex; flex-direction: column; gap: var(--s-2); }
.opbrengst h3 { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.opbrengst p { color: var(--c-muted); }
.section--ink .opbrengst p { color: color-mix(in srgb, var(--c-ice) 85%, transparent); }
.section--ink .opbrengst h3 { color: var(--c-ink-inverse); }

/* --- Prijsvoorproefje ---------------------------------------------------- */

.tarieven { display: grid; gap: var(--s-4); }
@media (min-width: 34rem) { .tarieven { grid-template-columns: repeat(2, 1fr); } }
.tarief {
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1);
  background: var(--c-mist);
}
.tarief__label { font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.tarief__bedrag { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tarief__uitleg { font-size: var(--fs-sm); color: var(--c-muted); }
.tarief--nul .tarief__bedrag { color: var(--c-petrol); }

/* --- Twee schermen naast elkaar, de aanzet van de chat-animatie ---------- */

.duo { display: grid; gap: var(--s-4); }
@media (min-width: 50rem) { .duo { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
.duo figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.duo figcaption {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-muted);
}
.duo figcaption .bizz { color: var(--c-bizz); }
.duo figcaption .st { color: var(--c-petrol); }

/* --------------------------------------------------------------- 10. Beweging
   Alles komt uit een zichtbare rusttoestand omhoog. Niets staat op nul te
   wachten tot een waarnemer aanslaat — zonder JavaScript is de pagina
   gewoon compleet.                                                        */

.reveal { transition: opacity var(--dur-reveal) var(--ease-settle),
                      transform var(--dur-reveal) var(--ease-settle); }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .pil,
  .js .hero .hero__kop, .js .hero .hero__acties {
    opacity: 1; animation: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================== 11. Carrousel
   De brede kaarten van de Station21-pagina, zoals in de tweede referentie.
   Werkt met scroll-snap: slepen, vegen, pijltjestoetsen en de knoppen doen
   allemaal hetzelfde. Zonder JavaScript is het gewoon een schuifbare rij.  */

.carrousel { position: relative; }

.carrousel__kop {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); margin-bottom: var(--s-8); flex-wrap: wrap;
}

.carrousel__knoppen { display: flex; gap: var(--s-2); }
.carrousel__knop {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-btn);
  background: var(--c-white); color: var(--c-ink);
  cursor: pointer; font: inherit; font-size: 1.1rem; line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-calm),
              color var(--dur-fast) var(--ease-calm),
              opacity var(--dur-fast) var(--ease-calm);
}
.carrousel__knop:hover:not(:disabled) { border-color: var(--c-petrol); color: var(--c-petrol); }
.carrousel__knop:disabled { opacity: 0.35; cursor: default; }

.carrousel__spoor {
  display: flex; gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}
.carrousel__spoor::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carrousel__spoor { scroll-behavior: auto; } }

.kaart {
  flex: 0 0 min(100%, 62rem);
  scroll-snap-align: center;
  scroll-margin-top: 7rem;
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  display: grid; gap: var(--s-6);
}
@media (min-width: 56rem) {
  .kaart { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--s-10); }
}

.kaart__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.kaart h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); margin-bottom: var(--s-4); }
.kaart p { max-width: 30rem; }
.kaart__punten {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.kaart__punten li {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 0.3rem 0.7rem; border-radius: var(--r-btn);
  background: rgb(255 255 255 / 0.55);
}

/* Vier vullingen, zodat zeven kaarten niet als één lange lap lezen. */
.kaart--ijs    { background: var(--c-ice);   color: var(--c-ink); }
.kaart--ijs .kaart__label { color: var(--c-petrol-dark); }
.kaart--blush  { background: var(--c-blush); color: var(--c-ink); }
.kaart--blush .kaart__label { color: var(--c-coral-ink); }
.kaart--lila   { background: var(--c-lila);  color: var(--c-ink); }
.kaart--lila .kaart__label { color: var(--c-petrol); }
.kaart--inkt   { background: var(--c-ink);   color: var(--c-ink-inverse); }
.kaart--inkt h2 { color: var(--c-ink-inverse); }
.kaart--inkt .kaart__label { color: var(--c-ice); }
.kaart--inkt p { color: var(--c-ice); }
.kaart--inkt .kaart__punten li { background: rgb(255 255 255 / 0.12); color: var(--c-ice); }

/* ============================================================ 12. Prijzen */

.tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.tabel th, .tabel td { padding: var(--s-4) var(--s-4); border-bottom: 1px solid var(--c-line); text-align: left; }
.tabel th {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted);
}
.tabel td:last-child, .tabel th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tr.is-gratis td { color: var(--c-petrol); font-weight: var(--fw-semi); }
.tabelwrap { overflow-x: auto; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-card); }

.reken {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-panel); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  display: grid; gap: var(--s-6);
}
@media (min-width: 56rem) { .reken { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-10); } }

.reken__rijen { display: flex; flex-direction: column; gap: var(--s-2); }
.reken__rij {
  display: grid; grid-template-columns: 1fr auto 5.5rem; gap: var(--s-3);
  align-items: center; font-size: var(--fs-sm);
}
.reken__rij span:nth-child(2) { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.reken__rij input {
  width: 100%; font: inherit; font-size: var(--fs-sm);
  text-align: right; font-variant-numeric: tabular-nums;
  padding: 0.4rem 0.6rem; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-btn); background: var(--c-mist); color: var(--c-ink);
}
.reken__rij input:focus { outline: none; border-color: var(--c-petrol); background: var(--c-white); }

.reken__uitkomst {
  background: var(--c-mist); border-radius: var(--r-card);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2);
  align-self: start;
}
.reken__bedrag {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.reken__regel { font-size: var(--fs-sm); color: var(--c-muted); }
.reken__voorbeelden { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }

/* ============================================================== 13. Vragen */

.vraag { border-bottom: 1px solid var(--c-line); }
.vraag summary {
  cursor: pointer; list-style: none;
  padding: var(--s-5) 0; font-size: var(--fs-lg); font-weight: var(--fw-semi);
  display: flex; justify-content: space-between; gap: var(--s-4); align-items: center;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+"; color: var(--c-petrol); font-weight: var(--fw-regular);
  font-size: 1.4rem; line-height: 1; flex: none;
  transition: transform var(--dur-base) var(--ease-settle);
}
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag > div { padding-bottom: var(--s-5); max-width: var(--w-text); color: var(--c-ink); }
.vraag > div > * + * { margin-top: var(--s-3); }
.vraag ul { padding-left: 1.15rem; }
.vraag li + li { margin-top: var(--s-2); }

/* =============================================================== 14. Feiten */

/* Vier feiten in gelijke kolommen, met een haarlijn ertussen. Zonder die lijn
   ogen de kolommen ongelijk, omdat de inhoud sterk in lengte verschilt. */
/* De kolommen zijn zo breed als hun inhoud, niet allemaal even breed. Vier
   gelijke kolommen laten na "2022" een gat vallen dat het oog opmerkt; zo
   staan de scheidingslijntjes steeds op dezelfde afstand van de tekst. */
.feiten { display: grid; gap: var(--s-8) 0; }
@media (min-width: 56rem) {
  .feiten { grid-template-columns: repeat(4, max-content); justify-content: start; }
}
.feit {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding-inline: var(--s-8);
  border-inline-start: 1px solid var(--c-line);
}
.feit:first-child { padding-inline-start: 0; border-inline-start: 0; }
@media (max-width: 55.99rem) {
  .feit { padding-inline: 0; border-inline-start: 0; }
}
.feit dt {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted);
}
.feit dd { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semi); }

/* ========================================================= 15. Aanmelden */

.formulier {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.formulier__paar { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .formulier__paar { grid-template-columns: repeat(2, 1fr); } }

.vinkjes {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5); border-radius: var(--r-card);
  background: var(--c-mist);
}
.vinkjes .check span { font-size: var(--fs-base); }
.vinkjes .hint { font-size: var(--fs-sm); color: var(--c-muted); margin-left: 2rem; margin-top: -0.35rem; }

.field .error { display: none; }
.field.is-fout .error { display: block; }
.field.is-fout .input { border-color: var(--c-coral-ink); }

.zijpaneel {
  background: var(--c-ice); border-radius: var(--r-panel);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  display: flex; flex-direction: column; gap: var(--s-5);
  align-self: start;
}
.zijpaneel h2 { font-size: var(--fs-xl); }
.zijpaneel ol { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: var(--s-3); }
.zijpaneel li { color: #2E4B4F; }
.zijpaneel .klein { font-size: var(--fs-sm); color: #2E4B4F; }

/* ===================================================== 16. De chat-animatie
   Twee panelen naast elkaar: links Bizzboard, rechts Station21. Nagebouwd in
   code in plaats van een filmpje — scherp op elk scherm, een fractie van het
   gewicht, en de teksten zijn later met één regel te veranderen.
   Zonder JavaScript en bij verminderde beweging staat het hele gesprek er
   meteen; de animatie zet alleen de beginstand terug.                      */

.gesprek { display: grid; gap: var(--s-4); align-items: stretch; }
@media (min-width: 54rem) {
  .gesprek { grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr); gap: 0; }
}

.paneel2 {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-panel);
}
.paneel2--bizz { border-color: color-mix(in srgb, var(--c-bizz) 28%, var(--c-line)); }

.paneel2__balk {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
}
.paneel2__merk { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.paneel2--bizz .paneel2__merk { color: var(--c-bizz); }
.paneel2__merk--st21 { letter-spacing: 0.08em; color: var(--c-ink); font-weight: var(--fw-medium); }
.paneel2__merk--st21 b { color: var(--c-petrol); font-weight: var(--fw-bold); }

.paneel2__rechts { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-muted); }
.teller {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem;
  padding-inline: 0.35rem; border-radius: var(--r-pill);
  background: var(--c-ice); color: var(--c-petrol-dark);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  transition: background var(--dur-base) var(--ease-calm), transform var(--dur-base) var(--ease-settle);
}
.paneel2--bizz .teller { background: color-mix(in srgb, var(--c-bizz) 14%, var(--c-white)); color: var(--c-bizz); }
.teller.is-nieuw { transform: scale(1.18); }

.paneel2__body {
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  flex: 1;
  min-height: 21rem;
  background: var(--c-mist);
}
.paneel2--bizz .paneel2__body { background: #F7F8FC; }

.paneel2__titel {
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--c-ink);
}
.paneel2__titel::before {
  content: ""; width: 0.85rem; height: 1.05rem; flex: none;
  border: 1px solid var(--c-line-strong); border-radius: 2px;
  background: var(--c-white);
}

.bericht {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: 10px; padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm); line-height: 1.5;
}
.bericht__kop {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-muted);
}
.bericht__merkje {
  font-size: 0.66rem; font-weight: var(--fw-semi); letter-spacing: 0.03em;
  padding: 0.08rem 0.4rem; border-radius: var(--r-btn);
}
.bericht--vanboekhouder { border-left: 3px solid var(--c-bizz); }
.bericht--vanboekhouder .bericht__merkje { background: color-mix(in srgb, var(--c-bizz) 12%, var(--c-white)); color: var(--c-bizz); }
.bericht--eigen  { background: var(--c-ice); border-color: transparent; }
.bericht--jij    { background: color-mix(in srgb, var(--c-bizz) 9%, var(--c-white)); border-color: transparent; }
.bericht--intern {
  background: transparent; border-style: dashed; border-color: var(--c-line-strong);
}
.bericht--intern .bericht__merkje { background: var(--c-mist); color: var(--c-muted); border: 1px solid var(--c-line); }

/* Het typen */
.typen {
  align-self: flex-start;
  display: flex; gap: 0.3rem; align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px;
}
.typen span {
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--c-muted);
  animation: tikken 1.2s ease-in-out infinite;
}
.typen span:nth-child(2) { animation-delay: 0.18s; }
.typen span:nth-child(3) { animation-delay: 0.36s; }
@keyframes tikken { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* De draad tussen de twee panelen */
.draad { display: none; position: relative; }
@media (min-width: 54rem) { .draad { display: block; } }
.draad::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%;
  height: 1px; background: var(--c-line-strong);
}
.draad__stip {
  position: absolute; top: 50%; left: 50%;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--c-petrol);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.draad__stip.naar-links  { animation: reis-links  620ms var(--ease-calm) both; }
.draad__stip.naar-rechts { animation: reis-rechts 620ms var(--ease-calm) both; }
@keyframes reis-links {
  0%   { opacity: 0; transform: translate(120%, -50%) scale(0.4); }
  25%  { opacity: 1; transform: translate(60%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-160%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-220%, -50%) scale(0.4); }
}
@keyframes reis-rechts {
  0%   { opacity: 0; transform: translate(-220%, -50%) scale(0.4); }
  25%  { opacity: 1; transform: translate(-160%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(60%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(120%, -50%) scale(0.4); }
}

/* De beginstand: alleen als JavaScript het overneemt.
   De typ-indicator wordt weggehaald in plaats van doorzichtig gemaakt —
   anders houdt hij zijn plek bezet en ontstaat er een gat tussen de
   berichten, en staan de twee panelen niet meer op dezelfde hoogte. */
.js .gesprek[data-gesprek] .bericht {
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--ease-settle), transform 420ms var(--ease-settle);
}
.js .gesprek[data-gesprek] .bericht.is-er { opacity: 1; transform: none; }
.js .gesprek[data-gesprek] .typen { display: none; }
.js .gesprek[data-gesprek] .typen.is-er { display: flex; }

.gesprek__regie {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-5);
}
.gesprek__stap { font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js .gesprek[data-gesprek] .bericht { opacity: 1; transform: none; }
  .js .gesprek[data-gesprek] .typen { display: none; }
  .draad__stip { display: none; }
}

/* ================================================ 17. Lange lopende tekst
   Voor de juridische pagina's. Eén kolom op leesbreedte, met koppen die
   genoeg lucht krijgen om als ankerpunt te werken.                      */

.tekst { max-width: 52rem; }
.tekst h2, .tekst h3 { max-width: 40rem; }
.tekst h2 { font-size: var(--fs-2xl); margin-top: var(--s-12); }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { font-size: var(--fs-lg); font-weight: var(--fw-semi); margin-top: var(--s-8); }
.tekst p, .tekst ul, .tekst ol { margin-top: var(--s-4); max-width: var(--w-text); }
/* Tabellen in lopende tekst mogen breder dan de leesregel: een tabel lees je
   per rij, niet per regel, en anders breekt de rechterkolom in stukjes. */
.tekst .tabelwrap { max-width: none; width: min(52rem, 100%); }
.tekst .tabel td:last-child, .tekst .tabel th:last-child { white-space: nowrap; }
@media (max-width: 34rem) {
  .tekst .tabel { font-size: var(--fs-sm); }
  .tekst .tabel th, .tekst .tabel td { padding: var(--s-3); }
}
.tekst ul, .tekst ol { padding-left: 1.15rem; }
.tekst li { margin-top: var(--s-2); }
.tekst li > strong { font-weight: var(--fw-semi); }
.tekst .datum { font-size: var(--fs-sm); color: var(--c-muted); }

.inhoud {
  background: var(--c-mist); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-10);
}
.inhoud p { font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); margin: 0 0 var(--s-3); }
.inhoud ol { margin: 0; padding-left: 1.15rem; columns: 2; column-gap: var(--s-8); font-size: var(--fs-sm); }
@media (max-width: 40rem) { .inhoud ol { columns: 1; } }
.inhoud li { margin: 0 0 var(--s-2); break-inside: avoid; }

.tekst .kader, .tekst .inhoud { max-width: 40rem; }
.kader {
  border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-petrol);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--c-white); padding: var(--s-5) var(--s-6);
  margin-top: var(--s-6); max-width: var(--w-text);
}
.kader p:first-child { margin-top: 0; }