/* ===========================================================================
   custom-business1.css — eigen aanvullingen op de Crafto-styling voor business1.
   Alleen hier eigen CSS; raak de Crafto-bestanden (_crafto) nooit aan.
   =========================================================================== */

/* Klantlettertype geldt voor de HELE site. corporate.css (eerder geladen) zet
   --alt-font/--primary-font terug op Crafto-fonts; dit bestand laadt als laatste
   en laat ze daarom hier het gekozen klantlettertype (--brand-font) volgen. */
:root {
    --alt-font: var(--brand-font);
    --primary-font: var(--brand-font);
}

/* --- Brand-theming (HERBRUIKBAAR PATROON) --------------------------------
   Crafto's accent staat vast op --base-color (#2946f3) en wordt op ~67 plekken
   via var(--base-color) gebruikt (knoppen, labels, links, text-base-color, ...).
   Door 'm te koppelen aan de huisstijl neemt de héle template automatisch de
   merkkleur van elke klant over. --brand-* worden per klant gezet in _SiteLayout.
   Dit blok hoort in elke Crafto-template (alleen de mapping kan per template
   verschillen: hier accent = secundaire merkkleur). -------------------------- */
:root {
    --base-color: var(--brand-secondary-ink);          /* Crafto-accent → klant-accent (vlakken/knoppen) */
    --base-ink: var(--brand-secondary-ink);        /* accent als TEKST op een lichte achtergrond (auto-leesbaar) */
    /* corporate.css zet --dark-gray op een vaste navy (#242E45); die lekt door in koppen,
       donkere knoppen (btn-dark-gray) en social-icoontjes. Koppel 'm aan --brand-dark: een
       gegarandeerd-donkere merkkleur (3e huisstijlkleur als die donker genoeg is, anders een
       donkere tint van de hoofdkleur — zie _SiteLayout DarkBrand). Zo klopt het voor ELKE klant. */
    --dark-gray: var(--brand-dark);

    /* corporate.css zet --medium-gray op #878898. Dat is de kleur van ALLE bodytekst (Crafto zet
       `body { color: var(--medium-gray) }`) en haalt op wit maar 3,5:1 — onder de leesbaarheidsnorm
       van 4,5:1 voor gewone tekst. Iets donkerder maakt er 4,84:1 van, met dezelfde licht-blauwe
       ondertoon, dus de rustige uitstraling blijft.

       Raakt vrijwel alleen tekst. Deze variabele wordt in Crafto's style.css ook zes keer als
       achtergrond gebruikt, maar daarvan komt in business1 alleen `bg-medium-gray` voor: het
       "Uitverkocht"-badge met witte tekst. Dat wordt door een donkerdere achtergrond juist beter
       leesbaar, dus daar is niets te verliezen.

       Zelfde ingreep als in custom-beauty1.css (--medium-gray: #6F737A, keuze Jenny 02-08-2026).
       Keuze Jenny, 25-08-2026. */
    --medium-gray: #6E7180;
}

/* Crafto leidt enkele accent-gradients af van een vaste kleur i.p.v. --base-color;
   stem de meest zichtbare af op de huisstijl zodat niets "Crafto-blauw" blijft. */
.bg-gradient-base-color-transparent {
    background-image: linear-gradient(to right top, var(--brand-secondary), transparent) !important;
}

/* Primaire (accent)knoppen. Crafto zet hier de vaste --base-color (= de verdonkerde,
   leesbaar-als-tekst variant van de huisstijl, --brand-secondary-ink) met áltijd witte tekst.
   Bij een felle/lichte huisstijlkleur gaf dat een dof-donkere knop met slecht leesbare witte
   tekst. We gebruiken hier de échte huisstijlkleur (--brand-secondary) met de per klant berekende,
   gegarandeerd leesbare tekstkleur (--brand-on-secondary, WCAG: donker óf wit). Zo is elke primaire
   knop fris én leesbaar voor elke klant. custom-business1.css laadt als laatste → wint van Crafto. */
.btn.btn-base-color { background-color: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--brand-on-secondary); }
/* Hover: SOLIDE, iets donkerder merkkleur met de gegarandeerd-leesbare tekst (--brand-on-secondary).
   Bewust de achtergrond expliciet zetten (Crafto's default hover maakt de knop transparant, waardoor
   op een donkere pagina de donkere tekst onleesbaar werd). !important verslaat die Crafto-regel. */
.btn.btn-base-color:hover, .btn.btn-base-color:active {
    background-color: color-mix(in srgb, var(--brand-secondary) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--brand-secondary) 85%, #000) !important;
    color: var(--brand-on-secondary) !important;
}

/* "Ghost"-outline-knop die de tekstkleur van z'n omgeving volgt (currentColor): op een donker blok
   erft hij de witte sectie-tekst, op een licht blok de donkere -> altijd zichtbaar, in licht én donker.
   Gebruikt o.a. als secundaire knop in het Boekingen-blok ("Bekijk events"). */
.btn.wf-ghost-btn { background: transparent; border: 2px solid currentColor; color: inherit; }

/*  Een merkknop op een voorpagina-blok in de steunkleur viel weg: knop en achtergrond hadden dezelfde
    kleur ("Alle nieuws bekijken", SHOH 16-09-2026). Daar krijgt de knop de hoofdkleur, met de
    automatisch leesbare tekstkleur daarvan. In het donkere thema is dat blok de donkere leesvariant
    van de steunkleur; daar blijft de knop gewoon de steunkleur. */
body:not([data-bs-theme="dark"]) .wf-block-secondary .btn.btn-base-color {
    background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}
body:not([data-bs-theme="dark"]) .wf-block-secondary .btn.btn-base-color:hover,
body:not([data-bs-theme="dark"]) .wf-block-secondary .btn.btn-base-color:active {
    background-color: color-mix(in srgb, var(--brand-primary) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 85%, #000) !important;
}

/*  Datumbadge op de nieuwskaarten van de voorpagina: de echte steunkleur met leesbare tekst, zoals de
    knoppen, in plaats van de verdonkerde leesvariant (die werd een bruin vlak, SHOH 16-09-2026). */
.wf-date-badge.bg-base-color { background-color: var(--brand-secondary) !important; color: var(--brand-on-secondary) !important; }
.btn.wf-ghost-btn:hover, .btn.wf-ghost-btn:active { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; border-color: currentColor; }

/* --- Full-width i.p.v. boxed --------------------------------------------------
   corporate.css geeft .box-layout op desktop (>=1200px) 40px witranden links/rechts.
   Die smalle witranden zetten we uit zodat de site edge-to-edge (full screen) is. */
.box-layout { padding: 0; }
/*  PAARSE FLITS BIJ VERKLEINEN (Jenny, 13-09-2026). Crafto's mobiele menu "modern" (main.js) plakt een
    .navbar-show-modern-bg onder de pagina, en responsive.css geeft dat vlak onder 991px een eigen
    blauw-paars verloop over het hele scherm dat pas na 0,75s vervaagt. Bij het smaller maken van het
    venster scheen het daardoor even door de doorzichtige secties heen. business1 gebruikt dat menu niet
    (het heeft zijn eigen fq-menu), dus het vlak mag hier nooit bestaan. */
.navbar-show-modern-bg { display: none !important; }

/* --- Logo-formaat ---------------------------------------------------------
   Voor deze template mag het logo tot 150px hoog (bronlogo = 377x150, dus 1:1).
   De header is 'disable-fixed' (niet plakkend), dus de balk groeit gewoon mee.
   Wat verticale lucht in de navbar zodat het grote logo niet krap staat. */
header .navbar-brand img { max-height: 100px; width: auto; }
header .navbar          { padding-top: 10px; padding-bottom: 10px; }

/* --- Menubalk (Claude Design-handoff) --------------------------------------
   Chique tweelaagse header: crème utility-strip boven een witte hoofdnav. Het
   terracotta uit het ontwerp = klant-accent (var(--brand-secondary)); crème- en
   hover-tinten leiden we daar licht van af met color-mix (met vaste fallback),
   dus elke klant krijgt dit ontwerp automatisch in zijn eigen kleur. Neutrale
   warme grijzen en hairlines blijven vast (werken bij elke huisstijl). */

/* Bovenbalk (utility-strip) */
.biz-utilitybar { background: #F6F1EA; border-bottom: 1px solid #ECE3D7; font-size: 12.5px; }
.biz-utilitybar { background: color-mix(in srgb, var(--brand-secondary) 9%, #fff); border-bottom-color: color-mix(in srgb, var(--brand-secondary) 16%, #fff); }
.biz-ub-inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.biz-ub-contact { display: flex; align-items: center; gap: 18px; color: #8A7E6E; min-width: 0; }
.biz-ub-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.biz-ub-contact a { color: #8A7E6E; text-decoration: none; transition: color .2s; }
.biz-ub-contact a:hover { color: var(--brand-secondary-ink); }
.biz-ub-contact svg { stroke: var(--brand-secondary-ink); flex: none; }
.biz-ub-sep { color: #D8CBB8; }
.biz-ub-right { display: flex; align-items: center; gap: 16px; flex: none; }
.biz-ub-divider { width: 1px; height: 20px; background: #DCD1BF; }

/* Taalkeuze-dropdown (hergebruikt de Bootstrap-dropdown; statisch gepositioneerd) */
/*  De taalknop is dezelfde knop als de contactknop ernaast: .biz-btn-outline in de lage variant, met een
    ronde vlag (Jenny, 13-09-2026). De oude, kale knop had boven en onder een andere marge, en op een
    telefoon viel zijn hover-vlak buiten de balk (dat kwam door de 44px-aanraakhoogte, die hier bewust
    niet meer geldt, net als bij de contactknop). Kleur, hover en de donkere variant komen van .biz-btn-outline. */
.biz-lang { display: flex; align-items: center; }
.biz-utilitybar .biz-lang .biz-lang-btn { gap: 7px; padding: 4px 11px 4px 5px; font-size: 12.5px; font-weight: 600; line-height: 1.3; border-width: 1.5px; cursor: pointer; }
/*  Rond: het vlaggetje is 3:2, dus de svg wordt 150% breed en gecentreerd; zo wordt het uitgesneden
    in plaats van platgedrukt. Het uitklappaneel van het menu zet zijn eigen maat (fq-panel.css). */
.biz-lang-flag { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.10); flex: none; }
.biz-lang-flag svg { display: block; width: 150%; height: 100%; margin-left: -25%; }
/*  Vlag als afbeelding (talen zonder eigen SVG in de header, zoals Italiaans): rond bijgesneden. */
.biz-lang-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.biz-lang-chev { transition: transform .2s; }
.biz-lang-btn[aria-expanded="true"] .biz-lang-chev { transform: rotate(180deg); }
.biz-lang .dropdown-menu.biz-lang-menu { top: calc(100% + 8px); right: 0; left: auto; min-width: 168px; background: #fff; border: 1px solid #EBE3D6; border-radius: 8px; box-shadow: 0 14px 32px rgba(60,45,25,.16); padding: 6px; margin: 0; }
/*  Rijen in de taalkeuze: 3px ruimte onder elke rij (bij hover plakten ze aan elkaar) en een rand van 1px om
    elke niet-actieve taal. De actieve rij heeft een even brede, onzichtbare rand, zodat alle rijen even groot zijn. */
.biz-lang-menu li:not(:last-child) { margin-bottom: 3px; }
.biz-lang-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid #EBE3D6; border-radius: 6px; font-size: 13px; font-weight: 600; color: #3A3632; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.biz-lang-row:hover { background: #FBF3EA; color: #3A3632; }
.biz-lang-row.active { background: #FBF3EA; border-color: transparent; color: var(--brand-secondary-ink); }
.biz-lang-row .biz-lang-flag { width: 20px; height: 20px; }
.biz-lang-check { margin-left: auto; stroke: var(--brand-secondary-ink); flex: none; }

/* Winkelwagen */
.biz-cart { position: relative; display: inline-flex; align-items: center; color: #6B6355; padding: 4px; text-decoration: none; transition: color .2s; }
.biz-cart:hover { color: var(--brand-secondary-ink); }
.biz-cart-badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand-secondary); color: var(--brand-on-secondary); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* Hoofdnav in de ontwerp-stijl (actief = accentkleur + onderstreping) */
/* De Crafto-nav is absoluut gepositioneerd (zweeft boven de hero, top:0). De crème
   bovenbalk staat 40px in de normale flow, dus schuiven we de nav 40px omlaag zodat
   de strip vrij bovenaan blijft en de hero (top-space-margin = nav-hoogte) aansluit. */
header .navbar.biz-nav { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #EDE7DF; top: 40px; }
.biz-nav .navbar-brand img { max-height: 60px; max-width: 100%; }
/* Menu mag over meerdere regels vallen (alle items zichtbaar) zonder tegen logo/knoppen te botsen. */
.biz-nav .navbar-nav { flex-wrap: wrap; row-gap: 4px; }

/* Meertraps-menu: een subpagina die zélf subpagina's heeft klapt zijwaarts uit (flyout) op desktop.
   Crafto zet overflow:hidden op de dropdown; dat knipt de zijwaartse flyout weg -> forceren op visible. */
.biz-nav .navbar-nav .dropdown-menu { overflow: visible !important; }
/* static (geen eigen positioneer-context) zodat de flyout op de subs-LIJST ankert i.p.v. op de rij:
   zo begint de sub-sub-kolom op dezelfde hoogte als de subs (ze lopen gelijk). */
.biz-nav .dropdown-menu .wf-submenu { position: static; }
.biz-nav .dropdown-menu .wf-submenu > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.biz-nav .dropdown-menu .wf-submenu > a::after { content: "\203A"; font-size: 1.15em; line-height: 1; opacity: .55; }
/* Standaard verborgen (!important omdat Crafto's hover-regel anders álle geneste flyouts tegelijk toont);
   alleen de flyout van de daadwerkelijk gehoverde subpagina klapt uit. */
.biz-nav .dropdown-menu .wf-submenu > .dropdown-menu { position: absolute; top: 0; left: 100%; margin: 0; display: none !important; }
.biz-nav .dropdown-menu .wf-submenu:hover > .dropdown-menu { display: block !important; }
@media (max-width: 991px) {
  /* Op mobiel (hamburger): submenu's inline + ingesprongen i.p.v. zijwaarts uitklappen. */
  .biz-nav .dropdown-menu .wf-submenu > .dropdown-menu { position: static; display: block !important; left: 0; border: 0; box-shadow: none; padding-left: 14px; }
  .biz-nav .dropdown-menu .wf-submenu > a::after { content: none; }
}
/* Touch (geen betrouwbare hover): de sub-submenu's klappen NIET meer allemaal tegelijk uit.
   Een tik op een submenu-item opent alléén dat item in-lijn (accordion, één tegelijk); de menu-JS
   zet daarvoor .wf-open. .wf-touch wordt door de JS gezet o.b.v. touch-detectie (werkt ook op
   touch-laptops, waar @media hover faalt). Een lange lijst wordt scrollbaar zodat hij niet van het
   scherm loopt. */
@media (min-width: 992px) {
  /* Op touch geen hover-flyout (die zou op touch-laptops toch nog triggeren). */
  #wf-mainnav.wf-touch .dropdown-menu .wf-submenu:hover > .dropdown-menu { display: none !important; }
  /* Alleen het aangetikte item klapt in-lijn uit — en blend in het paneel (geen apart blokje):
     transparante achtergrond, volle breedte binnen het paneel, items ingesprongen onder de categorie. */
  #wf-mainnav.wf-touch .dropdown-menu .wf-submenu.wf-open > .dropdown-menu {
    position: static !important; display: block !important; left: auto; top: auto;
    width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  #wf-mainnav.wf-touch .dropdown-menu .wf-submenu.wf-open > .dropdown-menu > li > a { padding-left: 45px !important; opacity: .85; }
  #wf-mainnav.wf-touch .dropdown-menu .wf-submenu > a::after { transition: transform .15s; }
  #wf-mainnav.wf-touch .dropdown-menu .wf-submenu.wf-open > a::after { transform: rotate(90deg); }
  #wf-mainnav.wf-touch > .nav-item.dropdown > .dropdown-menu { max-height: 74vh; overflow-y: auto; }
}
/* Crafto rekt nav-links tot de volle balkhoogte; de onderstreping via een pseudo-element
   (kolom-flex) zodat hij pal onder de tekst plakt i.p.v. onderaan de hoge link. */
.biz-nav .navbar-nav .nav-link { flex-direction: column; justify-content: center; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #3A3632; transition: color .2s; }
.biz-nav .navbar-nav .nav-link::after { content: ""; display: block; width: 100%; height: 2px; margin-top: 4px; border-radius: 2px; background: transparent; transition: background-color .2s; }
.biz-nav .navbar-nav .nav-link:hover { color: var(--brand-secondary-ink); }
.biz-nav .navbar-nav .nav-link.wf-active { color: var(--brand-secondary-ink); }
.biz-nav .navbar-nav .nav-link.wf-active::after { background: var(--brand-secondary); }

/* CTA-knoppen rechts */
.biz-cta { align-items: center; gap: 12px; }
.biz-btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 1.5px solid var(--brand-secondary); border-radius: 4px; background: transparent; color: var(--brand-secondary-ink); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s; }
.biz-btn-outline:hover { background: #FBF3EA; background: color-mix(in srgb, var(--brand-secondary) 10%, #fff); color: var(--brand-secondary-ink); }
.biz-btn-fill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 4px; background: var(--brand-secondary); color: var(--brand-on-secondary); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: filter .2s; }
.biz-btn-fill:hover { filter: brightness(.92); color: #fff; }
.biz-btn-fill svg, .biz-btn-outline svg { flex: none; }

/* Responsive: op smalle schermen adres inklappen (telefoon + taal + mandje blijven) */
@media (max-width: 575.98px) {
  .biz-ub-inner { padding: 0 16px; gap: 10px; }
  .biz-ub-loc, .biz-ub-sep { display: none; }
}
/*  Actieknop in de bovenbalk (Jenny, 13-09-2026). Onder 960px verdwijnt .fq-nav__cta uit de menubalk en
    stond er bovenin alleen het telefoonnummer; nu daarnaast een lage variant van dezelfde knop. Bewust
    niet 44px hoog: de bovenbalk is daar te smal voor, en de knop staat ook groot in het uitklappaneel.
    Op een telefoon staan telefoon | knop samen in het midden. Een balk die alleen de knop heeft
    (geen adres, telefoon, taal of winkel) bestaat alleen op die smalle schermen. */
.biz-ub-cta, .biz-ub-ctadeler, .biz-utilitybar.biz-ub-alleenmob { display: none; }
@media (max-width: 960px) {
  .biz-utilitybar.biz-ub-alleenmob { display: block; }
  .biz-ub-ctadeler { display: block; flex: none; }
  .biz-utilitybar .biz-ub-cta {
    display: inline-block; max-width: min(58vw, 260px); overflow: hidden; text-overflow: ellipsis;
    padding: 5px 13px; font-size: 12.5px; line-height: 1.3; border-width: 1.5px;
  }
}
@media (max-width: 575.98px) {
  .biz-ub-inner { justify-content: center; }
  .biz-ub-contact { gap: 12px; }
}
/* Footer-logo. Stond eerder gelijk aan het header-logo; sinds 11-08-2026 bewust iets groter
   (keuze Tom: +10px hier, +5px in de menubalk) omdat het in de voet meer ruimte omheen heeft.
   Crafto cap't 'footer .footer-logo img' op max-height:30px; we overschrijven dat met een
   even specifieke regel (laadt later). */
/*  max-width als min(...) i.p.v. een vast getal: bij een breed (liggend) logo raakt de
    breedte-cap eerder dan de hoogte-cap, en op een smal scherm liep het logo daardoor
    buiten de pagina — waardoor de héle site zijwaarts kon scrollen. Gemeten bij Centrum
    voor Stressmanagement (logo 1386x256, dus 5,4:1): 7px overloop op 375px. Op ruime
    schermen verandert er niets, daar blijft het gewoon 360px. */
footer .footer-logo img { height: 74px; width: auto; max-height: none; max-width: min(360px, 100%); }
/*  Eigen logohoogte in de footer (Layout website > Footer > Logo & bedrijfstekst, Tom 14-09-2026). Alleen als de
    klant de schuif gebruikte; anders blijft de 74px hierboven. Op een telefoon hooguit 120px. */
footer .footer-logo.wf-flogo-maat img { height: var(--wf-flogo-h, 74px); max-width: min(480px, 100%); }
@media (max-width: 575.98px) { footer .footer-logo.wf-flogo-maat img { height: min(var(--wf-flogo-h, 74px), 120px); } }

/* Vrij footer-blok: behoud de regelovergangen die de klant intypt (bijv. openingstijden). */
.footer-custom-text { white-space: pre-line; }

/* --- Hero-slider (Slider-module) ------------------------------------------
   Lichte Swiper-hero met de uitstraling van het origineel: fullscreen,
   afbeelding + overlay, Ken Burns-zoom, captions die invliegen, scroll-pijl. */
/* Hoogte via een variabele, zodat de klant in het dashboard (Voorpagina -> Slider -> Hoogte) een eigen
   hoogte kan zetten: die komt als inline --biz-hero-h op de sectie eromheen. */
.biz-hero { height: var(--biz-hero-h, 90vh); min-height: min(var(--biz-hero-h, 560px), 560px); }
.biz-hero-slide { position: relative; overflow: hidden; background-color: var(--brand-dark); }
.biz-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1); }
/* Donkere waas voor leesbaarheid (tevens fallback voor browsers zonder color-mix). */
.biz-hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(10,18,35,.42) 0%, rgba(10,18,35,.72) 60%, rgba(10,18,35,.84) 100%); }
/* + warme merk-gloed uit de hoek: de hero ademt automatisch de klant-accentkleur
   (--brand-secondary), dus per klant zijn eigen sfeer i.p.v. een vaste kleur. */
.biz-hero-overlay { background: linear-gradient(125deg, color-mix(in srgb, var(--brand-secondary) 42%, transparent) 0%, transparent 55%), radial-gradient(circle at 50% 45%, rgba(10,18,35,.34) 0%, rgba(10,18,35,.66) 58%, rgba(10,18,35,.82) 100%); }
.biz-hero-content { position: relative; z-index: 2; }
.biz-hero-title { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.06; }

/* Subtitel in de accentkleur en een volle accent-knop met hover (per klant via --brand-secondary). */
.biz-hero-sub { color: var(--brand-secondary-ondark); font-weight: 700; font-size: 1.05rem; letter-spacing: 3px; text-shadow: 0 1px 12px color-mix(in srgb, var(--brand-secondary) 45%, transparent); }
/* Pijl náást de tekst (nowrap + inline-flex) zodat de knop niet hoger wordt. */
.biz-hero-btn { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; background: var(--brand-secondary); border-color: var(--brand-secondary-ink); color: var(--brand-on-secondary); box-shadow: 0 10px 26px rgba(0,0,0,.22); transition: transform .28s ease, box-shadow .28s ease, filter .28s ease; }
.biz-hero-btn:hover, .biz-hero-btn:focus { background: var(--brand-secondary); border-color: var(--brand-secondary-ink); color: var(--brand-on-secondary); transform: translateY(-5px) scale(1.04); box-shadow: 0 22px 46px rgba(0,0,0,.40); filter: brightness(1.13); }
.biz-hero-btn i { transition: transform .28s ease; }
.biz-hero-btn:hover i { transform: translateX(5px); }

/* Concentrische cirkels achter de gecentreerde tekst (zoals het origineel). */
.biz-hero-rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.biz-hero-rings span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.85); border-radius: 50%; opacity: 0; }
.biz-hero-rings .r1 { width: 460px; height: 460px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.20); }
.biz-hero-rings .r2 { width: 680px; height: 680px; border: 1px solid rgba(255,255,255,.14); }
.biz-hero-rings .r3 { width: 920px; height: 920px; border: 1px solid rgba(255,255,255,.09); }
.biz-hero .swiper-slide-active .biz-hero-rings span { animation: bizRingIn 1.2s ease-out forwards; }
.biz-hero .swiper-slide-active .biz-hero-rings .r2 { animation-delay: .12s; }
.biz-hero .swiper-slide-active .biz-hero-rings .r3 { animation-delay: .24s; }
@keyframes bizRingIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Captions animeren in op de actieve slide; Ken Burns-zoom op de achtergrond. */
.biz-hero-sub, .biz-hero-title, .biz-hero-cta { opacity: 0; transform: translateY(40px); }
.biz-hero .swiper-slide-active .biz-hero-sub   { animation: bizHeroIn .8s .25s ease-out forwards; }
.biz-hero .swiper-slide-active .biz-hero-title { animation: bizHeroIn .9s .45s ease-out forwards; }
.biz-hero .swiper-slide-active .biz-hero-cta   { animation: bizHeroIn .8s .75s ease-out forwards; }

/*  VIDEO-hero: dezelfde hero, maar zonder swiper eromheen. De regels hierboven hangen aan
    .swiper-slide-active, en die klasse zet Swiper — bij een video is er geen Swiper, dus zonder
    deze regels blijft de tekst op `opacity: 0` staan en zie je alleen beeld. Zelfde tijden, zodat
    een klant die van foto's naar video wisselt niets ziet veranderen aan de tekstopbouw. */
.biz-hero-videoslide { height: 100%; }
.biz-hero-videoslide .biz-hero-sub   { animation: bizHeroIn .8s .25s ease-out forwards; }
.biz-hero-videoslide .biz-hero-title { animation: bizHeroIn .9s .45s ease-out forwards; }
.biz-hero-videoslide .biz-hero-cta   { animation: bizHeroIn .8s .75s ease-out forwards; }
.biz-hero-videoslide .biz-hero-rings span { animation: bizRingIn 1.2s ease-out forwards; }
.biz-hero-videoslide .biz-hero-rings .r2  { animation-delay: .12s; }
.biz-hero-videoslide .biz-hero-rings .r3  { animation-delay: .24s; }
/* De beeld-animatie volgt de keuze in het dashboard: Ken Burns = langzaam doorzoomen, "Inzoomen" =
   het beeld komt bij het invaden op zijn plek. Kiest de klant een gewone overgang, dan staat het beeld
   stil — dan is de overgang zelf de animatie. */
/*  Bewust transitions en geen animations: een animation op .swiper-slide-active laat het beeld van de
    vertrekkende slide op slag terugspringen, terwijl die slide nog staat uit te vaden — dat schokt. De
    trage duur staat op de ruststand en de snelle op de actieve slide, dus de terugweg beweegt tijdens
    het uitvaden te weinig om op te vallen. */
.biz-hero .biz-hero-kenburns { transform: scale(1); transition: transform 5s ease-out; }
.biz-hero .swiper-slide-active .biz-hero-kenburns { transform: scale(1.12); transition: transform 7s ease-out; }
.biz-hero .biz-hero-zoomin { transform: scale(1.12); transition: transform 5s ease-out; }
.biz-hero .swiper-slide-active .biz-hero-zoomin { transform: scale(1); transition: transform 1.6s ease-out; }
@keyframes bizHeroIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .biz-hero .biz-hero-kenburns, .biz-hero .swiper-slide-active .biz-hero-kenburns,
  .biz-hero .biz-hero-zoomin, .biz-hero .swiper-slide-active .biz-hero-zoomin { transform: none; transition: none; }
}

/* Nav-pijlen en pagination-indicator (actieve stip = accentkleur). */
.biz-hero .swiper-button-prev, .biz-hero .swiper-button-next { color:#fff; width:52px; height:52px; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(255,255,255,.10); transition:background .25s; }
.biz-hero .swiper-button-prev:hover, .biz-hero .swiper-button-next:hover { background:rgba(255,255,255,.22); }
.biz-hero .swiper-button-prev::after, .biz-hero .swiper-button-next::after { display:none; }
.biz-hero .swiper-pagination { z-index:3; }
.biz-hero .swiper-pagination-bullet { width:10px; height:10px; background:#fff; opacity:.45; transition:opacity .25s ease, width .25s ease, background-color .25s ease; }
.biz-hero .swiper-pagination-bullet-active { opacity:1; width:30px; border-radius:6px; background:var(--brand-secondary); }

/* Sponsors-carousel (clients-style-01) paginatie: er is geen echte 'swiper-pagination-style-1',
   dus de actieve bullet viel terug op Swipers standaard-BLAUW (#007aff) — dat botst met de
   huisstijl. Nette merk-bullets, zelfde taal als de hero: gedempte stip, actieve iets langer.
   Op de donkere template de licht-genoeg-gemaakte merkkleur. Alleen gebruikt door het sponsors-blok. */
.clients-style-01 { --swiper-pagination-color: var(--brand-secondary); }
.clients-style-01 .swiper-pagination-bullet { width: 9px; height: 9px; background: var(--brand-secondary); opacity: .3; border-radius: 999px; transition: width .25s ease, opacity .25s ease; }
.clients-style-01 .swiper-pagination-bullet-active { width: 26px; opacity: 1; background: var(--brand-secondary); }
[data-bs-theme="dark"] .clients-style-01 :is(.swiper-pagination-bullet, .swiper-pagination-bullet-active) { background: var(--brand-secondary-ondark, #d8c6ad); }

@media (max-width: 991px) {
  .biz-hero { height: 78vh; min-height: 480px; }
  .biz-hero-overlay { background: linear-gradient(160deg, color-mix(in srgb, var(--brand-secondary) 34%, transparent) 0%, transparent 48%), linear-gradient(180deg, rgba(10,18,35,.50), rgba(10,18,35,.80)); }
}

/* --- Magic cursor uit -----------------------------------------------------
   Crafto toont op .magic-cursor-secties (sliders) een volg-cursor (#ball-cursor).
   Die zetten we uit en geven de normale muisaanwijzer terug. */
#magic-cursor, #ball-cursor, .mouse-cursor { display: none !important; }
.magic-cursor, .magic-cursor-wrapper, .magic-cursor *, .magic-cursor-wrapper * { cursor: auto !important; }

/* =========================================================================
   GALERIJ voorpagina-blok (services-box-style-05): alle witte titelvakken
   even groot, ongeacht de tekstlengte — vaste minimumhoogte + gecentreerd.
   ========================================================================= */
.biz-gallery-box {
    width: 280px;
    max-width: 90%;
    height: 190px;          /* vaste hoogte -> alle vakken identiek, ongeacht 1- of 2-regelige titel */
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =========================================================================
   GALERIJ album-detail: "Speelse fotomuur" (masonry via CSS-kolommen).
   ========================================================================= */
.wf-masonry { column-count: 3; column-gap: 16px; }
.wf-masonry-item { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 991.98px) { .wf-masonry { column-count: 2; } }
@media (max-width: 575.98px)  { .wf-masonry { column-count: 1; } }

/* =========================================================================
   BLOG "metro"-overzicht: tegels met tekst over de foto; dubbele tegels (grid-item-double)
   krijgen meer hoogte voor het metro-effect, ongeacht de foto-verhouding.
   ========================================================================= */
.biz-blog-metro-tile { display: block; height: 300px; }
.grid-item-double .biz-blog-metro-tile { height: 630px; }
.biz-blog-metro-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.biz-blog-metro-tile:hover img { transform: scale(1.07); }
.biz-blog-metro-overlay { position: absolute; inset: 0; transition: background .4s ease; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.15) 55%, rgba(0,0,0,.04)); }
.biz-blog-metro-tile:hover .biz-blog-metro-overlay { background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.4) 65%, rgba(0,0,0,.15)); }
.biz-blog-metro-caption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; z-index: 2; }
/* Tekstblok komt iets omhoog en "Lees meer" verschijnt bij hover. */
.biz-blog-metro-text { transition: transform .4s ease; }
.biz-blog-metro-tile:hover .biz-blog-metro-text { transform: translateY(-6px); }
.biz-blog-readmore { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease, max-height .4s ease, margin-top .4s ease; }
.biz-blog-metro-tile:hover .biz-blog-readmore { opacity: 1; max-height: 30px; transform: translateY(0); margin-top: 10px; }
@media (max-width: 575.98px) { .grid-item-double .biz-blog-metro-tile { height: 300px; } }

/* Meta-regel op de tegel (datum · leestijd) met een klein scheidingsbolletje. */
.biz-blog-metro-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; margin: 0 9px; }

/* Uitgelichte (grote) tegel — hoger, met wat meer ademruimte in de caption. */
.biz-blog-metro-tile-lg { height: 480px; }
.biz-blog-metro-tile-lg .biz-blog-metro-caption { padding: 45px; }
/* Sterker contrast onderaan de uitgelichte tegel, zodat titel + intro altijd goed leesbaar zijn. */
.biz-blog-metro-tile-lg .biz-blog-metro-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.4) 55%, rgba(0,0,0,.1)); }
.biz-blog-metro-tile-lg:hover .biz-blog-metro-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.55) 60%, rgba(0,0,0,.2)); }
/* Gestapelde tegels naast de uitgelichte tegel op de voorpagina. Zowel de metro- als de simpele
   tegel op 228px, zodat twee gestapeld (2x228 + gutter) even hoog uitkomen als de uitgelichte tegel. */
.wf-blog-side .biz-blog-metro-tile,
.wf-blog-side .biz-blog-simple-tile { height: 228px; }
@media (max-width: 991.98px) {
  .biz-blog-metro-tile-lg { height: 380px; }
  .biz-blog-metro-tile-lg .biz-blog-metro-caption { padding: 35px; }
}
@media (max-width: 575.98px) {
  .biz-blog-metro-tile-lg { height: 320px; }
  .wf-blog-side .biz-blog-metro-tile,
  .wf-blog-side .biz-blog-simple-tile { height: 220px; }
}

/* =========================================================================
   BLOG "simple"-overzicht (business1): gelijkmatige staande kaarten — foto met
   overlay, gecentreerd datum + titel, "lees meer" die bij hover verschijnt.
   Naar Crafto blog-simple. Koppen volgen het klant-font (--alt-font).
   ========================================================================= */
.biz-blog-simple-tile { height: 360px; }
.biz-blog-simple-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.biz-blog-simple-tile:hover img { transform: scale(1.06); }
.biz-blog-simple-overlay { position: absolute; inset: 0; transition: background .4s ease;
    background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.15) 60%, rgba(0,0,0,.03)); }
.biz-blog-simple-tile:hover .biz-blog-simple-overlay { background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.42) 70%, rgba(0,0,0,.15)); }
.biz-blog-simple-caption { position: absolute; inset: 0; z-index: 2; padding: 26px;
    display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
.biz-blog-simple-date { font-family: var(--alt-font); font-size: 12.5px; letter-spacing: .08em;
    text-transform: uppercase; color: #fff; opacity: .85; margin-bottom: 6px; }
.biz-blog-simple-title { display: block; font-family: var(--alt-font); font-weight: 600;
    color: #fff; font-size: 1.15rem; line-height: 1.3; }
.biz-blog-simple-readmore { display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12.5px; font-weight: 700; text-transform: uppercase; margin-top: 12px;
    opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.biz-blog-simple-tile:hover .biz-blog-simple-readmore { opacity: 1; transform: translateY(0); }
/* Categorie-label linksboven op de "simple"-tegel — alleen waar ShowCategory aan staat ("Meer artikelen"). */
.biz-blog-simple-cat { position: absolute; top: 16px; left: 16px; z-index: 3;
    background: #fff; color: var(--dark-gray); font-family: var(--alt-font); font-weight: 700;
    text-transform: uppercase; font-size: 11px; letter-spacing: .06em; padding: 5px 12px; border-radius: 100px; }

/* Leesvoortgangsbalk (blogartikel): dun balkje bovenaan dat meeloopt tijdens het lezen. */
.biz-read-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1080; pointer-events: none; background: transparent; }
.biz-read-progress span { display: block; height: 100%; width: 0; background: var(--base-color); transition: width .1s linear; }

/* Auteur-bio-blok onder het artikel. */
.biz-art-authorbox { display: flex; align-items: flex-start; gap: 20px; margin: 45px 0 0; padding: 30px;
    background: var(--very-light-gray, #f7f7f5); border-radius: 8px; }
.biz-art-authorbox-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.biz-art-authorbox-avatar--initials { display: inline-flex; align-items: center; justify-content: center;
    background: var(--base-color); color: var(--brand-on-secondary, #fff); font-family: var(--alt-font); font-weight: 700; font-size: 24px; }
.biz-art-authorbox-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--medium-gray); margin-bottom: 3px; }
.biz-art-authorbox-name { font-size: 19px; font-weight: 700; color: var(--dark-gray); line-height: 1.2; }
.biz-art-authorbox-role { font-size: 14px; color: var(--base-color); margin-top: 2px; }
.biz-art-authorbox-bio { font-size: 15px; line-height: 1.6; color: var(--medium-gray); margin: 10px 0 0; }
@media (max-width: 575.98px) { .biz-art-authorbox { flex-direction: column; gap: 14px; padding: 24px; } }

/* =========================================================================
   BLOG voorpagina-blok — kleur-adaptieve sectiekop. Standaard donkere tekst
   (werkt op wit/grijs/standaard); op een donkere/foto-achtergrond (wf-on-dark
   of wf-block-dark, gezet door het blok-stijlsysteem) wordt de kop wit.
   ========================================================================= */
.wf-blog-title { color: var(--dark-gray); }
.wf-blog-pill { background: color-mix(in srgb, var(--base-color) 12%, #fff); color: var(--base-ink); }
.wf-blog-headbtn { background: transparent; border: 2px solid var(--dark-gray); color: var(--dark-gray); }
.wf-blog-headbtn:hover { background: var(--dark-gray); color: #fff; border-color: var(--dark-gray); }

.wf-blog-home:is(.wf-on-dark, .wf-block-dark) .wf-blog-title { color: #fff; }
.wf-blog-home:is(.wf-on-dark, .wf-block-dark) .wf-blog-pill { background: rgba(255,255,255,.16); color: #fff; }
.wf-blog-home:is(.wf-on-dark, .wf-block-dark) .wf-blog-headbtn { border-color: rgba(255,255,255,.5); color: #fff; }
.wf-blog-home:is(.wf-on-dark, .wf-block-dark) .wf-blog-headbtn:hover { background: #fff; color: var(--dark-gray); border-color: #fff; }

/* =========================================================================
   PAGINA (generieke contentpagina): nette Crafto-opmaak voor klantpagina's —
   sticky sectienavigatie op subpagina's + subpagina-kaarten met hover-effecten.
   ========================================================================= */
/* Sticky zijbalk met de navigatie binnen dit onderdeel. */
.biz-page-nav { position: sticky; top: 110px; }
.biz-page-nav ul { list-style: none; }
.biz-page-nav a { transition: color .25s ease, transform .25s ease; }
.biz-page-nav li > a:hover { color: var(--base-ink) !important; }
.biz-page-nav li.active > a { color: var(--base-ink) !important; font-weight: 700; }
.biz-page-nav li.active > a .feather { transform: translateX(2px); }

/* Subpagina-kaarten: lichte lift + foto-zoom + pijl die meebeweegt bij hover. */
.biz-page-card { transition: transform .4s ease, box-shadow .4s ease; }
.biz-page-card:hover { transform: translateY(-6px); }
.biz-page-card-img { overflow: hidden; }
.biz-page-card-img img { width: 100%; height: 200px; object-fit: cover; transition: transform .6s ease; }
.biz-page-card:hover .biz-page-card-img img { transform: scale(1.07); }
.biz-page-readmore i { transition: transform .3s ease; }
.biz-page-card:hover .biz-page-readmore i { transform: translateX(5px); }
/* Donkere modus: de "Lees meer"-link (text-base-color = donkere merk-primary) is te donker op de donkere
   overzichtskaart (contrast ~2.5) → lichte huisstijl-tint. Licht-eiland houdt de primary. */
[data-bs-theme="dark"] .biz-page-card .biz-page-readmore { color: var(--brand-secondary-ondark, #d8c6ad) !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .biz-page-card .biz-page-readmore { color: var(--base-color) !important; }

/* Kop-banner (hoofdfoto) titel: niet massaal bij lange titels; schaalt mee. */
.page-title-extra-large h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; line-height: 1.15 !important; }

/*  Fotobovenbalk op de subpagina's: 450px hoog op een groot scherm (Jenny, 13-09-2026; de donkere variant
    kort daarna ook). Stond op 350px
    uit corporate.css; met een hoofdfoto als achtergrond was dat op een breed scherm een smalle strook.

    - Alleen vanaf 1200px. Tablets houden hun 350px, ook liggend (iPad 1024px, iPad Air 1180px), en een
      telefoon houdt de 300px uit corporate.css.
    - Geldt voor business1 én business1-dark: die delen deze CSS. Eerst stond de donkere variant er met
      :not([data-bs-theme="dark"]) buiten, maar die moest dezelfde hoogte krijgen.
    - Gericht op .page-title-big-typography en niet op .small-screen los: die klasse is een Crafto-
      hulpmiddel dat elders ook kan opduiken. Elke subpagina rendert zijn kop via _PageTitle.cshtml (de
      voorpagina en de onepage hebben een eigen hero en vallen er dus buiten), en de boekingspagina's
      gebruiken dezelfde partial.
    - !important omdat de 350px in corporate.css dat ook heeft; deze regel wint daarna op specificiteit,
      los van de volgorde waarin de twee bestanden laden. */
@media (min-width: 1200px) {
    /*  Alleen met een foto in de balk (.wf-kop-foto, gezet in _PageTitle). Zonder foto is de balk een vlak in de
        huisstijlkleur, en dat oogt op 450px als een lege strook; die blijft op de 350px uit corporate.css
        (Jenny, 13-09-2026). */
    .page-title-big-typography.wf-kop-foto .small-screen { height: 450px !important; }
}
.page-title-large h1       { font-size: clamp(1.7rem, 3vw, 2.3rem) !important;   line-height: 1.15 !important; }

/* Body-typografie van een klantpagina (vrije rich-text). Koppen krijgen een nette,
   kleinere hiërarchie zodat tussenkoppen altijd kleiner zijn dan de paginatitel,
   ongeacht welk kopniveau de klant kiest. */
/*  Nooit kleiner dan 17px, de maat van de lopende tekst op de andere pagina's. business1 rekent met
    een kleinere basismaat, waardoor 1.125rem hier op 13,5px uitkwam: de tekst op een projectpagina
    was daardoor zichtbaar kleiner dan de rest van de site (Tom, 13-09-2026). */
.biz-page-body { font-size: max(17px, 1.125rem); line-height: 1.78; }
.biz-page-body p { margin: 0 0 1.1em; }
/* Koppen in paginatekst: de accentkleur (--base-color) i.p.v. de hoofdkleur, want die laatste kan
   per klant licht zijn (bv. lichtgrijs) waardoor koppen wegvallen. h4 net groter dan de bodytekst. */
.biz-page-body h2, .biz-page-body h3, .biz-page-body h4, .biz-page-body h5, .biz-page-body h6 { color: var(--base-ink); font-weight: 700; line-height: 1.3; margin: 1.6em 0 .6em; }
.biz-page-body h2 { font-size: 1.6rem; }
.biz-page-body h3 { font-size: 1.35rem; }
.biz-page-body h4 { font-size: 1.2rem; }
.biz-page-body h5 { font-size: 1rem; }
.biz-page-body h6 { font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; }
/* Premium opsommingen: een fijne chevron in de huisstijl-accentkleur i.p.v. een basic stip, met het
   vetgedrukte kernwoord mee in accent en ruime regelafstand. Onderdeel van de Webfix-afwerking die
   elke site onderscheidt van standaard-templates. */
.biz-page-body ul { list-style: none; padding-left: 0; margin-bottom: 1.3em; }
.biz-page-body ul > li { position: relative; padding-left: 1.7em; margin-bottom: .65em; }
.biz-page-body ul > li::before {
    content: ""; position: absolute; left: .15em; top: .58em;
    width: .4em; height: .4em; transform: rotate(45deg);
    border-right: 2px solid var(--base-color); border-top: 2px solid var(--base-color);
}
.biz-page-body ul ul { margin: .5em 0 0; }
.biz-page-body ul > li > strong:first-child { color: var(--base-ink); }
.biz-page-body ol { padding-left: 1.4em; margin-bottom: 1.3em; }
.biz-page-body ol > li { margin-bottom: .65em; }
.biz-page-body ol > li::marker { color: var(--base-ink); font-weight: 700; }
.biz-page-body li { display: list-item; }
.biz-page-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; }
/* Knoppen in de paginatekst krijgen lucht t.o.v. de tekst erboven, zodat een call-to-action nooit
   tegen de tekst plakt (premium afwerking; werkt met én zonder regelafbreking ervoor). */
.biz-page-body a.btn, .biz-richtext a.btn { margin-top: 1.4em; }

/* =========================================================================
   BLOG DETAIL — artikel-opmaak (byline met auteur, sierletter, tags, terug- +
   deel-knoppen) en rich-text-verrijking van de klanttekst (pull-quote, foto-
   onderschrift, kop-accent). Alle kleur volgt var(--base-color) en koppen het
   klant-lettertype (--alt-font), zodat het ontwerp voor élke business1-klant
   in de eigen huisstijl verschijnt (nooit een vaste kleur/font).
   ========================================================================= */

/* Byline-rij: categorie-pil · auteur (avatar + naam) · datum + leestijd rechts. */
.biz-art-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
    padding-bottom: 24px; border-bottom: 1px solid color-mix(in srgb, var(--base-color) 16%, #ece7df); }
.biz-art-cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    background: var(--base-color); color: var(--brand-on-secondary); border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.biz-art-cat i, .biz-art-cat .feather { font-size: 14px; }

/* Auteur: ronde foto óf initialen-terugval, met kleine "Geschreven door"-regel. */
.biz-art-author { display: flex; align-items: center; gap: 12px; }
.biz-art-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.biz-art-avatar--initials { display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--base-color) 12%, #fff); color: var(--base-ink);
    font-weight: 700; font-size: 14px; border: 1px solid color-mix(in srgb, var(--base-color) 30%, #fff); }
.biz-art-author-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--medium-gray); line-height: 1.3; }
.biz-art-author-name { font-size: 14px; font-weight: 700; color: var(--dark-gray); line-height: 1.3; }

/* Datum + leestijd, rechts uitgelijnd; icoontjes in de accentkleur. */
.biz-art-meta { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 13px; color: var(--medium-gray); }
.biz-art-meta span { display: inline-flex; align-items: center; gap: 7px; }
.biz-art-meta i, .biz-art-meta .feather { color: var(--base-ink); }

/* Lead-alinea met sierletter (drop-cap) in het klant-font + accentkleur. */
.biz-art-lead { font-size: 1.32rem; line-height: 1.62; color: var(--dark-gray); font-weight: 500; margin: 32px 0 26px; }
.biz-art-lead::first-letter { font-family: var(--alt-font); font-size: 3.4em; line-height: .8;
    float: left; color: var(--base-ink); font-weight: 700; margin: 6px 12px 0 0; }

/* Tags als pilletjes met hover naar de accentkleur. */
.biz-art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 40px; padding-top: 26px; border-top: 1px solid color-mix(in srgb, var(--base-color) 16%, #ece7df); }
.biz-art-tags-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--medium-gray); }
.biz-art-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    background: color-mix(in srgb, var(--base-color) 8%, #fff); border: 1px solid color-mix(in srgb, var(--base-color) 18%, #fff);
    border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--dark-gray);
    transition: background .25s ease, border-color .25s ease, color .25s ease; }
.biz-art-tag:hover { background: color-mix(in srgb, var(--base-color) 14%, #fff); border-color: color-mix(in srgb, var(--base-color) 35%, #fff); color: var(--base-ink); }
.biz-art-tag i, .biz-art-tag .feather { color: var(--base-ink); }

/* Onderbalk: "terug naar de blog" links, deel-knoppen rechts. */
.biz-art-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.biz-art-share { display: flex; align-items: center; gap: 10px; }
.biz-art-share-label { font-size: 13px; color: var(--medium-gray); margin-right: 2px; }
.biz-art-share a, .biz-art-share button { width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--base-color) 8%, #fff); color: var(--medium-gray); font-size: 16px;
    transition: background .25s ease, color .25s ease; }
.biz-art-share a:hover, .biz-art-share button:hover { background: var(--base-color); color: var(--brand-on-secondary); }

/* -- Rich-text-verrijking van ELKE tekstmodule (.biz-page-body: blog, pagina's, diensten,
      kennisbank …). De klant blijft zelf verantwoordelijk voor de opmaak in de editor; de
      template zorgt dat citaten, foto's met bijschrift en tussenkoppen overal netjes en
      consistent in het premium stramien verschijnen (kleur volgt var(--base-color)). -- */
/* Pull-quote: groot citaat met accent-streep en aanhalingsteken. */
.biz-page-body blockquote { position: relative; border-left: 4px solid var(--base-color);
    padding: 6px 0 6px 30px; margin: 44px 0; font-family: var(--alt-font); font-style: normal;
    font-size: 1.5rem; line-height: 1.45; font-weight: 500; color: var(--dark-gray); }
.biz-page-body blockquote::before { content: "\201C"; position: absolute; left: 16px; top: -.28em;
    font-family: var(--alt-font); font-size: 3.2em; line-height: 1;
    color: color-mix(in srgb, var(--base-color) 28%, #fff); pointer-events: none; }
.biz-page-body blockquote p { margin: 0; }
/* Foto met onderschrift (figure/figcaption uit de editor). */
.biz-page-body figure { margin: 36px 0 40px; }
.biz-page-body figure img { width: 100%; display: block; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.12); margin: 0; }
.biz-page-body figcaption { margin-top: 12px; font-size: 13px; font-style: italic; color: var(--medium-gray); text-align: center; }
/* Tussenkop met klein accent-streepje erboven, zoals in het ontwerp. */
.biz-page-body h2 { position: relative; padding-top: 22px; }
.biz-page-body h2::before { content: ""; position: absolute; top: 0; left: 0;
    width: 40px; height: 3px; background: var(--base-color); border-radius: 2px; }

/* Blog-archief: jaar-filterbalk op het blog-overzicht (?jaar=YYYY). Actief jaar = accentkleur. */
.biz-year-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.biz-year-chip { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--base-color) 22%, #fff); background: #fff;
    color: var(--dark-gray); font-size: 14px; font-weight: 600;
    transition: background .25s ease, color .25s ease, border-color .25s ease; }
.biz-year-chip:hover { background: color-mix(in srgb, var(--base-color) 10%, #fff);
    color: var(--base-ink); border-color: color-mix(in srgb, var(--base-color) 40%, #fff); }
.biz-year-chip.active { background: var(--base-color); color: var(--brand-on-secondary); border-color: var(--base-ink); }

/* =========================================================================
   BLOG-REACTIES (business1): bezoekersreacties met genest, gemarkeerd auteur-antwoord,
   plus het reactieformulier. Naar Crafto blog-single; accent volgt var(--base-color).
   ========================================================================= */
.biz-comment-list, .biz-comment-children { list-style: none; margin: 0; padding: 0; }
/* Zachte kaartjes: elke reactie in een net kaartje; het auteur-antwoord ingesprongen en crème. */
.biz-comment { padding: 22px 26px; border: 1px solid color-mix(in srgb, var(--base-color) 12%, #ece7df);
    border-radius: 14px; background: #fff; margin-bottom: 16px; }
.biz-comment-list > .biz-comment { box-shadow: 0 6px 22px rgba(0, 0, 0, .045); }
.biz-comment-list > .biz-comment:last-child { margin-bottom: 0; }
.biz-comment-body { display: flex; gap: 18px; align-items: flex-start; }
.biz-comment-avatar { flex: none; width: 50px; height: 50px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--base-color) 12%, #fff); color: var(--base-ink);
    border: 1px solid color-mix(in srgb, var(--base-color) 26%, #fff);
    font-family: var(--alt-font); font-weight: 700; font-size: 16px; }
.biz-comment-avatar-author { background: var(--base-color); color: var(--brand-on-secondary); border-color: var(--base-ink); }
.biz-comment-main { min-width: 0; }
.biz-comment-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--dark-gray); font-size: 15px; }
.biz-comment-badge { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    line-height: 1; color: var(--base-ink); background: color-mix(in srgb, var(--base-color) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--base-color) 28%, #fff); border-radius: 999px; padding: 3px 8px; }
.biz-comment-date { display: block; font-size: 13px; color: var(--medium-gray); margin: 2px 0 10px; }
.biz-comment-text { margin: 0; color: #4A443D; line-height: 1.7; white-space: pre-line; }
.biz-comment-children { margin: 20px 0 0; padding-left: 18px; }
.biz-comment-reply { padding: 18px 20px; margin-bottom: 12px; border-color: transparent; box-shadow: none;
    background: color-mix(in srgb, var(--base-color) 7%, #faf8f5); }
.biz-comment-reply:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .biz-comment-children { padding-left: 16px; }
  .biz-comment-avatar { width: 44px; height: 44px; font-size: 14px; }
}

/* =========================================================================
   REFERENTIES overzicht: case-cards (foto + titel + pitch + tekst) met
   hover-lift en foto-zoom, in lijn met de overige Crafto-modules.
   ========================================================================= */
.biz-ref-card { transition: transform .4s ease, box-shadow .4s ease; }
.biz-ref-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.10); }
.biz-ref-card-img { overflow: hidden; height: 220px; }
.biz-ref-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
/* Overzichtskaart: titel altijd 2 regels hoog gereserveerd (lh-26 => 52px), zodat de subtitel
   (intro) bij elke kaart op dezelfde hoogte begint, ook bij een korte titel van 1 regel. */
.biz-ref-list-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 52px; }
.biz-ref-card:hover .biz-ref-card-img img { transform: scale(1.07); }
.biz-ref-readmore i { transition: transform .3s ease; }
.biz-ref-card:hover .biz-ref-readmore i { transform: translateX(5px); }
/*  Bij hover op de kaart behoudt "Bekijk ..." zijn eigen kleur en krijgt hij een onderstreping die van links
    naar rechts inloopt (Jenny, 13-09-2026). Hij sprong naar --base-ink, de kleur van de introtekst erboven,
    en ging daardoor op in die tekst. De streep is currentColor, dus hij volgt de linkkleur ook in de
    donkere variant. Een ::after en geen text-decoration: de link is inline-flex met een pijl erin, en zo
    loopt de streep netjes onder tekst en pijl samen. */
/*  align-self: flex-start, anders loopt de onderstreping over de volle kaartbreedte: de link staat in een
    flex-kolom, en die rekt elk kind standaard op tot de volle breedte, ook een inline-flex. Nu is de link
    (en dus de streep) precies zo breed als het woord met de pijl. */
.biz-ref-readmore { position: relative; align-self: flex-start; }
.biz-ref-readmore::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .3s ease;
}
.biz-ref-card:hover .biz-ref-readmore::after,
.biz-ref-card:focus-visible .biz-ref-readmore::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .biz-ref-readmore::after { transition: none; } }
/* Voorpagina-blok (interactive-banner): alle kaartfoto's even hoog, ongeacht het formaat.
   border-radius 0 overrulet de globale ".box-layout figure img { border-radius:30px }"-regel,
   zodat de foto niet apart afrondt (de kaart-container met border-radius:6px + overflow:hidden
   verzorgt de ronding). Anders piept de pagina-achtergrond door de ronde fotohoeken. */
.biz-ref-banner-img { width: 100%; height: 260px; object-fit: cover; }
/* De extra .not()-selectors verhogen de specificiteit zodat dit de globale
   ".box-layout ... img { border-radius: 30px !important }"-regel overrulet. */
.interactive-banner-style-02 .biz-ref-banner-img:not(.rounded-circle):not([class*="avatar"]):not([class*="logo"]) { border-radius: 0 !important; }
/* De kaart wordt een flex-kolom: foto bovenaan, voet daar direct onder. De <figure> zelf
   krijgt display:contents zodat hij als lay-out-box verdwijnt (anders rekt die mee met de
   kaarthoogte en ontstaat er een lege ruimte onder de voet). De voet komt uit 'absolute
   bottom' (geen gat/doorschijnende achtergrond meer) en vult met flex:1 de resthoogte, zodat
   kaarten even hoog zijn en de knop onderaan uitlijnt. position/bottom met !important omdat
   Bootstrap's .position-absolute ook !important gebruikt. */
.interactive-banner-style-02 > div { display: flex; flex-direction: column; }
.interactive-banner-style-02 figure { display: contents; }
.interactive-banner-style-02 figcaption {
    position: relative !important;
    bottom: auto !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.interactive-banner-style-02 figcaption .btn { margin-top: auto; }
/* Titel altijd 2 regels hoog gereserveerd, zodat de titels (en de tekst eronder) van alle
   kaarten in de rij netjes op één lijn staan, ongeacht een korte of lange titel. */
.biz-ref-banner-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: 2.6em;
}
/* Intro altijd 2 regels hoog (kortere intro reserveert ruimte, langere wordt afgekapt),
   zodat de witte/oranje voet bij elke kaart even hoog is en netjes uitlijnt. */
.biz-ref-banner-intro {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.4em;
}

/* =========================================================================
   SHOP / PRODUCTEN — jewellery-store storefront (Crafto-stijl)
   ========================================================================= */
.wf-shop-card {
    transition: transform .35s ease, box-shadow .35s ease;
    background: #fff;
}
.wf-shop-card:hover {
    transform: translateY(-6px);
}
.wf-shop-thumb {
    overflow: hidden;
    background: #f7f5f2;
    aspect-ratio: 1 / 1;
}
.wf-shop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.wf-shop-card:hover .wf-shop-thumb img {
    transform: scale(1.06);
}
.wf-shop-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}
.wf-shop-actions {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
}
.wf-shop-card:hover .wf-shop-actions {
    opacity: 1;
    transform: translateY(0);
}
.wf-shop-iconbtn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #232323;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.wf-shop-iconbtn:hover {
    background: var(--base-color, #c89b6b);
    color: #fff;
}

/* Shop-voorpaginablok — achtergrond in de hoofdkleur van de klant + subtiel lijnenpatroon. */
.wf-shop-home {
    position: relative;
    overflow: hidden;
    background-color: #f6f7f9;   /* subtiel licht laagje (kwarts-wit), net als Diensten/Reviews; dashboard-keuze en donkere modus overschrijven dit */
}
/* Portret-beeldkaarten zoals het Crafto-voorbeeld. */
.wf-shop-home .interactive-banner-style-09 { aspect-ratio: 3 / 4; }
.wf-shop-home .interactive-banner-style-09 > img { width: 100%; height: 100%; object-fit: cover; }
/* Voorpagina-modules: vaste beeldverhouding zodat foto's van wisselend formaat toch even groot
   worden getoond (netjes bijgesneden i.p.v. vervormd of ongelijk hoog). */
.wf-diensten-home .interactive-banner-style-09 { aspect-ratio: 3 / 4; border-radius: 14px !important; }
.wf-diensten-home .interactive-banner-style-09 > img { width: 100%; height: 100%; object-fit: cover; }
/* "Bekijk dienst"-link netjes ónder de titel laten uitvouwen bij hover (Crafto zet 'm absoluut
   op bottom:0, waardoor hij zonder ondertitel over de titel valt). */
.wf-diensten-home .interactive-banner-style-09 .image-content .content-title-hover {
    position: static;
    transform: none !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .4s ease, opacity .4s ease, margin-top .4s ease;
}
.wf-diensten-home .interactive-banner-style-09 .image-content:hover .content-title-hover {
    max-height: 2.5em;
    margin-top: 6px;
    opacity: .85;
}
/* Pijl-cirkel rechtsonder in de kaart (directe child van .image-content, dus uitgelijnd op de
   hele kaart i.p.v. het titelkolommetje). Verschijnt bij hover en schuift licht omhoog — de
   titel staat linksonder, dus geen overlap. */
.wf-diensten-home .interactive-banner-style-09 .image-content .content-arrow {
    top: auto;
    right: 30px;
    bottom: 30px;
    transform: translateY(10px);
}
.wf-diensten-home .interactive-banner-style-09 .image-content:hover .content-arrow {
    transform: translateY(0);
}
/* Per-module card-photo overlay ("foto-overlay"): a coloured wash over the card image, set by the
   client per module (colour + strength). Rendered only when a strength > 0 is chosen; the colour +
   opacity come inline from the render (SiteRenderModel.CardOverlay). Sits above the photo and below
   the card text, so tekst/knoppen leesbaar blijven. Shared by every text-over-photo card module. */
.wf-card-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* "Lees meer" op de nieuws-overzichtskaarten: nette tekstlink met pijl in plaats van de
   Bootstrap btn-link-onderstreping. Pijl schuift bij hover over de kaart (zelfde gedrag
   als de pagina-overzichtskaarten, biz-page-readmore). */
.biz-news-readmore i { transition: transform .3s ease; }
/*  Nieuwsoverzicht (Tom 16-09-2026): intro altijd zes regels hoog (het script in Nieuws.cshtml kort
    een langere intro in op een heel woord), "Lees meer" rechtsonder met 20px ruimte eromheen. */
.biz-news-card .wf-nw-body { flex: 1 1 auto; padding-bottom: 0 !important; }
.biz-news-card .wf-nw-intro { height: calc(6 * 1lh); overflow: hidden; margin-bottom: 0; }
.biz-news-card .wf-nw-voet { display: flex; justify-content: flex-end; padding: 20px; }
.biz-news-card:hover .biz-news-readmore i { transform: translateX(5px); }

/* Nieuws voorpagina-blok (text-over-photo): titel en intro netjes afkappen met "…" zodat lange
   teksten niet uit de vaste kaarthoogte (420px) lopen. De volledige tekst blijft op het bericht
   zelf staan. Titel 2 regels, intro 2 regels. */
.wf-news-card-title,
.wf-news-card-intro {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Volledige breedte binnen de kaartmarge: voorkomt dat de shrink-to-fit box
       smaller wordt dan de tekst, waardoor letters links werden afgeknipt. */
    width: 100%;
    max-width: 100%;
    /* De overflow:hidden-clip-rand een paar px LINKS van de tekst leggen (padding +
       negatieve marge heffen elkaar op qua tekstpositie), zodat afronding/zoom of de
       atropos-tilt nooit de eerste letter van een regel kan afknippen. */
    padding-left: 8px;
    margin-left: -8px;
}

/* =========================================================================
   LINKS voorpagina-blok — variant 1b ("Editorial lijst", Claude Design
   "Handige Links Opties"): twee kolommen met dunne scheidslijntjes, icoon +
   naam + pijl, géén kaders. De achtergrond komt uit de dashboard-blokopmaak;
   tekst, icoontjes en lijntjes kleuren mee met een lichte of donkere
   achtergrond (wf-on-light / wf-on-dark, gezet door het blok-stijlsysteem).
   ========================================================================= */
.wf-links-title { color: var(--dark-gray, #232323); }
.wf-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 1000px; margin: 0 auto; }
.wf-link-row {
    display: flex; align-items: center; gap: 16px; padding: 20px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .12); color: var(--dark-gray, #232323);
    transition: padding-left .22s ease, border-color .22s ease;
}
.wf-link-row:hover { padding-left: 12px; border-color: color-mix(in srgb, var(--brand-secondary) 55%, transparent); }
.wf-link-ico { flex: none; font-size: 20px; color: var(--brand-secondary-ink); }
.wf-link-name { flex: 1; min-width: 0; font-size: 16px; line-height: 1.4; }
.wf-link-arrow { flex: none; font-size: 18px; opacity: .55; transition: transform .22s ease; }
.wf-link-row:hover .wf-link-arrow { transform: translateX(3px); }
/* Donkere/foto-achtergrond: tekst wit, lijntjes en icoontjes licht-transparant. */
.wf-links-home:is(.wf-on-dark, .wf-block-dark) .wf-links-title { color: #fff; }
.wf-links-home:is(.wf-on-dark, .wf-block-dark) .wf-link-row { color: #fff; border-color: rgba(255, 255, 255, .18); }
.wf-links-home:is(.wf-on-dark, .wf-block-dark) .wf-link-row:hover { border-color: rgba(255, 255, 255, .5); }
.wf-links-home:is(.wf-on-dark, .wf-block-dark) .wf-link-ico { color: rgba(255, 255, 255, .72); }
/* Donkere TEMPLATE zonder eigen blok-keuze: de kale titel/rijen/icoontjes gebruiken de
   huisstijl-donkere tekstkleur (var(--dark-gray)) en vallen dan weg op de donkere basis. Zelfde
   licht-behandeling als een donker blok. Binnen een bewust LICHT eiland (wf-on-light) NIET — dat
   blijft donker leesbaar. */
[data-bs-theme="dark"] .wf-links-home:not(.wf-on-light) .wf-links-title { color: #f2f4f8; }
[data-bs-theme="dark"] .wf-links-home:not(.wf-on-light) .wf-link-row { color: #eceef2; border-color: rgba(255, 255, 255, .18); }
[data-bs-theme="dark"] .wf-links-home:not(.wf-on-light) .wf-link-row:hover { border-color: rgba(255, 255, 255, .5); }
[data-bs-theme="dark"] .wf-links-home:not(.wf-on-light) .wf-link-ico { color: var(--brand-secondary-ondark, rgba(255, 255, 255, .72)); }
@media (max-width: 767px) { .wf-links-grid { grid-template-columns: 1fr; gap: 0; } }

.wf-card-grid .card > a.d-block { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.wf-card-grid .card > a.d-block > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.wf-card-grid .card:hover > a.d-block > img { transform: scale(1.05); }

/* Diensten-overzicht: nette, uitgelijnde kaarten. De kaart-body is een flexkolom; de titel
   reserveert twee regels zodat álle titels even hoog zijn (en de introteksten op gelijke hoogte
   beginnen), en de prijs wordt naar de onderkant geduwd zodat de prijzen over de kaarten op
   één lijn staan. Gescoped op .wf-svc-grid zodat andere kaartoverzichten (Vacatures/Projecten)
   ongemoeid blijven. */
/* Grotere foto (vierkant i.p.v. 4:3) zodat de kaart voller oogt. flex-shrink:0 voorkomt dat
   de flex-kolom de foto platdrukt wanneer de kaart op gelijke hoogte wordt gerekt. */
.wf-svc-grid .card > a.d-block { aspect-ratio: 1 / 1; flex-shrink: 0; }
/* Compactere body: minder padding en een kleinere titel-reserve → minder witruimte. */
.wf-svc-grid .card-body { display: flex; flex-direction: column; height: 100%; padding: 20px; }
/*  Titel van een dienstenkaart: altijd twee regels hoog, een langere titel afgekapt met een beletselteken.
    Zo begint de tekst eronder op elke kaart op dezelfde hoogte (Jenny, 14-09-2026). Met één regel ruimte
    schoof de tekst mee zodra een titel twee of drie regels nodig had. Twee regels dekt 228 van de 229
    diensten; op de detailpagina staat de titel volledig. Vaste hoogte en niet alleen clampen: anders is een
    titel van één regel nog steeds lager. display: -webkit-box moet de d-block van de link overschrijven. */
.wf-svc-grid .wf-svc-title {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  line-height: 1.6; height: 3.2em; margin-bottom: 8px !important;
}
.wf-svc-grid .card-body p { margin-bottom: 0; }
.wf-svc-grid .wf-svc-price { margin-top: auto; padding-top: 12px; }
/* Donkere modus: de dienst-prijs (text-base-color = donkere merk-primary) is te donker op de donkere kaart
   (contrast ~3.0) → licht huisstijl-tan, gelijk aan de andere prijzen. Licht-eiland houdt de primary. */
[data-bs-theme="dark"] .wf-svc-grid .wf-svc-price { color: var(--brand-secondary-ondark, #d8c6ad) !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-svc-grid .wf-svc-price { color: var(--base-color) !important; }
/* Badge over de foto (linksboven) i.p.v. boven de titel, zodat de titels uitlijnen. */
.wf-svc-grid .wf-svc-badge { position: absolute; top: 15px; left: 15px; z-index: 2; margin: 0; }

/* Diensten is standaard een LICHTE sectie, net als de andere moduleblokken: GEEN eigen band-
   achtergrond en een donkere koptekst. Kiest de klant in het dashboard een (donkere) blok-kleur,
   dan wordt de kop wit via de wf-block-*/wf-on-*-regels hieronder; in de donkere template zorgt de
   [data-bs-theme="dark"]-regel verderop dat de kop wit is op de donkere basis. */
.wf-diensten-home { background-color: #f6f7f9; }   /* subtiel licht laagje (kwarts-wit), zelfde sfeer als het Reviews-blok — geen vlak wit, wel premium; dashboard-keuze (wf-block-*) en donkere modus overschrijven dit */
.wf-diensten-head { color: #1f2937; }
.wf-diensten-head .text-white,
.wf-diensten-head .swiper-button-prev,
.wf-diensten-head .swiper-button-next { color: #1f2937 !important; }
.wf-diensten-head .swiper-button-prev,
.wf-diensten-head .swiper-button-next { border-color: rgba(0, 0, 0, .15) !important; }

/* Dashboard-opmaak leidend + volledig dynamisch: welke achtergrond de klant ook kiest, de kop/tekst/
   pill/nav/knop volgen het contrast. Zonder dashboard-opmaak blijft het de merkband met
   --brand-on-primary (regels hierboven). VOLGORDE is belangrijk: eerst de losse achtergrondKLEUR
   (wit/grijs/donker), dáárna het EFFECT/merk-contrast (wf-on-light/wf-on-dark). Zo wint een
   kleurverloop of foto (dat de kleur overlapt) van de onderliggende bg-kleur bij een combinatie
   (bv. grijs + kleurverloop -> het donkere verloop wint -> witte tekst). Knop start op de merkband.  */
.wf-diensten-cta { background: var(--brand-on-primary) !important; color: var(--brand-primary) !important; border: 0 !important; }
.wf-diensten-cta:hover { filter: brightness(.92); }

/* 1. Lichte achtergrondkleur (wit/grijs) -> donkere kop/knop. */
.wf-diensten-home:is(.wf-block-white, .wf-block-gray) .wf-diensten-head,
.wf-diensten-home:is(.wf-block-white, .wf-block-gray) .wf-diensten-head .text-white,
.wf-diensten-home:is(.wf-block-white, .wf-block-gray) .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { color: #1f2937 !important; }
.wf-diensten-home:is(.wf-block-white, .wf-block-gray) .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { border-color: rgba(0, 0, 0, .15) !important; }
.wf-diensten-home:is(.wf-block-white, .wf-block-gray) .wf-brand-pill { background: color-mix(in srgb, var(--brand-secondary) 12%, #fff) !important; color: var(--brand-secondary-ink) !important; }
.wf-diensten-home:is(.wf-block-white, .wf-block-gray) .wf-diensten-cta { background: #1f2937 !important; color: #fff !important; }

/* 2. Donkere achtergrondkleur (donker) -> witte kop/knop. */
.wf-diensten-home.wf-block-dark .wf-diensten-head,
.wf-diensten-home.wf-block-dark .wf-diensten-head .text-white,
.wf-diensten-home.wf-block-dark .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { color: #fff !important; }
.wf-diensten-home.wf-block-dark .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { border-color: rgba(255, 255, 255, .35) !important; }
.wf-diensten-home.wf-block-dark .wf-brand-pill { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
.wf-diensten-home.wf-block-dark .wf-diensten-cta { background: #fff !important; color: #1f2937 !important; }

/* 3. Licht effect/merk-contrast (lichte merkkleur/eigen kleur) -> donker (wint van bg-kleur). */
.wf-diensten-home.wf-on-light .wf-diensten-head,
.wf-diensten-home.wf-on-light .wf-diensten-head .text-white,
.wf-diensten-home.wf-on-light .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { color: #1f2937 !important; }
.wf-diensten-home.wf-on-light .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { border-color: rgba(0, 0, 0, .15) !important; }
.wf-diensten-home.wf-on-light .wf-brand-pill { background: color-mix(in srgb, var(--brand-secondary) 12%, #fff) !important; color: var(--brand-secondary-ink) !important; }
.wf-diensten-home.wf-on-light .wf-diensten-cta { background: #1f2937 !important; color: #fff !important; }

/* 4. Donker effect/merk-contrast (kleurverloop/foto/donkere merkkleur) -> wit (wint van bg-kleur). */
.wf-diensten-home.wf-on-dark .wf-diensten-head,
.wf-diensten-home.wf-on-dark .wf-diensten-head .text-white,
.wf-diensten-home.wf-on-dark .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { color: #fff !important; }
.wf-diensten-home.wf-on-dark .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { border-color: rgba(255, 255, 255, .35) !important; }
.wf-diensten-home.wf-on-dark .wf-brand-pill { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
.wf-diensten-home.wf-on-dark .wf-diensten-cta { background: #fff !important; color: #1f2937 !important; }

/* Vacatures-kop: de sectiekop (pil + titel) volgt de dashboard-blok-achtergrond; de kaarttekst
   blijft altijd donker want die staat op de witte kaart. De kaartknop is de merkknop (btn-base-color). */
.wf-vacatures-head .text-white { color: #1f2937 !important; }                                          /* standaard: donkere titel op licht blok */
.wf-vacatures-home:is(.wf-block-dark, .wf-on-dark) .wf-vacatures-head .text-white { color: #fff !important; }
/* Donkere template: het blok is dan zelf donker (tenzij de klant het expliciet licht tagt), dus de titel
   moet licht — anders blijft 'ie via de basisregel #1f2937 = donker-op-donker onleesbaar. Een expliciet
   licht eiland houdt de donkere titel. Alleen dark; lichte template ongemoeid. */
[data-bs-theme="dark"] .wf-vacatures-head .text-white { color: #f1efec !important; }
[data-bs-theme="dark"] .wf-vacatures-home:is(.wf-block-white, .wf-block-gray, .wf-on-light) .wf-vacatures-head .text-white { color: #1f2937 !important; }
.wf-vacatures-home:is(.wf-block-white, .wf-block-gray, .wf-on-light) .wf-brand-pill { background: color-mix(in srgb, var(--brand-secondary) 12%, #fff) !important; color: var(--brand-secondary-ink) !important; }
.wf-vacatures-home:is(.wf-block-dark, .wf-on-dark) .wf-brand-pill { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }

/* Vacature-overzicht: klein aantal-pilletje naast de afdelingsnaam + zachte klik-lift per rij. */
.wf-vacature-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 100px; font-size: 12px; font-weight: 600; line-height: 1; background: color-mix(in srgb, var(--brand-secondary) 14%, #fff); color: var(--brand-secondary-ink); }
.wf-vacature-row { transition: transform .25s ease; }
.wf-vacature-row:hover { transform: translateY(-2px); }

/* Producten-kop: de titel volgt al de globale wf-on-dark-regel (wit op donker); de eyebrow-pill
   maken we hier dashboard-bewust: wit-transparant op een donker/foto-blok, huisstijl op licht. */
:is(.wf-block-dark, .wf-on-dark) .wf-prod-head .wf-eyebrow { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
/* Merk-pil (eyebrow) op een gekleurde band: past zich aan de bandkleur aan. */
.wf-brand-pill { background: color-mix(in srgb, var(--brand-on-primary) 16%, transparent); color: var(--brand-on-primary); }
/* Merk-accenten op witte secties (bv. Pakketten): licht getint label + gevulde balk. */
.wf-brand-pill-light { background: color-mix(in srgb, var(--brand-secondary) 12%, #fff); color: var(--brand-secondary-ink); }
.wf-brand-fill { background: var(--brand-secondary); color: var(--brand-on-secondary); }
/* Maandelijks/jaarlijks-prijsschuif (Pakketten-blok). iOS-stijl toggle in de huisstijlkleur. De
   labelkleur erft bewust (dark op lichte sectie, wit op wf-on-dark) zodat 'ie altijd leesbaar is. */
.wf-price-switch { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; }
.wf-price-switch-lbl { font-weight: 700; }
.wf-price-switch-toggle { position: relative; display: inline-block; width: 52px; height: 28px; cursor: pointer; }
.wf-price-switch-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wf-price-switch-track { position: absolute; inset: 0; border-radius: 999px; background: #d9d9d9; transition: background .2s ease; }
.wf-price-switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.wf-price-switch-toggle input:checked + .wf-price-switch-track { background: var(--brand-primary); }
.wf-price-switch-toggle input:checked + .wf-price-switch-track::before { transform: translateX(24px); }
.wf-price-switch-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--brand-secondary); color: var(--brand-on-secondary); font-size: 12px; font-weight: 700; vertical-align: middle; }
/* Flexible pricing (Crafto pricing-table-style-06, huisstijl-variant): witte kaarten met een grote zachte
   schaduw, prominente prijs (€ als superscript) en kenmerken met groene vinkjes. De uitgelichte kaart
   krijgt een merk-badge + merk-knop. Bewust custom classes (geen h1-h6/.text-dark-gray) zodat de globale
   wf-on-dark wit-tekst-regel de donkere kaarttekst niet omzet; alleen de knop houdt z'n eigen kleur. */
.wf-flexprice-card { background: #fff; color: #374151; border-radius: 10px; padding: clamp(28px, 3vw, 44px); text-align: center; position: relative; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .22), 0 10px 24px -16px rgba(0, 0, 0, .14); }
.wf-flexprice-card--pop { z-index: 2; }
.wf-flexprice-badge { display: inline-block; margin-bottom: 18px; padding: 4px 16px; border-radius: 6px; background: var(--brand-primary); color: var(--brand-on-primary, #fff); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.wf-flexprice-name { font-weight: 700; font-size: 1.25rem; color: #232323; }
.wf-flexprice-sub { display: block; color: #6b7280; margin-top: 9px; margin-bottom: 18px; }
.wf-flexprice-amount { font-weight: 700; font-size: clamp(2.4rem, 4.5vw, 3.2rem); line-height: 1; letter-spacing: -1px; color: #232323; }
.wf-flexprice-amount sup { font-size: .82em; vertical-align: baseline; top: 0; margin-right: 7px; font-weight: 700; }
.wf-flexprice-per { display: block; color: #6b7280; font-size: 15px; margin-top: 6px; }
.wf-flexprice-features { list-style: none; padding: 0; margin: 26px 0 30px; text-align: left; }
.wf-flexprice-features li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; border-top: 1px solid #ececec; color: #374151; }
.wf-flexprice-features li i { color: #22c55e; font-size: 18px; line-height: 1.5; flex-shrink: 0; }
.wf-flexprice-btn { display: block; width: 100%; padding: 13px 20px; border-radius: 8px; font-weight: 700; background: #232323; color: #fff; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.wf-flexprice-btn:hover { transform: translateY(-2px); color: #fff; }
.wf-flexprice-card--pop .wf-flexprice-btn { background: var(--brand-primary); }

/* Donkere template: de prijskaart wordt een DONKERE kaart (consistent met de rest van de donkere
   template i.p.v. een wit eiland). Tekst licht, groene vinkjes blijven, rand subtiel licht. Binnen
   een expliciet licht blok blijft de kaart licht (light-island-uitzondering eronder). */
[data-bs-theme="dark"] .wf-flexprice-card {
  background: var(--wf-dark-card);
  color: #d7dae3;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .5), 0 10px 24px -16px rgba(0, 0, 0, .4);
}
[data-bs-theme="dark"] .wf-flexprice-name,
[data-bs-theme="dark"] .wf-flexprice-amount { color: #f2f4f8; }
[data-bs-theme="dark"] .wf-flexprice-sub,
[data-bs-theme="dark"] .wf-flexprice-per { color: #aeb4c0; }
[data-bs-theme="dark"] .wf-flexprice-features li { border-top-color: rgba(255, 255, 255, .12); color: #d7dae3; }
[data-bs-theme="dark"] .wf-flexprice-btn { background: #f2f4f8; color: #1b2130; }
[data-bs-theme="dark"] .wf-flexprice-card--pop .wf-flexprice-btn { background: var(--brand-primary); color: var(--brand-on-primary, #fff); }
/* Light-island-uitzondering: kiest de klant het Pakketten-blok bewust licht, dan kaart licht laten. */
[data-bs-theme="dark"] :is(.wf-on-light) .wf-flexprice-card { background: #fff; color: #374151; }
[data-bs-theme="dark"] :is(.wf-on-light) :is(.wf-flexprice-name, .wf-flexprice-amount) { color: #232323 !important; }
[data-bs-theme="dark"] :is(.wf-on-light) :is(.wf-flexprice-sub, .wf-flexprice-per) { color: #6b7280 !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-flexprice-features li { border-top-color: #ececec; color: #374151 !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-flexprice-btn { background: #232323; color: #fff; }

.wf-shop-home::before {
    content: "";
    position: absolute;
    left: -140px;
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.wf-shop-home .container { position: relative; z-index: 1; }

/* Productdetail — alle foto's gestapeld in de linkerkolom; de productinfo blijft sticky
   meescrollen (Crafto-effect: de foto's "lopen op en neer" naast de vaste info). */
/* Vertikale thumbnail-slider (loopt automatisch) + één grote hoofdfoto; actieve thumb = kader. */
.wf-pd-gallery { display: flex; gap: 14px; align-items: flex-start; }
.wf-pd-thumbs2 { width: 84px; flex-shrink: 0; height: 520px; }
.wf-pd-thumbs2 .swiper-slide { cursor: pointer; }
.wf-pd-thumbs2 .swiper-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 2px solid transparent; opacity: .55; transition: opacity .25s ease, border-color .25s ease; }
.wf-pd-thumbs2 .swiper-slide-thumb-active img { opacity: 1; border-color: var(--base-color, #c89b6b); }
.wf-pd-main2 { flex: 1; min-width: 0; height: 520px; border-radius: 6px; overflow: hidden; }
.wf-pd-main2 .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) {
    .wf-pd-sticky { position: sticky; top: 110px; align-self: flex-start; }
}
@media (max-width: 575px) {
    .wf-pd-gallery { flex-direction: column-reverse; }
    .wf-pd-thumbs2 { width: 100%; height: 84px; }
    .wf-pd-main2, .wf-pd-thumbs2 { height: auto; }
    .wf-pd-main2 .swiper-slide img { aspect-ratio: 1 / 1; }
}

/* Checkout — nette keuze-opties (levering / betaalwijze) met uitgelijnde radio + label. */
.wf-opt {
    display: flex; align-items: center; gap: 12px; margin: 0;
    border: 1px solid #e4e4e4; border-radius: 8px; padding: 14px 16px; cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease; background: #fff;
}
.wf-opt input[type="radio"] {
    width: 18px; height: 18px; flex-shrink: 0; margin: 0; position: static; opacity: 1;
    appearance: auto; -webkit-appearance: auto; accent-color: var(--base-color, #c89b6b);
}
.wf-opt span { color: #232323; }
.wf-opt:has(input:checked) { border-color: var(--base-color, #c89b6b); box-shadow: 0 0 0 2px rgba(0, 0, 0, .04); }

/* Winkelwagen — nette aantal-teller (+/-) met het getal als zichtbare tekst. */
.wf-qty { display: inline-flex; align-items: center; border: 1px solid #e4e4e4; border-radius: 8px; overflow: hidden; background: #fff; }
.wf-qty form { margin: 0; }
.wf-qty button {
    border: 0; background: transparent; width: 38px; height: 42px;
    font-size: 18px; line-height: 1; color: #4b5563; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease;
}
.wf-qty button:hover { background: var(--base-color, #c89b6b); color: #fff; }
.wf-qty .wf-qty-val {
    min-width: 42px; height: 42px; text-align: center; font-weight: 600; font-size: 15px; color: #232323;
    display: flex; align-items: center; justify-content: center;
    border-left: 1px solid #ececec; border-right: 1px solid #ececec;
}

/* Shop-overzicht — extra lucht tussen de page-title-banner en de producten/filters
   (Crafto zet hier pt-0, wat te krap oogt). Kleiner op mobiel. */
.wf-shop-grid { padding-top: 5rem; }
@media (max-width: 991px) { .wf-shop-grid { padding-top: 3rem; } }

/* Shop-filters — de filterblokken (categorie + prijs) als zachte kaart met een
   merkkleur-accentstreep onder de titel. Achtergrond/rand leiden we met color-mix
   licht af van het klant-accent (var(--brand-secondary)); vaste kleuren als
   fallback voor browsers zonder color-mix. */
.wf-shop-filter-card {
    background: #f8f6f3;
    background: color-mix(in srgb, var(--brand-secondary) 5%, #fff);
    border: 1px solid #efe9e2;
    border: 1px solid color-mix(in srgb, var(--brand-secondary) 12%, #fff);
    border-radius: 8px;
    padding: 24px 22px;
}
/* Donkere modus: de filter-panelen (categorieën/prijzen) waren fel wit -> subtiel donker huisstijl-getint
   paneel met lichte labels. Merk-/actieve accenten houden hun eigen kleur. Alleen dark; licht ongemoeid. */
[data-bs-theme="dark"] .wf-shop-filter-card {
    background: color-mix(in srgb, #ffffff 5%, var(--site-dark-bg, #121f19)) !important;
    border-color: rgba(255, 255, 255, .10) !important;
}
[data-bs-theme="dark"] .wf-shop-filter-card :is(.wf-shop-filter-title, a, label, .form-check-label, li, span) { color: #dfe2ea; }
/* Donkere modus: de witte hover-knop op de shop-foto (btn-white, bv. "In winkelwagen") kreeg lichte tekst
   van de globale dark-tekstregel -> wit-op-wit onleesbaar. Forceer donkere tekst op de witte knop. */
[data-bs-theme="dark"] .btn-white,
[data-bs-theme="dark"] .btn-white .button-text { color: var(--dark-gray, #232323) !important; }
.wf-shop-filter-title {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 18px !important;
}
.wf-shop-filter-title::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 42px; height: 3px; border-radius: 3px;
    background: var(--brand-secondary);
}

/* ── Shopper-accounts ─────────────────────────────────────────────────────
   Account-icoon in de topbalk (naast het mandje) + kaarten/tegels op de account-
   pagina's. Accent = klant-accent (var(--brand-secondary)); hover-effect meteen mee. */
.biz-account.is-in { color: var(--brand-secondary); }
.wf-account-card { box-shadow: 0 2px 14px rgba(0,0,0,.04); }
.wf-account-tile {
    color: inherit;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.wf-account-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.10);
    border-color: color-mix(in srgb, var(--brand-secondary) 35%, #fff) !important;
}
.wf-account-tile:hover h6 { color: var(--brand-secondary); }

/* =========================================================================
   DARK MODE — overrides onder [data-bs-theme="dark"].
   ========================================================================= */

/* Donkere template-BASIS: de hele site volgt de donkere basiskleur (--site-dark-bg),
   gezet in _SiteLayout: de door de klant gekozen tint, of standaard een diepe merk-/
   neutrale tint. Zo herkleurt de tintkeuze de hele achtergrond en is de standaard altijd
   goed. We sluiten Bootstrap's --bs-body-bg hierop aan zodat componenten die die variabele
   lezen meekleuren. De sectie-achtergronden zijn in donker al transparant, dus de body
   schijnt overal door. Klant-gekozen blok-opmaak (.wf-applied.wf-block-*) blijft met
   !important winnen en wordt hierdoor NIET overschreven. Raakt de lichte template niet. */
[data-bs-theme="dark"] { --bs-body-bg: var(--site-dark-bg); }
[data-bs-theme="dark"] body { background-color: var(--site-dark-bg); }

/* ── Donkere template: tekst-leesbaarheid ──────────────────────────────────────
   Op de donkere basis moet ALLE tekst licht zijn. De huisstijl-tekstkleur (--dark-gray /
   --brand-dark) verschilt per klant en kan zelf donker zijn (bv. Frenque #2c2626) → dan
   onleesbaar op het donkere vlak. Daarom: geërfde tekst, koppen, lopende tekst, lijsten en
   formulierlabels licht. Gekleurde accenten (knoppen/prijzen/eyebrows/pillen) houden hun
   eigen expliciete kleur. De licht-eiland-regels hieronder draaien dit binnen expliciet
   lichte blokken weer terug naar donker. Alles onder [data-bs-theme="dark"] → licht ongemoeid. */
[data-bs-theme="dark"] body { color: #dfe2ea; }
[data-bs-theme="dark"] :is(h1, h2, h3, h4, h5, h6),
[data-bs-theme="dark"] :is(.text-dark-gray, .text-extra-dark-gray) { color: #f2f4f8; }
[data-bs-theme="dark"] :is(.text-extra-medium-gray, .text-medium-gray) { color: #b9bdca; }
[data-bs-theme="dark"] :is(p, li, dd, dt, td, blockquote, figcaption, .form-label, .form-check-label) { color: #d7dae3; }
/* Vet in lopende tekst. Op de donkere basis is een zwaarder gewicht alléén niet genoeg: lichte tekst
   bloeit op een donkere achtergrond, waardoor 400 → 700 nauwelijks opvalt. Nagemeten bij CVSM: de
   vette letter van Libre Franklin is maar 3,3% breder dan de gewone, en de kleur was exact gelijk —
   dan ziet de klant geen verschil terwijl hij wél vet heeft gezet. Vet krijgt daarom óók de heldere
   tekstkleur, net als de koppen: het gewicht doet de vorm, de kleur doet het contrast. De lichte
   template blijft ongemoeid (daar leest 700 op wit gewoon goed). */
[data-bs-theme="dark"] :is(p, li, dd, dt, td, blockquote, figcaption) :is(strong, b) { color: #f2f4f8; }
/* Het vetgedrukte kernwoord vooraan een opsomming staat bewust in de accentkleur (--base-ink) — mooi
   op wit, maar op de donkere basis is diezelfde kleur onleesbaar: bij CVSM #2248a0 op #1f123b is dat
   2,07:1, ruim onder de eis van 4,5. Daar wint dus de heldere kleur. Specifieker dan de bronregels
   (.biz-page-body/.biz-richtext ul > li > strong:first-child), anders houden die het accent. */
[data-bs-theme="dark"] :is(.biz-page-body, .biz-richtext) ul > li > strong:first-child { color: #f2f4f8; }
/* Agenda-detail: datum en locatie staan groot onder elkaar, want dáárvoor opent een bezoeker zo'n
   pagina. Op de donkere basis kan de accentkleur daar niet: `.text-base-color` is bij CVSM #2248a0
   en dat geeft op #1f123b 2,07:1 — te klein én te donker, precies wat er misging. De datum volgt
   daarom de on-dark-variant van de merkkleur (6,05:1, houdt het accentgevoel), de locatie de heldere
   tekstkleur (15,79:1) zodat de tweede regel het adres duidelijk draagt. Licht blijft ongemoeid. */
[data-bs-theme="dark"] .wf-agenda-date,
[data-bs-theme="dark"] .wf-agenda-loc i { color: var(--brand-secondary-ondark, #cbd5e1) !important; }
[data-bs-theme="dark"] .wf-agenda-loc { color: #f2f4f8 !important; }
/* Binnen een bewust licht blok draait dit terug naar de kleuren van de lichte template. */
[data-bs-theme="dark"] :is(.wf-on-light) :is(.wf-agenda-date, .wf-agenda-loc i) { color: var(--base-color) !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-agenda-loc { color: var(--dark-gray) !important; }
/* Formuliervelden: donkere maar zichtbare vulling, lichte tekst, leesbare rand + placeholder. */
[data-bs-theme="dark"] .wf-site-form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .22); color: #eef1f7;
}
[data-bs-theme="dark"] .wf-site-form :is(input, textarea)::placeholder { color: rgba(231, 233, 240, .55); }
[data-bs-theme="dark"] .wf-site-form :is(input, select, textarea):focus {
  border-color: var(--brand-secondary-ondark, #cbd5e1); background-color: rgba(255, 255, 255, .08);
}
/* Formulierlabels: specifieker dan de component-regel (.wf-site-form .form-label = #2c2626). */
[data-bs-theme="dark"] .wf-site-form :is(.form-label, .form-check-label, label) { color: #dfe2ea; }
/* Contactformulier (Crafto's onderstreepte "contact-form-style-03") — NIET .wf-site-form, dus de
   regels hierboven raken 'm niet. Zelfde doel: op de donkere basis lichte tekst, een leesbare
   onderstreep-rand + placeholder, en leesbare veld-iconen; de AVG-/akkoord-box (bg-very-light-gray)
   wordt een net donker oppervlak i.p.v. een licht eiland. Alles onder [data-bs-theme="dark"] → licht
   ongemoeid. Binnen een licht eiland (wf-on-light) draait de bestaande eiland-regel dit terug. */
/*  Vangnet voor een extreem lang e-mailadres: het scriptje in _Footer.cshtml zet al een breekpunt
    achter de "@", maar een domein dat op zichzelf al breder is dan de kolom moet alsnog kunnen
    afbreken in plaats van eroverheen te lopen. */
.wf-mail { overflow-wrap: break-word; }

/*  Tekst, placeholder en veld-icoon iets naar binnen (Tom, 11-08-2026). De velden dragen in de
    opmaak Bootstrap's `ps-0`, waardoor de tekst tegen de linkerkant van de onderstreping plakte, en
    Crafto zet het icoon op `right: 5px` — dus ook rechts kleefde het tegen de rand.
    !important is hier nodig: `ps-0` is een utility-klasse en die draagt zelf !important.
    De rechterruimte is groter dan 10px omdat daar het icoon in staat; bij een keuzelijst zit dat
    icoon er niet, dus die krijgt gewoon 10px en houdt zijn eigen pijltje aan de rand.
    In px en niet in procenten: dit moet op 375px net zo goed werken als op een breed scherm. */
/*  13-09-2026: geen icoon meer in de contactvelden (Jenny), dus de 38px rechts die daarvoor vrij bleef mag weg.
    Rechts nu gelijk aan links, anders breekt getypte tekst onnodig vroeg af. */
.contact-form-style-03 .form-control:is(input, textarea) {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.contact-form-style-03 select.form-control {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.contact-form-style-03 .form-group .form-icon,
.contact-form-style-03 .form-group.form-textarea .form-icon { right: 10px; }

[data-bs-theme="dark"] .contact-form-style-03 :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  color: #eef1f7; border-color: rgba(255, 255, 255, .28) !important;
}
[data-bs-theme="dark"] .contact-form-style-03 :is(input, textarea)::placeholder { color: rgba(231, 233, 240, .5); }
[data-bs-theme="dark"] .contact-form-style-03 :is(input, select, textarea):focus { border-bottom-color: var(--brand-secondary-ondark, #cbd5e1) !important; }
[data-bs-theme="dark"] .contact-form-style-03 .form-icon i { color: rgba(231, 233, 240, .55); }
[data-bs-theme="dark"] .contact-form-style-03 .bg-very-light-gray {
  background-color: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .18) !important;
}
/* Componenten met eigen donkere tekstkleur die een LICHTE kaart aannemen, maar op de donkere basis
   belanden (kaart-vulling valt in donker weg) → tekst licht zodat het leesbaar blijft. */
[data-bs-theme="dark"] :is(.biz-ref-banner-title, .biz-ref-banner-intro) { color: #eef1f7 !important; }
[data-bs-theme="dark"] .biz-ref-banner :is(.btn-link, .btn-link .btn-text) { color: var(--brand-secondary-ondark, #d8c6ad) !important; }

/* ── Licht "eiland"-blok op de donkere template ────────────────────────────────
   Kiest de klant bewust een LICHTE blok-achtergrond (wit/grijs, of een lichte merk-
   kleur → .wf-on-light) op de donkere template, dan eerbiedigen we die keuze: het blok
   rendert als een net, leesbaar LICHT eiland (donkere tekst + lichte kaarten/panelen),
   i.p.v. de wit-op-wit/donkere-kaart-botsing met het donkere thema. We herstellen hier
   binnen zulke blokken de licht-modus-waarden; hogere specificiteit dan de per-module
   [data-bs-theme="dark"]-regels, dus die worden precies binnen dit blok teruggedraaid.
   De donkere blok-keuzes (donker/foto/donkere merkkleur → wf-on-dark) blijven ongemoeid. */
/* Sectie-achtergrond forceren: de Crafto light-bg-klassen (bg-very-light-gray e.d.) worden in
   donker transparant (zo is de template donker-by-default). Binnen een EXPLICIET licht blok moet
   de sectie juist licht/opaak zijn — hogere specificiteit (section + 2 klassen) verslaat die regel. */
/* Optie B (2026-07-26): NEUTRALE blok-keuzes (wit/grijs/donker) volgen op de donkere template
   de gekozen donkere basiskleur i.p.v. een vast licht/donker eiland — zo is de donkere site
   uniform. Bewust gekozen huisstijlKLEUR (primair/secundair/tertiair) en effecten (gradient/foto)
   blijven wél (zie regels hieronder). Licht ongemoeid. */
[data-bs-theme="dark"] section.wf-applied.wf-block-white { background-color: var(--site-dark-bg) !important; }
[data-bs-theme="dark"] section.wf-applied.wf-block-gray { background-color: var(--site-dark-bg) !important; }
/* Ook de MERK-/donkere blok-keuzes blijven leidend in donker (zelfde kleuren als
   .wf-applied.wf-block-*, maar hogere specificiteit zodat de dark-transparant-regel ze niet
   wegdrukt). Zo is de dashboard-blok-kleur altijd leidend voor de moduleblokken. "Eigen" staat
   al inline-!important. */
[data-bs-theme="dark"] section.wf-applied.wf-block-primary { background-color: var(--brand-primary) !important; }
[data-bs-theme="dark"] section.wf-applied.wf-block-secondary { background-color: var(--brand-secondary-ink) !important; }
[data-bs-theme="dark"] section.wf-applied.wf-block-tertiary { background-color: var(--brand-tertiary) !important; }
[data-bs-theme="dark"] section.wf-applied.wf-block-dark { background-color: var(--site-dark-bg) !important; }
/* Het Diensten-blok is in LICHT bewust een donkere band (var(--brand-ink), afgeleid van de primaire
   kleur — zie regel ~780). In DONKER moet die band juist de gekozen donkere basiskleur volgen, net als
   de body en de wf-block-dark-keuzes hierboven; anders houdt het blok de primaire-ink (bv. rood) vast.
   Specificiteit 0,2,0 zonder !important: verslaat de default op .wf-diensten-home, maar laat een
   EXPLICIETE blok-kleurkeuze (section.wf-applied.wf-block-*, 0,3,1 !important) leidend. */
[data-bs-theme="dark"] .wf-diensten-home { background-color: var(--site-dark-bg); }
/* Diensten is standaard een lichte sectie (donkere kop), maar op de donkere basis hoort de kop wit.
   Minder specifiek dan de wf-on-light/wf-block-white-keuzes, zodat een expliciete lichte blok-kleur
   zijn donkere kop houdt. */
[data-bs-theme="dark"] .wf-diensten-head,
[data-bs-theme="dark"] .wf-diensten-head .text-white,
[data-bs-theme="dark"] .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { color: #fff !important; }
[data-bs-theme="dark"] .wf-diensten-head :is(.swiper-button-prev, .swiper-button-next) { border-color: rgba(255, 255, 255, .35) !important; }
/* Zelfde geval als het Diensten-blok: het Shop-voorpaginablok is óók een band op var(--brand-ink).
   Volg in donker de donkere basiskleur i.p.v. de primaire-ink (rood). */
[data-bs-theme="dark"] .wf-shop-home { background-color: var(--site-dark-bg); }
/* De fotobanner-hero's gebruiken var(--brand-ink) alleen als TERUGVAL achter de bannerfoto. Mét foto
   verandert er niets; zónder foto hoort de terugval in donker de basiskleur te zijn, niet het rood. */
[data-bs-theme="dark"] :is(.biz-hero-slide, .biz-svc-hero, .biz-prod-hero, .wf-p2b-hero) { background-color: var(--site-dark-bg); }
[data-bs-theme="dark"] :is(.wf-on-light) { color: var(--dark-gray); }
/* Koppen/teksten terug naar donker (overrulet de per-module witte dark-thema-koppen). */
[data-bs-theme="dark"] :is(.wf-on-light)
  :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, strong, b, .text-dark-gray, .form-label, .form-check-label,
      .wf-p3b-blocktitle, .wf-p3b-name, .wf-intro-title, .wf-intro-text, .wf-intro-body,
      .wf-intro-phone, .wf-intro-stat-lbl, .wf-faq-1c-q, .wf-link-row, .wf-link-name)
  { color: var(--dark-gray) !important; }
/* Inhoudelijke links (geen knoppen/pillen) in een licht eiland: terug naar donker i.p.v. de
   generieke donkere-thema-linkkleur (die op een licht vlak onleesbaar wordt). */
[data-bs-theme="dark"] :is(.wf-on-light)
  a:not(.btn):not([class*="btn"]):not([class*="-cta"]):not([class*="eyebrow"]):not([class*="pill"]) { color: var(--dark-gray); }
/* Producten-kaarten terug licht. */
[data-bs-theme="dark"] :is(.wf-on-light) .wf-p3b-card {
  background: #fff; color: #1f2937; box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
[data-bs-theme="dark"] :is(.wf-on-light) .wf-p3b-card .wf-p3b-name { color: #1f2937 !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-p3b-ph { background: #f3f4f6; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-p3b-sub2 { color: #6b7280; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-p3b-was { color: #9ca3af; }
/* FAQ-paneel terug licht (spiegelt de licht-modus-waarden). */
[data-bs-theme="dark"] :is(.wf-on-light) .wf-faq-1c-panel {
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff); box-shadow: 0 18px 44px rgba(8, 15, 52, .16);
}
[data-bs-theme="dark"] :is(.wf-on-light) .wf-faq-1c-row { border-top-color: rgba(20, 30, 55, .10); }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-faq-1c-answer { color: #4a5568; }
/* Intro-stat-kaart terug licht. */
[data-bs-theme="dark"] :is(.wf-on-light) .wf-intro-stat { background: #fff; }

[data-bs-theme="dark"] .wf-shop-card,
[data-bs-theme="dark"] .wf-shop-iconbtn {
    background: #1e1e1e;
    color: #f1f1f1;
}
/* Kaart-definitie op donker: #1e1e1e valt weg tegen de donkere body → hairline-rand zodat de kaart
   herkenbaar blijft (producten-overzicht). */
[data-bs-theme="dark"] .wf-shop-card { border: 1px solid rgba(255, 255, 255, .08) !important; }
/* "Bekijk product"-knop (btn-transparent-dark-gray): donkere tekst op donker = onleesbaar. Op donker een
   leesbare tan-outline met duidelijke hover (zoals de Terug-knop). Alleen dark; licht ongemoeid. */
[data-bs-theme="dark"] .btn-transparent-dark-gray {
    color: var(--brand-secondary-ondark, #d8c6ad) !important;
    border-color: color-mix(in srgb, var(--brand-secondary) 45%, transparent) !important;
}
[data-bs-theme="dark"] .btn-transparent-dark-gray:hover,
[data-bs-theme="dark"] .btn-transparent-dark-gray:focus-visible {
    background: var(--brand-secondary) !important;
    color: var(--brand-on-secondary, #1a1a1a) !important;
    border-color: var(--brand-secondary) !important;
}
[data-bs-theme="dark"] .wf-shop-thumb {
    background: #262626;
}

/* =========================================================================
   HEADER STABILITEIT
   De business1-header is 'disable-fixed' (Crafto = position:absolute, niet
   meescrollend/sticky). Crafto's main.js zet bij elke volledige paginalading
   opnieuw de sticky-/reveal-klassen met een 0.3s-overgang, en het logo heeft
   geen vaste hoogte. Samen geeft dat een zichtbare sprong/flikker bij het
   wisselen van pagina. Hieronder zetten we de header op een stabiele,
   onveranderlijke begintoestand zodat hij op elke pagina meteen goed staat.
   ========================================================================= */

/* Vaste logohoogte -> de header heeft een onveranderlijke hoogte, ongeacht of
   het logo al ingeladen is (geen layout shift). De top-space-margin hieronder is
   hierop afgestemd (opgemeten na deze hoogte). */
header .navbar-brand img { height: 64px; width: auto; max-width: 260px; }

/* Onze header scrollt gewoon mee (absolute, niet sticky): schakel de
   Crafto-overgangen op de balk en het logo uit, zodat er niets 'inschuift'
   of flikkert bij elke (her)laadbeurt. */
header .navbar,
header .navbar-brand,
header .navbar-brand img { transition: none !important; }

/* De content-pagina's zitten samen onder één "Meer"-uitklapmenu (zie _Header.cshtml); de balk zelf
   houdt dus weinig items en past normaal op één regel. Mocht het bij veel modules toch niet passen,
   dan mag het netjes naar een tweede regel wrappen. Elke titel blijft op één regel. */
@media (min-width: 992px) {
    header .navbar-nav { flex-wrap: wrap; row-gap: 2px; }
    header .navbar-nav > .nav-item > .nav-link { white-space: nowrap; padding-left: 7px; padding-right: 7px; }
    /* De contact-knop ("Vrijblijvend gesprek") nooit binnenin afbreken. */
    header .header-button .btn { white-space: nowrap; }
}
/* Smalle desktop (lg): het logo is daar breder dan z'n smalle kolom en zou het menu overlappen;
   iets kleiner maken zodat "Home" er netjes naast blijft. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    header .navbar-brand img { height: 44px; }
}
/* "Meer"-uitklapmenu met alle content-pagina's: scrollbaar bij veel items, subpagina's ingesprongen. */
header .wf-more-menu { max-height: 72vh; overflow-y: auto; min-width: 250px; }
header .wf-more-menu > li > a { white-space: nowrap; }
header .wf-more-menu .wf-more-sub { padding-left: 30px; opacity: .85; }

/* --- Actiebanner: "uitgelicht project"-kaart (Claude Design) --------------------
   Zwevende kaart die over de onderkant van de hero valt (overlap). Kleur komt via
   --wf-banner (klant-keuze of huisstijl-default): de KAART is een lichte tint daarvan
   (tekst blijft donker/leesbaar), de KNOP is de volle kleur. Neutrale fallback voor
   browsers zonder color-mix. */
/* padding-top:0 zodat de negatieve marge van de wrap de kaart écht óver de hero trekt
   (Crafto geeft elke <section> standaard ~75px top-padding, die de overlap zou opheffen). */
.wf-herobanner { position: relative; z-index: 5; padding: 0 0 24px; }
.wf-herobanner-wrap { max-width: 1200px; margin: -96px auto 0; padding: 0 32px; }
.wf-herobanner-card {
    background: #eef0f2;                                             /* fallback */
    background: color-mix(in srgb, var(--wf-banner) 14%, #fff);
    border: 1px solid rgba(20, 20, 25, .10);
    border-color: color-mix(in srgb, var(--wf-banner) 24%, #d9d9de);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(20, 20, 25, .08);
    padding: 40px 44px; min-height: 220px;
    display: flex; align-items: center; gap: 30px;
}
.wf-herobanner-media { flex: none; }
.wf-herobanner-media img { width: 132px; height: 132px; border-radius: 16px; object-fit: cover; display: block; }
.wf-herobanner-body { flex: 1 1 auto; min-width: 0; }
.wf-herobanner-title { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; color: #171C24; line-height: 1.15; }
.wf-herobanner-text { margin: 12px 0 0; font-size: 1rem; color: #5C636E; line-height: 1.6; max-width: 640px; }
.wf-herobanner-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    height: 58px; padding: 0 40px; border-radius: 999px;
    background: var(--wf-banner); color: #fff; font-size: 1rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wf-herobanner-btn:hover { filter: brightness(.92); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 20, 25, .16); color: #fff; }
.wf-herobanner-btn.wf-on-light { color: #1f2937; }                  /* lichte knopkleur -> donkere tekst */
.wf-herobanner-btn.wf-on-light:hover { color: #1f2937; }

/* Donkere template: het actieblok (actiebanner onder de header) wordt een DONKERE kaart die de
   dashboard-kleur (--wf-banner) als tint blijft dragen — de kleur is dus nog steeds leidend vanuit
   het dashboard, alleen op een donkere basis i.p.v. wit. Titel/tekst licht; de knop houdt de volle
   dashboard-kleur met witte tekst (overrulet de generieke .page-layout a-donkerregel via !important). */
[data-bs-theme="dark"] .wf-herobanner-card {
  background: color-mix(in srgb, var(--wf-banner) 20%, #191d26);
  border-color: color-mix(in srgb, var(--wf-banner) 45%, rgba(255, 255, 255, .16));
}
[data-bs-theme="dark"] .wf-herobanner-title { color: #f4f6fb; }
[data-bs-theme="dark"] .wf-herobanner-text { color: #c7cbd4; }
[data-bs-theme="dark"] .wf-herobanner-btn { color: #fff !important; }
[data-bs-theme="dark"] .wf-herobanner-btn.wf-on-light { color: #1f2937 !important; }

@media (max-width: 991px) {
    .wf-herobanner-wrap { margin-top: -60px; }
    .wf-herobanner-card { padding: 32px 30px; gap: 24px; }
}
@media (max-width: 575px) {
    .wf-herobanner-wrap { margin-top: -44px; padding: 0 16px; }
    .wf-herobanner-card { flex-direction: column; text-align: center; align-items: center; padding: 28px 22px; }
    .wf-herobanner-text { max-width: none; }
    /*  Op de telefoon staat de kaart toch al in één kolom: dan leest een liggende band over de volle
        kaartbreedte rustiger dan het kleine vierkantje van 132px. 16:9 met object-fit: cover, dus
        elke aangeleverde foto vult 'm netjes. */
    .wf-herobanner-media { align-self: stretch; width: 100%; }
    .wf-herobanner-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
/* Slider-stipjes hoger tillen als de actiebanner over de hero valt, anders bedekt de kaart ze.
   Alleen wanneer er daadwerkelijk een actiebanner volgt (:has) — banner-loze hero's blijven ongemoeid. */
#slider:has(~ .wf-herobanner) .biz-hero .swiper-pagination { bottom: 120px; }
@media (max-width: 991px) {
    #slider:has(~ .wf-herobanner) .biz-hero .swiper-pagination { bottom: 80px; }
}

/*  Hero op de telefoon: de nav-pijlen weg van de titelregel.
    Swiper centreert de pijlen verticaal (top:50%) en de hero-titel staat óók verticaal gecentreerd.
    Op een breed scherm is er ruimte genoeg, maar op 375px gemeten (15-08-2026) staan de pijlen op
    y 401-453 en de titelregel op y 430-458: een titel van twee/drie woorden loopt dan tot tegen
    beide pijlen aan. Op de telefoon zakken ze daarom naar de onderrand, op één lijn met de bolletjes
    ertussen. 44px is de minimale aanraakmaat (zie de responsive-richtlijn).
    De bolletjes worden hier bewust MEE gezet, zodat pijlen en bolletjes gegarandeerd op dezelfde
    hoogte staan; anders wint de #slider:has()-regel hierboven (die heeft een id en dus meer gewicht)
    en gaan ze uit elkaar lopen. */
@media (max-width: 575.98px) {
    .biz-hero :is(.swiper-button-prev, .swiper-button-next) {
        top: auto; margin-top: 0; bottom: 22px; width: 44px; height: 44px;
    }
    /*  +12px t.o.v. de pijlen: de bolletjes zitten niet gecentreerd in hun eigen omhulsel, dus een
        gelijke 'bottom' zet ze zichtbaar lager dan de pijlen. Nagemeten in de browser (15-08). */
    .biz-hero .swiper-pagination { bottom: 51px; }
    /* Valt de actiebanner over de hero, dan gaat de hele onderrand mee omhoog. */
    #slider:has(~ .wf-herobanner) .biz-hero :is(.swiper-button-prev, .swiper-button-next) { bottom: 72px; }
    #slider:has(~ .wf-herobanner) .biz-hero .swiper-pagination { bottom: 101px; }
}

/* GEEN top-reserve meer. De oude Crafto-header was 'position: absolute' (overlapte
   de hero), dus de hero/titelbalk reserveerde er 144px onder. De nieuwe menubalk
   (.fq-nav) staat in de normale flow en neemt z'n eigen hoogte in — die 144px zou
   er nu dubbel bovenop komen en gaf een leeg gat tussen menu en hero. Daarom 0:
   hero en subpagina-titelbalk sluiten strak aan onder de balk. */
.top-space-margin { margin-top: 0 !important; }

/* ── Agenda voorpagina-blok: roterende flip-cards ──────────────────────────
   Voorkant = datum/tijd/plaats, achterkant = titel + korte info. Draait op
   hover (desktop) en op focus/tap (toetsenbord/touch). Achterkant in de
   merkkleur van de klant (var --brand-primary, geïnjecteerd door _SiteLayout). */
.wf-agenda-flip { perspective: 1500px; height: 300px; cursor: pointer; }
.wf-agenda-flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  transform-style: preserve-3d;
}
.wf-agenda-flip:hover .wf-agenda-flip-inner,
.wf-agenda-flip:focus-within .wf-agenda-flip-inner { transform: rotateY(180deg); }
.wf-agenda-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 24px 18px;
  box-shadow: 0 0 25px rgba(0,0,0,.08); background: #fff;
}
/* Voorkant top-uitgelijnd zodat de datum bij ELKE kaart op dezelfde hoogte staat,
   ongeacht of er wel/geen tijd of locatie onder staat. */
.wf-agenda-front { justify-content: flex-start; padding-top: 30px; }
/* De datumkop mag NOOIT meekrimpen: zonder flex-shrink:0 duwt een lange locatie (3 regels)
   de weekdag en de datum omhoog, waardoor de datums per kaart op een andere hoogte staan. */
.wf-agenda-front .wf-agenda-weekday { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; font-weight: 700; color: #6f7173; margin-bottom: 6px; min-height: 14px; flex: 0 0 auto; }
.wf-agenda-front .wf-agenda-day { font-size: 31px; line-height: 1.12; font-weight: 700; color: var(--brand-primary, #c0006f); min-height: 36px; flex: 0 0 auto; }
.wf-agenda-front .wf-agenda-meta { font-size: 14px; line-height: 1.45; color: #2a3547; margin-top: 9px; flex: 0 0 auto; }
/* Vaste hoogte voor de tijdregel (14px tekst op regelafstand 1,45), zodat de locatie eronder bij elke
   kaart op dezelfde hoogte begint — ook als er geen tijd te tonen is. */
.wf-agenda-front .wf-agenda-meta-time { min-height: 20px; }
/* Lange adressen mogen de kaart niet uitrekken: hoogstens 3 regels, de rest valt weg. */
.wf-agenda-front .wf-agenda-meta-loc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 0 1 auto; }
.wf-agenda-front .wf-agenda-meta i { color: var(--brand-primary, #c0006f); margin-right: 6px; }
.wf-agenda-front .wf-agenda-hint { margin-top: auto; padding-top: 12px; font-size: 11px; color: #b0b3b8; text-transform: uppercase; letter-spacing: .5px; }
.wf-agenda-back { transform: rotateY(180deg); background: var(--brand-primary, #c0006f); color: #fff; }
/* Met foto: de afbeelding vult de achterkant, met een merkkleur-laag eroverheen
   zodat titel + tekst leesbaar blijven. */
.wf-agenda-back.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Scrim over de achterkant-foto voor leesbare tekst. Standaard huisstijl op 82%; de klant kan dit
   per blok overschrijven met een eigen kleur/sterkte via de blok-overlay (--wf-agenda-scrim-*). */
.wf-agenda-back.has-photo::before { content: ""; position: absolute; inset: 0; background: var(--wf-agenda-scrim-color, var(--brand-primary, #c0006f)); opacity: var(--wf-agenda-scrim-a, .82); }
.wf-agenda-back.has-photo > * { position: relative; z-index: 1; }
.wf-agenda-back .wf-agenda-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.wf-agenda-back .wf-agenda-intro { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9); margin-bottom: 16px; }
.wf-agenda-back .wf-agenda-link { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
.wf-agenda-back .wf-agenda-link i { margin-left: 5px; }

/* Maandfilter op de agenda-overzichtspagina. */
.wf-month-pill {
  border: 1px solid #e3e4e6; background: #fff; color: #2a3547;
  border-radius: 100px; padding: 8px 22px; font-size: 14px; font-weight: 600;
  transition: all .25s ease;
}
.wf-month-pill:hover { border-color: var(--brand-primary, #c0006f); color: var(--brand-primary, #c0006f); }
.wf-month-pill.active { background: var(--brand-primary, #c0006f); border-color: var(--brand-primary, #c0006f); color: #fff; }

/* ── Voorpagina-blok achtergrond + patroon ───────────────────────────────
   Per blok kiest de klant (Voorpagina modules) een achtergrond + optioneel een
   patroon. De klassen staan DIRECT op de <section> van de module (Crafto's
   main.js verplaatst elke section via wrapAll, dus een wrapper-div zou leeg
   achterblijven). De kleur wint met !important van de eigen achtergrond van de
   module (bv. Shop/FAQ). Het patroon ligt als subtiele overlay erover en past
   z'n kleur aan: donker op een lichte achtergrond, licht op een donkere. */

/* Achtergrondkleuren — !important zodat de keuze altijd wint van de modulestijl.
   Kleur via background-color (longhand) zodat een patroon-afbeelding kan meeliften;
   de eigen achtergrond-afbeelding/gradient van de module wordt apart weggezet. */
.wf-applied.wf-block-white { background-color: #ffffff !important; }
.wf-applied.wf-block-gray  { background-color: #f7f7f7 !important; }
.wf-applied.wf-block-dark  { background-color: #232323 !important; }
/* Huisstijlkleuren: lezen de klantkleur uit (zie _SiteLayout --brand-*), zodat het blok
   aansluit op de rest van de site. De tekstkleur volgt via wf-on-dark/wf-on-light (luminantie). */
.wf-applied.wf-block-primary   { background-color: var(--brand-primary)   !important; }
.wf-applied.wf-block-secondary { background-color: var(--brand-secondary-ink) !important; }
.wf-applied.wf-block-tertiary  { background-color: var(--brand-tertiary)  !important; }
/* Effen kleur-blokken hebben geen achtergrondbeeld (strip eventuele restanten). Uitzondering: een
   foto-effect (wf-fx-foto) zet zijn eigen inline background-image — die moet blijven staan, ook als
   de klant daarnaast een achtergrondkleur koos (kleur + foto samen -> foto is leidend). */
.wf-applied[class*="wf-block-"]:not(.wf-fx-foto):not(.wf-fx-gradient) { background-image: none !important; }

/* Donker blok (of donkere huisstijlkleur): maak de standaard donkere moduletekst leesbaar (wit). */
/* Gewone tekst wordt wit via overerving; expliciet-donkere koppen/teksten forceren we wit.
   .text-base-color (merk-accent) NIET wit maken — dat blijft de accentkleur. */
:is(.wf-block-dark, .wf-on-dark) { color: #fff; }
:is(.wf-block-dark, .wf-on-dark) h1, :is(.wf-block-dark, .wf-on-dark) h2, :is(.wf-block-dark, .wf-on-dark) h3,
:is(.wf-block-dark, .wf-on-dark) h4, :is(.wf-block-dark, .wf-on-dark) h5, :is(.wf-block-dark, .wf-on-dark) h6,
:is(.wf-block-dark, .wf-on-dark) .text-dark-gray { color: #fff !important; }
:is(.wf-block-dark, .wf-on-dark) .text-muted,
:is(.wf-block-dark, .wf-on-dark) .text-medium-gray { color: rgba(255,255,255,.7) !important; }

/* Lichte componenten binnen een donker/gekleurd blok (kaarten, accordion, lichte pills)
   houden hun eigen donkere tekst, zodat niets wit-op-wit wordt. Bootstrap .card heeft een
   witte achtergrond -> tekst erin moet donker blijven (bv. de Producten/Diensten-kaartjes). */
:is(.wf-block-dark, .wf-on-dark) .bg-white,
:is(.wf-block-dark, .wf-on-dark) [class*="bg-white"],
:is(.wf-block-dark, .wf-on-dark) .accordion-item,
:is(.wf-block-dark, .wf-on-dark) .card:not([class*="bg-"]),
:is(.wf-block-dark, .wf-on-dark) .bg-white :is(h1,h2,h3,h4,h5,h6,p,span,li,a,div,button,.text-dark-gray),
:is(.wf-block-dark, .wf-on-dark) .accordion-item :is(h1,h2,h3,h4,h5,h6,p,span,li,a,div,button,.accordion-button,.text-dark-gray),
:is(.wf-block-dark, .wf-on-dark) .card:not([class*="bg-"]) :is(h1,h2,h3,h4,h5,h6,p,span,li,a,div,button,.text-dark-gray) {
  color: var(--dark-gray) !important;
}
/* Exception: a dark-filled button (btn-dark-gray) carries its OWN background, so the card-recolor
   rule above must not touch its label. Mirror the theme's native states exactly: WHITE text while
   resting (dark fill), and DARK text on hover/active (the fill turns transparent then). Setting the
   colour on the button lets the inner icon/label inherit it. */
:is(.wf-block-dark, .wf-on-dark) :is(.bg-white, [class*="bg-white"], .accordion-item, .card:not([class*="bg-"])) .btn-dark-gray {
  color: var(--white) !important;
}
:is(.wf-block-dark, .wf-on-dark) :is(.bg-white, [class*="bg-white"], .accordion-item, .card:not([class*="bg-"])) .btn-dark-gray:hover,
:is(.wf-block-dark, .wf-on-dark) :is(.bg-white, [class*="bg-white"], .accordion-item, .card:not([class*="bg-"])) .btn-dark-gray:active {
  color: var(--dark-gray) !important;
}

/* Publicaties-kaart (Crafto services-box-style-01): de cover krijgt een vaste 4/3-verhouding met
   object-fit cover, zodat alle foto's even hoog zijn en de rijen netjes uitlijnen (de Crafto-hover
   zoom/overlay/icoon komen uit style.css). De fallback vult dezelfde ruimte met een document-icoon. */
/* De witte kaart moet op ELKE blok-achtergrond (de klant kiest die zelf) goed afsteken: de schaduw
   werkt op donker/gekleurd, een haarlijn-rand geeft definitie op een witte/lichte achtergrond. */
/*  Ronding volgt de klantinstelling (--wf-radius-card), niet Crafto's vaste 6px: de klant stelt de
    rondingen zelf in en zag die hier niet terug (Jenny 04-08). Let op: business1 gebruikt elders nog
    volop vaste `border-radius-*`-klassen — dat is een apart, template-breed punt. */
.wf-pub-card { border: 1px solid rgba(0, 0, 0, .08); border-radius: var(--wf-radius-card, 6px); }
.wf-pub-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wf-pub-noimg { background: #f4f2ee; color: var(--medium-gray); }
.wf-pub-noimg i { font-size: 42px; }

/* ── Publicaties: categorie, datum en intro op de kaart (04-08-2026) ──────────────
   De kaart toonde alleen een omslag, de titel en een downloadknop, terwijl categorie, datum en intro
   wél in de gegevens zaten. Zelfde inhoud als de vernieuwde beauty1-kaart, in de opmaak van
   business1. Kleuren via de bestaande variabelen (--base-color is het klant-accent). */
.wf-pub-cat {
    position: absolute; top: 12px; left: 12px; z-index: 2; max-width: calc(100% - 24px);
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
    padding: 7px 13px; border-radius: var(--r-pill, 999px);
    background: var(--base-color); color: var(--brand-on-secondary, #fff);
}
/*  Op de detailpagina staat het label gewoon in de tekstkolom in plaats van op de omslag. */
.wf-pub-cat--static { position: static; display: inline-block; max-width: 100%; }

.wf-pub-datum { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--medium-gray); }
.wf-pub-titel { text-decoration: none; transition: color .25s ease; }
.wf-pub-titel:hover { color: var(--base-ink); }
.wf-pub-intro { font-size: 15px; line-height: 1.7; color: var(--medium-gray); }
/*  Aantal naast een filterknop: iets rustiger dan het label zelf, zodat het label leidend blijft. */
.wf-pub-aantal { font-size: 12.5px; opacity: .7; margin-left: 6px; }

/* ── Lege staat ──────────────────────────────────────────────────────────────── */
.wf-pub-leeg {
    background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: var(--wf-radius-card, 6px);
    padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px);
    max-width: 640px; margin-inline: auto;
}
.wf-pub-leeg-vlak {
    width: 78px; height: 100px; margin: 0 auto 24px; border-radius: var(--wf-radius-image, 6px);
    background: color-mix(in srgb, var(--base-color) 14%, #fff); position: relative;
}
.wf-pub-leeg-vlak::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: var(--base-color);
    border-radius: 0 0 var(--wf-radius-image, 6px) var(--wf-radius-image, 6px);
}

/* ── Detailpagina ────────────────────────────────────────────────────────────── */
.wf-pub-terug {
    display: inline-flex; align-items: center; text-decoration: none;
    font-size: 14.5px; font-weight: 600; letter-spacing: .02em; color: var(--base-ink);
    margin-bottom: clamp(20px, 3vw, 32px);
}
.wf-pub-terug i { transition: transform .25s ease; }
.wf-pub-terug:hover { color: var(--base-ink); }
.wf-pub-terug:hover i { transform: translateX(-3px); }

/*  Opzet v2 (ontwerp Claude Design, 04-08): titelblok over de volle breedte, daaronder de leestekst
    met daarnaast een downloadblok dat op desktop meeloopt bij het scrollen. Verving een paneel waarin
    omslag en tekst naast elkaar stonden; bij een lange tekst bleef de download daar bovenaan achter. */
.wf-pub-kop {
    padding-bottom: clamp(20px, 2.6vw, 32px); border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: clamp(26px, 3.6vw, 44px);
}
.wf-pub-kop-datum { display: block; margin-top: 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--medium-gray); }
.wf-pub-kop-titel { margin-top: 10px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.22; max-width: 26ch; }
.wf-pub-kop-intro { margin: 16px 0 0; max-width: 58ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--dark-gray, #232323); }

.wf-pub-bodygrid { display: grid; gap: clamp(26px, 3.6vw, 52px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
    .wf-pub-bodygrid { grid-template-columns: minmax(0, 1fr) minmax(290px, 33%); align-items: start; }
    /*  Meelopend downloadblok. De bovenmarge houdt rekening met de vastgezette menubalk van business1;
        zonder die ruimte schuift de kaart er bij het scrollen deels achter. */
    .wf-pub-zij { position: sticky; top: 110px; }
}
.wf-pub-artikel { max-width: 66ch; }

.wf-pub-dl {
    padding: clamp(10px, 1.1vw, 14px); border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--wf-radius-card, 6px);
}
.wf-pub-dl-omslag {
    aspect-ratio: 4 / 3; border-radius: var(--wf-radius-image, 6px); overflow: hidden; background: #f4f2ee;
}
.wf-pub-dl-omslag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wf-pub-dl-body { padding: clamp(14px, 1.3vw, 18px) clamp(8px, .9vw, 12px) clamp(8px, .9vw, 12px); }
.wf-pub-dl-titel { font-size: 18px; line-height: 1.35; }
.wf-pub-dl-meta { display: block; margin-top: 6px; font-size: 14px; color: var(--medium-gray); }
.wf-pub-dl-knop { margin-top: 16px !important; }

.wf-pub-meer { margin-top: clamp(48px, 6vw, 86px); }
.wf-pub-meer-kop {
    display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; justify-content: space-between;
    padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, .08); margin-bottom: clamp(20px, 3vw, 30px);
}
.wf-pub-meer-alle { font-size: 14.5px; font-weight: 600; color: var(--base-ink); text-decoration: none; }
.wf-pub-meer-alle:hover { color: var(--base-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Donkere modus: tekst wordt licht, randen lichter dan het vlak.
   Het downloadblok krijgt hier BEWUST geen eigen achtergrond: het draagt `bg-white`, en business1
   neutraliseert die klasse in donkere modus al site-breed naar transparant. Het gaat dan op in de
   donkere pagina met alleen zijn haarlijn-rand — precies zoals de andere panelen in deze template.
   De lege staat heeft geen `bg-white` en krijgt zijn donkere vlak dus wél hier. */
[data-bs-theme="dark"] .wf-pub-leeg { background: var(--wf-dark-card) !important; border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .wf-pub-dl { border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .wf-pub-dl-omslag,
[data-bs-theme="dark"] .wf-pub-noimg { background: color-mix(in srgb, #fff 6%, var(--site-dark-bg)); }
[data-bs-theme="dark"] .wf-pub-intro,
[data-bs-theme="dark"] .wf-pub-kop-intro,
[data-bs-theme="dark"] .wf-pub-dl-meta,
[data-bs-theme="dark"] .wf-pub-kop-datum,
[data-bs-theme="dark"] .wf-pub-datum { color: #b8b4ae; }
[data-bs-theme="dark"] .wf-pub-kop { border-bottom-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .wf-pub-meer-kop { border-bottom-color: rgba(255, 255, 255, .12); }
/*  De blok-opmaak van een voorpagina-blok zet op een donkere achtergrond alle koppen op wit. Binnen de
    witte kaart klopt dat niet — daar staat de titel op een licht vlak. Zie dezelfde correctie in
    custom-beauty1.css. */
.wf-applied.wf-on-dark .wf-pub-card .wf-pub-titel { color: var(--dark-gray, #232323) !important; }
.wf-applied.wf-on-dark .wf-pub-card .wf-pub-intro,
.wf-applied.wf-on-dark .wf-pub-card .wf-pub-datum { color: var(--medium-gray) !important; }
[data-bs-theme="dark"] .wf-applied.wf-on-dark .wf-pub-card .wf-pub-titel { color: #f1efec !important; }
[data-bs-theme="dark"] .wf-applied.wf-on-dark .wf-pub-card .wf-pub-intro,
[data-bs-theme="dark"] .wf-applied.wf-on-dark .wf-pub-card .wf-pub-datum { color: #b8b4ae !important; }

/* Patroon — een aparte overlay-laag (::before) BOVENOP de achtergrondkleur, zodat de
   sterkte (opacity) en tegelgrootte per blok instelbaar zijn zonder de kleur eronder te
   raken. --wf-pat-opacity en --wf-pat-size worden per sectie inline gezet (zie Home.cshtml);
   de defaults hier houden 'm ook zonder inline-waarden subtiel. Een lichte variant op donkere
   blokken, een donkere variant op lichte blokken, zodat het tegeltje altijd zichtbaar blijft. */
.wf-applied.wf-block-pattern { position: relative; }
.wf-applied.wf-block-pattern > * { position: relative; z-index: 1; }   /* inhoud boven de overlay */
.wf-applied.wf-block-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-position: center top;
  background-size: var(--wf-pat-size, auto);
  opacity: var(--wf-pat-opacity, .2);
  pointer-events: none;
  z-index: 0;
}
.wf-applied.wf-pat-dots::before       { background-image: url(../images/wf-pattern-dots.svg); }
.wf-applied.wf-pat-grid::before       { background-image: url(../images/wf-pattern-grid.svg); }
.wf-applied.wf-pat-lines::before      { background-image: url(../images/wf-pattern-lines.svg); }
.wf-applied.wf-pat-crosshatch::before { background-image: url(../images/wf-pattern-crosshatch.svg); }
.wf-applied.wf-pat-plus::before       { background-image: url(../images/wf-pattern-plus.svg); }
.wf-applied.wf-pat-zigzag::before     { background-image: url(../images/wf-pattern-zigzag.svg); }
.wf-applied.wf-pat-wave::before       { background-image: url(../images/wf-pattern-wave.svg); }
.wf-applied.wf-pat-circles::before    { background-image: url(../images/wf-pattern-circles.svg); }
.wf-applied:is(.wf-block-dark, .wf-on-dark).wf-pat-dots::before       { background-image: url(../images/wf-pattern-dots-light.svg); }
.wf-applied:is(.wf-block-dark, .wf-on-dark).wf-pat-grid::before       { background-image: url(../images/wf-pattern-grid-light.svg); }
.wf-applied:is(.wf-block-dark, .wf-on-dark).wf-pat-lines::before      { background-image: url(../images/wf-pattern-lines-light.svg); }
.wf-applied:is(.wf-block-dark, .wf-on-dark).wf-pat-crosshatch::before { background-image: url(../images/wf-pattern-crosshatch-light.svg); }
.wf-applied:is(.wf-block-dark, .wf-on-dark).wf-pat-plus::before       { background-image: url(../images/wf-pattern-plus-light.svg); }
.wf-applied:is(.wf-block-dark, .wf-on-dark).wf-pat-zigzag::before     { background-image: url(../images/wf-pattern-zigzag-light.svg); }
.wf-applied:is(.wf-block-dark, .wf-on-dark).wf-pat-wave::before       { background-image: url(../images/wf-pattern-wave-light.svg); }
.wf-applied:is(.wf-block-dark, .wf-on-dark).wf-pat-wave::before       { background-image: url(../images/wf-pattern-wave-light.svg); }

/* ── Sfeer-effecten per voorpagina-blok ──────────────────────────────────────────
   Gekozen in Layout website -> Voorpagina modules. De decoratieve DOM (beeld, vormen,
   deeltjes-canvas) wordt door het inline-scriptje in Home.cshtml in de <section> gezet;
   deze regels verzorgen positionering + animatie. Alle effect-lagen staan áchter de
   inhoud (z-index 0); de echte blok-inhoud wordt naar z-index 1 getild. */
.wf-applied.wf-fx { position: relative; overflow: hidden; }
.wf-applied.wf-fx > *:not(.wf-fx-deco-img):not(.wf-fx-shape):not(.wf-fx-particles) { position: relative; z-index: 1; }

/* Kleurverloop: zacht diagonaal verloop. Eigen kleuren via --wf-grad-from/--wf-grad-to (klantkeuze),
   met de huisstijlkleuren als terugval. Tekstkleur volgt wf-on-*. */
.wf-applied.wf-fx-gradient { background-image: linear-gradient(135deg, var(--wf-grad-from, var(--brand-primary)), var(--wf-grad-to, var(--brand-secondary))) !important; }

/* Foto-achtergrond: vullende foto met een echt diepte-parallax (background-attachment: fixed) +
   donker waas voor leesbare tekst. Op mobiel is 'fixed' onbetrouwbaar/janky -> daar statisch. */
.wf-applied.wf-fx-foto { background-size: cover !important; background-position: center !important;
  background-repeat: no-repeat !important; background-attachment: fixed !important; }
.wf-applied.wf-fx-foto::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(15, 20, 30, var(--wf-foto-scrim, .5)); pointer-events: none; }
@media (max-width: 991.98px) { .wf-applied.wf-fx-foto { background-attachment: scroll !important; } }

/* Decoratief hoekbeeld: groot, half uit beeld linksboven, meedraaiend (skrollr). */
.wf-fx-deco-img { position: absolute; top: -120px; left: -40px; width: min(620px, 55%); height: auto;
  z-index: 0; pointer-events: none; opacity: .9; }
@media (max-width: 991.98px) { .wf-fx-deco-img { width: 70%; top: -70px; left: -30px; opacity: .7; } }

/* Zwevende vormen: subtiele, langzaam op-en-neer drijvende cirkels in de huiskleur. */
.wf-fx-shape { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  background: var(--brand-primary); opacity: .10; will-change: transform; }
.wf-fx-shape.wf-shape-1 { width: 180px; height: 180px; top: -40px; right: 8%; animation: wf-float 9s ease-in-out infinite; }
.wf-fx-shape.wf-shape-2 { width: 110px; height: 110px; bottom: -30px; left: 12%; background: var(--brand-secondary);
  opacity: .12; animation: wf-float 11s ease-in-out infinite 1.5s; }
.wf-fx-shape.wf-shape-3 { width: 64px; height: 64px; top: 30%; left: 46%; background: var(--brand-tertiary, var(--brand-secondary));
  opacity: .10; animation: wf-float 7s ease-in-out infinite .8s; }
@keyframes wf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@media (prefers-reduced-motion: reduce) { .wf-fx-shape { animation: none !important; } }

/* Deeltjes: het canvas vult het blok; de tekening zit in wf-block-fx.js. */
.wf-fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ── Kennisbank — voorpagina-blok (blog-side-image-stijl: foto links, tekst rechts) ──────── */
.wf-kb-home { padding: clamp(48px, 6vw, 90px) 0; }
/* Kaart-inhoud (tekst-helft) mag krimpen; de foto-helft heeft een vaste breedte + hoogte. */
.wf-kb-home .wf-kb-img { flex: 0 0 42%; max-width: 42%; min-height: 190px;
  background-size: cover; background-position: center; background-color: #e9edf2; }
.wf-kb-home .wf-kb-img-empty { background-image: linear-gradient(135deg, var(--brand-primary), rgba(0,0,0,.18)); }
.wf-kb-home .wf-kb-content { flex: 1 1 auto; min-width: 0; }
/* Titel op 2 regels, intro op 3 — houdt de kaarten even hoog en netjes. */
.wf-kb-home .wf-kb-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-kb-home .wf-kb-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 575.98px) {
  .wf-kb-home .wf-kb-img { flex-basis: auto; max-width: none; width: 100%; height: 190px; }
  /*  De clamp op 2 regels bestaat om kaarten in één rij even hoog te houden. Op de telefoon staan de
      kaarten onder elkaar, dus die reden vervalt — en dan kapt hij alleen nog titels af die er prima
      bij passen. Drie regels (niet los) houdt de kaart begrensd bij een uitzonderlijk lange titel. */
  .wf-kb-home .wf-kb-title { -webkit-line-clamp: 3; }
}

/* Paginering onder het blok. */
.wf-kb-pager { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 40px; flex-wrap: wrap; }
.wf-kb-pagenum, .wf-kb-pagebtn { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #e2e8ef;
  background: #fff; color: var(--dark-gray); border-radius: 8px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.wf-kb-pagenum:hover, .wf-kb-pagebtn:hover:not(:disabled) { border-color: var(--brand-ink); color: var(--brand-ink); }
.wf-kb-pagenum.active { background: var(--brand-primary); border-color: var(--brand-ink); color: var(--brand-on-primary); }
.wf-kb-pagebtn:disabled { opacity: .4; cursor: default; }

/* "Lees meer"-tekstlink op de kennisbank-kaarten (overzicht + voorpaginablok). Vervangt de
   Crafto gradient-knop die op deze compacte kaarten als een rommelig blokje rendert: een strakke
   editorial link in de huisstijl-accentkleur met een pijl die bij hover meeschuift en de tekst
   onderstreept. Kleur volgt var(--base-color) zodat het voor elke klant klopt. */
.wf-kb-more { display: inline-flex; align-items: center; gap: 7px; color: var(--base-ink);
  font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1;
  transition: gap .2s ease, color .2s ease; }
.wf-kb-more i { font-size: .95em; transition: transform .2s ease; }
.wf-kb-more:hover { color: var(--base-ink); text-decoration: underline; text-underline-offset: 4px; gap: 11px; }
.wf-kb-more:hover i { transform: translateX(2px); }
/* Op een donker blok: witte link zodat hij leesbaar blijft. */
.wf-kb-home:is(.wf-block-dark, .wf-on-dark) .wf-kb-more,
[data-bs-theme="dark"] .wf-kb-more { color: #fff; }

/* Thumbnail bij een kennisbank-FAQ (overzichtspagina + voorpaginablok). */
.wf-kbfaq-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none;
  box-shadow: 0 1px 3px rgba(8,15,52,.12); }
@media (max-width: 575.98px) { .wf-kbfaq-thumb { width: 44px; height: 44px; } }

/* Kennisbank-FAQ als klikbaar item (linkt naar de FAQ-detailpagina). */
.wf-kbfaq-link { padding: .9rem 1rem; color: inherit; transition: box-shadow .15s, border-color .15s; }
.wf-kbfaq-link:hover { border-color: var(--brand-primary) !important; box-shadow: 0 6px 18px rgba(8,15,52,.08); }
.wf-kbfaq-link .fs-17 { line-height: 1.35; }
.wf-kbfaq-link .bi-chevron-right { transition: transform .15s; }
.wf-kbfaq-link:hover .bi-chevron-right { transform: translateX(3px); }

/* Compacte FAQ-lijst in het voorpaginablok (de overzichtspagina blijft ruimer). */
.wf-kbfaq-compact { max-width: 760px; margin: 0 auto; }
.wf-kbfaq-compact .wf-kbfaq-link { padding: .5rem .8rem; }
.wf-kbfaq-compact .wf-kbfaq-link .fs-17 { font-size: .9rem !important; }
.wf-kbfaq-compact .wf-kbfaq-thumb { width: 40px; height: 40px; border-radius: 7px; }

/* Shop-blok is standaard een LICHTE sectie (net als Diensten): titel + intro + navigatiepijlen
   donker; de oranje "Shop"-badge en de witte tekst óp de productfoto's blijven ongemoeid.
   Kiest de klant een donkere blok-kleur (of in de donkere template), dan wordt de tekst wit. */
.wf-shop-home h3.text-white,
.wf-shop-home p.text-white { color: var(--dark-gray) !important; opacity: 1 !important; }
.wf-shop-home .slider-navigation-style-04 { color: var(--dark-gray) !important; border-color: rgba(0,0,0,.15) !important; }
/* Donkere blok-keuze of donkere modus -> tekst weer wit. */
.wf-shop-home:is(.wf-block-dark, .wf-on-dark) h3.text-white,
.wf-shop-home:is(.wf-block-dark, .wf-on-dark) p.text-white,
[data-bs-theme="dark"] .wf-shop-home h3.text-white,
[data-bs-theme="dark"] .wf-shop-home p.text-white { color: #fff !important; opacity: 1 !important; }
.wf-shop-home:is(.wf-block-dark, .wf-on-dark) .slider-navigation-style-04,
[data-bs-theme="dark"] .wf-shop-home .slider-navigation-style-04 { color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; }

/* =========================================================================
   PRODUCTEN — 3b voorpagina-slider (native scroll-snap). GEEN vaste achtergrond
   op .wf-p3b-home: de klant kiest de blokkleur in het dashboard (wf-block-white/
   gray/dark/primair/secundair/tertiair + wf-on-light/wf-on-dark, gezet door
   Home.cshtml). Kop/pijltjes-contrast volgt exact het patroon van wf-diensten-home.
   De kaarten zijn altijd wit met donkere tekst (achtergrond-onafhankelijk); accenten
   (badge/prijs/bespaar-chip/wagen-knop) -> var(--brand-secondary)/(-ink).
   ========================================================================= */
.wf-p3b-home { position: relative; padding: clamp(40px, 6vw, 80px) 0; }

/* Kop — standaard (geen dashboard-klasse, bv. "standaard" achtergrond) = donkere tekst,
   want de section zelf heeft geen achtergrond (volgt de pagina, doorgaans licht). */
.wf-p3b-head { color: #1f2937; }
.wf-p3b-eyebrow { color: var(--brand-secondary-ink); }
.wf-p3b-title { color: inherit; }
/*  De korte hint naast de titel ("Een selectie uit ons aanbod — sleep of veeg …") in een dun, afgerond kader,
    en de introtekst van de klant op een eigen regel onder de kop (Tom, 13-09-2026). De randkleur volgt de
    tekstkleur, zodat het kader op een licht en op een donker blok even rustig blijft. */
.wf-p3b-hint {
  display: inline-block; max-width: 100%; margin: 0; padding: 10px 18px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 12px;
  line-height: 1.55;
}
.wf-p3b-intro { margin-top: 22px; }
@media (max-width: 991.98px) { .wf-p3b-intro { margin-top: 4px; } }
.wf-p3b-sub { color: inherit; opacity: .7; }
/* STRUCTUUR = Crafto Swiper (zoals _Diensten_Home). De pijltjes zijn Crafto swiper-buttons; hun
   kleur volgt de dashboard-blokopmaak. CTA-knop naar de shop, standaard donker. */
.wf-p3b-home .swiper-button-prev, .wf-p3b-home .swiper-button-next { color: #1f2937; border-color: rgba(0, 0, 0, .15) !important; }
.wf-p3b-cta { background: #1f2937; color: #fff; }
.wf-p3b-cta:hover { background: #111827; color: #fff; }

/* Merk-pil: standaard/lichte blokken = lichte tint + donkere inkt (leesbaar op licht),
   donkere blokken = doorschijnend wit + witte tekst. Zonder deze regels pakt de pil de globale
   .wf-brand-pill (wit-op-primair) en valt de tekst weg op de lichte sectie-achtergrond. */
.wf-p3b-home .wf-brand-pill { background: color-mix(in srgb, var(--brand-secondary) 12%, #fff) !important; color: var(--brand-secondary-ink) !important; }
.wf-p3b-home:is(.wf-block-dark, .wf-on-dark) .wf-brand-pill { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }

/* Lichte dashboardkleur (wit/grijs/licht merk-contrast) -> donkere kop/pijltjes. */
.wf-p3b-home:is(.wf-block-white, .wf-block-gray, .wf-on-light) :is(.wf-p3b-head, .swiper-button-prev, .swiper-button-next) { color: #1f2937 !important; }
.wf-p3b-home:is(.wf-block-white, .wf-block-gray, .wf-on-light) :is(.swiper-button-prev, .swiper-button-next) { border-color: rgba(0, 0, 0, .15) !important; }

/* Donkere dashboard-/merk-kleur -> witte kop/pijltjes + inverse knop. */
.wf-p3b-home:is(.wf-block-dark, .wf-on-dark) :is(.wf-p3b-head, .swiper-button-prev, .swiper-button-next) { color: #fff !important; }
.wf-p3b-home:is(.wf-block-dark, .wf-on-dark) :is(.swiper-button-prev, .swiper-button-next) { border-color: rgba(255, 255, 255, .35) !important; }
.wf-p3b-home:is(.wf-block-dark, .wf-on-dark) .wf-p3b-cta { background: #fff; color: #1f2937; }
.wf-p3b-home:is(.wf-block-dark, .wf-on-dark) .wf-p3b-cta:hover { background: #f1f1f1; color: #1f2937; }

/* Gelijke kaarthoogtes: Crafto's swiper-wrapper laat de slides standaard NIET uitrekken, waardoor
   een kaart met korting-chip hoger werd. Slides op auto-hoogte + de flex-rij op stretch zet alle
   slides op de hoogte van de langste; de kaart (h-100) vult die, prijs blijft onderaan (mt-auto). */
.wf-p3b-home .swiper-wrapper { align-items: stretch; }
.wf-p3b-home .swiper-slide { height: auto; }

/* Kaart — altijd wit met donkere tekst, ongeacht de sectie-achtergrond (het "navy" ontwerp
   is dus enkel de dashboardkeuze eromheen, nooit de kaart zelf). */
.wf-p3b-card {
    display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 12px;
    overflow: hidden; color: #1f2937;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transition: transform .3s ease, box-shadow .3s ease;
}
.wf-p3b-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.wf-p3b-ph { aspect-ratio: 1 / 1; background: #f3f4f6; overflow: hidden; }
.wf-p3b-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-p3b-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 28px; }
/* Label/badge op de kaartfoto: licht "frosted" pilletje (semi-transparant wit + zachte schaduw)
   met donkere merk-inkt, i.p.v. een zwaar gevuld merkvlak. Blijft leesbaar op elke foto en oogt
   luchtiger. De donkere inkt (secondary-ink) houdt het merk-accent. */
.wf-p3b-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2; /* boven de kaart-foto-waas (.wf-card-overlay z-index:1) */
    background: rgba(255, 255, 255, .92); color: var(--brand-secondary-ink);
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 5px 12px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.wf-p3b-body { padding: 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.wf-p3b-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: 4px; }
/* Titel ALTIJD donker op de witte kaart — wint van de blok-kop-kleurregel (wit op donkere blokken). */
.wf-p3b-card .wf-p3b-name { font-size: 1.08rem; font-weight: 600; color: #1f2937 !important; margin: 0 0 6px; line-height: 1.35; }
.wf-p3b-sub2 { font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-p3b-was { font-size: 12.5px; color: #9ca3af; }
.wf-p3b-price { font-size: 1.3rem; font-weight: 700; color: var(--brand-secondary-ink); }
.wf-p3b-save { display: inline-block; width: fit-content; background: #eef6e9; color: #5b8f43; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.wf-p3b-cart {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-secondary);
    color: var(--brand-on-secondary); display: flex; align-items: center; justify-content: center;
    transition: filter .2s ease;
}
.wf-p3b-card:hover .wf-p3b-cart { filter: brightness(.92); }

/* Dark mode (site-toggle) — zelfde kaartbehandeling als het (ongebruikte) wf-shop-card. */
[data-bs-theme="dark"] .wf-p3b-card { background: #1e1e1e; color: #f1f1f1; }
[data-bs-theme="dark"] .wf-p3b-card .wf-p3b-name { color: #f1f1f1 !important; }
[data-bs-theme="dark"] .wf-p3b-sub2 { color: #b6b6b6; }
[data-bs-theme="dark"] .wf-p3b-ph { background: #2a2a2a; }
[data-bs-theme="dark"] .wf-p3b-was { color: #9a9a9a; }
/* Prijs: op de lichte kaart de donkere merk-inkt (secondary-ink); op de donkere kaart is die inkt te
   donker (contrast ~2.4 = onleesbaar) → licht huisstijl-tan. Een licht-eiland-kaart houdt de inkt. */
[data-bs-theme="dark"] .wf-p3b-card .wf-p3b-price { color: var(--brand-secondary-ondark, #d8c6ad); }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-p3b-card .wf-p3b-price { color: var(--brand-secondary-ink); }
/* Label/badge in donkere modus: het lichte "frosted" pilletje sprong als een witte vlek uit de donkere
   kaart. Op de donkere site krijgt 'ie daarom dezelfde donkere glas-look als de eyebrow-pil (donker-
   transparant + lichte tekst). Een licht-eiland-kaart (.wf-on-light, blijft wit op de donkere site)
   houdt bewust het originele witte frosted pilletje. Lichte modus blijft volledig ongemoeid. */
[data-bs-theme="dark"] .wf-p3b-badge {
    background: rgba(18, 18, 18, .62); color: #f1f1f1;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .38);
}
[data-bs-theme="dark"] :is(.wf-on-light) .wf-p3b-badge {
    background: rgba(255, 255, 255, .92); color: var(--brand-secondary-ink);
    border-color: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

@media (max-width: 575.98px) {
    .wf-p3b-home { text-align: center; }
    .wf-p3b-body { padding: 14px; }
}

/* Nieuwsbrief-aanmeldblok als voorpagina-blok. De achtergrond komt via de wf-block-*-klassen
   (standaard = lichte band); de tekstkleur volgt wf-on-dark en de knop volgt de huisstijl. */
section.wf-nl-block { padding: 48px 16px; background: #f4f6f9; }
.wf-nl-block .wf-nl-title { font-weight: 700; margin: 0 0 6px; }
.wf-nl-block .wf-nl-sub { margin: 0 0 18px; opacity: .9; }
.wf-nl-block .wf-nl-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wf-nl-block .wf-nl-input { flex: 1; min-width: 220px; max-width: 360px; padding: 12px 16px;
  border: 1px solid #d0d7e2; border-radius: var(--wf-radius-input, 8px); font-size: 15px; background: #fff; color: #232323;
  color-scheme: light; }
.wf-nl-block .wf-nl-btn { background: var(--brand-primary); color: #fff; border: 0; border-radius: var(--wf-radius-button, 8px);
  padding: 12px 24px; font-weight: 600; font-size: 15px; cursor: pointer; }
.wf-nl-block .wf-nl-note { font-size: 12px; margin: 10px 0 0; opacity: .7; }
/* Op een donkere/merk-achtergrond: witte knop met donkere tekst zodat hij opvalt
   (zowel het neutrale "Donker" als donkere huisstijlkleuren die wf-on-dark krijgen). */
section.wf-nl-block:is(.wf-block-dark, .wf-on-dark) .wf-nl-btn { background: #fff; color: var(--dark-gray, #232323); }

/*  Leesbaar op elke achtergrond (Tom 16-09-2026, SHOH). Titel, tekst en links volgen de achtergrond
    automatisch via twee variabelen: donkere tekst op een lichte band, lichte tekst op een donkere.
    - Licht: de standaardband, wit/grijs en elke kleur die het blok-stijlsysteem wf-on-light geeft.
    - Donker: "Donker", elke kleur met wf-on-dark, en in het donkere thema alles behalve een bewust
      lichte kleur. De steunkleur wordt in het donkere thema zijn donkere leesvariant (zie
      section.wf-applied.wf-block-secondary), dus die telt daar als donker.
    De knop krijgt de automatisch leesbare tekstkleur van de hoofdkleur in plaats van altijd wit. */
section.wf-nl-block { --wf-nl-t: var(--dark-gray, #1f2937); --wf-nl-s: #4b5563; }
section.wf-nl-block:is(.wf-block-dark, .wf-on-dark),
[data-bs-theme="dark"] section.wf-nl-block:not(.wf-on-light),
[data-bs-theme="dark"] section.wf-nl-block.wf-block-secondary { --wf-nl-t: #fff; --wf-nl-s: rgba(255, 255, 255, .82); }
[data-bs-theme="dark"] section.wf-nl-block:not(.wf-applied) { background: color-mix(in srgb, var(--site-dark-bg, #16201b) 86%, #fff); }
.wf-nl-block .wf-nl-title { color: var(--wf-nl-t) !important; }
.wf-nl-block .wf-nl-sub,
.wf-nl-block .wf-nl-note { color: var(--wf-nl-s) !important; opacity: 1; }
.wf-nl-block .wf-nl-note a { color: var(--wf-nl-t) !important; text-decoration: underline; text-underline-offset: 2px; }
.wf-nl-block .wf-nl-btn { color: var(--brand-on-primary, #fff); }
/*  Een kleurverloop loopt vaak van donker naar licht: een zachte schaduw houdt de tekst op beide
    uiteinden leesbaar, zonder dat de klant iets hoeft in te stellen. */
section.wf-nl-block.wf-fx-gradient.wf-on-dark :is(.wf-nl-title, .wf-nl-sub, .wf-nl-note) { text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
section.wf-nl-block.wf-fx-gradient.wf-on-light :is(.wf-nl-title, .wf-nl-sub, .wf-nl-note) { text-shadow: 0 1px 14px rgba(255, 255, 255, .6); }
[data-bs-theme="dark"] section.wf-nl-block:not(.wf-on-light) .wf-nl-btn,
[data-bs-theme="dark"] section.wf-nl-block.wf-block-secondary .wf-nl-btn { background: #fff; color: var(--dark-gray, #232323); }

/* =====================================================================
   Voorpagina-introblok (_Intro_Home) — "over ons"-sectie onder de slider.
   Links de foto met decoratieve cirkel + hover-zoom, optioneel statgetal en
   badge; rechts labeltje + kop + tekst + knop/telefoon.
   ===================================================================== */
.wf-intro { padding: 90px 0; overflow: hidden; }

/* --- Beeld links --- */
.wf-intro-media { position: relative; padding: 6% 8%; }
/* Zachte gradient-cirkel achter de foto (huisstijlkleur, heel licht). */
.wf-intro-ring {
  position: absolute; inset: 0; margin: auto; z-index: 0;
  width: 86%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--brand-secondary) 16%, transparent),
              color-mix(in srgb, var(--brand-primary) 8%, transparent) 70%, transparent 72%);
}
/*  De foto houdt zijn EIGEN verhouding: een vierkante foto blijft vierkant, een staande foto blijft
    staand, een panorama blijft een panorama. Hij stond op `width: 100%` met een vrije hoogte, en dan
    rekt een staande foto door naar ver boven de 500px terwijl een panorama als een streep in beeld
    komt. Nu bepaalt de HOOGTE de bovengrens (500px) en volgt de breedte daaruit; is de foto breder
    dan de kolom, dan is de kolombreedte de grens en volgt de hoogte. Vandaar zowel max-height als
    max-width, met width:auto ertussen.

    Het kadertje krimpt mee (inline-flex, niet blokbreed), en dat is precies wat de decoratieve cirkel
    erachter zichtbaar houdt: die staat op 86% van de KOLOM, dus zodra de foto smaller of lager is dan
    de kolom komt de cirkel eromheen vrij. Daarom staat het kader ook gecentreerd in de kolom.
    Zie [[intro-foto-eigen-verhouding]]. */
.wf-intro-media { display: flex; flex-direction: column; align-items: center; }
/*  Ankerkader voor het statgetal en het badge-label: het krimpt met de foto mee, zodat die twee OVER
    de foto blijven liggen in plaats van naast een smallere foto op de cirkel te zweven. Zie de
    toelichting in _Intro_Home.cshtml. */
.wf-intro-frame { position: relative; z-index: 1; max-width: 100%; }
.wf-intro-photo {
  position: relative; z-index: 1; border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.12);
  display: inline-flex; max-width: 100%;
}
/*  object-fit doet hier niets meer (de <img> heeft geen opgelegde maat meer die hij moet vullen) maar
    blijft staan voor het geval een klant-override wél een hoogte zet. */
.wf-intro-photo img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 500px;
  object-fit: cover; transition: transform .7s ease;
}
/* Getinte waas (overlay) over de introfoto — kleur + sterkte komen inline uit de klantkeuze. Ligt
   over de foto (z-index 1), maar onder het statgetal/badge (z-index 2), die dus leesbaar blijven. */
.wf-intro-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wf-intro-media:hover .wf-intro-photo img { transform: scale(1.06); }

/*  Groot statgetal (bv. "28+") als zwevend kaartje. De maten stonden in procenten van de KOLOM, en
    dat viel samen met een net overhangetje over de linkerrand van de foto omdat de foto de kolom
    vulde. Sinds het kaartje aan .wf-intro-frame hangt (= de foto zelf) zou 4% er binnenin belanden,
    dus het overhangetje staat er nu in vaste pixels; de speling in .wf-intro-media (padding 6%/8%)
    vangt hem op. */
.wf-intro-stat {
  position: absolute; left: -18px; bottom: 22px; z-index: 2;
  background: #fff; border-radius: 18px; padding: 16px 22px; text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}
.wf-intro-stat-num { display: block; font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--brand-ink); }
.wf-intro-stat-lbl { display: block; margin-top: 4px; font-size: max(12px, .85rem); color: var(--dark-gray, #232323); opacity: .7; }

/* Rond badge-label rechtsboven over de foto (huisstijlkleur). Vaste maten, zie .wf-intro-stat. */
.wf-intro-badge {
  position: absolute; right: -14px; top: 14px; z-index: 2;
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--brand-secondary); color: var(--brand-on-secondary);
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.wf-intro-badge span { font-size: max(12px, .78rem); font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: .5px; padding: 0 10px; }

/* --- Tekst rechts --- */
.wf-intro-eyebrow {
  display: inline-block; margin-bottom: 18px; padding: 7px 16px; border-radius: 999px;
  font-size: max(12px, .8rem); font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--brand-secondary-ink);
  background: color-mix(in srgb, var(--brand-secondary) 12%, transparent);
}
.wf-intro-title { color: var(--brand-ink); font-weight: 800; line-height: 1.12; letter-spacing: -1px;
  font-size: clamp(1.9rem, 3.4vw, 3rem); margin: 0 0 22px; }
.wf-intro-text { font-size: 1.075rem; line-height: 1.8; color: var(--dark-gray, #232323); opacity: .85; margin: 0 0 30px; max-width: 33em; }
.wf-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.wf-intro-phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--brand-ink); text-decoration: none; }
.wf-intro-phone i { color: var(--brand-secondary-ink); font-size: 1.3rem; }
.wf-intro-phone:hover { color: var(--brand-secondary-ink); }

/* --- Responsive: foto boven de tekst op kleinere schermen --- */
@media (max-width: 991.98px) {
  .wf-intro { padding: 60px 0; }
  .wf-intro-media { max-width: 520px; margin: 0 auto 10px; }
  .wf-intro-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }
}
@media (max-width: 575.98px) {
  .wf-intro-stat { padding: 12px 16px; }
  .wf-intro-stat-num { font-size: 1.9rem; }
  .wf-intro-badge { width: 84px; height: 84px; }
  /*  Met minimaal 12px letters paste "KOM SHOPPEN!" net niet meer in dit kleinere rondje en viel het
      uitroepteken naar een eigen regel. Zonder letterafstand en met minder binnenruimte past het weer. */
  .wf-intro-badge span { letter-spacing: 0; padding: 0 5px; }
  /* Op een telefoon is de speling naast de foto klein; het overhangetje gaat eraf zodat er niets
     buiten de kolom valt. */
  .wf-intro-stat { left: 10px; bottom: 12px; }
  .wf-intro-badge { right: 10px; top: 10px; }
}

/* Donkere modus / donkere blok-achtergrond: kaartje + tekst leesbaar houden. */
[data-bs-theme="dark"] .wf-intro-stat { background: #1c1f26; }
[data-bs-theme="dark"] .wf-intro-stat-lbl,
[data-bs-theme="dark"] .wf-intro-text { color: #e6e6e6; }

/* Contactpagina CTA-balk: verloop van de primaire naar de secundaire huisstijlkleur van de klant
   (vervangt Crafto's vaste flamingo-amethyst-green gradient). Heeft de klant geen secundaire kleur,
   dan vloeit het verloop terug naar de primaire kleur zodat het altijd netjes blijft. */
.wf-cta-gradient {
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, var(--brand-primary))) !important;
}

/* Verplaatsbare actie-balken (Site_CtaBar) op de voorpagina — volle-breedte sectie met huisstijl-,
   eigen kleur- of foto-achtergrond. Bij een foto legt .wf-cta-scrim een instelbaar donker waas over de
   foto zodat de (witte) tekst leesbaar blijft. De inhoud staat via .position-relative bovenop het waas. */
.wf-cta-bar {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 20px;
  padding-bottom: 20px;
}
.wf-cta-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Instelbare hoogte per balk (klant kiest Klein / Normaal / Hoog in het dashboard). Normaal
   houdt de basis-padding hierboven aan; klein en hoog overschrijven die. */
.wf-cta-bar.wf-cta-h-klein  { padding-top: 6px;  padding-bottom: 6px; }
.wf-cta-bar.wf-cta-h-hoog   { padding-top: 80px; padding-bottom: 80px; }
/* Foto-achtergrond: een zachte schaduw achter titel + tekst zodat wit altijd leesbaar blijft,
   ongeacht hoe licht de foto is. Komt bovenop het (instelbare) waas — overschrijft dat niet. */
.wf-cta-onphoto h3,
.wf-cta-onphoto .wf-cta-body { text-shadow: 0 1px 14px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .55); }
/*  Op de telefoon staat dezelfde tekst over veel meer regels, dus hij bedekt een veel groter (en
    daarmee wisselender) deel van de foto: een waas die op desktop nog volstaat, laat op 375px de
    tekst over lichte plekken en gezichten lopen. De schaduw wordt hier daarom iets steviger.
    Bewust ALLEEN de schaduw — de waas-kleur en -sterkte blijven een klantinstelling en die
    overschrijven we niet. Is de tekst nog steeds slecht leesbaar, dan staat het waas te licht. */
@media (max-width: 575.98px) {
    .wf-cta-onphoto h3,
    .wf-cta-onphoto .wf-cta-body { text-shadow: 0 1px 18px rgba(0, 0, 0, .85), 0 1px 4px rgba(0, 0, 0, .75); }
}
/* Rich-tekst binnen de balk: erf de tekstkleur van de wrapper (licht/donker) en laat de laatste
   alinea niet nasleuren onder de knop. */
.wf-cta-body { color: inherit; }
.wf-cta-body :last-child { margin-bottom: 0; }
.wf-cta-body a { color: inherit; text-decoration: underline; }

/* =====================================================================
   FOOTER (Frenque-ontwerp, Canvas.dc.html) — lichte, merk-getinte footer.
   Alle accenten volgen de huisstijl van de klant via --brand-primary; de
   donkere hover-tint wordt daaruit afgeleid met color-mix. Neutrale grijs-
   tinten (tekst) staan bewust los van de huisstijl. Kolommen zijn dynamisch
   (1–4) en verdelen zich over een grid; stapelen netjes op mobiel.
   ===================================================================== */
.biz-footer {
  /* Lokale accent-variabelen: één plek om de footer-huisstijl te sturen.
     --base-color = het template-accent (= huisstijl-secundair) dat ook alle knoppen/
     links op de site kleurt, zodat de footer daar altijd mee matcht en zichtbaar blijft. */
  --biz-fac: var(--base-color);
  --biz-fac-dark: color-mix(in srgb, var(--base-color) 82%, #000);
  /*  Knoppen in de footer: de echte steunkleur met de automatisch leesbare tekstkleur, net als
      .btn-base-color op de rest van de site (Tom 16-09-2026). --biz-fac blijft de leesbare
      accentkleur voor tekst, lijntjes en icoontjes. */
  --biz-fbtn: var(--brand-secondary);
  --biz-fbtn-t: var(--brand-on-secondary);
  --biz-fbtn-dark: color-mix(in srgb, var(--brand-secondary) 85%, #000);
  background: #faf8f5;                                          /* terugval zonder color-mix */
  background: color-mix(in srgb, var(--base-color) 4%, #fff);  /* subtiele merk-tint */
  color: #2a2a2a;
  /* Fijne haarlijn in de huisstijl in plaats van de oude dikke accentbalk (Tom, 25-08): de scheiding
     mag je zien, maar hij moet niet schreeuwen. Eerste regel = terugval voor browsers zonder color-mix. */
  border-top: 1px solid #e6ded4;
  border-top: 1px solid color-mix(in srgb, var(--biz-fac) 32%, transparent);
  font-size: 14.5px;
  padding: 0;   /* Crafto zet standaard 90px op elke <footer>; wij sturen de ruimte zelf. */
}
/*  Breedte én zijruimte van de footer-inhoud in twee variabelen. Eén bron, want de onderbalk ("Powered by
    Webfix" + juridische links) moet exact met de kolommen erboven uitlijnen — die twee mogen nooit uit
    elkaar lopen.
    De zijruimte schaalt mee met het scherm, zodat er op een telefoon geen halve kolom aan lege marge
    overblijft en op een breed scherm de tekst niet tegen de rand plakt. */
.biz-footer {
  --biz-footer-w: 1200px;
  --biz-footer-pad: clamp(22px, 4vw, 48px);
}
/*  Bij vier of vijf blokken mag de footer breder zijn dan de 1200px van de pagina — áls het scherm die
    ruimte heeft. Zonder die extra breedte worden de kolommen zo smal dat de openingstijden verkrampen,
    terwijl er links en rechts een brede lege marge overblijft. */
.biz-footer:has(.biz-footer-cols.cols-4),
.biz-footer:has(.biz-footer-cols.cols-5) { --biz-footer-w: 1360px; }
.biz-footer-inner {
  max-width: var(--biz-footer-w); margin: 0 auto;
  padding: clamp(36px, 4vw, 48px) var(--biz-footer-pad) 0;
}

/*  Kolommen-grid. Het aantal kolommen zit in één variabele (--biz-cols) in plaats van in een handgemaakte
    kolomverdeling per aantal; de breekpunten hoeven dan alleen dát getal te veranderen. Alle
    informatiekolommen zijn precies even breed, zodat de tussenruimtes ook echt gelijk ogen.

    De tussenruimte schaalt mee met het scherm in plaats van op een vaste 56px te blijven staan: bij vijf
    kolommen op 1200px was 56px te veel en op een tablet te veel van het goede.

    De regel die de footer op élke breedte netjes houdt: zodra de kolommen krap zouden worden, gaat het
    logoblok over de volle breedte bovenaan staan en verdelen de overige blokken zich over een raster dat
    precies opgaat. Zo blijft er nooit één kolom alleen in een halve rij achter (zie de breekpunten). */
.biz-footer-cols {
  display: grid;
  grid-template-columns: repeat(var(--biz-cols, 1), minmax(0, 1fr));
  column-gap: clamp(28px, 3.2vw, 56px);
  row-gap: clamp(32px, 3vw, 48px);
}
.biz-footer-cols.cols-1 { --biz-cols: 1; }
.biz-footer-cols.cols-2 { --biz-cols: 2; }
.biz-footer-cols.cols-3 { --biz-cols: 3; }
.biz-footer-cols.cols-4 { --biz-cols: 4; }
.biz-footer-cols.cols-5 { --biz-cols: 5; }
/*  Vijf kolommen is het krapste geval, en daar telt elke pixel: bij een tussenruimte van 56px bleef er maar
    ~205px per kolom over, net te weinig voor een gewone straatnaam (die heeft er rond de 215 nodig) — het
    adres viel dan over drie regels in plaats van de bedoelde twee. Daarom loopt de ruimte hier niet verder
    op dan 44px. Samen met de gelijke kolommen (het logoblok krijgt bij vijf blokken géén extra breedte, zie
    hieronder) houdt elke kolom nu ruim 215px over. */
.biz-footer-cols.cols-5 { column-gap: clamp(28px, 3.2vw, 44px); }

/*  Op de breedste schermen krijgt het logoblok iets meer lucht dan de informatiekolommen (logo + zin +
    social hebben nu eenmaal meer nodig dan een lijstje). Dat geldt alleen zolang het logoblok naast de
    andere blokken staat: elk aantal heeft daarvoor zijn eigen ondergrens, want vijf kolommen worden nu
    eenmaal eerder krap dan twee. Zakt het scherm daaronder, dan pakt het logoblok de volle breedte (zie
    de breekpunten hieronder) en telt deze verdeling niet meer.
    De :has() zorgt dat de extra breedte echt naar het logoblok gaat: staat dat uit, dan is de eerste
    kolom een gewoon informatieblok en horen alle kolommen even breed te zijn. */
@media (min-width: 768px)  { .biz-footer-cols.cols-2:has(.biz-footer-brand) { grid-template-columns: 1.15fr 1fr; } }
@media (min-width: 992px)  { .biz-footer-cols.cols-3:has(.biz-footer-brand) { grid-template-columns: 1.15fr 1fr 1fr; } }
@media (min-width: 1200px) { .biz-footer-cols.cols-4:has(.biz-footer-brand) { grid-template-columns: 1.15fr 1fr 1fr 1fr; } }
/*  Bij vijf blokken krijgt het logoblok bewust géén extra breedte: die 30px heeft de contactkolom harder
    nodig om het adres op twee regels te houden. Het logoblok redt zich daar met een gelijke kolom. */

/* Kolomtitel met accent-streepje eronder (32×2px in de merkkleur). */
.biz-footer-title {
  position: relative; margin: 0 0 20px; padding-bottom: 16px;
  font-size: 16px; font-weight: 700; color: #2a2a2a;
  /*  Expliciet, want niet elke kolomkop is een <h4>: het openingstijden-blok komt uit een gedeelde
      partial en rendert een <span>. Die erfde de regelhoogte van de footer (32px) in plaats van die van
      Crafto's koppen, waardoor die kop 11px hoger stond dan de rest.
      Let op de eenheid: Crafto zet `h4 { line-height: 2.7rem }` (style.css), dus 43.2px ongeacht de
      lettergrootte. Een kale 2.7 zou de lettergrootte vermenigvuldigen en hier alleen toevallig
      hetzelfde uitkomen — bij een andere kopgrootte liepen de twee soorten koppen weer uit elkaar. */
  line-height: 2.7rem;
}
.biz-footer-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; background: var(--biz-fac);
}

/* Merkkolom: logo (behoudt bestaand .footer-logo-formaat) + over-ons + social. */
.biz-footer-brand .footer-logo { margin-bottom: 4px; }
.biz-footer-about {
  margin: 22px 0 0; max-width: 300px;
  font-size: 14.5px; line-height: 1.7; color: #8a8078;
}

/* Rijke-tekstblok (over-ons + vrij blok) — opgemaakt met Toms editor. Geeft een nette
   weergave aan alinea's, lijsten, links en vooral een tabel (bijv. openingstijden):
   subtiele rijlijnen in de merkkleur i.p.v. zware celranden. */
.biz-footer-richtext { font-size: 14.5px; line-height: 1.7; color: #8a8078; }
.biz-footer-richtext > *:first-child { margin-top: 0; }
.biz-footer-richtext > *:last-child { margin-bottom: 0; }
.biz-footer-richtext p { margin: 0 0 .6em; }
.biz-footer-richtext strong, .biz-footer-richtext b { color: #5a534d; }
.biz-footer-richtext a { color: var(--biz-fac); text-decoration: none; transition: color .2s ease; }
.biz-footer-richtext a:hover { text-decoration: underline; }
/*  Knop uit de tekstverwerker in het vrije footerblok — zelfde knop als de CTA in de contactkolom
    (.biz-footer-cta). Zonder deze regel viel hij terug op Bootstraps eigen blauw, met de accentkleur
    uit de regel hierboven als tekstkleur en bij hover een onderstreping. Vandaar ook de footer-klasse
    ervoor: wf-content.css laadt NA dit bestand, dus de kleuren hier moeten specifieker zijn.
    Zie [[footer-richtext-knop]]. */
.biz-footer .biz-footer-richtext a.btn {
  padding: 11px 22px; border: 0; border-radius: var(--wf-radius-button, 4px);
  background: var(--biz-fbtn); color: var(--biz-fbtn-t); font-weight: 600; font-size: 14.5px; line-height: 1.3;
  transition: background .2s ease, transform .2s ease;
}
.biz-footer .biz-footer-richtext a.btn:hover,
.biz-footer .biz-footer-richtext a.btn:focus {
  background: var(--biz-fbtn-dark); color: var(--biz-fbtn-t); transform: translateY(-2px);
}

.biz-footer-richtext ul, .biz-footer-richtext ol { margin: 0 0 .6em; padding-left: 1.1em; }
.biz-footer-richtext li { margin-bottom: .25em; }
/*  USP-lijstje uit de demo-flow (OnboardingVoet, 16-09-2026): vinkjes in de footer-accentkleur in plaats van bolletjes. */
.biz-footer-richtext ul.wf-usp { list-style: none; padding-left: 0; }
.biz-footer-richtext ul.wf-usp > li { position: relative; padding-left: 1.6em; margin-bottom: .45em; }
.biz-footer-richtext ul.wf-usp > li::before {
  content: ""; position: absolute; left: .15em; top: .45em;
  width: .7em; height: .38em; transform: rotate(-45deg);
  border-left: 2px solid var(--biz-fac); border-bottom: 2px solid var(--biz-fac);
}
.biz-footer-richtext h2, .biz-footer-richtext h3, .biz-footer-richtext h4, .biz-footer-richtext h5, .biz-footer-richtext h6 {
  margin: 0 0 .5em; color: #2a2a2a; font-weight: 700; line-height: 1.3;
}
/* Tabellen uit een import kunnen vaste pixelbreedtes meebrengen (bijv. PM: table 220px,
   cellen 87px) die te smal zijn voor onze letter en dan woorden afbreken. Negeer die vaste
   breedtes zodat kolommen zich naar de inhoud voegen; dagnamen breken niet meer af. */
.biz-footer-richtext table { width: auto !important; border-collapse: collapse; margin: 2px 0; }
.biz-footer-richtext td, .biz-footer-richtext th {
  padding: 2px 16px 2px 0; text-align: left; vertical-align: top; width: auto !important;
  border: 0; white-space: nowrap; line-height: 1.4;
}
.biz-footer-richtext th { color: #5a534d; font-weight: 600; }
[data-bs-theme="dark"] .biz-footer-richtext { color: #b8b4ae; }
[data-bs-theme="dark"] .biz-footer-richtext h2, [data-bs-theme="dark"] .biz-footer-richtext h3,
[data-bs-theme="dark"] .biz-footer-richtext h4, [data-bs-theme="dark"] .biz-footer-richtext h5,
[data-bs-theme="dark"] .biz-footer-richtext h6, [data-bs-theme="dark"] .biz-footer-richtext strong { color: #f1efec; }

/* Ronde social-iconen in de merkkleur (hergebruikt _SocialLinks; wij herstijlen). */
.biz-footer-social { margin-top: 26px; }
/* Iets kleiner + kleinere tussenruimte zodat de kanalen netjes op één rij passen (ook in smallere
   kolommen); bij veel kanalen wrappen ze evenwichtig naar een tweede rij i.p.v. één losse eronder. */
.biz-footer-social ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.biz-footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--biz-fac); color: #fff; text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.biz-footer-social a:hover { background: var(--biz-fac-dark); transform: translateY(-2px); }
.biz-footer-social a i { font-size: 15px; line-height: 1; }

/* Snelle links — compact, met een strak chevron-pijltje (›) in de merkkleur ervoor dat licht
   naar rechts schuift bij hover (past bij de → op de knoppen). */
.biz-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.biz-footer-links li { display: flex; align-items: center; gap: 11px; line-height: 1.4; }
.biz-footer-links li::before {
  content: ""; flex: none; width: 6px; height: 6px;
  border-top: 2px solid var(--biz-fac); border-right: 2px solid var(--biz-fac);
  transform: rotate(45deg); transition: transform .2s ease;
}
.biz-footer-links li:hover::before { transform: translateX(3px) rotate(45deg); }
.biz-footer-links a { color: #5a534d; text-decoration: none; transition: color .2s ease; }
.biz-footer-links a:hover { color: var(--biz-fac); }

/* Contactkolom: icoontje + tekst per regel, daaronder een CTA-knop. */
.biz-footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.biz-footer-contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; color: #5a534d; }
.biz-footer-contact a { color: #5a534d; text-decoration: none; transition: color .2s ease; }
.biz-footer-contact a:hover { color: var(--biz-fac); }
/* Icoontje verticaal op (de eerste) tekstregel centreren: (line-height − icoonhoogte) / 2.
   Bij een 2-regelig adres blijft de pin zo netjes op de eerste regel staan. */
.biz-footer-ico { flex: none; margin-top: calc((1.6em - 16px) / 2); color: var(--biz-fac); }
.biz-footer-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  /*  Stond op een vaste 4px en volgde daarmee de knopronding van de klant niet: bij een instelling
      van 22 bleef alleen deze knop hoekig terwijl de rest van de site rond was. Zie
      [[site-radius-check-rule]]. */
  padding: 11px 22px; border-radius: var(--wf-radius-button, 4px);
  background: var(--biz-fbtn); color: var(--biz-fbtn-t); font-weight: 600; text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.biz-footer-cta:hover { background: var(--biz-fbtn-dark); color: var(--biz-fbtn-t); transform: translateY(-2px); }

/* Onderbalk: volle-breedte-band zodat de scheidingslijn van rand tot rand loopt;
   de inhoud ("Powered by Webfix" links, juridische links rechts) blijft uitgelijnd met
   de kolommen via .biz-footer-bottom-inner (zelfde max-width + zijmarges). */
.biz-footer-bottom { margin-top: clamp(40px, 4vw, 56px); border-top: 1px solid #ede7df; }
/*  Zelfde breedte én dezelfde zijruimte als de kolommen erboven (beide uit de variabelen op .biz-footer),
    zodat de linkerkant exact onder de eerste kolom begint en de juridische links onder de laatste eindigen. */
.biz-footer-bottom-inner {
  max-width: var(--biz-footer-w); margin: 0 auto;
  padding: clamp(22px, 2.4vw, 26px) var(--biz-footer-pad);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
/*  Hier stond een uitzondering: bij vijf juridische links kreeg de onderbalk 1280px in plaats van
    1200px. Reden was de copyrightregel — met de lange zin van CVSM erbij ("© 2026 Centrum voor
    Stressmanagement — Alle rechten voorbehouden", ruim 380px) had de rij 1105px nodig terwijl er
    1104px beschikbaar was, één pixel te weinig, en klapte hij om.

    Weg sinds 10-09-2026: op die plek staat nu "Powered by Webfix", en dat is met diamantje en al
    ongeveer 140px. Er is dus zo'n 240px minder nodig en de rij past ruim binnen de 1200px van de
    kolommen. De uitzondering laten staan zou nu juist kwaad doen: hij zette de onderbalk 40px per
    kant buiten de kolommen erboven, precies de scheefstand die hij moest voorkomen. */
/*  Sinds 10-09-2026 ongebruikt: de copyrightregel staat niet meer in de onderbalk (de optie verdween uit
    het dashboard). Bewust laten staan — Tom noemde dat uitzetten uitdrukkelijk tijdelijk, dus deze opmaak
    staat klaar voor als de optie terugkomt. Dat geldt voor dit hele blokje: ook -copy-rights, -copy-name
    en -copy-dash hieronder doen op dit moment niets, hoe levend hun uitleg ook klinkt. */
.biz-footer-copy { font-size: 13.5px; color: #a39b92; }
/*  De rechtenzin breekt nooit middenin, op geen enkele breedte: hij is kort genoeg om altijd te passen,
    en "Alle" op de ene regel met "rechten voorbehouden" op de volgende leest als een fout. Tot 991px
    krijgt hij bovendien een eigen regel onder de bedrijfsnaam, want daar past de hele zin niet naast de
    naam; het gedachtestreepje ertussen zou dan los aan het eind van de eerste regel bungelen. */
.biz-footer-copy-rights { white-space: nowrap; }
@media (max-width: 991.98px) {
  .biz-footer-copy-name, .biz-footer-copy-rights { display: block; }
  .biz-footer-copy-dash { display: none; }
}
/*  flex-wrap is hier niet optioneel: zonder wrap perst de rij alle vier de links op één regel en
    krimpen ze onder hun eigen tekstbreedte. Op 375px gemeten (15-08-2026) werd "Privacyverklaring"
    72px breed en 64px hoog — de link brak middenin het woord ("Privacyver / klaring"). Met wrap
    slaan hele links netjes om; op tablet en desktop past alles nog steeds op één regel. */
.biz-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.biz-footer-legal a { color: #8a8078; text-decoration: none; transition: color .2s ease; }
.biz-footer-legal a:hover { color: var(--biz-fac); }
.biz-footer-sep { color: #d8d0c6; }

/* ── Footer: openingstijden ────────────────────────────────────────────────
   Zelfde blok als in beauty1, maar business1 heeft een LICHTE footer. Vandaar geen wit-oplichtende
   markering: alles wat contrast moet maken gaat via currentColor, zodat dezelfde regels ook kloppen
   zodra de donkere modus de footer omdraait (tekst wordt licht → de markering wordt vanzelf licht). */
.biz-hours-title { display: block; }   /* de partial rendert de kop als <span>; .biz-footer-title rekent op een blok */

/*  GEEN statusregel in business1 (Jenny 04-08). De gedeelde partial rendert boven de tabel een regel als
    "Gesloten · donderdag open 10:00". In een footerkolom van ~210px breekt die over twee regels, en het
    gat dat daardoor boven de dagen ontstond trok de tabel visueel uit elkaar. De zeven dagen vertellen
    hetzelfde verhaal, dus hier alleen de tabel.
    De andere templates (beauty1, business2, italianjob) houden de statusregel wél — daar staat hij in een
    bredere kolom. Terugzetten = deze ene regel weghalen; de markup komt gewoon uit de partial. */
.biz-hours-status { display: none; }

/*  Maximumbreedte houdt dag en tijd bij elkaar; zonder die grens rekt het raster mee met de kolom en
    valt er een gat van een halve kolom tussen "Maandag" en "Gesloten". */
/*  Regelhoogte expliciet: zonder deze regel erft de tabel de 32px van de footer, veel ruimer dan de
    buurkolommen (20–25px). Die extra loodruimte zit vóór de eerste regel, waardoor "Maandag" 5 à 6px
    lager begon dan "Vestigingen" en "Nijverheidstraat 11" ernaast — zichtbaar scheef, ook al stonden de
    vakjes zelf keurig gelijk (Jenny 04-08).
    De ruimte tussen de dagen komt nu uit de opvulling van de rijen in plaats van uit de regelhoogte, en
    de negatieve bovenmarge haalt die opvulling er bovenaan weer af — hetzelfde idee als de
    `margin-inline: -8px` die de rijen zijwaarts terugzet. Netto: rijen blijven 40px hoog, maar de eerste
    regel begint op dezelfde lijn als de buurkolommen. */
.biz-hours-week { margin: -9px 0 0; font-size: 14.5px; line-height: 1.5; color: #8a8078; max-width: 250px; }
/*  De negatieve marge compenseert de opvulling die de gemarkeerde dag zijn vlakje geeft, zodat de
    dagnamen op dezelfde lijn beginnen als de kop erboven. */
.biz-hours-day {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline;
  /*  --wf-radius-card is de klantinstelling; business1 kent geen --r-card (dat is een alias die alleen
      beauty1 definieert), dus die viel hier stil weg en het vlakje bleef vierkant. */
  padding: 9px 8px; margin-inline: -8px; border-radius: min(var(--wf-radius-card, 6px), 10px);
}
/*  Nooit middenin een dagnaam of een tijd afbreken ("Donde/rdag"): met vijf kolommen is elke kolom maar
    zo'n 180px breed, en dan doet de browser dat uit zichzelf. */
.biz-hours-day dt { margin: 0; font-weight: 400; white-space: nowrap; }
.biz-hours-day dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.biz-hours-day.is-closed dd { opacity: .7; }
.biz-hours-day.is-today { background: color-mix(in srgb, currentColor 9%, transparent); }
.biz-hours-day.is-today dt, .biz-hours-day.is-today dd { font-weight: 600; color: #5a534d; }
.biz-hours-note { display: block; font-size: 13px; opacity: .8; }

/* Op een smal scherm centreert de footer; de tabel blijft links/rechts uitgelijnd, want twee kolommen
   lopen anders door elkaar. */
@media (max-width: 575.98px) {
  .biz-hours-week { max-width: 320px; }
}

/* ── Footer: de trap naar smallere schermen ────────────────────────────────
   Elk breekpunt haalt precies één blok uit de rij en zet het logoblok over de volle breedte, zó dat de
   overblijvende blokken altijd een vol raster vormen. Daarom staat er nooit één kolom alleen in een halve
   rij, en wordt geen enkele kolom smaller dan ongeveer 200px:

     blokken   ≥1360   1200-1359   992-1199   768-991      576-767      <576
        2        2         2           2         2         logo vol +   logo vol +
                                                           de rest      de rest
        3        3         3           3      logo vol+2      idem         idem
        4        4         4        logo vol+3 logo vol+3     idem         idem
        5        5      logo vol+4  logo vol+4 logo vol+2x2   idem         idem

   Onder de 768px telt niet meer hoevéél blokken er zijn maar wat voor soort ze zijn: brede blokken
   (logo, openingstijden, vrij tekstblok) over de volle breedte, smalle blokken (Links, Contact) naast
   elkaar. Zie de regels onderaan.
   Let op de precieze breedtes: ze sluiten naadloos aan op de min-width-regels bij het grid hierboven
   (1359.98 ↔ 1360 enz.). Wijzig je er één, wijzig dan altijd allebei — anders krijg je één breedte waarop
   het logoblok tegelijk vol én ingedeeld is. */
@media (max-width: 1359.98px) {
  .biz-footer-cols.cols-5 { --biz-cols: 4; }
  .biz-footer-cols.cols-5 .biz-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1199.98px) {
  .biz-footer-cols.cols-4 { --biz-cols: 3; }
  .biz-footer-cols.cols-4 .biz-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
  /*  Vier informatieblokken passen hier niet meer op één rij (dat zou ~155px per kolom worden), dus
      gaan ze in twee rijen van twee. */
  .biz-footer-cols.cols-3 { --biz-cols: 2; }
  .biz-footer-cols.cols-5 { --biz-cols: 2; }
  .biz-footer-cols.cols-3 .biz-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  /*  Vanaf hier bepaalt de sóórt van een blok de breedte, niet het aantal. Alle aantallen krijgen daarom
      hetzelfde raster van twee kolommen; dat de opsomming hier zo lang is, is met opzet: met alleen
      `.biz-footer-cols` zou de regel van een breekpunt hierboven (die wél een cols-N noemt en dus zwaarder
      weegt) blijven winnen en zou bijvoorbeeld cols-4 op een telefoon in drie kolommen blijven staan. */
  .biz-footer-cols.cols-1, .biz-footer-cols.cols-2, .biz-footer-cols.cols-3,
  .biz-footer-cols.cols-4, .biz-footer-cols.cols-5 { --biz-cols: 2; }
  .biz-footer-brand,
  .biz-footer-col--wide { grid-column: 1 / -1; }
  /*  Een smal blok krijgt standaard óók de volle breedte: is het het enige, dan zou het anders naast een
      lege plek staan. Zijn het er twee (Links én Contact), dan zet 'pair-compact' ze naast elkaar —
      maar alleen als ze allebei nog ademen, zie de regel hieronder. */
  .biz-footer-col--compact { grid-column: 1 / -1; }
}
/*  Links en Contact naast elkaar, maar niet op een telefoon (Jenny 02-09). De grens ligt bij het adres: een
    gewone Nederlandse straatnaam heeft 158 tot 277px kolombreedte nodig om op één regel te blijven, met een
    doorsnee rond de 210px. Op 375px zouden twee kolommen elk maar 144px krijgen — dan valt zelfs een korte
    straat over drie regels uiteen en breekt "Neem contact op" middenin de knop. Vanaf 576px is elke kolom
    243px: ruimer dan de contactkolom op een desktop met vijf blokken (210px), dus daar valt het adres niet
    ongunstiger dan de klant hem daar toch al ziet. Daaronder alles netjes onder elkaar. */
@media (min-width: 576px) and (max-width: 767.98px) {
  .biz-footer-cols.pair-compact .biz-footer-col--compact { grid-column: auto; }
}
@media (max-width: 575.98px) {
  .biz-footer-bottom-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .biz-footer-about { max-width: none; }
}

/* Donkere modus: footer donker maken zodat hij niet fel oplicht (mocht de publieke
   site ooit in dark-mode staan). Accenten blijven de merkkleur. */
/* Footer volgt de donkere basiskleur (tint), een tikje dieper voor subtiele afbakening
   onder de oranje accentlijn — zo is er geen neutrale-vs-getinte naad met de body. */
[data-bs-theme="dark"] .biz-footer { background: color-mix(in srgb, var(--site-dark-bg) 82%, #000); color: #e8e6e3; border-top-color: color-mix(in srgb, var(--biz-fac) 45%, transparent); }
[data-bs-theme="dark"] .biz-footer-title { color: #f1efec; }
[data-bs-theme="dark"] .biz-footer-about,
[data-bs-theme="dark"] .biz-footer-links a,
[data-bs-theme="dark"] .biz-footer-contact li,
[data-bs-theme="dark"] .biz-footer-contact a,
[data-bs-theme="dark"] .biz-footer-legal a,
[data-bs-theme="dark"] .biz-hours-week { color: #b8b4ae; }
/*  De gemarkeerde dag licht in donkere modus juist op in plaats van te verdonkeren; het vlakje zelf
    regelt zich al via currentColor. */
[data-bs-theme="dark"] .biz-hours-day.is-today dt,
[data-bs-theme="dark"] .biz-hours-day.is-today dd { color: #f1efec; }
[data-bs-theme="dark"] .biz-footer-bottom { border-top-color: #333; }

/* =====================================================================
   Gedeelde rich-tekst (Toms editor) buiten de footer — o.a. introblok en
   contactpagina. Neemt kleur/lettergrootte over van de context; stijlt alleen
   de nesting (alinea's, lijsten, links, koppen, tabellen) netjes in de huisstijl.
   ===================================================================== */
/* Introtekst dichter onder de banner: verklein de sectie-topruimte op elk module-overzicht dat een
   introtekst toont (via de gedeelde _ModuleIntro-partial), i.p.v. de standaard ~110px. */
section:has(.biz-module-intro) { padding-top: 55px; }

.biz-richtext > *:first-child { margin-top: 0; }
.biz-richtext > *:last-child { margin-bottom: 0; }
.biz-richtext p { margin: 0 0 1em; }
.biz-richtext ol { margin: 0 0 1em; padding-left: 1.4em; list-style-position: outside; }
.biz-richtext ul { list-style: none; margin: 0 0 1em; padding-left: 0; }
.biz-richtext ul > li { position: relative; padding-left: 1.7em; margin-bottom: .45em; }
.biz-richtext ul > li::before {
    content: ""; position: absolute; left: .15em; top: .55em;
    width: .4em; height: .4em; transform: rotate(45deg);
    border-right: 2px solid var(--base-color); border-top: 2px solid var(--base-color);
}
.biz-richtext ul > li > strong:first-child { color: var(--base-ink); }
.biz-richtext ol > li { margin-bottom: .45em; display: list-item; }
.biz-richtext ol > li::marker { color: var(--base-ink); font-weight: 700; }
.biz-richtext a { color: var(--base-ink); text-decoration: underline; }
.biz-richtext a:hover { text-decoration: none; }
.biz-richtext strong, .biz-richtext b { font-weight: 700; }
.biz-richtext h2, .biz-richtext h3, .biz-richtext h4, .biz-richtext h5, .biz-richtext h6 {
  color: var(--base-ink); font-weight: 700; line-height: 1.3; margin: 1.2em 0 .5em;
}
.biz-richtext h2 { font-size: 1.4rem; }
.biz-richtext h3 { font-size: 1.2rem; }
.biz-richtext h4, .biz-richtext h5, .biz-richtext h6 { font-size: 1.05rem; }
/* Tabellen in klanttekst: zowel de rich-editor-body (.biz-richtext) als de artikel-/pagina-body
   (.biz-page-body, o.a. Kennisbank) — geïmporteerde content bevat vaak tabellen. Zonder styling
   viel de tabel op de donkere template op als een licht/wit vlak; nu overal dezelfde nette
   behandeling met een donker-variant (donkere koprij + randen, transparante cellen, lichte tekst). */
:is(.biz-richtext, .biz-page-body) table { width: 100%; border-collapse: collapse; margin: 10px 0; }
:is(.biz-richtext, .biz-page-body) th, :is(.biz-richtext, .biz-page-body) td { padding: 8px 12px; border: 1px solid #e6e2dc; text-align: left; vertical-align: top; }
:is(.biz-richtext, .biz-page-body) th { background: color-mix(in srgb, var(--base-color) 8%, #fff); font-weight: 600; }
.biz-richtext img { max-width: 100%; height: auto; border-radius: 6px; }
[data-bs-theme="dark"] :is(.biz-richtext, .biz-page-body) th, [data-bs-theme="dark"] :is(.biz-richtext, .biz-page-body) td { border-color: rgba(255, 255, 255, .16); }
[data-bs-theme="dark"] :is(.biz-richtext, .biz-page-body) th { background: rgba(255, 255, 255, .06); }

/* GEO-antwoordblokken uit de kennisbank-import: "Direct antwoord" (.direct-antwoord) en "In het kort"
   (.ai-samenvatting) dragen INLINE lichte achtergronden mee (#f0fdf4 / #f8f9fa) -> op de donkere
   template lelijke witte vlakken. Inline wint van gewone CSS, dus !important. Net donker oppervlak;
   het direct-antwoord houdt z'n groene accent. Tekst erft al licht; links de leesbare accentkleur.
   Alleen onder [data-bs-theme="dark"] -> licht ongemoeid. */
[data-bs-theme="dark"] :is(.biz-richtext, .biz-page-body) .direct-antwoord {
  background: color-mix(in srgb, #198754 16%, var(--site-dark-bg, #191d26)) !important;
  border-left-color: #34b877 !important;
}
[data-bs-theme="dark"] :is(.biz-richtext, .biz-page-body) .ai-samenvatting {
  background: var(--wf-dark-card) !important;
}
[data-bs-theme="dark"] :is(.biz-richtext, .biz-page-body) :is(.direct-antwoord, .ai-samenvatting) a {
  color: var(--brand-secondary-ondark, #d8c6ad) !important;
}
/* Kennisbank-/pagina-koppen: op donker duwde de globale h-regel ze naar bijna-wit (#f2f4f8) = "wit
   wit". In de LICHTE template zijn deze koppen juist de merk-accentkleur (--base-ink). Zet ze op
   donker in de leesbare ondark-accentkleur zodat ze branded/rustig ogen i.p.v. spierwit. */
[data-bs-theme="dark"] .biz-page-body :is(h2, h3, h4, h5, h6) { color: var(--brand-secondary-ondark, #d8c6ad) !important; }

/* ── Duidelijk aanvinkvakje op formulieren ─────────────────────────────────
   Crafto stylet .form-check-input tot een onzichtbaar 50×25-vlak (geen rand,
   geen vinkje). Voor het AVG-toestemmingsvinkje én checkbox-velden op
   formulieren zetten we een gewoon, goed zichtbaar vakje terug in de merkkleur.

   30-08-2026: hier stond `appearance: auto`, waarmee we het native vakje van de
   browser terugkregen. Dat werkt, maar een native vakje negeert élke opmaak — ook
   de ronding, die daardoor op 0 sprong. Bij een klant met een ronde huisstijl stond
   er dus één vierkant blokje tussen allemaal ronde velden. Nu houden we Bootstraps
   eigen vinkje (zie beauty1, die dit al zo doet): dat is al een net vierkantje met
   een haakje erin, het volgt de accentkleur én de klant-ronding. Alleen Crafto's
   vulling moet eraf, want dát was het hele probleem.

   De ronding krijgt een plafond van 4px. Met de volle klantwaarde wordt het vakje
   een rondje en is het niet meer van een keuzerondje te onderscheiden. */
.form-check-input.wf-form-check {
    padding: 0 !important;
    width: 1.15em !important;
    height: 1.15em !important;
    cursor: pointer;
    flex: none;
    border-radius: min(var(--wf-radius-input, 4px), 4px) !important;

}

/*  Uitlijning van vakje en tekst.

    Bootstrap zet .form-check-input op `float: left` met een negatieve marge in de
    opvulling van .form-check. In dat model landt het vakje op de bovenkant van de
    regel en heeft margin-top er geen grip op — nagemeten: bij 0px en bij 20px stond
    het vakje op exact dezelfde plek. Een marge bijstellen loste hier dus niets op.

    Vandaar een gewone flex-rij. Die is voorspelbaar: het vakje is een echt flex-item,
    en de marge eronder verschuift hem wél. Ook meteen de negatieve marge en de
    opvulling van Bootstrap eraf, want die horen bij het float-model.

    De marge centreert het vakje op de eerste tekstregel van het LABEL. Dat label draagt
    `fs-15`: vast 15px met lijnhoogte 1.78, op élk schermformaat. Vandaar die vaste 15px
    in de som en géén `rem` — de root-lettergrootte krimpt op mobiel mee (daar 13,5px),
    en dan zakte de marge van 4,15px naar 0,8px en stond het vakje weer scheef. De
    `1.15em` mag wél em blijven: dat is de eigen grootte van het vakje, precies wat we
    ervan af willen trekken. Reken je met de lijnhoogte van het vakje zelf (16px), dan
    staat het 4px te hoog — dat was de eerste poging. */
.form-check:has(> .form-check-input.wf-form-check) {
    display: flex;
    align-items: flex-start;
    gap: .55em;
    padding-left: 0;
    margin-bottom: 0;
}
.form-check:has(> .form-check-input.wf-form-check) > .wf-form-check {
    float: none;
    margin-left: 0;
    margin-top: calc((15px * 1.78 - 1.15em) / 2);
}
/* Aangevinkt en focus in de huisstijl in plaats van Bootstraps standaardblauw. */
.form-check-input.wf-form-check:checked {
    background-color: var(--base-color);
    border-color: var(--base-color);
}
.form-check-input.wf-form-check:focus {
    border-color: var(--base-color);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--base-color) 25%, transparent);
}

/* ── Formulier-box blijft altijd leesbaar op donkere voorpagina-blokken ─────
   De formulier-box (.wf-site-form) is altijd een LICHTE box (bg-very-light-gray),
   óók als de klant het Formulieren-blok een donkere achtergrond of een foto geeft.
   Op zo'n donker blok zet business1 alle .text-dark-gray-tekst wit (de wf-on-dark-
   regel), waardoor labels/intro wit-op-licht = onleesbaar worden. De bestaande
   herstel-regel geldt alleen voor .bg-white-boxen; hier draaien we binnen de
   formulier-box de tekst terug naar donker (labels, intro, keuze-teksten én wat de
   bezoeker typt). De verzendknop (.btn) laten we bewust met rust (eigen merkkleur).
   Los van de dark-mode-productpaneel-regel: die gebruikt [data-bs-theme="dark"]. */
:is(.wf-block-dark, .wf-on-dark) .wf-site-form :is(.form-label, label, .form-check-label, p, .text-dark-gray, .form-control, .form-select, a:not(.btn)) {
    color: var(--dark-gray) !important;
}

/* ══ Donkere template: tekst-leesbaarheid-overrides ══════════════════════════════
   De regels hierboven (en vergelijkbare component-regels) houden tekst DONKER voor de LICHTE
   template — bedoeld voor lichte boxen/kaarten (witte formulier-box, referentie-kaart) die op
   een donker blok staan. In de DONKERE template wordt die box/kaart zelf donker, dus die tekst
   moet juist LICHT. Deze overrides staan bewust NÁ die regels en zijn extra specifiek
   (body[data-bs-theme="dark"]) zodat ze winnen. Binnen een expliciet LICHT eiland draaien we
   het daarna weer terug naar donker. Lichte template blijft ongemoeid (alles [data-bs-theme=dark]). */
body[data-bs-theme="dark"] .wf-site-form :is(.form-label, label, .form-check-label, p, .text-dark-gray, .form-control, .form-select, textarea, a:not(.btn)) { color: #e2e5ed !important; }
body[data-bs-theme="dark"] :is(.wf-block-dark, .wf-on-dark) :is(.biz-ref-banner-title, .biz-ref-banner-intro),
body[data-bs-theme="dark"] :is(.biz-ref-banner-title, .biz-ref-banner-intro) { color: #eef1f7 !important; }
body[data-bs-theme="dark"] :is(.wf-block-dark, .wf-on-dark) .biz-ref-banner :is(.btn-link, .btn-link .btn-text),
body[data-bs-theme="dark"] .biz-ref-banner :is(.btn-link, .btn-link .btn-text) { color: var(--brand-secondary-ondark, #d8c6ad) !important; }
/* Terug naar donker binnen een expliciet licht eiland (wint van bovenstaande én de basis). */
body[data-bs-theme="dark"] :is(.wf-on-light) .wf-site-form :is(.form-label, label, .form-check-label, p, .text-dark-gray, a:not(.btn)),
body[data-bs-theme="dark"] :is(.wf-on-light) :is(.biz-ref-banner-title, .biz-ref-banner-intro) { color: var(--dark-gray) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   FQ-NAV — meertalig, 3-niveaus-diep menu + mega, 1-op-1 uit het "Menu Varianten"-
   ontwerp. THEMEBAAR op de klant-huiskleuren: alle rollen leiden af van --brand-*
   (via color-mix), zodat de 3 kleurstijlen (donker/licht/warm) dynamisch de
   huisstijl volgen. Structuur/spacing/interactie = 1-op-1 met het ontwerp.
   ════════════════════════════════════════════════════════════════════════════ */
.fq-nav {
  /* merk-basiskleuren = klant-huiskleuren (uit _SiteLayout :root) */
  --fq-c-main:  var(--brand-primary, #1f2937);
  --fq-c-sup:   var(--brand-secondary, #4b5563);
  --fq-c-sup2:  var(--brand-tertiary, #9ca3af);
  --fq-c-extra: color-mix(in srgb, var(--brand-primary, #1f2937) 20%, #1e2024);

  --fq-panel-w:  280px;
  --fq-radius:   12px;
  --fq-shadow:   0 22px 50px rgba(20,16,12,.28);
  --fq-ease:     cubic-bezier(.22,.61,.36,1);
  --fq-line:     rgba(20,20,25,.10);

  font-family: var(--brand-font, system-ui, sans-serif);
  background: var(--fq-bar-bg);
  border-bottom: 1px solid var(--fq-line);
  position: relative;
  z-index: 100;
}
.fq-nav *, .fq-nav *::before, .fq-nav *::after { box-sizing: border-box; }

/* ---- Stijl 1 — Donker & elegant (standaard): donker paneel, accent = steunkleur ---- */
.fq-nav, .fq-nav.fq-theme-donker {
  --fq-bar-bg:       #ffffff;
  --fq-brand-fg:     #23252A;
  --fq-topnav-fg:    #23252A;
  --fq-topnav-hi:    var(--fq-c-sup);
  --fq-accent:       var(--fq-c-sup);
  --fq-accent-soft:  color-mix(in srgb, var(--fq-c-sup) 55%, #ffffff);
  --fq-panel-bg:     var(--fq-c-extra);
  --fq-panel-bg-2:   color-mix(in srgb, var(--fq-c-extra) 86%, #ffffff);
  --fq-panel-bg-3:   color-mix(in srgb, var(--fq-c-extra) 76%, #ffffff);
  --fq-panel-fg:     rgba(255,255,255,.88);
  --fq-panel-fg-hi:  #ffffff;
  --fq-panel-hover:  rgba(255,255,255,.10);
  --fq-panel-border: transparent;
  --fq-cap-fg:       #ffffff;
}
/* ---- Stijl 2 — Licht & luchtig: licht paneel (merk-tint), donkere tekst, accent = hoofdkleur ---- */
.fq-nav.fq-theme-licht {
  --fq-brand-fg:     #2C2E33;
  --fq-topnav-fg:    #2C2E33;
  --fq-topnav-hi:    var(--fq-c-main);
  --fq-accent:       var(--fq-c-main);
  --fq-accent-soft:  var(--fq-c-main);
  --fq-panel-bg:     color-mix(in srgb, var(--fq-c-main) 6%, #ffffff);
  --fq-panel-bg-2:   color-mix(in srgb, var(--fq-c-main) 11%, #ffffff);
  --fq-panel-bg-3:   color-mix(in srgb, var(--fq-c-main) 16%, #ffffff);
  --fq-panel-fg:     #3E4046;
  --fq-panel-fg-hi:  #1F2024;
  --fq-panel-hover:  color-mix(in srgb, var(--fq-c-main) 15%, transparent);
  --fq-panel-border: rgba(20,20,25,.08);
  --fq-cap-fg:       #ffffff;
  --fq-shadow:       0 20px 46px rgba(60,50,38,.16);
}
/* ---- Stijl 3 — Warm: steunkleur als paneel, witte tekst, donker accent ---- */
.fq-nav.fq-theme-warm {
  --fq-brand-fg:     color-mix(in srgb, var(--fq-c-sup) 42%, #1a1410);
  --fq-topnav-fg:    color-mix(in srgb, var(--fq-c-sup) 42%, #1a1410);
  --fq-topnav-hi:    color-mix(in srgb, var(--fq-c-sup) 55%, #000000);
  --fq-accent:       color-mix(in srgb, var(--fq-c-sup) 62%, #000000);
  --fq-accent-soft:  color-mix(in srgb, var(--fq-c-sup) 32%, #ffffff);
  --fq-panel-bg:     var(--fq-c-sup);
  --fq-panel-bg-2:   color-mix(in srgb, var(--fq-c-sup) 88%, #000000);
  --fq-panel-bg-3:   color-mix(in srgb, var(--fq-c-sup) 78%, #000000);
  --fq-panel-fg:     rgba(255,255,255,.92);
  --fq-panel-fg-hi:  #ffffff;
  --fq-panel-hover:  rgba(255,255,255,.16);
  --fq-panel-border: transparent;
  --fq-cap-fg:       #ffffff;
  --fq-shadow:       0 22px 50px rgba(90,64,38,.34);
}

/* ---- balk / container ---- */
.fq-nav__bar { max-width: 1360px; margin: 0 auto; padding: 0 32px; min-height: 92px; display: flex; align-items: center; gap: 28px; }
.fq-nav__brand { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; flex: none; }
/*  De breedte-cap gaat mee omhoog. Een breed (liggend) logo raakt max-width eerder dan
    max-height; alleen de hoogte-cap ophogen verandert bij zo'n logo dus niets -- gemeten op de
    testklant, die op 300px breed bleef staan en daardoor 62px hoog bleef.
    Logo bewust 5px hoger dan de gedeelde _shared/fq-nav.css (keuze Tom, 11-08-2026). Die twee
    bestanden worden verder 1-op-1 gelijk gehouden; dit is een bewuste afwijking voor business1,
    dus niet 'terugsynchroniseren'. business1 laadt fq-nav.css niet, dus dit raakt alleen deze
    template. */
.fq-nav__brand img { max-height: 69px; max-width: 280px; width: auto; display: block; }
/*  Woordmerk voor klanten zonder logo. Hier stond het logo van de Crafto-demo als terugval, dus
    andermans merk op de site van onze klant — en dat trof ruim twee derde van de klanten. In de footer
    staat het op de donkere balk, vandaar de lichte variant. */
.biz-wordmark {
    display: inline-block;
    font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
    white-space: nowrap; color: var(--brand-ink, var(--dark-gray));
}
/*  De footer van business1 is sinds de lichte footer (biz-footer op lichtgrijs) niet meer donker: wit stond
    daar onzichtbaar (demo Jonker, 14-09-2026). Nu de merkinkt, en wit alleen op een donkere site. */
.biz-wordmark--footer { font-size: 30px; color: var(--brand-ink, var(--dark-gray)); }
[data-bs-theme="dark"] .biz-wordmark--footer { color: #fff; }
[data-bs-theme="dark"] .fq-nav__brand .biz-wordmark { color: #fff; }
@media (max-width: 575px) { .biz-wordmark { font-size: 20px; } }
/* Menu mag op 2 (nette) regels vallen, gecentreerd, als het te breed wordt. */
.fq-menu { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.fq-nav__cta { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.fq-nav__phone { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 700; font-size: 15px;
  color: var(--fq-topnav-fg); white-space: nowrap; transition: color .2s; }
.fq-nav__phone:hover { color: var(--fq-topnav-hi); }
.fq-nav__phone svg { width: 16px; height: 16px; color: var(--fq-accent); }
/* Groter logo + iets hogere balk op grote schermen. */
@media (min-width: 1200px) {
  .fq-nav__bar { min-height: 104px; }
  .fq-nav__brand img { max-height: 83px; max-width: 324px; }
}
/*  Logo in de menubalk zoals de klant het instelt (Layout website → Logo / favicon → Settings).
    De template zet dan .wf-logo-maat (hoogte 20-200px, --wf-logo-h en de factor --wf-logo-f) en/of
    .wf-logo-marge (--wf-logo-m, 0-25px, boven en onder altijd gelijk) op de logo-link.
    Bewust `height` en niet `max-height`: met max-height groeide een klein bestand of een breed logo
    niet verder mee, en stopte de schuif halverwege. Op desktop zonder breedte-cap, want die hield een
    liggend logo net zo goed tegen; het dashboard toont de echte header, dus de klant ziet zelf of het
    menu er nog naast past.
    Telefoon en tablet: naar verhouding, niet 1-op-1. Het logo groeit met de HELFT van de verandering
    ten opzichte van de standaard (100px = factor 1 = de gewone 69px; 200px = 1,5x = 104px; 80px =
    0,9x), en de marge telt half mee. De breedte blijft begrensd zodat de hamburger en de knoppen
    ernaast blijven staan; object-fit houdt het beeld dan in verhouding. De balk centreert verticaal
    (flex, align-items: center) en de marge is boven en onder gelijk, dus het logo blijft in het midden. */
@media (min-width: 992px) {
  .fq-nav__brand.wf-logo-maat img { height: var(--wf-logo-h, 83px); width: auto; max-height: none; max-width: none; }
  .fq-nav__brand.wf-logo-marge img { margin-top: var(--wf-logo-m, 0px); margin-bottom: var(--wf-logo-m, 0px); }
}
@media (max-width: 991.98px) {
  .fq-nav__brand.wf-logo-maat img {
    height: calc(69px * (1 + (var(--wf-logo-f, 1) - 1) * .5)); width: auto; max-height: none;
    max-width: calc(100vw - 150px); object-fit: contain; object-position: left center;
  }
  .fq-nav__brand.wf-logo-marge img { margin-top: calc(var(--wf-logo-m, 0px) * .5); margin-bottom: calc(var(--wf-logo-m, 0px) * .5); }
}

/* ---- hamburger (mobiel) ---- */
.fq-nav__toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--fq-line);
  border-radius: 10px; background: var(--fq-bar-bg); cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; padding: 0; }
.fq-nav__toggle span { display: block; width: 22px; height: 2px; background: var(--fq-topnav-fg); border-radius: 2px;
  transition: transform .3s var(--fq-ease), opacity .2s; }
.fq-nav.is-open .fq-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fq-nav.is-open .fq-nav__toggle span:nth-child(2) { opacity: 0; }
.fq-nav.is-open .fq-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- MENU niveau 1 ---- */
.fq-menu, .fq-menu ul { list-style: none; margin: 0; padding: 0; }
.fq-menu { display: flex; align-items: center; gap: 4px; }
.fq-menu li { position: relative; }
.fq-menu a { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--fq-topnav-fg); white-space: nowrap; }
.fq-menu > li > a { padding: 12px 11px; font-size: 13.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; border-radius: 8px; transition: color .2s; }
.fq-menu > li > a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; background: var(--fq-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--fq-ease); }
.fq-menu > li:hover > a, .fq-menu > li.is-active > a { color: var(--fq-topnav-hi); }
.fq-menu > li:hover > a::after, .fq-menu > li.is-active > a::after { transform: scaleX(1); }
.fq-has > a > .fq-caret { width: 12px; height: 12px; flex: none; transition: transform .25s var(--fq-ease); }
.fq-menu > .fq-has > a > .fq-caret { margin-left: 2px; }

/* ---- PANELEN niveau 2-4 (flyouts) ---- */
.fq-menu ul { position: absolute; min-width: var(--fq-panel-w); background: var(--fq-panel-bg); border: 1px solid var(--fq-panel-border);
  border-radius: var(--fq-radius); box-shadow: var(--fq-shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s var(--fq-ease), transform .22s var(--fq-ease), visibility .22s; z-index: 20; }
.fq-menu > li > ul { top: calc(100% + 10px); left: 0; }
.fq-menu > li > ul::before { content: ""; position: absolute; top: -6px; left: 26px; width: 12px; height: 12px; background: var(--fq-panel-bg);
  border-left: 1px solid var(--fq-panel-border); border-top: 1px solid var(--fq-panel-border); transform: rotate(45deg); border-radius: 2px; }
.fq-menu ul ul { top: -8px; left: calc(100% + 6px); background: var(--fq-panel-bg-2); }
.fq-menu ul ul ul { background: var(--fq-panel-bg-3); }
.fq-menu ul li > a { color: var(--fq-panel-fg); padding: 13px 16px; border-radius: 8px; font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  justify-content: space-between; position: relative; transition: background .18s, color .18s, padding-left .18s var(--fq-ease); }
.fq-menu ul li > a::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 20px;
  background: var(--fq-accent); border-radius: 3px; transition: transform .2s var(--fq-ease); }
.fq-menu ul li:hover > a, .fq-menu ul li.is-open > a { background: var(--fq-panel-hover); color: var(--fq-panel-fg-hi); padding-left: 20px; }
.fq-menu ul li:hover > a::before, .fq-menu ul li.is-open > a::before { transform: translateY(-50%) scaleY(1); }
.fq-menu ul .fq-caret { color: var(--fq-accent-soft); }
/* Hover-flyouts gelden alleen in balk-stand: staat de hamburger aan, dan klapt alles
   via een klik open (accordion), ook op een breed scherm met een muis. */
@media (hover: hover) and (min-width: 961px) {
  .fq-nav:not(.is-burger) .fq-menu li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
  .fq-nav:not(.is-burger) .fq-menu > li:hover > a > .fq-caret { transform: rotate(180deg); }
}
.fq-menu li.fq-flip > ul ul { left: auto; right: calc(100% + 6px); }

/*  Een lange lijst mag niet buiten het scherm vallen. Zelfde regel als in de gedeelde
    _shared/fq-nav.css; business1 draagt een eigen kopie van dit menublok.

    Sinds 30-08-2026 komt het mega-menu alleen nog bij een echt derde niveau, dus een
    menu-item met veel subpagina's zónder dat niveau wordt een gewone dropdown. Bij
    Fortex Voortenten is dat een lijst van 19 items: nagemeten 1120px hoog in een
    venster van 950px, en zonder deze regel waren de onderste items onbereikbaar.

    Alleen in balk-stand: in hamburger-stand scrollt het hele menu al via de
    max-height op .fq-menu zelf. */
@media (min-width: 961px) {
  .fq-nav:not(.is-burger) .fq-menu ul {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- MEGA MENU ---- */
.fq-menu ul.fq-mega { display: flex; gap: 26px; padding: 20px; min-width: 760px; }
.fq-mega__media { position: relative; flex: none; width: 236px; align-self: stretch; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.30); }
.fq-mega__media img { display: block; width: 100%; height: 100%; min-height: 248px; object-fit: cover; }
.fq-mega__media.fq-mega__media--ph { background: linear-gradient(155deg, var(--fq-c-main), var(--fq-c-sup)); min-height: 248px; }
.fq-mega__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,0) 42%, rgba(20,16,12,.74) 100%); pointer-events: none; }
.fq-mega__cap { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 2; color: var(--fq-cap-fg); font-size: 16px; font-weight: 600; letter-spacing: .3px; line-height: 1.3; }
.fq-mega__col { display: flex; flex-direction: column; min-width: 152px; }
.fq-mega__title { display: block; color: var(--fq-accent-soft); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 16px 9px; text-decoration: none; transition: color .18s; }
a.fq-mega__title:hover { color: var(--fq-panel-fg-hi); }
.fq-menu ul.fq-mega ul { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.fq-menu ul.fq-mega ul::before { display: none; }

/*  Het mega-menu binnen het scherm houden.

    HET PROBLEEM. ul.fq-mega stond op display:flex zonder maximumbreedte, en groeide dus mee met het
    aantal kolommen. Bij Frenque leverde dat panelen van 4745, 6156 en 4870 pixels op naast elkaar
    (16, 20 en 17 kolommen) — samen 7040 pixels bij een venster van 1425. Die panelen zijn wel
    onzichtbaar maar staan absoluut gepositioneerd, en absolute elementen tellen gewoon mee voor de
    breedte van de pagina. Gevolg: een horizontale schuifbalk onder de héle site, ook zonder het menu
    open te klappen. (Nagemeten 29-08-2026.)

    DE OPLOSSING is dezelfde die business2 al draait (zie custom-business2.css, "liep bij veel items
    van de pagina af"): het paneel spant niet meer vanaf het menu-item maar vanaf de balk, met een
    vaste maximumbreedte, en de kolommen breken af in een raster in plaats van eindeloos door te
    lopen. Bij heel veel items scrollt het paneel verticaal.

    Waarom left/right + margin-inline:auto en NIET left:50% met translateX(-50%): de open- en
    dichtklap-animatie gebruikt transform (translateY). Zou het centreren ook via transform lopen, dan
    overschrijft het die animatie en klapt het menu zonder beweging open.

    Alleen in balk-stand. In hamburger-stand is het paneel een accordion die gewoon meeschuift met de
    lijst; daar is niets mis mee en die regels staan verderop. */
.fq-nav:not(.is-burger) .fq-menu > li:has(> ul.fq-mega) { position: static; }

.fq-nav:not(.is-burger) .fq-menu > li > ul.fq-mega {
  left: 0; right: 0; margin-inline: auto;
  width: min(1180px, calc(100vw - 40px)); min-width: 0; max-width: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 20px; align-content: start;
  max-height: calc(100vh - 140px); overflow-y: auto;
}

/*  Het pijltje wees naar het menu-item; nu het paneel de hele balk spant klopt die plek niet meer. */
.fq-nav:not(.is-burger) .fq-menu > li > ul.fq-mega::before { display: none; }

/*  In een raster mag een kolom smaller worden dan zijn inhoud; zonder dit duwt de langste naam de
    hele kolom breder en ontstaat er alsnog een schuifbalk binnen het paneel. */
.fq-nav:not(.is-burger) .fq-mega__col { min-width: 0; }
.fq-nav:not(.is-burger) .fq-mega__media { width: auto; }

/*  Lange namen afbreken in plaats van doorlopen. "Ronde eettafel Oldenzaal" naast "Ronde eettafel
    Enschede" liep anders dwars over elkaar heen. Bewust afbreken en niet afkappen met puntjes: bij
    deze klant verschillen de namen pas aan het eind (de plaatsnaam), dus afkappen maakt ze
    ononderscheidbaar. */
.fq-nav:not(.is-burger) .fq-mega a,
.fq-nav:not(.is-burger) .fq-mega__title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* ════ HAMBURGER-STAND — het menu klapt als accordion open achter één knop ════
   .is-burger wordt door menu-variants.js gezet: altijd onder 960px, en daarboven alleen
   als de klant "altijd" of "automatisch" koos. De drie uitklap-varianten (.fq-mobile-*)
   hangen hieronder, zodat ze op elk scherm werken en niet alleen op mobiel. */
.fq-nav.is-burger .fq-nav__toggle { display: flex; margin-left: 0; order: 2; }
.fq-nav.is-burger .fq-nav__cta { margin-left: auto; order: 1; }

.fq-nav.is-burger .fq-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--fq-panel-bg); padding: 8px; max-height: calc(100vh - 92px); overflow-y: auto; box-shadow: var(--fq-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--fq-ease), transform .25s var(--fq-ease), visibility .25s; z-index: 90; }
.fq-nav.is-burger.is-open .fq-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.fq-nav.is-burger .fq-menu li { position: static; }
.fq-nav.is-burger .fq-menu > li > a { color: var(--fq-panel-fg-hi); text-transform: none; letter-spacing: .02em; font-size: 15px; padding: 15px 14px; justify-content: space-between; border-radius: 8px; }
.fq-nav.is-burger .fq-menu > li > a::after { display: none; }
.fq-nav.is-burger .fq-menu > li:hover > a, .fq-nav.is-burger .fq-menu > li.is-active > a { color: var(--fq-panel-fg-hi); }
.fq-nav.is-burger .fq-menu > li + li > a { border-top: 1px solid var(--fq-panel-hover); }

.fq-nav.is-burger .fq-menu ul { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: transparent !important;
  border-radius: 0; padding: 0 0 0 14px; min-width: 0; display: none; transition: none; }
.fq-nav.is-burger .fq-menu ul::before { display: none; }
.fq-nav.is-burger .fq-menu li.is-open > ul { display: block; }
.fq-nav.is-burger .fq-menu ul li > a { padding: 12px 14px; font-size: 14px; }
.fq-nav.is-burger .fq-menu ul li > a::before { display: none; }
.fq-nav.is-burger .fq-menu ul li.is-open > a { padding-left: 14px; }
.fq-nav.is-burger .fq-menu > li.is-open > a > .fq-caret { transform: rotate(180deg); }
.fq-nav.is-burger .fq-menu ul li.is-open > a > .fq-caret { transform: rotate(90deg); }

.fq-nav.is-burger .fq-menu ul.fq-mega { display: none; min-width: 0; padding: 4px 0 8px 14px; }
.fq-nav.is-burger .fq-menu li.is-open > ul.fq-mega { display: block; }
.fq-nav.is-burger .fq-menu ul.fq-mega ul { display: block; }
.fq-nav.is-burger .fq-mega__media { position: relative; width: auto; max-width: 340px; height: 150px; margin: 6px 14px 14px 0; box-shadow: none; }
.fq-nav.is-burger .fq-mega__media img, .fq-nav.is-burger .fq-mega__media.fq-mega__media--ph { min-height: 0; height: 150px; }
.fq-nav.is-burger .fq-mega__col { margin-bottom: 4px; }
.fq-nav.is-burger .fq-mega__title { padding: 12px 14px 2px; }

/* Variant "fullscreen" — het menu vult het hele scherm. */
.fq-nav.is-burger.fq-mobile-fullscreen .fq-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; max-height: 100vh; padding: 74px 14px 24px;
  transform: translateY(0); }
.fq-nav.is-burger.fq-mobile-fullscreen.is-open .fq-menu { transform: none; }
.fq-nav.is-burger.fq-mobile-fullscreen:not(.is-open) .fq-menu { transform: translateY(-100%); }
.fq-nav.is-burger.fq-mobile-fullscreen.is-open .fq-nav__toggle { position: fixed; top: 12px; right: 14px; z-index: 95; }

/* Variant "drawer" — schuift als zijlade van rechts in. */
.fq-nav.is-burger.fq-mobile-drawer .fq-menu { position: fixed; top: 0; right: 0; left: auto; bottom: 0; width: min(86vw, 340px); max-height: 100vh;
  padding: 74px 12px 24px; transform: translateX(100%); }
.fq-nav.is-burger.fq-mobile-drawer.is-open .fq-menu { transform: translateX(0); }
.fq-nav.is-burger.fq-mobile-drawer.is-open .fq-nav__toggle { position: fixed; top: 12px; right: 14px; z-index: 95; }

/* Op een breed scherm loopt het paneel van rand tot rand, maar de balk erboven is
   gecentreerd op 1360px met 32px lucht. Zonder deze regel plakken de menu-items tegen de
   schermrand terwijl het logo veel verder naar binnen staat. */
@media (min-width: 961px) {
  .fq-nav.is-burger .fq-menu {
    padding-left: max(32px, calc((100% - 1360px) / 2 + 32px));
    padding-right: max(32px, calc((100% - 1360px) / 2 + 32px));
  }
}

/* ════ SMAL SCHERM (≤ 960px) — compactere balk. De hamburger zelf komt van .is-burger,
   die daar altijd aan staat; hier alleen wat écht met de schermbreedte te maken heeft. ════ */
@media (max-width: 960px) {
  .fq-nav__bar { min-height: 68px; padding: 0 18px; gap: 16px; }
  .fq-nav__cta { display: none; }
  .fq-nav.is-burger .fq-nav__toggle { margin-left: auto; }
  .fq-nav.is-burger .fq-menu { max-height: calc(100vh - 68px); }
}

/* ------------------------------------------------------------------ *
 * Blog-detail: rustige leeskolom met een MEESCROLLENDE deel-balk in de
 * linkermarge (desktop). Een even brede spacer rechts houdt de kolom
 * optisch gecentreerd. Op mobiel valt de balk weg en staan de deel-
 * knoppen onderaan (biz-art-foot).
 * ------------------------------------------------------------------ */
.biz-art-wrap { display: flex; justify-content: center; align-items: flex-start; gap: 34px; }
.biz-art-col { width: 100%; max-width: 768px; min-width: 0; }
.biz-art-share-rail, .biz-art-rail-spacer { flex: 0 0 52px; width: 52px; }
.biz-art-share-rail { position: sticky; top: 130px; align-self: flex-start; flex-direction: column; align-items: center; gap: 12px; }
.biz-art-share-rail-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--medium-gray, #8a8a8a); font-weight: 700; margin-bottom: 4px; }
.biz-art-share-rail a,
.biz-art-share-rail button {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--extra-medium-gray, #e4e4e4);
  background: #fff; color: var(--dark-gray, #232323);
  font-size: 15px; cursor: pointer;
  transition: all .25s ease;
}
.biz-art-share-rail a:hover,
.biz-art-share-rail button:hover {
  background: var(--base-color); border-color: var(--base-ink); color: var(--brand-on-secondary);
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
@media (max-width: 991.98px) {
  .biz-art-wrap { display: block; }
  .biz-art-share-rail, .biz-art-rail-spacer { display: none !important; }
  .biz-art-col { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ-module — premium afwerking (Crafto-afwerkingsprogramma).
   Vervangt de Bootstrap-standaard (blauw open-vlak, kille rand) door een
   huisstijl-look: afgeronde kaarten, een merk-accentbalk links zodra een vraag
   openstaat, een zachte hover-lift en een vloeiend draaiend chevron in de
   huisstijlkleur. Accent = --brand-secondary (met de merk-hoofdkleur als
   terugval). Alles scoped op .wf-faq-* zodat andere accordions ongemoeid blijven.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-faq-accordion {
  --wf-faq-accent: var(--brand-secondary, var(--brand-primary));
  /* Bootstrap-accordionvariabelen neutraliseren: geen blauw, geen focus-glow. */
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: inherit;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: transparent;
}

/* Kaart per vraag: afgerond, subtiele rand + zachte schaduw, vloeiende transitie. */
.wf-faq-accordion .accordion-item {
  position: relative;
  border: 1px solid rgba(20, 30, 55, .10) !important;
  border-radius: 12px !important;
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
/* Hover (gesloten): rand kleurt mee + zachte lift. */
.wf-faq-accordion .accordion-item:hover {
  border-color: color-mix(in srgb, var(--wf-faq-accent) 55%, transparent) !important;
  box-shadow: 0 8px 24px rgba(8, 15, 52, .10);
  transform: translateY(-2px);
}

/* De vraag-knop zelf. */
.wf-faq-accordion .accordion-button {
  background: #fff;
  color: var(--dark-gray);
  font-weight: 600;
  padding: 1.05rem 1.25rem;
  transition: background .18s ease, color .18s ease;
}
.wf-faq-accordion .accordion-button:hover { color: var(--wf-faq-accent); }
.wf-faq-accordion .accordion-button:focus { box-shadow: none; }

/* Open vraag: merk-accentbalk links (over de volledige kaart) + heel lichte tint. */
.wf-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: color-mix(in srgb, var(--wf-faq-accent) 45%, transparent) !important;
  box-shadow: 0 10px 28px rgba(8, 15, 52, .10);
}
/* Accentbalk is altijd aanwezig maar ingeklapt (scaleY 0); groeit soepel van boven
   naar beneden zodra de vraag openstaat i.p.v. hard te verschijnen. */
.wf-faq-accordion .accordion-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--wf-faq-accent); z-index: 2;
  transform: scaleY(0); transform-origin: top;
  transition: transform .28s ease;
}
.wf-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed))::before {
  transform: scaleY(1);
}
.wf-faq-accordion .accordion-button:not(.collapsed) {
  background: color-mix(in srgb, var(--wf-faq-accent) 8%, #fff);
  color: var(--dark-gray);   /* leesbaar donker; het accent zit in de balk, chevron en tint */
  box-shadow: none;
}

/* Chevron in een rond knopje: gesloten = zacht merk-getint rondje met donkere
   chevron; open = vol merk-accent met witte chevron, vloeiend gedraaid. Geeft de
   vraag dat laatste premium detail. */
.wf-faq-accordion .accordion-button::after {
  flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background-color: color-mix(in srgb, var(--wf-faq-accent) 12%, #eef0f4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: .95rem;
  -webkit-mask: none; mask: none;
  transition: transform .22s ease, background-color .22s ease;
}
.wf-faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  background-color: var(--wf-faq-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Antwoordtekst: rustig en leesbaar. */
.wf-faq-accordion .accordion-body { padding: .2rem 1.25rem 1.15rem; color: #4a5568; }
/* Geïmporteerde content bevat vaak losse <br><br> of lege paragrafen tussen de
   tekstblokken, wat een groot leeg gat geeft. Losse <br>'s recht in de body en
   lege paragrafen vangen we visueel weg (in-paragraaf <br>'s blijven werken), en
   we trimmen de rand-marges zodat de tekst strak aansluit. */
.wf-faq-accordion .accordion-body > br { display: none; }
.wf-faq-accordion .accordion-body p:empty,
.wf-faq-accordion .accordion-body p:has(> br:only-child) { display: none; }
.wf-faq-accordion .accordion-body > :first-child { margin-top: 0; }
.wf-faq-accordion .accordion-body > :last-child { margin-bottom: 0; }
/* Antwoord verschijnt met een subtiele fade-omhoog zodra de vraag openklapt. */
.wf-faq-accordion .accordion-collapse.show .accordion-body { animation: wfFaqReveal .35s ease both; }
@keyframes wfFaqReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow-badge boven de titel: effen pil die meekleurt met de blok-achtergrond
   (huisstijl-tint op licht, licht-transparant op donker/foto). Vervangt het
   vervagende Crafto-verloop. Herbruikbaar via .wf-eyebrow-badge (bv. Projecten). */
.wf-faq-badge,
.wf-eyebrow-badge {
  /*  De pilhoogte kwam uit lh-42px: 42px regelafstand bij 14px letters, zonder binnenruimte boven en onder.
      Bij één regel klopte dat, maar een langere tekst viel uit elkaar met 42px tussen de regels (RatPlan,
      Jenny 14-09-2026). Nu een normale regelafstand plus binnenruimte: één regel blijft 44px hoog, twee
      regels worden 62px in plaats van 128px. Hier en niet in lh-42px zelf, want die klasse staat op tientallen
      andere plekken die goed staan. */
  line-height: 1.3 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  text-wrap: balance;
  background: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 14%, transparent) !important;
  color: var(--brand-secondary, var(--brand-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 30%, transparent);
  backdrop-filter: saturate(1.1);
}
:is(.wf-block-dark, .wf-on-dark) :is(.wf-faq-badge, .wf-eyebrow-badge) {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35);
}
/*  Blok met een door de klant gekozen LICHTE kleur. wf-on-light staat alleen op GEKLEURDE blokken
    (custom/primair/secundair/tertiair), niet op wit of grijs — dus dit raakt precies het geval waarin
    het misgaat: de pil kleurt standaard in de steunkleur, en juist die steunkleur is vaak óók de kleur
    die de klant voor het blok koos. Dan staat er zand op zand. Bij Frenque was "ONZE SPONSOREN" op het
    donkere sjabloon daardoor niet te lezen (Jenny 06-08).

    Een neutrale, donkere pil in plaats van de merktint: die werkt op élke lichte kleur die een klant
    kan kiezen, terwijl een merktint per definitie botst met een blok in diezelfde merkkleur. Wit en
    grijze blokken houden hun merktint-pil — daar is niets mis mee.

    Bewust NIET var(--brand-ink): die is van de huisstijl afgeleid en bij een warme huisstijl zelf een
    middenbruin. Op Frenques zandkleur haalde dat 1,8:1 — nauwelijks beter dan het probleem. Een vaste
    donkere neutraal is het enige dat op élke lichte klantkleur leesbaar blijft; zwart en grijs zijn
    toegestaan naast de huisstijlkleuren. */
.wf-on-light :is(.wf-faq-badge, .wf-eyebrow-badge) {
  background: rgba(0, 0, 0, .06) !important;
  color: #232323 !important;
  border-color: rgba(0, 0, 0, .18);
}
/*  In de donkere modus wordt élk wit of grijs blok de donkere site-achtergrond (zie de regels bij
    section.wf-applied.wf-block-white), maar de pil bleef in de merktint-op-licht staan: donkerblauwe
    tekst op een donkere achtergrond. Daarom op donker dezelfde wit-transparante pil als op de blokken
    die wél als donker getagd zijn. Blokken met een door de klant gekozen LICHTE kleur (.wf-on-light)
    blijven ook op donker licht en houden hun donkere pil — die sluit deze regel uit. */
[data-bs-theme="dark"] :is(.wf-faq-badge, .wf-eyebrow-badge):not(.wf-on-light *) {
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .35);
}
/* Blokken met een VASTE donkere/merk-achtergrond die niet door het blok-stijlsysteem als donker getagd
   wordt: forceer de wit-transparante eyebrow-pil zodat 'ie leesbaar blijft — zelfde component en look
   als op de andere donkere blokken. Galerij = merkkleur-band; Nieuwsbrief = donkere nl-band. */
/*  De nieuwsbriefband stond hier ook, maar die is sinds 16-09-2026 niet meer altijd donker: op een lichte
    band werd de witte pil onleesbaar. Hij volgt nu de algemene wf-on-dark/wf-on-light-regels hierboven. */
.wf-galerij-band .wf-eyebrow-badge {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35);
}
/* Diensten-blok is standaard donker (var(--brand-ink)); zonder een licht-tag hoort de eyebrow-pil daar
   wit te zijn. Zet de klant het blok licht (wf-block-white/gray of wf-on-light), dan valt 'ie automatisch
   terug op de normale donkere merk-tint (leesbaar op licht). */
.wf-diensten-home:not(.wf-block-white):not(.wf-block-gray):not(.wf-on-light) .wf-eyebrow-badge {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35);
}

/* Beschikbaarheids-pil op de agenda-detailpagina ("Nog 12 plaatsen beschikbaar"). Zelfde vorm en maat
   als de eyebrow-pil hierboven, zodat de pagina één familie blijft, maar met drie toestanden.

   De rustige toestand volgt de huisstijl. De twee alarmerende toestanden bewust NIET: een klant met
   een groene of oranje huisstijl zou "Bijna uitverkocht" dan in diezelfde vrolijke kleur krijgen, en
   dan is het geen waarschuwing meer. Amber en rood zijn hier functionele kleuren, net als het rood van
   de verwijderknoppen in het dashboard — het is dezelfde uitzondering, om dezelfde reden.

   Beide alarmkleuren in twee zettingen: donker-op-licht leest goed op een witte pagina, licht-op-donker
   op de donkere sjabloonvariant. Zonder die tweede zetting valt #b02a37 weg in een donkerblauwe pagina
   zoals die van Centrum voor Stressmanagement. */
.wf-seats-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 14%, transparent);
  color: var(--brand-secondary, var(--brand-primary));
  border: 1px solid color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 30%, transparent);
}
.wf-seats-badge i { font-size: 16px; line-height: 1; }

.wf-seats-badge.is-krap {
  background: rgba(180, 83, 9, .10);
  color: #92400e;
  border-color: rgba(180, 83, 9, .30);
}
.wf-seats-badge.is-vol {
  background: rgba(220, 53, 69, .10);
  color: #b02a37;
  border-color: rgba(220, 53, 69, .30);
}

[data-bs-theme="dark"] .wf-seats-badge {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
[data-bs-theme="dark"] .wf-seats-badge.is-krap {
  background: rgba(251, 191, 36, .16);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, .40);
}
[data-bs-theme="dark"] .wf-seats-badge.is-vol {
  background: rgba(248, 113, 113, .16);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, .40);
}

/* Aanmeldknop onder aan de agenda-detailpagina. Op een telefoon breekt de tegel naar twee regels en
   staat de knop anders half zo breed onder een afgebroken zin; over de volle breedte is hij daar het
   duidelijke eindpunt van de pagina. Boven 575px blijft hij een gewone knop naast de tekst. */
@media (max-width: 575px) {
  .wf-signup-tile .wf-signup-cta {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* FAQ-categorietabs (overzichtspagina): huisstijl-actief + hover. Basis expliciet
   vlak (transparant, geen schaduw) zodat alle tabs consistent ogen; de tint/balk
   komt pas bij hover/actief. */
/* Hogere specificiteit (.tab-style-05 .wf-faq-tabs) zodat we crafto's tab-style-05
   verslaan; de tabtekst zit in een <span> met een eigen kleurregel, die sturen we
   apart aan. Elke categorie een eigen zacht getint kaartje met merkrand. */
.tab-style-05 .wf-faq-tabs .nav-item .nav-link {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 12px; padding: .85rem 1.1rem; margin-bottom: 10px;
  color: var(--dark-gray); font-weight: 600;
  background: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 5%, #f6f6f4);
  border: 1px solid color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 16%, transparent);
  box-shadow: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.tab-style-05 .wf-faq-tabs .nav-item .nav-link span { color: var(--dark-gray); }
.tab-style-05 .wf-faq-tabs .nav-item:last-child .nav-link { margin-bottom: 0; }
/* Pijltje rechts dat inschuift zodra de tab actief of gehoverd is. currentColor
   zodat het de accentkleur van de actieve/hover-staat overneemt. */
.wf-faq-tabs .nav-link::after {
  content: ""; flex-shrink: 0; width: .85rem; height: .85rem; margin-left: .5rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.wf-faq-tabs .nav-link:hover::after,
.wf-faq-tabs .nav-link.active::after { opacity: 1; transform: translateX(0); }
.tab-style-05 .wf-faq-tabs .nav-item .nav-link:hover {
  background: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 12%, #fff);
  color: var(--brand-secondary, var(--brand-primary));
  border-color: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 45%, transparent);
  box-shadow: none;
  transform: translateX(2px);
}
.tab-style-05 .wf-faq-tabs .nav-item .nav-link:hover span { color: var(--brand-secondary, var(--brand-primary)); }
/* Actieve categorie: vol merk-accent met witte tekst — maximaal duidelijk. */
.tab-style-05 .wf-faq-tabs .nav-item .nav-link.active,
.tab-style-05 .wf-faq-tabs .nav-item .nav-link.show {
  background: var(--brand-secondary, var(--brand-primary));
  color: #fff;
  border-color: var(--brand-secondary, var(--brand-primary));
  /* Was een brede tan gloed (brand-secondary 35%, 20px) die de tab wollig/onduidelijk maakte; nu een
     subtiele neutrale schaduw. De tan vulling + witte tekst geven al de definitie. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
}
.tab-style-05 .wf-faq-tabs .nav-item .nav-link.active span,
.tab-style-05 .wf-faq-tabs .nav-item .nav-link.show span { color: #fff; }

/* In een donker/gekleurd blok blijft de FAQ-kaart licht en leesbaar (de gedeelde
   .wf-on-dark-regels maken tekst wit; hier houden we de kaart-inhoud juist donker). */
:is(.wf-block-dark, .wf-on-dark) .wf-faq-accordion .accordion-button { color: var(--dark-gray); }
:is(.wf-block-dark, .wf-on-dark) .wf-faq-accordion .accordion-body { color: #4a5568; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ-voorpaginablok — variant "1c" (ontwerp Jenny/Tom).
   Twee kolommen: links de intro, rechts een licht paneel met GENUMMERDE regels
   (01, 02…) gescheiden door dunne lijnen i.p.v. losse kaarten. Nummer + chevron
   kleuren op zodra de vraag openstaat. Accent = --brand-secondary (merk-hoofd-
   kleur als terugval). De ACHTERGROND van het blok komt uit het dashboard (op de
   <section>, via Home.cshtml); dit blok hardcodeert die niet. De intro kleurt mee
   via de bestaande wf-on-dark-klassen; het rechter paneel is licht in de lichte
   template en kleurt mee naar donker in de donkere template (zie de dark-regels onderaan).
   Alles scoped op .wf-faq-1c zodat het andere FAQ-varianten niet raakt.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-faq-1c { --wf-faq-accent: var(--brand-secondary, var(--brand-primary)); }
.wf-faq-1c-intro p { max-width: 320px; }

/* Witte knop op een donker/foto-blok: forceer donkere tekst zodat de wf-on-dark-regel
   (die .text-dark-gray wit maakt) hem niet wit-op-wit maakt. */
.wf-faq-1c-cta-dark { color: var(--dark-gray) !important; }
.wf-faq-1c-cta-dark:hover { color: var(--dark-gray) !important; }

/* Rechterpaneel: licht, afgerond, zachte slagschaduw. Faint merk-tint zodat het
   met elke huisstijl harmonieert en op elke sectie-achtergrond leesbaar blijft. */
.wf-faq-1c-panel {
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
  border-radius: 16px;
  padding: 6px 30px;
  box-shadow: 0 18px 44px rgba(8, 15, 52, .16);
}

/* Genummerde regel: dunne scheidingslijn (behalve de eerste). */
.wf-faq-1c-row { border-top: 1px solid rgba(20, 30, 55, .10); }
.wf-faq-1c-row:first-child { border-top: none; }

.wf-faq-1c-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: opacity .18s ease;
}
.wf-faq-1c-btn:hover { opacity: .78; }
.wf-faq-1c-btn:focus { outline: none; box-shadow: none; }

/* Volgnummer: gedempt accent gesloten, vol accent open. */
.wf-faq-1c-num {
  flex: none;
  width: 42px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--wf-faq-accent) 42%, #c9c2b6);
  transition: color .25s ease;
}
.wf-faq-1c-row:has(.wf-faq-1c-btn:not(.collapsed)) .wf-faq-1c-num { color: var(--wf-faq-accent); }

.wf-faq-1c-qwrap { flex: 1; min-width: 0; }
.wf-faq-1c-cat {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wf-faq-accent) 70%, #8a8072);
  margin-bottom: 5px;
}
.wf-faq-1c-q { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--dark-gray); }

/* Chevron in accentkleur; draait bij openklappen. */
.wf-faq-1c-chev {
  flex: none;
  font-size: 20px;
  color: var(--wf-faq-accent);
  transition: transform .3s ease;
}
.wf-faq-1c-btn:not(.collapsed) .wf-faq-1c-chev { transform: rotate(180deg); }

/* Antwoord: uitgelijnd onder de vraag (voorbij het nummer). */
.wf-faq-1c-answer { padding: 0 0 22px 62px; font-size: 14px; line-height: 1.7; color: #4a5568; }

/* Responsive: Bootstrap-kolommen stapelen al; hier alleen ademende paneel-padding. */
@media (max-width: 991px) {
  .wf-faq-1c-intro p { max-width: none; }
}
@media (max-width: 575px) {
  .wf-faq-1c-panel { padding: 4px 18px; }
  .wf-faq-1c-btn { gap: 14px; }
  .wf-faq-1c-num { width: 34px; font-size: 1.25rem; }
  /*  Geen inspringing meer onder het nummer: op 320px bleef er zo'n 200px over voor het antwoord en
      werd één antwoord ongeveer 900px lang (Tom, 13-09-2026). Het antwoord staat nu over de volle
      breedte van het paneel onder de vraag. */
  .wf-faq-1c-answer { padding-left: 0; }
}

/* Dark mode: het paneel kleurt mee met de donkere template (diapositief). Een
   donker vlak met een faint merk-tint, lichte vraag-tekst en gedempte antwoord-tekst;
   nummers/chevron blijven het accent. Zo oogt het blok consistent i.p.v. een wit eiland. */
[data-bs-theme="dark"] .wf-faq-1c-panel {
  background: var(--wf-dark-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .wf-faq-1c-row { border-top-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .wf-faq-1c-q { color: #eef1f7; }
[data-bs-theme="dark"] .wf-faq-1c-answer { color: #b9c0cf; }

/* =====================================================================
   Dienst-detailpagina — opzet 1a ("zwevende kaart, centrale opbouw").
   Alle accenten volgen de huisstijl van de klant via --brand-primary /
   --brand-secondary; de lichte kaartjes tinten mee met color-mix.
   ===================================================================== */

/* Fotobanner: bannerfoto als achtergrond, huisstijlkleur als terugval. */
.biz-svc-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--brand-dark);
  /* Geen afgeronde hoeken: de bovenbalk loopt van rand tot rand (Jenny, 13-09-2026). */
  border-radius: 0;
}

/* Donkere waas + subtiele huisstijl-gloed, zodat de witte titel altijd leesbaar is. */
.biz-svc-hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand-secondary) 30%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, rgba(12, 17, 28, .52), rgba(12, 17, 28, .70));
}
.biz-svc-hero-inner {
  position: relative; z-index: 2;
  text-align: center;
  padding: 40px 24px;
  max-width: 900px;
}
.biz-svc-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 12px;
}
.biz-svc-hero-title {
  color: #fff; font-weight: 600; line-height: 1.1;
  font-size: clamp(1.9rem, 4.2vw, 2.65rem);
  letter-spacing: -.5px;
  margin: 0 0 14px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.biz-svc-crumb { font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.biz-svc-crumb a { color: rgba(255, 255, 255, .85); }
.biz-svc-crumb a:hover { color: #fff; }
.biz-svc-crumb span { margin: 0 8px; opacity: .55; }
.biz-svc-crumb-current { color: #fff; }

/* Contentsectie onder de banner. */
.biz-svc-section { padding-bottom: 70px; }

/* Projectdetail zonder de zwevende foto-kaart: de bovenruimte die #down-section vrijhield voor die
   kaart (90px + 46px van het eerste tekstblok) weghalen, zodat de inhoud strak op de fotobanner
   aansluit i.p.v. een groot leeg gat. Scoped op .biz-proj-nocard — raakt de Diensten-detail niet. */
.biz-proj-nocard { padding-top: 44px !important; }
.biz-proj-nocard .container > .biz-svc-extra:first-child,
.biz-proj-nocard .container > .biz-svc-gallery:first-child { margin-top: 0; }

/* Zwevende witte kaart die over de banner heen valt. */
.biz-svc-card {
  position: relative; z-index: 3;
  max-width: 1000px; margin: -88px auto 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(20, 25, 40, .16);
  padding: 40px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 46px;
  align-items: center;
}
.biz-svc-card--noimg { grid-template-columns: 1fr; max-width: 820px; text-align: center; }

/* Klikbare kaartfoto → opent de grote lightbox-slider. */
.biz-svc-card-photo { position: relative; }
.biz-svc-photo-link {
  display: block; position: relative;
  height: 360px; border-radius: 10px; overflow: hidden;
  cursor: zoom-in;
}
.biz-svc-photo-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.biz-svc-photo-link:hover img { transform: scale(1.05); }
.biz-svc-zoom {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .82); color: var(--brand-ink);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease;
}
.biz-svc-photo-link:hover .biz-svc-zoom { opacity: 1; transform: translateY(0); }

/* Rechterkolom: badge, titel, intro, knop. */
.biz-svc-badge {
  display: inline-block;
  background: var(--brand-secondary); color: var(--brand-on-secondary);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 15px; border-radius: 16px; margin-bottom: 16px;
}
/* Titel houdt de huisstijlkleur, maar met donkere basis gemengd zodat hij ook bij een lichte
   hoofdkleur (bv. licht grijs) goed leesbaar blijft op de witte kaart. */
.biz-svc-card-title { font-weight: 600; color: var(--brand-ink); line-height: 1.15; font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin: 0 0 16px; }
.biz-svc-intro { font-size: 15.5px; color: #5a6472; line-height: 1.75; margin: 0 0 20px; }
/* Knop in de accentkleur (secundaire huisstijl) i.p.v. de titelkleur, zodat titel en knop
   duidelijk van elkaar verschillen. De knop is inline (inline-flex), dus de ruimte boven de
   knop wordt via deze margin-top bepaald — ruim genoeg zodat hij lager los van de tekst staat,
   ook wanneer er geen intro is. */
.biz-svc-cta {
  display: inline-flex; align-items: center;
  margin-top: 34px;
  background: var(--brand-secondary); color: var(--brand-on-secondary);
  padding: 13px 30px; border-radius: 28px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 16px rgba(20, 25, 40, .12);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
/* Hover: subtiele lift + iets donkerder merkkleur (geen gekleurde "gloed" of brightness meer, en
   geen wit-op-tan dat slecht leesbaar was — de tekst blijft de gegarandeerd-leesbare on-secondary). */
/*  De tekstkleur moet hier HERHAALD worden. Crafto heeft een generieke `a:hover { color:
    var(--base-color) }` (_crafto/css/style.css:140) en die is specifieker dan de kleur op
    `.biz-svc-cta` zelf. Zonder deze regel verft hij de knoptekst bij hoveren in de merkkleur — dus
    blauwe tekst op een blauwe knop, en de knop leek weg te vallen (Jenny 08-09). */
.biz-svc-cta:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--brand-secondary) 88%, #000); color: var(--brand-on-secondary); box-shadow: 0 10px 22px rgba(20, 25, 40, .18); }

/* Twee actie-pills naast elkaar (boekbare dienst): de gevulde hoofdknop ("afspraak") + een
   lichtere outline-variant naar de contactpagina. De kaart-tekstkolom is smal, dus beide pills
   krijgen gelijke breedte (elk de helft) en blijven op één rij; lange tekst breekt netjes af
   binnen de knop i.p.v. de tweede knop naar een nieuwe regel te duwen. Op mobiel stapelen ze. */
.biz-svc-cta-group { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; margin-top: 34px; }
.biz-svc-cta-group .biz-svc-cta {
  margin-top: 0;
  flex: 1 1 0; min-width: 0;
  justify-content: center; text-align: center;
  padding-left: 16px; padding-right: 16px;
}
.biz-svc-cta--ghost {
  background: transparent;
  color: var(--brand-secondary);
  border: 2px solid color-mix(in srgb, var(--brand-secondary) 45%, transparent);
  padding: 11px 28px;   /* 2px minder verticaal compenseert de 2px rand → even hoog als de gevulde knop */
  box-shadow: none;
}
/* Herhaalde knoppenrij onder de uitgebreide tekst: pills op natuurlijke breedte, gecentreerd
   (niet half-om-half zoals in de smalle kaart-kolom). Wrapt netjes op smalle schermen. */
.biz-svc-cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; max-width: 820px; margin: 40px auto 0; }
.biz-svc-cta-row .biz-svc-cta { margin-top: 0; }
.biz-svc-cta--ghost:hover { color: var(--brand-on-secondary); background: var(--brand-secondary); border-color: var(--brand-secondary); }
/* Onder ~992px is de kaart-tekstkolom te smal voor twee pills naast elkaar (ze zouden
   samengeperst worden en over meerdere regels breken) → stapel ze full-width onder elkaar. */
@media (max-width: 991px) {
  .biz-svc-cta-group { flex-direction: column; align-items: stretch; }
}

/* 4 blokjes: kenmerken in huisstijl-getinte kaartjes (geen vaste kleur). */
.biz-svc-checklist {
  max-width: 1000px; margin: 46px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
/* Blokjes tinten mee met Steunkleur 2 (--brand-tertiary), zodat titel (Hoofdkleur),
   badge/knop (Steunkleur) en blokjes (Steunkleur 2) alle drie de huisstijlkleuren tonen.
   Het vinkje wordt donker gemengd zodat het ook bij een lichte Steunkleur 2 zichtbaar blijft. */
.biz-svc-check {
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--brand-tertiary) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-tertiary) 20%, #fff);
  border-radius: 10px; padding: 16px 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.biz-svc-check:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-tertiary) 42%, #fff);
  box-shadow: 0 12px 26px rgba(20, 25, 40, .08);
}
.biz-svc-check-ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand-tertiary) 20%, #fff);
  color: var(--brand-tertiary-ink); font-size: 16px; line-height: 1;
}
.biz-svc-check-txt { font-size: 13.5px; color: #28344a; line-height: 1.35; }

/* Extra tekstblok: uitgebreide omschrijving onder de blokjes. */
/*  Even breed als de kaart en de blokjes erboven (1000px): een smaller tekstvlak onder een brede
    kop en brede punten oogde als een uitlijnfout (Jenny 28-08-2026). */
.biz-svc-extra { max-width: 1000px; margin: 46px auto 0; }

/* Foto's-galerij. */
.biz-svc-gallery { max-width: 1000px; margin: 56px auto 0; }
.biz-svc-galtitle { text-align: center; margin-bottom: 30px; }
.biz-svc-galtitle h3 { font-weight: 600; color: var(--brand-ink); font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 0 0 8px; }
.biz-svc-rule { display: inline-block; width: 44px; height: 2px; background: var(--brand-secondary); }

/* Formulierband: huisstijl-getint paneel rond het gekoppelde formulier. */
.biz-svc-form-band {
  max-width: 1000px; margin: 56px auto 0;
  background: color-mix(in srgb, var(--brand-secondary) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 15%, #fff);
  border-radius: 14px;
  padding: 46px 30px;
}
.biz-svc-form-inner { max-width: 720px; margin: 0 auto; }
.biz-svc-form-head { text-align: center; margin-bottom: 28px; }
/* Titel houdt de huisstijlkleur, maar wordt met een donkere basis gemengd zodat hij ook bij
   een lichte merkkleur altijd goed leesbaar blijft op de lichte formulierband. Zwaarder gewicht
   voor extra nadruk. */
.biz-svc-form-head h3 {
  font-weight: 700;
  color: var(--brand-ink);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 10px;
}
.biz-svc-form-head p { font-size: 14.5px; color: #5a6472; line-height: 1.7; margin: 0; }
/* Donkere modus: de formulierband is licht bedoeld (crème). Onder dark werden de labels/velden licht
   (globale dark-regels) op die lichte band → onleesbaar licht-op-licht. De band wordt daarom een subtiel
   huisstijl-getint DONKER paneel, en de kop-tekst licht. Alleen dark; licht ongemoeid. */
[data-bs-theme="dark"] .biz-svc-form-band {
  background: color-mix(in srgb, var(--brand-secondary) 10%, var(--site-dark-bg, #16201b));
  border-color: rgba(255, 255, 255, .12);
}
[data-bs-theme="dark"] .biz-svc-form-head h3 { color: #f1efec; }
[data-bs-theme="dark"] .biz-svc-form-head p { color: #b9bdca; }

/* Responsief: kaart en blokjes stapelen netjes op tablet en mobiel. */
@media (max-width: 991px) {
  .biz-svc-hero { min-height: 300px; }
  .biz-svc-card { margin-top: -64px; padding: 32px; gap: 34px; }
  .biz-svc-checklist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .biz-svc-hero { min-height: 240px; }
  .biz-svc-card { grid-template-columns: 1fr; margin-top: -44px; padding: 26px; gap: 24px; text-align: center; }
  .biz-svc-photo-link { height: 260px; }
  .biz-svc-badge { margin-top: 4px; }
  .biz-svc-form-band { padding: 34px 20px; }
}
/*  Kopbalk zonder foto (biz-hero-leeg, gezet in DienstDetail/ProjectDetail wanneer er noch een eigen
    foto noch een hoofdfoto uit Settings is). De 360px hierboven is fotoruimte; staat er geen foto in,
    dan is dat alleen maar een groot leeg vlak — bij CVSM 399px hoog voor 219px aan tekst.

    De padding MOET hier mee weg. De hoogte kwam namelijk niet van de min-height maar van Crafto's
    sectie-padding van 90px boven en onder: 90 + 219 + 90 = precies die 399px. Alleen de min-height
    verlagen veranderde dan ook niets. Met de padding op nul bepaalt de min-height de hoogte echt,
    en centreert de flex de inhoud netjes; de 40px eigen padding van .biz-svc-hero-inner blijft, dus
    de titel komt niet tegen de rand.

    Twee klassen, dus dit wint van de losse .biz-svc-hero-regels in de media queries hierboven,
    ongeacht de volgorde. De mobiele regel staat er expres ONDER: gelijke specificiteit, dus daar
    telt de volgorde wel. */
.biz-svc-hero.biz-hero-leeg { min-height: 240px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 767px) { .biz-svc-hero.biz-hero-leeg { min-height: 200px; } }
@media (max-width: 479px) {
  .biz-svc-checklist { grid-template-columns: 1fr; }
  .biz-svc-check { text-align: left; }
}

/* Dark mode: banner blijft donker; de lichte kaart + blokjes houden we bewust
   licht en leesbaar, in lijn met de FAQ-panelen hierboven. */
/* Dienst-detail inhoudskaart: op de donkere site GEEN wit eiland meer, maar het gedeelde donkere
   kaart-oppervlak (--wf-dark-card, net als de overzichts- en homekaarten). Tekst dus licht:
   titel in de lichte merktint, intro/checklist in licht grijs. */
[data-bs-theme="dark"] .biz-svc-card { background: var(--wf-dark-card); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] .biz-svc-card-title { color: var(--brand-primary-ondark, #f1efec); }
[data-bs-theme="dark"] .biz-svc-intro { color: #c7cad2; }
/* Checklist-chips: op de donkere site GEEN witte pilletjes, maar een MID-tint van de klant-
   steunkleur 2 (--brand-tertiary-ondark = de op-donker leesbare tertiary), gemengd met de donkere
   basis. Niet wit, niet te donker; draagt de merkkleur mee wanneer de tertiary kleurig is. Tekst +
   icoon dus licht. */
[data-bs-theme="dark"] .biz-svc-check {
  background: color-mix(in srgb, var(--brand-tertiary-ondark, #8a8789) 60%, var(--site-dark-bg));
  border-color: color-mix(in srgb, var(--brand-tertiary-ondark, #8a8789) 72%, var(--site-dark-bg));
}
[data-bs-theme="dark"] .biz-svc-check-ic {
  background: color-mix(in srgb, var(--brand-tertiary-ondark, #8a8789) 78%, var(--site-dark-bg));
  color: #f1efec;
}
[data-bs-theme="dark"] .biz-svc-check-txt { color: #f1efec; }
[data-bs-theme="dark"] .biz-svc-galtitle h3 { color: #f4f6fb; }


/* =====================================================================
   Product-detailpagina — opzet 2b ("Meelopend aanvraagpaneel").
   Fotobanner → linkerkolom (galerij + omschrijving + specificaties) →
   meelopend (sticky) rechterpaneel met info + aanvraagformulier. Zonder
   paneel gebruikt de content de volle breedte. Alle accenten volgen de
   huisstijl (--brand-primary / --brand-secondary / --brand-tertiary).
   ===================================================================== */

/* Fotobanner: bannerfoto als achtergrond, huisstijlkleur als terugval. */
.biz-prod-hero {
  position: relative;
  min-height: 210px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--brand-dark);
}
.biz-prod-hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand-secondary) 26%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, rgba(12, 17, 28, .46), rgba(12, 17, 28, .60));
}
.biz-prod-hero-inner { position: relative; z-index: 2; padding: 34px 0; }
.biz-prod-hero-title {
  color: #fff; font-weight: 600; line-height: 1.1;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  letter-spacing: -.4px; margin: 0 0 8px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.biz-prod-crumb { font-size: 13px; color: rgba(255, 255, 255, .85); }
.biz-prod-crumb a { color: rgba(255, 255, 255, .85); }
.biz-prod-crumb a:hover { color: #fff; }
.biz-prod-crumb span { margin: 0 7px; opacity: .5; }
.biz-prod-crumb-current { color: #fff; }

/* Content-sectie + tweekolomsindeling (galerij/tekst links, paneel rechts). */
.biz-prod-section { padding: 52px 0 64px; }
.biz-prod-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: start;
}
.biz-prod-layout--full { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin: 0 auto; }
.biz-prod-main-col { min-width: 0; }

/* Productinfo bij volle breedte (geen paneel). */
.biz-prod-summary { margin-bottom: 34px; }

/* Galerij: grote foto + wisselbare thumbnails. */
.biz-prod-gallery { margin-bottom: 40px; }
.biz-prod-stage {
  display: block; position: relative; width: 100%;
  height: 460px; border: 0; padding: 0; margin: 0 0 14px;
  border-radius: 20px; overflow: hidden; cursor: zoom-in;
  background: color-mix(in srgb, var(--brand-ink) 6%, #fff);
  box-shadow: 0 14px 34px rgba(20, 25, 40, .12);
}
.biz-prod-stage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.biz-prod-stage:hover img { transform: scale(1.04); }
.biz-prod-zoom {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .82); color: var(--brand-ink);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease;
}
.biz-prod-stage:hover .biz-prod-zoom { opacity: 1; transform: translateY(0); }
.biz-prod-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.biz-prod-thumb {
  position: relative; height: 92px; padding: 0; border: 2px solid transparent;
  border-radius: 20px; overflow: hidden; cursor: pointer; background: none;
  transition: border-color .25s ease, transform .25s ease;
}
.biz-prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz-prod-thumb:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-secondary) 45%, #fff); }
.biz-prod-thumb.is-active { border-color: var(--brand-secondary); }

/* Tekstblokken (omschrijving / specificaties) met goud-getint accent-streepje. */
.biz-prod-block { margin-top: 40px; }
.biz-prod-blocktitle { font-weight: 600; color: var(--brand-ink); font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin: 0 0 8px; }
.biz-prod-rule { display: block; width: 44px; height: 2px; background: var(--brand-secondary); margin-bottom: 18px; }
.biz-prod-specs { border-top: 1px solid #eceef1; }
.biz-prod-spec {
  display: grid; grid-template-columns: 180px 1fr; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid #eceef1;
}
.biz-prod-spec-k { font-size: 14px; font-weight: 600; color: #28344a; }
.biz-prod-spec-v { font-size: 14px; color: #5a6472; }

/* Gedeelde productinfo (kicker/naam/prijs/intro) in paneel én volle-breedte-samenvatting. */
.biz-prod-kicker { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9aa0aa; font-weight: 600; margin-bottom: 8px; }
.biz-prod-name { font-weight: 600; color: var(--brand-ink); line-height: 1.15; font-size: clamp(1.4rem, 2.4vw, 1.7rem); margin: 0 0 10px; }
.biz-prod-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.biz-prod-price-old { font-size: 15px; color: #a7adb6; text-decoration: line-through; }
.biz-prod-price-now { font-size: 23px; font-weight: 600; color: var(--base-ink); }
.biz-prod-vat { font-size: 13px; color: #8a8f98; }
.biz-prod-intro { font-size: 14.5px; color: #5a6472; line-height: 1.7; margin: 0 0 4px; }

/* Meelopend (sticky) rechterpaneel: huisstijl-getinte kaart met info + formulier/knop. */
.biz-prod-side { min-width: 0; }
.biz-prod-panel {
  position: sticky; top: 24px;
  background: color-mix(in srgb, var(--brand-secondary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 15%, #fff);
  border-radius: 12px; padding: 28px 26px;
  box-shadow: 0 12px 34px rgba(20, 25, 40, .07);
}
.biz-prod-panel-action { border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 16%, #fff); padding-top: 22px; margin-top: 20px; }

/* Aanvraagformulier in het productpaneel. Het gedeelde formulier-partial (_SiteForm) heeft z'n
   eigen grijze kaart met 40px binnenrand — prima op een losse contactpagina, maar in dit toch al
   smalle, getinte paneel gaf dat een kader-in-kader waardoor de velden samengedrukt oogden. Hier
   laten we het formulier direct in het paneel lopen (geen dubbele kaart, geen extra rand) en geven
   de velden wat meer verticale lucht. Alleen gescoped op het productpaneel; het gedeelde partial
   en de contactpagina blijven ongemoeid. */
.biz-prod-panel-action .wf-site-form { background: transparent; border-radius: 0; padding: 0 !important; }
.biz-prod-panel-action .wf-site-form .row > [class*="col-"] { margin-bottom: 24px !important; }
.biz-prod-panel-action .wf-site-form .row > [class*="col-"]:last-child { margin-bottom: 0 !important; }

/* Terug-link. */
.biz-prod-back { text-align: center; margin-top: 48px; }
.biz-prod-backlink {
  display: inline-flex; align-items: center;
  border: 1.5px solid color-mix(in srgb, var(--brand-ink) 18%, #fff); color: var(--brand-ink);
  padding: 12px 26px; border-radius: 28px; font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.biz-prod-backlink:hover { transform: translateY(-2px); border-color: var(--brand-secondary); color: var(--brand-ink); background: color-mix(in srgb, var(--brand-secondary) 8%, #fff); }

/* Responsief: paneel onder de content op tablet/mobiel; thumbnails blijven meeschalen. */
@media (max-width: 991px) {
  .biz-prod-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .biz-prod-panel { position: static; }
  .biz-prod-stage { height: 380px; }
}
@media (max-width: 767px) {
  .biz-prod-stage { height: 300px; }
  .biz-prod-spec { grid-template-columns: 130px 1fr; }
}
@media (max-width: 479px) {
  .biz-prod-thumbs { grid-template-columns: repeat(3, 1fr); }
  .biz-prod-spec { grid-template-columns: 1fr; gap: 2px; }
  .biz-prod-spec-v { color: #6b7280; }
}

/* Dark mode: banner blijft donker; de lichte kaart + tekstblokken houden we bewust licht en
   leesbaar, in lijn met de diensten-kaart en FAQ-panelen hierboven. */
[data-bs-theme="dark"] .biz-prod-blocktitle { color: #f4f6fb; }
[data-bs-theme="dark"] .biz-prod-name { color: #f4f6fb; }
[data-bs-theme="dark"] .biz-prod-spec-k { color: #dfe3ea; }
[data-bs-theme="dark"] .biz-prod-spec-v { color: #aeb4c0; }
[data-bs-theme="dark"] .biz-prod-panel { background: #14181f; border-color: rgba(255, 255, 255, .08); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] .biz-prod-panel .biz-prod-name { color: #f4f6fb; }
/* Formulier loopt in dark mode direct op de donkere paneelkaart: labels/intro lichten we op zodat
   ze niet donker-op-donker vallen (de losse witte AVG-box houdt bewust z'n eigen donkere tekst). */
[data-bs-theme="dark"] .biz-prod-panel-action .wf-site-form .form-label,
[data-bs-theme="dark"] .biz-prod-panel-action .wf-site-form > p { color: #e6e9ef !important; }
[data-bs-theme="dark"] .biz-prod-backlink { color: #f4f6fb; border-color: rgba(255, 255, 255, .22); }

/* Foto-lightbox (Magnific) op ALLE business1-pagina's — diensten, galerij, producten, portfolio.
   Deze CSS wordt alleen op business1 geladen, dus beauty1/business2 blijven ongemoeid. We scopen
   op .mfp-image-holder zodat alleen fóto-popups meedoen (niet de zoek-/nieuwsbrief-popups).

   Ronde hoeken (20px) op de grote foto in de slideshow, gelijk aan de foto's in het overzicht,
   met 15px marge boven en onder. De basis-Magnific-stijl zet 40px padding op de foto (waardoor de
   radius in de lege ruimte viel) en tekent een vierkant grijs vlak áchter de foto
   (.mfp-figure:after) — beide corrigeren we hier. Magnific zet zelf een inline max-height op de
   foto; met !important houden we 15px marge boven/onder zodat de ronde hoeken zichtbaar zijn. */
.mfp-image-holder img.mfp-img {
  padding: 0;
  max-width: calc(100vw - 96px) !important;
  max-height: calc(100vh - 30px) !important;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.mfp-image-holder .mfp-figure:after { display: none; }
@media (max-width: 767px) {
  .mfp-image-holder img.mfp-img {
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100vh - 30px) !important;
    border-radius: 14px;
  }
}

/* Sluitknop van de PRODUCT-slideshow: klikbaar wit rondje rechtsboven. Scoped op de eigen
   productlightbox (mainClass biz-prod-lightbox); corrigeert de basis-Magnific-regel
   (.mfp-image-holder .mfp-close { width:100% }) die de knop over de volle breedte uitrekte.
   Andere business1-lightboxes (diensten/galerij) houden hun eigen thema-sluitknop. */
.biz-prod-lightbox button.mfp-close,
.biz-prod-lightbox button.mfp-close:active {
  left: auto; right: 20px; top: 20px;
  width: 46px; height: 46px; padding: 0;
  background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  z-index: 1060;
}
.biz-prod-lightbox button.mfp-close:before { color: #1f2a3c; }
@media (max-width: 767px) {
  .biz-prod-lightbox button.mfp-close,
  .biz-prod-lightbox button.mfp-close:active { right: 14px; top: 14px; width: 42px; height: 42px; }
}


/* =====================================================================
   Productpagina "shop 2b" — rijke webshop-detailpagina, ALLEEN op de
   `sellable`-tak van business1/ProductDetail.cshtml (product te koop +
   Shop-module actief). Los van .biz-prod-* (dat blijft de niet-te-koop
   pagina) zodat wijzigingen hier de bestaande layout nooit raken. De
   galerij (grote foto/thumbnails/lightbox) hergebruikt bewust de
   bestaande .biz-prod-gallery/.biz-prod-stage/.biz-prod-thumb klassen
   (zelfde JS/lightbox blijft werken); hier komt alleen de kortingsbadge
   en het meelopende koop-paneel bij. Referentie: Claude Design
   "Productpagina shop 2b". Accent = huisstijl (--brand-secondary), niet
   het vaste Frenque-bruin uit het ontwerp.
   ===================================================================== */

/* Compacte sfeerbanner. */
.wf-p2b-hero {
  position: relative;
  min-height: 210px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--brand-dark);
}
.wf-p2b-hero-overlay { position: absolute; inset: 0; pointer-events: none; background: rgba(26, 30, 38, .48); }
.wf-p2b-hero-inner { position: relative; z-index: 2; padding: 28px 0; }
.wf-p2b-hero-title {
  color: #fff; font-weight: 500; line-height: 1.15;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: 0 0 6px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}
.wf-p2b-crumb { font-size: 13px; color: rgba(255, 255, 255, .85); }
.wf-p2b-crumb a { color: rgba(255, 255, 255, .85); }
.wf-p2b-crumb a:hover { color: #fff; }
.wf-p2b-crumb span { margin: 0 7px; opacity: .5; }
.wf-p2b-crumb-current { color: #fff; }

/* Contentgrid: galerij/tekst links, meelopend koop-paneel rechts (372px, zoals het ontwerp). */
.wf-p2b-section { padding: 48px 0 56px; }
.wf-p2b-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 48px; align-items: start; }
.wf-p2b-main { min-width: 0; }

/* Kortingsbadge boven op de hoofdfoto (die zelf .biz-prod-stage/-gallery is, zie view). */
.wf-p2b-stage-wrap { position: relative; }
.wf-p2b-badge {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  background: var(--brand-secondary, var(--brand-primary));
  color: var(--brand-on-secondary, #fff);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  padding: 6px 14px; border-radius: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* Tekstblokken (omschrijving/specificaties) — zelfde opzet als .biz-prod-block, eigen naamruimte. */
.wf-p2b-block { margin-top: 40px; }
.wf-p2b-blocktitle { font-weight: 600; color: var(--brand-ink); font-size: clamp(1.2rem, 2.1vw, 1.4rem); margin: 0 0 8px; }
.wf-p2b-rule { display: block; width: 44px; height: 2px; background: var(--brand-secondary, var(--brand-primary)); margin-bottom: 18px; }
.wf-p2b-specs { border-top: 1px solid #eceef1; }
.wf-p2b-spec { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #eceef1; }
.wf-p2b-spec-k { font-size: 14px; font-weight: 600; color: #28344a; }
.wf-p2b-spec-v { font-size: 14px; color: #6b7280; }

/* Meelopend koop-paneel. */
.wf-p2b-side { min-width: 0; }
.wf-p2b-panel {
  position: sticky; top: 24px;
  background: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 5%, #fbfaf7);
  border: 1px solid color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 14%, #eee5d8);
  border-radius: 12px; padding: 28px 26px;
  box-shadow: 0 12px 34px rgba(20, 25, 40, .08);
}
.wf-p2b-eyebrow { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9aa0aa; font-weight: 600; margin-bottom: 8px; }
.wf-p2b-title { font-size: 24px; font-weight: 600; color: var(--brand-ink); margin: 0 0 8px; line-height: 1.2; }

.wf-p2b-price-row { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin: 0 0 6px; }
.wf-p2b-price-old { font-size: 15px; color: #a7adb6; text-decoration: line-through; }
.wf-p2b-price-now { font-size: 27px; font-weight: 600; color: var(--brand-secondary-ink, var(--brand-secondary)); }
/* Donkere modus: de secondary-ink-prijs is te donker op de donkere productdetail (contrast ~2.6) → licht
   huisstijl-tan. Licht-eiland houdt de inkt. Alleen dark; licht ongemoeid. */
[data-bs-theme="dark"] .wf-p2b-price-now { color: var(--brand-secondary-ondark, #d8c6ad); }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-p2b-price-now { color: var(--brand-secondary-ink, var(--brand-secondary)); }

.wf-p2b-stock { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #5b8f43; margin-bottom: 22px; }
.wf-p2b-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #6bbf59; flex: none; }
.wf-p2b-stock-dot--out { background: #b0b6c0; }

/* Artikelkeuze (varianten) als kiesbare pillen i.p.v. kleur-swatches. */
.wf-p2b-articles { margin-bottom: 20px; }
.wf-p2b-articles-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.wf-p2b-articles-head span:first-child { font-size: 12.5px; font-weight: 600; color: #28344a; }
.wf-p2b-articles-head span:last-child { font-size: 12.5px; color: #9aa0aa; text-align: right; }
.wf-p2b-pills { display: flex; flex-direction: column; gap: 8px; }
.wf-p2b-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  border: 1.5px solid #e2e5ea; background: #fff; border-radius: 10px;
  padding: 10px 14px; cursor: pointer;
  font-size: 13.5px; color: #28344a;
  transition: border-color .2s ease, background .2s ease;
}
.wf-p2b-pill:hover { border-color: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 45%, #e2e5ea); }
.wf-p2b-pill.is-active {
  border-color: var(--brand-secondary, var(--brand-primary));
  background: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 10%, #fff);
}
.wf-p2b-pill-name { font-weight: 600; }
.wf-p2b-pill-price { color: #6b7280; font-size: 13px; white-space: nowrap; }
/* Oude prijs op het artikelknopje: lichter en kleiner, zodat de prijs die telt vooraan blijft staan. */
.wf-p2b-pill-was { opacity: .6; font-size: 12px; margin-right: 5px; }

/* Artikelentabel op de productpagina. Crafto zet globaal word-break:break-word; zodra de tabel smal
   werd braken kop en inhoud middenin af ("Arti/kel", "2/Zits/ban/k"). Terug naar normaal afbreken;
   past de tabel niet, dan schuift de table-responsive eromheen mee. */
.wf-articles th, .wf-articles td { word-break: normal; overflow-wrap: normal; }
/* Oude prijs kleiner dan de prijs die betaald wordt, zodat die laatste de aandacht houdt. */
.wf-was-price { font-size: .85em; }
.wf-p2b-pill.is-active .wf-p2b-pill-price { color: var(--brand-secondary-ink, var(--brand-secondary)); }

/* Aantal-stepper. */
.wf-p2b-qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.wf-p2b-stepper { display: flex; align-items: center; border: 1px solid #e2e5ea; border-radius: 24px; overflow: hidden; background: #fff; }
.wf-p2b-step { width: 42px; height: 46px; border: none; background: #fff; font-size: 18px; color: #5b6472; cursor: pointer; line-height: 1; }
.wf-p2b-step:hover { background: color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 10%, #fff); }
.wf-p2b-qty-val { width: 38px; text-align: center; font-size: 15px; font-weight: 600; color: var(--brand-ink); }
.wf-p2b-qty-label { font-size: 12px; color: #9aa0aa; }

/* Actieknoppen (In winkelwagen = accent, Direct afrekenen = donker). */
.wf-p2b-btn {
  display: block; width: 100%; height: 50px; border: none; border-radius: 25px;
  font-size: 14.5px; font-weight: 500; cursor: pointer; margin-bottom: 11px;
  transition: transform .2s ease, filter .2s ease;
}
.wf-p2b-btn:last-child { margin-bottom: 0; }
.wf-p2b-btn--accent { background: var(--brand-secondary, var(--brand-primary)); color: var(--brand-on-secondary, #fff); }
.wf-p2b-btn--dark { background: var(--brand-ink, #1e2637); color: #fff; }
.wf-p2b-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* Vertrouwenselementen, 2x2. */
.wf-p2b-trust {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary, var(--brand-primary)) 16%, #ece5da);
  margin-top: 22px; padding-top: 20px;
}
.wf-p2b-trust span { font-size: 12px; color: #6b7280; }
.wf-p2b-trust i { color: var(--brand-secondary-ink, var(--brand-secondary)); }

/* Responsief: paneel onder de galerij, niet meer sticky. */
@media (max-width: 991px) {
  .wf-p2b-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .wf-p2b-panel { position: static; }
}
@media (max-width: 767px) {
  .wf-p2b-spec { grid-template-columns: 130px 1fr; }
}
@media (max-width: 479px) {
  .wf-p2b-spec { grid-template-columns: 1fr; gap: 2px; }
  .wf-p2b-articles-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .wf-p2b-articles-head span:last-child { text-align: left; }
}

/* Dark mode — volgt dezelfde conventie als .biz-prod-panel hierboven. */
[data-bs-theme="dark"] .wf-p2b-blocktitle { color: #f4f6fb; }
[data-bs-theme="dark"] .wf-p2b-spec-k { color: #dfe3ea; }
[data-bs-theme="dark"] .wf-p2b-spec-v { color: #aeb4c0; }
[data-bs-theme="dark"] .wf-p2b-panel { background: #14181f; border-color: rgba(255, 255, 255, .08); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] .wf-p2b-title { color: #f4f6fb; }
[data-bs-theme="dark"] .wf-p2b-pill { background: #1c212b; border-color: rgba(255, 255, 255, .12); color: #e6e9ef; }
[data-bs-theme="dark"] .wf-p2b-pill-price { color: #aeb4c0; }
[data-bs-theme="dark"] .wf-p2b-stepper { background: #1c212b; border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .wf-p2b-step { background: #1c212b; color: #dfe3ea; }
[data-bs-theme="dark"] .wf-p2b-qty-val { color: #f4f6fb; }
[data-bs-theme="dark"] .wf-p2b-trust span { color: #aeb4c0; }


/* =====================================================================
   Crafto accent-classes automatisch leesbaar voor ELKE klantkleur.
   --base-color (het accent) blijft de exacte klantkleur voor vlakken;
   als TEKST gebruiken we de leeskleur (donker op licht) en op donkere
   blokken juist de opgelichte variant. Gevulde accent-vlakken krijgen
   automatische contrasttekst (wit óf donker), nooit onleesbaar wit op licht.
   ===================================================================== */
.text-base-color { color: var(--base-ink) !important; }
:is(.wf-block-dark, .wf-on-dark) .text-base-color { color: var(--brand-secondary-ondark) !important; }
.bg-base-color, .btn.btn-base-color { color: var(--brand-on-secondary) !important; }

/* ── Shop-etalage landingspagina ───────────────────────────────────────── */
.wf-shop-landing { padding: 60px 0; }
.wf-shop-landing + .wf-shop-landing { padding-top: 0; }

/* Categorie-tegel: vierkante klikbare tegel met foto + label-overlay. */
.wf-cat-tile { aspect-ratio: 1 / 1; background: var(--brand-primary, #232323); }
.wf-cat-tile-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.wf-cat-tile:hover .wf-cat-tile-img { transform: scale(1.06); }
.wf-cat-tile-label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
    color: #fff; font-weight: 700; font-size: 16px;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
}

/* ── Shop-grid paginering (bij veel producten) — accent = huiskleur, geen vaste kleur ── */
.wf-shop-pagination .page-link { color: var(--dark-gray, #232323); border-radius: 6px; margin: 0 3px; border-color: rgba(0,0,0,.12); }
.wf-shop-pagination .page-link:hover { color: var(--base-color); border-color: var(--base-color); }
.wf-shop-pagination .page-item.active .page-link { background: var(--base-color); border-color: var(--base-color); color: #fff; }
.wf-shop-pagination .page-item.disabled .page-link { opacity: .45; }

/* ── Fashion-store shop-overzicht: uniforme productfoto's (portret 4/5, zoals de demo 600x765) ──
   Zo worden alle kaarten even groot (i.p.v. ongelijke masonry-hoogtes door wisselende fotoformaten). */
.shop-modern .shop-image { aspect-ratio: 4 / 5; overflow: hidden; }
.shop-modern .shop-image > a { display: block; height: 100%; }
.shop-modern .shop-image img { width: 100%; height: 100%; object-fit: cover; }
/* Productnaam op één vaste hoogte zodat de footers uitlijnen. */
.shop-modern .shop-footer > a { display: block; }

/* Uitverkocht in de fashion-shop grid: grijze badge + gedempte knop (linkt nog naar de detailpagina). */
.shop-modern .lable.soldout { background: #6b7280; color: #fff; }
.shop-modern .wf-soldout-btn { opacity: .7; }

/* ── Portfolio interactive-banner (Crafto style-04) ─────────────────────────
   Het Crafto-paneel dat bij hover over de projectfoto schuift is standaard
   geel (.bg-yellow). We laten het per klant de accentkleur (--brand-secondary)
   volgen; verder blijft de Crafto-animatie 1-op-1. */
.interactive-banner-style-04 .box-overlay.wf-brand-overlay { background: var(--brand-secondary); }
/* Ronding volgt de klantinstelling (--wf-radius-card). De markup draagt Crafto's vaste
   .border-radius-6px (6px !important), waardoor dit paneel vierkant bleef terwijl de kaart
   eromheen (.hover-box) de klant-radius al wel volgde. Niet ingesteld = terugval op 6px. */
.interactive-banner-style-04 .box-overlay.wf-brand-overlay { border-radius: var(--wf-radius-card, 6px) !important; }
/* Alle tegels even groot: vaste 3/4-verhouding (zoals interactive-banner-style-09 elders),
   foto vult de tegel met object-fit i.p.v. z'n eigen beeldhoogte te bepalen. */
.interactive-banner-style-04 figure { aspect-ratio: 3 / 4; }
.interactive-banner-style-04 figure > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*  Op een telefoon liggend (4:3) in plaats van staand (3:4): een staande kaart werd daar 460px hoog, drie
    projecten waren samen anderhalf scherm scrollen (Tom, 13-09-2026). De foto blijft vullend bijgesneden.
    Geldt voor het voorpagina-blok, het overzicht en "Meer projecten" op de projectpagina. */
@media (max-width: 767.98px) { .interactive-banner-style-04 figure { aspect-ratio: 4 / 3; } }

/* ── Social-icoontjes (style-09) in de huisstijl — site-breed ───────────────
   De functietitels gebruiken de accentkleur (--base-color = leesbare secondary).
   Voor de social-iconen pakken we bewust de ANDERE huisstijlkleur — de primary —
   zodat titel en iconen twee tinten uit hetzelfde palet zijn i.p.v. dezelfde.
   Icoon: --brand-ink (leesbare primary op licht, net zoals titels de leesbare
   secondary gebruiken). Site-breed (team-overzicht, team-detail, ...).
   Hover: deze markup mist het Crafto-<span> (de opvul-cirkel), waardoor Crafto's
   :hover alleen het icoon wit maakt -> onzichtbaar op wit. Daarom vullen we hier
   de knop-cirkel zelf met --brand-primary, zodat het witte icoon zichtbaar blijft. */
.elements-social.social-icon-style-09 ul li a { color: var(--brand-ink); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.elements-social.social-icon-style-09 ul li a:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff !important; }

/* ── Voorpagina team-blok: kleuraccenten + verzorgde, subtiele hover op de kaart ──
   De naam kleurt bij hover naar de huisstijl, "Bekijk profiel" staat standaard in de
   huisstijlkleur met een schuivend pijltje, en de kaart tilt zacht op (vloeiend, niet
   springerig). Kleuren via de merk-variabelen zodat elke klant z'n eigen tint krijgt. */
.wf-team-home-card { transition: box-shadow .35s ease, transform .35s ease; }
.wf-team-home-card:hover { transform: translateY(-5px); }
.wf-team-home-card .wf-th-name { color: var(--brand-ink); transition: color .25s ease; }
.wf-team-home-card:hover .wf-th-name { color: var(--dark-gray); }
/*  "Bekijk profiel" staat onderaan de kaart, op één lijn met die van de kaart ernaast. De kolom is
    verticaal gecentreerd, dus bij een langere functie of profieltekst zakte de link mee en stonden
    de kaarten onderling scheef. Een automatische bovenmarge slokt de vrije ruimte op en duwt de link
    naar de onderrand — bij elke kaart even hoog. (Jenny 28-08-2026.) */
.wf-team-home-card .wf-th-profile { margin-top: auto; padding-top: 10px; }
.wf-team-home-card .wf-th-profile { color: var(--brand-ink); transition: color .25s ease; }
.wf-team-home-card .wf-th-profile i { transition: transform .25s ease; }
.wf-team-home-card:hover .wf-th-profile { color: var(--brand-primary); }
.wf-team-home-card:hover .wf-th-profile i { transform: translateX(4px); }
/* Op een donker/gekleurd blok forceert de kaart-leesbaarheidsregel de tekst donker (!important).
   Onze accentkleuren zijn óók goed leesbaar op de WITTE kaart, dus zetten we naam-hover en de
   "Bekijk profiel"-link daar met dezelfde specificiteit + !important alsnog in de huisstijlkleur. */
:is(.wf-block-dark, .wf-on-dark) .wf-team-home-card .wf-th-profile { color: var(--brand-ink) !important; }
:is(.wf-block-dark, .wf-on-dark) .wf-team-home-card .wf-th-name { color: var(--brand-ink) !important; }
:is(.wf-block-dark, .wf-on-dark) .wf-team-home-card:hover .wf-th-name { color: var(--dark-gray) !important; }
:is(.wf-block-dark, .wf-on-dark) .wf-team-home-card:hover .wf-th-profile { color: var(--brand-primary) !important; }
/* -- Teamoverzicht (/team): dezelfde kaart als op de voorpagina, maar in een raster --
   De kaart heeft een vaste hoogte (h-300px). Op de voorpagina staat er zelden een lange
   profieltekst in, op het overzicht wel -- die liep dan onder de kaartrand door. Daarom knippen
   we hem hier na drie regels af. Alleen binnen .wf-team-overview, zodat de voorpagina-carrousel
   ongemoeid blijft. (Jenny 30-08-2026.) */
.wf-team-overview .wf-th-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Acht sociale icoontjes passen niet op een regel in een halve kaart; ze mogen doorlopen. */
.wf-team-overview .wf-th-socials ul { row-gap: 4px; }
/* Op de voorpagina duwt margin-top:auto de link naar de onderrand, zodat twee kaarten naast elkaar
   hun link op een lijn hebben. Op het overzicht pakt dat verkeerd uit: heeft een teamlid geen
   profieltekst, dan blijft er een gat van een halve kaart tussen de functie en de link. Hier houden
   we de tekst daarom als een blok bij elkaar, verticaal gecentreerd -- alle kaarten zijn toch even
   hoog, dus het oogt vanzelf rustig. (Jenny 30-08-2026.) */
.wf-team-overview .wf-th-profile { margin-top: 0; padding-top: 4px; }
/* Telefoon: een halve kaart is ~155px breed en dat is te smal voor een functietitel als
   "Trainer & Coach Stress- en Energiemanagement" -- die brak middenin een woord af
   (ENERGIEMANAGEME / NT). Onder 576px stapelen we de kaart daarom: portret boven over de
   volle breedte, tekst eronder. De vaste kaarthoogte vervalt daar; de foto houdt een eigen
   vaste hoogte zodat alle portretten ook op mobiel gelijk bijgesneden blijven. */
@media (max-width: 575px) {
  /* h-100 van Bootstrap is height:100% !important -- zonder !important hieronder verliest de
     fotohoogte die strijd en klapt het portret dicht. */
  .wf-team-overview .wf-team-home-card,
  .wf-team-overview .wf-team-home-card > .row { height: auto !important; }
  .wf-team-overview .wf-th-photo,
  .wf-team-overview .wf-th-body { flex: 0 0 100%; max-width: 100%; }
  .wf-team-overview .wf-th-photo { height: 170px !important; }
  /*  Sinds 13-09-2026 twee kaarten naast elkaar (Team.cshtml, row-cols-2): één per rij maakte de pagina
      op een telefoon ruim 5.600px lang (Tom). Een kaart is hier zo'n 160px breed. Daarom een lagere
      foto, compactere tekst, geen hoofdletters en letterafstand in de functie (dat was precies wat een
      lange functietitel middenin een woord liet afbreken), en de introtekst valt weg: drie regels in
      een kolom van 130px zeggen weinig, het profiel zelf staat één tik verder. */
  .wf-team-overview .wf-th-body { padding: 12px !important; }
  .wf-team-overview .wf-th-name { font-size: 15px !important; line-height: 1.3; overflow-wrap: anywhere; }
  .wf-team-overview .wf-th-role {
    font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important;
    line-height: 1.35; overflow-wrap: break-word; margin-bottom: 6px !important;
  }
  .wf-team-overview .wf-th-intro { display: none; }
  .wf-team-overview .wf-th-profile { font-size: 12px !important; letter-spacing: 0 !important; }
}

/* =========================================================================
   Projectdetail — Crafto "course-details" layout (biz-proj-*)
   Donkere fotobanner (hergebruikt .biz-svc-hero) → meta-balk → twee kolommen
   (brede inhoud + sticky projectgegevens-kaart) → foto's → "Meer projecten".
   Alle accenten volgen de huisstijl van de klant via --brand-*.
   ========================================================================= */

/* Meta-balk onder de banner: horizontale rij met scheidingslijntjes. */
.biz-proj-metabar { border-bottom: 1px solid color-mix(in srgb, var(--brand-secondary) 16%, #e9e4dc); padding: 18px 0; }
.biz-proj-metabar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 4px; text-align: center; }
.biz-proj-metaitem { display: inline-flex; align-items: center; gap: 9px; padding: 4px 6px; font-size: 14.5px; color: #4a5464; }
.biz-proj-metaitem i { color: var(--brand-secondary-ink); font-size: 15px; }
.biz-proj-metalabel { font-weight: 600; color: var(--brand-ink); }
.biz-proj-metasep { width: 1px; height: 18px; background: color-mix(in srgb, var(--brand-secondary) 22%, #ddd6cc); margin: 0 10px; }
@media (max-width: 767px) { .biz-proj-metasep { display: none; } .biz-proj-metaitem { flex: 0 0 100%; justify-content: center; } }

/* Twee-koloms body. */
.biz-proj-body { padding: 60px 0 40px; }
.biz-proj-main { padding-right: 30px; }
@media (max-width: 991px) { .biz-proj-main { padding-right: 15px; margin-bottom: 46px; } }

/* Intro-lead en tekstblokken. */
.biz-proj-lead { font-size: 18px; line-height: 1.7; color: #3a4353; font-weight: 500; margin: 0 0 34px; }
.biz-proj-section { margin-bottom: 40px; }
.biz-proj-section:last-child { margin-bottom: 0; }
/* Sectiekopjes links uitgelijnd (i.p.v. het gecentreerde galerij-kopje). */
.biz-proj-secttitle { text-align: left; margin-bottom: 20px; }
.biz-proj-secttitle h3 { font-weight: 600; color: var(--brand-ink); font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin: 0 0 8px; }
/* Platte-tekstblokken: handmatige regelovergangen behouden. */
.biz-proj-pre { white-space: pre-line; }

/* Werkzaamheden / Materialen / Resultaat: tweede zijkaart ("Over dit project") als rijtjes. */
.biz-proj-about-list { list-style: none; padding: 0; margin: 0; }
.biz-proj-about-list li {
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-secondary) 12%, #eee7dd);
}
.biz-proj-about-list li:first-child { padding-top: 4px; }
.biz-proj-about-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.biz-proj-about-key {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--brand-ink); font-size: 14.5px; margin-bottom: 8px;
}
.biz-proj-about-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand-secondary) 14%, #fff);
  color: var(--brand-secondary-ink); font-size: 15px;
}
.biz-proj-about-body { font-size: 14px; color: #55606f; line-height: 1.6; }

/* Sticky projectgegevens-kaart. */
.biz-proj-aside { padding-left: 10px; }
/* Beide kaarten scrollen slim mee: kort = bovenaan geplakt, lang = schuift mee omlaag
   en lijnt onderaan uit. NATIVE sticky = botersmooth. Een mini-scriptje (alleen bij laden/
   resize, niet tijdens scrollen) zet de sticky-`top` op min(100, schermhoogte − kaarthoogte
   − 24): korte kaart plakt op 100px (bovenaan); lange kaart krijgt een negatieve top zodat de
   ONDERkant op schermrand −24 plakt → je leest hem al scrollend helemaal en hij lijnt onderaan
   uit met de linkerkolom. */
.biz-proj-sticky { position: sticky; top: 100px; }
@media (max-width: 991px) { .biz-proj-sticky { position: static; top: auto !important; } }

/*  De VIERDE projectkaart op de voorpagina. Het raster is drie kolommen op xl maar twee op lg en md;
    met drie kaarten bleef daar de derde als enige op een halve rij achter. De vierde vult die rij.
    Alleen tonen waar het raster twee kolommen breed is:
      - vanaf xl (1200px) staan er drie naast elkaar: rij al vol, vierde zou een halve rij beginnen;
      - onder md (768px) staat alles onder elkaar: een extra kaart is daar alleen extra scrollwerk.
    Zijn er maar drie projecten, dan is er geen vierde en verandert er niets. */
.biz-proj-home-4e { display: none; }
@media (min-width: 768px) and (max-width: 1199.98px) { .biz-proj-home-4e { display: block; } }

/*  Meescrollend partnerlogo op de detailpagina. Zelfde maat als de projectkolom hierboven (100px
    onder de vaste menubalk), maar zonder het meetscriptje: dat rekent daar met de hoogte van een
    kaart die lang kan worden, en een logoplaat is altijd kort.
    Onder 992px staan de kolommen onder elkaar en heeft plakken geen zin — dan gewoon meelopen. */
.biz-partner-sticky { position: sticky; top: 100px; }
@media (max-width: 991px) { .biz-partner-sticky { position: static; top: auto; } }
.biz-proj-card + .biz-proj-card { margin-top: 20px; }
.biz-proj-card {
  background: color-mix(in srgb, var(--brand-secondary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 15%, #eee6db);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 18px 44px rgba(20, 25, 40, .07);
}
/*  LET OP DE NAAM. Dit heette .biz-proj-card-head en dat was precies het probleem: de sitebrede
    regel `.box-layout [class*="-card"]` geeft 22px ronding aan ELKE klassenaam waarin "-card"
    voorkomt, en die staat op !important. Deze kop heeft alleen een rand aan de onderkant, en zo'n
    rand buigt met de ronding mee omhoog — je zag een halve boog in plaats van een streep.
    Overschrijven lukte niet (het is !important) en er nóg een !important tegenaan gooien maakt het
    voor de volgende alleen maar erger, dus is de klasse hernoemd: zonder "-card" in de naam pakt
    die brede regel hem niet meer. Noem dit blok dus NIET terug naar iets met "-card" erin.
    De rijen eronder hadden er nooit last van; die heten .biz-proj-specs li. */
.biz-proj-blokkop {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-ink);
  padding-bottom: 16px; margin-bottom: 6px;
  /*  Iets steviger dan de scheidingslijntjes tussen de rijen eronder (12%), zodat de kopstreep als
      kop leest. NIET dikker gemaakt: een halve pixel bestaat niet op een gewoon scherm — 1.5px
      rondt daar af naar 1px en op een scherp scherm naar 2px, dus dat zou er per apparaat anders
      uitzien. Kleur doet hier hetzelfde werk en is wél overal gelijk. */
  border-bottom: 1px solid color-mix(in srgb, var(--brand-secondary) 30%, #ddd5c9);
}
.biz-proj-blokkop i { color: var(--brand-secondary-ink); font-size: 17px; }
.biz-proj-specs { list-style: none; padding: 0; margin: 0 0 22px; }
.biz-proj-specs li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-secondary) 12%, #eee7dd);
}
.biz-proj-specs li:last-child { border-bottom: 0; }
.biz-proj-spec-key { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--brand-ink); font-size: 14px; flex: none; }
.biz-proj-spec-key i { color: var(--brand-secondary-ink); font-size: 15px; width: 18px; text-align: center; }
.biz-proj-spec-val { text-align: right; color: #55606f; font-size: 14px; line-height: 1.4; }
/* "Neem contact op": secundaire knop in de huisstijl (omlijnd). */
.biz-proj-contactbtn {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 40%, #fff);
  color: var(--brand-secondary-ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.biz-proj-contactbtn:hover { background: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--brand-on-secondary); }

/* Donkere template: het Projectgegevens/About-paneel is voor een LICHTE kolom ontworpen (bijna-wit
   met donkere tekst) en de contactknop is wit. Op de donkere site volgen ze het gedeelde donkere
   kaart-oppervlak met lichte tekst; de contactknop wordt omlijnd (lichte tekst, gevuld op hover),
   zodat er geen witte vlakken op de donkere achtergrond staan. */
[data-bs-theme="dark"] .biz-proj-card {
  background: var(--wf-dark-card, color-mix(in srgb, var(--brand-secondary) 14%, var(--site-dark-bg, #16201b)));
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
[data-bs-theme="dark"] .biz-proj-blokkop { color: #f1efec; border-bottom-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .biz-proj-blokkop i,
[data-bs-theme="dark"] .biz-proj-spec-key i,
[data-bs-theme="dark"] .biz-proj-about-ic { color: var(--brand-secondary-ondark, #d8c6ad); }
[data-bs-theme="dark"] .biz-proj-specs li,
[data-bs-theme="dark"] .biz-proj-about-list li { border-bottom-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .biz-proj-spec-key,
[data-bs-theme="dark"] .biz-proj-about-key { color: #eceaf0; }
[data-bs-theme="dark"] .biz-proj-spec-val,
[data-bs-theme="dark"] .biz-proj-about-body { color: #b9bec7; }
[data-bs-theme="dark"] .biz-proj-contactbtn { background: transparent; border-color: rgba(255, 255, 255, .28); color: #f1efec; }
[data-bs-theme="dark"] .biz-proj-contactbtn:hover { background: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--brand-on-secondary); }

/* "Meer projecten". */
.biz-proj-related { padding: 20px 0 70px; }
.biz-proj-related .biz-proj-secttitle { text-align: center; margin-bottom: 34px; }

/* ===================================================================
   Vestigingen — voorpagina kaartenstrip
   Vervangt de Crafto sliding-box-JS door een eigen, CSS-gestuurde strip:
   - horizontaal scrollen bij veel vestigingen (i.p.v. steeds smallere tegels)
   - actieve/hover-card verbreedt vloeiend en toont rechts het adres-paneel
   - card-klasse eindigt op "-tile" zodat de klant-radius (uit _SiteLayout) pakt
   =================================================================== */
.wf-vestiging-strip {
    display: flex;
    gap: 20px;
    overflow-x: auto;                  /* vangnet: pas scrollen als er echt te veel cards zijn */
    padding: 24px 2px 28px;            /* ruimte voor box-shadow */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* scrollbalk verbergen (Firefox) */
    -ms-overflow-style: none;          /* (oude Edge/IE) */
}
.wf-vestiging-strip::-webkit-scrollbar { display: none; }   /* (Chrome/Safari) */

/* Accordeon: cards vullen samen de volle blokbreedte. Opent er één, dan schuiven de
   andere mee in i.p.v. dat het totaal breder wordt -> geen scrollbalk bij weinig cards.
   min-width houdt ze leesbaar; pas bij écht veel cards ontstaat horizontaal scrollen. */
.wf-vestiging-tile {
    flex: 1 1 0;
    min-width: 180px;
    max-width: 520px;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;                /* premium standaard; klant-radius wint via _SiteLayout (!important) */
    transition: flex-grow .5s cubic-bezier(.4, 0, .2, 1);
}
/* Open card pakt meer ruimte. De open-status wordt via JS (mouseenter) als .is-open
   gezet i.p.v. met CSS :hover — dat voorkomt hover-flikker terwijl de cards meeschuiven. */
.wf-vestiging-tile.is-open { flex-grow: 2.6; }

/* Beeldlaag, donkere sluier en onderschrift (stad + regio). */
.wf-vestiging-img { position: absolute; inset: 0; z-index: 1; }
.wf-vestiging-veil { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .45); transition: opacity .3s linear; }
.wf-vestiging-cap { position: absolute; inset: 0; z-index: 3; transition: opacity .3s linear; }

/* Wit adres-paneel rechts; verschijnt wanneer de card open is. */
.wf-vestiging-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 50%; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .4s linear, visibility .4s linear;
}

/* Open-toestand: sluier + onderschrift weg, paneel zichtbaar. */
.wf-vestiging-tile.is-open .wf-vestiging-veil,
.wf-vestiging-tile.is-open .wf-vestiging-cap { opacity: 0; }
.wf-vestiging-tile.is-open .wf-vestiging-panel { opacity: 1; visibility: visible; }

/* Galerij voorpagina — ontwerp 1c "Magazine" (Tom): foto-kaart met categorie-chip
   linksboven, titel onderin op het beeld, en een "Bekijk album"-onderschrift dat bij
   hover omhoog schuift terwijl de foto licht inzoomt. Donker verloop onderaan voor
   leesbaarheid. Kaart-afronding volgt de klant-radius (wf-gallery-card); 18px = fallback. */
.wf-gcard { transition: transform .4s ease, box-shadow .4s ease; }
.wf-gcard:hover { transform: translateY(-4px); }
.wf-gcard-img { transition: transform .5s ease; }
.wf-gcard:hover .wf-gcard-img { transform: scale(1.06); }
.wf-gcard-scrim { background-image: linear-gradient(180deg, rgba(30,20,15,.12) 0%, rgba(30,20,15,.12) 45%, rgba(18,12,8,.88) 100%); }
.wf-gcard-cap { transform: translateY(10px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.wf-gcard:hover .wf-gcard-cap { transform: translateY(0); opacity: 1; }

/* Galerij-OVERZICHTskaart (.wf-gallery-card, portfolio-box): transparant → de caption (categorie/titel/
   aantal) zweeft op de donkere pagina en de kaart is niet herkenbaar; de box-shadow is op donker onzichtbaar.
   Op donker een subtiel opgetild vlak + hairline-rand zodat foto + caption als nette kaart samenhangen.
   Alleen dark; licht ongemoeid. */
[data-bs-theme="dark"] .wf-gallery-card {
    background: color-mix(in srgb, #ffffff 5%, var(--site-dark-bg, #121f19)) !important;
    border: 1px solid rgba(255, 255, 255, .08);
}
/* Caption op de donkere galerij-kaart leesbaar: titel licht, categorie-eyebrow een lichte huisstijl-tint. */
[data-bs-theme="dark"] .wf-gallery-card .portfolio-caption a { color: #f1efec !important; }
[data-bs-theme="dark"] .wf-gallery-card .portfolio-caption .text-base-color { color: var(--brand-secondary-ondark, #d8c6ad) !important; }

/* Partner-logo's zijn meestal donker/monochroom (voor een witte achtergrond) en blenden weg op de donkere
   kaart = "vlak". Op donker tonen we ze daarom uniform LICHT (monochroom) — een strakke, consistente
   logo-wall zonder tegeltjes; de volledige kleur komt terug zodra je over de kaart hovert. Licht ongemoeid. */
.wf-partner-logo { min-height: 80px; }
/* Partner-kaart: geen gevulde tint (die oogde niet op de lichte site) — enkel een dunne rand voor definitie,
   in beide modes. Logo's blijven vrijstaand; de kaart houdt z'n normale kleur (wit op licht, donkere surface
   op donker via de generieke overzichtskaart-regel). */
.card.wf-partner-card.box-shadow-quadruple-large { border: 1px solid rgba(0, 0, 0, .10) !important; }
/* Donker: partner-kaart in de huisstijl-secundaire kleur (tan). Tekst donker (tan is licht genoeg), zodat
   de vrijstaande logo's + tekst goed uitkomen. Licht ongemoeid (wit + dunne rand). */
[data-bs-theme="dark"] .card.wf-partner-card.box-shadow-quadruple-large {
    background: #d9d3c7 !important;
    border: 1px solid rgba(0, 0, 0, .14) !important;
}
[data-bs-theme="dark"] .wf-partner-card :is(.text-dark-gray, span:not(.btn), a:not(.btn)) { color: #201812 !important; }
[data-bs-theme="dark"] .wf-partner-card .text-muted { color: #4c3d2e !important; }
[data-bs-theme="dark"] .wf-partner-card .btn-transparent-dark-gray {
    color: #201812 !important;
    border-color: rgba(0, 0, 0, .42) !important;
    background: transparent !important;
}
[data-bs-theme="dark"] .wf-partner-card .btn-transparent-dark-gray:hover {
    background: #201812 !important;
    color: #ffffff !important;
    border-color: #201812 !important;
}

/* Galerij voorpagina — ontwerp 3c "Spotlight" (Tom): Swiper center-carousel die vloeiend
   schuift; de gecentreerde (actieve) kaart is uitgelicht (groter), zijkaarten iets terug en
   doorzichtiger. Pijlen staan in de buitenmarge náást de kaarten. Kaart-afronding volgt de
   klant-radius (wf-gallery-card); inline 20px = Crafto-fallback. */
.wf-gspot-stage { position: relative; max-width: 1280px; margin: 0 auto; padding: 6px 64px; }
.wf-gspot-swiper { overflow: hidden; padding: 22px 0; }
.wf-gspot-card { position: relative; display: block; height: 470px; overflow: hidden; text-decoration: none;
  transform: scale(.88); opacity: .82;
  transition: transform .5s ease, opacity .5s ease; }
.wf-gspot-swiper .swiper-slide-active .wf-gspot-card { transform: scale(1.06); opacity: 1; }
.wf-gspot-img { transition: transform .6s ease; }
.wf-gspot-swiper .swiper-slide-active .wf-gspot-card:hover .wf-gspot-img { transform: scale(1.06); }
.wf-gspot-scrim { background-image: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.85) 100%); }
.wf-gspot-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px;
  border: none; background: #fff; color: var(--base-color); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); z-index: 6; font-size: 22px; }
.wf-gspot-nav:hover { background: #f4ede7; }
.wf-gspot-prev { left: 6px; }
.wf-gspot-next { right: 6px; }
.wf-gspot-dots { position: static; display: flex; gap: 10px; justify-content: center; margin: 22px 0 4px; }
.wf-gspot-dots .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 !important; background: rgba(255,255,255,.45); opacity: 1; border-radius: 999px; transition: width .3s ease, background .3s ease; }
.wf-gspot-dots .swiper-pagination-bullet-active { width: 30px; background: #fff; }
@media (max-width: 991px) {
  .wf-gspot-stage { padding: 6px 46px; }
  .wf-gspot-swiper { padding: 12px 0; }
  .wf-gspot-card { transform: scale(1); opacity: 1; height: 420px; }
  .wf-gspot-nav { width: 42px; height: 42px; }
}

/*  Vast raster voor 1 t/m 3 albums (Jenny, 13-09-2026; zie _Galerij_Home). Zonder Swiper krijgt geen enkele
    kaart .swiper-slide-active, en de basisregel hierboven zet elke kaart op scale(.88) en opacity .82 — het
    raster zou dus volledig uit halfvervaagde, verkleinde kaarten bestaan. Daarom hier de kaart eerst
    gewoon op volle grootte, en daarna alleen bij drie albums weer de spotlight-look.
    De stage houdt zijn zijmarge van 64px, zodat een raster even breed staat als de carrousel ernaast op
    een andere site; op tablet en telefoon staat er geen pijl, dus daar mag die marge weg. */
.wf-gspot-grid .wf-gspot-card { transform: none; opacity: 1; }
.wf-gspot-grid .wf-gspot-card:hover .wf-gspot-img { transform: scale(1.06); }
@media (min-width: 992px) {
  .wf-gspot-grid--3 { padding: 22px 0; align-items: center; }
  .wf-gspot-grid--3 > div:not(.is-spot) .wf-gspot-card { transform: scale(.88); opacity: .82; transition: transform .5s ease, opacity .5s ease; }
  .wf-gspot-grid--3 > div:not(.is-spot) .wf-gspot-card:hover { opacity: 1; }
  .wf-gspot-grid--3 > .is-spot .wf-gspot-card { transform: scale(1.06); }
}
@media (max-width: 991px) {
  .wf-gspot-stage--vast { padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
  /*  Onder elkaar zijn drie kaarten van 420px samen bijna 1300px; iets lager houdt het blok te overzien. */
  .wf-gspot-grid .wf-gspot-card { height: 360px; }
}

/* =====================================================================
   DARK MODE — "business1 donker" (diapositief) aanvullingen.
   De basis-laag (data-bs-theme="dark") staat elders; hier de secties die
   nog een lichte eigen achtergrond hadden. Deel deel bewust: sommige
   kaarten blijven licht-op-donker (zie biz-svc-card hierboven).
   ===================================================================== */

/* Menu (fq-nav) in de donkere kleurlaag.

   LET OP — dit blok negeerde eerst de menu-opmaak die de klant in het dashboard koos: alle drie de
   thema-klassen (donker/licht/warm) kregen exact dezelfde tokens, dus de keuze had in donkere modus
   geen enkel effect. Nu geldt: de donkere BASIS ligt vast (de balk staat nu eenmaal op een donkere
   site en moet leesbaar blijven), maar het KARAKTER van de gekozen stijl komt terug — dezelfde
   verschillen als in de lichte modus:

     donker  = rustigst; paneel volgt de donkere basiskleur, accent = steunkleur
     licht   = luchtigst; paneel licht duidelijk verder op, accent = hoofdkleur
     warm    = paneel draagt de steunkleur, net als in de lichte modus

   Het accent stond hier bovendien voor álle drie op de hoofdkleur, terwijl de stijl "donker" in de
   lichte modus juist de STEUNkleur gebruikt. Ook dat is hieronder rechtgezet. */

/* Gedeelde donkere basis — geldt voor alle drie de stijlen. */
[data-bs-theme="dark"] .fq-nav,
[data-bs-theme="dark"] .fq-nav.fq-theme-licht,
[data-bs-theme="dark"] .fq-nav.fq-theme-donker,
[data-bs-theme="dark"] .fq-nav.fq-theme-warm {
    /* De menubalk volgt de gekozen donkere basiskleur (--site-dark-bg) i.p.v. een vaste neutrale
       kleur, zodat de balk meekleurt met de tint. */
    --fq-bar-bg:       var(--site-dark-bg);
    --fq-brand-fg:     #f1efec;
    --fq-topnav-fg:    #e7e5e2;
    --fq-line:         rgba(255, 255, 255, .10);
    --fq-panel-fg:     rgba(255, 255, 255, .82);
    --fq-panel-fg-hi:  #ffffff;
    --fq-panel-hover:  rgba(255, 255, 255, .10);
    --fq-panel-border: rgba(255, 255, 255, .10);
    --fq-cap-fg:       #ffffff;
    --fq-shadow:       0 22px 50px rgba(0, 0, 0, .55);
}

/* Stijl 1 — Donker & elegant (standaard). Paneel dicht bij de basiskleur, accent = steunkleur. */
[data-bs-theme="dark"] .fq-nav,
[data-bs-theme="dark"] .fq-nav.fq-theme-donker {
    --fq-topnav-hi:    var(--brand-secondary-ondark, #cbd5e1);
    --fq-accent:       var(--brand-secondary-ondark, #cbd5e1);
    --fq-accent-soft:  var(--brand-secondary-ondark, #cbd5e1);
    --fq-panel-bg:     color-mix(in srgb, var(--site-dark-bg) 90%, #ffffff);
    --fq-panel-bg-2:   color-mix(in srgb, var(--site-dark-bg) 85%, #ffffff);
    --fq-panel-bg-3:   color-mix(in srgb, var(--site-dark-bg) 80%, #ffffff);
}

/* Stijl 2 — Licht & luchtig. Op een donkere site kan het paneel niet wit worden zonder de balk
   erboven te breken, dus vertalen we "luchtig" naar duidelijk verder oplichten dan stijl 1, met de
   hoofdkleur als accent — dezelfde rolverdeling als in de lichte modus. */
[data-bs-theme="dark"] .fq-nav.fq-theme-licht {
    --fq-topnav-hi:    var(--brand-primary-ondark, #cbd5e1);
    --fq-accent:       var(--brand-primary-ondark, #cbd5e1);
    --fq-accent-soft:  var(--brand-primary-ondark, #cbd5e1);
    --fq-panel-bg:     color-mix(in srgb, var(--site-dark-bg) 78%, #ffffff);
    --fq-panel-bg-2:   color-mix(in srgb, var(--site-dark-bg) 70%, #ffffff);
    --fq-panel-bg-3:   color-mix(in srgb, var(--site-dark-bg) 62%, #ffffff);
    --fq-panel-fg:     rgba(255, 255, 255, .88);
    --fq-panel-hover:  rgba(255, 255, 255, .14);
}

/* Stijl 3 — Warm. Het paneel draagt hier de STEUNkleur, precies zoals in de lichte modus; op een
   donkere site meng je die in de basiskleur in plaats van hem puur te gebruiken, anders springt het
   paneel qua helderheid los van de rest van de site. */
[data-bs-theme="dark"] .fq-nav.fq-theme-warm {
    --fq-topnav-hi:    var(--brand-secondary-ondark, #e6c9a8);
    --fq-accent:       var(--brand-secondary-ondark, #e6c9a8);
    --fq-accent-soft:  color-mix(in srgb, var(--brand-secondary-ondark, #e6c9a8) 60%, var(--site-dark-bg));
    --fq-panel-bg:     color-mix(in srgb, var(--brand-secondary, #4b5563) 26%, var(--site-dark-bg));
    --fq-panel-bg-2:   color-mix(in srgb, var(--brand-secondary, #4b5563) 34%, var(--site-dark-bg));
    --fq-panel-bg-3:   color-mix(in srgb, var(--brand-secondary, #4b5563) 42%, var(--site-dark-bg));
    --fq-panel-fg:     rgba(255, 255, 255, .90);
    --fq-panel-hover:  rgba(255, 255, 255, .16);
}
/* De balk zelf krijgt bij scroll soms een eigen witte achtergrond via een
   sticky/scrolled-state — dwing die ook naar de tint (--site-dark-bg). */
[data-bs-theme="dark"] .fq-nav.fq-scrolled,
[data-bs-theme="dark"] .fq-nav.is-stuck { background: var(--site-dark-bg); }

/* Voorpagina SEO-paginaoverzicht-balk (had een lichte eigen achtergrond). */
[data-bs-theme="dark"] .wf-seo-overview { background: var(--site-dark-bg); color: #cfd2d8; border-top-color: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .wf-seo-overview a { color: var(--brand-primary-ondark, #cbd5e1); }

/* Introblok (over-ons): kop/eyebrow/tekst gebruiken huisstijl-inkt (voor licht bedoeld) en zijn
   daardoor te donker op donker. Optillen naar leesbare on-dark varianten. */
[data-bs-theme="dark"] .wf-intro-title { color: #f4f1ee; }
[data-bs-theme="dark"] .wf-intro-eyebrow { color: var(--brand-secondary-ondark, #d8c6ad); }
[data-bs-theme="dark"] .wf-intro-body { color: #c7cad2; }
[data-bs-theme="dark"] .wf-intro-phone { color: #eceaf0; }
[data-bs-theme="dark"] .wf-intro-stat-num { color: #f4f1ee; }

/* Utility-balk boven het menu (adres/telefoon/taal) — had een crème achtergrond. */
[data-bs-theme="dark"] .biz-utilitybar { background: color-mix(in srgb, var(--site-dark-bg) 82%, #000); border-bottom-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .biz-ub-contact,
[data-bs-theme="dark"] .biz-ub-contact a { color: #b9bcc4; }
[data-bs-theme="dark"] .biz-ub-contact a:hover { color: #ffffff; }
[data-bs-theme="dark"] .biz-ub-contact svg { stroke: var(--brand-secondary-ondark, #cbb89f); }
[data-bs-theme="dark"] .biz-ub-sep { color: #3a3f46; }
[data-bs-theme="dark"] .biz-ub-divider { background: rgba(255, 255, 255, .12); }

/* Overzichtskaarten met schaduw-lift (.box-shadow-quadruple-large) vallen op donker weg: hun Bootstrap-
   kaart-bg is gelijk aan de body (site-dark-bg) en de schaduw is onzichtbaar. Geef ze een subtiel opgetild
   oppervlak + hairline-rand zodat ze als kaart herkenbaar blijven (vacatures/blog/projecten-overzichten
   e.d.). Alleen dark; licht ongemoeid. */
[data-bs-theme="dark"] .card.box-shadow-quadruple-large {
    background-color: color-mix(in srgb, #ffffff 6%, var(--site-dark-bg, #121f19)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

/* "Terug"-knop (.wf-backbtn, bv. teamlid-detail): btn-dark-gray is bijna-zwart en blendt weg op de donkere
   pagina met een nauwelijks zichtbare hover. Op donker daarom een nette tan-outline met een duidelijke
   hover (vult tan, donkere tekst). Lichte modus houdt de originele btn-dark-gray. */
[data-bs-theme="dark"] .wf-backbtn.btn-dark-gray {
    background: transparent !important;
    border-color: var(--brand-secondary) !important;
    color: var(--brand-secondary-ondark, #d8c6ad) !important;
}
[data-bs-theme="dark"] .wf-backbtn.btn-dark-gray:hover,
[data-bs-theme="dark"] .wf-backbtn.btn-dark-gray:focus-visible {
    background: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: var(--brand-on-secondary, #1a1a1a) !important;
}

/* Elke btn-dark-gray op een donkere pagina (Jenny, 15-09-2026). Crafto keert de knop bij hover om naar een
   transparante vulling met #232323-tekst; op een donkere achtergrond is die tekst onzichtbaar (1,16:1).
   In rust blijft de knop zoals hij is (wit op bijna-zwart). Bij hover vult hij met de steunkleur en
   donkere tekst, dezelfde hover als de Terug-knop hierboven. Onderdelen met een eigen regel verderop
   (publicatie- en agendakaart, contactformulier) staan later in dit bestand en houden die. */
[data-bs-theme="dark"] .btn.btn-dark-gray:hover,
[data-bs-theme="dark"] .btn.btn-dark-gray:active,
[data-bs-theme="dark"] .btn.btn-dark-gray:focus-visible {
    background: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: var(--brand-on-secondary, #1a1a1a) !important;
}

/* Partnerkaarten (Jenny, 15-09-2026): de titel neemt vanaf twee kolommen altijd twee regels ruimte, zodat
   de tekst eronder op elke kaart op dezelfde hoogte begint. Alle partnertitels passen in twee regels
   (langste 38 tekens), dus er wordt niets afgekapt. */
@media (min-width: 768px) {
    .wf-partner-card .wf-partner-title { line-height: 1.35; min-height: 2.7em; }
}


/* Gedeelde outline-knop (over veel modules): inkt-tekst is te donker op donker. */
[data-bs-theme="dark"] .biz-btn-outline { color: var(--brand-secondary-ondark, #cbb89f); border-color: var(--brand-secondary-ondark, #cbb89f); }
[data-bs-theme="dark"] .biz-btn-outline:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }

/* ---------------------------------------------------------------------
   Generieke BINNENPAGINA's (Contact, content-pagina's, detailpagina's).
   Die leunen op Crafto's .page-layout (witte achtergrond) met Crafto-
   standaard donkere tekst — voor licht bedoeld. Onder dark: paneel
   transparant (donkere body toont door) en de Crafto-tekst optillen.
   .text-white (op hero/banner) en knoppen worden bewust NIET geraakt.
   --------------------------------------------------------------------- */
[data-bs-theme="dark"] .page-layout { background: transparent; }
[data-bs-theme="dark"] .page-layout p,
[data-bs-theme="dark"] .page-layout li,
[data-bs-theme="dark"] .page-layout .text-dark-gray,
[data-bs-theme="dark"] .page-layout .text-extra-dark-gray,
[data-bs-theme="dark"] .page-layout .text-medium-gray { color: #c7cad2; }
[data-bs-theme="dark"] .page-layout :is(h1, h2, h3, h4, h5, h6):not(.text-white),
[data-bs-theme="dark"] .page-layout .alt-font:not(.text-white) { color: #f1efec; }
/* :not([class*="biz-svc"]) — de dienst-CTA-knoppen (.biz-svc-cta/-ghost) zijn eigen componenten met
   gegarandeerd-leesbare kleuren (on-secondary op de gevulde knop, secondary op de ghost). Zonder deze
   uitsluiting verft de generieke link-regel hun tekst naar brand-primary-ondark (vale mauve) → de gevulde
   knop werd tan-op-mauve = onleesbaar. */
/* De actieve jaarknop (nieuws) is een gevulde pil in de huisstijlkleur met eigen tekstkleur. Viel hij onder
   deze regel, dan kreeg de tekst exact de kleur van de vulling: onleesbaar (Jenny, Frenque, 13-09-2026).
   Alleen de actieve: de andere jaarknoppen zijn doorzichtig en hebben deze linkkleur juist nodig. */
[data-bs-theme="dark"] .page-layout a:not(.btn):not(.text-white):not([class*="biz-btn"]):not([class*="biz-svc"]):not(.wf-jaar-pill.is-actief) { color: var(--brand-primary-ondark, #cbd5e1); }
/* Lichte Crafto-achtergrond-utilities/gradients (bar-breed) neutraliseren onder dark: zij
   schilderen een lichte vlak- of gradient-afbeelding en moeten de donkere body doorlaten.
   Geldt site-breed (ook homepage-secties), niet alleen binnen .page-layout. */
[data-bs-theme="dark"] .bg-gradient-quartz-white:not(.wf-fx),
[data-bs-theme="dark"] .bg-gradient-white-light-gray:not(.wf-fx),
[data-bs-theme="dark"] .bg-gradient-very-light-gray:not(.wf-fx),
[data-bs-theme="dark"] .bg-very-light-gray:not(.wf-fx),
[data-bs-theme="dark"] .bg-light-gray:not(.wf-fx),
[data-bs-theme="dark"] .bg-solitude-blue:not(.wf-fx),
[data-bs-theme="dark"] .bg-light:not(.wf-fx),
[data-bs-theme="dark"] .bg-white:not(.wf-fx) { background-image: none !important; background-color: transparent !important; }
/* Kleine lichte kaders/boxen binnen een formulier of binnenpagina een subtiele donkere vulling. */
[data-bs-theme="dark"] .wf-site-form .bg-very-light-gray,
[data-bs-theme="dark"] .page-layout .border.bg-very-light-gray { background-color: rgba(255, 255, 255, .05) !important; }

/* Gedeelde eyebrow-pil boven elke modulekop (bg-gradient-very-light-gray-transparent + brand-
   basiskleur-tekst): lichte pil met te-donkere tekst. Onder dark een subtiele donkere pil met
   een op-dark leesbaar accent. */
[data-bs-theme="dark"] .bg-gradient-very-light-gray-transparent {
    background-image: none !important;
    background-color: rgba(255, 255, 255, .07) !important;
    color: var(--brand-primary-ondark, #cbd5e1) !important;
}

/* Logo diapositief in donkere modus: het klantlogo (meestal donker, vrijstaand/transparant)
   wordt wit gemaakt zodat het leesbaar is op de donkere balk én footer. brightness(0) maakt het
   egaal zwart, invert(1) daarna egaal wit; de transparante achtergrond blijft vrijstaand. Alleen
   in de donkere variant; lichte sites houden het originele logo.
   UITZONDERING: heeft de klant zélf een diapositief-logo ingesteld (img.wf-logo-realdark), dan
   tonen we dat onaangeroerd/in kleur — geen automatische wit-making, anders gaat de eigen keuze
   (en kleur) verloren. */
[data-bs-theme="dark"] .fq-nav__brand img:not(.wf-logo-realdark),
[data-bs-theme="dark"] .footer-logo img:not(.wf-logo-realdark) { filter: brightness(0) invert(1); }

/* Taalschakelaar in de utility-balk (knop + witte dropdown) donker maken. */
/* De taalknop volgt op donker .biz-btn-outline (dezelfde knop als de contactknop). */
[data-bs-theme="dark"] .biz-lang .dropdown-menu.biz-lang-menu { background: #16181d; border-color: rgba(255, 255, 255, .12); box-shadow: 0 14px 32px rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .biz-lang-row { color: #d6d9e0; border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .biz-lang-row:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
[data-bs-theme="dark"] .biz-lang-row.active { background: rgba(255, 255, 255, .10); border-color: transparent; color: var(--brand-secondary-ondark, #d8c6ad); }
[data-bs-theme="dark"] .biz-lang-check { stroke: var(--brand-secondary-ondark, #d8c6ad); }

/* Publiek formulier (.wf-site-form) als donkere box i.p.v. de lichte
   very-light-gray-box, met leesbare labels en velden. */
[data-bs-theme="dark"] .wf-site-form { background: #16181d; border: 1px solid rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .wf-site-form :is(.form-label, label, .form-check-label, p, .text-dark-gray) { color: #d6d9e0; }
[data-bs-theme="dark"] .wf-site-form :is(.form-control, .form-select, textarea) { background: #1f2329; border-color: rgba(255, 255, 255, .14); color: #eceef2; }
[data-bs-theme="dark"] .wf-site-form :is(.form-control, .form-select, textarea)::placeholder { color: #8b8f98; }

/*  Contactformulier-kaart (.wf-cf-form, uit de gedeelde wf-content.css) staat vast op wit. De labels,
    velden en het toestemmingsvak kleurden in de donkere modus wél mee: lichtgrijze tekst op een witte
    kaart, met alleen de placeholders nog leesbaar (Jenny 08-09). De kaart wordt nu een donkere kaart —
    dezelfde --wf-dark-card als de agenda- en dienstenkaarten — zodat de lichte tekst erop klopt en het
    formulier bij de rest van de donkere site past. */
[data-bs-theme="dark"] .wf-cf-form {
  background: var(--wf-dark-card);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .wf-cf-form :is(.form-label, label, .form-check-label) { color: #e4e7ee; }
[data-bs-theme="dark"] .wf-cf-form :is(.form-control, .form-select, textarea) { color: #f6f7fa; }
/*  Placeholders mogen zachter dan het ingevulde antwoord, maar wel leesbaar blijven: dit is de tekst
    die de bezoeker leest vóór hij begint te typen. */
/*  !important is hier nodig, niet luiheid: Crafto zet ::-webkit-input-placeholder op
    var(--medium-gray) mét !important, en dat wint anders van elke eigen regel. */
[data-bs-theme="dark"] .wf-cf-form :is(.form-control, .form-select, textarea)::placeholder { color: #b3b8c4 !important; opacity: 1; }
[data-bs-theme="dark"] .wf-cf-form .form-icon i { color: #9aa0ad; }
[data-bs-theme="dark"] .wf-cf-akk { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .wf-cf-send-n { color: #b9bdc7; }
/*  De verzendknop is een donkergrijze Crafto-knop; die valt op een donkere kaart weg. Op donker wordt
    het de steunkleur van de klant, net als bij de agendakaart. */
[data-bs-theme="dark"] .wf-cf-form .btn-dark-gray {
  background: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important;
  color: var(--brand-on-secondary, #ffffff) !important;
}
[data-bs-theme="dark"] .wf-cf-form .btn-dark-gray:hover,
[data-bs-theme="dark"] .wf-cf-form .btn-dark-gray:focus-visible {
  background: color-mix(in srgb, var(--brand-secondary) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--brand-secondary) 85%, #000) !important;
}

/* ============================================================================================
   business1-onepage / business1-onepage-dark (Taak 2 skelet) — sticky ankermenu (_OnePageNav)
   + anker-scrolgedrag. Verder hergebruikt de onepage-variant volledig de bestaande business1-CSS
   hierboven (wf-block-*, wf-fx-*, biz-*, ...); dit is de enige NIEUWE CSS voor de onepage, want
   het ankermenu is een nieuw onderdeel dat in de bestaande stijlen nog niet bestond (de gewone
   .fq-nav is een aparte, complexere JS-gestuurde paginanavigatie — niet geschikt om hier 1-op-1
   te hergebruiken). Logo-opmaak + het donker-diapositief-logo hergebruiken WEL gewoon de
   bestaande .fq-nav__brand-regels (zie hierboven), vandaar dat die klasse ook op de onepage-nav
   staat en hier niet opnieuw gedefinieerd wordt. */
.wf-onepage-nav {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}
.wf-onepage-nav__bar {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 32px;
    min-height: 84px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.wf-onepage-nav__brand img { max-height: 56px; width: auto; display: block; }
.wf-onepage-nav__toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    color: var(--brand-ink, #1f2937);
}
.wf-onepage-nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.wf-onepage-nav__links a {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    color: var(--brand-ink, #1f2937);
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.wf-onepage-nav__links a:hover { background: rgba(0, 0, 0, .06); }
/* Breed (>=992px): de links horizontaal naast het logo, ALTIJD zichtbaar — los van Bootstraps
   .collapse-status. .wf-onepage-nav__collapse draagt zowel onze eigen klasse als Bootstraps
   .collapse (voor het mobiele in-/uitklappen); .collapse zet standaard display:none, dus die
   moeten we hier expliciet overschrijven (!important, want gelijke specificiteit + latere bron
   wint anders niet betrouwbaar t.o.v. een eventuele .show-toggle). Dit is exact wat Bootstraps
   eigen .navbar-expand-lg .navbar-collapse-patroon doet; wij herhalen dat hier voor onze eigen
   klassen omdat we bewust geen .navbar/.navbar-expand-* gebruiken (die trekken Crafto's eigen
   navbar-CSS aan, die niet past bij dit kale ankermenu). */
@media (min-width: 992px) {
    .wf-onepage-nav__collapse.collapse { display: flex !important; flex: 1 1 auto; }
    .wf-onepage-nav__toggle { display: none !important; }
}
/* Smal (<992px): de links zitten in-/uitgeklapt achter een ZICHTBARE hamburger-knop (Bootstrap
   collapse-gedrag blijft hier gewoon staan: verborgen tenzij .show). */
@media (max-width: 991.98px) {
    .wf-onepage-nav__toggle { display: flex; }
    .wf-onepage-nav__collapse { flex-basis: 100%; }
    .wf-onepage-nav__links { flex-direction: column; align-items: stretch; gap: 2px; margin: 12px 0 16px; }
    .wf-onepage-nav__links a { padding: 12px 14px; border-radius: 10px; }
}
/* Ankers houden rekening met de sticky bovenbalk (anders schuift de kop van elke sectie er half
   onder). Alleen binnen de onepage-wrapper, zodat dit de gewone business1-pagina's niet raakt. */
.wf-onepage-page .wf-onepage-anchor,
.wf-onepage-page .wf-onepage-section[id] { scroll-margin-top: 100px; }

[data-bs-theme="dark"] .wf-onepage-nav {
    background: var(--site-dark-bg, #1a1d24);
    border-bottom-color: rgba(255, 255, 255, .08);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
[data-bs-theme="dark"] .wf-onepage-nav__toggle { border-color: rgba(255, 255, 255, .18); color: #eceef2; }
[data-bs-theme="dark"] .wf-onepage-nav__links a { color: #d6d9e0; }
[data-bs-theme="dark"] .wf-onepage-nav__links a:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }

/* =========================================================================
   DARK MODE — kaart-oppervlakken (afwerking blok-sweep, 2026-07-26)
   -------------------------------------------------------------------------
   Diverse module-blokken bouwen hun kaarten op Crafto's `.bg-white`. Op de
   donkere template maakt de bg-neutralisator (verderop: `.bg-white` ->
   transparant) die kaarten transparant, waardoor tekst/foto als "spook"
   op de donkere basis zweeft (bij de Reviews-coverflow valt dat echt uit
   elkaar). Hieronder geven we die kaarten een net, licht-getint DONKER
   oppervlak — dezelfde conventie als .wf-flexprice-card / .biz-prod-panel.
   Alles staat onder [data-bs-theme="dark"], dus de LICHTE template blijft
   exact zoals hij was. Per kaart hoort een licht-eiland-uitzondering: kiest
   de klant het blok bewust licht, dan blijft de kaart wit.
   !important is nodig om de `.bg-white`-neutralisator (met !important) te verslaan.
   ========================================================================= */
/* Donker kaart-oppervlak = de gekozen basiskleur met een vleugje van de SECUNDAIRE huisstijlkleur
   erdoor: iets lichter dan de basis én uit het kleurschema van de klant — nooit wit. Eén variabele
   zodat álle donkere kaarten exact dezelfde tint delen (en in één plek bij te sturen is). */
[data-bs-theme="dark"] { --wf-dark-card: color-mix(in srgb, var(--brand-secondary-ondark, var(--brand-secondary, #d09a67)) 15%, var(--site-dark-bg, #191d26)); }
/* let op: bij de reviews staat het oppervlak op .wf-review-skin, niet op de slide zelf — de slide
   draagt de 3D-draai van de coverflow en tekent zijn ronde hoeken dan niet. Zie reviews.css. */
[data-bs-theme="dark"] :is(
  .testimonials-style-04 .wf-review-skin,
  .wf-team-home-card,
  .wf-vestiging-panel,
  .wf-pub-card,
  .wf-vacatures-home .bg-white.box-shadow-quadruple-large,
  .wf-kb-home .blog-box,
  .wf-kb-home .wf-kbfaq-link,
  .wf-svc-grid .card
) {
  background: var(--wf-dark-card) !important;
  border-color: rgba(255, 255, 255, .08);
}
/* Light-island-uitzondering: bewust licht blok -> kaart wit laten (tekst wordt
   binnen het eiland al door de bestaande eiland-regels terug donker gezet). */
[data-bs-theme="dark"] :is(.wf-on-light) :is(
  .testimonials-style-04 .wf-review-skin,
  .wf-team-home-card,
  .wf-vestiging-panel,
  .wf-pub-card,
  .bg-white.box-shadow-quadruple-large,
  .blog-box,
  .wf-kbfaq-link,
  .wf-svc-grid .card
) {
  background: #fff !important;
  border-color: rgba(0, 0, 0, .08);
}

/* Publicaties: de download-knop is btn-dark-gray (donker) -> op de donkere kaart te weinig contrast. Was
   bijna-wit (#f2f4f8) = te fel/niet on-brand; nu de huisstijl-secundaire kleur (tan) met een duidelijke
   hover. Licht eiland: donker terug. */
[data-bs-theme="dark"] .wf-pub-card .btn-dark-gray { background: var(--brand-secondary) !important; color: var(--brand-on-secondary, #1a1a1a) !important; border-color: var(--brand-secondary) !important; }
[data-bs-theme="dark"] .wf-pub-card .btn-dark-gray:hover, [data-bs-theme="dark"] .wf-pub-card .btn-dark-gray:focus-visible { background: color-mix(in srgb, var(--brand-secondary) 85%, #000) !important; border-color: color-mix(in srgb, var(--brand-secondary) 85%, #000) !important; color: var(--brand-on-secondary, #1a1a1a) !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-pub-card .btn-dark-gray { background: #232323 !important; color: #fff !important; border-color: #232323 !important; }

/*  SPONSORLOGO'S — VRIJSTAAND (keuze Jenny, 08-08-2026)
    ----------------------------------------------------
    Sponsors stond als enige logo-module in kaartjes: op de voorpagina een witte kaart met schaduw, op
    het overzicht bovendien een grijze plaat (bg-very-light-gray) onder het logo. Partners en Merken
    tonen hun logo's juist vrij op de blok-achtergrond, dus sponsors viel uit de toon en de logo's
    oogden ingelijst in plaats van vrijstaand. Kaart en plaat zijn nu weg; dit blok doet de rest.

    Waarom de maatvoering hier staat en niet inline: dezelfde drie maten worden op drie plekken
    gebruikt (voorpagina-carrousel, overzicht, detailpagina) en moeten gelijk blijven.

    max-width < 100% is bewust. Sponsorlogo's hebben sterk wisselende verhoudingen (een breed
    woordmerk van 250x64 naast een vierkant beeldmerk). Zonder breedtebeperking vult het brede merk
    de hele kolom terwijl het vierkante er half zo groot bij staat; met een plafond op de breedte
    ogen ze ongeveer even zwaar.  */
.wf-sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    margin-bottom: 20px;
}
.wf-sponsor-logo img {
    max-height: 72px;
    max-width: 78%;
    width: auto;
    object-fit: contain;
    transition: transform .35s cubic-bezier(.25, .8, .25, 1);
}
/* De carrousel op de voorpagina had een kaart van 150px hoog; die hoogte houden we aan zodat het
   blok niet verspringt. De detailpagina toont het logo groot naast de tekst. */
.wf-sponsor-logo-lg { height: 150px; margin-bottom: 0; }
.wf-sponsor-logo-lg img { max-height: 110px; }
.wf-sponsor-logo-xl { height: 200px; margin-bottom: 0; }
.wf-sponsor-logo-xl img { max-height: 160px; max-width: 88%; }
/* Zonder kaart is er niets meer dat op hover reageert; het logo zelf doet dat nu. */
a.wf-sponsor-logo:hover img { transform: scale(1.07); }

/*  Op de LICHTE template staat het logo overal vrij, ook op een gekleurd blok (keuze Jenny 08-08).
    Er heeft hier kort een lichte drager op gekleurde blokken gestaan omdat sommige logokleuren in een
    getinte achtergrond wegvallen; Jenny koos bewust voor vrijstaand en neemt dat voor lief.

    Op de DONKERE template blijft de drager wél staan. Dat is geen smaakverschil maar een harde grens:
    een donker woordmerk op een bijna-zwarte basis is niet "wat minder goed leesbaar" maar volledig
    onzichtbaar, en omkleuren mag niet — het is andermans huisstijl. */
[data-bs-theme="dark"] .wf-sponsor-logo {
    background: rgba(255, 255, 255, .92);
    border-radius: var(--wf-radius-card, 6px);
    padding: 16px 22px;
}
/*  Sponsors OVERZICHTSpagina-kaart (.wf-sponsor-ovcard): een border-0 Bootstrap-.card met alleen een
    (op donker onzichtbare) schaduw -> de kaart versmelt met de donkere basis en alleen het logo zweeft.
    Geef de kaart hetzelfde nette donkere oppervlak + subtiele rand als de andere donkere kaarten.
    Licht eiland: kaart wit terug. */
[data-bs-theme="dark"] .wf-sponsor-ovcard { background: var(--wf-dark-card) !important; border: 1px solid rgba(255, 255, 255, .09) !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-sponsor-ovcard { background: #fff !important; border-color: rgba(0, 0, 0, .08) !important; }

/*  HOOFDSPONSOR-banner op de overzichtspagina (.wf-sponsor-hero). De bovenste sponsorlaag krijgt geen
    kolom in het raster maar een kaart over de volle breedte: logo links, naam/tekst/knop rechts. Er
    staan er maximaal drie onder elkaar (Sponsor.TopTierMax), dus de banner mag niet te hoog worden —
    vandaar een logovak van 170px en niet de 200px van .wf-sponsor-logo-xl op de detailpagina.

    De maatvoering staat hier en niet in de view, zodat de banner de klantinstellingen blijft volgen:
    de ronding komt van .card (--wf-radius-card) en het donkere kaartoppervlak van .wf-sponsor-ovcard
    hierboven. Alleen de indeling is nieuw.  */
.wf-sponsor-hero-logo { padding: 45px 30px; }
.wf-sponsor-hero-body { padding: 45px 55px 45px 25px; }
/*  Het logo mag hier groter dan in het raster (72px): de banner is hoger, en een hoofdsponsor die net
    zo klein staat als de bronssponsors mist het hele punt. max-width houdt een breed woordmerk binnen
    zijn helft, zodat het de tekst niet in de verdrukking brengt.

    width:100% is geen opsmuk maar noodzaak: .wf-sponsor-logo is zelf een flexbox en het logo daarbinnen
    heeft een max-width in PROCENTEN. Zonder eigen breedte leidt de link haar breedte af van haar inhoud,
    terwijl die inhoud juist terugrekent naar de link — die kringloop eindigt op 0 en het logo verdwijnt.
    In het raster viel dat niet op omdat de link daar in een KOLOM-flexbox staat en dus meestrekt.  */
.wf-sponsor-hero .wf-sponsor-logo { width: 100%; height: 170px; margin-bottom: 0; }
.wf-sponsor-hero .wf-sponsor-logo img { max-height: 130px; max-width: 82%; }

/*  Onder md klapt de Bootstrap-rij naar één kolom: logo bóven de tekst. De tekst gaat dan mee naar het
    midden, want een linkslijnende tekstkolom onder een gecentreerd logo staat scheef.  */
@media (max-width: 767px) {
    .wf-sponsor-hero-logo { padding: 35px 25px 0; }
    .wf-sponsor-hero-body { padding: 25px 25px 35px; text-align: center; }
    .wf-sponsor-hero .wf-sponsor-logo { height: 120px; }
    .wf-sponsor-hero .wf-sponsor-logo img { max-height: 100px; max-width: 78%; }
}

/* Logo-plaat op de DETAILpagina's van Partners, Merken en Sponsors (.wf-logo-plate). Die plaat was
   `bg-white`, en de neutralisator hierboven (regel ~4004) maakt elke .bg-white op de donkere template
   doorzichtig — de plaat werd dus donker en een monochroom partnerlogo, gemaakt voor een witte
   ondergrond, viel volledig weg. De overzichtskaarten waren al geregeld (.wf-partner-card krijgt een
   licht tan oppervlak); alleen de detailpagina's waren overgeslagen.

   WIT en niet diezelfde tan: een logo-plaat draagt hier één groot logo, en logo's zijn voor wit
   ontworpen. Een gekleurd logo (Slack, Dropbox) verkleurt zichtbaar op een warme ondergrond.
   Specificiteit: .wf-logo-plate.bg-white is (0,3,0), gelijk aan de neutralisator, en deze regel staat
   later in het bestand — dus hij wint. Losse .wf-logo-plate zou verliezen. */
[data-bs-theme="dark"] .wf-logo-plate.bg-white {
    background-color: rgba(255, 255, 255, .94) !important;
    border-color: rgba(0, 0, 0, .10) !important;
}

/*  Lopende logo-balk voorpagina (clients-style-08 = Partners & Merken): de logo's staan ALTIJD in hun
    eigen kleur, ook bij hover, en hover maakt ze alleen iets groter.

    Hier stond op de donkere template een hover die het logo tot een wit silhouet plette
    (filter: brightness(0) invert(1)). Als accent werkt dat alleen bij een logo dat uit één vorm
    bestaat; bij een logo met een echt beeldmerk erin — het PSV-clublogo, een woordmerk met een
    gekleurd icoon ervoor — gaat juist datgene verloren waar je het logo aan herkent, en werd het een
    witte vlek (Tom 11-09-2026). Een logo is bovendien van de partner, niet van ons: het hoort te
    tonen zoals de partner het heeft aangeleverd.

    Vergroten in plaats van verkleuren dus, met dezelfde maat als de sponsorlogo's hierboven
    (a.wf-sponsor-logo:hover img, scale 1.07), zodat de twee logo-blokken hetzelfde aanvoelen. De regel
    staat nu buiten [data-bs-theme="dark"]: eigen kleur + groter werkt op beide ondergronden.
    Crafto's eigen .clients-style-08 zet opacity .5 op .client-box; die klasse gebruikt de lopende band
    niet, dus daar hoeft niets voor terug. Sponsors gebruikt clients-style-01 en blijft ongemoeid.
    Zie [[partnerlogos-eigen-kleur]]. */
.clients-style-08 .marquee-slide img {
    filter: none;
    transition: transform .3s ease;
}
.clients-style-08 .marquee-slide a:hover img { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
    .clients-style-08 .marquee-slide img { transition: none; }
    .clients-style-08 .marquee-slide a:hover img { transform: none; }
}
/*  De band toont zes logo's naast elkaar. Een breed woordmerk raakt daar de rand van zijn vak, en werd
    door de vaste hoogte platgedrukt — de standaard is object-fit: fill. Met contain past het logo netjes
    in zijn vak in plaats van uitgerekt te worden; de padding houdt twee brede logo's van elkaar af. */
.clients-style-08 .marquee-slide .swiper-slide { padding-left: 18px; padding-right: 18px; }
.clients-style-08 .marquee-slide img { object-fit: contain; max-width: 100%; }

/*  Paginabalk (Crafto's .pagination-style-01, gebruikt door de winkel en door de paginering van de
    module-overzichten). Crafto laat de rij NIET afbreken, dus op een telefoon liep een balk met acht
    of negen nummers ruim buiten het scherm en ging de hele pagina horizontaal scrollen — de ene ding
    dat een pagina nooit mag doen. Afbreken naar een tweede regel houdt alle nummers bereikbaar en is
    ook wat beauty1's eigen pager (.bty-pager) al doet, dus de twee ontwerpen gedragen zich hetzelfde.
    Op een breed scherm past de rij en verandert deze regel niets. */
.pagination-style-01 { flex-wrap: wrap; justify-content: center; row-gap: 6px; }


/* Kleine losse witte elementen die anders transparant + onleesbaar worden:
   blog-categoriebadge, diensten/shop-pijltje (cirkel), maand-/jaarfilter-pillen. */
[data-bs-theme="dark"] .categories-btn.bg-white { background: rgba(255, 255, 255, .16) !important; }
[data-bs-theme="dark"] .content-arrow.bg-white { background: rgba(255, 255, 255, .12) !important; }
[data-bs-theme="dark"] .wf-month-pill:not(.active) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #dfe2ea; }
[data-bs-theme="dark"] .biz-year-chip:not(.active) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #dfe2ea; }

/* Referenties: het onderschrift-balkje (figcaption.bg-white) over de foto -> donkere
   scrim met lichte tekst i.p.v. een verdwenen witte balk. */
[data-bs-theme="dark"] figcaption.bg-white { background: rgba(12, 14, 18, .72) !important; }

/* Agenda: de flip-VOORKANT is een witte kaart (eigen #fff, niet .bg-white) -> donker
   maken voor consistentie; de achterkant is al merk-gekleurd en blijft ongemoeid. */
[data-bs-theme="dark"] .wf-agenda-front { background: var(--wf-dark-card) !important; }
[data-bs-theme="dark"] .wf-agenda-front .wf-agenda-weekday { color: #aeb4c0; }
[data-bs-theme="dark"] .wf-agenda-front .wf-agenda-meta { color: #d7dae3; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-agenda-front { background: #fff !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-agenda-front .wf-agenda-weekday { color: #6f7173; }
[data-bs-theme="dark"] :is(.wf-on-light) .wf-agenda-front .wf-agenda-meta { color: #2a3547; }

/* Agenda OVERZICHTSpagina-kaart (.wf-agenda-card > .bg-white.box-shadow-quadruple-large): de
   bg-neutralisator maakt de witte kaart transparant -> hij valt weg tegen de donkere basis (geen
   afscheiding). Net donker oppervlak + dunne rand zodat elke rij-kaart begrensd is; de foto-kolom
   houdt z'n eigen beeld. Datum-accent leesbaar (ondark-variant) en de knop in de huisstijl i.p.v.
   donker-op-donker. Alles onder [data-bs-theme="dark"] -> licht ongemoeid. */
[data-bs-theme="dark"] .wf-agenda-card .bg-white.box-shadow-quadruple-large { background: var(--wf-dark-card) !important; border: 1px solid rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .wf-agenda-card .text-base-color { color: var(--brand-secondary-ondark, #d09a67) !important; }
[data-bs-theme="dark"] .wf-agenda-card .btn-dark-gray { background: var(--brand-secondary) !important; color: var(--brand-on-secondary, #1a1a1a) !important; border-color: var(--brand-secondary) !important; }
[data-bs-theme="dark"] .wf-agenda-card .btn-dark-gray:hover, [data-bs-theme="dark"] .wf-agenda-card .btn-dark-gray:focus-visible { background: color-mix(in srgb, var(--brand-secondary) 85%, #000) !important; border-color: color-mix(in srgb, var(--brand-secondary) 85%, #000) !important; }

/* Kennisbank-artikel: de auteur-box (bg-very-light-gray) wordt op donker NIET geneutraliseerd (dat
   raakt alleen .bg-white) en blijft een lelijk licht vlak. Net donker oppervlak + subtiele rand;
   functietitel-accent leesbaar (ondark-variant). Alleen onder [data-bs-theme="dark"] -> licht ongemoeid. */
[data-bs-theme="dark"] .wf-kb-authorbox { background: var(--wf-dark-card) !important; border: 1px solid rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .wf-kb-authorbox .text-base-color { color: var(--brand-secondary-ondark, #d09a67) !important; }

/* Referenties-voorpaginakaart (alleen DONKER): de klant vindt de HOVER-look (het warme
   accent-vlak) mooi als RUSTSTAND. Dus in donker: rust = accent-vlak (base-color) met witte
   tekst; hover = een dieper accent i.p.v. hetzelfde. Overschrijft bewust de generieke
   figcaption-scrim voor déze kaart. Licht ongemoeid (alles onder [data-bs-theme="dark"]). */
[data-bs-theme="dark"] .biz-ref-banner-card figcaption.bg-white { background: var(--base-color) !important; }
[data-bs-theme="dark"] .biz-ref-banner-card figcaption :is(.biz-ref-banner-title, .biz-ref-banner-intro, .btn-link, .btn-link .btn-text, .btn-link .btn-icon) { color: #fff !important; }
[data-bs-theme="dark"] .biz-ref-banner-card figcaption .border-bottom { border-color: rgba(255, 255, 255, .22) !important; }
/* Hover-kleur = dieper accent (het box-overlay-vlak dat bij hover omhoogschuift). */
[data-bs-theme="dark"] .biz-ref-banner-card .box-overlay.bg-base-color { background: color-mix(in srgb, var(--base-color) 62%, #000) !important; }

/* Referenties OVERZICHTSpagina-kaart (.biz-ref-card, óók `.bg-white`): op donker viel de kaart
   weg tegen de basis (geen afscheiding). Geef 'm een subtiel donker oppervlak + dunne rand zodat
   elke kaart duidelijk begrensd is. Tekst zit al in een gepadde wrapper. Licht-eiland -> wit terug.
   (Overige overzicht-/detailpagina's gebruiken hetzelfde bg-white-patroon; zelfde aanpak indien nodig.) */
[data-bs-theme="dark"] .biz-ref-card { background: var(--wf-dark-card) !important; border: 1px solid rgba(255, 255, 255, .10) !important; }
[data-bs-theme="dark"] :is(.wf-on-light) .biz-ref-card { background: #fff !important; border-color: rgba(0, 0, 0, .08) !important; }

/* Kaart-TEKST op het donkere oppervlak. Deze blokken gebruiken licht-modus-tekstklassen
   (text-dark-gray-links, text-base-color-accent, text-muted) die op de donkere kaart wegvallen
   of onleesbaar donker worden. Titels/namen/links -> licht; accent -> de leesbare ondark-variant;
   lopende/gedempte tekst -> licht-grijs. !important verslaat de licht-modus-tekstklassen.
   Binnen een licht eiland (uitzondering eronder) zetten we alles weer terug naar donker. */
[data-bs-theme="dark"] :is(
  .testimonials-style-04 .swiper-slide, .wf-team-home-card, .wf-vestiging-panel,
  .wf-pub-card, .wf-vacatures-home .bg-white.box-shadow-quadruple-large,
  .wf-kb-home .blog-box, .wf-kb-home .wf-kbfaq-link
) :is(a:not(.btn), .text-dark-gray, .wf-th-name) { color: #f2f4f8 !important; }
[data-bs-theme="dark"] :is(
  .testimonials-style-04 .swiper-slide, .wf-team-home-card, .wf-vestiging-panel,
  .wf-pub-card, .wf-vacatures-home .bg-white.box-shadow-quadruple-large,
  .wf-kb-home .blog-box, .wf-kb-home .wf-kbfaq-link
) .text-base-color { color: var(--brand-secondary-ondark, #d09a67) !important; }
[data-bs-theme="dark"] :is(
  .testimonials-style-04 .swiper-slide, .wf-team-home-card, .wf-vestiging-panel,
  .wf-pub-card, .wf-vacatures-home .bg-white.box-shadow-quadruple-large,
  .wf-kb-home .blog-box, .wf-kb-home .wf-kbfaq-link
) :is(p, .text-muted, .testimonials-position) { color: #c3c7d0 !important; }
/* Light-island-uitzondering: kaart wit -> tekst weer donker. */
[data-bs-theme="dark"] :is(.wf-on-light) :is(
  .testimonials-style-04 .swiper-slide, .wf-team-home-card, .wf-vestiging-panel,
  .wf-pub-card, .bg-white.box-shadow-quadruple-large, .blog-box, .wf-kbfaq-link
) :is(a:not(.btn), .text-dark-gray, .wf-th-name) { color: var(--dark-gray) !important; }
[data-bs-theme="dark"] :is(.wf-on-light) :is(
  .testimonials-style-04 .swiper-slide, .wf-team-home-card, .wf-vestiging-panel,
  .wf-pub-card, .bg-white.box-shadow-quadruple-large, .blog-box, .wf-kbfaq-link
) .text-base-color { color: var(--base-color) !important; }
[data-bs-theme="dark"] :is(.wf-on-light) :is(
  .testimonials-style-04 .swiper-slide, .wf-team-home-card, .wf-vestiging-panel,
  .wf-pub-card, .bg-white.box-shadow-quadruple-large, .blog-box, .wf-kbfaq-link
) :is(p, .text-muted, .testimonials-position) { color: #6b7280 !important; }

/* =========================================================================
   DARK MODE — blog-/nieuws-DETAILpagina (biz-art-* + biz-comment)
   -------------------------------------------------------------------------
   De auteur-box (#f7f7f7) en reactie-kaarten (#fff) bleven op donker witte vlakken. Hier krijgen ze
   dezelfde donkere kaart-tint (--wf-dark-card) + dunne rand + lichte tekst; accenten via de ondark-
   variant. Losse detailpagina-fix (buiten de eerder teruggedraaide brede sweep). Licht ongemoeid.
   ========================================================================= */
[data-bs-theme="dark"] .biz-art-authorbox { background: var(--wf-dark-card) !important; border: 1px solid rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .biz-comment { background: var(--wf-dark-card) !important; border-color: rgba(255, 255, 255, .12) !important; }
/* Namen/koppen licht */
[data-bs-theme="dark"] :is(.biz-art-authorbox-name, .biz-comment-name, .biz-art-author-name) { color: #f2f4f8 !important; }
/* Lopende tekst + lead licht */
[data-bs-theme="dark"] :is(.biz-art-authorbox-bio, .biz-comment-text, .biz-art-lead) { color: #d7dae3 !important; }
/* Gedempte labels/meta licht-grijs */
[data-bs-theme="dark"] :is(.biz-art-authorbox-label, .biz-comment-date, .biz-art-author-label, .biz-art-meta, .biz-art-tags-label, .biz-art-share-label) { color: #aeb4c0 !important; }
/* Accent-elementen -> leesbare ondark-variant */
[data-bs-theme="dark"] :is(.biz-art-authorbox-role, .biz-art-meta i, .biz-art-meta .feather) { color: var(--brand-secondary-ondark, #d09a67) !important; }
[data-bs-theme="dark"] .biz-art-lead::first-letter { color: var(--brand-secondary-ondark, #d09a67) !important; }
/* Lichte pil-/knop-/initialen-vlakjes -> subtiel donker + lichte tekst/rand */
[data-bs-theme="dark"] :is(.biz-art-tag, .biz-art-share a, .biz-art-share button, .biz-art-avatar--initials) { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .16) !important; color: #d7dae3 !important; }
[data-bs-theme="dark"] :is(.biz-art-tag:hover, .biz-art-share a:hover, .biz-art-share button:hover) { background: var(--brand-secondary-ondark, #d09a67) !important; color: #1a1a1a !important; }
/* Categorie-label op gerelateerde blog-tegels onderaan */
[data-bs-theme="dark"] .biz-blog-simple-cat { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
/* Sticky "DELEN"-balk (biz-art-share-rail): witte cirkels -> subtiel donker + lichte icoontjes; hover accent. */
[data-bs-theme="dark"] :is(.biz-art-share-rail a, .biz-art-share-rail button) { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #d7dae3; }
[data-bs-theme="dark"] :is(.biz-art-share-rail a:hover, .biz-art-share-rail button:hover) { background: var(--brand-secondary-ondark, #d09a67); border-color: var(--brand-secondary-ondark, #d09a67); color: #1a1a1a; }
[data-bs-theme="dark"] .biz-art-share-rail-label { color: #aeb4c0; }

/* =========================================================================
   DARK MODE — FAQ-OVERZICHTSpagina (/faq): categorietabs + accordion in de huisstijl
   -------------------------------------------------------------------------
   De tab-style-05-categorietabs waren crème en de Bootstrap-accordion-items (.bg-white) werden
   transparant met een crème kop-knop. Hier: rust-tabs = olijf-kaart (--wf-dark-card) + lichte tekst
   (actieve tab houdt het merk-accent); accordion-items = olijf-kaart met transparante kop-knop
   (niet crème) en lichte tekst. Licht ongemoeid.
   ========================================================================= */
[data-bs-theme="dark"] .tab-style-05 .wf-faq-tabs .nav-item .nav-link:not(.active):not(.show) { background: var(--wf-dark-card); border-color: rgba(255, 255, 255, .12); color: #dfe2ea; }
[data-bs-theme="dark"] .tab-style-05 .wf-faq-tabs .nav-item .nav-link:not(.active):not(.show) span { color: #dfe2ea; }
[data-bs-theme="dark"] .tab-style-05 .wf-faq-tabs .nav-item .nav-link:not(.active):not(.show):hover { background: color-mix(in srgb, #fff 6%, var(--wf-dark-card)); border-color: rgba(255, 255, 255, .22); }
[data-bs-theme="dark"] .accordion-item.bg-white { background: var(--wf-dark-card) !important; border-color: rgba(255, 255, 255, .10) !important; }
[data-bs-theme="dark"] .accordion-item.bg-white .accordion-button { background: transparent !important; color: #f2f4f8 !important; box-shadow: none !important; }
[data-bs-theme="dark"] .accordion-item.bg-white .accordion-body { color: #d7dae3 !important; }


/* ── Levertijd en artikelfoto op de productpagina ─────────────────────────
   Groen is hier een statuskleur ("het komt eraan"), net zoals rood dat is voor verwijderen — geen
   huisstijlkleur maar een betekeniskleur. Gedempt gehouden zodat hij de knop erboven niet
   beconcurreert. */
.wf-p2b-delivery {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding: 13px 15px; border-radius: 7px;
    background: rgba(110, 127, 91, .14); color: #4f5d40;
    font-size: 13px; font-weight: 600;
}
.wf-p2b-delivery i { font-size: 17px; flex: 0 0 auto; }
/* Donkere kaart (business1-dark en de onepage-donkervariant delen deze views): op een donkere
   ondergrond is #4f5d40 onleesbaar, dus daar een lichte tint van dezelfde kleur. */
[data-bs-theme="dark"] .wf-p2b-delivery { background: rgba(110, 127, 91, .22); color: #b9c9a6; }

/* Foto bij een artikel in de artikelentabel. Geen foto = lege cel; de kolom houdt zijn breedte zodat
   de rijen uitgelijnd blijven. */
.wf-p2b-artimg { width: 44px; height: 44px; object-fit: cover; border-radius: 5px; display: block; }

/* Klant-instelbare waas over een detailfoto (schuif onder het fotoveld in het dashboard). Ligt over
   de foto maar onder de tekst, en vangt geen muisklikken af. */
.wf-media-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }


/* ═════════════════════════════════════════════════════════════════════════
   HAMBURGER-MENU — afwerking (2026-08-04)

   Aanvulling op het fq-nav-blok hierboven (regel ~2288). Dat blok blijft
   ongewijzigd; hier alleen de afwerking, zodat business1 kan afwijken zonder
   de gedeelde _shared/fq-nav.css (business2/beauty1) te raken.

   Alles loopt via de bestaande --fq-* tokens, dus de donkere modus erft
   automatisch mee via het [data-bs-theme="dark"] .fq-nav-blok op regel ~3836.
   Onderaan dit blok staan alleen de dark-regels voor wat hier NIEUW is.

   Spec: docs/superpowers/specs/2026-08-04-business1-hamburgermenu-design.md
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. De knop: kaal, geen kader ──────────────────────────────────────────
   Het tikvlak blijft 44x44 (Apple/Android-richtlijn voor een duim), maar de
   streepjes zweven vrij. Bij hover krimpt het middelste streepje — een klein
   signaal dat de knop leeft, zonder animatie-show. */
.fq-nav__toggle {
    width: 44px; height: 44px;
    border: 0; border-radius: 0;
    background: transparent;
}
.fq-nav__toggle span {
    width: 24px;
    transition: width .28s var(--fq-ease), background-color .2s,
                transform .3s var(--fq-ease), opacity .2s;
}
.fq-nav__toggle:hover span { background: var(--fq-accent); }
.fq-nav__toggle:hover span:nth-child(2) { width: 15px; }
.fq-nav.is-open .fq-nav__toggle span { background: var(--fq-accent); }
/* Toetsenbord-bediening moet zichtbaar zijn; zonder kader is er anders niets te zien. */
.fq-nav__toggle:focus-visible { outline: 2px solid var(--fq-accent); outline-offset: 4px; border-radius: 6px; }
/* Bij fullscreen/zijlade staat de knop fixed bovenóp het donkere paneel — daar moet
   hij de paneel-tekstkleur volgen, anders valt hij weg (donkere streepjes op donker). */
.fq-nav.is-burger.fq-mobile-fullscreen.is-open .fq-nav__toggle span,
.fq-nav.is-burger.fq-mobile-drawer.is-open .fq-nav__toggle span { background: var(--fq-panel-fg-hi); }
/* Daar zweeft de knop bovenóp een scrollend paneel. Zonder eigen vlak schuiven de menu-items
   er zichtbaar onderdoor. De box-shadow met alleen spreiding maakt van de paneelkleur een
   dekkende halo rondom de knop — goedkoper en zachter dan een groter vierkant vlak. */
.fq-nav.is-burger.fq-mobile-fullscreen.is-open .fq-nav__toggle,
.fq-nav.is-burger.fq-mobile-drawer.is-open .fq-nav__toggle {
    border-radius: 50%;
    background: var(--fq-panel-bg);
    box-shadow: 0 0 0 9px var(--fq-panel-bg);
}

/* ── 2. Waas over de pagina ────────────────────────────────────────────────
   De sluier zelf is per 2026-08-05 vervallen: het gedeelde paneel brengt zijn
   eigen .fq-nav__scrim mee, en die is klikbaar (tik ernaast = menu dicht) in
   plaats van alleen visueel. Twee sluiers over elkaar zou de pagina dubbel
   dimmen. Wat hier blijft is de balk erboven:

   De balk moet bovenop de sluier liggen. Alleen z-index is niet genoeg: de achtergrondkleur
   van de balk staat op .fq-nav zelf, en die schildert onderaan de stapel — dus ónder de
   sluier. Het gevolg was een grauwe balk met scherpe tekst erop. Vandaar dat .fq-nav__bar
   hier zijn eigen achtergrond krijgt; die schildert wél mee op z-index 85. */
.fq-nav.is-burger .fq-nav__bar { position: relative; z-index: 85; background: var(--fq-bar-bg); }

/* -- 3. Het paneel + 4. Menu-voet -----------------------------------------
   VERVALLEN (2026-08-05). Het uitklap-paneel is sindsdien voor alle templates
   hetzelfde en staat in wwwroot/site/_shared/fq-panel.css + fq-panel.js. Dat
   paneel bouwt zijn eigen opmaak op uit dezelfde --fq-*-tokens; het menu dat
   hier gestyled werd (.fq-nav.is-burger .fq-menu) is in hamburger-stand
   verborgen. De voet-regels stonden de gedeelde versie zelfs in de weg: hun
   flex-direction:column maakte van de actieknop een 150px hoge pil.

   Wat hierboven blijft staan (knop + de balk boven de sluier) hoort bij de
   menubalk zelf en niet bij het paneel.                                    */

/* ── 5. Donkere modus ──────────────────────────────────────────────────────
   Balk en knop lopen mee via de --fq-*-tokens; de donkere regels voor sluier
   en voet zijn met hun onderdelen mee vervallen en staan nu in fq-panel.css. */

/* ════════════════════════════════════════════════════════════════════════════════════════════
   HERO "SPOTLIGHT" — de alternatieve opening van de voorpagina (Layoutspecifieke settings →
   Opening van de voorpagina). Schermvullend beeld, menu er doorzichtig overheen (zie het blok
   "menu over de hero" verderop), tekst links, thumbnails van de volgende foto's rechtsonder.

   De klassieke hero (.biz-hero) blijft volledig ongemoeid: dit is een tweede, losse opzet.
   Markup: modules/_Slider_Home_Spotlight.cshtml · gedrag: business1/js/hero-spotlight.js
   ════════════════════════════════════════════════════════════════════════════════════════════ */

.biz-spot {
  /* Schermvullend, tenzij de klant bij Voorpagina → Slider een eigen hoogte koos (--biz-spot-h
     komt dan inline mee). svh i.p.v. vh: op een telefoon telt vh de adresbalk mee, waardoor de
     onderkant met de thumbnails buiten beeld valt zodra die balk zichtbaar is. */
  --biz-spot-navh: 148px;          /* hoogte van de bovenbalk + menubalk die eroverheen ligt */
  --biz-spot-gut: 32px;            /* zelfde zijmarge als .fq-nav__bar, zodat tekst en logo uitlijnen */
  height: var(--biz-spot-h, 100svh);
  min-height: 560px;
  overflow: hidden;
  background: var(--brand-dark, #1b2330);
}
.biz-spot-main, .biz-spot-main .swiper-wrapper { height: 100%; }
.biz-spot-slide { position: relative; overflow: hidden; }

.biz-spot-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1); }

/* Verloop van linksonder: donker waar de tekst staat, bijna open rechtsboven zodat de foto leeft.
   Het derde verloop is voor het menu dat eroverheen ligt — zonder dat verdwijnen witte menu-items
   in een lichte lucht. */
.biz-spot-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10, 15, 24, .88) 0%, rgba(10, 15, 24, .55) 34%, rgba(10, 15, 24, .12) 68%, rgba(10, 15, 24, 0) 100%),
    linear-gradient(to right, rgba(10, 15, 24, .72) 0%, rgba(10, 15, 24, .30) 46%, rgba(10, 15, 24, 0) 78%),
    linear-gradient(to bottom, rgba(10, 15, 24, .55) 0%, rgba(10, 15, 24, 0) 26%);
}

/* ── tekstblok ── */
.biz-spot-inner {
  position: relative; z-index: 2; height: 100%;
  max-width: 1360px; margin: 0 auto; padding: var(--biz-spot-navh) var(--biz-spot-gut) 190px;
  display: flex; flex-direction: column; justify-content: center;
}
.biz-spot-copy { max-width: 680px; color: #fff; }

.biz-spot-eyebrow { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
/*  flex:none is hier geen detail: de subtitel is bij sommige klanten een hele zin, en zonder dit
    kneep die het nummer samen tot twee tekens onder elkaar ("0" boven "1"). */
.biz-spot-num {
  flex: none; white-space: nowrap;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; line-height: 1.5;
  color: var(--brand-secondary-ondark, #fff); padding-bottom: 2px;
  border-bottom: 2px solid var(--brand-secondary-ondark, #fff);
}
/*  Twee regels is genoeg voor een subtitel; wie er een alinea in typt krijgt netjes drie puntjes
    in plaats van een hero die volloopt met tekst. */
.biz-spot-sub {
  font-size: 13.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.5; color: rgba(255, 255, 255, .86);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.biz-spot-title {
  color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(2.1rem, 5.4vw, 4.4rem); margin: 0 0 22px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.biz-spot-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Opkomen bij elke wissel — zelfde staffeling als de klassieke hero, zodat de twee openingen
   hetzelfde ritme hebben. */
.biz-spot-eyebrow, .biz-spot-title, .biz-spot-cta { opacity: 0; transform: translateY(38px); }
.biz-spot .swiper-slide-active .biz-spot-eyebrow { animation: bizHeroIn .8s .20s ease-out forwards; }
.biz-spot .swiper-slide-active .biz-spot-title   { animation: bizHeroIn .9s .38s ease-out forwards; }
.biz-spot .swiper-slide-active .biz-spot-cta     { animation: bizHeroIn .8s .60s ease-out forwards; }

/*  VIDEO-hero in spotlight-vorm: dezelfde opmaak, maar zonder swiper. De regels hierboven hangen aan
    .swiper-slide-active, en die klasse zet Swiper — bij een video is er geen Swiper, dus zonder deze
    regels blijft de tekst op `opacity: 0` staan en zie je alleen beeld. Ook de hoogte komt normaal
    van .biz-spot-main; die wrapper is er bij een video niet, dus de slide pakt hem hier zelf. */
.biz-spot-videoslide { height: 100%; }
.biz-spot-videoslide .biz-spot-eyebrow { animation: bizHeroIn .8s .20s ease-out forwards; }
.biz-spot-videoslide .biz-spot-title   { animation: bizHeroIn .9s .38s ease-out forwards; }
.biz-spot-videoslide .biz-spot-cta     { animation: bizHeroIn .8s .60s ease-out forwards; }

/* Beeldbeweging — dezelfde keuzes als bij de klassieke hero (Ken Burns / inzoomen). */
.biz-spot .biz-spot-kenburns { transform: scale(1); transition: transform 5s ease-out; }
.biz-spot .swiper-slide-active .biz-spot-kenburns { transform: scale(1.12); transition: transform 7s ease-out; }
.biz-spot .biz-spot-zoomin { transform: scale(1.12); transition: transform 5s ease-out; }
.biz-spot .swiper-slide-active .biz-spot-zoomin { transform: scale(1); transition: transform 1.6s ease-out; }

/* ── bedieningslaag: thumbnails rechtsonder ── */
.biz-spot-ui {
  position: absolute; z-index: 3; right: var(--biz-spot-gut); bottom: 54px;
  display: flex; align-items: center; gap: 14px;
}
.biz-spot-thumbs { display: flex; align-items: center; gap: 12px; }

.biz-spot-thumb {
  position: relative; flex: none; width: 76px; height: 76px; padding: 0;
  border: 0; border-radius: 18px; background: transparent; cursor: pointer;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
  opacity: .62;
}
.biz-spot-thumb:hover { opacity: 1; transform: translateY(-4px); }
.biz-spot-thumb.is-active { opacity: 1; }
.biz-spot-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.biz-spot-thumb-img {
  position: absolute; inset: 5px; border-radius: 14px; background-size: cover; background-position: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}
.biz-spot-thumb-n {
  position: absolute; left: 0; right: 0; bottom: -19px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .72);
}
.biz-spot-thumb.is-active .biz-spot-thumb-n { color: #fff; }

/* De ring om de actieve thumbnail loopt vol in het tempo van de autoplay (--biz-spot-timer wordt
   door hero-spotlight.js gezet, uit dezelfde instelling als de slider zelf). */
.biz-spot-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.biz-spot-ring circle { fill: none; stroke-width: 2; }
.biz-spot-ring-bg { stroke: rgba(255, 255, 255, .26); }
.biz-spot-ring-fg { stroke: var(--brand-secondary-ondark, #fff); stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; }
.biz-spot-ring-fg.is-running { animation: bizSpotRing var(--biz-spot-timer, 6000ms) linear forwards; }
@keyframes bizSpotRing { from { stroke-dashoffset: 126; } to { stroke-dashoffset: 0; } }

/* ── scroll-hint linksonder ── */
.biz-spot-scroll {
  position: absolute; z-index: 3; left: var(--biz-spot-gut); bottom: 54px;
  display: flex; align-items: center; gap: 12px; pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.biz-spot-scroll.is-gone { opacity: 0; transform: translateY(12px); }
.biz-spot-scroll-line { position: relative; display: block; width: 52px; height: 1px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.biz-spot-scroll-line::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 18px;
  background: var(--brand-secondary-ondark, #fff); animation: bizSpotScroll 2.2s ease-in-out infinite;
}
.biz-spot-scroll-txt { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
@keyframes bizSpotScroll { 0% { transform: translateX(-20px); } 55%, 100% { transform: translateX(52px); } }

/* Donkere sitevariant: het beeld draagt de sectie al, alleen de basiskleur eronder verschilt. */
[data-bs-theme="dark"] .biz-spot { background: var(--site-dark-bg); }

/* ── tablet ── */
@media (max-width: 991.98px) {
  .biz-spot { --biz-spot-navh: 120px; --biz-spot-gut: 24px; min-height: 520px; }
  .biz-spot-inner { padding-bottom: 170px; }
  .biz-spot-thumb { width: 62px; height: 62px; border-radius: 15px; }
  .biz-spot-thumb-img { inset: 4px; border-radius: 12px; }
}

/* ── telefoon: de thumbnails worden streepjes ──
   Drie vierkantjes van 60px naast elkaar passen niet op 375px, en verkleinen maakt de foto's
   onherkenbaar. Dezelfde knoppen worden daarom een rij dunne balkjes die de voortgang tonen. */
@media (max-width: 767.98px) {
  .biz-spot { --biz-spot-navh: 96px; --biz-spot-gut: 18px; min-height: 500px; }
  .biz-spot-inner { padding-bottom: 120px; justify-content: flex-end; }
  .biz-spot-copy { max-width: none; }
  .biz-spot-eyebrow { gap: 10px; margin-bottom: 12px; }
  .biz-spot-sub { font-size: 11.5px; letter-spacing: .14em; }
  .biz-spot-title { margin-bottom: 18px; }
  .biz-spot-cta .biz-hero-btn { width: 100%; justify-content: center; }

  /*  Niet helemaal onderaan: daar zit op sites met een cookiemelding de kleine "Cookies"-pil, en
      die legde zich precies over het eerste balkje heen. */
  .biz-spot-ui { left: var(--biz-spot-gut); right: var(--biz-spot-gut); bottom: 58px; }
  .biz-spot-thumbs { width: 100%; gap: 8px; }
  .biz-spot-thumb { flex: 1 1 0; width: auto; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .30); opacity: 1; overflow: hidden; }
  .biz-spot-thumb:hover { transform: none; }
  .biz-spot-thumb-img, .biz-spot-thumb-n, .biz-spot-ring { display: none; }
  /* Het balkje loopt vol in dezelfde tijd als de ring op groot scherm. */
  .biz-spot-thumb.is-active::after {
    content: ""; position: absolute; inset: 0; border-radius: 999px; transform-origin: left center;
    background: var(--brand-secondary-ondark, #fff); animation: bizSpotBar var(--biz-spot-timer, 6000ms) linear forwards;
  }
  .biz-spot-scroll { display: none; }
}
@keyframes bizSpotBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── liggende telefoon: te weinig hoogte voor kop, knop en balkjes samen ── */
@media (max-height: 520px) and (orientation: landscape) {
  .biz-spot { min-height: 420px; }
  .biz-spot-inner { padding-top: 84px; padding-bottom: 74px; }
  .biz-spot-title { font-size: clamp(1.5rem, 4.6vw, 2.2rem); margin-bottom: 12px; }
  .biz-spot-ui { bottom: 16px; }
}

/* ── rustige weergave: geen zoom, geen staffeling, geen lopende ring ── */
@media (prefers-reduced-motion: reduce) {
  .biz-spot .biz-spot-kenburns, .biz-spot .swiper-slide-active .biz-spot-kenburns,
  .biz-spot .biz-spot-zoomin, .biz-spot .swiper-slide-active .biz-spot-zoomin { transform: none; transition: none; }
  .biz-spot-eyebrow, .biz-spot-title, .biz-spot-cta { opacity: 1; transform: none; animation: none; }
  .biz-spot-ring-fg.is-running, .biz-spot-scroll-line::after, .biz-spot-thumb.is-active::after { animation: none; }
  .biz-spot-ring-fg.is-running { stroke-dashoffset: 0; }
}


/* ════════════════════════════════════════════════════════════════════════════════════════════
   MENU OVER DE HERO — hoort bij de opening "Spotlight" (.biz-spot).

   De bovenbalk en de menubalk zitten samen in .biz-nav-shell. Zonder "is-over" verandert er
   niets: de schil is dan gewoon een blok in de pagina, precies zoals de header altijd was. Met
   "is-over" ligt hij doorzichtig over de hero, en zodra de bezoeker langs de hero scrollt plakt
   hij bovenaan vast als een normale, ondoorzichtige balk ("is-stuck").

   BEWUST HIER en niet in _shared/fq-nav.css: dat bestand wordt ook door beauty1, business2,
   hotel1 en interieur1 geladen. Deze overlay hoort bij één opening van één template.

   De klant-menu-instellingen blijven werken:
     · stijl (donker/licht/warm) — boven een foto is wit de enige leesbare kleur, dus de balktekst
       wordt daar wit. De uitklap-panelen houden hun eigen themakleuren, en zodra de balk vastplakt
       keert het gekozen thema volledig terug.
     · mobiel-type (overlay/fullscreen/drawer) — onaangeroerd; zodra het paneel opent wordt de balk
       meteen ondoorzichtig, anders is hij onleesbaar tegen het paneel aan.
     · hamburger (uit/altijd/automatisch) — onaangeroerd; de overloop-meting gebruikt de breedte van
       .fq-nav__bar en die blijft volledig, doordat de schil met left:0/right:0 wordt geplaatst.

   OPBOUW — eerst doorzichtig maken, daarna in twee gevallen weer solide (vastgeplakt, of menu
   open). Bewust in die volgorde: de "menu open"-uitzondering heeft :has() nodig, en een browser
   die dat niet kent gooit de hele regel weg. Stond de voorwaarde in de doorzichtig-regel zelf,
   dan zou zo'n browser de balk helemaal niet doorzichtig maken en kwam er donkere tekst op de
   foto te staan. Nu verliest hij hooguit de verfijning en blijft de hoofdvorm intact.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

.biz-nav-shell { position: relative; z-index: 100; }

.biz-nav-shell.is-over {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent;
}

/* ── doorzichtige stand (over de foto) ── */
.biz-nav-shell.is-over:not(.is-stuck) .biz-utilitybar {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, .18);
}
.biz-nav-shell.is-over:not(.is-stuck) .biz-ub-contact,
.biz-nav-shell.is-over:not(.is-stuck) .biz-ub-contact a { color: rgba(255, 255, 255, .82); }
.biz-nav-shell.is-over:not(.is-stuck) .biz-ub-contact a:hover { color: #fff; }
.biz-nav-shell.is-over:not(.is-stuck) .biz-ub-contact svg { stroke: #fff; }
.biz-nav-shell.is-over:not(.is-stuck) .biz-ub-sep { color: rgba(255, 255, 255, .40); }
.biz-nav-shell.is-over:not(.is-stuck) .biz-ub-divider { background: rgba(255, 255, 255, .28); }
.biz-nav-shell.is-over:not(.is-stuck) .biz-cart { color: rgba(255, 255, 255, .90); }

/*  De drie menustijlen zetten hun kleuren als variabelen op .fq-nav. Door dezelfde variabelen te
    overschrijven blijft alles wat eronder hangt (menu-items, hamburger, mega-menu-koppen) vanzelf
    goed, zonder per onderdeel een uitzondering. --fq-panel-* blijft ongemoeid: de uitklappanelen
    houden dus exact de stijl die de klant koos. */
.biz-nav-shell.is-over:not(.is-stuck) .fq-nav {
  --fq-bar-bg:    transparent;
  --fq-brand-fg:  #ffffff;
  --fq-topnav-fg: rgba(255, 255, 255, .92);
  --fq-topnav-hi: #ffffff;
  --fq-line:      rgba(255, 255, 255, .16);
  border-bottom-color: transparent;
}
.biz-nav-shell.is-over:not(.is-stuck) .fq-nav__toggle { background: rgba(255, 255, 255, .10); }
.biz-nav-shell.is-over:not(.is-stuck) .biz-wordmark { color: #fff; }
/*  Licht logo over de foto (alleen gerenderd als de klant een diapositief logo heeft, zie _Header).
    Standaard verborgen; in de doorzichtige stand wisselt het met het gewone logo, en zodra de balk
    vastplakt of het menu opengaat komt het gewone logo terug. */
.fq-nav__brand .biz-logo-over { display: none; }
.biz-nav-shell.is-over:not(.is-stuck):not(:has(.fq-nav.is-open)) .fq-nav__brand .biz-logo-over { display: inline-block; }
.biz-nav-shell.is-over:not(.is-stuck):not(:has(.fq-nav.is-open)) .fq-nav__brand .biz-logo-normaal { display: none; }
/*  De actieknop rechts: over een foto is een omlijning in de merkkleur vaak te zwak. Wit met een
    lichte vulling houdt hem zichtbaar op elk beeld; bij hover wordt hij vol wit. */
.biz-nav-shell.is-over:not(.is-stuck) .biz-btn-outline {
  border-color: rgba(255, 255, 255, .70); color: #fff; background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(6px);
}
.biz-nav-shell.is-over:not(.is-stuck) .biz-btn-outline:hover {
  background: #fff; border-color: #fff; color: var(--brand-secondary-ink, #1b2330);
}

/* ── uitzondering: het uitklapmenu staat open ──
   Dan hoort de balk ondoorzichtig te zijn: het paneel eronder heeft zijn eigen (thema)kleur, en
   een doorzichtige balk daarboven leest niet. Alles terug naar de eigen waarden van het thema. */
.biz-nav-shell.is-over:has(.fq-nav.is-open) .biz-utilitybar,
.biz-nav-shell.is-over:has(.fq-nav.is-open) .fq-nav {
  background: var(--fq-bar-bg, #fff);
}
.biz-nav-shell.is-over:has(.fq-nav.is-open) .fq-nav {
  --fq-bar-bg:    #ffffff;
  --fq-brand-fg:  #23252A;
  --fq-topnav-fg: #23252A;
  --fq-topnav-hi: var(--fq-c-sup);
  --fq-line:      rgba(20, 20, 25, .10);
}
.biz-nav-shell.is-over:has(.fq-nav.fq-theme-warm.is-open) .fq-nav,
.biz-nav-shell.is-over:has(.fq-nav.fq-theme-licht.is-open) .fq-nav {
  --fq-brand-fg:  #2C2E33;
  --fq-topnav-fg: #2C2E33;
}
.biz-nav-shell.is-over:has(.fq-nav.is-open) .biz-wordmark { color: var(--brand-ink, #23252A); }
.biz-nav-shell.is-over:has(.fq-nav.is-open) .biz-btn-outline {
  border-color: var(--brand-secondary); color: var(--brand-secondary-ink); background: transparent; backdrop-filter: none;
}

/* ── vastgeplakte stand ──
   Weer een gewone balk: eigen achtergrond (dus de gekozen menustijl is terug), schaduw eronder en
   de bovenbalk weg — die kost daar alleen hoogte. Hij schuift van boven in beeld. */
.biz-nav-shell.is-over.is-stuck {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  box-shadow: 0 10px 30px rgba(10, 15, 24, .16);
  animation: bizNavDrop .32s cubic-bezier(.22, .61, .36, 1) both;
}
.biz-nav-shell.is-over.is-stuck .biz-utilitybar { display: none; }
@keyframes bizNavDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Compactere balk zodra hij meeschuift, zodat hij zo min mogelijk van de pagina afdekt. */
.biz-nav-shell.is-over.is-stuck .fq-nav__bar { min-height: 74px; }
.biz-nav-shell.is-over.is-stuck .fq-nav__brand img { max-height: 57px; }
/* Ook met een zelf ingesteld logo blijft de meeschuivende balk compact: geen extra marges. */
.biz-nav-shell.is-over.is-stuck .fq-nav__brand.wf-logo-marge img { margin-top: 0; margin-bottom: 0; }

[data-bs-theme="dark"] .biz-nav-shell.is-over.is-stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
/* Donkere sitevariant met open menu: daar is wit juist verkeerd — de balk hoort dan donker te zijn. */
[data-bs-theme="dark"] .biz-nav-shell.is-over:has(.fq-nav.is-open) .fq-nav {
  --fq-bar-bg:    var(--site-dark-bg, #14181f);
  --fq-brand-fg:  #ffffff;
  --fq-topnav-fg: rgba(255, 255, 255, .92);
  --fq-line:      rgba(255, 255, 255, .10);
}
[data-bs-theme="dark"] .biz-nav-shell.is-over:has(.fq-nav.is-open) .biz-utilitybar { background: var(--site-dark-bg, #14181f); }
[data-bs-theme="dark"] .biz-nav-shell.is-over:has(.fq-nav.is-open) .biz-wordmark { color: #fff; }

/* ── smal scherm ──
   De bovenbalk is hier al uitgedund en de menubalk zelf is lager, dus de vastgeplakte stand hoeft
   niet nog verder te krimpen. */
@media (max-width: 960px) {
  .biz-nav-shell.is-over.is-stuck .fq-nav__bar { min-height: 68px; }
}

/* Rustige weergave: geen inschuif-animatie. */
@media (prefers-reduced-motion: reduce) {
  .biz-nav-shell.is-over.is-stuck { animation: none; }
}

/* ── Reviewkaarten op de voorpagina volgen de klantronding ──────────────────────────────────────
   Crafto zette hier een vaste `border-radius-4px`, waardoor deze kaarten vierkant bleven terwijl de
   klant bijvoorbeeld ronding 22 had ingesteld en de rest van de site wél rond was. Die klasse is uit
   de view gehaald; de ronding komt nu uit de klantinstelling. Zie [[site-radius-check-rule]].

   Bewust GEEN overflow:hidden erbij: de ronde reviewfoto steekt met opzet boven de kaart uit
   (absolute-middle-center top-0px). Afsnijden zou precies dat effect slopen. */
.wf-review-card { border-radius: var(--wf-radius-card, 6px); }

/*  De twee kaarten naast de actieve bleven vierkant: die slides dragen de 3D-draai van de coverflow
    en Chrome tekent daar geen ronde hoeken (ook overflow en clip-path helpen niet). Het witte vlak
    met de ronding is daarom verhuisd naar een echt kind-element, .wf-review-skin — zie reviews.css.
    (Jenny 28-08-2026.) */

/* De introtekst naast de Diensten-kop. Voluit, behalve in het lg-bereik: daar is de kolom smal en
   houdt 85% de regellengte prettig. Stond eerder als Crafto-klasse w-85 in de markup, maar die is
   `width: 85% !important` en liet zich daardoor nergens overschrijven -- ook niet op een breed scherm
   waar de tekst juist ruimte heeft. Op 1800px scheelt dit een hele regel. */
.wf-diensten-head .wf-diensten-intro { width: 100%; }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .wf-diensten-head .wf-diensten-intro { width: 85%; }
}

/* Dienstkaarten: titels beginnen altijd op dezelfde hoogte.
   Het titelblok hangt met mt-auto onderaan de kaart en groeide dus omhoog: een titel van twee regels
   begon precies één regelhoogte hoger dan een van één regel, wat naast elkaar rommelig staat. Door de
   titel zelf de hoogte van drie regels te geven staat de bovenkant altijd op dezelfde plek, terwijl
   het blok onderaan blijft hangen — zo blijft ook "Bekijk dienst" op zijn plaats.
   De lh-eenheid is één regelhoogte; de em-regel erboven is de terugval voor oudere browsers. */
.wf-dienst-titel {
    display: block;
    min-height: 4.8em;
    min-height: calc(3 * 1lh);
}

/* ── Handje op alles wat klikbaar is ──────────────────────────────────────────
   Nagelopen op verzoek van Jenny (28-08-2026): op meerdere plekken bleef de gewone
   pijl staan waar je wél kon klikken. Twee oorzaken, allebei hier rechtgezet.

   1. Sliders dragen Crafto's `.magic-cursor`. Wij zetten die volg-cursor uit met
      `cursor: auto !important` op de sectie én alles erin — dus óók op de links en
      de pijlen erbinnen. Vandaar de uitzondering hieronder: klikbare dingen houden
      het handje.
   2. Onderdelen die geen link zijn maar wel klikken (slider-pijlen, bolletjes, hele
      kaarten met een klik-laag, knoppen): die krijgen van de browser standaard geen
      handje.

   `a` zonder href staat er bewust NIET bij: dat is geen link maar een anker. */
:is(.magic-cursor, .magic-cursor-wrapper) :is(a[href], button, [role="button"], label, summary, select,
input[type="checkbox"], input[type="radio"], [data-bs-toggle], .swiper-button-next, .swiper-button-prev,
.swiper-pagination-bullet, .swiper-button-next-nav, .swiper-button-previous-nav,
.wf-card-clickable, .wf-card-clickable *) { cursor: pointer !important; }

a[href], button, [role="button"], summary, label[for], [data-bs-toggle],
.swiper-button-next, .swiper-button-prev, .swiper-button-next-nav, .swiper-button-previous-nav,
.swiper-pagination-bullet, input[type="checkbox"], input[type="radio"], select,
.wf-card-clickable, .wf-card-clickable * { cursor: pointer; }

:is(a[href], button)[aria-disabled="true"], button:disabled, .disabled { cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ-blok onder een pagina of dienst — _shared/_SiteFaqBlok.cshtml
   Eén vorm voor alle templates (keuze Jenny 29-08): de opmaak neemt per klant
   de huisstijlkleuren, de letters en de hoekronding over, net als het gedeelde
   klantformulier. Accent = --brand-secondary met --brand-primary als terugval.
   Ronding volgt de klantinstelling --wf-radius-card (die zet _SiteLayout).
   Alles scoped op .wf-faq-blok, dus het raakt het voorpagina-blok .wf-faq-1c niet.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-faq-blok {
  /* Vlakken en randen mogen de rauwe huisstijlkleur gebruiken. */
  --wf-faqblok-accent: var(--brand-secondary, var(--brand-primary));
  /* TEKST gebruikt de leesbaar-gemaakte variant: een klant met een lichte steunkleur
     kreeg anders beige-op-wit in de pil en de link. Zelfde tint, donker genoeg om te lezen. */
  --wf-faqblok-ink: var(--brand-secondary-ink, var(--brand-ink, var(--brand-secondary)));
  margin: 60px 0 0;
  /* Kaartoppervlak — dit vlak wordt donker in dark mode (zie onderaan). */
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
  border-radius: min(var(--wf-radius-card, 12px), 24px);
  padding: 42px 44px 34px;
  box-shadow: 0 18px 44px rgba(8, 15, 52, .10);
}

.wf-faq-blok-head { margin-bottom: 6px; }

.wf-faq-blok-pill {
  display: inline-block;
  margin-bottom: 12px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wf-faqblok-ink);
  background: color-mix(in srgb, var(--wf-faqblok-accent) 14%, transparent);
  border-radius: min(var(--wf-radius-button, 100px), 100px);
}

.wf-faq-blok-title { margin: 0 0 4px; font-size: 1.75rem; line-height: 1.25; color: var(--dark-gray); }

/* Dunne scheidingslijn tussen de vragen; de eerste krijgt er geen. */
.wf-faq-blok-row { border-top: 1px solid rgba(20, 30, 55, .10); }
.wf-faq-blok-row:first-child { border-top: none; }

.wf-faq-blok-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: opacity .35s ease;
}
.wf-faq-blok-btn:hover { opacity: .78; }
/* Muisklik geeft geen rand, toetsenbord wél — anders is het blok niet te volgen met Tab. */
.wf-faq-blok-btn:focus { outline: none; box-shadow: none; }
.wf-faq-blok-btn:focus-visible {
  outline: 2px solid var(--wf-faqblok-ink);
  outline-offset: 3px;
  border-radius: min(var(--wf-radius-input, 6px), 12px);
}

.wf-faq-blok-q {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--dark-gray);
  /* Lange vragen breken af in plaats van het blok breder te maken. */
  overflow-wrap: anywhere;
}

.wf-faq-blok-chev {
  flex: none;
  font-size: 20px;
  color: var(--wf-faqblok-ink);
  transition: transform .35s ease;
}
.wf-faq-blok-btn:not(.collapsed) .wf-faq-blok-chev { transform: rotate(180deg); }

.wf-faq-blok-answer { padding: 0 34px 22px 0; font-size: 15px; line-height: 1.75; color: var(--medium-gray, #4a5568); }

/* Uitweg naar het volledige overzicht: een link, geen knop — dit mag niet met de
   call-to-action van de pagina concurreren. */
.wf-faq-blok-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--wf-faqblok-ink);
  transition: gap .35s ease, opacity .35s ease;
}
.wf-faq-blok-more:hover { gap: 13px; opacity: .82; color: var(--wf-faqblok-ink); }

@media (max-width: 767px) {
  .wf-faq-blok { margin-top: 44px; padding: 30px 22px 26px; }
  .wf-faq-blok-title { font-size: 1.4rem; }
  .wf-faq-blok-btn { gap: 14px; padding: 17px 0; }
  .wf-faq-blok-answer { padding-right: 0; }
}

/* Wie beweging heeft uitgezet krijgt geen uitklap-animatie en geen draaiende chevron. */
@media (prefers-reduced-motion: reduce) {
  .wf-faq-blok-btn,
  .wf-faq-blok-chev,
  .wf-faq-blok-more,
  .wf-faq-blok .collapsing { transition: none !important; }
}

/* Dark mode: het kaartoppervlak kleurt mee met de donkere template in plaats van
   een wit eiland te blijven. Accent (chevron, pil, link) blijft de huisstijlkleur. */
[data-bs-theme="dark"] .wf-faq-blok {
  /* Op donker is de ink-variant juist te donker; daar wint de op-donker-leesbare tint. */
  --wf-faqblok-ink: var(--brand-secondary-ondark, var(--brand-secondary));
  background: var(--wf-dark-card, #171d2b);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .wf-faq-blok-row { border-top-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .wf-faq-blok-title,
[data-bs-theme="dark"] .wf-faq-blok-q { color: #eef1f7; }
[data-bs-theme="dark"] .wf-faq-blok-answer { color: #b9c0cf; }

/* ── Contactpagina: introblok (pil + kop links, tekst rechts) ────────────────
   Vanaf desktop staat de eerste regel van de tekst rechts op dezelfde regel als
   de eerste regel van de kop links. Dat doen wij met basislijn-uitlijning, zodat
   het klopt bij elke koplengte, lettergrootte en talen met langere woorden.

   De pil laten wij zweven (float) zodat hij niet meer de eerste tekstregel van
   de kolom is; de kop krijgt clear en blijft daardoor gewoon onder de pil staan.
   Zo pakt de basislijn-uitlijning de KOP en niet de pil. Ziet er visueel
   identiek uit, maar rekent nu vanaf de juiste regel.
   Onder 992px staan de twee kolommen onder elkaar; daar verandert er niets. */
@media (min-width: 992px) {
  .wf-contact-intro { align-items: baseline; }
  .wf-contact-intro .wf-ci-badge { float: left; }
  .wf-contact-intro .wf-introkop { clear: both; }
}

/* ── Contactpagina: kop dichter onder de banner ──────────────────────────────
   Crafto geeft elke <section> 90px boven én onder. Boven de kop van de contactpagina is dat te veel:
   de pil en de titel hangen dan los onder de paginabanner (Jenny 04-09). Alleen de bovenkant gaat
   omhoog — de onderkant houdt zijn 90px, anders schuift de fotoband eronder mee omhoog en verandert
   er meer dan gevraagd. Meeschalend, zodat een telefoon niet dezelfde 48px hoeft af te staan als een
   breed scherm. */
.biz-contact-kop { padding-top: clamp(32px, 3.5vw, 48px); }

/* ── Contactpagina: kaart over de volle breedte ──────────────────────────────
   De kaart staat sinds 04-09 ONDER het formulier en buiten elke container, dus van schermrand tot
   schermrand. Bewust geen ronding: zo sluit hij naadloos op de footer aan.

   `display: block` op de iframe is geen franje maar noodzaak: een iframe is van zichzelf inline en
   krijgt dan de loodruimte van een tekstregel onder zich — een witte streep van een paar pixels
   tussen de kaart en de footer.

   De hoogte schaalt mee: 300px op een telefoon (hoger maakt de pagina alleen langer zonder dat je
   méér van de omgeving ziet) tot 440px op een breed scherm, want over de volle breedte wordt 380px
   optisch een streep. */
.biz-contact-map iframe {
  display: block; width: 100%; border: 0; border-radius: 0;
  height: clamp(300px, 30vw, 440px);
}

/* ── Contactpagina: kop in één kleur ─────────────────────────────────────────
   De gedeelde partial knipt de titel in tweeën en zet het staartstuk in een <em> in de merkkleur.
   Bij business1 hoort dat één nette titel te zijn (Jenny 04-09). De partial laten we met rust —
   beauty1 houdt daar zijn accent — en we zetten de kleur hier terug op die van de kop zelf.
   Let op de extra `.wf-ck` ervoor: wf-content.css laadt NÁ deze stylesheet (zie _SiteLayout), dus
   zonder dat extra gewicht wint de regel daar. */
.wf-ck .wf-ck-h1 em { color: inherit; }

/* ── Contactpagina: de actiebalk als verloop-pil ─────────────────────────────
   Terug naar de Crafto-balk uit demo-corporate-contact.html (Jenny 04-09): één brede pil met een
   chat-icoon, de uitnodiging in kapitalen en de tweede route als onderstreepte link erachter — in
   plaats van een knop met daaronder een losse link.

   De markup blijft precies zoals hij is. De kop van de contactpagina komt uit een partial die we
   DELEN met beauty1, en daar hoort deze balk niet: beauty1 volgt Toms lijn. Daarom herstileren we
   hier alleen, in de stylesheet die enkel business1 laadt.

   Crafto's eigen verloop (flamingo → amethyst) is een Crafto-kleur, geen klantkleur. Wij nemen het
   verloop van de klant zelf — dezelfde twee kleuren als het streepje onder de titel — zodat de balk
   bij elke klant in zijn huisstijl staat.

   De `.wf-ck` ervóór is nodig voor het gewicht: wf-content.css laadt NÁ deze stylesheet. */
/*  De balk is zo breed als zijn inhoud en staat gecentreerd, precies als in het Crafto-ontwerp
    (col-auto). Over de volle breedte uitrekken zoals eerst maakte hem bij een korte uitnodiging veel
    te zwaar: dan bleef er aan weerskanten een lap leeg verloop over (Jenny 04-09). Zo groeit hij
    vanzelf mee met de tekst, tot maximaal de volle breedte; daarna breekt hij over twee regels.
    `width: fit-content` met marges op auto werkt zowel hier in het kopraster als in de gestapelde
    stand eronder — één regel voor allebei. */
.wf-ck .wf-ck-act {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin: 30px auto 0;
  padding: 14px clamp(24px, 3.4vw, 40px);
  border-radius: 100px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
  color: var(--brand-on-primary);
}
/*  Het chat-icoon als masker in plaats van als icoonletter: zo neemt het vanzelf de leeskleur over
    (currentColor) en hoeft het niet te wachten op een lettertype dat nog moet laden. */
.wf-ck .wf-ck-act::before {
  content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--biz-ck-chat) center / contain no-repeat;
          mask: var(--biz-ck-chat) center / contain no-repeat;
}
.wf-ck {
  --biz-ck-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105'/%3E%3C/svg%3E");
}

/*  De knop is nu de tekst ín de balk: geen eigen vlak, geen eigen ronding, geen zweefbeweging meer —
    die zou een stuk van de balk laten wiebelen in plaats van een knop. */
.wf-ck .wf-ck-btn {
  height: auto; padding: 0; border-radius: 0; background: none; color: inherit;
  font-size: clamp(13px, 1.05vw, 15px); font-weight: 600; letter-spacing: .05em;
  line-height: 1.45; text-transform: uppercase;
}
.wf-ck .wf-ck-btn:hover, .wf-ck .wf-ck-btn:focus {
  background: none; color: inherit; transform: none; box-shadow: none;
}
/*  De pijl hoort bij een knop, niet bij een regel tekst in een balk. */
.wf-ck .wf-ck-btn i, .wf-ck .wf-ck-alt i { display: none; }

/*  De tweede route staat in dezelfde regel, onderstreept — precies zoals in het Crafto-ontwerp. */
/*  Regelhoogte expliciet gelijk aan die van de tekst ernaast. Zonder deze regel erft de link een veel
    ruimere regelhoogte van Crafto (35px tegen 22px voor de tekst), en die extra loodruimte maakte de
    hele balk 10px hoger dan de inhoud vraagt. */
.wf-ck .wf-ck-alt {
  gap: 0; color: inherit; font-size: clamp(13px, 1.05vw, 15px); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.45;
}
.wf-ck .wf-ck-alt:hover { color: inherit; }
.wf-ck .wf-ck-alt span,
.wf-ck .wf-ck-alt:hover span { border-bottom: 2px solid currentColor; padding-bottom: 1px; }

/*  Op een telefoon breekt de balk over meerdere regels. Een ronding van 100px maakt daar een ovaal
    van; Crafto zet hem daarom op smal scherm terug naar een rechthoek met ronde hoeken. */
@media (max-width: 575.98px) {
  .wf-ck .wf-ck-act { border-radius: 26px; padding: 14px 22px; text-align: center; }
  .wf-ck .wf-ck-btn { width: auto; }
}

/*  Het verloop mag niet zomaar primair → secundair zijn. Die twee zijn bij veel klanten sterk
    ongelijk in helderheid: bij Bubbles & Co loopt het van lichtgrijs (#e0e0e0) naar bijna zwart
    (#3f3636), en dan is er géén tekstkleur die op allebei de uiteinden leesbaar is.
    Daarom nemen we de INKT-varianten van dezelfde twee huisstijlkleuren. Die zijn per klant al
    berekend om als tekstkleur te kunnen dienen en dus altijd donker; het verloop houdt de kleur van
    de klant, maar witte letters kunnen er overal op. Nagemeten bij vier klanten: het contrast met wit
    kwam uit tussen 4,5 en 11,7 — met die extra 12% zwart erbij overal ruim boven de norm van 4,5.
    De eerste regel is de terugval voor browsers zonder color-mix. */
.wf-ck .wf-ck-act {
  background: var(--brand-ink);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-ink) 88%, #000),
    color-mix(in srgb, var(--brand-secondary-ink) 88%, #000));
  color: #fff;
}

/*  De balk over de VOLLE breedte van de kop, niet alleen over de rechterkolom — zo is hij de brede
    band uit het Crafto-ontwerp in plaats van een uitgerekte knop.
    De markup zetten we daarvoor niet om (die partial deelt business1 met beauty1). In plaats daarvan
    laten we het rechterblok zijn eigen vak loslaten met `display: contents`: de tekst en de balk
    worden dan zélf vakjes van het kopraster, en de balk mag over alle kolommen. */
@media (min-width: 1081px) {
  .wf-ck .wf-ck-aside { display: contents; }
  .wf-ck .wf-ck-act { grid-column: 1 / -1; margin-top: 8px; }
}

/*  De begeleidende tekst rechts staat verticaal gecentreerd op de KOP links (Tom, 14-09-2026). Eerder
    lijnde hij uit op de basislijn van de eerste kopregel (Jenny 04-09) en stond hij daardoor iets te laag.

    Net als het rechterblok laat nu ook het linkerblok zijn vak los (display: contents): de pil, de kop
    en het streepje krijgen elk een eigen rij van het kopraster, en de tekst deelt de rij van de kop.
    Beide centreren in die rij, dus bij elke koplengte en tekstlengte staan ze op elkaar gecentreerd.
    De rij-tussenruimte gaat op nul, anders komt die ook tussen pil, kop en streepje; de ruimte boven de
    actiebalk (was 40px tussenruimte + 8px marge) zit nu in zijn marge.

    Alleen vanaf 1081px: daaronder heeft de kop één kolom (wf-content.css) en staat alles onder elkaar. */
@media (min-width: 1081px) {
  .wf-ck .wf-ck-head { row-gap: 0; }
  .wf-ck .wf-ck-head > :first-child { display: contents; }
  .wf-ck .wf-ck-eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  .wf-ck .wf-ck-h1 { grid-column: 1; grid-row: 2; align-self: center; }
  .wf-ck .wf-ck-rule { grid-column: 1; grid-row: 3; }
  .wf-ck .wf-ck-lead { grid-column: 2; grid-row: 2; align-self: center; }
  .wf-ck .wf-ck-act { grid-column: 1 / -1; grid-row: 4; margin-top: 48px; align-self: stretch; }
}

/* ══ Kleine schermen: aanraakmaten en FAQ-categorieën (Tom, 13-09-2026) ═══════════════════════════════
   Uit de meetronde van 13-09-2026 (17 pagina's, 1440 tot 320). Letters onder 12px zijn hierboven in hun
   eigen regels opgehoogd; business1 rekent met een kleinere basismaat, waardoor rem-maten hier kleiner
   uitvallen dan ze lijken — vandaar de max(12px, …).

   Aanraakmaten: tot en met iPad liggend minstens 44px. Waar een groter vlak de opmaak zou verschuiven (de
   bovenbalk, de kruimelregel onder de paginatitel, de contactregels in de footer), wordt het element wél
   44px hoog, maar vangen negatieve marges dat op: het raakvlak groeit, de regel blijft even hoog. */
@media (max-width: 1024.98px) {
  .biz-ub-item { min-height: 44px; margin-block: -10px; }
  .biz-footer-contact a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
  .biz-footer-social a { width: 44px; height: 44px; }
  .page-title-extra-large > div > a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; vertical-align: middle; }
  .down-section .section-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .biz-news-readmore { min-height: 44px; }
}

/*  FAQ-pagina: de categorieën stonden op een telefoon als losse knoppen van ongelijke breedte onder
    elkaar boven de vragen. Onder 768px zijn ze één rij pillen die zijwaarts schuift; de rij schuift, de
    pagina niet. De !important is nodig tegen Bootstraps .flex-column, dat zelf !important is. */
@media (max-width: 767.98px) {
  /*  Crafto zet deze lijst op inline-block en de items op display: table (gecentreerd onder elkaar);
      zonder display: flex hieronder deden de flex-regels dus niets. */
  .tab-style-05 .wf-faq-tabs.flex-column {
    display: flex; width: 100%;
    flex-direction: row !important; flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
    overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tab-style-05 .wf-faq-tabs::-webkit-scrollbar { display: none; }
  .tab-style-05 .wf-faq-tabs .nav-item { display: block; flex: none; margin: 0; }
  .tab-style-05 .wf-faq-tabs .nav-item .nav-link {
    margin-bottom: 0; min-height: 44px; padding: .55rem 1.1rem; white-space: nowrap; border-radius: 999px;
  }
  .tab-style-05 .wf-faq-tabs .nav-link::after { display: none; }
  .tab-style-05 .wf-faq-tabs .nav-item .nav-link:hover { transform: none; }
}

/* Partnerlogo op de detailpagina linkt naar de site van de partner (Jenny, 15-09-2026). */
.wf-partner-logolink { display: inline-block; max-width: 100%; transition: transform .25s ease; }
.wf-partner-logolink:hover { transform: scale(1.04); }