/* ================= Kom buitenspelen (activiteiten) ================= */
/* De vlakke kleur van de secties erboven en eronder vloeit over in de gestippelde
   achtergrond; de stippen en de cirkels verdwijnen zacht aan beide randen. */
.bb-act{position:relative;overflow:hidden;padding-bottom:calc(68px + 26px);background:linear-gradient(180deg,#F7FAF2 0%,#F3F9EA 26%,#F3F9EA 74%,var(--bg-alt) 100%)}
.bb-act::before,.bb-act::after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 150px,#000 calc(100% - 150px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 150px,#000 calc(100% - 150px),transparent 100%)}
.bb-act::before{background-image:radial-gradient(rgba(148,177,67,.22) 2.5px,transparent 2.6px),radial-gradient(rgba(250,215,40,.3) 2.5px,transparent 2.6px);background-size:34px 34px,34px 34px;background-position:0 0,17px 17px}
.bb-act::after{background-image:radial-gradient(circle 140px at calc(100% - 50px) 20px,rgba(141,187,78,.16) 99%,transparent 100%),radial-gradient(circle 95px at 25px calc(100% - 5px),rgba(250,215,40,.2) 99%,transparent 100%)}
.bb-act>.bb-container{position:relative;z-index:1}
.bb-act__lijst{display:grid;gap:24px;margin-top:10px}
.bb-act__card{position:relative;display:grid;grid-template-columns:110px 1fr;gap:0;background:var(--bb-white);border:2.5px solid var(--bb-green-logo);border-radius:22px;box-shadow:0 4px 0 rgba(148,177,67,.35),var(--shadow-card);overflow:hidden;transition:box-shadow var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
/* De tekstkolom mag krimpen tot de kaartbreedte. Zonder dit rekt de langste
   label of knop de kaart op tot buiten het scherm. */
.bb-act__card>*{min-width:0}
/* Op hele smalle telefoons is er naast een foto van 110 px te weinig ruimte over
   voor de titel, de labels en de twee knoppen. De foto gaat daar boven de tekst
   staan, over de volle breedte. De hoogte staat verderop, na de basisregel. */
@media (max-width:479px){
  .bb-act__card{grid-template-columns:1fr}
}
.bb-act__card:hover{box-shadow:0 8px 0 rgba(148,177,67,.4),var(--shadow-card-h);transform:translateY(-3px)}
.bb-act__foto{background:var(--bb-mint);overflow:hidden}
.bb-act__foto img{width:100%;height:100%;min-height:150px;object-fit:cover;display:block;transition:transform 500ms var(--ease-out)}
.bb-act__card:hover .bb-act__foto img{transform:scale(1.06)}
/* Staat de foto boven de tekst, dan krijgt hij een vaste, compacte hoogte, zodat
   de hele kaart op een smal scherm in beeld past. De kaarten in de carrousel zijn
   allemaal even hoog als de langste kaart. Die extra hoogte gaat naar het witte
   tekstvlak, niet naar de fotorij: anders kwam de mintgroene achtergrond van het
   fotovlak onder de foto tevoorschijn als een balk. */
@media (max-width:479px){
  .bb-act__card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .bb-act__foto img{height:186px;min-height:0}
  /* De knoppen zakken naar de onderkant van het tekstvlak, zodat ze op elke kaart
     op dezelfde hoogte staan, 20 px boven de rand van de kaart, hoe lang de titel
     of de labels erboven ook zijn. De regel voor schermen tot 759 px staat verderop
     in dit bestand en zet de bovenmarge weer vast, daarom is deze specifieker. */
  .bb-act__card .bb-act__body{padding-bottom:17.5px}
  .bb-act__card .bb-act__acts{margin-top:auto;padding-top:8px}
}
.bb-act__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px}
.bb-act__body h3{margin:0;font-size:var(--fs-h3);color:var(--bb-green-forest)}
.bb-act__meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.bb-act__chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--radius-pill);font:700 var(--fs-caption)/1 var(--font-body);color:var(--bb-green-dark);max-width:100%}
.bb-act__chip svg{flex:none;display:block;transform:translateY(-.25px)}
.bb-act__chip--leeftijd svg{transform:translateY(-1.5px)}
.bb-act__chip span{display:block;transform:translateY(.25px)}
.bb-act__chip--wanneer span{line-height:1.3;transform:none}
.bb-act__chip--buurt{background:var(--bb-mint)}
.bb-act__chip--leeftijd{background:rgba(250,215,40,.55)}
.bb-act__chip--wanneer{background:var(--bb-white);border:1.5px solid rgba(148,177,67,.5)}
.bb-act__acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px}
.bb-act__wa{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1 0 100%;white-space:normal;min-height:44px;padding:10px 13px;border-radius:var(--radius-pill);border:2px solid var(--bb-green-light);background:var(--bb-white);color:var(--bb-green-forest);font:700 var(--fs-button)/1 var(--font-body);text-decoration:none;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.bb-act__wa:hover{background:var(--bb-mint);color:var(--bb-green-dark)}
/* Mobiel staat de WhatsApp-knop onder 'Doe mee!'. Meer lucht boven dat knoppenpaar,
   zodat het losstaat van de activiteitgegevens, en juist minder ruimte tussen de twee
   knoppen zelf, zodat ze als één geheel blijven lezen. */
@media (max-width:759px){
  .bb-act__acts{margin-top:14px;row-gap:16px;column-gap:16px}
}
@media (min-width:760px){
  .bb-act__lijst{grid-template-columns:1fr 1fr}
  .bb-act__lijst--een{grid-template-columns:minmax(0,560px)}
  .bb-act__card{grid-template-columns:148px 1fr}
  .bb-act__acts{gap:18px}
  .bb-act__wa{flex:0 1 auto;white-space:nowrap}
  /* Vanaf deze breedte staat de foto naast de tekst en is de kaart hoger dan de
     inhoud. De knoppen zakken dan naar de onderrand, met 20 px lucht eronder, in
     plaats van dat er een gat onder de knoppen blijft staan. Is er geen ruimte
     over, dan blijven ze gewoon direct onder de tekst. */
  .bb-act__body{padding-bottom:20px}
  .bb-act__acts{margin-top:auto;padding-top:6px}
}
@media (min-width:1100px){.bb-act__card{grid-template-columns:195px 1fr}}
.bb-act__carousel .bb-carousel__slide>.bb-act__card{width:100%}
.bb-act__carousel{margin-top:10px}
@media (prefers-reduced-motion:reduce){.bb-act__card:hover .bb-act__foto img{transform:none}}

/* dialoog met het activiteitenformulier */
.bb-act__overlay{position:fixed;inset:0;z-index:120;background:rgba(6,69,48,.5);display:grid;place-items:end center;padding:0;overflow-y:auto}
.bb-act__paneel{width:100%;max-width:640px;background:var(--bb-white);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:0 -8px 30px rgba(6,7,7,.2);max-height:96vh;overflow-y:auto}
.bb-act__paneelkop{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;padding:22px 22px 0}
.bb-act__paneelkop h3{margin:2px 0 4px;font-size:var(--fs-h3)}
.bb-act__paneelkicker{margin:0;font:700 var(--fs-caption) var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--bb-green-forest)}
.bb-act__paneelmeta{margin:0;font-size:var(--fs-small);color:var(--fg-muted)}
.bb-act__sluit{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--radius-circle);background:var(--bb-mint);color:var(--bb-green-dark);cursor:pointer}
.bb-act__sluit:hover{background:var(--bb-gray-light)}
.bb-act__paneelbody{padding:18px 22px 26px}
.bb-act__paneelbody .bb-form__grouplabel:first-child{margin-top:0}
.bb-act__form .bb-form__foot{margin-top:6px}
.bb-act__row--leeftijd{max-width:300px}
.bb-act__klaar{text-align:center;padding:14px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:10px}
.bb-act__klaar h4{margin:0;font-size:var(--fs-h3)}
.bb-act__klaar p{margin:0;color:var(--fg-2)}
.bb-act__vink{width:56px;height:56px;display:grid;place-items:center;border-radius:var(--radius-circle);background:var(--bb-mint);color:var(--bb-green-forest)}
.bb-act__klaar .bb-confetti-rain{z-index:130}
.bb-act__klaaracts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
@media (min-width:760px){
  .bb-act__overlay{place-items:center}
  .bb-act__paneel{border-radius:var(--radius-xl);max-height:90vh}
  .bb-act__paneelkop{padding:26px 28px 0}
  .bb-act__paneelbody{padding:16px 28px 28px}
}
@media (prefers-reduced-motion:reduce){.bb-act__card:hover{transform:none}}

/* ================= Doneren ================= */
.bb-give{background:var(--bg-page);padding:56px 0 60px}
.bb-give__card{position:relative;display:grid;gap:18px;background:#F5F8EF;border:2px solid rgba(148,177,67,.35);border-radius:var(--radius-xl);padding:26px 24px 24px}
.bb-give__hart{position:absolute;top:-40px;left:24px;width:66px;height:66px;display:grid;place-items:center;border-radius:var(--radius-circle);background:var(--bb-white);color:var(--bb-green-light);box-shadow:var(--shadow-card)}
/* Kloppend hartje: het icoon zelf schaalt, de witte cirkel blijft stil staan. */
.bb-give__hart svg{animation:bbHartKlop 1.6s ease-in-out infinite;transform-origin:center;will-change:transform}
@keyframes bbHartKlop{0%,100%{transform:scale(1)}18%{transform:scale(1.22)}32%{transform:scale(1)}48%{transform:scale(1.14)}62%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.bb-give__hart svg{animation:none}}
.bb-rm-force .bb-give__hart svg{animation:none}
.bb-give__tekst h2{margin:0 0 8px;font-size:var(--fs-h3)}
.bb-give__tekst p{margin:0;font-size:var(--fs-lead);color:var(--fg-2);text-wrap:pretty}
.bb-give__blok{background:var(--bb-white);border:1px solid var(--border-card);border-radius:var(--radius-md);padding:24px 26px;display:flex;flex-direction:column;gap:4px}
.bb-give__tnv{margin:0;font-size:var(--fs-small);color:var(--fg-muted)}
.bb-give__doneer{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 24px;border:1.5px solid rgba(148,177,67,.55);border-radius:var(--radius-pill);background:var(--bb-white);color:var(--bb-green-dark);font:600 18px/1 var(--font-display);cursor:pointer;transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.bb-give__doneerhart{display:grid;place-items:center;color:var(--bb-green-forest);transition:color var(--t-fast) var(--ease-out)}
.bb-give__doneer:hover{background:var(--bb-mint);border-color:rgba(6,69,48,.45);transform:translateY(-1px)}
.bb-give__doneer:hover .bb-give__doneerhart{color:var(--bb-green-dark)}
/* Rustige, subtiele puls die de aandacht trekt zonder te schreeuwen. */
.bb-give__doneer:not(.bb-give__doneer--rustig){animation:bbDoneerPuls 3.6s cubic-bezier(.45,0,.55,1) infinite}
.bb-give__doneer:hover,.bb-give__doneer:focus-visible{animation:none}
@keyframes bbDoneerPuls{
  0%,100%{border-color:rgba(148,177,67,.55);box-shadow:0 0 0 0 rgba(6,69,48,0)}
  45%{border-color:rgba(6,69,48,.4);box-shadow:0 0 16px 2px rgba(6,69,48,.14)}
}
@media (prefers-reduced-motion: reduce){.bb-give__doneer{animation:none!important}}
.bb-rm-force .bb-give__doneer{animation:none!important}
@media (max-width:719px){.bb-give__doneer{width:100%;justify-content:center;font-size:17px;min-height:50px}}

/* ---- Venster met de crowdfundingwidget van WhyDonate ---- */
.bb-wd{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,69,48,.72);animation:bbWdIn 220ms var(--ease-out) both}
@keyframes bbWdIn{from{opacity:0}to{opacity:1}}
.bb-wd__paneel{display:flex;flex-direction:column;width:min(560px,100%);max-height:min(88vh,860px);background:var(--bb-white);border-radius:var(--radius-xl);box-shadow:0 24px 60px rgba(6,7,7,.28);overflow:hidden}
.bb-wd__kop{display:flex;align-items:center;gap:12px;padding:16px 16px 14px 20px;background:#F5F8EF;border-bottom:1px solid rgba(148,177,67,.35)}
.bb-wd__hart{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-circle);background:var(--bb-white);color:var(--bb-green-light);box-shadow:var(--shadow-card)}
.bb-wd__titel{margin:0;font:700 18px/1.25 var(--font-display);color:var(--bb-green-dark)}
.bb-wd__sub{margin:2px 0 0;font-size:var(--fs-caption);color:var(--fg-muted)}
.bb-wd__sluit{margin-left:auto;flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(6,69,48,.16);border-radius:var(--radius-sm);background:var(--bb-white);color:var(--bb-green-dark);cursor:pointer;transition:background var(--t-fast) var(--ease-out)}
.bb-wd__sluit:hover{background:var(--bb-mint)}
.bb-wd__intro{position:relative;overflow:hidden;padding:34px 26px 38px;text-align:center;min-height:340px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:719px){.bb-wd__intro{padding:30px 20px 34px;min-height:300px}}
.bb-wd__intro .bb-confetti-rain{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.bb-wd__intro > p,.bb-wd__intro > div:not(.bb-confetti-rain){position:relative;z-index:1}
.bb-wd__introkop{margin:0 auto;max-width:26ch;font:700 clamp(23px,3.4vw,29px)/1.25 var(--font-display);color:var(--bb-green-dark);text-wrap:pretty}
/* Dank! bouncet vijf keer rustig op en krijgt daarbij kort de gele accentkleur. */
.bb-wd__dank{display:inline-block;color:var(--bb-green-forest);transform-origin:50% 90%;opacity:0;animation:bbWdDankIn 420ms var(--ease-out) 1.5s forwards,bbWdDank 1.1s cubic-bezier(.34,1.5,.64,1) 1.5s 3}
@keyframes bbWdDankIn{from{opacity:0}to{opacity:1}}
@keyframes bbWdDank{
  0%{transform:scale(1);color:var(--bb-green-forest)}
  22%{transform:scale(1.08) translateY(-1px);color:#8A7A00}
  44%{transform:scale(1);color:var(--bb-green-forest)}
  58%{transform:scale(1.03)}
  72%,100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.bb-wd__dank{animation:none;opacity:1}}
.bb-rm-force .bb-wd__dank{animation:none;opacity:1}
.bb-wd__balk{position:relative;margin:26px auto 14px;width:min(320px,100%);height:10px;border-radius:var(--radius-pill);background:rgba(6,69,48,.1);overflow:hidden}
.bb-wd__balk span{position:absolute;inset:0 auto 0 0;width:0;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--bb-green-light),var(--bb-green-forest));animation:bbWdBalk 5s linear forwards}
/* Ongelijk tempo: rustig beginnen, dan een sprint, weer rustig, en op het eind
   in één keer door naar 100 procent op vijf seconden. */
@keyframes bbWdBalk{
  0%{width:4%;animation-timing-function:ease-in-out}
  24%{width:11%;animation-timing-function:ease-in-out}
  46%{width:40%;animation-timing-function:ease-in-out}
  74%{width:48%;animation-timing-function:ease-in-out}
  100%{width:100%}
}
.bb-wd__introsub{margin:0;font-size:var(--fs-lead);color:var(--fg-2)}
@media (prefers-reduced-motion:reduce){.bb-wd__balk span{animation:none;width:100%}}
.bb-rm-force .bb-wd__balk span{animation:none;width:100%}
.bb-wd__vak{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px}
/* Tijdens de intro bouwt de widget zich buiten beeld al op, met echte afmetingen
   en volledig zichtbaar voor de browser: het script van WhyDonate start pas als
   zijn eigen knop echt gerenderd en aanklikbaar is. Dus geen opacity:0 en geen
   pointer-events:none, alleen uit het zicht schuiven. */
.bb-wd__vak--wacht{position:absolute;left:-10000px;top:0;width:520px;height:560px;flex:none;overflow:hidden}
.bb-wd__widget{min-height:320px}
.bb-wd__widget iframe{width:100%;border:0;display:block}
.bb-wd__melding{margin:24px 16px;text-align:center;font-size:var(--fs-body);color:var(--fg-2)}
/* WhyDonate opent zijn formulier in een eigen venster over de hele pagina. De
   widget blijft dan in onze pagina hangen, maar onze eigen kaart verdwijnt uit
   het zicht, zodat er niet twee vensters over elkaar liggen. */
.bb-wd--extern{background:transparent;pointer-events:none;animation:none}
.bb-wd--extern .bb-wd__paneel{width:0;max-height:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
.bb-wd--extern .bb-wd__kop{display:none}
.bb-wd--extern .bb-wd__vak{padding:0;overflow:visible;pointer-events:auto}
/* In deze fase toont WhyDonate zijn eigen venster, dat los over de pagina ligt.
   Hun widget zelf (met hun groene knop 'Doneer') klappen wij dicht tot niets,
   zodat die knop niet in beeld komt op het moment dat hun venster sluit. Hun
   eigen venster staat op position:fixed en wordt hier dus niet door geraakt. */
.bb-wd--extern .bb-wd__widget{width:0;height:0;min-height:0;overflow:hidden}
/* Mobiel: tijdens onze eigen intro een compacte kaart die om de inhoud heen valt,
   zodat de confetti het hele vlak vult. Zodra het formulier van WhyDonate er staat,
   groeit het venster naar het volledige scherm, want dat formulier heeft ruimte nodig. */
@media (max-width:719px){
  .bb-wd--intro .bb-wd__paneel{width:100%;max-height:calc(100vh - 32px)}
  .bb-wd--formulier{padding:0;align-items:stretch}
  .bb-wd--formulier .bb-wd__paneel{width:100%;max-height:100%;border-radius:0}
}
.bb-give__onder{margin:10px 0 0;font-size:var(--fs-small);color:var(--fg-2)}
@media (max-width:719px){
  /* Meer lucht tussen het kloppende hartje en de kop. */
  .bb-give__card{padding-top:38px}
}
@media (min-width:860px){
  .bb-give__card{grid-template-columns:1.35fr 1fr;align-items:center;gap:28px;padding:30px 32px}
}
.bb-give__doneer--rustig{margin-top:10px}
@media (prefers-reduced-motion:reduce){.bb-give__doneer:hover{transform:none}}

/* Op mobiel worden de twee knoppen in een activiteitkaart even breed: zo breed
   als de langste tekst. De verticale ruimte blijft zoals hij is afgestemd. */
@media (max-width:620px){
  .bb-page .bb-act__acts{display:grid;grid-template-columns:minmax(0,max-content);justify-content:start}
  .bb-page .bb-act__acts>.bb-btn,
  .bb-page .bb-act__acts>.bb-act__wa{width:auto;justify-content:center}
}