/* BE BRAVE — huisstijl (new.bebrave.dog) */

/* Geen @import voor de huisstijlfonts. WordPress plakt deze Customizer-CSS
   achter de global styles in één <style id="global-styles-inline-css">, waardoor
   een @import niet meer vooraan de stylesheet staat en de browser hem negeert —
   de site viel daardoor terug op Georgia en Arial. @font-face heeft die
   volgorde-eis niet en werkt dus wél vanaf hier. Raleway is één variabele woff2
   voor 400 t/m 700; de unicode-range is die van Google's latin-subset (inclusief
   U+20AC, nodig voor de euro's in de tarieventabellen).

   De lettertypes komen van ons eigen domein. Bij een extern font gaat het
   IP-adres van elke bezoeker naar die partij, en dat willen we hier niet. De
   bestanden staan in `public/fonts/` van de app-repo; zie
   `public/fonts/LEESMIJ.md` voor de licenties en voor het regenereren van de
   Tabler-subset.

   Ze komen van **woef.bebrave.dog**, het productiedomein van de app. Tot de
   livegang op 25 augustus 2026 stonden ze op test.bebrave.dog; die
   afhankelijkheid van de stagingomgeving is toen weggehaald, samen met die van
   `contact.js` op de contactpagina.

   Er staat bewust geen tweede bron meer achter deze URL's. Een terugval naar
   Google zou betekenen dat bezoekers daar alsnog langskomen zodra ons eigen
   domein even niet reageert, en dat is precies wat we kwijt wilden. */
@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://woef.bebrave.dog/fonts/bree-serif-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://woef.bebrave.dog/fonts/raleway-latin-variabel.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Onze eigen Tabler-subset is 6 KB tegen 826 KB voor het volledige icoonfont;
   we gebruiken 23 van de ~5800 iconen. Voeg je hieronder een `.ti-…::before`
   toe, draai dan `scripts/subset-tabler.cjs` opnieuw. Het script leest de
   codepoints uit dit bestand, dus daarmee blijft de subset gelijk lopen met wat
   de site aanspreekt. */
@font-face {
  font-family: "tabler-icons";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://woef.bebrave.dog/fonts/tabler-bebrave.woff2") format("woff2");
}
.ti {
  font-family: "tabler-icons" !important;
  font-style: normal; font-weight: 400; font-variant: normal;
  text-transform: none; line-height: 1; speak: none;
  display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ti-heart::before { content: "\eabe"; }
.ti-map-pin::before { content: "\eae8"; }
.ti-school::before { content: "\ecf7"; }
.ti-users::before { content: "\ebf2"; }
.ti-clock::before { content: "\ea70"; }
.ti-calendar-month::before { content: "\fd2f"; }
.ti-coin-euro::before { content: "\f2bf"; }
.ti-paw::before { content: "\eff9"; }
.ti-certificate::before { content: "\ed76"; }
.ti-message-circle::before { content: "\eaed"; }
.ti-scissors::before { content: "\eb1b"; }
.ti-bath::before { content: "\ef48"; }
.ti-heart-handshake::before { content: "\f0f3"; }
.ti-leaf::before { content: "\ed4f"; }
.ti-snowflake::before { content: "\ec0b"; }
/* Lesiconen. De eerste drie volgen de icoonnaam die het lestype in de app al
   heeft (target, star, zap → bolt), zodat site en beheerscherm hetzelfde
   aanwijzen. Codepoints komen uit tabler-icons.min.css v3.33.0, dezelfde versie
   als het @font-face hierboven — een gegokte codepoint geeft stilletjes een
   leeg vierkantje dat je pas in de browser ziet. */
.ti-target::before { content: "\eb35"; }
.ti-star::before { content: "\eb2e"; }
.ti-bolt::before { content: "\ea38"; }
.ti-music::before { content: "\eafc"; }
/* 1-op-1 lessen. Codepoints net als hierboven opgezocht in v3.33.0. */
.ti-puzzle::before { content: "\eb10"; }
.ti-yoga::before { content: "\f01f"; }
.ti-activity::before { content: "\ed23"; }
.ti-mood-kid::before { content: "\ec03"; }

:root {
  --bb-magenta:#c026d3; --bb-teal:#008080; --bb-paars:#871d87;
  --bb-groen:#61ce70; --bb-groen-donker:#3f8a4a; --bb-groen-vlak:#46a656;
  --bb-antraciet:#404040; --bb-antraciet-licht:#4d4d4d;
  --bb-logo-magenta:#ff00ff;
  --bb-bg:#fff3ff; --bb-bg-zacht:#faf0fa; --bb-wit:#fff; --bb-rand:#ecdcec;
  --bb-tekst:#444; --bb-kop:#2a2a2a;
  --bb-kolom:1140px; --bb-kolom-breed:1320px; --bb-marge:24px;
  --bb-radius:10px; --bb-radius-groot:16px;
  --bb-knop-radius:14px;
  --bb-schaduw:0 4px 14px rgba(64,64,64,.10);
  --bb-schaduw-op:0 12px 28px rgba(64,64,64,.16);
  --bb-golf-hoogte:52px;
  --bb-kop-font:'Bree Serif', Georgia, serif;
  --bb-body-font:'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --bb-ease:cubic-bezier(.4,0,.2,1);
}

body, .wp-site-blocks, .editor-styles-wrapper {
  font-family: var(--bb-body-font); color: var(--bb-tekst); background: var(--bb-bg);
  font-size: 17px; line-height: 1.65;
}
.wp-site-blocks a { color: var(--bb-magenta); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wp-site-blocks a:hover { color: var(--bb-paars); }
.wp-site-blocks .wp-block-post-title { display: none; }

/* De standaard themakop verbergen — maar niet zodra onze eigen header erin staat */
.wp-site-blocks > header.wp-block-template-part:not(:has(.bb-hd)) { display: none; }
/* Template parts zelf mogen geen eigen marge of breedte opleggen */
.wp-site-blocks > header.wp-block-template-part:has(.bb-hd),
.wp-site-blocks > footer.wp-block-template-part:has(.bb-footer) { margin: 0; padding: 0; max-width: none; }
/* Geen witte strook tussen de laatste sectie en de footer: het thema zet daar
   ruimte onder de contentkolom en tussen de losse blokken. */
.wp-site-blocks { padding-bottom: 0 !important; }
.wp-site-blocks > footer.wp-block-template-part:has(.bb-footer) { margin-block-start: 0 !important; }
.wp-site-blocks > *:last-child { margin-block-end: 0 !important; }

/* Volle breedte, ook binnen een smalle contentkolom */
.bb-vol-breed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Kleurstalen (alleen voor de bouwstenenpagina) */
.bb-staal-rij { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 40px; }
.bb-staal { background: var(--bb-wit); border: 1px solid var(--bb-rand); border-radius: var(--bb-radius); padding: 16px; box-shadow: var(--bb-schaduw); }
.bb-staal span { display: block; height: 68px; border-radius: 7px; margin-bottom: 14px; }
.bb-staal b { font-family: var(--bb-kop-font); font-weight: 400; font-size: 17px; color: var(--bb-kop); display: block; }
.bb-staal code { display: inline-block; margin: 4px 0 6px; font-size: 13px; }
.bb-staal em { display: block; font-style: normal; font-size: 13px; color: #777; line-height: 1.45; }

/* ---------- HEADER ---------- */
.bb-hd, .bb-stick, .bb-drawer { box-sizing: border-box; --bb-hd-accent: var(--bb-logo-magenta); }
.bb-hd *, .bb-stick *, .bb-drawer * { box-sizing: border-box; }
.bb-hd { position: relative; background: var(--bb-antraciet); padding: clamp(14px,2.4vw,26px) clamp(16px,4vw,40px) 0; font-family: var(--bb-body-font); }
.bb-hd__in { max-width: 1240px; margin: 0 auto; }
/* De bovenste rij is een drieluik: "Kynologisch centrum" staat exact in het
   midden, het Be Brave-logo hangt er rechts uitgelijnd links tegenaan en de
   WOEF-knop links uitgelijnd rechts ertegenaan. De twee 1fr-kolommen maken het
   midden echt het midden, ook al is het logo breder dan de knop; de column-gap
   geeft aan beide kanten dezelfde lucht. */
.bb-hd__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: clamp(24px,4.6vw,66px); }
.bb-hd__l { display: flex; justify-content: flex-end; }
.bb-hd__c { display: flex; align-items: center; justify-content: center; }
.bb-hd__r { display: flex; justify-content: flex-start; }
.bb-brand { display: flex; align-items: center; gap: clamp(8px,1.2vw,14px); text-decoration: none; flex: none; }
.bb-bars { display: block; height: clamp(38px,5.4vw,58px); width: auto; }
.bb-word { font-family: var(--bb-kop-font); color: #fff; line-height: .98; font-size: clamp(19px,2.7vw,29px); letter-spacing: -.01em; display: block; }
.bb-word b { display: block; font-weight: 400; }
.bb-swap { position: relative; display: inline-block; }
.bb-swap u { visibility: hidden; text-decoration: none; }
.bb-swap i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; white-space: nowrap; }
/* De wissel ís de slogan: Be Kind, Be Bold, Be Brave. In het wit zag je dat
   niet, dus krijgen de eerste twee de mottokleuren van Over ons en landt de
   derde in het wit van het merk. */
.bb-swap i.bb-w1 { color: var(--bb-groen); }
.bb-swap i.bb-w2 { color: #f0abfc; }
.bb-swap i.bb-w3 { color: #fff; opacity: 1; }
.bb-kyno { font-family: var(--bb-kop-font); color: #fff; white-space: nowrap; font-size: clamp(20px,3.6vw,40px); line-height: 1; letter-spacing: -.015em; }

/* De WOEF-knop voert hetzelfde woordmerk als de app zelf: de vier balkjes met
   WOEF ernaast. Daarvoor stond hier een eigen rondje met een draaiende ring,
   een beeld dat verder nergens terugkwam; site en app wijzen nu hetzelfde aan.
   De knopvorm met de scherpe hoek rechtsboven volgt bb-knoppen. */
.bb-woefknop {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 9px 16px 9px 13px; border: 2px solid #6a6a6a;
  border-radius: var(--bb-knop-radius) 0 var(--bb-knop-radius) var(--bb-knop-radius);
  transition: background 160ms ease, border-color 160ms ease;
}
.bb-woefknop .bb-bars { height: 22px; }
.bb-woefknop b { font-family: var(--bb-kop-font); font-weight: 400; font-size: 21px; color: #fff; letter-spacing: .03em; }
/* In rust een stille grijze rand. Bij hover wandelt hij door de vier
   merkkleuren, doorlopend zolang de muis erop staat, en kwispelen de balkjes.
   Paars en teal in hun lichtere tint, anders valt de rand op antraciet weg. */
@keyframes bbRand {
  0%, 100% { border-color: var(--bb-logo-magenta); }
  25%      { border-color: var(--bb-groen); }
  50%      { border-color: #c084fc; }
  75%      { border-color: #2dd4d4; }
}
.bb-woefknop:hover { animation: bbRand 5s ease-in-out infinite; background: rgba(255,255,255,.05); }
.bb-bar { transform-box: fill-box; transform-origin: 50% 50%; }
.bb-woefknop:hover .bb-bar { animation: bbwag .34s ease-in-out 2; }
.bb-woefknop:hover .bb-bar:nth-child(2) { animation-delay: .07s; }
.bb-woefknop:hover .bb-bar:nth-child(3) { animation-delay: .14s; }
.bb-woefknop:hover .bb-bar:nth-child(4) { animation-delay: .21s; }
.bb-woefknop:focus-visible { outline: 3px solid var(--bb-hd-accent); outline-offset: 3px; }

/* Ruimer onderaan dan boven: de golf ligt over de onderrand heen, en met de
   oude 26px zat de kromming tegen de menuregel aan. */
.bb-hd .bb-nav, .bb-stick .bb-nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 clamp(10px,1.6vw,22px); padding: clamp(12px,2vw,22px) 0 clamp(30px,4vw,52px); }
.bb-hd .bb-nav a, .bb-stick .bb-nav a, .bb-drawer nav a { font-family: var(--bb-kop-font); font-size: clamp(15px,1.35vw,19px); color: #fff; text-decoration: none; padding: 6px 4px; transition: color 140ms ease; }
/* `var(--hub)` en niet de vaste accentkleur: deze selectors wegen (0,3,1) en
   zouden een losse `.bb-nav a:hover { color: var(--hub) }` (0,2,0) verderop
   gewoon overschrijven. Door de variabele hiér te gebruiken werkt de hubkleur
   zonder specificiteitsgevecht; `--hub` staat op de nav zelf en wordt per item
   overschreven door de bb-hub-klasse. */
.bb-hd .bb-nav a:hover, .bb-stick .bb-nav a:hover, .bb-drawer nav a:hover,
.bb-hd .bb-nav a.bb-on, .bb-stick .bb-nav a.bb-on, .bb-drawer nav a.bb-on { color: var(--hub); }
.bb-hd .bb-nav span, .bb-stick .bb-nav span { width: 1px; height: 19px; background: #6a6a6a; display: block; }
.bb-hd .bb-nav span:last-child, .bb-stick .bb-nav span:last-child, .bb-drawer nav span { display: none; }

/* De golf ligt over de onderrand van de header heen. Zonder pointer-events:none
   ving hij de kliks op de onderste pixels van de navigatie op: op het rechte
   stuk werkte de link wel, in de kromming niet. Hij is decoratie, dus hij mag
   geen muis vangen.
   Stond eerst alleen op de homepage (.bb-home); nu op elke pagina, zodat de
   header overal hetzelfde afsluit. */
.bb-golf { display: none; pointer-events: none; }
.bb-hd .bb-golf { display: block; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(14px,1.8vw,26px); }

/* ---------- HUBKLEUR PER NAVIGATIE-ITEM ----------
   Elk item draagt de kleur die de hub ook in de app heeft. Bij hover kleurt de
   tekst; op de actieve pagina komt er een liggend balkje onder, een knipoog
   naar de vier balkjes van het logo.

   De standaardkleur staat op de container en niet op de link zelf: een eigen
   `--hub` op `.bb-nav a` zou zwaarder wegen dan de losse hubklasse (0,1,1
   tegen 0,1,0) en elke hubkleur weer overschrijven. Via overerving wint de
   klasse op het element vanzelf.

   Paars en teal staan hier lichter dan hun echte hubkleur (#871d87 en #008080);
   die zijn op antraciet te donker om te lezen. Op lichte vlakken elders op de
   site blijven de echte kleuren gewoon gelden. */
.bb-nav, .bb-drawer nav { --hub: var(--bb-hd-accent); }
.bb-nav a { position: relative; }
/* Het balkje veert erin als een elastiekje: het groeit vanaf links, schiet een
   klein stukje voorbij, wordt daarbij even dunner zoals een elastiek dat je
   uitrekt, en wipt dan terug op zijn plek. `both` houdt de eindstand vast, dus
   na afloop staat er gewoon een strak streepje.

   Ook bij hover, op elk item. Het ::after bestaat dan nog niet en wordt op dat
   moment aangemaakt, waardoor de animatie vanzelf opnieuw start; je krijgt hem
   dus elke keer te zien in plaats van één keer per pagina. */
.bb-nav a:hover::after,
.bb-nav a.bb-on::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px;
  height: 3px; border-radius: 2px; background: var(--hub);
  transform-origin: left center;
  animation: bbElastiek 620ms cubic-bezier(.22,.8,.3,1) both;
}
/* Bij hover wat vlotter: je beweegt sneller over de balk dan een pagina laadt,
   en dan mag het balkje je bijhouden. */
.bb-nav a:hover::after { animation-duration: 460ms; }
@keyframes bbElastiek {
  0%   { transform: scaleX(0)    scaleY(1);   }
  55%  { transform: scaleX(1.05) scaleY(.6);  }
  75%  { transform: scaleX(.97)  scaleY(1.25);}
  90%  { transform: scaleX(1.01) scaleY(.9);  }
  100% { transform: scaleX(1)    scaleY(1);   }
}
.bb-hub-hs   { --hub: var(--bb-logo-magenta); }
.bb-hub-vs   { --hub: #2dd4d4; }
.bb-hub-gt   { --hub: #c084fc; }
.bb-hub-ev   { --hub: #60a5fa; }
.bb-hub-shop { --hub: var(--bb-groen); }
.bb-hub-ac   { --hub: #F59E0B; }

.bb-menurow { display: none; justify-content: center; padding: 12px 0 2px; }
.bb-mbtn { display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 9px 18px; min-height: 44px; }
.bb-mbtn svg { display: block; height: 28px; width: auto; transform-origin: 50% 50%; }
.bb-mbtn svg rect { fill: #fff; transition: fill 420ms ease; }
.bb-stick .bb-mbtn { display: none; margin: 0 auto; }
.bb-stick .bb-mbtn svg { height: 30px; transform: rotate(0deg); transition: transform 520ms cubic-bezier(.34,1.05,.64,1); }
.bb-stick.bb-show .bb-mbtn svg { transform: rotate(90deg); }
.bb-stick .bb-mbtn svg rect { transition-delay: .2s; }
.bb-stick.bb-show .bb-mbtn svg rect:nth-child(1) { fill: var(--bb-logo-magenta); }
.bb-stick.bb-show .bb-mbtn svg rect:nth-child(2) { fill: var(--bb-groen); }
.bb-stick.bb-show .bb-mbtn svg rect:nth-child(3) { fill: var(--bb-paars); }
.bb-stick.bb-show .bb-mbtn svg rect:nth-child(4) { fill: var(--bb-teal); }

.bb-drawer { position: fixed; inset: 0; z-index: 9999; background: var(--bb-antraciet); display: flex; flex-direction: column; padding: 22px clamp(20px,6vw,40px) 40px; opacity: 0; pointer-events: none; transition: opacity 180ms ease; overflow-y: auto; }
.bb-drawer.bb-open { opacity: 1; pointer-events: auto; }
.bb-drawer__x { align-self: flex-end; background: none; border: 0; color: #fff; cursor: pointer; font-size: 34px; line-height: 1; padding: 4px 8px; font-family: var(--bb-body-font); }
.bb-appbtn { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-top: 16px; color: #fff; padding: 13px 0; border-bottom: 1px solid #565656; }
.bb-appbtn .bb-bars { height: 30px; flex: none; }
.bb-appbtn b { font-family: var(--bb-kop-font); font-weight: 400; font-size: 25px; display: block; color: #fff; letter-spacing: .03em; }
.bb-appbtn small { font-family: var(--bb-body-font); font-size: 13px; color: #b3b3b3; }
.bb-appbtn .bb-pijl { margin-left: auto; font-style: normal; font-size: 23px; color: var(--bb-hd-accent); }
.bb-drawer nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.bb-drawer nav a { font-size: 25px; padding: 13px 0; border-bottom: 1px solid #565656; }
/* Op mobiel mag er wél diepte in het menu: onder Hondenschool en Shop staan de
   onderliggende pagina's ingesprongen, meteen zichtbaar. Geen uitklapmenu,
   gewoon een inhoudsopgave, met een balkje in de hubkleur ervoor. */
.bb-drawer nav a.bb-sub {
  font-size: 18px; padding: 10px 0 10px 26px; position: relative;
  color: #d6d6d6; border-bottom: 1px solid #4b4b4b;
}
.bb-drawer nav a.bb-sub::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 4px; border-radius: 2px; background: var(--hub);
}

.bb-stick { position: fixed; top: 0; left: 0; right: 0; z-index: 9998; background: var(--bb-antraciet); box-shadow: 0 4px 14px rgba(0,0,0,.22); transform: translateY(-102%); transition: transform 240ms ease; padding: 0 clamp(16px,4vw,40px); font-family: var(--bb-body-font); }
.bb-stick.bb-show { transform: none; }
.bb-stick__in { max-width: 1240px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: clamp(10px,1.6vw,22px); }
.bb-stick .bb-bars { height: 30px; flex: none; }
.bb-stick .bb-nav { padding: 0; margin: 0 auto; }
.bb-stick .bb-nav a { font-size: 16px; }
.bb-stick .bb-nav span { height: 15px; }
.bb-stick .bb-woefknop { padding: 6px 12px 6px 10px; }
.bb-stick .bb-woefknop .bb-bars { height: 16px; }
.bb-stick .bb-woefknop b { font-size: 16px; }
.bb-hd a:focus-visible, .bb-stick a:focus-visible, .bb-drawer a:focus-visible,
.bb-mbtn:focus-visible, .bb-drawer__x:focus-visible { outline: 3px solid var(--bb-hd-accent); outline-offset: 3px; border-radius: 3px; }
/* Bij een muisklik hoort geen kader. Sommige browsers tekenen er toch een, en
   dan zie je na het klikken kort een blauw blokje om het menu-item. `:focus`
   zonder outline haalt dat weg; `:focus-visible` hierboven blijft staan, en dat
   is precies de toetsenbordgebruiker die de ring nodig heeft. */
.bb-hd a:focus:not(:focus-visible), .bb-stick a:focus:not(:focus-visible),
.bb-drawer a:focus:not(:focus-visible), .bb-mbtn:focus:not(:focus-visible),
.bb-drawer__x:focus:not(:focus-visible) { outline: none; }

/* ---------- SECTIES & BANDEN ---------- */
.bb-sectie { background: var(--bb-bg); }
.bb-sectie-wit { background: var(--bb-wit); }
.bb-inner { max-width: var(--bb-kolom); margin-inline: auto; padding: 76px var(--bb-marge); box-sizing: border-box; }
.bb-inner-breed { max-width: var(--bb-kolom-breed); }
.bb-inner-smal { max-width: 860px; }

/* Het thema wikkelt de pagina-inhoud in drie lagen die allemaal ruimte
   toevoegen, en onze secties staan pas in de derde:

     <main style="margin-top: var(--wp--preset--spacing--60)">
       <div class="wp-block-group alignfull" style="padding: 70px boven én onder">
         <h1 class="wp-block-post-title">   (verborgen)
         <div class="entry-content">        ← hier pas onze secties

   Die 70px boven en onder waren het gat onder de header en het gat boven de
   footer. Daar bovenop zet `:where(.is-layout-constrained) > *` nog 1.2rem
   tussen alle blokken onderling.

   Alles eraf. De secties spreek ik aan op hun eigen klassenaam en niet op
   `main > .alignfull`: ze zijn geen kind van <main> maar van .entry-content,
   en die wrapperstructuur verschilt per templatetype. */
.wp-site-blocks > main,
.wp-site-blocks > main > .wp-block-group,
.wp-site-blocks main .entry-content {
  margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
.wp-site-blocks > footer { margin-block-start: 0 !important; }
.wp-site-blocks :is(.bb-sectie, .bb-band, .bb-cta) { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.bb-sectie:first-of-type > .bb-inner { padding-top: 36px; }
.bb-inner > .bb-hero:first-child { margin-top: 0; }

.bb-band { background: var(--bb-antraciet); color: #fff; }
/* De golf krijgt de kleur van de sectie ernaast. Staat daar wit in plaats van
   de roze paginakleur, dan zag je anders een rechte streep langs de golf. */
.bb-band::before, .bb-band::after {
  content: ""; display: block; height: var(--bb-golf-hoogte);
  background-color: var(--bb-golf-bg, var(--bb-bg));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 101%; mask-size: 100% 101%;
}
.bb-band::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 68' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,68 1080,68 1440,0 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 68' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,68 1080,68 1440,0 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
}
.bb-band::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 68' preserveAspectRatio='none'%3E%3Cpath d='M0,68 C360,0 1080,0 1440,68 L1440,68 L0,68 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 68' preserveAspectRatio='none'%3E%3Cpath d='M0,68 C360,0 1080,0 1440,68 L1440,68 L0,68 Z'/%3E%3C/svg%3E");
}
.bb-band .bb-inner { padding-top: 20px; padding-bottom: 44px; }
.bb-band-geen-golf-boven::before { display: none; }
.bb-band-geen-golf-onder::after { display: none; }
/* Loopt een band rechtstreeks over in de slotsectie, dan is de golf ertussen
   alleen maar een streep paginakleur: die twee vlakken horen tegen elkaar aan. */
.bb-band:has(+ .bb-cta)::after { display: none; }
.bb-sectie-wit + .bb-band::before { background-color: var(--bb-wit); }
.bb-band:has(+ .bb-sectie-wit)::after { background-color: var(--bb-wit); }

/* Golf die meebeweegt met het scrollen: dieper naarmate je verder scrollt */
@supports (animation-timeline: view()) {
  @keyframes bbGolfRek { from { transform: scaleY(.3); } to { transform: scaleY(1.3); } }
  .bb-band-golf-scroll::before, .bb-band-golf-scroll::after {
    transform-origin: bottom center;
    animation: bbGolfRek linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .bb-band-golf-scroll::after { transform-origin: top center; }
}

/* ---------- HERO ---------- */
.wp-site-blocks .bb-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; margin-top: 44px; }
.wp-site-blocks .bb-hero > * { margin-block: 0; }
.bb-hero .bb-label { margin-bottom: 10px !important; }
.bb-hero h1 { margin-top: 0; margin-bottom: .35em; }
.bb-hero .wp-block-image img { border-radius: var(--bb-radius-groot); }
.bb-hero-omgekeerd > div:first-child { order: 2; }
.wp-site-blocks .bb-hero-kaal { grid-template-columns: 1fr; text-align: center; max-width: 780px; margin-inline: auto; }
.bb-hero-kaal .bb-lead { margin-inline: auto; }

/* ---------- TYPOGRAFIE ---------- */
.wp-site-blocks :is(h1,h2,h3,h4,h5,h6) { font-family: var(--bb-kop-font); font-weight: 400; color: var(--bb-kop); letter-spacing: .005em; line-height: 1.2; }
.bb-inner h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-top: 0; }
.bb-inner h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: .3em; }
.bb-inner h3 { font-size: 1.35rem; }
.bb-inner h4 { font-size: 1.08rem; }
.bb-lead { font-size: 1.1875rem; line-height: 1.6; max-width: 64ch; }
.bb-inner p { text-wrap: pretty; }
.bb-inner ul { padding-left: 1.15em; }
.bb-inner li { margin-block: .3em; }
.bb-inner code { background: var(--bb-bg-zacht); border: 1px solid var(--bb-rand); border-radius: 5px; padding: 1px 6px; font-size: .88em; color: var(--bb-paars); }
.bb-kop-magenta { color: var(--bb-magenta) !important; }
.bb-kop-paars { color: var(--bb-paars) !important; }
.bb-kop-teal { color: var(--bb-teal) !important; }
.bb-centreer, .bb-centreer p, .bb-centreer h2 { text-align: center; }
.bb-centreer .bb-lead { margin-inline: auto; }
.bb-label { font-family: var(--bb-body-font); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-magenta); margin: 0 0 6px !important; }
.bb-band .bb-label { color: var(--bb-groen); }

/* ---------- KNOPPEN ---------- */
.wp-site-blocks .bb-knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.wp-site-blocks .bb-knoppen.bb-centreer { justify-content: center; }
.wp-site-blocks .bb-knoppen .wp-block-button { margin: 0; }
.wp-site-blocks .bb-knoppen .wp-block-button__link,
.wp-site-blocks .bb-knoppen .wp-block-button__link:visited {
  font-family: var(--bb-body-font); font-size: 17px; font-weight: 600; line-height: 1.2;
  padding: 15px 30px; border: 2px solid var(--bb-teal);
  border-radius: var(--bb-knop-radius) 0 var(--bb-knop-radius) var(--bb-knop-radius);
  background: var(--bb-teal); color: #fff; text-decoration: none;
  transition: background 160ms var(--bb-ease), color 160ms var(--bb-ease);
}
.wp-site-blocks .bb-knoppen .wp-block-button__link:hover { background: var(--bb-bg); color: var(--bb-teal); }
.wp-site-blocks .bb-knoppen .wp-block-button__link:active { filter: brightness(.92); }
.wp-site-blocks .bb-knoppen .bb-knop-magenta .wp-block-button__link { background: var(--bb-magenta); border-color: var(--bb-magenta); color: #fff; }
.wp-site-blocks .bb-knoppen .bb-knop-magenta .wp-block-button__link:hover { background: var(--bb-bg); color: var(--bb-magenta); }
.wp-site-blocks .bb-knoppen .bb-knop-lijn .wp-block-button__link { background: transparent; color: var(--bb-magenta); border-color: var(--bb-magenta); }
.wp-site-blocks .bb-knoppen .bb-knop-lijn .wp-block-button__link:hover { background: var(--bb-magenta); color: #fff; }

/* ---------- KAARTEN ---------- */
.wp-site-blocks .bb-grid { display: grid; gap: 28px; margin-top: 44px; }
.wp-site-blocks .bb-grid > * { margin-block: 0; }
.bb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bb-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Regel: een bouwsteen met een eigen achtergrond zet ook zijn eigen
   tekstkleur. Zonder dat erft hij de `color: #fff` van een donkere band en
   staat er witte tekst op een witte kaart. Dat ging eerst mis bij de kaart en
   het accentblok, en daarna nog een keer bij de vragen. */
.bb-kaart { background: var(--bb-wit); color: var(--bb-tekst); border: 1px solid var(--bb-rand); border-radius: var(--bb-radius); padding: 28px; box-shadow: var(--bb-schaduw); transition: transform 220ms var(--bb-ease), box-shadow 220ms var(--bb-ease); }
.bb-kaart > :first-child { margin-top: 0; }
.bb-kaart > :last-child { margin-bottom: 0; }
.bb-kaart-zweef:hover { transform: translateY(-5px); box-shadow: var(--bb-schaduw-op); }

.bb-kaart-kleur { border: 0; border-radius: 22px; padding: 30px; box-shadow: none; color: #fff; position: relative; overflow: hidden; }
.bb-kaart-kleur .bb-kaart-sub { color: rgba(255,255,255,.8); font-size: 15px; margin: 4px 0 18px; line-height: 1.45; }
.bb-kaart-kleur ul { list-style: none; padding-left: 0; }
.bb-kaart-kleur li { padding-left: 1.05em; position: relative; }
.bb-kaart-kleur li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.bb-kaart-kleur h4 { margin-top: 26px; }
.bb-kaart-kleur.bb-kaart-zweef:hover { transform: translateY(-6px); box-shadow: var(--bb-schaduw-op); }
.bb-kaart-magenta { background: var(--bb-magenta); }
.bb-kaart-paars { background: var(--bb-paars); }
.bb-kaart-teal { background: var(--bb-teal); }
.bb-kaart-groen { background: var(--bb-groen-vlak); }
/* Hub-blauw, voor de evenementenkaart op de homepage. Zelfde blauw als de hub
   in de app (#3B82F6); de navigatie gebruikt de lichtere tint #60a5fa omdat
   tekst op antraciet meer contrast vraagt dan wit op een blauw vlak. */
.bb-kaart-blauw { background: #3B82F6; }

/* Icoon bovenin een kaart, voor de hubkaarten van Wat we bieden. */
.bb-kaart-ico { font-size: 38px; display: block; margin-bottom: 14px; color: rgba(255,255,255,.92); }
.bb-kaart:not(.bb-kaart-kleur) .bb-kaart-ico { color: var(--bb-magenta); }
/* Amber voor Academie: de kaart zelf is gedempt donker (binnenkort), alleen
   het icoon draagt vast de hubkleur. */
.bb-ico-amber { color: #F59E0B !important; }

.bb-kaart-balk { border-top: 6px solid var(--bb-rand); }
.bb-balk-magenta { border-top-color: var(--bb-magenta); }
.bb-balk-teal { border-top-color: var(--bb-teal); }
.bb-balk-groen { border-top-color: var(--bb-groen); }
.bb-balk-paars { border-top-color: var(--bb-paars); }

/* B — kleur schuift van onderaf in bij hover */
.bb-kaart-wipe { position: relative; overflow: hidden; isolation: isolate; --bb-wipe: var(--bb-magenta); }
.bb-kaart-wipe::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bb-wipe);
  transform: translateY(101%); transition: transform 420ms var(--bb-ease);
}
.bb-kaart-wipe:hover::before { transform: none; }
.bb-kaart-wipe :is(h3,h4,p,li,span) { transition: color 300ms var(--bb-ease); }
.bb-kaart-wipe:hover :is(h3,h4,p,li) { color: #fff; }
.bb-kaart-wipe:hover { border-color: transparent; }
.bb-wipe-magenta { --bb-wipe: var(--bb-magenta); }
.bb-wipe-teal { --bb-wipe: var(--bb-teal); }
.bb-wipe-paars { --bb-wipe: var(--bb-paars); }
.bb-wipe-groen { --bb-wipe: var(--bb-groen-vlak); }

/* C — kaart tilt op, pijl loopt uit */
.bb-kaart-pijl { display: block; text-decoration: none; color: inherit; --bb-pijl: var(--bb-magenta); }
.bb-kaart-pijl h3 { color: var(--bb-kop); }
.bb-kaart-pijl .bb-pijl-rij { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--bb-pijl); font-weight: 600; font-size: 15px; }
.bb-kaart-pijl .bb-pijl-lijn { display: block; height: 2px; width: 22px; background: currentColor; transition: width 300ms var(--bb-ease); }
.bb-kaart-pijl:hover { transform: translateY(-6px); box-shadow: var(--bb-schaduw-op); border-color: var(--bb-pijl); }
.bb-kaart-pijl:hover .bb-pijl-lijn { width: 52px; }
.bb-pijl-magenta { --bb-pijl: var(--bb-magenta); }
.bb-pijl-teal { --bb-pijl: var(--bb-teal); }
.bb-pijl-paars { --bb-pijl: var(--bb-paars); }
.bb-pijl-groen { --bb-pijl: var(--bb-groen-donker); }

/* ---------- INFOKAARTEN (feiten op een rij) ---------- */
.bb-infokaarten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px; margin-top: 44px; perspective: 1000px;
}
.wp-site-blocks .bb-infokaarten > * { margin-block: 0; }
.bb-infokaart {
  background: var(--bb-antraciet); color: #fff;
  border-radius: 28px 0 28px 28px;
  padding: 30px 24px; text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  min-height: 168px;
  transform-style: preserve-3d;
  transition: transform 420ms var(--bb-ease), box-shadow 420ms var(--bb-ease), background 300ms ease;
}
.bb-infokaart b { display: block; font-family: var(--bb-body-font); font-weight: 700; font-size: 27px; line-height: 1.1; color: #fff; }
.bb-infokaart span { display: block; font-size: 15px; line-height: 1.45; color: #cfcfcf; }
.bb-infokaarten .bb-infokaart:hover {
  transform: rotateX(7deg) rotateY(-9deg) translateY(-6px) scale(1.02);
  box-shadow: -16px 18px 32px rgba(64,64,64,.28);
}
.bb-infokaarten > *:nth-child(even):hover {
  transform: rotateX(7deg) rotateY(9deg) translateY(-6px) scale(1.02);
  box-shadow: 16px 18px 32px rgba(64,64,64,.28);
}
.bb-infokaart-magenta { background: var(--bb-magenta); }
.bb-infokaart-teal { background: var(--bb-teal); }
.bb-infokaart-paars { background: var(--bb-paars); }
.bb-infokaart-groen { background: var(--bb-groen-vlak); }
.bb-infokaart-licht { background: var(--bb-wit); color: var(--bb-tekst); border: 1px solid var(--bb-rand); box-shadow: var(--bb-schaduw); }
.bb-infokaart-licht b { color: var(--bb-kop); }
.bb-infokaart-licht span { color: #777; }
.bb-band .bb-infokaart { background: var(--bb-antraciet-licht); }

/* Een gewone kaart of accentblok op een donkere band moet mee donker worden.
   Zonder dit erft de witte kaart de `color: #fff` van .bb-band en staat er witte
   tekst op een witte achtergrond. Voor quote, cursuskaart, infokaart en tabel
   bestond die uitzondering al — voor deze twee niet.
   Quotes uitgezonderd: die hebben hun eigen regel hieronder, met een gekleurde
   linkerrand die deze selector anders zou overschrijven. De gekleurde bovenbalk
   is een device voor lichte secties — op de band wordt de kaart gewoon vlak,
   zoals de cursuskaart en de infokaart daar ook doen. */
.bb-band .bb-kaart:not(.bb-kaart-kleur):not(.bb-quote),
.bb-band .bb-accent {
  background: var(--bb-antraciet-licht); border-color: #5c5c5c; box-shadow: none; color: #fff;
}
.bb-band .bb-kaart-balk:not(.bb-kaart-kleur):not(.bb-quote) { border-top-width: 1px; }
.bb-band .bb-kaart:not(.bb-kaart-kleur):not(.bb-quote) small,
.bb-band .bb-accent small { color: #b9b9b9; }

.bb-band .bb-quote { background: var(--bb-antraciet-licht); border: 0; border-left: 5px solid var(--bb-magenta); border-radius: var(--bb-radius); padding: 28px 30px; box-shadow: none; color: #fff; }
.bb-quote-naam { font-size: 15px; margin: 16px 0 0 !important; color: #f0abfc; }
.bb-quote-groen { border-left-color: var(--bb-groen) !important; }
.bb-quote-groen .bb-quote-naam { color: var(--bb-groen); }
.bb-quote-teal { border-left-color: #2dd4d4 !important; }
.bb-quote-teal .bb-quote-naam { color: #2dd4d4; }

/* ---------- CURSUSKAARTEN (eigen iconen) ---------- */
.wp-site-blocks .bb-cursusrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.wp-site-blocks .bb-cursusrij > * { margin-block: 0; }
.bb-cursusrij-3 { grid-template-columns: repeat(3, 1fr); }
.bb-cursusrij-2 { grid-template-columns: repeat(2, 1fr); }
.bb-cursuskaart {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  background: var(--bb-wit); border: 1px solid var(--bb-rand); border-radius: 14px;
  padding: 34px 20px 28px; text-decoration: none; text-align: center;
  box-shadow: var(--bb-schaduw);
  transition: transform 240ms var(--bb-ease), box-shadow 240ms var(--bb-ease), border-color 240ms ease;
}
.bb-cursuskaart img { width: 96px; height: 72px; object-fit: contain; transition: transform 300ms cubic-bezier(.34,1.1,.64,1); }
/* Variant met een Tabler-icoon in plaats van een illustratie. Zelfde hoogte als
   de plaatjes, zodat rijen met beide soorten kaarten gelijk uitlijnen. */
.bb-cursuskaart .ti { font-size: 56px; height: 72px; display: flex; align-items: center; color: var(--bb-teal); transition: transform 300ms cubic-bezier(.34,1.1,.64,1), color 200ms ease; }
.bb-cursuskaart b { font-family: var(--bb-kop-font); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--bb-kop); transition: color 200ms ease; }
.bb-cursuskaart small { font-family: var(--bb-body-font); font-size: 14px; color: #777; display: block; margin-top: 4px; }
.bb-cursuskaart:hover { transform: translateY(-6px); box-shadow: var(--bb-schaduw-op); border-color: #e3bde8; }
.bb-cursuskaart:hover img, .bb-cursuskaart:hover .ti { transform: scale(1.09); }
.bb-cursuskaart:hover b { color: var(--bb-magenta); }
.bb-cursuskaart:hover .ti { color: var(--bb-magenta); }

.bb-band .bb-cursuskaart { background: var(--bb-antraciet-licht); border-color: #5c5c5c; box-shadow: none; }
.bb-band .bb-cursuskaart img { filter: brightness(0) invert(1); }
.bb-band .bb-cursuskaart .ti { color: #fff; }
.bb-band .bb-cursuskaart:hover .ti { color: #f0abfc; }
.bb-band .bb-cursuskaart b { color: #fff; }
.bb-band .bb-cursuskaart small { color: #b9b9b9; }
.bb-band .bb-cursuskaart:hover { border-color: var(--bb-magenta); }
.bb-band .bb-cursuskaart:hover b { color: #f0abfc; }

.bb-cursus-kaal .bb-cursuskaart { background: transparent; border-color: transparent; box-shadow: none; }
.bb-cursus-kaal .bb-cursuskaart:hover { border-color: transparent; box-shadow: none; }

/* De wipe (bb-kaart-wipe) werkt ook op een cursuskaart, maar die heeft andere
   kinderen dan een gewone kaart — <b>, <small> en een icoon of illustratie —
   dus die moeten apart wit worden, anders blijft de tekst magenta op een
   magenta vlak. De illustraties zijn donkere PNG's met transparantie; die
   keren we om in plaats van ze te kleuren, net als op een donkere band.
   Let op de .wp-site-blocks-prefix: zonder die extra klasse verliezen deze
   regels van de `.bb-band .bb-cursuskaart:hover`-regels hierboven (gelijke
   specificiteit, maar die staan later), en dan wordt de tekst op de groene
   wipe roze in plaats van wit. */
.wp-site-blocks .bb-cursuskaart.bb-kaart-wipe:hover :is(b, small) { color: #fff; }
.wp-site-blocks .bb-cursuskaart.bb-kaart-wipe:hover .ti { color: #fff; }
.wp-site-blocks .bb-cursuskaart.bb-kaart-wipe:hover img { filter: brightness(0) invert(1); }
.wp-site-blocks .bb-cursuskaart.bb-kaart-wipe:hover { border-color: transparent; }

/* ---------- CIJFERBALKEN ---------- */
.bb-balken { display: flex; gap: 6px; height: 44px; align-items: flex-end; margin-bottom: 18px; }
.bb-balken i { display: block; width: 12px; height: 100%; border-radius: 6px; transform: scaleY(.08); transform-origin: bottom; }
.bb-balken i:nth-child(1) { background: var(--bb-logo-magenta); }
.bb-balken i:nth-child(2) { background: var(--bb-groen); }
.bb-balken i:nth-child(3) { background: var(--bb-paars); }
.bb-balken i:nth-child(4) { background: var(--bb-teal); }
@supports (animation-timeline: view()) {
  @keyframes bbBalkGroei { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
  .bb-balken i { animation: bbBalkGroei linear both; animation-timeline: view(); animation-range: entry 15% cover 62%; }
  .bb-balken i:nth-child(2) { animation-range: entry 24% cover 72%; }
  .bb-balken i:nth-child(3) { animation-range: entry 33% cover 82%; }
  .bb-balken i:nth-child(4) { animation-range: entry 42% cover 92%; }
}
@supports not (animation-timeline: view()) { .bb-balken i { transform: none; } }

/* ---------- ICONENRIJ ---------- */
/* De rij vult zichzelf, net als bb-infokaarten. Stond eerst vast op vier
   kolommen: met drie iconen bleef de vierde kolom leeg en schoof de hele rij
   naar links, met een gat aan de rechterkant. */
.bb-iconen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 60px; text-align: center; }
.bb-iconen i { font-size: 44px; line-height: 1; display: block; margin-bottom: 14px; transition: transform 260ms var(--bb-ease); }
.bb-iconen > div:hover i { transform: translateY(-4px) scale(1.06); }
.bb-iconen > div:nth-child(1) i { color: var(--bb-magenta); }
.bb-iconen > div:nth-child(2) i { color: var(--bb-teal); }
.bb-iconen > div:nth-child(3) i { color: var(--bb-paars); }
.bb-iconen > div:nth-child(4) i { color: var(--bb-groen-donker); }
.bb-iconen h3 { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.15rem; margin: 0 0 6px; color: var(--bb-kop); }
.bb-iconen p { font-size: 15px; margin: 0; line-height: 1.5; }

/* ---------- ACCENT & CTA ---------- */
.bb-accent { background: var(--bb-wit); color: var(--bb-tekst); border-left: 6px solid var(--bb-magenta); border-radius: var(--bb-radius); padding: 26px 32px; margin: 60px 0 0; box-shadow: var(--bb-schaduw); }
.bb-accent-paars { border-left-color: var(--bb-paars); }
.bb-accent-teal { border-left-color: var(--bb-teal); }
.bb-accent > :first-child { margin-top: 0; }
.bb-accent > :last-child { margin-bottom: 0; }
.bb-cta { background: var(--bb-magenta); color: #fff; }
.bb-cta p { color: rgba(255,255,255,.9); }

/* ---------- TABEL ---------- */
/* Vaste kolombreedte, zodat de bedragen van tabellen ónder elkaar op dezelfde
   lijn staan in plaats van mee te bewegen met de langste omschrijving. */
.bb-tabel { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 15px; table-layout: fixed; }
.bb-tabel th { background: var(--bb-antraciet); color: #fff; font-family: var(--bb-kop-font); font-weight: 400; text-align: left; padding: 14px 16px; }
.bb-tabel td { padding: 13px 16px; border-bottom: 1px solid var(--bb-rand); }
.bb-tabel tr:nth-child(even) td { background: var(--bb-bg-zacht); }
.bb-tabel th:last-child, .bb-tabel td:last-child { width: 34%; text-align: right; }
.bb-tabel + .bb-tabel { margin-top: 26px; }

/* Tabel op de donkere band */
.bb-band .bb-tabel th { background: var(--bb-antraciet-licht); }
.bb-band .bb-tabel td { border-bottom-color: #5c5c5c; color: #fff; }
.bb-band .bb-tabel tr:nth-child(even) td { background: rgba(255,255,255,.05); }

/* ---------- ACCORDEON ---------- */
.wp-site-blocks .bb-vragen { margin-top: 40px; display: grid; gap: 12px; }
.wp-site-blocks .bb-vragen > * { margin-block: 0; }
.bb-vraag { background: var(--bb-wit); color: var(--bb-tekst); border: 1px solid var(--bb-rand); border-radius: var(--bb-radius); padding: 18px 24px; transition: border-color 180ms var(--bb-ease); }
.bb-vraag:hover { border-color: #d9bcd9; }
/* Vragen op een donkere band: kaart mee donker, en de vraagtekst en het pijltje
   naar een tint die op antraciet leesbaar blijft. */
.bb-band .bb-vraag { background: var(--bb-antraciet-licht); border-color: #5c5c5c; color: #fff; }
.bb-band .bb-vraag:hover { border-color: var(--bb-magenta); }
.bb-band .bb-vraag summary { color: #f0abfc; }
.bb-band .bb-vraag summary::after { color: #f0abfc; }
.bb-vraag summary { cursor: pointer; list-style: none; font-family: var(--bb-kop-font); font-size: 1.1rem; color: var(--bb-paars); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bb-vraag summary::-webkit-details-marker { display: none; }
.bb-vraag summary::after { content: "\25BE"; color: var(--bb-magenta); font-size: 1.15rem; transition: transform 160ms var(--bb-ease); flex: none; }
.bb-vraag[open] summary::after { transform: rotate(180deg); }
.bb-vraag p { margin: 14px 0 0; font-size: 16px; }

/* ---------- FORMULIER ---------- */
/* Het contactformulier staat als gewone HTML in de pagina; contact.js doet
   alleen het versturen. De klassenamen hieronder zijn dus een contract met dat
   script — zie docs/WORDPRESS-INTEGRATION.md, §Contactformulier. Verander
   `bb-formulier__vangnet` en `bb-formulier__melding` niet zonder het script mee
   te nemen. */
.wp-site-blocks .bb-formulier {
  display: grid; gap: 6px;
  background: var(--bb-wit); color: var(--bb-tekst);
  border: 1px solid var(--bb-rand); border-radius: var(--bb-radius-groot);
  padding: 34px; box-shadow: var(--bb-schaduw);
  margin-top: 40px;
}
.bb-formulier label {
  font-family: var(--bb-body-font); font-weight: 600; font-size: 15px;
  color: var(--bb-kop); margin-top: 18px;
}
.bb-formulier > label:first-of-type { margin-top: 0; }
/* "(niet verplicht)" mag niet even zwaar wegen als het label zelf. */
.bb-formulier label span { font-weight: 400; color: #777; }
/* `background-color` en niet de `background`-shorthand: die zou het eigen
   pijltje van de keuzelijst hieronder weer wissen. */
.bb-formulier :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  font-family: var(--bb-body-font); font-size: 16px; line-height: 1.5;
  color: var(--bb-tekst); background-color: var(--bb-wit);
  border: 1px solid var(--bb-rand); border-radius: var(--bb-radius);
  padding: 12px 14px; width: 100%; box-sizing: border-box;
  transition: border-color 160ms var(--bb-ease);
}
.bb-formulier :is(input, select, textarea):hover { border-color: #d9bcd9; }
.bb-formulier :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--bb-magenta); outline-offset: 2px; border-color: var(--bb-magenta);
}
.bb-formulier textarea { resize: vertical; min-height: 150px; }
/* Eigen pijltje: het systeempijltje verschilt per browser en botst met de rand.
   Let op de .wp-site-blocks-prefix. De regel hierboven weegt (0,2,1) — `:is()`
   erft de specificiteit van zijn zwaarste argument, hier `input[type="text"]` —
   en een kale `.bb-formulier select` weegt maar (0,1,1). Zonder die extra klasse
   verliest deze regel dus, en dan staat de keuzelijst zónder pijltje op de
   pagina: `appearance: none` haalt het systeempijltje weg en het onze komt er
   niet voor in de plaats. Ook `padding-right` verloor daardoor. */
.wp-site-blocks .bb-formulier select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23c026d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
  padding-right: 42px;
}

/* De vinkjesregel is één regel tekst met een vakje ervoor, geen labelkop. */
.bb-formulier .bb-formulier__vink {
  display: flex; align-items: flex-start; gap: 11px;
  font-weight: 400; font-size: 15px; color: var(--bb-tekst); line-height: 1.5;
  margin-top: 24px; cursor: pointer;
}
.bb-formulier .bb-formulier__vink input { width: 19px; height: 19px; flex: none; margin: 2px 0 0; accent-color: var(--bb-magenta); }

/* Honeypot. Bewust met CSS verbergen en niet met type="hidden": bots vullen een
   verborgen tekstveld wél in en slaan hidden fields over, en juist dat verschil
   is waar de val op draait. Niet omzetten naar display:none — dan halen
   sommige bots hem er ook uit. */
.bb-formulier__vangnet { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bb-formulier button[type="submit"] {
  font-family: var(--bb-body-font); font-size: 17px; font-weight: 600; line-height: 1.2;
  padding: 15px 30px; margin-top: 28px; justify-self: start; cursor: pointer;
  border: 2px solid var(--bb-teal); background: var(--bb-teal); color: #fff;
  border-radius: var(--bb-knop-radius) 0 var(--bb-knop-radius) var(--bb-knop-radius);
  transition: background 160ms var(--bb-ease), color 160ms var(--bb-ease);
}
.bb-formulier button[type="submit"]:hover:not(:disabled) { background: var(--bb-bg); color: var(--bb-teal); }
.bb-formulier button[type="submit"]:focus-visible { outline: 3px solid var(--bb-magenta); outline-offset: 3px; }
/* Na een geslaagde verzending zet het script álle velden op disabled. Dat mag
   niet lezen als "kapot": grijs genoeg om uitgeschakeld te ogen, donker genoeg
   om leesbaar te blijven. */
.bb-formulier :disabled { opacity: .55; cursor: default; }

.bb-formulier__melding {
  margin-top: 20px; padding: 14px 18px; border-radius: var(--bb-radius);
  font-size: 15px; line-height: 1.55; border-left: 5px solid var(--bb-rand);
  background: var(--bb-bg-zacht); color: var(--bb-tekst);
}
/* Vóór het versturen staat er een leeg meldingsvak in de pagina; het script zet
   de klasse er pas op als er iets te melden valt. Op de klasse alleen selecteren
   laat dus een lege gridcel staan — vandaar ook op het data-attribuut. */
.bb-formulier :is(.bb-formulier__melding, [data-bb-melding]):empty { display: none; }
.bb-formulier__melding--gelukt { border-left-color: var(--bb-groen-vlak); }
.bb-formulier__melding--fout { border-left-color: var(--bb-magenta); }

/* Het formulier in twee stappen: eerst alleen "Waar gaat het over?", en zodra
   daar iets gekozen is verschijnt de rest. Het onderwerp is geen drempel maar
   een echte vraag — het bepaalt in welke mailbox het bericht landt.

   `display: contents` en niet `block`: het formulier is een grid en de velden
   moeten gridkinderen blijven, anders vallen de tussenruimtes weg.

   Alles hieronder werkt zonder JavaScript. Valt de CSS weg, dan staat het hele
   formulier er gewoon — dat is de veilige kant om op om te vallen. */
.bb-formulier__rest { display: contents; }
.wp-site-blocks .bb-formulier:has(select[name="onderwerp"] option[value=""]:checked) .bb-formulier__rest {
  display: none;
}

/* Na een geslaagde verzending blijft alleen de bevestiging staan. contact.js zet
   dan de klasse --gelukt op het meldingsvak; daar haakt deze regel op aan.
   Het script zet de velden zelf al op disabled en leegt ze, maar liet het grijze
   formulier staan — en een leeg, uitgegrijsd formulier onder een bedankje leest
   als "er ging iets mis".
   Let op: dit voorkomt geen spam. Een bot leest deze pagina niet en post
   rechtstreeks naar het endpoint; de bescherming zit in de honeypot, de
   3-secondendrempel en de ratelimit in public-contact. Wat dit wél voorkomt is
   dat een mens per ongeluk twee keer verstuurt. */
.wp-site-blocks .bb-formulier:has(.bb-formulier__melding--gelukt) > :not([data-bb-melding]) {
  display: none;
}

@media (max-width: 640px) {
  .wp-site-blocks .bb-formulier { padding: 24px 20px; }
  .bb-formulier button[type="submit"] { justify-self: stretch; text-align: center; }
}

/* ---------- MOTTO ---------- */
/* Be Kind, Be Bold, Be Brave, op de donkere band van Over ons. Een klein "Be"
   boven een groot woord, elk in een van de kleuren uit het logo. Geen hover:
   dit is een uitspraak, geen knop. Het inkomen bij het scrollen doet
   `bb-reveal-kids`, waardoor de drie woorden na elkaar verschijnen. */
.wp-site-blocks .bb-motto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 52px;
}
.wp-site-blocks .bb-motto > * { margin-block: 0; }
.bb-motto > div { border-top: 4px solid var(--bb-motto); padding-top: 24px; }
.bb-motto b {
  display: block; font-family: var(--bb-kop-font); font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; color: var(--bb-motto);
}
/* Ook de "Be" in Bree Serif: het hoort bij het merk. Gewicht 400, want dat is
   het enige gewicht dat we van dit font laden; een hoger getal laat de browser
   zelf verdikken en dat oogt vlekkerig. */
.bb-motto b span {
  display: block; font-family: var(--bb-kop-font); font-size: 15px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: #b9b9b9; margin-bottom: 10px;
}
.bb-motto em {
  display: block; font-style: normal; font-family: var(--bb-kop-font);
  font-size: 1.12rem; line-height: 1.4; color: #fff; margin: 18px 0 12px;
}
.bb-motto p { font-size: 16px; line-height: 1.6; margin: 0; color: #d6d6d6; }
/* Drie van de vier balkkleuren uit het logo. Op antraciet zijn dit de tinten
   die elders op de banden ook al gebruikt worden, dus ze blijven leesbaar. */
.bb-motto-kind { --bb-motto: var(--bb-groen); }
.bb-motto-bold { --bb-motto: #f0abfc; }
.bb-motto-brave { --bb-motto: #2dd4d4; }

@media (max-width: 860px) {
  .wp-site-blocks .bb-motto { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
}

/* ---------- TEAMKAART ---------- */
/* Alleen op Over ons. Een portret links, het verhaal rechts, zodat de pagina
   leest als een rij profielen in plaats van een raster met plaatjes.

   Van iedereen bestaan twee foto's: een in het zwarte shirt en een in het roze.
   Ze staan gestapeld in `bb-portret`. In rust zie je bij iedereen de roze,
   bij hover wisselt de zwarte erin. Zonder hover, bijvoorbeeld op een telefoon,
   blijft die roze gewoon staan; er gaat dus niets verloren. */
.wp-site-blocks .bb-teamkaart {
  display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start;
}
.wp-site-blocks .bb-teamkaart > * { margin-block: 0; }
.bb-teamkaart h3 { margin-top: 0; }
.bb-teamkaart .bb-rol {
  font-family: var(--bb-body-font); font-size: 14px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bb-magenta);
  margin: 4px 0 14px;
}
.bb-teamkaart p { font-size: 16px; }
.bb-teamkaart p + p { margin-top: 12px; }

.bb-portret { position: relative; border-radius: var(--bb-radius); overflow: hidden; }
/* 4:5 in plaats van de ware 2:3: net wat minder hoog, zodat de kaart naast de
   tekst in balans blijft. `cover` snijdt bij en vervormt niemand. */
.bb-inner .bb-portret .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
.bb-portret .bb-portret__wissel { position: absolute; inset: 0; }
.bb-portret .bb-portret__wissel img { height: 100%; opacity: 0; transition: opacity 450ms var(--bb-ease); }
.bb-teamkaart:hover .bb-portret__wissel img { opacity: 1; }

/* Het erkenningsbordje is een vierkant logo, geen foto: op ware grootte en
   zonder afgeronde hoeken, net als het Be Brave-logo. */
.bb-bordje img { width: auto; max-width: 190px; height: auto; border-radius: 0; }

/* Een staande foto naast een tekstkolom wordt al snel torenhoog: op halve
   breedte werd de eigenarenfoto 914px, terwijl de tekst ernaast op de helft
   daarvan uitkwam. Deze begrenzing houdt de twee kolommen in balans en zet de
   foto gecentreerd in de zijne. */
.bb-foto-staand img { max-width: 430px; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .bb-portret .bb-portret__wissel img { transition: none; }
}
@media (max-width: 700px) {
  .wp-site-blocks .bb-teamkaart { grid-template-columns: 1fr; gap: 20px; }
  .bb-portret { max-width: 240px; }
}

/* ---------- AFBEELDINGEN & DUO ---------- */
.bb-inner .wp-block-image img { border-radius: var(--bb-radius-groot); display: block; width: 100%; height: auto; }
.bb-inner .wp-block-image { margin: 0; }
/* Foto met een vaste verhouding. Nodig zodra een rij foto's uit verschillende
   bronnen komt: de drie locatiefoto's zijn 16:9, 2,8:1 en 8:7, en naast elkaar
   op ware verhouding wordt dat een rommelige rij. `cover` snijdt bij in plaats
   van te vervormen, zodat de hond nooit uitgerekt wordt. */
.bb-foto-vast img { aspect-ratio: 3 / 2; object-fit: cover; }
.bb-kaart .bb-foto-vast { margin-bottom: 22px; }
/* Een logo is geen foto: op ware verhouding en niet uitgerekt tot kolombreedte,
   en zonder afgeronde hoeken. Het Be Brave-logo is zwarte letters op
   transparant, dus het kan alléén op een lichte ondergrond — op een bb-band
   valt de tekst weg. */
.bb-logo-blok img { width: auto; max-width: 260px; height: auto; border-radius: 0; }
.bb-kaart .bb-logo-blok { margin-bottom: 20px; }
.wp-site-blocks .bb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wp-site-blocks .bb-duo > * { margin-block: 0; }
.bb-duo-breed-rechts { grid-template-columns: 1fr 1.12fr; }
.bb-duo-breed-links { grid-template-columns: 1.12fr 1fr; }
.bb-duo > div > :first-child { margin-top: 0; }
.bb-duo > div > :last-child { margin-bottom: 0; }

/* ---------- CAROUSEL ---------- */
/* Werkt zonder JavaScript als swipebare strook: scroll-snap doet het rekenwerk,
   de browser doet de beweging. bb.js hangt er pijlen en stippen aan zodra het
   draait — zonder JS blijven alle foto's gewoon bereikbaar door te vegen of te
   scrollen. Vaste verhouding op de dia's, anders springt de hoogte bij het
   wisselen tussen foto's met een ander formaat. */
.bb-carousel { position: relative; }
.bb-carousel__spoor {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--bb-radius-groot); scrollbar-width: none; -ms-overflow-style: none;
}
.bb-carousel__spoor::-webkit-scrollbar { display: none; }
/* 3:2 volgt de verhouding van de foto's zelf (2560x1638). Bij 4:3 werd de hero
   onnodig hoog en sneed hij de zijkanten weg. */
.bb-carousel__dia { flex: 0 0 100%; scroll-snap-align: center; margin: 0; aspect-ratio: 3 / 2; }
.bb-carousel__dia img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--bb-radius-groot); }

/* Kale chevron zonder rondje. De schaduw houdt hem leesbaar op zowel een lichte
   als een donkere foto. */
.bb-carousel__knop {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--bb-body-font); font-size: 40px; font-weight: 300; line-height: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  opacity: .85; transition: opacity 160ms var(--bb-ease), transform 160ms var(--bb-ease);
}
.bb-carousel__knop:hover { opacity: 1; }
.bb-carousel__vorige:hover { transform: translate(-3px, -50%); }
.bb-carousel__volgende:hover { transform: translate(3px, -50%); }
.bb-carousel__knop:focus-visible { outline: 3px solid #fff; outline-offset: 0; border-radius: 4px; opacity: 1; }
.bb-carousel__vorige { left: 4px; }
.bb-carousel__volgende { right: 4px; }

.bb-carousel__stippen { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.bb-carousel__stip {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--bb-rand); transition: background 160ms var(--bb-ease), transform 160ms var(--bb-ease);
}
.bb-carousel__stip[aria-current="true"] { background: var(--bb-magenta); transform: scale(1.3); }
.bb-carousel__stip:focus-visible { outline: 3px solid var(--bb-magenta); outline-offset: 3px; }
.bb-band .bb-carousel__stip { background: #6a6a6a; }
.bb-band .bb-carousel__stip[aria-current="true"] { background: #f0abfc; }

/* ---------- VOER-WIDGET (embed uit de app) ---------- */
/* De smaken en prijzen op de Voerpagina komen live uit de app, via
   woef.bebrave.dog/embed/voer.js. Prijzen staan dus nooit in de pagina zelf —
   dat was destijds de fix tegen prijs-drift tussen WordPress en de app.

   Het script brengt zijn eigen opmaak mee, gemaakt voor de oude site: een
   systeemfont en neutrale grijzen. Zijn teal is toevallig al precies onze
   --bb-teal. Hieronder trekken we typografie, kaartstijl en knop naar de
   huisstijl, zodat het widgetblok geen vreemd eiland is.

   De embed injecteert zijn stylesheet pas bij het laden, dus ná deze. Vandaar
   dat elke regel via .wp-site-blocks loopt: dat geeft één klasse extra
   specificiteit, waarmee we winnen zonder overal !important. Alleen waar de
   embed zelf !important gebruikt, doen wij dat ook. */
.wp-site-blocks .bebrave-voer { font-family: var(--bb-body-font); color: var(--bb-tekst); max-width: none; margin-top: 32px; }
.wp-site-blocks .bbv-intro { font-family: var(--bb-body-font); color: var(--bb-tekst); }
.wp-site-blocks .bbv-intro strong { color: var(--bb-teal); }

.wp-site-blocks .bbv-grid { gap: 24px; }
.wp-site-blocks .bbv-card {
  background: var(--bb-wit); border: 1px solid var(--bb-rand);
  border-radius: var(--bb-radius); box-shadow: var(--bb-schaduw);
  transition: transform 220ms var(--bb-ease), box-shadow 220ms var(--bb-ease);
}
.wp-site-blocks .bbv-card:hover { transform: translateY(-5px); box-shadow: var(--bb-schaduw-op); }
.wp-site-blocks .bbv-badge { background: var(--bb-teal); border-radius: 8px 0 8px 8px; font-family: var(--bb-body-font); }
.wp-site-blocks .bbv-naam { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.2rem; color: var(--bb-kop); }
.wp-site-blocks .bbv-bron { color: #777; }
.wp-site-blocks .bbv-prijs-bedrag { font-family: var(--bb-body-font); color: var(--bb-teal); }
.wp-site-blocks .bbv-prijs-label { color: #777; }
.wp-site-blocks .bbv-toggle { font-family: var(--bb-body-font); color: var(--bb-magenta) !important; }

/* De bestelknop volgt de vorm van bb-knoppen: één scherpe hoek rechtsboven. */
.wp-site-blocks .bbv-btn {
  font-family: var(--bb-body-font); font-size: 17px; font-weight: 600;
  padding: 15px 30px; background: var(--bb-teal);
  border: 2px solid var(--bb-teal);
  border-radius: var(--bb-knop-radius) 0 var(--bb-knop-radius) var(--bb-knop-radius);
}
.wp-site-blocks .bbv-btn:hover { background: var(--bb-teal); transform: none; filter: brightness(1.12); }

.wp-site-blocks .bbv-supp { background: var(--bb-bg-zacht); border: 1px solid var(--bb-rand); border-radius: var(--bb-radius); }
.wp-site-blocks .bbv-supp-naam { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.05rem; color: var(--bb-kop); }
.wp-site-blocks .bbv-supp-sub { color: #777; }
.wp-site-blocks .bbv-supp-prijs { font-family: var(--bb-body-font); color: var(--bb-teal); }
.wp-site-blocks .bbv-state { font-family: var(--bb-body-font); color: #777; }
.wp-site-blocks .bbv-spinner { border-color: var(--bb-rand); border-top-color: var(--bb-teal); }

/* De modal hangt aan <body> en valt dus buiten .wp-site-blocks; die spreken we
   los aan, met dezelfde specificiteit als de embed en dus na hem in de cascade. */
.bbv-modal { font-family: var(--bb-body-font); border-radius: var(--bb-radius-groot); color: var(--bb-tekst); }
.bbv-modal-title { font-family: var(--bb-kop-font); font-weight: 400; color: var(--bb-kop); }
.bbv-modal-body { font-family: var(--bb-body-font); color: var(--bb-tekst); }
.bbv-modal-body strong { font-family: var(--bb-kop-font); font-weight: 400; color: var(--bb-kop); }

@media (prefers-reduced-motion: reduce) {
  .wp-site-blocks .bbv-card { transition: none; }
  .wp-site-blocks .bbv-card:hover { transform: none; }
}

/* ---------- FUN-EMBED (bfun-) ---------- */
/* Weekrooster en abonnementen op de Funpagina komen live uit de app, via
   woef.bebrave.dog/embed/fun-lessen.js. Lestijden, prijzen en het aantal
   credits staan dus nooit in de pagina zelf — de oude Funpagina noemde nog
   "woensdagavond 19.00" en "€ 50 per maand", allebei al lang niet meer waar.

   Deze embed gebruikt nergens !important (anders dan voer.js), dus het scopen
   via .wp-site-blocks is overal genoeg om na hem in de cascade te winnen.

   Zijn accentkleur is oranje (#E86C35) en past niet bij de huisstijl; die wordt
   hieronder teal. De kleur per les blíjft wel van de app komen: die zet het
   script inline op de linkerrand, en dat is precies de bedoeling. */
.wp-site-blocks .bfun-widget {
  font-family: var(--bb-body-font); color: var(--bb-tekst);
  max-width: none; margin: 32px 0 0; padding: 0;
}

/* De embed zet zelf twee <h2>'s neer ("Weekrooster", "Abonnementen"). Die
   staan onder de eigen H2 van de sectie, dus geven we ze het formaat van een
   subkop — de tag kunnen we niet veranderen zonder de app aan te raken. */
.wp-site-blocks .bfun-section-title { font-size: 1.35rem; color: var(--bb-paars); margin: 0 0 18px; }
.wp-site-blocks .bfun-section + .bfun-section { margin-top: 48px; }

.wp-site-blocks .bfun-day-name { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.1rem; color: var(--bb-magenta); margin-bottom: 10px; }
.wp-site-blocks .bfun-lesson {
  background: var(--bb-wit); border: 1px solid var(--bb-rand);
  border-left-width: 4px; border-radius: var(--bb-radius);
  padding: 12px 16px; margin-bottom: 10px;
}
.wp-site-blocks .bfun-lesson-time { font-family: var(--bb-body-font); font-weight: 700; color: var(--bb-teal); min-width: 58px; }
/* Heeft een lestype een pagina op de site (veld bij het lestype in de app),
   dan zet de embed de naam in een <a class="bfun-lesson-link">. Die gebruikt
   color: inherit !important om de groene themalinkkleur te weren, dus de
   kleur hieronder blijft gewoon gelden — er is niets extra's voor nodig. */
.wp-site-blocks .bfun-lesson-name { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.05rem; color: var(--bb-kop); }
.wp-site-blocks .bfun-lesson-meta { font-family: var(--bb-body-font); color: #777; margin-top: 2px; }
.wp-site-blocks .bfun-badge { font-family: var(--bb-body-font); color: #fff; background: var(--bb-magenta); }

.wp-site-blocks .bfun-abo-grid { gap: 24px; }
.wp-site-blocks .bfun-abo-card {
  background: var(--bb-wit); color: var(--bb-tekst);
  border: 1px solid var(--bb-rand); border-radius: var(--bb-radius);
  box-shadow: var(--bb-schaduw); padding: 28px;
  transition: transform 220ms var(--bb-ease), box-shadow 220ms var(--bb-ease);
}
.wp-site-blocks .bfun-abo-card:hover { transform: translateY(-5px); box-shadow: var(--bb-schaduw-op); }
.wp-site-blocks .bfun-abo-card.bfun-trial { border-color: var(--bb-groen-vlak); border-width: 2px; }
.wp-site-blocks .bfun-abo-badge { font-family: var(--bb-body-font); color: #fff; background: var(--bb-groen-vlak); }
.wp-site-blocks .bfun-abo-name { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.2rem; color: var(--bb-kop); margin-bottom: 6px; }
.wp-site-blocks .bfun-abo-price { font-family: var(--bb-body-font); font-size: 1.35rem; color: var(--bb-teal); }
.wp-site-blocks .bfun-abo-detail { font-family: var(--bb-body-font); color: #777; }
.wp-site-blocks .bfun-abo-desc { font-family: var(--bb-body-font); color: var(--bb-tekst); }

/* Zelfde knopvorm als bb-knoppen: één scherpe hoek rechtsboven. */
.wp-site-blocks .bfun-btn {
  font-family: var(--bb-body-font); font-size: 17px; font-weight: 600;
  padding: 15px 30px; background: var(--bb-teal);
  border: 2px solid var(--bb-teal);
  border-radius: var(--bb-knop-radius) 0 var(--bb-knop-radius) var(--bb-knop-radius);
}
/* De knoptekst is "Abonnement nemen →" en brak op twee regels zodra de kaart
   smal werd. `nowrap` houdt hem op één regel; de knop mag daarvoor iets minder
   zijruimte hebben. */
.wp-site-blocks .bfun-btn { white-space: nowrap; padding-inline: 22px; }
.wp-site-blocks .bfun-btn:hover { background: var(--bb-teal); filter: brightness(1.12); }
.wp-site-blocks .bfun-btn.bfun-btn-trial { background: var(--bb-groen-vlak); border-color: var(--bb-groen-vlak); }
.wp-site-blocks .bfun-btn.bfun-btn-trial:hover { background: var(--bb-groen-vlak); filter: brightness(1.12); }

.wp-site-blocks :is(.bfun-loading, .bfun-empty, .bfun-error) { font-family: var(--bb-body-font); }
.wp-site-blocks :is(.bfun-loading, .bfun-empty) { color: #777; }
.wp-site-blocks .bfun-spinner { border-color: var(--bb-rand); border-top-color: var(--bb-teal); }

@media (prefers-reduced-motion: reduce) {
  .wp-site-blocks .bfun-abo-card { transition: none; }
  .wp-site-blocks .bfun-abo-card:hover { transform: none; }
}

/* ---------- VACHTSTUDIO-GALERIJ-EMBED (bvs-) ---------- */
/* De fotogalerij op de Vachtstudio-pagina komt live uit de app, via
   woef.bebrave.dog/embed/vachtstudio-galerij.js. Alleen foto's die in het
   app-beheer bewust zijn vrijgegeven én waarvoor de klant toestemming gaf.

   Anders dan bij llp-lessen.js kon deze embed geen bfun-klassen hergebruiken:
   een fotogrid met een schuifvergelijking is een ander component dan een
   lessenrooster. Vandaar een eigen prefix en dit blok.

   De embed gebruikt nergens !important, dus scopen via .wp-site-blocks is
   genoeg om na hem in de cascade te winnen. */
.wp-site-blocks .bvs-widget {
  font-family: var(--bb-body-font); color: var(--bb-tekst);
  max-width: none; margin: 32px 0 0; padding: 0;
}
.wp-site-blocks .bvs-grid { gap: 28px; }
.wp-site-blocks .bvs-card {
  background: var(--bb-wit); border: 1px solid var(--bb-rand);
  border-radius: var(--bb-radius); box-shadow: var(--bb-schaduw);
  overflow: hidden;
}
.wp-site-blocks .bvs-caption {
  font-family: var(--bb-body-font); color: var(--bb-tekst);
  padding: 14px 18px;
}
/* Schuifknop en scheidingslijn in de huisstijl-teal. */
.wp-site-blocks .bvs-schuif::-webkit-slider-thumb { border-color: var(--bb-teal); }
.wp-site-blocks .bvs-schuif::-moz-range-thumb { border-color: var(--bb-teal); }
.wp-site-blocks .bvs-label { font-family: var(--bb-body-font); }
.wp-site-blocks :is(.bvs-loading, .bvs-empty) { font-family: var(--bb-body-font); color: #777; }
.wp-site-blocks .bvs-error { font-family: var(--bb-body-font); }
.wp-site-blocks .bvs-spinner { border-color: var(--bb-rand); border-top-color: var(--bb-teal); }

/* ---------- CURSUSSEN-EMBED (bebrave-) ---------- */
/* Startdata, prijzen en vrije plekken op de cursuspagina's komen live uit de
   app, via woef.bebrave.dog/embed/cursussen.js met een data-slug per
   cursussoort. Er staat dus geen enkel bedrag of datum in de pagina's zelf.

   Anders dan de andere twee embeds kleurt deze zijn kaartkop met de kleur die
   de cursussoort in het app-beheer heeft (een verloop, inline gezet). Die laten
   we met rust — dat is app-data, net als de lijnkleur bij fun-lessen.js.

   Wat we wél rechttrekken is de typografie en de kaartvorm. De knop gebruikt
   `color: #fff !important` om het thema te verslaan, dus daar moeten wij ook
   !important gebruiken; de rest wint al op specificiteit via .wp-site-blocks. */
.wp-site-blocks .bebrave-widget { font-family: var(--bb-body-font); color: var(--bb-tekst); max-width: none; margin: 32px 0 0; padding: 0; }
.wp-site-blocks .bebrave-grid { gap: 28px; }
.wp-site-blocks .bebrave-card {
  background: var(--bb-wit); border: 1px solid var(--bb-rand);
  border-radius: var(--bb-radius); box-shadow: var(--bb-schaduw);
}
.wp-site-blocks .bebrave-card:hover { box-shadow: var(--bb-schaduw-op); }
.wp-site-blocks .bebrave-card-title { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.2rem; }
.wp-site-blocks .bebrave-card-subtitle { font-family: var(--bb-body-font); }
.wp-site-blocks :is(.bebrave-info-row, .bebrave-info-text, .bebrave-info-label) { font-family: var(--bb-body-font); color: var(--bb-tekst); }
.wp-site-blocks .bebrave-price { font-family: var(--bb-body-font); color: var(--bb-teal); }
.wp-site-blocks :is(.bebrave-loading, .bebrave-empty, .bebrave-error) { font-family: var(--bb-body-font); color: #777; }
.wp-site-blocks .bebrave-spinner { border-color: var(--bb-rand); border-top-color: var(--bb-teal); }

/* Zelfde knopvorm als bb-knoppen: één scherpe hoek rechtsboven. */
.wp-site-blocks .bebrave-btn {
  font-family: var(--bb-body-font); font-size: 17px; font-weight: 600;
  padding: 15px 30px; background: var(--bb-teal);
  border-radius: var(--bb-knop-radius) 0 var(--bb-knop-radius) var(--bb-knop-radius);
}
.wp-site-blocks .bebrave-btn:hover { background: var(--bb-teal); filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
  .wp-site-blocks .bebrave-card { transition: none; }
  .wp-site-blocks .bebrave-card:hover { transform: none; }
}

/* ---------- EVENTS-EMBED (bev-) ---------- */
/* De agenda op /evenementen/ en het blok op de homepage komen live uit de app,
   via woef.bebrave.dog/embed/events.js. Data, prijzen en vrije plekken staan
   dus nooit in de pagina zelf. Met `data-series` toont dezelfde widget één
   serie per dag gegroepeerd, wat de zomerschoolpagina gebruikt.

   Net als bij cursussen.js kleurt de embed zijn titelbalk en knop met de kleur
   die het event in het app-beheer heeft (inline gezet). Die laten we met rust:
   dat is app-data. Wat we rechttrekken is typografie en kaartvorm. */
.wp-site-blocks .bev-widget { font-family: var(--bb-body-font); color: var(--bb-tekst); max-width: none; margin: 32px 0 0; padding: 0; }
.wp-site-blocks .bev-card {
  background: var(--bb-wit); border: 1px solid var(--bb-rand);
  border-radius: var(--bb-radius); box-shadow: var(--bb-schaduw); overflow: hidden;
  transition: box-shadow 220ms var(--bb-ease);
}
.wp-site-blocks .bev-card:hover { box-shadow: var(--bb-schaduw-op); }
.wp-site-blocks .bev-card-title { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.2rem; letter-spacing: .005em; }
.wp-site-blocks .bev-card-date { font-family: var(--bb-body-font); font-weight: 600; }
.wp-site-blocks :is(.bev-info, .bev-info-row, .bev-desc) { font-family: var(--bb-body-font); color: var(--bb-tekst); }
.wp-site-blocks .bev-desc { line-height: 1.6; }
.wp-site-blocks .bev-price { font-family: var(--bb-body-font); color: var(--bb-teal); }
.wp-site-blocks .bev-media-img, .wp-site-blocks .bev-media-ph { border-radius: var(--bb-radius); }

/* Kop boven een dag of serie, op de zomerschoolpagina. */
.wp-site-blocks .bev-day-title { font-family: var(--bb-kop-font); font-weight: 400; font-size: 1.35rem; color: var(--bb-magenta); }
.wp-site-blocks .bev-series-title { font-family: var(--bb-kop-font); font-weight: 400; color: var(--bb-kop); }
.wp-site-blocks .bev-series-sub { font-family: var(--bb-body-font); color: #777; }

/* Vrije plekken: dezelfde signaalkleuren als elders op de site. */
.wp-site-blocks .bev-spots { font-family: var(--bb-body-font); font-weight: 600; }
.wp-site-blocks .bev-spots-ok { color: var(--bb-groen-donker); }
.wp-site-blocks .bev-spots-few { color: #b45309; }
.wp-site-blocks .bev-spots-full { color: var(--bb-magenta); }

/* Zelfde knopvorm als bb-knoppen: één scherpe hoek rechtsboven. De kleur laat
   de embed zelf staan, want die volgt het event. */
.wp-site-blocks .bev-btn {
  font-family: var(--bb-body-font); font-size: 17px; font-weight: 600;
  padding: 15px 26px; white-space: nowrap;
  border-radius: var(--bb-knop-radius) 0 var(--bb-knop-radius) var(--bb-knop-radius);
}
.wp-site-blocks .bev-btn:hover { filter: brightness(1.12); }
.wp-site-blocks :is(.bev-loading, .bev-empty, .bev-error) { font-family: var(--bb-body-font); color: #777; }
.wp-site-blocks .bev-spinner, .wp-site-blocks .bev-spin { border-color: var(--bb-rand); border-top-color: var(--bb-teal); }

/* Op een donkere band wordt de kaart mee donker, zoals overal. */
.bb-band .bev-card { background: var(--bb-antraciet-licht); border-color: #5c5c5c; box-shadow: none; }
.wp-site-blocks .bb-band :is(.bev-info, .bev-info-row, .bev-desc, .bev-card-title) { color: #fff; }
.wp-site-blocks .bb-band .bev-series-sub { color: #b9b9b9; }
.wp-site-blocks .bb-band .bev-spots-ok { color: var(--bb-groen); }

/* Op de homepage tonen we alleen de eerstvolgende drie. De embed kent geen
   limiet-attribuut (hij leest alleen `data-series` en `data-api-url`), dus dat
   gebeurt hier. Nadeel: de bezoeker haalt wél alle events op en verbergt er
   daarna een paar. Zodra `events.js` een `data-limit` krijgt, mag dit blok weg
   en gaat het attribuut op de container. */
.bb-events-kort .bev-widget > .bev-card:nth-child(n+4) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wp-site-blocks .bev-card { transition: none; }
}

/* ---------- FOOTER ---------- */
.bb-footer {
  background: var(--bb-antraciet); color: #d6d6d6;
  font-family: var(--bb-body-font); font-size: 15px; box-sizing: border-box;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.bb-footer * { box-sizing: border-box; }
.bb-footer__in { max-width: var(--bb-kolom-breed); margin-inline: auto; padding: 62px var(--bb-marge) 46px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr; gap: 40px; }
.bb-footer__merk .bb-bars { height: 40px; margin-bottom: 18px; }
.bb-footer__naam { font-family: var(--bb-kop-font); font-size: 25px; color: #fff; line-height: 1.15; margin: 0 0 10px; }
.bb-footer__naam span { font-size: 15px; color: #b9b9b9; }
.bb-footer__tag { margin: 0; color: #b9b9b9; line-height: 1.55; max-width: 26ch; }
.bb-footer__kol h4 { font-family: var(--bb-kop-font); font-weight: 400; font-size: 17px; color: #fff; margin: 0 0 14px; }
.bb-footer__kol a { display: block; color: #d6d6d6; text-decoration: none; padding: 5px 0; transition: color 150ms ease; }
.bb-footer__kol a:hover { color: var(--bb-logo-magenta); }
.bb-footer__contact p { margin: 0 0 12px; line-height: 1.5; color: #b9b9b9; }
.bb-footer__contact b { color: #fff; font-weight: 600; }
.bb-footer__contact a { display: inline; color: #f0abfc; }
.bb-footer__onder { border-top: 1px solid #575757; }
.bb-footer__onder .bb-footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-block: 20px; }
.bb-footer__onder p { margin: 0; color: #9a9a9a; font-size: 14px; }
.bb-footer__onder nav { display: flex; flex-wrap: wrap; gap: 22px; }
.bb-footer__onder nav a { color: #9a9a9a; text-decoration: none; font-size: 14px; transition: color 150ms ease; }
.bb-footer__onder nav a:hover { color: #fff; }
.bb-footer a:focus-visible { outline: 3px solid var(--bb-logo-magenta); outline-offset: 3px; border-radius: 3px; }

/* ---------- ANIMATIES ---------- */
@keyframes bbwag { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.78); } }
@keyframes bbW1 { 0% {opacity:0;transform:translateY(6px)} 6%,30% {opacity:1;transform:none} 37%,100% {opacity:0;transform:translateY(-6px)} }
@keyframes bbW2 { 0%,37% {opacity:0;transform:translateY(6px)} 44%,62% {opacity:1;transform:none} 69%,100% {opacity:0;transform:translateY(-6px)} }
@keyframes bbW3 { 0%,69% {opacity:0;transform:translateY(6px)} 78%,100% {opacity:1;transform:none} }
@keyframes bbPop { 0%,69% {opacity:0;transform:scale(.72)} 80%,100% {opacity:1;transform:none} }
@keyframes bbSlide { 0%,82% {opacity:0;transform:translateX(-14px)} 96%,100% {opacity:1;transform:none} }
@keyframes bbIn { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }

.bb-home .bb-swap i.bb-w1 { animation: bbW1 5.2s ease both; }
.bb-home .bb-swap i.bb-w2 { animation: bbW2 5.2s ease both; }
.bb-home .bb-swap i.bb-w3 { animation: bbW3 5.2s ease both; }
/* Alleen de balkjes van het merklogo doen de intro mee. Sinds de WOEF-knop
   dezelfde `bb-bars` voert, zou een kale `.bb-home .bb-bars` die knop ook laten
   inpoppen, en omdat bbPop pas op 69% zichtbaar wordt stond hij dan ruim drie
   seconden op opacity 0. */
.bb-home .bb-brand .bb-bars { animation: bbPop 5.2s ease both; transform-origin: left center; }
.bb-home .bb-kyno { animation: bbSlide 5.2s ease both; }
.bb-footer .bb-bars { animation: none; }

/* Verschijnen bij scrollen. Standaard zichtbaar — animatie alleen als de
   browser hem kan aansturen, dus nooit een onzichtbaar blok. */
.bb-reveal, .bb-reveal-kids > * { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .bb-reveal:not(.bb-in), .bb-reveal-kids:not(.bb-in) > * {
    animation: bbIn linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 40%;
  }
  /* kaarten naast elkaar komen niet tegelijk, maar na elkaar in beeld */
  .bb-reveal-kids:not(.bb-in) > *:nth-child(2) { animation-range: entry 14% cover 50%; }
  .bb-reveal-kids:not(.bb-in) > *:nth-child(3) { animation-range: entry 23% cover 60%; }
  .bb-reveal-kids:not(.bb-in) > *:nth-child(4) { animation-range: entry 32% cover 70%; }
  .bb-reveal-kids:not(.bb-in) > *:nth-child(5) { animation-range: entry 41% cover 80%; }
  .bb-reveal-kids:not(.bb-in) > *:nth-child(6) { animation-range: entry 50% cover 90%; }
}
.bb-reveal.bb-in, .bb-reveal-kids.bb-in > * {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--bb-ease), transform 900ms var(--bb-ease);
}
html.bb-js .bb-reveal:not(.bb-in), html.bb-js .bb-reveal-kids:not(.bb-in) > * {
  opacity: 0; transform: translateY(26px); animation: none;
  transition: opacity 900ms var(--bb-ease), transform 900ms var(--bb-ease);
}
.bb-reveal-kids.bb-in > *:nth-child(2) { transition-delay: 150ms; }
.bb-reveal-kids.bb-in > *:nth-child(3) { transition-delay: 300ms; }
.bb-reveal-kids.bb-in > *:nth-child(4) { transition-delay: 450ms; }
.bb-reveal-kids.bb-in > *:nth-child(5) { transition-delay: 600ms; }
.bb-reveal-kids.bb-in > *:nth-child(6) { transition-delay: 750ms; }

.bb-link-lijn { position: relative; text-decoration: none; }
.bb-link-lijn::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--bb-ease); }
.bb-link-lijn:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .bb-home .bb-swap i, .bb-home .bb-bars, .bb-home .bb-kyno { animation: none; }
  .bb-woefknop:hover { animation: none; border-color: var(--bb-hd-accent); }
  .bb-woefknop:hover .bb-bar { animation: none; }
  .bb-nav a:hover::after, .bb-nav a.bb-on::after { animation: none; transform: none; }
  .bb-stick .bb-mbtn svg { transition: none; }
  .bb-home .bb-swap i.bb-w1, .bb-home .bb-swap i.bb-w2 { opacity: 0; }
  .bb-home .bb-swap i.bb-w3, .bb-home .bb-bars, .bb-home .bb-kyno { opacity: 1; transform: none; }
  .bb-reveal, .bb-reveal-kids > *,
  html.bb-js .bb-reveal:not(.bb-in), html.bb-js .bb-reveal-kids:not(.bb-in) > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .bb-kaart, .bb-iconen i { transition: none; }
  .bb-cursuskaart, .bb-cursuskaart img { transition: none !important; }
  .bb-balken i { animation: none !important; transform: none !important; }
  .bb-band-golf-scroll::before, .bb-band-golf-scroll::after { animation: none !important; transform: none !important; }
  .bb-kaart-wipe::before, .bb-kaart-pijl, .bb-kaart-pijl .bb-pijl-lijn { transition: none !important; }
  .bb-infokaart { transition: none !important; }
  .bb-infokaarten .bb-infokaart:hover, .bb-infokaarten > *:nth-child(even):hover { transform: none !important; }
  .bb-carousel__spoor { scroll-behavior: auto; }
  .bb-carousel__knop, .bb-carousel__stip { transition: none !important; }
}

/* ---------- KLEUR OP DONKER ---------- */
.wp-site-blocks .bb-band :is(h1,h2,h3,h4,h5,h6),
.wp-site-blocks .bb-cta :is(h1,h2,h3,h4,h5,h6),
.wp-site-blocks .bb-kaart-kleur :is(h3,h4) { color: #fff; }
.wp-site-blocks .bb-band a:not(.wp-block-button__link) { color: #f0abfc; }
/* Links in een volvlaks gekleurde kaart: zonder deze regel blijven ze magenta
   en vallen ze weg tegen de magenta of paarse achtergrond. Geen streepje in
   rust — een lijst van onderstreepte links wordt te rommelig — maar wel bij
   hover, zodat je nog steeds ziet dat het links zijn. */
.wp-site-blocks .bb-kaart-kleur a:not(.wp-block-button__link) { color: #fff; text-decoration: none; }
.wp-site-blocks .bb-kaart-kleur a:not(.wp-block-button__link):hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wp-site-blocks .bb-band .bb-cursuskaart { color: #fff; }
.wp-site-blocks .bb-band code { background: #565656; border-color: #6a6a6a; color: #f0abfc; }
.wp-site-blocks .bb-band .bb-knoppen .wp-block-button__link { background: #fff; color: var(--bb-antraciet); border-color: #fff; }
.wp-site-blocks .bb-band .bb-knoppen .wp-block-button__link:hover { background: var(--bb-antraciet); color: #fff; }
.wp-site-blocks .bb-cta .bb-knoppen .wp-block-button__link { background: #fff; color: var(--bb-magenta); border-color: #fff; }
.wp-site-blocks .bb-cta .bb-knoppen .wp-block-button__link:hover { background: var(--bb-magenta); color: #fff; }
.wp-site-blocks .bb-cta .bb-knoppen .bb-knop-lijn .wp-block-button__link { background: transparent; color: #fff; border-color: #fff; }
.wp-site-blocks .bb-cta .bb-knoppen .bb-knop-lijn .wp-block-button__link:hover { background: #fff; color: var(--bb-magenta); }

/* ---------- MOBIEL ---------- */
@media (max-width: 1100px) {
  .bb-staal-rij { grid-template-columns: repeat(3, 1fr); }
  .bb-footer__in { grid-template-columns: 1fr 1fr 1fr; gap: 34px; }
  .bb-footer__merk { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .bb-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bb-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .bb-iconen { grid-template-columns: repeat(2, 1fr); }
  .wp-site-blocks .bb-cursusrij { grid-template-columns: repeat(2, 1fr); }
  .wp-site-blocks .bb-hero { grid-template-columns: 1fr; gap: 32px; }
  .bb-hero-omgekeerd > div:first-child { order: 0; }
  .wp-site-blocks .bb-duo, .bb-duo-breed-rechts, .bb-duo-breed-links { grid-template-columns: 1fr; gap: 32px; }
  .bb-duo-omgekeerd > div:first-child { order: 2; }
}
@media (max-width: 900px) {
  .bb-hd .bb-nav { display: none; }
  .bb-hd { padding-bottom: 34px; }
  .bb-hd .bb-golf { height: 18px; }
  /* De WOEF-knop verdwijnt hier uit de balk; hij staat bovenaan in het menu.
     Het drieluik wordt daarmee een tweeluik: logo links, ondertitel ernaast. */
  .bb-hd__top { grid-template-columns: auto 1fr; column-gap: 11px; }
  .bb-hd__l, .bb-hd__c { justify-content: flex-start; }
  .bb-hd__r { display: none; }
  .bb-kyno { min-width: 0; white-space: normal; font-size: clamp(15px,4.6vw,23px); line-height: 1.12; }
  .bb-menurow { display: flex; }
  .bb-stick__in { height: 58px; justify-content: center; }
  .bb-stick .bb-logolink, .bb-stick .bb-nav, .bb-stick .bb-woefknop { display: none; }
  .bb-stick .bb-mbtn { display: flex; }
}
@media (max-width: 640px) {
  :root { --bb-golf-hoogte: 32px; }
  .bb-inner { padding: 52px 20px; }
  .bb-staal-rij { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wp-site-blocks .bb-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .wp-site-blocks .bb-cursusrij { gap: 16px; }
  .bb-cursuskaart { padding: 26px 14px 22px; gap: 14px; }
  .bb-cursuskaart img { width: 72px; height: 56px; }
  .bb-cursuskaart b { font-size: 17px; }
  .bb-infokaarten { grid-template-columns: 1fr 1fr; gap: 14px; }
  .bb-infokaart { min-height: 140px; padding: 24px 16px; border-radius: 22px 0 22px 22px; }
  .bb-infokaart b { font-size: 22px; }
  .bb-iconen { gap: 30px; }
  .bb-iconen h3 { font-family: var(--bb-body-font); font-weight: 600; font-size: 1rem; }
  .bb-iconen i { font-size: 38px; }
  .wp-site-blocks .bb-knoppen .wp-block-button { width: 100%; }
  .wp-site-blocks .bb-knoppen .wp-block-button__link { display: block; text-align: center; padding: 15px 22px; }
  .bb-accent { padding: 24px; margin-top: 40px; }
  .bb-kaart-kleur { padding: 26px; }
  /* Op mobiel veeg je; pijlen leggen dan alleen maar beslag op de foto. */
  .bb-carousel__knop { display: none; }
  .bb-footer__in { grid-template-columns: 1fr 1fr; padding: 46px 20px 34px; gap: 28px; }
  .bb-footer__onder .bb-footer__in { flex-direction: column; align-items: flex-start; }
}