/* ============================================================
   CLEEFIO — gedeelde stijl voor alle pagina's
   Referentie: auxia.io. Crème basis, bijna-zwarte blokken, één
   elektrisch blauw. Grote grotesk-koppen (Google Sans, merkregel),
   monospace voor kleine labels. Grote afgeronde kaarten.
   ============================================================ */

@font-face {
  font-family: "Google Sans";
  src: url("fonts/google-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("fonts/google-sans-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

:root {
  --creme:        #FAFAF7;   /* paginakleur: gebroken wit, nauwelijks crème */
  --kaart:        #FFFFFF;   /* lichte kaarten: wit */
  --donker:       #0D1B2A;   /* donkere blokken: merk-navy in plaats van zwart */
  --donker-2:     #0A1522;   /* nog donkerder blok */
  --blauw:        #2F5FE6;   /* knoppen, blauwe vlakken, footer: een tandje dieper dan de wolk voor contrast */
  --blauw-diep:   #2450C7;   /* hover */
  --oranje:       #FA6838;   /* één keer: het probleemwoord */
  --inkt:         #1A1A1A;   /* tekst op crème */
  --inkt-2:       rgba(26, 26, 26, 0.62);
  --inkt-3:       rgba(26, 26, 26, 0.42);
  --wit-tekst:    #F7F7F3;   /* tekst op navy en blauw */
  --wit-tekst-2:  #A9A99B;   /* gedempte tekst op donker */
  --lijn:         rgba(26, 26, 26, 0.10);
  --lijn-licht:   rgba(240, 239, 227, 0.14);
  --r-knop:       10px;
  --r-kaart:      24px;
  --r-klein:      14px;
  --ease:         cubic-bezier(0.32, 0.72, 0, 1);
  --breed:        1232px;
  --t:            47,95,230;   /* paginatint: standaard het merkblauw, per pagina overschreven */
  --t-diep:       36,80,199;   /* dezelfde tint een slag dieper, voor hover */
  --mono:         ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Breekpunt telefoon/bureaublad: max-width 1023.98px tegenover min-width 1024px. Met 1023px bleef er
   een gat: bij sommige zoomstanden is het venster 1023,6 px breed en gold geen van beide opmaken. */
/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: met een klassieke scrollbalk viel die weg zodra het menu opende (Lenis zet
   dan overflow hidden), en dan sprongen de menuknop en de pagina 15 px opzij */
html { background: var(--creme); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--creme); color: var(--inkt);
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 4px; }
.donker :focus-visible, .blauw :focus-visible { outline-color: var(--wit-tekst); }

/* ---------- typografie ---------- */
.reus     { font-size: clamp(48px, 7.2vw, 104px); line-height: 0.95; letter-spacing: -0.03em; }
.groot    { font-size: clamp(38px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.03em; }
.titel    { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; }
.kop      { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.015em; }
.lood     { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; }
.mono     { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.stil     { color: var(--inkt-2); }
.donker .stil { color: var(--wit-tekst-2); }
.blauw .stil { color: rgba(240, 239, 227, 0.8); }

/* ---------- lay-out ---------- */
.wrap { width: min(var(--breed), 100% - 48px); margin-inline: auto; }
.sectie { padding-block: clamp(80px, 10vw, 144px); }
.sectie--krap { padding-block: clamp(56px, 6vw, 96px); }
.donker { background: var(--donker); color: var(--wit-tekst); }
.donker-2 { background: var(--donker-2); color: var(--wit-tekst); }
.blauw  { background: var(--blauw); color: var(--wit-tekst); }
.twee { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.twee > .tekst { padding-top: 12px; display: flex; flex-direction: column; gap: 20px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; }
@media (max-width: 1023.98px) { .twee { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 767px)  { .wrap { width: min(var(--breed), 100% - 40px); } }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-knop);
  background: var(--blauw); color: var(--wit-tekst); font-weight: 500; font-size: 16px;
  transition: background 200ms var(--ease), transform 200ms var(--ease), opacity 200ms var(--ease);
  white-space: nowrap;
}
.knop:hover { background: var(--blauw-diep); }
.knop:active { transform: scale(0.98); }
.knop--licht { background: var(--kaart); color: var(--inkt); }
.knop--licht:hover { background: #fff; }
.knop--grijs { background: rgba(26,26,26,0.08); color: var(--inkt); }
.knop--grijs:hover { background: rgba(26,26,26,0.14); }
/* groen: voor de uitnodiging om langs te komen, de enige plek waar we dat vragen.
   Valt op tussen het blauw, met dezelfde vlakke vorm als de rest. */
.knop--groen { background: #12854A; box-shadow: 0 14px 28px -16px rgba(18,133,74,0.65); }
.knop--groen:hover { background: #0E6B3B; }
.kaart--donker .knop--grijs { background: rgba(240,239,227,0.9); color: var(--inkt); }
.kaart--donker .knop--grijs:hover { background: #fff; }
.kaart--blauw .knop--grijs { background: rgba(240,239,227,0.22); color: var(--wit-tekst); }
.kaart--blauw .knop--grijs:hover { background: rgba(240,239,227,0.3); }
.knop--klein { min-height: 40px; padding: 0 16px; font-size: 15px; }
.tekstlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: inherit; opacity: 0.85; transition: opacity 200ms var(--ease); }
.tekstlink:hover { opacity: 1; }
.tekstlink svg { width: 14px; height: 14px; transition: transform 200ms var(--ease); }
.tekstlink:hover svg { transform: translateX(3px); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }

/* ---------- tekstpagina's: voorwaarden, privacy, verwerkersovereenkomst ----------
   Artikelen met genummerde leden en opsommingen. De reset bovenin haalt nummers en
   bolletjes van lijsten en geeft links geen eigen kleur; hier krijgen ze die terug. Alleen
   wat direct in het artikel staat, zodat de FAQ (kopblok, vragen, slotblok) blijft zoals hij is. */
.tekstpagina > h2 { margin-top: 44px; }
.tekstpagina > h3 { margin-top: 28px; }
.tekstpagina > :first-child { margin-top: 0; }
.tekstpagina > :is(h2, h3) + * { margin-top: 10px; }
.tekstpagina > :is(p, ol, ul) + :is(p, ol, ul) { margin-top: 12px; }
.tekstpagina > :is(ol, ul) { padding-left: 1.5em; }
.tekstpagina > ol { list-style: decimal; }
.tekstpagina > ul { list-style: disc; }
.tekstpagina > :is(ol, ul) > li + li { margin-top: 6px; }
.tekstpagina > :is(ol, ul) > li::marker { color: var(--inkt-2); }
.tekstpagina a:not(.knop) { color: var(--blauw); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* het slotblok onder de vragen is klein en staat in de tekstkolom: wat lucht tussen kop, zin en knoppen */
.tekstpagina .slot h2 + p { margin-top: 10px; }
.tekstpagina .slot .knoppen { margin-top: 24px; }
/* op de telefoon staan de twee knoppen onder elkaar: dan even breed, zoals de afspraakknop elders */
@media (max-width: 767px) { .tekstpagina .slot .knop { width: 100%; } }
/* de kop boven de vragen stond direct op de lijn van de eerste vraag; de j stak erdoorheen */
.tekstpagina > .kop { margin-bottom: clamp(24px, 3vw, 40px); }
/* De FAQ heeft geen aparte paginakop meer: de kop boven de vragen is de paginakop en staat
   net onder 'Terug naar de homepage', op een regel. Het slotblok 'Nog een vraag?' is een klein
   blok in de tekstkolom, niet het grote slot onderaan andere pagina's: gewone lucht erboven,
   en daarna komt meteen de footer. */
.hero--pagina .tekstpagina .groot { max-width: none; }
.tekstpagina .slot { padding: clamp(48px, 5vw, 72px) 0 0; }
/* Overige pagina's: alle documenten als een menu in een kaart, met contact eronder.
   Zelfde opbouw als de FAQ: kop onder 'Terug naar de homepage', het slotblok onderaan. */
.documenten { display: block; border-radius: var(--r-kaart); background: var(--kaart); border: 1px solid var(--lijn); overflow: hidden; }
.tekstpagina a.document { display: grid; grid-template-columns: 44px 1fr 16px; align-items: center; gap: 18px;
              padding: 22px clamp(18px, 2.4vw, 28px); color: inherit; text-decoration: none;
              transition: background 200ms var(--ease); }
.tekstpagina a.document:focus-visible { outline-offset: -3px; border-radius: 0; }
.document + .document { border-top: 1px solid var(--lijn); }
.document__icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
              background: rgba(var(--t),0.10); color: rgb(var(--t)); }
.document__icoon svg { width: 22px; height: 22px; }
.document__tekst b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.document__tekst span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--inkt-2); }
.document__pijl { width: 16px; height: 16px; color: var(--inkt-3); transition: transform 200ms var(--ease), color 200ms var(--ease); }
@media (hover: hover) {
  .tekstpagina a.document:hover { background: rgba(var(--t),0.05); }
  .tekstpagina a.document:hover .document__pijl { transform: translateX(3px); color: rgb(var(--t)); }
}
@media (max-width: 767px) {
  .tekstpagina a.document { grid-template-columns: 40px 1fr 14px; gap: 14px; padding: 18px; }
  .document__icoon { width: 40px; height: 40px; }
  .document__tekst b { font-size: 17px; }
  .document__tekst span { font-size: 14px; }
}

/* ---------- menu ---------- */
.nav {
  position: relative; z-index: 50; height: 80px;
}
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: flex-start; gap: 4px; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: inherit; }
.logo img { width: 22px; height: auto; margin-top: -5px; }
.nav__links { display: flex; align-items: center; gap: 36px; font-size: 16px; }
.nav__links a { color: var(--inkt-2); transition: color 150ms var(--ease); }
.nav__links a:hover { color: var(--inkt); }
.nav__acties { display: flex; align-items: center; gap: 16px; }
.menu-knop { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -10px; }
.menu-knop span { display: block; width: 20px; height: 1.5px; background: var(--inkt); position: relative; transition: background 150ms; }
.menu-knop span::before, .menu-knop span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--inkt); transition: transform 250ms var(--ease), top 250ms var(--ease); }
.menu-knop span::before { top: -6px; }
.menu-knop span::after  { top: 6px; }
.menu-knop[aria-expanded="true"] span { background: transparent; }
.menu-knop[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-knop[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }
.menu-vel {
  position: absolute; top: 68px; left: 0; right: 0; z-index: 49; padding: 8px 24px 32px;
  background: var(--creme); border-bottom: 1px solid var(--lijn);
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  /* dicht ook echt weg (visibility), anders liep de Tab-toets langs onzichtbare links */
  visibility: hidden;
  transition: opacity 200ms var(--ease), transform 250ms var(--ease), visibility 0s linear 250ms;
}
.menu-vel.is-open { transform: none; opacity: 1; pointer-events: auto; visibility: visible;
                    transition: opacity 200ms var(--ease), transform 250ms var(--ease), visibility 0s; }
.menu-vel a { display: block; padding: 16px 0; font-size: 24px; letter-spacing: -0.02em; border-bottom: 1px solid var(--lijn); }
.menu-vel a.knop { display: flex; margin-top: 16px; width: 100%; border-bottom: 0; font-size: 17px; }
.menu-vel a.knop + a.knop { margin-top: 10px; }
.menu-vel__wa { background: #25D366; color: #fff; }
.menu-vel__wa:hover { background: #1EB855; }
.menu-vel__wa svg { width: 18px; height: 18px; }
@media (max-width: 1023.98px) {
  /* de kop loopt mee met de scroll: links het logo in een glazen pil, rechts de menuknop in een cirkel.
     De balk zelf is er niet meer, alleen die twee losse dingen zweven boven de pagina. */
  /* het woordmerk staat groot open en krimpt naar het hoekje zodra je gaat scrollen */
  .nav { position: relative; height: 96px; background: none; }
  .logo { position: fixed; top: 18px; left: 20px; z-index: 55; font-size: 58px; letter-spacing: -0.04em;
          transform-origin: left center; will-change: transform, opacity; }
  /* als hij klein is, vervaagt hij: een kaal woordmerk dat over de inhoud heen blijft staan leest niet */
  .logo.is-weg { pointer-events: none; }
  /* het wolkje uit het woordmerk vliegt weg als menuknop; hier houden we alleen zijn plek vrij */
  .logo img { width: 0.8em; height: auto; margin-top: -0.22em; visibility: hidden; }
  /* Vaste breedte, anders schuift het wolkje mee zodra het echte lettertype binnenkomt en het
     woord 13 px breder wordt dan in het vervangende lettertype. Nu groeit het woord in het
     gaatje voor de wolk; de wolk blijft staan, en daarmee ook de menuknop die erop begint.
     3.9em is het woord in Google Sans plus 4 px lucht plus de wolk van 0.8em. */
  .logo { width: 3.9em; }
  .logo img { margin-left: auto; }
  .menu-knop span { position: relative; z-index: 1; }
  /* het logo staat er los bovenop, zonder glas; alleen de kleur draait mee */
  .logo { transition: color 300ms var(--ease); }
  /* het menuknopje is het wolkje uit het logo: blauw matglas, in de vorm van de wolk geknipt.
     De vorm is het pad uit img/wolk.svg, vereenvoudigd tot 54 punten. */
  /* wolkvorm uit img/wolk.svg, vereenvoudigd tot 54 punten; knop en achtergrondwolken delen hem */
  .menu-knop, .prijs__lucht i, .bouw__lucht i, .chaos__lucht i, .vert__lucht i, .vlak__lucht i, .dash__merk i { -webkit-clip-path: polygon(54.4% 0.1%, 58.6% 0.1%, 64.7% 2.0%, 67.3% 3.5%, 71.8% 7.7%, 75.8% 13.2%, 78.8% 19.6%, 80.9% 27.1%, 81.9% 33.0%, 86.8% 35.9%, 89.6% 38.4%, 91.3% 40.2%, 95.2% 46.1%, 97.6% 51.9%, 98.7% 55.5%, 99.4% 59.4%, 99.9% 65.5%, 99.3% 73.8%, 97.9% 79.6%, 95.9% 84.7%, 93.2% 89.5%, 88.8% 94.5%, 83.3% 98.2%, 78.6% 99.6%, 68.0% 99.9%, 24.1% 99.2%, 17.8% 98.6%, 15.1% 97.7%, 12.5% 96.3%, 9.2% 93.4%, 6.1% 89.6%, 3.6% 84.9%, 1.4% 78.8%, 0.1% 70.9%, 0.0% 63.5%, 0.7% 58.5%, 1.8% 53.5%, 4.1% 47.4%, 5.4% 45.1%, 9.0% 40.8%, 11.8% 38.4%, 15.6% 36.3%, 16.2% 34.6%, 17.1% 28.7%, 18.9% 23.5%, 21.1% 19.7%, 23.6% 16.7%, 26.1% 14.9%, 28.8% 13.8%, 32.2% 13.5%, 36.2% 14.2%, 40.6% 8.2%, 44.0% 5.0%, 48.4% 2.2%);
                                     clip-path: polygon(54.4% 0.1%, 58.6% 0.1%, 64.7% 2.0%, 67.3% 3.5%, 71.8% 7.7%, 75.8% 13.2%, 78.8% 19.6%, 80.9% 27.1%, 81.9% 33.0%, 86.8% 35.9%, 89.6% 38.4%, 91.3% 40.2%, 95.2% 46.1%, 97.6% 51.9%, 98.7% 55.5%, 99.4% 59.4%, 99.9% 65.5%, 99.3% 73.8%, 97.9% 79.6%, 95.9% 84.7%, 93.2% 89.5%, 88.8% 94.5%, 83.3% 98.2%, 78.6% 99.6%, 68.0% 99.9%, 24.1% 99.2%, 17.8% 98.6%, 15.1% 97.7%, 12.5% 96.3%, 9.2% 93.4%, 6.1% 89.6%, 3.6% 84.9%, 1.4% 78.8%, 0.1% 70.9%, 0.0% 63.5%, 0.7% 58.5%, 1.8% 53.5%, 4.1% 47.4%, 5.4% 45.1%, 9.0% 40.8%, 11.8% 38.4%, 15.6% 36.3%, 16.2% 34.6%, 17.1% 28.7%, 18.9% 23.5%, 21.1% 19.7%, 23.6% 16.7%, 26.1% 14.9%, 28.8% 13.8%, 32.2% 13.5%, 36.2% 14.2%, 40.6% 8.2%, 44.0% 5.0%, 48.4% 2.2%); }
  /* max() zodat de knop nooit achter de statusbalk van de telefoon valt in browsers
     die de pagina tot bovenaan het scherm tekenen, zoals die van Instagram */
  .menu-knop { display: inline-flex; position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: 20px; z-index: 60;
               width: 68px; height: 46px; margin-right: 0; padding-top: 4px;
               border: 0; border-radius: 0; box-shadow: none;
               background: #4A7BFF;   /* dezelfde blauw als het wolkje in het logo */
               filter: drop-shadow(0 6px 14px rgba(13,27,42,0.18));
               transform-origin: 0 0; will-change: transform;
               transition: background 300ms var(--ease); }
  /* alleen bij het openen en sluiten van het menu zweven wolk en woordmerk naar hun plek */
  .menu-knop.zweeft { transition: transform 520ms var(--ease), background 300ms var(--ease); }
  .logo.zweeft { transition: transform 520ms var(--ease); }
  .menu-knop span, .menu-knop span::before, .menu-knop span::after { background: var(--wit-tekst); }
  /* de clip-path knipt een focusrand weg, dus kleurt de wolk zelf op bij toetsenbordfocus */
  .menu-knop:focus-visible { outline: none; background: var(--blauw-diep); }
  /* op een productpagina is de wolk de kleur van die pagina, ook tijdens het scrollen */
  :is(.pag--ai, .pag--sw, .pag--web) .menu-knop { background: rgb(var(--t)); }
  :is(.pag--ai, .pag--sw, .pag--web) .menu-knop:focus-visible { background: rgb(var(--t-diep)); }
  /* boven een donkere sectie draait het glas om, anders leest het logo niet */
  .nav.is-donker .logo { color: var(--wit-tekst); }
  /* nooit hoger dan het scherm, en zelf scrollbaar: op een liggende telefoon of ingezoomd
     vielen 'Plan een gesprek' en WhatsApp anders onbereikbaar onder de rand */
  .menu-vel { position: fixed; top: 0; padding-top: 76px; max-height: 100vh; max-height: 100dvh;
              overflow-y: auto; overscroll-behavior: contain; }
  /* de vaste knoppenbalk lag over het open menu */
  html.menu-open .vastebalk { opacity: 0; pointer-events: none; }
  .nav__links, .nav__acties .knop { display: none; }
}
@media (min-width: 1024px) { .menu-vel { display: none; } }
/* Beginstand van de menuknop op de telefoon: het wolkje naast het woord, precies waar het
   script hem bij het begin van de vlucht neerzet. Zo staat hij vanaf het eerste beeld goed,
   ook als het script nog onderweg is; anders zat hij eerst rechtsboven en sprong hij daarna
   naar het woord. Zodra het script de vlucht overneemt krijgt html de klasse vlucht en
   laat deze regel los. Vanaf links verankerd, want 100vw telt een klassieke scrollbalk mee.
   Wolk in het logo: 20px + (3.9em - 0.8em) van links en 18px - 0.22em van boven, op 58px.
   Schaal: 0.8em van 58px gedeeld door de 68px van de knop. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  html:not(.vlucht) .menu-knop { right: auto; left: calc(20px + 58px * 3.1);
    transform: translateY(calc(18px - 58px * 0.22 - max(12px, env(safe-area-inset-top, 0px)))) scale(0.6824); }
  html:not(.vlucht) .menu-knop span { opacity: 0; }
}
/* Met 'verminder beweging' vliegt er niets: dan scrolt het woordmerk gewoon met de kop mee,
   anders bleef het groot vast linksboven over de inhoud staan. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) { .logo { position: absolute; } }

/* ---------- pillen en labels ---------- */
.pil {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(26,26,26,0.06); color: var(--inkt); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.pil svg { width: 10px; height: 10px; color: var(--blauw); }

/* ---------- kaarten ---------- */
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-kaart); }
.kaart--donker { background: var(--donker); color: var(--wit-tekst); border-color: transparent; }
.kaart--blauw  { background: var(--blauw); color: var(--wit-tekst); border-color: transparent; }
.kaart--donker .stil { color: var(--wit-tekst-2); }
.kaart--blauw .stil { color: rgba(240,239,227,0.82); }
.stippen { background-image: radial-gradient(rgba(240,239,227,0.18) 1.4px, transparent 1.6px); background-size: 28px 28px; }

/* ---------- beweging: begintoestanden (alleen als het script draait) ---------- */
html.beweegt [data-in] { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
html.beweegt [data-in].is-in { opacity: 1; transform: none; }
html.beweegt .scherm .bubbel, html.beweegt .scherm .taak, html.beweegt .scherm .advies, html.beweegt .scherm .notitie, html.beweegt .auto__rij { opacity: 0; transform: translateY(10px); }
html.beweegt [data-scrub] .w { color: var(--inkt-3); }
/* lopende tekst wordt tijdens de scroll woord voor woord dikker; de breedte staat vast
   op de vette maat, zodat er niets verspringt. De meetklasse duurt een frame. */
/* nowrap: een woord met een koppelteken brak binnen zijn eigen vakje af, en dat vakje
   heeft de breedte van het hele woord. Dan valt er een gat in de regel. */
html.beweegt p[data-scrub] .w { display: inline-block; white-space: nowrap; }
/* meetstand; het gewicht is instelbaar omdat we ook halverwege meten */
html.beweegt p[data-scrub].meet-dik .w { font-weight: var(--meet-gewicht, 700); width: auto; letter-spacing: normal; }
html.beweegt .donker [data-scrub] .w { color: rgba(240,239,227,0.28); }
html.beweegt .blauw [data-scrub] .w { color: rgba(240,239,227,0.38); }

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ---------- hero met agent-stroom ---------- */
.hero { padding: 48px 0 96px; }
.stroom { position: relative; height: 330px; margin-bottom: 56px; }
.stroom__lijn { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
/* geen vector-effect: non-scaling-stroke; dan rekent Chromium de streepjes in schermpixels en liep de
   lijn tussen 1024 en 1280 px breed voor de pillen uit */
.stroom__lijn path { fill: none; stroke: var(--blauw); stroke-width: 1.5; }
.stroom__pil { position: absolute; transform: translate(-50%, -50%); background: #ECECE8; }
.stroom__kaart {
  position: absolute; width: 214px; padding: 18px 16px 14px; border-radius: 16px;
  background: var(--kaart); box-shadow: 0 30px 50px -20px rgba(26,26,26,0.35), 0 2px 4px rgba(26,26,26,0.06);
  font-size: 16px; line-height: 1.35; letter-spacing: -0.01em;
}
.stroom__kaart i { display: grid; place-items: center; width: 26px; height: 26px; margin: 18px 0 0 auto; border-radius: 8px; background: var(--blauw); color: var(--wit-tekst); font-style: normal; }
.stroom__kaart i svg { width: 12px; height: 12px; }
.stroom__taken { position: absolute; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
html.beweegt .stroom__pil, html.beweegt .stroom__kaart, html.beweegt .stroom__taken { opacity: 0; }
html.beweegt .stroom__kaart { transform: translateY(12px); }
.hero .reus { max-width: 18ch; font-size: clamp(44px, 6.4vw, 92px); }
.hero .lood { margin-top: 32px; max-width: 30em; }
.hero .knoppen { margin-top: 40px; }
@media (max-width: 1023.98px) {
  .hero .reus { max-width: none; }
}
@media (max-width: 767px) {
  .hero { padding: 24px 0 72px; }
}

/* ---------- probleem: van rommel naar één lijn ---------- */
.reis { position: relative; margin-top: clamp(56px, 6vw, 96px); }
.reis__kaart { position: sticky; top: 112px; min-height: 480px; padding: 36px 40px; border-radius: var(--r-kaart); border: 1px solid var(--lijn-licht); overflow: hidden; }
.reis__kaart--rommel { background: rgba(255,255,255,0.03); }
.reis__kaart--blauw { background: var(--blauw); border-color: transparent; margin-top: 48px; }
.reis__kop { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; color: var(--wit-tekst-2); margin-bottom: 8px; position: relative; z-index: 1; }
.reis__kop b { font-weight: 500; color: var(--oranje); }
.reis__kaart--blauw .reis__kop { color: rgba(240,239,227,0.8); }
.reis__kaart--blauw .reis__kop b { color: var(--wit-tekst); }

/* ---------- drie lagen (isometrische stapel) ---------- */
.grote-kaart { padding: clamp(32px, 4vw, 56px); }
.lagen { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: clamp(48px, 5vw, 80px); }
.iso { position: relative; height: 560px; }
.iso__laag {
  position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px;
  border-radius: 34px; transform: rotateX(58deg) rotateZ(45deg);
  box-shadow: 0 40px 60px -30px rgba(26,26,26,0.45); will-change: transform;
}
.iso__laag--1 { background: var(--donker); z-index: 3; }
.iso__laag--2 { background: var(--blauw); z-index: 2; }
.iso__laag--3 { background: var(--kaart); z-index: 1; box-shadow: 0 40px 60px -30px rgba(26,26,26,0.25); border: 1px solid var(--lijn); }
.iso__label { position: absolute; left: clamp(-36px, calc(50% - 330px), 22px); top: 50%; margin-top: -80px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--inkt); white-space: nowrap; pointer-events: none; }
.iso__label--1 { z-index: 4; }
/* difference: donker op crème en licht op de donkere laag die er tijdens het uitwaaieren overheen schuift */
.iso__label--2 { z-index: 3; color: #fff; mix-blend-mode: difference; }
.iso__label--3 { z-index: 2; }

/* ---------- inhoud van de lagen: printplaat (software) en mini-homepage (websites) ---------- */
.iso__chip { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.iso__chip path { fill: none; stroke: rgba(240,239,227,0.38); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.iso__chip .puls { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 14 700; stroke-dashoffset: 714; animation: puls 3.4s linear infinite; animation-delay: var(--d, 0s); }
@keyframes puls { to { stroke-dashoffset: 0; } }
.iso__chip rect { fill: var(--blauw-diep); stroke: rgba(240,239,227,0.6); stroke-width: 1.5; }
.iso__chip .die { fill: rgba(240,239,227,0.2); stroke: none; }
.iso__chip .stip { fill: #fff; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .iso__chip .puls { animation: none; opacity: 0; } }
.iso__site { position: absolute; inset: 11%; display: flex; flex-direction: column; gap: 7%; }
.iso__site i, .iso__site b, .iso__site span { display: block; border-radius: 999px; }
.iso__site-nav { display: flex; align-items: center; gap: 4%; height: 4%; }
.iso__site-logo { width: 4%; aspect-ratio: 1; border-radius: 50%; background: var(--donker); }
.iso__site-nav span { width: 8%; height: 40%; background: #DEDED8; }
.iso__site-nav b { margin-left: auto; width: 13%; height: 100%; background: var(--donker); }
.iso__site-hero { display: flex; flex-direction: column; gap: 5%; }
.iso__site-kop { width: 62%; height: 11px; background: var(--donker); }
.iso__site-kop.is-kort { width: 40%; }
.iso__site-sub { width: 52%; height: 4px; margin-top: 2px; background: #DEDED8; }
.iso__site-knop { width: 22%; height: 10px; margin-top: 4px; background: var(--blauw); }
.iso__site-beeld { flex: 1; border-radius: 10px; background: linear-gradient(135deg, #F1F1EC, #E3E3DD); }
.iso__tegels { position: absolute; inset: 40px 70px 70px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.iso__tegels i { border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; font-style: normal; color: rgba(255,255,255,0.9); }
.iso__tegels svg { width: 30px; height: 30px; }
.tegel--outlook { background: #0F6CBD; }
.tegel--whatsapp { background: #128C7E; }
.tegel--agenda { background: #1A73E8; }
.tegel--excel { background: #185C37; }
.tegel--boekhouding { background: #475569; }  /* niet dezelfde kleur als het vlak, anders verdwijnt de tegel */
.tegel--site { background: #6D28D9; }
.lagen-lijst { display: flex; flex-direction: column; gap: 28px; }
/* korte lijn langs de vierkantjes: kleurt van grijs naar blauw met het uitwaaieren van de lagen, elk blok springt aan */
.lagen-lijst { position: relative; }
.lijst__lijn { position: absolute; left: 3px; width: 2px; background: rgba(13,27,42,0.12); border-radius: 1px; }
.lijst__lijn > i { position: absolute; inset: 0; background: var(--blauw); transform-origin: top; transform: scaleY(0); }
html.beweegt .lagen-lijst li i { background: #D6D6CF !important; transition: background 400ms var(--ease); }
html.beweegt .lagen-lijst li.is-aan i { background: var(--blauw) !important; }
html.beweegt .lagen-lijst li h3 { color: #9A9A90; transition: color 400ms var(--ease); }
html.beweegt .lagen-lijst li.is-aan h3 { color: var(--inkt); }
.lagen-lijst li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.lagen-lijst li i { width: 8px; height: 8px; margin-top: 12px; border-radius: 1px; background: var(--donker); }
.lagen-lijst li:nth-of-type(2) i { background: var(--blauw); }
.lagen-lijst li:nth-of-type(3) i { background: #B8B7A6; }
.lagen-lijst h3 { font-size: 24px; letter-spacing: -0.02em; }
.lagen-lijst h3 span { margin-left: 8px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--inkt-2); }  /* grijze toelichting achter de kop */
.lagen-lijst p { margin-top: 6px; color: var(--inkt-2); }

/* ---------- productkaarten ---------- */
.producten { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.product { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 40px; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-kaart); }
.product__kop .titel { max-width: 12ch; }
.product__kop .lood { margin-top: 16px; max-width: 28em; }
.product__kop .mono { display: block; margin-top: 28px; }
.product .kolomkop { display: block; margin-bottom: 18px; opacity: 0.85; }
.product li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 16px; line-height: 1.4; }
.product li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.product .vink svg { color: #3DDC84; }
.product .plus svg { opacity: 0.9; }

/* ---------- werkwijze: getekende lijn met vier stappen ---------- */
.proces { position: relative; }
@media (min-width: 1024px) { .proces { overflow-x: clip; } }   /* de schermen schuiven zijwaarts binnen; geen schuifbalk */
.proces__kop { max-width: 14ch; }
.proces__kop + .lood { margin-top: 24px; max-width: 34em; }
.proces__lijn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.proces__lijn path { fill: none; stroke: var(--blauw); stroke-width: 1.5; }
.proces__lijn rect { fill: var(--creme); }
.proces__lijn text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--inkt); }
.stappen { position: relative; margin-top: clamp(64px, 8vw, 120px); display: flex; flex-direction: column; gap: clamp(96px, 12vw, 200px); }
.stap { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.stap--rechts { grid-template-columns: 1fr 300px; }
.stap--rechts .stap__tekst { order: 2; }
.stap__tekst { text-align: center; }
.stap__pil { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 28px; border-radius: 999px; background: var(--blauw); color: var(--wit-tekst); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.stap__pil svg { width: 18px; height: 18px; }
.stap__tekst p { margin-top: 20px; color: var(--inkt-2); font-size: 15px; line-height: 1.5; max-width: 22em; margin-inline: auto; }
.stap__beeld { min-width: 0; }
@media (max-width: 1023.98px) {
  .stap, .stap--rechts { grid-template-columns: 1fr; gap: 24px; }
  .stap--rechts .stap__tekst { order: 0; }
  .stap__tekst { text-align: left; }
  .stap__tekst p { margin-inline: 0; }
  .proces__lijn { display: none; }
  .stappen { gap: 64px; }
}

/* schermen in de stappen: donkere en lichte panelen zoals productschermen */
.scherm { border-radius: 22px; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(26,26,26,0.35), 0 2px 6px rgba(26,26,26,0.05); }
.scherm--donker { background: var(--donker); color: var(--wit-tekst); }
.scherm--licht { background: var(--kaart); color: var(--inkt); border: 1px solid var(--lijn); }
.scherm__kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--lijn-licht); font-size: 18px; font-weight: 500; }
.scherm--licht .scherm__kop { border-bottom-color: var(--lijn); }
.logo-klein { display: inline-flex; align-items: center; gap: 12px; }
.logo-klein i { width: 36px; height: 36px; border-radius: 10px; background: var(--blauw); display: grid; place-items: center; }
.logo-klein i img { width: 18px; }
.scherm__kop .mono { opacity: 0.6; }
.scherm__body { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.bubbel { max-width: 78%; padding: 14px 18px; border-radius: 16px; font-size: 15px; line-height: 1.4; background: rgba(240,239,227,0.08); border: 1px solid var(--lijn-licht); }
.bubbel--rechts { align-self: flex-end; background: rgba(240,239,227,0.12); }
.scherm--licht .bubbel { background: rgba(26,26,26,0.05); border-color: var(--lijn); }
.scherm--licht .bubbel--rechts { background: var(--blauw); color: var(--wit-tekst); border-color: transparent; }
.paneel { padding: 22px 24px; border-radius: 16px; background: rgba(240,239,227,0.05); border: 1px solid var(--lijn-licht); display: flex; flex-direction: column; gap: 14px; }
.scherm--licht .paneel { background: rgba(26,26,26,0.03); border-color: var(--lijn); }
.scherm--licht .taak { background: rgba(26,26,26,0.03); border-color: var(--lijn); }
.scherm--licht .taak i { border-color: rgba(26,26,26,0.2); }
.paneel > .mono { opacity: 0.6; }
.balken { display: grid; gap: 10px; }
.balk { display: grid; grid-template-columns: 170px 1fr 44px; gap: 14px; align-items: center; font-size: 15px; }
.balk i { height: 12px; border-radius: 6px; background: rgba(240,239,227,0.1); overflow: hidden; display: block; }
.balk i::after { content: ""; display: block; height: 100%; width: var(--w, 50%); border-radius: 6px; background: var(--blauw); transform-origin: left; }
html.beweegt .balk i::after { transform: scaleX(var(--groei, 0)); }
.balk.is-oranje i::after { background: var(--oranje); }
.balk span:last-child { text-align: right; font-family: var(--mono); font-size: 12px; opacity: 0.7; }
.balk.is-oranje span:last-child { color: var(--oranje); opacity: 1; }
.advies { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--lijn-licht); font-size: 14px; line-height: 1.4; color: var(--wit-tekst-2); }
.advies--actief { border-color: var(--oranje); color: var(--wit-tekst); }
.advies svg { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--blauw); }
.advies--actief svg { color: var(--oranje); }
.scherm--licht .advies, .scherm--licht .advies--actief { color: var(--inkt); }  /* op een licht scherm donkere tekst */
.taken { display: flex; flex-direction: column; gap: 10px; }
.taak { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(240,239,227,0.06); border: 1px solid var(--lijn-licht); font-size: 15px; }
.taak i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(240,239,227,0.25); display: grid; place-items: center; }
.taak.is-klaar i { background: #3DDC84; border-color: #3DDC84; color: #0F2E1D; }
.taak.is-bezig i { background: var(--blauw); border-color: var(--blauw); }
.taak i svg { width: 12px; height: 12px; }
.taak.is-bezig i svg { animation: draai 1.2s linear infinite; }
.taak .mono { margin-left: auto; opacity: 0.5; }
@keyframes draai { to { transform: rotate(360deg); } }
.scherm__split { display: grid; grid-template-columns: 200px 1fr; }
.scherm__zij { padding: 24px 20px; background: rgba(26,26,26,0.04); border-right: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 6px; }
.scherm__zij .mono { opacity: 0.5; margin-bottom: 8px; }
.scherm__zij span { padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.scherm__zij span.is-actief { background: rgba(26,26,26,0.08); }
.scherm__zij span:last-child { margin-top: auto; opacity: 0.5; font-size: 14px; }
.scherm__hoofd { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.telefoontje { color: var(--inkt); flex: none; width: 200px; aspect-ratio: 9 / 17; border-radius: 26px; background: #fff; border: 1px solid var(--lijn); padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; box-shadow: 0 20px 40px -20px rgba(26,26,26,0.35); }
.telefoontje b { font-weight: 500; font-size: 13px; padding: 4px 4px 2px; }
.telefoontje .rij { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--creme); }
.telefoontje .rij i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(26,26,26,0.2); }
.telefoontje .rij.is-klaar i { background: var(--blauw); border-color: var(--blauw); }
.telefoontje .knopje { margin-top: auto; text-align: center; padding: 10px; border-radius: 999px; background: var(--blauw); color: var(--wit-tekst); font-weight: 500; font-size: 12px; }
.proefmodel-rij { display: flex; gap: 24px; align-items: flex-start; }
.proefmodel-rij .notities { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.notitie { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--lijn); font-size: 14px; line-height: 1.4; }
.notitie .mono { opacity: 0.5; display: block; margin-bottom: 4px; }
.notitie--ok { border-color: rgba(29,111,66,0.5); }
.notitie--ok .mono { color: #1D6F42; opacity: 1; }
@media (max-width: 767px) { .scherm__split { grid-template-columns: 1fr; } .scherm__zij { display: none; } .proefmodel-rij { flex-direction: column; } .balk { grid-template-columns: 120px 1fr 40px; } .scherm__body, .scherm__hoofd { padding: 20px; } }

/* ---------- automatiseringen: rijen met labels en de zin in het midden ---------- */
.auto { position: relative; padding: clamp(96px, 12vw, 180px) 0; overflow: hidden; }
.auto__rijen { display: flex; flex-direction: column; gap: 22px; }
.auto__rij { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(240,239,227,0.45); }
.auto__rij i { height: 1px; background: rgba(240,239,227,0.1); }
.auto__rij .pil { background: rgba(47,95,230,0.18); color: #B9C7E8; }
.auto__rij .pil svg { color: #B9C7E8; }
.auto__midden { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; padding: 48px clamp(40px, 8vw, 140px); background: radial-gradient(closest-side, var(--donker-2) 60%, transparent); }
@media (max-width: 767px) { .auto__midden { position: static; transform: none; padding: 0 0 40px; background: none; } }

/* ---------- vertrouwen: drie kolommen met blauwe rand ---------- */
.vertrouwen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 80px); margin-top: clamp(64px, 8vw, 120px); }
.vertrouwen li { border-left: 3px solid var(--blauw); padding: 4px 0 4px 24px; }
.vertrouwen svg { width: 64px; height: 64px; color: var(--wit-tekst); }
.vertrouwen h3 { margin-top: 56px; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.025em; line-height: 1.05; }
.vertrouwen p { margin-top: 16px; color: var(--wit-tekst-2); }
@media (max-width: 767px) { .vertrouwen { grid-template-columns: 1fr; gap: 40px; } .vertrouwen h3 { margin-top: 24px; } }

/* ---------- slotsectie ---------- */
.slot { padding: clamp(96px, 12vw, 180px) 0 clamp(64px, 8vw, 120px); }
.slot .groot { max-width: 14ch; }
.slot .knoppen { margin-top: 48px; }

/* ---------- footer ---------- */
.voet { padding: 0 0 56px; overflow: hidden; }
.voet__baan, .voet__set { display: contents; }
.voet__set--kopie { display: none; }
.voet__merk { position: relative; display: flex; align-items: flex-start; padding: clamp(24px, 4vw, 64px) 0 clamp(32px, 5vw, 80px); }
.voet__merk .letter { display: inline-block; font-size: clamp(80px, 21.5vw, 310px); line-height: 0.9; letter-spacing: -0.045em; font-weight: 500; color: var(--wit-tekst); }
html.beweegt .voet__merk .letter { transform: translateY(40%); opacity: 0; }
.voet__wolk { width: clamp(40px, 6.5vw, 96px); height: auto; margin: clamp(10px, 1.5vw, 26px) 0 0 clamp(4px, 0.6vw, 10px); }
html.beweegt .voet__wolk { opacity: 0; transform: translateY(24px); }
.voet__onder { display: grid; grid-template-columns: 1fr auto auto auto; gap: 32px clamp(32px, 6vw, 112px); align-items: start; padding-top: 32px; }
.voet__legal { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 120px; }
.voet__kolom .mono { display: block; margin-bottom: 20px; opacity: 0.9; }
.voet__kolom a { position: relative; display: block; padding: 6px 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.voet__kolom a::before { content: ""; position: absolute; left: -18px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--wit-tekst); transform: scale(0); transition: transform 250ms var(--ease); }
.voet__kolom a:hover::before { transform: scale(1); }
@media (max-width: 1023.98px) { .voet__onder { grid-template-columns: 1fr 1fr; } .voet__legal { grid-column: 1 / -1; order: 9; min-height: 0; gap: 24px; } }

/* ---------- formulier ---------- */
.form { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-kaart); padding: 8px; }
.veld { padding: 16px 22px; border-bottom: 1px solid var(--lijn); }
.veld label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inkt-2); margin-bottom: 6px; }
.veld input, .veld textarea { width: 100%; border: 0; padding: 0; background: transparent; font: inherit; color: var(--inkt); outline: none; resize: vertical; }
.veld textarea { min-height: 120px; }
.form__voet { padding: 18px 22px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form__voet .stil { font-size: 14px; }
/* de privacyverklaring staat niet meer in de footer, dus de zin bij het formulier linkt ernaartoe */
.form__voet .stil a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.verborgen { position: absolute; left: -9999px; }

/* ---------- toegankelijkheid en scrollgevoel ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html.lenis iframe { pointer-events: none; }
html.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
@media (hover: hover) { html.lenis { overscroll-behavior-y: none; } }
/* Chrome op een laptop ging bij een zijwaartse beweging met twee vingers op het trackpad naar de
   vorige pagina, ook als je dat helemaal niet bedoelde. De site scrollt nergens zijwaarts, dus dat
   gebaar gaat uit op apparaten met een muis of trackpad. De terugknop van de browser werkt gewoon. */
@media (hover: hover) { html, body { overscroll-behavior-x: none; } }

/* ============================================================
   VERSIE 2 — choreografie zoals in de referentievideo
   ============================================================ */

/* waas: onderdelen komen scherp in beeld vanuit een lichte vervaging */
html.beweegt .waas { opacity: 0; filter: blur(10px); transform: translateY(18px); }
html.beweegt [data-hero] { opacity: 0; transform: translateY(16px); }

/* ---------- hero: spooklijn, knooppunten, pillen die oplichten ---------- */
.stroom__spook { stroke: rgba(26,26,26,0.16) !important; }
.stroom__node { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(26,26,26,0.25); background: var(--creme); transform: translate(-50%, -50%); }
.stroom__node::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 1.5px; margin: -0.75px 0 0 -2px; background: rgba(26,26,26,0.35); box-shadow: 0 0 0 0 transparent; }
/* vanaf het eerste beeld verborgen tot de intro ze tekent; anders stonden ze er eerst helemaal */
@media (min-width: 1024px) { html.beweegt .stroom__lijn path { stroke-dasharray: 0 99999px; } html.beweegt .stroom__node { opacity: 0; } }
.stroom__node::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5px; height: 4px; margin: -2px 0 0 -0.75px; background: rgba(26,26,26,0.35); }
html.beweegt .stroom__pil { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.stroom__pil { background: #ECECE8; }
.stroom__pil.is-aan { background: var(--kaart); box-shadow: 0 1px 2px rgba(26,26,26,0.08); }
html.beweegt .stroom__pil:not(.is-aan) { color: var(--inkt-3); }
html.beweegt .stroom__pil:not(.is-aan) svg { color: currentColor; }
.stroom__pil { transition: background 400ms var(--ease), color 400ms var(--ease), box-shadow 400ms var(--ease); }
.taakje { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(26,26,26,0.05); color: var(--inkt-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.taakje i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(26,26,26,0.25); position: relative; flex: none; }
.taakje.is-klaar { color: var(--inkt); background: rgba(47,95,230,0.08); }
.taakje.is-klaar i { border-color: var(--blauw); background: var(--blauw); }
.taakje.is-klaar i::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
html.beweegt .taakje { opacity: 0; filter: blur(6px); }
.stroom__concept, .stroom__akkoord { position: absolute; width: 210px; padding: 14px 16px; border-radius: 14px; background: var(--kaart); box-shadow: 0 24px 40px -20px rgba(26,26,26,0.3), 0 1px 3px rgba(26,26,26,0.06); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.stroom__concept .mono, .stroom__akkoord .mono { font-size: 10px; color: var(--inkt-2); }
.stroom__concept b, .stroom__akkoord b { font-weight: 500; font-size: 13px; letter-spacing: -0.01em; }
.stroom__concept i { display: block; height: 6px; border-radius: 3px; background: rgba(26,26,26,0.08); }
.stroom__concept i.kort { width: 60%; }
.stroom__vink { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: rgba(26,26,26,0.06); color: var(--inkt-2); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; transition: background 300ms var(--ease), color 300ms var(--ease); }
.stroom__vink svg { width: 10px; height: 10px; }
.stroom__vink.is-aan { background: #1D6F42; color: #fff; }
/* De kaarten staan op een procent van links maar zijn vast breed. Onder ~1215 px stak de
   akkoordkaart rechts buiten beeld en viel de bocht van de lijn achter de vraagkaart. 18% is
   de ruimte achter left: 82%, 20% houdt de vraagkaart links van de bocht; op bredere schermen
   zijn beide groter dan de vaste maat, daar verandert niets. */
@media (min-width: 1024px) { .stroom__akkoord { max-width: 18%; } .hero .stroom__kaart { max-width: 20%; } }
/* rond 1024 px raakte de takenkolom de kaart 'Fase 1': die schuift iets op en wordt iets smaller,
   zodat hij ook links van het akkoord blijft */
@media (min-width: 1024px) and (max-width: 1199px) { .stroom__concept { margin-left: 1.5%; max-width: 20%; } }

/* ---------- werkwijze: spooklijn, pillen die pas aangaan als de lijn ze bereikt ---------- */
.proces__spook { stroke: rgba(26,26,26,0.14) !important; }
html.beweegt .stap__pil { background: rgba(26,26,26,0.07); color: var(--inkt-3); transition: background 400ms var(--ease), color 400ms var(--ease), box-shadow 400ms var(--ease); }
html.beweegt .stap__pil.is-aan { background: var(--blauw); color: var(--wit-tekst); box-shadow: 0 14px 30px -14px rgba(47,95,230,0.6); }
html.beweegt .proces__lijn text { opacity: 0; transition: opacity 500ms var(--ease); }
html.beweegt .proces__lijn text.is-aan { opacity: 1; }
html.beweegt .proces__lijn .proces__labelvlak { opacity: 0; transition: opacity 500ms var(--ease); }
html.beweegt .proces__lijn .proces__labelvlak.is-aan { opacity: 1; }
/* in de schermen: alles begint leeg en vult zich in volgorde */
html.beweegt .scherm .bubbel, html.beweegt .scherm .advies, html.beweegt .scherm .notitie, html.beweegt .scherm .taak, html.beweegt .scherm .paneel > .mono, html.beweegt .scherm .scherm__body > .mono { opacity: 0; transform: translateY(10px); }
html.beweegt .balk i::after { transform: scaleX(var(--groei, 0)); }
html.beweegt .balk span { opacity: 0; }
.taak.is-bezig i svg { animation: draai 1.2s linear infinite; }

/* ---------- automatiseringen: vastgezet, rijen lopen omhoog ---------- */
.auto { padding: clamp(96px, 10vw, 160px) 0; }
.auto__band { opacity: 0.28; position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.auto__band .auto__rijen { position: absolute; left: 50%; width: min(var(--breed), 100% - 48px); transform: translateX(-50%); animation: omhoog 36s linear infinite; }
.auto__rijen { gap: 26px; }
@keyframes omhoog { from { top: 0; } to { top: -50%; } }
.auto__midden { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; max-width: 1100px; }
/* drie cijfers naast elkaar, één verhaal */
.cijfers { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: clamp(40px, 5vw, 72px) auto 0; }
.cijfer { padding: 0 clamp(16px, 2.5vw, 40px); }
.cijfer + .cijfer { border-left: 1px solid rgba(240,239,227,0.14); }
.cijfer__getal { font-size: clamp(48px, 5.4vw, 88px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--blauw); white-space: nowrap; }
.cijfer__label { margin-top: 16px; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -0.01em; color: var(--wit-tekst); }
.cijfer__sub { margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(240,239,227,0.55); max-width: 30em; margin-inline: auto; }
@media (max-width: 767px) { .auto { height: auto; min-height: 0; padding: 96px 0; } }

/* ---------- vertrouwen: lijn tekent zich eerst, dan de inhoud ---------- */
.vertrouwen__item { position: relative; border-left: 0 !important; padding-left: 27px !important; }
.vertrouwen__lijn { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blauw); transform-origin: top; }
html.beweegt .vertrouwen__lijn { transform: scaleY(0); }
html.beweegt .vertrouwen__item > svg, html.beweegt .vertrouwen__item > h3, html.beweegt .vertrouwen__item > p { opacity: 0; transform: translateY(12px); }

/* de takenlijst zelf is zichtbaar; de losse taakjes komen één voor één (v1-regel overschreven) */
html.beweegt .stroom__taken { opacity: 1; }
.stroom__taken .taakje { opacity: 1; }
html.beweegt .stroom__taken .taakje { opacity: 0; }

/* correcties na de eerste controle van versie 2 */
html.beweegt .auto__rij { opacity: 1; transform: none; }
.auto__band .auto__rijen { top: 0; transform: translate(-50%, 0); animation: omhoog 40s linear infinite; }
@keyframes omhoog { to { transform: translate(-50%, -50%); } }
html.beweegt .balk span, html.beweegt .balk.is-oranje span:last-child { opacity: 0; }
.taak:not(.is-klaar):not(.is-bezig) i svg { display: none; }

/* ---------- ronde 2: rustiger en zonder doorschijnende lijnen ---------- */
html.beweegt .stap__pil { background: #E6E5DA; color: var(--inkt-3); }   /* dekkend, de lijn verdwijnt erachter */
.proces__dek { fill: var(--creme); }                                       /* vlakje achter de tekst onder de pil */
.proces__labelvlak { fill: var(--creme); }
.proces__blauw { fill: none; stroke: var(--blauw); stroke-width: 1.5; }
/* productkaarten zoals het referentieblok: grote titel, witte knop, gevulde iconen */
.product { grid-template-columns: 1.6fr 1fr 1fr; align-items: start; }
.product__kop .titel { font-size: clamp(40px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.035em; max-width: none; }
.product__kop .lood { margin-top: 24px; font-size: clamp(18px, 1.6vw, 24px); }
.product .knop, .product .knop.knop--grijs { background: var(--kaart); color: var(--inkt); }
.product .knop:hover, .product .knop.knop--grijs:hover { background: #fff; }
.product li { padding: 8px 0; font-size: 17px; }
.product li svg { width: 20px; height: 20px; margin-top: 2px; }
.product .plus li svg { fill: currentColor; stroke: none; }
.product .vink li svg { color: #2ECC71; fill: #2ECC71; stroke: none; }
/* Bureaublad: de tekst staat er meteen (geen fade). De hele kaart is een link naar de productpagina,
   met 'Meer info' rechtsonder in de kaart; bij hover komt de kaart een stukje omhoog, net als de prijskaarten. */
@media (min-width: 1024px) {
  .product { position: relative; transition: transform 260ms var(--ease); }
  .product:hover { transform: translateY(-8px); }
  .product > div:last-child { display: flex; flex-direction: column; align-self: stretch; }
  .product > div:last-child .vink { margin-bottom: 24px; }
  .product__meer { margin-top: auto; align-self: flex-end; }
  .product__meer::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-kaart); }
}
@media (prefers-reduced-motion: reduce) { .product:hover { transform: none; } }
.tel { font-variant-numeric: tabular-nums; }

/* ---------- reiskaarten ---------- */
.reis__kaart--rommel, .reis__kaart--blauw { min-height: 0; padding-bottom: 40px; }
.reis__kaart--rommel { background: #0D1B2A; }

.product .plus li svg path { fill: #0D1B2A; }
.kaart--blauw .plus li svg path { fill: #2F5FE6; }
.product:not(.kaart--donker):not(.kaart--blauw) .plus li svg { color: #0D1B2A; }
.product:not(.kaart--donker):not(.kaart--blauw) .plus li svg path { fill: #FFFFFB; }

/* ---------- werkwijze zoals in de referentievideo ---------- */
.stappen { margin-top: clamp(120px, 14vw, 220px); gap: clamp(140px, 16vw, 260px); }
.stap--intro { grid-template-columns: 1fr 300px; align-items: center; }
.stap--intro .stap__tekst { text-align: center; }
.vraag { max-width: 340px; padding: 16px 20px; border-radius: 14px; background: var(--kaart); box-shadow: 0 24px 40px -22px rgba(26,26,26,0.35), 0 1px 3px rgba(26,26,26,0.06); font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; }
.stap--slot { display: block; text-align: center; padding-top: 16px; }
.stap--slot .titel { max-width: 16ch; margin: 0 auto; }
.stap__slotknop { margin-top: 32px; transition: background 400ms var(--ease), color 400ms var(--ease); }
html.beweegt .stap__slotknop { background: #E4EAFB; color: rgba(47,95,230,0.5); }
html.beweegt .stap__slotknop.is-aan { background: var(--blauw); color: var(--wit-tekst); }
/* pil: bleekblauw klaar, blauw zodra de lijn hem bereikt; de tekst eronder komt dan mee */
html.beweegt .stap__pil { background: #E4EAFB; color: rgba(47,95,230,0.5); box-shadow: none; }
html.beweegt .stap__pil.is-aan { background: var(--blauw); color: var(--wit-tekst); box-shadow: 0 14px 30px -14px rgba(47,95,230,0.6); }
html.beweegt .stap__tekst p { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
html.beweegt .stap__pil.is-aan + p { opacity: 1; transform: none; }
/* schermen en vraagkaart: faden met de scroll (en terug) */
html.beweegt .fade-scroll { opacity: 0; }
.proces__spook { stroke: rgba(26,26,26,0.11) !important; }
@media (max-width: 1023.98px) {
  .stap--intro { grid-template-columns: 1fr; }
  .stap--intro .stap__tekst { text-align: left; }
  html.beweegt .stap__slotknop { background: var(--blauw); color: var(--wit-tekst); }
}
/* op de crème kaart blijft de knop blauw (wit op wit is onzichtbaar) */
.product:not(.kaart--donker):not(.kaart--blauw) .knop { background: var(--blauw); color: var(--wit-tekst); }
.product:not(.kaart--donker):not(.kaart--blauw) .knop:hover { background: var(--blauw-diep); }

/* ---------- reiskaarten: twee losse, even grote blokken (geen stapel-effect) ---------- */
.reis .reis__kaart { position: static; top: auto; margin-top: 0; }
.reis__kaart--blauw { margin-top: 24px !important; }

/* ---------- reiskaarten compacter ---------- */
.reis { margin-top: clamp(40px, 5vw, 64px); }
.reis .reis__kaart { padding: 26px 32px 26px; }
.reis__kaart--blauw { margin-top: 16px !important; }

/* ---------- reiskaarten op 70 procent, gecentreerd (alleen bureaublad) ---------- */
@media (min-width: 1024px) {
  /* nooit breder dan de kolom: op een breed scherm wordt het blok anders te los */
  .reis { max-width: min(70%, var(--breed)); margin-inline: auto; }
  .reis .reis__kaart { padding: 18px 22px 18px; }
  .reis__kaart--blauw { margin-top: 11px !important; }
  .reis__kop { font-size: clamp(14px, 1.26vw, 18px); }
}

/* ---------- herkenning: een stapel losse papiertjes en een lijn met vijf stappen (alleen bureaublad) ----------
   Boven vallen briefjes, mailtjes en bestanden scheef op een stapel, twee krijgen een rood stempel. Onder
   schuiven dezelfde soort zaken op een tijdlijn met vijf vaste stappen en vinken af. De kaarten en koppen
   zelf zijn de reiskaarten hierboven; de beweging staat in site.js. Zonder script geldt het eindbeeld. */
.reis .papierberg { position: relative; height: 230px; margin-top: 6px; }
.reis .papierberg__podium { position: relative; height: 100%; width: min(100%, 740px); margin: 0 auto; }
.reis .papier { position: absolute; left: var(--x); top: var(--y); translate: -50% 0; rotate: var(--r); color: #0D1B2A; box-shadow: 0 14px 28px -8px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.3); }
.reis .papier--blad { background: #ECEAE3; border-radius: 9px; }
.reis .papier svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reis .papier__naam { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; }
.reis .papier__regel { display: block; height: 5px; border-radius: 3px; background: rgba(13,27,42,0.13); margin-top: 7px; }
.reis .papier--excel { width: 214px; padding: 10px 12px 12px; }
.reis .papier--excel .papier__naam { padding-bottom: 9px; border-bottom: 1px solid rgba(13,27,42,0.1); }
.reis .papier__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; margin-top: 9px; border-top: 1px solid rgba(13,27,42,0.12); border-left: 1px solid rgba(13,27,42,0.12); }
.reis .papier__raster span { height: 18px; border-right: 1px solid rgba(13,27,42,0.12); border-bottom: 1px solid rgba(13,27,42,0.12); position: relative; }
.reis .papier__raster span:nth-child(-n+4) { background: rgba(13,27,42,0.06); }
.reis .papier__raster span.papier__cel::after { content: ""; position: absolute; left: 5px; top: 7px; height: 4px; width: var(--w, 55%); border-radius: 2px; background: rgba(13,27,42,0.22); }
.reis .papier--mail { width: 206px; padding: 11px 13px 13px; }
.reis .papier--mail .papier__boven { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: rgba(13,27,42,0.55); }
.reis .papier--mail .papier__boven span { display: flex; align-items: center; gap: 6px; }
.reis .papier--mail .papier__ongelezen { width: 7px; height: 7px; border-radius: 50%; background: #2F5FE6; }
.reis .papier--mail .papier__onderwerp { margin-top: 8px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.reis .papier--doc { width: 152px; padding: 12px 13px 16px; border-radius: 6px 16px 6px 6px; }
.reis .papier--doc .papier__naam { margin-bottom: 11px; }
.reis .papier--doc .papier__totaal { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding-top: 8px; border-top: 1px solid rgba(13,27,42,0.12); font-size: 11px; color: rgba(13,27,42,0.6); }
.reis .papier--doc .papier__totaal i { width: 38px; height: 5px; border-radius: 3px; background: rgba(13,27,42,0.22); }
.reis .papier--briefje { width: 128px; height: 116px; padding: 22px 14px 12px; background: #F1EBDB; border-radius: 3px; }
.reis .papier--briefje p { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: #26313D; }
.reis .papier__plakband { position: absolute; left: 50%; top: -7px; width: 46px; height: 15px; translate: -50% 0; rotate: -4deg; background: rgba(247,247,243,0.55); }
.reis .papier--app { width: 198px; padding: 9px 11px 11px; background: #1D2F47; border: 1px solid rgba(220,235,255,0.1); border-radius: 15px 15px 15px 4px; color: #F7F7F3; }
.reis .papier--app .papier__boven { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #A9A99B; }
.reis .papier--app .papier__bericht { margin-top: 6px; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; }
.reis .papier__stempel { position: absolute; rotate: var(--sr); padding: 3px 8px 2px; border: 1.5px solid #FF3B3B; border-radius: 5px; background: rgba(255,59,59,0.07); color: #FF3B3B; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; }
.reis .papier--doc .papier__stempel { right: 10px; bottom: 34px; }
.reis .papier--briefje .papier__stempel { left: 13px; bottom: 13px; }
/* De lijn: vijf vaste stappen */
.reis .stappenlijn { margin-top: 4px; height: 194px; display: flex; align-items: center; }
.reis .stappenlijn__rij { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 10px; }
.reis .stappenlijn__kolom { display: flex; flex-direction: column; align-items: center; }
.reis .stappenlijn__stap { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: #F7F7F3; }
.reis .stappenlijn__knoop { position: relative; width: 100%; height: 12px; margin: 9px 0 14px; }
.reis .stappenlijn__punt { position: absolute; left: 50%; top: 50%; z-index: 7; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #F7F7F3; background: #F7F7F3; box-shadow: 0 0 0 4px rgba(247,247,243,0.16); }
.reis .stappenlijn__spoor { position: absolute; left: 50%; top: 50%; width: calc(100% + 10px); height: 2px; margin-top: -1px; background: rgba(247,247,243,0.22); }
.reis .stappenlijn__spoor i { position: absolute; inset: 0; background: #F7F7F3; transform-origin: left center; }
.reis .stappenlijn__item { position: relative; width: 100%; padding: 13px 8px 12px; border-radius: 14px; background: #F7F7F3; color: #0D1B2A; text-align: center; box-shadow: 0 12px 24px -12px rgba(10,21,34,0.55); }
/* Elk kaartje schuift achter het vorige vandaan: eerdere stap ligt bovenop */
.reis .stappenlijn__kolom:nth-child(1) .stappenlijn__item { z-index: 5; }
.reis .stappenlijn__kolom:nth-child(2) .stappenlijn__item { z-index: 4; }
.reis .stappenlijn__kolom:nth-child(3) .stappenlijn__item { z-index: 3; }
.reis .stappenlijn__kolom:nth-child(4) .stappenlijn__item { z-index: 2; }
.reis .stappenlijn__kolom:nth-child(5) .stappenlijn__item { z-index: 1; }
.reis .stappenlijn__ico { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 9px; border-radius: 9px; background: rgba(47,95,230,0.1); color: #2F5FE6; }
.reis .stappenlijn__ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reis .stappenlijn__titel { display: block; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; }
.reis .stappenlijn__sub { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: rgba(13,27,42,0.55); white-space: nowrap; }
.reis .stappenlijn__vink { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(13,27,42,0.18); }
.reis .stappenlijn__vinkvol { position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: 50%; background: #2ECC71; }
.reis .stappenlijn__vinkvol svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Beginstand voordat de animatie start (gelijk aan de eerste keyframes) */
.reis .is-wacht .papier, .reis .is-wacht .papier__stempel, .reis .is-wacht .stappenlijn__item { opacity: 0; }
.reis .is-wacht .stappenlijn__stap { opacity: 0.45; }
.reis .is-wacht .stappenlijn__punt { background: #2F5FE6; box-shadow: 0 0 0 0 rgba(247,247,243,0); }
.reis .is-wacht .stappenlijn__spoor i { transform: scaleX(0); }
.reis .is-wacht .stappenlijn__vinkvol { transform: scale(0); }

/* ---------- slotsectie: de cursor trekt een spoor over de stippen ---------- */
.slot { position: relative; overflow: hidden; }
.slot .wrap { position: relative; z-index: 1; }
.slot__spoor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.slot__spoor line { stroke: rgba(240,239,227,0.85); stroke-width: 1.2; stroke-linecap: round; animation: spoorweg 1.1s ease-out forwards; }
.slot__spoor circle { fill: var(--wit-tekst); animation: spoorweg 1.1s ease-out forwards; }
@keyframes spoorweg { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }

/* ============================================================
   INHOUD VOLGENS HET INHOUDSDOCUMENT (7 sep 2026)
   ============================================================ */
/* herkenning: vijf problemen als tegels met een oranje uitroepteken (het oranje van 'kost je geld'
   in de kaart eronder), de zesde tegel zegt dat Cleefio ze oplost en wijst naar de kaarten */
.pijnpunten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.pijnpunt { position: relative; overflow: hidden; display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start;
            padding: 26px 26px 28px; border-radius: 20px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10); }
.pijnpunt::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--oranje); }
.pijnpunt__teken { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
                   border: 1.5px solid var(--oranje); color: var(--oranje); font-style: normal; font-size: 13px; font-weight: 700; line-height: 1; }
.pijnpunt .kop { font-size: 21px; line-height: 1.22; }
.pijnpunt p { margin-top: 8px; font-size: 15.5px; line-height: 1.45; }
.pijnpunt--cleefio { background: var(--blauw); border-color: transparent; }
.pijnpunt--cleefio::before { display: none; }
.pijnpunt--cleefio p { color: rgba(240,239,227,0.9); }
.pijnpunt__pijl { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--wit-tekst); color: var(--blauw); }
.pijnpunt__pijl svg { width: 13px; height: 13px; }
/* teaser besparingstest */
.teaser { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 80px); padding: clamp(32px, 4vw, 56px); align-items: center; }
/* de besparingstest zelf in de teaser: vragen als blokjes, uitslag als meter onder de intro */
.teaser .test__vragen { padding: 0; gap: 12px; }
.teaser .vraag-blok { padding: 16px 18px; border-radius: 14px; background: var(--creme); border: 1px solid var(--lijn); }
.teaser .vraag-blok label, .teaser .vraag-blok__kop { font-size: 16px; }
.teaser .keuzes label { font-size: 14px; padding: 12px 6px; }
.teaser .test__uitkomst { position: static; margin-top: 32px; gap: 16px; }
.teaser .uitkomst { flex-direction: row; gap: 24px; flex-wrap: wrap; }
.teaser .uitkomst b { font-size: clamp(32px, 2.8vw, 44px); }
.teaser .uitkomst span { font-size: 14px; }
.teaser .uitkomst__noot { padding-top: 12px; }
/* knop onder elke uitkomstkaart: naar het contactblok */
.uitkomst__knop { align-self: flex-start; margin-top: 4px; }
/* prijs */
.prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.prijs { padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
/* pakketkaarten: subtiel omhoog bij hover, zonder schaduw (die oogde goedkoop) */
@media (hover: hover) {
  .prijzen .prijs { transition: transform 260ms var(--ease); will-change: transform; }
  .prijzen .prijs[data-in]:hover { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .prijzen .prijs[data-in]:hover { transform: none; } }
.prijs > .mono { opacity: 0.8; }
.prijs__knop { margin-top: auto; width: 100%; text-align: center; }
.prijs .vink.kort { margin-bottom: 20px; }
.prijs > .vink.kort { margin-bottom: 8px; }
.prijs__bedrag { font-size: clamp(34px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; margin-top: 12px; }
.prijs__sub { font-size: 16px; line-height: 1.4; padding-bottom: 12px; border-bottom: 1px solid var(--lijn-licht); }
/* een prijsrange blijft op een regel; anders breekt de browser af na het streepje */
.prijs__sub .reeks { white-space: nowrap; }
.kaart:not(.kaart--donker):not(.kaart--blauw) .prijs__sub { border-bottom-color: var(--lijn); }
.prijs .stil { font-size: 15px; }
/* websitepakketten: elk pakket een kleur van de collega-kaarten eronder (oranje, paars, groen),
   met de vinkjes in die kleur. De knoppen zijn zwart: witte letters op oranje of groen lazen slecht. */
#pakketten .prijs:nth-child(1) { --tint: 250,104,56; }
#pakketten .prijs:nth-child(2) { --tint: 166,63,212; }
#pakketten .prijs:nth-child(3) { --tint: 14,159,156; }
#pakketten .prijs .vink.kort li svg { color: rgb(var(--tint)); fill: rgb(var(--tint)); }
#pakketten .prijs .vink.kort li svg path { stroke: #fff; }
#pakketten .prijs__knop { background: var(--inkt); color: var(--wit-tekst); border: 0; }
#pakketten .prijs__knop:hover { background: #000; }
.pak__wolk { display: none; }
/* je nieuwe collega staat in dezelfde sectie, onder de pakketten */
#pakketten .pak__collega { margin-top: 56px; }
/* afsluiten: formulier op blauw */
/* het contactblok vult minstens het scherm, zodat de footerletters niet half in beeld hangen na een ankersprong */
@media (min-width: 1024px) { #contact.slot { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } }
.slot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.slot__grid .knoppen { margin-top: 36px; }
.slot .tekstlink { color: var(--wit-tekst); }
/* telsectie: bespaarde uren */
@media (max-width: 1023.98px) { .prijzen { grid-template-columns: 1fr; } .teaser { grid-template-columns: 1fr; } .slot__grid { grid-template-columns: 1fr; } }

/* ---------- besparingstest-pagina ---------- */
.hero--kort { padding: 56px 0 48px; }
.test { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: start; }
.test__vragen { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 28px; }
.vraag-blok label, .vraag-blok__kop { display: grid; grid-template-columns: 32px 1fr; gap: 12px; font-size: 17px; line-height: 1.4; }
.vraag-blok .mono { color: var(--blauw); padding-top: 3px; }
.schuif { display: grid; grid-template-columns: 1fr 90px; gap: 16px; align-items: center; margin-top: 14px; padding-left: 44px; }
.schuif output { font-weight: 500; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(26,26,26,0.12); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blauw); border: 3px solid var(--kaart); box-shadow: 0 1px 4px rgba(26,26,26,0.25); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--blauw); border: 3px solid var(--kaart); cursor: pointer; }
.keuzes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-left: 44px; }
/* vier keuzes (de softwaretest): 2 bij 2, anders stond de vierde alleen op een tweede regel */
.keuzes:has(> label:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.keuzes label { display: flex; align-items: center; justify-content: center; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--creme); font-size: 15px; cursor: pointer; }
.keuzes input { position: absolute; opacity: 0; pointer-events: none; }
.keuzes label:has(input:checked) { background: var(--blauw); color: var(--wit-tekst); border-color: var(--blauw); }
.test__uitkomst { padding: clamp(24px, 3vw, 40px); position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
.uitkomst { display: flex; flex-direction: column; gap: 18px; }
.uitkomst b { display: block; font-size: clamp(40px, 4vw, 64px); line-height: 1; letter-spacing: -0.035em; font-weight: 500; font-variant-numeric: tabular-nums; }
.uitkomst span { display: block; margin-top: 6px; color: rgba(240,239,227,0.8); }
.uitleg { font-size: 15px; line-height: 1.45; color: rgba(240,239,227,0.85); }
.uitkomst__noot { font-size: 13px; line-height: 1.45; color: rgba(240,239,227,0.65); padding-top: 16px; border-top: 1px solid rgba(240,239,227,0.2); }
@media (max-width: 1023.98px) { .test { grid-template-columns: 1fr; } .test__uitkomst { position: static; } }
@media (max-width: 767px) { .schuif, .keuzes { padding-left: 0; } }

/* ---------- palet "Wolk": merkkleuren, eigen accenten ---------- */
.stroom__spook { stroke: rgba(13,27,42,0.16) !important; }
.proces__spook { stroke: rgba(13,27,42,0.12) !important; }
.reis__kaart--rommel { background: #0A1522; border-color: rgba(220,235,255,0.08); }
.donker .stil { color: #A7B3C4; }
.auto__rij { color: rgba(220,235,255,0.42); }
.auto__rij .pil { background: rgba(74,123,255,0.18); color: #B9C7E8; }

/* Elke productpagina heeft zijn eigen kleur; hij staat op de body zodat alles
   hem erft, tot de menuknop in de kop aan toe. */
.pag--ai { --t: 166,63,212; --t-diep: 140,45,183; }
.pag--sw { --t: 47,95,230;  --t-diep: 36,80,199; }
.pag--web { --t: 14,159,156; --t-diep: 11,130,128; }

/* ---------- 404 ----------
   Drie drijvende wolken in de drie productkleuren, dezelfde die in de hero van de homepage
   staan, en vier wegen terug naar binnen. Een doodlopende pagina is de plek waar je juist
   wilt laten zien wat er wel is. */
.vier04 { position: relative; overflow: hidden; }
.vier04 > .wrap { position: relative; z-index: 1; }
.vier04__lucht { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vier04__lucht i { position: absolute; display: block; aspect-ratio: 1451 / 971;
  -webkit-clip-path: polygon(54.4% 0.1%, 58.6% 0.1%, 64.7% 2.0%, 67.3% 3.5%, 71.8% 7.7%, 75.8% 13.2%, 78.8% 19.6%, 80.9% 27.1%, 81.9% 33.0%, 86.8% 35.9%, 89.6% 38.4%, 91.3% 40.2%, 95.2% 46.1%, 97.6% 51.9%, 98.7% 55.5%, 99.4% 59.4%, 99.9% 65.5%, 99.3% 73.8%, 97.9% 79.6%, 95.9% 84.7%, 93.2% 89.5%, 88.8% 94.5%, 83.3% 98.2%, 78.6% 99.6%, 68.0% 99.9%, 24.1% 99.2%, 17.8% 98.6%, 15.1% 97.7%, 12.5% 96.3%, 9.2% 93.4%, 6.1% 89.6%, 3.6% 84.9%, 1.4% 78.8%, 0.1% 70.9%, 0.0% 63.5%, 0.7% 58.5%, 1.8% 53.5%, 4.1% 47.4%, 5.4% 45.1%, 9.0% 40.8%, 11.8% 38.4%, 15.6% 36.3%, 16.2% 34.6%, 17.1% 28.7%, 18.9% 23.5%, 21.1% 19.7%, 23.6% 16.7%, 26.1% 14.9%, 28.8% 13.8%, 32.2% 13.5%, 36.2% 14.2%, 40.6% 8.2%, 44.0% 5.0%, 48.4% 2.2%);
  clip-path: polygon(54.4% 0.1%, 58.6% 0.1%, 64.7% 2.0%, 67.3% 3.5%, 71.8% 7.7%, 75.8% 13.2%, 78.8% 19.6%, 80.9% 27.1%, 81.9% 33.0%, 86.8% 35.9%, 89.6% 38.4%, 91.3% 40.2%, 95.2% 46.1%, 97.6% 51.9%, 98.7% 55.5%, 99.4% 59.4%, 99.9% 65.5%, 99.3% 73.8%, 97.9% 79.6%, 95.9% 84.7%, 93.2% 89.5%, 88.8% 94.5%, 83.3% 98.2%, 78.6% 99.6%, 68.0% 99.9%, 24.1% 99.2%, 17.8% 98.6%, 15.1% 97.7%, 12.5% 96.3%, 9.2% 93.4%, 6.1% 89.6%, 3.6% 84.9%, 1.4% 78.8%, 0.1% 70.9%, 0.0% 63.5%, 0.7% 58.5%, 1.8% 53.5%, 4.1% 47.4%, 5.4% 45.1%, 9.0% 40.8%, 11.8% 38.4%, 15.6% 36.3%, 16.2% 34.6%, 17.1% 28.7%, 18.9% 23.5%, 21.1% 19.7%, 23.6% 16.7%, 26.1% 14.9%, 28.8% 13.8%, 32.2% 13.5%, 36.2% 14.2%, 40.6% 8.2%, 44.0% 5.0%, 48.4% 2.2%); }
.vier04__lucht i:nth-child(1) { left: -12%; top: 6%;  width: 44%; background: rgb(47,95,230);  opacity: 0.13;
      animation: vier04A 9s ease-in-out infinite alternate; }
.vier04__lucht i:nth-child(2) { left:  64%; top: 2%;  width: 34%; background: rgb(166,63,212); opacity: 0.12;
      animation: vier04B 7.5s ease-in-out infinite alternate; }
.vier04__lucht i:nth-child(3) { left:  38%; top: 58%; width: 28%; background: rgb(14,159,156); opacity: 0.15;
      animation: vier04C 11s ease-in-out infinite alternate; }
@keyframes vier04A { from { transform: translate(0, 0); }    to { transform: translate(40px, 10px); } }
@keyframes vier04B { from { transform: translate(0, 0); }    to { transform: translate(-34px, 8px); } }
@keyframes vier04C { from { transform: translate(-8px, 0); } to { transform: translate(30px, -12px); } }
@media (prefers-reduced-motion: reduce) { .vier04__lucht i { animation: none; } }

/* ---------- veelgestelde vragen ----------
   De pagina gebruikt vijf faq-klassen die nergens opmaak hadden: de plusjes liepen daardoor
   uit tot de volle breedte en elk antwoord stond altijd open. */
.faq__item { border-top: 1px solid var(--lijn); }
.faq__item:last-of-type { border-bottom: 1px solid var(--lijn); }
.faq__kop { display: flex; align-items: center; justify-content: space-between; gap: 20px;
      width: 100%; padding: 22px 0; text-align: left;
      font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--inkt); }
.faq__ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--inkt-2); }
.faq__ic svg { width: 18px; height: 18px; }
/* het streepje rechtop draait weg, zo wordt de plus een min */
.faq__streep { transform-origin: 12px 12px; transition: transform 260ms var(--ease), opacity 260ms var(--ease); }
.faq__kop[aria-expanded="true"] .faq__streep { transform: rotate(90deg); opacity: 0; }
/* van 0fr naar 1fr vouwt het antwoord open zonder dat we een hoogte hoeven te rekenen */
.faq__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease); }
.faq__wrap > div { overflow: hidden; }
.faq__kop[aria-expanded="true"] + .faq__wrap { grid-template-rows: 1fr; }
.faq__wrap p { margin: 0; padding-bottom: 24px; font-size: 16px; line-height: 1.6;
      color: var(--inkt-2); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .faq__wrap, .faq__streep { transition: none; } }
@media (max-width: 1023.98px) { .faq__kop { padding: 18px 0; font-size: 17px; } .faq__wrap p { font-size: 15px; padding-bottom: 20px; } }

/* ============================================================
   MOBIEL: alles gestapeld, kaartenrijen swipen
   ============================================================ */
.wolkje, .prijs__lucht, .bouw__lucht, .prijs__merk, .prijs__punten, .prijs__label, .prijs__cta,
.chaos, .test__kop, .vert__lucht, .plaat__extra, .tel-uitnodiging, .tel-prijs, .tel-info, .dash { display: none; }
.stroom__kaarten { display: contents; }

@media (max-width: 1023.98px) {
  main { position: relative; }

  /* De hero vult het eerste scherm. Alle vrije ruimte valt boven de kop, zodat kop, tekst
     en knoppen samen onderin staan. */
  .hero { position: relative; overflow: hidden;
          padding: 32px 0 48px; min-height: calc(100vh - 96px); min-height: calc(100svh - 96px);
          display: flex; flex-direction: column; }
  .hero .wrap { position: relative; display: flex; flex-direction: column; flex: 1; }
  .hero .wrap::before { content: ""; display: block; flex: 1 1 0; }
  .hero .reus { font-size: clamp(40px, 12.5vw, 54px); max-width: none; }
  .hero .lood { margin-top: 18px; font-size: 17px; }
  .hero .knoppen { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 32px; padding-top: 0; }
  .hero .knoppen .knop { justify-content: center; min-height: 52px; font-size: 16px; }
  .hero .knoppen .tekstlink { justify-content: center; min-height: 52px; padding: 0 22px; border: 1.5px solid rgba(26,26,26,0.18); border-radius: var(--r-knop); opacity: 1; font-size: 16px; }

  .sectie { padding-block: 64px; }
  .twee { gap: 24px; }
  .groot { font-size: clamp(32px, 9vw, 40px); }
  .reus { font-size: clamp(38px, 11vw, 48px); }

  /* --- werkwijze: gestapeld, schermen op volle breedte --- */
  .stappen { margin-top: 40px; gap: 48px; }
  .stap--intro { gap: 16px; }
  .vraag { max-width: none; }
  .stap__tekst p { max-width: none; text-align: left; }
  .stap--slot { text-align: left; }
  .stap--slot .titel { margin-left: 0; }
  html.beweegt .stap__slotknop { background: #E4EAFB; color: rgba(47,95,230,0.55); }
  html.beweegt .stap__slotknop.is-aan { background: var(--blauw); color: var(--wit-tekst); }

  /* --- kaartenrijen swipen --- */
  .prijzen, .raster-2 { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(50% - 50vw); padding: 4px calc(50vw - 50%) 12px; }
  /* kaartenrijen lopen alleen naar rechts uit beeld, nooit over de lijn heen */
  .raster-2::-webkit-scrollbar { display: none; }
  .raster-2 > * { flex: none; width: 84%; scroll-snap-align: start; }
  .prijzen::-webkit-scrollbar { display: none; }
  .prijzen > * { flex: none; width: 84%; scroll-snap-align: start; }
  .prijs__bedrag { font-size: 34px; }

  /* --- telsectie als volwaardig blok --- */
  /* --- wat het oplevert: geen donker kader meer, maar twee zwevende rondjes op het crème --- */
  .thuis .auto { background: var(--creme); color: var(--inkt); padding: 76px 0 84px; }
  .thuis .auto__midden { text-align: center; padding: 0; isolation: isolate; background: none; }
  .thuis .auto .groot { font-size: clamp(36px, 10vw, 46px); }

  /* --- wat chaos kost: rood bovenin, de lijn die kantelt, groen onderin --- */
  /* de cijfers staan nu in het kader; de lopende band eronder zou erdoorheen schijnen */
  .thuis .auto__band { display: none; }
  .thuis .auto #autoKop, .thuis .auto .cijfers { display: none; }
  .thuis .chaos { display: block; text-align: left; --rood: 226,59,46; --groen: 18,133,74; }
  /* een wolk in de overgang boven de kop; hij hangt in de open lucht en moet daarom licht blijven */
  .thuis .chaos__lucht { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .thuis .chaos__lucht i { position: absolute; display: block; background: #4A7BFF;
                aspect-ratio: 1451 / 971; left: 58%; top: -68px; width: 52%; opacity: 0.20; }
  .thuis .auto .chaos__kop { font-size: clamp(30px, 8.2vw, 38px); }
  .thuis .chaos__lood { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--inkt-2); }
  .thuis .chaos__kader { position: relative; margin-top: 22px; border-radius: 20px; overflow: hidden;
                border: 1.5px solid rgba(255,255,255,0.85);
                background: rgba(255,255,255,0.62);
                -webkit-backdrop-filter: blur(26px) saturate(170%);
                        backdrop-filter: blur(26px) saturate(170%);
                box-shadow: inset 0 1px 0 #fff, 0 16px 34px -16px rgba(13,27,42,0.35); }
  /* haarlijn tussen elke laag: rood, grillige lijn, rechte lijn, groen */
  .thuis .chaos__kader > * + * { border-top: 1px solid rgba(26,26,26,0.09); }
  .thuis .chaos__zone { padding: 18px 18px 16px; }
  .thuis .chaos__zone--rood  { background: linear-gradient(180deg, rgba(var(--rood),0.13), rgba(var(--rood),0.04)); }
  .thuis .chaos__zone--groen { background: linear-gradient(180deg, rgba(var(--groen),0.05), rgba(var(--groen),0.14)); }
  .thuis .chaos__merk { display: block; font-size: 10px; font-weight: 600;
                letter-spacing: 0.12em; text-transform: uppercase; }
  .thuis .chaos__bedrag { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; }
  .thuis .chaos__bedrag b { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
  .thuis .chaos__bedrag span { font-size: 13px; font-weight: 600; color: var(--inkt-2); }
  .thuis .chaos__zone--rood  .chaos__merk, .thuis .chaos__zone--rood  .chaos__bedrag b { color: rgb(var(--rood)); }
  .thuis .chaos__zone--groen .chaos__merk, .thuis .chaos__zone--groen .chaos__bedrag b { color: rgb(var(--groen)); }
  .thuis .chaos__uitleg { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--inkt-2); }
  .thuis .chaos__uitleg b { color: var(--inkt); font-weight: 700; }
  .thuis .chaos__bron { margin: 8px 0 0; font-size: 11px; line-height: 1.35; color: var(--inkt-3); }
  .thuis .chaos__lijnvak { padding: 16px 18px 14px; }
  .thuis .chaos__lijnvak svg { display: block; width: 100%; height: auto; }
  .thuis .chaos__lijnkop { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                margin-bottom: 10px; font-size: 12.5px; font-weight: 600; }
  .thuis .chaos__lijnkop span + span { font-size: 11px; font-weight: 700;
                letter-spacing: 0.04em; text-transform: uppercase; }
  .thuis .chaos__lijnvak--rood  .chaos__lijnkop { color: rgb(var(--rood)); }
  .thuis .chaos__lijnvak--groen .chaos__lijnkop { color: rgb(var(--groen)); }
  .thuis .chaos__raster { stroke: rgba(26,26,26,0.13); stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; }

  /* --- footer: woordmerk vult de breedte, wolk erachter --- */
  .voet { position: relative; overflow: hidden; }
  /* het woordmerk rolt rustig naar links; de tweede set vangt het naadloos op */
  .voet__merk { position: relative; z-index: 1; display: block; overflow: hidden;
                margin-inline: calc(50% - 50vw); padding: 34px 0 26px; }
  .voet__baan { display: flex; width: max-content; animation: voetloop 18s linear infinite; }
  .voet__set { display: flex; align-items: flex-start; padding-right: 9vw; }
  .voet__set--kopie { display: flex; }
  @keyframes voetloop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .voet__baan { animation: none; } }
  .voet__merk .letter { font-size: 26vw; }
  .voet__wolk { position: static; width: 18vw; margin: 2vw 0 0 2.5vw; opacity: 1; }
  /* hij staat er meteen: de letter-voor-letter onthulling past niet bij een rollend woordmerk */
  html.beweegt .voet__merk .letter, html.beweegt .voet__wolk { opacity: 1; transform: none; }
  .voet__onder { position: relative; z-index: 1; }
}
@media (max-width: 1023.98px) {
  /* footer: de wolk achter de letters, niet ervoor */
  .voet__merk .letter { position: relative; z-index: 1; }
}

/* ============================================================
   KORTE TELEFOONVERSIE: tegels naar detailpagina's,vaste knop onderin
   ============================================================ */
.tegels-sectie,.vastebalk,.stappen-mobiel { display: none; }

/* onderdelen die op de detailpagina's staan (ook op desktop bruikbaar) */
.hero--pagina { padding-top: 40px; padding-bottom: 56px; }
.terug { display: flex; width: -moz-fit-content; width: fit-content; align-items: center; gap: 6px; margin-bottom: 28px; font-size: 15px; color: var(--inkt-2); }
.hero--pagina > .wrap > .mono { display: block; }
.terug svg { width: 14px; height: 14px; }
.terug:hover { color: var(--inkt); }
.hero--pagina .groot { margin-top: 14px; max-width: 16ch; }
.hero--pagina .lood { margin-top: 20px; max-width: 34em; }
.hero--pagina .knoppen { margin-top: 32px; }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.vak { padding: 28px; }
.vak .kop + p { margin-top: 10px; }
.vak p { font-size: 16px; line-height: 1.5; }
.vink.kort li { padding: 5px 0; font-size: 15px; }
.vink.kort { margin-top: 16px; }
.prijs .vink.kort li { display: flex; align-items: center; gap: 10px; }
.prijs .vink.kort li svg { width: 16px; height: 16px; flex: none; color: #2ECC71; fill: #2ECC71; stroke: none; }
@media (max-width: 767px) { .raster-2 { grid-template-columns: 1fr; } }
/* .raster-2 is ook een raster op de telefoon (deze regel staat na de swiperij en wint op display),
   dus de swipe-maten van daar gelden hier niet: anders bleven de kaarten 84% breed met een gat ernaast */
@media (max-width: 1023.98px) { .raster-2 { margin-inline: 0; padding: 0; overflow: visible; } .raster-2 > * { width: auto; } }

@media (max-width: 1023.98px) {
  /* wat op een detailpagina staat, hoeft niet ook nog op de telefoon-homepage */
  /* deze secties staan voluit op de detailpagina's; op de telefoon doen de tegels het werk */
  .thuis #lagen, .thuis .proces { display: none; }
  .stappen-mobiel { display: block; }
  /* de hero-stroom staat niet op de telefoon */
  .stroom { display: none; }
  /* Volgorde op de telefoon. De hero zegt dat je systemen achterlopen, daarna zie je
     meteen wat het oplevert; de herkenningslijst is daarna overbodig en staat uit.
     Hij blijft in de HTML voor de desktopversie. */
  .thuis { display: flex; flex-direction: column; }
  .thuis > #herkenning      { display: none; }
  .thuis > .hero            { order: 1; }
  .thuis > .auto            { order: 2; }
  .thuis > .tegels-sectie   { order: 3; }
  .thuis > #test            { order: 4; }
  .thuis > .stappen-mobiel  { order: 5; }
  .thuis > #prijs           { order: 6; }
  .thuis > #vertrouwen      { order: 7; }
  .thuis > .tel-uitnodiging { order: 8; }
  .thuis > #contact         { order: 9; }
  /* de vier stappen als korte rijen, met de grote cijfers uit de huisstijl */
  .stappen-mobiel.sectie--krap { padding-block: 52px; }
  /* vier matglazen kaarten; de wolken erachter geven het glas iets om te vervagen */
  .stapjes { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 22px; list-style: none; padding: 0; }
  .stapjes li { --t: 47,95,230; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
                padding: 15px 17px; border-radius: 18px;
                border: 1.5px solid rgba(var(--t),0.45);
                background: linear-gradient(180deg, rgba(var(--t),0.15), rgba(var(--t),0.05)),
                            rgba(255,255,255,0.50);
                -webkit-backdrop-filter: blur(18px) saturate(180%);
                        backdrop-filter: blur(18px) saturate(180%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 12px 26px -16px rgba(var(--t),0.45); }
  .stapjes .nr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
                 background: rgb(var(--t)); color: #fff;
                 font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
  .stapjes h3 { margin: 3px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .stapjes p { margin-top: 5px; font-size: 14px; line-height: 1.42; color: var(--inkt-2); }
  .stapjes__link { margin-top: 22px; }
  /* De stappen zwiepten om en om van links en rechts binnen, en dat voelt goedkoop.
     Nu komen ze alle vier van onderen omhoog met een fractie schaal erbij, kort na elkaar.
     Het nummer volgt een tel later met een klein zetje: rustiger en duurder. */
  .stappen-mobiel { overflow: hidden; }
  html.beweegt .stapjes li[data-in] { opacity: 0; transform: translateY(18px) scale(0.985);
                transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
  html.beweegt .stapjes li[data-in].is-in { opacity: 1; transform: none; }
  html.beweegt .stapjes li[data-in] .nr { opacity: 0; transform: scale(0.82);
                transition: opacity 420ms var(--ease) 160ms,
                            transform 540ms cubic-bezier(0.34, 1.35, 0.5, 1) 160ms; }
  html.beweegt .stapjes li[data-in].is-in .nr { opacity: 1; transform: none; }
  /* --- de besparingstest in lagen: een zachte kleurwolk achter, daarop matglas,
     en daarop lichtere vlakjes die je door het glas heen ziet liggen --- */
  /* --- het wolkje uit het logo, half afgesneden, achter de secties door: geeft diepte --- */
  /* extra lucht onderin: de slagschaduw van de kaart en het onderste wolkje moeten binnen de
     sectie eindigen, anders knipt de rand ze af en zie je een harde streep tussen de twee
     secties. Ruim genoeg ook, want anders verdwijnt de bovenkant van de wolk achter de kaart
     en houd je alleen zijn platte onderkant over. */
  .thuis #test { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 152px; }
  .thuis .wolkje { display: block; position: absolute; z-index: -1; pointer-events: none; height: auto; }
  .thuis .wolkje--a { left: -16%; top: 40px; width: 56%; opacity: 0.85; }
  /* de wolkjes wisselen van kant terwijl je naar beneden gaat: linksboven, rechts in het
     midden, linksonder, en dan weer rechts bij "wat het oplevert" */
  .thuis .wolkje--c { right: -8%; top: 44%; width: 44%; opacity: 0.75; }

  /* --- contactformulier als glas op het blauwe vlak --- */
  /* de stippen iets forser, anders verdwijnen ze achter de blur */
  .stippen { background-image: radial-gradient(rgba(240,239,227,0.22) 1.9px, transparent 2.1px);
                    background-size: 26px 26px; }
  /* een stukje lucht boven het formulier als je er met een knop naartoe springt */
  /* zachte overgang van het creme naar het blauwe slot: ronde bovenhoeken */
  #contact.slot { border-top-left-radius: 28px; border-top-right-radius: 28px; }
  #contact.blauw .form { scroll-margin-top: 28px; padding: 6px; border-radius: 20px;
                border: 1.5px solid rgba(255,255,255,0.60); background: rgba(255,255,255,0.17);
                -webkit-backdrop-filter: blur(20px) saturate(160%);
                        backdrop-filter: blur(20px) saturate(160%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 18px 40px -22px rgba(13,27,42,0.55); }
  #contact.blauw .veld { border-bottom-color: rgba(255,255,255,0.42); border-radius: 14px;
                transition: background 250ms var(--ease); }
  #contact.blauw .veld:focus-within { background: rgba(255,255,255,0.12); }
  #contact.blauw .veld label { color: #fff; font-weight: 600; opacity: 1; }
  #contact.blauw .veld input, .thuis #contact .veld textarea { color: var(--wit-tekst); }
  #contact.blauw .veld input::placeholder, .thuis #contact .veld textarea::placeholder { color: rgba(240,239,227,0.5); }
  /* het invulgeheugen van de browser zet er anders een lichte vulling achter waardoor
     witte letters wegvallen */
  #contact.blauw .veld input:-webkit-autofill { -webkit-text-fill-color: var(--wit-tekst);
                transition: background-color 9999s ease-in-out 0s; }
  #contact.blauw .form__voet .stil { color: rgba(255,255,255,0.88); }
  #contact.blauw .form__voet .knop { background: var(--wit-tekst); color: var(--inkt); }
  #contact.blauw .form__voet .knop:hover { background: #fff; }
  .thuis .wolkje--b { left: -14%; right: auto; top: auto; bottom: 18px; width: 38%; opacity: 0.72;
                      transform: scaleX(-1); }
  /* de kaart is matglas en zet op de telefoon de vragen boven de uitkomst */
  .thuis .teaser { display: flex; flex-direction: column; gap: 0;
      border: 1px solid rgba(255,255,255,0.75); border-radius: 24px;
      background: rgba(255,255,255,0.62);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
              backdrop-filter: blur(30px) saturate(180%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.95),
                  0 2px 4px -1px rgba(13,27,42,0.08),
                  0 18px 32px -16px rgba(13,27,42,0.24),
                  0 56px 84px -38px rgba(13,27,42,0.42); }
  /* de vraagblokjes zijn dunner glas, zodat je de kleur eronder ziet doorschemeren */
  .thuis .teaser .vraag-blok { background: rgba(255,255,255,0.42);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.8);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 16px -10px rgba(13,27,42,0.22); }
  .thuis .teaser .keuzes label { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.85); }
  .thuis .teaser .keuzes label:has(input:checked) { background: var(--blauw); border-color: var(--blauw); }
  .thuis .teaser .test__uitkomst { order: 2; border: 1px solid rgba(255,255,255,0.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),
                  0 4px 10px -4px rgba(47,95,230,0.4),
                  0 26px 44px -22px rgba(47,95,230,0.6); }
  .thuis .teaser > div { display: contents; }
  .thuis .teaser .test__vragen { order: 1; margin-top: 26px; }
  .teaser .vraag-blok { padding: 14px 16px; }
  /* de drie cijfers naast elkaar in plaats van onder elkaar */
  /* de test opent op de telefoon direct met de vraag: label en inleiding zeggen
     hetzelfde als de kop en de drie vragen eronder */
  .thuis .test__spil, .thuis .test__lood, .thuis #testKop { display: none; }
  .thuis .test__kop { display: block; margin-top: 0; }
  .thuis .test__vragen { margin-top: 22px; }
  .thuis .test__uitkomst { margin-top: 22px; }
  .teaser .uitkomst { display: grid; grid-template-columns: 1fr 1fr; }
  .teaser .uitkomst > div:last-child { grid-column: 1 / -1; }
  .teaser .uitkomst span { margin-top: 2px; font-size: 13px; }
  .teaser .uitleg { font-size: 14px; }
  .teaser .test__vragen { gap: 10px; }
  .teaser .test__uitkomst { margin-top: 24px; padding: 22px; gap: 14px; }
  .teaser .uitkomst { gap: 14px; }
  .teaser .uitkomst b { font-size: 30px; }
  .teaser { grid-template-columns: 1fr; }
  .hero--pagina .groot { max-width: none; }

  /* tegels */
  /* wat het kost: de drie kaarten in dezelfde matglasstijl, met wolken erachter */
  :is(.thuis #prijs, .tel-prijs) { position: relative; isolation: isolate; overflow: hidden; }
  :is(.thuis, .tel-prijs) .prijs__lucht { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  :is(.thuis, .tel-prijs) .prijs__lucht i { position: absolute; display: block; background: #4A7BFF; aspect-ratio: 1451 / 971; }
  /* onder de tekst, half achter de kaarten door: niet over de zinnen heen */
  :is(.thuis, .tel-prijs) .prijs__lucht i:nth-child(1) { left: -20%; top: 33%; width: 58%; opacity: 0.55; }
  /* elke kaart zijn eigen kleur; één waarde per kaart aanpassen is genoeg */
  :is(.thuis, .tel-prijs) .prijs--sw  { --tint: 47,95,230; }
  :is(.thuis, .tel-prijs) .prijs--web { --tint: 14,159,156; }
  :is(.thuis, .tel-prijs) .prijs--ai  { --tint: 166,63,212; }
  /* een vleug van de eigen kleur over het glas, van boven iets sterker dan onderin;
     licht genoeg om de wolken erachter te blijven zien */
  :is(.thuis #prijs, .tel-prijs) .prijs { position: relative; color: var(--inkt); border-radius: 18px;
                border: 1.5px solid rgba(var(--tint),0.55);
                background: linear-gradient(180deg, rgba(var(--tint),0.16), rgba(var(--tint),0.06)),
                            rgba(255,255,255,0.52);
                -webkit-backdrop-filter: blur(18px) saturate(180%);
                        backdrop-filter: blur(18px) saturate(180%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 30px -16px rgba(var(--tint),0.42); }
  /* label dat over de bovenrand heen valt */
  /* de pakketten snappen in het midden in plaats van tegen de linkerrand:
     77vw kaart, zodat de buurkaart met zijn icoon en prijs in beeld gluurt en je ziet
     dat er meer staat; een gloed alleen was daarvoor te subtiel */
  .prijzen { padding: 20px 8vw 12px; }
  .prijzen > * { width: 77vw; scroll-snap-align: center; }
  :is(.thuis, .tel-prijs) .prijs__label { display: inline-flex; position: absolute; top: -11px; left: 50%;
                transform: translateX(-50%); padding: 5px 12px; border-radius: 999px;
                background: rgb(var(--tint)); color: #fff; white-space: nowrap;
                font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  :is(.thuis #prijs, .tel-prijs) .prijs__sub { border-bottom-color: var(--lijn); padding-bottom: 16px; }
  /* de prijzen staan er meteen, zonder in te faden */
  html.beweegt .thuis .prijzen [data-in] { opacity: 1; transform: none; }
  /* kop van de kaart: icoontje, naam en één regel eronder */
  :is(.thuis #prijs, .tel-prijs) .prijs > .mono, :is(.thuis #prijs, .tel-prijs) .prijs > .stil { display: none; }
  :is(.thuis, .tel-prijs) .prijs__merk { display: flex; align-items: center; gap: 12px; }
  :is(.thuis, .tel-prijs) .prijs__icoon { display: grid; place-items: center; flex: none; width: 40px; height: 40px;
                border-radius: 12px; border: 1px solid rgba(var(--tint),0.20);
                background: rgba(var(--tint),0.12); color: rgb(var(--tint)); }
  :is(.thuis, .tel-prijs) .prijs__icoon svg { width: 20px; height: 20px; }
  :is(.thuis, .tel-prijs) .prijs__merk b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  :is(.thuis, .tel-prijs) .prijs__merk em { display: block; margin-top: 2px; font-style: normal; font-size: 13px;
                line-height: 1.35; color: var(--inkt-2); }
  :is(.thuis #prijs, .tel-prijs) .prijs__bedrag { margin-top: 18px; font-size: 32px; }
  :is(.thuis, .tel-prijs) .prijs__punten { display: flex; flex-direction: column; gap: 9px; margin-top: 16px;
                list-style: none; padding: 0; }
  :is(.thuis, .tel-prijs) .prijs__punten li { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--inkt); }
  /* knop onderaan elke kaart, in de kleur van die kaart */
  :is(.thuis, .tel-prijs) .prijs__cta { display: flex; align-items: center; justify-content: center;
                margin-top: auto; min-height: 48px; font-size: 15px;
                background: rgb(var(--tint)); color: #fff; }
  :is(.thuis, .tel-prijs) .prijs__cta:hover { filter: brightness(0.92); }
  /* meer-infoknop boven 'Plan een gesprek', omlijnd in de kleur van de kaart zelf.
     Alleen op de telefoon: op het bureaublad staat die knop al bij de bouwkaarten. */
  .tel-info { display: flex; }
  .prijs__meer { align-items: center; justify-content: center; width: 100%; margin-top: auto;
                min-height: 46px; font-size: 15px; background: transparent;
                border: 1.5px solid rgba(var(--tint),0.55); color: rgb(var(--tint)); font-weight: 600; }
  .prijs__meer + .prijs__cta { margin-top: 10px; }
  /* --- productpagina's: de uitlegsectie is op de telefoon licht, met wolken erachter
         en de drie stappen in een glazen kader met haarlijnen ertussen --- */
  .prod { position: relative; }
  .prod > .wrap { position: relative; z-index: 1; }
  .licht-op-telefoon { background: var(--creme); color: var(--inkt); }
  .licht-op-telefoon .groot { color: var(--inkt); }
  .licht-op-telefoon .stil { color: var(--inkt-2); }
  .vlak__lucht { display: block; position: absolute; inset: 0; z-index: 0;
                pointer-events: none; overflow: hidden; }
  .vlak__lucht i { position: absolute; display: block; aspect-ratio: 1451 / 971; }
  /* allebei in de kleur van de pagina, rustig zwevend */
  .vlak__lucht i { background: rgb(var(--t)); }
  .vlak__lucht i:nth-child(1) { left: -20%; top: 32%; width: 54%; opacity: 0.20;
                animation: vlakA 11s ease-in-out infinite alternate; }
  .vlak__lucht i:nth-child(2) { left: 62%; top: 62%; width: 46%; opacity: 0.14;
                animation: vlakB 9s ease-in-out infinite alternate; }
  @keyframes vlakA { from { transform: translate(0,0); } to { transform: translate(26px,-10px); } }
  @keyframes vlakB { from { transform: translate(0,0); } to { transform: translate(-22px,8px); } }
  @media (prefers-reduced-motion: reduce) { .vlak__lucht i { animation: none; } }

  .licht-op-telefoon .uitleg-stapel { display: block; gap: 0; margin-top: 22px; border-radius: 20px; overflow: hidden;
                border: 1.5px solid rgba(var(--t),0.42);
                background: rgba(255,255,255,0.58);
                -webkit-backdrop-filter: blur(20px) saturate(170%);
                        backdrop-filter: blur(20px) saturate(170%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 34px -18px rgba(13,27,42,0.35); }
  /* het nummer wordt een tegeltje links dat over alle regels heen staat */
  .licht-op-telefoon .uitleg-stapel .plaat { display: grid; grid-template-columns: 38px 1fr; column-gap: 14px;
                min-height: 0; padding: 16px 18px; border: 0; border-radius: 0;
                background: none; box-shadow: none; color: var(--inkt); }
  .licht-op-telefoon .uitleg-stapel .plaat + .plaat { border-top: 1px solid rgba(26,26,26,0.10); }
  .licht-op-telefoon .uitleg-stapel .nr { display: contents; }
  .licht-op-telefoon .uitleg-stapel .nr b { grid-column: 1; grid-row: 1 / -1; align-self: start;
                display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
                background: rgba(var(--t),0.13); color: rgb(var(--t));
                font-size: 14px; font-weight: 700; letter-spacing: 0; }
  .licht-op-telefoon .uitleg-stapel .nr > span { grid-column: 2; font-size: 17px; font-weight: 700;
                letter-spacing: -0.015em; line-height: 1.25; color: var(--inkt); }
  .licht-op-telefoon .uitleg-stapel .plaat h3 { grid-column: 2; margin-top: 3px; padding-top: 0;
                font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--inkt); }
  .licht-op-telefoon .uitleg-stapel .plaat p { grid-column: 2; margin-top: 6px; font-size: 13.5px; line-height: 1.45;
                font-weight: 500; color: var(--inkt); }
  .licht-op-telefoon .plaat__extra { display: block; grid-column: 2; margin-top: 10px; }
  /* laag 1: het bericht dat binnenkomt */
  .licht-op-telefoon .plaat__bericht { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.75);
                border: 1px solid rgba(26,26,26,0.08); font-size: 12.5px; line-height: 1.4; }
  .licht-op-telefoon .plaat__bericht em { display: block; margin-bottom: 3px; font-style: normal; font-size: 10.5px;
                letter-spacing: 0.06em; text-transform: uppercase; color: var(--inkt-3); }
  /* laag 2: de bronnen als chips */
  .licht-op-telefoon .plaat__bronnen { display: flex; flex-wrap: wrap; gap: 6px; }
  .licht-op-telefoon .plaat__bronnen span { padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
                background: rgba(var(--t),0.12); color: rgb(var(--t)); }
  /* laag 3: de schakelaar die laat zien dat jij bepaalt wat doorgaat */
  .licht-op-telefoon .plaat__schakel { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
  .licht-op-telefoon .plaat__schakel .knopje { position: relative; flex: none; width: 42px; height: 24px; padding: 0;
                border: 0; border-radius: 999px; background: rgba(26,26,26,0.18); cursor: pointer;
                transition: background 300ms var(--ease); }
  .licht-op-telefoon .plaat__schakel .knopje__bol { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
                border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
                transition: transform 300ms var(--ease); }
  .licht-op-telefoon .plaat__schakel .knopje.is-aan { background: rgb(var(--t)); }
  .licht-op-telefoon .plaat__schakel .knopje.is-aan .knopje__bol { transform: translateX(18px); }

  /* de hero van de productpagina vulde het hele scherm met twee gaten van 200px;
     op de telefoon is hij nu zo hoog als zijn inhoud, met wolken in de lucht */
  /* Elke pagina met een paginakop krijgt op de telefoon dezelfde compacte kop als de
     productpagina's: geen schermvullende hoogte, 20 px boven en 44 onder. Het
     terug-pijltje vervalt hier; het logo is al de weg terug. */
  .hero--pagina, .hero--kort { min-height: 0; padding: 20px 0 44px; }
  .terug { display: none; }
  /* de hoofdknop neemt de kleur van de pagina over, net als bij de pakketten */
  .prod .knop:not(.knop--licht):not(.knop--grijs):not(.knop--groen) { background: rgb(var(--t)); color: #fff; }

  /* op de telefoon is dit een leadfunnel, geen naslagwerk: de twee uitlegsecties
     onderaan gaan eruit en er komt een korte uitnodiging voor in de plaats */
  .tel-weg { display: none; }
  /* lange woorden in koppen duwden de pagina breder dan het scherm, op de juridische
     pagina's (verwerkersovereenkomst, klantverantwoordelijkheid). Breken mag alleen
     als het woord echt niet past, dus aan bestaande koppen verandert er niets. */
  h1, h2, h3 { overflow-wrap: break-word; }
  .tel-uitnodiging { display: block; }
  /* prijsblok op de telefoon: een kaart, dus geen swipe-rij zoals op de homepage */
  /* ---------- de blauwe onderdelen van de beheer- en appsectie mee in de paginakleur ----------
     Op het bureaublad blijven ze blauw; daar is de pagina niet omgekleurd. */
  .pag--web .logo-klein i { background: rgb(var(--t)); }
  .pag--web .scherm--licht .bubbel--rechts { background: rgb(var(--t)); }
  .pag--web .beheer__veld.is-actief { border-color: rgb(var(--t)); box-shadow: 0 0 0 3px rgba(var(--t),0.14); }
  .pag--web .beheer__veld i { background: rgb(var(--t)); }
  .pag--web .knop--klein { background: rgb(var(--t)); color: var(--wit-tekst); }

  /* ---------- pakketten op de websitepagina: een tegelijk, gekozen met knoppen ---------- */
  #pakketten .prijzen { display: block; width: auto; margin: 22px 0 0; padding: 0;
        overflow: visible; scroll-snap-type: none; }
  #pakketten .prijs { display: none; width: auto; margin: 0; }
  #pakketten .prijs.is-toon { display: flex; }
  #pakketten .prijs { position: relative; color: var(--inkt); border-radius: 18px; padding: 22px 18px 18px;
        border: 1.5px solid rgba(var(--tint),0.55);
        background: linear-gradient(180deg, rgba(var(--tint),0.16), rgba(var(--tint),0.06)),
                    rgba(255,255,255,0.55);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
                backdrop-filter: blur(18px) saturate(180%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 30px -16px rgba(var(--tint),0.42); }
  #pakketten .prijs > .mono { color: var(--inkt-2); opacity: 1; }
  #pakketten .prijs__sub { color: var(--inkt-2); }
  #pakketten .prijs__sub { border-bottom-color: var(--lijn); }
  #pakketten .prijs__bedrag { margin-top: 12px; font-size: 32px; }
  #pakketten .vink.kort li { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--inkt); }
  .pak__kiezer { margin-top: 22px; }
  /* de gekozen knop in de kleur van het gekozen pakket; donkere letters, behalve op paars */
  .pak__kiezer[data-kies] button.is-aan { color: #1A1A1A; }
  .pak__kiezer[data-kies="1"] button.is-aan { background: rgb(250,104,56); border-color: rgb(250,104,56); }
  .pak__kiezer[data-kies="2"] button.is-aan { background: rgb(166,63,212); border-color: rgb(166,63,212); color: #fff; }
  .pak__kiezer[data-kies="3"] button.is-aan { background: rgb(14,159,156); border-color: rgb(14,159,156); }

  .tel-prijs { display: block; }
  .tel-prijs .prijzen { display: block; margin: 24px 0 0; padding: 0; overflow: visible; }
  .tel-prijs .prijzen > * { width: auto; }
  .tel-prijs .groot { font-size: clamp(30px, 8.2vw, 38px); line-height: 1.12; }
  /* De wolken krijgen de kleur en de lichtheid van de andere wolken op deze pagina: op de homepage
     liggen ze grotendeels achter drie glazen kaarten, hier staan ze half in het open vlak. */
  .tel-prijs .prijs__lucht i { background: rgb(var(--t)); }
  .tel-prijs .prijs__lucht i:nth-child(1) { opacity: 0.22; }
  /* wat het oplevert, in het groen onder de kaart */
  .opbrengst { --groen: 18,133,74; margin-top: 14px; padding: 18px 20px 16px; border-radius: 18px;
        border: 1.5px solid rgba(var(--groen),0.38);
        background: linear-gradient(180deg, rgba(var(--groen),0.14), rgba(var(--groen),0.05)),
                    rgba(255,255,255,0.52);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
                backdrop-filter: blur(18px) saturate(180%); }
  .opbrengst__merk { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
        text-transform: uppercase; color: rgb(var(--groen)); }
  .opbrengst__cijfer { margin-top: 8px; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; color: var(--inkt); }
  .opbrengst__cijfer b { font-weight: 700; }
  .opbrengst__sub { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--inkt); }
  .opbrengst__noot { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--inkt-3); }
  .uitnodiging { margin-top: 6px; padding: 22px 20px 20px; border-radius: 20px;
                border: 1.5px solid rgba(var(--t),0.42);
                background: rgba(255,255,255,0.58);
                -webkit-backdrop-filter: blur(20px) saturate(170%);
                        backdrop-filter: blur(20px) saturate(170%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 34px -18px rgba(13,27,42,0.35); }
  .uitnodiging .groot { font-size: clamp(24px, 6.6vw, 30px); line-height: 1.15; }
  .uitnodiging p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--inkt-2); }
  .uitnodiging .knop { width: 100%; margin-top: 20px; }
  /* de scrub-tekst was wit voor het donkere paneel en verdween op het lichte vlak */
  .licht-op-telefoon .scrub-tekst { color: var(--inkt); }
  /* elke alinea met het effect eindigt vol zwart: .stil is 62% grijs, en dan is het
     verschil met het grijs waar hij begint te klein om op te vallen */
  .prod p[data-scrub] { color: var(--inkt); }
  html.beweegt .licht-op-telefoon [data-scrub] .w { color: var(--inkt-3); }

  /* ---- voorbeelddashboard (alleen telefoon) ----
     Opbouw naar het voorbeeld van Revolut: donkere grond, een kleurwaas bovenin die
     langzaam ademt, een groot getal in het midden en pas daarna de kaarten. Het merk
     heet JOUW MERK, want dat is wat een klant boven zijn eigen systeem ziet. ---- */
  .dash { display: block; position: relative; margin-top: 24px; border-radius: 28px; overflow: hidden;
                background: #0A1522; color: var(--wit-tekst);
                box-shadow: 0 2px 4px rgba(13,27,42,0.10), 0 26px 52px -22px rgba(13,27,42,0.55); }
  .licht-op-telefoon .scherm--donker, .licht-op-telefoon .telefoontje { display: none; }
  .dash__waas { position: absolute; left: -30%; top: -22%; width: 160%; height: 58%; pointer-events: none;
                background: radial-gradient(60% 60% at 30% 40%, rgba(74,123,255,0.85), transparent 70%),
                            radial-gradient(55% 55% at 78% 22%, rgba(47,95,230,0.65), transparent 72%);
                filter: blur(6px); animation: dashAdem 9s ease-in-out infinite alternate; }
  @keyframes dashAdem { from { transform: translate(0,0) scale(1); } to { transform: translate(14px,10px) scale(1.06); } }
  .dash__scherm { position: relative; padding: 16px 16px 0; }
  .dash__balk { display: flex; justify-content: space-between; padding: 0 4px 12px;
                font-size: 11px; font-weight: 600; opacity: 0.85; font-variant-numeric: tabular-nums; }
  .dash__kop { display: flex; align-items: center; gap: 9px; }
  .dash__merk { display: flex; align-items: center; gap: 6px; flex: none;
                padding: 6px 11px 6px 7px; border-radius: 999px; background: rgba(255,255,255,0.14);
                font-size: 12px; font-weight: 700; }
  .dash__merk i { display: block; width: 15px; height: 11px; background: #4A7BFF; }
  .dash__zoek { flex: 1; display: flex; align-items: center; gap: 7px; padding: 7px 12px;
                border-radius: 999px; background: rgba(255,255,255,0.12); font-size: 12px; opacity: 0.8; }
  .dash__zoek svg { width: 12px; height: 12px; flex: none; }
  .dash__held { text-align: center; padding: 26px 0 18px; }
  .dash__held span { display: block; font-size: 12px; font-weight: 600; opacity: 0.7; }
  .dash__held b { display: block; margin-top: 5px; font-size: 46px; font-weight: 700;
                letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
  .dash__held em { display: inline-block; margin-top: 10px; padding: 5px 13px; border-radius: 999px;
                background: rgba(255,255,255,0.16); font-style: normal; font-size: 12px; font-weight: 600; }
  .dash__op { margin-top: 9px; color: #2FBF71; font-size: 12.5px; font-weight: 600; opacity: 1; }
  .dash__acties { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 2px 0 18px; }
  .dash__actie { text-align: center; font-size: 11px; font-weight: 600; opacity: 0.9; }
  .dash__actie i { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 7px;
                border-radius: 50%; background: rgba(255,255,255,0.15); }
  .dash__actie svg { width: 18px; height: 18px; }
  .dash__vel { margin: 0 -16px; padding: 16px 15px 76px; border-radius: 26px 26px 0 0; background: #14202F; }
  .dash__kaart { padding: 14px; border-radius: 18px; background: #1B2A3D; }
  .dash__kaart + .dash__kaart { margin-top: 10px; }
  .dash__kaartkop { display: flex; align-items: baseline; justify-content: space-between;
                font-size: 13px; font-weight: 600; }
  .dash__kaartkop small { font-size: 11px; font-weight: 600; opacity: 0.6; }
  .dash__grafiek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; align-items: end;
                height: 88px; margin-top: 13px; }
  .dash__staaf { display: flex; align-items: flex-end; height: 100%; overflow: hidden;
                border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,0.14); }
  .dash__staaf i { display: block; width: 100%; height: 0; border-radius: 6px 6px 3px 3px;
                background: #4A7BFF; transition: height 900ms var(--ease); }
  .dash__staaf.is-top i { background: #9FBBFF; }
  .dash__dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: 7px;
                font-size: 10px; font-weight: 600; text-align: center; opacity: 0.55; }
  .dash__regel { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center;
                padding: 11px 0; }
  .dash__regel + .dash__regel { border-top: 1px solid rgba(255,255,255,0.08); }
  .dash__regel i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
                background: rgba(74,123,255,0.22); color: #9FBBFF; font-size: 12px; font-weight: 700; }
  .dash__regel b { display: block; font-size: 13.5px; font-weight: 600; }
  .dash__regel span { display: block; margin-top: 1px; font-size: 11.5px; opacity: 0.6; }
  .dash__regel u { text-decoration: none; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .dash__regel u.is-let { color: var(--oranje); }
  .dash__tip { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 13px;
                border-radius: 14px; border: 1px solid rgba(250,104,56,0.5);
                background: rgba(250,104,56,0.10); font-size: 12px; line-height: 1.4; }
  .dash__tip svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--oranje); }
  .dash__tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid;
                grid-template-columns: repeat(4, 1fr); padding: 11px 8px 20px;
                background: linear-gradient(transparent, #14202F 38%);
                font-size: 10px; font-weight: 600; text-align: center; }
  .dash__tab { opacity: 0.45; }
  .dash__tab.is-aan { opacity: 1; color: #4A7BFF; }
  .dash__tab svg { display: block; width: 19px; height: 19px; margin: 0 auto 4px; }
  /* de staven en regels komen in zodra het dashboard in beeld komt */
  html.beweegt .dash__regel { opacity: 0; transform: translateY(8px); }
  html.beweegt .dash__regel.is-in { opacity: 1; transform: none;
                transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
  @media (prefers-reduced-motion: reduce) {
    .dash__waas { animation: none; }
    .dash__staaf i { transition: none; }
    html.beweegt .dash__regel { opacity: 1; transform: none; }
  }

  /* ---- kiezer: knoppen boven de pakketten op de websitepagina, je ziet er een tegelijk ---- */
  .vergelijk__kiezer { display: flex; gap: 6px; margin-top: 22px; }
  .vergelijk__kiezer button { flex: 1; min-width: 0; padding: 9px 4px; border-radius: 10px;
                border: 1px solid var(--lijn); background: rgba(255,255,255,0.6); color: var(--inkt-2);
                font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
                transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease); }
  .vergelijk__kiezer button.is-aan { background: rgb(var(--t)); border-color: rgb(var(--t)); color: #fff; }

  /* ---- productpagina: alle rijtjes kaarten worden een glazen kader met lagen ----
     Een kader per sectie in plaats van losse kaarten: dat scheelt hoogte en het leest
     als een rijtje in plaats van als vijf losse aanbiedingen. */
  .prod .raster-2 {
                display: block; gap: 0; margin-top: 22px;
                margin-inline: 0; padding: 0; overflow: hidden; scroll-snap-type: none;
                border-radius: 20px; overflow: hidden;
                border: 1.5px solid rgba(var(--t),0.42);
                background: rgba(255,255,255,0.58);
                -webkit-backdrop-filter: blur(20px) saturate(170%);
                        backdrop-filter: blur(20px) saturate(170%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 34px -18px rgba(13,27,42,0.35); }
  .prod .raster-2 > .kaart {
                width: auto; margin: 0; padding: 16px 18px !important; min-height: 0;
                border: 0 !important; border-radius: 0; background: none; box-shadow: none;
                color: var(--inkt); }
  .prod .raster-2 > .kaart + .kaart { border-top: 1px solid rgba(26,26,26,0.10) !important; }
  .prod .raster-2 .kop {
                margin: 0; padding-top: 0; font-size: 17px; font-weight: 700;
                letter-spacing: -0.015em; line-height: 1.25; color: var(--inkt); }
  .prod .raster-2 p {
                margin-top: 6px; font-size: 13.5px; line-height: 1.45;
                font-weight: 500; color: var(--inkt-2); }
  /* de losse afspraak-kaart halverwege herhaalt het formulier onderaan */
  .prod .cta-kaart { display: none; }
  /* tweede inleidende alinea zegt hetzelfde als de drie lagen eronder */
  .pag--ai .twee .tekst p.stil + p.stil { display: none; }

  /* --- wat bouwt Cleefio: drie kaarten onder elkaar, elk met eigen kleur --- */
  .tegels-sectie { display: block; }
  .tegels-sectie .groot { margin-top: 10px; }
  .bouw__intro { margin-top: 12px; font-size: 16px; line-height: 1.5; }
  .bouwkaart { display: block; margin-top: 14px; padding: 20px; border-radius: 20px; color: inherit; }
  .bouwkaart:first-of-type { margin-top: 22px; }
  .bouwkaart h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
  .bouwkaart p { margin-top: 7px; font-size: 15px; line-height: 1.45; opacity: 0.82; }
  .bouwkaart__punten { list-style: none; margin: 14px 0 0; padding: 14px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.35; }
  .bouwkaart__punten li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; }
  .bouwkaart__punten i { display: block; margin-top: 2px; }
  .bouwkaart__punten svg { width: 12px; height: 12px; }
  /* zelfde kleur per product als in de prijssectie: software blauw, websites teal, agents magenta */
  .thuis .tegels-sectie { position: relative; isolation: isolate; }
  /* de wolken knippen zichzelf af in plaats van de sectie */
  .thuis .bouw__lucht { display: block; position: absolute; inset: 0; z-index: -1;
                pointer-events: none; overflow: hidden; }
  .thuis .bouw__lucht i { position: absolute; display: block; background: #4A7BFF; aspect-ratio: 1451 / 971; }
  .thuis .bouw__lucht i:nth-child(1) { left: -20%; top: 22%; width: 58%; opacity: 0.52; }
  .thuis .bouw__lucht i:nth-child(2) { left:  56%; top: 62%; width: 48%; opacity: 0.38; }
  .bouwkaart--sw  { --t: 47,95,230; }
  .bouwkaart--web { --t: 14,159,156; }
  .bouwkaart--ai  { --t: 166,63,212; }

  /* een op een dezelfde opmaak als de prijskaarten: een vleug van de eigen kleur
     over het glas, van boven iets sterker dan onderin */
  .thuis .bouwkaart { color: var(--inkt); border-radius: 18px;
                border: 1.5px solid rgba(var(--t),0.55);
                background: linear-gradient(180deg, rgba(var(--t),0.16), rgba(var(--t),0.06)),
                            rgba(255,255,255,0.52);
                -webkit-backdrop-filter: blur(18px) saturate(180%);
                        backdrop-filter: blur(18px) saturate(180%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 30px -16px rgba(var(--t),0.42); }
  /* zelfde icoontje als op de prijskaart */
  .thuis .bouwkaart__icoon { display: grid; place-items: center; flex: none; width: 40px; height: 40px;
                margin-bottom: 14px; border-radius: 12px; border: 1px solid rgba(var(--t),0.20);
                background: rgba(var(--t),0.12); color: rgb(var(--t)); }
  .thuis .bouwkaart__icoon svg { width: 20px; height: 20px; }
  .thuis .bouwkaart p { color: var(--inkt-2); opacity: 1; font-weight: 500; }
  .thuis .bouwkaart__punten { border-top: 1px solid var(--lijn); }
  .thuis .bouwkaart__punten li { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--inkt); }
  .thuis .bouwkaart__punten svg { color: rgb(var(--t)); }
  /* knop onderaan elke kaart, in de kleur van die kaart */
  .thuis .bouwkaart__cta { display: flex; align-items: center; justify-content: center; gap: 6px;
                margin-top: 16px; min-height: 48px; border-radius: var(--r-knop);
                background: rgb(var(--t)); color: #fff; font-size: 15px; font-weight: 600; }
  .thuis .bouwkaart__cta svg { width: 13px; height: 13px; }
  .thuis .bouwkaart:hover .bouwkaart__cta { filter: brightness(0.92); }
  .bouwkaart:active { transform: translateY(1px) scale(0.995); }

  /* vaste knop onderin: komt na de hero, verdwijnt bij het formulier */
  /* geen balk meer: de twee knoppen zweven onderin, elk licht doorzichtig zodat je
     ziet wat eronder doorloopt */
  .vastebalk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 8px;
               padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
               border: 0; background: none; box-shadow: none;
               transform: translateY(110%);
               transition: transform 300ms var(--ease); }
  .vastebalk.is-aan { transform: none; }
  .vastebalk .knop { flex: 1; min-height: 46px; font-size: 15px;
               -webkit-backdrop-filter: blur(14px) saturate(160%);
                       backdrop-filter: blur(14px) saturate(160%);
               background: rgba(47,95,230,0.86); border: 1px solid rgba(255,255,255,0.24);
               box-shadow: 0 10px 26px -14px rgba(13,27,42,0.45);
               transition: background 300ms var(--ease), color 300ms var(--ease); }
  /* het grijs moet wel leesbaar blijven als er een blauwe knop onder doorloopt,
     dus een lichte vulling in plaats van een donkere waas */
  .vastebalk .knop--grijs { flex: 0 0 34%; background: rgba(238,237,232,0.74);
               border: 1px solid rgba(255,255,255,0.6); }
  /* onder 390 breed pasten de twee knoppen niet: 'Maak kennis' viel over de rand */
  @media (max-width: 389px) { .vastebalk .knop { padding: 0 12px; } }
  @media (max-width: 349px) { .vastebalk .knop { padding: 0 8px; font-size: 14px; } }
  /* boven een donkere sectie zou het grijs wegvallen, dus dan wordt hij licht */
  .vastebalk.is-donker .knop--grijs { background: rgba(240,239,227,0.88); color: var(--inkt); }
  .voet { padding-bottom: 96px; }

}

@media (max-width: 1023.98px) {
  /* vertrouwen als korte lijst in plaats van drie kolommen met grote iconen */
  .vertrouwen { gap: 0; margin-top: 32px; }
  .vertrouwen__item { border-left: 0 !important; padding: 20px 0 20px 24px !important; border-top: 1px solid var(--lijn-licht); }
  .vertrouwen__item:last-child { border-bottom: 1px solid var(--lijn-licht); }
  .vertrouwen h3 { margin-top: 0; font-size: 20px; }
  .vertrouwen p { margin-top: 6px; font-size: 15px; }

  /* slotblok: op de telefoon licht in plaats van navy, met de drie punten in een
     glazen kader met haarlijnen ertussen. De desktop houdt zijn donkere paneel. */
  .thuis #vertrouwen { position: relative; isolation: isolate; overflow: hidden;
                background: var(--creme); color: var(--inkt); }
  /* Het blok kwam per icoon, per kop en per zin binnen: twaalf losse stukjes in een kaart,
     en dat voelde traag en rommelig. Nu schuift de hele kaart als geheel van rechts in beeld. */
  html.beweegt .thuis .vertrouwen__item > svg,
  html.beweegt .thuis .vertrouwen__item > h3,
  html.beweegt .thuis .vertrouwen__item > p { opacity: 1; transform: none; transition: none; }
  html.beweegt .thuis .vertrouwen[data-in] { opacity: 0; transform: translateX(56px);
                transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  html.beweegt .thuis .vertrouwen[data-in].is-in { opacity: 1; transform: none; }
  .thuis #vertrouwen .groot { color: var(--inkt); }
  .thuis #vertrouwen .tekst { display: none; }
  .thuis .vert__lucht { display: block; position: absolute; inset: 0; z-index: -1;
                pointer-events: none; overflow: hidden; }
  .thuis .vert__lucht i { position: absolute; display: block; background: #4A7BFF; aspect-ratio: 1451 / 971; }
  .thuis .vert__lucht i:nth-child(1) { left: -22%; top: 24%; width: 58%; opacity: 0.34; }
  .thuis .vert__lucht i:nth-child(2) { left:  58%; top: 66%; width: 48%; opacity: 0.26; }
  .thuis .vertrouwen { --t: 47,95,230; display: block; gap: 0; margin-top: 24px;
                border-radius: 20px; overflow: hidden;
                border: 1.5px solid rgba(var(--t),0.42);
                background: rgba(255,255,255,0.58);
                -webkit-backdrop-filter: blur(20px) saturate(170%);
                        backdrop-filter: blur(20px) saturate(170%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 34px -18px rgba(13,27,42,0.35); }
  /* het icoon staat links en beslaat beide regels; de blauwe streep vervalt */
  .thuis .vertrouwen__item { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px;
                border-left: 0 !important; padding: 17px 18px !important; }
  .thuis .vertrouwen__item { border-top: 0; }
  .thuis .vertrouwen__item:last-child { border-bottom: 0; }
  .thuis .vertrouwen__item + .vertrouwen__item { border-top: 1px solid rgba(26,26,26,0.10); }
  .thuis .vertrouwen__lijn { display: none; }
  .thuis .vertrouwen svg { display: block; grid-column: 1; grid-row: 1 / span 2;
                box-sizing: border-box; width: 40px; height: 40px; padding: 9px;
                border-radius: 12px; border: 1px solid rgba(var(--t),0.20);
                background: rgba(var(--t),0.12); color: rgb(var(--t)); stroke-width: 3; }
  .thuis .vertrouwen h3 { grid-column: 2; grid-row: 1; margin-top: 1px;
                font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
  .thuis .vertrouwen p { grid-column: 2; grid-row: 2; margin-top: 6px;
                font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--inkt-2); }
  .tegels-sectie { padding-block: 48px 56px; }
}

/* Op het bureaublad staat de lagensectie direct onder het donkere herkenningsblok en de besparingstest
   eronder. Twee lichte secties op elkaar geven een dubbel gat (twee keer sectiepadding), dus de test
   begint zonder eigen bovenruimte. Op de telefoon staat de lagensectie uit en geldt dit niet. */
@media (min-width: 1024px) { .thuis #test { padding-top: 0; } }

/* ===== detailpagina's: gelaagde platen (wat is een agent) en aanpak-rij ===== */
.uitleg-stapel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(48px, 6vw, 88px); }
.plaat { position: relative; padding: 28px; min-height: 280px; display: flex; flex-direction: column; border-radius: var(--r-kaart); background: var(--kaart); color: var(--inkt); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6); }
/* huisstijl: grote vette cijfers 01 02 03 met het woord erachter, geen puntje ertussen */
.plaat .nr, .stappen-rij .nr { display: flex; align-items: baseline; gap: 0.3em; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.plaat .nr { font-size: clamp(34px, 3.2vw, 48px); }
.stappen-rij .nr { font-size: clamp(26px, 2.1vw, 32px); }
.plaat .nr b, .stappen-rij .nr b { color: var(--blauw); font-weight: 700; }
.plaat--2 .nr b, .stappen-rij .kaart--blauw .nr b { color: var(--wit-tekst); }
.plaat--3 .nr b { color: #8FB0FF; }
.plaat h3 { margin-top: auto; padding-top: 40px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -0.025em; }
.plaat p { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--inkt-2); }
.plaat--2 { background: var(--blauw); color: var(--wit-tekst); }
.plaat--2 p { color: rgba(240,239,227,0.85); }
.plaat--3 { background: var(--donker-2); color: var(--wit-tekst); border: 1px solid rgba(240,239,227,0.12); }
.plaat--3 p { color: var(--wit-tekst-2); }
/* de platen schuiven met de scroll als lagen in elkaar (site.js); zonder beweging staan ze gewoon */
html.beweegt .plaat { opacity: 0; }
.cta-kaart { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(28px, 3.5vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.cta-kaart .titel { margin-top: 14px; max-width: 18ch; }
.cta-kaart p { margin-top: 14px; max-width: 44em; font-size: 16px; line-height: 1.5; }
.cta-kaart .knop { flex: none; }
.stappen-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.stappen-rij .kaart { padding: 24px; display: flex; flex-direction: column; }
.stappen-rij h3 { margin-top: 48px; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; letter-spacing: -0.015em; }
.stappen-rij p { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--inkt-2); }
.stappen-rij .kaart--blauw p { color: rgba(240,239,227,0.85); }
/* weegschaal onder de besparingstest: wat het nu kost tegenover wat een systeem kost */
.weegschaal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lijn); }
.weegschaal__kant { display: flex; flex-direction: column; gap: 6px; }
.weegschaal__kant + .weegschaal__kant { padding-left: 24px; border-left: 1px solid var(--lijn); }
.weegschaal .mono { color: var(--inkt-3); }
.weegschaal b { font-size: clamp(22px, 1.7vw, 26px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; font-variant-numeric: tabular-nums; }
.weegschaal b.is-nu { color: var(--oranje); }
.weegschaal b.is-terug { color: #1D6F42; }   /* zelfde groen als het vinkje "Goedgekeurd" */
.weegschaal .stil { font-size: 14px; line-height: 1.35; }

/* lopende tekst die net als de koppen woord voor woord wit en dik wordt tijdens het scrollen */
.scrub-tekst { color: var(--wit-tekst); font-weight: 500; }


/* beheeromgeving: een klein, herkenbaar bewerkscherm in plaats van losse tekstregels */
.beheer { padding: 0; overflow: hidden; }
.beheer__kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--lijn); font-size: 16px; font-weight: 500; }
.beheer__kop .mono { color: var(--inkt-3); }
.beheer__body { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.beheer__label { display: block; color: var(--inkt-3); }
.beheer__label + .beheer__veld { margin-bottom: 14px; }
.beheer__veld { display: flex; align-items: center; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--r-knop); background: var(--creme); font-size: 15px; }
.beheer__veld.is-actief { border-color: var(--blauw); background: #fff; box-shadow: 0 0 0 3px rgba(47,95,230,0.12); }
/* knipperende cursor in het veld dat je aan het bewerken bent */
.beheer__veld i { width: 1.5px; height: 17px; margin-left: 2px; background: var(--blauw); animation: cursorknipper 1.1s steps(1) infinite; }
@keyframes cursorknipper { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .beheer__veld i { animation: none; } }
.beheer__voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--lijn); }

/* witte kaarten op een donkere sectie krijgen hun eigen inktkleur terug (rekenaar, case-kaart) */
.donker .kaart:not(.kaart--donker):not(.kaart--blauw) { color: var(--inkt); }
.donker .kaart:not(.kaart--donker):not(.kaart--blauw) .stil { color: var(--inkt-2); }
@media (max-width: 1023.98px) { .uitleg-stapel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .uitleg-stapel { grid-template-columns: 1fr; } .plaat { min-height: 0; } .plaat h3 { padding-top: 24px; } }

/* de wolken staan per sectie op een andere hoogte, zodat het geen behang wordt */
@media (max-width: 1023.98px) {
  .prod:nth-of-type(even) .vlak__lucht i:nth-child(1) { left: 58%; top: 18%; }
  .prod:nth-of-type(even) .vlak__lucht i:nth-child(2) { left: -18%; top: 68%; }
}


/* ---------- waarom-sectie: een gekleurd wolkje per reden (alleen bureaublad) ---------- */
.reden__wolk, .bouwsteen__icoon { display: none; }
@media (min-width: 1024px) {
  :is(.redenen .reden, .bouwstenen .bouwsteen) { position: relative; overflow: hidden; padding-top: 26px;
                    transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease); }
  :is(.redenen .reden, .bouwstenen .bouwsteen)::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px;
                            background: rgb(var(--tint)); }
  .redenen .reden__wolk, #pakketten .pak__wolk { display: block; width: 42px; height: 28px; margin-bottom: 16px;
                          background: rgb(var(--tint));
                          -webkit-clip-path: polygon(54.4% 0.1%, 58.6% 0.1%, 64.7% 2.0%, 67.3% 3.5%, 71.8% 7.7%, 75.8% 13.2%, 78.8% 19.6%, 80.9% 27.1%, 81.9% 33.0%, 86.8% 35.9%, 89.6% 38.4%, 91.3% 40.2%, 95.2% 46.1%, 97.6% 51.9%, 98.7% 55.5%, 99.4% 59.4%, 99.9% 65.5%, 99.3% 73.8%, 97.9% 79.6%, 95.9% 84.7%, 93.2% 89.5%, 88.8% 94.5%, 83.3% 98.2%, 78.6% 99.6%, 68.0% 99.9%, 24.1% 99.2%, 17.8% 98.6%, 15.1% 97.7%, 12.5% 96.3%, 9.2% 93.4%, 6.1% 89.6%, 3.6% 84.9%, 1.4% 78.8%, 0.1% 70.9%, 0.0% 63.5%, 0.7% 58.5%, 1.8% 53.5%, 4.1% 47.4%, 5.4% 45.1%, 9.0% 40.8%, 11.8% 38.4%, 15.6% 36.3%, 16.2% 34.6%, 17.1% 28.7%, 18.9% 23.5%, 21.1% 19.7%, 23.6% 16.7%, 26.1% 14.9%, 28.8% 13.8%, 32.2% 13.5%, 36.2% 14.2%, 40.6% 8.2%, 44.0% 5.0%, 48.4% 2.2%); clip-path: polygon(54.4% 0.1%, 58.6% 0.1%, 64.7% 2.0%, 67.3% 3.5%, 71.8% 7.7%, 75.8% 13.2%, 78.8% 19.6%, 80.9% 27.1%, 81.9% 33.0%, 86.8% 35.9%, 89.6% 38.4%, 91.3% 40.2%, 95.2% 46.1%, 97.6% 51.9%, 98.7% 55.5%, 99.4% 59.4%, 99.9% 65.5%, 99.3% 73.8%, 97.9% 79.6%, 95.9% 84.7%, 93.2% 89.5%, 88.8% 94.5%, 83.3% 98.2%, 78.6% 99.6%, 68.0% 99.9%, 24.1% 99.2%, 17.8% 98.6%, 15.1% 97.7%, 12.5% 96.3%, 9.2% 93.4%, 6.1% 89.6%, 3.6% 84.9%, 1.4% 78.8%, 0.1% 70.9%, 0.0% 63.5%, 0.7% 58.5%, 1.8% 53.5%, 4.1% 47.4%, 5.4% 45.1%, 9.0% 40.8%, 11.8% 38.4%, 15.6% 36.3%, 16.2% 34.6%, 17.1% 28.7%, 18.9% 23.5%, 21.1% 19.7%, 23.6% 16.7%, 26.1% 14.9%, 28.8% 13.8%, 32.2% 13.5%, 36.2% 14.2%, 40.6% 8.2%, 44.0% 5.0%, 48.4% 2.2%); }
  .bouwstenen .bouwsteen__icoon { display: grid; place-items: center; width: 38px; height: 38px;
                                  margin-bottom: 14px; border-radius: 11px;
                                  background: rgba(var(--tint), 0.12); color: rgb(var(--tint)); }
  .bouwstenen .bouwsteen__icoon svg { width: 21px; height: 21px; }
  /* de gloed zit rondom in de kleur van de kaart, met iets meer onderaan voor diepte;
     alleen onderaan las als een schaduw die eronderuit lekte */
  :is(.redenen .reden, .bouwstenen .bouwsteen):hover { transform: translateY(-4px);
                          border-color: rgba(var(--tint), 0.45);
                          box-shadow: 0 0 0 1px rgba(var(--tint), 0.22), 0 0 36px -4px rgba(var(--tint), 0.38),
                                      0 16px 40px -14px rgba(var(--tint), 0.5); }
}
@media (min-width: 1024px) {
  /* websitepakketten zoals de collega-kaarten: een streep en een wolkje in de eigen kleur, bovenin
     een vleug van die kleur. Bij het aanwijzen alleen optillen, zonder schaduw (die oogde goedkoop). */
  #pakketten .prijs { position: relative; overflow: hidden; color: var(--inkt);
                      background: linear-gradient(180deg, rgba(var(--tint),0.09), rgba(var(--tint),0) 42%), var(--kaart); }
  #pakketten .prijs::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: rgb(var(--tint)); }
  #pakketten .pak__wolk { margin-bottom: 4px; }
  #pakketten .prijs > .mono, #pakketten .prijs__sub { color: var(--inkt-2); }
  /* je nieuwe collega: een tweede kop in de sectie, en de vier kaarten op een rij */
  #pakketten .pak__collega { margin-top: clamp(72px, 8vw, 112px); }
  #pakketten .pak__collega .groot { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04; }
  #pakketten .redenen { grid-template-columns: repeat(4, 1fr); }
  #pakketten .redenen .reden { padding: 26px 22px 22px; }
  #pakketten .redenen .kop { font-size: 19px; }
  #pakketten .redenen p { font-size: 14.5px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.redenen .reden, .bouwstenen .bouwsteen) { transition: none; }
  :is(.redenen .reden, .bouwstenen .bouwsteen):hover { transform: none; }
}

/* ---------- wenk onder de prijskaarten: je kunt opzij swipen ---------- */
.swipe-wenk { display: none; }
@media (max-width: 1023.98px) {
  /* dit is de kop van de sectie geworden, dus even groot als de andere sectiekoppen */
  .swipe-wenk { display: flex; align-items: center; justify-content: center; gap: 10px;
                margin: 0 0 22px; font-size: clamp(30px, 8.4vw, 38px); font-weight: 700;
                letter-spacing: -0.03em; line-height: 1.1; color: var(--inkt); }
  .swipe-wenk svg { width: 0.62em; height: 0.62em; flex: none; stroke-width: 2.4;
                    color: rgb(var(--t)); animation: wenken 1.9s var(--ease) infinite; }
}
@keyframes wenken { 0%, 100% { transform: translateX(0); } 55% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .swipe-wenk svg { animation: none; } }

/* ---------- prijssectie op de telefoon: de wenk boven de kaarten is de kop ---------- */
@media (max-width: 1023.98px) {
  /* De h2 en de uitleg eronder vervallen hier; de sectie begint met de wenk. De h2 blijft
     in de pagina staan voor de koppenstructuur en voor aria-labelledby, alleen niet in beeld. */
  .thuis #prijs > .wrap > .twee { display: none; }
}
/* ---------- bureaublad: wat alleen op de telefoon en tablet staat ---------- */
@media (min-width: 1024px) { .bureau-weg { display: none; } }

/* ---------- prijskaarten op de homepage (bureaublad): de hele kaart is een link ----------
   De link 'Meer info' (op de telefoon een knop) ligt hier als klikvlak over de hele kaart,
   met bij hover een wenk dat je kunt klikken. */
@media (min-width: 1024px) {
  .thuis #prijs .prijs { position: relative; }
  .thuis #prijs .prijs__meer { display: block; position: absolute; inset: 0; z-index: 2; min-height: 0; padding: 0;
                               border-radius: inherit; background: none; color: transparent; font-size: 0; }
  .thuis #prijs .prijs__meer::after { content: "Klik voor meer info"; position: absolute; top: 24px; right: 24px;
                               padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.2;
                               background: var(--kaart); color: var(--inkt); opacity: 0; transform: translateY(4px);
                               transition: opacity 220ms var(--ease), transform 220ms var(--ease); pointer-events: none; }
  .thuis #prijs .prijs--ai .prijs__meer::after { background: var(--inkt); color: var(--wit-tekst); }
  .thuis #prijs .prijs:hover .prijs__meer::after, .thuis #prijs .prijs__meer:focus-visible::after { opacity: 1; transform: none; }
}

/* ---------- agents: de spelregels als rij onder de vier stappen (alleen bureaublad) ---------- */
.spelregels { margin-top: clamp(40px, 5vw, 64px); }
/* het kopje boven de rij in het gewone lettertype van de site, als kleine kop en niet als grijs label */
.spelregels__kop { margin-bottom: 18px; font-weight: 500; }
.spelregels__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.spelregels__rij li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.spelregels__icoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
                     background: rgba(47,95,230,0.10); color: var(--blauw); }
.spelregels__icoon svg { width: 24px; height: 24px; stroke-width: 3; }
.spelregels__rij h3 { font-size: 18px; letter-spacing: -0.01em; }
.spelregels__rij p { margin-top: 4px; font-size: 15px; line-height: 1.45; }

/* ---------- kleine fixes uit de ronde vergroten en verkleinen ---------- */
/* de privacyregel in het witte formulier stond in crème op wit (bureaublad) */
@media (min-width: 1024px) { .blauw .form .stil { color: var(--inkt-2); } }
/* softwarepagina op de telefoon: de wolk had dezelfde kleur als het blauwe slotblok en de footer */
@media (max-width: 1023.98px) { .pag--sw .nav.is-donker .menu-knop { background: #4A7BFF; } }
/* bureaublad: het woordmerk heeft een vaste breedte, zodat wolkje en menulinks niet meeschuiven
   als het echte lettertype binnenkomt (in Google Sans is het woordmerk met wolk 107 px) */
@media (min-width: 1024px) { .logo { width: 107px; } .logo img { margin-left: auto; } }
/* Telefoonopmaak in een bureaubladvenster met muis of trackpad (half scherm, ingezoomd): een swiperij
   krijg je met een gewoon muiswiel niet opzij, dus daar staan de kaarten onder elkaar. Telefoons en
   tablets (aanraken) houden de swiperij. */
@media (max-width: 1023.98px) and (hover: hover) and (pointer: fine) {
  .prijzen { flex-direction: column; gap: 28px; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; }
  .prijzen > * { width: auto; }
  /* de wenk is op de telefoon de kop van de prijssectie: die blijft, alleen het swipepijltje niet */
  .swipe-wenk svg { display: none; }
}
/* vlak voor het herladen bij het oversteken van 1024 (zie site.js) */
html.herladen { visibility: hidden; }
/* Bureaublad: op een korte pagina (bedankt, 404) in een hoog venster zweefde de footer midden in beeld
   met een lege band eronder. De pagina is nu minstens zo hoog als het venster en main vult het verschil. */
@media (min-width: 1024px) { body { display: flex; flex-direction: column; min-height: 100vh; } body > main { flex: 1 0 auto; } }
/* footer op de smalste telefoons: een kolom, anders vielen de laatste letters van de links weg */
@media (max-width: 340px) { .voet__onder { grid-template-columns: 1fr; } }

/* Bureaublad, feedback van 15 oktober: wat er bij elke stap gebeurt staat vet, de labels op de
   werkwijze-lijn zijn dik en duidelijk, en de twee zinnen naast de koppen van prijs en vertrouwen
   lezen als uitspraak in plaats van als grijze toelichting. */
@media (min-width: 1024px) {
  .proces__lijn text { font-size: 12px; font-weight: 700; }
  .stap__tekst p { font-weight: 600; color: var(--inkt); }
  .thuis #prijs .twee .tekst p { font-weight: 600; color: var(--inkt); }
  .thuis #vertrouwen .twee .tekst p { font-weight: 600; color: var(--wit-tekst); }
}
/* het groene vinkje voor 'Model goedgekeurd'; komt op met het label (zie site.js, tekenProces) */
.proces__vink circle { fill: #12854A; }
.proces__lijn .proces__vink path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.beweegt .proces__lijn .proces__vink { opacity: 0; transition: opacity 500ms var(--ease); }
html.beweegt .proces__lijn text.is-aan + .proces__vink { opacity: 1; }

/* ============================================================
   Nachtstijl voor telefoon en tablet (onder 1024 px), naar de LinkedIn-banner van oktober 2026:
   warm zwart met een lamplicht rechtsboven, wit en grijs, blauw spaarzaam. Alleen kleuren; opbouw,
   maten en animaties blijven gelijk. Hangt aan html.nacht, zodat hij per pagina aan kan.
   ============================================================ */
@media (max-width: 1023.98px) {
  html.nacht {
    --creme: #13110f;  --kaart: rgba(255,255,255,0.045);
    --donker: #1a1c21; --donker-2: #121317;
    --blauw: #7FA0FF;  --blauw-diep: #9DB6FF;
    --inkt: #F1ECE4;   --inkt-2: #A29B8F; --inkt-3: #8a847a;
    --wit-tekst: #F3EFE8; --wit-tekst-2: #A29B8F;
    --lijn: rgba(255,255,255,0.08); --lijn-licht: rgba(255,255,255,0.10);
    --t: 127,160,255; --t-diep: 157,182,255;
    /* het venster uit de LinkedIn-banner: leisteen met een haarlijn; zo ziet elke kaart er in het donker uit */
    --venster: linear-gradient(180deg, #1b1d22, #141519); --venster-rand: rgba(255,255,255,0.08);
    --venster-schaduw: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px -20px rgba(0,0,0,0.7);
    background: radial-gradient(560px 460px at 100% 0, rgba(255,216,168,0.20), transparent 70%) no-repeat,
                linear-gradient(180deg, #13110f, #0c0b0a);
    color-scheme: dark;
  }
  html.nacht body { background: transparent; color: var(--inkt); }
  /* het tweede deel van een kop in warm grijs, zoals 'Versneld met AI.' op de banner */
  html.nacht .kop-grijs { color: var(--inkt-2); }
  /* hoofdknop: licht op donker, zoals de rest wit en grijs; geen blauw vlak */
  html.nacht .knop:where(:not(.knop--licht, .knop--grijs, .knop--groen)) { background: #F1ECE4; color: #15130f; }
  html.nacht .knop:where(:not(.knop--licht, .knop--grijs, .knop--groen)):hover { background: #FFFFFF; }
  html.nacht .knop--groen { background: #F1ECE4; color: #15130f; box-shadow: none; }
  /* WhatsApp in het menu blijft herkenbaar groen; op zwart met donkere letters, wit op dit groen las slecht */
  html.nacht .menu-vel__wa { background: #25D366; color: #0b1a10; }
  html.nacht .menu-vel__wa:hover { background: #3ADF7A; }
  html.nacht .knop--licht, html.nacht .knop--grijs { background: rgba(255,255,255,0.06); color: var(--inkt); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }

  /* productkleuren een tandje lichter, zodat ze op zwart even sterk staan als op creme.
     Alleen als accent: het streepje bovenaan, het teken in het icoon, de vinkjes en de labelletter. */
  html.nacht .bouwkaart--sw,  html.nacht :is(.thuis, .tel-prijs) .prijs--sw  { --t: 127,160,255; --tint: 127,160,255; }
  html.nacht .bouwkaart--web, html.nacht :is(.thuis, .tel-prijs) .prijs--web { --t: 72,201,190;  --tint: 72,201,190; }
  html.nacht .bouwkaart--ai,  html.nacht :is(.thuis, .tel-prijs) .prijs--ai  { --t: 196,128,255; --tint: 196,128,255; }
  html.nacht .thuis .vertrouwen { --t: 127,160,255; }
  /* productpagina's: dezelfde lichtere kleur per product als op de homepage; 'diep' is op zwart juist lichter */
  html.nacht .pag--ai  { --t: 196,128,255; --t-diep: 214,166,255; }
  html.nacht .pag--sw  { --t: 127,160,255; --t-diep: 157,182,255; }
  html.nacht .pag--web { --t: 72,201,190;  --t-diep: 118,218,209; }
  /* het menuwolkje houdt op de productpagina's zijn eigen, diepere kleur: daarop lezen de witte streepjes */
  html.nacht .pag--ai  .menu-knop { background: rgb(166,63,212); }
  html.nacht .pag--sw  .menu-knop { background: #4A7BFF; }
  /* bij toetsenbordfocus kleurt het wolkje op naar de lichtere 'diep'-kleur, zoals op de homepage */
  html.nacht :is(.pag--ai, .pag--sw, .pag--web) .menu-knop:focus-visible { background: rgb(var(--t-diep)); }
  html.nacht .pag--web .menu-knop { background: rgb(14,159,156); }

  /* kaarten: het venster uit de LinkedIn-banner, zonder glas en zonder kleurwaas. De productkleur
     blijft alleen als dun streepje bovenaan, in het icoon en in de vinkjes. */
  html.nacht :is(.thuis .teaser, .thuis .chaos__kader, .thuis .vertrouwen, .uitnodiging, .stapjes li, .thuis .bouwkaart),
  html.nacht #contact.blauw .form, html.nacht :is(.thuis #prijs, .tel-prijs) .prijs {
    background: var(--venster); border-color: var(--venster-rand); box-shadow: var(--venster-schaduw);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.nacht .thuis .bouwkaart { box-shadow: inset 0 2px 0 rgba(var(--t),0.9), var(--venster-schaduw); }
  html.nacht :is(.thuis #prijs, .tel-prijs) .prijs { box-shadow: inset 0 2px 0 rgba(var(--tint),0.9), var(--venster-schaduw); }
  /* iconen: een donker tegeltje met een haarlijn, het teken in de productkleur */
  html.nacht .thuis .bouwkaart__icoon, html.nacht :is(.thuis, .tel-prijs) .prijs__icoon,
  html.nacht .thuis .vertrouwen svg { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
  html.nacht .document__icoon { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); }
  html.nacht :is(.thuis, .tel-prijs) .prijs .vink li svg { color: rgb(var(--tint)); fill: rgb(var(--tint)); }
  html.nacht :is(.thuis, .tel-prijs) .prijs .vink li svg path { stroke: #15130f; }
  /* stapnummers in het lichtblauw op een vleug blauw */
  html.nacht .stapjes .nr { background: rgba(127,160,255,0.10); color: #9DB6FF; box-shadow: inset 0 0 0 1px rgba(127,160,255,0.28); }
  /* knoppen in een kaart: rustig met een haarlijn, het pijltje in de productkleur; de hoofdknop van een prijskaart creme */
  html.nacht .thuis .bouwkaart__cta { background: rgba(255,255,255,0.05); color: var(--inkt); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
  html.nacht .thuis .bouwkaart__cta svg { color: rgb(var(--t)); }
  html.nacht .prijs__meer { background: rgba(255,255,255,0.05); color: var(--inkt); border-color: rgba(255,255,255,0.14); }
  html.nacht .prijs__meer:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); }
  html.nacht :is(.thuis, .tel-prijs) .prijs__cta { background: #F1ECE4; color: #15130f; }
  /* het label boven een prijskaart: donker, met de productkleur als letter en rand */
  html.nacht :is(.thuis, .tel-prijs) .prijs__label { background: #1b1d22; color: rgb(var(--tint)); box-shadow: inset 0 0 0 1px rgba(var(--tint),0.45); }
  html.nacht .thuis .vertrouwen__item + .vertrouwen__item { border-top-color: rgba(255,255,255,0.08); }

  /* secties met een eigen creme vlak laten het lamplicht van de pagina door */
  html.nacht .thuis .auto, html.nacht .thuis #vertrouwen { background: transparent; }

  /* wolken: alleen het logowolkje blijft, zoals op de banner; de wolken achter de kaarten staan uit */
  html.nacht :is(.chaos__lucht, .prijs__lucht, .bouw__lucht, .vert__lucht, .vlak__lucht, .vier04__lucht) { display: none; }
  html.nacht .hero .knoppen .tekstlink { border-color: rgba(255,255,255,0.18); }
  /* de logowolkjes achter de besparingstest staan in het donker ook uit */
  html.nacht .thuis .wolkje { display: none; }
  /* zonder het onderste wolkje hoeft er geen extra lucht onder de test; 72 px houdt de schaduw van de kaart binnen de sectie */
  html.nacht .thuis #test { padding-bottom: 72px; }

  /* chaos: signaalkleuren voor zwart, lijnen en rasters in wit */
  html.nacht .thuis .chaos { --rood: 255,59,59; --groen: 111,211,138; }
  html.nacht .thuis .chaos__kader > * + * { border-top-color: rgba(255,255,255,0.08); }
  html.nacht .thuis .chaos__zone--rood { background: linear-gradient(180deg, rgba(var(--rood),0.06), rgba(var(--rood),0.015)); }
  html.nacht .thuis .chaos__zone--groen { background: linear-gradient(180deg, rgba(var(--groen),0.02), rgba(var(--groen),0.08)); }
  html.nacht .thuis .chaos__raster { stroke: rgba(255,255,255,0.14); }
  html.nacht .thuis .chaos [stroke="#E23B2E"] { stroke: #FF3B3B; }
  html.nacht .thuis .chaos [stroke="#12854A"] { stroke: #39B964; }
  html.nacht .thuis .chaos [fill="#12854A"] { fill: #39B964; }
  html.nacht .thuis .chaos circle[fill="#fff"] { fill: #1a1814; }

  /* besparingstest: de vragen als dun vlak, de uitkomst als het venster met een blauwe haarlijn */
  html.nacht .thuis .teaser .vraag-blok { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.nacht .thuis .teaser .keuzes label { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
  html.nacht .keuzes label:has(input:checked), html.nacht .thuis .teaser .keuzes label:has(input:checked) { background: rgba(255,255,255,0.08); border-color: var(--blauw); color: var(--blauw); font-weight: 500; }
  html.nacht input[type="range"] { background: rgba(255,255,255,0.14); }
  html.nacht input[type="range"]::-webkit-slider-thumb { border-color: #15130f; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
  html.nacht .kaart--blauw, html.nacht .thuis .teaser .test__uitkomst {
    background: var(--venster); color: var(--wit-tekst); border: 1px solid rgba(127,160,255,0.30); box-shadow: var(--venster-schaduw); }

  /* contact en footer: het donkere venster uit de banner in plaats van het blauwe vlak */
  html.nacht #contact.blauw { background: linear-gradient(180deg, #1a1c21, #121317); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
  /* de stippen blijven, zachter, als bovenste laag over het venster */
  html.nacht #contact.blauw.stippen, html.nacht .blauw.stippen:not(.voet) {
    background-image: radial-gradient(rgba(240,239,227,0.10) 1.9px, transparent 2.1px), linear-gradient(180deg, #1a1c21, #121317);
    background-size: 26px 26px, 100% 100%; }
  /* 0.34 wit haalt op het venster van het formulier de 3 tegen 1 voor de rand van een invoerveld; alleen de
     bovenhoeken rond, anders krult de onderlijn aan beide kanten omhoog (op /bereken is hij ook recht) */
  html.nacht #contact.blauw .veld { border-bottom-color: rgba(255,255,255,0.34); border-radius: 14px 14px 0 0; }
  html.nacht #contact.blauw .veld:focus-within { background: rgba(255,255,255,0.05); }
  html.nacht #contact.blauw .form__voet .knop { background: #F1ECE4; color: #15130f; }
  html.nacht #contact.blauw .form__voet .knop:hover { background: #FFFFFF; }
  html.nacht .voet.blauw { background: #121317; }
  html.nacht .voet__wolk { content: url("/img/wolk.svg"); }

  /* zwevende knoppen onderin: de grijze is donker glas, ook boven een donkere sectie */
  html.nacht .vastebalk .knop--grijs, html.nacht .vastebalk.is-donker .knop--grijs {
    background: rgba(28,26,24,0.74); color: var(--inkt); border-color: rgba(255,255,255,0.16); box-shadow: none; }
}

/* ---------- licht/donker-knopje onder het menuwolkje (alleen telefoon en tablet) ----------
   Een rond glaasje, gecentreerd onder de wolk (die staat 20 px van rechts en is 68 breed).
   De knop is 44 px om op te tikken, het zichtbare rondje 34. Maantje in de donkere stand,
   zonnetje in de lichte. */
.modus-knop { display: none; }
@media (max-width: 1023.98px) {
  .modus-knop { display: grid; place-items: center; position: fixed; z-index: 59;
                top: calc(max(12px, env(safe-area-inset-top, 0px)) + 47px); right: 32px;
                width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--inkt);
                cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .modus-knop__bol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
                background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.85);
                -webkit-backdrop-filter: blur(14px) saturate(170%);
                        backdrop-filter: blur(14px) saturate(170%);
                box-shadow: inset 0 1px 0 #fff, 0 6px 14px -4px rgba(13,27,42,0.22);
                transition: transform 200ms var(--ease); }
  .modus-knop:active .modus-knop__bol { transform: scale(0.92); }
  .modus-knop svg { width: 16px; height: 16px; }
  .modus-knop .maan { display: none; }
  html.nacht .modus-knop .maan { display: block; }
  html.nacht .modus-knop .zon { display: none; }
  html.nacht .modus-knop__bol { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 14px -4px rgba(0,0,0,0.5); }
  .modus-knop:focus-visible { outline: none; }
  .modus-knop:focus-visible .modus-knop__bol { outline: 2px solid var(--blauw); outline-offset: 2px; }
  /* niet over het open menu heen; het script zet de dekking tijdens de vlucht, vandaar !important */
  html.menu-open .modus-knop { opacity: 0 !important; visibility: hidden !important; }
}
/* zolang het wolkje nog in het logo zit (voordat het script de vlucht overneemt) is het knopje er niet */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  html:not(.vlucht) .modus-knop { opacity: 0; visibility: hidden; }
}

/* Nachtstijl, producthero en uitleg */
@media (max-width: 1023.98px) {
  /* productpagina's: de hoofdknoppen creme zoals overal in het donker; de paginakleur zit in de accenten */
  html.nacht .prod .knop:not(.knop--licht):not(.knop--grijs):not(.knop--groen):not(.knop--klein) { background: #F1ECE4; color: #15130f; }

  /* secties die op de telefoon een eigen licht vlak kregen: geen vlak, het lamplicht van de pagina loopt door */
  html.nacht .licht-op-telefoon { background: transparent; }
  /* de drie stappen: het venster uit de banner */
  html.nacht .licht-op-telefoon .uitleg-stapel { background: var(--venster); border-color: var(--venster-rand); box-shadow: var(--venster-schaduw); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.nacht .licht-op-telefoon .uitleg-stapel .plaat + .plaat { border-top-color: rgba(255,255,255,0.08); }
  /* nummertegels en bronchips: een vleug paginakleur met een haarlijn, zoals de stapnummers op de homepage */
  html.nacht .licht-op-telefoon .uitleg-stapel .nr b,
  html.nacht .licht-op-telefoon .plaat__bronnen span { background: rgba(var(--t),0.10); color: rgb(var(--t-diep)); box-shadow: inset 0 0 0 1px rgba(var(--t),0.28); }
  /* het binnenkomende bericht: een tikje lichter dan het venster, zoals het witte vlak op creme */
  html.nacht .licht-op-telefoon .plaat__bericht { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
  /* het kopje 'Nieuw bericht' is klein: het gedempte grijs haalde daar geen 4,5 */
  html.nacht .licht-op-telefoon .plaat__bericht em { color: #A29B8F; }
  /* de schakelaar: uit is een vleug wit, aan de kleur van de pagina; het bolletje blijft licht */
  html.nacht .licht-op-telefoon .plaat__schakel .knopje { background: rgba(255,255,255,0.18); }
  html.nacht .licht-op-telefoon .plaat__schakel .knopje.is-aan { background: rgb(var(--t)); }
  html.nacht .licht-op-telefoon .plaat__schakel .knopje__bol { background: #F3EFE8; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
  /* op agents stond het lichte bolletje op het lichte paars maar op 2,3: het spoor zit daar tussen het lichte
     en het diepe paars in, zodat het bolletje 3,3 haalt tegen het spoor en het spoor 4,5 tegen het venster */
  html.nacht .pag--ai .plaat__schakel .knopje.is-aan { background: rgb(178,89,229); }
}

/* Nachtstijl, productsecties en mockschermen */
@media (max-width: 1023.98px) {
  /* productsecties in de nachtstijl.
     Dashboard en beheersectie lieten een eigen creme vlak zien; nu loopt de pagina door */
  html.nacht .licht-op-telefoon:has(.dash, .beheer) { background: transparent; }

  /* kaartenrijen (redenen, bouwstenen, wat een agent doet): het venster uit de banner */
  html.nacht .prod .raster-2 { background: var(--venster); border-color: var(--venster-rand); box-shadow: var(--venster-schaduw); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.nacht .prod .raster-2 > .kaart + .kaart { border-top-color: rgba(255,255,255,0.08) !important; }
  html.nacht .prod .raster-2 .kop { color: var(--wit-tekst); }

  /* wat het oplevert: het venster uit de banner; het groen zit alleen nog in de tekst */
  html.nacht .opbrengst { background: var(--venster); border-color: var(--venster-rand); box-shadow: var(--venster-schaduw); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.nacht .opbrengst__merk { color: #6FD38A; }
  /* het gedempte grijs haalde op het groene glas net geen 4,5; op het venster blijft het lichtere grijs */
  html.nacht .opbrengst__noot { color: var(--inkt-2); }

  /* voorbeelddashboard: het donkere venster in plaats van navy, met dezelfde trapjes
     (grond, vel, kaart) en een haarlijn eromheen zodat het loskomt van het zwart */
  html.nacht .dash { background: #121317; color: #F7F7F3;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 26px 52px -22px rgba(0,0,0,0.75); }
  html.nacht .dash__vel { background: #1b1d22; }
  html.nacht .dash__kaart { background: #25272d; }
  html.nacht .dash__tabs { background: linear-gradient(transparent, #1b1d22 38%); }
  html.nacht .dash__op { color: #6FD38A; }
  html.nacht .dash__tab.is-aan { color: rgb(var(--t)); }
  /* de kleine tekst bovenin (klok, merk, zoekveld) haalde op de blauwe waas geen 4,5:
     de letters houden het wit van de lichte stand en de waas is iets zachter */
  html.nacht .dash__waas { background: radial-gradient(60% 60% at 30% 40%, rgba(74,123,255,0.62), transparent 70%),
                                       radial-gradient(55% 55% at 78% 22%, rgba(47,95,230,0.48), transparent 72%); }

  /* websites: het appscherm en de beheeromgeving als donker venster */
  html.nacht .prod :is(.scherm--licht, .beheer) { background: linear-gradient(180deg, #1a1c21, #121317);
    border-color: rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 26px 50px -24px rgba(0,0,0,0.75); }
  html.nacht .prod .scherm--licht .bubbel { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
  html.nacht .prod .scherm--licht .bubbel--rechts { background: rgb(var(--t)); border-color: transparent; color: #15130f; }
  /* het logotegeltje houdt de diepere paginakleur, zoals het menuwolkje: daarop leest het creme wolkje */
  html.nacht .pag--web .prod .logo-klein i { background: rgb(14,159,156); }
  html.nacht .prod .beheer__veld { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
  html.nacht .prod .beheer__veld.is-actief { background: rgba(255,255,255,0.07); border-color: rgb(var(--t));
    box-shadow: 0 0 0 3px rgba(var(--t),0.18); }
  html.nacht .prod .beheer .knop.knop--klein { color: #15130f; }
}

/* Nachtstijl, pakketten */
@media (max-width: 1023.98px) {
  /* kiezer boven de pakketten: de gekozen knop gevuld in de paginakleur
     met donkere letters, de andere een vleug wit */
  html.nacht .vergelijk__kiezer button { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: var(--inkt); }
  html.nacht .vergelijk__kiezer button.is-aan { background: rgb(var(--t)); border-color: rgb(var(--t)); color: #15130f; }

  /* pakketten op de websitepagina: het venster uit de banner met een streepje in de eigen kleur,
     een tandje lichter voor zwart; het oranje staat al sterk genoeg */
  html.nacht #pakketten .prijs:nth-child(2) { --tint: 196,128,255; }
  html.nacht #pakketten .prijs:nth-child(3) { --tint: 72,201,190; }
  html.nacht #pakketten .prijs { background: var(--venster); border-color: var(--venster-rand);
    box-shadow: inset 0 2px 0 rgba(var(--tint),0.9), var(--venster-schaduw); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* de websitepakketten: de knop creme zoals elke hoofdknop in het donker, het vinkje donker op de lichte kleur */
  html.nacht #pakketten .prijs .prijs__knop { background: #F1ECE4; color: #15130f; }
  html.nacht #pakketten .prijs .vink.kort li svg path { stroke: #15130f; }
  /* de gekozen kiezerknop in de kleur van het pakket, zoals in het licht; op zwart overal donkere letters */
  html.nacht .pak__kiezer[data-kies] button.is-aan { color: #15130f; }
  html.nacht .pak__kiezer[data-kies="1"] button.is-aan { background: rgb(250,104,56); border-color: rgb(250,104,56); }
  html.nacht .pak__kiezer[data-kies="2"] button.is-aan { background: rgb(196,128,255); border-color: rgb(196,128,255); }
  html.nacht .pak__kiezer[data-kies="3"] button.is-aan { background: rgb(72,201,190); border-color: rgb(72,201,190); }

}

/* Nachtstijl, werkwijze, over ons en de overige pagina's */
@media (max-width: 1023.98px) {
  /* blauwe secties (slotblok op werkwijze en over ons): het donkere venster uit de banner, net als
     het contactblok op de homepage. De footer houdt zijn eigen regel. */
  html.nacht .blauw:not(.voet) { background: linear-gradient(180deg, #1a1c21, #121317); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
  /* slotblok zonder formulier (werkwijze, over ons): de lichte knop is daar de enige hoofdknop, dus creme */
  html.nacht .blauw:not(.voet):not(#contact) .knop--licht { background: #F1ECE4; color: #15130f; box-shadow: none; }
  html.nacht .blauw:not(.voet):not(#contact) .knop--licht:hover { background: #FFFFFF; }

  /* werkwijze: de vraagkaart is het venster uit de banner, met een haarlijn in plaats van een rand */
  html.nacht .proces .vraag { background: var(--venster); box-shadow: inset 0 0 0 1px var(--venster-rand), var(--venster-schaduw); }
  /* pillen: het venster met een lichtblauwe letter en rand zodra de lijn ze bereikt, daarvoor gedimd */
  html.nacht .stap__pil, html.nacht.beweegt .stap__pil.is-aan { background: var(--venster); color: #9DB6FF; box-shadow: inset 0 0 0 1px rgba(127,160,255,0.45); }
  html.nacht.beweegt .stap__pil { background: var(--venster); color: rgba(157,182,255,0.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
  /* de slotknop wordt de creme hoofdknop; daarvoor een vleug creme */
  html.nacht.beweegt .stap__slotknop { background: rgba(241,236,228,0.08); color: rgba(241,236,228,0.5); }
  html.nacht.beweegt .stap__slotknop.is-aan { background: #F1ECE4; color: #15130f; }

  /* schermen: het donkere en het lichte zijn allebei het venster uit de banner */
  html.nacht .proces .scherm--donker { background: linear-gradient(180deg, #1a1c21, #121317);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08), 0 40px 70px -30px rgba(0,0,0,0.7); }
  html.nacht .proces .scherm--licht { background: var(--venster); border-color: var(--venster-rand); box-shadow: var(--venster-schaduw); }
  /* het app-icoontje in de kop houdt het blauw van het logowolkje, anders leest het wolkje er niet op */
  html.nacht .proces .logo-klein i { background: #4A7BFF; }
  html.nacht .proces .taak.is-bezig i { color: #15130f; }
  /* de status naast een taak (klaar, bezig, open) staat op halve dekking; in wit haalt hij nog AA */
  html.nacht .proces .taak .mono { color: #fff; }
  /* binnenvlakken van het lichte scherm: een vleug wit in plaats van een vleug zwart */
  html.nacht .proces .scherm--licht :is(.paneel, .taak) { background: rgba(255,255,255,0.04); }
  html.nacht .proces .scherm--licht .taak:not(.is-klaar, .is-bezig) i { border-color: rgba(255,255,255,0.22); }
  html.nacht .proces .scherm__zij { background: rgba(0,0,0,0.20); }
  html.nacht .proces .scherm__zij span.is-actief { background: rgba(255,255,255,0.07); }
  /* het telefoontje in het proefmodel: een donker venster met lichtere rijen */
  html.nacht .proces .telefoontje { background: linear-gradient(180deg, #1a1c21, #121317); border-color: rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 40px -20px rgba(0,0,0,0.7); }
  html.nacht .proces .telefoontje .rij { background: rgba(255,255,255,0.05); }
  html.nacht .proces .telefoontje .rij:not(.is-klaar) i { border-color: rgba(255,255,255,0.25); }
  html.nacht .proces .telefoontje .knopje { color: #15130f; }
  /* verwerkte notities in het signaalgroen voor zwart */
  html.nacht .proces .notitie--ok { border-color: rgba(57,185,100,0.45); }
  html.nacht .proces .notitie--ok .mono { color: #6FD38A; }

  /* over ons: de vier kaarten als het venster uit de banner */
  html.nacht section:not(.prod) .vak { background: var(--venster); border-color: var(--venster-rand); box-shadow: var(--venster-schaduw); }

  /* overige pagina's: het documentmenu als het venster, zoals de andere kaarten */
  html.nacht .documenten { background: var(--venster); border-color: var(--venster-rand); box-shadow: var(--venster-schaduw); }

  /* besparingstest en formulier: het venster, de keuzes een vleug wit, de velden met een lichte lijn zoals in het contactblok */
  html.nacht .kaart.test__vragen, html.nacht .form { background: var(--venster); border-color: var(--venster-rand); box-shadow: var(--venster-schaduw); }
  html.nacht .keuzes label { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
  html.nacht .veld { border-bottom-color: rgba(255,255,255,0.34); }

}