/* =====================================================================
   OMMETOER — demo-stijl "kaart met sticker" (gekozen 2026-10-28)
   Gedeelde bouwstenen voor de demo-pagina's in _dev/pitstop/ (aanbod,
   community membership, intensive, club, strategiesessie). Laadt NA
   /home.css en /site.css; gebruikt hun tokens (--t-*, --s-*, --f-*).
   Canvasregel: op geel = bruine kaart met blauwe sticker, op bruin =
   bruin-getinte kaart met blauwe sticker; tekst op een kaart altijd blauw.
   ===================================================================== */

/* ---------- gedeeld ---------- */
.md .stm{white-space:normal}
.md .cap + .stm{margin-top:1.6vw}
.md .cap + .ttl{margin-top:1.6vw}
.md .ttl + .stm{margin-top:4vw}
.md-just{text-align:justify;text-align-last:left;hyphens:none}
.md-row{list-style:none;margin:0;padding:0;display:grid}
.md-row > li{padding:0 4vw}
.md-row > li:first-child{padding-left:0}
.md-row > li:last-child{padding-right:0}
.md-row > li + li{border-left:1px solid var(--ln)}
.md-row .lst{margin-top:var(--s-kop)}
.md-row .bdy{margin-top:1.2vw}
.md-n{font-family:var(--f-titel);font-synthesis:none;text-transform:uppercase;font-size:var(--t-titel);line-height:.9;white-space:nowrap;text-box:trim-both cap alphabetic;font-variant-numeric:tabular-nums}
.md-n + .cap{margin-top:1.6vw}
.vk-ico{width:1.05vw;height:auto;flex:0 0 auto;margin-top:0}
.md .hy__pill,.md .hk__pill{display:inline-block}

/* ---------- kaart met sticker ---------- */
.vk-grid{list-style:none;margin:7vw 0 0;padding:0;display:grid;column-gap:2vw;row-gap:2vw;align-items:stretch}
.vk-grid--2{grid-template-columns:1fr 1fr}
.vk-grid--3{grid-template-columns:repeat(3,1fr)}
.vk-grid--4{grid-template-columns:repeat(4,1fr)}
.vk-grid--5{grid-template-columns:repeat(5,1fr)}
.vk{position:relative;border-radius:.5vw;padding:3.2vw 2.4vw 2.4vw;display:flex;flex-direction:column}
.vk .lst{margin:0}
.vk .bdy{margin-top:1.2vw}
.vk .txt{margin:0}
.vk .tp__lnk{display:inline-block;margin-top:var(--s-klein)}
.vk .hy__pill,.vk .hk__pill{margin-top:var(--s-klein);align-self:flex-start}
.vk-tag{position:absolute;top:-1vw;left:2.4vw;display:inline-block;border-radius:999px;padding:.7em 1.1em;line-height:1;font-family:var(--f-caps);text-transform:uppercase;font-size:var(--t-eyebrow);letter-spacing:-.02em;white-space:nowrap;transform:rotate(-2deg);transform-origin:left center;background:var(--brand-blue);color:var(--brand-brown)}
/* zacht papier: het bruine papier met dezelfde lichte waas als een kaart op het bruine canvas (ronde club-r2) */
/* regel 2026-10-29: alle bruine kaarten = var(--kaart-bruin) uit tokens.css (zachter dan het merkbruin) */
:root{--papier-waas:var(--kaart-waas);--papier-zacht:var(--kaart-bruin)}
.md .pg--bruin .vk{background:var(--papier-waas);color:var(--brand-blue);--ln:var(--p-lijn-licht)}
/* regel 2026-10-30 (Laura, optie G "bubbel" uit _dev/pitstop/proto-kaarten-geel-r2.html): op geel GEEN bruine kaart meer.
   Kaart = canvasgeel (dekt een foto af in de hero) met één fijne bruine lijn en ronde hoeken; label staat ín de lijn,
   zonder pil, rechtop; de labeltekst start op dezelfde linkerlijn als de tekst in de kaart (margin-left:-.8em). */
.md .pg--geel :is(.vk:not(.vk--blauw),.hr__card){background:var(--p-geel);color:var(--brand-brown);--ln:var(--p-lijn-donker);box-shadow:inset 0 0 0 1px rgba(38,15,13,.32);border-radius:var(--kaart-r-geel)}
.md .pg--geel :is(.vk:not(.vk--blauw),.hr__card) .vk-tag{top:0;translate:0 -50%;transform:none;border-radius:0;padding:0 .8em;margin-left:-.8em;background:var(--p-geel);color:var(--brand-brown);box-shadow:none}
/* knoppen in een gele kaart volgen het geel: bruine pil met gele tekst (zoals .hy__pill), niet de blauwe .hk__pill van bruin */
.md .pg--geel :is(.vk:not(.vk--blauw),.hr__card) .hk__pill{background:var(--brand-brown);color:var(--p-geel)}
.md .pg--geel :is(.vk:not(.vk--blauw),.hr__card) .hk__pill:hover{background:rgb(59,33,25)}
.md .pg--geel .pc__c .pc__pic img{border-radius:var(--kaart-r-geel) var(--kaart-r-geel) 0 0}
:root{--kaart-r-geel:1.6vw}
@media (max-width:1024px){:root{--kaart-r-geel:5vw}}
@media (max-width:1024px){.md[data-pg="club"] .pg--geel .cz__k .vk-tag{left:5vw}}
.md .vk--blauw{background:var(--brand-blue) !important;color:var(--brand-brown) !important;--ln:var(--p-lijn-donker)}
.md .vk--blauw .vk-tag{background:var(--brand-brown);color:var(--brand-blue)}
.vk-rows{list-style:none;margin:var(--s-kop) 0 0;padding:0}
.vk-rows li{display:flex;align-items:center;gap:1.2vw;padding:1vw 0}
.vk-rows li:first-child{padding-top:0}
.vk-rows li:last-child{padding-bottom:0}
.vk-rows li + li{border-top:1px solid var(--ln)}
.vk-t{font-family:var(--f-licht);font-weight:300;font-size:1.45vw;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.vk--wide{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:baseline;gap:4vw}
.vk--wide .bdy{margin:0;max-width:52vw}
.vk--wide .tp__lnk{margin:0;white-space:nowrap}

/* ---------- hero: tekst, grote foto, stickerkaart half over de fotobovenrand ---------- */
.hr__p{margin-top:var(--s-groep);max-width:58vw}
.hr__b{margin-top:var(--s-groep);display:flex;align-items:center;gap:2.4vw}
/* REGEL knopafstand (Laura 2026-11-06): knoppen naast elkaar staan overal even dicht bij elkaar, in de hero en in elk ander blok. Eén waarde, één plek: --knop-gap.
   Nooit per pagina een eigen gap zetten; !important wint bewust van oudere paginaregels. Gecontroleerd door tools/regels-check.py. */
:root{--knop-gap:1vw}
@media (max-width:1024px){:root{--knop-gap:2.3vw}}
html:not(#a) body:not(#z) :is(.hr__b,.ft__b,.cal__b,.ep-l__b,.vb-d__cta,.tg__end,.bw__end){column-gap:var(--knop-gap) !important}
.hr__note{margin-top:var(--s-klein)}
.hr__pic{position:relative;height:58vw;background:var(--brand-brown)}
.hr__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hr__card{position:absolute;right:var(--gutter);top:-5.4vw;width:26vw;background:var(--papier-zacht);color:var(--brand-blue);--ln:var(--p-lijn-licht)}
.hr__card .bdy{margin-top:1.2vw}

/* ---------- panorama ---------- */
.md-f{position:relative;height:46vw;overflow:hidden;background:var(--brand-brown)}
.md-f img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}

/* ---------- menu-rijen (aanbod): Obviously-woord | sticker | tekst | prijs + link ---------- */
.ab__top .lead{margin-top:var(--s-kop);max-width:52vw}
.ab__grp{margin-top:7vw}
.ab__grp + .ab__grp{margin-top:var(--s-groep)}
.ab__grp .lab{margin-bottom:var(--s-kop)}
.ab__list{list-style:none;margin:0;padding:0}
.ab__r{display:grid;grid-template-columns:3fr 2.6fr 4.2fr 2.2fr;column-gap:3vw;align-items:center;padding:2.2vw 0}
.ab__r:first-child{padding-top:0}
.ab__r:last-child{padding-bottom:0}
.ab__r + .ab__r{border-top:1px solid var(--ln)}
.ab__w{font-family:var(--f-titel);font-synthesis:none;text-transform:uppercase;font-size:var(--t-titel-s);line-height:1;text-box:trim-both cap alphabetic;white-space:nowrap;transition:transform .35s var(--ease)}
.ab__r:hover .ab__w{transform:translateX(.6vw)}
.ab__sub{display:block;margin-top:.9vw}
.ab__tag{position:static;transform:rotate(-2deg);justify-self:start}
.ab__p{margin:0}
.ab__e{justify-self:end;text-align:right}
.ab__e .cap{display:block;white-space:nowrap}
.ab__e .tp__lnk{display:inline-block;margin-top:.6vw;white-space:nowrap}

/* ---------- kolommenrij met kop ---------- */
.co__cols{margin-top:7vw}

/* ---------- tijdlijn (zo start je) ---------- */
.zs__tl{position:relative;margin-top:7vw}
.zs__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:4vw}
.zs__steps li{position:relative;padding-top:4.2vw}
.zs__when{position:absolute;top:0;left:0;text-box:trim-both cap alphabetic}
.zs__dot{position:absolute;left:0;top:2.1vw;width:.9vw;height:.9vw;border-radius:50%;background:currentColor;transform:translate(0,-50%)}
.zs__line{position:absolute;left:0;right:0;top:2.1vw;height:1px;background:var(--ln);overflow:hidden}
.zs__line i{position:absolute;inset:0;background:currentColor;transform-origin:left center;transform:scaleX(var(--p,0));transition:transform .25s linear}
.zs__steps .md-n{font-size:var(--t-titel-s)}
.zs__steps .lst{margin-top:var(--s-kop)}
.zs__steps .bdy{margin-top:1.2vw;max-width:22vw}
.zs__cta{margin-top:var(--s-groep);display:flex;align-items:center;gap:2.4vw}

/* ---------- voor wie: eyebrow links, Obviously rechts; twee kaarten ---------- */
.wf__top{display:grid;grid-template-columns:4fr 8fr;column-gap:4vw;align-items:end}
.wf__top .ttl{text-align:right}
.wf__stm{margin-top:4vw}
.wf__end{margin-top:var(--s-groep)}

/* ---------- bewijs: cijferband + video's en quote-kaarten om en om ---------- */
.bw__nums{margin-top:7vw}
.bw__grid{margin-top:7vw;display:grid;column-gap:2vw;align-items:stretch}
.bw__v{margin:0}
.bw .rv__v{border-radius:.5vw}
.bw__q{justify-content:center}
.bw__t{font-family:var(--f-licht);font-weight:300;font-size:1.6vw;line-height:1.25;letter-spacing:-.012em;text-wrap:pretty}
.bw__end{margin-top:var(--s-groep)}

/* ---------- prijs: kaarten naast elkaar, knoppen even breed op gelijke hoogte ---------- */
.pr__top .bdy{margin-top:var(--s-klein);max-width:40vw}
.pr__top .txt{margin-top:var(--s-groep);max-width:58vw}
.vk--p .vk-price{margin-top:var(--s-kop);display:flex;align-items:baseline;gap:1.2vw;flex-wrap:wrap}
.vk--p .vk-price .md-n{text-box:none;line-height:1}
.vk--p .vk-price--2{margin-top:1vw}
.vk--p .vk-price--2 .md-n{font-size:var(--t-titel-s)}
.vk--p .vk-rows{margin-top:var(--s-groep)}
.vk--p .vk-rows li{padding:.8vw 0}
.vk--p .vk-rows .vk-ico{width:.95vw;margin-top:0}
.vk--p .vk-note{margin-top:var(--s-klein)}
.vk--p .vk-btn{margin-top:auto;padding-top:var(--s-groep)}
.vk--p .vk-btn a{display:inline-block;width:100%;text-align:center}
.vk--p .vk-btn a + a{margin-top:1vw}

/* ---------- vragen: Obviously links, uitklaprijen rechts ---------- */
.fa__grid{display:grid;grid-template-columns:4fr 8fr;column-gap:4vw;align-items:start}
.fa__grid .fq{margin-top:0}
.md .pg--bruin .fq li + li{border-top-color:var(--p-lijn-licht)}
.md .pg--geel .fq li + li{border-top-color:var(--p-lijn-donker)}
.fa__grid .fq__a .bdy{max-width:36vw}

/* ---------- foto + tekst (koffie, over mij, quote van Laura) ---------- */
.ft__grid{display:grid;grid-template-columns:5fr 7fr;column-gap:4vw}
.ft__grid--r{grid-template-columns:7fr 5fr}
.ft__pic{position:relative;aspect-ratio:1/1;overflow:hidden}
.ft__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ft__r{display:flex;flex-direction:column;padding-left:5vw}
.ft__grid--r .ft__r{padding-left:0;padding-right:5vw}
.ft__r .txt{margin-top:var(--s-groep);max-width:36vw}
.ft__r .lead{margin-top:var(--s-groep)}
.ft__r .cap{margin-top:var(--s-klein)}
.ft__r .bdy + .bdy{margin-top:1vw}
.ft__r .tp__lnk{display:inline-block;margin-top:var(--s-klein)}
.ft__b{margin-top:auto;padding-top:var(--s-groep);display:flex;align-items:center;gap:2.4vw}
.ft__r .vk{margin-top:var(--s-groep)}
.ft__r .vk .bw__t{font-size:1.75vw}
.pc__c{padding:0;overflow:visible}
.pc__pic{position:relative;display:block;aspect-ratio:4/3;flex:0 0 auto;border-radius:.5vw .5vw 0 0}
.pc__pic--p{aspect-ratio:1/1}
.pc__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:.5vw .5vw 0 0;display:block}
.pc__b{padding:2.4vw;display:flex;flex-direction:column;flex:1 1 auto}
.pc__b .cap{margin-top:.8vw}
.pc__b .bdy{margin-top:1.2vw}
.pc__b .tp__lnk{margin-top:auto;padding-top:var(--s-klein)}

/* ---------- mobiel ---------- */
@media (max-width:1024px){
  .md .cap + .stm{margin-top:4vw}
  .md .cap + .ttl{margin-top:var(--s-kop)}
  .md .ttl + .stm{margin-top:6vw}
  .md-just{text-align:left}
  .md-row{grid-template-columns:1fr !important;row-gap:0}
  .md-row > li{padding:7vw 0 !important}
  .md-row > li:first-child{padding-top:0 !important}
  .md-row > li:last-child{padding-bottom:0 !important}
  .md-row > li + li{border-left:0;border-top:1px solid var(--ln)}
  .md-row .lst{margin-top:4vw}
  .md-row .bdy{margin-top:3vw}
  .md-n{font-size:var(--t-titel)}
  .md-n + .cap{margin-top:4vw}
  .vk-ico{width:4vw;margin-top:0}
  .vk-grid{grid-template-columns:1fr !important;row-gap:5vw;margin-top:14vw}
  .vk{padding:9vw 7vw 7vw;border-radius:2vw}
  .vk .bdy{margin-top:3vw}
  .vk-tag{top:-3vw;left:6vw;padding:.8em 1.2em}
  .vk-rows li{gap:4vw;padding:4vw 0}
  .vk-t{font-size:var(--t-tekst)}
  .vk--wide{flex-direction:column;align-items:flex-start;gap:4vw}
  .vk--wide .bdy{max-width:none}
  .hr__p{max-width:none}
  .hr__b{flex-wrap:wrap;gap:5vw}
  .hr__pic{height:auto;background:var(--p-geel);padding-bottom:6vw}
  .hr__pic img{height:120vw}
  .hr__card{position:relative;z-index:2;width:auto;margin:-12vw var(--gutter) 0;padding:9vw 7vw 7vw}
  .md-f{height:120vw}
  .ab__top .lead{max-width:none}
  .ab__grp{margin-top:14vw}
  .ab__grp + .ab__grp{margin-top:14vw}
  .ab__r{grid-template-columns:1fr;row-gap:3vw;padding:7vw 0}
  .ab__tag{margin-top:1vw}
  .ab__e{justify-self:start;text-align:left}
  .co__cols{margin-top:14vw}
  .zs__tl{margin-top:14vw}
  .zs__steps{grid-template-columns:1fr;row-gap:10vw}
  .zs__steps li{padding-top:0;padding-left:9vw}
  .zs__when{position:static;display:block;margin-bottom:4vw}
  .zs__dot{top:.9vw;left:0;width:3.2vw;height:3.2vw;transform:none}
  .zs__line{display:none}
  .zs__steps .md-n{font-size:var(--t-titel-s)}
  .zs__steps .bdy{max-width:none;margin-top:3vw}
  .zs__cta{flex-wrap:wrap;gap:5vw}
  .wf__top{display:block}
  .wf__top .ttl{text-align:left;margin-top:var(--s-kop)}
  .wf__stm{margin-top:6vw}
  .bw__nums{margin-top:14vw;grid-template-columns:1fr 1fr !important;row-gap:10vw}
  .bw__nums > li{padding:0 !important;border:0 !important}
  .bw__grid{margin-top:14vw;grid-template-columns:1fr 1fr;gap:4vw}
  .bw__q{grid-column:1 / -1;padding:9vw 7vw 7vw}
  .bw__t{font-size:var(--t-lead)}
  .pr__top .bdy,.pr__top .txt{max-width:none}
  .vk--p .vk-rows li{padding:3.5vw 0}
  .vk--p .vk-rows .vk-ico{width:3.4vw}
  .vk--p .vk-rows{margin-top:8vw}
  .vk--p .vk-btn{padding-top:8vw}
  .vk--p .vk-btn a + a{margin-top:3vw}
  .fa__grid{display:block}
  .fa__grid .fq{margin-top:var(--s-groep)}
  .fa__grid .fq__a .bdy{max-width:none}
  .ft__grid,.ft__grid--r{display:block}
  .ft__r,.ft__grid--r .ft__r{padding:0;margin-top:var(--s-groep)}
  .ft__r .txt{max-width:none}
  .ft__b{flex-wrap:wrap;gap:5vw;margin-top:var(--s-groep);padding-top:0}
  .ft__r .vk .bw__t{font-size:var(--t-lead)}
  .pc__c{padding:0}
  .pc__pic,.pc__pic img{border-radius:2vw 2vw 0 0}
  .pc__b{padding:7vw}
  .pc__b .bdy{margin-top:3vw}
}

/* =====================================================================
   gedeeld, ontstaan in de Club-rondes (Club zelf staat in /club.css)
   ===================================================================== */

/* hero met collage (.ch .ch2 + .cz): links tekst, rechts twee beelden + kaart; gebruikt door club en aanbod */
.ch__grid{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);column-gap:5vw;align-items:stretch}
.ch .hr__l{min-width:0}
.ch h1{white-space:nowrap}
.ch .hr__p{max-width:29vw;text-align:left;text-wrap:pretty}
.ch2 .hr__l{display:flex;flex-direction:column}
.ch2 .hr__l .cap{text-box:trim-start cap alphabetic}
.ch2 .hr__b{margin-top:auto;padding-top:var(--s-groep)}
.cz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:1.6vw;height:38vw}
.cz .pic{position:relative;overflow:hidden;min-height:0}
.cz .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cz__a{grid-row:1 / 3}
.cz__a img{object-position:45% 60%}
.cz__b img{object-position:50% 72%}
.md .cz__k{padding:3vw 2.4vw 2.4vw}
.cz__k .bdy{margin-top:1vw;text-wrap:pretty}
@media (max-width:1024px){
  .ch__grid{display:block}
  .ch h1{white-space:normal;text-wrap:balance}
  .ch h1 br{display:none}
  .ch .hr__p{max-width:none}
}
@media (max-width:767px){
  .ch2 .hr__b{margin-top:0}
  .cz{margin-top:var(--s-groep);height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:3vw;grid-template-areas:"a b" "k k"}
  .cz__a{grid-area:a;grid-row:auto;aspect-ratio:3/4}
  .cz__b{grid-area:b;aspect-ratio:3/4}
  .md .cz__k{grid-area:k;margin-top:5vw;padding:9vw 7vw 7vw}
  .cz__k .bdy{margin-top:3vw}
}

/* quote en video om en om in een dambord: quotes dubbel zo breed */
.bw__grid--zz{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:2vw}
.bw__grid--zz .bw__q{grid-column:span 2;justify-content:flex-start;padding:3.6vw 2.4vw 2.4vw}
.bw__grid--zz .bw__t{font-size:1.6vw}

/* prijs-intro: smalle alinea onder de titel */
.pr__top .txt{max-width:29vw;text-align:left;text-wrap:balance}

@media (max-width:1024px){
  .bw__grid--zz{grid-template-columns:1fr;row-gap:5vw}
  .bw__grid--zz .bw__q{grid-column:auto;padding:9vw 7vw 7vw}
  .bw__grid--zz .bw__t{font-size:var(--t-lead)}
  .bw__grid--zz .rv__v{aspect-ratio:4/5}
  .pr__top .txt{max-width:none}
}

/* tekst in de hero-kaart: links uitgelijnd, iets compacter */
.md .hr__card .bdy{text-align:left;hyphens:manual;text-wrap:pretty}
/* een knop of link staat nooit tegen de tekst erboven */
.md .vk .vk-a{margin:var(--s-kop) 0 0}
.md .vk .vk-a .tp__lnk{margin-top:0 !important}
.md .vk > .tp__lnk{margin-top:var(--s-kop) !important}
.md .vk > :is(.hy__pill,.hk__pill){margin-top:var(--s-kop)}
.md :is(.lst,.bdy,.txt,.lead,.vk-rows,.vk-t) + .tp__lnk{display:inline-block;margin-top:var(--s-kop) !important}
/* koffie: eyebrow + titel even groot als "Goed om te weten" */
.ft__r .kf__kop .cap{margin-top:0}

/* links in lopende tekst */
.md .fq__a a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* ---------- AANBOD, ronde 1 (2026-10-29) ---------- */
/* on the menu: elke groep is een kaart met sticker (ronde 3), titel + lijn, rijen erin */
.md .ab__grp{margin-top:7vw;padding:4.4vw 3.2vw 3.2vw}
.md .ab__grp + .ab__grp{margin-top:4.4vw}
.ab__kop{padding-bottom:2.4vw;margin-bottom:2.4vw;border-bottom:1px solid var(--ln)}
.ab__gt{margin:0;text-box:trim-both cap alphabetic}
.ab__sub{margin-top:1.2vw}
/* van koffie tot try-out: leestekst over de volle kolom, uitgevuld */
.ab-zs .zs__steps .bdy{max-width:none;text-align:justify;text-align-last:left;hyphens:none}
/* koffie: gespreide Obviously-titel over de volle breedte, zoals 'So here’s / what’s next'; compact: liggende foto, tekst en knoppen bij elkaar */
.kf-ab .kf__spread{margin-bottom:5vw}
.kf-ab .ft__grid{align-items:center}
.kf-ab .ft__pic{aspect-ratio:4/3}
.kf-ab .ft__pic img{object-position:50% 30%}
.kf-ab .ft__r .lead{margin-top:0}
.kf-ab .ft__b{margin-top:0;padding-top:var(--s-groep)}
@media (max-width:1024px){
  .md .ab__grp{margin-top:14vw;padding:11vw 6vw 4vw}
  .md .ab__grp + .ab__grp{margin-top:10vw}
  .ab__kop{padding-bottom:5vw;margin-bottom:7vw}
  .ab-zs .zs__steps .bdy{text-align:left}
  .kf-ab .kf__spread{flex-direction:column;margin-bottom:10vw}
  .kf-ab .kf__spread span + span{align-self:flex-end}
}

/* ---------- AANBOD, ronde 4 (2026-10-29) ---------- */
/* titel met sticker: de tweede zin als blauwe pil die op de titel geplakt is */
.hr__stk{display:inline-block;vertical-align:middle;margin-left:1.4vw;transform:translateY(-.3vw) rotate(-4deg);border-radius:999px;padding:.95em 1.5em;background:var(--kaart-bruin);color:var(--brand-blue);font-family:var(--f-caps);text-transform:uppercase;font-size:1.25vw;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.hr:has(.hr__stk) .hr__p{max-width:42vw}
/* menu: groepstitel in Obviously, aanbodnaam in Mori */
.ab__grp .ab__w{font-family:var(--f-licht);text-transform:none;font-size:2.2vw;line-height:1.1;text-box:trim-both cap alphabetic;white-space:normal}.ag .vk{background:linear-gradient(rgba(206,221,230,.12),rgba(206,221,230,.12)),url("/assets/textures/papier-bruin-6.jpg") 0 0/var(--tex,1000px) var(--tex,1000px) repeat #1F0C0A}
@media (max-width:1024px){
  .hr__stk{display:table;margin:5vw 0 0;font-size:3.4vw;white-space:normal;line-height:1.25;transform:rotate(-3deg)}
  .hr:has(.hr__stk) .hr__p{max-width:none}
  .ab__grp .ab__w{font-size:7vw}
}

/* ---------- AANBOD, ronde 6 (2026-10-29) ---------- */
/* menu: groepstitels = gewone .ttl.ttl--s (zelfde grootte en letterafstand als elders); rijen reageren op hover/tik:
   de naam schuift in en er verschijnt een pijltje ervoor; de hele rij is klikbaar via de Ontdek-link */
.ab__grp .ab__gt{margin:0}
.ab__r{position:relative}
.ab__e .tp__lnk::after{content:"";position:absolute;inset:0}
.ab__grp .ab__w{position:relative;display:inline-block;transition:transform .45s var(--ease)}
.ab__grp .ab__w::before{content:"→";position:absolute;left:-2.2vw;top:50%;font-family:var(--f-licht);opacity:0;transform:translate(-.8vw,-50%);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.ab__r:hover .ab__w,.ab__r:active .ab__w,.ab__r:focus-within .ab__w{transform:translateX(2.2vw)}
.ab__r:hover .ab__w::before,.ab__r:active .ab__w::before,.ab__r:focus-within .ab__w::before{opacity:1;transform:translate(0,-50%)}
.ab__r .ab__tag{transition:transform .45s var(--ease)}
.ab__r:hover .ab__tag,.ab__r:active .ab__tag{transform:rotate(2deg)}
/* de pil vliegt binnen en plakt schuin op de titel */
@keyframes stk-in{0%{opacity:0;transform:translate(14vw,-9vw) rotate(18deg) scale(1.25)}60%{opacity:1}100%{opacity:1;transform:translateY(-.3vw) rotate(-4deg) scale(1)}}
@media (max-width:1024px){
  .ab__grp .ab__w::before{display:none}
  .ab__r:active .ab__w,.ab__r:hover .ab__w{transform:translateX(2vw)}
  @keyframes stk-in{0%{opacity:0;transform:translate(20vw,-8vw) rotate(14deg) scale(1.2)}100%{opacity:1;transform:rotate(-3deg)}}
}

/* ---------- AANBOD, ronde 7 (2026-10-29) ---------- */
/* film: niet laten plakken (Vimeo-iframe in een plakkend blok flikkert bij het scrollen) */
html.js main > section.film{position:relative !important;top:auto !important;will-change:auto}
@keyframes stk-in2{0%{opacity:0;transform:translate(-12vw,-10vw) rotate(-24deg) scale(1.25)}60%{opacity:1}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
@media (max-width:1024px){
  @keyframes stk-in2{0%{opacity:0;transform:translate(-10vw,-8vw) rotate(-20deg) scale(1.2)}100%{opacity:1;transform:rotate(-4deg)}}
}
@keyframes stk-in{0%{opacity:0;transform:translate(16vw,-8vw) rotate(16deg) scale(1.2)}60%{opacity:1}100%{opacity:1;transform:rotate(-4deg) scale(1)}}.ag-ab .vk{background:linear-gradient(rgba(206,221,230,.12),rgba(206,221,230,.12)),url("/assets/textures/papier-bruin-6.jpg") 0 0/var(--tex,1000px) var(--tex,1000px) repeat #1F0C0A}
/* één maat per rol op deze pagina: Obviously-titels = .ttl; in kaarten/tegels kleiner; Mori-ondertitels = .lst; leestekst = .txt */
.ab .ab__grp .ab__w{font-size:var(--t-lijst);line-height:1.15;letter-spacing:-.02em}
.ab-zs .zs__steps .bdy{font-family:var(--f-body);font-size:1.22vw;line-height:1.5;letter-spacing:-.01em}.kf-ab .lead{font-size:var(--t-lijst);line-height:1.25}
.bw-ab .bw__t{font-size:var(--t-lijst)}
.bw-ab .bw__nums{margin-top:7vw}
@media (max-width:1024px){
  .ab-zs .zs__steps .bdy{font-size:var(--t-tekst)}.kf-ab .lead,.bw-ab .bw__t{font-size:var(--t-lead)}
  .bw-ab .bw__nums{margin-top:14vw}
}

/* ---------- AANBOD, ronde 9 (2026-10-29): hero beeld eerst ---------- */
.md .hb{padding-top:4vw}
.hb__frame{position:relative;height:min(42vw,calc(100svh - var(--navh,8vw) - 9vw));overflow:hidden;background:var(--p-papier)}
.hb__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.hb__frame img.is-on{opacity:1}
.hb .hr__stk{position:absolute;right:-3.4vw;bottom:5vw;z-index:2;margin:0;border-radius:1.6em;line-height:1.3;padding:1em 1.6em;font-size:1.3vw;transform:rotate(-5deg);animation:stk-hb .9s cubic-bezier(.2,1.35,.4,1) .9s both}
@keyframes stk-hb{0%{opacity:0;transform:translate(10vw,-8vw) rotate(14deg) scale(1.2)}60%{opacity:1}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
.hb .hr__b{margin-top:auto;padding-top:var(--s-groep)}
@media (prefers-reduced-motion:reduce){.hb .hr__stk{animation:none}.hb__frame img{transition:none}}
@media (max-width:1024px){
  .md .hb{padding-top:24vw}
  .hb__frame{height:auto;aspect-ratio:4/5}
  .hb .hr__stk{right:-2vw;bottom:6vw;font-size:3.4vw}
  @keyframes stk-hb{0%{opacity:0;transform:translate(8vw,-8vw) rotate(12deg) scale(1.2)}100%{opacity:1;transform:rotate(-4deg)}}
  .hb .hr__b{margin-top:0}
}

/* ---------- AANBOD, ronde 10 (2026-10-29): Mori-titels in drie trappen ----------
   statement (3.06vw)  = titels van blokken + "Nog niet zeker?"
   item-titel (2.2vw)  = namen in het menu, stappen van de tijdlijn, aanbod op de agendategels
   lijst (1.75vw)      = quotes en de koffietekst; leestekst blijft .txt */
:root{--t-item:2.2vw}
.ab .ab__grp .ab__w,.ab-zs .zs__steps .lst,.ag-ab .pc__b .lst{font-size:var(--t-item);line-height:1.1;letter-spacing:-.02em}
@media (max-width:1024px){
  :root{--t-item:6.6vw}
}
.hb__frame{position:absolute;inset:0;height:auto}
.hb .hr__stk{right:auto;left:-3.4vw}
@keyframes stk-hb{0%{opacity:0;transform:translate(-10vw,-8vw) rotate(-24deg) scale(1.2)}60%{opacity:1}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
@media (max-width:1024px){
  .hb__frame{position:relative;inset:auto;aspect-ratio:4/5}
  .hb .hr__stk{left:-2vw}
  @keyframes stk-hb{0%{opacity:0;transform:translate(-8vw,-8vw) rotate(-20deg) scale(1.2)}100%{opacity:1;transform:rotate(-4deg)}}
}

/* ---------- AANBOD, ronde 12 (2026-10-29) ---------- */
/* de site-pijl (assets/icon-arrow-*.svg) als masker, zodat hij de tekstkleur volgt */
:root{--pijl:url("/assets/icon-arrow-bruin.svg")}
/* menu: rustiger. Groepstitel = grote Obviously zonder lijn eronder; alleen dunne lijnen tussen de rijen */
.ab__kop{border-bottom:0;padding-bottom:0;margin-bottom:3vw}
.ab__grp .ab__gt{font-size:var(--t-titel)}
/* pijltje op Aanbod: zelfde pijl en zelfde draai als overal op de site (Laura 2026-11-06) */
.ab__grp .ab__w::before{content:"";left:-2.6vw;width:1.7vw;height:1.7vw;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;transition:opacity .35s var(--ease),transform .45s cubic-bezier(.2,.7,.1,1)}
.ab__r:hover .ab__w::before,.ab__r:active .ab__w::before,.ab__r:focus-within .ab__w::before{transform:translate(0,-50%) rotate(90deg)}
.ab__r:hover .ab__w,.ab__r:active .ab__w,.ab__r:focus-within .ab__w{transform:translateX(2.6vw)}
.hb__frame{position:relative;inset:auto;flex:1;min-height:0;overflow:visible}
.hb__frame img{overflow:hidden}
.hb .hr__stk{left:-3.4vw;bottom:-1.6vw}
.hb__w{display:flex;justify-content:space-between;align-items:baseline;margin-top:4.2vw}
.hb__w a{position:relative;font-family:var(--f-titel);font-synthesis:none;text-transform:uppercase;font-size:var(--t-titel-s);line-height:.9;letter-spacing:0;white-space:nowrap;text-box:trim-both cap alphabetic;color:inherit;text-decoration:none;transition:transform .4s var(--ease)}
.hb__w a::after{content:"";position:absolute;left:0;right:0;bottom:-1vw;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.hb__w a:hover::after,.hb__w a:focus-visible::after{transform:scaleX(1)}
@media (max-width:1024px){
  .ab__kop{margin-bottom:6vw}
  .ab__grp .ab__gt{font-size:var(--t-titel)}
  .hb__frame{flex:none}
  .hb .hr__stk{bottom:-3vw}
  .hb__w{display:grid;grid-template-columns:1fr 1fr;row-gap:7vw;margin-top:12vw}
  .hb__w a{font-size:9vw;justify-self:start}
  .hb__w a::after{bottom:-2vw}
}

/* ---------- AANBOD, ronde 13: "Nog niet zeker?" = item-titel met de knop ernaast ---------- */
.kz__end{margin-top:7vw;display:flex;justify-content:space-between;align-items:center;gap:4vw}
.kz__end .lst{margin:0;font-size:var(--t-item);line-height:1.15;letter-spacing:-.02em}
@media (max-width:1024px){
  .kz__end{margin-top:14vw;flex-direction:column;align-items:flex-start;gap:7vw}
  .kz__end .lst br{display:none}
}

/* ---------- AANBOD, ronde 14: aanbodwoorden onder de herofoto in de caps van de site (Satoshi, zoals .lab) ---------- */
.hb__w{margin-top:3.6vw}
.hb__w a{font-family:var(--f-caps);font-size:1.9vw;line-height:1;letter-spacing:-.02em}
.hb__w a::after{bottom:-.7vw}
@media (max-width:1024px){
  .hb__w{row-gap:5vw;column-gap:6vw;margin-top:13vw}
  .hb__w a{font-size:5.4vw}
  .hb__w a::after{bottom:-1.6vw}
}

/* ---------- AANBOD, ronde 15: hero = tekst boven, brede foto, aanbodwoorden onder ---------- */
.md .hw2{padding-top:4vw}
.hw2__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:5vw;align-items:end}
.hw2 .hr__b{margin-top:var(--s-groep);padding-top:0}
.hw2__pic{margin-top:5vw}
.hw2 .hb__frame{position:relative;inset:auto;flex:none;height:auto;aspect-ratio:2.2/1;overflow:visible}
.hw2 .hr__stk{left:-1.6vw;bottom:-1.8vw}
.hw2 .hb__w{margin-top:4vw}
@media (max-width:1024px){
  .md .hw2{padding-top:24vw}
  .hw2__top{display:block}
  .hw2__pic{margin-top:12vw}
  .hw2 .hb__frame{aspect-ratio:4/3}
  .hw2 .hr__stk{left:-2vw;bottom:-3vw}
}
.hw2 .hb__w{margin-top:4.6vw}
@media (max-width:1024px){.hw2 .hb__w{margin-top:13vw}}
/* foto zo hoog als past: tekst, foto én aanbodwoorden samen op één scherm (nooit lager dan 24vw, nooit hoger dan 2.2:1) */
.hw2 .hb__frame{aspect-ratio:auto;height:clamp(16vw,calc(100svh - var(--navh,8vw) - 27vw),45vw)}
@media (max-width:1024px){.hw2 .hb__frame{height:auto;aspect-ratio:4/3}}
.hw2__pic{margin-top:3.6vw}
.hw2 .hb__w{margin-top:3.8vw}
@media (max-width:1024px){.hw2__pic{margin-top:12vw}.hw2 .hb__w{margin-top:13vw}}
.hw2 .hr__b{margin-top:0;justify-content:flex-end}
.hw2 .hb__frame{height:clamp(24vw,calc(100svh - var(--navh,8vw) - 24.5vw),48vw)}
.hw2 .hw2__stk{top:-2.2vw;bottom:auto;left:-1.6vw}
.hw2__pic{margin-top:5vw}
@keyframes stk-hb{0%{opacity:0;transform:translate(-10vw,-6vw) rotate(-24deg) scale(1.2)}60%{opacity:1}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
@media (max-width:1024px){
  .hw2 .hr__b{justify-content:flex-start}
  .hw2 .hb__frame{height:auto;aspect-ratio:1/1}
  .hw2 .hw2__stk{top:-4vw;left:-2vw}
  .hw2__pic{margin-top:16vw}
}

/* ---------- AANBOD, ronde 17: knoppen onder de titel, uitleg rechts, pil rechtsboven op de foto, geen aanbodwoorden, foto hoger ---------- */
.hw2__top{align-items:end}
.hw2 .hr__b{margin-top:var(--s-groep);justify-content:flex-start}
.hw2 .hb__frame{height:clamp(26vw,calc(100svh - var(--navh,8vw) - 22vw),50vw)}
.hw2 .hw2__stk{top:-2.2vw;bottom:auto;left:auto;right:-1.6vw}
@keyframes stk-hb{0%{opacity:0;transform:translate(10vw,-6vw) rotate(18deg) scale(1.2)}60%{opacity:1}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
@media (max-width:1024px){
  .hw2 .hw2__stk{top:-4vw;right:-2vw;left:auto}
  @keyframes stk-hb{0%{opacity:0;transform:translate(8vw,-6vw) rotate(14deg) scale(1.2)}100%{opacity:1;transform:rotate(-4deg)}}
}
.hw2__pic,.hw2 .hb__frame{width:100%}
@media (max-width:1024px){.hw2 .hb__frame{height:auto;aspect-ratio:1/1}}

/* ---------- AANBOD, ronde 18: titel ↔ uitleg, knoppen ↔ aanbodlinks; pil andersom gekanteld ---------- */
.hw2__top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"cap ." "t p" "b l";align-items:center}
.hw2__cap{grid-area:cap}
.hw2__t{grid-area:t;margin-top:var(--s-kop)}
.hw2 .hw2__b{grid-area:b;margin-top:var(--s-groep)}
.hw2__links{grid-area:l;margin-top:var(--s-groep);display:flex;justify-content:space-between;align-items:center}
.hw2__links .tp__lnk{margin:0 !important;white-space:nowrap}
.hw2 .hw2__stk{transform:rotate(5deg);animation-name:stk-hb2}
@keyframes stk-hb2{0%{opacity:0;transform:translate(10vw,-6vw) rotate(-14deg) scale(1.2)}60%{opacity:1}100%{opacity:1;transform:rotate(5deg) scale(1)}}
@media (max-width:1024px){
  .hw2__top{display:block}
  .hw2__links{flex-wrap:wrap;justify-content:flex-start;gap:4vw 6vw}
  @keyframes stk-hb2{0%{opacity:0;transform:translate(8vw,-6vw) rotate(-12deg) scale(1.2)}100%{opacity:1;transform:rotate(4deg)}}
}
@media (prefers-reduced-motion:reduce){.hw2 .hw2__stk{animation:none}}
@media (max-width:1024px){.hw2__links{margin-top:10vw}}

/* ---------- AANBOD, ronde 20: aanbodlinks links onder de titel, knoppen rechts onder de uitleg; tweede knop = omlijnde pil (zoals .md-ghost op membership) ---------- */
.md-ghost{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:calc(1.1em - 1px) 1.7em;line-height:1;white-space:nowrap;font-family:var(--f-caps);text-transform:uppercase;font-size:var(--t-eyebrow);letter-spacing:-.02em;color:inherit;text-decoration:none;transition:background-color .3s,color .3s}
.pg--geel .md-ghost:hover{background:var(--brand-brown);color:var(--p-geel)}
.pg--bruin .md-ghost:hover{background:var(--brand-blue);color:var(--brand-brown)}
.hw2__top{grid-template-areas:"cap ." "t p" "l b"}
.hw2__links{justify-content:flex-start;gap:3vw}
.hw2 .hw2__b{gap:1.2vw}
@media (max-width:1024px){
  .hw2__links{gap:4vw 6vw}
  .hw2 .hw2__b{margin-top:10vw;gap:3vw}
  .md-ghost{font-size:var(--t-eyebrow)}
}

/* ---------- AANBOD, ronde 21: pil linksboven op de foto (rechts botste hij met de knoppen) ---------- */
.hw2 .hw2__stk{left:-1.6vw;right:auto;animation-name:stk-hb3}
@keyframes stk-hb3{0%{opacity:0;transform:translate(-10vw,-6vw) rotate(-14deg) scale(1.2)}60%{opacity:1}100%{opacity:1;transform:rotate(5deg) scale(1)}}
@media (max-width:1024px){
  .hw2 .hw2__stk{left:-2vw;right:auto}
  @keyframes stk-hb3{0%{opacity:0;transform:translate(-8vw,-6vw) rotate(-12deg) scale(1.2)}100%{opacity:1;transform:rotate(4deg)}}
}
@media (prefers-reduced-motion:reduce){.hw2 .hw2__stk{animation:none}}
/* ronde 22: pil kantelt met het einde ("covered") omhoog */
.hw2 .hw2__stk{transform:rotate(-5deg);animation-name:stk-hb4}
@keyframes stk-hb4{0%{opacity:0;transform:translate(-10vw,-6vw) rotate(-24deg) scale(1.2)}60%{opacity:1}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
@media (max-width:1024px){@keyframes stk-hb4{0%{opacity:0;transform:translate(-8vw,-6vw) rotate(-20deg) scale(1.2)}100%{opacity:1;transform:rotate(-4deg)}}}
@media (prefers-reduced-motion:reduce){.hw2 .hw2__stk{animation:none}}

/* ---------- gedeeld sinds 2026-10-29 (doortrekken van Club): de collage-hero (.ch2) op elke pagina,
   het koffieblok met eyebrow + grote titel en een smalle tekst ---------- */
.ch2 .hr__l{padding-top:4vw}
.cz__k .m-br{display:block}
@media (min-width:1025px){.ch2 .hr__p{white-space:nowrap}}
.ft__r .kf__kop ~ div .lead{max-width:30vw;text-wrap:pretty}
.ft__r .kf__kop ~ div .lead br{display:none}
@media (max-width:1024px){.ch2 .hr__l{padding-top:0}.ft__r .kf__kop ~ div .lead{max-width:none}}
/* strategiesessie: titel van twee regels, dus een iets lagere collage zodat de knoppen niet te ver van de tekst zakken */
[data-pg="strategiesessie"] .cz{height:34vw}
@media (max-width:767px){[data-pg="strategiesessie"] .cz{height:auto}}

/* =====================================================================
   gedeeld sinds 2026-10-29 (verhuisd uit /club.css, Club blijft pixel-identiek): slotzin met knop rechts (.wk__end),
   de plek (.lc: smalle tekst + knop, mozaïek), teamkop (.tm), prijsblok met foto's naast de titel en mini-blokjes (.pz)
   ===================================================================== */
/* ---------- 2. waarom een hele week: slotzin in drie regels met de knop rechts ---------- */
.vk-end--3{max-width:none;white-space:nowrap}
.wk__end{margin-top:7vw;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4vw;align-items:last baseline}
.wk__end .lead{margin:0}

/* ---------- 6. de plek: smalle tekst met de boekknop ernaast, mozaïek van villafoto's ---------- */
.lc > div[data-ap-kids]:first-child{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:space-between;column-gap:5vw}
.lc > div[data-ap-kids]:first-child > .cap{grid-column:1;grid-row:1}
.lc > div[data-ap-kids]:first-child > .stm{grid-column:1;grid-row:2;margin-bottom:0}
/* tekst en knop delen de rij van de titel: bovenkant tekst = bovenkant titel, voet van de knoptekst = voet van de laatste titelregel */
.lc .lc__p{grid-column:2;grid-row:2;align-self:start;margin:1.52vw 0 0;max-width:none}
.lc__grid{margin-top:7vw;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.2vw}
.lc__f{position:relative;margin:0;min-height:0}
.lc__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:.5vw;display:block}
.lc__f .vk-tag{z-index:1}
.lc__f--1{grid-column:1 / 8;height:34vw}
.lc__f--2{grid-column:8 / 10}
.lc__f--3{grid-column:10 / 13}
.lc__f--4{grid-column:1 / 5;height:26vw}
.lc__f--5{grid-column:5 / 8}
.lc__f--6{grid-column:8 / 13}
.lc__f--7{grid-column:1 / 4;height:24vw}
.lc__f--8{grid-column:4 / 13}
.lc__f--2 img{object-position:40% 50%}

/* ---------- 7. team ---------- */
/* kop: eyebrow + titel links, de alinea rechts naast de titel (max. vier regels), daarna meteen de tegels */
.tm > div[data-ap-kids]:first-child{display:grid;grid-template-columns:auto auto;grid-template-rows:auto 1fr;justify-content:space-between;column-gap:6vw}
.tm > div[data-ap-kids]:first-child > .cap{grid-column:1;grid-row:1;text-box:trim-start cap alphabetic}
.tm > div[data-ap-kids]:first-child > .stm{grid-column:1;grid-row:2;align-self:last baseline}
.tm .tm__p{grid-column:2;grid-row:2;align-self:last baseline;margin:0;max-width:none;text-wrap:pretty}
.tm .vk-grid{margin-top:5vw}

/* ---------- 9. jouw investering: foto's naast de titel; één kaart met inbegrepen + mini-blokjes per kamer ---------- */
.pr__top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:5vw;align-items:end}
.pr__top .txt{max-width:none;text-wrap:wrap}
.pr__pics{display:grid;grid-template-columns:12vw 15vw;gap:1.6vw;align-items:end}
.pr__pics .pic{aspect-ratio:4/5}
.pr__pics .pic + .pic{aspect-ratio:3/4;margin-bottom:3.2vw}
.pz{margin-top:7vw;padding:3.6vw 2.4vw 2.4vw}
.pz__grid{display:grid;grid-template-columns:7fr 5fr;column-gap:4vw}
/* links onderaan uitgelijnd: het geheel eindigt op de lijn van "niet inbegrepen" = de lijn van de laatste knop */
.pz__inc{display:flex;flex-direction:column;justify-content:flex-end}
.pz__inc .vk-rows{margin-top:0}
.pz__inc .vk-rows li{padding:1vw 0}
.pz__inc .vk-rows li:first-child{padding-top:0}
.pz .pz__not{margin:var(--s-groep) 0 0;display:flex;align-items:center;min-height:3.35vw}
.pz__ch{border-left:1px solid var(--ln);padding-left:4vw}
.pz__lab{text-box:trim-both cap alphabetic}
.pz__rooms{list-style:none;margin:var(--s-kop) 0 0;padding:0}
.pz__room{padding:1.8vw 0}
.pz__room:last-child{padding-bottom:0}
.pz__room + .pz__room{border-top:1px solid var(--ln)}
.pz__mini{display:flex;justify-content:space-between;align-items:stretch;gap:2vw}
.pz__name p{margin:0}
.pz__name .pz__cnt{text-box:trim-start cap alphabetic}
.pz__name .lst{margin-top:.8vw}
.pz__name .bdy{margin-top:.4vw}
.pz__pr{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right}
.pz__price{margin:0}
.pz__price .md-n{display:block;font-size:var(--t-titel-s);line-height:1;text-box:trim-both cap alphabetic}
.pz__ex{margin:.8vw 0 0}
.pz__btn{margin:var(--s-kop) 0 0}
.md .pz__btn a{display:block;text-align:center}
@media (min-width:1025px){.lc__p,.tm__p{white-space:nowrap}}
@media (max-width:1024px){
  .vk-end--3{white-space:normal}
  .vk-end--3 br{display:none}
  .wk__end{margin-top:14vw;grid-template-columns:1fr;row-gap:var(--s-groep)}
  .wk__end > a{justify-self:start}
  .tm > div[data-ap-kids]:first-child{display:block}
  .tm .tm__p{display:block;margin-top:var(--s-groep);text-box:none}
  .tm .vk-grid{margin-top:14vw}
  .pr__top{display:block}
  .pr__pics{margin-top:var(--s-groep);grid-template-columns:5fr 4fr;gap:3vw;align-items:start}
  .pr__pics .pic + .pic{margin:9vw 0 0}
  .pz{margin-top:14vw;padding:9vw 7vw 7vw}
  .pz__inc .vk-rows li{padding:4vw 0}
  .pz .pz__not{min-height:0;margin-top:7vw}
  .pz__ch{border-left:0;padding-left:0;border-top:1px solid var(--ln);margin-top:8vw;padding-top:8vw}
  .pz__room{padding:6vw 0}
  .pz__name .lst{margin-top:2.5vw}
  .pz__name .bdy{margin-top:1.5vw}
  .pz__ex{margin-top:2vw}
  .pz__btn{margin-top:5vw}
  .lc > div[data-ap-kids]:first-child{display:block}
  .lc .lc__p{margin-top:var(--s-groep);text-box:none}
  .lc__grid{margin-top:12vw;grid-template-columns:1fr 1fr;gap:3.5vw}
  .lc__f{grid-column:auto !important;height:56vw !important}
  .lc__f--1,.lc__f--8{grid-column:1 / -1 !important;height:62vw !important}
  .lc__f img{border-radius:2vw}
}
@media (max-width:767px){
  .lc__f .vk-tag{top:-2.6vw;left:4vw}
  .pr__pics .pic{aspect-ratio:1/1}
  .pz{padding:8vw 6vw 6vw}
  .pz__inc .vk-rows li{padding:3.5vw 0}
  .pz__price .md-n{font-size:clamp(34px,9.5vw,40px)}
  .pz__ex{white-space:nowrap}
}
/* intensive: de garantie als blauwe kaart over de volle breedte onder de prijskaart */
.vk--wide.pz__g2{margin-top:2vw;padding-top:3.2vw}
.vk--wide.pz__g2 .txt{max-width:60vw}
@media (max-width:1024px){.vk--wide.pz__g2{margin-top:5vw;padding-top:9vw}.vk--wide.pz__g2 .txt{max-width:none}.vk--wide.pz__g2 .txt br{display:none}}