/* Buitenplaats Vlaardingen — designsysteem
 * ============================================================================
 *
 * Doel: wp-content/themes/Divi-child/bpv-design.css
 *
 * Dit bestand vervangt meeting-congres.css en wordt sitebreed ingeladen.
 * Het raakt alleen elementen met de klasse .bpv erop, dus de pagina's die nog
 * op het oude navy/goud-systeem draaien veranderen niet.
 *
 *
 * DE DRIE LAGEN
 *
 *   1. MERKKLEUREN   de kleuren zelf. Hier kies je, en nergens anders.
 *   2. PALETTEN      licht en donker, allebei opgebouwd uit de merkkleuren.
 *   3. ROLLEN        .light of .dark vult tien rollen in een keer in.
 *                    Alles daaronder gebruikt alleen rollen, nooit een hex.
 *
 *
 * EEN ANDER PALET KIEZEN
 *
 * Er staan vijf paletten in dit bestand: buitenplaats, bos, klei, blauw
 * en steen.
 * Wissel door in het blok KEUZE een andere naam in te vullen. Om ze op de site
 * zelf te vergelijken kun je ook data-bpv-palet="klei" op de <html> of op een
 * enkele sectie zetten; dat wint van de keuze hieronder.
 *
 *
 * EEN VLAK OMDRAAIEN
 *
 * Zet .dark of .light op een sectie, rij, kolom of losse module. Achtergrond
 * en tekst kantelen samen mee, dus het contrast blijft altijd staan. In Divi
 * doe je dat onder Geavanceerd, CSS-klasse.
 *
 *
 * REGELS BIJ HET BOUWEN
 *
 * - Zet nooit een kleur, afstand of lettertype in een Divi-module.
 * - Heeft een sectie .light of .dark, laat het achtergrondveld in de builder
 *   dan leeg. Anders schrijft Divi een eigen regel die hiervan wint.
 * - De klasse gaat in het veld Geavanceerd, CSS-klasse. Niet in de HTML.
 * - Gebruik native modules waar het kan: afbeelding, knop, accordion, blurb.
 *
 *
 * CONTRAST
 *
 * Alle vijf de paletten halen WCAG AA in beide standen: 4,5:1 voor gewone
 * tekst, 3:1 voor grote tekst en voor vlakken. Na een kleurwijziging opnieuw
 * controleren met python3 website/design/contrast-check.py
 *
 * Verhoog na elke wijziging de v= achter de link in de head, anders houdt de
 * browser de oude versie vast.
 * ==========================================================================*/


/* ============================================================================
 * 1. DE MERKKLEUREN
 *
 * Elke merkkleur heeft een variant voor lichte vlakken en een voor donkere.
 * Dezelfde tint die op wit werkt is op zwart onleesbaar, en andersom.
 *
 *   --primair            de knoppen op een licht vlak, en het logovlak
 *   --primair-op-donker  dezelfde rol, maar op een donker vlak
 *   --secundair          een donker vlak binnen een lichte pagina
 *   --tertiair           het accent: streepjes, labels, actieve staat
 *
 * De neutralen staan per palet apart, want een groen palet vraagt een andere
 * off-white dan een blauw.
 * ==========================================================================*/

/* --- BOS — donkergroen met warm zand -------------------------------------
 * Het dichtst bij "buiten". Groen draagt, zand accentueert. */
[data-bpv-palet="bos"] {
  --primair:                 #2f4034;
  --primair-hover:           #223026;
  --primair-op-donker:       #a9c0ae;
  --primair-op-donker-hover: #c2d4c6;
  --secundair:               #2f4034;
  --tertiair:                #c8a86b;
  --tertiair-op-licht:       #755d2e;
  --tertiair-knop:           #755d2e;

  --licht-achtergrond: #f7f5f0;
  --licht-zacht:       #f1eee7;
  --licht-inzet:       #e7e3d9;
  --donker-achtergrond: #1b211c;
  --donker-zacht:       #232a24;
  --donker-inzet:       #2d352e;
}

/* --- KLEI — warm aards, terracotta accent --------------------------------
 * Warmer en informeler dan bos. Past bij de herenboerderij. */
[data-bpv-palet="klei"] {
  --primair:                 #4a3a31;
  --primair-hover:           #362a23;
  --primair-op-donker:       #d5c0b2;
  --primair-op-donker-hover: #e6d6cb;
  --secundair:               #4a3a31;
  --tertiair:                #cd7f4e;
  --tertiair-op-licht:       #96491f;
  --tertiair-knop:           #96491f;

  --licht-achtergrond: #f8f5f1;
  --licht-zacht:       #f2ede7;
  --licht-inzet:       #e9e1d8;
  --donker-achtergrond: #211a16;
  --donker-zacht:       #2a221d;
  --donker-inzet:       #352b25;
}

/* --- BLAUW — het logoblauw, accent in mosgroen ---------------------------
 * De kleinste breuk met wat er nu staat. Goud is eruit. */
[data-bpv-palet="blauw"] {
  --primair:                 #212934;
  --primair-hover:           #161c26;
  /* De knop op een donker vlak is oranje, niet navy: navy op navy verdwijnt.
   * #e06a1f is net iets lichter dan het accent, want een knop moet ook zijn
   * eigen label dragen: donkere tekst haalt daarop 5,18:1, op het accent
   * #d55b12 maar 4,42:1 en dat zakt net door de drempel. De hover is het
   * oorspronkelijke #ED752D uit het palet. */
  --primair-op-donker:       #e06a1f;
  --primair-op-donker-hover: #ed752d;
  --secundair:               #212934;
  --tertiair:                #9fb06a;
  --tertiair-op-licht:       #5a6c33;
  --tertiair-knop:           #5a6c33;

  --licht-achtergrond: #f6f7f8;
  --licht-zacht:       #f0f2f4;
  --licht-inzet:       #e6e9ed;
  --donker-achtergrond: #181c23;
  --donker-zacht:       #1f242c;
  --donker-inzet:       #282f39;
}

/* --- BUITENPLAATS — het gekozen palet -------------------------------------
 * Aangeleverd op 14 september: #2F4034 groen, #212935 navy, #ED752D oranje,
 * #E7F9EC mint, #D7E6C6 salie. Op 15 september is het navy eruit gehaald: al
 * het donkere is nu groen.
 *
 * DE GROENSCHAAL IS DONKERDER DAN #2F4034, EN DAT MOET
 *
 * Een accent moet licht genoeg zijn voor het lichtste donkere vlak. Bij
 * #d55b12 ligt de grens op luminantie 0,0378. Het merkgroen #2f4034 zit op
 * 0,0452 en haalt daar 2,80:1, net onder de drempel van 3. De drie donkere
 * vlakken hebben daarom dezelfde tint (138 graden) en verzadiging, maar zijn
 * een slag donkerder. Op de lichtste daarvan haalt het accent 3,10:1.
 *
 * Het merkgroen zelf blijft in gebruik waar het geen accent hoeft te dragen:
 * als knopkleur op licht, als kopkleur, en als logovlak.
 *
 * EEN ACCENTKLEUR, EN WAAROM HIJ NIET #ED752D IS
 *
 * Een accent moet tegelijk donker genoeg zijn voor het donkerste lichte vlak.
 * Met de salie (#d7e6c6) mag het hoogstens luminantie 0,217 hebben; #ED752D
 * zit op 0,309 en haalt zelfs op puur wit maar 2,92:1. #d55b12 heeft dezelfde
 * tint en verzadiging, tien punten donkerder, en werkt overal.
 *
 * Rolverdeling:
 *   groen #2f4034   knoppen op licht, koppen, het logovlak
 *   groenschaal     de donkere vlakken en het hero-paneel
 *   oranje #d55b12  het accent, overal dezelfde kleur
 *   oranje #e06a1f  de knop op een donker vlak; navy verdween, groen op groen
 *                   zou net zo goed wegvallen
 *   offwhite        de lichte sectie
 *   salie #d7e6c6   ingelegde vlakken op licht
 */
[data-bpv-palet="buitenplaats"] {
  --primair:                 #2f4034;
  --primair-hover:           #243128;
  --primair-op-donker:       #e06a1f;
  --primair-op-donker-hover: #ed752d;
  --secundair:               #1f2b23;
  --tertiair:                #d55b12;
  --tertiair-op-licht:       #d55b12;
  --tertiair-knop:           #bd4e0d;

  /* Het merkgroen voor het logovlak. Gelijk aan --primair, maar apart benoemd
   * zodat de andere paletten hun eigen logokleur houden. */
  --merkgroen:               #2f4034;

  /* Tekst op licht in dezelfde groenfamilie. De lopende tekst is bewust een
   * stap lichter dan de kop, anders verdwijnt de hiërarchie. */
  --palet-kop:   #2f4034;
  --palet-tekst: #334539;
  --palet-label: #4a6451;

  --licht-achtergrond: #f8fbf8;
  --licht-zacht:       #eef4ef;
  --licht-inzet:       #d7e6c6;
  --donker-achtergrond: #1f2b23;
  --donker-zacht:       #243128;
  --donker-inzet:       #29392e;
}

/* --- STEEN — neutraal, kleur spaarzaam -----------------------------------
 * Het rustigst. Bijna alles is warm grijs; het accent komt zelden voor. */
[data-bpv-palet="steen"] {
  --primair:                 #2f2e2b;
  --primair-hover:           #1f1e1c;
  --primair-op-donker:       #c8c5be;
  --primair-op-donker-hover: #dcd9d3;
  --secundair:               #2f2e2b;
  --tertiair:                #7fa89b;
  --tertiair-op-licht:       #3f6055;
  --tertiair-knop:           #3f6055;

  --licht-achtergrond: #f6f5f2;
  --licht-zacht:       #efeeea;
  --licht-inzet:       #e5e3de;
  --donker-achtergrond: #1c1c1a;
  --donker-zacht:       #242422;
  --donker-inzet:       #2e2e2b;
}


/* ============================================================================
 * KEUZE
 * Welk palet er op de site staat. Vul hier een van de vijf namen in.
 * De regel hieronder kopieert het gekozen palet naar :root.
 * ==========================================================================*/

:root {
  /* ▼ HIER KIES JE: buitenplaats, bos, klei, blauw of steen — nu: BUITENPLAATS */
  --primair:                 #2f4034;
  --primair-hover:           #243128;
  --primair-op-donker:       #e06a1f;
  --primair-op-donker-hover: #ed752d;
  --secundair:               #1f2b23;
  --tertiair:                #d55b12;
  --tertiair-op-licht:       #d55b12;
  --tertiair-knop:           #bd4e0d;

  /* Het merkgroen voor het logovlak. Gelijk aan --primair, maar apart benoemd
   * zodat de andere paletten hun eigen logokleur houden. */
  --merkgroen:               #2f4034;

  /* Tekst op licht in dezelfde groenfamilie. De lopende tekst is bewust een
   * stap lichter dan de kop, anders verdwijnt de hiërarchie. */
  --palet-kop:   #2f4034;
  --palet-tekst: #334539;
  --palet-label: #4a6451;

  --licht-achtergrond: #f8fbf8;
  --licht-zacht:       #eef4ef;
  --licht-inzet:       #d7e6c6;
  --donker-achtergrond: #1f2b23;
  --donker-zacht:       #243128;
  --donker-inzet:       #29392e;
}


/* ============================================================================
 * 2. DE TWEE PALETTEN
 * De tekstkleuren staan hier; ze zijn neutraal genoeg om voor alle vijf de
 * paletten te werken. De vlakken verwijzen naar het gekozen palet hierboven.
 * ==========================================================================*/

:root {

  /* --- LICHT: donkere tekst op een licht vlak --------------------------- */
  /* Per palet te overschrijven met --palet-kop en --palet-tekst. De waarden
   * hierachter zijn de neutrale terugval voor de paletten die dat niet doen. */
  --licht-kop:        var(--palet-kop,   #1a1a1a);  /* koppen en tekstlinks  */
  --licht-tekst:      var(--palet-tekst, #3a3a3a);  /* lopende tekst         */
  --licht-label:      var(--palet-label, #5e5d57);  /* kruimelpad, labels.
                                   De terugval was #66655f; dat zakte naar
                                   4,46:1 op het saliegroen.                */
  --licht-lijn:       rgba(0,0,0,.10);
  --licht-knop:       var(--primair);
  --licht-knop-tekst: #ffffff;
  --licht-knop-hover: var(--primair-hover);
  --licht-accent:     var(--tertiair-op-licht);

  /* --- DONKER: lichte tekst op een donker vlak -------------------------- */
  /* Elke rol is de tegenhanger van dezelfde rol hierboven. */
  --donker-kop:        #ffffff;
  --donker-tekst:      #d8d8d8;
  --donker-label:      #adadad;
  --donker-lijn:       rgba(255,255,255,.14);
  --donker-knop:       var(--primair-op-donker);
  --donker-knop-tekst: #1a1a1a;
  --donker-knop-hover: var(--primair-op-donker-hover);
  --donker-accent:     var(--tertiair);
}


/* ============================================================================
 * DE VORM EN DE MAAT
 * Geen kleur, maar wel de knoppen waar je aan draait als iets te druk of te
 * krap staat.
 * ==========================================================================*/

:root {
  /* lettertype — op deze twee regels staat de letter van de hele site */
  --bpv-font-kop:   "Bricolage Grotesque", Helvetica, Arial, sans-serif;
  --bpv-font-tekst: "Bricolage Grotesque", Helvetica, Arial, sans-serif;

  /* typografie */
  --bpv-h1:     clamp(30px, 3.4vw, 42px);
  --bpv-h2:     clamp(25px, 2.4vw, 32px);
  --bpv-h3:     22px;
  --bpv-h4:     18px;
  --bpv-tekst:  16px;
  --bpv-klein:  13px;
  --bpv-label:  12px;
  --bpv-regel:  1.7;       /* regelafstand lopende tekst */

  /* ruimte — gebruik deze zes, verzin er geen zevende bij */
  --bpv-xs:   8px;
  --bpv-s:   16px;
  --bpv-m:   24px;
  --bpv-l:   40px;
  --bpv-xl:  64px;
  --bpv-xxl: 96px;

  /* breedtes */
  /* Vier rijbreedtes. De standaard is --bpv-breed; de andere drie zet je met
   * een klasse op de rij. Zie hoofdstuk 5. */
  --bpv-normaal:     1180px;  /* smaller dan de standaard, voor lange teksten */
  --bpv-breed:       1300px;  /* de standaard */
  --bpv-full:        1800px;  /* breed, met 96% marge */
  --bpv-full-width:  1920px;  /* schermvullend, zonder marge */

  --bpv-lees:   780px;     /* leesbreedte van lopende tekst binnen een rij */

  /* sectiepadding — boven en onder, overal gelijk */
  --bpv-sectie-boven: 80px;
  --bpv-sectie-onder: 64px;

  /* vorm */
  --bpv-rond-foto: 8px;
  --bpv-rond-vlak: 6px;
  --bpv-rond-knop: 3px;

  /* vaste hoogtes */
  --bpv-hero-hoogte:  65vh;
  --bpv-foto-hoogte:  230px;
}


/* ============================================================================
 * 3. DE SCHAKELAAR
 * .light en .dark vullen dezelfde tien rollen. Ze werken op een sectie, maar
 * ook op een rij, kolom of losse module: de rollen erven door naar alles
 * eronder, dus de binnenste wint.
 * ==========================================================================*/

.bpv:is(.light,.wit),
.bpv .light {
  --achtergrond: var(--licht-achtergrond);
  --zacht:       var(--licht-zacht);
  --inzet:       var(--licht-inzet);
  --kop:         var(--licht-kop);
  --tekst:       var(--licht-tekst);
  --label:       var(--licht-label);
  --lijn:        var(--licht-lijn);
  --knop:        var(--licht-knop);
  --knop-tekst:  var(--licht-knop-tekst);
  --knop-hover:  var(--licht-knop-hover);
  --accent:      var(--licht-accent);
}

/* De teksthelft van de hero staat op een donker vlak in de secundaire kleur
 * en hoort dus bij het donkere palet, ook als de sectie zelf licht is. */
.bpv.dark,
.bpv .dark,
.bpv-hero .et_pb_column.et-last-child {
  --achtergrond: var(--donker-achtergrond);
  --zacht:       var(--donker-zacht);
  --inzet:       var(--donker-inzet);
  --kop:         var(--donker-kop);
  --tekst:       var(--donker-tekst);
  --label:       var(--donker-label);
  --lijn:        var(--donker-lijn);
  --knop:        var(--donker-knop);
  --knop-tekst:  var(--donker-knop-tekst);
  --knop-hover:  var(--donker-knop-hover);
  --accent:      var(--donker-accent);
}

/* De sectieachtergrond komt uit de rol en niet uit Divi. Divi zet er ook een
 * in de blok-JSON zodat de editor klopt, en giet dat in een regel van vier
 * klassen diep met !important:
 *
 *   .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_7
 *
 * Een enkele .bpv verliest daarvan. Onderstaande selectors tellen er vijf en
 * winnen wel. Wint Divi hier ooit toch weer, tel dan hoeveel klassen er in
 * hun selector staan en zet er een meer tegenover. */
.et-l--post > .et_builder_inner_content .et_pb_section.bpv:is(.light,.wit),
.et-l--post > .et_builder_inner_content .et_pb_section.bpv.dark {
  background-color: var(--achtergrond) !important;
}

/* Tekst over beeld. Een hero met een achtergrondfoto of -video is donker, maar
 * mag geen achtergrondkleur krijgen: die zou over het beeld heen liggen.
 * .op-beeld vult dus wel de tien rollen, maar schildert niets.
 *
 * Gebruik: `bpv op-beeld` op de sectie. Niet samen met light of dark. */
.bpv.op-beeld,
.bpv .op-beeld {
  --achtergrond: transparent;
  --zacht:       var(--donker-zacht);
  --inzet:       var(--donker-inzet);
  --kop:         var(--donker-kop);
  --tekst:       var(--donker-tekst);
  --label:       var(--donker-label);
  --lijn:        var(--donker-lijn);
  --knop:        var(--donker-knop);
  --knop-tekst:  var(--donker-knop-tekst);
  --knop-hover:  var(--donker-knop-hover);
  --accent:      var(--donker-accent);
  background-color: transparent !important;
}

/* WIT — dezelfde rollen als light, maar het sectievlak is puur wit.
 *
 * Gebruik `bpv wit` op de sectie. Alles wat voor light geldt, geldt ook hier:
 * de brug- en componentregels herkennen beide via :is(.light,.wit).
 *
 * Het zachte vlak wordt hier de offwhite uit het palet in plaats van #eef4ef.
 * Dat laatste is op puur wit nauwelijks te onderscheiden (1,12:1), waardoor een
 * USP-strip of een tussen-CTA zou wegvallen. Het ingelegde vlak blijft de salie.
 *
 * Let op de huisregel: secties zijn normaal offwhite of donker. Wit is de
 * uitzondering, voor waar je echt een schone pagina wilt. */
.bpv.wit,
.bpv .wit {
  --achtergrond: #ffffff;
  --zacht:       var(--licht-achtergrond);
  --inzet:       var(--licht-inzet);
  --kop:         var(--licht-kop);
  --tekst:       var(--licht-tekst);
  --label:       var(--licht-label);
  --lijn:        var(--licht-lijn);
  --knop:        var(--licht-knop);
  --knop-tekst:  var(--licht-knop-tekst);
  --knop-hover:  var(--licht-knop-hover);
  --accent:      var(--licht-accent);
}


/* Een rij, kolom of module met .light of .dark krijgt ook zijn eigen vlak,
 * want lichte tekst op een licht vlak is precies wat dit moet voorkomen.
 * Wil je alleen de tekst omdraaien, zet er dan .geen-vlak bij. */
.bpv .light,
.bpv .wit,
.bpv .dark { background-color: var(--achtergrond); }

.bpv .geen-vlak { background-color: transparent !important; }

/* Losse klassen om in Divi op een module te zetten, onder Geavanceerd,
 * CSS-klasse. Ze kantelen mee met de light of dark eromheen, dus je hoeft
 * nooit zelf een variant te kiezen. */
.bpv .primair        { color: var(--knop) !important; }
.bpv .accent         { color: var(--accent) !important; }
.bpv .primair-vlak   { background-color: var(--knop) !important; }
.bpv .secundair-vlak { background-color: var(--secundair) !important; }
.bpv .accent-vlak    { background-color: var(--accent) !important; }
.bpv .zacht-vlak     { background-color: var(--zacht) !important; }
.bpv .inzet-vlak     { background-color: var(--inzet) !important; }


/* ============================================================================
 * 4. BASIS
 * ==========================================================================*/
/* Divi laat het logo meebewegen als de header op et-fixed-header gaat. Deze regels voorkomen dat */
  #main-header .centered-inline-logo-wrap,
  #main-header.et-fixed-header .centered-inline-logo-wrap {
    margin-top: -33px !important;
    margin-bottom: -33px !important;
    transition: none !important;
  }
  #main-header .centered-inline-logo-wrap a,
  .logo_container,
  #logo {
    transition: none !important;
  }
 .logo_container {
    /* Terugval: --merkgroen bestaat alleen in het palet buitenplaats. Zonder
     * deze fallback verliest het logovlak zijn kleur zodra je van palet wisselt. */
    background-color: var(--merkgroen, var(--primair));
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 150 !important;
  }
/* De selector moet .et_pb_module bevatten: Divi zet zijn eigen letter met
 * .et_pb_text_0 h1 en dat weegt even zwaar als .bpv h1, waarna Divi wint op
 * volgorde. Met twee klassen wint deze regel wel. */
.bpv:not(.behoud-type) .et_pb_module,
.bpv:not(.behoud-type) .et_pb_module * {
  font-family: var(--bpv-font-tekst) !important;
}

.bpv h1, .bpv h2, .bpv h3, .bpv h4,
.bpv .et_pb_module h1, .bpv .et_pb_module h2,
.bpv .et_pb_module h3, .bpv .et_pb_module h4 {
  font-family: var(--bpv-font-kop) !important;
}

.bpv { color: var(--kop); }

.bpv h1, .bpv h2, .bpv h3, .bpv h4 { color: var(--kop) !important; }

.bpv:not(.behoud-type) h1, .bpv:not(.behoud-type) h2,
.bpv:not(.behoud-type) h3, .bpv:not(.behoud-type) h4 {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin: 0;
}

/* De typografieschaal geldt alleen in secties die ook echt in dit systeem
 * gebouwd zijn. Zet je `bpv light` op een bestaande sectie om hem alleen om te
 * kleuren, geef hem dan ook `behoud-type`: dan blijven de maten uit style.css
 * staan en verandert er niets aan de opbouw.
 *
 * Zonder die uitzondering ging het mis op de hero van de homepage: daar is het
 * kleine label de h1 (dat draagt de zoekterm) en de grote kop een <p>. De
 * schaal hieronder maakte het label 42px en de kop 16px, precies omgekeerd.
 * Gemeten: label 11 -> 42, kop 96 -> 16, sectiekoppen 48 -> 32. */
.bpv:not(.behoud-type) h1 { font-size: var(--bpv-h1) !important; line-height: 1.15 !important; }
.bpv:not(.behoud-type) h2 { font-size: var(--bpv-h2) !important; line-height: 1.25 !important; }
.bpv:not(.behoud-type) h3 { font-size: var(--bpv-h3) !important; line-height: 1.3  !important; }
.bpv:not(.behoud-type) h4 { font-size: var(--bpv-h4) !important; line-height: 1.35 !important; }

.bpv:not(.behoud-type) p,
.bpv:not(.behoud-type) li {
  font-size: var(--bpv-tekst) !important;
  line-height: var(--bpv-regel) !important;
}

/* De kleur geldt altijd; die is het hele punt van de rollen. */
.bpv p,
.bpv li {
  color: var(--tekst) !important;
  max-width: none !important;
}

.bpv p { margin: 0 0 var(--bpv-s); }
.bpv p:last-child { margin-bottom: 0; }

/* Lopende tekst krijgt een leesbreedte, kaartroosters en tabellen niet.
 * Zet .bpv-tekst op de tekstmodule, niet op de kolom. */
.bpv .bpv-tekst,
.bpv .et_pb_module.bpv-tekst { max-width: var(--bpv-lees); }

.bpv .bpv-tekst h2,
.bpv .bpv-tekst h3 { margin: var(--bpv-l) 0 var(--bpv-s); }
.bpv .bpv-tekst > :first-child { margin-top: 0; }

/* Links in lopende tekst. De onderstreping staat er standaard op: een link
 * die alleen aan kleur te herkennen is valt af voor kleurenblinde bezoekers. */
.bpv p a,
.bpv li a {
  color: var(--kop) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.bpv p a:hover,
.bpv li a:hover { color: var(--accent) !important; }

/* Zichtbare focus voor wie met het toetsenbord werkt. Niet weghalen. */
.bpv a:focus-visible,
.bpv button:focus-visible,
.bpv .et_pb_button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Opsommingen */
.bpv ul, .bpv ol { margin: 0 0 var(--bpv-s); padding-left: 1.15em; }
.bpv li { margin-bottom: var(--bpv-xs); }
.bpv li::marker { color: var(--accent); }

/* Opsomming zonder bolletjes, met een streepje ervoor */
.bpv .bpv-lijst { list-style: none; padding-left: 0; }
.bpv .bpv-lijst li {
  position: relative;
  padding-left: 22px;
}
.bpv .bpv-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 12px;
  height: 2px;
  background: var(--accent);
}

/* Het streepje onder een titel. Via --accent pakt hij op een donker vlak de
 * lichte variant en op een licht vlak de donkere. */
.bpv .streep {
  width: 64px;
  height: 3px;
  background: var(--accent);
  margin: 0 0 var(--bpv-m);
}

/* Klein label boven een kop. Geen streepje ervoor: dat gaf op de oude site
 * twee verschillende eyebrow-varianten die niemand uit elkaar hield. */
.bpv .bpv-label {
  font-size: var(--bpv-label) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label) !important;
  margin: 0 0 var(--bpv-xs) !important;
}

/* Quote */
.bpv .bpv-quote {
  border-left: 3px solid var(--accent);
  padding-left: var(--bpv-m);
  margin: var(--bpv-l) 0;
}
.bpv .bpv-quote p {
  font-size: 19px !important;
  line-height: 1.5 !important;
  color: var(--kop) !important;
}


/* ============================================================================
 * 5. SECTIES EN RIJEN
 * Een sectie: padding boven en onder gelijk, altijd dezelfde rijbreedte.
 * Hero en beeldbreker zijn de enige uitzonderingen.
 * ==========================================================================*/

.et_pb_section.bpv {
  padding-top: var(--bpv-sectie-boven) !important;
  padding-bottom: var(--bpv-sectie-onder) !important;
}

/* De standaardrij. Op 1440px komt 90% uit op 1296px en loopt hij dus tegen de
 * 1300 aan; op bredere schermen blijft hij daar staan. */
.bpv .et_pb_row {
  width: 90% !important;
  max-width: var(--bpv-breed) !important;
}

/* Drie afwijkingen, als klasse op de rij. `bpv-normaal` is smaller dan de
 * standaard: handig voor een rij met alleen lopende tekst. */
.bpv .et_pb_row.bpv-normaal { max-width: var(--bpv-normaal) !important; }

.bpv .et_pb_row.bpv-full {
  width: 96% !important;
  max-width: var(--bpv-full) !important;
}

.bpv .et_pb_row.bpv-full-width {
  width: 100% !important;
  max-width: var(--bpv-full-width) !important;
}

/* Geen padding, voor secties die tot de rand lopen */
.et_pb_section.bpv.bpv-vol {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* De sectie die vroeger het stylesheet inlaadde is niet meer nodig: de link
 * staat nu in de head. Deze regel blijft staan tot alle pagina's om zijn. */
/* display:none, niet height:0. Met height:0 bleef de padding van 80/64 staan
 * en was de onzichtbare sectie alsnog 144px hoog; die padding komt uit een
 * Divi-selector van drie klassen diep, die van elke kortere regel wint.
 * De stylesheet in de verborgen sectie laadt gewoon door, gemeten op dev. */
.et_pb_section.bpv-css,
.et_pb_section.mc-css {
  display: none !important;
}

/* ============================================================================
 * 6. KNOPPEN
 * Drie soorten, meer niet. Alle drie kantelen mee met light en dark.
 *
 *   .bpv-knop       primair, gevuld. Een per scherm.
 *   .bpv-link       secundair, onderstreepte tekst. Zoveel als nodig.
 *   .bpv-rand       tertiair, alleen een rand. Voor naast een primaire knop.
 *
 * Geen iconen in knoppen, ook niet bij hover.
 * ==========================================================================*/

.bpv .et_pb_button_module_wrapper {
  display: inline-block !important;
  margin: 0 var(--bpv-xs) 0 0 !important;
  vertical-align: middle;
}

/* Divi zet de opgegeven CSS-klasse op het knopelement zelf en niet op een
 * ouder. Beide vormen staan er, zodat het blijft werken als Divi de opbouw
 * ooit verandert. */
.bpv .bpv-knop,
.bpv .bpv-knop .et_pb_button,
.bpv a.bpv-knop {
  background: var(--knop) !important;
  border: 0 !important;
  color: var(--knop-tekst) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 10px 20px !important;
  border-radius: var(--bpv-rond-knop) !important;
  text-decoration: none !important;
  display: inline-block;
  transition: background .15s ease;
}

.bpv .bpv-knop:hover,
.bpv .bpv-knop .et_pb_button:hover,
.bpv a.bpv-knop:hover { background: var(--knop-hover) !important; }

/* Normaal vol oranje, bij hover terug naar de rand: zo valt de knop meteen op
 * in plaats van pas bij een toevallige hover. --tertiair-knop is het accent
 * een stap donkerder: het accent zelf draagt op 15px geen witte tekst
 * (3,94:1), de donkere variant wel (4,93:1). Dat is een vaste merkkleur die
 * niet meekantelt, dus hij komt rechtstreeks uit het paletblok en niet uit de
 * rollen. */
.bpv .bpv-rand,
.bpv .bpv-rand .et_pb_button,
.bpv a.bpv-rand {
  background: var(--tertiair-knop) !important;
  border: 1px solid var(--tertiair-knop) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 9px 19px !important;
  border-radius: var(--bpv-rond-knop) !important;
  text-decoration: none !important;
  display: inline-block;
  transition: background .15s ease, color .15s ease;
}

.bpv .bpv-rand:hover,
.bpv .bpv-rand .et_pb_button:hover,
.bpv a.bpv-rand:hover {
  background: none !important;
  border-color: var(--accent) !important;
  color: var(--kop) !important;
}

/* In een kaart mag de doorkliklink wat groter: hij is daar de enige actie en
 * stond op dezelfde 15px als een gewone tekstlink midden in een alinea. */
.bpv .bpv-kaarten .bpv-link,
.bpv .bpv-kaarten .bpv-link .et_pb_button { font-size: 17px !important; }

.bpv .bpv-link,
.bpv .bpv-link .et_pb_button,
.bpv a.bpv-link {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  /* Divi's knopmodule zet standaard hoofdletters; alle drie de knoppen zijn
   * hier gebouwd op gewone tekst, ook als de klasse op een echte
   * knopmodule staat in plaats van op een losse <a>. Viel pas op bij een
   * langere linktekst ("Meer over deze vergaderlocatie"): bij een kort
   * label als "Boeken" was het verschil met hoofdletters niet zo te zien. */
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  display: inline-block;
}

/* Normaal oranje, bij hover donker: zo vallen ze op tussen de gewone tekst
 * (die immers ook al --kop is). --accent zelf is hier te licht/te donker om
 * als blijvend leesbare linktekst de 4,5:1-tekstdrempel te halen (haalt op
 * licht 3,78:1, op donker 3,74:1 -- prima voor een streepje, niet voor tekst
 * die de hele tijd op het scherm staat). Vandaar de knopkleuren, die daar wel
 * voor gebouwd zijn: --tertiair-knop op licht (4,73:1), de donkere hoverknop
 * op donker (5,03:1). Geen nieuwe kleur, alleen het juiste bestaande token. */
.bpv:is(.light,.wit) .bpv-link,
.bpv:is(.light,.wit) .bpv-link .et_pb_button,
.bpv:is(.light,.wit) a.bpv-link { color: var(--tertiair-knop) !important; }

.bpv.dark .bpv-link,
.bpv.dark .bpv-link .et_pb_button,
.bpv.dark a.bpv-link { color: var(--primair-op-donker-hover) !important; }

.bpv .bpv-link:hover,
.bpv .bpv-link .et_pb_button:hover,
.bpv a.bpv-link:hover { color: var(--kop) !important; }

/* Divi animeert bij hover de padding, om ruimte te maken voor een pijltje dat
 * hieronder al verborgen is. Dat gebeurt met
 *
 *   body #page-container .et_pb_section .et_pb_button_1:hover { padding: 1em }
 *
 * en dat zit een id diep, dus een gewone klassenregel verliest het. Zonder
 * deze regels kromp of groeide elke knop zodra je erover ging. */
body #page-container .et_pb_section.bpv .bpv-knop,
body #page-container .et_pb_section.bpv .bpv-knop:hover { padding: 10px 20px !important; }

body #page-container .et_pb_section.bpv .bpv-rand,
body #page-container .et_pb_section.bpv .bpv-rand:hover { padding: 9px 19px !important; }

body #page-container .et_pb_section.bpv .bpv-link,
body #page-container .et_pb_section.bpv .bpv-link:hover { padding: 0 !important; }

/* Het pijltje van Divi uit. Geen iconen in knoppen. */
.bpv .et_pb_button:after,
.bpv .et_pb_button:before { display: none !important; }


/* ============================================================================
 * 7. HERO — standaard
 * Twee helften over de volle breedte: foto links, tekst rechts op een vlak in
 * de secundaire kleur. Dit is de hero voor elke gewone pagina.
 *
 * Opbouw in Divi: sectie .bpv .light .bpv-hero, rij met twee kolommen 1/2.
 * Links een afbeeldingsmodule met .bpv-herofoto, rechts een tekstmodule met
 * daarin een div.bpv-herotekst.
 * ==========================================================================*/

.et_pb_section.bpv-hero {
  background-color: var(--zacht) !important;
  padding: 0 !important;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  overflow: hidden;
}

/* De gap moet expliciet op nul. Divi 5 zet op een flexrij een gap van 14px;
 * samen met twee kolommen van 50% is dat 14px te breed, waardoor de tweede
 * kolom onder de eerste sprong en de hero twee keer zo hoog werd. */
.bpv-hero .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 !important;
}

.bpv-hero .et_pb_column {
  width: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* De teksthelft. De kleur komt uit de merkkleuren; de tekstrollen erop staan
 * bij DE SCHAKELAAR hierboven. */
.bpv-hero .et_pb_column.et-last-child {
  padding: 0 !important;
  background-color: var(--secundair);
}

/* Een staande foto (bv. 1279x1920) hoort hier niet hoger uit te komen dan
 * een liggende: de foto moet altijd het vlak vullen, nooit andersom. Dat
 * lukt niet betrouwbaar met alleen height:100% op de keten wrap > img --
 * de HTML width/height-attributen die Divi op <img> zet geven de browser
 * een eigen aspect-ratio mee, en die won het zichtbaar van de percentage-
 * hoogte zodra de foto staand was (gemeten op de Glazen Hooiberg-hero: veel
 * hoger dan de vergaderlocatie-hero, met exact dezelfde CSS-klassen, enige
 * verschil was een staande i.p.v. liggende bronfoto).
 *
 * Vandaar hier position:absolute met inset:0 in plaats van een procentuele
 * hoogte: dat kijkt niet naar de eigen aspect-ratio van de foto, alleen naar
 * de afmeting van dit vlak. */
.bpv-hero .bpv-herofoto {
  margin: 0 !important;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bpv-hero .bpv-herofoto .et_pb_image_wrap {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.bpv-hero .bpv-herofoto img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: var(--bpv-hero-hoogte);
  object-fit: cover;
}

.bpv-hero .bpv-herotekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--bpv-hero-hoogte);
  padding: 72px 8% 72px 6%;
}

.bpv-hero .bpv-herotekst p { max-width: 46em; }

/* De volgorde in de hero ligt vast: label, kop, intro, streep, aanvulling.
 * Op de drie parent-pagina's stond de streep de ene keer boven en de andere
 * keer onder de intro. */
.bpv-hero .bpv-herotekst h1 { margin: 0 0 var(--bpv-s) !important; }


/* ============================================================================
 * 8. HERO — schermvullend
 * Blijft alleen op de homepage, /bedrijfsuitjes/ en /workshops-activiteiten/.
 * Foto over de volle breedte met een verloop eroverheen, tekst erin.
 * ==========================================================================*/

.et_pb_section.bpv-hero-vol {
  padding: 0 !important;
  position: relative;
  min-height: 72vh;
  display: flex !important;
  align-items: flex-end;
  background-size: cover !important;
  background-position: center !important;
}

.bpv-hero-vol::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--donker-achtergrond) 86%, transparent) 0%,
    color-mix(in srgb, var(--donker-achtergrond) 52%, transparent) 45%,
    color-mix(in srgb, var(--donker-achtergrond) 18%, transparent) 100%);
}

.bpv-hero-vol .et_pb_row {
  position: relative;
  z-index: 2;
  padding-bottom: var(--bpv-xl) !important;
}

.bpv-hero-vol .bpv-herotekst { max-width: 720px; }


/* --- 8b. Achtergrondfoto als afbeeldingsmodule --------------------------
 * Divi's eigen sectie-achtergrond (module.decoration.background.image in het
 * blok-JSON) bleek onbetrouwbaar: op de binnen-/buitenlocaties-hero's kwam er
 * geen enkele CSS-regel voor uit, met of zonder size/position/repeat erbij,
 * ook niet na een handmatige wijziging via de Divi-builder zelf -- het veld
 * stond wel goed in de builder, maar leverde niets op de live pagina op.
 *
 * Zelfde oplossing als bij .bpv-hero .bpv-herofoto: een gewone afbeeldings-
 * module, hier absoluut gepositioneerd zodat hij de hele sectie vult. Die
 * route is elders in dit project overal betrouwbaar gebleken.
 *
 * Gebruik: sectie krijgt naast `bpv op-beeld` ook `bpv-hero-vlak`. Eerste rij
 * in de sectie is de fotorij met één afbeeldingsmodule met class
 * `bpv-hero-achtergrond`. De rij met de tekst erna krijgt `bpv-hero-inhoud`,
 * zodat die (en de gradient-overlay via css.before, die op z-index 1 zit)
 * boven de foto blijft staan. */
.bpv-hero-vlak { position: relative; overflow: hidden; }

.bpv .bpv-hero-achtergrond {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.bpv .bpv-hero-achtergrond .et_pb_image_wrap {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.bpv .bpv-hero-achtergrond img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.bpv .bpv-hero-inhoud {
  position: relative;
  z-index: 2;
}


/* ============================================================================
 * 9. KRUIMELPAD EN SECTIEKOP
 * ==========================================================================*/

.bpv-kruimel,
.bpv-kruimel * {
  font-size: var(--bpv-label) !important;
  color: var(--label) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.bpv-kruimel a { color: var(--label) !important; text-decoration: none; }
.bpv-kruimel a:hover { text-decoration: underline; }

/* De kop van een sectie: label, kop, optioneel een intro eronder.
 * Staat er een kaartrooster of accordion onder, dan blijft de kop links staan
 * zodat zijn linkerrand gelijk loopt met die van de kaarten. */
.bpv .bpv-kop,
.bpv .et_pb_module.bpv-kop {
  max-width: var(--bpv-lees);
  margin-bottom: var(--bpv-l);
}

.bpv .bpv-kop h2 { margin: 0 0 var(--bpv-s) !important; }
.bpv .bpv-kop p:last-child { margin-bottom: 0; }


/* ============================================================================
 * 10. KAARTEN
 * De standaardkaart voor diensten, producten en ruimtes.
 *
 * Een kaart is een Divi-kolom met .bpv-kaart, met daarin op volgorde:
 *   1. afbeeldingsmodule  .bpv-kaart-foto
 *   2. tekstmodule        h3 + p.bpv-kaart-tekst
 *   3. tekstmodule        div.bpv-specs   (optioneel)
 *   4. knopmodule         .bpv-link       (optioneel)
 *   5. knopmodule         .bpv-knop       (optioneel)
 *
 * De kolom is flex, zodat de knoppen van kaarten naast elkaar op dezelfde
 * lijn uitkomen, ook als de ene tekst twee regels langer is dan de andere.
 * ==========================================================================*/

/* De klasse komt op de RIJ met de kaarten, niet op de sectie. Stond hij op de
 * sectie, dan kreeg ook de kolom van de sectiekop display:flex mee. */
.et_pb_row.bpv-kaarten { margin-bottom: 0 !important; }
.bpv-kaarten .et_pb_module { margin-bottom: 0 !important; }

/* Meer dan vier kaarten vraagt een tweede rij (Divi kent geen 1_5 of verder).
 * Zonder deze regel plakken de twee rijen tegen elkaar aan, want de regel
 * hierboven zet de margin juist bewust op nul. */
.et_pb_row.bpv-kaarten + .et_pb_row.bpv-kaarten { margin-top: var(--bpv-l) !important; }

.bpv-kaarten .et_pb_column {
  display: flex !important;
  flex-direction: column;
  /* Divi's flexkolom zet zelf 30px tussen modules; hier vastgelegd, zodat
   * ook een kolom die Divi als blok opbouwt dezelfde afstand krijgt. */
  row-gap: 30px !important;
}

/* Duwt de knoppen naar de onderkant van de kaart, zodat ze bij kaarten naast
 * elkaar op dezelfde lijn uitkomen ook als de ene tekst langer is.
 *
 * Stond eerst op :first-of-type. Dat werkte nooit: :first-of-type kijkt naar
 * het elementtype, en de knopwrapper is een div die niet de eerste div in de
 * kolom is. Gemeten op de kaarten van Zakelijke evenementen: 60px verschil.
 * De tweede regel zet een eventuele tweede knop weer terug, anders duwt die
 * de eerste omhoog. */
.bpv-kaarten .et_pb_column > .et_pb_button_module_wrapper {
  margin-top: auto !important;
}

.bpv-kaarten .et_pb_column > .et_pb_button_module_wrapper ~ .et_pb_button_module_wrapper {
  margin-top: 0 !important;
}

/* Divi zet de foto in een .et_pb_image_wrap die om de afbeelding heen krimpt.
 * Bij een portretfoto op vaste hoogte werd de kaart daardoor half zo breed,
 * dus de wrap moet expliciet de volle kolombreedte pakken.
 * Geen ondermarge: de row-gap van de kolom (30px) is de afstand tot de titel.
 * Met de oude --bpv-m erbij stond er 54px tussen foto en titel (28 sept). */
.bpv-kaarten .bpv-kaart-foto {
  margin: 0 !important;
  width: 100% !important;
}

.bpv-kaarten .bpv-kaart-foto .et_pb_image_wrap {
  display: block !important;
  width: 100% !important;
}

.bpv-kaarten .bpv-kaart-foto img {
  display: block;
  width: 100% !important;
  height: var(--bpv-foto-hoogte) !important;
  object-fit: cover;
  border-radius: var(--bpv-rond-foto);
  background: var(--inzet);
}

.bpv-kaarten h3 { margin: 0 0 var(--bpv-xs) !important; }

/* Vaste hoogte, niet alleen een minimum: staat de ene omschrijving op twee
 * regels en de andere op vijf, dan begint het specsblok van elke kaart op
 * een andere hoogte en lopen de kaarten niet meer gelijk. Een minimum lost
 * dat niet op zodra een tekst er toch overheen gaat -- vandaar hier een
 * knip op vier regels (leesregelafstand 1,7), met een afkapteken voor een
 * langere tekst. Schrijf de kaarttekst zelf het liefst binnen die vier
 * regels; de knip is een vangnet, geen vervanging voor kort schrijven.
 * (Was drie; op 28 sept naar vier, omdat de zaalteksten op onder meer
 * bijzondere-congreslocatie vier regels beslaan en anders afgekapt werden.) */
.bpv-kaarten .bpv-kaart-tekst {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  height: calc(var(--bpv-tekst) * var(--bpv-regel) * 4);
  margin-bottom: var(--bpv-m) !important;
}

/* Standaard zaalkaart (specsblok VOOR de tekst, zie zalen_standaard.py): de
 * vaste hoogte hierboven is daar niet nodig -- hij bestaat om een specsblok
 * ONDER de tekst gelijk te laten lopen, en de links lijnen al vanzelf onderaan
 * uit (margin-top: auto). Met vaste hoogte + marge + de 30px kolomruimte
 * stond er minstens 54px, bij korte teksten tot ~110px, tussen tekst en link
 * (28 sept). Nu: maximaal vier regels, geen extra marge; de langste tekst in
 * een rij staat 30px boven de link. */
.bpv-kaarten .bpv-specs + .bpv-kaart-tekst {
  height: auto;
  max-height: calc(var(--bpv-tekst) * var(--bpv-regel) * 4);
  margin-bottom: 0 !important;
}

/* Uitzondering: kaarten per type evenement / doelgroep (homepage, "Zakelijke
 * evenementen") hebben een langere introductie, 6 à 7 regels, en werden op
 * vier regels afgekapt. Herkenbaar aan het rijtje labels onder de tekst
 * (ul.bpv-labels); of zet zelf .bpv-kaarten-lang op de rij (Geavanceerd,
 * CSS-klasse). Hier zeven regels, wel een vaste hoogte, zodat de labels van
 * kaarten naast elkaar op één lijn blijven (28 sept, keuze gebruiker). */
.bpv-kaarten .bpv-kaart-tekst:has(+ .bpv-labels),
.bpv-kaarten.bpv-kaarten-lang .bpv-kaart-tekst {
  -webkit-line-clamp: 7;
  height: calc(var(--bpv-tekst) * var(--bpv-regel) * 7);
}
/* Smallere kolommen (laptop): dezelfde tekst loopt over 8-10 regels. */
@media (max-width: 1400px) {
  .bpv-kaarten .bpv-kaart-tekst:has(+ .bpv-labels),
  .bpv-kaarten.bpv-kaarten-lang .bpv-kaart-tekst {
    -webkit-line-clamp: 9;
    height: calc(var(--bpv-tekst) * var(--bpv-regel) * 9);
  }
}
@media (max-width: 1180px) {
  .bpv-kaarten .bpv-kaart-tekst:has(+ .bpv-labels),
  .bpv-kaarten.bpv-kaarten-lang .bpv-kaart-tekst {
    -webkit-line-clamp: 10;
    height: calc(var(--bpv-tekst) * var(--bpv-regel) * 10);
  }
}
/* Mobiel: kaarten staan onder elkaar, dus niets gelijk te trekken. */
@media (max-width: 980px) {
  .bpv-kaarten .bpv-kaart-tekst:has(+ .bpv-labels),
  .bpv-kaarten.bpv-kaarten-lang .bpv-kaart-tekst {
    -webkit-line-clamp: unset;
    display: block;
    height: auto;
  }
}

/* Het specificatieblok in de kaart: groep, duur, prijs. Vaste minimumhoogte
 * zodat de knoppen van drie kaarten naast elkaar uitkomen op dezelfde lijn. */
.bpv-kaarten .bpv-specs {
  background: var(--inzet);
  border-radius: var(--bpv-rond-vlak);
  padding: var(--bpv-s) 20px;
  margin-bottom: var(--bpv-m) !important;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bpv-xs);
}

.bpv-kaarten .bpv-specs .r {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.bpv-kaarten .bpv-specs .k {
  font-size: var(--bpv-label) !important;
  color: var(--label) !important;
  flex: 0 0 auto;
}

.bpv-kaarten .bpv-specs .v {
  font-size: var(--bpv-klein) !important;
  color: var(--kop) !important;
  text-align: right;
}

/* --- gebiedsbadge op de kaartfoto ---------------------------------------
 * Onderscheid herenboerderij/bosgebied, als klein badge over de linkerbovenhoek
 * van de kaartfoto. De span staat gewoon in dezelfde tekstmodule als de kop
 * (ervoor geplaatst); position:absolute haalt hem uit de flex-flow, dus de
 * plek in de bron-HTML maakt niet uit. De kolom moet position:relative
 * hebben zodat top/left tegen de kolom aan meten, niet tegen de pagina. */
.bpv-kaarten .et_pb_column { position: relative; }

.bpv .bpv-gebied {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--kop) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.bpv .bpv-gebied svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex: none;
}


/* --- labels in een kaart ------------------------------------------------
 * Een rijtje onderdelen dat onder de kaart valt, zodat je in één oogopslag
 * ziet wat erbij hoort. Bewust stil gehouden: de labelkleur, een haarlijn en
 * geen vulling. Ze moeten te lezen zijn, niet om aandacht vragen.
 *
 * In Divi: zet het blok in dezelfde tekstmodule als de omschrijving, onder de
 * alinea. Dan blijft de knop onderaan de kaart staan.
 *
 *   <ul class='bpv-labels'><li>Vergaderen</li><li>Heidag</li></ul>
 * ==========================================================================*/

.bpv .bpv-labels {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--bpv-m);
  padding: 0;
}

/* De pil zit op het li, of op de link als er een in zit. Zo werkt het blok met
 * en zonder links, en is bij een link de hele pil klikbaar in plaats van
 * alleen de letters. */
.bpv .bpv-labels li,
.bpv .bpv-labels a {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  font-size: var(--bpv-label) !important;
  line-height: 1.5 !important;
  color: var(--label) !important;
  text-decoration: none !important;
}

/* Zit er een link in, dan draagt die de pil en het li niets. */
.bpv .bpv-labels li:has(a) {
  padding: 0;
  border: 0;
}

.bpv .bpv-labels a {
  transition: color .15s ease, border-color .15s ease;
}

.bpv .bpv-labels a:hover {
  color: var(--kop) !important;
  border-color: var(--accent);
}

.bpv .bpv-labels li::marker { content: none; }


/* ============================================================================
 * 11. RUIMTES — foto naast tekst
 * DE UITZONDERING. Gebruik dit alleen als er expliciet om gevraagd wordt.
 * De standaard staat in hoofdstuk 12.
 *
 * Foto naast tekst, om en om. Elke ruimte is een rij met twee kolommen 1/2;
 * op de even rijen staat de foto rechts. Vraagt 60 tot 120 woorden per ruimte
 * en neemt dus veel hoogte in beslag.
 * ==========================================================================*/

.bpv-zalen .et_pb_row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: var(--bpv-xl) !important;
}

.bpv-zalen .et_pb_row:last-child { margin-bottom: 0 !important; }

/* Elke tweede rij keert de volgorde om, zodat de foto's afwisselen */
.bpv-zalen .et_pb_row:nth-child(even) { flex-direction: row-reverse; }

.bpv-zalen .bpv-zaalfoto { margin: 0 !important; height: 100%; }

.bpv-zalen .bpv-zaalfoto .et_pb_image_wrap,
.bpv-zalen .bpv-zaalfoto img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px;
  object-fit: cover;
  border-radius: var(--bpv-rond-foto);
}

.bpv-zalen .bpv-zaaltekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: var(--bpv-s) 0;
}

/* De metaregel onder de zaaltitel: capaciteit, opstelling, prijs.
 * Scheidingsteken is een punt in het midden, geen liggend streepje. */
.bpv-zalen .bpv-zaalmeta {
  font-size: var(--bpv-klein) !important;
  color: var(--label) !important;
  margin: 0 0 var(--bpv-s) !important;
}


/* ============================================================================
 * 12. RUIMTES — de ruimtekaart
 * DE STANDAARD. Ruimtes tonen we als kaarten, tenzij er expliciet om de
 * vorm uit hoofdstuk 11 gevraagd wordt. Zo staat het ook in de wireframe
 * Ruimtes (Flow Wireframes 3, blad 4): drie kaarten per rij, gegroepeerd
 * onder een H2 per categorie, bijvoorbeeld "Herenboerderij en Zalen" en
 * "Festivalterrein en bos".
 *
 * Er is geen aparte ruimtekaart meer. Een ruimte gebruikt de gewone kaart
 * uit hoofdstuk 10, met in het specblok de oppervlakte en de groepsgrootte
 * in plaats van groep en prijs:
 *
 *   <div class="bpv-specs">
 *     <div class="r"><span class="k">Oppervlakte</span><span class="v">180 m²</span></div>
 *     <div class="r"><span class="k">Groep</span><span class="v">20 tot 80 personen</span></div>
 *   </div>
 *
 * De oude variant legde de tekst over de foto heen. Dat las slecht, want de
 * leesbaarheid hing af van wat er toevallig op die plek in de foto stond, en
 * het was het enige onderdeel waarvoor handgeschreven HTML nodig was. Nu is
 * alles een native Divi-module en is er een component minder.
 *
 * Groepen onder elkaar: elke groep is een eigen rij met een .bpv-kop erboven.
 * Blijft er in de laatste rij een kaart alleen over, dan staat die links, niet
 * gecentreerd. Dat volgt uit het grid en hoeft niets extra's.
 * ==========================================================================*/


/* ============================================================================
 * 13. ACCORDION / FAQ
 * Native Divi-module. Zet .bpv-faq op de accordionmodule.
 * ==========================================================================*/

.bpv .bpv-faq .et_pb_toggle {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lijn) !important;
  border-radius: 0 !important;
  padding: var(--bpv-s) 40px var(--bpv-s) 0 !important;
  margin: 0 !important;
}

.bpv .bpv-faq .et_pb_toggle:first-child { border-top: 1px solid var(--lijn) !important; }

.bpv .bpv-faq .et_pb_toggle_title {
  color: var(--kop) !important;
  font-family: var(--bpv-font-kop) !important;
  font-size: var(--bpv-h4) !important;
  font-weight: 500 !important;
  padding: 0 !important;
  cursor: pointer;
}

.bpv .bpv-faq .et_pb_toggle_content,
.bpv .bpv-faq .et_pb_toggle_content p,
.bpv .bpv-faq .et_pb_toggle_content li {
  color: var(--tekst) !important;
  font-size: var(--bpv-tekst) !important;
  line-height: var(--bpv-regel) !important;
}

.bpv .bpv-faq .et_pb_toggle_content { padding: var(--bpv-xs) 0 0 !important; }

/* Links binnen een accordion vielen op de oude site terug op Divi-groen.
 * De bestaande regel mikte op .et_pb_text_inner p > a en greep hier niet. */
.bpv .bpv-faq .et_pb_toggle_content a { color: var(--kop) !important; }
.bpv .bpv-faq .et_pb_toggle_content a:hover { color: var(--accent) !important; }

/* Het plusje rechts. Divi's eigen icoon is een lettertype-teken; we vervangen
 * het door twee streepjes zodat het in elk palet dezelfde kleur pakt. */
.bpv .bpv-faq .et_pb_toggle_title:before {
  content: "" !important;
  width: 14px;
  height: 2px;
  background: var(--accent);
  top: 50% !important;
  right: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%);
}

.bpv .bpv-faq .et_pb_toggle_title:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 14px;
  background: var(--accent);
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  transition: opacity .15s ease;
}

.bpv .bpv-faq .et_pb_toggle_open .et_pb_toggle_title:after { opacity: 0; }


/* ============================================================================
 * 14. TABEL
 * Voor prijzen en vergelijkingen. Zet .bpv-tabel op de tekstmodule.
 * Een brede tabel schuift horizontaal binnen zijn eigen kader, zodat de
 * pagina zelf nooit meeschuift.
 * ==========================================================================*/

.bpv .bpv-tabel { overflow-x: auto; }

.bpv .bpv-tabel table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.bpv .bpv-tabel th,
.bpv .bpv-tabel td {
  text-align: left;
  padding: 14px var(--bpv-s);
  border-bottom: 1px solid var(--lijn);
  font-size: var(--bpv-klein) !important;
  color: var(--tekst) !important;
}

.bpv .bpv-tabel th {
  color: var(--label) !important;
  font-size: var(--bpv-label) !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom-width: 2px;
}

.bpv .bpv-tabel td:last-child,
.bpv .bpv-tabel th:last-child { text-align: right; }

.bpv .bpv-tabel tr:last-child td { border-bottom: 0; }


/* ============================================================================
 * 15. GALERIJ
 * Native Divi-galerijmodule in rasterweergave. Zet .bpv-galerij erop.
 * ==========================================================================*/

.bpv .bpv-galerij .et_pb_gallery_items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--bpv-s);
}

.bpv .bpv-galerij .et_pb_gallery_item {
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}

.bpv .bpv-galerij .et_pb_gallery_image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--bpv-rond-foto);
}

/* Divi's paarse hoveroverlay met vergrootglas uit */
.bpv .bpv-galerij .et_overlay { display: none !important; }


/* ============================================================================
 * 16. BEELDBREKER
 * Een foto over de volle schermbreedte, zonder padding. Gebruik hem om een
 * lange pagina in tweeen te knippen, niet als versiering.
 * ==========================================================================*/

.et_pb_section.bpv-breker {
  padding: 0 !important;
}

.bpv-breker .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bpv-breker .et_pb_module { margin: 0 !important; }

.bpv-breker img {
  display: block;
  width: 100% !important;
  height: clamp(240px, 34vw, 420px);
  object-fit: cover;
}


/* ============================================================================
 * 17. INHOUDSOPGAVE EN LINKLIJST
 * ==========================================================================*/

.bpv .bpv-toc {
  list-style: none;
  padding: var(--bpv-m) 0 0;
  margin: 0;
  border-top: 1px solid var(--lijn);
  columns: 2;
  column-gap: var(--bpv-l);
}

.bpv .bpv-toc li { margin-bottom: var(--bpv-xs); break-inside: avoid; }

.bpv .bpv-toc a {
  color: var(--kop) !important;
  font-size: var(--bpv-klein) !important;
  text-decoration: none;
}

.bpv .bpv-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================================
 * 18. CIJFERS
 * Een rij losse getallen met een bijschrift eronder. Geen kader, geen vlak.
 * ==========================================================================*/

.bpv .bpv-cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--bpv-l);
}

.bpv .bpv-cijfers .n {
  display: block;
  font-family: var(--bpv-font-kop);
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1;
  color: var(--kop);
  margin-bottom: var(--bpv-xs);
}

.bpv .bpv-cijfers .c {
  display: block;
  font-size: var(--bpv-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
}


/* ============================================================================
 * 19. USP-STRIP
 * Vier korte pluspunten in een ingelegd kader, elk met een icoon.
 * In de wireframe heet dit "Alle belangrijke informatie".
 *
 * Opbouw in Divi: een rij met vier kolommen, in elke kolom een blurbmodule
 * (icoon, titel, tekst). De blurb is de enige native module die die drie in
 * één keer doet, dus geen handgeschreven HTML nodig.
 * Klasse .bpv-usp op de RIJ, niet op de losse modules.
 * ==========================================================================*/

.bpv .bpv-usp,
.bpv .et_pb_row.bpv-usp {
  background: var(--zacht);
  border-radius: var(--bpv-rond-foto);
  padding: var(--bpv-l) !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--bpv-l);
}

.bpv .bpv-usp .et_pb_column {
  flex: 1 1 180px;
  width: auto !important;
  margin: 0 !important;
}

.bpv .bpv-usp .et_pb_blurb { margin: 0 !important; }

.bpv .bpv-usp .et_pb_main_blurb_image { margin-bottom: var(--bpv-s) !important; }

/* Divi zet het icoon als lettertype-teken in .et-pb-icon. De ronde drager
 * eromheen maken we hier, zodat er geen achtergrondkleur in de module hoeft. */
.bpv .bpv-usp .et-pb-icon {
  display: block;
  width: 56px;
  height: 56px;
  line-height: 56px !important;
  font-size: 26px !important;
  text-align: center;
  border-radius: 50%;
  background: var(--inzet);
  color: var(--accent) !important;
}

.bpv .bpv-usp .et_pb_module_header,
.bpv .bpv-usp h4 {
  font-size: var(--bpv-h4) !important;
  margin: 0 0 6px !important;
}

.bpv .bpv-usp .et_pb_blurb_description p,
.bpv .bpv-usp p {
  font-size: var(--bpv-klein) !important;
  margin: 0;
}


/* ============================================================================
 * 19b. OPSTELLINGEN — mogelijke zaalindelingen, met een eigen icoon
 * Op de ruimtedetailpagina's (Glazen Hooiberg, De Stal, ...): per opstelling
 * (Theater, Diner, Receptie, U-vorm, Kring, ...) een icoon, de naam en de
 * capaciteit. Bewust GEEN Divi-blurbmodule met een Font Awesome-icoon: die
 * bleef leeg renderen (imageIcon met "type":"fa" gaf geen output, gemeten op
 * de Glazen Hooiberg-pagina, ook al op de onaangeraakte live versie -- een
 * bestaande Divi-beperking, geen bpv-bug). Vandaar losse SVG's in een
 * tekstmodule.
 * ==========================================================================*/
.bpv .bpv-opstellingen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bpv-m) var(--bpv-l);
  margin: var(--bpv-s) 0 var(--bpv-m);
}
.bpv .bpv-opstellingen > div { flex: 1 1 130px; }
.bpv .bpv-opstellingen .ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--inzet);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--bpv-xs);
}
.bpv .bpv-opstellingen .ico svg { width: 22px; height: 22px; }
.bpv .bpv-opstellingen h4 { font-size: var(--bpv-h4) !important; margin: 0 0 2px !important; }
.bpv .bpv-opstellingen p {
  font-size: var(--bpv-klein) !important;
  color: var(--label) !important;
  margin: 0 !important;
}


/* ============================================================================
 * 19c. VOORZIENINGEN — losse feiten als iconchips
 * Voorstel voor de Glazen Hooiberg-pagina: de "Belangrijke informatie" stond
 * als een kale opsomming los in de sectie onder de hero. De oppervlakte en
 * capaciteit verhuizen naar .bpv-cijfers in de hero zelf (al bestaand
 * onderdeel, hoofdstuk 18); wat overblijft -- flipover, geluidsinstallatie,
 * bar, terras, ... -- wordt hier een rijtje pilletjes met een klein icoon,
 * zelfde SVG-aanpak als .bpv-opstellingen hierboven en om dezelfde reden
 * (Divi's eigen icoon-mechaniek rendert niet in dit blokformaat).
 * ==========================================================================*/
.bpv .bpv-voorzieningen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bpv-xs);
  margin: var(--bpv-s) 0 var(--bpv-m);
  padding: 0;
  list-style: none;
}
.bpv .bpv-voorzieningen li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--inzet);
  margin: 0;
}
.bpv .bpv-voorzieningen li span {
  font-size: var(--bpv-klein) !important;
  font-weight: 500;
  color: var(--kop) !important;
}
.bpv .bpv-voorzieningen svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: none;
}


/* ============================================================================
 * 20. GALERIJ — één groot en twee klein
 * De sfeerimpressie uit de wireframe. Links één staand beeld, rechts twee
 * kleinere onder elkaar.
 *
 * De klasse komt op de KOLOM, niet op de rij. De rij heeft maar één kind (de
 * kolom), dus een grid op de rij had niets om te verdelen en zette alle drie
 * de beelden even hoog.
 * ==========================================================================*/

.bpv .bpv-galerij-3 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--bpv-s);
  min-height: 420px;
}

.bpv .bpv-galerij-3 .et_pb_module,
.bpv .bpv-galerij-3 > figure { margin: 0 !important; }

/* Het eerste beeld vult beide rijen */
.bpv .bpv-galerij-3 > *:first-child { grid-row: span 2; }

.bpv .bpv-galerij-3 .et_pb_image_wrap { display: block !important; height: 100%; }

.bpv .bpv-galerij-3 img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: var(--bpv-rond-foto);
  background: var(--inzet);
}


/* ============================================================================
 * 21. TUSSEN-CTA
 * Een losse oproep halverwege een lange pagina, los van de vaste CTA-balk in
 * de footer. In de wireframe: "Zien we je daar?".
 *
 * Geen eigen kleur: het kader gebruikt --zacht en werkt dus in beide standen.
 * ==========================================================================*/

.bpv .bpv-tussen-cta,
.bpv .et_pb_row.bpv-tussen-cta {
  background: var(--zacht);
  border-radius: var(--bpv-rond-foto);
  padding: var(--bpv-l) !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bpv-m);
}

.bpv .bpv-tussen-cta .et_pb_column {
  width: auto !important;
  margin: 0 !important;
}

.bpv .bpv-tussen-cta h2,
.bpv .bpv-tussen-cta h3 { margin: 0 0 var(--bpv-xs) !important; }

.bpv .bpv-tussen-cta p { margin: 0; max-width: 52ch; }


/* ============================================================================
 * 22. ALLERGENEN EN DIEETWENSEN
 * Een rij kleine iconen met een woord eronder, onder de foodconcepten-tekst.
 * Ook blurbmodules, maar kleiner en zonder tekstregel.
 * ==========================================================================*/

.bpv .bpv-allergenen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bpv-m);
  margin: var(--bpv-m) 0;
}

.bpv .bpv-allergenen .et_pb_blurb,
.bpv .bpv-allergenen > * {
  width: auto !important;
  margin: 0 !important;
  text-align: center;
}

.bpv .bpv-allergenen .et_pb_main_blurb_image { margin-bottom: 6px !important; }

.bpv .bpv-allergenen .et-pb-icon {
  display: block;
  width: 44px;
  height: 44px;
  line-height: 42px !important;
  font-size: 19px !important;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--lijn);
  color: var(--kop) !important;
}

.bpv .bpv-allergenen .et_pb_module_header,
.bpv .bpv-allergenen .bpv-allergeen-naam {
  font-size: var(--bpv-label) !important;
  font-weight: 400 !important;
  color: var(--label) !important;
  margin: 0 !important;
}


/* ============================================================================
 * 23. REVIEWS
 * Komen in geen enkele wireframe voor, maar blijven op de site: social proof
 * weghalen op pagina's die aanvragen moeten opleveren is een te groot risico.
 * Besloten 13 september.
 *
 * Twee vormen. Deze kaart voor reviews die we zelf plaatsen, en daarnaast de
 * Trustindex-widget voor de Google-reviews. Die widget brengt zijn eigen
 * opmaak mee; laat die met rust.
 * ==========================================================================*/

/* Heet bewust GEEN .bpv-reviews. Die naam bestond al in style.css als omhulsel
 * om de review-carousel, en een grid daaroverheen legt alle slides onder elkaar
 * in plaats van naast elkaar. Gemeten op homepage-v3: de rij werd 4486px hoog
 * en de kaarten 90px breed. */
.bpv .bpv-reviewkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bpv-m);
}

/* --- Recente evenementen -----------------------------------------------
 * Het reviewblok en 'In de praktijk' zijn samengevoegd: elke slide is nu een
 * evenement met de quote van de klant erin. De reviews leverden de inhoud,
 * want die bevatten al de organisatie en het soort evenement.
 *
 * De foto en het label zitten in dezelfde tekstmodule als de rest van de
 * kaart, zodat de carousel ongemoeid bleef.
 *
 * Het label ligt op een foto en kan dus niet op een kleur uit de rollen
 * rekenen: het krijgt een eigen dekkend vlak. Donkergroen met wit haalt
 * 14,7:1 en werkt op elke foto, licht of donker. */
.bpv .case-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0 0 var(--bpv-m);
  border-radius: var(--bpv-rond-foto);
  overflow: hidden;
  background: var(--inzet);
}

.bpv .case-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bpv .case-label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--secundair);
  color: #ffffff;
  font-size: var(--bpv-label);
  line-height: 1.5;
  letter-spacing: .04em;
}

/* De kopbalk: kop en intro links, de knop rechts op dezelfde hoogte als de
 * kop. Onder 780px zakt de knop onder de tekst in plaats van ernaast te
 * blijven knijpen. */
.bpv .bpv-kopbalk {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bpv-m);
}

.bpv .bpv-kopbalk > .et_pb_text { flex: 1 1 480px; }
.bpv .bpv-kopbalk > .et_pb_button_module_wrapper { margin-left: auto !important; }
.bpv .bpv-kop-intro { max-width: var(--bpv-lees); margin: var(--bpv-s) 0 0; }

/* De reviewkaart is wit, ook op een donkere sectie. Daarom brengt hij zijn
 * eigen rollen mee: zonder dat zou de tekst erin de lichte kleur van de
 * donkere sectie houden en wit op wit worden. De kaart is dus een klein
 * lichteiland, ongeacht waar hij staat.
 *
 * De randlijn is nodig omdat een witte kaart op een witte of offwhite sectie
 * anders geen begrenzing heeft. */
.bpv .bpv-review {
  --achtergrond: #ffffff;
  --zacht:       var(--licht-zacht);
  --inzet:       var(--licht-inzet);
  --kop:         var(--licht-kop);
  --tekst:       var(--licht-tekst);
  --label:       var(--licht-label);
  --lijn:        var(--licht-lijn);
  --knop:        var(--licht-knop);
  --knop-tekst:  var(--licht-knop-tekst);
  --knop-hover:  var(--licht-knop-hover);
  --accent:      var(--licht-accent);

  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--licht-kop) 14%, transparent);
  border-radius: var(--bpv-rond-vlak);
  padding: var(--bpv-m);
  display: flex;
  flex-direction: column;
}

/* De sterren pakken het accent, dat in beide standen 3:1 haalt op het
 * ingelegde vlak. Op de oude site stonden ze op een variabele die nergens
 * bestond, waardoor ze onzichtbaar waren. */
.bpv .bpv-review .bpv-sterren {
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 3px;
  margin: 0 0 var(--bpv-s);
  line-height: 1;
}

.bpv .bpv-review p { margin: 0 0 var(--bpv-s); }

/* Wie het zegt staat onderaan, ook als de ene review langer is dan de andere */
.bpv .bpv-review .bpv-review-wie {
  margin: auto 0 0;
  font-size: var(--bpv-klein) !important;
  color: var(--label) !important;
}

.bpv .bpv-review .bpv-review-wie b { color: var(--kop); font-weight: 500; }


/* ============================================================================
 * 24. UITKLAPBARE BELEVINGSSECTIE
 *
 * Vier tekstblokken naast vier foto's. Het eerste blok staat open, de andere
 * drie zijn ingeklapt en klapbaar; de bijbehorende foto wisselt mee.
 *
 * Opbouw: twee kolommen. Links vier tekstmodules met de klassen sectie-1 tot
 * sectie-4, rechts vier afbeeldingsmodules met afbeelding-1 tot afbeelding-4.
 * Het script in de head doet de rest: het hangt een chevron achter elke kop,
 * wikkelt de alinea's in .bp-content-wrap en zet de klikhandlers.
 *
 * Deze regels stonden als pagina-eigen CSS op de oude homepage (post 346553)
 * en ontbraken daardoor op elke andere pagina. Nu staan ze hier, met de
 * hardcoded kleuren vervangen door rollen, zodat het onderdeel meekleurt met
 * het palet en zowel op een lichte als een donkere sectie werkt.
 * ==========================================================================*/

.bpv .sectie-2,
.bpv .sectie-3,
.bpv .sectie-4 {
  border-top: 1px solid var(--lijn) !important;
  padding: 22px 0 !important;
  margin: 0 !important;
  transition: opacity .3s;
  cursor: pointer;
}

.bpv .sectie-4 { border-bottom: 1px solid var(--lijn) !important; }

/* Was .75. Op een licht vlak zakte het label daarmee naar 3,66:1, want de
 * doorzichtigheid drukt het contrast: #5e5d57 op 75% over wit is feitelijk
 * #868681. Op .9 haalt het 5,18:1 en blijft het verschil met een open item
 * nog steeds zichtbaar. */
.bpv .sectie-2:not(.active),
.bpv .sectie-3:not(.active),
.bpv .sectie-4:not(.active) { opacity: .9; }

.bpv .sectie-2:not(.active):hover,
.bpv .sectie-3:not(.active):hover,
.bpv .sectie-4:not(.active):hover { opacity: 1 !important; }

.bpv .sectie-2 .ey,
.bpv .sectie-3 .ey,
.bpv .sectie-4 .ey {
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--label) !important;
  opacity: 1 !important;
  margin-bottom: 10px !important;
}

/* Het eerste blok klapt dicht zodra er een ander opengaat */
.bpv .sectie-1 p {
  max-height: 300px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease;
}
.bpv .sectie-1.collapsed p { max-height: 0; opacity: 0; }

/* De kop van een ingeklapt blok is gedempt en kleiner; het actieve blok groeit */
.bpv .sectie-2 .t-section,
.bpv .sectie-3 .t-section,
.bpv .sectie-4 .t-section {
  display: flex !important;
  align-items: center !important;
  font-size: clamp(18px, 1.6vw, 26px) !important;
  color: var(--label) !important;
  margin-bottom: 0 !important;
  transition: color .3s, font-size .3s;
}

/* Het accentwoord volgt de kop. In een ingeklapt item is de kop gedempt, dus
 * daar hoort het accent ook gedempt; vol oranje op een halfdoorzichtige, kleine
 * kop haalde 2,77:1. Zodra het item opengaat wordt het weer het accent, en dan
 * is de kop ook groot genoeg om met 3:1 toe te kunnen. */
/* Het accentwoord blijft oranje, ook in een ingeklapte kop. Dat kan doordat het
 * hier zwaarder gezet wordt: een ingeklapte kop is 23px, en vanaf gewicht 700
 * telt 18,66px al als grote tekst. Daarmee geldt de drempel van 3 in plaats van
 * 4,5, en het oranje haalt daar 3,33:1 met de demping erin.
 *
 * Op gewicht 600 zou hetzelfde woord op 3,45:1 zitten terwijl er dan 4,5 voor
 * staat. Het is dus niet alleen een accentje: die 700 is wat het leesbaar houdt. */
.bpv .sectie-2 .t-section em,
.bpv .sectie-3 .t-section em,
.bpv .sectie-4 .t-section em {
  padding-left: .25em;
  font-weight: 700;
}

/* Het fotokader.
 *
 * De vier afbeeldingsmodules liggen op elkaar met position:absolute en inset:0,
 * zodat het wisselen van foto geen sprong geeft. Dat inset:0 rekt ze ook uit tot
 * de volle kolomhoogte, en die wordt bepaald door de tekst ernaast: op 1440px is
 * dat 814px. Het kader werd daarmee hoger dan een beeldscherm.
 *
 * bottom:auto haalt de onderkant los, zodat de hoogte weer van de foto zelf komt
 * in plaats van van de tekst. De verhouding 4:5 schaalt mee op smallere schermen,
 * de max-height houdt hem op brede schermen in toom. De wikkel moet de hoogte
 * doorgeven, anders houdt de foto zijn eigen 2:3 en steekt hij eronder uit. */
.bpv .afbeelding-1,
.bpv .afbeelding-2,
.bpv .afbeelding-3,
.bpv .afbeelding-4 {
  bottom: auto !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  max-height: 640px;
}

.bpv .afbeelding-1 .et_pb_image_wrap,
.bpv .afbeelding-2 .et_pb_image_wrap,
.bpv .afbeelding-3 .et_pb_image_wrap,
.bpv .afbeelding-4 .et_pb_image_wrap {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.bpv .afbeelding-1 img,
.bpv .afbeelding-2 img,
.bpv .afbeelding-3 img,
.bpv .afbeelding-4 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.bpv .sectie-2.active .t-section,
.bpv .sectie-3.active .t-section,
.bpv .sectie-4.active .t-section {
  font-size: clamp(22px, 2.2vw, 32px) !important;
  color: var(--kop) !important;
}

/* De chevron. Het script hangt hem achter de kop. */
.bpv .bp-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: auto;
  padding-left: 8px;
  transition: transform .35s ease;
}

.bpv .bp-expand::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  margin-top: -4px;
}

.bpv .sectie-2.active .bp-expand,
.bpv .sectie-3.active .bp-expand,
.bpv .sectie-4.active .bp-expand { transform: rotate(-180deg); }

/* Het uitklappen zelf gaat met een grid van 0fr naar 1fr. Dat animeert wel,
 * in tegenstelling tot height:auto. */
.bpv .bp-content-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}

.bpv .bp-content-inner { overflow: hidden; }

.bpv .sectie-2.active .bp-content-wrap,
.bpv .sectie-3.active .bp-content-wrap,
.bpv .sectie-4.active .bp-content-wrap { grid-template-rows: 1fr; }

.bpv .bp-content-inner p { padding-top: 16px; }

/* De vier foto's liggen op elkaar; alleen de actieve is zichtbaar. De kolom
 * krijgt zijn position en min-height van het script. */
.bpv .afbeelding-1,
.bpv .afbeelding-2,
.bpv .afbeelding-3,
.bpv .afbeelding-4 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .5s ease !important;
}

.bpv .afbeelding-1.active,
.bpv .afbeelding-2.active,
.bpv .afbeelding-3.active,
.bpv .afbeelding-4.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.bpv .afbeelding-1 img,
.bpv .afbeelding-2 img,
.bpv .afbeelding-3 img,
.bpv .afbeelding-4 img {
  border-radius: var(--bpv-rond-foto);
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================================
 * 25. BRUG NAAR HET OUDE ONTWERP
 *
 * Waarvoor: een bestaande pagina met de hand omzetten, sectie voor sectie,
 * zonder hem te herbouwen. Zet in Divi op een sectie onder Geavanceerd,
 * CSS-klasse: `bpv light` of `bpv dark`. Alles binnen die sectie kantelt dan
 * mee, ook de oude klassen uit style.css.
 *
 * Je hoeft de oude klassen NIET weg te halen. De regels hieronder tellen drie
 * klassen en winnen dus van `.dk .t-section` en van `.dark-section`. Dat is
 * met opzet: bij handwerk mag vergeten geen kapotte pagina opleveren.
 *
 * Wel doen: zet in de builder het achtergrondveld van die sectie op leeg of
 * transparant. Staat er een kleur in, dan schrijft Divi daar een eigen regel
 * voor die vier klassen diep zit; de regel hieronder wint daarvan, maar je
 * houdt dan wel een dode kleurwaarde in de paginacontent staan.
 *
 * Let op de accentkleur. Een omgezette sectie pakt het accent van het nieuwe
 * palet (bij vuur oranje), terwijl de secties ernaast het oude goud houden.
 * De achtergronden verschillen nauwelijks (#f8f5f1 tegen #f9f7f3), de accenten
 * wel. Wil je dat gelijktrekken, koppel dan --bp-gold aan --tertiair.
 * ==========================================================================*/

/* De sectie-achtergrond. Divi's eigen regel zit vier klassen diep met
 * !important; deze telt een id plus vier klassen en wint daar altijd van,
 * ongeacht of de pagina in een post-, body- of footer-wrapper zit. */
body #page-container .et_builder_inner_content .et_pb_section.bpv:is(.light,.wit),
body #page-container .et_builder_inner_content .et_pb_section.bpv.dark {
  background-color: var(--achtergrond) !important;
}

/* --- koppen en tekst uit het oude systeem ------------------------------- */

.bpv:is(.light,.wit) .t-section, .bpv.dark .t-section, .bpv.op-beeld .t-section,
.bpv:is(.light,.wit) .hero-title, .bpv.dark .hero-title, .bpv.op-beeld .hero-title,
.bpv:is(.light,.wit) .stat-num,   .bpv.dark .stat-num,
.bpv:is(.light,.wit) .trust-num .n, .bpv.dark .trust-num .n {
  color: var(--kop) !important;
}

/* De intro onder een herokop krijgt een leesbreedte. Zonder dat loopt hij over
 * de volle rij: gemeten op homepage-v3 werd die regel 136 tekens lang, tegen
 * de 60 tot 75 die prettig leest. Geldt voor elke hero, ook die met beeld. */
.bpv .hero-underline { max-width: var(--bpv-lees) !important; }

.bpv:is(.light,.wit) .about, .bpv.dark .about,
.bpv:is(.light,.wit) .group-head p, .bpv.dark .group-head p,
.bpv:is(.light,.wit) .hero-underline, .bpv.dark .hero-underline, .bpv.op-beeld .hero-underline {
  color: var(--tekst) !important;
}

.bpv:is(.light,.wit) .ey, .bpv.dark .ey,
.bpv:is(.light,.wit) .hero-toptitle, .bpv.dark .hero-toptitle, .bpv.op-beeld .hero-toptitle,
.bpv:is(.light,.wit) .hero-crumb, .bpv.dark .hero-crumb,
.bpv:is(.light,.wit) .stat-label, .bpv.dark .stat-label {
  color: var(--label) !important;
}

/* Het oude eyebrow heeft een streepje ervoor. Het nieuwe niet; twee varianten
 * naast elkaar hield niemand uit elkaar. Weg dus, zodra de sectie om is. */
.bpv:is(.light,.wit) .ey::before, .bpv.dark .ey::before { display: none !important; }

/* --- links en labels ---------------------------------------------------- */

.bpv:is(.light,.wit) .lnk, .bpv.dark .lnk, .bpv.op-beeld .lnk {
  color: var(--kop) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bpv:is(.light,.wit) .lnk:hover, .bpv.dark .lnk:hover { color: var(--accent) !important; }

.bpv:is(.light,.wit) .tag, .bpv.dark .tag {
  color: var(--kop) !important;
  border-color: var(--lijn) !important;
  background: none !important;
}

/* --- knoppen ------------------------------------------------------------ */

/* .bpv-cta-primary hoort hier ook bij: dezelfde gouden-verloopknop als
 * .btn-gold, alleen onder een andere naam (de CTA-knoppen op met name de
 * vergaderpagina's). Het verloop zit in --bp-grad-gold, een eigen berekende
 * variabele die niet meeverandert met de --bp-gold-alias hierboven -- vandaar
 * de rechtstreekse overschrijving hier, net als bij .btn-gold. */
.bpv:is(.light,.wit) .btn-gold, .bpv.dark .btn-gold, .bpv.op-beeld .btn-gold,
.bpv:is(.light,.wit) .btn-gold .et_pb_button, .bpv.dark .btn-gold .et_pb_button,
.bpv:is(.light,.wit) .bpv-cta-primary, .bpv.dark .bpv-cta-primary,
.bpv:is(.light,.wit) .bpv-cta-primary.et_pb_button, .bpv.dark .bpv-cta-primary.et_pb_button {
  background: var(--knop) !important;
  background-image: none !important;   /* het oude goud was een verloop */
  color: var(--knop-tekst) !important;
  border: 0 !important;
  border-radius: var(--bpv-rond-knop) !important;
  text-transform: none !important;
}

/* De hover van .bpv-cta-primary zit in style.css vijf klassen (en op de
 * footerknop een id) diep, dus een gewone regel verliest het. */
body.et-db #page-container #et-boc .et-l .bpv .et_pb_button.bpv-cta-primary:hover,
body #page-container .et_pb_section.bpv .et_pb_button.bpv-cta-primary:hover {
  background: var(--knop-hover) !important;
  background-image: none !important;
}

/* .bpv-cta-primary staat op de oude vergaderpagina's altijd los in een volle
 * rij, nooit naast een tweede knop, en stond zo in de broncontent ook op
 * "alignment":"center". De regel bij .et_pb_button_module_wrapper hierboven
 * (chapter 6) zet die wrapper op inline-block, voor het geval van twee
 * bpv-knoppen naast elkaar -- daarmee verliest hij zijn eigen centrering,
 * want Divi centreert zo'n knop via text-align op de wrapper, en dat werkt
 * alleen als de wrapper zelf een blok is. Voor deze ene, altijd-alleenstaande
 * knop zetten we dat terug. */
.bpv .et_pb_button_module_wrapper:has(> .bpv-cta-primary) {
  display: block !important;
  text-align: center;
  margin: 0 !important;
}

/* Twee .bpv-cta-primary-knoppen in dezelfde kolom ("Bekijk ons foodbook" +
 * "Vraag een offerte aan") stonden onder elkaar en tegen elkaar aan, allebei
 * oranje. Nu naast elkaar met ruimte ertussen; de offerteknop blijft oranje,
 * de andere krijgt de rand-stijl van de homepagehero (.btn-ghost: transparant,
 * 1px rand in de knopkleur). Gecentreerd als de kolom alleen knoppen heeft,
 * links uitgelijnd als de knoppen onder tekst staan (28 sept).
 * Let op: :has() mag niet genest worden -- een eerste versie met
 * :has(> x:has(> y)) werd door de browser in zijn geheel genegeerd. */
.bpv .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper > .bpv-cta-primary) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.bpv .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper > .bpv-cta-primary):has(> .et_pb_text) {
  justify-content: flex-start;
}
.bpv .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper > .bpv-cta-primary) > :not(.et_pb_button_module_wrapper) {
  flex: 0 0 100%;
}
.bpv .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper > .bpv-cta-primary) > .et_pb_button_module_wrapper {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
}
body #page-container .bpv .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper > .bpv-cta-primary) a.et_pb_button.bpv-cta-primary:not([href*="offerte"]) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--knop) !important;  /* rand zonder dat de knop groeit */
  color: var(--kop) !important;
}
body.et-db #page-container #et-boc .et-l .bpv .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper > .bpv-cta-primary) a.et_pb_button.bpv-cta-primary:not([href*="offerte"]):hover,
body #page-container .et_pb_section.bpv .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper > .bpv-cta-primary) a.et_pb_button.bpv-cta-primary:not([href*="offerte"]):hover {
  background: color-mix(in srgb, var(--kop) 10%, transparent) !important;
  background-image: none !important;
}

.bpv:is(.light,.wit) .btn-ghost, .bpv.dark .btn-ghost, .bpv.op-beeld .btn-ghost,
.bpv:is(.light,.wit) .btn-ghost-dark, .bpv.dark .btn-ghost-dark {
  background: none !important;
  border: 1px solid var(--knop) !important;
  color: var(--kop) !important;
  border-radius: var(--bpv-rond-knop) !important;
}

/* --- vlakken ------------------------------------------------------------ */

.bpv:is(.light,.wit) .thema-card, .bpv.dark .thema-card,
.bpv:is(.light,.wit) .contact-kaart, .bpv.dark .contact-kaart {
  background: var(--inzet) !important;
  border-color: var(--lijn) !important;
}

/* De oude reviewkaart krijgt dezelfde behandeling als de nieuwe: wit, met zijn
 * eigen rollen, zodat de tekst erin ook op een donkere sectie leesbaar blijft. */
.bpv .review-card {
  --kop:    var(--licht-kop);
  --tekst:  var(--licht-tekst);
  --label:  var(--licht-label);
  --lijn:   var(--licht-lijn);
  --accent: var(--licht-accent);

  background: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--licht-kop) 14%, transparent) !important;
}

.bpv .review-card .review-text,
.bpv .review-card .review-name { color: var(--tekst) !important; }
.bpv .review-card .review-company { color: var(--label) !important; }

/* De scorebadge had nog het oude gouden verloop. Effen navy met witte tekst
 * (14,65:1), passend bij de knoppen. Bewust niet oranje: de sterren eronder
 * zijn dat al, en twee oranjes naast elkaar vechten om dezelfde aandacht. */
.bpv .review-card .review-logo {
  background: var(--licht-knop) !important;
  background-image: none !important;
  color: var(--licht-knop-tekst) !important;
  border-color: transparent !important;
}
.bpv .review-card h3, .bpv .review-card h4 { color: var(--kop) !important; }

/* De reviewsterren. De lege sterren stonden op het oude goud en waren op een
 * lichte achtergrond niet van de gevulde te onderscheiden: gemeten 1,04:1.
 * Leeg gebruikt nu de lijnkleur, gevuld het accent. */
.bpv .stars { color: var(--lijn) !important; }
.bpv .stars-fill { color: var(--accent) !important; }

.bpv:is(.light,.wit) .trust-num, .bpv.dark .trust-num {
  border-color: var(--lijn) !important;
  background: none !important;
}

/* Het oude gouden randje en de gouden lijnen */
.bpv:is(.light,.wit) [class*='gold'], .bpv.dark [class*='gold'] { border-color: var(--lijn) !important; }

/* --- het gouden accentwoord in een kop ---------------------------------- */
/* Op de homepage staat een woord in de kop cursief in het lichte goud, bedoeld
 * voor een donkere achtergrond. Draai je de sectie naar licht, dan is het
 * vrijwel onzichtbaar: gemeten 1,6:1 op de kop "Een plek voor bijzondere
 * mijlpalen". Het accent van het palet haalt daar 5,8:1. */
.bpv:is(.light,.wit) h1 em, .bpv:is(.light,.wit) h2 em, .bpv:is(.light,.wit) h3 em,
.bpv.dark  h1 em, .bpv.dark  h2 em, .bpv.dark  h3 em,
.bpv.op-beeld h1 em, .bpv.op-beeld h2 em, .bpv.op-beeld h3 em,
.bpv:is(.light,.wit) .t-section em, .bpv.dark .t-section em, .bpv.op-beeld .t-section em,
.bpv:is(.light,.wit) .hero-title em, .bpv.dark .hero-title em, .bpv.op-beeld .hero-title em {
  color: var(--accent) !important;
  font-style: italic;
}


/* --- iconen uit het oude systeem ---------------------------------------- */
/* Divi-iconen op een donkere sectie staan op het lichte goud #ddc9a4. Draai je
 * zo'n sectie naar licht, dan zijn ze onzichtbaar: gemeten 1,49:1 op de
 * carouselpijlen van de homepage. Bewust alleen de carousel en de slider, want
 * een algemene regel op .et-pb-icon zou ook de iconen van onze eigen USP-strip
 * en allergenenrij overschrijven. Verdwijnt er elders een oud icoon, voeg die
 * module dan hier toe. */
.bpv:is(.light,.wit) .et_pb_group_carousel_arrow .et-pb-icon,
.bpv.dark  .et_pb_group_carousel_arrow .et-pb-icon,
.bpv:is(.light,.wit) .et_pb_slider .et-pb-icon,
.bpv.dark  .et_pb_slider .et-pb-icon {
  color: var(--kop) !important;
}


/* --- de oude donker-markeringen uitzetten ------------------------------- */
/* Staan ze er nog, dan mogen ze niets meer doen binnen een omgezette sectie. */

.bpv:is(.light,.wit) .dk, .bpv.dark .dk,
.bpv:is(.light,.wit).dark-section, .bpv.dark.dark-section { background-color: transparent !important; }


/* --- .stat-tile: kolom breed genoeg voor de eigen tekst ------------------
 * Vier vaste kwart-kolommen met een groot lettertype (style.css:
 * clamp(32px,4vw,52px)) werkt alleen zolang elke stat-num kort is ("1",
 * "4+"). Zodra de waarde een woord of korte zin is ("Workshops", "100 tot
 * 400") past die niet meer in een kwart kolom en breekt af -- gemeten op
 * Activiteitenterrein en De Zandvlaktes. De rij wordt daarom flexibel: elke
 * tegel pakt de breedte die zijn eigen tekst nodig heeft in plaats van
 * precies een kwart, en de tekst zelf mag niet meer afbreken. Iets kleiner
 * maximum als extra marge. */
.bpv .et_pb_row:has(> .et_pb_column > .stat-tile) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bpv .et_pb_row:has(> .et_pb_column > .stat-tile) > .et_pb_column {
  width: auto !important;
  flex: 0 1 auto;
  min-width: max-content;
}
.bpv .stat-tile .stat-num {
  white-space: nowrap;
  font-size: clamp(22px, 3vw, 44px) !important;
}


/* --- de oude kleurtokens doorkoppelen ------------------------------------
 * De brug hierboven raakt alleen de klassen die met naam genoemd staan. Een
 * omgezette sectie op een oude pagina heeft meestal ook componenten die de
 * brug niet noemt: .zaal-meta, .arr-prijs, .arr-note, .quote, .facts-list,
 * .group-head, .hero-note, de reviewkaart uit style.css. Die lezen allemaal
 * --bp-gold(-l/-m), --bp-dark(-2) of --bp-text-m, en die drie zijn in
 * style.css op :root gezet -- dus sitebreed, voor alle ~67 pagina's die nog
 * op het oude systeem draaien.
 *
 * Hier overschrijven we ze NIET op :root (dat zou het goud overal breken),
 * maar alleen op een element dat zowel .bpv als .bpv-destal draagt: precies
 * de staat van een sectie die net omgezet is (.bpv-destal hoeft er niet af,
 * zie de brug hierboven). Elders op de site, waar alleen .bpv-destal staat,
 * blijft het oude goud gewoon het oude goud. */
.bpv.bpv-destal {
  --bp-gold:          var(--accent);
  --bp-gold-l:        var(--accent);
  --bp-gold-m:        var(--accent);
  --bp-gold-on-light: var(--accent);
  --bp-dark:          var(--kop);
  --bp-dark-2:        var(--kop);
  --bp-text-m:        var(--label);
}

/* --- het oude <style>-blok in de pagina-inhoud overstemmen ----------------
 * Elke oude pagina heeft in de inhoud zelf een <style>-blok (sectie
 * .thema-css) met harde goudkleuren en !important, bv.
 *   .bpv-destal:not(.dk) .ey { color: #7d6236 !important; }
 *   .bpv-destal:not(.dk) .et_pb_text_inner p>a { color: #7d6236 !important; }
 * Dat blok staat later in de pagina dan dit bestand, dus bij gelijke
 * specificiteit wint het, en de brug hierboven verloor op labels, capaciteits-
 * regels, stapnummers en tekstlinks (28 sept, gemeten op batch 2 en ook op al
 * live pagina's als /heidag/). Daarom hier met een zwaardere selector.
 * Kleuren: labels -> --label, tekstlinks -> zoals .bpv p a (kop, onderstreept).
 * Knoppen (a.bpv-knop, .et_pb_button, alles met bpv- in de klasse) niet. */
.bpv.bpv-destal:is(.light,.dark,.wit) .ey,
.bpv.bpv-destal:is(.light,.dark,.wit) .contact-kaart .ey,
.bpv.bpv-destal:is(.light,.dark,.wit) .zaal-meta,
.bpv.bpv-destal:is(.light,.dark,.wit) .stap-nr {
  color: var(--label) !important;
}
.bpv.bpv-destal:is(.light,.dark,.wit) .et_pb_text_inner :is(p, li, .hero-note, .contact-kaart, .about) a:not([class*="bpv-"]):not(.et_pb_button):not(.kaart-knop) {
  color: var(--kop) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.bpv.bpv-destal:is(.light,.dark,.wit) .et_pb_text_inner :is(p, li, .hero-note, .contact-kaart, .about) a:not([class*="bpv-"]):not(.et_pb_button):not(.kaart-knop):hover {
  color: var(--accent) !important;
}

/* --- formulieren (Contact Form 7 in .bpv-form) ---------------------------
 * Het oude <style>-blok geeft de verzendknop een goudverloop in hoofdletters,
 * met een selector twee id's diep (body.et-db #page-container #et-boc ...).
 * Dezelfde weg hier, plus .bpv op de sectie, zodat deze wint. Knop zoals
 * .bpv-cta-primary; focusrand in het accent i.p.v. goud (29 sept). */
body.et-db #page-container #et-boc .et-l .bpv.bpv-form .wpcf7 .wpcf7-submit,
body.et-db #page-container #et-boc .et-l .bpv.bpv-form .wpcf7 input[type=submit] {
  background: var(--knop) !important;
  background-image: none !important;
  color: var(--knop-tekst) !important;
  border-radius: var(--bpv-rond-knop) !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
}
body.et-db #page-container #et-boc .et-l .bpv.bpv-form .wpcf7 .wpcf7-submit:hover,
body.et-db #page-container #et-boc .et-l .bpv.bpv-form .wpcf7 input[type=submit]:hover {
  background: var(--knop-hover) !important;
  background-image: none !important;
}
.bpv.bpv-form .wpcf7 input:focus,
.bpv.bpv-form .wpcf7 select:focus,
.bpv.bpv-form .wpcf7 textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

/* --- formulierpagina's uit het oudste systeem (29 sept) --------------------
 * Offerte aanvragen, Folder downloaden en Beschikbaarheid opvragen zijn niet
 * herbouwd (keuzeproces/uitklappers draaien op klassen, ID's en scripts), ze
 * kregen alleen `bpv light` + een paginaklasse. Hier hun knoppen in lijn met de
 * rest van de site: keuzeknoppen in de knopkleur, de hoofdactie oranje
 * (--tertiair-knop, zoals "Bekijk alle" op de homepage), verzendknoppen als
 * elke andere knop. Waren navy (#212935), felgroen (#00d664) en #05244c. */
.bpv.bpv-offerte .zakelijk,
.bpv.bpv-offerte .particulier {
  background: var(--knop) !important;
  border-radius: var(--bpv-rond-knop) !important;
  cursor: pointer;
  transition: background .15s ease;
}
.bpv.bpv-offerte .zakelijk:hover,
.bpv.bpv-offerte .particulier:hover { background: var(--knop-hover) !important; }
.bpv.bpv-offerte .zakelijk h3,
.bpv.bpv-offerte .particulier h3 { color: var(--knop-tekst) !important; }

.bpv.bpv-offerte #open-aanvraagmodule {
  background: var(--tertiair-knop) !important;
  border-radius: var(--bpv-rond-knop) !important;
}
.bpv.bpv-offerte #open-aanvraagmodule a { color: #fff !important; text-decoration: none !important; }

.bpv.bpv-offerte .keuze {
  border: 1px solid var(--lijn) !important;
  border-radius: var(--bpv-rond-foto) !important;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bpv.bpv-offerte .keuze:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

/* Knoppen in deze pagina's: hoofdactie oranje, "Per e-mail ontvangen" als
 * randknop. Verzendknoppen van formulieren: de gewone knopkleur. */
html body .bpv:is(.bpv-offerte, .bpv-folder) a.et_pb_button:not([class*="open-"]) {
  background: var(--tertiair-knop) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--bpv-rond-knop) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
}
html body #page-container .bpv.bpv-folder .et_pb_button_module_wrapper a.et_pb_button[class*="open-"] {
  background: transparent !important;
  color: var(--kop) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--tertiair-knop) !important;
  border-radius: var(--bpv-rond-knop) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
}
html body .bpv:is(.bpv-offerte, .bpv-folder, .bpv-beschikbaarheid) .wpcf7 .wpcf7-submit,
html body .bpv:is(.bpv-offerte, .bpv-folder, .bpv-beschikbaarheid) .wpcf7 input[type=submit] {
  background: var(--knop) !important;
  background-image: none !important;
  color: var(--knop-tekst) !important;
  border: 0 !important;
  border-radius: var(--bpv-rond-knop) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 12px 26px !important;
}
html body .bpv:is(.bpv-offerte, .bpv-folder, .bpv-beschikbaarheid) .wpcf7 .wpcf7-submit:hover {
  background: var(--knop-hover) !important;
}

/* --- inhoudspagina's uit het oudste systeem (groep 3, 29 sept) -------------
 * Foodbook, Ruimtes, Evenementenlocaties Rotterdam, Activiteiten- en
 * Food-keuzes: alleen gebridged (bpv wit/light op de secties). Hun Divi-
 * knoppen waren felgroen (#00d664) of zwart; nu de gewone knop. Knoppen met
 * een bpv-klasse en de formulierpagina's (eigen regels hierboven) niet. */
html body #page-container .bpv:is(.wit, .light, .dark):not(.bpv-destal):not(.bpv-offerte):not(.bpv-folder) a.et_pb_button:not([class*="bpv-"]) {
  background: var(--knop) !important;
  background-image: none !important;
  color: var(--knop-tekst) !important;
  border: 0 !important;
  border-radius: var(--bpv-rond-knop) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 12px 22px !important;
}
html body #page-container .bpv:is(.wit, .light, .dark):not(.bpv-destal):not(.bpv-offerte):not(.bpv-folder) a.et_pb_button:not([class*="bpv-"]):hover {
  background: var(--knop-hover) !important;
}
/* Vinkjes in .custom_bullets--check: het ETmodules-icoonfont laadt op deze
 * pagina's niet, dus stond er een letterlijke "Z". Nu een gewoon vinkje. */
.bpv .custom_bullets li::before,
.bpv .custom_bullets--check li::before {
  content: "\2713" !important;
  font-family: inherit !important;
  font-weight: 700;
  color: var(--accent) !important;
}

/* Ankermenu (Lunch | Borrel | Diner op food-/activiteiten-keuzes): een sectie
 * met alleen een Divi-menumodule kreeg de volle sectiepadding (80/64) + 27px
 * rijpadding: 257px hoog voor een menu van 59px. Nu compact. */
.et_pb_section.bpv:has(.et_pb_menu):not(:has(.et_pb_text, .et_pb_image, .et_pb_gallery)) {
  padding-top: var(--bpv-s) !important;
  padding-bottom: var(--bpv-s) !important;
}
.et_pb_section.bpv:has(.et_pb_menu):not(:has(.et_pb_text, .et_pb_image, .et_pb_gallery)) > .et_pb_row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Fotoband met tekst (foodbook: "Passie voor food!" e.d.): achtergrondfoto met
 * felgroene tekst uit de module, onleesbaar. Nu donkere laag + lichte tekst. */
.et_pb_section.bpv.bpv-fotoband { position: relative; }
.et_pb_section.bpv.bpv-fotoband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20,26,35,.55) 0%, rgba(20,26,35,.7) 100%);
  pointer-events: none;
}
.et_pb_section.bpv.bpv-fotoband > .et_pb_row { position: relative; z-index: 1; }
html body #page-container .et_pb_section.bpv.bpv-fotoband :is(h1, h2, h3, h4, p, span, strong, li) {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

/* Divi-galerij (rasterweergave) in omgezette secties (foodbook): foto's
 * vulden maar 142px van een kolom van 612px. Nu een mozaiek: de eerste foto
 * groot over de volle breedte, de rest eronder op een rij. Op desktop krijgt
 * de fotokolom ook meer breedte dan de tekstkolom (58/38). */
.et_pb_section.bpv:not(.bpv-destal) .et_pb_gallery_grid .et_pb_gallery_items {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.et_pb_section.bpv:not(.bpv-destal) .et_pb_gallery_grid .et_pb_gallery_item {
  grid-column: span 2;
  width: 100% !important;
  margin: 0 !important;
  clear: none !important;
  display: block !important;
}
.et_pb_section.bpv:not(.bpv-destal) .et_pb_gallery_grid .et_pb_gallery_item:first-child { grid-column: 1 / -1; }
.et_pb_section.bpv:not(.bpv-destal) .et_pb_gallery_grid .et_pb_gallery_item:first-child:nth-last-child(3) ~ .et_pb_gallery_item,
.et_pb_section.bpv:not(.bpv-destal) .et_pb_gallery_grid .et_pb_gallery_item:first-child:nth-last-child(2) ~ .et_pb_gallery_item { grid-column: span 3; }
.et_pb_section.bpv:not(.bpv-destal) .et_pb_gallery_grid .et_pb_gallery_image img {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--bpv-rond-foto);
}
.et_pb_section.bpv:not(.bpv-destal) .et_pb_gallery_grid .et_pb_gallery_item:first-child .et_pb_gallery_image img { aspect-ratio: 16 / 9; }
@media (min-width: 981px) {
  .et_pb_section.bpv:not(.bpv-destal) .et_pb_row:has(> .et_pb_column_1_2 > .et_pb_gallery_grid) {
    display: flex; gap: 4%; align-items: center;
  }
  .et_pb_section.bpv:not(.bpv-destal) .et_pb_row:has(> .et_pb_column_1_2 > .et_pb_gallery_grid) > .et_pb_column {
    width: 38% !important; margin: 0 !important;
  }
  .et_pb_section.bpv:not(.bpv-destal) .et_pb_row:has(> .et_pb_column_1_2 > .et_pb_gallery_grid) > .et_pb_column:has(> .et_pb_gallery_grid) {
    width: 58% !important;
  }
}

/* Kaartrij van drie met een restrij van twee (bv. /ruimtes/: 3 + 2 zalen):
 * zet .bpv-kaarten-3 op de rijen, dan houden de twee restkaarten dezelfde
 * breedte als de drie erboven i.p.v. elk de halve rij te vullen. */
@media (min-width: 981px) {
  /* de rij is flex met column-gap 5.5% -> kolom = (100% - 2 x 5.5%) / 3 */
  .et_pb_row.bpv-kaarten.bpv-kaarten-3 > .et_pb_column {
    width: calc((100% - 11%) / 3) !important; flex: 0 0 calc((100% - 11%) / 3) !important;
  }
}

/* Knop + tekstlink naast elkaar in de hero (bv. "Vraag een offerte aan" +
 * "Bekijk onze cases" op evenementenlocatie/rotterdam): wat lucht ertussen. */
.bpv-hero .bpv-herotekst .bpv-knop + .bpv-link { margin-left: 18px; }

/* --- accordeon (veelgestelde vragen, introductiedagen) -------------------
 * Links in een uitgeklapt antwoord en het plus/min-icoon stonden nog in het
 * oude goud (.bpv-destal .et_pb_accordion ... #7d6236 / #ddc9a4). */
.bpv.bpv-destal:is(.light,.dark,.wit) .et_pb_accordion .et_pb_toggle_content a {
  color: var(--kop) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bpv:is(.light,.dark,.wit) .et_pb_accordion .et_pb_toggle_title.et_pb_toggle_title::before,
.bpv:is(.light,.dark,.wit) .et_pb_accordion .et_pb_toggle_title.et_pb_toggle_title::after {
  background: var(--accent) !important;
  color: var(--accent) !important;
}

/* --- kleine decoraties die het oude <style>-blok nog goud hield ------------
 * Opsommingsbolletjes van .facts-list en het grote aanhalingsteken op de
 * reviewkaart (pseudo-elementen; vielen buiten eerdere kleurcontroles). */
.bpv.bpv-destal:is(.light,.dark,.wit) .facts-list li::before { color: var(--accent) !important; }
.bpv.bpv-destal.bpv-reviews .review-card::before,
.bpv.bpv-destal:is(.light,.dark,.wit) .review-card::before { color: var(--accent) !important; }

/* Genummerde stappen (ol.stappen): cirkel met nummer, was goud vlak/cijfer. */
.bpv.bpv-destal:is(.light,.dark,.wit) .about ol.stappen li::before {
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
  color: var(--accent) !important;
}

/* Knop in een prijstegel (.kaart-knop, bv. "Prijsvoorstel ontvangen" op
 * prijzen-2026): had een goudverloop in hoofdletters. Nu als .bpv-cta-primary. */
.bpv.bpv-destal:is(.light,.dark,.wit) .et_pb_text_inner a.kaart-knop {
  background: var(--knop) !important;
  background-image: none !important;
  color: var(--knop-tekst) !important;
  border-radius: var(--bpv-rond-knop) !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: .02em !important;
}
.bpv.bpv-destal:is(.light,.dark,.wit) .et_pb_text_inner a.kaart-knop:hover { background: var(--knop-hover) !important; }

/* --- prijs in een arrangement-tegel ---------------------------------------
 * In een tegel stonden prijs en "per persoon, excl. btw" ~65px uit elkaar:
 * Divi's 16px padding onder elke <p>, 6px marge onder de prijs, en 22/26px
 * marge op .arr-note -- die marge is bedoeld voor de losse prijstoelichting
 * ONDER de tegels, niet voor de regel in de tegel. Binnen een tegel sluiten
 * prijs en toelichting nu aan, daarna --bpv-s tot de omschrijving (28 sept). */
.bpv.bpv-destal .bpv-grid > div > .arr-prijs {
  padding-bottom: 0 !important;
  margin-bottom: 2px !important;
}
.bpv.bpv-destal .bpv-grid > div > .arr-note {
  padding-bottom: 0 !important;
  margin: 0 0 var(--bpv-s) !important;
}

/* --- "Goed om te weten" als zijbalk naast de tekst --------------------------
 * Herkend aan: een kolom die begint met een h3 direct gevolgd door
 * ul.facts-list, naast een andere kolom. Lopende tekst met opsommings-
 * tekens (bv. evenementenlocatie) valt daar bewust buiten.
 * Het blok (h3 + ul.facts-list + p.quote) stond los in de rechterkolom: geen
 * kader, 64px van de tekst, en zo'n 300px leegte eronder omdat de tekst links
 * veel langer is. Nu een kader met eigen vlak, even hoog als de tekstkolom:
 * lijst bovenaan, de slotzin onderaan. (Meescrollen/sticky kan hier niet:
 * #page-container heeft overflow hidden.) Goedgekeurd 28 sept. */
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column):has(> .et_pb_column > .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) {
  display: flex !important;
  align-items: stretch;
  justify-content: space-between;
}
/* Tekst leidend (56%), kader als zijbalk (38%), ~6% ertussen. */
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column):has(> .et_pb_column > .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) > .et_pb_column:not(:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list)) {
  flex: 0 0 56% !important;
  width: 56% !important;
  margin-right: 0 !important;
}
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) {
  flex: 0 0 38% !important;
  width: 38% !important;
  margin: 0 0 0 auto !important;       /* rechts tegen de kantlijn */
  display: flex !important;
  flex-direction: column;
  background: var(--inzet);
  border-radius: 16px;
  padding: 36px 40px 32px !important;
}
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) > .et_pb_text,
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) > .et_pb_text > .et_pb_text_inner {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
}
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) h3 {
  margin: 0 0 var(--bpv-s) !important;
  padding: 0 !important;
}
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) .facts-list { margin: 0 !important; }
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) .facts-list li {
  position: relative;
  padding-left: 20px !important;
  list-style: none !important;
}
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) .facts-list li::before {
  position: absolute;
  left: 0;
  top: 8px;                             /* gelijk met de padding-top van li */
  line-height: inherit;
  font-size: inherit;
}
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) .facts-list li:last-child { border-bottom: 0 !important; }
.bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) .quote {
  margin: auto 0 0 !important;          /* naar de onderkant van het kader */
  padding: var(--bpv-m) 0 0 !important;
  border-top: 1px solid var(--lijn);
  font-style: italic;
  color: var(--kop) !important;
}
@media (max-width: 980px) {
  .bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column):has(> .et_pb_column > .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) { display: block !important; }
  .bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column):has(> .et_pb_column > .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) > .et_pb_column { width: 100% !important; }
  .bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) { padding: 28px 24px 24px !important; }
  .bpv.bpv-destal .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .et_pb_text > .et_pb_text_inner > h3:first-child + ul.facts-list) .quote { margin-top: var(--bpv-m) !important; }
}

/* --- witruimte onder de oude sectiekop -----------------------------------
 * .group-head (label + h2 uit style.css) heeft daar een vaste ondermarge van
 * 36px, en Divi zet nog 10px padding onder elke h2. Staat de kop in een eigen
 * rij, dan komt daar ook de rij-padding van Divi bij (20px onder, 30px boven
 * de volgende rij): tot ~90px tussen kop en inhoud, tegen 16-24px in het
 * nieuwe systeem. Hier trekken we dat gelijk met de nieuwe maat, alleen op
 * omgezette secties (.bpv.bpv-destal) -- oude pagina's blijven ongemoeid. */
.bpv.bpv-destal .group-head,
.bpv.bpv-destal .et_pb_module.group-head { margin-bottom: var(--bpv-m) !important; }
.bpv.bpv-destal .group-head h2 { padding-bottom: 0 !important; }

/* Kop in een eigen rij: de rij met alleen de kop en de rij eronder sluiten
 * aan, zodat alleen de ondermarge van de kop overblijft. */
.bpv.bpv-destal .et_pb_row:has(.et_pb_text_inner > .group-head:last-child) {
  padding-bottom: 0 !important;
}
.bpv.bpv-destal .et_pb_row:has(.et_pb_text_inner > .group-head:last-child) + .et_pb_row {
  padding-top: 0 !important;
}


/* ============================================================================
 * 26. SITEBREED — header, mega-menu, footer
 * Deze regels hangen NIET aan .bpv en raken dus elke pagina, ook de pagina's
 * die nog niet omgebouwd zijn. Daarom staat er zo weinig mogelijk in: alleen
 * de kleuren, niet de opbouw.
 * ==========================================================================*/

/* De header- en logoregels staan nu ongescoped bovenin dit bestand, handmatig
 * toegevoegd op 15 september. Ze gelden dus op elke pagina, ook op de pagina's
 * die nog niet omgezet zijn. Het opt-in duplicaat dat hier stond is weg, want
 * twee blokken voor hetzelfde element leidt tot zoeken. */


/* Haalt de donkere waas onder de header weg zodat de hero tot bovenaan loopt.
 * Stond eerder hardcoded op .page-id-347948 en werkte dus maar op een pagina. */
body.bpv-paginatop #main-content:before {
  background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}

/* Mega-menu — alleen de kleuren, de opbouw blijft zoals hij is.
 * Ook opt-in: pas actief zodra body.bpv-header staat. */
body.bpv-header .bpv-mega {
  --achtergrond: var(--donker-achtergrond);
  --kop:         var(--donker-kop);
  --tekst:       var(--donker-tekst);
  --label:       var(--donker-label);
  --lijn:        var(--donker-lijn);
  --accent:      var(--donker-accent);
  background-color: var(--achtergrond) !important;
}

body.bpv-header .bpv-mega a,
body.bpv-header .bpv-mega .bpv-mega-tile-body { color: var(--tekst) !important; }
body.bpv-header .bpv-mega h3, body.bpv-header .bpv-mega h4,
body.bpv-header .bpv-mega .bpv-mega-tile a { color: var(--kop) !important; }
body.bpv-header .bpv-mega .bpv-mega-desc { color: var(--label) !important; }
body.bpv-header .bpv-mega a:hover { color: var(--accent) !important; }

/* Mega-menupaneel direct onder de menubalk.
 * style.css zet het paneel op top: 90px !important, uit de tijd dat de balk
 * 90px hoog was. De balk is nu 65px, dus er zat een strook van 25px tussen
 * balk en paneel. Ging je met de muis van het menu-item naar het paneel, dan
 * verliet je in die strook de hover en klapte het menu dicht (28 sept).
 * De plugin zet zelf wel het juiste getal inline, maar een !important in een
 * stylesheet wint van een inline stijl, dus hier opnieuw met !important. */
body .tippy-popper.tippy-reference-header { top: 65px !important; }

/* Achtergrond en bovenruimte van het paneel (28 sept, keuze gebruiker).
 * Het paneel had drie lagen met elk een eigen navy: de tippy-container van
 * de plugin (inline #212934), de Divi-sectie en de rij .bpv-mega-panelrow
 * (style.css, rgba(28,35,48,.97)). Alle drie nu hetzelfde donkergroen, anders
 * schemert de ene laag door de andere heen. Bovenpadding van de rij was 40px
 * (Divi, per mega-layout !important in de cache); nu 80px. */
body .tippy-popper.tippy-reference-header .tippy-content,
body .tippy-popper.tippy-reference-header .divimegapro-body .et_pb_section,
body .tippy-popper.tippy-reference-header .et_pb_row.bpv-mega-panelrow {
  background-color: #1f2b23 !important;
}
body .tippy-popper.tippy-reference-header .et_pb_row.bpv-mega-panelrow {
  padding-top: 80px !important;
  /* style.css gaf de rij een slagschaduw van 70px. Die kleurde de sectie
   * rond de rij donkerder, waardoor je twee tinten groen zag met een rand
   * ertussen. De schaduw hoort om het hele paneel, niet om de binnenrij. */
  box-shadow: none !important;
}
body .tippy-popper.tippy-reference-header .tippy-content {
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
/* De plugin zet een vaste hoogte (inline) op het paneel, berekend voordat
 * de extra padding er was; de inhoud liep er dan onderuit. Hoogte volgt nu
 * de inhoud. Het oude gouden streepje onder het paneel (style.css, ::before
 * op de vaste hoogte) liep daardoor dwars door het paneel heen: weg. */
body .tippy-popper.tippy-reference-header .divimegapro { height: auto !important; }
body .tippy-popper.tippy-reference-header::before { display: none !important; }

/* Menubalk op laptopbreedte op één regel houden.
 * style.css geeft elk menu-item een vaste breedte van 180px. Zeven items
 * (inclusief het logo) is ~1280px; smaller dan ~1340px schermbreedte schoof
 * "Contact" naar een tweede regel, half achter het logo, en werd de balk
 * 103px hoog. Tussen 981px (daaronder het mobiele menu) en 1400px delen de
 * zes tekstitems nu de ruimte naast het logo, dat zijn 180px houdt. */
@media (min-width: 981px) and (max-width: 1400px) {
  #et-top-navigation #top-menu li:not(.centered-inline-logo-wrap) {
    /* vw, geen %: de nav is inline-block zonder eigen breedte, dus een %
     * verwees naar zichzelf en drukte de items in elkaar. 62px = padding van
     * de container, 20px = speling voor een scrollbalk, 180px = het logo. */
    width: calc((100vw - 62px - 20px - 180px) / 6 - 5px) !important;
  }
  #et-top-navigation #top-menu > li > a {
    font-size: clamp(12px, 1.05vw, 14px) !important;
    white-space: nowrap;
  }
}

/* Footer en de CTA-balk met de offerteknop. Staan in het theme builder
 * footer-template (338981) en dus op elke pagina.
 *
 * :has(.bpv) in plaats van een opt-in klasse: de footer volgt vanzelf zodra er
 * op die pagina minstens één omgezette sectie staat, en blijft ongemoeid op de
 * pagina's die nog niet om zijn. Zo hoef je nergens een bodyklasse te zetten. */
body:has(.bpv) .bpv-cta {
  --achtergrond: var(--donker-achtergrond);
  --kop:         var(--donker-kop);
  --tekst:       var(--donker-tekst);
  --label:       var(--donker-label);
  --knop:        var(--donker-knop);
  --knop-tekst:  var(--donker-knop-tekst);
  --knop-hover:  var(--donker-knop-hover);
  --accent:      var(--donker-accent);
  background-color: var(--achtergrond) !important;
}

body:has(.bpv) .bpv-cta h2, body:has(.bpv) .bpv-cta h3 { color: var(--kop) !important; }
body:has(.bpv) .bpv-cta p, body:has(.bpv) .bpv-cta .bpv-cta-trust { color: var(--tekst) !important; }
body:has(.bpv) .bpv-cta .sep { color: var(--label) !important; }

body:has(.bpv) .bpv-cta .bpv-cta-primary,
body:has(.bpv) .bpv-cta .bpv-cta-primary .et_pb_button {
  background: var(--knop) !important;
  color: var(--knop-tekst) !important;
  border: 0 !important;
  border-radius: var(--bpv-rond-knop) !important;
}

body:has(.bpv) .bpv-cta .bpv-cta-primary:hover,
body:has(.bpv) .bpv-cta .bpv-cta-primary .et_pb_button:hover { background: var(--knop-hover) !important; }


/* ============================================================================
 * 27. MOBIEL
 * Een breekpunt op 980px, waar Divi zelf ook omschakelt, en een op 600px
 * voor de telefoon.
 * ==========================================================================*/

@media (max-width: 980px) {

  :root {
    --bpv-sectie-boven: 56px;
    --bpv-sectie-onder: 48px;
  }

  .bpv-hero .et_pb_column { width: 100% !important; }

  .bpv-hero .bpv-herofoto .et_pb_image_wrap,
  .bpv-hero .bpv-herofoto img { min-height: 260px; }

  .bpv-hero .bpv-herotekst {
    min-height: 0;
    padding: var(--bpv-l) var(--bpv-m);
  }

  .et_pb_section.bpv-hero {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  .bpv-kaarten .bpv-specs { min-height: 0; }

  /* Divi 5 zet elke rij op flex-wrap:nowrap. Alleen width:100% meegeven is dan
   * niet genoeg: de kolommen krimpen mee in plaats van te stapelen, en lopen
   * bovendien buiten de rij. Gemeten op 375px: drie kaarten van 148px naast
   * elkaar met de derde buiten beeld, en elke gewone tweekolomsrij liep over.
   * De rij moet dus zelf mogen wrappen.
   *
   * Dit geldt voor ELKE rij, niet alleen voor kaarten. De allergenenrij is de
   * uitzondering: vier kleine iconen naast elkaar passen prima op een telefoon
   * en zouden onder elkaar een halve pagina vullen. */
  .bpv .et_pb_row:not(.bpv-allergenen) { flex-wrap: wrap !important; }

  .bpv .et_pb_row:not(.bpv-allergenen) > .et_pb_column {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 0 var(--bpv-l) !important;
  }

  .bpv .et_pb_row > .et_pb_column:last-child { margin-bottom: 0 !important; }

  /* De omgekeerde volgorde van variant A werkt op mobiel averechts: de foto
   * hoort altijd boven de tekst te staan. */
  .bpv-zalen .et_pb_row:nth-child(even) { flex-direction: row; }

  .bpv-zalen .bpv-zaalfoto .et_pb_image_wrap,
  .bpv-zalen .bpv-zaalfoto img { min-height: 220px; }

  .bpv .bpv-toc { columns: 1; }

  /* De galerij 1+2 wordt op mobiel drie beelden onder elkaar; naast elkaar
   * blijft er van het kleine tweetal niets over. */
  .bpv .bpv-galerij-3 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }
  .bpv .bpv-galerij-3 > *:first-child { grid-row: auto; }
  .bpv .bpv-galerij-3 img { height: 200px !important; }

  .bpv .bpv-usp,
  .bpv .et_pb_row.bpv-usp { padding: var(--bpv-m) !important; gap: var(--bpv-m); }

  .bpv .bpv-tussen-cta,
  .bpv .et_pb_row.bpv-tussen-cta { padding: var(--bpv-m) !important; }

  .bpv .bpv-allergenen { gap: var(--bpv-s); }
}

@media (max-width: 600px) {
  .bpv .et_pb_row { width: 88% !important; }
  .et_pb_section.bpv-hero-vol { min-height: 60vh; }

  /* Twee knoppen onder elkaar in plaats van afgekapt naast elkaar */
  .bpv .et_pb_button_module_wrapper {
    display: block !important;
    margin: 0 0 var(--bpv-xs) 0 !important;
  }
}


/* ============================================================================
 * 28. AFDRUK EN VOORKEUREN
 * ==========================================================================*/

@media (prefers-reduced-motion: reduce) {
  .bpv *, .bpv *::before, .bpv *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}