/* ══════════════════════════════════════════════════════════════════════════
   Sjabloon-stylesheet voor een mkb-one-pager.

   Dit bestand is de invoer voor scripts/nieuw.py, geen stylesheet die je zelf
   opent: de plaatshouders en de vlagblokken worden daar opgelost. Elke bekende
   fout uit reference/valkuilen.md komt hier al OPGELOST binnen, zodat de eerste
   render op nul defecten begint in plaats van op nul metingen.

   Zeven blokken, in deze volgorde, en die volgorde is functioneel:

     1 tokens        de vier merkkleuren plus hun afgeleiden, met per tekstkleur
                     de eis en het doorgerekende getal ernaast
     2 basis         reset, overflow-x: clip, typografische schaal, focus
     3 oppervlakken  licht / vlak / donker als TOKENBLOKKEN
     4 overgang      alles uit reference/overgang.md, achter de vormvlag
     5 componenten   vaste onderdelen, daarna elke opt-in component achter
                     zijn eigen vlagblok
     6 responsive    de twee breedtes uit harnasconfig
     7 beweging      marge en transform samen achter no-preference

   Drie wetten die overal in dit bestand zichtbaar zijn:

   A. EEN OPPERVLAK HERDEFINIEERT TOKENS, EEN COMPONENT LEEST ALLEEN TOKENS.
      Nergens staat `color` op een sectie met de bedoeling dat kinderen het
      erven. Dat patroon (valkuilen A1) kostte in het bronproject achtendertig
      reparatieregels en maakte elke nieuwe component opnieuw fout.

   B. VERBERGEN EN POSITIONEREN GAAT ALTIJD MET TWEE KLASSEN OF MET KLASSE PLUS
      ATTRIBUUT. Bij gelijke specificiteit wint wat later staat, en `.knop`
      staat verderop met `display: inline-flex` (valkuilen A2 en A3).

   C. ELKE GRID KRIJGT minmax(0, 1fr), NOOIT KAAL 1fr. Een spoor of een lange
      kop kan anders niet onder zijn inhoud krimpen en duwt de pagina breder
      (valkuilen B1). Bij auto-fit staat er `minmax(min(Xrem, 100%), 1fr)`, want
      een vaste ondergrens groter dan de viewport is precies dezelfde fout.

   Wat hier NIET in staat, en waarom: geen webfont (dat is een aparte beslissing
   met eigen laadregels), geen gloed of kleurverloop (contrast is dan een plafond
   dat je eerst uitrekent, zie palet.md par. 7), geen backdrop-filter op de balk
   (kost merkbaar op mobiel en maakt het contrast onmeetbaar voor het harnas),
   en geen url() naar een bestand dat het sjabloon niet meelevert.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Tokens ─────────────────────────────────────────────────────────────
   Rollen, geen rangen (palet.md par. 1). `--primair` en `--secundair`
   overleven geen rolwissel; in het bronproject werd halverwege een andere
   kleur de actiekleur en droeg `--secundair` daarna de hele site.

   De vier hexen komen uit merk.json en staan daar als gat. Zolang ze een gat
   zijn levert dit bestand een onbruikbare stylesheet op. Dat is luidruchtig,
   en dat is de bedoeling: een halfwerkend palet is niet van een afgerond palet
   te onderscheiden, een kapot palet wel.

   CONTRASTGETALLEN. Achter elke tekstkleur staat de eis en het gemeten getal.
   Het getal is nu een gat, want de hexen zijn dat ook. Vul ze in poort 2 in met
   `python3 scripts/kleur.py`, in dezelfde bewerking waarin je de hex invult.
   Een tokenregel zonder getal is de duurste regel in dit bestand: in het
   bronproject ging het palet vier keer om, en elke omkering raakte tientallen
   regels omdat de getallen ontbraken. */

:root {
  /* De vier rollen uit merk.json. */
  --actie: #184850;   /* alles wat klikbaar is, en niets anders */
  --vlak:  #184850;    /* de gekleurde sectieoppervlakken */
  --grond: #F4F1EC;   /* het lichte oppervlak; hieronder herdefinieert elk oppervlak dit */
  --inkt:  #111111;    /* tekst op het HUIDIGE oppervlak */

  /* Vaste ankers van het lichte oppervlak.
     Deze vijf veranderen nooit. Ze zijn nodig omdat --grond, --inkt, --zacht en
     --lijn per oppervlak omschakelen: een licht eiland (een kaart, een invoer-
     veld) binnen een donkere sectie kan zijn kleuren alleen terugzetten als er
     ergens een waarde staat die NIET meegekanteld is. Zonder deze ankers zou
     `.kaart { --inkt: var(--inkt) }` naar zichzelf verwijzen: een cyclus, en
     dan is de property ongeldig en staat er ivoor op ivoor. */
  --licht-grond:  #F4F1EC;
  --licht-inkt:   #111111;
  --licht-zacht:  color-mix(in srgb, var(--licht-inkt) 72%, var(--licht-grond));   /* eis >= 4,50:1 op --licht-grond · gemeten TE BEVESTIGEN */
  --licht-lijn:   color-mix(in srgb, var(--licht-inkt) 14%, var(--licht-grond));   /* scheiding zwak, draagt geen tekst */
  --licht-lijn-2: color-mix(in srgb, var(--licht-inkt) 30%, var(--licht-grond));   /* scheiding sterk, eis >= 3:1 voor invoerranden */

  /* Kaartvlak: lichter dan de grond, zodat een kaart zonder rand al als kaart
     leest. Wit is hier geen kleurrol maar een mengpartner; vervang de mengregel
     door de doorgerekende hex zodra scripts/kleur.py hem heeft opgeleverd. */
  --kaart: color-mix(in srgb, var(--licht-grond) 55%, #FFFFFF);

  /* Vier afgeleiden per merkkleur (palet.md par. 4). Elke afgeleide is nu een
     mengsel; dat is een startpunt, geen uitkomst. Eén hex haalt nooit alle vier
     de contrasteisen, dus reken ze door en vervang ze door echte hexen. */
  --actie-diep:    color-mix(in srgb, var(--actie) 70%, var(--licht-inkt));  /* hover en 3D-zijde, eis >= 3:1 met --actie */
  --actie-tekst:   color-mix(in srgb, var(--actie) 80%, var(--licht-inkt));  /* eis >= 4,50:1 op --licht-grond · gemeten TE BEVESTIGEN */
  --actie-op-vlak: color-mix(in srgb, var(--actie) 40%, var(--kaart));       /* eis >= 4,50:1 op --vlak én op --licht-inkt · gemeten TE BEVESTIGEN */
  --op-actie:      var(--kaart);                                             /* knoplabel op --actie, eis >= 4,50:1 · gemeten TE BEVESTIGEN */

  /* Licht op het gekleurde vlak. Haalt --op-vlak de 4,50:1 niet, dan gaat
     --vlak een stap dieper; onderhandel niet over de drempel (palet.md par. 2). */
  --op-vlak:       var(--kaart);                                             /* eis >= 4,50:1 op --vlak · gemeten TE BEVESTIGEN */
  --op-vlak-zacht: color-mix(in srgb, var(--kaart) 80%, var(--vlak));        /* fijndruk op --vlak, eis >= 4,50:1 · gemeten TE BEVESTIGEN */

  /* Het huidige oppervlak. Deze zes zijn de enige die een component leest, en
     ze staan hier op de waarden van het lichte oppervlak. Blok 3 kantelt ze. */
  --zacht:  var(--licht-zacht);
  --lijn:   var(--licht-lijn);
  --lijn-2: var(--licht-lijn-2);
  --ring:   var(--licht-inkt);   /* focusindicator, eis >= 3:1 met het oppervlak eronder */
  --accent: var(--actie-tekst);  /* gekleurde tekst en statusstippen op het huidige oppervlak */

  /* Maat en ritme. Eén schaal, anders staan er twee vormtalen in dit bestand. */
  --blad:  70rem;
  --rand:  clamp(1.25rem, 5vw, 2.5rem);
  --takt:  1.5rem;
  --ritme: clamp(4.5rem, 11vw, 9rem);   /* verticale sectiemaat; blok 4 rekent hier het vormzicht bij op */

  --r:     10px;
  --r-s:   6px;
  --r-pil: 999px;
  --schaduw: 0 1px 2px color-mix(in srgb, var(--licht-inkt) 5%, transparent),
             0 8px 24px -12px color-mix(in srgb, var(--licht-inkt) 14%, transparent);

  /* Eén bewegingscurve voor de hele site. Een tweede curve leest als een tweede
     site; overgenomen componenten brengen er altijd een mee (componenten.md). */
  --curve: cubic-bezier(0.22, 1, 0.36, 1);

  /* Typografische schaal. Minstens factor 1,25 tussen aangrenzende stappen in
     het weergavebereik, anders leest het verschil als een ongeluk in plaats van
     als hiërarchie. Onder de bodymaat zitten de stappen dichter op elkaar; daar
     draagt het labelregister (caps plus letterspatiëring) het onderscheid. */
  --t-xs:  0.75rem;
  --t-s:   0.875rem;
  --t-m:   1.0625rem;
  --t-l:   clamp(1.25rem,   1.05rem + 0.9vw, 1.5rem);
  --t-xl:  clamp(1.625rem,  1.20rem + 2.1vw, 2.25rem);
  --t-2xl: clamp(2.0625rem, 1.35rem + 3.6vw, 3.375rem);

  /* Veilige standaarden voor blok 4. Valt dat blok weg (vormfamilie als gat),
     dan blijft elke calc() hieronder geldig in plaats van stil ongeldig te
     worden. Een ongeldige calc laat de hele declaratie vervallen, en dat is
     precies het soort fout dat geen consolefout geeft. */
  --vorm-h:      0px;
  --vorm-staart: 0px;
  --vorm-zicht:  0px;
  --lift:        0px;
}


/* ── 2. Basis ──────────────────────────────────────────────────────────────
   Reset, documentgrond, typografische schaal, focus. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* De achtergrondkleur staat ook op html, zodat overscrollen aan de randen
     niet wit oplicht boven een donkere eerste of laatste sectie. */
  background-color: var(--grond);
  /* clip en niet hidden. `overflow-x: clip` knipt decoratieve elementen af die
     bewust buiten hun kader treden, zonder er een scrollcontainer van te maken.
     Dit is het enige wat pseudo-elementen vangt: die zitten niet in de DOM en
     dus niet in de overflow-sweep van het harnas (valkuilen B6). Meet je een
     horizontale scroll terwijl de sweep nul elementen meldt, dan is dat het
     bewijs dat het om een pseudo-element gaat, geen aanwijzing. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: transparent;
  color: var(--inkt);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t-m);
  line-height: 1.6;
}

/* Koppen. Geen `hyphens: auto` en geen `overflow-wrap: break-word`: allebei
   mogen midden in een woord afbreken, en in het bronproject leverde dat een kop
   op die letterlijk in tweeën gehakt was. In plaats daarvan meet je na het
   copy-deck het langste woord uit de H1 met canvas measureText en zet je de
   bovengrens van --t-2xl zó dat het past (palet.md par. 9). Meten, niet
   schatten: de gemeten bovengrens per klant wint van elke voorbeeldwaarde. */
h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  hyphens: manual;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }

p { margin: 0 0 var(--takt); max-width: 62ch; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
figure, blockquote, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
code { font-size: 0.9em; }
:where(input, select, textarea, button) { font: inherit; color: inherit; }

/* Eén focusregel voor de hele site, die uitsluitend een token leest. Elk
   omgekeerd oppervlak in blok 3 zet --ring om. Zo kan geen enkel oppervlak
   vergeten worden, en dat is precies de standaardfout van gekleurde paletten:
   een donkere ring op een donker vlak is 1:1 en dus afwezig (valkuilen A5). */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }

/* Verborgen voor het oog, zichtbaar voor een schermlezer. */
.vzw {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Overslaanlink. Staat buiten beeld tot hij focus krijgt. */
.overslaan {
  position: absolute; left: 0; top: -100%; z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--licht-inkt); color: var(--licht-grond);
  text-decoration: none;
}
.overslaan:focus { top: 0; }

/* De inhoudskolom. Let op waar deze een grid-item is: zie .sectie--hero. */
.blad { max-width: var(--blad); margin-inline: auto; padding-inline: var(--rand); }

/* Eén labelrecept, niet zeventien keer uitgeschreven. In het bronproject stond
   deze declaratielijst zeventien keer letterlijk in de stylesheet, wat elke
   wijziging zeventien keer maakt. Caps plus letterspatiëring dragen het
   onderscheid, en die overleven een mislukte fontload; een register dat alleen
   op breedte of gewicht verschilt valt dan samen met de lopende tekst.

   Het labelrecept van de configurator staat bewust NIET in deze lijst maar in
   zijn eigen vlagblok: staat de component uit, dan is `.config__tel` hier een
   dode selector en meldt scripts/statisch.py hem terecht. Vijf regels dubbel is
   goedkoper dan een selector die naar niets wijst. */
.label,
.voet__kop,
.kaart__kop,
.stap__nr,
.veld label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zacht);
  margin: 0 0 0.5rem;
}

.lead { font-size: var(--t-l); line-height: 1.5; max-width: 46ch; color: var(--zacht); }
h2 + .lead, h1 + .lead { margin-top: 1.25rem; }
.fijn { font-size: var(--t-s); color: var(--zacht); }
.intern {
  font-size: var(--t-l); line-height: 1.45; max-width: 40ch;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--lijn);
}

/* In beeld komen. De attributen worden door main.js gezet en staan nooit in de
   opmaak: zonder JS, en wanneer requestAnimationFrame bevriest (achtergrondtab,
   preview-pane, energiebesparing), staat er dan nooit iets op opacity: 0 te
   wachten op een script dat niet komt (valkuilen D2). */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--curve), transform 0.7s var(--curve);
  transition-delay: var(--vertraging, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }


/* ── 3. Oppervlakken ───────────────────────────────────────────────────────
   Drie oppervlakken, drie tokenblokken. `ritme` in merk.json wijst per sectie
   een van deze drie namen aan; dat is een contract, geen opmaakkeuze.

   De regel die dit blok afdwingt: EEN OPPERVLAK ZET GEEN color OP ZIJN
   KINDEREN. Het herdefinieert zijn eigen tokens en schildert zichzelf. Elk
   licht eiland (kaart, veld, beeldgat) doet hetzelfde, dus een component die je
   later toevoegt is automatisch goed in alle drie de oppervlakken. In het
   bronproject was dit achtendertig losse reparatieselectors, en elke nieuwe
   component erfde de fout opnieuw (palet.md par. 5, valkuilen A1).

   Achtergrond met background-color en niet met de background-shorthand: voeg je
   later een gloed toe als background-image, dan wist de shorthand je kleur
   stilzwijgend mee (valkuilen A4). */

.sectie, .voet {
  position: relative;              /* de overgangsvorm positioneert zich hiertegen */
  background-color: var(--grond);  /* elk vlak is zelf dekkend, zie overgang.md invariant 6 */
  color: var(--inkt);
  padding-block: var(--ritme);
}

/* Het lichte oppervlak. Schrijft de ankers terug, zodat een lichte sectie ook
   klopt als hij ooit binnen iets omgekeerds komt te staan. */
.sectie--licht {
  --grond:  var(--licht-grond);
  --inkt:   var(--licht-inkt);
  --zacht:  var(--licht-zacht);
  --lijn:   var(--licht-lijn);
  --lijn-2: var(--licht-lijn-2);
  --ring:   var(--licht-inkt);
  --accent: var(--actie-tekst);
}

/* Het gekleurde merkvlak. */
.sectie--vlak {
  --grond:  var(--vlak);
  --inkt:   var(--op-vlak);         /* eis >= 4,50:1 op --vlak · gemeten TE BEVESTIGEN */
  --zacht:  var(--op-vlak-zacht);   /* eis >= 4,50:1 op --vlak · gemeten TE BEVESTIGEN */
  --lijn:   color-mix(in srgb, var(--op-vlak) 26%, transparent);
  --lijn-2: color-mix(in srgb, var(--op-vlak) 48%, transparent);
  --ring:   var(--op-vlak);         /* eis >= 3:1 met --vlak */
  --accent: var(--actie-op-vlak);   /* de donkere actiekleur valt hier weg */
}

/* Het donkere oppervlak. Er is geen aparte hex voor donker in merk.json: dit is
   de inktkleur als vlak. Wil de klant een derde merkkleur als donker vlak, voeg
   dan `kleuren.donker` toe in merk.json en vervang deze twee regels; dat is
   goedkoop, precies omdat componenten alleen tokens lezen. */
.sectie--donker {
  --grond:  var(--licht-inkt);
  --inkt:   var(--licht-grond);     /* eis >= 4,50:1 op --licht-inkt · gemeten TE BEVESTIGEN */
  --zacht:  color-mix(in srgb, var(--licht-grond) 78%, var(--licht-inkt));   /* eis >= 4,50:1 · gemeten TE BEVESTIGEN */
  --lijn:   color-mix(in srgb, var(--licht-grond) 22%, transparent);
  --lijn-2: color-mix(in srgb, var(--licht-grond) 44%, transparent);
  --ring:   var(--licht-grond);
  --accent: var(--actie-op-vlak);
}

/* Lichte eilanden. Elk eiland is zelf een tokenblok en zet de hele set terug,
   niet alleen `color`. Daardoor klopt een kaart in een donkere sectie zonder
   dat die sectie ervan hoeft te weten. */
.kaart,
.beeldgat,
.dienstjaren,
.veld input,
.veld textarea {
  --grond:  var(--kaart);
  --inkt:   var(--licht-inkt);
  --zacht:  var(--licht-zacht);
  --lijn:   var(--licht-lijn);
  --lijn-2: var(--licht-lijn-2);
  --ring:   var(--licht-inkt);
  --accent: var(--actie-tekst);
}

.kaart {
  background-color: var(--grond);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  padding: 1.1rem;
  box-shadow: var(--schaduw);
}
.review__kop { padding-bottom: 0.75rem; border-bottom: 1px solid var(--lijn); }

/* Het beeldgat legt zichzelf uit: onderwerp, bestandspad en maat staan in het
   vlak zelf. Het hoort op te vallen in een screenshot, dus het is een licht
   eiland met een gestreepte rand op elk oppervlak, ook op het donkere
   (integriteit.md 3c). Onmogelijk om per ongeluk mee te leveren. */
.beeldgat {
  display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
  min-height: 12rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  background-color: var(--grond);
  color: var(--inkt);
  border: 2px dashed var(--lijn-2);
  border-radius: var(--r);
}
.beeldgat--klein { min-height: 8rem; }
.beeldgat__titel { margin: 0; font-weight: 700; }
.beeldgat__uitleg { margin: 0; font-size: var(--t-s); color: var(--zacht); max-width: 46ch; }


/* ── 4. Overgang tussen twee oppervlakken ──────────────────────────────────
   Alles hier komt uit reference/overgang.md. De mechaniek is merkonafhankelijk;
   het motief niet. Dit blok hangt aan `vorm.familie` in merk.json, en bij de
   standaardwaarde "geen" rekent het zichzelf op nul uit: viewbox [B, 0] geeft
   --vorm-h: 0, de staart en de clip vervallen vanzelf, en alleen de lift blijft
   staan. Dat is een legitieme uitkomst, geen falen. Noteer hem in WERK.md met
   "verwacht 0 vormen" plus één regel motivering, anders is nul gevonden niet te
   onderscheiden van niets gemeten.

   Draai scripts/vorm.py voordat je hier iets met de hand verandert. Elk getal
   uit het bronproject (lift 38/54/66/74, staart 40 procent, clip-inset 14px) is
   één gemeten geometrie, geen norm. */

:root {
  /* INVARIANT 2: hoogte in exact de viewBox-verhouding.
     De SVG staat op preserveAspectRatio="none" en wordt over de volle breedte
     uitgerekt. Met een vaste hoogte is een cirkel op 375px rond en op 1280px
     een platte ellips; bij een golf verandert de amplitude, bij een zigzag de
     hoek. Daarom loopt de hoogte mee met de breedte in exact de verhouding van
     de tekening.

     Bewust ZONDER clamp. Clamp-grenzen breken de verhouding op precies de
     breedtes waar ze bijten; in het bronproject was de vervorming op 375px nog
     0,5 procent en op 1140px al 2,6 procent. Wil je toch grenzen, reken dan
     eerst uit bij welke breedte elke grens bijt en accepteer die alleen als je
     site daar aantoonbaar niet komt. Voorwaarde bij deze zuivere vw-vorm:
     vorm.viewbox[0] is nooit nul, anders is dit een deling door nul en vervalt
     de hele declaratie. */
  --vorm-h: calc(100vw * 0 / 1440);

  /* INVARIANT 1: massieve staart van ongeveer 40 procent.
     De onderste 40 procent van de viewBox valt ín de eigen sectie en is over de
     volle breedte dekkend gevuld met exact de sectiekleur. Elk compositienaadje
     tussen de vormlaag en de sectielaag landt daarmee op dezelfde kleur op
     dezelfde kleur: onzichtbaar. In procenten, want dan klopt het op elke
     schermbreedte; eerdere versies met 1 procent, 2px en 3px overlap gaven alle
     drie subpixelnaden tijdens het scrollen.
     Kies je een andere staartfractie t, dan is de transform hieronder
     translateY(-(1 - t) * 100%) en --vorm-zicht calc(--vorm-h * (1 - t)).
     Onder ongeveer 0,25 vangt de staart afronding niet meer op. */
  --vorm-staart: calc(var(--vorm-h) * 0.4);
  --vorm-zicht:  calc(var(--vorm-h) * 0.6);

  /* INVARIANT 4: clip-path werkt ná filter.
     --vorm-schaduw staat op none, want het sjabloon levert geen vorm mee en een
     schaduw zonder vorm is alleen maar een compositielaag erbij. Zet je hier een
     drop-shadow neer, dan MOET vorm.clipinset in merk.json groter zijn dan het
     deel van de blur dat onder de onderrand uitkomt, en kleiner dan de staart-
     hoogte op de smalste breedte die je bedient. Reden: de onderste beeldpuntrij
     van een geschaalde SVG is maar gedeeltelijk gedekt, en door dat restje
     schemert de donkere schaduw erachter heen. Dat geeft een haarlijn over de
     volle breedte, precies op de vormrand, ook in stilstand. clip-path knipt ná
     het filter en haalt hem echt weg; een tweede container of overflow: hidden
     op de ouder doet dat niet.
     Dit symptoom is in het bronproject twee keer verkeerd gediagnosticeerd,
     samen 51 minuten. De beslissende test kostte twee minuten: zet het filter
     uit. Verdwijnt de lijn, dan is het de schaduw en niet de geometrie. */
  --vorm-schaduw: none;
  --vorm-clip: 0px;

  /* INVARIANT 3: hele pixels in, hele pixels uit.
     De lift staat in vaste px-stappen per breekpunt, nooit in vw of clamp. In
     het bronproject stond hier eerst clamp(30px, 4.5vw, 58px); op 1240px is dat
     55,8px, JS rondde de tegenbeweging af naar 56, en dan staat de sectie 0,2px
     te laag. Uitkomst: 137 naden over 203 scrollposities. Met vaste stappen: 0.
     Een halve pixel geeft een haarlijn over de volle breedte die alleen tijdens
     het scrollen opvalt, dus je vindt hem niet in een statische screenshot.
     main.js leest deze waarde terug als getComputedStyle(el).marginTop en niet
     als custom property: die laatste geeft de letterlijke tekst terug en
     parseFloat daarvan is NaN, zonder consolefout (valkuilen D1).
     De marge en de transform staan samen in blok 7, achter no-preference. */
  --lift: 38px;
}
@media (min-width: 600px)  { :root { --lift: 54px; } }
@media (min-width: 900px)  { :root { --lift: 66px; } }
@media (min-width: 1200px) { :root { --lift: 74px; } }

/* De vorm zelf. Hij hoort bij de sectie die hij inleidt en bult de sectie
   erbóven in, dus hij krijgt altijd de kleur van zijn eigen sectie. Dat gaat
   hier vanzelf: --grond is het token van het oppervlak waar hij in staat, en
   het pad in de SVG vult met currentColor. Eén gedeeld pad in <defs> bedient
   daarmee alle kleurvarianten, zonder modifierklasse per kleur. */
.vorm {
  position: absolute; left: 0; top: 0;
  width: 100%; height: var(--vorm-h);
  display: block;
  color: var(--grond);
  transform: translateY(-60%);
  pointer-events: none;
  filter: var(--vorm-schaduw);
  clip-path: inset(-60px -24px var(--vorm-clip) -24px);
}
.vorm use, .vorm use path, .vorm use circle { fill: currentColor; }

/* INVARIANT 5: elke sectie reserveert onderaan ruimte voor de vorm eronder.
   De vorm van de volgende sectie steekt --vorm-zicht boven zijn eigen sectie
   uit en schuift tijdens het scrollen nog --lift verder omhoog. In het
   bronproject was dat samen 204px tegen 104px padding, en de laatste inhoud van
   de sectie erboven viel eronder weg. Dit hoort in de spacingregel te staan en
   niet als reparatie per sectie, anders herhaalt de fout zich bij elke nieuwe
   sectie.

   Ook de bovenkant: de staart valt ín de eigen sectie en is dekkend, dus
   inhoud die hoger begint dan de staart wordt overschilderd door zijn eigen
   sectiekleur.

   Losse regels en niet één padding-shorthand: de shorthand in blok 3 schrijft
   ook de longhands die je niet noemt, en dan zet een latere padding-block je
   correctie weer op nul (valkuilen A4). */
.sectie {
  padding-top: max(var(--ritme), var(--vorm-staart));
  padding-bottom: max(var(--ritme), calc(var(--vorm-zicht) + var(--lift) + 1.25rem));
}
/* De hero regelt zijn eigen boven- en onderkant met dezelfde twee formules,
   maar met --hero-top en --hero-voet in plaats van --ritme. Die regel staat in
   5.3 en niet hier, om precies één reden: 5.3 staat verderop in dit bestand, en
   bij gelijke specificiteit wint wat later staat. Zou de hero zijn padding hier
   krijgen, dan wist elke padding-declaratie in 5.3 hem weer uit. Daarom gebruikt
   5.3 ook twee longhands en geen padding-block-shorthand: een shorthand schrijft
   ook de longhands die je niet noemt (valkuilen A4). */


/* ── 5. Componenten ────────────────────────────────────────────────────────
   Eerst de onderdelen die op elke pagina staan, daarna de zes opt-in
   componenten, elk binnen zijn eigen vlagblok. Staat een vlag uit, dan
   verdwijnt zijn CSS mee met zijn markup en zijn JS: geen dode klassen, geen
   harnasregel die nul telt, geen consolefout. Weglaten is hier het geteste pad
   en niet de improvisatie. */

/* ── 5.1 Knoppen ──────────────────────────────────────────────────────────
   Alleen de actiekleur is klikbaar, en niets anders krijgt hem. */

.knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }
.knoppen--klein { margin-top: 0.75rem; }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.5rem;
  background-color: var(--actie);
  color: var(--op-actie);
  border: 1px solid transparent;
  border-radius: var(--r-pil);
  font-size: var(--t-s); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}
/* bedankt.html draagt de modifier .knop--primair, index.html zet de actiekleur
   al op .knop zelf. Deze alias houdt de twee pagina's gelijk; zou hij ontbreken,
   dan is de knop op de bedanktpagina een andere knop dan op de site en dat leest
   als een andere website op precies het moment dat iemand net zijn gegevens
   heeft afgegeven. */
.knop--primair { background-color: var(--actie); color: var(--op-actie); }
.knop:active { transform: translateY(1px); }
.knop:hover { background-color: var(--actie-diep); }

/* De stille knop leest tokens en klopt daarom vanzelf op alle drie de
   oppervlakken; een aparte variant per sectiekleur is niet nodig. */
.knop--stil { background-color: transparent; color: var(--inkt); border-color: var(--lijn-2); }
.knop--stil:hover { background-color: transparent; border-color: var(--inkt); }
.knop--mini { padding: 0.5rem 0.9rem; font-size: var(--t-xs); }
.knop[disabled] { opacity: 0.35; pointer-events: none; }

/* ── 5.2 Statusbalk en merk ───────────────────────────────────────────────
   Dekkend en zonder backdrop-filter. Een halfdoorzichtige balk met blur kost
   merkbaar op mobiel en maakt het contrast van alles wat erin staat afhankelijk
   van wat eronder doorschuift; dat is niet te meten en dus niet te garanderen. */

.statusbalk, .kopbalk {
  position: sticky; top: 0; z-index: 40;
  background-color: var(--grond);
  border-bottom: 1px solid var(--lijn);
  transition: transform 260ms var(--curve);
}
/* main.js zet dit attribuut alleen op smal en nooit terwijl de focus in de balk
   staat: anders raakt een toetsenbordgebruiker zijn plek kwijt. */
.statusbalk[data-verstopt] { transform: translateY(-100%); }

.statusbalk__binnen, .kopbalk {
  max-width: var(--blad); margin-inline: auto;
  padding: 0.6rem var(--rand);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(0.5rem, 2vw, 1.5rem);
}
.statusbalk__rechts {
  display: flex; align-items: center;
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
  font-size: var(--t-s); color: var(--zacht);
}
.statusbalk__cta { padding: 0.6rem 1.15rem; font-size: var(--t-xs); }

.merk { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.merk__naam { font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; }

/* De openingsstatus. Zonder bevestigde tijden verbergt main.js deze regel of
   zet er de neutrale terugval neer; er komt nooit "nu open" te staan, want
   bereikbaarheid is een claim en geen weergave. */
.stip { display: inline-flex; align-items: center; gap: 0.45rem; }
.stip::before {
  content: ''; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background-color: var(--lijn-2);
}
.stip[data-status="open"]::before { background-color: var(--accent); }

/* De ankerrij. Drie ankers, dus geen uitklapmenu; onder vijf ankers past de rij
   ook op smal (componenten.md). Blok 6 haalt hem weg op smalle schermen en zet
   hem terug zodra de menucomponent aanstaat. */
.ankers__lijst { display: flex; align-items: center; gap: 0.15rem; }
.ankers__lijst a {
  display: block; padding: 0.45rem 0.8rem; border-radius: var(--r-pil);
  font-size: var(--t-s); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background-color 150ms ease-out;
}
.ankers__lijst a:hover { background-color: color-mix(in srgb, var(--actie) 12%, transparent); }

/* ── 5.3 Hero ─────────────────────────────────────────────────────────────
   Eén scherm hoog, met de inhoud verticaal gecentreerd. Past de inhoud niet,
   dan groeit de sectie door: liever te hoog dan afgesneden tekst. */

.sectie--hero {
  display: grid;
  /* Expliciete kolom. Zonder dit bepaalt het breedste kind de kolombreedte, en
     dat is met de marquee aan het spoor op width: max-content. In het
     bronproject was dat 1708px in een viewport van 410px en liep de hele hero
     buiten beeld (valkuilen B1). */
  grid-template-columns: minmax(0, 1fr);
  /* minmax(0, ...) en niet kaal 1fr: anders kan de rij niet onder zijn inhoud
     krimpen en groeit de hero alsnog voorbij het scherm. */
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - var(--balk, 4rem));
  --hero-top: clamp(1.75rem, 4vw, 4rem);
  /* Ruimte onderaan voor de vorm van de volgende sectie plus zijn verschuiving.
     Een marquee of band die op de sectieonderrand plakt telt mee als laatste
     inhoud en heeft dezelfde reservering nodig (overgang.md invariant 5). */
  --hero-voet: calc(var(--vorm-zicht) + 34px);
  /* Twee longhands, geen padding-block-shorthand: de shorthand zou de
     reservering uit blok 4 stilzwijgend overschrijven (valkuilen A4). De
     formules zijn identiek aan die van blok 4, met --hero-top en --hero-voet in
     plaats van --ritme. Ze blijven geldig als blok 4 wegvalt, want --vorm-zicht,
     --vorm-staart en --lift hebben een veilige nulwaarde in blok 1. */
  padding-top: max(var(--hero-top), var(--vorm-staart));
  padding-bottom: max(var(--hero-voet), calc(var(--vorm-zicht) + var(--lift) + 1.25rem));
}
/* .blad is hier een grid-item met margin-inline: auto, en auto-marges zetten
   het uitrekken van een grid-item uit. Zonder deze breedte krimpt de kolom naar
   haar intrinsieke maat en wordt de hele hero smaller dan de sectie
   (valkuilen B2). Bij margin-inline: auto op een grid-item hoort altijd een
   expliciete width, met max-width voor de begrenzing. */
.sectie--hero > .blad { align-self: center; width: 100%; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__tekst { min-width: 0; }

/* ── 5.4 Tekst naast beeld, dienstblokken, bewijs ─────────────────────────
   Eén patroon voor elke sectie waar twee kolommen naast elkaar staan. */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* auto-fit met minmax(min(Xrem, 100%), 1fr). De min() is niet decoratief: een
   vaste ondergrens van 14rem in een kolom van 335px op een telefoon van 375px
   duwt de pagina breder, en dat is dezelfde overflowfout als B1. */
.diensten,
.bewijsrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.beloftes { margin-top: 0.5rem; }
.beloftes li { padding: 0.8rem 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-s); }
.beloftes li:last-child { border-bottom: 0; }

/* Het plan. Trede 3 van de bewijsladder: een beschreven werkwijze is
   verifieerbaar en daarmee echt bewijs, zonder één claim. */
.stappen { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(2rem, 4vw, 3rem); }
.stap { padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); }
.stap:last-child { border-bottom: 0; }
.stap__titel { margin: 0 0 0.35rem; font-weight: 600; }
.stap__uitleg { margin: 0; font-size: var(--t-s); color: var(--zacht); }

/* Zichtbaar-inert gat middenin de sterkste zin die de pagina heeft. De zin
   staat er compleet; het ontbrekende gegeven is zichtbaar waardevol in plaats
   van afwezig (integriteit.md 3a). */
.dienstjaren {
  max-width: 34rem;
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: 1.4rem;
  background-color: var(--grond);
  color: var(--inkt);
  border: 1px dashed var(--lijn-2);
  border-radius: var(--r);
}
.dienstjaren p { margin: 0; font-size: var(--t-l); line-height: 1.35; }
.dienstjaren footer { margin-top: 0.75rem; }
.gat {
  display: inline-block; min-width: 2.5rem; text-align: center;
  border-bottom: 2px solid var(--accent);
  color: var(--zacht);
}

/* ── 5.5 Formulier en werkgebied ─────────────────────────────────────────── */

.aanvraag { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.aanvraag__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 1.25rem;
}
.veld { display: grid; gap: 0.4rem; }
.veld label { margin: 0; }
.veld input, .veld textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background-color: var(--grond);
  color: var(--inkt);
  border: 1px solid var(--lijn-2);
  border-radius: var(--r-s);
  transition: border-color 140ms ease-out;
}
.veld input:hover, .veld textarea:hover { border-color: var(--zacht); }
.veld textarea { resize: vertical; }
/* Fout is niet alleen kleur: de rand wordt dikker en er komt een pijl voor de
   melding. Kleur alleen is geen boodschap voor wie hem niet ziet. */
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"] {
  border-color: var(--inkt); border-width: 2px;
}
.veld--breed { grid-column: 1 / -1; }

/* Twee klassen niet nodig hier, want niets zet verderop display op .fout. Wel
   :empty vóór de opmaakregel, zodat een lege melding geen lege regel reserveert
   en de knop niet laat verspringen zodra hij vult. */
.fout:empty { display: none; }
.fout { margin: 0; font-size: var(--t-s); font-weight: 600; color: var(--inkt); }
.fout::before { content: '\2192\00a0'; }

.werkgebied {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--lijn);
}
.werkgebied .veld { max-width: 22rem; }
.werkgebied__uit { margin: 0.75rem 0 0; font-size: var(--t-s); font-weight: 600; }
.werkgebied__uit[data-soort="leeg"] { color: var(--zacht); font-weight: 400; }
/* --accent en niet --actie-tekst: op het donkere oproepvlak valt de donkere
   actiekleur weg, en juist deze regel moet gelezen worden. */
.werkgebied__uit[data-soort="ja"] { color: var(--accent); }

/* ── 5.6 Voet en mobiele actiebalk ───────────────────────────────────────── */

.voet { padding-block: clamp(3.5rem, 7vw, 5rem); }
.voet__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 2rem;
}
.voet__raster p { font-size: var(--t-s); color: var(--zacht); }
.voet__merk { font-weight: 700; color: var(--inkt); }
.voet address { font-size: var(--t-s); color: var(--zacht); }
.voet__slot {
  margin: 2rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--lijn);
  font-size: var(--t-xs); color: var(--zacht);
}
/* bedankt.html heeft een eenvoudiger voet zonder raster. */
.voet__naam { font-weight: 700; }
.voet__gebied, .voet__kvk { font-size: var(--t-s); color: var(--zacht); }
.voet__fijn { font-size: var(--t-xs); color: var(--zacht); }

/* De vijfde CTA-plaatsing. Staat standaard uit en komt in blok 6 op smal in
   beeld. Geen gekleurd vlak eronder: de knoppen zijn zelf dekkend en moeten het
   werk doen. */
.actiebalk {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: none;
  align-items: center; gap: 0.5rem;
  padding: 0.6rem var(--rand) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  transition: transform 220ms var(--curve);
}
.actiebalk[data-verborgen="ja"] { transform: translateY(150%); }
.actiebalk a { flex: 1; min-width: 0; text-align: center; padding: 0.75rem 0.4rem; font-size: var(--t-xs); white-space: nowrap; }
/* Element plus klasse, precies zo specifiek als `.actiebalk a` hierboven. Met
   alleen `.actiebalk__cta` (0,1,0) verliest deze regel van `.actiebalk a`
   (0,1,1) en worden alle knoppen even breed, terwijl je een verhouding hebt
   gezet. Specificiteit, niet volgorde (valkuilen A3). */
.actiebalk a.actiebalk__cta { flex: 1.5; }




/* ── 5.8 Marquee ──────────────────────────────────────────────────────────
   Twee identieke reeksen die samen naar translateX(-50%) schuiven. Alleen
   zinnig vanaf zes echte items per reeks, uit de intake, met toestemming; vijf
   items is geen marquee maar een rij. */

.strook { position: relative; margin-top: clamp(2.5rem, 6vw, 4rem); }
.strook__venster {
  overflow: hidden;
  /* Goot rechts, zodat de tekst niet onder de pauzeknop door schuift. */
  margin-right: 3rem;
  /* Uitvloeien aan beide randen, zodat de lus geen zichtbaar begin heeft. */
  --masker: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: var(--masker);
  mask-image: var(--masker);
}
/* Het spoor is max-content en blaast elke grid-ouder op; de dragende sectie
   staat daarom op grid-template-columns: minmax(0, 1fr) en dit venster op
   overflow: hidden. */
[data-marquee] .spoor { display: flex; width: max-content; animation: strook-schuif 40s linear infinite; }
[data-marquee]:hover .spoor,
[data-marquee]:focus-within .spoor,
[data-marquee][data-pauze="ja"] .spoor { animation-play-state: paused; }
@keyframes strook-schuif { to { transform: translateX(-50%); } }

.strook__reeks { display: flex; align-items: center; }
/* Ruimte als margin op het item, NOOIT als gap op het spoor. Met gap zit er in
   de ene helft één tussenruimte te veel, dus is de halve baan niet exact één
   reeks en springt de lus zichtbaar op het herhaalpunt (valkuilen E1). Nameten:
   spoor.scrollWidth / 2 moet gelijk zijn aan de breedte van de eerste reeks.
   Tweede eis, die CSS niet kan afdwingen: één helft moet breder zijn dan het
   breedste scherm dat je bedient, anders loopt de band rechts leeg vóór hij
   herhaalt (valkuilen E2). Laat de duur meegroeien met de afstand. */
.strook__item { margin-right: 0.85rem; white-space: nowrap; padding: 1.1rem 0; font-size: var(--t-s); }

.strook__pauze {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 1.85rem; height: 1.85rem; padding: 0;
  display: grid; place-items: center;
  background-color: var(--grond); color: var(--zacht);
  border: 1px solid var(--lijn-2); border-radius: 50%; cursor: pointer;
}
.strook__pauze:hover { color: var(--inkt); border-color: var(--inkt); }
.strook__pauze-icoon { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.strook__pauze[aria-pressed="true"] .strook__pauze-icoon {
  width: 0; height: 0; border: 0;
  border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

@media (prefers-reduced-motion: reduce) {
  /* De animatie gaat helemaal uit; alleen de duur op 0,01ms zetten laat het
     spoor op zijn eindtransform staan én laat de aria-hidden kopie zichtbaar,
     zodat elk item er twee keer staat (valkuilen E3). */
  [data-marquee] .spoor { animation: none; width: 100%; flex-wrap: wrap; }
  .strook__reeks { flex-wrap: wrap; }
  .strook__reeks[aria-hidden="true"] { display: none; }
  .strook__venster { -webkit-mask-image: none; mask-image: none; margin-right: 0; }
  /* main.js verbergt deze knop ook; deze regel is het vangnet voor het geval JS
     niet draait. Een pauzeknop die niets te pauzeren heeft klikt dood. */
  .strook .strook__pauze { display: none; }
}








/* ── 5.12 Voor-en-na-vergelijker ──────────────────────────────────────────
   Alleen bij twee foto's van hetzelfde kader, eigen werk, met toestemming, en
   met vergelijkbaar licht en standpunt. Ontbreekt één van die vier, dan is het
   geen vergelijking maar een suggestie. */

.vergelijker {
  position: relative; overflow: hidden;
  /* Vaste verhouding, zodat er geen layoutsprong is als de foto's decoderen.
     Het harnas meet vóór die sprong en zou hem anders missen. */
  aspect-ratio: 3 / 2;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  background-color: var(--lijn);
  border: 1px solid var(--lijn-2); border-radius: var(--r);
  /* Zonder user-select kleurt de halve pagina blauw op tijdens het slepen;
     zonder touch-action scrollt de pagina mee onder je vinger. */
  -webkit-user-select: none; user-select: none;
  touch-action: none; cursor: ew-resize;
}
.vergelijker__voor, .vergelijker__na {
  display: grid; place-items: center;
  padding: 1rem; text-align: center;
  background-color: var(--kaart); color: var(--licht-inkt);
}
.vergelijker__voor { width: 100%; height: 100%; }
/* clip-path in plaats van een tweede container: minder markup, en de foto hoeft
   niet mee te schalen met een container query. */
.vergelijker__na {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--scheiding)) 0 0);
  background-color: color-mix(in srgb, var(--kaart) 88%, var(--licht-inkt));
}
.vergelijker__greep {
  position: absolute; top: 0; bottom: 0; left: var(--scheiding);
  width: 3px; margin-left: -1.5px;
  background-color: var(--kaart);
  display: grid; place-items: center; cursor: ew-resize;
}
.vergelijker__knop {
  width: 3rem; height: 3rem; border-radius: 50%;
  background-color: var(--kaart);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--licht-inkt) 28%, transparent);
  transition: transform 200ms var(--curve);
}
.vergelijker[data-sleept="ja"] .vergelijker__knop { transform: scale(1.12); }
/* De labels staan op een dekkend vlak en nooit direct op de foto: alleen dan is
   hun contrast te meten. Een halfdoorzichtig label boven beeld levert een vals
   nul op in de contrastsweep (assets.md, scrim-regel). */
.vergelijker__merk {
  position: absolute; bottom: 0.7rem;
  padding: 0.25rem 0.55rem; border-radius: 3px;
  background-color: var(--licht-inkt); color: var(--licht-grond);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.vergelijker__merk--voor { right: 0.7rem; }
.vergelijker__merk--na   { left: 0.7rem; }


/* ── 6. Responsive ─────────────────────────────────────────────────────────
   harnasconfig.breedtes staat op [375, 1280], en die twee meet je in dezelfde
   ronde. Meer dan de helft van de fouten in het bronproject bestond op precies
   één van de twee. 375 valt onder elke max-width-tak hieronder; 1280 valt
   buiten alle max-width-takken en binnen de min-width-tak van de lift in blok 4.
   Elke regel hieronder is dus op minstens één van de twee gemeten breedtes
   actief, en geen enkele tak is onbereikbaar bij de meting. */

@media (max-width: 900px) {
  /* Eén kolom. Op mobiel eerst lezen, dan pas het beeld. */
  .hero, .duo { grid-template-columns: minmax(0, 1fr); }
  .hero .beeldgat, .duo .beeldgat { order: 2; }

  /* Twee klassen, want .ankers__lijst zet zelf display: flex. Onder deze
     breedte past de ankerrij niet meer naast merk, status en twee knoppen; hij
     zou de balk breder maken dan het scherm en dat is horizontale scroll op de
     hele pagina. De inhoud blijft bereikbaar: het is één pagina, en de
     actiebalk draagt hieronder de twee wegen naar binnen. */
  .statusbalk .ankers { display: none; }

}

@media (max-width: 720px) {
  /* De actiebalk komt in beeld en neemt de twee wegen naar binnen over. */
  .actiebalk { display: flex; }
  /* Twee gevulde knoppen naast elkaar in een balk van nog geen 60px is te veel,
     en de actiebalk toont hetzelfde label onderin. Twee klassen in de selector,
     want .knop zet zelf display: inline-flex en staat verderop in dit bestand
     (valkuilen A2). */
  .statusbalk .statusbalk__cta { display: none; }

  /* Ruimte voor de zwevende knoppen zit in de voet zelf, zodat het vlak
     doorloopt tot de onderrand van de pagina en er niets leegs onder de site
     overblijft. */
  .voet { padding-bottom: calc(clamp(3.5rem, 7vw, 5rem) + 4.75rem); }

  /* --balk is alles wat vast op het scherm staat en dus niet voor de hero is:
     de statusbalk boven en de actiebalk onder. Meet die twee na op het echte
     scherm; de waarde hier is een startpunt, geen norm. */
  .sectie--hero { --balk: 7.9rem; --hero-top: 1.25rem; }
  .knoppen { margin-top: 1.25rem; gap: 0.5rem; }
}

@media (max-width: 560px) {
  .statusbalk .stip { display: none; }


}

@media (max-width: 480px) {
  /* Volle breedte, zodat er geen knop van 44px naast een knop van 180px staat.
     Twee klassen, want .knop zet zelf geen breedte maar wel display, en een
     losse utility zou hier van elke latere componentselector verliezen. */
  .knoppen .knop { width: 100%; }

}


/* ── 7. Beweging ───────────────────────────────────────────────────────────
   Marge en transform staan SAMEN achter no-preference. Valt de beweging weg,
   dan valt ook de negatieve marge weg en staan de secties gewoon op elkaar. Zou
   je alleen de transform uitzetten, dan overlappen ze permanent met een lift en
   verdwijnt de bovenkant van elke sectie onder zijn voorganger (overgang.md,
   reduced motion).

   De klasse .schuif wordt door main.js gezet, niet in de opmaak: zonder JS
   staat de pagina in zijn rusttoestand, en dat is de correcte, naadloze
   toestand. */

@media (prefers-reduced-motion: no-preference) {
  .schuif {
    margin-top: calc(var(--lift) * -1);
    transform: translateY(var(--verschuif, var(--lift)));
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Onzichtbare inhoud is erger dan een gemiste animatie, altijd. Met
     !important, omdat de inline transition-delay van main.js hier anders
     alsnog een wachttijd oplevert op iets wat niet meer beweegt. */
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   KB Cleaning: de laag erbovenop. Modehuis, geen sjabloon: één zin per
   scherm, foto's over de volle breedte, één serif, vierkante knoppen,
   haarlijnen, en verder lucht. Alles hieronder wint van het skelet omdat
   het later staat.
   ═══════════════════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }

:root {
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  --donker: #0A0A0A;
  --merk: #184850;
  --actie: #111111;
  --r: 0; --r-s: 0; --r-pil: 0;
  --schaduw: none;
  --ritme: clamp(5.5rem, 12vw, 10rem);
  --blad: 78rem;
}
body { font-weight: 400; letter-spacing: 0.005em; }

h1, h2 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em; }
h1 { font-size: clamp(3.4rem, 10vw, 8rem); line-height: 0.95; }
h2 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1; max-width: none; }
h3 { font-family: var(--serif); font-weight: 400; }
.lead { font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 400; line-height: 1.65; max-width: 40ch; margin-top: 1.5rem; color: var(--zacht); }
.midden { text-align: center; }
.midden .lead, .midden h1, .midden h2 { margin-inline: auto; }
.blad--smal { max-width: 48rem; }
.oog, .menu__kop, .regel, .citaat footer, .reviewkop, .tekstlink, .ankers__lijst a, figcaption {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--zacht);
}
.oog { margin: 0 0 2rem; }
.fijn { font-size: var(--t-xs); color: var(--zacht); line-height: 1.6; margin-top: 1.5rem; }
.intern { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; margin-top: clamp(3rem, 6vw, 5rem); max-width: 28ch; color: var(--inkt); }

.sectie--donker { --grond: var(--donker); background-color: var(--donker); }

/* ── Knoppen: vierkant, kapitalen, één per plek ── */
.knop { border-radius: 0; background-color: var(--inkt); color: var(--grond); border: 1px solid var(--inkt); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; padding: 1.05rem 2.2rem; }
.knop:hover { background-color: transparent; color: var(--inkt); }
.knop--stil { background-color: transparent; color: var(--inkt); border-color: var(--lijn-2); }
.knop--stil:hover { border-color: var(--inkt); background-color: transparent; }
.knop--mini { padding: 0.7rem 1.3rem; font-size: 0.62rem; }
.tekstlink { color: var(--inkt); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2rem; cursor: pointer; }
.tekstlink::after { content: '\00a0\2192'; }
.tekstlink:hover { color: var(--zacht); }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }
.knoppen.midden { justify-content: center; }

/* ── Balk ── */
.statusbalk { background-color: color-mix(in srgb, var(--licht-grond) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--licht-lijn); box-shadow: none; }
.merk__naam { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; letter-spacing: 0; }
.merk__kb { font-weight: 500; color: var(--merk); }
.ankers__lijst a { text-decoration: none; color: var(--inkt); }
.ankers__lijst a:hover { color: var(--zacht); }
.statusbalk__rechts { white-space: nowrap; }
.statusbalk .stip { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; }
.statusbalk .knop[data-tel] { font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .statusbalk .stip { display: none; } }
@media (max-width: 700px) { .statusbalk .knop[data-tel] { display: none; } }

/* ── Hero: tekst gecentreerd, dan de foto over de volle breedte ── */
.sectie--hero { display: block; min-height: 0; padding-top: clamp(5rem, 10vw, 8rem); }
.hero { display: block; }
.breed { margin: clamp(3.5rem, 7vw, 6rem) 0 0; }
.breed img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; max-height: 84vh; }
.regel { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.75rem; margin: 2rem auto 0; padding-inline: var(--rand); }

/* ── Staande foto, gecentreerd ── */
.staand { margin: clamp(3.5rem, 7vw, 6rem) auto 0; width: min(30rem, calc(100% - 2 * var(--rand))); }
.staand img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.staand figcaption { margin-top: 1rem; text-align: center; }

/* ── Gids: grote foto, tekst ernaast, dan vier foto's op een rij ── */
.gids { display: grid; gap: 3rem; align-items: start; }
.gids__beeld { margin: 0; }
.gids__beeld img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gids__tekst h2 { max-width: none; }
.afspraken { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.afspraken li { padding: 0.95rem 0; border-top: 1px solid var(--lijn); font-size: var(--t-s); line-height: 1.55; color: var(--zacht); }
.afspraken li:last-child { border-bottom: 1px solid var(--lijn); }
/* ── Fotobaan: de vier dienstfoto's als doorlopende band ────────────────
   Erft de mechaniek van de reviewstrook hierboven: [data-marquee] .spoor is
   max-content en schuift naar -50 procent, dus het herhaalpunt valt precies op
   een reekslengte. Twee eisen die CSS niet afdwingt en die hier gehaald zijn:
   de ruimte zit als margin op het item en nooit als gap op het spoor, en een
   halve baan is breder dan het breedste scherm. Acht tegels van maximaal 24rem
   plus 3px voeg is 3096px; daaronder loopt de band rechts niet leeg. */
.fotobaan { position: relative; margin-top: clamp(4rem, 8vw, 7rem); }
.fotobaan__venster {
  overflow: hidden;
  /* Uitvloeien aan beide randen, zodat de lus geen zichtbaar begin heeft. */
  --masker: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: var(--masker);
  mask-image: var(--masker);
}
/* Trager dan de reviewstrook: bij beeld leest 40s als gejaagd. */
[data-marquee].fotobaan .spoor { animation-duration: 46s; }
.fotobaan__reeks { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.fotobaan__item { flex: 0 0 auto; margin-right: 3px; }
.fotobaan__item img {
  display: block; width: clamp(11rem, 21vw, 24rem); height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
}
.fotobaan__pauze { top: auto; bottom: 0.9rem; right: 0.9rem; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Beweging uit: terug naar de rij van vier die er stond, en de dubbele
     tegels en de tweede reeks eruit zodat elke foto er precies een keer staat. */
  .fotobaan__venster { -webkit-mask-image: none; mask-image: none; }
  .fotobaan__reeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .fotobaan__reeks[aria-hidden="true"] { display: none; }
  .fotobaan__item { margin-right: 0; }
  .fotobaan__item:nth-child(n+5) { display: none; }
  .fotobaan__item img { width: 100%; }
  .fotobaan .strook__pauze { display: none; }
}
@media (min-width: 900px) { .gids { grid-template-columns: 1.05fr 1fr; gap: clamp(3rem, 7vw, 7rem); } .gids__tekst { padding-top: 1rem; } }

/* ── Stappen: één smalle kolom ── */
.stappen { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 36rem; display: grid; gap: 1.5rem; text-align: left; grid-template-columns: 1fr; }
.stap { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: baseline; padding: 0; border: 0; }
.stap__nr { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--zacht); letter-spacing: 0; text-transform: none; margin: 0; }
.stap__uitleg { margin: 0; font-size: var(--t-s); line-height: 1.6; color: var(--zacht); }

/* ── Het menu: diensten en vanafprijzen in één lijst ── */
.menu { margin-top: clamp(4.5rem, 9vw, 7rem); }
.menu__kop { text-align: center; margin: 0 0 1.5rem; }
.menu__lijst { margin: 0; }
.menu__rij { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 2rem; padding: 1.35rem 0; border-top: 1px solid var(--lijn-2); }
.menu__rij:last-child { border-bottom: 1px solid var(--lijn-2); }
.menu__rij dt { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.05; }
.menu__prijs { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu__sub { grid-column: 1 / -1; margin: 0; font-size: var(--t-xs); color: var(--zacht); line-height: 1.55; }
.menu .fijn { max-width: 40rem; margin-inline: auto; }

/* ── Bewijs: schuif over de volle breedte, dan één citaat, dan de ticker ── */
.vergelijker { width: 100%; margin: clamp(3rem, 6vw, 5rem) 0 0; border: 0; border-radius: 0; aspect-ratio: 16 / 10; max-height: 86vh; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: ew-resize; background: var(--donker); }
.vergelijker__img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.vergelijker__na { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 var(--scheiding)); }
.vergelijker__merk { background: var(--donker); color: var(--licht-grond); border-radius: 0; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.45rem 0.8rem; }
.vergelijker__merk--voor { left: 1rem; right: auto; }
.vergelijker__merk--na   { right: 1rem; left: auto; }
.vergelijker__knop { border-radius: 0; box-shadow: none; }
html[data-sleept="ja"], html[data-sleept="ja"] * { -webkit-user-select: none !important; user-select: none !important; }
.citaat { margin: clamp(4.5rem, 9vw, 7rem) auto 0; }
.citaat p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.12; margin: 0; }
.citaat footer { margin-top: 1.5rem; }
.reviewkop { margin: clamp(3rem, 6vw, 5rem) auto 0; }
.reviewkop b { font-family: var(--serif); font-weight: 300; font-size: 2.2rem; letter-spacing: 0; text-transform: none; margin-right: 0.6rem; color: var(--inkt); vertical-align: -0.1em; }
.strook { margin-top: 1.5rem; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.strook__reeks { align-items: center; }
.strook__item { white-space: nowrap; padding: 1.1rem 0; margin-right: 3.5rem; font-family: var(--serif); font-weight: 300; font-size: 1.3rem; display: inline-flex; align-items: baseline; gap: 0.9rem; border: 0; width: auto; }
.strook__item q { quotes: '\201C' '\201D'; }
.strook__item span { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zacht); }
.strook__pauze { border-radius: 0; }

/* ── FAQ: smalle kolom ── */
.faq { margin-top: clamp(4.5rem, 9vw, 7rem); }
.faq details { border-top: 1px solid var(--lijn-2); }
.faq details:last-child { border-bottom: 1px solid var(--lijn-2); }
.faq summary { cursor: pointer; padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 300; color: var(--zacht); }
.faq details[open] summary::after { content: '\2212'; }
.faq p { margin: 0 0 1.2rem; font-size: var(--t-s); color: var(--zacht); line-height: 1.6; max-width: 52ch; }
#contact .fijn a { color: inherit; }

/* ── Voet ── */
.voet { --grond: var(--donker); --inkt: var(--licht-grond); --zacht: color-mix(in srgb, var(--licht-grond) 66%, var(--donker)); --lijn: rgba(244, 241, 236, 0.14); --lijn-2: rgba(244, 241, 236, 0.34); background-color: var(--grond); color: var(--inkt); padding-block: clamp(4rem, 8vw, 6rem); }
.voet__raster { display: grid; gap: 1.75rem; justify-items: start; }
.voet__logo { width: 7.5rem; height: auto; display: block; }
.voet address { font-style: normal; display: flex; gap: 2rem; }
.voet address a { color: var(--inkt); text-decoration: none; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 0.2rem; }
.voet__fijn { margin: 0; max-width: 42rem; font-size: var(--t-xs); color: var(--zacht); line-height: 1.6; }

/* ── Actiebalk ── */
.actiebalk a { border-radius: 0; }

/* ── Prijsaanvraag: regels, geen chips ── */
.onboard { border: 0; padding: 0; width: min(32rem, calc(100% - 2rem)); background: var(--licht-grond); color: var(--licht-inkt); border-radius: 0; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6); }
.onboard::backdrop { background: rgba(10, 10, 10, 0.66); }
.onboard__form { margin: 0; padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; gap: 1.25rem; }
.onboard__kop { display: flex; justify-content: space-between; align-items: center; }
.onboard__tel { margin: 0; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--licht-zacht); }
.onboard__sluit { background: none; border: 0; font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--licht-zacht); padding: 0.2rem 0.5rem; }
.onboard__balk { height: 1px; background: var(--licht-lijn); }
.onboard__balk span { display: block; height: 100%; background: var(--licht-inkt); transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.onboard__vraag { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 300; margin: 0 0 1rem; max-width: none; }
.keuzes { display: grid; gap: 0; }
.keuze { padding: 0.95rem 0; border: 0; border-top: 1px solid var(--licht-lijn-2); background: none; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; text-align: left; cursor: pointer; color: var(--licht-inkt); display: flex; justify-content: space-between; transition: padding-left 200ms ease-out; }
.keuze:last-child { border-bottom: 1px solid var(--licht-lijn-2); }
.keuze:hover { padding-left: 0.5rem; }
.keuze[aria-pressed="true"]::after { content: '\2713'; font-size: 1rem; }
.onboard .veld + .veld { margin-top: 0.9rem; }
.onboard .veld input { border-radius: 0; border: 0; border-bottom: 1px solid var(--licht-lijn-2); background: transparent; padding-inline: 0; }
.onboard .veld input:focus { outline: 0; border-bottom-color: var(--licht-inkt); }
.onboard__voet { display: flex; gap: 0.75rem; justify-content: flex-end; flex-wrap: wrap; }
.onboard .knop { background: var(--licht-inkt); color: var(--licht-grond); border-color: var(--licht-inkt); }
.onboard .knop--stil { background: transparent; color: var(--licht-inkt); border-color: var(--licht-lijn-2); }
.onboard .fijn { margin-top: 1rem; }

/* ── Beweging: alleen een langzame opkomst ── */
[data-reveal] { transition-duration: 900ms; }

@media (max-width: 600px) {
  .breed img { aspect-ratio: 4 / 5; }
  .vergelijker { aspect-ratio: 4 / 5; }
  .strook__item { font-size: 1.1rem; margin-right: 2.5rem; }
  .menu__rij dt { font-size: 1.45rem; }
  .voet address { flex-wrap: wrap; }
}

/* De feitenregel onder de herofoto hoort op één regel te passen; hij erft anders een leesbreedte. */
.regel { max-width: none; }

/* ── Hero met hun video als achtergrond ──
   Zwart vlak, video op 40% (hun eigen instelling), tekst erbovenop. De
   tekst leest tegen het zwart, niet tegen de video: dat is wat het harnas
   meet en wat een bezoeker in het slechtste geval ziet. */
.sectie--hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(92svh, 64rem); display: grid; align-content: center; padding-block: clamp(6rem, 12vw, 9rem); }
.hero__video { position: absolute; inset: 0; z-index: -1; background: var(--donker); }
.hero__video video { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; display: block; opacity: 0.4; }
.sectie--hero .hero { position: relative; }
.sectie--hero .regel { margin-top: clamp(3rem, 7vw, 6rem); }
/* Minder beweging: main.js zet de video stil, de poster blijft staan op dezelfde 40%. */

/* ── Reviews als kaarten in een lus (naar het shadcn-component) ──
   Kaart: bovenrand, verloop van licht naar bijna niets, avatar met initialen,
   naam en bron, dan de tekst. 40 seconden per lus, pauze bij hover, en aan
   beide kanten een vervaging naar de achtergrond. */
.reviews__kop { margin-top: clamp(4.5rem, 9vw, 7rem); }
.reviews__titel { max-width: 18ch; }
.strook--kaarten { margin-top: clamp(2rem, 4vw, 3rem); border: 0; }
.strook--kaarten .strook__venster { padding-block: 0.5rem; }
.strook--kaarten .strook__reeks { align-items: stretch; }
.strook--kaarten .strook__item.review {
  white-space: normal; width: 20rem; margin-right: 1rem; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem; text-align: left;
  border: 0; border-top: 1px solid rgba(244, 241, 236, 0.28); border-radius: 8px;
  background: linear-gradient(180deg, rgba(244, 241, 236, 0.09), rgba(244, 241, 236, 0.02));
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: var(--t-s); font-weight: 400;
  transition: background-color 300ms ease-out;
}
.strook--kaarten .strook__item.review:hover { background: linear-gradient(180deg, rgba(244, 241, 236, 0.13), rgba(244, 241, 236, 0.04)); }
.review__kop { display: flex; align-items: center; gap: 0.75rem; }
.review__avatar { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgba(244, 241, 236, 0.12); color: var(--inkt); font-family: var(--serif); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.02em; }
.review__wie { display: flex; flex-direction: column; gap: 0.25rem; }
.review__wie b { font-weight: 600; line-height: 1; color: var(--inkt); font-size: 0.95rem; }
.review__wie span { font-size: var(--t-xs); color: var(--zacht); }
.review__tekst { margin: 0; color: var(--zacht); line-height: 1.55; }
.strook--kaarten:hover .spoor { animation-play-state: paused; }
.strook--kaarten::before, .strook--kaarten::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 22%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--grond), transparent);
}
.strook--kaarten::before { left: 0; }
.strook--kaarten::after { right: 0; transform: scaleX(-1); }
.strook--kaarten .strook__pauze { z-index: 2; }
@media (max-width: 640px) { .strook--kaarten::before, .strook--kaarten::after { display: none; } .strook--kaarten .strook__item.review { width: 17rem; } }
/* De naam op de kaart is gewone tekst, geen kapitalen: de tickerregel hierboven zette elke span in kapitalen. */
.strook__item .review__wie, .strook__item .review__wie span { text-transform: none; letter-spacing: 0; }
.strook__item .review__wie span { font-size: var(--t-xs); }

/* ═══ Donker door en door, met hun teal ═══
   Zwart en een diepe teal om en om; het teal uit het logo op knoppen en
   vlakken, een lichte teal voor cijfers en accenten. Alles doorgerekend:
   laagste paar 6,82:1 (accent op teal-vlak). */
:root { --merk: #184850; --merk-vlak: #10333A; --merk-licht: #8FC1C8; }
html, body { background-color: var(--donker); color: var(--licht-grond); }
.sectie--licht, .sectie--teal, .statusbalk, .onboard {
  --grond: var(--donker); --inkt: var(--licht-grond);
  --zacht: #B3AFA8; --lijn: rgba(244, 241, 236, 0.14); --lijn-2: rgba(244, 241, 236, 0.34);
  --ring: var(--licht-grond); --accent: var(--merk-licht);
  background-color: var(--grond); color: var(--inkt);
}
.sectie--teal { --grond: var(--merk-vlak); --zacht: #B9C9CB; --lijn: rgba(244, 241, 236, 0.16); --lijn-2: rgba(244, 241, 236, 0.38); background-color: var(--grond); }
.sectie--donker { --zacht: #B3AFA8; }

/* Knoppen in het teal van het logo */
.knop { background-color: var(--merk); color: var(--licht-grond); border-color: var(--merk); }
.knop:hover { background-color: transparent; color: var(--licht-grond); border-color: var(--licht-grond); }
.knop--stil { background-color: transparent; color: var(--inkt); border-color: var(--lijn-2); }
.knop--stil:hover { border-color: var(--inkt); }
.tekstlink { color: var(--licht-grond); border-bottom-color: var(--merk-licht); }
.tekstlink:hover { color: var(--merk-licht); }
.actiebalk { background-color: rgba(10, 10, 10, 0.86); }

/* Accenten in de lichte teal */
.oog, .menu__kop, .regel, figcaption, .stap__nr, .review__wie span, .onboard__tel { color: var(--merk-licht); }
.menu__prijs { color: var(--merk-licht); }
.afspraken li, .faq details { border-color: rgba(143, 193, 200, 0.28); }
.menu__rij { border-top-color: rgba(143, 193, 200, 0.28); }
.menu__rij:last-child { border-bottom-color: rgba(143, 193, 200, 0.28); }
.review__avatar { background: var(--merk); color: var(--licht-grond); }
.onboard__balk span { background: var(--merk-licht); }
.faq summary::after { color: var(--merk-licht); }

/* Balk: donker, met het logo */
.statusbalk { background-color: rgba(10, 10, 10, 0.82); border-bottom: 1px solid rgba(244, 241, 236, 0.1); }
.merk { display: inline-flex; align-items: center; }
.merk__logo { height: 2.6rem; width: auto; display: block; }
.ankers__lijst a { color: var(--licht-grond); }
.ankers__lijst a:hover { color: var(--merk-licht); }
.statusbalk__cta { background-color: var(--merk); border-color: var(--merk); color: var(--licht-grond); }
@media (max-width: 700px) { .merk__logo { height: 2.2rem; } }

/* Dienstenmenu met foto */
.menu__titel { max-width: none; }
.menu .lead { margin-inline: auto; }
.menu__lijst { margin-top: 2.5rem; }
.menu__rij { grid-template-columns: 4.5rem 1fr auto; column-gap: 1.25rem; }
.menu__foto { grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 4px; display: block; }
.menu__sub { grid-column: 2 / -1; }
@media (max-width: 480px) { .menu__rij { grid-template-columns: 3.5rem 1fr auto; column-gap: 0.9rem; } .menu__foto { width: 3.5rem; height: 3.5rem; } }

/* Schuif: de hele foto in beeld, in een kader in plaats van over het scherm */
.vergelijkers { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.vergelijkers .vergelijker { width: 100%; max-width: 64rem; margin: 0 auto; aspect-ratio: var(--verhouding, 1114 / 822); max-height: none; border-radius: 6px; overflow: hidden; }
@media (min-width: 900px) { .vergelijkers:has(.vergelijker + .vergelijker) { grid-template-columns: 1fr 1fr; } }

/* Prijsaanvraag in het donker */
.onboard { background: #121212; color: var(--licht-grond); border: 1px solid rgba(244, 241, 236, 0.12); }
.onboard__sluit { color: var(--zacht); }
.onboard__balk { background: rgba(244, 241, 236, 0.14); }
.keuze { color: var(--licht-grond); border-top-color: rgba(143, 193, 200, 0.28); }
.keuze:last-child { border-bottom-color: rgba(143, 193, 200, 0.28); }
.keuze[aria-pressed="true"]::after { color: var(--merk-licht); }
.onboard .veld label { color: var(--zacht); }
.onboard .veld input { color: var(--licht-grond); border-bottom-color: rgba(244, 241, 236, 0.34); }
.onboard .veld input:focus { border-bottom-color: var(--merk-licht); }
.onboard .knop { background: var(--merk); color: var(--licht-grond); border-color: var(--merk); }
.onboard .knop--stil { background: transparent; border-color: rgba(244, 241, 236, 0.34); }
.onboard .fijn { color: var(--zacht); }

/* Na-laag exact op de voor-laag: het skelet zet een binnenmarge op de lagen,
   en dan verspringt de tweede foto 16px ten opzichte van de eerste. */
.vergelijker__na { inset: 0 !important; padding: 0 !important; margin: 0 !important; }
.vergelijker__na .vergelijker__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vergelijkers .vergelijker { max-width: 56rem; }
.merk__logo { height: 3.1rem; }
@media (max-width: 700px) { .merk__logo { height: 2.4rem; } }

/* ═══ Alles op de zijde ═══
   Eén doek achter de hele pagina; geen sectiekleuren meer. De body draagt
   als kleur de LICHTSTE toon die de stof kan aannemen (#434D50), zodat het
   harnas het contrast tegen het slechtste geval meet en niet tegen zwart. */
html, body { background-color: #434D50; }
.zijde { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; pointer-events: none; }
.zijde__waas { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), transparent 45%, rgba(0, 0, 0, 0.50)); }
.sectie, .sectie--licht, .sectie--donker, .sectie--teal, .sectie--hero, .voet {
  --grond: #434D50; --inkt: #F4F1EC; --zacht: #C6C2BB; --lijn: rgba(244, 241, 236, 0.16); --lijn-2: rgba(244, 241, 236, 0.36);
  --ring: #F4F1EC; --accent: #A9D4DA; background-color: transparent; color: var(--inkt);
}
:root { --merk-licht: #A9D4DA; }
.oog, .menu__kop, .regel, figcaption, .stap__nr, .review__wie span, .onboard__tel, .menu__prijs, .faq summary::after { color: var(--merk-licht); }
.tekstlink { border-bottom-color: var(--merk-licht); }
.tekstlink:hover { color: var(--merk-licht); }
.statusbalk { background-color: rgba(20, 22, 23, 0.55); }
.actiebalk { background-color: rgba(20, 22, 23, 0.7); }
.hero__video { background: transparent; }
.hero__video video { opacity: 0.45; }
.vergelijkers .vergelijker { background: rgba(0, 0, 0, 0.25); }
.strook--kaarten::before, .strook--kaarten::after { background: linear-gradient(90deg, rgba(40, 46, 48, 0.9), transparent); }
.strook--kaarten .strook__item.review { background: linear-gradient(180deg, rgba(10, 12, 12, 0.42), rgba(10, 12, 12, 0.22)); border-top-color: rgba(244, 241, 236, 0.3); }
.strook--kaarten .strook__item.review:hover { background: linear-gradient(180deg, rgba(10, 12, 12, 0.5), rgba(10, 12, 12, 0.3)); }
.voet { border-top: 1px solid rgba(244, 241, 236, 0.14); }
.onboard { background: #1C2224; }
@media (prefers-reduced-motion: reduce) { .zijde { opacity: 0.85; } }

/* De body zelf doorzichtig: een in-flow blok schildert ná een negatieve z-index, dus body-achtergrond zou het doek bedekken. */
html { background-color: #434D50; }
body { background-color: transparent; }

/* ═══ Zijde subtiel, en niet in de hero ═══
   Het doek staat op 40% over een donkere grond; de golven lopen dan van
   #272C2D tot hooguit #373F41 (piek), en tegen die piek haalt alle tekst nog
   ruim 4,5:1. De hero krijgt weer een eigen dekkend vlak, met alleen de video. */
html { background-color: #2B3334; }
.zijde { opacity: 0.4; }
.zijde__waas { opacity: 0.6; }
.sectie--hero { background-color: #0E1213; }
.hero__video { background: #0E1213; }
.hero__video video { opacity: 0.4; }

/* ═══ Zo goed als zwart, met een glans ═══
   Grond bijna zwart (#0B0D0D), het doek op 22%. De golven lopen dan van
   #0C0E0E tot een piek van #191D1E: net genoeg om te zien dat het leeft. */
html { background-color: #0B0D0D; }
.zijde { opacity: 0.22; }
.zijde__waas { opacity: 0.5; }
.sectie--hero, .hero__video { background-color: #0B0D0D; }
.strook--kaarten::before, .strook--kaarten::after { background: linear-gradient(90deg, rgba(11, 13, 13, 0.92), transparent); }

/* Nog een stap terug: 12%. Piek nu #131616 op #0B0D0D. */
.zijde { opacity: 0.12; }

/* ── Dienstencarrousel ─────────────────────────────────────────────────────
   Links een kolom met de zes diensten die om de actieve heen draait, rechts
   een stapel foto's. Overgenomen vorm van een React-component, hier zonder
   React gebouwd: de stand staat in twee custom properties per rij en in een
   data-attribuut per kaart, en CSS-overgangen doen de rest. Er zit dus geen
   animatiebibliotheek in de pagina.

   Contrast nagemeten tegen de lichtste toon die het doek kan aannemen
   (#434D50), niet tegen het paneel, want het paneel is doorzichtig:
   wit op 0,70 dekking 4,76:1 · wit vol 7,72:1 · #A9D4DA vol 5,43:1
   inkt #10333A op de actieve chip #A9D4DA 8,43:1
   Daarom stopt de vervaging bij 0,70 en niet bij 0,25 zoals in het origineel. */
.diensten {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--lijn);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 12, 12, 0.42), rgba(10, 12, 12, 0.22));
}
@media (min-width: 900px) { .diensten { grid-template-columns: 22rem minmax(0, 1fr); } }

/* Het paneel met de draaiende kolom. De twee verlopen boven en onder laten de
   rijen vervagen op de rand in plaats van ze hard af te knippen. */
.diensten__paneel {
  position: relative; overflow: hidden;
  min-height: 25rem; padding: 1.75rem clamp(1.25rem, 4vw, 2rem);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--lijn);
  /* Uitvloeien met een masker in plaats van twee geschilderde verlopen: het doek
     erachter beweegt en verandert van toon, dus een vast verloopvlak zou er
     naast zitten. Een masker vervaagt naar wat er echt achter ligt. */
  --masker: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: var(--masker);
  mask-image: var(--masker);
}
@media (min-width: 900px) { .diensten__paneel { min-height: 30rem; border-bottom: 0; border-right: 1px solid var(--lijn); place-items: center start; } }

.diensten__lijst { position: relative; list-style: none; margin: 0; padding: 0; width: 100%; height: 3.4rem; }
.dienstrij {
  position: absolute; inset-inline: 0; top: 0; display: flex; justify-content: center;
  /* Bij zes rijen loopt de wikkeling van -3 tot +2, dus het zwaartepunt ligt een
     halve rij boven het midden. De halve rij eronder haalt de kolom terug. */
  transform: translateY(calc((var(--rij) + 0.5) * 3.4rem));
  opacity: var(--dof);
  transition: transform 620ms var(--curve), opacity 620ms var(--curve);
}
@media (min-width: 900px) { .dienstrij { justify-content: flex-start; } }

.chip {
  display: inline-flex; align-items: baseline; gap: 0.85rem;
  padding: 0.7rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--lijn-2); background: transparent; color: var(--inkt);
  font: inherit; font-size: var(--t-s); cursor: pointer; white-space: nowrap;
  transition: background-color 400ms var(--curve), color 400ms var(--curve), border-color 400ms var(--curve);
}
.chip:hover { border-color: var(--inkt); }
.chip__nr { font-size: 0.62rem; letter-spacing: 0.18em; color: var(--merk-licht); font-variant-numeric: tabular-nums; }
.chip__naam { letter-spacing: -0.005em; }
.chip__prijs { font-family: var(--serif); font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--merk-licht); }
.chip[aria-current="true"] { background-color: var(--merk-licht); border-color: var(--merk-licht); color: #10333A; }
.chip[aria-current="true"] .chip__nr,
.chip[aria-current="true"] .chip__prijs { color: #10333A; }

/* De fotostapel. Alleen de actieve kaart is aanwijsbaar; de buren liggen erachter
   en zijn decoratie, dus ze staan ook op aria-hidden. */
.diensten__beeld { display: grid; place-items: center; padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.5rem); }
.diensten__stapel { position: relative; width: 100%; max-width: 24rem; aspect-ratio: 4 / 5; }
.dienstkaart {
  position: absolute; inset: 0; margin: 0; overflow: hidden;
  border-radius: clamp(1rem, 2.5vw, 1.75rem);
  background: #10333A;
  transition: transform 700ms var(--curve), opacity 700ms var(--curve);
  will-change: transform;
}
.dienstkaart img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dienstkaart[data-stand="actief"]  { transform: none; opacity: 1; z-index: 3; }
/* De buren staan op een donkere pagina, dus ze moeten lichter en niet donkerder
   dan de actieve kaart; anders vallen ze weg in de achtergrond en lijkt de
   stapel een zwarte rand. */
.dienstkaart[data-stand="vorig"]   { transform: translateX(-19%) scale(0.86) rotate(-3deg); opacity: 0.55; z-index: 2; pointer-events: none; }
.dienstkaart[data-stand="volgend"] { transform: translateX(19%) scale(0.86) rotate(3deg); opacity: 0.55; z-index: 2; pointer-events: none; }
.dienstkaart[data-stand="weg"]     { transform: scale(0.72); opacity: 0; z-index: 1; pointer-events: none; }
.dienstkaart[data-stand="vorig"] img,
.dienstkaart[data-stand="volgend"] img { filter: grayscale(0.8) brightness(1.05); }

/* De site stijlt elke figcaption als kapitaal-labeltekst (de oog-regel). Dat
   moet hier terug naar gewone lopende tekst, anders staat de hele kaartuitleg
   in hoofdletters met 0,2em letterafstand. */
.dienstkaart__over {
  position: absolute; inset-inline: 0; bottom: 0; padding: 4.5rem 1.4rem 1.4rem;
  background: linear-gradient(0deg, rgba(6, 12, 13, 0.94) 26%, rgba(6, 12, 13, 0.5) 58%, rgba(6, 12, 13, 0));
  display: grid; gap: 0.55rem; justify-items: start;
  font-family: inherit; font-size: inherit; letter-spacing: normal;
  text-transform: none; font-weight: 400; color: var(--licht-grond);
}
.dienstkaart[data-stand="actief"] .dienstkaart__over { opacity: 1; transition: opacity 500ms var(--curve) 120ms; }
.dienstkaart:not([data-stand="actief"]) .dienstkaart__over { opacity: 0; transition: opacity 200ms linear; }
.dienstkaart__pil {
  margin: 0; padding: 0.32rem 0.8rem; border-radius: 999px; font-weight: 500;
  background: var(--merk-licht); color: #10333A;
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.dienstkaart__tekst { margin: 0; color: #F4F1EC; font-size: var(--t-s); line-height: 1.5; }
.dienstkaart__maten { margin: 0; color: #C6C2BB; font-size: var(--t-xs); line-height: 1.5; font-variant-numeric: tabular-nums; }

.diensten__pauze { top: auto; bottom: 0.9rem; right: 0.9rem; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  /* Geen automatisch wisselen en geen beweging: de kolom wordt een gewone lijst
     en de stapel toont alleen de actieve kaart. Klikken werkt gewoon door. */
  .diensten__lijst { height: auto; display: grid; gap: 0.5rem; }
  .dienstrij { position: static; transform: none; opacity: 1; }
  .diensten__paneel { -webkit-mask-image: none; mask-image: none; min-height: 0; }
  .dienstrij, .chip, .dienstkaart { transition: none; }
  .dienstkaart:not([data-stand="actief"]) { display: none; }
  .diensten__pauze { display: none; }
}

/* ── Scroll-verhaal: Foto, prijs, klaar ────────────────────────────────────
   Zelfde component als op de ALSA-site. De lijn tekent zichzelf met het
   scrollen mee, een puntje reist eroverheen en elke stap licht op zodra je hem
   bereikt. Hier op het donkere zijdedoek, dus de lijn en de stippen in het
   lichte merkteal en de tekst in de gewone ivoor- en zachttonen van de site.
   Contrast tegen de lichtste doektoon #434D50: #A9D4DA 5,43:1, #F4F1EC 7,72:1,
   #C6C2BB is de bestaande --zacht van de site. */
.flow-track {
  --flow-accent: #A9D4DA;
  --flow-accent-glow: rgba(169, 212, 218, 0.45);
  --flow-text: #F4F1EC;
  --flow-text-dim: #C6C2BB;
  position: relative; z-index: 1; overflow: hidden;
}
.flow-scroll-inner { position: relative; width: 100%; height: 100%; }
#flowTrailSvg { position: absolute; inset: 0; display: block; pointer-events: none; }
#flowTrailPath { fill: none; stroke: var(--flow-accent); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
#flowMovingDot { fill: var(--flow-accent); filter: drop-shadow(0 2px 8px var(--flow-accent-glow)); }

.flow-big-dot {
  position: absolute; width: 38px; height: 38px; transform: translate(-50%, -50%);
  background: var(--flow-accent); border-radius: 999px; pointer-events: none;
  transition: box-shadow .5s ease-out, background-color .5s ease-out;
}
.flow-big-dot.active {
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--flow-accent) 22%, transparent),
              0 0 0 22px color-mix(in srgb, var(--flow-accent) 10%, transparent);
}
/* Voorbij = afgehandeld. Op ALSA werd dat groen; KB heeft geen groen, dus hier
   wordt een afgehandelde stip ivoor en blijft de huidige in het teal staan. */
.flow-big-dot.gedaan { background: var(--flow-text); }

.flow-stappen { position: static; list-style: none; margin: 0; padding: 0; }
.flow-dot-text {
  position: absolute; max-width: 17rem; opacity: 0;
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform; pointer-events: none;
}
.flow-dot-text.left-anchor  { transform: translateY(-50%) translateY(12px); }
.flow-dot-text.right-anchor { transform: translate(-100%, -50%) translateY(12px); text-align: right; }
.flow-dot-text.center-below { transform: translateX(-50%) translateY(12px); text-align: center; }
.flow-dot-text.center-above { transform: translate(-50%, -100%) translateY(-12px); text-align: center; }
.flow-dot-text.show.left-anchor  { opacity: 1; transform: translateY(-50%) translateY(0); }
.flow-dot-text.show.right-anchor { opacity: 1; transform: translate(-100%, -50%) translateY(0); }
.flow-dot-text.show.center-below { opacity: 1; transform: translateX(-50%) translateY(0); }
.flow-dot-text.show.center-above { opacity: 1; transform: translate(-50%, -100%) translateY(0); }

.flow-dot-num {
  display: inline-block; margin: 0 0 0.5rem;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--flow-accent);
}
.flow-dot-title {
  margin: 0 0 0.45rem; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.05; letter-spacing: -0.005em;
  color: var(--flow-text);
}
.flow-dot-desc { margin: 0; font-size: var(--t-s); line-height: 1.55; color: var(--flow-text-dim); }

.flow-cta {
  position: absolute; z-index: 2; text-align: center;
  opacity: 0; transform: translateX(-50%) translateY(16px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.flow-cta.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Het blok staat absoluut met alleen een linkerpositie, dus het krimpt tot de
   smalste breedte die past en de knop brak op 375 px over twee regels. */
.flow-cta { width: max-content; }
.flow-cta .knop { white-space: nowrap; }

@media (max-width: 768px) {
  .flow-big-dot { width: 28px; height: 28px; }
  .flow-dot-text { max-width: 12.5rem; }
  .flow-dot-title { font-size: 1.45rem; }
  #flowTrailPath { stroke-width: 8; }
}

/* ── Profielkaart: Karim ───────────────────────────────────────────────────
   Vorm van een React-profielkaart-carrousel, nagebouwd zonder React: vierkante
   foto links, een kaart die er 5rem overheen valt, pijlen en stippen eronder.
   Op mobiel foto boven, tekst gecentreerd eronder zonder kaartvlak.
   De kaart is dekkend (#1C2224, de bestaande kleur van het onboardvenster), want
   hij valt deels over de foto en een doorzichtige kaart zou de tekst op wisselend
   beeld zetten. Contrast: #F4F1EC op #1C2224 ruim boven 12:1; de rolregel in
   #A9D4DA haalt ook op het kale doek (mobiel) 5,43:1. */
.profiel {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
  max-width: 64rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}
.profiel__foto {
  position: relative; display: grid; width: 100%; max-width: 24rem; aspect-ratio: 1 / 1;
  border-radius: 1.5rem; overflow: hidden; background: #10333A;
}
.profiel__beeld {
  grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity 400ms ease-in-out;
}
.profiel__beeld[data-stand="weg"] { opacity: 0; }

.profiel__kaart { margin-top: 1.75rem; padding-inline: 1rem; text-align: center; max-width: 30rem; }
.profiel__naam {
  margin: 0 0 0.55rem; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1; color: #F4F1EC;
}
/* De dia's liggen op elkaar in één rastercel, zodat de kaart zo hoog is als de
   langste tekst en niet verspringt bij het wisselen. */
.profiel__wissel { display: grid; }
.profiel__dia { grid-area: 1 / 1; transition: opacity 260ms ease-in-out; }
.profiel__dia[data-stand="uit"] { opacity: 0; }
.profiel__dia[data-stand="weg"] { opacity: 0; visibility: hidden; }
.profiel__rol { margin: 0 0 1.1rem; font-size: 0.82rem; letter-spacing: 0.01em; color: var(--merk-licht); }
.profiel__tekst { margin: 0; font-size: 1.02rem; line-height: 1.65; color: #F4F1EC; }
.profiel__tekst p { margin: 0; }
.profiel q { quotes: '\201C' '\201D'; }

.profiel__kanalen { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; justify-content: center; gap: 0.85rem; }
.profiel__kanaal {
  width: 3rem; height: 3rem; border-radius: 999px; display: grid; place-items: center;
  background: #F4F1EC; color: #10333A; text-decoration: none;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}
.profiel__kanaal:hover { background: var(--merk-licht); transform: scale(1.05); }
.profiel__kanaal:focus-visible { outline: 2px solid var(--merk-licht); outline-offset: 3px; }
.profiel__kanaal svg { width: 1.25rem; height: 1.25rem; }

.profiel__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.profiel__pijl {
  width: 3rem; height: 3rem; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: #1C2224; color: #F4F1EC; border: 1px solid var(--lijn-2);
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.profiel__pijl:hover { border-color: #F4F1EC; }
.profiel__pijl:focus-visible { outline: 2px solid var(--merk-licht); outline-offset: 3px; }
.profiel__pijl svg { width: 1.4rem; height: 1.4rem; }
/* Stippen: raakvlak 24px, zichtbare stip 10px. Een ring in plaats van een
   halfdoorzichtige vulling, zodat ook de niet-actieve stip 3:1 haalt tegen het
   doek; de actieve is gevuld. */
.profiel__stippen { display: flex; gap: 0.2rem; }
.profiel__stip { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.profiel__stip::before { content: ''; width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid #F4F1EC; transition: background-color 200ms ease-out; }
.profiel__stip[aria-current="true"]::before { background: #F4F1EC; }
.profiel__stip:focus-visible { outline: 2px solid var(--merk-licht); outline-offset: 1px; border-radius: 999px; }

@media (min-width: 768px) {
  .profiel { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; }
  .profiel__foto { width: clamp(19rem, 40vw, 29.375rem); max-width: none; }
  .profiel__kaart {
    position: relative; z-index: 1; margin: 0 0 0 -5rem; max-width: 36rem; text-align: left;
    padding: 2rem 2.25rem; background: #1C2224; border: 1px solid var(--lijn); border-radius: 1.5rem;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.65);
  }
  .profiel__naam { font-size: 2.5rem; }
  .profiel__kanalen { justify-content: flex-start; margin-top: 2rem; }
  .profiel__nav { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .profiel__beeld, .profiel__dia, .profiel__kanaal, .profiel__stip::before { transition: none; }
  .profiel__kanaal:hover { transform: none; }
}

/* ── Waar je op kunt rekenen: het doos-component ────────────────────────────
   Overgenomen van viralconversions.io (BUCKET STACK in de sectie "Wat er
   standaard in jouw website zit"). Zelfde SVG-doos van 655x352, zelfde lagen en
   dezelfde keyframes: de chip hangt boven de opening, zakt bij wisselen achter
   het doosvlak (z 15) weg en de volgende valt er van boven in.
   Kleuren naar KB: het glas en de vlakken zijn getint met het lichte merkteal
   in plaats van wit, en de chip is bijna dekkend (#1C2224) zodat de tekst erop
   een vaste achtergrond heeft en niet op het bewegende doek staat.
   Contrast: #A9D4DA op #1C2224 ruim 9:1, #F4F1EC op #1C2224 ruim 12:1, de
   omschrijving in --zacht #C6C2BB is de bestaande tekstkleur van de site. */
.kist { margin-top: clamp(4rem, 8vw, 6rem); }
.kist__kop { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.05; color: #F4F1EC; }

/* Zonder JS: gewoon de vijf regels. */
.kist__lijst { list-style: none; padding: 0; margin: 2rem auto 0; max-width: 34rem; text-align: left; }
.kist__lijst li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.9rem; padding: 0.9rem 0; border-top: 1px solid var(--lijn); }
.kist__lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.kist__lijst .kist__icoon { grid-row: span 2; color: var(--merk-licht); padding-top: 0.15rem; }
.kist__lijst .kist__icoon svg { width: 1.2rem; height: 1.2rem; }
.kist__titel { margin: 0; font-weight: 600; color: #F4F1EC; font-size: var(--t-s); }
.kist__tekst { margin: 0.2rem 0 0; font-size: var(--t-s); color: var(--zacht); line-height: 1.55; }

.kist__podium { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.kist__podium[hidden] { display: none; }
.kist__toneel {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 655 / 352;
  margin-top: 3.25rem; isolation: isolate;
}
.kist__lijf {
  position: absolute; left: 18.9%; right: 18.2%; top: 22.4%; bottom: 0; z-index: 15;
  border-radius: 0 0 16px 16px;
  background: rgba(169, 212, 218, 0.06);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(169, 212, 218, 0.22); border-top: none;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
}
.kist__achter, .kist__voor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.kist__achter { z-index: 2; }
.kist__voor { z-index: 20; }
.kist__vleugel { fill: rgba(169, 212, 218, 0.30); }
.kist__rand    { fill: rgba(169, 212, 218, 0.18); }
.kist__vouw    { fill: rgba(169, 212, 218, 0.14); }
.kist__plank   { fill: rgba(169, 212, 218, 0.28); }

.kist__chiprail { position: absolute; top: -8%; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; pointer-events: none; }
.kist__chip {
  display: flex; align-items: center; gap: 0.75rem; text-align: left;
  width: min(260px, 72%); padding: 8px 20px 8px 8px; border-radius: 999px;
  background: rgba(28, 34, 36, 0.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(244, 241, 236, 0.24);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform-origin: bottom center;
}
/* Pas verborgen als JS draait: dan speelt de intrede zodra het blok in beeld komt. */
.kist[data-kist-js] .kist__chip { opacity: 0; transform: translateY(-90px) scale(0.8); }
/* Rustpositie als eigen stand, niet alleen als eindframe van de animatie. Zonder
   deze regel hangt de zichtbaarheid aan animation-fill-mode: forwards, en valt de
   chip terug naar onzichtbaar zodra iets de animatie stopt. Nagemeten: na een
   harnasmeting stond hij zo op opacity 0 tot er geklikt werd. */
.kist[data-kist-js] .kist__chip.is-binnen { opacity: 1; transform: translateY(0) scale(1.1); }
.kist__chipicoon {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(169, 212, 218, 0.14); border: 1px solid rgba(169, 212, 218, 0.38); color: var(--merk-licht);
}
.kist__chipicoon svg { width: 18px; height: 18px; }
.kist__chiptekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.kist__nr { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--merk-licht); }
.kist__chiptitel { font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: #F4F1EC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kist__info { max-width: 30rem; transition: opacity 280ms; }
.kist__info.is-weg { opacity: 0; }
.kist__infotitel { margin: 0 0 0.45rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.1; color: #F4F1EC; }
.kist__infotekst { margin: 0; font-size: var(--t-s); line-height: 1.6; color: var(--zacht); }

.kist__bediening { display: flex; align-items: center; gap: 1.25rem; }
.kist__pijl {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: rgba(28, 34, 36, 0.85); color: #F4F1EC; border: 1px solid var(--lijn-2);
  transition: border-color 180ms ease-out, transform 200ms ease-out;
}
.kist__pijl:hover { border-color: #F4F1EC; transform: scale(1.08); }
.kist__pijl:active { transform: scale(0.95); }
.kist__pijl:focus-visible { outline: 2px solid var(--merk-licht); outline-offset: 3px; }
.kist__pijl svg { width: 1.1rem; height: 1.1rem; }
/* Raakvlak 24px, zichtbare stip 8px; de actieve groeit en kleurt teal. */
.kist__stippen { display: flex; gap: 0.1rem; }
.kist__stip { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.kist__stip::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgba(244, 241, 236, 0.45); transition: background-color 250ms, transform 250ms; }
.kist__stip[aria-current="true"]::before { background: var(--merk-licht); transform: scale(1.4); }
.kist__stip:focus-visible { outline: 2px solid var(--merk-licht); outline-offset: 1px; border-radius: 999px; }

@keyframes kistIn {
  0%   { transform: translateY(-90px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1.1);     opacity: 1; }
}
@keyframes kistUit {
  0%   { transform: translateY(0) scale(1.1);     opacity: 1; }
  100% { transform: translateY(130px) scale(0.85); opacity: 0; }
}

@media (max-width: 768px) {
  .kist__toneel { max-width: 340px; }
  .kist__chip { width: min(240px, 70vw); }
  .kist__lijf, .kist__chip { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .kist[data-kist-js] .kist__chip { animation: none !important; opacity: 1; transform: none; }
  .kist__info, .kist__pijl, .kist__stip::before { transition: none; }
}

/* ── Probleem: foto links, tekst rechts ────────────────────────────────────
   Op mobiel onder elkaar, kop eerst (de opmaakvolgorde). Vanaf 900px zet het
   raster de emmerfoto in de linkerkolom en de tekst ernaast, links uitgelijnd
   en verticaal gecentreerd op de foto. De foto houdt zijn staande 3:4 van
   eerder en wordt nooit breder dan 30rem, anders duwt hij de kop onder de vouw. */
.schurk-rij { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
.schurk-rij__tekst { text-align: center; }
.schurk-rij__tekst .lead { margin-inline: auto; }
.schurk-rij__beeld { margin: 0; width: min(26rem, 100%); justify-self: center; }
.schurk-rij__beeld img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.schurk-rij__beeld figcaption { margin-top: 1rem; text-align: center; }
@media (min-width: 900px) {
  .schurk-rij {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "beeld tekst";
    gap: clamp(3rem, 7vw, 7rem);
  }
  .schurk-rij__beeld { grid-area: beeld; width: 100%; max-width: 30rem; justify-self: start; }
  .schurk-rij__tekst { grid-area: tekst; text-align: left; }
  .schurk-rij__tekst .lead { margin-inline: 0; }
}

/* ═══ Ritme en passen in beeld (ronde "elke sectie in het scherm") ═══════════
   Gemeten vóór deze ronde, met het schuifeffect in rust, op 1440x900, 1280x800,
   1180x820, 820x1180, 390x844 en 375x812: de ruimte tussen twee blokken liep
   op desktop uiteen van 86 tot 358px, en de hero, "Als nieuw", de
   dienstencarrousel en contact waren op de meeste schermen hoger dan wat er
   onder de kopbalk (en op telefoon boven de actiebalk) overblijft.

   Twee maten voor de hele pagina:
   --blokruimte  tussen twee blokken, of ze nu in dezelfde sectie staan of niet.
   --kopruimte   van een kop met zijn lead naar het component eronder.

   De zichtbare ruimte tussen twee secties is padding-bottom + padding-top min
   de lift van .schuif. Met beide paddings op (blokruimte + lift) / 2 is die
   ruimte precies de blokruimte. Voorwaarde uit het skelet: padding-bottom mag
   niet onder lift + 1,25rem, anders schuift de volgende sectie over de inhoud.
   Daarom is de blokruimte per breakpoint minstens lift + 2,5rem:
     < 600    lift 38  blokruimte 80   padding 59
     600-899  lift 54  blokruimte 104  padding 79
     900-1199 lift 66  blokruimte 112  padding 89
     >= 1200  lift 74  blokruimte 120  padding 97
   Alle vier de paddings zijn hele pixels. */
:root { --blokruimte: 5rem; --kopruimte: clamp(2rem, 4vw, 3rem); --kopbalk-h: 70px; --actiebalk-h: 0px; }
@media (min-width: 600px)  { :root { --blokruimte: 6.5rem; } }
@media (min-width: 900px)  { :root { --blokruimte: 7rem; } }
@media (min-width: 1200px) { :root { --blokruimte: 7.5rem; } }
/* Gemeten hoogtes van de vaste balken: kopbalk 70px, onder 720px 59px, en
   daar komt de actiebalk van 67px onderin bij. */
@media (max-width: 720px)  { :root { --kopbalk-h: 59px; --actiebalk-h: 67px; } }

.sectie:not(.sectie--hero) {
  padding-top: calc((var(--blokruimte) + var(--lift)) / 2);
  padding-bottom: calc((var(--blokruimte) + var(--lift)) / 2);
}
.voet { padding-top: calc((var(--blokruimte) + var(--lift)) / 2); }
/* Zonder beweging is er geen lift-overlap, dus dan is de padding de helft. */
@media (prefers-reduced-motion: reduce) {
  .sectie:not(.sectie--hero) { padding-top: calc(var(--blokruimte) / 2); padding-bottom: calc(var(--blokruimte) / 2); }
  .voet { padding-top: calc(var(--blokruimte) / 2); }
}

/* Blokken die binnen een sectie op een ander volgen: dezelfde blokruimte. */
.fotobaan { margin-top: var(--blokruimte); }
#tarieven { margin-top: var(--blokruimte); }
.kist { margin-top: var(--blokruimte); }
/* De reviewkop is sinds het weghalen van "Zelf schuiven" het eerste blok van
   zijn sectie; zijn eigen margin kwam bovenop de sectiepadding (358px gat). */
.reviews__kop { margin-top: 0; }
/* De kleine lettertjes en de knop horen bij de carrousel erboven, niet bij een
   nieuw blok. Ze droegen dezelfde .menu-klasse en kregen zo 112px erboven. */
.blad[data-verify="prijzen.vanaf"] + .menu { margin-top: 1.5rem; }
.blad[data-verify="prijzen.vanaf"] + .menu .knoppen { margin-top: 1.25rem; }

/* Van kop naar component: overal dezelfde maat. */
.profiel, .diensten, .strook--kaarten, .schurk-rij { margin-top: var(--kopruimte); }
.schurk-rij { gap: var(--kopruimte); }
.vergelijkers { margin-top: var(--kopruimte); }

/* ── Hero: precies onder de kopbalk, en op telefoon boven de actiebalk ── */
.sectie--hero {
  min-height: calc(100svh - var(--kopbalk-h) - var(--actiebalk-h));
  padding-top: clamp(2.5rem, 7vh, 5.5rem);
  padding-bottom: max(clamp(2.5rem, 7vh, 5.5rem), calc(var(--lift) + 1.25rem));
}
/* De kop schaalt ook met de hoogte, zodat hij op een laptop van 800px hoog
   niet de helft van het scherm opeet. */
#h-hero { font-size: clamp(3.4rem, min(10vw, 11vh), 8rem); }
.sectie--hero .regel { margin-top: clamp(2rem, 5vh, 4.5rem); }

/* ── Als nieuw: vanaf 1024px tekst links, schuif rechts ──
   Zigzag met het blok eronder, waar de foto links staat. */
.alsnieuw-rij__tekst { text-align: center; }
.alsnieuw-rij__tekst h2, .alsnieuw-rij__tekst .lead { margin-inline: auto; }
@media (min-width: 1024px) {
  .alsnieuw-rij {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 6vw, 6rem); align-items: center;
  }
  .alsnieuw-rij__tekst { text-align: left; }
  .alsnieuw-rij__tekst h2, .alsnieuw-rij__tekst .lead { margin-inline: 0; }
  .alsnieuw-rij .vergelijkers { margin-top: 0; }
  .alsnieuw-rij .vergelijkers .vergelijker { max-width: none; }
}

/* ── Wat je niet ziet: op telefoon een kleinere foto ── */
@media (max-width: 599px) {
  .schurk-rij__beeld { width: min(17rem, 78vw); }
}

/* ── Karim ── */
@media (min-width: 768px) {
  /* Ook de schermhoogte begrenst de foto; op 1280x800 was het blok 19px te hoog. */
  .profiel__foto { width: clamp(18rem, min(40vw, calc(100svh - 25rem)), 29.375rem); }
}
@media (max-width: 767px) {
  .profiel__foto { max-width: 13rem; }
  .profiel__kaart { margin-top: 1.25rem; }
  .profiel__naam { font-size: 2rem; margin-bottom: 0.35rem; }
  .profiel__rol { margin-bottom: 0.75rem; }
  .profiel__tekst { font-size: 0.95rem; line-height: 1.55; }
  /* Op telefoon bepaalt de actieve dia de hoogte, zodat de knoppen direct onder
     de tekst staan in plaats van onder de langste tekst van de vier. De dia die
     net weggaat blijft tijdens zijn uitfade in de flow, anders klapt de kaart
     260ms dicht en springen de knoppen twee keer. */
  .profiel__wissel { display: block; position: relative; }
  .profiel__dia { grid-area: auto; }
  .profiel__dia:not([data-stand="aan"]):not([data-stand="uit"]) { position: absolute; inset: 0 0 auto 0; }
  .profiel__kanalen { margin-top: 1.1rem; }
  .profiel__nav { margin-top: 1.25rem; }
}

/* ── Dienstencarrousel ── */
@media (min-width: 900px) {
  .diensten { grid-template-columns: 20rem minmax(0, 1fr); }
  .diensten__paneel { min-height: 24rem; }
  .diensten__beeld { padding: 1.75rem 2rem; }
  /* De fotostapel rekent terug vanaf de schermhoogte: kop, lead, kleine
     lettertjes en knop moeten er samen met de carrousel onder passen. */
  .diensten__stapel { max-width: min(24rem, calc((100svh - 27rem) * 0.8)); }
  #tarieven .lead { max-width: 56ch; }
  .blad[data-verify="prijzen.vanaf"] + .menu .fijn { max-width: 60rem; }
}
/* Onder 900px wordt de draaiende kolom een horizontale rij chips. De kolom nam
   daar 400px hoogte in; de rij 60px. main.js schuift de actieve chip in beeld. */
@media (max-width: 899px) {
  .diensten__paneel {
    min-height: 0; padding: 0.9rem 0; display: block;
    --masker: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .diensten__lijst {
    height: auto; display: flex; gap: 0.5rem; overflow-x: auto;
    scroll-snap-type: x proximity; padding: 0.25rem 1.25rem; scrollbar-width: none;
  }
  .diensten__lijst::-webkit-scrollbar { display: none; }
  .dienstrij { position: static; transform: none; opacity: 1; flex: 0 0 auto; scroll-snap-align: center; }
  .diensten__beeld { padding: 1.25rem 1.25rem 1.5rem; }
  .diensten__stapel { max-width: min(16.5rem, 72vw); }
}

/* ── Contact: vanaf 1024px de oproep links, de vragen rechts ── */
@media (min-width: 1024px) {
  .contact-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .contact-rij__cta { text-align: left; }
  .contact-rij__cta h2, .contact-rij__cta .lead { margin-inline: 0; }
  .contact-rij__cta .knoppen { justify-content: flex-start; }
  .contact-rij .faq { margin-top: 0; }
}
.contact-rij .faq { margin-top: var(--kopruimte); }
@media (max-width: 599px) {
  .faq summary { font-size: 1.15rem; padding: 0.85rem 0; }
}

/* ── Correcties na de eerste meting op de kopie ── */
/* De schurk-rij is het eerste blok van zijn sectie; met de kopruimte erbovenop
   werd het gat naar "Als nieuw" 168 in plaats van 120. */
.schurk-rij { margin-top: 0; }
/* De voet heeft een lijn aan zijn bovenrand. Met symmetrische padding kwam die
   23px onder de laatste vraag. Nu hangt hij in het midden van de blokruimte. */
#contact { padding-bottom: calc(var(--blokruimte) / 2 + var(--lift)); }
.voet { padding-top: calc(var(--blokruimte) / 2); }
@media (prefers-reduced-motion: reduce) { #contact { padding-bottom: calc(var(--blokruimte) / 2); } }

/* Spooktekst in de doos: .kist__info kromp als flex-item mee met zijn inhoud.
   Van afspraak 2 naar 5 werd hij 65,6px smaller, en de gemelde restjes ("Bij ee",
   "land.") vallen precies in oude box min nieuwe box. Met een vaste breedte is
   de oude box altijd gelijk aan de nieuwe, dus valt er nooit meer oude tekst
   buiten het vlak dat opnieuw getekend wordt. */
.kist__info { width: 100%; }

/* Diensten: de fotostapel rekent met 2,5rem meer vaste inhoud, zodat het hele
   blok op 1280x800, 1440x900 en 1180x820 onder de kopbalk past. */
@media (min-width: 900px) {
  .diensten__stapel { max-width: min(24rem, calc((100svh - 29.5rem) * 0.8)); }
}
/* Telefoon: de knop "Vraag je prijs aan" onder de kleine lettertjes staat daar al
   vast in de actiebalk onderin, dus hier valt hij weg. Scheelt 78px. */
@media (max-width: 720px) {
  .blad[data-verify="prijzen.vanaf"] + .menu .knoppen { display: none; }
  .diensten__stapel { max-width: min(15rem, 66vw); }
  .diensten__beeld { padding: 1rem 1rem 1.25rem; }
  .blad[data-verify="prijzen.vanaf"] + .menu { margin-top: 1rem; }
  .blad[data-verify="prijzen.vanaf"] + .menu .fijn { margin-top: 0; }
}
/* Contact op telefoon: iets strakkere vragenlijst, 36px te hoog op 375x812. */
@media (max-width: 599px) {
  .faq summary { font-size: 1.1rem; padding: 0.7rem 0; }
  .contact-rij .faq { margin-top: 1.5rem; }
}

/* ── Uit de visuele keuring (desktop, iPad, telefoon, ritme) ── */

/* Karim: op alle breedtes bepaalt de actieve dia de hoogte van de kaart, niet
   de langste van de vier. Op desktop en iPad zat er anders 90px leegte tussen
   tekst en knoppen. Naast de foto is de rij zo hoog als de foto, dus een kaart
   die meegroeit of krimpt duwt daar niets weg. De dia die weggaat blijft tijdens
   zijn uitfade in de flow; er staan er dus nooit twee tegelijk in. */
.profiel__wissel { display: block; position: relative; }
.profiel__dia { grid-area: auto; }
.profiel__dia:not([data-stand="aan"]):not([data-stand="uit"]) { position: absolute; inset: 0 0 auto 0; }

/* Als nieuw schuift met de lift over de hero-video, en die heeft een harde
   onderrand. Met de gewone padding kwam de kop maar 23px onder die rand. */
#succes { padding-top: calc(var(--blokruimte) + var(--lift)); }
@media (prefers-reduced-motion: reduce) { #succes { padding-top: var(--blokruimte); } }

/* Voet: address rekte uit tot de rijhoogte van het logo en de onderstreping van
   de links hing daardoor 55px onder de tekst. Alles bovenaan uitgelijnd. */
.voet__raster { align-items: start; }
.voet address { align-self: start; align-items: flex-start; }
@media (max-width: 720px) {
  /* De laatste voetregel moet vrij boven de actiebalk blijven. */
  .voet { padding-bottom: calc(var(--blokruimte) / 2 + var(--actiebalk-h) + 1rem); }
}

/* Het bovenschrift in een gecentreerd blok stond op zijn eigen smalle breedte
   links, terwijl de kop wel in het midden stond. */
.midden .oog { margin-inline: auto; }
.contact-rij__cta.midden .fijn { margin-inline: auto; }
@media (min-width: 1024px) { .contact-rij__cta.midden .fijn { margin-inline: 0; } }

/* Actiebalk op telefoon: de stille WhatsApp-knop had donkere tekst op de donkere
   balk en was vrijwel onleesbaar. */
.actiebalk .knop--stil { color: #F4F1EC; border-color: rgba(244, 241, 236, 0.36); background-color: transparent; }

/* Geen losse weeswoorden op de laatste regel. */
.lead, .profiel__tekst, .kist__infotekst, .flow-dot-desc, .dienstkaart__tekst { text-wrap: pretty; }

/* Doos op telefoon: twee regels vast gereserveerd, zodat pijlen en stippen niet
   22px op en neer springen tussen afspraken van een en twee regels. Op desktop
   past elke omschrijving op een regel, daar is het niet nodig. */
@media (max-width: 767px) { .kist__infotekst { min-height: calc(2 * 1.6 * var(--t-s)); } }

/* Reviewband op telefoon: aan beide kanten tot de rand, pauzeknop onder de band
   in plaats van in een eigen lege strook rechts. */
@media (max-width: 720px) {
  .strook--kaarten .strook__venster { margin-right: 0; }
  .strook--kaarten { padding-bottom: 2.75rem; }
  .strook--kaarten .strook__pauze { top: auto; bottom: 0; right: var(--rand); transform: none; }
}

/* Diensten op het kleinste telefoonscherm (375x812): 2px te hoog. Een iets
   smallere kaart haalt het binnen, met de 4:5 van de foto intact. */
@media (max-width: 399px) { .diensten__stapel { max-width: 14.25rem; } }

/* Hero-feitenregel: "geen reiskosten vanaf € 50" breekt als geheel, zodat op
   telefoon niet "€ 50" alleen op een eigen regel komt te staan. */
.regel .heel { white-space: nowrap; }

/* ── Uit de adversariele controle van de kopie ── */

/* Contact: de basisregel met de kopruimte stond na de mediaquery en won altijd,
   waardoor de vragen 48px lager hingen dan de kop. Hier nogmaals, als laatste. */
@media (min-width: 1024px) { .contact-rij .faq { margin-top: 0; } }

/* Diensten: de knop onder de kleine lettertjes stond links onder een gecentreerd
   blok (de p mist .midden). */
.blad[data-verify="prijzen.vanaf"] + .menu .knoppen { justify-content: center; }
/* Op lage desktops werd de 4:5-kaart zo smal (262px op 1280x800) dat de tekst de
   foto vrijwel afdekte. Vanaf 900px een vierkante kaart: even hoog als eerst,
   maar breder, dus minder regels over de foto. Op 1440x900 levert dat ook
   ademruimte onder de knop op in plaats van 1px. */
@media (min-width: 900px) {
  .diensten__stapel { aspect-ratio: 1 / 1; max-width: min(24rem, calc(100svh - 29.5rem)); }
}

/* Doos: de kop was een maat kleiner dan alle andere blokkoppen en stond met
   ongeveer 30px te dicht op de chip. Nu dezelfde koppenmaat, en dezelfde
   kopruimte tot de bovenkant van de chip (die hangt 8% boven het toneel uit). */
.kist__kop { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1; font-weight: 300; }
.kist__toneel { margin-top: calc(var(--kopruimte) + 1.25rem); }

/* Karim: foto plus kaart stonden als groep links van de middenas waarop de kop
   en de pijlen staan. Kolommen op hun eigen breedte, groep in het midden. */
@media (min-width: 768px) {
  .profiel { grid-template-columns: auto minmax(0, 36rem); justify-content: center; }
}

/* Als nieuw: de kop brak in de linkerkolom over vier regels. Iets bredere
   tekstkolom en een gebalanceerde kop van hooguit 3,8rem: twee a drie regels. */
@media (min-width: 1024px) {
  .alsnieuw-rij { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .alsnieuw-rij__tekst h2 { font-size: clamp(2.5rem, 4.2vw, 3.8rem); text-wrap: balance; }
}

/* Schuifgreep: de knop van 48px liep in de greep van 3px naar rechts over en was
   een leeg vierkant. Nu op de lijn gecentreerd, met twee pijltjes. */
.vergelijkers .vergelijker__knop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; color: #10333A; font-size: 1rem; line-height: 1;
}
.vergelijkers .vergelijker__knop::before { content: '\2039\00a0\203A'; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 600; }

/* ── Tweede controleronde: telefoon en iPad ── */

/* Karim onder 1024px: gestapeld, zoals op telefoon. Op iPad staand waren kaart en
   foto bijna maar net niet even hoog (7 en 8px verschil), wat als een fout oogde. */
@media (min-width: 768px) and (max-width: 1023px) {
  .profiel { grid-template-columns: minmax(0, 1fr); justify-items: center; justify-content: normal; }
  .profiel__foto { width: 100%; max-width: 16rem; }
  .profiel__kaart {
    margin: 1.25rem 0 0; max-width: 34rem; padding: 0 1rem; text-align: center;
    background: none; border: 0; box-shadow: none;
  }
  .profiel__kanalen { justify-content: center; }
  .profiel__nav { grid-column: auto; }
}
/* Onder 1024px staan pijlen en stippen direct onder de foto. De foto heeft een
   vaste hoogte, dus de pijlen staan stil, terwijl de kaart eronder met de tekst
   meegroeit en de knoppen direct onder de tekst blijven. Eerder zakten de pijlen
   47 tot 70px mee en stond de Facebook-knop precies waar "volgende" had gestaan:
   drie keer tikken gaf Volgende, Facebook, Facebook. */
@media (max-width: 1023px) {
  .profiel__foto { order: 1; }
  .profiel__nav { order: 2; margin-top: 1rem; }
  .profiel__kaart { order: 3; }
}
/* Kleinste telefoons: met de langste review (Tamara, 198px) was het blok 709px
   tegen 686 beschikbaar. */
@media (max-width: 399px) {
  .profiel__foto { max-width: 11.5rem; }
  .profiel__tekst { font-size: 0.92rem; }
}

/* Hero-feitenregel: elk item gecentreerd, ook als het over twee regels breekt. */
.sectie--hero .regel > span { text-align: center; }

/* Scrollverhaal: stippen die de lijn nog niet bereikt heeft gedimd, zodat er in
   rust geen losse stip in een leeg vlak lijkt te zweven. */
.flow-big-dot { transition: box-shadow .5s ease-out, background-color .5s ease-out, opacity .5s ease-out; }
.flow-big-dot:not(.active) { opacity: 0.35; }

/* Chiprij: iets sterkere vervaging aan beide randen. */
@media (max-width: 899px) {
  .diensten__paneel { --masker: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
}

/* ── Eindcontrole ── */
/* Knoppenalinea's: de skeletregel p { max-width: 62ch } maakte ze smaller dan hun
   blok, waardoor gecentreerde knoppen 12px links van de as stonden (hero en
   diensten). */
.knoppen { max-width: none; }
/* Kleine lettertjes onder de diensten: geen los "foto's." op de tweede regel. */
.menu .fijn { text-wrap: balance; }
/* Karim naast elkaar: de kaart valt 5rem over de foto, dus de zichtbare groep is
   5rem smaller dan de kolommen en stond 40px links van de as van kop en pijlen.
   Foto en kaart samen een halve overlap naar rechts; de pijlen blijven staan. */
@media (min-width: 1024px) {
  .profiel__foto, .profiel__kaart { translate: 2.5rem 0; }
}
/* Als nieuw gestapeld (onder 1024px): de kop liep op iPad staand over bijna de
   volle breedte op een regel. Nu twee gebalanceerde regels. */
@media (max-width: 1023px) { .alsnieuw-rij__tekst h2 { max-width: 20ch; text-wrap: balance; } }

/* ── Hero: wisselend woord ───────────────────────────────────────────────────
   Nagebouwd naar een React-component (text-dia met motion): het woord komt
   van onder in beeld met een vervaging die wegtrekt, en gaat er boven weer uit.
   Twee bewuste afwijkingen van het origineel:
   1. Geen regenboogverloop (blauw, oranje, roze, paars) via background-clip:
      dat botst met het palet van KB. Het woord staat in het lichte merkteal
      #A9D4DA, dat op de donkere hero 5,4:1 haalt tegen de lichtste doektoon.
   2. Geen breedte die per woord verspringt. Alle woorden liggen in dezelfde
      rastercel, dus het vak is zo breed als het langste woord en de gecentreerde
      kop schuift niet heen en weer. */
.dia { display: inline-grid; vertical-align: bottom; overflow: hidden; color: var(--merk-licht); padding-bottom: 0.06em; }
.dia__woord { grid-area: 1 / 1; justify-self: center; white-space: nowrap; opacity: 0; transform: translateY(100%); filter: blur(4px); }
.dia__woord[data-stand="aan"] {
  opacity: 1; transform: none; filter: blur(0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms linear, filter 200ms linear;
}
.dia__woord[data-stand="uit"] {
  opacity: 0; transform: translateY(-100%); filter: blur(4px);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms linear, filter 200ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .dia__woord, .dia__woord[data-stand] { transition: none; filter: none; transform: none; }
  .dia__woord:not([data-stand="aan"]) { opacity: 0; }
}

/* ── Reviews: sterren en een link naar de review op Google ──────────────────
   Alle vijftien getoonde reviews hebben vijf sterren (google-reviews.json,
   veld s). De sterren staan in het lichte merkteal, zoals de rest van de
   accenten; een Google-geel zou een vierde kleur aan het palet toevoegen.
   Voor schermlezers staat er "5 van 5 sterren" in een verborgen span; de
   tekens zelf zijn aria-hidden. De skeletregel .strook__item span maakt elke
   span klein en in hoofdletters, dus die wordt hier expliciet teruggezet. */
.strook__item .review__sterren {
  display: block; margin: 0.8rem 0 0.6rem; font-size: 0.9rem; line-height: 1;
  letter-spacing: 0.14em; text-transform: none; color: var(--merk-licht);
}
/* Ook de span MET de sterren erin: de skeletregel .strook__item span (0,1,1)
   maakte die anders klein en grijs, gemeten in de eerste opname. */
.strook__item .review__sterren span { font-size: 1rem; letter-spacing: inherit; text-transform: none; color: inherit; }

/* De hele kaart is de link: groter raakvlak dan een los tekstlinkje, en in een
   lopende band makkelijker te raken. De band pauzeert al bij aanwijzen. */
.review__link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.review__link:focus-visible { outline: 2px solid var(--merk-licht); outline-offset: 4px; border-radius: 4px; }
.strook__item .review__naar {
  display: inline-block; margin-top: 0.9rem; font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--merk-licht); border-bottom: 1px solid currentColor; padding-bottom: 0.15rem;
}

/* ── Herstel: horizontale overloop door de sterren ──────────────────────────
   De schermlezertekst "5 van 5 sterren" is .vzw, dus position: absolute. Het
   venster van de band knipt met overflow: hidden, maar is zelf niet
   gepositioneerd. Zolang de band loopt is het bewegende spoor (transform) het
   bevattende blok en valt de tekst binnen de knip; staat de band stil (het
   harnas, of prefers-reduced-motion) dan valt die transform weg en ontsnapt
   de tekst: de pagina werd 6472px breder. Een eigen bevattend blok per
   sterrenregel houdt hem binnen de kaart. */
.review__sterren { position: relative; }

/* ── Scrollverhaal op telefoon: vaste tekstbreedte ─────────────────────────
   De stapteksten staan absoluut naast hun stip, met max-width 200px en
   right: 0. Voor een tekst links van de stip (stap 2) is de beschikbare
   breedte dan alleen de ruimte van de stip tot de rechterrand, 133px op
   390px, en pas daarna schuift translateX(-100%) hem naar links: een smal
   kolommetje van vier woorden per regel. Een vaste breedte haalt die
   afhankelijkheid weg. 55vw houdt ook stap 2 binnen beeld (links 57px op
   390, 46px op 375). Vanaf 600px is er rechts van de stip al 204px of meer. */
@media (max-width: 599px) { .flow-dot-text { width: min(200px, 55vw); } }

/* ── Telefoon: meer lucht, rustiger hero, zichtbare WhatsApp-knop ──────────
   Julian: op telefoon leek alles "heel erg op elkaar gepropt". De blokruimte
   onder 600px was 80px; nu 104px, gelijk aan 600-899. Het systeem houdt zo
   op met krimpen onder de tabletmaat. Sectiepadding wordt (104 + 38) / 2 =
   71px, ruim boven de ondergrens lift + 1,25rem (58px). */
@media (max-width: 599px) { :root { --blokruimte: 6.5rem; } }

/* De lead onder de hero-kop valt weg op telefoon: kop, knop en de regel met
   feiten zeggen daar genoeg, en de hero krijgt lucht. Vanaf 721px staat hij er
   weer (tablet en desktop). */
@media (max-width: 720px) { .sectie--hero .lead { display: none; } }

/* De WhatsApp-knop in de actiebalk was een doorzichtige knop met een dunne
   lijn op een donkere balk, en viel daardoor weg. Nu een licht vlak, zoals de
   kanaalknoppen bij het profiel: ivoor met donker teal, 11,9:1. Ook bij
   aanraken (hover blijft op touch hangen) en bij focus blijft hij licht. */
.actiebalk .knop--stil,
.actiebalk .knop--stil:hover,
.actiebalk .knop--stil:focus-visible { background-color: #F4F1EC; color: #10333A; border-color: #F4F1EC; }


/* ═══════════════════════════════════════════════════════════════════════
   APPLE-LAAG (okt 2026)
   1. Leesbaarheid: systeemletter (SF op Apple), stevigere koppen, grotere
      kleine tekst, minder kapitalen.
   2. Knoppen als vloeibaar glas: pil-vorm, doorschijnend, met een glans-
      randje. De hoofdknop is getint glas in het teal van het logo.
   3. Licht thema achter html[data-thema="licht"]. Donker blijft standaard.
   Staat als laatste, dus wint van alles hierboven.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --serif: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --glas-vulling: rgba(255, 255, 255, 0.10);
  --glas-vulling-hover: rgba(255, 255, 255, 0.16);
  --glas-rand: rgba(255, 255, 255, 0.22);
  --glas-glans: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --glas-schaduw: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
  --glas-tekst: #F5F5F7;
  --tint: rgba(36, 104, 115, 0.62);
  --tint-hover: rgba(44, 122, 135, 0.72);
  --tint-rand: rgba(169, 212, 218, 0.45);
}

/* ── 1. Leesbaarheid ── */
body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 650; letter-spacing: -0.025em; }
h1 { line-height: 1.02; font-size: clamp(2.75rem, 8vw, 6.25rem); }
h2 { line-height: 1.06; font-size: clamp(2.1rem, 4.8vw, 3.9rem); }
h3, .kist__kop { font-weight: 650; letter-spacing: -0.02em; }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 44ch; }
.fijn { font-size: 0.9rem; line-height: 1.6; }
.oog, .menu__kop, .regel, .citaat footer, .reviewkop, .ankers__lijst a, figcaption {
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; font-weight: 600;
}
.ankers__lijst a { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 500; }
.citaat p, .intern, .strook__item, .reviewkop b, .onboard__vraag { font-weight: 600; font-style: normal; letter-spacing: -0.02em; }
.profiel__naam, .kist__infotitel, .faq summary, .menu__prijs, .menu__rij dt { font-weight: 600; letter-spacing: -0.015em; }
.faq summary { font-size: 1.15rem; }
.profiel__tekst, .kist__infotekst, .dienstkaart__tekst, .flow-dot-desc { font-size: 1.0625rem; line-height: 1.6; }
.dienstkaart__maten, .kist__tekst { font-size: 0.9rem; }
/* Secundaire tekst iets lichter in donker: beter leesbaar op de zwarte grond. */
.sectie, .sectie--licht, .sectie--donker, .sectie--teal, .sectie--hero, .voet { --zacht: #D2D2D7; }
.dienstkaart__maten { color: #D2D2D7; }

/* ── 2. Vloeibaar glas ── */
.knop, .tekstlink, .profiel__kanaal, .profiel__pijl, .kist__pijl, .thema-knop {
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.knop {
  border-radius: 999px; padding: 0.95rem 1.7rem; min-height: 48px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  background: var(--tint); color: var(--glas-tekst); border: 1px solid var(--tint-rand);
  box-shadow: var(--glas-glans), var(--glas-schaduw);
  transition: background-color 200ms var(--curve), transform 200ms var(--curve), box-shadow 200ms var(--curve), border-color 200ms var(--curve);
}
.knop:hover { background: var(--tint-hover); color: var(--glas-tekst); border-color: var(--tint-rand); transform: translateY(-1px); }
.knop:active { transform: scale(0.97); }
.knop--stil, .actiebalk .knop--stil, .onboard .knop--stil {
  background: var(--glas-vulling); color: var(--glas-tekst); border: 1px solid var(--glas-rand);
}
.knop--stil:hover, .actiebalk .knop--stil:hover, .onboard .knop--stil:hover { background: var(--glas-vulling-hover); border-color: var(--glas-rand); color: var(--glas-tekst); }
.knop--mini, .statusbalk__cta { padding: 0.55rem 1.1rem; min-height: 38px; font-size: 0.875rem; }
.statusbalk__cta, .onboard .knop { background: var(--tint); border-color: var(--tint-rand); color: var(--glas-tekst); }
/* "Liever direct appen" wordt een glazen pil in plaats van een onderstreepte link. */
.tekstlink {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 48px; padding: 0.95rem 1.5rem;
  border-radius: 999px; border: 1px solid var(--glas-rand); background: var(--glas-vulling);
  color: var(--glas-tekst); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  box-shadow: var(--glas-glans), var(--glas-schaduw);
  transition: background-color 200ms var(--curve), transform 200ms var(--curve);
}
.tekstlink:hover { background: var(--glas-vulling-hover); color: var(--glas-tekst); transform: translateY(-1px); }
.tekstlink::after { content: '\2192'; }
.knoppen { gap: 0.75rem; }
.actiebalk a { border-radius: 999px; font-size: 0.95rem; padding: 0.8rem 0.6rem; }
.actiebalk { border-radius: 999px; margin: 0 0.75rem 0.75rem; padding: 0.4rem; gap: 0.4rem;
  background: rgba(28, 28, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5); }
.profiel__kanaal, .profiel__pijl, .kist__pijl {
  background: var(--glas-vulling); color: var(--glas-tekst); border: 1px solid var(--glas-rand); box-shadow: var(--glas-glans);
}
.statusbalk { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); background-color: rgba(18, 18, 20, 0.6); }

/* Themaknop in de balk */
.thema-knop {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--glas-rand); background: var(--glas-vulling); color: var(--glas-tekst);
  box-shadow: var(--glas-glans); transition: background-color 200ms var(--curve), transform 200ms var(--curve);
}
.thema-knop:hover { background: var(--glas-vulling-hover); }
.thema-knop:active { transform: scale(0.94); }
.thema-knop svg { width: 18px; height: 18px; }
.thema-knop .icoon-zon { display: none; }
html[data-thema="licht"] .thema-knop .icoon-zon { display: block; }
html[data-thema="licht"] .thema-knop .icoon-maan { display: none; }

/* ── 3. Licht thema ── */
html[data-thema="licht"] {
  color-scheme: light;
  --glas-vulling: rgba(255, 255, 255, 0.55);
  --glas-vulling-hover: rgba(255, 255, 255, 0.8);
  --glas-rand: rgba(0, 0, 0, 0.10);
  --glas-glans: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  --glas-schaduw: 0 8px 24px -12px rgba(0, 0, 0, 0.18);
  --glas-tekst: #1D1D1F;
  --tint: rgba(24, 72, 80, 0.88);
  --tint-hover: rgba(24, 72, 80, 1);
  --tint-rand: rgba(24, 72, 80, 0.5);
  --merk-licht: #1E5A64;
  background-color: #F5F5F7;
}
html[data-thema="licht"] body { color: #1D1D1F; }
html[data-thema="licht"] .knop, html[data-thema="licht"] .statusbalk__cta, html[data-thema="licht"] .onboard .knop:not(.knop--stil) { color: #FFFFFF; }
html[data-thema="licht"] .knop--stil, html[data-thema="licht"] .actiebalk .knop--stil { color: #1D1D1F; }
/* Lichte zijde: main.js tekent het doek in lichte tinten; hier alleen de sterkte en een witte waas. */
html[data-thema="licht"] .zijde { opacity: 1; }
html[data-thema="licht"] .zijde__waas { opacity: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 45%, rgba(255, 255, 255, 0.25)); }
html[data-thema="licht"] .sectie, html[data-thema="licht"] .sectie--licht, html[data-thema="licht"] .sectie--donker,
html[data-thema="licht"] .sectie--teal, html[data-thema="licht"] .sectie--hero, html[data-thema="licht"] .voet {
  --grond: #F5F5F7; --inkt: #1D1D1F; --zacht: #515154; --lijn: rgba(0, 0, 0, 0.10); --lijn-2: rgba(0, 0, 0, 0.22);
  --ring: #1D1D1F; --accent: #1E5A64; color: #1D1D1F;
}
html[data-thema="licht"] .voet { background-color: transparent; border-top-color: rgba(0, 0, 0, 0.08); }
/* Hero: de video blijft, maar onder een lichte waas zodat donkere tekst leest. */
html[data-thema="licht"] .sectie--hero, html[data-thema="licht"] .hero__video { background-color: #F5F5F7; }
html[data-thema="licht"] .hero__video video { opacity: 0.22; filter: grayscale(0.3); }
html[data-thema="licht"] .statusbalk { background-color: rgba(245, 245, 247, 0.72); border-bottom-color: rgba(0, 0, 0, 0.08); --inkt: #1D1D1F; --zacht: #515154; color: #1D1D1F; }
html[data-thema="licht"] .ankers__lijst a { color: #1D1D1F; }
/* Lichte versie van het logo: donkere letters, de KB in licht teal. */
html[data-thema="licht"] .merk__logo, html[data-thema="licht"] .voet__logo { content: url(img/logo-licht.svg?v=92); }
html[data-thema="licht"] .actiebalk { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.2); }
html[data-thema="licht"] .oog, html[data-thema="licht"] .menu__kop, html[data-thema="licht"] .regel, html[data-thema="licht"] figcaption,
html[data-thema="licht"] .stap__nr, html[data-thema="licht"] .review__wie span, html[data-thema="licht"] .onboard__tel,
html[data-thema="licht"] .menu__prijs, html[data-thema="licht"] .faq summary::after, html[data-thema="licht"] .profiel__rol { color: #1E5A64; }
html[data-thema="licht"] .faq details, html[data-thema="licht"] .afspraken li { border-color: rgba(0, 0, 0, 0.10); }
/* Kaarten en panelen: wit op lichtgrijs, zoals op apple.com. */
html[data-thema="licht"] .profiel__naam, html[data-thema="licht"] .profiel__tekst, html[data-thema="licht"] .kist__kop,
html[data-thema="licht"] .kist__titel, html[data-thema="licht"] .kist__chiptitel, html[data-thema="licht"] .kist__infotitel { color: #1D1D1F; }
html[data-thema="licht"] .kist__infotekst, html[data-thema="licht"] .kist__tekst { color: #515154; }
html[data-thema="licht"] .profiel__stip::before { border-color: #1D1D1F; }
html[data-thema="licht"] .profiel__stip[aria-current="true"]::before { background: #1D1D1F; }
html[data-thema="licht"] .kist__stip::before { background: rgba(0, 0, 0, 0.25); }
html[data-thema="licht"] .kist__chip { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.2), inset 0 1px 0 #fff; }
html[data-thema="licht"] .kist__chipicoon { background: rgba(24, 72, 80, 0.08); border-color: rgba(24, 72, 80, 0.25); color: #1E5A64; }
html[data-thema="licht"] .kist__lijf { background: rgba(24, 72, 80, 0.05); border-color: rgba(24, 72, 80, 0.18); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.2); }
html[data-thema="licht"] .kist__vleugel { fill: rgba(24, 72, 80, 0.16); }
html[data-thema="licht"] .kist__rand { fill: rgba(24, 72, 80, 0.10); }
html[data-thema="licht"] .kist__vouw { fill: rgba(24, 72, 80, 0.08); }
html[data-thema="licht"] .kist__plank { fill: rgba(24, 72, 80, 0.14); }
html[data-thema="licht"] .flow-track { --flow-accent: #1E5A64; --flow-accent-glow: rgba(30, 90, 100, 0.3); --flow-text: #1D1D1F; --flow-text-dim: #515154; }
html[data-thema="licht"] .diensten__paneel { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.08); }
html[data-thema="licht"] .chip { color: #1D1D1F; border-color: rgba(0, 0, 0, 0.12); }
html[data-thema="licht"] .chip[aria-current="true"], html[data-thema="licht"] .chip[aria-current="true"] .chip__prijs { background-color: #184850; border-color: #184850; color: #FFFFFF; }
html[data-thema="licht"] .strook--kaarten .strook__item.review { background: #FFFFFF; border-top-color: rgba(0, 0, 0, 0.08); box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.15); }
html[data-thema="licht"] .strook--kaarten::before, html[data-thema="licht"] .strook--kaarten::after { background: linear-gradient(90deg, #F5F5F7, transparent); }
html[data-thema="licht"] .vergelijkers .vergelijker { background: rgba(0, 0, 0, 0.04); }
html[data-thema="licht"] .onboard { background: #FFFFFF; color: #1D1D1F; border-color: rgba(0, 0, 0, 0.08); --inkt: #1D1D1F; --zacht: #515154; }
html[data-thema="licht"] .keuze { color: #1D1D1F; border-color: rgba(0, 0, 0, 0.10); }
html[data-thema="licht"] .onboard .veld input { color: #1D1D1F; border-bottom-color: rgba(0, 0, 0, 0.25); }
html[data-thema="licht"] .onboard__balk { background: rgba(0, 0, 0, 0.08); }
@media (min-width: 900px) {
  html[data-thema="licht"] .profiel__kaart { background: #FFFFFF; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.2); }
}

/* Labels op foto's houden hun eigen kleuren, in beide thema's. */
html[data-thema="licht"] .dienstkaart__pil { background: #A9D4DA; color: #10333A; }
/* Pauzeknoppen ook als glas. */
.strook__pauze { border-radius: 999px; background: var(--glas-vulling); border: 1px solid var(--glas-rand); color: var(--glas-tekst);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--glas-glans); }

/* ── 4. Rust achter de tekst ──
   Geen panelen: de zijde zelf is in licht zachter getekend (main.js), zodat
   tekst er zonder kader op leest. */
html[data-thema="licht"] .review__avatar { color: #FFFFFF; background: #184850; }

/* ── 5. Hero: donker eiland met een sop-rand ──
   De hero is in beide thema's donker, met de video helder en een verloop
   eroverheen voor de tekst. De onderkant is gemaskeerd met img/sopkant.svg:
   ronde belvormen waardoor de zijde eronder de video in lijkt te lopen. */
.hero__video video { opacity: 0.85 !important; filter: none !important; }
.hero__video::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(8, 10, 10, 0.55), rgba(8, 10, 10, 0.35) 70%),
              linear-gradient(180deg, rgba(8, 10, 10, 0.45), rgba(8, 10, 10, 0.15) 40%, rgba(8, 10, 10, 0.55)); }
.sectie--hero {
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 108px) no-repeat, url(img/sopkant.svg?v=3) bottom / 600px 110px repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - 108px) no-repeat, url(img/sopkant.svg?v=3) bottom / 600px 110px repeat-x;
  padding-bottom: calc(clamp(2.5rem, 7vh, 5.5rem) + 60px);
}
@media (max-width: 700px) {
  .sectie--hero {
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 76px) no-repeat, url(img/sopkant.svg?v=3) bottom / 420px 77px repeat-x;
            mask: linear-gradient(#000, #000) top / 100% calc(100% - 76px) no-repeat, url(img/sopkant.svg?v=3) bottom / 420px 77px repeat-x;
  }
}
/* In licht blijft de hero donker: zet de donkere waarden hier terug. */
html[data-thema="licht"] .sectie--hero, html[data-thema="licht"] .hero__video { background-color: #0B0D0D; }
html[data-thema="licht"] .sectie--hero {
  --grond: #0B0D0D; --inkt: #F5F5F7; --zacht: #D2D2D7; --accent: #A9D4DA; --merk-licht: #A9D4DA; color: #F5F5F7;
  --glas-vulling: rgba(255, 255, 255, 0.10); --glas-vulling-hover: rgba(255, 255, 255, 0.16); --glas-rand: rgba(255, 255, 255, 0.22);
  --glas-glans: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --glas-schaduw: 0 8px 24px -10px rgba(0, 0, 0, 0.45); --glas-tekst: #F5F5F7;
  --tint: rgba(36, 104, 115, 0.62); --tint-hover: rgba(44, 122, 135, 0.72); --tint-rand: rgba(169, 212, 218, 0.45);
}
html[data-thema="licht"] .sectie--hero .regel, html[data-thema="licht"] .sectie--hero .oog { color: #A9D4DA; }
html[data-thema="licht"] .sectie--hero .knop, html[data-thema="licht"] .sectie--hero .tekstlink { color: #F5F5F7; }
.dienstkaart__tekst { font-size: 1rem; }

/* ── 6. Lucht ──
   Het voelde krap: koppen strak op elkaar, tekst vlak onder de kop, letters
   dicht op elkaar. Hier meer regelafstand, iets ruimere letters en vaste,
   ruime afstanden tussen kop, tekst en knoppen. */
body { line-height: 1.6; letter-spacing: 0; }
h1, h2, h3 { letter-spacing: -0.018em; }
h1 { line-height: 1.06; }
h2 { line-height: 1.12; }
h2 + .lead, h1 + .lead, .menu__titel + .lead { margin-top: 1.75rem; }
.lead { line-height: 1.68; }
.knoppen { margin-top: clamp(2.25rem, 4vw, 3rem); }
.fijn { line-height: 1.7; margin-top: 2rem; }
.profiel__tekst, .kist__infotekst, .flow-dot-desc, .dienstkaart__tekst { line-height: 1.7; }
.flow-dot-title { margin-bottom: 0.35rem; }
.faq summary { padding-block: 1.35rem; }
.faq details p { line-height: 1.7; padding-bottom: 1.25rem; }
.sectie { padding-bottom: max(var(--ritme), calc(var(--vorm-zicht) + var(--lift) + 1.25rem)); }
:root { --rand: clamp(1.5rem, 6vw, 3rem); }
@media (min-width: 1024px) {
  .alsnieuw-rij, .schurk-rij, .contact-rij { column-gap: clamp(4rem, 8vw, 7.5rem); }
}

/* ── 7. "Wat we doen" in één scherm op mobiel ──
   De carrousel blijft; de introtekst valt op smalle schermen weg en de
   marges worden krapper, zodat kop, carrousel en de regel eronder samen
   binnen één scherm passen. */
@media (max-width: 700px) {
  #tarieven .lead { display: none; }
  #tarieven { margin-top: clamp(3rem, 12vw, 4.5rem); }
  .diensten-blok { margin-top: 1.25rem; }
  .diensten-blok + .menu .fijn { margin-top: 1rem; }
}

/* ── 8. Eén vaste afstand tussen blokken ──
   Elk blok staat op zichzelf: tussen twee blokken altijd --tussen, of ze nu
   in dezelfde sectie staan of niet. Zo zie je bij "Wat we doen" niet meer de
   knop van het blok erboven. */
:root { --tussen: clamp(12rem, 18vw, 16rem); }
.sectie:not(.sectie--hero) { padding-top: calc(var(--tussen) / 2); padding-bottom: calc(var(--tussen) / 2); }
#succes { padding-top: calc(var(--tussen) / 2 + 2rem); }
#tarieven, .kist, .fotobaan, .reviews__kop { margin-top: var(--tussen) !important; }
.sectie > .blad:first-child > .reviews__kop, .sectie > .reviews__kop:first-child { margin-top: 0 !important; }
/* De secties zijn doorzichtig; de oude overlap van de vormovergang (-38px) heeft geen nut meer en at de afstand op. */
main > .sectie:not(.sectie--hero) { margin-top: 0 !important; }
/* "Stuur een foto" en de FAQ staan op mobiel onder elkaar: ook daar de volle afstand. */
@media (max-width: 1023px) { .contact-rij .faq { margin-top: var(--tussen) !important; } }

/* ── 9. Glans op de sop-rand ──
   Zelfde bellen als het masker (img/sopkant.svg), nu met een parelmoerrand,
   een lichte bolling en een glimlicht (img/sopglans.svg). Ligt precies op de
   onderkant van de hero, zodat de uitsparingen als zeepbellen lezen. */
.sopglans { position: relative; height: 0; z-index: 3; pointer-events: none; }
.sopglans::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: url(img/sopglans.svg?v=9) bottom / 600px 110px repeat-x;
}
@media (max-width: 700px) {
  .sopglans::before { height: 77px; background-size: 420px 77px; }
}
}

/* ── 10. Losse cartoon-belletjes rond de sop-rand ──
   Een paar bellen zweven in de video erboven en in de zijde eronder, zodat je
   in één oogopslag ziet dat de rand schuim is. Rand + glimmer in currentColor.
   --y is de hoogte boven de rand (negatief = eronder). */
.sopglans .bellen { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.bel {
  position: absolute; left: var(--x); bottom: var(--y); width: var(--d); height: var(--d);
  border-radius: 50%; border: 1.5px solid currentColor; color: rgba(255, 255, 255, 0.55);
  animation: bel-drijf var(--t) ease-in-out var(--v) infinite;
}
.bel::before { /* cartoon-glimmer linksboven */
  content: ''; position: absolute; left: 18%; top: 18%; width: 40%; height: 40%;
  border-radius: 50%; border-top: 2px solid currentColor; border-left: 2px solid transparent; transform: rotate(-30deg);
}
.bel[style*="--y:-"] { color: rgba(255, 255, 255, 0.35); }
html[data-thema="licht"] .bel[style*="--y:-"] { color: rgba(24, 72, 80, 0.35); }
@keyframes bel-drijf {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .bel { animation: none; } }
@media (max-width: 700px) { .bel { width: calc(var(--d) * 0.85); height: calc(var(--d) * 0.85); bottom: calc(var(--y) * 0.25); } }

/* Losse bellen uit bellen.js: dunner en wat lichter dan de vaste. */
.bel--los { border-width: 1.2px; }

/* ── 11. Sop-rand op scroll ──
   bellen.js zet --sop-op (hoe ver de rand omhoog is), --sop-s (bellenmaat) en
   --sop-x (drift). Masker en glans lezen dezelfde waarden, dus ze blijven
   precies op elkaar liggen. Onder de rand is het masker leeg: daar zie je de
   zijde. Vervangt de vaste maskers uit blok 5 en de glans uit blok 9. */
:root { --sop-b: 600px; --sop-h: 110px; --sop-op: 0px; --sop-s: 1; --sop-x: 0px; }
@media (max-width: 700px) { :root { --sop-b: 420px; --sop-h: 77px; } }
.sectie--hero {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--sop-op) - var(--sop-h) * var(--sop-s) + 2px) no-repeat,
    url(img/sopkant.svg?v=3) calc(50% + var(--sop-x)) calc(100% - var(--sop-op)) / calc(var(--sop-b) * var(--sop-s)) calc(var(--sop-h) * var(--sop-s)) repeat-x;
          mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--sop-op) - var(--sop-h) * var(--sop-s) + 2px) no-repeat,
    url(img/sopkant.svg?v=3) calc(50% + var(--sop-x)) calc(100% - var(--sop-op)) / calc(var(--sop-b) * var(--sop-s)) calc(var(--sop-h) * var(--sop-s)) repeat-x;
}
.sopglans { transform: translateY(calc(var(--sop-op) * -1)); }
.sopglans::before {
  height: calc(var(--sop-h) * var(--sop-s));
  background-position: calc(50% + var(--sop-x)) bottom;
  background-size: calc(var(--sop-b) * var(--sop-s)) calc(var(--sop-h) * var(--sop-s));
}

/* ── 12. Schuim op canvas ──
   bellen.js tekent de schuimrand als losse bellen op een canvas dat over de
   onderkant van de hero valt en doorloopt in de zijde. Het masker, de
   glans-svg en de losse belletjes van blok 5, 9, 10 en 11 vervallen. */
.sectie--hero { -webkit-mask: none !important; mask: none !important; }
.sopglans { transform: none !important; }
.sopglans::before { content: none !important; }
.sopdoek { position: absolute; left: 0; width: 100%; display: block; pointer-events: none; }

/* ── 13. Hero: simpele fade ──
   Geen sop meer. De hero loopt onderaan met een zachte fade over in de
   achtergrond eronder. Vervangt blok 5 (masker), 9 t/m 12 (glans, bellen, canvas). */
.sectie--hero {
  -webkit-mask: linear-gradient(180deg, #000 calc(100% - 160px), transparent) !important;
          mask: linear-gradient(180deg, #000 calc(100% - 160px), transparent) !important;
}

/* ── 14. WhatsApp-knoppen in groen ──
   Geen fel merkgroen (#25D366), maar een analoog groen dat naast het teal van
   KB ligt: #1F7A55 (tint ~155°, teal ~190°). Wit erop: 5,29:1. Zelfde glasstijl
   als de teal hoofdknop, zodat de twee als familie lezen. */
:root { --wa: rgba(31, 122, 85, 0.72); --wa-hover: rgba(36, 138, 96, 0.82); --wa-rand: rgba(150, 220, 185, 0.42); }
html[data-thema="licht"] { --wa: rgba(31, 122, 85, 0.95); --wa-hover: rgba(31, 122, 85, 1); --wa-rand: rgba(31, 122, 85, 0.5); }
html[data-thema="licht"] .sectie--hero { --wa: rgba(31, 122, 85, 0.72); --wa-hover: rgba(36, 138, 96, 0.82); --wa-rand: rgba(150, 220, 185, 0.42); }
.tekstlink[data-whatsapp], .knop[data-whatsapp], .actiebalk .knop--stil[data-whatsapp], .profiel__kanaal[data-whatsapp] {
  background: var(--wa) !important; border-color: var(--wa-rand) !important; color: #FFFFFF !important;
}
.tekstlink[data-whatsapp]:hover, .knop[data-whatsapp]:hover, .actiebalk .knop--stil[data-whatsapp]:hover, .profiel__kanaal[data-whatsapp]:hover {
  background: var(--wa-hover) !important;
}

/* ── 15. Amber-accent: de beoordeling ──
   Warm amber als tegenhanger van het teal (en het geel van de reinigingskop in
   hun eigen beeld). Spaarzaam: alleen sterren en de 4,9. Geen knoppen.
   Donker: #E2A85C (9,27:1 op #0B0D0D). Licht: tekst #9A5F1C (4,79:1 op
   #F5F5F7), sterren #B9772A (3,66:1 op wit, genoeg voor een niet-tekstueel teken). */
:root { --amber: #E2A85C; --amber-ster: #E2A85C; }
html[data-thema="licht"] { --amber: #9A5F1C; --amber-ster: #B9772A; }
html[data-thema="licht"] .sectie--hero { --amber: #E2A85C; }
.review__sterren { color: var(--amber-ster) !important; }
.score { color: var(--amber) !important; font-weight: 600; }
.lead .score { font-weight: 700; }

/* ── 16. Minder verblindend, minder zwart ──
   Licht: grond #E9ECEC in plaats van bijna-wit, kaarten gebroken wit (#F7F8F8),
   de zijde in main.js een stap getemperd. Donker: grafiet #161A1B in plaats van
   #0B0D0D, de zijde iets sterker zichtbaar. */
html { background-color: #161A1B; }
.zijde { opacity: 0.2; }
.sectie--hero, .hero__video { background-color: #161A1B; }
.strook--kaarten::before, .strook--kaarten::after { background: linear-gradient(90deg, rgba(22, 26, 27, 0.92), transparent); }
html[data-thema="licht"] { background-color: #E9ECEC; }
html[data-thema="licht"] .sectie--hero, html[data-thema="licht"] .hero__video { background-color: #161A1B; }
html[data-thema="licht"] .statusbalk { background-color: rgba(233, 236, 236, 0.75); }
html[data-thema="licht"] .actiebalk { background: rgba(247, 248, 248, 0.75); }
html[data-thema="licht"] .strook--kaarten .strook__item.review,
html[data-thema="licht"] .onboard { background: #F7F8F8; }
html[data-thema="licht"] .strook--kaarten::before, html[data-thema="licht"] .strook--kaarten::after { background: linear-gradient(90deg, #E9ECEC, transparent); }
html[data-thema="licht"] .knop--stil, html[data-thema="licht"] .tekstlink, html[data-thema="licht"] .profiel__kanaal,
html[data-thema="licht"] .profiel__pijl, html[data-thema="licht"] .kist__pijl, html[data-thema="licht"] .thema-knop { --glas-vulling: rgba(247, 248, 248, 0.6); }
@media (min-width: 900px) { html[data-thema="licht"] .profiel__kaart { background: #F7F8F8; } }
html[data-thema="licht"] { --amber: #86511A; }

/* ── 17. Licht nog een stap gedempt + Google-merkje bij reviews ── */
html[data-thema="licht"] { background-color: #DCE1E1; }
html[data-thema="licht"] .statusbalk { background-color: rgba(220, 225, 225, 0.78); }
html[data-thema="licht"] .actiebalk { background: rgba(236, 239, 239, 0.78); }
html[data-thema="licht"] .strook--kaarten .strook__item.review,
html[data-thema="licht"] .onboard { background: #ECEFEF; }
@media (min-width: 900px) { html[data-thema="licht"] .profiel__kaart { background: #ECEFEF; } }
html[data-thema="licht"] .strook--kaarten::before, html[data-thema="licht"] .strook--kaarten::after { background: linear-gradient(90deg, #DCE1E1, transparent); }
/* Google-"G" rechtsonder op elke avatar: laat zien dat de review van Google komt. */
.review__avatar { position: relative; }
.review__g { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-sizing: content-box; }

/* ── 18. Koppen in Fraunces ──
   Een zachte, warme schreefletter met karakter, als echo van de KB in het
   logo. Stevig gewicht (600) en de SOFT-as half open, zodat hij vriendelijk
   oogt en goed leest. Lopende tekst blijft de systeemletter. */
:root { --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; }
h1, h2, h3, .kist__kop, .profiel__naam, .kist__infotitel, .menu__titel, .onboard__vraag {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.012em;
  font-variation-settings: 'SOFT' 50, 'WONK' 0; font-optical-sizing: auto;
}
h1 { letter-spacing: -0.02em; }
.dia { font-style: italic; font-weight: 500; }

/* ── 19. Glans over het wisselende woord ──
   Een lichte strook schuift langzaam door het woord heen (tekst met een
   verloop als vulling). Zelfde teal als de rest, met wit als glans. Staat
   stil bij prefers-reduced-motion. */
.dia__woord {
  background: linear-gradient(110deg, #A9D4DA 0%, #A9D4DA 38%, #FFFFFF 50%, #A9D4DA 62%, #A9D4DA 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: dia-glans 3.2s ease-in-out infinite;
  padding-inline: 0.04em;
}
@keyframes dia-glans { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .dia__woord { animation: none; background-position: 50% 0; } }

/* ── 20. Lintrand onder de hero-video ──
   Geen fade meer: de video eindigt in een golvende rand tussen de knoppen en
   de regel, met dunne glanzende linten erlangs die rustig heen en weer gaan,
   net als de zijde. De regel staat daardoor op de zijde. --lint-y (hoogte van
   het golfmidden vanaf de onderkant) zet een klein script in index.html. */
.sectie--hero { -webkit-mask: none !important; mask: none !important; background-color: transparent !important; --lint-h: 90px; --lint-w: 1200px; --lint-y: 170px; }
html[data-thema="licht"] .sectie--hero { background-color: transparent !important; }
.sectie--hero .regel { margin-top: 3.25rem; }
.hero__video {
  bottom: calc(var(--lint-y) - var(--lint-h) / 2);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--lint-h) + 4px) no-repeat, url(img/lintkant.svg?v=1) 0 100% / var(--lint-w) var(--lint-h) repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--lint-h) + 4px) no-repeat, url(img/lintkant.svg?v=1) 0 100% / var(--lint-w) var(--lint-h) repeat-x;
  animation: lint-mask 14s ease-in-out infinite alternate;
}
.lint { position: absolute; left: 0; right: 0; height: var(--lint-h); bottom: calc(var(--lint-y) - var(--lint-h) / 2); z-index: -1; pointer-events: none; background-repeat: repeat-x; background-size: var(--lint-w) var(--lint-h); }
.lint--1 { background-image: url(img/lint1.svg?v=1); animation: lint-1 14s ease-in-out infinite alternate; }
.lint--2 { background-image: url(img/lint2.svg?v=1); animation: lint-2 19s ease-in-out infinite alternate; }
@keyframes lint-mask { from { -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; } to { -webkit-mask-position: 0 0, -360px 100%; mask-position: 0 0, -360px 100%; } }
@keyframes lint-1 { from { background-position: 0 0; } to { background-position: -360px 0; } }
@keyframes lint-2 { from { background-position: -200px 0; } to { background-position: 160px 0; } }
@media (max-width: 700px) { .sectie--hero { --lint-h: 64px; --lint-w: 760px; } }
@media (prefers-reduced-motion: reduce) { .hero__video, .lint { animation: none; } }
/* De regel staat nu op de zijde: in licht donkere tekst. */
@media (min-width: 721px) {
  html[data-thema="licht"] .sectie--hero .regel { color: #1E5A64 !important; }
  html[data-thema="licht"] .sectie--hero .score { color: #86511A !important; }
}
.hero__video { z-index: -2; }

/* ── 21. Waterrand + compacte hero ──
   Linten weg. De video eindigt in een wateroppervlak dat water.js elke frame
   als clip-path tekent (golft na, reageert op cursor en scrollen). De hero is
   niet langer schermvullend maar zo hoog als de inhoud, zodat de 16:9-video zo
   min mogelijk wordt afgesneden; de video blijft op het midden gericht. */
.lint { display: none !important; }
.hero__video { -webkit-mask: none !important; mask: none !important; animation: none !important; bottom: 0 !important; }
.hero__video video { object-fit: cover; object-position: 50% 45%; }
.sectie--hero { min-height: 0 !important; padding-top: clamp(6.5rem, 12vw, 8.5rem) !important; padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
@media (min-width: 900px) { .sectie--hero { aspect-ratio: 16 / 9; max-height: 92svh; display: grid; align-content: center; } }

/* ── 22. Desktop-indeling hero ──
   Vanaf 900px staat de regel (beoordelingen, jaren, reiskosten) onderaan de
   hero, onder de waterrand; kop en knoppen staan gecentreerd in het videovlak
   erboven. De onderste padding houdt plek vrij voor de regel. */
@media (min-width: 900px) {
  .sectie--hero { padding-bottom: 11rem !important; }
  .sectie--hero .regel { position: absolute; left: 0; right: 0; bottom: 2.25rem; margin: 0 auto !important; }
}

/* ── 23. Desktop-hero: nooit kleiner dan de inhoud ──
   De 16:9-verhouding is een voorkeur, geen plafond: past de inhoud er niet in,
   dan groeit de hero mee in plaats van de kop onder de balk te duwen. */
@media (min-width: 900px) {
  .sectie--hero { min-height: auto !important; max-height: none; height: auto; }
  .sectie--hero { min-height: max(min(56.25vw, 92svh), 40rem) !important; }
}
@media (min-width: 900px) { .sectie--hero { aspect-ratio: auto !important; } }

/* ── 24. Telefoon: hero zonder knoppen ──
   Tot 720px (waar de sticky actiebalk verschijnt) vullen kop en beoordelingen
   het scherm. De CTA-knoppen in de hero vallen weg; de regel staat in het
   videovlak, daaronder de waterrand, en daaronder een strook zijde waar de
   sticky balk overheen valt. water.js legt de rand 30px onder de regel. */
@media (max-width: 720px) {
  .sectie--hero { min-height: 100svh !important; padding-bottom: calc(var(--actiebalk-h) + 9.5rem) !important; display: grid; align-content: center; }
  .sectie--hero .knoppen { display: none !important; }
  .sectie--hero .regel { position: absolute; left: 0; right: 0; bottom: calc(var(--actiebalk-h) + 5.5rem); margin: 0 auto !important; }
}
@media (max-width: 720px) { .sectie--hero .regel { bottom: 180px !important; } .sectie--hero { padding-bottom: 260px !important; } }
@media (max-width: 720px) { .sectie--hero { min-height: calc(100svh - var(--kopbalk-h)) !important; } .sectie--hero .regel { bottom: 170px !important; } }

/* ── 25. Hero zonder bovenschrift, alles gecentreerd ── */
.sectie--hero .oog { display: none !important; }
.sectie--hero .hero { text-align: center; }
@media (max-width: 720px) {
  /* kop gecentreerd tussen de menubalk en de beoordelingsregel */
  .sectie--hero { padding-top: 1.5rem !important; padding-bottom: 290px !important; align-content: center; }
}

/* ── 26. Telefoon: kop + beoordelingen als één gecentreerd blok ──
   De regel staat niet meer los onderaan maar direct onder de kop, met een
   vaste tussenruimte. Het blok staat in het midden van wat je ziet: tussen
   de menubalk en de sticky actiebalk. Zijmarges via --rand. */
@media (max-width: 720px) {
  .sectie--hero {
    padding-top: 0 !important;
    padding-bottom: calc(var(--actiebalk-h) + 1.6rem) !important;
    padding-inline: var(--rand);
    display: grid; align-content: center; justify-items: center;
  }
  .sectie--hero .regel { position: static !important; margin: 2.25rem auto 0 !important; padding-inline: 0; max-width: 22rem; gap: 0.5rem 1.5rem; }
  .sectie--hero .hero { padding-inline: 0; }
}
@media (max-width: 720px) { .sectie--hero { grid-template-rows: auto auto !important; } }

/* ── 27. Secties passen op een telefoonscherm + Karim springt niet meer ──
   Karim: alle verhaaltjes weer op elkaar in één rastercel, dus de kaart is
   altijd zo hoog als het langste en verspringt niet bij wisselen. */
.profiel__dia, .profiel__dia:not([data-stand="aan"]):not([data-stand="uit"]) { grid-area: 1 / 1 !important; position: static !important; inset: auto !important; }

@media (max-width: 720px) {
  /* compactere koppen en tekst, zodat elk blok binnen één scherm valt */
  #succes h2, #schurk h2, #h-gids { font-size: clamp(1.85rem, 8.4vw, 2.2rem); }
  #succes .lead, #schurk .lead { font-size: 1rem; line-height: 1.6; margin-top: 1.1rem; }
  .vergelijkers { margin-top: 1.5rem !important; }
  /* "Wat je niet ziet": foto lager bijgesneden, gecentreerd op het vuil */
  .schurk-rij__beeld { margin-top: 1.5rem !important; }
  .schurk-rij__beeld img { height: 250px !important; width: 100% !important; object-fit: cover; object-position: 50% 62%; border-radius: 14px; }
  .schurk-rij__beeld figcaption { margin-top: 0.75rem; }
  /* Karim: kleinere foto, compactere kaart */
  #h-gids + * , #gids .blad--smal + .blad { margin-top: 0; }
  .profiel__foto { max-width: 150px !important; border-radius: 1.1rem; }
  .profiel__kaart { margin-top: 1.1rem !important; }
  .profiel__naam { font-size: 1.6rem !important; margin-bottom: 0.3rem !important; }
  .profiel__rol { margin-bottom: 0.6rem !important; font-size: 0.8rem !important; }
  .profiel__tekst { font-size: 0.95rem !important; line-height: 1.55 !important; }
  .profiel__kanalen { margin-top: 1rem !important; }
}
.profiel__wissel { display: grid !important; grid-template-columns: minmax(0, 1fr); }

/* ── 28. Prijs-knop per dienst ──
   Op elke dienstkaart een kleine glazen knop; opent het aanvraagvenster met
   de dienst al gekozen. */
.knop--dienst {
  margin-top: 0.9rem; align-self: flex-start; min-height: 40px; padding: 0.6rem 1.1rem; font-size: 0.9rem;
  background: var(--tint); border-color: var(--tint-rand); color: #F5F5F7;
  pointer-events: auto;
}
.dienstkaart__over { display: flex; flex-direction: column; }
html[data-thema="licht"] .knop--dienst { color: #FFFFFF; }

/* Knoptekst en pijl met lucht ertussen */
.knop--dienst { gap: 0.4rem; }

/* ── 29. Liquid glass-eilanden ──
   Doorschijnend glas (geen dicht vlak): lichte tint, de zijde erachter
   vervaagd en verzadigd, een glansrand bovenaan en ronde hoeken. Zelfde
   recept voor de lange teksten, Karim, de FAQ, de reviews en de footer. */
:root {
  --glas-eiland: rgba(255, 255, 255, 0.055);
  --glas-eiland-rand: rgba(255, 255, 255, 0.12);
  --glas-eiland-glans: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --glas-eiland-schaduw: 0 20px 50px -28px rgba(0, 0, 0, 0.55);
}
html[data-thema="licht"] {
  --glas-eiland: rgba(255, 255, 255, 0.34);
  --glas-eiland-rand: rgba(255, 255, 255, 0.7);
  --glas-eiland-glans: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  --glas-eiland-schaduw: 0 20px 50px -30px rgba(20, 40, 45, 0.25);
}
#succes .lead, #schurk .lead, .profiel__kaart, .faq, .voet .voet__raster, .strook--kaarten .strook__item.review {
  background: var(--glas-eiland) !important;
  border: 1px solid var(--glas-eiland-rand) !important;
  box-shadow: var(--glas-eiland-glans), var(--glas-eiland-schaduw) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
}
/* lange teksten */
#succes .lead, #schurk .lead { border-radius: 22px; padding: 1.15rem 1.4rem; max-width: 40rem; }
/* Karim */
.profiel__kaart { border-radius: 26px; padding: 1.5rem 1.4rem 1.4rem !important; }
/* FAQ */
.faq { border-radius: 26px; padding: 0.4rem 1.5rem !important; }
.faq details:last-child { border-bottom: 0; }
/* reviews */
.strook--kaarten .strook__item.review { border-radius: 22px; }
/* footer: één groot eiland */
.voet { background: transparent !important; border-top: 0 !important; padding-inline: var(--rand); }
.voet .voet__raster { border-radius: 32px; padding: clamp(1.75rem, 4vw, 2.75rem) !important; max-width: var(--blad); margin-inline: auto; }
@media (max-width: 720px) {
  #succes .lead, #schurk .lead { padding: 1rem 1.1rem; border-radius: 18px; }
  .faq { padding: 0.2rem 1.1rem !important; }
}
@media (max-width: 720px) { .profiel__foto { max-width: 124px !important; } .profiel__kaart { padding: 1.15rem 1.1rem 1.1rem !important; margin-top: 0.9rem !important; } .profiel__kanalen { margin-top: 0.8rem !important; } }

/* ── 30. 3D-knoppen om op te drukken ──
   Zelfde recept als de knoppen op viralconversions.io: een donkere zijkant
   onder de knop; bij hover komt hij iets omhoog, bij indrukken zakt hij 4px
   in en verdwijnt de zijkant. In de vorm en kleuren van KB.
   Contrast tekst/vlak: teal 6,65:1, groen 5,29:1, neutraal donker 12,2:1,
   neutraal licht 16,8:1. */
:root {
  --k3-vlak: #22656F; --k3-zij: #123A41; --k3-hover: #27727D;
  --k3-wa-vlak: #1F7A55; --k3-wa-zij: #12503A; --k3-wa-hover: #238A60;
  --k3-stil-vlak: #2A3133; --k3-stil-zij: #15191A; --k3-stil-hover: #323A3C; --k3-stil-tekst: #F5F5F7;
}
html[data-thema="licht"] { --k3-stil-vlak: #FFFFFF; --k3-stil-zij: #B9C4C6; --k3-stil-hover: #F4F7F7; --k3-stil-tekst: #1D1D1F; }
html[data-thema="licht"] .sectie--hero { --k3-stil-vlak: #2A3133; --k3-stil-zij: #15191A; --k3-stil-hover: #323A3C; --k3-stil-tekst: #F5F5F7; }

.knop, .statusbalk__cta, .tekstlink[data-whatsapp], .actiebalk a, .onboard .knop {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: var(--k3-vlak) !important; color: #FFFFFF !important;
  border: 0 !important; border-radius: 999px;
  box-shadow: 0 5px 0 0 var(--k3-zij), 0 10px 18px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease !important;
  -webkit-tap-highlight-color: transparent;
}
.knop:hover, .statusbalk__cta:hover, .tekstlink[data-whatsapp]:hover, .actiebalk a:hover, .onboard .knop:hover {
  background: var(--k3-hover) !important; transform: translateY(-1px) !important;
  box-shadow: 0 7px 0 0 var(--k3-zij), 0 14px 22px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.knop:active, .statusbalk__cta:active, .tekstlink[data-whatsapp]:active, .actiebalk a:active, .onboard .knop:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 0 var(--k3-zij), 0 3px 8px -4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
/* WhatsApp: groen */
.knop[data-whatsapp], .tekstlink[data-whatsapp], .actiebalk a[data-whatsapp] { background: var(--k3-wa-vlak) !important; }
.knop[data-whatsapp]:hover, .tekstlink[data-whatsapp]:hover, .actiebalk a[data-whatsapp]:hover { background: var(--k3-wa-hover) !important; }
.knop[data-whatsapp], .tekstlink[data-whatsapp], .actiebalk a[data-whatsapp] { --k3-zij: var(--k3-wa-zij); }
/* neutrale knoppen (Terug, Bellen) */
.knop--stil:not([data-whatsapp]), .onboard .knop--stil { background: var(--k3-stil-vlak) !important; color: var(--k3-stil-tekst) !important; --k3-zij: var(--k3-stil-zij); }
.knop--stil:not([data-whatsapp]):hover, .onboard .knop--stil:hover { background: var(--k3-stil-hover) !important; }
/* ruimte voor de zijkant, zodat de knop niet tegen iets eronder plakt */
.knoppen { padding-bottom: 6px; }
.actiebalk { padding-bottom: calc(0.4rem + 5px) !important; }

/* ── 31. Vloeiende overgangen ──
   FAQ klapt open/dicht (vloeiend.js), dialoog en vragen faden in, het
   wisselen van thema gaat geleidelijk. */
.faq details { overflow: hidden; }
.faq summary::after { transition: transform 0.3s var(--curve); }
.faq details[open] summary::after { transform: rotate(45deg); }
dialog.onboard[open] { animation: venster-in 0.32s var(--curve); }
dialog.onboard[open]::backdrop { animation: waas-in 0.32s ease; }
@keyframes venster-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes waas-in { from { opacity: 0; } to { opacity: 1; } }
.onboard__stap:not([hidden]) { animation: stap-in 0.28s var(--curve); }
@keyframes stap-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.keuze { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
html.thema-wissel, html.thema-wissel *, html.thema-wissel *::before, html.thema-wissel *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, fill 0.45s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  dialog.onboard[open], dialog.onboard[open]::backdrop, .onboard__stap:not([hidden]) { animation: none; }
}

/* ── 32. Lichtgloed over de hele site ──
   Twee zachte lichtvlekken (teal en warm amber) die heel langzaam drijven,
   als een subtiele lens-gloed. Klikt nergens doorheen, staat stil bij
   prefers-reduced-motion. */
.gloed {
  position: fixed; inset: -20%; z-index: 60; pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(169, 212, 218, 0.10), transparent 70%),
    radial-gradient(30% 26% at 82% 72%, rgba(226, 168, 92, 0.07), transparent 70%),
    radial-gradient(24% 18% at 60% 30%, rgba(255, 255, 255, 0.04), transparent 70%);
  mix-blend-mode: screen;
  animation: gloed-drijf 38s ease-in-out infinite alternate;
}
html[data-thema="licht"] .gloed {
  mix-blend-mode: soft-light;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(30% 26% at 82% 72%, rgba(255, 214, 160, 0.35), transparent 70%);
}
@keyframes gloed-drijf { from { transform: translate3d(-4%, -2%, 0) rotate(0deg); } to { transform: translate3d(5%, 4%, 0) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .gloed { animation: none; } }

/* ── 33. Lichtbanen over de hele site (vervangt de ronde gloed uit blok 32) ──
   Naar de referentie: brede, zachte diagonale banen licht en schaduw, als
   licht over satijn. Eén laag boven alles (klikt overal doorheen), met
   soft-light gemengd zodat de kleuren eronder blijven en alleen licht en
   donker meeschuiven. Beweegt heel traag; staat stil bij minder beweging. */
.gloed {
  inset: 0 !important; transform: none !important;
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.16) 9%,
      rgba(255, 255, 255, 0) 19%,
      rgba(0, 0, 0, 0.30) 31%,
      rgba(0, 0, 0, 0) 42%,
      rgba(255, 255, 255, 0.20) 54%,
      rgba(255, 255, 255, 0) 64%,
      rgba(0, 0, 0, 0.26) 77%,
      rgba(0, 0, 0, 0) 88%,
      rgba(255, 255, 255, 0.14) 100%) !important;
  background-size: 220% 220% !important;
  mix-blend-mode: soft-light !important;
  opacity: 0.9;
  animation: lichtbaan 46s ease-in-out infinite alternate !important;
}
html[data-thema="licht"] .gloed { opacity: 0.75; }
@keyframes lichtbaan { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .gloed { animation: none !important; background-position: 40% 40%; } }
/* Donker: alleen lichtbanen, opgeteld (screen) zodat ze op donker oplichten.
   Licht: alleen schaduwbanen (multiply), zodat het lichte doek diepte krijgt. */
.gloed {
  mix-blend-mode: screen !important; opacity: 1;
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.075) 10%, rgba(255, 255, 255, 0) 22%,
      rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.095) 54%, rgba(255, 255, 255, 0) 67%,
      rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, 0.06) 94%, rgba(255, 255, 255, 0) 100%) !important;
  background-size: 220% 220% !important;
}
html[data-thema="licht"] .gloed {
  mix-blend-mode: multiply !important; opacity: 1;
  background:
    linear-gradient(118deg,
      rgba(30, 60, 66, 0) 0%, rgba(30, 60, 66, 0.07) 14%, rgba(30, 60, 66, 0) 28%,
      rgba(30, 60, 66, 0) 44%, rgba(30, 60, 66, 0.09) 58%, rgba(30, 60, 66, 0) 72%,
      rgba(30, 60, 66, 0) 84%, rgba(30, 60, 66, 0.06) 95%, rgba(30, 60, 66, 0) 100%) !important;
  background-size: 220% 220% !important;
}

/* ── 34. Diensten op mobiel: alle zes tegelijk zichtbaar ──
   In plaats van één zijwaarts scrollende rij een raster van 3 x 2 tegels:
   naam boven, vanafprijs eronder. Tik = de kaart eronder wisselt. */
@media (max-width: 720px) {
  .diensten__paneel { --masker: none !important; -webkit-mask: none !important; mask: none !important; padding: 0.9rem 0.9rem 0.4rem !important; }
  .diensten__lijst {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem !important;
    overflow: visible !important; padding: 0 !important; height: auto !important;
  }
  .dienstrij { min-width: 0; }
  .diensten__lijst .chip {
    width: 100%; min-height: 54px; padding: 0.45rem 0.4rem !important; border-radius: 14px !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; text-align: center;
  }
  .diensten__lijst .chip__nr { display: none; }
  .diensten__lijst .chip__naam { font-size: 0.82rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .diensten__lijst .chip__prijs { font-size: 0.95rem; line-height: 1.1; }
  .diensten__beeld { padding-top: 0.9rem !important; }
}

/* ── 35. Thema wisselen: langzame overvloeier ── */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
html.thema-wissel, html.thema-wissel *, html.thema-wissel *::before, html.thema-wissel *::after {
  transition-duration: 0.8s !important;
}

/* ── 36. Lichte modus nog een stap gedempt ──
   Grond #CDD3D4 (zacht steengrijs) i.p.v. #DCE1E1, de zijde in main.js mee
   omlaag, kaarten en glas minder wit. Tekstkleuren een tint donkerder zodat
   ze op de donkerste plooi (#C2C9CA) nog 4,5:1 halen. */
html[data-thema="licht"] { background-color: #CDD3D4; --glas-eiland: rgba(255, 255, 255, 0.2); --glas-eiland-rand: rgba(255, 255, 255, 0.45); --glas-vulling: rgba(236, 239, 239, 0.55); --amber: #70420F; --merk-licht: #174750; }
html[data-thema="licht"] .sectie, html[data-thema="licht"] .sectie--licht, html[data-thema="licht"] .sectie--donker,
html[data-thema="licht"] .sectie--teal, html[data-thema="licht"] .voet { --zacht: #47474A; --accent: #174750; }
html[data-thema="licht"] .oog, html[data-thema="licht"] .menu__kop, html[data-thema="licht"] figcaption,
html[data-thema="licht"] .stap__nr, html[data-thema="licht"] .review__wie span, html[data-thema="licht"] .onboard__tel,
html[data-thema="licht"] .menu__prijs, html[data-thema="licht"] .profiel__rol { color: #174750 !important; }
@media (min-width: 721px) {
  html[data-thema="licht"] .sectie--hero .regel { color: #174750 !important; }
  html[data-thema="licht"] .sectie--hero .score { color: #70420F !important; }
}
html[data-thema="licht"] .statusbalk { background-color: rgba(205, 211, 212, 0.8); }
html[data-thema="licht"] .actiebalk { background: rgba(224, 229, 229, 0.8); }
html[data-thema="licht"] .strook--kaarten .strook__item.review, html[data-thema="licht"] .onboard { background: #E0E5E5 !important; }
@media (min-width: 900px) { html[data-thema="licht"] .profiel__kaart { background: rgba(255, 255, 255, 0.2) !important; } }
html[data-thema="licht"] .strook--kaarten::before, html[data-thema="licht"] .strook--kaarten::after { background: linear-gradient(90deg, #CDD3D4, transparent); }
html[data-thema="licht"] { --k3-stil-vlak: #EEF1F1; --k3-stil-zij: #A9B4B6; --k3-stil-hover: #F5F7F7; }

/* ── 37. Lichte modus: middengrijs ──
   Grond #B7C0C1 met een vleug teal, de zijde in main.js mee omlaag (donkerste
   plooi ~#ABB4B6). Tekst donkerder zodat alles op die plooi 4,5:1+ haalt:
   inkt 7,96 · zacht #38383B 5,53 · accent #103740 6,05 · amber #5A340B 5,15. */
html[data-thema="licht"] { background-color: #B7C0C1; --glas-eiland: rgba(255, 255, 255, 0.14); --glas-eiland-rand: rgba(255, 255, 255, 0.32); --glas-vulling: rgba(214, 220, 221, 0.6); --amber: #5A340B; --merk-licht: #103740; --amber-ster: #8A5417; }
html[data-thema="licht"] .sectie, html[data-thema="licht"] .sectie--licht, html[data-thema="licht"] .sectie--donker,
html[data-thema="licht"] .sectie--teal, html[data-thema="licht"] .voet { --zacht: #38383B; --accent: #103740; }
html[data-thema="licht"] .oog, html[data-thema="licht"] .menu__kop, html[data-thema="licht"] figcaption,
html[data-thema="licht"] .stap__nr, html[data-thema="licht"] .review__wie span, html[data-thema="licht"] .onboard__tel,
html[data-thema="licht"] .menu__prijs, html[data-thema="licht"] .profiel__rol, html[data-thema="licht"] .lead, html[data-thema="licht"] .fijn { color: #103740; }
html[data-thema="licht"] .lead, html[data-thema="licht"] .fijn, html[data-thema="licht"] .kist__tekst, html[data-thema="licht"] .kist__infotekst { color: #38383B !important; }
@media (min-width: 721px) {
  html[data-thema="licht"] .sectie--hero .regel { color: #103740 !important; }
  html[data-thema="licht"] .sectie--hero .score { color: #5A340B !important; }
}
html[data-thema="licht"] .statusbalk { background-color: rgba(183, 192, 193, 0.82); }
html[data-thema="licht"] .actiebalk { background: rgba(200, 207, 208, 0.82); }
html[data-thema="licht"] .strook--kaarten .strook__item.review, html[data-thema="licht"] .onboard { background: #CBD2D3 !important; }
html[data-thema="licht"] .strook--kaarten::before, html[data-thema="licht"] .strook--kaarten::after { background: linear-gradient(90deg, #B7C0C1, transparent); }
html[data-thema="licht"] { --k3-stil-vlak: #DCE2E2; --k3-stil-zij: #8E9A9C; --k3-stil-hover: #E4E9E9; }

/* Spetters van de waterrand (water.js): boven de video, onder de tekst. */
.spat { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ── 38. Snelheid: lichtbanen via transform ──
   De banen schuiven nu als één grote laag via transform (de videokaart doet
   dat zonder het scherm opnieuw te tekenen) i.p.v. background-position. */
.gloed {
  inset: -60% !important; background-size: 100% 100% !important; background-position: 0 0 !important;
  will-change: transform; animation: lichtbaan-schuif 46s ease-in-out infinite alternate !important;
}
@keyframes lichtbaan-schuif { from { transform: translate3d(-12%, -10%, 0); } to { transform: translate3d(12%, 10%, 0); } }
@media (prefers-reduced-motion: reduce) { .gloed { animation: none !important; transform: none; } }

/* ── 39. Lichte modus nog dieper + verspreide lichtbanen ──
   Grond #A4AEB0 (donkerste plooi ~#97A1A3). Tekst mee donkerder:
   inkt #161618 6,83 · zacht #2A2A2D 5,41 · accent #0C2E35 5,45 · amber #4A2A08 4,89.
   Lichtbanen: zoals de referentie meerdere smallere, verspreide strepen in
   plaats van één brede baan; in licht zowel licht- als schaduwstrepen. */
html[data-thema="licht"] { background-color: #A4AEB0; --glas-eiland: rgba(255, 255, 255, 0.12); --glas-eiland-rand: rgba(255, 255, 255, 0.28); --glas-vulling: rgba(196, 204, 205, 0.6); --amber: #4A2A08; --merk-licht: #0C2E35; --amber-ster: #6E400F; }
html[data-thema="licht"] body { color: #161618; }
html[data-thema="licht"] .sectie, html[data-thema="licht"] .sectie--licht, html[data-thema="licht"] .sectie--donker,
html[data-thema="licht"] .sectie--teal, html[data-thema="licht"] .voet { --inkt: #161618; --zacht: #2A2A2D; --accent: #0C2E35; color: #161618; }
html[data-thema="licht"] .lead, html[data-thema="licht"] .fijn, html[data-thema="licht"] .kist__tekst, html[data-thema="licht"] .kist__infotekst { color: #2A2A2D !important; }
html[data-thema="licht"] .oog, html[data-thema="licht"] .menu__kop, html[data-thema="licht"] figcaption,
html[data-thema="licht"] .stap__nr, html[data-thema="licht"] .review__wie span, html[data-thema="licht"] .onboard__tel,
html[data-thema="licht"] .menu__prijs, html[data-thema="licht"] .profiel__rol { color: #0C2E35 !important; }
@media (min-width: 721px) {
  html[data-thema="licht"] .sectie--hero .regel { color: #0C2E35 !important; }
  html[data-thema="licht"] .sectie--hero .score { color: #4A2A08 !important; }
}
html[data-thema="licht"] .statusbalk { background-color: rgba(164, 174, 176, 0.85); }
html[data-thema="licht"] .actiebalk { background: rgba(180, 189, 191, 0.85); }
html[data-thema="licht"] .strook--kaarten .strook__item.review, html[data-thema="licht"] .onboard { background: #B6BFC0 !important; }
html[data-thema="licht"] .strook--kaarten::before, html[data-thema="licht"] .strook--kaarten::after { background: linear-gradient(90deg, #A4AEB0, transparent); }
html[data-thema="licht"] { --k3-stil-vlak: #CDD4D5; --k3-stil-zij: #7C888A; --k3-stil-hover: #D6DCDD; }

/* verspreide lichtbanen */
.gloed {
  background:
    linear-gradient(116deg,
      rgba(255,255,255,0) 0%,  rgba(255,255,255,0.07) 5%,  rgba(255,255,255,0) 9%,
      rgba(255,255,255,0) 15%, rgba(255,255,255,0.05) 18%, rgba(255,255,255,0) 21%,
      rgba(255,255,255,0) 29%, rgba(255,255,255,0.09) 34%, rgba(255,255,255,0) 39%,
      rgba(255,255,255,0) 46%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0) 50%,
      rgba(255,255,255,0) 57%, rgba(255,255,255,0.08) 62%, rgba(255,255,255,0) 67%,
      rgba(255,255,255,0) 74%, rgba(255,255,255,0.05) 77%, rgba(255,255,255,0) 80%,
      rgba(255,255,255,0) 87%, rgba(255,255,255,0.07) 92%, rgba(255,255,255,0) 97%) !important;
  background-size: 100% 100% !important;
}
html[data-thema="licht"] .gloed {
  mix-blend-mode: soft-light !important; opacity: 1;
  background:
    linear-gradient(116deg,
      rgba(255,255,255,0) 0%,  rgba(255,255,255,0.45) 5%,  rgba(255,255,255,0) 9%,
      rgba(0,0,0,0) 13%,       rgba(0,0,0,0.30) 17%,       rgba(0,0,0,0) 21%,
      rgba(255,255,255,0) 28%, rgba(255,255,255,0.55) 34%, rgba(255,255,255,0) 40%,
      rgba(0,0,0,0) 45%,       rgba(0,0,0,0.25) 48%,       rgba(0,0,0,0) 51%,
      rgba(255,255,255,0) 56%, rgba(255,255,255,0.5) 62%,  rgba(255,255,255,0) 68%,
      rgba(0,0,0,0) 73%,       rgba(0,0,0,0.3) 77%,        rgba(0,0,0,0) 81%,
      rgba(255,255,255,0) 86%, rgba(255,255,255,0.45) 92%, rgba(255,255,255,0) 97%) !important;
  background-size: 100% 100% !important;
}

/* ── 40. Lichtbanen zachter ──
   Een vervaging over de laag maakt de randen van de strepen zacht. De laag
   beweegt via transform, dus de vervaging wordt niet elke frame opnieuw berekend. */
.gloed { filter: blur(26px); }

/* ── 41. Hero in licht: tekst blijft licht op de donkere video ── */
html[data-thema="licht"] .sectie--hero { --inkt: #F5F5F7; --zacht: #D2D2D7; color: #F5F5F7 !important; }
html[data-thema="licht"] .sectie--hero h1, html[data-thema="licht"] .sectie--hero .lead { color: #F5F5F7 !important; }
html[data-thema="licht"] .sectie--hero .lead { color: #D2D2D7 !important; }
@media (max-width: 720px) {
  html[data-thema="licht"] .sectie--hero .regel { color: #A9D4DA !important; }
  html[data-thema="licht"] .sectie--hero .score { color: #E2A85C !important; }
}

/* ── 42. Doos: kleiner kaartje in de kleur van de doos ──
   Het kaartje is zo breed als zijn tekst, maximaal ruim de helft van de doos
   (de opening is ~63%), en wordt in rust niet meer extra opgeschaald, zodat het
   echt in de doos past. Kleur: het teal van de doos, in beide thema's. */
.kist__chip {
  width: auto !important; max-width: 58%; gap: 0.5rem; padding: 5px 14px 5px 5px !important;
  background: rgba(16, 51, 58, 0.92) !important; border: 1px solid rgba(169, 212, 218, 0.3) !important;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html[data-thema="licht"] .kist__chip { background: rgba(24, 72, 80, 0.92) !important; border-color: rgba(255, 255, 255, 0.25) !important; }
.kist__chipicoon { width: 28px !important; height: 28px !important; background: rgba(169, 212, 218, 0.16) !important; border-color: rgba(169, 212, 218, 0.4) !important; color: #A9D4DA !important; }
.kist__chipicoon svg { width: 14px; height: 14px; }
.kist__nr { font-size: 0.55rem !important; color: #A9D4DA !important; }
.kist__chiptitel { font-size: 0.74rem !important; color: #F5F5F7 !important; }
.kist[data-kist-js] .kist__chip.is-binnen { transform: translateY(0) scale(1) !important; }
@keyframes kistIn { 0% { transform: translateY(-90px) scale(0.8); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes kistUit { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(130px) scale(0.8); opacity: 0; } }

/* ── 43. Doos: geen blauwig accent, meer contrast in licht ──
   Nummer en icoon in het kaartje gebroken wit i.p.v. licht-teal. In de lichte
   modus is de doos zelf voller teal, zodat hij afsteekt tegen de grijze grond. */
.kist__nr { color: rgba(245, 245, 247, 0.62) !important; }
.kist__chipicoon { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.28) !important; color: #F5F5F7 !important; }
html[data-thema="licht"] .kist__vleugel { fill: rgba(16, 55, 64, 0.55); }
html[data-thema="licht"] .kist__rand    { fill: rgba(16, 55, 64, 0.40); }
html[data-thema="licht"] .kist__vouw    { fill: rgba(16, 55, 64, 0.32); }
html[data-thema="licht"] .kist__plank   { fill: rgba(16, 55, 64, 0.50); }
html[data-thema="licht"] .kist__lijf {
  background: rgba(16, 55, 64, 0.22) !important; border-color: rgba(16, 55, 64, 0.45) !important;
  box-shadow: 0 18px 40px -22px rgba(10, 30, 35, 0.45) !important;
}
html[data-thema="licht"] .kist__stip::before { background: rgba(16, 55, 64, 0.35) !important; }
html[data-thema="licht"] .kist__stip[aria-current="true"]::before { background: #103740 !important; }

/* ── 44. Vloeibaar bolletje onder de doos (vloeiend.js) ──
   Het actieve stipje zelf wordt gewoon een stipje; de druppel erover laat de
   stand zien en stroomt naar het volgende. */
.kist__stippen.met-druppel { position: relative; }
.kist__stippen.met-druppel .kist__stip[aria-current="true"]::before { transform: none; background: rgba(244, 241, 236, 0.45); }
html[data-thema="licht"] .kist__stippen.met-druppel .kist__stip[aria-current="true"]::before { background: rgba(16, 55, 64, 0.35) !important; }
.kist__druppel {
  position: absolute; top: 50%; height: 11px; width: 11px; margin-top: -5.5px; border-radius: 999px;
  background: #A9D4DA; pointer-events: none; box-shadow: 0 0 10px rgba(169, 212, 218, 0.35);
}
html[data-thema="licht"] .kist__druppel { background: #103740; box-shadow: none; }

/* ── 45. Vloeibaar bolletje, nu herbruikbaar (doos en Karim) ── */
.stip-druppel {
  position: absolute; top: 50%; border-radius: 999px; pointer-events: none;
  background: #A9D4DA; box-shadow: 0 0 10px rgba(169, 212, 218, 0.35);
}
html[data-thema="licht"] .stip-druppel { background: #103740; box-shadow: none; }
.kist__druppel { display: none; }
.profiel__stippen.met-druppel { position: relative; }
.profiel__stippen.met-druppel .profiel__stip[aria-current="true"]::before { background: transparent !important; }

/* ── 46. Diensten in licht: geen fel wit vlak ──
   De tegelbalk had 70% wit; nu een lichte teal-getinte glaslaag die past bij
   de doos en de rest van de lichte modus. */
html[data-thema="licht"] .diensten { background: rgba(16, 55, 64, 0.10) !important; border-color: rgba(16, 55, 64, 0.22) !important; }
html[data-thema="licht"] .diensten__paneel { background: transparent !important; border-color: rgba(16, 55, 64, 0.18) !important; }
html[data-thema="licht"] .chip { color: #161618; border-color: rgba(16, 55, 64, 0.32); background: rgba(255, 255, 255, 0.12); }
html[data-thema="licht"] .chip .chip__prijs { color: #0C2E35; }

/* ── 47. Telefoon: Karim en "Wat je niet ziet" met lucht in één scherm ──
   Doel ~550px van de ~673px zichtbare ruimte, zodat er boven en onder lucht
   overblijft in plaats van net passen. */
@media (max-width: 720px) {
  /* Wat je niet ziet */
  #schurk .lead { font-size: 0.95rem !important; line-height: 1.55 !important; padding: 0.85rem 1rem !important; margin-top: 0.9rem !important; }
  .schurk-rij__beeld { margin-top: 1.1rem !important; }
  .schurk-rij__beeld img { height: 190px !important; }
  .schurk-rij__beeld figcaption { margin-top: 0.55rem !important; }
  /* Karim */
  .profiel__foto { max-width: 100px !important; border-radius: 0.95rem !important; }
  .profiel__nav { margin-top: 0.75rem !important; gap: 1rem !important; }
  .profiel__pijl { width: 2.4rem !important; height: 2.4rem !important; }
  .profiel__kaart { padding: 1rem 1rem 0.95rem !important; margin-top: 0.75rem !important; }
  .profiel__naam { font-size: 1.45rem !important; }
  .profiel__rol { margin-bottom: 0.45rem !important; }
  .profiel__tekst { font-size: 0.9rem !important; line-height: 1.5 !important; }
  .profiel__kanalen { margin-top: 0.75rem !important; gap: 0.6rem !important; }
  .profiel__kanaal { width: 2.5rem !important; height: 2.5rem !important; }
  #gids .blad--smal + .blad { margin-top: 0.4rem; }
}

/* ── 48. Desktop: blokken passen met marge in het scherm ── */
@media (min-width: 721px) {
  /* Wat je niet ziet: foto niet hoger dan het scherm toelaat */
  .schurk-rij__beeld img { max-height: min(62vh, 480px); width: auto; max-width: 100%; object-fit: cover; border-radius: 16px; margin-inline: auto; display: block; }
  .schurk-rij { align-items: center; }
  /* Wat we doen: kop, uitleg, kiezer en knop samen binnen één scherm */
  #tarieven .lead { margin-top: 1rem !important; }
  .diensten-blok { margin-top: 1.25rem !important; }
  .diensten { max-height: min(48vh, 360px); }
  .diensten__stapel { max-width: min(15rem, 26vh) !important; }
  .diensten-blok + .menu .fijn { margin-top: 1rem !important; }
  .diensten-blok + .menu .knoppen { margin-top: 1rem !important; }
  /* Doos: iets kleiner, zodat er boven en onder marge overblijft */
  .kist__toneel { max-width: 360px !important; margin-top: 2.25rem !important; }
  .kist__podium { gap: 1.1rem !important; }
}
@media (min-width: 721px) {
  .diensten { max-height: none !important; }
  .diensten__stapel { max-width: min(13rem, 24vh) !important; }
  #tarieven .lead { max-width: 52ch !important; }
  .diensten-blok { margin-top: 1rem !important; }
  /* de losse knop onder de kiezer is overbodig: elke dienstkaart heeft een eigen prijsknop */
  .diensten-blok + .menu .knoppen { display: none !important; }
}
@media (min-width: 900px) {
  /* kiezer compacter: rijen 3rem uit elkaar in een paneel van 20rem i.p.v. 24rem */
  .diensten__paneel { min-height: 20rem !important; }
  .dienstrij { transform: translateY(calc((var(--rij) + 0.5) * 3rem)) !important; }
  #tarieven .lead { max-width: 60ch !important; font-size: 1.05rem; }
}

/* ── 49. Wat we doen op desktop: twee kolommen ──
   Links de kop, het verhaal en de kleine lettertjes; rechts de kiezer met de
   fotokaarten (weer op normale maat) en hun prijsknoppen. Mobiel blijft zoals
   het was (één kolom). */
@media (min-width: 900px) {
  .wat-we-doen {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr);
    grid-template-areas: "kop kiezer" "fijn kiezer"; grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
    max-width: var(--blad); margin: var(--tussen) auto 0; padding-inline: var(--rand);
  }
  .wat-we-doen > #tarieven { grid-area: kop; margin: 0 !important; max-width: none; padding: 0; text-align: left; align-self: end; }
  .wat-we-doen > #tarieven h2, .wat-we-doen > #tarieven .lead { margin-inline: 0 !important; text-align: left; }
  .wat-we-doen > #tarieven .lead { max-width: 34ch !important; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); }
  .wat-we-doen > .diensten-blok { grid-area: kiezer; margin: 0 !important; padding: 0; max-width: none; align-self: center; }
  .wat-we-doen > .diensten-blok + .menu { grid-area: fijn; margin: 0 !important; max-width: none; padding: 0; text-align: left; }
  .wat-we-doen > .diensten-blok + .menu .fijn { margin-top: 1.25rem !important; max-width: 34ch; margin-inline: 0 !important; }
  /* kiezer en fotokaarten weer op normale maat */
  .diensten__paneel { min-height: 24rem !important; }
  .dienstrij { transform: translateY(calc((var(--rij) + 0.5) * 3.4rem)) !important; }
  .diensten__stapel { max-width: min(16.5rem, 34vh) !important; }
}

/* ── 50. Aanvraagvenster: winstscan-gevoel in KB-stijl ──
   Ronde kaart, verende voortgang met glans en een gloeiend puntje, opties als
   kaarten met letters, een vinkje dat opploft, en vragen die van onder (of bij
   Terug van boven) in beeld glijden. Bron: de winstscan op viralconversions.io. */
dialog.onboard {
  width: min(460px, calc(100vw - 1.5rem)); max-height: calc(100svh - 2rem); overflow: auto;
  border-radius: 28px !important; padding: clamp(1.25rem, 4vw, 1.75rem) !important;
  background: rgba(24, 30, 31, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #F5F5F7;
}
dialog.onboard::backdrop { background: rgba(8, 10, 10, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-thema="licht"] dialog.onboard { background: rgba(214, 220, 221, 0.95) !important; border-color: rgba(255, 255, 255, 0.6) !important; color: #161618; box-shadow: 0 30px 80px -30px rgba(10, 30, 35, 0.45), inset 0 1px 0 #fff !important; }
.onboard__kop { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.onboard__tel { font-size: 0.8rem !important; font-weight: 700; letter-spacing: 0.04em !important; text-transform: none !important; color: #A9D4DA !important; margin: 0; }
html[data-thema="licht"] .onboard__tel { color: #0C2E35 !important; }
.onboard__sluit { margin-left: auto; width: 34px; height: 34px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.08); color: inherit; font-size: 1.25rem; cursor: pointer; transition: background-color 0.2s, transform 0.2s; }
.onboard__sluit:hover { background: rgba(255, 255, 255, 0.16); transform: rotate(90deg); }
html[data-thema="licht"] .onboard__sluit { background: rgba(0, 0, 0, 0.06); }

/* voortgang */
.onboard__balk { position: relative; height: 10px !important; border-radius: 999px; background: rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); margin-bottom: 1.6rem; overflow: visible !important; }
html[data-thema="licht"] .onboard__balk { background: rgba(16, 55, 64, 0.12) !important; }
.onboard__balk > span { position: relative; display: block; height: 100%; border-radius: 999px; overflow: visible;
  background: linear-gradient(90deg, #22656F, #3C8C97 70%, #A9D4DA) !important;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.onboard__balk > span::before { content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%) no-repeat;
  background-size: 45% 100%; background-position: -60% 0; }
.onboard__balk.go > span::before { animation: ob-glans 0.9s ease 0.25s; }
@keyframes ob-glans { to { background-position: 160% 0; } }
.onboard__balk > span::after { content: ''; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px #3C8C97, 0 0 16px 4px rgba(169, 212, 218, 0.55); }
.onboard__balk.go > span::after { animation: ob-tip 0.6s ease 0.45s; }
@keyframes ob-tip { 40% { transform: scale(1.6); } }
.onboard__cf { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 2px; background: var(--c); pointer-events: none; z-index: 2;
  animation: ob-cf 0.85s cubic-bezier(0.15, 0.8, 0.3, 1) forwards; }
@keyframes ob-cf { from { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(0.3); opacity: 0; } }

/* vraag in beeld */
.onboard__stap.is-in { animation: ob-in 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both !important; }
dialog.onboard[data-richting="terug"] .onboard__stap.is-in { animation-name: ob-in-terug !important; }
@keyframes ob-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ob-in-terug { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
.onboard__vraag { font-size: clamp(1.6rem, 6vw, 2rem) !important; line-height: 1.15 !important; margin: 0 0 1.2rem !important; text-wrap: balance; }

/* opties als kaarten */
.onboard .keuzes { display: grid !important; gap: 10px; }
.onboard .keuze {
  display: flex !important; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 15px !important; border-radius: 14px !important; border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important; color: inherit !important; font: inherit; font-size: 1rem !important; font-weight: 600;
  cursor: pointer; transition: border-color 0.2s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.25s, background-color 0.2s !important;
}
html[data-thema="licht"] .onboard .keuze { border-color: rgba(16, 55, 64, 0.2) !important; background: rgba(255, 255, 255, 0.35) !important; }
.onboard .keuze::after { content: none !important; }
.onboard .keuze:hover { border-color: rgba(169, 212, 218, 0.6) !important; transform: translateX(3px); }
.keuze__letter { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font: 800 12px/1 var(--sans);
  border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: inherit; opacity: 0.8; }
html[data-thema="licht"] .keuze__letter { border-color: rgba(16, 55, 64, 0.25); background: rgba(255, 255, 255, 0.4); }
.keuze__tekst { flex: 1; min-width: 0; }
.keuze__vink { margin-left: auto; font-weight: 900; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1); }
.onboard .keuze[aria-pressed="true"] { background: #22656F !important; border-color: #22656F !important; color: #fff !important; animation: ob-pop 0.38s cubic-bezier(0.3, 1.7, 0.5, 1); }
.onboard .keuze[aria-pressed="true"] .keuze__letter { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); color: #fff; opacity: 1; }
.onboard .keuze[aria-pressed="true"] .keuze__vink { opacity: 1; transform: scale(1); }
.onboard .keuzes.picked .keuze:not([aria-pressed="true"]):not([data-meer]) { opacity: 0.35; }
@keyframes ob-pop { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }

/* velden en knoppen */
.onboard .veld label { font-size: 0.85rem; font-weight: 600; }
.onboard .veld input { border: 1.5px solid rgba(255, 255, 255, 0.14) !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.05) !important; padding: 13px 14px !important; font-size: 1rem !important; transition: border-color 0.2s, box-shadow 0.2s; }
.onboard .veld input:focus { border-color: #3C8C97 !important; box-shadow: 0 0 0 4px rgba(60, 140, 151, 0.25); outline: none; }
html[data-thema="licht"] .onboard .veld input { border-color: rgba(16, 55, 64, 0.25) !important; background: rgba(255, 255, 255, 0.45) !important; color: #161618 !important; }
.onboard__voet { display: flex; gap: 0.6rem; margin-top: 1.4rem; padding-bottom: 6px; }
.onboard__voet .knop { flex: 1; justify-content: center; }
.onboard__voet [data-onboard-klaar] { background: var(--k3-wa-vlak) !important; --k3-zij: var(--k3-wa-zij); animation: ob-klaar 1.6s ease-in-out 0.6s 2; }
@keyframes ob-klaar { 50% { transform: translateY(-2px) scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
  .onboard__stap.is-in, .onboard .keuze[aria-pressed="true"], .onboard__balk.go > span::before, .onboard__balk.go > span::after, .onboard__voet [data-onboard-klaar] { animation: none !important; }
}
.onboard__voet .knop { white-space: nowrap; min-height: 52px; padding-inline: 1rem !important; }
.onboard__voet [data-onboard-terug] { flex: 0 0 auto; }
.onboard__voet [data-onboard-klaar], .onboard__voet [data-onboard-verder] { flex: 1 1 auto; }

/* ── 51. Aanvraagvenster in licht: één consistent palet ──
   Kaart #CBD2D3, alle vlakken (opties, velden, letters, balk) in dezelfde
   teal-tint, tekst #161618 / #2A2A2D, accent #0C2E35 en gekozen = #22656F.
   Labels in beide thema's in gewone letters, zoals de rest van het venster. */
.onboard .veld label { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.88rem !important; font-weight: 600 !important; }
html[data-thema="licht"] dialog.onboard { background: #CBD2D3 !important; border-color: rgba(16, 55, 64, 0.16) !important; color: #161618 !important; box-shadow: 0 30px 80px -30px rgba(10, 30, 35, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; }
html[data-thema="licht"] .onboard__vraag { color: #161618 !important; }
html[data-thema="licht"] .onboard__tel { color: #0C2E35 !important; }
html[data-thema="licht"] .onboard__sluit { background: rgba(16, 55, 64, 0.1) !important; color: #161618; }
html[data-thema="licht"] .onboard__balk { background: rgba(16, 55, 64, 0.16) !important; box-shadow: inset 0 1px 2px rgba(10, 30, 35, 0.15); }
html[data-thema="licht"] .onboard__balk > span { background: linear-gradient(90deg, #174A52, #22656F 70%, #2F7D88) !important; }
html[data-thema="licht"] .onboard__balk > span::after { box-shadow: 0 0 0 3px #22656F, 0 0 12px 3px rgba(34, 101, 111, 0.35); }
html[data-thema="licht"] .onboard .keuze { background: rgba(16, 55, 64, 0.06) !important; border-color: rgba(16, 55, 64, 0.22) !important; color: #161618 !important; }
html[data-thema="licht"] .onboard .keuze:hover { border-color: #22656F !important; }
html[data-thema="licht"] .keuze__letter { background: rgba(16, 55, 64, 0.08) !important; border-color: rgba(16, 55, 64, 0.28) !important; color: #0C2E35; }
html[data-thema="licht"] .onboard .keuze[aria-pressed="true"] { background: #22656F !important; border-color: #22656F !important; color: #FFFFFF !important; }
html[data-thema="licht"] .onboard .keuze[aria-pressed="true"] .keuze__letter { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.45) !important; color: #fff; }
html[data-thema="licht"] .onboard .veld label { color: #2A2A2D !important; }
html[data-thema="licht"] .onboard .veld input { background: rgba(16, 55, 64, 0.06) !important; border-color: rgba(16, 55, 64, 0.25) !important; color: #161618 !important; }
html[data-thema="licht"] .onboard .veld input:focus { border-color: #22656F !important; box-shadow: 0 0 0 4px rgba(34, 101, 111, 0.18); }
html[data-thema="licht"] .onboard .fijn { color: #2A2A2D !important; }
html[data-thema="licht"] .onboard .knop--stil { background: #E6EAEA !important; color: #161618 !important; --k3-zij: #8E9A9C; }
html[data-thema="licht"] .onboard .knop--stil:hover { background: #EEF1F1 !important; }

/* Vaste vensterhoogte: knoppen onderaan op een vaste plek */
.onboard__form { display: flex; flex-direction: column; }
.onboard__voet { margin-top: auto !important; padding-top: 1.4rem; }
/* venster: kop en knoppen vast, alleen de vraag zelf scrollt als het moet */
dialog.onboard { max-height: calc(100svh - 24px) !important; overflow: hidden !important; }
.onboard__stap:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 4px; margin: -2px -2px 0; }
@media (max-width: 720px) {
  .onboard .keuzes { gap: 8px !important; }
  .onboard .keuze { padding: 11px 13px !important; font-size: 0.96rem !important; }
  .onboard__vraag { font-size: 1.55rem !important; margin-bottom: 0.9rem !important; }
  .onboard__balk { margin-bottom: 1.2rem !important; }
  .onboard__kop { margin-bottom: 0.7rem !important; }
}

/* ── 52. Geruststelling onder de knoppen ──
   Eén regel die de drempel weghaalt: gratis, pas betalen na afloop, 4,9 sterren. */
.cta-zeker { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--zacht); text-align: center; }
.contact-rij__cta .cta-zeker { text-align: inherit; }
.sectie--hero .cta-zeker { color: #D2D2D7; }
@media (max-width: 720px) { .sectie--hero .cta-zeker { display: none; } }
html[data-thema="licht"] .cta-zeker { color: #2A2A2D; }
html[data-thema="licht"] .sectie--hero .cta-zeker { color: #D2D2D7; }

/* Genie-effect (main.js) vervangt de oude in-animatie van het venster */
dialog.onboard[open] { animation: none !important; }

/* Morph-laag van het genie-effect: knopkleur die wegvloeit in het venster */
.onboard__morph { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; }

/* ── 53. Morph soepel: geen glas-vervaging tijdens de animatie ──
   De achtergrondvervaging moet anders elk beeld opnieuw berekend worden terwijl
   het venster schaalt en van vorm verandert. Tijdens de morph een effen kleur
   die er hetzelfde uitziet; het glas komt terug zodra het venster staat. */
dialog.onboard.is-morph { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #1B2122 !important; will-change: transform, clip-path; }
html[data-thema="licht"] dialog.onboard.is-morph { background: #CBD2D3 !important; }

/* ── 54. Vragenvenster op de zijde ──
   Zelfde bewegende zijde als de pagina, als eigen achtergrond van het venster
   (geen glas-vervaging meer: rustiger en soepeler bij het openen). */
dialog.onboard { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #161A1B !important; isolation: isolate; }
html[data-thema="licht"] dialog.onboard { background: #A4AEB0 !important; }
.onboard__zijde { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.1; border-radius: inherit; }
html[data-thema="licht"] .onboard__zijde { opacity: 0.22; }
dialog.onboard > form { position: relative; z-index: 1; }
dialog.onboard.is-morph { background: #161A1B !important; will-change: clip-path; }
html[data-thema="licht"] dialog.onboard.is-morph { background: #A4AEB0 !important; }

/* ── 55. Popup rustig in en uit ──
   Waas (vervaging + dimmen) achter het venster vloeit mee met de morph, ook
   bij sluiten; zo verdwijnt er niets ineens. */
dialog.onboard[open]::backdrop { animation: waas-in 0.62s cubic-bezier(0.5, 0, 0.15, 1) both !important; }
dialog.onboard.is-sluit::backdrop { animation: waas-uit 0.44s cubic-bezier(0.4, 0, 0.2, 1) both !important; }
@keyframes waas-uit { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.onboard[open]::backdrop, dialog.onboard.is-sluit::backdrop { animation: none !important; } }
dialog.onboard.is-warm:not([open]) { display: block !important; visibility: hidden !important; pointer-events: none !important; position: fixed; inset: 0; margin: auto; }

/* ── 56. Karim op de telefoon: grotere foto, toch alles in beeld ──
   De foto groeit mee met de schermhoogte: op een gewone telefoon (±812 hoog)
   ~170px, op een lage telefoon kleiner, zodat kop, foto, pijltjes en kaart
   samen met ruime marge tussen kopbalk en actiebalk blijven passen. */
@media (max-width: 720px) {
  .profiel__foto { width: clamp(110px, calc(100svh - 642px), 180px) !important; max-width: none !important; border-radius: 1.2rem !important; }
}

/* ── 57. Vragen passen altijd zonder scrollen ──
   main.js (pasIn) zet .is-krap op een stap die niet past, en .is-twee als
   ook dat niet genoeg is: opties dan als tegels in twee kolommen. */
.onboard__stap.is-krap .onboard__vraag { font-size: clamp(1.3rem, 5.6vw, 1.5rem) !important; margin-bottom: 0.6rem !important; }
.onboard__stap.is-krap .keuzes { gap: 6px !important; }
.onboard__stap.is-krap .keuze { padding-top: 8px !important; padding-bottom: 8px !important; }
.onboard__stap.is-twee .keuzes { grid-template-columns: 1fr 1fr !important; }
.onboard__stap.is-twee .keuze { min-height: 52px; align-items: center; }
.onboard__stap.is-twee .keuze__tekst { font-size: 0.9rem; line-height: 1.25; }
/* twee kolommen: nette tegels die meekrimpen, zonder letterbadge */
.onboard__stap.is-krap, .onboard__stap.is-twee { overflow-x: hidden !important; }
.onboard__stap.is-krap .fijn { font-size: 0.8rem !important; line-height: 1.4 !important; margin-top: 0.6rem !important; }
.onboard__stap.is-twee .keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.onboard__stap.is-twee .keuze { min-width: 0; min-height: 56px; padding: 10px 12px !important; }
.onboard__stap.is-twee .keuze__letter { display: none !important; }
.onboard__stap.is-twee .keuze__tekst { font-size: 0.9rem !important; line-height: 1.25; overflow-wrap: normal; hyphens: manual; }

/* ── 58. Slotpagina: hoe je je prijs krijgt ── */
.slot__stappen { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.slot__stappen li { display: grid; grid-template-columns: 28px 1fr; gap: 0.7rem; align-items: start; font-size: 0.95rem; line-height: 1.45; }
.slot__stappen b { font-weight: 650; }
.slot__nr { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; background: rgba(169, 212, 218, 0.14); color: #A9D4DA; }
.slot__bubbel { margin-top: 1.1rem; padding: 0.75rem 0.9rem 0.8rem; border-radius: 16px 16px 4px 16px; background: rgba(31, 122, 85, 0.22); border: 1px solid rgba(31, 122, 85, 0.35); margin-left: 1.5rem; }
.slot__label { margin: 0 0 0.3rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.slot__tekst { margin: 0; font-size: 0.85rem; line-height: 1.45; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
html[data-thema="licht"] .slot__nr { background: rgba(16, 55, 64, 0.1); color: #103740; }
html[data-thema="licht"] .slot__bubbel { background: rgba(31, 122, 85, 0.12); border-color: rgba(31, 122, 85, 0.25); color: #161618; }
.onboard__stap--slot.is-krap .slot__tekst { -webkit-line-clamp: 4; }
.onboard__stap--slot.is-krap .slot__stappen { gap: 0.45rem; }
.onboard__stap--slot.is-krap .slot__stappen li { font-size: 0.88rem; }

/* ── 59. Terugknop rustig (niet meer fel wit) ── */
.onboard__voet [data-onboard-terug] { background: rgba(255, 255, 255, 0.08) !important; color: inherit !important; box-shadow: none !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }
html[data-thema="licht"] .onboard__voet [data-onboard-terug] { background: rgba(16, 55, 64, 0.07) !important; border-color: rgba(16, 55, 64, 0.14) !important; color: #103740 !important; }

/* ── 60. Lichte popup: licht en rustig, zijde nauwelijks zichtbaar ── */
html[data-thema="licht"] dialog.onboard, html[data-thema="licht"] dialog.onboard.is-morph { background: #DCE1E2 !important; }
html[data-thema="licht"] .onboard__zijde { opacity: 0.1 !important; }
/* Terug als rond pijltje: Verder en de WhatsApp-knop passen er altijd naast */
.onboard__voet { flex-wrap: nowrap !important; }
.onboard__voet .onboard__terug { flex: 0 0 52px !important; width: 52px; min-width: 52px; padding: 0 !important; display: inline-grid; place-items: center; border-radius: 999px !important; }
.onboard__voet [data-onboard-klaar] { min-width: 0; }
.slot__tekst { -webkit-line-clamp: 4; }
/* kleinste stand (lage telefoons): bijzaken weg, de vraag en opties blijven */
.onboard__stap.is-mini .fijn, .onboard__stap.is-mini .slot__bubbel { display: none !important; }
.onboard__stap.is-mini .onboard__vraag { font-size: 1.25rem !important; margin-bottom: 0.5rem !important; }
.onboard__stap.is-mini .keuze { min-height: 0 !important; }

/* ── 61. Popup-tinten bijgesteld ──
   Licht: zelfde tint als de kaarten op de lichte pagina, zodat het past.
   Donker: een tikje dieper dan de pagina. */
html[data-thema="licht"] dialog.onboard, html[data-thema="licht"] dialog.onboard.is-morph { background: #BCC4C5 !important; }
dialog.onboard, dialog.onboard.is-morph { background: #111415 !important; }
html[data-thema="licht"] dialog.onboard, html[data-thema="licht"] dialog.onboard.is-morph { background: #BCC4C5 !important; }
.slot__stappen { gap: 0.9rem; margin-top: 0.6rem; }
.slot__stappen li { font-size: 1.05rem; align-items: center; }

/* ── 62. Wisselend woord in het merkteal ──
   Zelfde tint als de knoppen en het logo (#22656F), opgehelderd zodat het op
   de donkere video leesbaar blijft; de glans in een lichtere teal i.p.v. wit. */
.dia__woord { background-image: linear-gradient(110deg, #3F98A5 0%, #3F98A5 38%, #9AD6DE 50%, #3F98A5 62%, #3F98A5 100%) !important; }

/* ── 63. Zijde terug in de popup, antwoorden op effen kaarten ──
   De opties waren bijna doorzichtig, waardoor de zijdestrepen achter de tekst
   liepen. Nu effen kaarten: de tekst staat op een rustig vlak en de zijde mag
   rondom weer zichtbaar zijn. Niet-gekozen opties dimmen minder ver. */
.onboard__zijde { opacity: 0.32 !important; }
html[data-thema="licht"] .onboard__zijde { opacity: 0.35 !important; }
.onboard .keuze { background: #1C2223 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #F5F5F7 !important; }
.onboard .keuze:hover { background: #222A2B !important; }
.keuze__letter { opacity: 1 !important; color: #A9D4DA !important; border-color: rgba(169, 212, 218, 0.35) !important; background: rgba(169, 212, 218, 0.08) !important; }
html[data-thema="licht"] .onboard .keuze { background: #E9EDEE !important; border-color: rgba(16, 55, 64, 0.16) !important; color: #161618 !important; }
html[data-thema="licht"] .onboard .keuze:hover { background: #F2F4F5 !important; }
html[data-thema="licht"] .keuze__letter { color: #103740 !important; border-color: rgba(16, 55, 64, 0.3) !important; background: rgba(16, 55, 64, 0.06) !important; }
.onboard .keuze[aria-pressed="true"], html[data-thema="licht"] .onboard .keuze[aria-pressed="true"] { background: #22656F !important; border-color: #22656F !important; color: #fff !important; }
.onboard .keuze[aria-pressed="true"] .keuze__letter { color: #fff !important; background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.45) !important; }
.onboard .keuzes.picked .keuze:not([aria-pressed="true"]):not([data-meer]) { opacity: 0.6 !important; }
/* tekst rondom ook steviger */
.onboard .fijn { opacity: 1 !important; color: #C5CDCF !important; }
html[data-thema="licht"] .onboard .fijn { color: #2A2A2D !important; }

/* ── 64. Morph alleen met transform/opacity ── */
dialog.onboard.is-morph { will-change: transform, opacity !important; clip-path: none !important; }
dialog.onboard[open]::backdrop { animation-duration: 0.56s !important; }
dialog.onboard.is-sluit::backdrop { animation-duration: 0.36s !important; }

/* ── 65. Lichte popup: zijde met meer tekening, zachtere vakjes ──
   De lichte zijde heeft van zichzelf weinig verschil tussen plooi en glans;
   met contrast/helderheid op het (kleine) doek wordt de tekening zichtbaar.
   De antwoordvakjes een tint lichter dan het venster in plaats van bijna wit. */
html[data-thema="licht"] .onboard__zijde { opacity: 0.55 !important; filter: grayscale(0.6) contrast(1.7); }
html[data-thema="licht"] .onboard .keuze { background: #D2D8D9 !important; border-color: rgba(16, 55, 64, 0.14) !important; }
html[data-thema="licht"] .onboard .keuze:hover { background: #D9DEDF !important; }
html[data-thema="licht"] .onboard__voet [data-onboard-terug] { background: #D2D8D9 !important; }

/* ── 66. Kleine correcties popup ──
   - WhatsApp-knop blijft groen bij hover (de algemene hover maakte hem blauw).
   - Hover op een antwoord geldt niet voor het gekozen antwoord (in licht werd
     het gekozen vakje anders wit met witte tekst).
   - Zijde in de donkere popup iets rustiger. */
.onboard__voet [data-onboard-klaar]:hover { background: var(--k3-wa-hover) !important; --k3-zij: var(--k3-wa-zij); }
.onboard .keuze[aria-pressed="true"]:hover, html[data-thema="licht"] .onboard .keuze[aria-pressed="true"]:hover { background: #2A7480 !important; border-color: #2A7480 !important; color: #fff !important; }
.onboard__zijde { opacity: 0.2 !important; }
html[data-thema="licht"] .onboard__zijde { opacity: 0.55 !important; }
/* simpele popup: waas loopt gelijk op met het venster */
dialog.onboard[open]::backdrop { animation-duration: 0.42s !important; }
dialog.onboard.is-sluit::backdrop { animation-duration: 0.24s !important; }
.onboard__morph { display: none !important; }

/* ── 67. Snelheid: zijde komt pas na het laden, zacht ingefaded ── */
.zijde { transition: opacity 0.9s ease; }
.zijde:not(.is-klaar) { opacity: 0 !important; }

/* ── 68. Sterren in licht: echt goud i.p.v. bruin-oranje ──
   Op de grijze lichte grond werd amber donkerbruin. Nu helder goud met een
   subtiele donkere rand (blijft staan op het grijs); het cijfer zelf gewoon in
   de inkt. Donker en de hero (op de video) houden hun warme amber. */
html[data-thema="licht"] .review__sterren { color: #E8A817 !important; text-shadow: 0 0 1px rgba(70, 45, 0, 0.55), 0 1px 1px rgba(70, 45, 0, 0.25); }
html[data-thema="licht"] .score { color: #161618 !important; }
html[data-thema="licht"] .score__ster { color: #E8A817; text-shadow: 0 0 1px rgba(70, 45, 0, 0.55), 0 1px 1px rgba(70, 45, 0, 0.25); }
html[data-thema="licht"] .sectie--hero .score, html[data-thema="licht"] .sectie--hero .score__ster { color: #E2A85C !important; text-shadow: none; }
/* bijgesteld: goud viel uit het koele lichte palet; sterren in het merkteal */
html[data-thema="licht"] .review__sterren, html[data-thema="licht"] .score__ster { color: #1E5A64 !important; text-shadow: none !important; }
/* bijgesteld: toch goud (herkenbaar als reviewsterren), maar gedempt zodat het
   in het koele lichte palet past: geen fel geel, geen bruin-oranje */
html[data-thema="licht"] .review__sterren, html[data-thema="licht"] .score__ster { color: #A9822E !important; text-shadow: 0 0 0.5px rgba(60, 40, 0, 0.35) !important; }

/* ── 69. Desktop-hero rustiger ──
   Eén vertrouwensregel (4,9 staat er nog maar één keer) en die staat dichter
   onder de knoppen in plaats van los onderaan. */
@media (min-width: 900px) {
  .sectie--hero { padding-bottom: 7rem !important; }
  .sectie--hero .regel { bottom: 2rem; }
}

/* ── 70. Hero-score in licht: per plek de juiste kleur ──
   Desktop: de regel staat onder de waterrand op het lichte grijs, dus zoals de
   reviews: tekst in de regelkleur, ster in gedempt goud. Telefoon: de regel
   staat op de video, daar blijft het warme amber. */
@media (min-width: 721px) {
  html[data-thema="licht"] .sectie--hero .regel .score { color: inherit !important; text-shadow: none !important; }
  html[data-thema="licht"] .sectie--hero .regel .score__ster { color: #A9822E !important; text-shadow: 0 0 0.5px rgba(60, 40, 0, 0.35) !important; }
}

/* ── 71. Terugbellen in de slotpagina (voor wie geen WhatsApp gebruikt) ── */
.slot__wissel { display: block; margin: 1.4rem auto 0; padding: 0.4rem 0.6rem; background: none; border: 0; font: inherit; font-size: 0.92rem; color: var(--zacht, #C5CDCF); cursor: pointer; text-align: center; }
.slot__wissel u { text-decoration-thickness: 1px; text-underline-offset: 3px; color: #A9D4DA; }
html[data-thema="licht"] .slot__wissel { color: #2A2A2D; }
html[data-thema="licht"] .slot__wissel u { color: #103740; }
[data-slot-bel] .veld { margin-top: 1rem; }
.slot__fout { min-height: 1.2em; margin: 0.4rem 0 0; font-size: 0.85rem; color: #F2A7A0; }
html[data-thema="licht"] .slot__fout { color: #9B2C22; }
.onboard__voet [data-terugbel-stuur] { flex: 1 1 auto; }

/* ── 72. Acties (assets/acties.js, beheerd via /beheer) ──
   Rustig en ondergeschikt aan de kop: één glazen pil boven de hero-kop met
   een klein teal label, een label op de dienstkaart en een tagje bij het
   antwoord in de popup. Geen actie = niets in de HTML zichtbaar. */
.dienstkaart__actie { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.85rem; line-height: 1.35; color: #F4F1EC; }
.dienstkaart__actie-label {
  flex: none; padding: 0.18rem 0.55rem; border-radius: 999px; font-weight: 650; font-size: 0.78rem;
  background: rgba(36, 104, 115, 0.85); border: 1px solid rgba(169, 212, 218, 0.45); color: #fff; font-variant-numeric: tabular-nums;
}
.dienstkaart__actie-tekst { font-weight: 500; }

.keuze__actie {
  display: inline-block; margin-left: 0.5rem; padding: 0.08rem 0.45rem; border-radius: 999px; vertical-align: 0.08em;
  background: rgba(36, 104, 115, 0.75); color: #fff; font-size: 0.72rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
html[data-thema="licht"] .keuze__actie { background: #1C4850; }
   knoppen precies op hun plek blijven en hij in de lucht erboven valt. */
.dienstkaart__actie { white-space: nowrap; }


/* ── 73. Actiekaart in de hero: zie assets/actie-kaart.css (gedeeld met /beheer). ── */

/* ── 74. (vervallen: actiechip in de menubalk, vervangen door het gouden etiket) ── */

/* ── 75. Claimbalk in de prijs-popup ──
   Op slot: je ziet wat je misloopt (doorgestreept label, slotje, klok) en
   een glimmende knop. Geclaimd: goud, cadeautje, confetti, en de
   voortgangsbalk van de vragen wordt goud. */
.claim {
  position: relative; display: grid; gap: 0.6rem; margin: 0.9rem 0 0.2rem; padding: 0.75rem;
  border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(242, 166, 90, 0.45);
  box-shadow: inset 0 0 0 1px rgba(242, 166, 90, 0.08);
}
.claim__rij { display: flex; align-items: center; gap: 0.7rem; }
.claim__label {
  position: relative; flex: none; display: grid; place-items: center; min-width: 3.1rem; height: 3.1rem; padding: 0 0.5rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.08); border: 1px dashed rgba(242, 166, 90, 0.6);
}
.claim__label s { font-weight: 800; font-size: 0.85rem; color: rgba(247, 196, 142, 0.75); text-decoration-thickness: 2px; text-decoration-color: rgba(242, 166, 90, 0.9); white-space: nowrap; }
.claim__slot {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: #2A1D05; border: 1.5px solid #F2A65A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='11' width='12' height='9' rx='2' fill='%23F2A65A'/%3E%3Cpath d='M8.5 11V8.5a3.5 3.5 0 0 1 7 0V11' fill='none' stroke='%23F2A65A' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.claim__tekst { display: grid; gap: 0.1rem; min-width: 0; line-height: 1.25; }
.claim__tekst b { font-size: 1rem; font-weight: 750; color: #F7C48E; }
.claim__tekst small { font-size: 0.78rem; opacity: 0.75; font-variant-numeric: tabular-nums; }
.claim__stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.86rem; }
.claim__stappen li { display: flex; align-items: center; gap: 0.55rem; }
.claim__stappen li span { flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: 0.72rem; font-weight: 800; background: #F2A65A; color: #2A1D05; }
.claim__knop {
  position: relative; overflow: hidden; width: 100%; padding: 0.8rem 1rem; min-height: 48px; border: 0; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 800; color: #2B1606; cursor: pointer; white-space: nowrap;
  background: linear-gradient(100deg, #F7C48E 0%, #F2A65A 45%, #FFD9A8 60%, #F2A65A 100%); background-size: 220% 100%;
  box-shadow: 0 0 0 0 rgba(242, 166, 90, 0.6), 0 8px 22px -8px rgba(242, 166, 90, 0.9);
  animation: claim-glans 2.4s linear infinite, claim-puls 1.8s ease-out infinite;
}
.claim__knop::before { content: '\1F381  '; }
.claim__knop::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  animation: claim-flits 2.4s ease-in-out infinite;
}
.claim__knop:hover { filter: brightness(1.06); }
.claim__knop:active { transform: scale(0.98); }
.claim__knop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes claim-glans { to { background-position: -220% 0; } }
@keyframes claim-puls { 0% { box-shadow: 0 0 0 0 rgba(242, 166, 90, 0.55), 0 8px 22px -8px rgba(242, 166, 90, 0.9); } 70%, 100% { box-shadow: 0 0 0 12px rgba(242, 166, 90, 0), 0 8px 22px -8px rgba(242, 166, 90, 0.9); } }
@keyframes claim-flits { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* wachten op terugkeer van Instagram */
.claim.is-wacht .claim__knop { animation: none; background: rgba(255, 255, 255, 0.12); color: inherit; box-shadow: none; }
.claim.is-wacht .claim__knop::before { content: ''; }

/* geclaimd: goud */
.claim.is-geclaimd {
  border-color: rgba(246, 207, 106, 0.8); color: #2A1D05;
  background: linear-gradient(150deg, #FCE7A2 0%, #F6CF6A 50%, #EDB547 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 30px -12px rgba(237, 181, 71, 0.8);
}
.claim.is-geclaimd .claim__label { background: rgba(255, 255, 255, 0.45); border: 0; }
.claim.is-geclaimd .claim__label s { text-decoration: none; font-size: 1.6rem; color: inherit; }
.claim.is-geclaimd .claim__slot { display: none; }
.claim.is-geclaimd .claim__tekst b { color: #2A1D05; }
.claim.is-geclaimd .claim__tekst small { opacity: 0.85; }
.claim.is-vier { animation: claim-pop 700ms cubic-bezier(.2, 1.6, .4, 1); }
.claim.is-vier .claim__label { animation: claim-cadeau 900ms cubic-bezier(.2, 1.8, .4, 1); }
@keyframes claim-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes claim-cadeau { 0% { transform: scale(0.4) rotate(-20deg); } 55% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }
/* voortgangsbalk van de vragen wordt goud */
dialog.onboard.is-geclaimd [data-onboard-balk] { background: linear-gradient(90deg, #EDB547, #FCE7A2) !important; }

/* confetti */
.feest { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.feest i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: feest-vlieg 1.7s cubic-bezier(.15, .6, .35, 1) forwards; }
@keyframes feest-vlieg {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--draai) * 0.5)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + var(--val))) rotate(var(--draai)); opacity: 0; }
}

html[data-thema="licht"] .claim:not(.is-geclaimd) { background: rgba(232, 140, 60, 0.07); border-color: rgba(200, 110, 40, 0.45); }
html[data-thema="licht"] .claim:not(.is-geclaimd) .claim__tekst b { color: #9A4A12; }
html[data-thema="licht"] .claim__label s { color: rgba(154, 74, 18, 0.7); }
@media (prefers-reduced-motion: reduce) { .claim__knop, .claim__knop::after, .claim.is-vier, .claim.is-vier .claim__label { animation: none; } }

/* ── 76. Kijk mee: 3D-iPhone met reels ──
   Titanium kast met Dynamic Island en zijknoppen, licht gekanteld in 3D.
   Binnenin een verticale feed met scroll-snap, zoals Instagram. */
.inactie { display: grid; gap: 2rem; align-items: center; margin-top: clamp(3rem, 7vw, 5.5rem); }
@media (min-width: 900px) { .inactie { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2.5rem, 6vw, 5rem); } }
.inactie__kop { margin: 0 0 0.6rem; font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; }
.inactie__kop { margin-bottom: 1.2rem; }
.inactie__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; max-width: 26rem; }
.inactie__lijst button {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6rem 0.8rem; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 0.98rem; text-align: left; color: inherit; background: transparent; border: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.inactie__lijst button span {
  flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  font-size: 0.8rem; font-weight: 700; border: 1px solid currentColor; opacity: 0.6;
}
.inactie__lijst button:hover { background: rgba(255, 255, 255, 0.06); }
.inactie__lijst button[aria-current="true"] { background: rgba(255, 255, 255, 0.1); border-color: rgba(169, 212, 218, 0.4); font-weight: 600; }
.inactie__lijst button[aria-current="true"] span { opacity: 1; background: #A9D4DA; color: #10333A; border-color: #A9D4DA; }
html[data-thema="licht"] .inactie__lijst button:hover { background: rgba(0, 0, 0, 0.04); }
html[data-thema="licht"] .inactie__lijst button[aria-current="true"] { background: rgba(28, 72, 80, 0.08); border-color: rgba(28, 72, 80, 0.3); }
html[data-thema="licht"] .inactie__lijst button[aria-current="true"] span { background: #1C4850; color: #fff; border-color: #1C4850; }
@media (max-width: 899px) { .inactie__tekst { text-align: center; } .inactie__lijst { display: none; } }

/* de telefoon */
.telefoon { --b: clamp(236px, 64vw, 300px); position: relative; justify-self: center; perspective: 1600px; padding: 1rem 0 2.5rem; }
.telefoon::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0.6rem; height: 2.2rem; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45); filter: blur(22px); z-index: -1;
}
.telefoon__kast {
  position: relative; width: var(--b); aspect-ratio: 9 / 19.5; padding: calc(var(--b) * 0.035); border-radius: calc(var(--b) * 0.17);
  background: linear-gradient(145deg, #5b6066 0%, #2b2e33 22%, #1b1d20 50%, #3a3e43 78%, #6a6f75 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.18), inset 0 0 0 4px #0c0d0f,
    0 1px 0 rgba(255, 255, 255, 0.25), 0 40px 80px -30px rgba(0, 0, 0, 0.75), 0 18px 30px -18px rgba(0, 0, 0, 0.6);
  transform: rotateY(-14deg) rotateX(5deg) rotateZ(0.6deg); transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}
.telefoon:hover .telefoon__kast, .telefoon:focus-within .telefoon__kast { transform: rotateY(-4deg) rotateX(2deg); }
@media (max-width: 899px) { .telefoon__kast { transform: rotateY(-7deg) rotateX(3deg); } }
.telefoon__knop { position: absolute; width: 3px; background: linear-gradient(90deg, #3b3f44, #7c8187); border-radius: 2px; }
.telefoon__knop--actie { left: -3px; top: 16%; height: 5%; }
.telefoon__knop--op { left: -3px; top: 24%; height: 9%; }
.telefoon__knop--neer { left: -3px; top: 35%; height: 9%; }
.telefoon__knop--aan { right: -3px; top: 27%; height: 14%; background: linear-gradient(270deg, #3b3f44, #7c8187); }
.telefoon__scherm { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--b) * 0.135); background: #000; isolation: isolate; }
.telefoon__eiland { position: absolute; z-index: 5; top: calc(var(--b) * 0.035); left: 50%; width: 31%; height: calc(var(--b) * 0.085); transform: translateX(-50%); border-radius: 999px; background: #000; }

/* de feed */
.reels { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reels::-webkit-scrollbar { display: none; }
.reels:focus-visible { outline: none; }
.telefoon__scherm:has(.reels:focus-visible) { box-shadow: inset 0 0 0 2px #A9D4DA; }
.reel { position: relative; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; background: #111; }
.reel__onder {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3.2rem 3.2rem 1rem 0.9rem; display: grid; gap: 0.25rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); color: #fff; font-size: 0.78rem; line-height: 1.35;
  text-transform: none; letter-spacing: normal; font-weight: 400; pointer-events: none;
}
.reel__onder b { font-size: 0.8rem; font-weight: 700; }
.reels__bovenbalk {
  position: absolute; z-index: 4; top: calc(var(--b) * 0.15); left: 0.9rem; right: 0.9rem; display: flex; justify-content: space-between; align-items: center;
  color: #fff; font-weight: 700; font-size: 0.95rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); pointer-events: none;
}
.reels__teller { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
.reels__geluid, .reels__pijlen button {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer;
  background: rgba(0, 0, 0, 0.38); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.reels__geluid { position: absolute; z-index: 4; right: 0.7rem; bottom: 1rem; }
.reels__geluid[aria-pressed="false"] .reels__golf, .reels__geluid[aria-pressed="true"] .reels__kruis { display: none; }
.reels__pijlen { position: absolute; z-index: 4; right: 0.7rem; top: 50%; transform: translateY(-50%); display: grid; gap: 0.4rem; }
.reels__geluid:focus-visible, .reels__pijlen button:focus-visible { outline: 2px solid #A9D4DA; outline-offset: 2px; }
.reels__hint {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--b) * 0.15 + 2.2rem); margin: 0; transform: translateX(-50%); padding: 0.3rem 0.75rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 0.75rem; font-weight: 600; pointer-events: none; white-space: nowrap;
  animation: reels-hint 1.8s ease-in-out infinite;
}
.reels__hint[hidden] { display: none; }
@keyframes reels-hint { 50% { transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .telefoon__kast { transition: none; } .reels__hint { animation: none; } }

/* ── 77. Gouden actie-etiket: zie assets/actie-kaart.css (gedeeld met /beheer). ── */

/* ── 78. Hero: "Gratis en vrijblijvend"-regel echt in het midden ──
   Hij had een max-breedte zonder automatische marge en hing daardoor links. */
.sectie--hero .cta-zeker { margin-inline: auto; text-align: center; }

/* ── 79. Verstopte korting onder de menubalk ──
   De lade knipt alles af wat nog onder de balk zit; alleen het lipje steekt
   uit. Open: het etiket schuift naar beneden. */
.ticketlade[hidden] { display: none !important; }
.ticketlade { position: absolute; left: 0; right: 0; top: 100%; height: 190px; overflow: hidden; pointer-events: none; }
.ticketlade__schuif {
  display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 0 auto; padding: 0 1rem;
  transform: translateY(calc(-100% + 30px)); transition: transform 420ms cubic-bezier(.2, .9, .25, 1.15);
  pointer-events: auto;
}
.ticketlade.is-open .ticketlade__schuif { transform: translateY(10px); }
.ticketlade .ticket { margin: 0; width: min(calc(100vw - 2rem), 19rem); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 34px -16px rgba(0, 0, 0, 0.7); }
.ticketlade__lip {
  margin-top: -1px; padding: 0.3rem 0.9rem 0.4rem; border: 0; border-radius: 0 0 14px 14px; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 700; color: #2A1D05; white-space: nowrap;
  background: linear-gradient(180deg, #EFD28A, #E6C26F); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6);
}
.ticketlade__lip:focus-visible { outline: 2px solid #F8E7B4; outline-offset: 2px; }
/* het lipje zit vast aan de onderkant van het etiket: verberg de inkeping-schaduw niet */
.ticketlade.is-open .ticketlade__lip { opacity: 0.85; }
.ticketlade.is-wiebel:not(.is-open) .ticketlade__schuif { animation: lade-wiebel 1.6s ease-in-out 1; }
@keyframes lade-wiebel {
  0%, 100% { transform: translateY(calc(-100% + 30px)); }
  20% { transform: translateY(calc(-100% + 46px)); }
  35% { transform: translateY(calc(-100% + 30px)); }
  50% { transform: translateY(calc(-100% + 40px)); }
  65% { transform: translateY(calc(-100% + 30px)); }
}
.ticketlade__lip span { display: inline-block; }
.ticketlade:not(.is-gevonden) .ticketlade__lip span { animation: lip-cadeau 2.8s ease-in-out infinite; }
@keyframes lip-cadeau { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-14deg) scale(1.15); } 86% { transform: rotate(10deg) scale(1.15); } 94% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ticketlade__schuif { transition: none; } .ticketlade.is-wiebel .ticketlade__schuif, .ticketlade__lip span { animation: none !important; } }

/* ── 80. Naar Instagram vanuit de video's ──
   Accountnaam in elke reel linkt naar die reel; een rustige knop naar het
   profiel (desktop onder de lijst, mobiel onder de telefoon). */
.reel__account { pointer-events: auto; color: #fff; font-weight: 700; font-size: 0.8rem; text-decoration: none; justify-self: start; }
.reel__account:hover { text-decoration: underline; color: #fff; }
.reel__account:focus-visible { outline: 2px solid #A9D4DA; outline-offset: 2px; border-radius: 4px; }
.insta-knop {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem; padding: 0.7rem 1.2rem; min-height: 46px; border-radius: 999px;
  font-weight: 650; font-size: 0.95rem; text-decoration: none; color: #fff;
  background: linear-gradient(100deg, #8A3AB9 0%, #C13584 45%, #E1306C 70%, #F77737 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 24px -12px rgba(193, 53, 132, 0.8);
  transition: transform 160ms ease, filter 160ms ease;
}
.insta-knop:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); }
.insta-knop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 899px) {
  .inactie__tekst { display: contents; }
  .inactie__kop { order: 1; text-align: center; }
  .telefoon { order: 2; }
  .insta-knop { order: 3; justify-self: center; margin-top: -0.5rem; }
}
/* lipje gaat mee weg als de menubalk bij het scrollen wegschuift */
.statusbalk[data-verstopt] .ticketlade { opacity: 0; pointer-events: none; }
.statusbalk[data-verstopt] .ticketlade * { pointer-events: none !important; }
.ticketlade { transition: opacity 200ms ease; }

.claim__tekst small b { font-weight: 800; letter-spacing: 0.04em; color: #F7C48E; }
.claim.is-geclaimd .claim__tekst small b { color: inherit; }

.claim__doelen[hidden] { display: none; }
.claim__doelen { display: flex; gap: 0.5rem; }
.claim__doel {
  flex: 1 1 0; min-height: 42px; padding: 0.55rem 0.6rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 700; white-space: nowrap;
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); background: linear-gradient(100deg, #8A3AB9 0%, #C13584 50%, #E1306C 80%, #F77737 100%);
}
.claim__doel:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* meer lucht tussen de voor/na-schuif en "Kijk mee" */
.inactie { margin-top: clamp(5rem, 11vw, 8.5rem); }

/* ── 81. Instagram-stappen in de claimbalk: kort, genummerd, onder elkaar ── */
.claim__stappen[hidden] { display: none !important; }
.claim__stappen { counter-reset: stap; list-style: none; margin: 0.1rem 0 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.95rem; line-height: 1.3; }
.claim__stappen li { counter-increment: stap; display: flex; align-items: center; gap: 0.6rem; }
.claim__stappen li::before {
  content: counter(stap); flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  font-size: 0.75rem; font-weight: 800; background: #F2A65A; color: #2A1D05;
}
.claim__stappen li:last-child { opacity: 0.75; }
.claim__stappen b { font-weight: 800; letter-spacing: 0.03em; color: #F7C48E; }
html[data-thema="licht"] .claim__stappen b { color: #9A4A12; }

/* ── 82. Voor/na en "Kijk mee" duidelijk gescheiden: gewoon veel lucht ── */
.inactie { margin-top: clamp(11rem, 20vw, 14rem); }

/* ── 83. "Kijk mee"-kop en Instagram-knop dichter op de telefoon ── */
@media (max-width: 899px) {
  .inactie { gap: 0.6rem; }
  .inactie__kop { margin-bottom: 0; }
  .telefoon { padding: 0.4rem 0 1.4rem; }
  .insta-knop { margin-top: -0.6rem; }
}
@media (min-width: 900px) {
  .inactie { grid-template-columns: auto auto; justify-content: center; gap: clamp(2rem, 4vw, 3.5rem); }
}

/* ── 84. Mobiel: kop + telefoon + volgknop passen samen in beeld, met marge ──
   De telefoon schaalt mee met de schermhoogte (ook op kleine telefoons). */
@media (max-width: 899px) {
  .telefoon { --b: min(clamp(200px, 58vw, 280px), calc((100svh - 270px) / 2.17)); }
  .inactie__kop { font-size: clamp(1.6rem, 7vw, 2.1rem); }
}

.claim__knop[hidden] { display: none; }

/* ── 85. Bijschrift in de telefoon altijd wit (ook in licht thema) ── */
.reel__onder, .reel__onder span, html[data-thema="licht"] .reel__onder, html[data-thema="licht"] .reel__onder span { color: #fff !important; }
html[data-thema="licht"] .reel__account { color: #fff !important; }

/* ── 86. "Hoe ken je ons?" op de laatste stap (optioneel, één tik) ── */
.via { margin-top: 1.4rem; }
.via__vraag { margin: 0 0 0.45rem; font-size: 0.8rem; font-weight: 600; }
.via__vraag span { font-weight: 400; opacity: 0.6; margin-left: 0.3rem; }
.via__rij { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.25rem; }
.via__knop { font: inherit; font-size: 0.72rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.45rem 0.34rem; border-radius: 12px; cursor: pointer; white-space: nowrap; background: rgba(169, 212, 218, 0.08); border: 1px solid rgba(169, 212, 218, 0.26); color: inherit; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
.via__knop svg { width: 14px; height: 14px; flex: none; }
.via__knop:active { transform: scale(0.96); }
.via__knop[aria-pressed="true"] { background: rgba(169, 212, 218, 0.24); border-color: #A9D4DA; }
.via__knop[aria-pressed="true"] svg { opacity: 1; }
.via__knop[data-via="ai"][aria-pressed="true"] svg { animation: via-glim 0.9s ease; }
@keyframes via-glim { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.3) rotate(18deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .via__knop[data-via="ai"][aria-pressed="true"] svg { animation: none; } }
html[data-thema="licht"] .via__knop { background: rgba(16, 55, 64, 0.05); border-color: rgba(16, 55, 64, 0.2); }
html[data-thema="licht"] .via__knop[aria-pressed="true"] { background: rgba(16, 55, 64, 0.12); border-color: #103740; }
.via__knop { position: relative; }
.via__knop.is-pop { animation: via-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes via-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
.via__vraag.is-dank { animation: via-dank 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes via-dank { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .via__knop.is-pop, .via__vraag.is-dank { animation: none; } }

/* ── 87. "Hoe ken je ons?" rustiger: kleiner, zonder randen, meer lucht erboven ── */
.via { margin-top: 1.7rem; }
.via__vraag { font-size: 0.74rem; font-weight: 500; opacity: 0.7; margin-bottom: 0.5rem; }
.via__vraag span { opacity: 0.75; }
.via__vraag.is-dank { opacity: 1; }
.via__knop { border-color: transparent; background: rgba(169, 212, 218, 0.07); border-radius: 999px; font-size: 0.72rem; }
.via__knop[aria-pressed="true"] { background: rgba(169, 212, 218, 0.2); border-color: rgba(169, 212, 218, 0.55); }
html[data-thema="licht"] .via__knop { border-color: transparent; background: rgba(16, 55, 64, 0.05); }
html[data-thema="licht"] .via__knop[aria-pressed="true"] { background: rgba(16, 55, 64, 0.11); border-color: rgba(16, 55, 64, 0.45); }


/* ── Navigatie ───────────────────────────────────────────────────────────
   Tablet en groter: alle onderdelen staan zichtbaar in de balk, geen menu om
   eerst open te klappen. Past de rij niet naast logo en knoppen, dan krijgt
   hij een eigen regel onder in de balk. Telefoon: daar past het niet, en
   neemt het menu (de knop met drie streepjes) het over. */
.statusbalk__binnen { flex-wrap: wrap; row-gap: 0.35rem; }
.ankers__lijst a[aria-current="true"] { color: var(--merk-licht); background-color: rgba(169, 212, 218, 0.12); }
html[data-thema="licht"] .ankers__lijst a[aria-current="true"] { color: #103740; background-color: rgba(16, 55, 64, 0.08); }
@media (min-width: 721px) {
  .statusbalk .ankers { display: block; }
  .menuknop, .actiebalk__menu, .menupaneel { display: none !important; }
}
/* Naast logo, openingstijden en drie knoppen past de rij van zeven nergens
   netjes (ook op 1440 niet), dus krijgt hij altijd zijn eigen regel. */
@media (min-width: 721px) {
  :root { --kopbalk-h: 117px; }
  .statusbalk .ankers { order: 3; flex: 1 0 100%; border-top: 1px solid rgba(244, 241, 236, 0.08); padding-top: 0.35rem; }
  .ankers__lijst { justify-content: center; flex-wrap: wrap; }
  .ankers__lijst a { padding: 0.35rem 0.75rem; }
  :root { --kopbalk-h: 110px; }
}
@media (max-width: 720px) { .statusbalk .ankers { display: none; } }

/* Kopjes niet onder de vaste balk laten wegvallen na een sprong. */
main section[id], #tarieven, #vragen { scroll-margin-top: calc(var(--kopbalk-h) + 0.5rem); }

/* Menuknop (alleen telefoon): drie streepjes plus het woord, zodat het
   duidelijk een menu is. Zelfde pilvorm als de themaknop. */
.menuknop, .actiebalk__menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--licht-grond); background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  height: 38px; padding: 0 1rem 0 0.85rem;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.menuknop svg, .actiebalk__menu svg { width: 1.05rem; height: 1.05rem; flex: none; }
.menuknop:hover, .actiebalk__menu:hover, .menuknop[aria-expanded="true"], .actiebalk__menu[aria-expanded="true"] { background: rgba(169, 212, 218, 0.22); border-color: var(--merk-licht); }
.actiebalk__menu { flex: none; align-self: stretch; height: auto; font-size: 0.95rem; padding: 0 1.1rem 0 0.95rem; background: rgb(42, 49, 51); }
html[data-thema="licht"] .menuknop, html[data-thema="licht"] .actiebalk__menu { color: #1D1D1F; background: rgba(16, 55, 64, 0.06); border-color: rgba(16, 55, 64, 0.35); }
.actiebalk a.actiebalk__cta { flex: 1.4; }

/* Het paneel schuift van onderen op, waar je duim al is. */
.menupaneel { position: fixed; inset: 0; z-index: 60; }
.menupaneel[hidden] { display: none; }
.menupaneel__achter { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 240ms var(--curve); }
.menupaneel__vel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
  background: #141718; color: var(--licht-grond);
  border-top: 1px solid rgba(244, 241, 236, 0.12); border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.7);
  padding: 1rem var(--rand) calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 240ms var(--curve);
}
.menupaneel[data-open] .menupaneel__achter { opacity: 1; }
.menupaneel[data-open] .menupaneel__vel { transform: none; }
.menupaneel__kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.menupaneel__kop p { margin: 0; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--merk-licht); }
.menupaneel__sluit { font: inherit; font-size: 1.6rem; line-height: 1; width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.6rem -0.5rem 0; background: none; border: 0; color: inherit; cursor: pointer; }
.menupaneel__lijst { list-style: none; margin: 0; padding: 0; }
.menupaneel__lijst li + li { border-top: 1px solid rgba(244, 241, 236, 0.1); }
.menupaneel__lijst a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding: 0.7rem 0.25rem; text-decoration: none; color: inherit; }
.menupaneel__lijst a::after { content: '\2192'; grid-column: 2; grid-row: 1 / span 2; color: var(--merk-licht); }
.menupaneel__lijst span { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.menupaneel__lijst small { font-size: 0.8rem; color: rgba(244, 241, 236, 0.62); }
.menupaneel__acties { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.menupaneel__acties .knop { flex: 1; padding: 0.9rem 0.5rem; text-align: center; justify-content: center; }
.menupaneel__acties .menupaneel__cta { flex: 1.6; background-color: var(--merk); border-color: var(--merk); color: var(--licht-grond); }
.menupaneel__acties .knop--stil { color: var(--licht-grond); border-color: rgba(244, 241, 236, 0.34); }
html[data-thema="licht"] .menupaneel__vel { background: #F7F8F8; color: #1D1D1F; border-color: rgba(0, 0, 0, 0.08); }
html[data-thema="licht"] .menupaneel__kop p, html[data-thema="licht"] .menupaneel__lijst a::after { color: #103740; }
html[data-thema="licht"] .menupaneel__lijst li + li { border-top-color: rgba(0, 0, 0, 0.08); }
html[data-thema="licht"] .menupaneel__lijst small { color: #515154; }
html[data-thema="licht"] .menupaneel__acties .knop--stil { color: #1D1D1F; border-color: rgba(0, 0, 0, 0.25); }
@media (prefers-reduced-motion: reduce) { .menupaneel__vel, .menupaneel__achter { transition: none; } }

/* ── Navigatie ───────────────────────────────────────────────────────────
   Tablet en groter: alle onderdelen staan zichtbaar in de balk, geen menu om
   eerst open te klappen: een tweede regel onderin de balk. Telefoon: daar past het niet, en daar
   neemt het menu (drie streepjes plus het woord) het over. */
.statusbalk__binnen { flex-wrap: wrap; row-gap: 0.35rem; }
@media (min-width: 721px) {
  .statusbalk .ankers { display: block; }
  .menuknop, .actiebalk__menu, .menupaneel { display: none !important; }
}
/* Naast logo, openingstijden en drie knoppen past de rij van zeven nergens
   netjes (ook op 1440 niet), dus krijgt hij altijd zijn eigen regel. */
@media (min-width: 721px) {
  :root { --kopbalk-h: 117px; }
  .statusbalk .ankers { order: 3; flex: 1 0 100%; border-top: 1px solid rgba(244, 241, 236, 0.08); padding-top: 0.35rem; }
  html[data-thema="licht"] .statusbalk .ankers { border-top-color: rgba(0, 0, 0, 0.08); }
  .ankers__lijst { justify-content: center; flex-wrap: wrap; }
  .ankers__lijst a { padding: 0.35rem 0.75rem; }
}
@media (max-width: 720px) { .statusbalk .ankers { display: none; } }

/* Kopjes niet onder de vaste balk laten wegvallen na een sprong. */
main section[id], #tarieven, #vragen { scroll-margin-top: calc(var(--kopbalk-h) + 0.5rem); }

/* Menuknop (alleen telefoon). Zelfde pilvorm als de themaknop. */
.menuknop, .actiebalk__menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--licht-grond); background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  height: 38px; padding: 0 1rem 0 0.85rem;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.menuknop svg, .actiebalk__menu svg { width: 1.05rem; height: 1.05rem; flex: none; }
.menuknop:hover, .actiebalk__menu:hover, .menuknop[aria-expanded="true"], .actiebalk__menu[aria-expanded="true"] { background: rgba(169, 212, 218, 0.22); border-color: var(--merk-licht); }
.actiebalk__menu { flex: none; align-self: stretch; height: auto; font-size: 0.95rem; padding: 0 1.1rem 0 0.95rem; background: rgb(42, 49, 51); }
html[data-thema="licht"] .menuknop, html[data-thema="licht"] .actiebalk__menu { color: #1D1D1F; background: rgba(16, 55, 64, 0.06); border-color: rgba(16, 55, 64, 0.35); }
.actiebalk a.actiebalk__cta { flex: 1.4; }

/* Het paneel schuift van onderen op, waar je duim al is. */
.menupaneel { position: fixed; inset: 0; z-index: 60; }
.menupaneel[hidden] { display: none; }
.menupaneel__achter { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 240ms var(--curve); }
.menupaneel__vel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
  background: #141718; color: var(--licht-grond);
  border-top: 1px solid rgba(244, 241, 236, 0.12); border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.7);
  padding: 1rem var(--rand) calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 240ms var(--curve);
}
.menupaneel[data-open] .menupaneel__achter { opacity: 1; }
.menupaneel[data-open] .menupaneel__vel { transform: none; }
.menupaneel__kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.menupaneel__kop p { margin: 0; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--merk-licht); }
.menupaneel__sluit { font: inherit; font-size: 1.6rem; line-height: 1; width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.6rem -0.5rem 0; background: none; border: 0; color: inherit; cursor: pointer; }
.menupaneel__lijst { list-style: none; margin: 0; padding: 0; }
.menupaneel__lijst li + li { border-top: 1px solid rgba(244, 241, 236, 0.1); }
.menupaneel__lijst a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding: 0.7rem 0.25rem; text-decoration: none; color: inherit; }
.menupaneel__lijst a::after { content: '\2192'; grid-column: 2; grid-row: 1 / span 2; color: var(--merk-licht); }
.menupaneel__lijst span { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.menupaneel__lijst small { font-size: 0.8rem; color: rgba(244, 241, 236, 0.62); }
.menupaneel__acties { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.menupaneel__acties .knop { flex: 1; padding: 0.9rem 0.5rem; text-align: center; justify-content: center; }
.menupaneel__acties .menupaneel__cta { flex: 1.6; background-color: var(--merk); border-color: var(--merk); color: var(--licht-grond); }
.menupaneel__acties .knop--stil { color: var(--licht-grond); border-color: rgba(244, 241, 236, 0.34); }
html[data-thema="licht"] .menupaneel__vel { background: #F7F8F8; color: #1D1D1F; border-color: rgba(0, 0, 0, 0.08); }
html[data-thema="licht"] .menupaneel__kop p, html[data-thema="licht"] .menupaneel__lijst a::after { color: #103740; }
html[data-thema="licht"] .menupaneel__lijst li + li { border-top-color: rgba(0, 0, 0, 0.08); }
html[data-thema="licht"] .menupaneel__lijst small { color: #515154; }
html[data-thema="licht"] .menupaneel__acties .knop--stil { color: #1D1D1F; border-color: rgba(0, 0, 0, 0.25); }
@media (prefers-reduced-motion: reduce) { .menupaneel__vel, .menupaneel__achter { transition: none; } }

/* Desktop: alles op één regel. Logo links, dan de zeven links, dan de
   licht/donker-knop en de knoppen. Om de rij te laten passen, wijkt de regel
   met openingstijden tot 1440px; de knoppen blijven. */
@media (min-width: 1200px) {
  :root { --kopbalk-h: 70px; }
  .statusbalk__binnen { flex-wrap: nowrap; }
  .statusbalk .ankers { order: 0; flex: 1 1 auto; border-top: 0; padding-top: 0; }
  .ankers__lijst { justify-content: center; flex-wrap: nowrap; gap: 0.1rem; }
  .ankers__lijst a { padding: 0.4rem 0.55rem; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .statusbalk .stip { display: none; }
}

/* Telefoonmenu, minimalistisch: alleen de namen, groot en rustig. Geen
   ondertitels, pijlen, lijnen of extra knoppen; na het sluiten staat de
   actiebalk er weer. */
.menupaneel__kop { justify-content: flex-end; margin-bottom: 0; }
.menupaneel__vel { padding-top: 0.75rem; padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)); }
.menupaneel__lijst { padding: 0 0.5rem; }
.menupaneel__lijst li + li { border-top: 0; }
.menupaneel__lijst a { display: block; padding: 0.45rem 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1.25; }
.menupaneel__lijst a::after { content: none; }
.menupaneel__lijst a:hover, .menupaneel__lijst a:focus-visible { color: var(--merk-licht); }
html[data-thema="licht"] .menupaneel__lijst a:hover, html[data-thema="licht"] .menupaneel__lijst a:focus-visible { color: #103740; }