/* =====================================================================
   Pagina-systeem: de stijl die op de Club-pagina is uitgewerkt (oktober 2026), herbruikbaar voor elke pagina
   in de stijl "kaart met sticker". Laad dit na /paginas.css en vóór een eventueel pagina-eigen bestand
   (bv. /club.css). Uitleg en werkwijze: _dev/pitstop/STIJLGIDS-PAGINAS.md.
   Volgorde: desktop per onderdeel, dan tablet (≤1024px), dan gsm (≤767px).
   ===================================================================== */

/* ---------- uitspraak op een foto: foto vult het blok, gele kaart met bruine sticker (.lq; .lq--r = kaart rechts) ---------- */
.lq{position:relative;height:60vw;overflow:hidden;background:var(--brand-brown)}
.lq__img{position:absolute;top:0;right:0;height:100%;width:108%;max-width:none;object-fit:cover;object-position:50% 41%}
.md .lq__card{position:absolute;left:var(--gutter);bottom:var(--gutter);width:43vw;background:var(--p-geel);color:var(--brand-brown);--ln:var(--p-lijn-donker)}
.md .lq__card .vk-tag{background:var(--brand-brown);color:var(--brand-blue)}
.lq__card .bw__t{font-size:1.75vw}
.md .lq--r .lq__card{left:auto;right:var(--gutter);width:46vw}
.lq--r .lq__img{width:100%;object-position:50% 38%}
.lq__b{margin:var(--s-kop) 0 0}
/* rustige knoppen: caps met een lijn eronder in plaats van een gevulde pil. Zet de knop in een element met
   .knop-lijn, of in een van de bekende plekken (onder een uitspraak, na de stappen, bij de plek). */
html:not(#a) body:not(#z) .md :is(.knop-lijn,.lq__b,.zs__cta,.lc__b) :is(.hk__pill,.hy__pill),
html:not(#a) body:not(#z) .md :is(.knop-lijn,.lq__b,.zs__cta,.lc__b) :is(.hk__pill,.hy__pill):hover{display:inline;background:none !important;color:inherit !important;padding:0 0 .25em !important;border-radius:0 !important;border-bottom:1px solid currentColor !important;white-space:normal}

/* ---------- tijdlijn met vaste foto (.vd + .vdp): de foto blijft staan en past altijd in beeld;
   /pagina-systeem.js verdeelt de vaste periode in gelijke stukken, één per foto ---------- */
.vd__l{top:calc(var(--navh,96px) + 1.2vw)}
.vdp{position:relative;aspect-ratio:4/5;max-height:calc(100vh - var(--navh,96px) - 2.4vw);overflow:hidden}
.vdp img{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.1,1)}
.vdp img.on{opacity:1}
.vd__mpic{display:none}

/* ---------- uitkomsten op één rij (.na__row): even breed als de gespreide titel, lijnen midden tussen de items ---------- */
.na__row{list-style:none;margin:7vw 0 0;padding:0;display:flex;justify-content:space-between;align-items:stretch}
.na__i .lst{margin:0;white-space:nowrap}
.na__sep{width:1px;background:var(--ln)}

/* ---------- puntvorm: vaste regeleindes enkel op desktop (<br class="d">), enkel op gsm (<span class="m-br">) ---------- */
@media (max-width:1024px){br.d{display:none}}

/* =====================================================================
   tablet (≤1024px)
   ===================================================================== */
@media (max-width:1024px){
  .na__row{display:block;margin-top:var(--s-groep)}
  .na__i{padding:5vw 0;border-top:1px solid var(--ln)}
  .na__i:first-child{border-top:0}
  .na__i .lst{white-space:normal}
  .na__sep{display:none}
}

/* =====================================================================
   gsm (≤767px): dezelfde rustige, elegante look als op desktop.
   Eén typeschaal, gelijke marges links en rechts, lopende tekst uitgevuld
   met woordafbreking, en compacte blokken die je openklapt.
   ===================================================================== */
@media (max-width:767px){
  .md{
    --m-tekst:clamp(15px,3.95vw,16.5px);
    --m-klein:clamp(14px,3.65vw,15.5px);
    --m-lead:clamp(18px,4.75vw,20px);
    --m-kop:clamp(26px,7.2vw,30px);
    --m-lst:clamp(20px,5.6vw,22.5px);
    --m-gap:9vw;
  }
  /* iets meer marge links en rechts: tekst leest rustiger; foto's en kaarten volgen dezelfde rand (de menubalk ook) */
  :root{--gutter:8vw;--sc-pad:8vw}
  /* typografie */
  .md :is(.txt,.hr__p,.fq__a){font-size:var(--m-tekst);line-height:1.55}
  .md .bdy{font-size:var(--m-klein);line-height:1.5}
  /* lopende tekst over de volle breedte uitgevuld met woordafbreking; korte tekst in kaarten en smalle kolommen blijft links */
  .md :is(.txt,.hr__p){text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}
  .md .vk .txt{text-align:left;hyphens:manual}
  .md .lead{font-size:var(--m-lead);line-height:1.32;text-wrap:pretty}
  .md :is(.stm,h1){font-size:var(--m-kop);line-height:1.12;text-wrap:balance}
  .md :is(.stm,h1,.lead,.txt,.vk-t,.na__i .lst) br{display:none}
  .md .lst{font-size:var(--m-lst);line-height:1.2}
  .md .vk-t{font-size:clamp(15.5px,4.1vw,17px);line-height:1.35}
  .md .bw__t{font-size:clamp(17px,4.5vw,18.5px);line-height:1.35}
  /* kaarten: gelijke binnenmarges en genoeg lucht tussen de stickers */
  .md .vk{padding:8vw 6vw 6vw}
  .md .pc__c{padding:0}
  .md .vk-grid{row-gap:var(--m-gap)}

  /* hero-titel: de opener, groter dan de andere titels */
  .md .ch h1.stm{font-size:clamp(34px,9.6vw,40px);line-height:1.06}
  /* vaste regeleindes enkel op gsm, en een witregel tussen twee alinea's in één lead (span.wk__par) */
  .m-br{display:block}

  /* uitspraak op een foto: foto in verhouding, de kaart schuift er half over */
  .lq,.lq--r{height:auto;overflow:visible;padding:0 0 var(--gutter)}
  .lq__img,.lq--r .lq__img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/3;object-position:50% 35%}
  .md .lq__card,.md .lq--r .lq__card{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-12vw var(--gutter) 0;padding:8vw 6vw 6vw}
  .lq--r .lq__img{aspect-ratio:3/2}
  .md .lq--r .lq__card{margin-top:-10vw;padding:7vw 5.5vw 5.5vw}
  .lq--r .bw__t{font-size:clamp(16px,4.2vw,17.5px)}
  .lq--r .lq__b{margin-top:4.5vw}

  /* fotokaarten als uitklapkaarten (ul.klap): een smalle fotostrook + titel met pijltje; tik = foto groeit, tekst schuift open */
  .klap{row-gap:var(--m-gap)}
  .klap .pc__c{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .klap .pc__pic{aspect-ratio:auto;height:26vw;transition:height .6s cubic-bezier(.2,.7,.1,1)}
  .klap .pc__c.open .pc__pic{height:74vw}
  .klap .pc__b{position:relative;padding:5.5vw 16vw 5.5vw 6vw}
  .klap .pc__b::after{content:"";position:absolute;right:6vw;top:calc(5.5vw + .6em);width:5vw;height:5vw;transform:translateY(-50%);transition:transform .45s cubic-bezier(.2,.7,.1,1);
    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}   /* pijltje van de homepage i.p.v. plusje */
  .klap .pc__c.open .pc__b::after{transform:translateY(-50%) rotate(90deg)}
  .md .klap .pc__b .lst{font-family:var(--f-licht);font-weight:300;text-transform:none;letter-spacing:-.01em;white-space:normal;text-box:none;font-size:clamp(22px,6.2vw,25px);line-height:1.15}
  .md .klap .pc__b .bdy{text-wrap:pretty;max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .6s cubic-bezier(.2,.7,.1,1),opacity .4s,margin-top .4s}
  .md .klap .pc__c.open .pc__b .bdy{max-height:70vw;opacity:1;margin-top:3vw}

  /* tijdlijn: per dagdeel zijn foto erboven (.vd__mpic); tijd en activiteit dicht bij elkaar */
  .vd__l{display:none}
  .vd__mpic{display:block;aspect-ratio:3/2;margin:0 0 6vw;border-radius:2vw}
  .vd__grid{margin-top:var(--s-groep)}
  .vd__r{padding-left:5vw}
  .vd__g + .vd__g{margin-top:12vw}
  .vd__gl{margin-bottom:3vw}
  .vd__day .vd__r{grid-template-columns:12vw minmax(0,1fr);column-gap:3vw;padding:4.5vw 0}
  .vd__day .vd__r .bdy{margin-top:1.5vw}

  /* uitkomsten met een vinkje; de lijnen zijn zo lang als de langste zin */
  .na__row{width:max-content;max-width:100%}
  .na__i{display:flex;align-items:baseline;gap:3.5vw;padding:4vw 0}
  .na__i::before{content:"";flex:0 0 4.2vw;height:4.2vw;background:currentColor;transform:translateY(.15em);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .na__i .lst{font-size:clamp(17px,4.5vw,19px)}
  /* video's en quotes: video's twee per rij, quotes over de volle breedte */
  .bw__grid--zz{grid-template-columns:1fr 1fr;grid-auto-flow:row dense;gap:4vw;row-gap:4vw}
  .bw__grid--zz .bw__q{grid-column:1 / -1;margin-top:5vw;padding:8vw 6vw 6vw}
  .bw__grid--zz .bw__q:first-child{margin-top:0}
  .bw__grid--zz .bw__v{grid-column:auto}
  .bw__grid--zz .rv__v{aspect-ratio:9/16}
  .bw__grid--zz .bw__t{font-size:clamp(17px,4.5vw,18.5px)}

  /* stappen: één verticale lijn die de stippen verbindt en meeloopt; "Stap 1" + de stap, zonder dubbel nummer */
  .zs__tl{padding-left:0}
  .zs__steps{row-gap:9vw}
  .zs__steps li{padding-left:9vw}
  .zs__steps .md-n{display:none}
  .zs__when{margin:0 0 2.5vw}
  .zs__steps .lst{margin-top:0}
  .zs__steps .bdy{margin-top:2vw}
  .zs__dot{left:0;top:.35em;width:2.8vw;height:2.8vw}
  .zs__line{display:block;left:1.4vw;right:auto;top:1.6vw;bottom:var(--zs-b,0);width:1px;height:auto}
  .zs__line i{transform-origin:center top;transform:scaleY(var(--p,0))}

  /* koffie onderaan */
  #koffie .lead{font-size:var(--m-lead)}

  /* footer: bovenaan de slogan links en "© Ommetoer BV" rechts; dan socials links en de pagina's rechts; een strook
     Instagram-foto's; het woordmerk over de volle breedte; onderaan klein btw-nummer, voorwaarden en privacy op één rij.
     Alles in dezelfde kleine caps, zonder lijnen of kaders. (De haakjes in de footer-HTML zet page() in het buildscript.) */
  .foot .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"soc soc menu" "ig ig ig" "logo logo logo" "slog slog bv" "lijn lijn lijn" "btw av pc";column-gap:3vw;align-items:start}
  .foot .foot__grid,.foot .foot__brand,.foot .foot__ig,.foot .foot__brand p,.foot .foot__legal,.foot .foot__legal > span:not(.caps){display:contents !important}
  .foot .foot__brand > a{grid-area:logo;display:block;margin:10vw 0 6vw}
  .foot .foot__brand img{display:block;width:100%;height:auto;margin:0}
  .foot .foot__soc{grid-area:soc;display:flex;flex-direction:column;align-items:flex-start;gap:1.4vw}
  .foot .foot__soc a{display:inline-flex;align-items:center;gap:2.2vw}
  .foot .foot__soc a::after{content:attr(aria-label)}
  .foot .foot__soc svg{height:3.4vw;width:auto;flex:none}
  .foot .foot__menu{grid-area:menu;display:flex;flex-direction:column;align-items:flex-end;gap:1.4vw;margin:0;padding:0;border:0;text-align:right}
  .foot .foot__menu li{border:0;margin:0;display:flex}
  .foot .foot__menu li:has(a[href*="meet-the-team"]){display:none}
  .foot .foot__tiles{grid-area:ig;display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:2vw;width:100%;margin:9vw 0}
  .foot .foot__tiles img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
  html:not(#a) body:not(#z) .foot :is(.foot__menu a,.foot__soc a,.foot__brand p,.foot__brand p *,.foot__legal,.foot__legal *){font-family:var(--f-caps) !important;font-size:var(--t-eyebrow) !important;font-weight:400 !important;text-transform:uppercase !important;letter-spacing:-.02em !important;line-height:1.45 !important}
  html:not(#a) body:not(#z) .foot .foot__menu a{display:inline-block;padding:0;border:0}
  .foot .foot__brand p br{display:none}
  .foot .foot__legal .caps{grid-area:slog;display:block;white-space:nowrap}
  .foot .foot__legal .caps .foot__br{display:none}
  .foot .foot__bv{grid-area:bv;justify-self:end;text-align:right;white-space:nowrap}
  .foot .wrap::after{content:"";grid-area:lijn;display:block;border-top:1px solid var(--p-lijn-donker);margin:5vw 0 4vw}
  .foot .foot__adr{display:none}
  .foot .foot__btw{grid-area:btw;justify-self:start}
  html:not(#a) body:not(#z) .foot :is(.foot__btw,.foot__legal a){font-size:2.6vw !important;white-space:nowrap}
  .foot .foot__br{display:block}
  .foot .foot__komma{display:none}
  .foot .foot__legal a{white-space:nowrap}
  .foot .foot__legal a[href*="voorwaarden"]{grid-area:av;justify-self:center}
  .foot .foot__legal a[href*="privacy"]{grid-area:pc;justify-self:end}
  .foot .foot__dot{display:none !important}
}

/* =====================================================================
   RITME (gsm, ≤767px): vaste trappen voor maat, witruimte en uitlijning.
   Opt-in per pagina met <main data-ritme> (buildscript: set RITME). Club blijft zoals goedgekeurd.
   Laura's regels die hier vastliggen, zodat ze niet per pagina opnieuw gezegd moeten worden:
   - één maat per rol, verhoudingen vast: Obviously-titel > hero-titel > titel > item-titel > lead/quote > tekst > caps;
     Obviously in een kaart is één trap kleiner dan daarbuiten, nooit kleiner dan dat;
   - na elke titel genoeg lucht (nooit een link of knop die tegen een titel plakt), tussen kop en inhoud nog meer,
     tussen kaarten evenveel als tussen blokken binnen een sectie, en onderaan een blok ruimte om af te ronden;
   - één linkerlijn: alle tekst (titels, stickers, tekst in kaarten, cijfers) start op de gutter; de vlakken (kaarten,
     video's) lopen links en rechts iets verder door, zodat hun tekst op die lijn valt;
   - puntvorm: zie de motor in /pagina-systeem.js.
   ===================================================================== */
html body main[data-ritme] br.pvb{display:inline !important}
@media (max-width:767px){
  main[data-ritme]{
    --r1:4vw;     /* eyebrow -> titel */
    --r2:6vw;     /* titel -> tekst, link of knop */
    --r3:14vw;    /* kop -> inhoud (kaarten, rijen, stappen, video's) */
    --r4:12vw;    /* tussen kaarten en groepen */
    --r5:12vw;    /* inhoud -> slotknop of slotzin */
    --kx:5vw;     /* binnenmarge van een kaart = hoe ver het vlak doorloopt buiten de gutter */
    --f-obv:12vw; --f-obv-k:10vw; --f-h1:9.6vw; --f-stm:7.2vw; --f-item:6.2vw; --f-lead:4.75vw; --f-tekst:3.95vw;
  }
  /* maten */
  main[data-ritme] .ttl,main[data-ritme] .ttl span,main[data-ritme] .md-n{font-size:var(--f-obv) !important;line-height:.9 !important}main[data-ritme] .vk .ttl{font-size:var(--f-obv-k) !important;line-height:.9 !important}
  main[data-ritme] h1{font-size:var(--f-h1) !important;line-height:1.06}
  main[data-ritme] .stm:not(h1){font-size:var(--f-stm) !important;line-height:1.12}
  main[data-ritme] :is(.lst,.ab__w){font-size:var(--f-item) !important;line-height:1.15 !important;letter-spacing:-.02em}
  main[data-ritme] :is(.lead,.bw__t){font-size:var(--f-lead) !important;line-height:1.32 !important}
  main[data-ritme] :is(.txt,.bdy,.vk-t){font-size:var(--f-tekst) !important;line-height:1.55 !important;font-family:var(--f-body) !important;font-weight:400 !important}

  /* witruimte */
  main[data-ritme] > section.pg{padding-top:20vw;padding-bottom:22vw}
  main[data-ritme] .cap + :is(.stm,.ttl,h1){margin-top:var(--r1) !important}
  main[data-ritme] :is(.stm,.ttl,h1) + :is(.stm,.txt,.lead,.bdy,.tp__lnk,.hr__b){margin-top:var(--r2) !important}
  main[data-ritme] [data-ap-kids]:has(> :is(.stm,.ttl)) + .tp__lnk{margin-top:var(--r2) !important}
  main[data-ritme] :is(.vk-grid,.bw__grid,.zs__tl){margin-top:var(--r3) !important}
  main[data-ritme] .vk-grid{row-gap:var(--r4) !important}
  main[data-ritme] :is(.bw__end,.zs__cta,.kz__end,.co__end,.ft__b){margin-top:var(--r5) !important}

  /* één linkerlijn: vlakken lopen door, hun tekst valt op de gutter */
  main[data-ritme] :is(.vk-grid,.bw__grid--zz){margin-left:calc(-1*var(--kx)) !important;margin-right:calc(-1*var(--kx)) !important;width:auto}
  main[data-ritme] .vk{padding-left:var(--kx) !important;padding-right:var(--kx) !important}
  main[data-ritme] .pc__c{padding:0 !important}
  main[data-ritme] .pc__b{padding-left:var(--kx) !important;padding-right:var(--kx) !important}
  main[data-ritme] .vk .vk-tag,main[data-ritme] .pc__c .vk-tag{left:var(--kx)}
  /* salespages: kaarten op gsm zoals op de Teampagina (Laura 2026-11-06). Het vlak loopt door buiten de gutter, de tekst staat
     op de gutter, dus op één lijn met titel en slotzin, en gebruikt de volle breedte. Enkel de titel laat plaats voor het pijltje. */
  main.md:not([data-ritme]){--kx:5vw}
  main.md:not([data-ritme]) .vk-grid{margin-left:calc(-1*var(--kx)) !important;margin-right:calc(-1*var(--kx)) !important;width:auto}
  main.md:not([data-ritme]) .vk-grid > .vk{padding-left:var(--kx) !important;padding-right:var(--kx) !important}
  main.md:not([data-ritme]) .vk-grid > .pc__c{padding:0 !important}
  main.md:not([data-ritme]) .vk-grid .pc__b{padding-left:var(--kx) !important;padding-right:var(--kx) !important}
  main.md:not([data-ritme]) .vk-grid :is(.vk,.pc__c) .vk-tag{left:var(--kx)}
  main.md:not([data-ritme]) .vk-grid .bdy{font-size:3.95vw !important;line-height:1.55 !important}
  main.md .klap .pc__b .lst{padding-right:11vw}
}

.zs__w-m{display:none}   /* label "Stap 1" enkel op gsm; op desktop het label van de pagina */

/* gsm: stappenblok overal zoals op Intensive en Club: "Stap 1, 2, 3" boven de staptitel, meer lucht na de laatste stap;
   FAQ-titel op één regel (Laura 2026-11-05) */
@media (max-width:767px){
  .zs__w-d{display:none}
  .zs__w-m{display:inline}
  .md .zs__tl + .vk-grid{margin-top:20vw}
  .fa__grid .ttl{white-space:nowrap}
  .fa__grid .ttl br{display:none}
  .fa__grid .ttl:has(> span){display:flex;justify-content:space-between}   /* Before / you ask: links en rechts op één regel */
}

/* gsm: Obviously-titels zo groot als op de homepage (7,4vw) en gespreide titels op één regel, links en rechts (Laura 2026-11-06).
   Obviously in een kaart en de cijfers blijven zoals ze zijn. */
@media (max-width:767px){
  html body .md .ttl:not(.vk .ttl),html body .md .ttl:not(.vk .ttl) span{font-size:7.4vw !important;line-height:.95 !important}
  .md .ttl--spread{display:flex;justify-content:space-between;align-items:baseline;gap:2vw;white-space:nowrap}
}