/* Kolimbri child theme · murmweb.dev
   Kleuren en lettertype komen uit het thema (laca, #472D4B, #A1BFA8, #F3ECE3). */
:root{
  --k-paars:#472D4B;
  --k-donker:#4C3050;
  --k-groen:#A1BFA8;
  --k-bg:#F3ECE3;
  --k-lijn:#E4D8CA;
  --k-meta:#666262;
  --k-r:14px;
  --k-ease:cubic-bezier(.2,.7,.1,1);
}

/* kleine kopjes, zoals "CARD OF THE DAY" in het thema */
.k-agenda .tagline,.k-band .tagline,.k-projecten .tagline,.k-stemmen .tagline,.k-deckblok .tagline,.k-trek .tagline{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--k-meta);margin-bottom:1rem}
.k-kop .section--title{margin-bottom:1.25rem}

button.button{font-family:inherit;cursor:pointer}
.k-band__knoppen .button,.k-trek__knoppen .button,.k-buren .button{width:auto;white-space:nowrap;padding-left:1.5rem;padding-right:1.5rem}

/* ---------- agenda ---------- */
.k-agenda__lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--k-lijn)}
.k-agenda__item{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.75rem;padding:1.75rem 0;border-bottom:1px solid var(--k-lijn);align-items:start}
.k-agenda__datum{display:flex;flex-direction:column;align-items:center;width:4.5rem;line-height:1;color:var(--k-paars)}
.k-agenda__dag{font-size:3.5rem;font-weight:300}
.k-agenda__maand{margin-top:.4rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.k-agenda__meta{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--k-meta);margin-bottom:.35rem}
.k-agenda__info h3{margin:0 0 .5rem;font-size:1.5rem;line-height:1.2}
.k-agenda__info p{margin:0 0 .5rem;max-width:42ch}
.k-agenda__plek{font-size:.9rem;color:var(--k-paars);font-weight:600}
.k-agenda__knop{grid-column:2;justify-self:start;margin-top:.5rem}
@media (min-width:977px){
  .k-agenda__item{grid-template-columns:auto 1fr auto;align-items:center}
  .k-agenda__knop{grid-column:auto;margin:0}
}

/* ---------- kaartenband ---------- */
.k-band{overflow:hidden;padding-top:3rem;padding-bottom:3rem}
.k-band__rij{--h:clamp(160px,17vw,260px);height:var(--h);margin:0 -2vw;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.k-band__rij--een{transform:rotate(-2.5deg)}
.k-band__rij--twee{transform:rotate(2deg)}
.k-band__spoor{display:flex;gap:clamp(10px,1.2vw,20px);width:max-content;height:100%;will-change:transform}
.k-band__kaart{display:block;height:100%;aspect-ratio:5/7;border-radius:var(--k-r);overflow:hidden;flex:none;
  box-shadow:0 18px 30px -18px rgba(71,45,75,.5);transition:transform .5s var(--k-ease)}
.k-band__kaart img{width:100%;height:100%;object-fit:cover;display:block}
.k-band__kaart:hover{transform:translateY(-10px) rotate(-1deg)}
.k-band__midden{padding:clamp(3rem,8vh,6rem) 0}
.k-band__knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
@media (max-width:767px){.k-band__rij--een{transform:rotate(-2deg)}}

/* ---------- projecten ---------- */
.k-projecten .section__header{align-items:flex-end;gap:2rem}
.k-projecten__intro{max-width:52ch;margin-top:1rem}
.k-project{display:block;text-decoration:none;color:inherit;margin-bottom:2rem}
.k-project__beeld{position:relative;overflow:hidden;border-radius:999px 999px var(--k-r) var(--k-r);background:var(--k-lijn)}
.k-project__beeld::before{content:"";display:block;padding-top:133%}
.k-project__beeld .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.1s var(--k-ease)}
.k-project:hover .k-project__beeld .img{transform:scale(1.06)}
.k-project .card__body{padding:1.25rem 0 0}
.k-project .card__title{font-size:1.35rem;line-height:1.2;margin:0 0 .5rem}
.k-project p{margin:0;color:var(--k-meta)}

/* ---------- ervaringen ---------- */
.k-stemmen{text-align:center}
.k-stemmen .section--title{margin-bottom:2rem}
.k-stemmen__lijst{display:grid}
.k-stem{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .9s var(--k-ease),transform .9s var(--k-ease),visibility 0s .9s}
.k-stem.is-aan{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.k-stem p{font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.35;font-weight:300;max-width:46ch;margin:0 auto 1.25rem;color:var(--k-paars)}
.k-stem cite{font-style:normal;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--k-meta)}
.k-stemmen__stippen{display:flex;justify-content:center;gap:.6rem;margin-top:2rem}
.k-stemmen__stippen button{width:2rem;height:4px;border:0;border-radius:4px;padding:0;background:var(--k-lijn);cursor:pointer;position:relative;overflow:hidden}
.k-stemmen__stippen button.is-aan::after{content:"";position:absolute;inset:0;background:var(--k-groen);animation:k-vul 8s linear forwards}
@keyframes k-vul{from{transform:translateX(-100%)}to{transform:none}}

/* ---------- kaart van de dag (modal) ---------- */
.k-trek-modal .modal__content{overflow:visible}
.k-trek{display:grid;gap:2rem;align-items:center;--kb:clamp(180px,22vw,300px)}
.k-trek__veld{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:calc(var(--kb) * 1.45)}
.k-trek__stapel{position:relative;width:calc(var(--kb) * .62);aspect-ratio:5/7;flex:none}
.k-trek__plek{position:relative;width:var(--kb);aspect-ratio:5/7;flex:none;border-radius:var(--k-r)}
.k-trek__plek::after{content:"";position:absolute;inset:-25%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(161,191,168,.55),transparent);opacity:0;transition:opacity .9s}
.k-trek__plek.is-vol::after{opacity:1}
.k-trek__start img{width:100%;height:100%;object-fit:cover;border-radius:var(--k-r);box-shadow:0 24px 50px -24px rgba(71,45,75,.6)}
.k-trek.is-klaar .k-trek__start{display:none}
.k-k3d{position:absolute;left:0;top:0;width:100%;aspect-ratio:5/7;transform-style:preserve-3d;will-change:transform}
.k-k3d .k-vlak{position:absolute;inset:0;border-radius:var(--k-r);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 24px 50px -24px rgba(40,20,45,.65),0 6px 14px -6px rgba(40,20,45,.3)}
.k-k3d .k-vlak img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.k-k3d .k-achter{transform:rotateY(180deg)}
.k-rug{background:radial-gradient(120% 80% at 50% 50%,#5d3d62 0%,#472D4B 55%,#2f1d33 100%);display:grid;place-items:center}
.k-rug::before{content:"";position:absolute;inset:7%;border:1px solid rgba(161,191,168,.7);border-radius:9px}
.k-rug::after{content:"";position:absolute;inset:10%;border:1px solid rgba(161,191,168,.3);border-radius:7px;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(161,191,168,.1) 0 2deg,transparent 2deg 12deg)}
.k-rug img{position:relative;z-index:1;width:44% !important;height:auto !important;opacity:.95}
.k-trek__getrokken{z-index:5}
.k-trek__lezing .k-trek__naam{margin-bottom:1rem;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:767px){.k-trek__lezing .k-trek__naam{font-size:clamp(1.8rem,8vw,2.4rem)}}
.k-trek__tekst{max-width:46ch}
.k-trek__knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 1rem}
.k-trek__knoppen [hidden]{display:none}
.k-trek__deck{font-size:.9rem;font-weight:600;color:var(--k-paars);text-decoration:none;border-bottom:1px solid currentColor}
@media (min-width:768px){.k-trek{grid-template-columns:auto 1fr;gap:3rem}}
@media (max-width:767px){
  .k-trek{--kb:min(52vw,230px)}
  .k-trek__stapel{position:absolute;left:4%;top:4%;width:calc(var(--kb) * .45);transform:rotate(-8deg);z-index:1}
}

/* ---------- kaartpagina ---------- */
.k-kaartbeeld{position:relative;transform-style:preserve-3d;will-change:transform;border-radius:var(--k-r)}
.k-kaartbeeld img{border-radius:var(--k-r);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.k-glans{position:absolute;inset:0;border-radius:var(--k-r);pointer-events:none;mix-blend-mode:soft-light;opacity:0;transition:opacity .4s;
  background:radial-gradient(60% 50% at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.8),transparent 70%)}
.k-kaartbeeld:hover .k-glans{opacity:1}
.k-kaartvoet{padding-top:0}
.k-deckblok{display:grid;gap:1.5rem;align-items:center;padding:1.75rem;border-radius:calc(var(--k-r) * 1.4);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.section:not(.section--dark).k-kaartvoet .k-deckblok{background:rgba(71,45,75,.05);border-color:var(--k-lijn)}
.k-deckblok__beeld{width:110px;border-radius:10px;transform:rotate(-4deg);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.k-deckblok__tekst p{margin:0}
.k-deckblok__koop{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.k-deckblok__prijs{font-size:2rem;font-weight:300}
.section--dark .k-deckblok .tagline{color:rgba(255,255,255,.7)}
@media (min-width:768px){.k-deckblok{grid-template-columns:auto 1fr auto}}
.k-buren{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.5rem;flex-wrap:wrap}
.k-buur{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;font-size:1.25rem}
.k-buur img{width:64px;border-radius:8px;transition:transform .5s var(--k-ease)}
.k-buur small{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.k-buur--volgende{text-align:right}
.k-buur:hover img{transform:translateY(-6px) rotate(-3deg)}
@media (max-width:767px){.k-buren .js-modal{order:3;width:100%;justify-content:center}}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .k-stem{transition:none}
  .k-band__kaart,.k-project__beeld .img,.k-buur img{transition:none}
  .k-stemmen__stippen button.is-aan::after{animation:none;transform:none}
}

/* ---------- taalknop ---------- */
.k-taal{display:flex;align-items:center}
.k-taal__knop{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;padding:2px;line-height:1;opacity:.95}
.k-taal__knop a{display:inline-block;padding:.35em .6em;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-decoration:none;color:inherit;opacity:.7;transition:opacity .3s,background .3s,color .3s}
.k-taal__knop a span{display:none}
.k-taal__knop a:hover{opacity:1}
.k-taal__knop a.is-aan{opacity:1;background:currentColor}
.k-taal__knop a.is-aan{color:inherit}
.header .k-taal__knop a.is-aan{background:#472D4B;color:#fff}
.header.header--white .k-taal__knop a.is-aan{background:#fff;color:#472D4B}
.header .k-taal__knop a{color:inherit}
.pushmenu .k-taal{margin-top:1rem}
.pushmenu .k-taal__knop a.is-aan{background:#472D4B;color:#fff}
.section--dark .k-buren .button--ghost{color:#fff;border-color:rgba(255,255,255,.8)}
.section--dark .k-buren .button--ghost:hover{background:#fff;color:#472D4B}


/* ---- mobiel (controle 07-10) ---- */
@media (max-width:767px){
  /* cmd zet sommige kolommen alleen vanaf tablet (col-m-*) neer; zonder telefoonmaat werden ze naast elkaar gepropt (Projects-overzicht 734px breed) */
  .grid>[class*="col-m-"]:not([class*="col-xs-"]),.project--masonry>[class*="col-m-"]:not([class*="col-xs-"]){flex:0 0 100%;max-width:100%;width:100%}
  .project--masonry{flex-direction:column;row-gap:3rem}
  /* kaartpagina: cmd schuift de kaart 100px omlaag (top:100px); onder elkaar viel hij daardoor over "Ik ben ..." */
  .single-cards .up--section .card--item{top:0}
  /* lange Nederlandse samenstellingen in koppen afbreken in plaats van de pagina breder te maken */
  h1,h2,.content--title{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  /* blogkop: categorieën, datum en auteur mogen naar een tweede regel */
  .blog__header{flex-wrap:wrap;row-gap:.4rem}
  /* taalknop groot genoeg voor een duim */
  .k-taal__knop a{font-size:.8rem;padding:.6em .8em;min-width:2.4rem;text-align:center}
  /* footerlinks en aantal-veld in de winkel */
  .menu-copymenu-container a{display:inline-block;padding:.45rem 0}
  .quantity .qty{min-height:44px}
}
/* stippen bij de ervaringen: dun streepje, maar een raakvlak van 32px hoog */
.k-stemmen__stippen button{height:32px;background:transparent;overflow:visible}
.k-stemmen__stippen button::before{content:"";position:absolute;left:0;right:0;top:14px;height:4px;border-radius:4px;background:var(--k-lijn)}
.k-stemmen__stippen button.is-aan::after{top:14px;bottom:auto;height:4px;border-radius:4px}
.k-stemmen__stippen button.is-aan::after{transform-origin:left center;animation-name:k-vul-x}
@keyframes k-vul-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- mobiel ronde 2 (07-10) ---- */
@media (max-width:767px){
  /* Klantenservice: titel stond onder het logo */
  .faq--hero .container{padding-top:120px;padding-bottom:70px}
  /* blogfilter: knoppen zo breed als hun tekst ("New Animals" liep over de rand) */
  .filter-list .filter-list__item{flex:0 0 auto;width:auto}
  .filter-list .filter-list__item a{display:flex;align-items:center;height:100%;padding:0 1.25rem}
}
/* contactformulier: drie losse testvelden van het bureau ("Number", "Email address", "Number") verbergen; staan ook op de live site */
#frm_field_25_container,#frm_field_26_container,#frm_field_27_container{display:none}
/* oudere/nieuwere berichten: als knop in plaats van blauwe standaardlink */
.posts-navigation .nav-links{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem}
.posts-navigation .card-nav--item{display:inline-flex;align-items:center;min-height:44px;padding:0 1.5rem;border:2px solid #472D4B;border-radius:999px;color:#472D4B;text-decoration:none}
/* winkel: knop in de huisletter */
.single_add_to_cart_button{font-family:inherit}
/* knoppen: cmd geeft ze een vaste breedte (208px); langere teksten ("Plan een kennismakingsgesprek") liepen eruit */
a.button,.button{width:auto;min-width:208px;max-width:100%}
/* vraag-en-antwoord: ruimte voor het plusje rechts */
.accordion--header{padding-right:2.75rem;position:relative}
/* teksten met een zwevende afbeelding: op een telefoon de afbeelding boven de tekst in plaats van een smalle kolom ernaast */
@media (max-width:767px){
  .content .alignright,.content .alignleft,.content img.alignright,.content img.alignleft{float:none;display:block;margin:1rem auto;max-width:100%;height:auto}
  .category--list a{display:inline-block;padding:.5rem 0}
  .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme){display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
}

/* =====================================================================
   Scrollervaring (07-10). Zonder JavaScript of met "verminder beweging" staat alles gewoon onder elkaar.
   ===================================================================== */

/* benefits: zelfde opmaak als .benefit van het thema (dat script raakt deze klasse niet meer) */
.section__benefits .k-benefit{width:100%;display:flex;align-items:center;padding:1rem}
.section__benefits .k-benefit .grid{width:100%}
@media (min-width:977px){.section__benefits .k-benefit{padding:4rem}}

/* desktop: vastgepind, elk blok neemt het vorige over */
.section__benefits.is-pin .wrapper{position:relative;height:100vh;height:100svh}
.section__benefits.is-pin .k-benefit{position:absolute;inset:0}
.section__benefits.is-pin .k-benefit .img{will-change:clip-path,transform}
.k-bw-rail{position:absolute;left:clamp(.75rem,2vw,2rem);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;width:max-content}
.k-bw-rail li{padding:0!important;margin:0}
.k-bw-rail li::before{display:none!important}
.k-bw-rail button{display:flex;align-items:center;justify-content:flex-start;width:auto!important;min-width:0!important;height:auto!important;gap:.45rem;background:none;border:0;padding:.35rem 0;cursor:pointer;color:var(--k-paars);font:inherit;font-size:.75rem;letter-spacing:.12em;font-weight:700;opacity:.4;transition:opacity .4s var(--k-ease)}
.k-bw-rail button::before{content:"";display:block;flex:0 0 24px;width:24px;height:2px;border-radius:2px;background:currentColor;transform-origin:right;transform:scaleX(.42);transition:transform .5s var(--k-ease)}
.k-bw-rail button.is-aan{opacity:1}
.k-bw-rail button.is-aan::before{transform:scaleX(1)}
.k-bw-rail button:focus-visible{outline:2px solid var(--k-paars);outline-offset:3px}
/* tot 1280 breed staat de foto dichter op de rand: alleen de streepjes, de cijfers blijven voor schermlezers */
@media (max-width:1279px){.k-bw-rail{left:clamp(.75rem,2.5vw,1.5rem)}.k-bw-rail button{font-size:0;gap:0;padding:.55rem 0}}
@media (max-width:976px){.k-bw-rail{display:none}}
.k-bw-teller{position:absolute;right:clamp(1rem,3vw,3rem);bottom:clamp(1rem,4vh,2.5rem);z-index:3;font-size:.75rem;letter-spacing:.14em;font-weight:700;color:var(--k-paars);font-variant-numeric:tabular-nums}
.k-bw-teller span{display:inline-block;min-width:1.4em}

/* mobiel: kaarten die over elkaar schuiven */
.section__benefits.is-deck{overflow:visible}
.section__benefits.is-deck .wrapper{padding-bottom:4vh}
.section__benefits.is-deck .k-benefit{position:sticky;top:var(--k-top,72px);background:var(--k-bg);border-radius:28px;margin-bottom:5vh;padding:1.5rem 1.25rem 2rem;box-shadow:0 -14px 34px -22px rgba(71,45,75,.45);transform-origin:50% 0;isolation:isolate}
.section__benefits.is-deck .k-benefit:first-child{box-shadow:none}
.k-bw-dim{position:absolute;inset:0;border-radius:inherit;background:#2a1a2d;opacity:0;pointer-events:none;z-index:5}

/* blog: leesvoortgang bovenaan (alleen waar de browser scroll-timelines kent) */
.k-lees{display:none}
@supports (animation-timeline: scroll()){
  .k-lees{display:block;position:fixed;left:0;top:0;width:100%;height:3px;z-index:9999;background:var(--k-groen);transform-origin:0 50%;transform:scaleX(0);animation:k-lees linear both;animation-timeline:scroll(root block);pointer-events:none}
  @keyframes k-lees{to{transform:scaleX(1)}}
}

/* footer komt onder de pagina vandaan (alleen groot scherm, zet JS aan als de footer in beeld past) */
html.k-voet-onder body>.wrapper{position:relative;z-index:1;background:var(--k-bg);background-color:inherit;margin-bottom:var(--k-voet,0px);box-shadow:0 40px 60px -30px rgba(42,26,45,.35)}
html.k-voet-onder footer.footer{position:fixed;left:0;right:0;bottom:0;z-index:0}

/* heroes: ruimte voor de parallax van de achtergrond */
.homehero,.simple--hero,.normal--hero,.faq--hero{overflow:clip}

@media (prefers-reduced-motion:reduce){.k-lees{display:none}}

/* ---- beleving ronde 2 ---- */
/* zachte overgang tussen pagina's, header blijft staan ("cross-document view transition") */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .header{view-transition-name:k-kop}
  ::view-transition-old(root){animation:k-vt-uit .22s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:k-vt-in .38s cubic-bezier(.2,.7,.1,1) both}
  @keyframes k-vt-uit{to{opacity:0;transform:translateY(-10px)}}
  @keyframes k-vt-in{from{opacity:0;transform:translateY(14px)}}
}
/* foto in een vast kader zoomt rustig in bij aanwijzen ("image zoom-in-frame on card hover") */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card__visual,.workshop__visual .img--round,.projects__visual .img--round,.k-project__beeld{overflow:clip}
  .card__visual .img,.workshop__visual .img,.projects__visual .img{transition:scale .7s cubic-bezier(.2,.8,.2,1)}
  .blog--card:hover .card__visual .img,.blog--card:focus-within .card__visual .img,
  .workshop__item:hover .workshop__visual .img,.workshop__item:focus-within .workshop__visual .img,
  .projects__item:hover .projects__visual .img,.projects__item:focus-within .projects__visual .img{scale:1.06}
  /* kaartenoverzicht: kaart komt iets naar je toe */
  .post-type-archive-cards .card--item img{transition:translate .5s cubic-bezier(.2,.8,.2,1),rotate .5s cubic-bezier(.2,.8,.2,1)}
  .post-type-archive-cards .card--item:hover img,.post-type-archive-cards .card--item:focus-visible img{translate:0 -6px;rotate:-1.2deg}
}
/* knoppen geven mee als je erop drukt ("press squash") */
@media (prefers-reduced-motion:no-preference){
  a.button,.button,.k-taal__knop a{transition-property:background-color,color,border-color,scale;transition-duration:.15s;transition-timing-function:ease-in}
  a.button:active,.button:active{scale:.97}
}

/* header: met "The Way We Walk" in het menu werd het logo tussen 977 en 1280px dichtgedrukt */
.header .header__logo{flex-shrink:0}
@media (min-width:977px) and (max-width:1279px){
  .header .header__logo{margin-left:20px!important;margin-right:20px!important}
  .header .header__nav li a{font-size:.88rem}
}

/* ---- homepage na zelf doorscrollen ---- */
/* ervaringen: eerst gaat de oude weg, dan komt de nieuwe (stonden even over elkaar) */
.k-stem{transition:opacity .4s ease,transform .4s ease,visibility 0s .4s}
.k-stem.is-aan{transition:opacity .9s var(--k-ease) .4s,transform .9s var(--k-ease) .4s,visibility 0s .4s}
/* projecten op de telefoon twee naast elkaar in plaats van vier schermvullende foto's */
@media (max-width:767px){
  .k-projecten .grid{flex-direction:row;flex-wrap:wrap;row-gap:1.5rem}
  .k-project{margin-bottom:0}
  .k-project .card__title{font-size:1.05rem}
  .k-project .card__body{padding-top:.8rem}
  .k-project .card__body p,.k-project .content p{font-size:.85rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---------- homehero op telefoon en tablet: de drie ingangen (Workshops, Kollective, Individuals) ----------
   cmd zet ze onder 977px uit. Hier (Layer-cake sticky handoff): de kolibrie vult het eerste scherm en blijft staan,
   de paarse boog piekt onderaan met de drie namen en schuift bij het scrollen als een vel over de foto. */
.k-ingangen{display:none}
@media (max-width:976px){
  .homehero{--k-piek:64px;display:block;height:auto}
  .homehero .hero__bg{position:sticky;top:0;height:100vh;height:100svh;z-index:0}
  .homehero .hero__caption{position:absolute;top:0;left:0;right:0;z-index:1;margin:0;height:calc(100svh - var(--k-piek) - 56px);display:flex;align-items:flex-end;padding-bottom:clamp(1.5rem,5svh,3rem)}
  .homehero .hero__caption .hero--title{margin-bottom:0;text-shadow:0 2px 24px rgba(20,30,10,.35)}
  .homehero .shortmenu{display:block;position:relative;z-index:2;background:var(--k-paars);padding:0 0 2.8rem;margin-top:calc(-1 * var(--k-piek))}
  .homehero .shortmenu::before{background:var(--k-paars);height:56px;top:-55px;left:-15%;right:-15%;width:130%}
  .homehero .shortmenu::after{display:none}
  .k-ingangen{display:flex;justify-content:center;align-items:center;height:var(--k-piek);padding:0 12px;position:relative;top:-10px}
  .k-ingangen__naam{display:flex;align-items:center;min-height:44px;padding:0 .7rem;color:#fff;font-size:.95rem;font-weight:700;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
  .k-ingangen__naam + .k-ingangen__naam::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--k-groen);margin-right:1.4rem;margin-left:-.7rem}
  .k-ingangen__naam:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:8px}
  .homehero .shortmenu .container{padding-left:20px;padding-right:20px}
  .homehero .hero--menu{display:block;width:100%;max-width:560px;counter-reset:ingang;margin-top:-.4rem}
  .homehero .hero--menu .item{counter-increment:ingang;position:relative;width:100%;display:grid;grid-template-columns:1fr 48px;align-items:center;column-gap:1rem;row-gap:0;text-align:left;font-size:1rem;padding:1.25rem 0;border-top:1px solid rgba(255,255,255,.14);-webkit-tap-highlight-color:transparent}
  .homehero .hero--menu .item:first-child{border-top:0;padding-top:.6rem}
  .homehero .hero--title{text-wrap:balance}
  .homehero .hero--menu .item__content--body{color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.5}
  .homehero .hero--menu .item__content--body h3{display:flex;align-items:baseline;gap:.7rem;margin:0 0 .3rem;font-size:1.2rem;line-height:1.25;color:#fff}
  .homehero .hero--menu .item__content--body h3::before{content:counter(ingang,decimal-leading-zero);font-size:.72rem;letter-spacing:.14em;font-weight:700;color:var(--k-groen)}
  .homehero .hero--menu .item__readmore{align-self:center}
  .homehero .hero--menu .item__readmore .button{position:static;display:flex;align-items:center;justify-content:center;line-height:0;width:48px!important;min-width:0!important;height:48px;padding:0;border-radius:50%;font-size:0;color:transparent;background:var(--k-groen);transition:translate .35s var(--k-ease),background-color .35s var(--k-ease)}
  .homehero .hero--menu .item__readmore .button::before{content:"";width:18px;height:18px;background:var(--k-paars);-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
  /* de hele rij is de link */
  .homehero .hero--menu .item__readmore .button::after{content:"";position:absolute;inset:0}
  .homehero .hero--menu .item:active .item__readmore .button{translate:4px 0;background:#fff}
  .homehero .hero--menu .item__readmore .button:focus-visible{outline:2px solid #fff;outline-offset:3px}
}
@media (min-width:768px) and (max-width:976px){
  .homehero .hero--menu{max-width:none;display:grid;grid-template-columns:repeat(3,1fr);column-gap:1.5rem}
  .homehero .hero--menu .item,.homehero .hero--menu .item:first-child{grid-template-columns:1fr;row-gap:1rem;border-top:0;align-content:space-between;padding-top:.6rem}
  .homehero .hero--menu .item + .item{border-left:1px solid rgba(255,255,255,.14);padding-left:1.5rem}
}

/* ---------- workshops: overzicht ----------
   Alle workshops op één pagina, plaats/duur/prijs als rij met kleine pictogrammen,
   desktop afwisselend links en rechts, telefoon: grote boogfoto bovenaan. */
.k-feiten{display:flex;flex-wrap:wrap;gap:.45rem .6rem;list-style:none;margin:.2rem 0 1.2rem!important;padding:0!important}
.k-feiten li{display:inline-flex;align-items:center;gap:.45rem;margin:0!important;padding:.38rem .8rem .38rem .65rem!important;border:1px solid var(--k-lijn);border-radius:999px;background:rgba(255,255,255,.45);font-size:.85rem;line-height:1.2;color:var(--k-paars)}
.k-feiten li::before{display:none!important}
.k-feiten svg{flex:0 0 auto;color:var(--k-groen);width:16px;height:16px}
.k-workshops .workshop__item .cards--title{margin-bottom:.7rem}
@media (min-width:977px){
  .k-workshops .workshop__item:nth-child(even) .workshop__inner{flex-direction:row-reverse}
  .k-workshops .workshop__item{padding:4rem 0}
}
@media (max-width:767px){
  .k-workshops .workshop__item{padding:2.4rem 0}
  .k-workshops .workshop__inner{flex-direction:column;gap:1.4rem}
  .k-workshops a.workshop__visual{flex-basis:auto;max-width:none;width:100%}
  .k-workshops .workshop__visual .img--round{border-radius:999px 999px 28px 28px;overflow:clip}
  .k-workshops .workshop__visual .img.ratio-7x10{padding-bottom:78%!important}
  .k-workshops .workshop__content .button--group{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .k-workshops .workshop__content .button--group .button{width:100%!important;min-width:0!important;margin:0!important;padding-left:.5rem;padding-right:.5rem}
  .k-workshops .workshop__content .button--group .button:only-child{grid-column:1/-1}
}
/* koppen op heroes nooit met één los woord op een regel */
.hero--title,.simple--hero h1,.normal--hero h1{text-wrap:balance}

/* ---------- contact: formulier op een licht vlak, paarse contactkaart met foto ---------- */
.k-contact{padding-top:clamp(2rem,6vw,5rem)}
.k-contact__titel{font-weight:300;font-size:clamp(2.8rem,7vw,5.2rem);line-height:1;letter-spacing:-.01em;margin:0 0 1.6rem;color:var(--k-paars)}
.k-contact__inhoud > h3:first-child{font-size:1.5rem;font-weight:400;margin-bottom:.8rem}
.k-contact__inhoud .frm_forms{margin-top:2rem;background:rgba(255,255,255,.55);border:1px solid var(--k-lijn);border-radius:24px;padding:clamp(1.25rem,3.5vw,2.5rem)}
.k-contact__inhoud .frm_forms input:not([type=checkbox]):not([type=radio]):not([type=submit]),.k-contact__inhoud .frm_forms select,.k-contact__inhoud .frm_forms textarea{min-height:48px;border:1px solid var(--k-lijn)!important;border-radius:12px!important;background:#fff!important;padding:.7rem .9rem!important;font:inherit;font-size:1rem!important;color:var(--k-paars);transition:border-color .25s,box-shadow .25s}
.k-contact__inhoud .frm_forms textarea{min-height:150px}
.k-contact__inhoud .frm_forms input:focus,.k-contact__inhoud .frm_forms select:focus,.k-contact__inhoud .frm_forms textarea:focus{outline:none;border-color:var(--k-groen)!important;box-shadow:0 0 0 4px rgba(161,191,168,.3)!important}
.k-contact__inhoud .frm_forms label.frm_primary_label{font-size:.85rem;font-weight:700;letter-spacing:.02em;color:var(--k-paars);margin-bottom:.35rem}
.k-contact__inhoud .frm_forms .frm_description{font-size:.78rem;color:var(--k-meta)}
.k-contact__inhoud .frm_forms .frm_submit button,.k-contact__inhoud .frm_forms .frm_submit input[type=submit]{min-height:52px;padding:0 2.4rem!important;border-radius:999px!important;background:var(--k-paars)!important;border:0!important;color:#fff!important;font-weight:700;font-size:1rem!important;cursor:pointer;transition:transform .3s var(--k-ease),background-color .3s}
.k-contact__inhoud .frm_forms .frm_submit button:hover,.k-contact__inhoud .frm_forms .frm_submit input[type=submit]:hover{background:#5a3a5f!important;transform:translateY(-2px)}
.k-contactkaart{position:sticky;top:120px;font-style:normal;background:var(--k-paars);color:#fff;border-radius:28px;padding:clamp(1.5rem,3vw,2.2rem);margin-top:clamp(1rem,4vw,7.5rem);box-shadow:0 30px 60px -30px rgba(71,45,75,.55)}
.k-contactkaart__foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:999px 999px 18px 18px;margin-bottom:1.4rem}
.k-contactkaart__naam{font-size:1.5rem;font-weight:700;margin-bottom:1rem}
.k-contactkaart__lijst{list-style:none;margin:0!important;padding:0!important;display:grid;gap:.9rem}
.k-contactkaart__lijst li{display:flex;gap:.8rem;align-items:flex-start;margin:0!important;padding:0!important;line-height:1.45}
.k-contactkaart__lijst li::before{display:none!important}
.k-contactkaart__lijst svg{flex:0 0 auto;color:var(--k-groen);margin-top:.1rem}
.k-contactkaart a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .25s}
.k-contactkaart a:hover{border-color:var(--k-groen)}
.k-contactkaart__social{display:flex;gap:1.2rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.15);font-size:.9rem;font-weight:700}
@media (max-width:976px){.k-contactkaart{position:static;margin-top:2.5rem}}
.k-contact__inhoud .frm_forms .frm_submit button,.k-contact__inhoud .frm_forms .frm_submit input[type=submit]{font-family:inherit!important}
.k-contact__snel{display:none}
@media (max-width:976px){
  .k-contact__snel{display:flex;flex-wrap:wrap;gap:.5rem;margin:-.4rem 0 1.6rem}
  .k-contact__snel a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:999px;background:var(--k-paars);color:#fff;text-decoration:none;font-size:.92rem}
  .k-contact__snel svg{width:18px;height:18px;color:var(--k-groen)}
}

/* ---------- paarse hero met foto (workshop, project, over ons): tekst blijft binnen het paarse vlak ---------- */
@media (min-width:977px){
  .normal--hero .hero__content{padding-right:clamp(2rem,4vw,4.5rem)}
}
.normal--hero .hero__content > div:not(.tagline):not(.hero__button) p{font-size:1.05rem;line-height:1.65}
/* tekstblok zonder foto (het fotovak is leeg): breder en in het midden in plaats van een smalle kolom met een leeg vlak ernaast */
.k-zonder-foto .grid > div:has(> .images__group){display:none}
.k-zonder-foto .grid > div:has(> .text__inner){flex:0 0 100%;max-width:760px;margin-left:auto!important;margin-right:auto!important}
/* blogcategorieën staan in kleine letters in WordPress ("news", "blog"): netjes met een hoofdletter */
.filter-list__item a,.card__label{text-transform:capitalize}

/* ---------- blogartikel: kopfoto als brede boog, tekst iets groter om te lezen ---------- */
.k-artikelfoto{max-width:1200px;margin:0 auto clamp(1rem,3vw,2rem);padding:0 clamp(16px,4vw,48px)}
.k-artikelfoto img{display:block;width:100%;height:auto;max-height:68vh;aspect-ratio:16/9;object-fit:cover;border-radius:28px}
.single-post .section .content{font-size:1.1rem;line-height:1.75}
.single-post .section .content p{margin-bottom:1.2em}
@media (max-width:767px){.k-artikelfoto img{aspect-ratio:4/3;border-radius:20px}.single-post .section .content{font-size:1.02rem}}

/* ---------- winkel: gelijke kaarten, foto met ronde hoeken en zoom, korte omschrijving, prijs als label ---------- */
.all__products .product-item{height:100%;display:flex;flex-direction:column;background:rgba(255,255,255,.45);border:1px solid var(--k-lijn);border-radius:22px;overflow:clip;transition:transform .45s var(--k-ease),box-shadow .45s var(--k-ease)}
.all__products .product-item:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(71,45,75,.45)}
.all__products .product-item__header{overflow:clip;aspect-ratio:4/5;background:#efe7dd}
.all__products .product-item__header img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .7s var(--k-ease)}
.all__products .product-item:hover .product-item__header img{scale:1.05}
.all__products .product-item__body{padding:1.1rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;text-align:left}
.all__products .product-item__title{font-size:1.1rem!important;line-height:1.3;margin:0!important;text-align:left}
.all__products .product-item__price{align-self:flex-start}
.all__products .product-item__body > .product-item__price{display:inline-flex;padding:.25rem .75rem;border-radius:999px;background:var(--k-paars);color:#fff;font-weight:700;font-size:.88rem}
.all__products .product-item__body > .product-item__price .product-item__price{background:none;padding:0;color:inherit}
.all__products .product-item__description{font-size:.88rem;line-height:1.5;color:var(--k-meta);text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.all__products .grid > div{margin-bottom:1.5rem}
.all__products .product-item__body > .product-item__price{align-items:center;line-height:1.2;padding:.32rem .8rem}
.all__products .product-item__price bdi{line-height:1.2}
@media (max-width:767px){
  .all__products .grid{row-gap:0}
  .all__products .grid > div{flex:0 0 50%!important;max-width:50%!important;padding-left:6px!important;padding-right:6px!important;margin-bottom:12px}
  .all__products .product-item{border-radius:16px}
  .all__products .product-item__body{padding:.8rem .8rem 1rem}
  .all__products .product-item__title{font-size:.95rem!important}
  .all__products .product-item__description{display:none}
}
.all__products .product-item__body > .product-item__price,.all__products .product-item__body > .product-item__price .product-item__price{margin:0!important}
@media (max-width:767px){.all__products .grid{flex-direction:row!important;flex-wrap:wrap!important}}
/* hero zonder foto: paginatitel in het paarse vlak, minder hoog */
.k-hero-kaal{min-height:0!important;height:auto!important}
.k-hero-kaal .hero__content{padding-top:clamp(9rem,16vw,13rem);padding-bottom:clamp(4rem,8vw,6.5rem)}
.k-hero-kaal .col-l-6{flex-basis:100%;max-width:100%}
.k-hero-kaal .default--title{color:#fff;max-width:18ch}
/* meer projecten: lange Nederlandse woorden ("Duurzaamheidskampioenen") breken af in plaats van in de buurkaart te lopen */
.k-meer-projecten .grid > div{padding-left:clamp(10px,1.4vw,20px);padding-right:clamp(10px,1.4vw,20px);margin-bottom:2rem}
.k-meer-projecten .cards--title,.projects__content .cards--title{overflow-wrap:anywhere;hyphens:auto}
.k-meer-projecten .section--title{margin-bottom:1.6rem}

/* ---------- lege winkelwagen: rustig midden op de pagina in plaats van een grijze meldingsbalk ---------- */
.cart--section .cart-empty.woocommerce-info{background:none!important;border:0!important;box-shadow:none!important;text-align:center;font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:300;color:var(--k-paars);padding:clamp(2.5rem,7vw,5rem) 0 1.2rem!important;margin:0!important}
.cart--section .cart-empty.woocommerce-info::before{content:"";display:block;position:static;width:84px;height:84px;margin:0 auto 1.4rem;border-radius:50%;background:var(--k-groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23472D4B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center/40px no-repeat}
.cart--section .return-to-shop{text-align:center;padding-bottom:clamp(2.5rem,7vw,5rem)}
.cart--section .return-to-shop .button{min-height:52px;padding:0 2.4rem;display:inline-flex;align-items:center}

/* service-FAQ: het plusje niet meer tegen de vraag aan */
.accordion--header .plus--state{flex:0 0 16px;margin-left:1.2rem}
/* Kollective "Join us?" op de telefoon: grotere foto's, naam en rol ernaast in plaats van drie geperste kolommen */
@media (max-width:767px){
  .section__team .team__group{display:grid!important;grid-template-columns:1fr;gap:1.2rem;max-width:420px;margin:0 auto}
  .section__team .teammember{display:grid!important;grid-template-columns:104px 1fr;align-items:center;gap:1.1rem;width:auto!important;max-width:none!important;text-align:left}
  .section__team .teammember .images__group,.section__team .teammember .round--image{width:104px!important;max-width:104px!important;margin:0!important}
  .section__team .teammember .card__body{align-items:flex-start!important;margin:0!important}
  .section__team .teammember .card__body,.section__team .teammember .card__body *{padding:0!important;text-align:left!important}
  .section__team .teammember .card__title{font-size:1.15rem;margin-bottom:.2rem}
}

/* ---------- 404: tekst met drie plekken om verder te gaan, en een willekeurige kaart uit het deck ---------- */
.k-404{padding:clamp(2rem,6vw,5rem) 0 clamp(4rem,8vw,7rem)}
.k-404__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.k-404__titel{font-weight:300;font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.02;margin:.4rem 0 1.2rem;color:var(--k-paars);text-wrap:balance}
.k-404__uitleg{font-size:1.1rem;margin-bottom:1rem}
.k-404__lijst{list-style:none;margin:0 0 2rem!important;padding:0!important;border-top:1px solid var(--k-lijn)}
.k-404__lijst li{margin:0!important;padding:0!important;border-bottom:1px solid var(--k-lijn)}
.k-404__lijst li::before{display:none!important}
.k-404__lijst a{display:flex;justify-content:space-between;align-items:center;min-height:56px;font-size:1.2rem;color:var(--k-paars);text-decoration:none;transition:padding .35s var(--k-ease)}
.k-404__lijst a span{color:var(--k-groen);font-size:1.3rem;transition:translate .35s var(--k-ease)}
.k-404__lijst a:hover{padding-left:.4rem}
.k-404__lijst a:hover span{translate:6px 0}
.k-404__kaart{display:block;justify-self:center;width:min(100%,340px);rotate:4deg;text-decoration:none;transition:rotate .6s var(--k-ease),translate .6s var(--k-ease)}
.k-404__kaart:hover{rotate:0deg;translate:0 -6px}
.k-404__kaart img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 40px 70px -35px rgba(71,45,75,.6)}
.k-404__kop{display:block;text-align:center;margin-top:1rem;font-size:1.05rem;font-weight:700;color:var(--k-paars)}
@media (max-width:767px){.k-404__grid{grid-template-columns:1fr}.k-404__kaart{width:min(70%,260px);order:-1;rotate:-3deg}}
@media (prefers-reduced-motion:reduce){.k-404__kaart{rotate:0deg}}

/* =====================================================================
   Toegankelijkheid (controle 08-10-2026, audit/a11y.md)
   ===================================================================== */
/* focus altijd zichtbaar bij toetsenbordgebruik (cmd zet overal outline:none) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--k-paars)!important;outline-offset:3px!important}
.section--dark :where(a,button,input):focus-visible,[data-bg="dark"] :where(a,button,input):focus-visible,.footer :where(a,button,input):focus-visible,.pushmenu :where(a,button):focus-visible,.k-contactkaart :where(a):focus-visible,.homehero :where(a,button):focus-visible{outline-color:#fff!important}
.all__products a.woocommerce-LoopProduct-link:focus-visible{outline-offset:-3px!important}
.k-contact__inhoud .frm_forms input:focus,.k-contact__inhoud .frm_forms select:focus,.k-contact__inhoud .frm_forms textarea:focus{border-color:var(--k-paars)!important;box-shadow:0 0 0 3px var(--k-paars)!important}
/* animaties verbergen met opacity, niet met visibility: dan blijven links bereikbaar met Tab, en wat focus krijgt is meteen te zien */
[data-animate*="stagger"],.k-onthul,.k-benefit,.card--item{visibility:visible!important}
[data-animate*="stagger"]:focus-within,.k-onthul:focus-within,.card--item:focus-within{opacity:1!important;transform:none!important;translate:none!important}
@media (prefers-reduced-motion:reduce){[data-animate*="stagger"],[data-animate="fade-in-up"]{opacity:1!important;transform:none!important;translate:none!important}}
/* teksten voor schermlezers: cmd zette ze op display:none, waardoor ook schermlezers ze niet hoorden */
.screen-reader-text{display:block!important;position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* contrast: wit op salie-groen haalde 2:1; paarse tekst op hetzelfde groen haalt 6:1 */
.button--accent,.button.button--accent,.button--cart,.daycard,.daycard *,.category__label,.k-agenda__knop{color:var(--k-paars)!important}
.k-bw-rail button{opacity:.75}
.k-deckblok__tekst .tagline{color:rgba(255,255,255,.82)!important}
.single-cards .content .soft p,.content .soft p{opacity:.8}
/* tikdoelen op de telefoon minstens 44 bij 44 */
@media (max-width:976px){
  .hamburger{min-width:44px!important;min-height:44px!important;display:inline-flex;align-items:center;justify-content:center}
  .footer .menu a,.footer nav a{min-height:44px;display:inline-flex;align-items:center}
  .footer .socials a.social{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
  .footer__logo{display:inline-flex;min-height:44px;align-items:center}
}
.filter-list__item.active a,.filter-list__item a:hover{color:var(--k-paars)!important}
.content .soft,.content .soft p{opacity:.88!important}

/* ---------- homehero met diepte: de kolibrie als losse laag ----------
   Achtergrond en vogel zijn dezelfde foto in twee lagen met dezelfde uitsnede, dus ze passen altijd op elkaar.
   De titel blijft altijd voor de vogel (leesbaar op elke schermbreedte). De diepte komt van de paarse boog:
   een tweede kopie van de vogel steekt in volle kleur over de rand van de boog en lost daaronder op in het paars,
   net boven de drie kolommen. --k-boog (de bovenkant van het paarse vlak) zet kolimbri.js. */
.homehero.k-diepte{isolation:isolate}
.homehero .k-vogelvak{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:2}
/* De vogel is een eigen plaatje, bijgesneden tot de vogel zelf (scherp opnieuw getekend uit de foto, zie LEESMIJ). Hij staat op zijn
   plek in een denkbeeldig doek dat net zo ligt als de achtergrondfoto: 3:2, schermvullend, onder en midden uitgelijnd.
   --vl/--vt/--vw/--vh = plek en maat van de vogel als deel van dat doek. Zonder container-eenheden (browsers van voor 2023)
   blijft de gewone foto staan en is er geen losse vogel. */
.homehero .k-vogel{display:none}
@supports (width:1cqw){
  .homehero .k-vogelvak{container-type:size}
  .homehero.k-diepte .hero__bg{background-image:var(--k-achter)!important}
  .homehero .k-vogel{display:block;position:absolute;max-width:none;--vl:.29553;--vt:.27774;--vw:.56993;--vh:.44685;--kW:max(100cqw,150cqh);
    left:calc(50cqw - var(--kW) / 2 + var(--vl) * var(--kW));top:calc(100cqh - var(--kW) / 1.5 + var(--vt) * var(--kW) / 1.5);
    width:calc(var(--vw) * var(--kW));height:calc(var(--vh) * var(--kW) / 1.5);transform-origin:43% 55%;will-change:transform}
}
.homehero.k-diepte .hero__caption{z-index:12}
.homehero .k-vogelvak--boven{display:none;z-index:11}
@media (min-width:977px){
  .homehero.k-boog-klaar .k-vogelvak--boven{display:block;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--k-boog) - 70px),transparent calc(var(--k-boog) - 6px));
    mask-image:linear-gradient(to bottom,#000 calc(var(--k-boog) - 70px),transparent calc(var(--k-boog) - 6px))}
}
@media (max-width:976px){
  .homehero.k-diepte .k-vogelvak--onder{position:sticky;inset:auto;top:0;height:100vh;height:100svh;margin-top:-100vh;margin-top:-100svh;z-index:1}
  .homehero.k-diepte .hero__caption{z-index:2}
  .homehero.k-diepte .shortmenu{z-index:3}
}