/* ============================================================================
   beauty1 — Crafto beauty-salon skin, gekoppeld aan Webfix-data
   GEEN nieuw CSS-framework: de globale Crafto-basis (~/site/_crafto/) + de
   meegeleverde beauty-salon.css doen het meeste werk. Hier alléén de tweaks die
   de template aan de klant-huisstijl koppelen en integratie-details oplossen.
   Huisstijl = var(--brand-*) (door de shell gezet). Alleen bijstijlen waar nodig.
   ========================================================================== */

/* Beauty-accent volgt de klant-huisstijl, zodat ELKE klant in de layout past.
   De echte waarden worden per klant gezet in _BrandVars.cshtml, met een VASTE rol per
   dashboardveld: Hoofdkleur = accent, Steunkleur = tweede accent/warme tint, Donkere kleur =
   donkere vlakken. Dit zijn alleen de fallbacks voor het geval die partial niet meelaadt —
   dus uitsluitend merkkleuren en neutralen, nooit een verzonnen tint (regel Jenny 03-08-2026). */
:root {
    --bty-accent: var(--brand-primary, #6f737a);
    --bty-accent-2: var(--brand-secondary, #6f737a);
    --bty-dark: var(--brand-dark, #2b2b28);
    /* Het lettertype van de klant, ook hier. beauty-salon.css zet deze twee op de demo-fonts
       (Marcellus voor koppen, Urbanist voor de rest) en dat bestand laadt ná de shell, dus zonder
       deze regels wonnen ze van de keuze in het dashboard: de pagina stond in het gekozen font maar
       de koppen en álle knoppen niet. Business1, hotel1 en interieur1 doen dit al net zo — één font
       over de hele site, precies wat de klant kiest (besluit Jenny 03-09-2026). */
    --alt-font: var(--brand-font);
    --primary-font: var(--brand-font);
    /* beauty-salon.css zet --dark-gray op een vaste navy (#2E3844); koppel 'm — net als business1 —
       aan de gegarandeerd-donkere merkkleur, zodat koppen/donkere vlakken de huisstijl volgen. */
    --dark-gray: var(--brand-dark);
    /* beauty-salon.css zet --medium-gray op #7e8287; dat is de kleur van ALLE bodytekst en haalt op wit
       maar 3,87:1 — onder de leesbaarheidsnorm van 4,5:1. Iets donkerder maakt er 4,77:1 van zonder de
       zachte, ingetogen uitstraling te verliezen. Raakt alleen tekst: de zes achtergrond-regels die deze
       variabele óók gebruiken (bg-medium-gray, swiper-voortgang, donkere-header-scheidingen) komen in
       beauty1 niet voor. Keuze Jenny, 02-08-2026. */
    --medium-gray: #6F737A;

    /*  Rondingen, afgeleid van de klantinstelling. Blijven kloppen bij ronding 0 én 50: het plafond
        via min() voorkomt dat een klein element (een badge, een knop) bij een grote ronding een cirkel
        wordt. Zie [[site-radius-check-rule]].

        Deze drie stonden eerst binnen het `.vst`-blok (het voorpagina-blok vestigingen). Daardoor
        waren ze buiten dat blok LEEG, en viel elke `var(--r-card)` elders terug op niets: op de hele
        vestigingen-overzichtspagina stond de ronding daardoor op 0 — vierkante badges, knoppen, panelen
        en foto's, terwijl de klant 30px had ingesteld. Ze horen dus in :root, waar elk blok ze heeft. */
    --r-card: var(--wf-radius-card, 8px);
    --r-img: var(--wf-radius-image, 6px);
    --r-pill: min(var(--wf-radius-card, 8px), 999px);
    --r-btn: min(calc(var(--wf-radius-card, 8px) * .7), 999px);

    --bty-dark-rgb: 30, 28, 25;
    /* De "warme" steunkleur is niet langer een berekende tint: het IS de Steunkleur van de klant.
       --bty-warm-deep is de Donkere kleur, één stap donkerder — alleen lichtheid, dezelfde kleurtoon —
       en wordt uitsluitend op 5–15% doorzichtigheid in schaduwen en haarlijntjes gebruikt. */
    --bty-warm: var(--brand-secondary, #6f737a);
    --bty-warm-deep: var(--brand-dark, #2b2b28);
    --bty-gradient: linear-gradient(120deg, var(--bty-accent) 0%, var(--bty-accent-2) 100%);
    /* Leesbare tekstvariant van datzelfde verloop; _BrandVars donkert beide uiteinden per klant tot
       4,5:1 op wit, met behoud van de kleurtoon. */
    --bty-gradient-ink: linear-gradient(120deg, var(--bty-atext) 0%, var(--bty-accent-2) 100%);
    /* Footer + donkere hover-waas: EFFEN in de Donkere kleur van de klant. Was een verloop uit de
       Crafto-demo (blauw -> brons); dat vroeg om een tweede donkere kleur die de klant niet kiest,
       dus werd die erbij gerekend. Vervallen op verzoek van Jenny, 03-08-2026. */
    --bty-footer-grad: var(--bty-dark);
    --base-color: var(--bty-atext);
    /* Accent als TEKST op licht: de Hoofdkleur, automatisch donker genoeg gemaakt (alleen lichtheid,
       kleurtoon blijft). _BrandVars zet de echte waarde per klant. */
    --bty-atext: var(--brand-ink);
    --base-ink: var(--brand-ink);

    /*  Gedempte bijtekst: labels, "was"-prijzen, specificatiekoppen, meta-regeltjes. Werd op elf plekken
        aangeroepen als var(--bty-muted, #9a8b82) — maar de variabele bestond nergens, dus won die vaste
        taupe áltijd en kreeg een klant met een koele huisstijl een bruinige zweem over zijn bijteksten.
        Nu een mengsel van de neutrale bodykleur met de warme steunkleur van de klant: dezelfde lichtheid
        als voorheen, maar de temperatuur volgt de huisstijl. (Audit 02-08-2026.) */
    --bty-muted: color-mix(in srgb, var(--medium-gray) 65%, var(--bty-warm) 35%);

    /*  Grijstrap, afgeleid van de huisstijl. Hier stonden ~20 vaste hexen verspreid door dit bestand
        (audit 02-08-2026). Twee families liepen door elkaar: WARME tinten in blog/artikel/reacties/footer
        en NEUTRALE in de reviewpagina en de UI-onderdelen. Geen van beide volgde de klant, dus kreeg een
        koele huisstijl een bruinige zweem over zijn meta-teksten. Nu volgen ze allebei wél: de warme via
        --bty-warm(-deep), de neutrale via --medium-gray. De verhoudingen zijn zo gekozen dat een warme
        standaard-huisstijl vrijwel dezelfde tinten oplevert als de vaste waarden die er stonden — het is
        dus geen herontwerp, alleen een koppeling.

        Voeg hier een stap toe in plaats van een nieuwe losse hex; zie [[brand-colors-only-rule]]. */
    /*  De twee ink-stappen zijn LEESTEKST (paginatekst, reactietekst). Ze worden daarom eerst als
        neutraal grijs verdonkerd en krijgen pas daarna een vleugje warmte — niet andersom. Eerst stond
        hier een zware mix met --bty-warm-deep; bij Frenque (fel terracotta #b74f3a) leverde dat #663526
        op: roodbruine bodytekst op élke pagina. Een huisstijl mag de tekst kleuren, niet overnemen. */
    --bty-ink: color-mix(in srgb, color-mix(in srgb, var(--medium-gray) 62%, #000) 90%, var(--bty-warm));    /* was #4a4a46 */
    --bty-ink-2: color-mix(in srgb, color-mix(in srgb, var(--medium-gray) 78%, #000) 88%, var(--bty-warm));  /* was #5f5750 */
    --bty-muted-2: color-mix(in srgb, var(--bty-muted) 88%, var(--bty-mix-licht));                      /* was #8a837c */
    --bty-muted-cool: color-mix(in srgb, var(--medium-gray) 80%, var(--bty-mix-licht));                 /* was #8a8a8a */
    --bty-line: color-mix(in srgb, var(--medium-gray) 16%, var(--bty-mix-licht));   /* was #e4e4e4/#ececec/#e2e2e2/#e6e2db */
    --bty-track: color-mix(in srgb, var(--medium-gray) 26%, var(--bty-mix-licht));                      /* was #d9d9d9 */
    /*  Lichte warme tekst OP een donker vlak (footer, hero-ondertitel). Volgt de warme steunkleur, zodat
        de footer bij een koele huisstijl niet crème blijft. */
    --bty-on-dark-warm: color-mix(in srgb, #fff 84%, var(--bty-warm));                  /* was #ece7df */
    --bty-on-dark-warm-2: color-mix(in srgb, #fff 78%, var(--bty-warm));                /* was #e9ddce */
    /*  Paginaoppervlak: het vlak waarop een overzicht staat. Nu wit, maar bewust een eigen variabele
        zodat de donkere modus straks op één plek kan worden gezet in plaats van per blok. */
    --bty-oppervlak: #fff;
    /*  Het "licht" waar mengsels naartoe verlichten. Stond overal als een vaste #fff in ruim vijftig
        color-mix()-aanroepen — `color-mix(in srgb, var(--bty-accent) 16%, wit)` — waardoor elk zacht
        vlak, elk haarlijntje en elke hover-tint áltijd naar wit trok — ook op een pagina die donker
        hoort te zijn. Nu één variabele: in donkere modus wijst die naar de donkere ondergrond en
        verlichten diezelfde mengsels vanzelf de goede kant op, zonder dat er één regel bij hoeft.
        In de lichte modus is de waarde #fff, dus er verandert visueel niets. (Audit 10-08-2026.) */
    --bty-mix-licht: #fff;
}

/*  Donkere modus: de basiskleuren van het donkere vlak. Deze twee werden in beauty1 al aangeroepen
    (reviewkaart) maar nergens gezet — alleen business1 definieert ze — waardoor de terugval #16201b
    won: een groenzwart dat niets met de klant te maken heeft. Zelfde opzet als business1, maar
    afgeleid van de merk-donkerkleur en het beauty-accent. */
[data-bs-theme="dark"] {
    --site-dark-bg: color-mix(in srgb, var(--bty-dark) 86%, #000);
    --wf-dark-card: color-mix(in srgb, var(--bty-accent) 14%, var(--site-dark-bg));
    /*  Gedempte en zachte tekst OP het donkere vlak (reviewpagina). Stonden vast op #9aa0a8 en #cfd2d8:
        een koel blauwgrijs dat bij een warme huisstijl niet paste. Nu wit gemengd met de donkere
        achtergrond, dus ze nemen vanzelf de temperatuur van de klant over. */
    --bty-on-dark-muted: color-mix(in srgb, #fff 62%, var(--site-dark-bg));   /* was #9aa0a8 */
    --bty-on-dark-soft: color-mix(in srgb, #fff 82%, var(--site-dark-bg));    /* was #cfd2d8 */
}

/* ---- Gekleurde/gradient eyebrows & labels (zoals de demo) ------------------ */
/* De eyebrow-spans krijgen een twee-tint verloop (accent -> warme steunkleur). Ook de originele
   Crafto-gradient-klasse omzetten naar de huisstijl, mocht demo-markup die gebruiken. */
.bty-eyebrow,
.text-gradient-san-blue-new-york-red,
.text-gradient-purple-pink,
.text-gradient-sky-blue-pink,
/* Alle section-eyebrows (uppercase accent-label met ls-1px) krijgen automatisch het verloop. */
span.text-uppercase.text-base-color.fw-700.ls-1px {
    background: var(--bty-gradient-ink, var(--bty-gradient));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/*  Op een blok met een eigen donkere of gekleurde achtergrond vervalt het verloop en wordt de eyebrow wit.
    Dat stond hier al als bedoeling (`.wf-applied.wf-on-dark … .bty-eyebrow { color: #fff !important }`
    verderop), maar die regel deed nooit iets: zolang `-webkit-text-fill-color: transparent` geldt, wint de
    verloopvulling van `color`. Daardoor hield de eyebrow op zo'n blok zijn warme tint — op het paarse
    verloop dat Frenque bij Vacatures koos, las "Werken bij ons" nauwelijks (Jenny 03-08).
    Wit en niet een merkkleur: de klant kiest die blokkleur zelf, dus welke tint dan ook kan er zomaar
    naast liggen. De kop ernaast is op zo'n blok al wit, dus het blijft één geheel. */
:is(.wf-block-dark, .wf-on-dark) :is(.bty-eyebrow, span.text-uppercase.text-base-color.fw-700.ls-1px),
[data-bs-theme="dark"] :is(.bty-eyebrow, span.text-uppercase.text-base-color.fw-700.ls-1px) {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

/* Hover-overlay op de diensten-/services-kaarten in de huisstijl (verschijnt bij hover). */
.bty-box-overlay { position: absolute; inset: 0; z-index: 0; background: var(--bty-footer-grad); opacity: 0; transition: opacity .4s ease; }
.services-box-style-01.hover-box:hover .bty-box-overlay { opacity: .62; }

/* ---- Header ---------------------------------------------------------------
   Transparante balk over de donkere hero; maak het (meestal donkere) klant-logo
   wit zodat het leesbaar blijft. In sticky/witte staat weer normaal. */
/*  Woordmerk voor klanten zonder logo: de bedrijfsnaam in de serif van de template. Nodig omdat er
    anders het logo van de Crafto-demo stond, en dat is bij ruim twee derde van de klanten het geval.
    Let op: Crafto zet .navbar-brand op font-size: 0 om de alt-teksten van de logo's te verbergen — een
    eigen font-size is hier dus geen smaakkwestie maar noodzaak, anders is de tekst onzichtbaar. */
.bty-nav .navbar-brand .bty-wordmark {
    display: inline-block;
    font-family: var(--alt-font);
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);   /* leesbaar over elke hero-foto */
}
/* Balk plakt vast en wordt wit: dan donkere tekst en geen schaduw meer. */
header.sticky-active .bty-nav .navbar-brand .bty-wordmark { color: var(--dark-gray); text-shadow: none; }
@media (max-width: 575px) { .bty-nav .navbar-brand .bty-wordmark { font-size: 20px; } }
/* In de footer staat het woordmerk op het donkere verloop: altijd licht, geen schaduw nodig. */
.bty-wordmark-footer { font-family: var(--alt-font); font-size: 30px; line-height: 1.15; color: #fff; }

/*  Logo groter vanaf lg (de balk mag daardoor iets hoger).
    11-08 op verzoek van Jenny: één plafond van 80px vanaf lg, in plaats van 60px met een sprong naar
    84px vanaf 1200px. Op de telefoon blijft het 60px — daar is de balk krap en staan er iconen naast.
    Een hoger plafond is veilig: max-height rekt niets op, dus een klein aangeleverd bestand blijft
    gewoon op zijn eigen formaat staan. Wel om te weten bij een volgende verhoging: het gewone logo van
    klant 78 is 257x96px, dus boven de 96px valt er voor die klant niets meer te winnen zonder een
    scherper bestand. */
.bty-nav .navbar-brand img { max-height: 60px; width: auto; }
@media (min-width: 992px) { .bty-nav .navbar-brand img { max-height: 80px; } }

/*  ---- Staand of bijna vierkant logo -------------------------------------------------------
    Het plafond hierboven is gemaakt voor een liggend logo. Bij een staand logo knijpt het de hele
    afbeelding samen terwijl er in de logokolom breedte zát over is: Floreer Meer (246x200) stond op
    98x80 in een kolom van 326px — 228px ongebruikt, en de bedrijfsnaam in het logo daardoor bijna
    onleesbaar. Zo'n logo mag hoger. Een breed logo raakt zijn kolombreedte toch eerder en verandert
    hier niets van (Frenque 650x135, Meijerink 900x324 blijven exact zoals ze stonden).
    De klasse komt van een klein script in _Header.cshtml dat de verhouding van het geladen bestand
    meet — vandaar dat dit CSS-only niet kan: de verhouding van een afbeelding is in CSS niet te zien.
    LET OP: max-height rekt niets op. Is het aangeleverde bestand maar 120px hoog, dan blijft het 120px
    en levert een hoger plafond niets op — dan is een scherper bestand nodig.
    Op de telefoon 90px in plaats van 60: naast de hamburger bleef daar 234px onbenut, dus die ruimte
    is er. Bij het vastplakken van de witte balk blijft het logo even groot — een krimpende balk komt
    later vanzelf mee met de logo-instelling die Tom in het dashboard maakt. */
.bty-nav.bty-logo-staand .navbar-brand img { max-height: 90px; }
@media (min-width: 992px) {
    .bty-nav.bty-logo-staand .navbar-brand img { max-height: 140px; }
}
/*  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. Die keuze gaat
    boven de plafonds voor liggende én staande logo's hierboven.
    Bewust `height` en niet `max-height`: met max-height groeide een klein bestand niet verder mee en
    stopte de schuif halverwege. Geen `width` op desktop: Crafto houdt de alt- en mobiele logo's
    verborgen met width: 0, en die moeten dat blijven. De logokolom mag dan ook breder dan 34%, anders
    schuift een groot logo onder het menu; het dashboard toont de echte header, dus de klant ziet het zelf.
    Vastgeplakte witte balk: hoogstens 90px en geen marges, zodat hij niet de halve pagina afdekt.
    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 60px, of 90px voor een staand logo), en
    de marge telt half mee. De breedte blijft begrensd zodat de hamburger en de iconen ernaast blijven
    staan; object-fit houdt het beeld in verhouding. Crafto's balk centreert verticaal en de marge is
    boven en onder gelijk, dus het logo blijft in het midden. */
@media (min-width: 992px) {
    .bty-nav .navbar-brand.wf-logo-maat img { height: var(--wf-logo-h, 80px); max-height: none; max-width: none; }
    .bty-nav .navbar-brand.wf-logo-marge img { margin-top: var(--wf-logo-m, 0px); margin-bottom: var(--wf-logo-m, 0px); }
    .bty-nav > .container-fluid > .col-auto:first-child:has(.wf-logo-maat) { max-width: none; }
    header.sticky-active .bty-nav .navbar-brand.wf-logo-maat img { max-height: 90px; }
}
@media (max-width: 991.98px) {
    .bty-nav .navbar-brand.wf-logo-maat img {
        height: calc(60px * (1 + (var(--wf-logo-f, 1) - 1) * .5)); max-height: none;
        max-width: calc(100vw - 170px); object-fit: contain; object-position: left center;
    }
    .bty-nav.bty-logo-staand .navbar-brand.wf-logo-maat img { height: calc(90px * (1 + (var(--wf-logo-f, 1) - 1) * .5)); }
    /* Op mobiel de volle marge (Tom, 19-10-2026: met de halve marge plakte het logo tegen de bovenrand). */
    .bty-nav .navbar-brand.wf-logo-marge img { margin-top: var(--wf-logo-m, 0px); margin-bottom: var(--wf-logo-m, 0px); }
}
header.sticky-active .bty-nav .navbar-brand.wf-logo-marge img { margin-top: 0; margin-bottom: 0; }
.bty-nav { padding-top: 6px; padding-bottom: 6px; }

/*  ---- Breedte van de logokolom -------------------------------------------------------------
    Het hoogteplafond hierboven deed op desktop niets, en dat is de moeite van het onthouden waard.
    Crafto's balk zet de logokolom op `col-lg-2 col-xxl-3`: een vaste 2/12 (op een 1280px-scherm maar
    196px) en 3/12 vanaf 1400px. Een breed liggend logo raakt die breedte veel eerder dan de
    hoogtegrens en wordt daardoor teruggeschaald — gemeten met het logo van Frenque (650x135):

        1280px scherm : kolom 196px -> logo 166 x  34   (hoogteplafond 96px werd niet eens benaderd)
        1440px scherm : kolom 334px -> logo 304 x  63

    Het logo was op een gangbare laptop dus niet half zo groot als op een breed scherm, en ook maar
    half zo groot als datzelfde logo in business1 (300 x 62 op 1280px). Vandaar: vanaf lg laten we de
    kolom meegroeien met zijn inhoud, zodat het hoogteplafond weer de baas is. De 34%-grens is het
    vangnet — daarboven zou een extreem breed logo het menu kunnen verdringen. Ruimte is er: in de
    balk stond bij Meijerink 821px en bij Frenque 661px ongebruikt.  */
@media (min-width: 992px) {
    .bty-nav > .container-fluid > .col-auto:first-child {
        width: auto;
        max-width: 34%;
    }
}
/* BELANGRIJK — Crafto zet bij scrollen de klassen `sticky` en `sticky-active` op de
   <header>, NIET op de balk zelf. De regels hieronder stonden eerder op
   `.bty-nav.sticky` / `.bty-nav.header-appear` en vuurden daardoor nooit; de balk
   had altijd zijn transparante staat. Nu hangen ze aan de header. */

/* Transparante staat (boven de hero/paginabanner met donkere waas):
   logo een zachte slagschaduw zodat ook een donker logo leesbaar blijft. Een ECHT
   diapositief logo (.wf-logo-realdark) is al licht en heeft die schaduw niet nodig. */
header:not(.sticky-active) .bty-nav .navbar-brand img:not(.wf-logo-realdark) {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
}
/* Telefoon: wit over de foto, donker in de witte balk. */
header:not(.sticky-active) .bty-nav .bty-phone { color: #fff; }

/*  Zachte sluier achter de doorzichtige balk.
    De balk staat vast bovenaan terwijl de pagina eronder doorscrolt, en Crafto maakt hem pas wit vanaf
    ~300px (sticky-active). In dat tussengebied schoof paginatekst onder het menu door: op een binnenpagina
    liep de titel uit de kopbanner dwars door de menu-items, allebei wit. Deze sluier scheidt het menu van
    wat eronder langs komt en maakt het menu bovendien leesbaar boven een lichte foto. Verdwijnt zodra de
    witte sticky-balk verschijnt. */
/*  KERN VAN HET PROBLEEM: Crafto zet de balk op `position: fixed`, ook helemaal bovenaan de pagina. Bij
    het scrollen bleef de doorzichtige balk dus staan terwijl de pagina eronder doorschoof — op een
    binnenpagina liep de titel uit de kopbanner recht door de menu-items (bij 112px zo'n 48px overlap).
    Vóór de sticky-staat scrolt de balk nu mee met de pagina; zodra Crafto `sticky` zet neemt zijn eigen
    fixed-gedrag het over en komt de witte balk netjes terugglijden. */
header:not(.sticky) .bty-nav { position: absolute; top: 0; left: 0; right: 0; }

.bty-nav { position: relative; }
header:not(.sticky-active) .bty-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .18) 65%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: -1;
}

/* Plakkende witte balk (Crafto brengt hem terug via .header-reverse op de balk).
   Menulinks zijn in Crafto altijd wit, dus die moeten hier expliciet donker worden. */
header.sticky.sticky-active .bty-nav {
    background-color: var(--bty-oppervlak) !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
header.sticky.sticky-active .bty-nav .navbar-nav .nav-link { color: #232828; }
header.sticky.sticky-active .bty-nav .navbar-nav .nav-link:hover,
header.sticky.sticky-active .bty-nav .navbar-nav .nav-link.wf-active { color: var(--bty-accent); }
header.sticky.sticky-active .bty-nav .bty-phone { color: #232828; }

/*  Aanraakvlak van de hamburger. Crafto geeft de knop 22×14px zonder padding (style.css ~9145) en
    dat is te klein om betrouwbaar te raken; de richtlijn is 44×44.
    Bewust via een onzichtbaar ::after en niet via padding: de vier streepjes zitten in de knop, dus
    padding zou het icoon verschuiven én de balkindeling veranderen. Een pseudo-element hoort bij de
    knop — een tik erop komt gewoon bij de knop uit — maar telt niet mee voor de opmaak, dus er beweegt
    niets. Gecontroleerd dat Crafto ::before/::after hier zelf niet gebruikt.
    Het vlak (44×44 rond het midden) blijft onder het logo: dat eindigt op y91, het vlak begint op
    y101. Geldt ook in de hamburger-op-groot-scherm-stand, vandaar geen breedte-grens. */
.bty-nav .navbar-toggler::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}

/*  ── DEZELFDE TWEE STATEN OP DE TELEFOON EN TABLET ──────────────────────────────
    Hierboven staan twee staten: doorzichtig over de hero, wit zodra Crafto `sticky-active`
    zet. Op desktop klopte dat, op een telefoon miste de bovenste staat volledig — de balk
    was daar altijd wit.

    Oorzaak zit niet bij ons maar in Crafto zelf (responsive.css ~19790):

        @media (max-width: 991px) {
          .navbar.bg-transparent { background-color: var(--white) !important; }
        }

    Onder 992px kieperde Crafto de doorzichtigheid er dus uit, ondanks de klassen
    `header-transparent` en `bg-transparent` op de balk. Gevolg op 375px gemeten (16-08):
    een witte strook van 137px bovenaan, het logo daarop in plaats van in de foto, en
    omdat de balk bij scrollen `fixed` wordt bleef die strook 137px van de 812px
    schermhoogte bedekken — koppen van blokken werden er half door afgekapt.

    Hieronder krijgt de telefoon dezelfde wissel als de desktop. Bewust ALLEEN de bovenste
    staat teruggedraaid: de witte sticky-balk blijft precies zoals hij was, want dát is de
    staat waarin je op een telefoon het grootste deel van de tijd scrolt. Alles hangt aan
    `header:not(.sticky-active)`, dezelfde schakelaar die de desktopregels hierboven al
    gebruiken, dus de twee kunnen niet uit elkaar gaan lopen. */
@media (max-width: 991.98px) {
    header:not(.sticky-active) .bty-nav { background-color: transparent !important; }

    /*  Bij een doorzichtige balk hoort het lichte logo. Crafto toont op de telefoon altijd
        `.mobile-logo` — de donkere variant — en die is onleesbaar op een foto. Heeft de klant
        geen diapositief logo, dan is `.default-logo` hetzelfde bestand als de donkere en zorgt
        de slagschaduw-regel hierboven (`img:not(.wf-logo-realdark)`) voor de leesbaarheid.
        In de witte sticky-balk draait Crafto dit vanzelf weer om naar de donkere. */
    header:not(.sticky-active) .bty-nav .navbar-brand .default-logo {
        visibility: visible !important; opacity: 1 !important; width: auto !important;
    }
    header:not(.sticky-active) .bty-nav .navbar-brand .mobile-logo {
        visibility: hidden !important; opacity: 0 !important; width: 0 !important;
    }

    /*  De hamburger volgt dezelfde twee staten. Deze regels bestonden al, maar alleen binnen
        `@media (min-width: 992px)` — die is er voor de hamburger-op-groot-scherm-stand en
        raakte de telefoon dus nooit. --bty-oppervlak is #fff. */
    header:not(.sticky-active) .bty-nav .navbar-toggler-line { background: var(--bty-oppervlak); }
    header.sticky.sticky-active .bty-nav .navbar-toggler-line { background: #232828; }

    /*  Nu de balk doorzichtig is, ligt hij ÓVER de hero in plaats van ernaast — en dan moet de
        dia-inhoud eronder beginnen. De inhoud staat verticaal gecentreerd in de hero (`.row
        .align-items-center.h-100`), dus een dia met een lange aanhef groeit naar BOVEN toe uit
        en schuift onder de balk. Gemeten op 375px (16-08): dia 3 van Frenque begon op y123
        terwijl de hamburger tot y130 loopt — 7px overlap, en dia 1 zat er met 8px speling
        vlak tegenaan.

        Een padding op de container (box-sizing: border-box, dus de hero wordt er niet hoger van)
        verkleint het vak waarin `.row` centreert; de inhoud zakt daarmee netjes onder de balk.
        137px is de balkhoogte en die ligt op een telefoon vast: het logo is hier afgetopt op
        60px (regel 182) en de shop-variant maakt hem alleen kleiner, nooit groter. Reserveren we
        iets te veel, dan zakt de inhoud een paar pixels — reserveren we te weinig, dan botst het
        weer. Vandaar de bovengrens en niet een gemiddelde.

        Onderaan hoort dezelfde reservering: de bolletjes staan op y542 in een hero van 600, en met
        alleen een padding bovenaan zakte de inhoud daar bovenop (gemeten: dia 4 liep tot y559, dus
        17px over de bolletjes heen, en de knop "Meer weten" overlapte ze ook in de breedte). Met een
        reservering aan twee kanten centreert de inhoud in de ruimte die echt vrij is — tussen de balk
        en de bolletjes — in plaats van in de hele hero. */
    .bty-hero .swiper-slide > .container { padding-top: 137px; padding-bottom: 70px; }
}

/* ---- Shop-iconen in de balk (winkelmandje + account) -------------------------
   Alleen zichtbaar als de Shop aanstaat (en het poppetje als shop-accounts aanstaan). Ze volgen
   dezelfde twee staten als de telefoon: wit boven de donkere hero, donker in de witte sticky-balk.
   Op xs zijn dit de enige items rechts (telefoon en CTA-knop verbergen zich daar). */
.bty-nav .bty-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px;
    margin-left: 6px;
    color: #232828;
    text-decoration: none;
    transition: color .2s ease;
}
.bty-nav .bty-icon-link:first-child { margin-left: 0; }
.bty-nav .bty-icon-link:hover { color: var(--bty-atext); }
header:not(.sticky-active) .bty-nav .bty-icon-link { color: #fff; }
header:not(.sticky-active) .bty-nav .bty-icon-link:hover { opacity: .75; color: #fff; }
/* Ingelogd: het poppetje in de huiskleur, zodat de klant ziet dat hij een sessie heeft. */
.bty-nav .bty-account.is-in { color: var(--bty-atext); }
header:not(.sticky-active) .bty-nav .bty-account.is-in { color: var(--bty-accent); }
.bty-nav .bty-cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bty-accent);
    color: var(--bty-on-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* De CTA-knop stond direct tegen het account-icoon aan zodra beide zichtbaar zijn. */
.bty-nav .bty-icon-link + .header-button { margin-left: 12px; }

/* ---- Shop-iconen bovenin het uitklapmenu -------------------------------------
   Zodra het menu achter een hamburger zit — op telefoon/tablet altijd, op groot scherm zodra de
   klant bij Menu voor "altijd"/"automatisch" kiest — verhuizen winkelmandje en inloggen naar de
   bovenkant van de lade, mét tekst erbij. In de balk lagen ze over de hero-foto; in diezelfde
   staat gaat de balk-variant daarom uit, zodat ze niet dubbel staan. Zit het menu gewoon in de
   balk (groot scherm, geen hamburger), dan verandert er niets: dan blijven het de iconen rechts.
   Standaard verborgen; de twee media-blokken hieronder zetten hem aan. */
.bty-drawer-shop { display: none; }
.bty-drawer-shop-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: color .2s ease;
}
.bty-drawer-shop-link svg { flex: 0 0 auto; }
.bty-drawer-shop-link:hover,
.bty-drawer-shop-link.is-in { color: var(--bty-accent); }
/* Aantal in het mandje: dezelfde pil als de badge in de balk, maar achter de tekst in plaats van
   over het icoon — hier is er ruimte voor en zo blijft het leesbaar. */
.bty-drawer-shop-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bty-accent);
    color: var(--bty-on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*  Telefoon/tablet: Crafto's eigen uitklapmenu. Dat paneel was Crafto's lichte standaard met
    var(--dark-gray)-links — een vaste look, ongeacht wat de klant bij menu-opmaak koos. (Crafto's
    eigen data-mobile-nav-bg-color raakt alleen .navbar-modern-inner / .navbar-full-screen-menu-inner,
    en die klassen heeft beauty1's nav niet, dus die deed hier sowieso niets.) Nu volgt ook dit paneel
    de gekozen menu-opmaak, met dezelfde tokens als het paneel op groot scherm. */
@media (max-width: 991px) {
    /*  LET OP — op een telefoon toont Crafto niet dit paneel maar een KLOON ervan
        (#navbarNav-clone / .navbar-collapse-clone) die hij in .navbar-modern-inner hangt, buiten de
        nav. Het origineel blijft 0px breed achter. Alles wat je op `.bty-nav .navbar-collapse` zet
        heeft hier dus geen enkel effect — dat kostte een ronde: het paneel bleef in Crafto's eigen
        kleur staan terwijl alle tokens klopten. Richt je op de kloon en op .navbar-modern-inner (die
        draagt de achtergrond, en Crafto zet die met een inline style, vandaar !important). */
    /*  Crafto kleurt die menuregels met `[data-mobile-nav-style=modern] .navbar-modern-inner
        .navbar-nav .nav-item .nav-link { color: var(--white) }` — vijf niveaus diep. Onze regels
        moeten daar dus overheen; met alleen `.navbar-collapse-clone .nav-link` bleven de regels wit
        op een licht paneel staan. Vandaar dezelfde keten plus de kloon-klasse erbij. */
    .navbar-modern-inner { background-color: var(--bty-menu-bg) !important; }
    [data-mobile-nav-style] .navbar-modern-inner .navbar-collapse-clone .navbar-nav .nav-item .nav-link {
        color: var(--bty-menu-fg);
    }
    [data-mobile-nav-style] .navbar-modern-inner .navbar-collapse-clone .navbar-nav .nav-item .nav-link:hover,
    [data-mobile-nav-style] .navbar-modern-inner .navbar-collapse-clone .navbar-nav .nav-item .nav-link.wf-active {
        color: var(--bty-menu-accent);
    }
    [data-mobile-nav-style] .navbar-modern-inner .navbar-collapse-clone .dropdown-menu li > a {
        color: color-mix(in srgb, var(--bty-menu-fg) 88%, transparent);
    }
    [data-mobile-nav-style] .navbar-modern-inner .navbar-collapse-clone .dropdown-menu li > a:hover {
        color: var(--bty-menu-accent);
    }
    [data-mobile-nav-style] .navbar-modern-inner .navbar-collapse-clone .dropdown > .dropdown-toggle {
        color: var(--bty-menu-fg);
    }
    /* Het sluitkruis van Crafto's mobiele menu ligt óp dat paneel. */
    [data-mobile-nav-style] .navbar-modern-inner .close-menu,
    [data-mobile-nav-style] .navbar-modern-inner .close-menu i { color: var(--bty-menu-fg); }

    .bty-drawer-shop {
        display: block;
        padding: 15px 15px 4px;
    }
    /* Zie de lade hierboven: de lijn hoort op de laatste link, dan loopt hij gelijk met de items. */
    .bty-drawer-shop-link:last-child { border-bottom: 1px solid var(--bty-menu-border); }
    .bty-drawer-shop-link { padding: 10px 0; color: var(--bty-menu-fg); font-size: 16px; }
    .bty-drawer-shop-link + .bty-drawer-shop-link { border-top: 1px solid var(--bty-menu-border); }
    /* Crafto geeft de lijst 15px bovenmarge; met het shop-blok ervoor staat dat te ruim. */
    .navbar-collapse:has(.bty-drawer-shop) .navbar-nav { padding-top: 6px; }
    /* Uit de balk: ze staan nu bovenin het paneel. */
    .bty-nav .header-icon .bty-icon-link { display: none; }
}

/*  Tweede pil "Boek nu" — verschijnt alleen als de klant zijn eigen actieknop ergens anders heen stuurt
    terwijl Boekingen aanstaat. Boven de donkere hero is de omlijning in de huiskleur vaak onleesbaar
    (een donkere huiskleur op een donkere foto), dus daar wit; in de witte sticky-balk mag de huiskleur. */
.bty-nav .bty-nav-cta2 { margin-left: 8px; }
/*  Twee pillen naast elkaar in plaats van onder elkaar. De rechterkolom heeft van Crafto een vaste
    breedte (col-xxl-3 / col-lg-2); daar passen twee knoppen niet in, dus viel de tweede eronder. Alleen
    bij twee knoppen mag die kolom zo breed worden als z'n inhoud. */
.bty-nav .header-button { display: flex; align-items: center; flex-wrap: nowrap; }
.bty-nav-2cta > .container-fluid > [class*="col-"]:last-child {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
header:not(.sticky-active) .bty-nav .bty-nav-cta2 {
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
}
header:not(.sticky-active) .bty-nav .bty-nav-cta2:hover {
    background-color: var(--bty-oppervlak);
    border-color: #fff;
    color: var(--bty-atext);
}

/*  Tablet/telefoon: met shop-iconen erbij moeten er drie dingen naast elkaar (logo, iconen, hamburger)
    in plaats van twee. Een breed woordmerk-logo duwde de rij daardoor naar twee regels — de iconen en
    de hamburger vielen onder het logo, half over de hero. Het logo mag hier dus meekrimpen (Crafto zet
    de hamburger zelf al achteraan met `.menu-order { order: 5 }`). Alleen actief bij een shop. */
@media (max-width: 991px) {
    .bty-nav-shop > .container-fluid { flex-wrap: nowrap; }
    .bty-nav-shop > .container-fluid > .col-auto:first-child { min-width: 0; flex-shrink: 1; }
    .bty-nav-shop .navbar-brand { display: block; max-width: 100%; }
    .bty-nav-shop .navbar-brand img { max-width: 100%; }
    .bty-nav-shop .navbar-brand .bty-wordmark {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---- Menu-opmaak: donker / licht / warm --------------------------------------
   De klant kiest bij Layout website → Menu een menu-opmaak. beauty1 negeerde die keuze volledig —
   hij stond hier niet eens in de HTML. Nu draagt de nav .bty-theme-<keuze> en hangt alle kleur van
   het uitklapmenu aan de tokens hieronder, in plaats van aan losse #fff'jes.

   De rolverdeling is dezelfde als in business1, zodat "warm" op elke template hetzelfde betekent:

     donker (standaard) = donker paneel · accent in de STEUNkleur
     licht              = licht paneel, donkere tekst · accent in de HOOFDkleur
     warm               = de STEUNkleur ís het paneel

   Alle kleuren komen uit de huisstijl van de klant; er staat hier geen enkele vaste kleur die niet
   zwart of wit is. --bty-on-accent-2 wordt in _BrandVars berekend (zwart óf wit, wat leesbaar is op
   de steunkleur), zodat "warm" ook klopt bij een klant met een bleke steunkleur. */
.bty-nav, .bty-nav.bty-theme-donker, body.bty-theme-donker {
    /* --bty-burger-bg zet het scriptje in _Header.cshtml uit de mobiele-menukleur van de klant. */
    --bty-menu-bg:     var(--bty-burger-bg, var(--site-dark-bg, var(--bty-dark, #2a2424)));
    --bty-menu-fg:     rgba(255, 255, 255, .86);
    --bty-menu-fg-hi:  #ffffff;
    --bty-menu-accent: var(--bty-accent-2);
    --bty-menu-hover:  rgba(255, 255, 255, .10);
    --bty-menu-border: rgba(255, 255, 255, .14);
}
.bty-nav.bty-theme-licht, body.bty-theme-licht {
    --bty-menu-bg:     color-mix(in srgb, var(--bty-accent) 6%, var(--bty-mix-licht));
    --bty-menu-fg:     #3e4046;
    --bty-menu-fg-hi:  #1f2024;
    --bty-menu-accent: var(--bty-atext);
    --bty-menu-hover:  color-mix(in srgb, var(--bty-accent) 14%, transparent);
    --bty-menu-border: rgba(20, 20, 25, .10);
}
.bty-nav.bty-theme-warm, body.bty-theme-warm {
    --bty-menu-bg:     var(--bty-accent-2);
    /* Hover en scheidingslijnen leiden we af van de TEKSTkleur, niet van wit: bij een bleke
       steunkleur is de tekst zwart en zouden witte lijnen onzichtbaar zijn. */
    --bty-menu-fg:     var(--bty-on-accent-2, #ffffff);
    --bty-menu-fg-hi:  var(--bty-on-accent-2, #ffffff);
    --bty-menu-accent: color-mix(in srgb, var(--bty-on-accent-2, #ffffff) 70%, var(--bty-accent-2));
    --bty-menu-hover:  color-mix(in srgb, var(--bty-on-accent-2, #ffffff) 14%, transparent);
    --bty-menu-border: color-mix(in srgb, var(--bty-on-accent-2, #ffffff) 22%, transparent);
}

/* ---- Meertraps-menu: het derde niveau ----------------------------------------
   Een subpagina die zélf subpagina's heeft (bv. "Algemene informatie" onder "Frenque Downtown")
   werd door _MenuNode.cshtml altijd al netjes in de HTML gezet, maar beauty1 had er geen enkele
   regel voor — dus stond dat niveau er onzichtbaar in. business1 had dit wel; hieronder dezelfde
   opzet, met beauty1's kleuren. Drie situaties, want het menu heeft drie verschijningsvormen:
     1. gewone balk op groot scherm  -> zijwaartse flyout op hover
     2. telefoon/tablet              -> in-lijn, ingesprongen onder de bovenliggende pagina
     3. hamburger-lade op groot scherm -> idem in-lijn (daar is geen hover) */

/* 1. Gewone balk op groot scherm. Crafto zet overflow:hidden op de dropdown; dat knipt de
      zijwaartse flyout weg, dus forceren op visible. */
@media (min-width: 992px) {
    .bty-nav:not(.bty-burger) .navbar-nav .dropdown-menu { overflow: visible !important; }
    /* static (geen eigen positioneer-context) zodat de flyout op de subs-LIJST ankert in plaats van
       op de rij: zo begint de sub-sub-kolom op dezelfde hoogte als de subs. */
    .bty-nav:not(.bty-burger) .dropdown-menu .wf-submenu { position: static; }
    .bty-nav:not(.bty-burger) .dropdown-menu .wf-submenu > a {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
    }
    .bty-nav:not(.bty-burger) .dropdown-menu .wf-submenu > a::after {
        content: "\203A"; font-size: 1.15em; line-height: 1; opacity: .55;
    }
    /* !important omdat Crafto's eigen hover-regel anders álle geneste flyouts tegelijk toont. */
    .bty-nav:not(.bty-burger) .dropdown-menu .wf-submenu > .dropdown-menu {
        position: absolute; top: 0; left: 100%; margin: 0; display: none !important;
    }
    .bty-nav:not(.bty-burger) .dropdown-menu .wf-submenu:hover > .dropdown-menu { display: block !important; }

    /*  Touch-laptop: hover is daar niet betrouwbaar, dus geen flyout maar een accordion — een tik
        opent alléén dat item, in-lijn. De klasse .wf-touch zet het scriptje onderaan _Header.cshtml,
        .wf-open komt van dezelfde JS. */
    .bty-nav:not(.bty-burger) #wf-mainnav.wf-touch .dropdown-menu .wf-submenu:hover > .dropdown-menu {
        display: none !important;
    }
    .bty-nav:not(.bty-burger) #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 0 0 14px !important;
        background: transparent !important; border: 0 !important; box-shadow: none !important;
    }
    .bty-nav:not(.bty-burger) #wf-mainnav.wf-touch .dropdown-menu .wf-submenu > a::after { transition: transform .15s; }
    .bty-nav:not(.bty-burger) #wf-mainnav.wf-touch .dropdown-menu .wf-submenu.wf-open > a::after { transform: rotate(90deg); }
    /* Een lange lijst zou anders van het scherm lopen. */
    .bty-nav:not(.bty-burger) #wf-mainnav.wf-touch > .nav-item.dropdown > .dropdown-menu {
        max-height: 74vh; overflow-y: auto;
    }
}

/* 2. Telefoon/tablet: Crafto's eigen uitklapmenu. Zijwaarts uitklappen kan daar niet, dus staan de
      sub-subpagina's ingesprongen onder hun bovenliggende pagina. */
@media (max-width: 991px) {
    .bty-nav .navbar-nav .dropdown-menu .wf-submenu > .dropdown-menu {
        position: static; display: block; float: none; width: 100%;
        margin: 0; padding: 0 0 4px 14px;
        background-color: transparent; border: 0; box-shadow: none;
    }
    .bty-nav .navbar-nav .dropdown-menu .wf-submenu > a::after { content: none; }
}

/* ---- Projectdetail: gegevenskaart, galerijstrook, vorige/volgende ------------
   Opzet uit de Crafto-demo die Jenny aanwees (single-project-elegant): de projectgegevens in een witte
   kaart die half over de fotobanner valt, de galerij op een lichte strook over de volle breedte, en
   vorige/volgende met een kleine foto erbij. Zonder dit was de pagina één smalle tekstkolom op wit. */
.bty-proj-card-over {
    position: relative;
    z-index: 2;
    margin-top: -70px;
    background: var(--bty-oppervlak);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
    padding: 30px 20px;
}
@media (max-width: 767px) {
    .bty-proj-card-over { margin-top: -40px; padding: 22px 14px; }
}

/* Galerijstrook: lichte, warme achtergrond die de witte pagina onderbreekt. Kleur uit de huisstijl
   (accent op 6%) zodat het bij elke klant klopt in plaats van een vast grijs.
   De section had ook Bootstrap's p-0 (padding:0 !important) om Crafto's 130px sectiepadding te doden;
   daardoor won p-0 ook van de padding hier en plakte de strook strak om kop en foto's. p-0 is uit de
   view gehaald: een klasse-selector wint al van Crafto's `section`-regel, dus dit is genoeg. */
.bty-proj-gallery {
    background: color-mix(in srgb, var(--bty-accent) 6%, var(--bty-mix-licht));
    padding-top: 90px;
    padding-bottom: 95px;
}
/* Grotere beelden: de gedeelde galerij-weergave is 4 kolommen breed; hier 3, dus per foto meer ruimte. */
@media (min-width: 992px) {
    .bty-proj-gallery .row-cols-lg-4 > * { flex: 0 0 auto; width: 33.3333%; }
}
/* Meer lucht tussen de fotorijen. Het gedeelde fotomap-blok staat op g-2 (8px) omdat het elders in een
   smallere kolom staat; op deze volle-breedte strook met 3 kolommen is dat te krap. */
.bty-proj-gallery .gallery-box { --bs-gutter-y: 30px; }

/* De afsluiter (externe link + vorige/volgende) stond op Crafto's pt-6: 85px, bovenop de 95px waarmee de
   galerijstrook al eindigt. Samen met de pt-5 van de rij zelf gaf dat een gat van bijna 150px tussen de
   laatste foto en de projectnamen. De sectie heeft nu een eigen, kleinere bovenmarge. */
.bty-proj-foot { padding-top: 40px; }
@media (max-width: 767px) {
    .bty-proj-foot { padding-top: 25px; }
}

/* De dienstenfoto's zitten in Crafto's .box-image met de utility border-radius-6px (!important) en
   volgden daardoor de hoekafronding van de klant niet: op een site met 30px bleven ze op 6px staan,
   terwijl de projecten- en referentiekaarten ernaast wél meebewogen. */
.services-box-style-01 .box-image {
    border-radius: var(--wf-radius-image, 6px) !important;
}

/* Labelregel op de dienstenkaarten ("Populair", "Nieuw"). Hij staat op elke kaart, ook zonder label,
   zodat de titels van alle kaarten in een rij op dezelfde hoogte beginnen. De negatieve bovenmarge
   trekt het label dichter naar de foto toe. */
.services-box-style-01 .bty-svc-label {
    /* Vaste hoogte i.p.v. min-height: een inline pil rekt zijn regel 2px op, waardoor de kaart mét
       label toch weer lager uitkwam dan de kaarten ernaast. Met een flexvakje van vaste hoogte is
       de labelregel op elke kaart exact even hoog, met of zonder label. */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    margin-bottom: 8px;
}

/* ---- Omlijning om de dienstenkaarten ---------------------------------------
   De kaart was tot 31-08-2026 een losse foto met de tekst er los onder; op een blok met een eigen
   achtergrond of verloop had die tekst nergens een begrenzing en leken de kaarten te zweven (Jenny).
   Eén haarlijn om foto én tekst maakt er weer één kaart van. Dit vervangt bewust de oude afspraak
   verderop ("géén randlijn erbij") voor dít blok.

   Let op: GEEN eigen vulling. Het KAARTOPPERVLAK is hier de sectiekleur zelf, zodat de achtergrond
   die de klant voor het blok koos gewoon door de kaart heen loopt — een witte vulling zou van elk
   afgestyld dienstenblok een rij witte eilanden maken. Voor de donkere modus betekent dat: alleen
   --bty-line hoeft een andere waarde te krijgen. */
.bty-services .services-box-style-01 {
    border: 1px solid var(--bty-line);
    border-radius: var(--r-card);
    overflow: hidden;                /* clipt de foto op de hoekronding van de kaart */
    /*  Gelijke hoogte binnen een rij. Zonder omlijning viel een kortere tekst niet op; nu tekent elke
        kaart zijn eigen kader en eindigen de kaders van één rij anders op verschillende hoogtes. De
        kolommen van een Bootstrap-rij rekken al mee, dus 100% is genoeg. */
    height: 100%;
    transition: border-color .35s ease, box-shadow .35s ease;
}
/*  De foto loopt tot tegen de lijn; zijn eigen ronding zou binnen de kaartronding een tweede,
    kleinere boog tekenen. De kaart zelf clipt hem al. */
.bty-services .services-box-style-01 .box-image {
    border-radius: 0 !important;
}
.bty-services .services-box-style-01:hover {
    border-color: color-mix(in srgb, var(--bty-accent) 45%, var(--bty-line));
    box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
}
/*  Op een donker of gekleurd blok is de lichte haarlijn onzichtbaar — zelfde omkering als bij de
    andere hairlines (regel 3 in het wf-block-dark-blok hieronder). De klassen staan op de sectie
    zelf, dus die is hier de voorouder van de kaart. */
:is(.wf-block-dark, .wf-on-dark) .services-box-style-01 { border-color: rgba(255, 255, 255, .45); }
:is(.wf-block-dark, .wf-on-dark) .services-box-style-01:hover { border-color: rgba(255, 255, 255, .55); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
@media (prefers-reduced-motion: reduce) {
    .bty-services .services-box-style-01 { transition: none; }
}

/* ---- Eén schaduw voor alle kaarten ------------------------------------------
   Beauty1 gebruikte vier verschillende Crafto-schaduwen door elkaar: projectkaarten zweefden op
   0 20px 60px, referenties op 0 0 20px, nieuws/agenda/producten op 0 0 25px. Naast elkaar op één site
   oogde dat als toeval in plaats van als keuze. Alles rust nu op dezelfde zachte, gelijkmatige schaduw;
   géén randlijn erbij, want bij blokken waar de tekst ónder de foto staat (Diensten, Team) zou een lijn
   een kader tekenen om iets wat geen kader is. UITZONDERING sinds 31-08-2026: de dienstenkaarten hebben
   wél een haarlijn gekregen (zie "Omlijning om de dienstenkaarten" hierboven) — op een blok met een eigen
   achtergrond bleek dat kader juist nodig, anders zweefde de tekst los onder de foto.

   De hover moest mee: Crafto zet .box-shadow-large-hover:hover op exact dezelfde waarde als
   .box-shadow-large, dus op kaarten die beide klassen dragen deed muis-over zichtbaar niets. Nu wel. */
:is(.box-shadow-quadruple-large,
    .box-shadow-double-large,
    .box-shadow-large,
    .box-shadow-medium) {
    box-shadow: 0 0 20px rgba(0, 0, 0, .08) !important;
}
:is(.box-shadow-hover,
    .box-shadow-large-hover,
    .box-shadow-medium-hover,
    .box-shadow-double-large-hover,
    .box-shadow-quadruple-large-hover):hover {
    box-shadow: 0 6px 32px rgba(0, 0, 0, .14) !important;
}

/* ---- Teamraster: lucht tussen de rijen --------------------------------------
   De teamkolommen hebben alleen een ondermarge op mobiel (md-mb-35px) en de rij zelf staat op
   --bs-gutter-y: 0. Op desktop plakte de naam van de bovenste rij daardoor tegen de foto van de rij
   eronder. row-gap in plaats van een ondermarge op de kolommen: dat telt alléén tussen twee rijen, dus
   onder de laatste rij komt geen extra gat. */
@media (min-width: 768px) {
    .bty-team .row-cols-lg-4 { row-gap: 55px; }
}

/* ---- "Uw project hier?"-kaart op het projectoverzicht -----------------------
   Een uitnodiging in plaats van een item, dus bewust géén foto en géén schaduw: een stippellijn in de
   huisstijlkleur laat zien dat hier nog iets kán komen. De hoogte volgt de kaarten ernaast (h-100),
   de radius volgt de klantinstelling net als de projectkaarten. */
.bty-proj-cta {
    border: 2px dashed color-mix(in srgb, var(--bty-accent) 45%, var(--bty-mix-licht));
    border-radius: var(--wf-radius-card, 6px);
    background: color-mix(in srgb, var(--bty-accent) 4%, var(--bty-mix-licht));
    text-decoration: none;
    transition: border-color .25s ease, background-color .25s ease;
}
.bty-proj-cta:hover {
    border-color: var(--bty-accent);
    background: color-mix(in srgb, var(--bty-accent) 8%, var(--bty-mix-licht));
}
.bty-proj-cta-plus {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bty-accent);
    color: var(--bty-on-accent, #fff);
    font-size: 24px;
    flex: 0 0 auto;
}
/* Brede variant voor overzichten die een lijst zijn in plaats van een raster (Vacatures): dezelfde kaart,
   maar liggend en over de volle breedte, want daar is geen gat in een rij te vullen. */
.bty-proj-cta-wide { margin-bottom: 30px; }

/* Categoriefilter op het vacatureoverzicht. Crafto's .form-select geeft links én rechts dezelfde
   binnenmarge (25px), maar tekent het pijltje op 10,5px van de rechterrand — dus binnen die marge. Bij een
   menu op volle breedte valt dat niet op, maar dit menu heeft .w-auto en krimpt tot de tekstbreedte,
   waardoor het pijltje strak tegen het laatste woord kwam te staan. Extra ruimte rechts, links ongemoeid. */
.wf-vac-filter .form-select { padding-right: 48px; }

/* Vorige/volgende: beide kolommen op dezelfde hoogte. De rechterkolom had `mt-4 mt-md-0` voor de
   mobiele tussenruimte, maar Crafto herdefinieert .mt-4 (3rem, !important) in een stylesheet die ná
   Bootstrap laadt, dus mt-md-0 verloor en het volgende-blok stond op desktop ~49px lager dan het
   vorige-blok. De marge-klassen zijn uit de view; de mobiele tussenruimte loopt nu via row-gap, wat
   alleen telt zodra de kolommen onder elkaar vallen. */
.bty-proj-nav { row-gap: 30px; }

/* Vorige/volgende: kleine foto naast de titel. Radius volgt de klantinstelling (stond hier eerst hard
   op 6px, waardoor hij niet meebewoog met een klant die bijvoorbeeld 30px koos). */
.bty-proj-navthumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--wf-radius-image, 6px);
    flex: 0 0 auto;
}

/* Het gedeelde fotomap-blok (_FotomapWeergave) zet Crafto's utility-klassen border-radius-4px/6px op de
   foto-links. Die staan op !important en volgden dus de klant-radius niet: op een site met 30px bleven de
   galerijfoto's op 6px staan. Binnen beauty1 rechtgezet; business1 heeft dezelfde afwijking nog. */
.box-layout .gallery-box a {
    border-radius: var(--wf-radius-image, 6px) !important;
}

/* ---- Achtergrondfoto's volgen de klant-radius --------------------------------
   Team en Vacatures renderen hun foto als background-image op een <a>, niet als <img>. De sitebrede
   radius-laag (_SiteLayout) mikt op img-tags en bekende kaartklassen, dus deze hielden Crafto's eigen
   ronding: team 6px en vacatures 0px, terwijl de klant bijvoorbeeld 30px had gekozen. Nu via de
   --wf-radius-image-variabele, met Crafto's 6px als terugval wanneer de klant niets heeft ingesteld.
   Bewust alleen op <a>: volle-breedte banners (hero, kopbanner, CTA) zijn <section> en blijven vierkant. */
/* !important is nodig: de teamfoto draagt Crafto's utility-klasse .border-radius-6px, en die staat zelf
   op !important. De sitebrede radius-laag in _SiteLayout doet dat om dezelfde reden. */
.box-layout a.cover-background {
    border-radius: var(--wf-radius-image, 6px) !important;
    overflow: hidden;
}

/* ---- Kaartfoto's: altijd dezelfde verhouding ---------------------------------
   Foto's van klanten hebben allerlei formaten (portret, panorama, vierkant). Zonder vaste verhouding
   houdt elke foto zijn eigen hoogte en staat een rij kaarten ongelijk — bij Frenque 250, 174 en 377px
   naast elkaar, wat rommelig oogt. Deze klasse geeft elke kaartfoto dezelfde 4:3-verhouding en snijdt bij
   (object-fit: cover), zodat het beeld nooit uitgerekt wordt. Bewust een verhouding en geen vaste hoogte,
   zodat het op elk schermformaat meeschaalt. */
.bty-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* Projectkaarten in het overzicht: de duimnagelreeks hangt ONDERAAN de kaart. De teksten zijn per project
   verschillend lang, en zonder dit stond die reeks bij elke kaart op een andere hoogte — wat de rij
   rommelig maakte, ook al zijn de kaarten zelf even hoog. */
.bty-proj-card .card-body { display: flex; flex-direction: column; }
.bty-proj-card .bty-proj-thumbs { margin-top: auto; padding-top: 20px; }

/* Labeltje IN de kaartfoto (bv. "Populair" bij een project). Zat eerder in de kaart zelf, waar het de
   titel omlaag duwde: op kaarten zonder label begon de titel dan hoger dan op kaarten met label. */
.bty-card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Plaatsnaam IN de kaartfoto, rechtsonder — tegenover het labeltje linksboven. Stond eerder in de kaart
   zelf, waar hij (samen met de klantnaam) de introtekst van kaarten mét locatie omlaag duwde, zodat de
   teksten in een rij op verschillende hoogtes begonnen. Wit-transparante pil met lichte blur, zodat de
   plaatsnaam leesbaar blijft op zowel een donkere als een lichte foto. */
.bty-card-place {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 30px);
    padding-top: 5px;
    padding-bottom: 5px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--dark-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    white-space: nowrap;
    overflow: hidden;
}

/* Klantnaam op de projectkaart. Krijgt altijd dezelfde regelhoogte — ook als dit project geen klantnaam
   heeft — zodat de introteksten van alle kaarten in een rij op precies dezelfde hoogte beginnen. De regel
   wordt alleen gerenderd als er in dit overzicht überhaupt één project met klantnaam staat. */
.bty-proj-client { min-height: 1.5em; }

/* ═══════════════════════════════════════════════════════════════════════════
   Voorpagina-blok "Onze vestigingen" (ontwerp uit Claude Design, 03-08-2026).
   Vervangt het oude witte kaartje met alleen adres/telefoon/e-mail. Gebruikt nu
   wél de foto, de openingstijden en de regio-/type-labels die al bij elke
   vestiging staan maar nergens getoond werden.

   De kaarten staan in een RAIL die horizontaal doorloopt, zodat het blok werkt
   van één vestiging tot een stuk of tien zonder een half lege rij. De schuifbalk
   eronder is verborgen (keuze Jenny): schuiven gaat met vegen, muiswiel, de
   pijltjes of de tabtoets — een grijze balk onder een fotoblok oogt rommelig.
   ═══════════════════════════════════════════════════════════════════════════ */
.vst {
    /* De --r-*-rondingen stonden hier; ze staan nu bovenaan in :root, zodat elk blok ze heeft. */
    --vst-tekst: color-mix(in srgb, var(--medium-gray) 82%, var(--dark-gray));
    --vst-hair: color-mix(in srgb, var(--dark-gray) 12%, transparent);
    --vst-tint: color-mix(in srgb, var(--bty-warm) 8%, var(--bty-mix-licht));
    --vst-chip: color-mix(in srgb, var(--bty-accent) 16%, var(--bty-mix-licht));
    --vst-accent-text: color-mix(in srgb, var(--bty-accent) 42%, var(--dark-gray));
    --vst-schaduw: 0 14px 34px rgba(0, 0, 0, .07);
    --vst-schaduw-op: 0 24px 54px rgba(0, 0, 0, .13);

    font-size: 17px;
    line-height: 1.75;
    color: var(--vst-tekst);
    overflow-wrap: break-word;
}
.vst h2, .vst h3 { font-family: var(--alt-font); font-weight: 400; line-height: 1.2; color: var(--dark-gray); margin: 0; }
.vst a { color: inherit; }
.vst :focus-visible { outline: 2px solid var(--bty-accent); outline-offset: 3px; border-radius: 6px; }

/* Kop-patroon van de template: eyebrow │ serif-kop */
.vst-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px clamp(14px, 2vw, 26px); text-align: center;
    margin-bottom: clamp(34px, 4.5vw, 56px);
}
.vst-div { width: 1px; align-self: stretch; min-height: 1.6em; background: var(--vst-hair); flex: none; }
.vst-title { font-size: clamp(30px, 4.4vw, 50px); }

/* ── Rail: loopt horizontaal door, groeit mee van 1 t/m veel ─────────────── */
/*  Crafto's Swiper doet het schuiven (zie de partial). Hier alleen wat Swiper zelf niet regelt:
    gelijke kaarthoogtes. Een swiper-slide is standaard zo hoog als zijn inhoud, waardoor kaarten met
    een korte introtekst korter worden dan de rest en de rij rafelig oogt. */
.vst-slider { padding-block: 6px 10px; }
.vst-slider .swiper-slide { height: auto; display: flex; }
.vst-slider .swiper-slide > .vst-card { width: 100%; }

/*  Pijlen in de voetregel, naast de knop. Ze zweefden eerst naast de kaarten en overlapten die (Jenny
    03-08). Swiper zet zelf `swiper-button-disabled` op de knop aan het eind van de rij en
    `swiper-button-lock` als er niets te schuiven valt — die laatste verbergt hem via Swipers eigen CSS. */
/*  Logo-strip (Partners op de voorpagina). Bij minder dan tien logo's horen ze op ÉÉN regel te staan in
    plaats van een volle regel van vijf plus een halflege tweede. Het aantal kolommen is dan het aantal
    logo's, en dat kan meer zijn dan Bootstraps row-cols-* aankan (die stopt bij zes) — vandaar een
    variabele die de view zet. Alleen vanaf lg: op een telefoon zouden negen logo's naast elkaar 40px
    breed worden, dus daaronder blijft het gewone raster van twee of drie staan. */
@media (min-width: 992px) {
    .bty-logo-strip > * { flex: 0 0 auto; width: calc(100% / var(--bty-logo-kolommen, 5)); }
}

/*  Deze pijlen + voetregel zijn sinds 06-08 GEDEELD: Team en Producten op de voorpagina gebruiken
    dezelfde carrousel-chrome (.bty-sldr-*). De .vst-* namen blijven werken voor het vestigingenblok;
    de opmaak staat bewust maar op één plek in plaats van drie keer gekopieerd. */
.bty-sldr .swiper-slide { height: auto; }
.vst-nav, .bty-sldr-nav { display: flex; gap: 10px; }
.vst-prev, .vst-next, .bty-sldr-prev, .bty-sldr-next {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--r-btn);
    background: var(--bty-oppervlak); color: var(--dark-gray);
    box-shadow: var(--vst-schaduw);
    transition: background .25s ease, color .25s ease, opacity .25s ease;
}
/*  Tekstkleur volgt de accentkleur, niet een vaste witte. Bij een klant met een lichte huisstijl
    (oker, zand, mint) was wit-op-accent nauwelijks te lezen; --bty-on-accent kiest de leesbare kant. */
.vst-prev:hover, .vst-next:hover, .bty-sldr-prev:hover, .bty-sldr-next:hover { background: var(--base-color); color: var(--bty-on-accent, #fff); }
.vst-prev.swiper-button-disabled, .vst-next.swiper-button-disabled,
.bty-sldr-prev.swiper-button-disabled, .bty-sldr-next.swiper-button-disabled { opacity: .3; cursor: default; }
.vst-prev.swiper-button-disabled:hover, .vst-next.swiper-button-disabled:hover,
.bty-sldr-prev.swiper-button-disabled:hover, .bty-sldr-next.swiper-button-disabled:hover { background: var(--bty-oppervlak); color: var(--dark-gray); }

/* ── Kaart ──────────────────────────────────────────────────────────────── */
.vst-card {
    display: flex; flex-direction: column;
    background: var(--bty-oppervlak); border-radius: var(--r-card);
    box-shadow: var(--vst-schaduw);
    padding: clamp(10px, 1vw, 14px);
    transition: box-shadow .3s ease, transform .3s ease;
}
.vst-card:hover { box-shadow: var(--vst-schaduw-op); transform: translateY(-3px); }

.vst-media {
    position: relative; margin: 0; border-radius: var(--r-img); overflow: hidden;
    aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--dark-gray) 8%, var(--bty-mix-licht)); flex: none;
}
.vst-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Waas: houdt de pil leesbaar op zowel een licht als een donker beeld. */
.vst-media::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
    background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.vst-onfoto {
    position: absolute; inset: auto 0 0 0; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: clamp(10px, 1.4vw, 14px);
}

/* Labels (regio/type) en status: witte pil, altijd leesbaar. */
.vst-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.2;
    padding: 7px 13px; border-radius: var(--r-pill);
    background: var(--bty-oppervlak); color: var(--dark-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.vst-pill--label { background: color-mix(in srgb, var(--bty-mix-licht) 88%, var(--bty-accent)); color: var(--vst-accent-text); text-transform: uppercase; }
.vst-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--bty-accent); }
.vst-pill--open .vst-dot { background: color-mix(in srgb, var(--bty-accent) 55%, #1d7a3d); }
.vst-pill--dicht { color: var(--medium-gray); }
.vst-pill--dicht .vst-dot { background: color-mix(in srgb, var(--medium-gray) 60%, var(--bty-mix-licht)); }

/*  Labelregel in de kaart (regio/type). Zat op 14px onder + de volle bovenmarge van .vst-body erboven;
    samen was dat een brede witte band om één klein pilletje (Jenny 03-08). Strakker aangezet: de labels
    horen bij de naam eronder, niet als eigen blok in de kaart. */
.vst-meta-plat { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vst-meta-plat .vst-pill { box-shadow: none; background: var(--vst-tint); border: 1px solid var(--vst-hair); }
.vst-meta-plat .vst-pill--label { background: var(--vst-chip); border-color: transparent; }

/* ── Inhoud ─────────────────────────────────────────────────────────────── */
/* Bovenmarge korter: samen met de labelregel erin gaf de oude 18–24px een te brede witte band onder de foto. */
.vst-body { display: flex; flex-direction: column; flex: 1; padding: clamp(12px, 1.3vw, 16px) clamp(12px, 1.4vw, 16px) clamp(12px, 1.2vw, 14px); }
.vst-name { font-size: clamp(22px, 2.2vw, 27px); }
/* .vst-intro is vervallen: de introtekst staat niet meer op de kaart, zie de partial. */

.vst-lijst { list-style: none; display: grid; gap: 12px; margin: 18px 0 0; padding: 0; font-size: 16px; }
.vst-lijst > li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.vst-lijst svg { width: 18px; height: 18px; flex: none; color: var(--vst-accent-text); }
.vst-lijst > li > svg { margin-top: 5px; }
.vst-lijst a { text-decoration: none; }
.vst-lijst a:hover { color: var(--vst-accent-text); }
.vst-adres { font-style: normal; }
/* Telefoon en e-mail elk op een eigen regel, zodat kaarten gelijk lopen. */
.vst-lijst > li.vst-contact { display: grid; grid-template-columns: 1fr; gap: 10px; }
.vst-contact a { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: center; overflow-wrap: anywhere; }

/* Openingstijden — uitklapbaar zonder JavaScript (<details>). */
.vst-tijden { margin-top: 16px; border-top: 1px solid var(--vst-hair); padding-top: 14px; }
.vst-tijden > summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-size: 14.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--vst-accent-text);
}
.vst-tijden > summary::-webkit-details-marker { display: none; }
.vst-tijden > summary svg { width: 15px; height: 15px; transition: transform .25s ease; }
.vst-tijden[open] > summary svg { transform: rotate(180deg); }
.vst-tijden dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; }
.vst-tijden dt { color: var(--medium-gray); }
.vst-tijden dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--dark-gray); }
.vst-tijden .is-dicht { color: var(--medium-gray); }
.vst-tijden .is-vandaag dt, .vst-tijden .is-vandaag dd { font-weight: 600; color: var(--dark-gray); }

/* Acties: route is de hoofdactie, bellen en mailen ondergeschikt. */
/*  nowrap: de bel- en mailknop zijn 46px vast, dus bij vier kaarten naast elkaar viel de mailknop in
    zijn eentje op een tweede regel. De routeknop krimpt nu mee in plaats van ze eruit te duwen. */
.vst-acties { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; margin-top: auto; padding-top: 14px; }
/*  De routeknop is een gewone Crafto-knop (btn btn-small btn-base-color btn-round-edge) — zelfde stijl als
    overal elders in de template. Hier alleen nog het gedrag in de rij: hij vult de ruimte naast de bel- en
    mailknop en krimpt mee in plaats van ze eruit te duwen. Kleur, vorm en hover komen uit Crafto. */
.vst-route { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; }
.vst-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none; border-radius: var(--r-btn);
    background: var(--vst-tint); color: var(--vst-accent-text); text-decoration: none;
    transition: background .25s ease, color .25s ease;
}
.vst-mini:hover { background: var(--vst-chip); color: var(--dark-gray); }
.vst-mini svg { width: 18px; height: 18px; }

/*  Eén vestiging: brede kaart met het beeld naast de tekst. Swiper zet dan één slide over de volle
    breedte, dus de kaart mag liggend. */
@media (min-width: 992px) {
    .vst-slider[data-count="1"] .vst-card { flex-direction: row; align-items: stretch; gap: clamp(14px, 2vw, 26px); }
    .vst-slider[data-count="1"] .vst-media { flex: 1 1 46%; aspect-ratio: auto; min-height: 340px; }
    .vst-slider[data-count="1"] .vst-body { flex: 1 1 54%; justify-content: center; padding-block: clamp(24px, 3vw, 40px); }
    .vst-slider[data-count="1"] .vst-tijden dl { max-width: 340px; }
    .vst-slider[data-count="1"] .vst-acties { max-width: 420px; }
    .vst-slider[data-count="1"] .vst-route { flex: 0 1 auto; }
}

/*  Voetregel: pijlen links, knop in het midden. De knop is een gewone Crafto-knop (zelfde als onder
    projecten, diensten en vacatures), dus daar staat hier geen eigen opmaak meer voor. */
.vst-foot, .bty-sldr-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: clamp(22px, 3vw, 34px); }
.vst-foot > .btn, .bty-sldr-foot > .btn { margin-inline: auto; }
@media (max-width: 575.98px) {
    .vst-foot, .bty-sldr-foot { justify-content: center; }
    .vst-foot > .btn, .bty-sldr-foot > .btn { width: 100%; order: -1; }
}

/* Op een blok met een donkere of gekleurde achtergrond (klantinstelling). */
:is(.wf-block-dark, .wf-on-dark) .vst-title { color: #fff; }
:is(.wf-block-dark, .wf-on-dark) .vst-div { background: rgba(255, 255, 255, .3); }
:is(.wf-block-dark, .wf-on-dark) .vst-alle { background: var(--bty-oppervlak); color: var(--dark-gray); }
@media (prefers-reduced-motion: reduce) { .vst * { transition: none !important; } }

/* Vierkant, voor kleine duimnagelreeksen in een kaart (bv. extra foto's bij een project). */
.bty-thumb-square {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ---- Drie uitgelichte punten: streepje op de titelregel ----------------------
   Het streepje is 2px hoog en stond bovenaan de titelregel (die 32px hoog is), dus 15px boven het midden
   van de titel — dat leest als een misuitlijning. Nu gecentreerd op de EERSTE regel van de titel, ook als
   die over twee regels valt. Toen het nummer 01/02/03 er nog stond viel dit niet op, want dat nummer had
   zelf de hoogte van een tekstregel. */
.bty-process .process-step-icon-wrap { margin-top: 15px; }
@media (max-width: 991px) { .bty-process .process-step-icon-wrap { margin-top: 14px; } }

/* Telefoon: streepje weg, tekst gecentreerd (wens Tom, 24-08). Het verbergen zelf gebeurt in de view
   met d-none d-md-flex; hier staat wat er aan ruimte omheen zat.

   De inspringing naast het streepje geldt daarom alleen vanaf tablet. Die stond eerst als Crafto-klasse
   ms-15px in de markup, maar die is !important en bleef dus ook op de telefoon staan — de tekst kwam
   daardoor 7,5px rechts van het midden uit, precies genoeg om scheef te ogen.

   De punt krijgt op de telefoon de volle breedte, zodat "gecentreerd" het midden van de pagina is en
   niet het midden van de eigen tekstbreedte (anders staat een kort punt ergens anders dan een lang). */
@media (max-width: 767.98px) { .bty-process .process-step-item { width: 100%; } }
@media (min-width: 768px)    { .bty-process .process-content   { margin-left: 15px; } }

/* ---- Over ons: geen gat tussen de actiebalk en de foto -----------------------
   De tekstkolom heeft pt-7/pb-7 (~100px) en is daardoor hoger dan de foto; omdat de rij centreert bleef
   er ~177px lucht boven én onder de foto staan. De foto rekt nu mee met de rij, zoals het panel in de
   Crafto-demo. Op tablet/mobiel stapelen de kolommen, dan gewoon een nette vaste hoogte.

   De hoogtegrenzen staan bewust op de KOLOM en niet op de foto: die kolom draagt het slide-in-effect
   (data-anime), dus toen de foto op 640px werd afgekapt terwijl de kolom met de tekst meegroeide, veegde
   de kleur een flink stuk onder de foto door — bij Frenque 91px. Door de grenzen op de kolom te zetten en
   de foto hem simpelweg te laten vullen, volgt de veeg altijd exact de foto. */
.bty-about .row.align-items-center { align-items: stretch !important; }
.bty-about .row > [class*="col-"]:first-child { display: flex; min-height: 420px; max-height: 640px; }
.bty-about .bty-about-img { height: 100%; object-fit: cover; }
/*  De tekst van de intro hoger in zijn kolom (Tom 19-10-2026): 60px minder ruimte erboven op een breed scherm,
    naar verhouding minder daaronder (4,17vw = 60px bij 1440, 50px bij 1200, ~40px bij 992) en 30px op tablet en
    telefoon. Naast de foto (vanaf 992px) vervalt ook de ruimte eronder: dan is het gat naar de USP-balk even groot
    als de ruimte onder die balk. Onder 992px staat de tekst onder de foto en was die ondermarge al goed. */
@media (min-width: 992px) {
    .bty-about .row > [class*="col-"]:last-child { padding-top: max(20px, calc(7% - clamp(30px, 4.1667vw, 60px))) !important; padding-bottom: 0 !important; }
}
@media (max-width: 991.98px) {
    .bty-about .row > [class*="col-"]:last-child { padding-top: max(0px, calc(7% - 30px)) !important; }
}
@media (max-width: 991px) {
    .bty-about .row.align-items-center { align-items: center !important; }
    .bty-about .row > [class*="col-"]:first-child { display: block; min-height: 0; max-height: none; }
    .bty-about .bty-about-img { height: auto; max-height: 360px; }
}

/* ---- Telefoonknop naast de oproepknop (over ons) ---------------------------
   Het telefoonnummer stond op Crafto's .btn-link: dat is géén knop maar een onderstreping (alleen een
   border-bottom). Sitebreed krijgt élke .btn de hoekronding van de klant mee
   (_SiteLayout: `.box-layout .btn { border-radius: … !important }`), en op een losse onderstreping
   levert dat een halve, zwevende bak op — een lijn die aan beide kanten omhoog krult (Jenny 31-08-2026).

   Nu een echte tweede knop: zelfde hoogte en vorm als de hoofdknop ernaast, maar omlijnd in plaats van
   gevuld, zodat het bellen ondergeschikt blijft aan de hoofdactie. De naam bevat bewust "-btn": daardoor
   pakt de selector [class*="-btn"] uit _SiteLayout de knop mee en volgt hij de knop-ronding van de
   klant; --r-btn is de terugval als de klant niets heeft ingesteld. */
.bty-btn-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;   /* 26px regelhoogte + 2x14 + 2x1px rand = 56px, gelijk aan de knop ernaast */
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    color: var(--bty-atext);
    border: 1px solid color-mix(in srgb, var(--bty-accent) 40%, var(--bty-line));
    border-radius: var(--r-btn);
    background: transparent;   /* KNOPOPPERVLAK: neemt de kleur van het blok over */
    transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.bty-btn-call i { font-size: 18px; line-height: 1; }
.bty-btn-call:hover {
    color: var(--bty-atext);
    border-color: var(--bty-accent);
    background: color-mix(in srgb, var(--bty-accent) 8%, var(--bty-mix-licht));
}
.bty-btn-call:focus-visible { outline: 2px solid var(--bty-accent); outline-offset: 3px; }
/*  Op een blok met een donkere of gekleurde achtergrond: dezelfde omkering als de andere hairlines. */
:is(.wf-block-dark, .wf-on-dark) .bty-btn-call { color: #fff; border-color: rgba(255, 255, 255, .45); }
:is(.wf-block-dark, .wf-on-dark) .bty-btn-call:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }
/*  Op de telefoon staan de twee knoppen onder elkaar (de wrapper is d-sm-flex); dan even breed. */
@media (max-width: 575.98px) { .bty-btn-call { display: flex; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .bty-btn-call { transition: none; } }

/* Eigen beeld van de actiebanner: groot genoeg om de foto te kunnen zien, maar de balk blijft smal.
   Op mobiel iets kleiner zodat kop en tekst niet in de verdrukking komen. */
.bty-promo-img { width: 96px; height: 96px; object-fit: cover; }
@media (max-width: 767px) { .bty-promo-img { width: 72px; height: 72px; } }
/*  Foto en tekst van de actiebanner staan los op de balk, nooit in een kaart (Tom 28-09-2026). Crafto noemt dit
    blok .feature-box, en die klasse telt voor "Zachte schaduw" (wf-content.css) en de kaart-afronding
    (_SiteRadiusCss) als kaart: dan verscheen er een wit vlak met schaduw achter. */
.box-layout .bty-promo .feature-box { box-shadow: none !important; background: none !important; border-radius: 0 !important; }

/* Actiebanner-balk onder de hero. Tot 19-10-2026 visueel afgekapt op twee regels; nu staat de tekst er volledig
   (Tom) en kort de view hem pas boven de 400 tekens in met "…" (_HeroBanner_Home, KortBanner). */
.bty-promo .feature-box-content p { margin-bottom: 0; }

/* Telefoonnummer en knoptekst nooit afbreken: "053 - 436 81 73" viel over twee regels
   en duwde de balk hoger. */
.bty-nav .bty-phone { white-space: nowrap; }
/* Geldt voor de knop zelf én voor de variant met een .btn-text-span erin (hero/CTA). */
.bty-nav .btn,
.bty-nav .btn .btn-text { white-space: nowrap; }

/* Menu met veel items (lange labels) mag netjes over meerdere regels vallen — gecentreerd, alle items
   zichtbaar (incl. Contact), zonder tegen logo/CTA te botsen. Iets compactere item-tussenruimte zodat er
   meer op één regel past. */
.bty-nav .navbar-nav { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.bty-nav .navbar-nav > .nav-item > .nav-link { padding-left: 13px; padding-right: 13px; }
@media (min-width: 992px) {
    .bty-nav .navbar-collapse { justify-content: center; }
    .bty-nav .menu-order { flex: 1 1 auto; min-width: 0; }
}

/* ---- Footer ---------------------------------------------------------------
   Geërfde Crafto-regelhoogte op footer-li's kan regels laten "overslaan";
   expliciet nette regelhoogte. Snelle links zonder bullets, met hover. */
.bty-footer .bty-footer-links li { line-height: 1.4; }
.bty-footer .bty-footer-links a:hover { opacity: 1 !important; text-decoration: underline; }
.bty-footer .footer-navbar li a:hover { opacity: 1; }

/* Footer effen in de Donkere kleur van de klant. De Crafto-klassenaam verwijst nog naar het
   oorspronkelijke verloop (blauw -> brons); dat verloop is vervallen omdat de tweede kleur niet uit de
   huisstijl kwam maar erbij werd gerekend. Zie _BrandVars.cshtml. */
.bty-footer.bg-gradient-blue-ironstone-brown {
    background: var(--bty-footer-grad);
}
/* Groter footer-logo (op verzoek) en kolomtitels licht i.p.v. accent (contrast op donker). */
.bty-footer .footer-logo img { max-height: 72px; width: auto; }
/*  Eigen logohoogte in de footer (Layout website > Footer > Logo & bedrijfstekst, Tom 14-09-2026). Alleen als de
    klant de schuif gebruikte; anders blijft de 72px hierboven. Op een telefoon hooguit 120px. */
.bty-footer .footer-logo.wf-flogo-maat img { height: var(--wf-flogo-h, 72px); max-height: none; max-width: min(480px, 100%); object-fit: contain; object-position: left center; }
@media (max-width: 575.98px) { .bty-footer .footer-logo.wf-flogo-maat img { height: min(var(--wf-flogo-h, 72px), 120px); } }
.bty-footer .text-base-color { color: var(--bty-on-dark-warm) !important; }

/* Onderbalk: één regel met "Powered by Webfix" + juridische links. De rij met paginalinks en het scheidings-
   streepje eronder zijn eruit (Jenny 04-08); de bijbehorende regels .bty-footer-nav en
   .bty-footer-subdivider zijn daarmee ook vervallen. */
/*  Copyright én juridische links krijgen één en dezelfde kleur, gezet op de RIJ zodat beide hem erven.
    De copyrightregel had er geen: die viel terug op de donkere bodykleur van de template en was op de
    donkere footer vrijwel onleesbaar, terwijl "Privacyverklaring · Disclaimer" ernaast wit stond
    (Tom, 11-08). Bewust --bty-on-dark-warm en geen vast #fff: die kleur is #fff gemengd met de
    Steunkleur van de klant, dus hij beweegt mee zodra iemand in de kleurenwizard iets wijzigt — precies
    zoals de rest van de footer (zie .bty-footer .text-base-color). */
.bty-footer-legalrow { font-size: 13px; line-height: 1.7; opacity: .8; color: var(--bty-on-dark-warm, #fff); }
/*  De juridische links kregen hun streep alléén bij :hover, en op een telefoon bestaat hover niet —
    daar was dus nergens aan te zien dat het links wáren (Jenny 24-08). De streep staat er nu altijd,
    net als onder "E-mail ons" in de contactkolom hierboven, zodat de hele footer één taal spreekt.
    Bewust een border-bottom en geen text-decoration: die laatste snijdt dwars door de staarten van de
    p en de y in "Privacyverklaring", een border valt netjes onder de hele regel.
    Bij hover wordt de streep féller in plaats van dat er een tweede bij komt. Dat het de streep is die
    beweegt en niet de tekst, is geen smaak maar noodzaak: de hele rij staat op opacity .8, en opacity
    stapelt naar beneden — een kind kan daardoor nooit lichter worden dan zijn ouder. */
/*  Niet de "Powered by Webfix"-link: die staat sinds 10-09-2026 in deze rij en kreeg de streep er
    ongevraagd bij. Hij liep dan óók onder het diamantje door en lag een paar pixels lager dan de
    streep onder de juridische links ernaast — twee onderstrepingen op verschillende hoogtes in één
    regel. Een diamantje met een merknaam leest bovendien als een logootje, niet als een link in een
    zin, dus daar hoort die streep sowieso niet. */
.bty-footer-legalrow a:not(.wf-poweredby-link) {
    color: inherit;
    border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    transition: border-bottom-color .35s ease;
    /*  Een label van twee woorden brak middenin zodra de regel vol was: "Algemene" op de ene regel en
        "voorwaarden" op de volgende, allebei onderstreept alsof het twee links waren. De rij mag wél
        afbreken, maar tússen de links — daar staat het scheidingsteken al voor. Zelfde reden als de
        nowrap op .bty-footer-rights hierboven. */
    white-space: nowrap;
}
.bty-footer-legalrow a:not(.wf-poweredby-link):hover { border-bottom-color: currentColor; }
.bty-footer-legalrow .bty-footer-sep { margin: 0 8px; opacity: .45; }
/*  Desktop: net als business1 staat "Powered by Webfix" links onder de eerste kolom en staan de
    juridische links rechts onder de laatste (Tom 14-09). Het puntje voor de eerste link scheidt dan niets. */
@media (min-width: 992px) {
  .bty-footer-legalrow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
  .bty-footer-legalrow .bty-footer-legal > .bty-footer-sep:first-child { display: none; }
}
/*  Hier verborgen twee regels het scheidingsteken vóór de eerste juridische link, voor het geval het
    copyright ontbrak. Weg sinds 10-09-2026: "Powered by Webfix" staat nu altijd vóór die links, dus
    dat eerste · scheidt wél iets en hoort gewoon zichtbaar te zijn. */

/*  Sinds 10-09-2026 ongebruikt (-copy, -rights en -dash): de copyrightregel wordt niet meer
    gerenderd. Blijft staan voor als de optie terugkomt — Tom noemde het uitzetten tijdelijk. */
.bty-footer-legalrow .bty-footer-copy { color: inherit; opacity: .95; }

/*  De rechtenzin breekt nooit middenin, op geen enkele breedte: hij is kort genoeg om altijd te
    passen, en "Alle rechten" op de ene regel met "voorbehouden" op de volgende leest als een fout. */
.bty-footer-legalrow .bty-footer-rights { white-space: nowrap; }

/*  Telefoon en tablet: de onderbalk als losse regels onder elkaar in plaats van één doorlopende zin.
    Die paste tot 991px niet en brak op een willekeurige plek: op een telefoon middenin de rechtenzin,
    op een tablet met een los scheidingsteken aan het eind van de eerste regel en "Disclaimer" alleen
    op de tweede. Het scheidingsteken vóór de eerste link is dan overbodig — dat scheidde precies de
    stukken die nu al op eigen regels staan. 991px is de grens die de rest van deze footer ook
    aanhoudt (sm-pt-40px en verder).
    Sinds 10-09-2026 zijn het er twee: "Powered by Webfix" en daaronder de juridische pagina's. De
    regels voor de bedrijfsnaam en de rechtenzin staan er nog voor als de copyrightregel terugkomt. */
@media (max-width: 991.98px) {
  /*  -copy, -rights en -dash zijn hier sinds 10-09-2026 ongebruikt, net als hierboven; alleen de
      juridische links worden nog een blok. "Powered by Webfix" heeft daar geen eigen regel voor
      nodig: zodra .bty-footer-legal een blok is, valt het regeltje ervóór vanzelf op een eigen
      regel, gecentreerd door het text-center van de rij. */
  .bty-footer-legalrow .bty-footer-copy,
  .bty-footer-legalrow .bty-footer-rights,
  .bty-footer-legalrow .bty-footer-legal { display: block; }
  .bty-footer-legalrow .bty-footer-dash { display: none; }
  .bty-footer-legalrow .bty-footer-legal > .bty-footer-sep:first-child { display: none; }
  /*  Een slag kleiner dan de rechtenzin erboven (13 → 12px, ongeveer 1pt) en er wat verder vanaf
      (Jenny 24-08). Zodra ze op een eigen regel staan mogen de juridische links ondergeschikt zijn
      aan het copyright; de extra marge maakt van die derde regel een eigen groepje in plaats van
      een vervolg op de zin erboven. Alleen hier: op desktop staan ze mét de copyrightregel op één
      doorlopende regel, en dan zouden twee verschillende korpsen midden in die regel botsen. */
  .bty-footer-legalrow .bty-footer-legal { font-size: 12px; margin-top: 6px; }
}

/* ---- Footerkolommen: één raster voor alle schermformaten ------------------
   Hiervoor deden drie systemen door elkaar het werk: Bootstrap-kolomklassen
   (col-lg-3 col-md-4 col-sm-6), een truc met negatieve rijmarges plus extra
   kolompadding voor de tussenruimte, en vanaf 1320px een CSS-raster. Elk
   breekpunt had daardoor zijn eigen tussenruimte (30px, 20px, 40px), en op twee
   plekken viel er een kolom als wees op een tweede rij: bij vijf blokken tussen
   992 en 1320px (col-lg-3 = vier per rij) en bij vier blokken op een tablet
   (col-md-4 = drie per rij, met het logo op volle breedte erboven).
   Nu is het één raster met overal dezelfde tussenruimte, dat zélf telt hoeveel
   blokken de klant aan heeft staan — dat zijn er één tot vijf — en daar per
   schermbreedte een verdeling zonder wees bij kiest. `:has(> :nth-child(N))`
   leest als "heeft minstens N kolommen"; met een `:not()` erbij wordt het
   "precies N".
   Die selectors staan in `:where()` zodat ze even zwaar wegen als een kale
   klasse: de breekpunten hieronder overschrijven elkaar dan gewoon op volgorde,
   zonder dat het smalste breekpunt door zijn `:has()` het breedste verslaat.
   (Jenny 02-09) */
.bty-footer-cols {
    display: grid;
    /*  `1fr` en niet `minmax(0, 1fr)`. Dat laatste is de gebruikelijke schrijfwijze, maar het zet de
        ondergrens van een kolom op nul: inhoud die niet kan krimpen — de tabel uit de rich-text-editor,
        met cellen die niet afbreken — steekt er dan gewoon buiten. Met `1fr` is de ondergrens de
        inhoud zelf, dus houdt zo'n kolom de breedte die hij nodig heeft en leveren de andere in. */
    grid-template-columns: 1fr;
    gap: 40px;
    justify-content: center;
}
/*  Bewust GEEN `min-width: 0` op de kolommen. Dat is de gebruikelijke reflex bij een raster, maar hier
    pakt hij verkeerd uit: een rasterkolom mag dan smaller worden dan zijn inhoud, en dat betekent niet
    dat de inhoud meekrimpt — die loopt gewoon over de buurkolom heen, zonder dat het als overloop
    meetelt. Bij vijf kolommen rond 1320px gebeurde dat meteen: de openingstijden staan daar op 290px
    (zie verderop) en kregen een kolom van 251px. Zonder die regel is de ondergrens van een kolom zijn
    eigen inhoud, dus schuift er nooit iets over elkaar heen; het plafond van 340px hieronder zorgt dat
    één lang woord — een e-mailadres — de rij ook niet kan opblazen. */

/*  Telefoon staand: alles onder elkaar en gecentreerd (dat laatste doen de
    tekstklassen in de markup: `text-center`, en vanaf 576px `text-sm-start`).
    Vanaf 576px twee kolommen, ongeacht het aantal blokken; drie zou op een
    container van 540px op 150px per kolom uitkomen. Een oneven laatste kolom
    staat linksonder en leest daar als het begin van een nieuwe rij — de inhoud
    is links uitgelijnd, dus er valt geen gat naast. */
/*  Crafto zet globaal `word-break: break-word` (style.css). In een raster is dat dubbel schadelijk:
    een straatnaam brak niet alleen middenin ("Nijverheidstraa / t 11"), de kolom mócht daardoor ook
    zo smal worden als één letter, want een kolom is standaard zo breed als zijn kleinst mogelijke
    stukje tekst. Met `word-break: normal` is dat kleinste stukje weer een héél woord, dus krijgt de
    kolom vanzelf de breedte die haar langste woord nodig heeft. `overflow-wrap: break-word` blijft
    staan als vangnet: een woord dat in zijn eentje niet past — een lang e-mailadres — mag alsnog
    breken, maar het telt niet mee bij het verdelen van de breedte. Zelfde reparatie als bij de
    artikelentabel verderop in dit bestand. */
.bty-fcol { word-break: normal; overflow-wrap: break-word; }
/*  De bedrijfsnaam boven het adres: iets groter en vetter dan de regels eronder, met lucht ertussen
    zodat het als één blokje leest (Tom 21-09-2026). Geen eigen kleur: de naam volgt de kleur van de
    footer van deze klant -- hardcoded wit ging mis bij een lichte footer. */
.bty-foot-org { margin: 0 0 14px; font-size: 17px; font-weight: 600; line-height: 1.5; }
/*  In de hoofdkleur (Tom 04-10-2026), in de variant die op de donkere footer leesbaar blijft: een donkere hoofdkleur
    wordt opgetild (--brand-primary-ondark, _SiteLayout). */
.bty-footer .bty-foot-org { color: var(--brand-primary-ondark, inherit); }
/*  Zelfde letter en maat als het adres eronder, alleen vet, en zonder extra ruimte: de naam leest als de eerste
    regel van het adresblok, met dezelfde regelafstand als tussen straat en postcode (Tom 04-10-2026). */
.bty-footer .bty-foot-org { font-size: inherit; font-weight: 700; line-height: 30px; margin: 0; }

@media (min-width: 576px) {
    .bty-footer-cols:where(:has(> :nth-child(2))) { grid-template-columns: repeat(2, 1fr); }
}

/*  Tablet: drie kolommen zodra dat zonder wees kan. Bij vier blokken blijft het
    daarom bewust op twee (2 + 2) in plaats van 3 + 1; bij vijf levert drie juist
    een nette 3 + 2 op. */
@media (min-width: 768px) {
    .bty-footer-cols:where(:has(> :nth-child(3)):not(:has(> :nth-child(4)))),
    .bty-footer-cols:where(:has(> :nth-child(5))) { grid-template-columns: repeat(3, 1fr); }
}

/*  Vanaf 992px staat alles op één rij, hoeveel blokken het ook zijn — ook bij
    vijf (keuze Jenny 02-09).
    `grid-auto-flow: column` legt ze naast elkaar; `grid-auto-columns: auto`
    geeft elke kolom de breedte die zijn inhoud nodig heeft in plaats van vijf
    keer dezelfde. SINDS 14-09 (Tom): gelijke kolommen over de volle breedte, zoals business1 — de
    groep stond gecentreerd en oogde op elkaar gepropt terwijl er ruimte over was. `1fr` houdt de inhoud
    als ondergrens, dus een brede kolom (openingstijden) krijgt nog steeds wat hij nodig heeft. Het plafond van
    340px houdt die tekst leesbaar: "naar behoefte" betekent anders "zo breed als
    de langst mogelijke regel". Blijft er ruimte over — bij twee of drie blokken
    op een breed scherm — dan staat de groep gecentreerd in plaats van uitgesmeerd.
    De tussenruimte schaalt mee met het scherm (24 tot 40px): op 992px zou 40px
    te veel van de kolombreedte opeten, op 1600px is 24px te krap. Vanaf 1320px
    zit hij op zijn plafond en is hij dus gelijk aan de 40px van hiervoor. */
@media (min-width: 992px) {
    .bty-footer-cols {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 1fr;
        column-gap: clamp(28px, 3.2vw, 56px);
    }
    .bty-fcol { max-width: 340px; }
}

/*  Openingstijden krijgen een ondergrens zodra de kolommen naast elkaar staan: de dagnaam en de tijd
    horen op één regel, en samen hebben ze ~181px nodig. Zonder die grens kreeg de tabel bij vijf
    kolommen op een middelgroot scherm nog geen 140px en moest de tijd ónder de dag — dat maakte de
    footer twee keer zo hoog en zette hem scheef naast de buurkolom. De grens telt mee in de verdeling
    (de kolommen hebben geen `min-width: 0`, zie boven), dus de andere kolommen staan die ruimte af in
    plaats van dat er iets overloopt. */
@media (min-width: 992px) {
    .bty-hours { min-width: 190px; }
}

@media (min-width: 1320px) {
    /*  Bredere footer dan de rest van de pagina (Jenny 04-08). Crafto's `.container` stopt op 1220px,
        waardoor er op een 1920-scherm zo'n 350px aan élke kant ongebruikt bleef terwijl de kolommen
        krap zaten. Hier tot 1600px, met altijd minstens 80px lucht aan weerszijden zodat de footer nooit
        tegen de schermrand plakt. Ook op de onderbalk, anders lopen copyright en juridische links niet
        meer in de pas met de kolommen erboven. */
    /*  Sinds 14-09 (Tom) dezelfde maat als business1: 1200px, en 1360px bij vier of vijf blokken. De
        1600px van hiervoor liet de kolommen op een breed scherm te ver uit elkaar lopen. */
    .bty-footer .container { max-width: min(1200px, 100% - 160px); }
    .bty-footer:has(.bty-footer-cols > :nth-child(4)) .container { max-width: min(1360px, 100% - 160px); }

    /*  Openingstijden krijgen als enige een ondergrens: zonder deze regel krimpt de tabel naar zijn
        krapste vorm en zou hij juist smaller worden dan voorheen. Met 290px staan de dagnaam en de tijd
        ruim uit elkaar in plaats van tegen elkaar aan.
        Specifieker geschreven dan de basisregel (`.bty-hours-week { max-width: 250px }`): die staat
        verderop in dit bestand en zou bij gelijke specificiteit winnen, waardoor de tabel op 250px bleef
        staan terwijl de kolom al 290px breed was. */
    .bty-hours { min-width: 290px; }
    .bty-footer-cols .bty-hours-week { max-width: 290px; }

    /*  Alleen hier niet afbreken: bij deze kolombreedte past "Donderdag  10:00 – 17:00" op één regel en
        oogt een afgebroken dagnaam ("Donde/rdag") slordig. Onder deze breedte staat nowrap juist in de
        weg — dan schuiven dag en tijd tegen elkaar aan in plaats van netjes onder elkaar te vallen. */
    .bty-hours-day dt, .bty-hours-day dd { white-space: nowrap; }
}

/* Rich-text uit de footer-editor (tabellen/lijsten) leesbaar op donkere footer.
   De tabel staat op inline-table zodat hij de uitlijning van zijn kolom vólgt. Een gewone tabel is een
   blok met marge 0 en blijft dus links plakken, ook in een kolom die op mobiel gecentreerd hoort te
   staan — precies wat er met de openingstijden gebeurde (de editor zet er een eigen breedte op, dus de
   tabel vult de kolom niet vanzelf). Zo klopt het op elk schermformaat, zonder losse breekpunt-regels. */
.bty-footer-richtext table { width: 100%; max-width: 100%; display: inline-table; }
.bty-footer-richtext td { padding: 2px 10px 2px 0; white-space: nowrap; vertical-align: top; }
/* De laatste cel houdt geen rechtermarge: anders staat de tabel optisch een paar pixels links van het
   midden, terwijl zijn kader netjes gecentreerd is. */
.bty-footer-richtext td:last-child { padding-right: 0; }
.bty-footer-richtext a { color: #fff; text-decoration: underline; }
/*  Knop uit de tekstverwerker in het vrije footerblok. De regel hierboven onderstreept elke link in
    dat blok en zet hem wit; op een knop hoort geen onderstreping, en Bootstraps eigen blauw hoort er
    ook niet. Dit is de gevulde knop van beauty1 zelf (btn-base-color), op de donkere footer.
    Zie de gelijke regel in custom-business1.css voor het waarom van de footer-klasse ervoor. */
.bty-footer .bty-footer-richtext a.btn {
  padding: 11px 24px; border: 0; border-radius: var(--wf-radius-button, 100px);
  /*  --base-color en niet --brand-secondary: dat is de kleur waarmee beauty1 zijn eigen gevulde knop
      maakt (.btn-base-color), dus zo lijkt deze knop op alle andere knoppen van de site. De
      secundaire huisstijlkleur is daar ongeschikt voor — die is bij een deel van de klanten een
      neutraal grijs met donkere tekst (klant 78 heeft #8c8c8c), en dat werd een grijze knop met
      bijna-zwarte letters op de donkere footer. */
  background: var(--base-color, var(--brand-primary)); color: var(--bty-on-accent, #fff);
  font-weight: 600; font-size: 14.5px; line-height: 1.3;
  transition: filter .2s ease, transform .2s ease;
}
.bty-footer .bty-footer-richtext a.btn:hover,
.bty-footer .bty-footer-richtext a.btn:focus {
  filter: brightness(1.15); color: var(--bty-on-accent, #fff); transform: translateY(-2px);
}


/* ---- Hero (Crafto beauty fullscreen beeld + donkere overlay) --------------- */
/* Hoogte via een variabele, zodat de klant in het dashboard (Voorpagina -> Slider -> Hoogte) een eigen
   hoogte kan zetten: die komt als inline --bty-hero-h op de sectie en erft door naar swiper en slides.
   Op smallere schermen kappen we hem af, anders duwt een op desktop gekozen 900px een telefoonscherm vol. */
.bty-hero,
.bty-hero-swiper,
.bty-hero-swiper .swiper-slide { height: var(--bty-hero-h, 100vh); min-height: min(var(--bty-hero-h, 560px), 560px); }
.bty-hero-slide { position: relative; overflow: hidden; }

/*  VIDEO-hero: dezelfde hero zonder swiper eromheen. De hoogte komt normaal van
    .bty-hero-swiper .swiper-slide; die wrapper is er bij een video niet, dus de slide pakt hem hier
    zelf. De tekst hoeft geen eigen regel: de verborgen beginstand hangt aan .swiper-initialized. */
.bty-hero-videoslide { height: 100%; }
/* Beeldlaag per slide (eigen laag i.p.v. background op de slide zelf, zodat Ken Burns / inzoomen het
   beeld kunnen schalen zonder de tekst mee te vergroten). */
.bty-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-position: center center; background-size: cover; background-repeat: no-repeat;
    will-change: transform;
}
/*  Ken Burns: doorlopende langzame zoom op het beeld van de zichtbare slide.
    Overgang "Inzoomen": het beeld komt bij het invaden van iets te groot naar zijn ware formaat.

    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. */
.bty-hero-kenburns { transform: scale(1); transition: transform 6s ease-out; }
.swiper-slide-active .bty-hero-kenburns { transform: scale(1.14); transition: transform 18s ease-out; }
.bty-hero-zoomin { transform: scale(1.12); transition: transform 6s ease-out; }
.swiper-slide-active .bty-hero-zoomin { transform: scale(1); transition: transform 1.6s var(--wf-ease, ease-out); }
/* Wie bewegende beelden liever niet ziet, krijgt een stilstaand beeld. */
@media (prefers-reduced-motion: reduce) {
    .bty-hero-kenburns, .swiper-slide-active .bty-hero-kenburns,
    .bty-hero-zoomin, .swiper-slide-active .bty-hero-zoomin { transform: none; transition: none; }
}
.bty-hero-overlay {
    position: absolute; inset: 0; z-index: 0;
    /* Vooral de LINKERkant verdonkeren (tekst leesbaar), naar rechts uitfaden zodat het model in de
       gegenereerde hero zichtbaar blijft. In de huisstijl getint. */
    background: linear-gradient(90deg,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .84) 0%,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .58) 38%,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .12) 68%,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), 0) 100%);
}
/* Klant zonder eigen slider-foto: de hero draagt dan de donkere huisstijlkleur in plaats van een
   vreemde stockfoto. De gradient-overlay hierboven fadet naar rechts naar doorzichtig — dat werkt
   alleen mét een foto eronder; zonder foto zou de witte titel rechts op de witte pagina vallen. */
.bty-hero-plain { background: rgb(var(--bty-ov-rgb, var(--bty-dark-rgb))); }
.bty-hero-plain .bty-hero-overlay { display: none; }
.bty-hero-sub { color: var(--bty-on-dark-warm-2); }
/* Hero-kop niet middenin een woord afbreken. */
.bty-hero-title { overflow-wrap: normal; word-break: normal; hyphens: none; }
/*  Maat van de hero-kop (Tom 28-09-2026). Crafto's vaste stappen (fs-110 / lg-90 / md-80 / xs-48) waren te groot:
    een lange kop werd vijf regels en de subtitel schoof tegen de rand van het menu. Nu één vloeiende schaal,
    ~34px op een telefoon tot ~90px op een groot scherm. De hulpklassen staan met !important, vandaar hier ook.
    Op een groot scherm krijgt de kop vooral meer BREEDTE (10 van de 12 kolommen in plaats van 7): zo blijft
    hij groot en past een lange kop in drie à vier regels. */
.bty-hero-title { font-size: clamp(34px, 18px + 3.9vw, 90px) !important; line-height: 1.08 !important; }
@media (min-width: 1400px) {
    .bty-hero .row > .col-lg-7:has(> .bty-hero-title) { flex: 0 0 auto; width: 83.3333%; }
}
/* Artikelentabel op de productpagina. Crafto zet globaal word-break:break-word, waardoor artikelnamen
   en -nummers middenin afbraken ("Zitsban / k") zodra de tabel in de smalle rechterkolom stond. Terug
   naar normaal afbreken; past de tabel dan niet, dan schuift de table-responsive eromheen mee. */
.bty-articles th, .bty-articles td { word-break: normal; overflow-wrap: normal; }
/* Oude prijs kleiner dan de prijs die betaald wordt: die laatste hoort de aandacht te krijgen, en het
   scheelt net genoeg breedte om de tabel binnen de rechterkolom te houden. */
.bty-was-price { font-size: .85em; }
.bty-hero .container { position: relative; z-index: 1; }
/*  Logo door de aanhef heen op een LAAG breed scherm (Tom 23-10-2026, HEJO 205: liggende iPad / laptop rond 1150x670).
    Vanaf 992px stond de dia-inhoud gecentreerd over de volle hoogte van de hero, zonder rekening te houden met de
    doorzichtige balk erover. Op een hoog scherm valt dat niet op; op een laag scherm met een lange titel groeit de
    inhoud naar boven en loopt de aanhef door een groot logo (gemeten: logo tot y166, aanhef vanaf y113).
    Oplossing zonder dat er op een groot scherm iets verschuift:
    - boven én onder dezelfde reservering (logohoogte + balkruimte), dus het midden blijft waar het was;
    - "veilig centreren" via automatische marges op de kolom: past de inhoud in de vrije ruimte, dan staat hij precies
      gecentreerd zoals voorheen; past hij niet, dan worden de marges nul en begint hij ónder de balk in plaats van erdoor.
    De logohoogte: wat de klant instelde (_Slider_Home zet --wf-logo-h/-m ook op de hero), anders de standaard van de
    balk -- 80px voor een liggend logo, 140px voor een staand logo (de kop zet dan .bty-logo-staand).
    Op een telefoon en tablet (<992px) geldt de vaste reservering van 137px hierboven en verandert er niets. */
@media (min-width: 992px) {
    .bty-hero { --bty-logo-std: 80px; }
    body:has(.bty-nav.bty-logo-staand) .bty-hero { --bty-logo-std: 140px; }
    .bty-hero .container.h-100 {
        --bty-kop-ruimte: calc(var(--wf-logo-h, var(--bty-logo-std)) + 2 * var(--wf-logo-m, 0px) + 65px);
        padding-top: var(--bty-kop-ruimte); padding-bottom: var(--bty-kop-ruimte);
    }
    .bty-hero .container.h-100 > .row.h-100 > [class*="col-"] { margin-top: auto; margin-bottom: auto; }
}
.bty-hero-swiper .swiper-button-prev,
.bty-hero-swiper .swiper-button-next { color: #fff; }
.bty-hero-pagination { position: absolute; bottom: 28px; left: 0; width: 100%; text-align: center; z-index: 2; }
/* Hier stond alleen de PLEK van de bolletjes, niet de kleur. Daardoor viel de actieve stip terug op
   Swipers eigen standaard-BLAUW (#007aff) en de rest op zwart — twee kleuren die in geen enkele
   huisstijl voorkomen. Zelfde oplossing als de hero van business1: op de foto gedempt wit (leesbaar
   op elke foto, ongeacht de klantkleuren), en de actieve stip in de Steunkleur van de klant. */
.bty-hero-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--white); opacity: .45; transition: opacity .25s ease, width .25s ease, background-color .25s ease; }
.bty-hero-pagination .swiper-pagination-bullet-active { opacity: 1; width: 30px; border-radius: 6px; background: var(--brand-secondary); }
/*  Op de telefoon zakken de nav-pijlen naar de onderrand, op één lijn met de bolletjes.
    Swiper centreert ze verticaal (top: 50%) en de hero-titel staat óók verticaal gecentreerd, dus op
    een smal scherm liggen ze bovenop elkaar: op 375px gemeten (16-08) staan de pijlen op y278-323 en
    loopt de titel van x15 tot x345 — de titel raakt dus allebei de pijlen. Zelfde oplossing als
    business1 op 15-08. 44px is de minimale aanraakmaat.
    De bolletjes blijven staan waar ze stonden (bottom: 28px, een keuze van deze template); de pijlen
    komen naar hen toe. Horizontaal botsen ze niet: de bolletjes staan gecentreerd (x134-226) en de
    pijlen aan de randen. De hero-inhoud houdt hier al afstand van, want die reserveert onderaan
    ruimte sinds de balk doorzichtig werd.

    `transform: none` hoort er echt bij: beauty1 centreert de pijlen niet met margin-top maar met
    translateY(-50%), en die bleef gewoon staan toen de pijlen naar beneden gingen — ze kwamen 22px
    te hoog uit (midden y535 tegen y558 voor de bolletjes, zichtbaar scheef). Nagemeten in de
    browser, want in de CSS is die transform nergens te zien; hij komt uit Swipers eigen stylesheet. */
@media (max-width: 991.98px) {
    .bty-hero-swiper :is(.swiper-button-prev, .swiper-button-next) {
        top: auto; margin-top: 0; transform: none; bottom: 21px; width: 44px; height: 44px;
    }
}
/* Tijdens het vervagen staan twee slides tegelijk in beeld; zonder dit liepen bij het wisselen twee
   koppen door elkaar heen. De tekst hoort alleen bij de slide die je ziet, en komt net na het beeld op.
   Hangt aan .swiper-initialized: draait de slider (nog) niet, dan staat de tekst gewoon vast. */
.swiper-initialized .bty-hero-slide .bty-hero-sub,
.swiper-initialized .bty-hero-slide .bty-hero-title,
.swiper-initialized .bty-hero-slide .btn {
    opacity: 0; transform: translateY(14px); transition: opacity .45s ease .25s, transform .45s ease .25s;
}
.swiper-initialized .swiper-slide-active .bty-hero-sub,
.swiper-initialized .swiper-slide-active .bty-hero-title,
.swiper-initialized .swiper-slide-active .btn { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .swiper-initialized .bty-hero-slide .bty-hero-sub,
    .swiper-initialized .bty-hero-slide .bty-hero-title,
    .swiper-initialized .bty-hero-slide .btn { transform: none; transition: opacity .2s linear; }
}
@media (max-width: 991px) {
    .bty-hero, .bty-hero-swiper, .bty-hero-swiper .swiper-slide { height: min(var(--bty-hero-h, 700px), 700px); }
}
@media (max-width: 575px) {
    .bty-hero, .bty-hero-swiper, .bty-hero-swiper .swiper-slide { height: min(var(--bty-hero-h, 600px), 600px); }
}

/* ---- Afsluitende contact/afspraak-CTA ------------------------------------- */
.bty-cta { position: relative; }
.bty-cta-overlay { position: absolute; inset: 0; z-index: 0; background: rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .66); }
.bty-cta > .container { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: 5rem; }
/*  Witte tekst op een FOTO (klasse staat alleen bij een foto-achtergrond, zie _Cta_Home.cshtml).
    Het waas eronder is een klantinstelling en kan licht staan: bij Frenque 41% in #877373, over een
    drukke foto met gezichten. De kop las daar nog, de kleinere lopende tekst niet. Een schaduw kost
    niets aan opmaak en werkt ongeacht hoe licht de foto of het waas is; hij komt BOVENOP het waas en
    overschrijft die klantkeuze dus niet. business1 heeft dit al sinds 15-08 — beauty1 had helemaal
    geen schaduw (gemeten: text-shadow: none op zowel kop als tekst). */
.bty-cta-onphoto h1, .bty-cta-onphoto h2, .bty-cta-onphoto h3,
.bty-cta-onphoto p { text-shadow: 0 1px 14px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .55); }
/*  Op de telefoon loopt dezelfde tekst over veel meer regels en dus over een veel wisselender stuk
    foto — een waas die op desktop nog volstaat, laat de tekst daar over lichte plekken en gezichten
    lopen. Bewust alleen de schaduw: staat het er dan nog slecht op, dan staat het waas te licht en
    is dat een instelling van de klant. */
@media (max-width: 991.98px) {
    .bty-cta-onphoto h1, .bty-cta-onphoto h2, .bty-cta-onphoto h3,
    .bty-cta-onphoto p { text-shadow: 0 1px 18px rgba(0, 0, 0, .85), 0 1px 4px rgba(0, 0, 0, .75); }
}

/* ---- Kwaliteit/veiligheid-sectie: donkere overlay over het achtergrondbeeld -- */
.bty-quality { position: relative; }
.bty-quality-overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .88) 0%, rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .70) 100%); }
.bty-quality > .container { position: relative; z-index: 1; }

/* ---- Contact + kaart: contactkaart mag boven de kaart klikbaar blijven ----- */
.bty-contactmap { overflow: hidden; }
/* Hoeken volgen de klantinstelling; 6px blijft de terugval (Crafto's oorspronkelijke waarde). */
.bty-contact-card { border-radius: var(--wf-radius-card, 6px); }
.bty-contact-hours-row { font-size: 14px; line-height: 24px; gap: 18px; }
/* Met zeven dagregels wordt de zwevende kaart hoger dan de vaste 550px van de sectie, en die snijdt
   af (overflow: hidden). De sectie groeit daarom mee met de kaart; 550px blijft de ondergrens, dus
   zonder openingstijden ziet het er precies zo uit als voorheen. */
@media (min-width: 576px) {
  .bty-contactmap { min-height: 550px; }
  .bty-contactmap > .container { padding-top: 40px; padding-bottom: 40px; }
}

/* ---- Dienst-detail: zijkolom naar de Crafto dienst-detaildemo's -------------
   Links een vaste kolom (andere diensten, belkaart, aanvraagformulier), rechts de inhoud. De kolom
   blijft op desktop meelopen bij het scrollen; op een telefoon zakt hij onder de inhoud (order in de
   view). Kleuren en hoeken volgen de huisstijl van de klant, niet die van de demo. */
/* Minder lucht tussen de kopbanner en de inhoud dan Crafto's standaard 90px: met de labelregel
   erbij werd de afstand tot de titel anders ruim 130px. */
.bty-svc-detail { padding-top: 55px; }

/* Het labeltje ("Populair", "Nieuw") ligt sinds 03-08 IN het beeld (.bty-card-badge), zodat de titel met
   én zonder label op dezelfde hoogte begint. Deze regel is nog de terugval voor een dienst ZONDER foto:
   dan staat het labeltje onder de introtekst. De hulpklasse .has-badge, die de zijkolom 39px liet zakken
   om de oude labelregel boven de titel in te halen, is daarmee overbodig geworden en verwijderd. */
.bty-svc-badge { height: 24px; display: flex; align-items: center; margin-top: 5px; }

.bty-svc-side { position: sticky; top: 110px; }
@media (max-width: 991.98px) {
  /* Op een telefoon staat de kolom ónder de inhoud: geen uitlijning nodig, wel wat lucht ertussen. */
  .bty-svc-side { position: static; margin-top: 50px; }
}

.bty-side-card {
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--bty-mix-licht));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--bty-mix-licht));
    border-radius: var(--wf-radius-card, 8px);
    padding: 30px;
    margin-bottom: 25px;
}
.bty-side-card h5 { font-size: 20px; }

/* Dienstenlijst: regels met een pijl, huidige dienst in de accentkleur. */
.bty-side-nav li { list-style: none; }
.bty-side-nav li + li { border-top: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--bty-mix-licht)); }
.bty-side-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dark-gray);
    transition: color .25s ease;
}
.bty-side-nav a i { flex: none; font-size: 15px; opacity: .45; transition: transform .25s ease, opacity .25s ease; }
.bty-side-nav a:hover { color: var(--base-ink); }
.bty-side-nav a:hover i { transform: translateX(4px); opacity: 1; }
.bty-side-nav a.is-current { color: var(--base-ink); font-weight: 600; }
.bty-side-nav a.is-current i { opacity: 1; }
.bty-side-all { font-size: 14px; color: var(--base-ink); }

/* Belkaart: het enige donkere vlak in de kolom, zodat het telefoonnummer eruit springt. */
.bty-side-call {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bty-dark);
    border-radius: var(--wf-radius-card, 8px);
    padding: 25px 30px;
    margin-bottom: 25px;
    color: #fff;
}
.bty-side-call-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: var(--brand-secondary);
    color: var(--brand-on-secondary, #fff);
    font-size: 20px;
}
.bty-side-call a { color: #fff; }
.bty-side-call a:hover { color: var(--brand-secondary); }

/* Het formulier in de kolom is smaller dan op de contactpagina: velden onder elkaar, knop over de
   volle breedte. De opmaak zelf komt uit de gedeelde _SiteForm-partial. */
.bty-side-form .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.bty-side-form .btn { display: block; width: 100%; text-align: center; }
/* Het AVG-blok is gemaakt voor een brede contactpagina: het schildicoon naast de tekst laat in deze
   smalle kolom te weinig over voor de regel. Icoon weg, tekst over de volle breedte. */
.bty-side-form .form-check { flex: 1 1 auto; min-width: 0; }
.bty-side-form .bi-shield-check { display: none; }
.bty-side-form .p-20px { padding: 15px !important; }
/* De partial brengt zijn eigen paneel mee (achtergrond + rand + 40px lucht). In de zijkolom zit dat
   paneel al ómheen, dus dat werd een doos in een doos. Binnenin alleen de velden. */
.bty-side-form .wf-site-form { background: transparent !important; padding: 0 !important; border: 0; }

/* Beeld op de dienst-detailpagina volgt de hoekinstelling van de klant. */
.bty-svc-hero { border-radius: var(--wf-radius-image, 6px); }
.bty-svc-thumb { border-radius: var(--wf-radius-image, 6px); aspect-ratio: 1 / 1; object-fit: cover; }
/* Het fotoraster opent de vergrote weergave; het vergrootglas-aanwijzertje maakt dat zichtbaar. */
.bty-svc-thumb-link { display: block; cursor: zoom-in; }

/* ---- Binnenpagina's: kopbanner, content-typografie, sectienav, kaarten ------ */
.bty-pagetitle {
    padding: 190px 0 90px;
    background-color: var(--bty-dark);
    background-position: center; background-size: cover;
}
.bty-pagetitle-overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .68) 0%, rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .80) 100%); }
.bty-pagetitle .container { position: relative; z-index: 1; }
.bty-pagetitle h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
@media (max-width: 991px) { .bty-pagetitle { padding: 150px 0 70px; } }

/* Rich-text content van pagina's (koppen, lijsten, tabellen, links) — geen nieuw CSS-bestand. */
.bty-page-body { color: var(--bty-ink); }
.bty-page-body h2, .bty-page-body h3, .bty-page-body h4 { font-family: var(--alt-font); color: var(--dark-gray, #232323); margin: 1.6rem 0 .8rem; line-height: 1.2; }
.bty-page-body h2 { font-size: 1.9rem; } .bty-page-body h3 { font-size: 1.5rem; } .bty-page-body h4 { font-size: 1.25rem; }
.bty-page-body p { margin-bottom: 1.1rem; }
.bty-page-body a { color: var(--bty-atext); text-decoration: underline; }
.bty-page-body ul, .bty-page-body ol { margin: 0 0 1.1rem 1.2rem; }
/* Crafto zet `ul li { list-style: none }`, dus verdwenen de opsommingstekens uit klantteksten: de lijst
   stond er wél, maar zonder bolletje of nummer.
   De standaard disc-stip bleek te iel voor deze template. Daarom een eigen teken: een klein ruitje in de
   accentkleur (vierkantje 45° gedraaid), wat past bij de elegante uitstraling en op elk scherm goed leest.
   Genest lijstje krijgt hetzelfde ruitje, maar open. Genummerde lijsten houden cijfers, in de accentkleur. */
.bty-page-body ul li {
    list-style: none;
    position: relative;
    padding-left: 1.5em;
}
.bty-page-body ul li::before {
    content: "";
    position: absolute;
    left: .15em;
    top: .62em;
    width: 8px;
    height: 8px;
    background: var(--bty-accent);
    border-radius: 1px;
    transform: rotate(45deg);
}
.bty-page-body ul ul li::before { background: transparent; border: 1.5px solid var(--bty-accent); }
.bty-page-body ol li { list-style: decimal outside; }
.bty-page-body ol li::marker { color: var(--bty-accent); font-weight: 700; }
.bty-page-body li { margin-bottom: .4rem; }
/* Citaat uit de editor. Hier stond niets voor blockquote, en Crafto en Bootstrap geven het element ook
   geen opmaak, dus een citaat van de klant kwam er uit als gewone alinea: geen inspringing, geen streep,
   zelfde letter en kleur als de tekst eromheen. Bij Meijerink stonden drie citaten in de over-ons-tekst
   die zo niet van de lopende tekst te onderscheiden waren. business1 (.biz-page-body) en business2
   (.b2-prose) hadden hun citaatopmaak al; alleen beauty1 miste hem. Zelfde idee — accentstreep plus een
   groot aanhalingsteken — maar met de tokens van deze template en in de kopletter, zoals de rest van de
   afwerking hier. font-style blijft normaal: zet de klant er zelf <em> omheen, dan telt dat nog steeds. */
.bty-page-body blockquote {
    position: relative;
    margin: 2.4rem 0;
    padding: 6px 0 6px 30px;
    border-left: 3px solid var(--bty-accent);
    font-family: var(--alt-font);
    font-size: 1.35rem;
    line-height: 1.5;
    font-style: normal;
    color: var(--dark-gray, #232323);
}
.bty-page-body blockquote::before {
    content: "\201C";
    position: absolute;
    left: 13px;
    top: -.24em;
    font-family: var(--alt-font);
    font-size: 3em;
    line-height: 1;
    color: color-mix(in srgb, var(--bty-accent) 26%, #fff);
    pointer-events: none;
}
.bty-page-body blockquote p:last-child { margin-bottom: 0; }
/* De centrale regeling in _SiteLayout.cshtml mikt op .wf-page-body; beauty1 heet .bty-page-body en viel
   daardoor buiten de boot — foto's in klantcontent hielden een vaste 6px. */
.bty-page-body img { max-width: 100%; height: auto; border-radius: var(--wf-radius-image, 6px); }
.bty-page-body table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.bty-page-body td, .bty-page-body th { border: 1px solid var(--bty-line); padding: 10px 14px; text-align: left; vertical-align: top; }
.bty-page-body table td[width], .bty-page-body table th[width] { width: auto !important; }

/* Sticky sectienavigatie op subpagina's. */
.bty-page-nav ul ul { list-style: none; }
.bty-page-nav li.active > a { color: var(--bty-atext); font-weight: 600; }
.bty-page-nav a:hover { color: var(--bty-atext); }

/* Subpagina-kaarten. */
.bty-page-card { transition: box-shadow .3s ease, transform .3s ease; }
.bty-page-card:hover { transform: translateY(-4px); }

/* Rich-text in intro/contact (zelfde stijl als page-body). */
.bty-richtext a { color: var(--bty-atext); text-decoration: underline; }
.bty-richtext ul, .bty-richtext ol { margin-left: 1.2rem; }

/* ---- Team-overlay: verschijnt bij hover (zoals Crafto team-style-05) ------- */
.team-style-05 .team-content { opacity: 0; transition: opacity .3s ease; position: absolute; inset: 0; }
.team-style-05:hover .team-content { opacity: 1; }

/* Donkere modus: de publieke site rendert in de klant-huisstijl; laat de
   Crafto-secties met een lichte achtergrond ook in dark mode goed leesbaar. */

/* ============================================================================
   Links voorpagina-blok — variant 1b "Editorial lijst" (2 kolommen, dunne
   scheidslijntjes, icoon + naam + pijl, geen kaders). Achtergrond uit de
   dashboard-blokopmaak; tekst/lijntjes kleuren mee met een lichte of donkere
   achtergrond (wf-on-light / wf-on-dark). Zie ook custom-business1.css.
   ========================================================================== */
.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: 17px; 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); }
.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); }
@media (max-width: 767px) { .wf-links-grid { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================================
   Blog — overzicht (Crafto "blog-metro"-kaart) + detail (blogger-classic)
   Eigen beauty1-uitstraling: foto boven, tekst eronder; huiskleuren via
   --brand-*/--bty-accent, koppen in alt-font. Geen wisselende tegelgroottes.
   ========================================================================== */

/* ---- Overzicht: nette kaart (foto boven, categorie + datum + titel eronder) */
.bty-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bty-oppervlak);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .35s ease, transform .35s ease;
}
.bty-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(var(--bty-dark-rgb), .16);
}
.bty-blog-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--bty-accent);
}
.bty-blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.bty-blog-card:hover .bty-blog-card-media img { transform: scale(1.07); }
.bty-blog-card-fallback {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bty-gradient);
}
.bty-blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 26px 28px 30px;
}
.bty-blog-card-cat {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--bty-atext);
    margin-bottom: 12px;
}
.bty-blog-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--bty-muted);
    margin-bottom: 8px;
}
.bty-blog-card-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}
.bty-blog-card-title {
    display: block;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--bty-dark);
    transition: color .3s ease;
}
.bty-blog-card:hover .bty-blog-card-title { color: var(--bty-atext); }
.bty-blog-card-readmore {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bty-atext);
}
.bty-blog-card-readmore i { transition: transform .3s ease; }
.bty-blog-card:hover .bty-blog-card-readmore i { transform: translateX(4px); }

/* ---- Detail: byline (categorie · auteur · datum + leestijd) ---------------- */
.bty-art-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(var(--bty-dark-rgb), .12);
}
.bty-art-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 30px;
    background: var(--bty-gradient);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.bty-art-author { display: flex; align-items: center; gap: 12px; }
.bty-art-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bty-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
}
.bty-art-author-label { font-size: 12px; color: var(--bty-muted-2); text-transform: uppercase; letter-spacing: .5px; }
.bty-art-author-name { font-size: 15px; font-weight: 600; color: var(--bty-dark); }
.bty-art-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.bty-art-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--bty-muted); }
.bty-art-meta i, .bty-art-cat i { font-size: 15px; }

/* ---- Detail: lead + tekst -------------------------------------------------- */
.bty-art-lead {
    font-size: 21px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--bty-dark);
    margin: 32px 0 30px;
}

/* ---- Detail: tags ---------------------------------------------------------- */
.bty-art-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(var(--bty-dark-rgb), .12);
}
.bty-art-tags-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--bty-dark); margin-right: 4px; }
.bty-art-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 30px;
    background: rgba(var(--bty-dark-rgb), .06);
    color: var(--bty-ink-2);
    font-size: 13px;
    transition: background .3s ease, color .3s ease;
}
.bty-art-tag:hover { background: var(--bty-accent); color: var(--bty-on-accent, #fff); }

/* ---- Detail: onderbalk (terug + delen) ------------------------------------- */
.bty-art-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid rgba(var(--bty-dark-rgb), .12);
}
.bty-art-share { display: flex; align-items: center; gap: 10px; }
.bty-art-share-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--bty-dark); }
.bty-art-share a, .bty-art-share button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--bty-dark-rgb), .06);
    color: var(--bty-dark);
    font-size: 15px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.bty-art-share a:hover, .bty-art-share button:hover { background: var(--bty-accent); color: var(--bty-on-accent, #fff); transform: translateY(-3px); }

/* ---- Detail: reacties ------------------------------------------------------ */
.bty-comment-list { list-style: none; margin: 0; padding: 0; }
.bty-comment { margin-bottom: 30px; }
.bty-comment-body { display: flex; gap: 16px; }
.bty-comment-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(var(--bty-dark-rgb), .08);
    color: var(--bty-dark);
    font-size: 16px;
    font-weight: 600;
}
.bty-comment-avatar-author { background: var(--bty-accent); color: var(--bty-on-accent, #fff); }
.bty-comment-main { flex: 1 1 auto; }
.bty-comment-name { font-size: 16px; font-weight: 600; color: var(--bty-dark); margin-right: 10px; }
.bty-comment-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 30px;
    background: var(--bty-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    vertical-align: middle;
}
.bty-comment-date { display: block; font-size: 13px; color: var(--bty-muted-2); margin-top: 2px; }
.bty-comment-text { margin: 10px 0 0; color: var(--bty-ink-2); line-height: 1.7; }
.bty-comment-children { list-style: none; margin: 24px 0 0; padding: 0 0 0 40px; }
.bty-comment-children .bty-comment { margin-bottom: 20px; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 991px) {
    .bty-art-meta { margin-left: 0; }
    .bty-art-lead { font-size: 19px; }
}
@media (max-width: 575px) {
    .bty-blog-card-body { padding: 22px 22px 26px; }
    .bty-art-byline { gap: 16px; }
    .bty-art-foot { flex-direction: column; align-items: flex-start; }
    .bty-comment-children { padding-left: 20px; }
}

/* ============================================================================
   Blog-overzicht — Crafto "blog-metro" (CSS Grid masonry, geen JS)
   4-koloms raster met af en toe een dubbele (2x2) tegel. Tekst OVER de foto:
   witte categorie-badge linksboven, datum + titel linksonder, donkere sluier
   voor leesbaarheid. Zoom-hover op de foto. Bewust CSS Grid i.p.v. Isotope,
   zodat de metro betrouwbaar en zonder JS-afhankelijkheid werkt.
   ========================================================================== */
.bty-metro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    gap: 24px;
}
.bty-metro-tile {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    display: block;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}
/* Grote metro-tegel: 2 kolommen x 2 rijen. */
.bty-metro-tile--lg { grid-column: span 2; grid-row: span 2; }
/* Brede metro-tegel: alleen bij weinig artikelen. De trailing grote tegel wordt 3 kolommen
   breed zodat de dense-grid de twee kleine buurtegels links onder elkaar stapelt en de
   laatste twee rijen zonder lege gaten vullen. */
.bty-metro-tile--wide { grid-column: span 3; grid-row: span 2; }
.bty-metro-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.bty-metro-fallback { background: var(--bty-gradient); }
.bty-metro-tile:hover .bty-metro-img { transform: scale(1.06); }
/* Donkere verloop-sluier: onderin sterker (voor tekst), bovenin licht (voor de badge). */
.bty-metro-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .82) 0%, rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .35) 38%, rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .05) 62%, rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .15) 100%);
}
.bty-metro-cat {
    position: absolute;
    top: 26px;
    left: 26px;
    z-index: 2;
    background: var(--bty-oppervlak);
    color: var(--bty-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 3px;
}
.bty-metro-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 28px;
}
.bty-metro-date {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 8px;
}
.bty-metro-title {
    display: block;
    color: #fff;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.35;
}
.bty-metro-tile--lg .bty-metro-title { font-size: 26px; }

/* Responsive metro: 4 -> 2 -> 1 kolommen. */
@media (max-width: 1199px) {
    .bty-metro { grid-template-columns: repeat(2, 1fr); }
    .bty-metro-tile--lg { grid-row: span 1; }          /* dubbele tegel wordt full-width banner */
    .bty-metro-tile--wide { grid-column: span 2; grid-row: span 1; }  /* brede tegel = full-width banner op tablet */
    .bty-metro-tile--lg .bty-metro-title { font-size: 22px; }
}
@media (max-width: 575px) {
    .bty-metro { grid-template-columns: 1fr; grid-auto-rows: 230px; }
    .bty-metro-tile--lg { grid-column: span 1; }
    .bty-metro-tile--wide { grid-column: span 1; }
    .bty-metro-cat { top: 20px; left: 20px; }
    .bty-metro-foot { padding: 22px; }
}

/* ============================================================================
   Blog-detail — Crafto "blogger-classic"
   Grote foto full-width bovenaan (de transparante menubalk valt eroverheen, de
   sluier bovenin houdt de witte nav leesbaar). Daaronder op wit: meta boven de
   titel, grote titel gecentreerd, dan datum + leestijd; tekst in smalle kolom.
   ========================================================================== */
.bty-art-hero {
    position: relative;
    height: 62vh;
    min-height: 440px;
    max-height: 680px;
    /* De kop staat ín het beeld, onderin: zo blijft de foto bovenaan vrij en leest de titel als
       onderschrift van het beeld in plaats van als los blok eronder. */
    display: flex;
    align-items: flex-end;
    padding-bottom: 58px;
}
/* Boven de sluier en de klant-waas uit, anders valt de tekst erachter weg. */
.bty-art-hero-inner { position: relative; z-index: 2; width: 100%; }
/* 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; }
/* Sluier alleen bovenin, zodat de witte transparante header leesbaar blijft. */
/*  Twee sluiers in één verloop: bovenin voor de witte menubalk, onderin voor de kop die nu ín het beeld
    staat. Zonder dat tweede deel valt de titel weg op een lichte of drukke foto. */
.bty-art-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .55) 0%,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .12) 24%,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), 0) 42%,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .38) 68%,
        rgba(var(--bty-ov-rgb, var(--bty-dark-rgb)), .78) 100%);
}
.bty-art-classic-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 15px;
    color: var(--bty-muted);
    margin-bottom: 22px;
}
.bty-art-classic-meta strong { color: var(--bty-dark); font-weight: 600; }
.bty-art-classic-cat a {
    color: var(--bty-atext);
    font-weight: 600;
    text-decoration: none;
    transition: color .3s ease;
}
.bty-art-classic-cat a:hover { color: var(--bty-accent-2); }
.bty-art-classic-title {
    font-size: 44px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--bty-dark);
    letter-spacing: -0.5px;
    margin: 0 0 20px;
}
.bty-art-classic-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 45px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(var(--bty-dark-rgb), .12);
}
.bty-art-classic-sub span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--bty-muted); }
.bty-art-classic-sub i { font-size: 15px; }

/*  Dezelfde kop, maar dan ín de hero-foto: alles wit, en de scheidingslijn eronder vervalt — die hoorde
    bij de variant op wit, waar hij de kop van het artikel scheidde. Boven het beeld is de rand van de
    foto zelf de scheiding. Een zachte schaduw houdt de tekst leesbaar op een drukke foto. */
.bty-art-hero-inner .bty-art-classic-meta { color: rgba(255, 255, 255, .85); }
.bty-art-hero-inner .bty-art-classic-meta strong { color: #fff; }
.bty-art-hero-inner .bty-art-classic-cat a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bty-art-hero-inner .bty-art-classic-cat a:hover { color: rgba(255, 255, 255, .75); }
.bty-art-hero-inner .bty-art-classic-title {
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.bty-art-hero-inner .bty-art-classic-sub {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.bty-art-hero-inner .bty-art-classic-sub span { color: rgba(255, 255, 255, .85); }

/*  De auteursnaam springt naar het blok onderaan. Hij houdt de kleur van de tekst eromheen — het is
    geen gewone link naar elders, alleen een sprong binnen dezelfde pagina — en krijgt een dun lijntje
    zodat hij wel als klikbaar leest. */
/*  Introtekst onder de kopbanner van een module-overzicht (blog, projecten, …). Stond tussen twee volle
    Crafto-sectiemarges: 90px boven de tekst én 90px eronder, voor een alinea van drie regels. Nu 55px
    boven en 45px onder — genoeg lucht om los te staan van de banner, zonder dat de pagina leeg oogt.
    De onderkant regelen we via de sectie die erop volgt; de introsectie zelf heeft al pb-0. */
.bty-module-intro { padding-top: 55px; }
.bty-module-intro + section { padding-top: 45px; }
@media (max-width: 991px) {
    .bty-module-intro { padding-top: 38px; }
    .bty-module-intro + section { padding-top: 32px; }
}

/*  Filterknoppen boven het blogoverzicht. Ze horen bij de categoriepilletjes op de tegels, dus zelfde
    ronding-afspraak: ze volgen de klant-radius.

    Het MAANDFILTER boven het agendaoverzicht (.bty-agenda-filter) deelt deze regels bewust. Het is
    dezelfde meubel op dezelfde plek — een rij filterknoppen boven een lijst — en twee bijna-gelijke
    varianten naast elkaar op één site oogt als toeval. Ze staan hier gegroepeerd zodat ze niet uit
    elkaar kunnen lopen; het verschil is alleen dat de agendaknoppen <button> zijn in plaats van <a>,
    en die browser-eigenschappen worden hieronder teruggezet. */
.bty-blog-filters,
.bty-agenda-filters {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-bottom: 42px;
}
.bty-blog-filter,
.bty-agenda-filter {
    display: inline-flex; align-items: center; padding: 9px 20px;
    border: 1px solid color-mix(in srgb, var(--bty-warm) 28%, var(--bty-mix-licht));
    border-radius: var(--wf-radius-card, 6px);
    font-size: 14px; font-weight: 600; letter-spacing: .02em;
    color: var(--bty-dark); text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
/*  Een <button> brengt een grijs vlak, zijn eigen lettertype en een tekstpijl mee; de <a> hierboven
    niet. Zonder deze reset bleven het de blokkerige browserknoppen (opmerking Jenny 10-08-2026). */
.bty-agenda-filter { background: transparent; font-family: inherit; line-height: 1.4; cursor: pointer; -webkit-appearance: none; appearance: none; }
.bty-blog-filter:hover,
.bty-agenda-filter:hover { border-color: var(--bty-accent); color: var(--bty-atext); }
.bty-blog-filter.is-actief,
.bty-agenda-filter.is-actief {
    background: var(--bty-accent);
    border-color: var(--bty-accent);
    color: var(--bty-on-accent, #fff);
}
@media (max-width: 575px) {
    .bty-blog-filters, .bty-agenda-filters { gap: 8px; margin-bottom: 28px; }
    .bty-blog-filter, .bty-agenda-filter { padding: 7px 15px; font-size: 13px; }
}

.bty-art-author-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bty-art-author-link:hover { color: inherit; opacity: .72; }
.bty-art-hero-inner .bty-art-author-link { color: #fff; }
/*  De kopbalk blijft bij het scrollen staan; zonder deze marge schuift het auteursblok er precies
    achter zodra je op de naam klikt. */
#over-de-auteur { scroll-margin-top: 130px; }
/*  Op :root en niet op html: Crafto zet zelf ":root { scroll-behavior: auto }" en dat verslaat een
    html-regel (een pseudo-klasse weegt zwaarder dan een elementnaam). Met dezelfde specificiteit
    wint onze regel, want onze CSS laadt na die van het thema (Tom 21-09-2026). */
:root { scroll-behavior: smooth; }
/*  Wie in zijn systeem minder beweging heeft gevraagd, springt gewoon. */
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }

/*  Ruimte tussen de hero-foto en de eerste tekstregel: de sectie begon met de volle Crafto-sectiemarge,
    maar de kop staat nu ín de foto, dus die lucht eronder oogde te veel. */
.bty-art-body { padding-top: 55px; }
@media (max-width: 991px) { .bty-art-body { padding-top: 38px; } }

/* ---- "Over de auteur" ------------------------------------------------------
   Stond op var(--bty-warm) — dat is de dónkere warme steunkleur (#8a6a4e), geen achtergrondtint, dus
   het blok werd bruin met onleesbare donkere tekst erop. Nu een zachte tint van diezelfde kleur, zodat
   het bij de huisstijl blijft horen zonder de leeskolom te overstemmen. */
.bty-art-author {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-top: 50px;
    padding: 28px 30px;
    background: color-mix(in srgb, var(--bty-warm) 9%, var(--bty-mix-licht));
    border: 1px solid color-mix(in srgb, var(--bty-warm) 20%, var(--bty-mix-licht));
    border-radius: var(--wf-radius-card, 6px);
}
.bty-art-author-photo { width: 76px; height: 76px; flex-shrink: 0; object-fit: cover; border-radius: 50%; }
.bty-art-author-label {
    font-size: 13px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px;
    color: var(--bty-atext); margin-bottom: 4px;
}
/*  "Lees meer" onder de eerste alinea. De knoptekst wisselt op aria-expanded, dat Bootstrap zelf
    bijwerkt — zo is er geen regel JavaScript nodig. */
.bty-art-author-more {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 12px; padding: 0; border: 0; background: none;
    font-size: 15px; font-weight: 600; color: var(--bty-atext); cursor: pointer;
}
.bty-art-author-more:hover { color: var(--bty-accent-2); }
.bty-art-author-more i { font-size: 16px; transition: transform .3s ease; }
.bty-art-author-more[aria-expanded="true"] i { transform: rotate(180deg); }
.bty-art-author-more[aria-expanded="true"] .bty-art-author-more-open,
.bty-art-author-more[aria-expanded="false"] .bty-art-author-more-dicht { display: none; }

@media (max-width: 575px) {
    .bty-art-author { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 24px 20px; }
}

@media (max-width: 991px) {
    /* Iets hoger dan voorheen: de kop staat nu ín het beeld en heeft onderin ruimte nodig. */
    .bty-art-hero { height: 52vh; min-height: 380px; padding-bottom: 40px; }
    .bty-art-classic-title { font-size: 34px; }
}
@media (max-width: 575px) {
    .bty-art-hero { min-height: 340px; padding-bottom: 30px; }
    .bty-art-classic-title { font-size: 27px; }
    .bty-art-classic-sub { gap: 12px; margin-bottom: 32px; padding-bottom: 28px; }
    /* In de hero heeft de sub geen lijn en geen ruimte eronder; die reset hierboven mag niet terugkomen. */
    .bty-art-hero-inner .bty-art-classic-sub { margin-bottom: 0; padding-bottom: 0; }
}

/* ------------------------------------------------------------------ *
 * Blog-voorpaginablok afstylen: achtergrondkleur + één sfeer-effect,
 * gekozen door de klant in het dashboard (Layout website -> Voorpagina
 * modules). De achtergrondkleur komt inline op de <section>; hier staan
 * alleen de effect-lagen + de wit-op-donker koptekst. Eigen CSS per
 * template (gedeeld gedrag met business1, maar los bestand).
 * ------------------------------------------------------------------ */
.bty-blog-home.wf-fx { position: relative; overflow: hidden; }
.bty-blog-home.wf-fx > .container { position: relative; z-index: 1; }
.bty-blog-home.wf-fx-gradient { background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important; }
.bty-blog-home.wf-fx-foto { background-size: cover !important; background-position: center !important; background-attachment: fixed; }
.bty-blog-home.wf-fx-foto::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(20, 20, 22, .6); }
.bty-blog-home .wf-fx-deco-img { position: absolute; top: -120px; left: -40px; width: min(620px, 55%); height: auto; opacity: .9; z-index: 0; pointer-events: none; }
@media (max-width: 991.98px) { .bty-blog-home .wf-fx-deco-img { width: 70%; top: -70px; left: -30px; opacity: .7; } }
.bty-blog-home .wf-fx-shape { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; background: var(--brand-primary); opacity: .10; }
.bty-blog-home .wf-fx-shape.wf-shape-1 { width: 180px; height: 180px; top: -40px; right: 8%; animation: wf-float 9s ease-in-out infinite; }
.bty-blog-home .wf-fx-shape.wf-shape-2 { width: 110px; height: 110px; bottom: -30px; left: 12%; background: var(--brand-secondary); animation: wf-float 11s ease-in-out infinite; }
.bty-blog-home .wf-fx-shape.wf-shape-3 { width: 64px; height: 64px; top: 30%; left: 46%; background: var(--brand-tertiary, var(--brand-secondary)); animation: wf-float 8s ease-in-out infinite; }
.bty-blog-home .wf-fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* Kop wit op een donkere achtergrond of foto. */
.bty-blog-home.wf-on-dark .bty-eyebrow,
.bty-blog-home.wf-on-dark h3 { color: #fff !important; }
.bty-blog-home.wf-on-dark .border-color-dark-gray { border-color: rgba(255, 255, 255, .4) !important; }
@keyframes wf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

/* Blog-tegels: kijkhoogte volgt de titel in plaats van Crafto's vaste 155px.
   Crafto schuift het hele tekstblok omlaag met translateY(calc(100% - 155px)). Dat is afgestemd op
   titels van één regel; een titel van drie regels valt onder de tegel weg (de laatste regel wordt
   letterlijk afgekapt). Hier blijft het tekstblok gewoon onderaan staan en klapt alleen de intro
   open bij hover — dus wat zichtbaar hoort te zijn, is altijd volledig zichtbaar, ongeacht de lengte
   van de titel. Het hover-gevoel (intro verschijnt, foto zoomt in) blijft identiek. */
.bty-blog-home .interactive-banner-style-06 .interactive-banners-content { transform: none; }
.bty-blog-home .interactive-banner-style-06:hover .interactive-banners-content { transform: none; }
.bty-blog-home .bty-blog-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* De intro is bij rust dichtgeklapt en groeit bij hover open. Omdat het tekstblok aan de onderkant
   vastzit, duwt die groei de tekst omhoog — hetzelfde effect als Crafto's schuif, maar zonder afkappen. */
.bty-blog-home .interactive-banner-style-06 .interactive-banners-content-text {
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  transition: max-height 550ms cubic-bezier(.12, 0, .1, 0), opacity 350ms cubic-bezier(.12, 0, .39, 0);
}
.bty-blog-home .interactive-banner-style-06:hover .interactive-banners-content-text { max-height: 9em; }
/* Klant-instelbare waas over de kaartfoto (kleur + sterkte uit de blok-pop-up). Zelfde klasse en
   zelfde gedrag als business1, zodat één instelling in het dashboard beide templates aanstuurt.
   Geldt voor ELK voorpagina-blok met foto-kaarten (niet alleen blog): de laag ligt over de foto,
   onder de tekst/badges, en vangt geen klikken af zodat links en hover blijven werken. */
.wf-card-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Reviewkaarten op de voorpagina. Crafto's kaart is omlijnd zonder vulling: mooi op wit, maar op een
   grijs of gekleurd blok blijft er een leeg omlijnd vlak over. Vandaar een witte vulling, en hoeken
   die de klantinstelling volgen in plaats van een vaste 6px. Op een DONKER blok wint de bestaande
   contrastlaag (zie "3b" verderop) met zijn donkere waas — dat blijft dus zoals het is. */
.bty-reviews .bty-rev-card {
  background-color: var(--bty-oppervlak);
  border-radius: var(--wf-radius-card, 6px);
  overflow: hidden;   /* houdt rand en scheidingslijn binnen de afgeronde hoek */

  /*  Terugzetten wat van de ANDERE .bty-rev-card komt — de kaarten op de reviewpagina, die toevallig
      dezelfde klassenaam dragen (zie verderop in dit bestand). Die zetten kolomrichting, een eigen
      vulling van 26px en een tussenruimte. Deze kaart is juist een RIJ: naam links, review rechts
      achter een scheidingslijn, met de vulling in de kolommen zelf (p-15px / p-40px).

      Zolang dat niet klopte stapelde de naam bóven de tekst, en omdat namen verschillen in lengte
      begon de review in elke kaart op een andere hoogte. Meteen ook de oorzaak van de scheidingslijn
      die halverwege bleef zweven: de kolommen rekten niet mee met de kaart. */
  flex-direction: row;
  padding: 0;
  gap: 0;
}
/* Beide kolommen vullen de kaart, zodat de scheidingslijn van boven tot onder doorloopt. */
.bty-reviews .bty-rev-card > * { align-self: stretch; }
/*  Sterren en functie op gelijke hoogte in élke kaart.
    Ze zakten mee met de lengte van de review (gemeten: 369 tot 434px vanaf de bovenkant), waardoor de
    rij kaarten rommelig oogde. De tekst rekt nu uit en duwt de sterren naar de onderkant; omdat alle
    kaarten even hoog zijn (h-100 in de swiper) staan ze daarmee overal gelijk.

    LET OP: deze kaart deelt zijn klassenaam met de kaarten op de reviewpagina (.bty-rev-card verderop),
    en erft daardoor flex-direction:column terwijl de markup een rij bedoelt — naam-paneel links, review
    rechts achter een scheidingslijn. Dat is een aparte kwestie; hieronder wordt alleen het uitlijnen
    geregeld, in de indeling zoals die nu op de site staat. */
.bty-reviews .bty-rev-card > :last-child { flex: 1 1 auto; }
.bty-reviews .bty-rev-card > :last-child > div { display: flex; flex-direction: column; width: 100%; height: 100%; }
/*  De sterren worden naar beneden geduwd, NIET de tekst opgerekt: dat laatste liet de afgekapte review
    een halve regel extra tonen, dus midden in een zin afgesneden. De tekst houdt zo zijn nette
    afkapping en de sterren staan toch in elke kaart gelijk. */
.bty-reviews .bty-rev-card .text-base-color.fs-20 { margin-top: auto; }
/*  Vaste plek voor het herkomstlabel, ook als de review er geen heeft — zie de toelichting in de view.
    30px = de hoogte die het Google-/Trustpilot-pilletje inneemt (24px pil + 5px marge erboven, naar
    boven afgerond). Precies dat, anders staan de sterren in een kaart mét label alsnog iets hoger. */
.bty-reviews .bty-rev-card .bty-rev-bron { min-height: 30px; }
/*  ...maar heeft een review niets ónder de tekst — geen sterren en geen herkomstlabel, zoals bij een
    klant die alleen geschreven ervaringen verzamelt — dan valt er niets uit te lijnen en bleef de
    tekst bovenin plakken met een gat eronder (de kaarten zijn even hoog via h-100). In dat geval de
    tekst verticaal centreren; zodra er wél sterren of een label zijn, geldt gewoon de regel hierboven. */
.bty-reviews .bty-rev-card > :last-child > div:not(:has(.text-base-color.fs-20)):not(:has(.bty-rev-bron)) {
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .bty-blog-home .interactive-banner-style-06 .interactive-banners-content-text { transition: none; }
}

/* ================================================================== *
 * Systeembreed blok-afstylen: ELK voorpagina-blok (niet alleen Blog)
 * volgt de dashboard-keuze. De klassen worden door _shared/_BlockStyle
 * op de <section> gezet; de achtergrondkleur komt inline. Alleen de kop
 * (eyebrow + heading) wordt wit op een donkere achtergrond/foto — kaarten
 * houden hun eigen stijl. Eigen CSS per template.
 * ================================================================== */
.wf-applied.wf-fx { position: relative; overflow: hidden; }
/*  :not(.modal): een venster dat in de sectie staat (bv. een fotoalbum op de onepagina) moet zijn eigen
    position:fixed en z-index houden. Met z-index 1 zakte het onder de grijze achtergrond (1050) en was niets
    meer aan te klikken (Tom 01-10-2026, 214). */
.wf-applied.wf-fx > *:not(.wf-fx-deco-img):not(.wf-fx-shape):not(.wf-fx-particles):not(.modal) { position: relative; z-index: 1; }
.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; }
.wf-applied.wf-fx-foto { background-size: cover !important; background-position: center !important; background-attachment: fixed; }
.wf-applied.wf-fx-foto::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(20, 20, 22, var(--wf-foto-scrim, .55)); }
.wf-applied .wf-fx-deco-img { position: absolute; top: -120px; left: -40px; width: min(620px, 55%); height: auto; opacity: .9; z-index: 0; pointer-events: none; }
@media (max-width: 991.98px) { .wf-applied .wf-fx-deco-img { width: 70%; top: -70px; left: -30px; opacity: .7; } }
.wf-applied .wf-fx-shape { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; background: var(--brand-primary); opacity: .10; }
.wf-applied .wf-fx-shape.wf-shape-1 { width: 180px; height: 180px; top: -40px; right: 8%; animation: wf-float 9s ease-in-out infinite; }
.wf-applied .wf-fx-shape.wf-shape-2 { width: 110px; height: 110px; bottom: -30px; left: 12%; background: var(--brand-secondary); animation: wf-float 11s ease-in-out infinite; }
.wf-applied .wf-fx-shape.wf-shape-3 { width: 64px; height: 64px; top: 30%; left: 46%; background: var(--brand-tertiary, var(--brand-secondary)); animation: wf-float 8s ease-in-out infinite; }
.wf-applied .wf-fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.wf-applied.wf-on-dark :is(h1, h2, h3, h4, h5, .bty-eyebrow) { color: #fff !important; }
.wf-applied.wf-on-dark .border-color-dark-gray { border-color: rgba(255, 255, 255, .4) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ-voorpaginablok — ontwerp "B" (keuze Jenny 02-08), beauty1-stijl.
   Kop LINKS met een streepje-eyebrow, titel en intro, met een scheidingslijn
   eronder. Daaronder losse vraagkaarten met een volgnummer (01, 02 …), het
   categorie-label, de vraag en — zolang de kaart dicht is — het korte antwoord.
   Het plus-icoon zit in een afgerond vierkantje en draait naar een min; de open
   kaart krijgt een zachte warme vulling en een diepere schaduw. Onderaan de knop
   naar het FAQ-overzicht.

   Kleuren: uitsluitend de klantvariabelen uit _BrandVars (--bty-accent/-atext/
   -on-accent/-warm/-warm-deep/-dark) plus --medium-gray; hoeken via
   --wf-radius-card. De ACHTERGROND is een zachte tint van de warme klantkleur,
   maar zodra de klant in het dashboard zelf een kleur/verloop/foto kiest zet
   _BlockStyle die met !important op de <section> en wint die dus.
   Scoped op .bty-faq2.
   ═══════════════════════════════════════════════════════════════════════════ */
.bty-faq2 {
  --faq-r-card: var(--wf-radius-card, 30px);
  --faq-r-pill: min(var(--wf-radius-card, 30px), 999px);
  --faq-r-btn: min(calc(var(--wf-radius-card, 30px) * .6), 999px);
  --faq-soft: color-mix(in srgb, var(--bty-warm) 9%, var(--bty-mix-licht));
  --faq-ink: color-mix(in srgb, var(--medium-gray) 78%, var(--bty-dark));
  --faq-line: color-mix(in srgb, var(--bty-warm-deep) 13%, transparent);
  --faq-shadow: 0 14px 34px color-mix(in srgb, var(--bty-warm-deep) 9%, transparent);
  --faq-shadow-lift: 0 22px 54px color-mix(in srgb, var(--bty-warm-deep) 15%, transparent);

  background: var(--faq-soft);
  color: var(--medium-gray);
}

/* ── Kop links, met scheidingslijn eronder ─────────────────────────────── */
.bty-faq2-head {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--faq-line);
  margin-bottom: clamp(24px, 3vw, 38px);
}
.bty-faq2-title { font-size: clamp(30px, 4vw, 46px); line-height: 1.22; max-width: 18ch; color: var(--bty-dark); }
/* De klant-intro komt uit de rich editor en heeft niet altijd een <p> om zich heen,
   dus het omhulsel krijgt dezelfde regel. */
.bty-faq2-head p,
.bty-faq2-intro { margin: 14px 0 0; color: var(--faq-ink); max-width: 58ch; }

/* Eyebrow met streepje ervoor. */
.bty-faq2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bty-atext);
}
.bty-faq2-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--bty-accent); }

/* Op een donkere of foto-achtergrond kleurt de kop mee (blok-opmaak blijft leidend). */
.wf-applied.wf-on-dark .bty-faq2-title { color: #fff; }
.wf-applied.wf-on-dark .bty-faq2-head p,
.wf-applied.wf-on-dark .bty-faq2-intro { color: rgba(255, 255, 255, .85); }
.wf-applied.wf-on-dark .bty-faq2-eyebrow { color: rgba(255, 255, 255, .9); }
.wf-applied.wf-on-dark .bty-faq2-head { border-bottom-color: rgba(255, 255, 255, .25); }

/* ── Vraagkaarten ──────────────────────────────────────────────────────── */
.bty-faq2-item {
  background: var(--bty-oppervlak);
  border-radius: var(--faq-r-card);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--bty-warm-deep) 7%, transparent);
  transition: background .25s ease, box-shadow .25s ease;
}
.bty-faq2-item:last-child { margin-bottom: 0; }
.bty-faq2-item:hover { box-shadow: var(--faq-shadow); }
.bty-faq2-item:has(.collapse.show) { background: var(--faq-soft); box-shadow: var(--faq-shadow-lift); }

.bty-faq2-q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 22px;
  align-items: start;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 22px clamp(18px, 2.2vw, 30px);
  border-radius: var(--faq-r-card);
}
.bty-faq2-q:focus { outline: none; box-shadow: none; }
.bty-faq2-num {
  font-size: 20px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--bty-accent) 78%, var(--bty-warm-deep));
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.bty-faq2-body { min-width: 0; }
.bty-faq2-cat {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bty-atext);
}
.bty-faq2-qt { display: block; font-size: clamp(18px, 1.85vw, 21px); line-height: 1.4; color: var(--bty-dark); }
/*  Nummer en vraag op één lijn met het plusje (Tom 04-10-2026). Alles hing tegen de bovenkant van het 40px hoge plusje,
    terwijl de tekstregel maar ±29px hoog is: de vraag stond 5-7px boven het midden en onder de tekst bleef meer wit
    over dan erboven. Nu staan het midden van het nummer en het midden van de EERSTE vraagregel op het midden van het
    plusje (20px); een vraag over meer regels loopt gewoon naar beneden door. Met een categorielabel erboven blijft
    de vraag direct onder dat label. */
.bty-faq2-num { line-height: 40px; padding-top: 0; }
.bty-faq2-body > .bty-faq2-qt:first-child { padding-top: calc((40px - 1.4em) / 2); }
/* Kort antwoord: alleen te zien zolang de kaart dicht is. */
.bty-faq2-short { display: block; margin-top: 7px; font-size: 15px; line-height: 1.6; color: var(--medium-gray); }
.bty-faq2-q:not(.collapsed) .bty-faq2-short { display: none; }

/* Plus dat naar een min draait. */
.bty-faq2-icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  grid-row: 1 / -1;
  grid-column: 3;
  border-radius: var(--faq-r-btn);
  background: color-mix(in srgb, var(--bty-accent) 18%, var(--bty-mix-licht));
  transition: background .25s ease;
}
.bty-faq2-icon::before,
.bty-faq2-icon::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 1.5px;
  background: var(--bty-atext);
  transform: translateY(-50%);
  transition: transform .3s ease, background .25s ease;
}
.bty-faq2-icon::after { transform: translateY(-50%) rotate(90deg); }
.bty-faq2-q:hover .bty-faq2-icon { background: color-mix(in srgb, var(--bty-accent) 34%, var(--bty-mix-licht)); }
.bty-faq2-q:not(.collapsed) .bty-faq2-icon { background: var(--bty-accent); }
.bty-faq2-q:not(.collapsed) .bty-faq2-icon::before,
.bty-faq2-q:not(.collapsed) .bty-faq2-icon::after { background: var(--bty-on-accent); }
.bty-faq2-q:not(.collapsed) .bty-faq2-icon::after { transform: translateY(-50%) rotate(0); }

/* Antwoord: begint onder de vraag, dus voorbij de nummerkolom. */
.bty-faq2-a {
  color: var(--faq-ink);
  padding: 2px clamp(18px, 2.2vw, 30px) 26px;
  padding-left: clamp(18px, calc(2.2vw + 42px), 74px);
  font-size: 16px;
  line-height: 1.75;
}
.bty-faq2-a::before { content: ""; display: block; height: 1px; background: var(--faq-line); margin-bottom: 18px; }
.bty-faq2-a p { margin: 0 0 1em; }
.bty-faq2-a > *:last-child { margin-bottom: 0; }
.bty-faq2-a strong { color: var(--bty-dark); font-weight: 600; }
.bty-faq2-a ul { margin: 0 0 1em; padding-left: 1.3em; }
.bty-faq2-a li { margin-bottom: .35em; }
.bty-faq2-a li::marker { color: var(--bty-accent); }

/* ── Knop naar het FAQ-overzicht ───────────────────────────────────────── */
.bty-faq2-foot { margin-top: clamp(24px, 3vw, 36px); }
.bty-faq2-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .02em;
  text-decoration: none;
  /*  Donkere tekst op de lichte knop. Hier stond de tekstkleur voor ÓP het accent (wit), terwijl de knop
      pas bij hover die accentkleur krijgt: in rust stond er dus wit op wit (Tom, 13-09-2026). De
      accentkleur zelf haalde op wit geen leesbaar contrast. */
  color: var(--bty-dark);
  background: var(--bty-oppervlak);
  padding: 15px 30px;
  border-radius: var(--faq-r-pill);
  box-shadow: var(--faq-shadow);
  transition: background .2s ease, box-shadow .25s ease, transform .25s ease;
}
.bty-faq2-cta:hover {
  background: var(--bty-accent);
  color: var(--bty-on-accent);
  box-shadow: var(--faq-shadow-lift);
  transform: translateY(-2px);
}
.bty-faq2-cta i { transition: transform .25s ease; }
.bty-faq2-cta:hover i { transform: translateX(4px); }

/* Smalle telefoons: de nummerkolom valt weg zodat de vraag alle ruimte houdt. */
@media (max-width: 575.98px) {
  .bty-faq2-q { grid-template-columns: 1fr auto; gap: 4px 14px; padding: 19px 18px; }
  .bty-faq2-num { display: none; }
  .bty-faq2-icon { grid-column: 2; }
  .bty-faq2-a { padding-left: 18px; }
  .bty-faq2-cta { width: 100%; justify-content: center; }
}

/* Dark mode: de kaarten blijven bewust licht en leesbaar. */
[data-bs-theme="dark"] .bty-faq2-qt { color: var(--bty-dark); }
[data-bs-theme="dark"] .bty-faq2-short { color: var(--medium-gray); }
[data-bs-theme="dark"] .bty-faq2-a { color: var(--faq-ink); }

/* ============================================================================
   TEKSTLAAG VOOR BLOKKEN MET EIGEN DONKERE/GEKLEURDE OPMAAK
   ----------------------------------------------------------------------------
   Crafto's onderdelen zijn ontworpen voor een WITTE sectie: donkergrijze koppen,
   grijze bodytekst, dunne grijze hairlines. De klant kan een blok in het dashboard
   echter op donker of op een verloop zetten (.wf-block-dark / .wf-on-dark), en die
   blok-opmaak is leidend — dus past de TEKST zich aan, nooit de blokkleur.

   Twee dingen maken dit lastiger dan "alles wit":
   1. Het accent kan (bijna) de blokkleur zelf zijn. Bij een verloop van huisstijl-
      primair naar -secundair eindigt de achtergrond in exact de accentkleur: tan op
      tan, 2,5:1. Daarom wit i.p.v. een accenttint.
   2. Een verloop kan van donker naar licht lopen (Frenque: donkerrood -> tan), dus
      ook wit is aan de lichte kant zwak. Een zachte schaduw houdt tekst op beide
      uiteinden leesbaar zonder de kleur van het blok aan te raken.

   UITZONDERING — onderdelen met hun EIGEN lichte ondergrond binnen zo'n blok houden
   Crafto's originele kleuren: witte kaarten (.card/.bg-white/.bg-*-gray) en de
   bron-pilletjes van Google/Trustpilot (.wf-source-pill). Blogtegels hebben een eigen
   foto met donkere waas en gebruiken .text-white, dus die raakt deze laag niet.
   ============================================================================ */

/* Accent automatisch leesbaar voor elke klantkleur (licht/donker-bewust). */
.text-base-color { color: var(--base-ink) !important; }
/* Het gedeelde SEO-overzichtsblok zet zijn eyebrow rechtstreeks op --brand-secondary. Bij een lichte
   secundaire kleur (Frenque: tan) is dat 2,5:1 op wit. Hier de ink-variant, zoals alle andere
   accent-tekst in beauty1. Alleen binnen beauty1, want dit stylesheet laadt niet op andere templates. */
.wf-seo-eyebrow { color: var(--base-ink) !important; }
/* 1. Accent-tekst en Crafto's donkere tekst -> licht op het blok zelf.
   Knoppen (.btn) blijven bewust buiten deze laag: die hebben hun eigen kleursysteem via de btn-*-
   varianten. Een `btn-white text-dark-gray` (witte knop, donkere tekst) werd anders wit-op-wit. */
:is(.wf-block-dark, .wf-on-dark) :is(.text-base-color, .text-dark-gray):not(.btn) {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* 2. Grijze bodytekst en meta-labels (reviewtekst haalde 1,6:1 op het verloop). */
:is(.wf-block-dark, .wf-on-dark) :is(.wf-review-clamp, .text-medium-gray, .text-light-gray):not(.btn) {
    color: rgba(255, 255, 255, .92) !important;
}
/* 2b. Bodytekst ZONDER kleurklasse. Regel 2 hierboven pakt alleen tekst die expliciet .text-medium-gray
   of .text-light-gray draagt, maar de meeste alinea's in de modules hebben helemaal geen klasse en erven
   Crafto's `p { color: var(--medium-gray) }`. In een blok met een eigen donkere of gekleurde achtergrond
   blijft dat dus middengrijs op middendonker staan — bij het dienstenblok van Frenque (verloop bruinrood
   naar groen) haalde de tekst onder de dienstnaam zo ongeveer 1,3:1, terwijl de titel erboven al wit was.
   Bewust zonder !important: zo kan de uitzondering hieronder (licht eiland) hem gewoon overrulen. */
:is(.wf-block-dark, .wf-on-dark) :is(p, li, dd, dt) { color: rgba(255, 255, 255, .92); }

/* 3. Hairlines die voor een witte sectie bedoeld zijn (omlijnde reviewkaarten, sliderpijlen). */
:is(.wf-block-dark, .wf-on-dark) :is(.border-color-extra-medium-gray, .border-color-medium-gray) {
    border-color: rgba(255, 255, 255, .28) !important;
}
/* 3b. Omlijnde kaarten hebben GEEN eigen vulling en staan dus direct op de blokkleur. Bij een verloop
   wisselt die kleur over de breedte, waardoor tekst aan de lichte kant wegvalt (wit op tan = 2,5:1). Ze
   krijgen daarom een donkere waas als eigen ondergrond: het verloop schijnt er nog doorheen, maar de
   tekst houdt overal hetzelfde contrast. Netter dan een schaduw op elke regel bodytekst. */
:is(.wf-block-dark, .wf-on-dark) .border.border-color-extra-medium-gray {
    background-color: rgba(0, 0, 0, .42);
}
/* 4. Eyebrow zonder accentklasse: alleen de schaduw, kleur laten zoals het blok hem al zet. */
:is(.wf-block-dark, .wf-on-dark) .bty-eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

/* 4b. Omlijnde ("transparante") knoppen hebben net als de kaarten geen eigen vulling: hun witte tekst
   valt weg op de lichte kant van een verloop. Zelfde donkere waas, zodat de omlijnde stijl blijft. */
:is(.wf-block-dark, .wf-on-dark) .btn[class*="btn-transparent"] {
    background-color: rgba(0, 0, 0, .30) !important;   /* Crafto zet transparent zelf met !important */
}

/* 4c. Het FAQ-blok heeft zijn eigen kop-opmaak (zie .bty-faq2-head hierboven) met witte tekst; op de
   lichte kant van een verloop is die ook zwak. Vandaar dezelfde zachte schaduw onder de koptekst. */
:is(.wf-block-dark, .wf-on-dark) .bty-faq2-head :is(h1, h2, h3, h4, p, span) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* 5. Licht eiland binnen zo'n blok -> alles terug naar Crafto's origineel. */
:is(.wf-block-dark, .wf-on-dark) :is(.card, .bg-white, .bg-very-light-gray, .bg-light-gray, .wf-source-pill, .btn) :is(.text-base-color, .text-dark-gray, .wf-review-clamp, .text-medium-gray, .text-light-gray) {
    text-shadow: none;
}
:is(.wf-block-dark, .wf-on-dark) :is(.card, .bg-white, .bg-very-light-gray, .bg-light-gray, .wf-source-pill, .btn) .text-base-color { color: var(--base-ink) !important; }
:is(.wf-block-dark, .wf-on-dark) :is(.card, .bg-white, .bg-very-light-gray, .bg-light-gray, .wf-source-pill, .btn) .text-dark-gray { color: var(--dark-gray) !important; }
/* Hoort bij 2b: op een licht eiland moet klassenloze bodytekst juist gewoon donker blijven. */
:is(.wf-block-dark, .wf-on-dark) :is(.card, .bg-white, .bg-very-light-gray, .bg-light-gray, .wf-source-pill, .btn) :is(p, li, dd, dt) { color: var(--medium-gray); }
/*  De FAQ-vraagkaart is ook zo'n licht eiland, maar heeft geen van de klassen hierboven. Op een donkere of
    foto-sectie werd het opengeklapte antwoord daardoor wit op een crème kaart en was het onleesbaar
    (Tom, 13-09-2026). De knop eronder hoort hier ook bij: in rust blijft hij accent op licht. */
:is(.wf-block-dark, .wf-on-dark) .bty-faq2-a :is(p, li, dd, dt) { color: var(--faq-ink); }
:is(.wf-block-dark, .wf-on-dark) .bty-faq2-cta:not(:hover) { color: var(--bty-dark); }
:is(.wf-block-dark, .wf-on-dark) :is(.card, .bg-white, .bg-very-light-gray, .bg-light-gray, .wf-source-pill, .btn) :is(.wf-review-clamp, .text-medium-gray, .text-light-gray) { color: var(--medium-gray) !important; }
:is(.wf-block-dark, .wf-on-dark) :is(.card, .bg-white, .bg-very-light-gray, .bg-light-gray) :is(.border-color-extra-medium-gray, .border-color-medium-gray) { border-color: var(--bty-line) !important; }
:is(.wf-block-dark, .wf-on-dark) { --bty-atext: var(--brand-secondary-ondark); }

/*  5b. De vestigingskaart is óók een licht eiland, maar draagt geen .card of .bg-white — hij zet zijn
    eigen witte achtergrond. Zonder deze uitzondering kleurt de laag hierboven álles binnen de kaart wit:
    naam, adres, telefoon en e-mail werden onzichtbaar op het witte vlak, met grote lege gaten als
    resultaat (opgemerkt door Jenny 03-08). De kop-regel `.wf-applied.wf-on-dark :is(h1…h5)` staat eerder
    in dit bestand en heeft !important, dus die moet hier expliciet teruggedraaid worden.

    Voeg elk nieuw blok met een eigen witte kaart hier toe — of geef zo'n kaart gewoon de klasse .card,
    dan valt hij automatisch onder de regels hierboven. */
/*  LET OP het extra `.vst-slider` in elke selector — dat is geen sierlijkheid maar noodzaak. De kop-regel
    hierboven luidt `.wf-applied.wf-on-dark :is(h1…h5, .bty-eyebrow)`, en omdat er een KLASSE in die
    :is()-lijst staat, telt die lijst als klasse mee: gewicht (0,3,0). Een uitzondering met alleen
    `:is(.wf-on-dark) .vst-card :is(h1…h6)` haalt (0,2,1) en verliest dus, ondanks !important en ondanks
    dat hij later staat. Met `.vst-slider` erbij wordt het (0,3,1) en wint hij wél.
    Gevolg toen dit nog niet klopte: de vestigingsnaam bleef wit op de witte kaart — zichtbaar als een
    leeg gat boven de introtekst (Jenny 03-08). */
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card :is(h1, h2, h3, h4, h5, h6) { color: var(--dark-gray) !important; text-shadow: none; }
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card :is(p, li, dd, dt, address, span, a, summary) { color: inherit; text-shadow: none; }
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card { color: var(--vst-tekst); }
/*  Geen slagschaduw op een gekleurd of donker blok. Een schaduw werkt alleen op een lichte ondergrond:
    daar leest hij als diepte. Op een gekleurd vlak wordt het een donkere veeg onder en naast de kaart met
    een zichtbare rand — het oogt als een tweede, vuile achtergrond achter de kaart (Jenny 03-08).
    Ook de hover-variant uit, anders komt hij bij het aanwijzen alsnog tevoorschijn. */
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card,
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card:hover { box-shadow: none; }
/* Zonder schaduw geen zwevende kaart, dus ook het optilllen bij hover eruit: dat zou nergens op slaan. */
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card:hover { transform: none; }
/* De pijlen en de knop eronder staan wél op het gekleurde vlak; die houden hun schaduw als houvast. */
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card .vst-tijden > summary { color: var(--vst-accent-text); }
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card .vst-tijden dd { color: var(--dark-gray); }
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card .vst-tijden .is-dicht { color: var(--medium-gray); }
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card .vst-mini { color: var(--vst-accent-text); }
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card .vst-pill { color: var(--dark-gray); }
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card .vst-pill--label { color: var(--vst-accent-text); }
:is(.wf-block-dark, .wf-on-dark) .vst-slider .vst-card .vst-pill--dicht { color: var(--medium-gray); }
/* Tekst OP het accentvlak volgt de accentkleur zelf (--bty-on-accent uit _BrandVars). Stond eerder op
   --brand-on-secondary: dat is de contrastkleur van de SECUNDAIRE huisstijlkleur, dus bij een klant met
   een donkere huisstijl werd het donkere tekst op een donkere knop. */
.bg-base-color, .btn.btn-base-color { color: var(--bty-on-accent, #fff) !important; }
/*  Hover: SOLIDE, iets donkerder accent — nooit doorzichtig. Crafto's eigen hover maakt de knop
    transparant met accentkleurige tekst (`background-color: transparent; color: var(--base-color)`),
    maar de regel hierboven zet de tekstkleur met !important, dus die won ook in hover-stand: witte
    tekst op een doorzichtige knop. Op een witte kaart — de "Bestellen"-knop in de shop — was de knop
    daardoor bij het aanwijzen volledig wit, met alleen nog een dun randje (Jenny 05-08).
    Alleen de lichtheid verandert, de kleurtoon van de klant blijft. Zelfde oplossing als business1. */
.btn.btn-base-color:hover, .btn.btn-base-color:active {
    background-color: color-mix(in srgb, var(--base-color) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--base-color) 85%, #000) !important;
    color: var(--bty-on-accent, #fff) !important;
}

/* Aantal-stepper in de artikeltabel (product-detail): zelfde component als business1 + winkelwagen.
   − en + passen client-side het verborgen aantal aan (zie de stepper-JS in ProductDetail). */
.wf-qty { display: inline-flex; align-items: center; border: 1px solid var(--bty-line); border-radius: 8px; overflow: hidden; background: var(--bty-oppervlak); }
.wf-qty button { border: 0; background: transparent; width: 34px; height: 40px; font-size: 18px; line-height: 1; color: var(--medium-gray); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.wf-qty button:hover { background: var(--brand-secondary); color: var(--brand-on-secondary); }
.wf-qty .wf-qty-val { min-width: 40px; height: 40px; text-align: center; font-weight: 600; font-size: 15px; color: var(--dark-gray, #232323); display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--bty-line); border-right: 1px solid var(--bty-line); }

/* Maandelijks/jaarlijks-prijsschuif (Pakketten-blok). Gedeelde class-namen; huisstijlkleur via var(). */
.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; }
/*  "Maandelijks" en "Jaarlijks" zijn kale spans zonder kleurklasse en vielen daardoor buiten de
    donkere-blok-laag hierboven (regel 1 pakt .text-dark-gray, regel 2b pakt p/li/dd/dt — een span
    zonder klasse haalt geen van beide). Op Frenque stonden ze dus in Crafto's donkergrijs op een
    bruinrood verloop en waren ze nauwelijks te lezen. Zelfde behandeling als bodytekst in zo'n blok. */
:is(.wf-block-dark, .wf-on-dark) .wf-price-switch-lbl {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.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: var(--bty-track); transition: background .2s ease; }
.wf-price-switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bty-oppervlak); 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; }

/* Referenties-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; }

/*  De referentie-views van beauty1 (voorpagina-blok, overzicht én detail) lenen de klassenamen van
    business1, maar beauty1 laadt custom-business1.css niet. Alleen .biz-ref-list-title hierboven was ooit
    los overgezet; de rest ontbrak. Gevolg: de kaartfoto's hielden hun eigen hoogte — bij Frenque stonden
    ze 250, 174 en 377px naast elkaar — en er gebeurde niets bij hover, terwijl elke andere module van
    deze template dat wél doet.

    Bewust een VERHOUDING en geen vaste hoogte zoals business1 (220px): dat is de afspraak van deze
    template, zie .bty-thumb bovenin dit bestand met dezelfde motivatie. */
.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; }
.biz-ref-card-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.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; } }

/* Referentie-CARROUSEL op de voorpagina (meer dan 3 referenties, zie modules/_Referenties_Home.cshtml).
   Swiper knipt alles buiten zijn eigen kader weg; zonder deze ruimte verdwijnt de hover-lift van
   .biz-ref-card (-6px) en de zachte slagschaduw eronder tegen de rand. De marge onderaan compenseert
   de mb-30px die de kaarten in de rasterstand van hun kolom krijgen, zodat de knop "Alle referenties"
   in beide weergaves op dezelfde afstand staat. */
.bty-ref-slider { padding: 12px 10px 24px; margin: -12px -10px 0; }


/* ══ Productpagina 1b "Winkelblok" ═══════════════════════════════════════════════════════════════
   Ontwerp uit Claude Design (project ef60428f, blok 1b), vertaald naar de huisstijl van de klant.
   Het ontwerp noemt vaste kleuren en eigen lettertypen; die zijn hier vervangen door --brand-* en
   --bty-*, anders zou het ontwerp de keuze van elke klant overschrijven.

   Kern van de indeling: fotostrip (640 px) naast de bestelkolom, het verhaal in tabbladen over de
   volle breedte eronder. Daarmee hoeft de rechterkolom niet langer vier tabelkolommen te dragen. */

.bty-p1b-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 40px; align-items: start; }
/*  Grote schermen (Tom 13-10-2026): foto en bestelkolom SAMEN gecentreerd. De bestelkolom liep tot de rechterrand, en
    bij één foto hield de fotokolom links nog 90px vrij voor een miniaturenstrook die er niet is: de foto leek rechts
    uitgelijnd. Nu een vaste breedte voor de bestelkolom, het geheel in het midden, en zonder strook geen lege 90px.
    Onder 1200px (onder elkaar) verandert er niets. */
@media (min-width: 1200px) {
    .bty-p1b-grid { grid-template-columns: minmax(0, 640px) minmax(0, 520px); justify-content: center; }
    .bty-p1b-grid:not(:has(.bty-p1b-strip)) { grid-template-columns: minmax(0, 550px) minmax(0, 520px); }
    .bty-p1b-grid:not(:has(.bty-p1b-strip)) .bty-p1b-gallery { padding-left: 0; }
}

/* ── Fotostrip ───────────────────────────────────────────────────────────── */
/*  De strip toont ALLE foto's en schuift mee zodra ze niet meer passen. Eerder stonden er vijf met een
    "+N"-vakje erachter dat nergens naartoe leidde, dus wie meer foto's had, kon er niet bij.

    De strip staat bewust ABSOLUUT en niet als flex-kolom naast de foto. Als flex-kind telt hij namelijk
    mee voor de hoogte van het blok: bij twaalf miniaturen werd de strip 1022px en rekte het hele blok met
    zich mee, in plaats van dat er iets ging schuiven. Nu is de grote foto het enige element in de stroom,
    bepaalt die de hoogte, en wordt de strip daar met top/bottom precies op vastgezet. */
.bty-p1b-gallery { position: relative; padding-left: 90px; }   /* 76px strip + 14px tussenruimte */
/*  De schil draagt sinds 05-08 de absolute plaatsing (dat deed .bty-p1b-thumbs zelf); daarbinnen zijn de
    twee pijlen vaste stroken en is het spoor met de miniaturen het enige dat rekt en schuift. Zo overlapt
    een pijl nooit een miniatuur. */
.bty-p1b-strip {
    position: absolute; left: 0; top: 0; bottom: 0; width: 76px;
    display: flex; flex-direction: column; gap: 6px;
}
.bty-p1b-thumbs {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto;
    /*  Schuifbalk verbergen, schuiven blijft. Een zichtbare balk kostte hier dubbel: hij at van de 76px
        breedte, waardoor de miniaturen niet meer pasten en er ONDER de strip ook nog een horizontale balk
        bij kwam. Twee grijze balken om een fotostrip — dat hoort niet op een winkelpagina. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* oudere Edge */
}
.bty-p1b-thumbs::-webkit-scrollbar { width: 0; height: 0; }
.bty-p1b-thumb {
    /* flex: 0 0 auto — anders krimpen de miniaturen in de kolom mee tot ze passen (twaalf stuks werden
       zo 40px hoog) in plaats van dat de strip gaat schuiven. */
    flex: 0 0 auto;
    width: 76px; height: 76px; padding: 0; border: 0; background: none; cursor: pointer;
    /* Plafond op de klant-ronding: 30px op een miniatuur van 76px maakt er een cirkel van. */
    border-radius: min(var(--r-img), 12px); overflow: hidden;
    outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s;
}
.bty-p1b-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bty-p1b-thumb.is-active { outline-color: var(--brand-secondary); }
/*  Pijlen van de miniaturenstrip. Verborgen zolang alles past (JS zet het `hidden`-attribuut), en grijs
    zodra je aan het begin of het einde staat — anders lijkt een dode klik een storing. */
.bty-p1b-stripnav {
    flex: 0 0 auto; height: 30px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--bty-line); background: var(--bty-oppervlak); color: var(--bty-ink);
    border-radius: var(--r-btn); font-size: 15px; line-height: 1;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.bty-p1b-stripnav:hover:not(:disabled) { background: var(--bty-line); }
.bty-p1b-stripnav:disabled { opacity: .35; cursor: default; }
.bty-p1b-stripnav[hidden] { display: none; }

.bty-p1b-stage { position: relative; }
.bty-p1b-main { position: relative; border-radius: var(--r-img); overflow: hidden; aspect-ratio: 1 / 1; cursor: zoom-in; }

/*  De centrale beeldregel in _SiteLayout pakt élke <img> in een container met "-thumb" in de klassenaam
    en legt daar de vólle klant-ronding op. Op een miniatuur van 76px werd de foto daardoor een cirkel
    binnen een bijna vierkante knop — dezelfde valkuil als bij de radius-ronde van 02-08. De foto volgt
    nu gewoon de knop. Let op het gewicht: de centrale regel eindigt op
    `img:not(.rounded-circle):not([class*="avatar"]):not([class*="logo"])`, en die drie :not()-delen tellen
    élk als een klasse mee — samen (0,5,1), niet (0,2,1). Een regel van drie klassen diep verliest dus,
    ook mét !important. Vandaar dezelfde :not()-staart plus twee eigen klassen. */
.box-layout .bty-p1b-thumbs .bty-p1b-thumb img:not(.rounded-circle):not([class*="avatar"]):not([class*="logo"]) {
    border-radius: inherit !important;
}

/*  Bladerpijlen op de grote foto. Ze liggen op de foto en verschijnen bij hover, zodat een rustige
    productfoto niet permanent twee knoppen draagt. Op een aanraakscherm bestaat hover niet — daar staan
    ze zacht zichtbaar, net als het vergrootteken. Vegen kan er ook (zie product-1b.js). */
.bty-p1b-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92); color: var(--bty-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    cursor: pointer; font-size: 20px; line-height: 1;
    opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.bty-p1b-nav.is-prev { left: 14px; }
.bty-p1b-nav.is-next { right: 14px; }
.bty-p1b-stage:hover .bty-p1b-nav, .bty-p1b-nav:focus-visible { opacity: 1; }
.bty-p1b-nav:hover { background: var(--bty-oppervlak); }
.bty-p1b-nav[hidden] { display: none; }
@media (hover: none) {
    .bty-p1b-nav { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
    .bty-p1b-nav { transition: none; }
}

/*  Vergrootteken rechtsonder op de grote foto: zonder zo'n teken is er niets dat verraadt dat je erop kunt
    klikken. Verschijnt zachtjes bij hover en blijft ook op aanraakschermen zichtbaar (daar is geen hover). */
.bty-p1b-zoom {
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--bty-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    opacity: .75; transition: opacity .2s ease, transform .2s ease;
}
.bty-p1b-main:hover .bty-p1b-zoom { opacity: 1; transform: scale(1.06); }
/* De ankers vormen alleen de doorbladerbare reeks voor de vergrote weergave; ze horen niet in beeld. */
.bty-p1b-lightbox { display: none; }
.bty-p1b-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Producten > Settings > "Foto's heel tonen" (Tom 23-10-2026): het hele werk in zijn eigen verhouding, niet vierkant bijgesneden. */
.bty-p1b-main.is-heel { aspect-ratio: auto; }
.bty-p1b-main.is-heel img { height: auto; max-height: 80vh; object-fit: contain; }
.bty-p1b-noimg { display: flex; align-items: center; justify-content: center; background: rgba(var(--bty-dark-rgb), .05); }
/* Actielabel van de klant (Product.Label) op de foto, zoals in het ontwerp. */
.bty-p1b-flag {
    /* z-index 2 net als het vergrootteken hiernaast: de klant-instelbare waas over de productfoto ligt op
       z-index 1, en zonder eigen z-index zou het actielabel daaronder verdwijnen. */
    position: absolute; top: 16px; left: 16px; z-index: 2;
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border-radius: 999px; background: var(--brand-secondary); color: var(--brand-on-secondary, #fff);
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
}

/* ── Bestelkolom ─────────────────────────────────────────────────────────── */
.bty-p1b-buy { display: flex; flex-direction: column; gap: 22px; }
.bty-p1b-buy > * { margin: 0; }
.bty-p1b-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bty-muted, #9a8b82); }
.bty-p1b-title { font-size: 44px; font-weight: 400; line-height: 1.1; letter-spacing: -.5px; color: var(--bty-dark); }
.bty-p1b-intro { font-size: 17px; line-height: 1.7; }
.bty-p1b-eyebrow + .bty-p1b-title { margin-top: -14px; }
.bty-p1b-title + .bty-p1b-intro { margin-top: -8px; }

.bty-p1b-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.bty-p1b-price-now { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--brand-secondary-ink, var(--bty-dark)); }
.bty-p1b-price-was { font-size: 16px; text-decoration: line-through; color: var(--bty-muted, #9a8b82); }
/* De besparing als pil. Kleur uit de huisstijl, niet uit het ontwerp. */
.bty-p1b-save {
    display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
    background: rgba(var(--bty-dark-rgb), .08); color: var(--brand-ink, var(--bty-dark));
    font-size: 12px; font-weight: 700;
}

/* ── Artikelkeuze ────────────────────────────────────────────────────────── */
.bty-p1b-choice { display: flex; flex-direction: column; gap: 12px; }
.bty-p1b-choice-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bty-p1b-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bty-muted, #9a8b82); }
.bty-p1b-choice-current { font-size: 13px; }
.bty-p1b-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* justify-content: flex-end zet naam en prijs onderaan de kaart. Zo lijnen ze uit over kaarten
   mét en zonder foto — anders staat de tekst van een fotoloze kaart hoog en de rest laag. */
.bty-p1b-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    padding: 12px; border: 1px solid rgba(var(--bty-dark-rgb), .14); border-radius: 7px;
    background: var(--bty-oppervlak); cursor: pointer; transition: border-color .15s, background .15s;
}
.bty-p1b-card:hover { border-color: var(--brand-secondary); }
.bty-p1b-card input { position: absolute; opacity: 0; pointer-events: none; }
/* Gekozen artikel: rand en vulling in de merkkleur, zoals het ontwerp laat zien. */
.bty-p1b-card:has(input:checked) { border-color: var(--brand-secondary); border-width: 1.5px; background: rgba(var(--bty-dark-rgb), .04); }
.bty-p1b-card-name { font-size: 13px; font-weight: 600; color: var(--bty-dark); }
/* Oude en nieuwe prijs onder elkaar: op een kaart van ~130 px passen twee bedragen niet naast
   elkaar en brak het tweede middenin af ("EUR 1.899,00 EUR" / "1.799,00"). */
.bty-p1b-card-price { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--bty-dark); }
.bty-p1b-card-was { font-size: 12px; font-weight: 400; text-decoration: line-through; color: var(--bty-muted, #9a8b82); }
.bty-p1b-card-out { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bty-muted, #9a8b82); }
.bty-p1b-card.is-soldout { opacity: .55; cursor: not-allowed; }
.bty-p1b-card.is-soldout:hover { border-color: rgba(var(--bty-dark-rgb), .14); }
.bty-p1b-card.is-static { cursor: default; }

/* ── Aantal + winkelwagen ────────────────────────────────────────────────── */
.bty-p1b-form { display: flex; flex-direction: column; gap: 22px; }
.bty-p1b-actions { display: flex; align-items: center; gap: 10px; }
.bty-p1b-qty {
    display: inline-flex; align-items: center; height: 52px; overflow: hidden;
    border: 1px solid rgba(var(--bty-dark-rgb), .14); border-radius: 7px; background: var(--bty-oppervlak);
}
.bty-p1b-qty button {
    width: 42px; height: 100%; border: 0; background: none; cursor: pointer;
    color: var(--bty-muted, #9a8b82); font-size: 18px; line-height: 1;
}
.bty-p1b-qty-val { min-width: 34px; text-align: center; font-size: 15px; font-weight: 600; color: var(--bty-dark); }
.bty-p1b-cart {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--brand-secondary); color: var(--brand-on-secondary, #fff);
    font-size: 16px; font-weight: 700; white-space: nowrap;
    transition: filter .15s;
}
.bty-p1b-cart:hover { filter: brightness(.94); }
.bty-p1b-secondary { display: flex; gap: 10px; }
.bty-p1b-ghost {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; border-radius: 999px; border: 1px solid rgba(var(--bty-dark-rgb), .14);
    background: var(--bty-oppervlak); color: var(--bty-dark); font-size: 14px; font-weight: 600; text-decoration: none;
}
.bty-p1b-ghost:hover { background: rgba(var(--bty-dark-rgb), .04); color: var(--bty-dark); }

/* ── Tabbladen ───────────────────────────────────────────────────────────── */
.bty-p1b-tabs { margin-top: 56px; }
.bty-p1b-tabbar { display: flex; gap: 32px; border-bottom: 1px solid rgba(var(--bty-dark-rgb), .14); }
.bty-p1b-tab {
    padding: 0 2px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
    background: none; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--bty-muted, #9a8b82);
}
.bty-p1b-tab.is-active { color: var(--bty-dark); font-weight: 700; border-bottom-color: var(--brand-secondary); }
.bty-p1b-panel { padding-top: 32px; }
.bty-p1b-paneltitle { font-size: 28px; font-weight: 500; color: var(--bty-dark); margin: 0 0 15px; }
/* Zonder JavaScript staan alle panelen onder elkaar en blijft de tabbalk verborgen; er valt dan
   immers niets te wisselen. product-1b.js zet has-tabs zodra dat wel kan. */
.bty-p1b-tabs .bty-p1b-tabbar { display: none; }
.bty-p1b.has-tabs .bty-p1b-tabbar { display: flex; }
.bty-p1b.has-tabs .bty-p1b-panel { display: none; }
.bty-p1b.has-tabs .bty-p1b-panel.is-active { display: block; }

/* ── Specificaties als kaart ─────────────────────────────────────────────── */
.bty-p1b-specs {
    max-width: 620px; padding: 8px 24px; border-radius: var(--r-card); background: var(--bty-oppervlak);
    box-shadow: 0 9px 17.5px rgba(var(--bty-dark-rgb), .07);
}
.bty-p1b-spec { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid rgba(var(--bty-dark-rgb), .12); font-size: 14px; }
.bty-p1b-spec:last-child { border-bottom: 0; }
.bty-p1b-spec-k { color: var(--bty-muted, #9a8b82); }
.bty-p1b-spec-v { font-weight: 600; color: var(--bty-dark); text-align: right; }

/* ── Smaller dan desktop ─────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .bty-p1b-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .bty-p1b-title { font-size: 34px; }
    .bty-p1b-specs { max-width: none; }
}
@media (max-width: 767px) {
    /*  Miniaturen ónder de foto in plaats van ernaast: naast elkaar blijft er te weinig over. De strip
        komt hier terug in de gewone stroom (dus geen absolute plaatsing meer) en schuift horizontaal. */
    .bty-p1b-gallery { display: flex; flex-direction: column; gap: 10px; padding-left: 0; }
    .bty-p1b-strip {
        position: static; width: auto; order: 2;
        flex-direction: row; align-items: stretch;
    }
    .bty-p1b-thumbs {
        flex-direction: row; flex: 1 1 auto; min-width: 0;
        overflow-x: auto; overflow-y: visible;
    }
    /*  Liggend spoor: de pijlen staan links en rechts en zijn even hoog als de miniaturen. Het pictogram
        is hetzelfde chevrontje, een kwartslag gedraaid — omhoog wordt zo naar links. */
    .bty-p1b-stripnav { width: 44px; height: auto; }
    .bty-p1b-stripnav i { display: block; transform: rotate(-90deg); }
    .bty-p1b-thumb { flex: 0 0 64px; width: 64px; height: 64px; }
    .bty-p1b-title { font-size: 28px; }
    .bty-p1b-price-now { font-size: 28px; }
    .bty-p1b-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Smallere knop: op 375 px brak "In winkelwagen" anders over twee regels. */
    .bty-p1b-cart { font-size: 15px; padding: 0 12px; gap: 8px; }
    .bty-p1b-qty { height: 48px; }
    .bty-p1b-qty button { width: 36px; }
    .bty-p1b-cart { height: 48px; }
    .bty-p1b-tabbar { gap: 20px; overflow-x: auto; }
    .bty-p1b-tab { white-space: nowrap; }
}

/* Levertijdbalk onder de bestelknoppen. Groen is hier een statuskleur ("dit klopt, het komt eraan"),
   net zoals rood dat is voor verwijderen — geen huisstijlkleur dus, maar een betekeniskleur. Bewust
   gedempt gehouden zodat hij de merkkleur van de knop erboven niet beconcurreert. */
.bty-p1b-delivery {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px; border-radius: min(var(--r-card), 10px);
    background: rgba(110, 127, 91, .14); color: #4f5d40;
    font-size: 13px; font-weight: 600;
}
.bty-p1b-delivery i { font-size: 17px; flex: 0 0 auto; }

/* Foto op de artikelkaart. Staat er geen foto bij een artikel, dan rendert de view dit vlak helemaal
   niet — een lege grijze rechthoek maakt de kaart alleen maar armer. Kaarten mét en zonder foto naast
   elkaar mag: het raster lijnt ze onderaan uit via align-items. */
/*  "bty-p1b-card-img" bevat "-card", dus de centrale kaartregel legde hier de volle klant-ronding op —
    op een strookje van 60px hoog werd dat een capsule. Vandaar een plafond én extra gewicht (0,3,0). */
.box-layout .bty-p1b-card .bty-p1b-card-img,
.bty-p1b-card-img { display: block; height: 60px; border-radius: min(var(--r-img), 8px) !important; overflow: hidden; }
.bty-p1b-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Reviewpagina (/reviews) ──────────────────────────────────────────────────────────
   Alleen beauty1: Views/Site/Templates/beauty1/Reviews.cshtml. Het kaartraster en de modal komen uit
   de gedeelde partial (reviews.css); hieronder staat de omlijsting — samenvatting, filter-/sorteerbalk,
   laadknop — plus de beauty1-afwerking van de gedeelde kaart. Kleuren komen uit de huisstijl: accent
   voor sterren en balkjes, de donkere merktint voor de actieve filterpil. */
.bty-rev-card {
    background: var(--bty-oppervlak); border-radius: 12px; padding: 26px;
    box-shadow: 0 9px 17.5px rgba(0, 0, 0, .06);
    display: flex; flex-direction: column; gap: 8px;
}
/* Het cijfer in de serif-letter van de template, zoals elke andere grote waarde in beauty1. */
.bty-rev-score-num { font-family: var(--alt-font); font-size: 44px; font-weight: 400; line-height: 1; color: var(--bty-dark); }
.bty-rev-score-stars { color: var(--bty-accent); font-size: 17px; letter-spacing: 2px; }
.bty-rev-score-sub { font-size: 13px; color: var(--bty-muted-cool); }

.bty-rev-bars-title { font-size: 13px; font-weight: 600; color: var(--medium-gray); margin-bottom: 4px; }
.bty-rev-bar-row { display: flex; align-items: center; gap: 10px; }
.bty-rev-bar-label { font-size: 12px; color: var(--bty-muted-cool); width: 34px; flex: 0 0 auto; white-space: nowrap; }
.bty-rev-bar-label i { font-size: 10px; color: var(--bty-accent); }
.bty-rev-bar-track { flex: 1; height: 7px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bty-accent) 12%, var(--bty-mix-licht)); }
.bty-rev-bar-fill { display: block; height: 100%; background: var(--bty-accent); }
/* Een lege trede krijgt geen accentkleur: nul procent hoort ook visueel nul te zijn. */
.bty-rev-bar-fill.is-empty { background: transparent; }
.bty-rev-bar-pct { font-size: 12px; color: var(--bty-muted-cool); width: 34px; flex: 0 0 auto; text-align: right; }

.bty-rev-write { justify-content: center; align-items: flex-start; gap: 14px; }
.bty-rev-write-text { font-size: 14px; line-height: 1.6; color: var(--medium-gray); }

/* Filterpils links, sorteerknop rechts. Op een telefoon valt de sorteerknop onder de pillen. */
.bty-rev-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bty-rev-bar .wf-review-tabs .nav-link { border-radius: 999px; padding: .5rem 1.35rem; font-weight: 500; }
.bty-rev-bar .wf-review-tabs .nav-link.active { background: var(--bty-dark); border-color: var(--bty-dark); color: #fff; }
.bty-rev-sort-btn {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    height: 40px; padding: 0 18px; border-radius: 999px;
    background: var(--bty-oppervlak); border: 1px solid var(--bty-line); color: var(--dark-gray); font-size: 14px; font-weight: 500;
}
.bty-rev-sort-btn:hover { border-color: var(--bty-accent); color: var(--bty-dark); }
.bty-rev-sort .dropdown-item.active,
.bty-rev-sort .dropdown-item:active { background: var(--bty-accent); color: var(--bty-on-accent, #fff); }

/* Laad-venster: eigen klasse, want d-none is van het bron-filter in de gedeelde partial. */
.bty-rev-hidden { display: none !important; }
.bty-rev-more { white-space: nowrap; }

/* Beauty1-afwerking van de gedeelde reviewkaart: zachtere ronding en schaduw in plaats van een lijn
   eromheen, en een scheidingslijn boven de naam zoals in het ontwerp. */
/*  Witte kaart op een witte pagina met alleen een flauwe schaduw las niet als kaart — je zag negen
    stukjes tekst in plaats van negen reviews. Nu een dunne rand in de warme merktint plus een iets
    aanwezigere schaduw, zodat elke review een eigen vlak wordt zonder dat het zwaar oogt. */
/*  De gedeelde reviewkaart én de drie samenvattingskaarten bovenaan (cijfer, verdeling, oproep) delen
    op DEZE pagina één omlijsting: warme 1px rand, warme schaduw, hetzelfde hover-gedrag. De
    samenvattingskaarten stonden hiervoor zonder rand en met een KOELE grijze schaduw — op deze warme,
    crèmekleurige pagina oogde dat vuil en vielen ze uit de familie (keuze Jenny 02-08).
    Bewust gescoped op .bty-rev-page: .bty-rev-card wordt óók door de reviewkaarten op de VOORPAGINA
    gebruikt, en die horen bij de blok-opmaak van het dashboard — die blijven dus zoals ze waren. */
.bty-rev-page .wf-review-card,
.bty-rev-page .bty-rev-card {
    border: 1px solid color-mix(in srgb, var(--bty-warm) 22%, var(--bty-mix-licht));
    border-radius: var(--wf-radius-card, 12px);
    box-shadow: 0 10px 26px rgba(var(--bty-dark-rgb), .08);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.bty-rev-page .wf-review-card:hover,
.bty-rev-page .bty-rev-card:hover {
    border-color: color-mix(in srgb, var(--bty-warm) 42%, var(--bty-mix-licht));
    box-shadow: 0 14px 34px rgba(var(--bty-dark-rgb), .13);
}
.bty-rev-page .wf-review-meta { border-top: 1px solid var(--bty-line); }
.bty-rev-page .wf-review-avatar { background: var(--bty-dark); color: #fff; }
.bty-rev-page .wf-review-stars { color: var(--bty-accent); }

/* Donkere weergave: reviews.css zet de gedeelde kaart al donker; onze eigen kaarten volgen datzelfde
   oppervlak zodat de samenvatting niet als wit vlak op een donkere pagina blijft staan. */
[data-bs-theme="dark"] .bty-rev-card {
    background: var(--wf-dark-card, color-mix(in srgb, var(--bty-accent) 14%, var(--site-dark-bg, #16201b)));
    box-shadow: 0 9px 17.5px rgba(0, 0, 0, .35);
}
[data-bs-theme="dark"] .bty-rev-score-num { color: #f1efec; }
[data-bs-theme="dark"] .bty-rev-score-sub,
[data-bs-theme="dark"] .bty-rev-bars-title,
[data-bs-theme="dark"] .bty-rev-bar-label,
[data-bs-theme="dark"] .bty-rev-bar-pct,
[data-bs-theme="dark"] .bty-rev-write-text { color: var(--bty-on-dark-muted); }
[data-bs-theme="dark"] .bty-rev-bar-track { background: rgba(255, 255, 255, .1); }
[data-bs-theme="dark"] .bty-rev-sort-btn { background: transparent; border-color: rgba(255, 255, 255, .22); color: var(--bty-on-dark-soft); }
[data-bs-theme="dark"] .bty-rev-page .wf-review-meta { border-top-color: rgba(255, 255, 255, .12); }

@media (max-width: 767.98px) {
    .bty-rev-card { padding: 20px; }
    .bty-rev-bar { justify-content: flex-start; }
}

/* ── Maat × kleur op de productpagina ─────────────────────────────────────
   Alleen zichtbaar wanneer de klant de assen invulde én JavaScript aanstaat; anders blijft de platte
   kaartlijst staan. Zie product-1b.js. */
.bty-p1b-matrix { display: flex; flex-direction: column; gap: 22px; }

.bty-p1b-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.bty-p1b-size {
    padding: 10px 16px; border: 1px solid rgba(var(--bty-dark-rgb), .14); border-radius: 7px;
    background: var(--bty-oppervlak); cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--bty-dark);
    transition: border-color .15s, background .15s;
}
.bty-p1b-size:hover { border-color: var(--brand-secondary); }
.bty-p1b-size.is-active { border-color: var(--brand-secondary); border-width: 1.5px; background: rgba(var(--bty-dark-rgb), .04); }

.bty-p1b-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bty-p1b-swatch {
    position: relative; width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(var(--bty-dark-rgb), .14); border-radius: 7px; cursor: pointer;
    outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s;
}
.bty-p1b-swatch.is-active { outline-color: var(--brand-secondary); }
/* Een stof zonder kleurcode toont zijn naam in plaats van een vlakje. */
.bty-p1b-swatch.is-textonly {
    width: auto; min-width: 40px; height: 40px; padding: 0 12px; background: var(--bty-oppervlak);
    font-size: 12px; font-weight: 600; color: var(--bty-dark);
}
/* Bestaat de stof niet in de gekozen maat: zichtbaar houden, maar duidelijk niet te kiezen.
   Verbergen zou de indruk wekken dat de stof helemaal niet bestaat. */
.bty-p1b-swatch.is-unavailable { opacity: .4; cursor: not-allowed; }
.bty-p1b-swatch.is-unavailable::after {
    content: ''; position: absolute; left: -2px; right: -2px; top: 50%;
    border-top: 1.5px solid var(--bty-dark); transform: rotate(-45deg);
}

/* ── "Misschien ook interessant" onder de productpagina ───────────────────
   Drie kaarten met foto, naam en prijs. Verschijnt alleen bij twee of meer suggesties; één losse
   kaart oogt als een fout in plaats van als een suggestie. */
/* "Vraag naar dit product/werk": het formulier onder het product (Tom 23-10-2026). Max. 760px breed, rustig kader. */
.bty-p1b-vraag { margin-top: 56px; max-width: 760px; padding: 32px; border-radius: var(--r-img, 16px); background: #f7f5f2; scroll-margin-top: 120px; }
@media (max-width: 767px) { .bty-p1b-vraag { padding: 22px 18px; margin-top: 40px; } }
.bty-p1b-related { margin-top: 56px; }
.bty-p1b-relgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bty-p1b-relcard {
    display: block; border-radius: var(--r-card); overflow: hidden; background: var(--bty-oppervlak);
    box-shadow: 0 9px 17.5px rgba(var(--bty-dark-rgb), .07);
    text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s;
}
.bty-p1b-relcard:hover { transform: translateY(-3px); box-shadow: 0 14px 24px rgba(var(--bty-dark-rgb), .12); }
.bty-p1b-relimg { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.bty-p1b-relimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vier kaarten in de opmaak: op een telefoon 2x2, vanaf 768px drie naast elkaar (de vierde valt weg). Zijn er maar drie,
   dan valt op een telefoon de derde weg: liever twee dan een halve rij (Tom 23-10-2026). Foto's heel tonen: niet bijsnijden. */
@media (min-width: 768px) { .bty-p1b-relgrid > :nth-child(n+4) { display: none; } }
@media (max-width: 767px) { .bty-p1b-relgrid > :nth-child(3):last-child { display: none; } }
.bty-p1b-relgrid.is-heel .bty-p1b-relimg { background: #f5f3f0; }
.bty-p1b-relgrid.is-heel .bty-p1b-relimg img { object-fit: contain; padding: 10px; }
.bty-p1b-relbody { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.bty-p1b-relname { font-size: 15px; font-weight: 600; color: var(--bty-dark); }
.bty-p1b-relprice { font-size: 14px; white-space: nowrap; color: var(--bty-muted, #9a8b82); }

@media (max-width: 767px) {
    .bty-p1b-relgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bty-p1b-relbody { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Winkeloverzicht met filters (/shop en /producten) ────────────────────
   Zijbalk met categorie- en prijsfilter naast het productraster. Verving op 05-08 de rij categoriepillen
   boven het raster (.bty-shop-cats): die kende geen prijzen, geen aantallen en geen subcategorieën, en
   toonde bovendien maar een greep uit het assortiment. Markup: beauty1/_ProductGrid.cshtml.

   Eigen klassenamen, geen geleende van business1: beauty1 laadt custom-business1.css niet, dus een
   geleende klasse zou hier kaal zijn. */
.bty-shop-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }

/* De filterkaart: witte kaart met de ronding die de klant koos, en een kort accentstreepje onder de kop. */
.bty-filter-card {
    background: var(--bty-oppervlak); border: 1px solid var(--bty-line); border-radius: var(--r-card);
    padding: 26px 24px; margin-bottom: 24px;
}
.bty-filter-title {
    position: relative; margin: 0 0 22px; padding-bottom: 12px;
    font-size: 19px; font-weight: 500; color: var(--bty-dark);
}
.bty-filter-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 34px; height: 2px; background: var(--brand-secondary);
}
.bty-filter-list { list-style: none; margin: 0; padding: 0; }
.bty-filter-list > li + li { margin-top: 2px; }
.bty-filter-list a {
    display: flex; align-items: center; gap: 12px; padding: 7px 0;
    color: var(--bty-ink-2); text-decoration: none; font-size: 15px; line-height: 1.4;
    transition: color .15s;
}
.bty-filter-list a:hover { color: var(--bty-dark); }
.bty-filter-list a.is-active { color: var(--bty-dark); font-weight: 600; }
/* Het rondje vóór de regel: leeg, en gevuld met de merkkleur zodra de keuze actief is. */
.bty-filter-dot {
    flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid var(--bty-track); background: var(--bty-oppervlak);
    transition: border-color .15s, box-shadow .15s;
}
.bty-filter-list a:hover .bty-filter-dot { border-color: var(--brand-secondary); }
.bty-filter-list a.is-active .bty-filter-dot {
    border-color: var(--brand-secondary);
    box-shadow: inset 0 0 0 3px var(--brand-secondary);
}
/* Het aantal staat rechts en duwt de naam niet weg: hij mag afbreken, het getal niet. */
.bty-filter-qty {
    margin-left: auto; flex: 0 0 auto;
    min-width: 26px; padding: 2px 7px; border-radius: var(--r-pill);
    background: var(--bty-line); color: var(--bty-muted);
    font-size: 11px; font-weight: 600; text-align: center;
}
.bty-filter-list a.is-active .bty-filter-qty { background: var(--brand-secondary); color: var(--brand-on-secondary, #fff); }
/* Subcategorie: één stap ingesprongen, zodat de boom afleesbaar blijft zonder extra lijnen. */
.bty-filter-list li.is-sub a { padding-left: 22px; font-size: 14px; }

/* "Nieuw binnen" — vijf regels met een duimnagel; dezelfde kaart als de filters. */
.bty-newest-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; text-decoration: none; }
.bty-newest-row + .bty-newest-row { border-top: 1px solid var(--bty-line); }
.bty-newest-img {
    flex: 0 0 auto; width: 62px; height: 62px; overflow: hidden; border-radius: min(var(--r-card), 12px);
    background: var(--bty-line); display: flex; align-items: center; justify-content: center;
    color: var(--bty-muted);
}
.bty-newest-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bty-newest-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bty-newest-name { font-size: 14px; font-weight: 600; color: var(--bty-dark); line-height: 1.3; }
.bty-newest-price { font-size: 13px; color: var(--base-ink); }
.bty-newest-row:hover .bty-newest-name { color: var(--base-ink); }

/* Label op de productfoto: uitverkocht, de eigen actietekst van de klant, of het kortingspercentage. */
.bty-shop-badge {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    padding: 5px 12px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.bty-shop-badge.is-label { background: var(--brand-secondary); color: var(--brand-on-secondary, #fff); }
.bty-shop-badge.is-deal { background: var(--base-color); color: var(--bty-on-accent, #fff); }
/* Uitverkocht is een stáát, geen actie — vandaar neutraal grijs en niet de huisstijlkleur. */
.bty-shop-badge.is-out { background: var(--medium-gray); color: #fff; }
.bty-shop-price del { color: var(--bty-muted); font-size: 15px; margin-right: 8px; }

.bty-shop-empty { text-align: center; padding: 60px 0; }
.bty-shop-empty p { color: var(--bty-muted); margin-bottom: 20px; }

/* Paginabalk: dezelfde pilvorm als de rest van de template. */
.bty-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 30px; }
/*  De span erbij (11-09-2026): de paginering van de module-overzichten zet een … tussen het eerste
    nummer en het venster rond de huidige pagina, en dat is geen link. Zonder deze uitbreiding stond
    dat puntje kaal naast de vakjes. */
.bty-pager a,
.bty-pager > span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 12px;
    border: 1px solid var(--bty-line); border-radius: var(--r-btn);
    background: var(--bty-oppervlak); color: var(--bty-ink-2); text-decoration: none;
    font-size: 14px; font-weight: 600;
    transition: border-color .15s, background .15s, color .15s;
}
.bty-pager a:hover { border-color: var(--brand-secondary); color: var(--bty-dark); }
.bty-pager a.is-active {
    background: var(--brand-secondary); border-color: var(--brand-secondary);
    color: var(--brand-on-secondary, #fff);
}
/* Aan het begin of het einde blijft de pijl staan maar doet niets meer — verplaatsen zou de balk laten
   springen bij elke pagina. */
.bty-pager a.is-off,
.bty-pager > span.is-off { opacity: .35; pointer-events: none; }

/* De knop bestaat alleen op smalle schermen; hier verborgen zodat de panelen altijd openstaan. */
.bty-shop-filtertoggle { display: none; }

@media (max-width: 991px) {
    /*  Onder de 992px past een zijbalk niet meer naast drie kaarten. De filters gaan naar boven en zijn
        dichtgeklapt: anders scrolt de bezoeker eerst langs twee lijsten voor hij een product ziet. */
    .bty-shop-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .bty-shop-side { margin-bottom: 24px; }
    .bty-shop-filtertoggle {
        display: inline-flex; align-items: center; gap: 10px;
        height: 46px; padding: 0 20px; cursor: pointer;
        border: 1px solid var(--bty-line); border-radius: var(--r-btn);
        background: var(--bty-oppervlak); color: var(--bty-dark); font-size: 14px; font-weight: 600;
    }
    .bty-shop-filtercount {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
        background: var(--brand-secondary); color: var(--brand-on-secondary, #fff); font-size: 11px;
    }
    /*  Dicht = weg uit de stroom. Zonder JavaScript blijft .is-open uit, dus dan zijn de filters niet te
        openen; daarom staat de knop alleen in deze media-query en toont het raster gewoon alles. */
    .bty-shop-panels { display: none; margin-top: 16px; }
    .bty-shop-side.is-open .bty-shop-panels { display: block; }
    .bty-filter-card { padding: 22px 20px; }
}

/* Donkere modus: de kaarten volgen het donkere vlak in plaats van wit te blijven. */
[data-bs-theme="dark"] .bty-filter-card,
[data-bs-theme="dark"] .bty-pager a,
[data-bs-theme="dark"] .bty-pager > span,
[data-bs-theme="dark"] .bty-shop-filtertoggle {
    background: var(--wf-dark-card); border-color: rgba(255, 255, 255, .14);
}
[data-bs-theme="dark"] .bty-filter-title,
[data-bs-theme="dark"] .bty-newest-name,
[data-bs-theme="dark"] .bty-shop-filtertoggle { color: var(--bty-on-dark-soft); }
[data-bs-theme="dark"] .bty-filter-list a { color: var(--bty-on-dark-muted); }
[data-bs-theme="dark"] .bty-filter-list a:hover,
[data-bs-theme="dark"] .bty-filter-list a.is-active,
[data-bs-theme="dark"] .bty-pager a:hover { color: var(--bty-on-dark-soft); }
[data-bs-theme="dark"] .bty-filter-dot { background: transparent; border-color: rgba(255, 255, 255, .3); }
[data-bs-theme="dark"] .bty-filter-qty { background: rgba(255, 255, 255, .12); color: var(--bty-on-dark-muted); }
[data-bs-theme="dark"] .bty-newest-row + .bty-newest-row { border-top-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .bty-newest-img { background: rgba(255, 255, 255, .1); }

/* ============================================================================
   GEDEELDE PARTIALS (Views/Site/Templates/_shared) — beauty1-jasje
   De partials _SiteForm en _FotomapWeergave staan sinds 31-07 op één gedeelde
   plek in plaats van in business1. De markup is daardoor voor elke template
   gelijk; hoe het eruitziet bepaalt de template zelf, hier. Zonder deze regels
   leende beauty1 letterlijk de business1-look: een koud grijs kader met vaste
   hoeken van 6px, midden in een warme, zachte layout.
   ========================================================================== */

/* Formulier-kaart: warme tint uit de huisstijl in plaats van het grijze kader.
   Hoeken volgen de klantinstelling, net als de overige kaarten. */
.wf-site-form {
    background: color-mix(in srgb, var(--bty-accent) 5%, var(--bty-mix-licht));
    border: 1px solid color-mix(in srgb, var(--bty-accent) 16%, var(--bty-mix-licht));
    border-radius: var(--wf-radius-card, 8px);
}
/* Invoervelden: rustig wit, met een accentrand zodra de bezoeker erin klikt. */
.wf-site-form :is(.form-control, .form-select) {
    border-radius: var(--wf-radius-card, 8px);
    border: 1px solid color-mix(in srgb, var(--bty-accent) 22%, var(--bty-mix-licht));
    background-color: var(--bty-oppervlak);
    padding: 12px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.wf-site-form :is(.form-control, .form-select):focus {
    border-color: var(--bty-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bty-accent) 14%, transparent);
}
/* De akkoord-/AVG-box binnen het formulier volgt dezelfde radius (Crafto zet
   border-radius-6px met !important, vandaar dat het hier ook moet). */
.wf-site-form .border-radius-6px { border-radius: var(--wf-radius-card, 8px) !important; }
.wf-site-form .bi-shield-check { color: var(--bty-atext); }

/* Fotomuur (_FotomapWeergave, weergave "fotomuur"): metselwerk via CSS-kolommen.
   Deze regels stonden alleen in business1 (.biz-masonry), waardoor een klant die
   op een beauty1-site "fotomuur" koos, zijn foto's als één lange kolom kreeg. */
.wf-masonry { column-count: 3; column-gap: 18px; }
.wf-masonry-item { break-inside: avoid; margin-bottom: 18px; }
@media (max-width: 991.98px) { .wf-masonry { column-count: 2; } }
@media (max-width: 575.98px) { .wf-masonry { column-count: 1; } }

/* Bolletjes onder de carousel/grote slider (_FotomapWeergave). Die volgen Crafto's
   .swiper-dark-pagination, en dat pakt --light-gray voor de inactieve stip. In beauty1 staat
   --light-gray op #ffece7 (beauty-salon.css r.12, Crafto zelf heeft daar #a8a8a8): bijna wit, dus op
   de witte galerijpagina 1,14:1 contrast — je zag alleen de actieve stip en niet hoeveel foto's er
   waren. De inactieve stip is daarom de Donkere kleur van de klant op lage dekking (~2,5:1, zelfde
   zichtbaarheid als business1/business2 en dezelfde taal als de hero van business2). NIET --light-gray
   zelf aanpassen: die variabele kleurt in beauty1 ook vlakken en scheidingen waar bijna-wit juist klopt. */
.wf-fotomap-dots .swiper-pagination-bullet { background: var(--brand-dark); opacity: .45; }
.wf-fotomap-dots .swiper-pagination-bullet-active { background: var(--brand-dark); opacity: 1; }

/* ---- Shop-accountpagina's (gedeelde views in Views/Site/Shared) -------------
   Inloggen, registreren, tweestapsverificatie, bestellingen en gegevens komen uit
   één gedeelde set, zodat elke template ze heeft. De opmaak is per template; deze
   klassen stonden eerder alleen in business1, waardoor de kaarten en de keuze-
   blokjes ("code via e-mail of sms") in beauty1 kaal renderden. */
.wf-account-card {
    border-radius: var(--wf-radius-card, 8px) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
    border-color: color-mix(in srgb, var(--bty-accent) 14%, var(--bty-mix-licht)) !important;
}
.wf-account-tile {
    color: inherit;
    border-radius: var(--wf-radius-card, 8px) !important;
    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: var(--bty-accent) !important;
}
.wf-account-tile:hover h6 { color: var(--bty-atext); }
/* Keuzeblokjes (e-mail of sms) als aanklikbare tegels in plaats van kale radioknoppen. */
.wf-opt {
    display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--bty-accent) 20%, var(--bty-mix-licht));
    border-radius: var(--wf-radius-card, 8px); padding: 14px 16px; background: var(--bty-oppervlak);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.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(--bty-accent);
}
.wf-opt:has(input:checked) {
    border-color: var(--bty-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bty-accent) 12%, transparent);
}

/* ============================================================================
   Radius-ronde beauty1 (02-08-2026)
   De centrale regeling in _SiteLayout.cshtml legt de klant-radius al over een lange lijst
   Crafto-klassen. Wat hieronder staat zijn de onderdelen die buiten die lijst vielen en dus
   een vaste hoek hielden terwijl de klant iets anders had gekozen. Gemeten bij Frenque
   (klant-radius 30px) over voorpagina + tien onderliggende pagina's.

   Twee behandelingen, bewust verschillend:
   - GROOT (kaarten, panelen, beelden vanaf ~270px): volgen de klant 1-op-1.
   - KLEIN (duimnagels en labels van 25-57px): schalen mee, maar met een plafond. Zonder dat
     plafond wordt een duimnagel van 57px bij een klant-radius van 30px zowat rond. Bij
     klant-radius 0 gaan ze netjes mee naar recht, want min() rekent dat vanzelf goed uit.

   Overal !important, net als de centrale regeling: Crafto's hulpklassen (.border-radius-6px en
   familie) staan in style.css zélf op !important, dus zonder dit verliest elke regel hier —
   ook een specifiekere.
   ========================================================================== */

/* ---- Groot: volgt de klant 1-op-1 ---------------------------------------- */

/* Teamkaart + het donkere overlay-vlak erin (dat vlak vult de kaart, dus zelfde hoek). */
.team-style-05.border-radius-6px,
.team-style-05 .team-content.border-radius-6px { border-radius: var(--wf-radius-card, 6px) !important; }

/* Vacature-, agenda- en nieuwsblokken: brede witte kaart met foto links. */
.row.g-0.bg-white.border-radius-6px { border-radius: var(--wf-radius-card, 6px) !important; }

/* De kaart (Google Maps) op de contactpagina. */
iframe.border-radius-6px { border-radius: var(--wf-radius-card, 6px) !important; }

/* Zijkolom met paginanavigatie. */
.bty-page-nav.border-radius-6px { border-radius: var(--wf-radius-card, 6px) !important; }

/* Bijschrift-overlay over de over-ons-foto: ligt óp het beeld, dus volgt de beeld-radius. */
figure .w-100.h-100.d-flex.border-radius-6px { border-radius: var(--wf-radius-image, 6px) !important; }

/* ---- Klein: schaalt mee, met plafond ------------------------------------- */

/* De vier vierkante duimnagels (57px) op een projectkaart. Let op: de zichtbare ronding komt van de
   IMG, niet van de link eromheen — de centrale beeldregel in _SiteLayout pakt hem op via
   [class*="-thumb"] (de wrapper heet .bty-proj-thumbs) en zette er de volle klant-radius op, waardoor
   een plaatje van 57px een cirkel werd.

   De lange selector hieronder is geen sierlijkheid maar noodzaak: die centrale regel weegt vijf
   klasse-onderdelen ZWAAR (.box-layout + [class*="-thumb"] + drie :not()'s) én staat verderop in de
   pagina dan dit bestand. Gelijk gewicht verliest dan. Deze telt er zes en wint dus wel. Hernoem je
   .bty-proj-thumbs ooit naar iets zonder "-thumb", dan grijpt de centrale regel niet meer en mag dit
   weer kort. */
.bty-proj-thumbs a.border-radius-4px { border-radius: min(var(--wf-radius-image, 4px), 9px) !important; }
.box-layout .bty-proj-thumbs a.border-radius-4px img.bty-thumb-square:not(.rounded-circle):not([class*="logo"]) {
    border-radius: min(var(--wf-radius-image, 4px), 9px) !important;
}

/*  Categorielabels op de blogtegel en in het FAQ-paneel (~40px hoog). Deze stonden eerst óók op een
    plafond, maar dat is voor een labeltje juist verkeerd: een categoriechip hóórt bij een ronde
    huisstijl een pilletje te worden. Ze volgen de klant dus gewoon (keuze Jenny 02-08). Het plafond
    blijft alleen op de fotoduimnagels, waar een volle ronding een cirkel oplevert. */
.bty-metro-cat { border-radius: var(--wf-radius-card, 3px) !important; }
/*  Het FAQ-voorpaginablok stond hier ook in, met een categorie-pilletje. In ontwerp B (02-08) is dat
    label geen pil meer maar een gewone kleine kapitalenregel boven de vraag, dus valt hier weg. */

/*  ── Aanvinkvakje op formulieren ───────────────────────────────────────────────────────────────
    Crafto zet in style.css `padding: 12px 25px` op élke `input` — dus óók op een checkbox. Met
    box-sizing: border-box duwt die vulling het vakje op naar 52×26px: een brede lege balk in plaats
    van een vinkje, waardoor het label naar de volgende regel valt. Zichtbaar bij het AVG-vinkje
    onder elk formulier (gemeld door Jenny 09-08 op de agenda-detailpagina, maar het speelde overal).

    business1 had dit al opgelost; beauty1 had alleen de radius-regel hieronder overgenomen en niet
    de maatvoering. **Les: bij een geleende klassenaam altijd de héle regelset meenemen, niet één
    regel** — zelfde fout als eerder bij de referentiekaarten.

    De radius blijft van ons: de klant-veldronding met een plafond van 4px. Met de volle waarde wordt
    het vakje een rondje en is het niet meer van een keuzerondje te onderscheiden. */
.form-check-input.wf-form-check {
    /*  business1 zet hier `appearance: auto` en krijgt daarmee het native vinkje van de browser terug.
        Dat werkt, maar een native vakje negeert élke opmaak — ook de ronding, die daardoor op 0 sprong.
        Hier houden we Bootstraps eigen vinkje (zie [[bootstrap-over-browser-defaults]]): 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. */
    padding: 0 !important;
    width: 1.15em !important;
    height: 1.15em !important;
    margin-top: .15em;
    cursor: pointer;
    flex: none;
    border-radius: min(var(--wf-radius-input, 4px), 4px) !important;
}
/* Aangevinkt: het haakje in de huisstijl in plaats van Bootstraps standaardblauw. */
.form-check-input.wf-form-check:checked { background-color: var(--bty-accent); border-color: var(--bty-accent); }
.form-check-input.wf-form-check:focus { border-color: var(--bty-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bty-accent) 25%, transparent); }

/* ============================================================================
   FAQ-overzichtspagina (ontwerp 02-08-2026, Claude Design — "FAQ-overzichtspagina Beauty1")
   Alleen Views/Site/Templates/beauty1/Faq.cshtml. Het compacte FAQ-blok op de VOORPAGINA blijft
   ongemoeid; dat is .bty-faq2-* hierboven.

   Alle klassen zijn geprefixt met bty-faqp-. Het ontwerp leverde ze als .chip, .faq-item, .q-text
   enzovoort — veel te algemeen voor een stylesheet die naast de hele Crafto-basis staat. Precies zo
   een naamsbotsing kostte ons vanochtend nog tijd bij .bty-rev-card.

   Kleuren en rondingen komen zonder uitzondering uit variabelen, zodat de pagina de huisstijl van
   elke klant volgt en ook klopt bij een rondingsinstelling van 0 (strak) of 50 (heel rond).
   ========================================================================== */
.bty-faqp {
    --fq-card: var(--wf-radius-card, 6px);
    --fq-media: min(var(--wf-radius-card, 6px), 22px);
    --fq-pil: min(var(--wf-radius-card, 6px), 999px);
    --fq-knop: min(calc(var(--wf-radius-card, 6px) * .6), 999px);

    --fq-vlak: color-mix(in srgb, var(--bty-warm) 5%, var(--bty-mix-licht));
    --fq-zacht: color-mix(in srgb, var(--bty-warm) 9%, var(--bty-mix-licht));
    --fq-band: color-mix(in srgb, var(--bty-accent) 13%, var(--bty-mix-licht));
    /* Leestekst op de warme tint iets dieper, zodat het contrast boven 4,5:1 blijft. */
    --fq-tekst-tint: color-mix(in srgb, var(--medium-gray) 78%, var(--bty-dark));
    --fq-lijn: color-mix(in srgb, var(--bty-warm-deep) 13%, transparent);
    --fq-schaduw: 0 18px 44px color-mix(in srgb, var(--bty-warm-deep) 9%, transparent);
    --fq-schaduw-op: 0 22px 54px color-mix(in srgb, var(--bty-warm-deep) 15%, transparent);

    background: var(--fq-vlak);
    overflow-wrap: break-word;
    text-wrap: pretty;
}
.bty-faqp-wrap { max-width: 1060px; margin-inline: auto; padding-inline: 20px; }
.bty-faqp :focus-visible { outline: 2px solid var(--bty-accent); outline-offset: 3px; border-radius: 6px; }

/* ---- Introtekst van de klant ---------------------------------------------- */
.bty-faqp-intro { max-width: 64ch; margin: 0 auto; text-align: center; padding: clamp(40px, 6vw, 68px) 0 0; }
.bty-faqp-intro > *:last-child { margin-bottom: 0; }

/* ---- Uitgelicht ----------------------------------------------------------- */
.bty-faqp-featured {
    margin-top: clamp(36px, 5vw, 60px);
    background: var(--fq-band);
    border-radius: var(--fq-card);
    padding: clamp(26px, 3.6vw, 40px);
}
.bty-faqp-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--bty-atext); margin-bottom: 20px;
}
.bty-faqp-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.bty-faqp-featgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.bty-faqp-featcard {
    display: flex; flex-direction: column; gap: 8px; text-align: left;
    background: var(--bty-oppervlak); border: 0; border-radius: min(var(--wf-radius-card, 6px), 24px);
    padding: 22px 24px; box-shadow: var(--fq-schaduw); cursor: pointer;
    transition: box-shadow .25s ease, transform .25s ease;
}
.bty-faqp-featcard:hover { box-shadow: var(--fq-schaduw-op); transform: translateY(-2px); }
.bty-faqp-fcq { font-family: var(--alt-font); font-size: 20px; line-height: 1.35; color: var(--bty-dark); }
.bty-faqp-fca { font-size: 15.5px; line-height: 1.6; }
.bty-faqp-fcgo {
    margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--bty-atext);
}
.bty-faqp-fcgo::after { content: " \2192"; }

/* ---- Zoeken + filteren ----------------------------------------------------
   De balk plakt bovenaan zodat je bij tweehonderd vragen niet terug hoeft te scrollen om te filteren.
   De sitekop plakt ook, dus deze begint eronder. */
.bty-faqp-tools {
    position: sticky; top: 92px; z-index: 20;
    margin-top: clamp(36px, 5vw, 60px);
    padding: 16px 0;
    background: color-mix(in srgb, var(--fq-vlak) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fq-lijn);
}
.bty-faqp-toolsin { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.bty-faqp-search { position: relative; flex: 1 1 260px; min-width: 0; }
.bty-faqp-search input {
    width: 100%; font: inherit; font-size: 16px; color: var(--bty-dark);
    padding: 13px 20px 13px 46px;
    background: var(--bty-oppervlak); border: 1px solid var(--fq-lijn); border-radius: var(--fq-pil);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--bty-warm-deep) 5%, transparent);
}
.bty-faqp-search input::placeholder { color: var(--medium-gray); opacity: 1; }
.bty-faqp-search input:focus {
    outline: none; border-color: var(--bty-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bty-accent) 26%, transparent);
}
.bty-faqp-search svg {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--bty-atext); opacity: .75; pointer-events: none;
}
.bty-faqp-chiprow { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.bty-faqp-chip {
    font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1;
    padding: 11px 18px; border: 1px solid var(--fq-lijn); border-radius: var(--fq-pil);
    background: var(--bty-oppervlak); color: var(--bty-atext); cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bty-faqp-chip:hover { background: var(--fq-zacht); }
.bty-faqp-chip[aria-pressed="true"] {
    background: var(--bty-accent); border-color: var(--bty-accent);
    color: var(--bty-on-accent, #fff); font-weight: 600;
}

/* ---- Categoriekop --------------------------------------------------------- */
.bty-faqp-list { padding-bottom: clamp(60px, 8vw, 110px); }
.bty-faqp-cat { padding-top: clamp(40px, 5vw, 64px); }
.bty-faqp-cathead { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.bty-faqp-catnum {
    font-family: var(--alt-font); font-size: clamp(30px, 4.4vw, 46px); line-height: 1;
    color: color-mix(in srgb, var(--bty-accent) 62%, transparent); flex: none;
}
.bty-faqp-cathead h2 { font-size: clamp(24px, 3vw, 32px); margin: 0; flex: 0 1 auto; min-width: 0; }
.bty-faqp-catrule { flex: 1 1 40px; height: 1px; background: var(--fq-lijn); min-width: 16px; }
.bty-faqp-catcount { flex: none; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--bty-atext); }
/*  Op een telefoon kreeg de kop naast het nummer, de lijn en de teller maar 125px en brak hij middenin een
    woord: "Accessoire / s", "Onderhou / d" (Tom, 13-09-2026). Nu vervalt de lijn, is de kop nooit smaller
    dan zijn langste woord, en schuift de teller desnoods naar de volgende regel. */
@media (max-width: 575.98px) {
  .bty-faqp-cathead { flex-wrap: wrap; row-gap: 4px; }
  .bty-faqp-cathead h2 { flex: 1 1 auto; min-width: min-content; overflow-wrap: normal; word-break: normal; }
  .bty-faqp-catrule { display: none; }
}

/* ---- De vraag ------------------------------------------------------------- */
.bty-faqp-item {
    background: var(--bty-oppervlak); border-radius: var(--fq-card); margin-bottom: 12px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--bty-warm-deep) 6%, transparent);
    transition: background-color .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.bty-faqp-item:hover { box-shadow: var(--fq-schaduw); }
.bty-faqp-item:has(.collapse.show) { background: var(--fq-zacht); box-shadow: var(--fq-schaduw-op); }
.bty-faqp-q {
    display: grid; grid-template-columns: auto 1fr auto; gap: 6px 18px; align-items: start;
    width: 100%; text-align: left; background: none; border: 0;
    padding: 22px clamp(18px, 2.4vw, 28px); border-radius: var(--fq-card);
}
.bty-faqp-qnum {
    font-family: var(--alt-font); font-size: 16px; line-height: 1.7;
    color: color-mix(in srgb, var(--bty-atext) 70%, var(--bty-mix-licht));
    font-variant-numeric: tabular-nums; padding-top: 2px;
}
.bty-faqp-qbody { min-width: 0; }
.bty-faqp-qtag {
    display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bty-atext); margin-bottom: 4px;
}
.bty-faqp-qtext {
    display: block; font-family: var(--alt-font);
    font-size: clamp(18px, 2vw, 21px); line-height: 1.4; color: var(--bty-dark);
}
.bty-faqp-qshort { display: block; margin-top: 7px; font-size: 15.5px; line-height: 1.6; }
/* Het korte antwoord is een voorproefje; staat het volledige antwoord open, dan is het overbodig. */
.bty-faqp-q:not(.collapsed) .bty-faqp-qshort { display: none; }
.bty-faqp-qicon {
    position: relative; width: 42px; height: 42px; flex: none; grid-row: 1 / -1; grid-column: 3;
    border-radius: var(--fq-knop);
    background: color-mix(in srgb, var(--bty-accent) 18%, var(--bty-mix-licht));
    transition: background-color .25s ease;
}
.bty-faqp-qicon::before, .bty-faqp-qicon::after {
    content: ""; position: absolute; left: 13px; right: 13px; top: 50%; height: 1.5px;
    background: var(--bty-atext); transform: translateY(-50%);
    transition: transform .3s ease, background-color .25s ease;
}
.bty-faqp-qicon::after { transform: translateY(-50%) rotate(90deg); }
.bty-faqp-q:hover .bty-faqp-qicon { background: color-mix(in srgb, var(--bty-accent) 34%, var(--bty-mix-licht)); }
.bty-faqp-q:not(.collapsed) .bty-faqp-qicon { background: var(--bty-accent); }
.bty-faqp-q:not(.collapsed) .bty-faqp-qicon::before,
.bty-faqp-q:not(.collapsed) .bty-faqp-qicon::after { background: var(--bty-on-accent, #fff); }
.bty-faqp-q:not(.collapsed) .bty-faqp-qicon::after { transform: translateY(-50%) rotate(0); }

/* ---- Het antwoord --------------------------------------------------------- */
.bty-faqp-a {
    color: var(--fq-tekst-tint);
    padding: 4px clamp(18px, 2.4vw, 28px) 28px;
    margin-left: clamp(0px, 2vw, 34px);   /* lijnt uit onder de vraagtekst, niet onder het nummer */
}
.bty-faqp-a::before { content: ""; display: block; height: 1px; background: var(--fq-lijn); margin-bottom: 22px; }
.bty-faqp-a > *:first-child { margin-top: 0; }
.bty-faqp-a > *:last-child { margin-bottom: 0; }
.bty-faqp-a p { margin: 0 0 1em; }
.bty-faqp-a strong { color: var(--bty-dark); font-weight: 600; }
.bty-faqp-a ul, .bty-faqp-a ol { margin: 0 0 1em; padding-left: 1.3em; }
.bty-faqp-a li { margin-bottom: .35em; }
.bty-faqp-a li::marker { color: var(--bty-accent); }
.bty-faqp-fig { margin: 0 0 20px; }
.bty-faqp-fig img { display: block; width: 100%; height: auto; border-radius: var(--fq-media); background: var(--fq-band); }
@media (min-width: 768px) {
    /* Foto naast de tekst; zonder foto loopt de tekst gewoon door en valt er geen gat. */
    .bty-faqp-fig { float: right; width: min(42%, 260px); margin: 0 0 18px 28px; }
}

/* ---- Niets gevonden ------------------------------------------------------- */
.bty-faqp-empty {
    text-align: center; background: var(--bty-oppervlak); border-radius: var(--fq-card);
    padding: clamp(36px, 6vw, 60px) 24px; margin-top: clamp(40px, 5vw, 64px); box-shadow: var(--fq-schaduw);
}
.bty-faqp-empty h2 { font-size: 24px; margin: 0 0 8px; }
.bty-faqp-empty p { margin: 0 0 20px; }
.bty-faqp-reset {
    font: inherit; font-weight: 600; font-size: 15px; letter-spacing: .04em;
    padding: 12px 26px; border: 0; border-radius: var(--fq-pil);
    background: var(--bty-accent); color: var(--bty-on-accent, #fff); cursor: pointer;
}
.bty-faqp-reset:hover { background: color-mix(in srgb, var(--bty-accent) 82%, var(--bty-warm-deep)); }

.bty-faqp-hidden { display: none !important; }

@media (max-width: 991px) {
    /* Onder de kopbalk-hoogte van tablet en telefoon. */
    .bty-faqp-tools { top: 76px; }
}
@media (max-width: 575.98px) {
    .bty-faqp-q { grid-template-columns: 1fr auto; gap: 4px 14px; padding: 20px 18px; }
    .bty-faqp-qnum { display: none; }
    .bty-faqp-qicon { grid-column: 2; }
    .bty-faqp-a { margin-left: 0; }
    .bty-faqp-tools { padding: 12px 0; top: 68px; }
}
@media (prefers-reduced-motion: reduce) {
    .bty-faqp * { transition: none !important; animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Vestigingen — OVERZICHTSPAGINA (.vso-*)
   Ontwerp uit Claude Design, 03-08-2026. Verving de business1-indeling (foto en kaart links,
   gegevens rechts, om en om) die als standaardsjabloon oogde.

   Familie van het voorpagina-blok (.vst-*): dezelfde witte panelen, dezelfde statuspil-taal,
   dezelfde iconen. Ruimer, want hier is wél plek voor de introtekst, de hele week en het album.

   Kleuren: uitsluitend de drie kleuren die de klant koos plus neutralen — zie _BrandVars.cshtml.
   Radius volgt --r-card/--r-img/--r-pill, dus de klantinstelling ([[site-radius-check-rule]]).
   ═══════════════════════════════════════════════════════════════════════════ */
.vso {
    /* Vlakken en lijnen, afgeleid van de Steunkleur zodat ze de temperatuur van de huisstijl volgen. */
    --vso-vlak: var(--bty-oppervlak);
    --vso-vlak-2: color-mix(in srgb, var(--bty-accent-2) 8%, var(--bty-mix-licht));
    --vso-beeld: color-mix(in srgb, var(--bty-accent-2) 14%, #eceae7);
    --vso-schaduw: 0 16px 40px rgba(0, 0, 0, .07);
    --vso-schaduw-op: 0 26px 60px rgba(0, 0, 0, .14);
    /*  Crafto geeft een sectie standaard 90px ruimte bovenaan. Dat is bedoeld voor een sectie die met
        een kop begint; hier begint hij met de springbalk, en die hangt dan te ver onder de paginakop
        (Jenny 03-08). Teruggebracht naar ongeveer de helft. */
    padding-top: clamp(26px, 3.4vw, 46px);
    padding-bottom: clamp(40px, 6vw, 80px);
}
/* Ruimte tussen de springbalk en de eerste vestiging; zonder balk draagt de sectie die ruimte zelf. */
.vso > .container { padding-top: clamp(34px, 4.5vw, 64px); }

/* ── Springbalk met de vestigingsnamen ─────────────────────────────────────
   Plakt ONDER de Crafto-header. Die wordt bij het scrollen vast (position: fixed) en is dan zo'n
   76px hoog; blijft de balk op top:0 staan, dan schuift hij eronder weg. */
.vso-nav {
    --vso-nav-top: 76px;
    position: sticky; top: var(--vso-nav-top); z-index: 8;
    background: color-mix(in srgb, var(--bty-mix-licht) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bty-line);
}
.vso-nav-in { display: flex; align-items: center; gap: 14px 20px; padding-block: 12px; overflow-x: auto; scrollbar-width: none; }
.vso-nav-in::-webkit-scrollbar { display: none; }
.vso-nav-titel {
    flex: none; font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--bty-atext);
}
.vso-nav-lijst { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
/*  Wit op bijna-wit viel weg (Jenny 03-08): de plaatsnamen zijn de navigatie van deze pagina en moeten
    opvallen. Nu een VOLLE vulling in de Hoofdkleur van de klant.

    Eerst geprobeerd met een lichte tint (20% accent op wit) plus donkere tekst. Dat leest prima — 6,4:1 —
    maar het valt nog steeds niet op: bij een gedempte huisstijlkleur, zoals het grijsbruin van deze
    klant, is 20% op wit vrijwel wit (1,27:1 tegen de balk eronder). Een tint werkt alleen bij een felle
    merkkleur, en daar kunnen we niet op rekenen. Vol vullen werkt bij élke huisstijl.

    Tekstkleur via --bty-on-accent: die is per klant al wit óf bijna-zwart gekozen, afhankelijk van hoe
    donker de merkkleur is. Hover gaat naar de Donkere kleur, zodat er verschil blijft tussen "dit kun je
    aanklikken" en "hier wijs je nu aan". */
.vso-nav-lijst a {
    display: block; white-space: nowrap; text-decoration: none;
    color: var(--bty-on-accent); font-size: 15.5px; font-weight: 600;
    padding: 9px 18px; border-radius: var(--r-pill);
    background: var(--bty-accent);
    border: 1px solid var(--bty-accent);
    transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.vso-nav-lijst a:hover,
.vso-nav-lijst a:focus-visible {
    background: var(--dark-gray); color: #fff;
    border-color: var(--dark-gray);
}

/* ── Eén vestiging per sectie ──────────────────────────────────────────────
   scroll-margin-top houdt de naam vrij van de header én de springbalk als je erheen springt. */
.vso-vs { scroll-margin-top: 150px; }
/*  De ruimte BOVEN de scheidingslijn (tussen het fotoalbum en de lijn) was 110px en dat las als een gat
    (Jenny 03-08); nu ruim de helft. De ruimte ONDER de lijn blijft groter, zodat de lijn duidelijk bij
    de vestiging eronder hoort en niet los tussen twee blokken zweeft. */
.vso-vs + .vso-vs {
    margin-top: clamp(30px, 4vw, 52px);
    padding-top: clamp(40px, 5.5vw, 72px);
    border-top: 1px solid var(--bty-line);
}

.vso-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vso-label {
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    padding: 7px 15px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--bty-accent) 16%, var(--bty-mix-licht)); color: var(--bty-atext);
}
.vso-naam { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.18; color: var(--dark-gray); margin: 0; }
.vso-intro { margin: 14px 0 0; max-width: 62ch; font-size: 18px; }

/*  align-items: stretch (niet start): de beeldkolom loopt door tot onder aan het paneel, zodat beide
    kolommen op dezelfde lijn eindigen. Met `start` was de beeldkolom 834px en het paneel 955px, en
    eindigde elke sectie links 121px eerder dan rechts — dat las als scheve uitlijning.
    Het paneel zelf blijft op `start` staan: dat is een kaart met een knop onderaan, die je niet wilt
    uitrekken als de beeldkolom juist de langste is. */
.vso-body {
    display: grid; gap: clamp(18px, 2.4vw, 32px); align-items: stretch;
    grid-template-columns: minmax(0, 1.32fr) minmax(320px, .68fr);
    margin-top: clamp(26px, 3.4vw, 40px);
}
.vso-paneel { align-self: start; }
/* Eén vestiging: iets ruimer beeld, want de pagina hoeft niets anders te dragen. */
.vso-vs--solo .vso-body { grid-template-columns: minmax(0, 1fr) minmax(340px, .62fr); }
.vso-vs--solo .vso-naam { font-size: clamp(34px, 5vw, 60px); }
.vso-vs--solo .vso-foto { aspect-ratio: 4 / 3; }

/*  De foto houdt zijn verhouding; de kaart vult wat er onder overblijft (1fr), zodat de kolom precies
    zo hoog wordt als het paneel ernaast. Is het paneel juist korter, dan valt de kaart terug op zijn
    eigen minimumhoogte en blijft de verhouding netjes. */
.vso-beeld { display: grid; grid-template-rows: auto 1fr; gap: clamp(14px, 1.8vw, 22px); }
.vso-foto, .vso-map { margin: 0; border-radius: var(--r-img); background: var(--vso-beeld); overflow: hidden; }
.vso-foto { aspect-ratio: 16 / 10; }
.vso-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vso-map { min-height: clamp(220px, 21vw, 330px); border: 1px solid var(--bty-line); }
.vso-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── Paneel: status, week, adres, route ──────────────────────────────────── */
/*  Haarlijntje om het paneel (Jenny 03-08). 1px in de lichtste lijnkleur, niet 0.5px: een halve pixel
    bestaat alleen op een scherm met dubbele resolutie en wordt op een gewoon scherm door de browser
    tóch naar 1px afgerond — of soms helemaal weggelaten, waardoor de rand op de ene laptop wel en op de
    andere niet te zien is. De dunne indruk komt hier van de kleur, niet van de dikte. */
.vso-paneel {
    background: var(--vso-vlak); border-radius: var(--r-card); box-shadow: var(--vso-schaduw);
    border: 1px solid var(--bty-line);
    padding: clamp(22px, 2.6vw, 34px);
}
.vso-status {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 22px;
    padding: 16px 20px; border-radius: var(--r-card);
    background: var(--vso-vlak-2);
}
.vso-status strong { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; color: var(--dark-gray); }
.vso-status-sub { font-size: 16px; }
/* Statuskleur: groen voor open is een bewuste statuskleur (zoals rood bij verwijderen), maar wel
   met een vleugje accent zodat hij bij de huisstijl hoort — zelfde mengsel als de pil op de
   voorpagina. Gesloten krijgt geen rood maar neutraal grijs: dicht is geen fout. */
.vso-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; align-self: center; }
.vso-status--open .vso-dot { background: color-mix(in srgb, var(--bty-accent) 55%, #1d7a3d); }
.vso-status--dicht .vso-dot { background: color-mix(in srgb, var(--medium-gray) 60%, var(--bty-mix-licht)); }

.vso-sub {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--bty-atext); margin: 0 0 12px;
}
.vso-sub svg { width: 17px; height: 17px; flex: none; }

.vso-week { margin: 0 0 26px; font-size: 16px; }
.vso-dag {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
    padding: 8px 12px; border-radius: min(var(--r-card), 14px);
}
.vso-dag dt { min-width: 0; }
.vso-dag dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--dark-gray); }
.vso-dag.is-dicht dd { color: var(--medium-gray); }
.vso-dag.is-vandaag { background: color-mix(in srgb, var(--bty-accent) 15%, var(--bty-mix-licht)); }
.vso-dag.is-vandaag dt, .vso-dag.is-vandaag dd { font-weight: 600; color: var(--dark-gray); }
.vso-vandaag {
    display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bty-atext);
}
.vso-noot { display: block; font-size: 13.5px; letter-spacing: .04em; color: var(--bty-atext); }

.vso-adres { font-style: normal; margin: 0 0 12px; color: var(--dark-gray); }
.vso-contact { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.vso-contact a {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: center;
    text-decoration: none; overflow-wrap: anywhere;
}
.vso-contact svg { width: 18px; height: 18px; color: var(--bty-atext); }
.vso-contact a:hover { color: var(--bty-atext); }

.vso-route {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 16px; font-weight: 600; text-decoration: none;
    padding: 16px 26px; border-radius: var(--r-btn);
    background: var(--bty-accent); color: var(--bty-on-accent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--bty-accent) 34%, transparent);
    transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.vso-route:hover {
    color: var(--bty-on-accent); background: color-mix(in srgb, var(--bty-accent) 84%, var(--bty-mix-licht));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--bty-accent) 42%, transparent);
    transform: translateY(-2px);
}
.vso-route svg { width: 18px; height: 18px; flex: none; }

/* Fotoalbum binnen de sectie. De weergave zelf is een klantinstelling per vestiging en komt uit
   _FotomapWeergave; hier alleen de plaatsing eromheen. */
.vso-album { margin-top: clamp(18px, 2.4vw, 30px); }

@media (max-width: 991.98px) {
    .vso-body, .vso-vs--solo .vso-body { grid-template-columns: 1fr; }
    .vso-nav { --vso-nav-top: 64px; }
    .vso-vs { scroll-margin-top: 128px; }
}
@media (max-width: 575.98px) {
    .vso-paneel { padding: 20px 16px; }
    .vso-dag { padding: 8px 8px; }
    .vso-status { padding: 14px 16px; }
    .vso-foto, .vso-vs--solo .vso-foto { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
    .vso * { transition: none !important; }
}

/* Donkere modus: de witte panelen worden vlakken op de donkere basis, afgeleid van de Donkere kleur
   van de klant met een vleugje Steunkleur — geen nieuwe kleuren. */
[data-bs-theme="dark"] .vso {
    --vso-vlak: color-mix(in srgb, var(--site-dark-bg) 88%, var(--bty-accent-2));
    --vso-vlak-2: color-mix(in srgb, var(--site-dark-bg) 80%, var(--bty-accent-2));
    --vso-beeld: color-mix(in srgb, var(--site-dark-bg) 74%, var(--bty-accent-2));
    --vso-schaduw: 0 16px 40px rgba(0, 0, 0, .34);
}
[data-bs-theme="dark"] .vso-nav { background: color-mix(in srgb, var(--site-dark-bg) 88%, transparent); }
/* Op donker moet het haarlijntje lichter zijn dan het vlak, niet donkerder — anders zie je niets. */
[data-bs-theme="dark"] .vso-paneel { border-color: color-mix(in srgb, #fff 16%, transparent); }
[data-bs-theme="dark"] .vso-nav-lijst a { background: var(--bty-accent); border-color: var(--bty-accent); color: var(--bty-on-accent); }
[data-bs-theme="dark"] .vso-nav-lijst a:hover,
[data-bs-theme="dark"] .vso-nav-lijst a:focus-visible {
    /* Op een donkere pagina moet hover LICHTER worden, niet donkerder — anders verdwijnt hij in de balk. */
    background: color-mix(in srgb, var(--bty-accent) 70%, #fff);
    border-color: color-mix(in srgb, var(--bty-accent) 70%, #fff);
    color: #232120;
}
[data-bs-theme="dark"] .vso-naam,
[data-bs-theme="dark"] .vso-status strong,
[data-bs-theme="dark"] .vso-dag dd,
[data-bs-theme="dark"] .vso-adres { color: var(--bty-on-dark-warm); }
[data-bs-theme="dark"] .vso-label { background: color-mix(in srgb, var(--bty-accent) 26%, var(--site-dark-bg)); color: var(--bty-on-dark-warm); }
[data-bs-theme="dark"] .vso-dag.is-vandaag { background: color-mix(in srgb, var(--bty-accent) 22%, var(--site-dark-bg)); }
[data-bs-theme="dark"] .vso-sub,
[data-bs-theme="dark"] .vso-noot,
[data-bs-theme="dark"] .vso-vandaag,
[data-bs-theme="dark"] .vso-contact svg { color: var(--bty-on-dark-warm-2); }

/* ══ HAMBURGERMENU OP GROOT SCHERM ═══════════════════════════════════════════════════════
   Kiest de klant bij Menu voor "altijd" of "automatisch", dan krijgt de nav .bty-burger en
   klapt het menu ook op desktop achter één knop.

   Waarom niet gewoon navbar-expand-lg weghalen: Crafto's desktop/mobiel-omschakeling hangt
   aan die klasse — niet alleen in CSS maar ook in hun JavaScript. Zonder die klasse blijft
   het paneel open en zonder opmaak over de pagina hangen, en verschijnt de knop niet. Daarom
   laten we hem staan en bouwen we hieronder, alleen boven 992px, hetzelfde uitklappaneel na
   dat Crafto op een telefoon toont (responsive.css ~20022). */
@media (min-width: 992px) {
    /* Knop helemaal rechts, ná de iconen. Hij tússen merk en iconen zetten botste met het
       telefoonnummer: dat loopt buiten zijn eigen kolom. De kolomindeling van Crafto blijft
       verder ongemoeid — daar overheen gaan liet de balk uit elkaar vallen. */
    .bty-nav.bty-burger .menu-order { order: 3; flex: 0 0 auto; display: flex; align-items: center; margin-left: 12px; }
    .bty-nav.bty-burger > .container-fluid > .col-auto:nth-child(3) { margin-left: auto; }

    /* Bootstrap verbergt de knop boven lg; in hamburger-stand hoort hij er juist te zijn. De
       float uit Crafto's markup doet in een flex-kolom niets, vandaar het uitlijnen hierboven —
       zonder dat plakt de knop (14px hoog) tegen de bovenkant van een balk van 113px. */
    .bty-nav.bty-burger .navbar-toggler { display: inline-block; float: none; position: relative; z-index: 1050; }
    header:not(.sticky-active) .bty-nav.bty-burger .navbar-toggler-line { background: var(--bty-oppervlak); }
    header.sticky.sticky-active .bty-nav.bty-burger .navbar-toggler-line { background: #232828; }
    /*  Bij de ZIJLADE en VOLLEDIG SCHERM ligt de knop bovenop het geopende paneel, dus daar volgt hij
        de kleur van het PANEEL: bij menu-opmaak "licht" was een witte knop op een licht paneel
        onzichtbaar.
        Bij het UITKLAPPANEEL niet — dat hangt ónder de balk, dus de knop staat gewoon nog op de balk
        (over de hero of op de witte sticky-balk) en houdt de balk-kleuren hierboven. Dat één stand
        hier anders is bleek in de browser: met de paneelkleur werd het sluitkruis daar donker-op-
        donkere-hero en dus onzichtbaar (05-08).
        Hier stond eerder een `.navbar-collapse.show ~ *`-regel met dezelfde bedoeling, maar die kon
        nooit werken: de collapse is het laatste kind, dus er staan geen siblings meer ná hem. */
    header .bty-nav.bty-burger.bty-open-drawer.bty-open .navbar-toggler-line,
    header .bty-nav.bty-burger.bty-open-fullscreen.bty-open .navbar-toggler-line,
    header.sticky.sticky-active .bty-nav.bty-burger.bty-open-drawer.bty-open .navbar-toggler-line,
    header.sticky.sticky-active .bty-nav.bty-burger.bty-open-fullscreen.bty-open .navbar-toggler-line {
        background: var(--bty-menu-fg);
    }

    /* Het uitklappaneel — gedeelde basis voor alle drie de standen die de klant kan kiezen bij
       Layout website → Menu ("Uitklappen"). Kleur komt uit de menu-opmaak-tokens hierboven; de
       AFMETING en het GEBAAR staan per stand verderop. beauty1 kende hiervoor maar één stand: de
       zijlade. */
    .bty-nav.bty-burger .navbar-collapse {
        position: fixed; overflow-y: auto; z-index: 1040;
        background: var(--bty-menu-bg);
    }

    /*  Openen/sluiten: schuiven, niet groeien.

        Bootstrap's collapse animeert de HOOGTE van het paneel: het zette er een inline
        `height` op die van 0 naar de hoogte van de eigen inhoud liep, en pas als die
        animatie klaar was viel de inline hoogte weg en nam `bottom: 0` het over — waarna
        het vlak in één sprong doorschoot naar de volle schermhoogte. Dat is precies de
        hapering die je zag: eerst stonden de menu-items er, daarna kwam de rest van het
        vlak er pas achteraan.

        Daarom laten we de hoogte met rust (`!important` wint van Bootstrap's inline style)
        en schuift het hele paneel als één geheel van rechts in beeld. `display` blijft ook
        altijd staan: een element dat van display:none komt kan niet overgangen, dus dat
        wisselen kostte de eerste frames van de animatie. Dicht is het paneel
        `visibility: hidden`, zodat het niet aanklikbaar of via Tab bereikbaar is.

        .bty-open zet het scriptje in _Header.cshtml erop op Bootstrap's show/hide-events.
        Die vuren meteen bij de klik, dus openen én sluiten beginnen op hetzelfde moment
        als Bootstrap zelf — zouden we op .collapsing sturen, dan zou het sluiten pas ná
        Bootstrap's eigen 350ms beginnen en tweemaal zo lang duren. */
    .bty-nav.bty-burger .navbar-collapse {
        display: block !important;
        visibility: hidden;
        transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, visibility 0s linear .35s;
        will-change: transform;
    }
    .bty-nav.bty-burger.bty-open .navbar-collapse {
        visibility: visible;
        transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, visibility 0s;
    }

    /*  De drie uitklapstanden. Ze verschillen alleen in waar het paneel hangt, hoe groot het is en
        uit welke richting het komt — kleur en inhoud zijn gedeeld.

        Zijlade: van rechts, zoals beauty1 het altijd deed.
        Volledig scherm: van boven over de hele pagina.
        Uitklappaneel: zakt onder de balk uit over de volle breedte. Dat kan niet met een schuif van
          -100%, want de balk is doorzichtig over de hero — je zou het paneel er bovenlangs zien
          binnenkomen. Vandaar een kort zakje + vervaging. --bty-bar-bottom (de onderkant van de balk)
          zet het scriptje in _Header.cshtml; zonder JS valt hij terug op de bekende balkhoogte. */
    .bty-nav.bty-burger.bty-open-drawer .navbar-collapse {
        top: 0; right: 0; left: auto; bottom: 0;
        width: min(88vw, 370px); height: 100% !important; max-height: 100vh;
        box-shadow: -18px 0 44px rgba(0, 0, 0, .30);
        transform: translateX(100%);
    }
    .bty-nav.bty-burger.bty-open-fullscreen .navbar-collapse {
        top: 0; right: 0; left: 0; bottom: 0;
        width: 100%; height: 100% !important; max-height: 100vh;
        transform: translateY(-100%);
    }
    .bty-nav.bty-burger.bty-open-overlay .navbar-collapse {
        top: var(--bty-bar-bottom, 113px); right: 0; left: 0; bottom: auto;
        width: 100%; height: auto !important;
        max-height: calc(100vh - var(--bty-bar-bottom, 113px));
        box-shadow: 0 22px 44px rgba(0, 0, 0, .30);
        transform: translateY(-14px);
        opacity: 0;
    }

    /*  In beeld schuiven. Dit moet PER STAND, met de standklasse erin: de dicht-stand hierboven
        heeft dezelfde specificiteit als een gedeelde `.bty-open`-regel, en omdat de standen later in
        het bestand staan zouden zij winnen — het paneel bleef dan gewoon 370px naar rechts staan,
        ook al stond alles verder goed (gezien in de browser, 05-08). Eén klasse meer dan de
        dicht-stand, dus de volgorde in het bestand doet er niet meer toe. */
    .bty-nav.bty-burger.bty-open-drawer.bty-open .navbar-collapse,
    .bty-nav.bty-burger.bty-open-fullscreen.bty-open .navbar-collapse,
    .bty-nav.bty-burger.bty-open-overlay.bty-open .navbar-collapse {
        transform: none;
        opacity: 1;
    }

    .bty-nav.bty-burger .navbar-collapse .navbar-nav {
        flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 104px 26px 32px;
    }
    /*  Bij het uitklappaneel begint de inhoud al ónder de balk, dus daar is de ruimte die de andere
        twee bovenlangs vrijhouden niet nodig. Bij "volledig scherm" mag de lijst midden op het scherm
        staan in plaats van bovenaan geplakt. */
    .bty-nav.bty-burger.bty-open-overlay .navbar-collapse .navbar-nav { padding-top: 22px; }
    .bty-nav.bty-burger.bty-open-fullscreen .navbar-collapse .navbar-nav {
        padding: 104px clamp(26px, 8vw, 90px) 40px; max-width: 760px; margin: 0 auto;
    }

    /*  Shop-iconen bovenin het paneel. Staat dit blok er, dan draagt hét de ruimte die de balk
        bovenlangs inneemt en begint de menulijst er gewoon onder. Bij het uitklappaneel is die
        ruimte niet nodig — dat hangt al onder de balk. */
    .bty-nav.bty-burger .navbar-collapse .bty-drawer-shop {
        display: block;
        padding: 104px 26px 6px;
    }
    /*  De scheidingslijn onder dit blok hoort op de LAATSTE link te staan, niet op het blok zelf:
        het blok heeft zijzijdige padding, dus een rand eromheen liep van rand tot rand terwijl de
        lijnen tussen de menu-items ingesprongen staan. Op de link valt hij precies gelijk. */
    .bty-nav.bty-burger .navbar-collapse .bty-drawer-shop-link:last-child {
        border-bottom: 1px solid var(--bty-menu-border);
    }
    .bty-nav.bty-burger.bty-open-overlay .navbar-collapse .bty-drawer-shop { padding-top: 22px; }
    .bty-nav.bty-burger.bty-open-fullscreen .navbar-collapse .bty-drawer-shop {
        padding-left: clamp(26px, 8vw, 90px); padding-right: clamp(26px, 8vw, 90px);
        max-width: 760px; margin: 0 auto;
    }
    .bty-nav.bty-burger .navbar-collapse .bty-drawer-shop-link {
        padding: 12px 0; color: var(--bty-menu-fg); font-size: 16px;
    }
    .bty-nav.bty-burger .navbar-collapse .bty-drawer-shop-link + .bty-drawer-shop-link {
        border-top: 1px solid var(--bty-menu-border);
    }
    .bty-nav.bty-burger .navbar-collapse:has(.bty-drawer-shop) .navbar-nav { padding-top: 14px; }
    /* Uit de balk: ze staan nu bovenin het paneel. Telefoonnummer en actieknop blijven wél staan —
       die schuiven bij de zijlade mee opzij zolang hij open is. */
    .bty-nav.bty-burger .header-icon .bty-icon-link { display: none; }

    /*  De zijlade schuift van rechts over de balk heen, en daar staan het telefoonnummer, het
        winkelmandje en het account-icoon. Die verdwenen er half onder (het poppetje viel precies op
        de rand van het paneel). Zolang de lade open is schuift die groep dus mee naar links — exact
        de breedte van de lade. Zelfde tempo als de lade, anders springt het. De hamburgerknop zelf
        blijft staan: die ligt met z-index 1050 al bovenop.
        Alleen bij de ZIJLADE: de andere twee standen dekken de balk volledig af of hangen eronder,
        dus daar valt er niets onder vandaan te schuiven. */
    .bty-nav.bty-burger .header-icon { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
    .bty-nav.bty-burger.bty-open-drawer.bty-open .header-icon {
        transform: translateX(calc(-1 * min(88vw, 370px)));
    }
    /* Crafto zet het menu-item op flex, waardoor link, pijltje en submenu naast elkaar komen.
       In de lade hoort het submenu ónder zijn link, dus terug naar block. */
    .bty-nav.bty-burger .navbar-collapse .navbar-nav > .nav-item { position: relative; display: block; }
    /* In het paneel staan de links op het menuvlak; de balk-varianten gelden hier niet. Kleur komt
       uit de gekozen menu-opmaak, niet uit een vaste #fff — anders is stijl "licht" onleesbaar. */
    .bty-nav.bty-burger .navbar-collapse .navbar-nav > .nav-item > .nav-link,
    header:not(.sticky-active) .bty-nav.bty-burger .navbar-collapse .navbar-nav > .nav-item > .nav-link,
    header.sticky.sticky-active .bty-nav.bty-burger .navbar-collapse .navbar-nav > .nav-item > .nav-link {
        color: var(--bty-menu-fg); padding: 13px 0; text-shadow: none; font-size: 17px;
        /* Crafto's nav-link is inline-block; dan loopt de scheidingslijn hieronder maar tot het
           einde van het woord in plaats van over de hele lade. */
        display: block;
    }
    .bty-nav.bty-burger .navbar-collapse .navbar-nav > .nav-item + .nav-item > .nav-link {
        border-top: 1px solid var(--bty-menu-border);
    }
    .bty-nav.bty-burger .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover,
    .bty-nav.bty-burger .navbar-collapse .navbar-nav > .nav-item > .nav-link.wf-active {
        color: var(--bty-menu-accent);
    }

    /* Submenu's klappen in-lijn uit in plaats van als zwevend paneel. Het open/dicht-zetten
       doet Bootstrap zelf al via de .dropdown-toggle in de markup. */
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown .dropdown-menu {
        position: static; top: auto; width: 100%; display: none; float: none;
        background-color: transparent; box-shadow: none; border: 0; border-radius: 0 !important;
        padding: 0 0 10px 14px; margin: 0; animation: none !important;
    }
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown .dropdown-menu.show { display: block; }
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown .dropdown-menu li { padding: 0; }
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown .dropdown-menu li > a {
        padding: 8px 0; display: block; font-size: 15px;
        color: color-mix(in srgb, var(--bty-menu-fg) 88%, transparent);
    }
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown .dropdown-menu li > a:hover { color: var(--bty-menu-accent); }

    /*  Het derde niveau (een subpagina met eigen subpagina's, bv. "Algemene informatie" onder
        "Frenque Downtown"). In de lade is er geen hover en heeft dit niveau geen eigen pijltje, dus
        staan ze gewoon ingesprongen onder hun bovenliggende pagina — net als in het mobiele menu.
        De regel hierboven (`.dropdown .dropdown-menu`) zet ze op display:none; die winnen we hier
        met één klasse meer. */
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown .wf-submenu > .dropdown-menu {
        display: block; position: static; padding: 0 0 4px 14px;
    }
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown .wf-submenu > .dropdown-menu li > a {
        font-size: 14px; padding: 6px 0;
        color: color-mix(in srgb, var(--bty-menu-fg) 74%, transparent);
    }
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown .wf-submenu > .dropdown-menu li > a:hover {
        color: var(--bty-menu-accent);
    }
    /* Crafto verbergt het pijltje op desktop omdat submenu's daar op hover opengaan. In de lade
       is hover er niet — daar is dit pijltje de enige manier om een submenu te openen. Het krijgt
       een ruim klikvlak over de hele regelhoogte: als icoontje was het 24x23px en dat is te klein
       om te raken. */
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown > .dropdown-toggle {
        display: flex; align-items: center; justify-content: flex-end;
        position: absolute; top: 0; right: 0; width: 64px; height: 51px;
        padding: 0; cursor: pointer; color: var(--bty-menu-fg); font-size: 15px;
    }
    /* Het element draagt zowel Crafto's Font Awesome-pijl als Bootstrap's klasse dropdown-toggle,
       en die plakt er zijn eigen driehoekje achter. Dat gaf twee pijltjes onder elkaar. */
    .bty-nav.bty-burger .navbar-collapse .navbar-nav .dropdown > .dropdown-toggle::after { display: none; }
}

/* ── Footer: openingstijden ────────────────────────────────────────────────
   Zelfde taal als het paneel op de vestigingenpagina, maar op een donker vlak: de gemarkeerde dag en het
   statusbolletje zijn hier LICHTER dan de achtergrond, niet donkerder. */
/*  De statusregel lijnt links uit, net als de kop en de dagen eronder. Stond op justify-content:center,
    waardoor hij bij het afbreken over twee regels midden in de kolom kwam te hangen terwijl de rest links
    stond (Jenny 03-08). Het bolletje krijgt align-self: baseline zodat het op de EERSTE regel blijft
    staan als de tekst toch afbreekt, in plaats van halverwege de twee regels. */
/*  GEEN statusregel (Jenny 04-08), net als in business1. Twee redenen: in een footerkolom brak
    "Gesloten · donderdag open 10:00" over twee regels, én het blok werd er 60px hoger van. Dat laatste
    telt hier extra zwaar: kolommen die naast elkaar staan worden allemaal zo hoog als de langste van
    het stel. Met de statusregel was het urenblok 361px tegen ~227px voor zijn buren, wat
    een gat van ruim 130px naast "Bijzonder maatwerk" en "Adres" gaf. Zonder statusregel én met strakkere
    dagrijen is het blok 273px en valt dat gat vrijwel weg (footer 585 → 497px).
    Terugzetten = deze regel weghalen; de markup komt gewoon uit de gedeelde partial. */
.bty-hours-status { display: none; }

/*  Maximumbreedte, zodat de dag en de tijd bij elkaar blijven staan. Zonder die grens rekt het raster
    mee met de kolom en worden de tijden helemaal naar de rechterrand geduwd, met een gat van een halve
    kolom tussen "Maandag" en "Gesloten" (Jenny 03-08). */
/*  De negatieve bovenmarge haalt de opvulling van de eerste dagrij er weer af, zodat "Maandag" op
    dezelfde lijn begint als de eerste tekstregel in de buurkolommen. Zonder de statusregel is de tabel
    namelijk het eerste element onder de kop, en dan valt zo'n paar pixels meteen op. */
.bty-hours-week { margin: -2px 0 0; font-size: 15px; color: #fff; max-width: 250px; }
/*  De dagnamen moeten op dezelfde lijn beginnen als de kop en de statusregel erboven. De opvulling die de
    gemarkeerde dag zijn vlakje geeft duwde de tekst 8px naar rechts; de negatieve marge haalt dat er weer
    af, zodat het vlakje ruimte houdt maar de tekst uitlijnt. */
.bty-hours-day {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline;
    padding: 2px 8px; margin-inline: -8px; border-radius: min(var(--r-card), 10px);
}
.bty-hours-day dt { margin: 0; font-weight: 400; opacity: .8; }
.bty-hours-day dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; opacity: .9; }
.bty-hours-day.is-closed dd { opacity: .65; }
.bty-hours-day.is-today { background: color-mix(in srgb, #fff 13%, transparent); }
.bty-hours-day.is-today dt, .bty-hours-day.is-today dd { font-weight: 600; opacity: 1; }
.bty-hours-note { display: block; font-size: 13px; opacity: .75; }

/* Op een smal scherm staat de hele footer gecentreerd; de tabel blijft links/rechts uitgelijnd omdat
   twee kolommen anders onleesbaar door elkaar lopen. */
@media (max-width: 767.98px) {
    .bty-hours-week { max-width: 320px; margin-inline: auto; text-align: left; }
    .bty-hours-status { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Publicaties — overzicht en detail (ontwerp Claude Design, 04-08-2026)
   Verving een lijst van volle-breedte kaarten die alleen titel, datum, intro en een
   downloadknop toonde. De omslagfoto en de categorie stonden wél in de gegevens maar
   werden niet gebruikt; die zijn nu het hoofdelement.
   Kleuren komen uitsluitend uit de bestaande beauty1-variabelen (die op hun beurt de
   huisstijl van de klant volgen); rondingen via --r-card / --r-img / --r-pill.
   ══════════════════════════════════════════════════════════════════════════════ */
.bty-pub {
    --pub-vlak: var(--bty-oppervlak);
    --pub-beeld: color-mix(in srgb, var(--bty-warm) 12%, var(--bty-mix-licht));
    --pub-lijn: var(--bty-line);
    --pub-schaduw: 0 10px 26px rgba(0, 0, 0, .06);
    --pub-schaduw-op: 0 22px 48px rgba(0, 0, 0, .14);
}

/* ── Filterknoppen ────────────────────────────────────────────────────────────
   Zelfde gedrag als de blogfilters (categorie in de URL, dus deelbaar en werkt zonder
   JavaScript), maar met het aantal erbij: zo ziet de bezoeker wat een filter oplevert
   vóór hij klikt. */
.bty-pub-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 42px; }
.bty-pub-filter {
    display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px;
    border: 1px solid color-mix(in srgb, var(--bty-warm) 28%, var(--bty-mix-licht));
    border-radius: var(--r-pill);
    font-size: 14.5px; font-weight: 500; line-height: 1.2; letter-spacing: .02em;
    color: var(--bty-dark); text-decoration: none; background: var(--pub-vlak);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.bty-pub-filter:hover { border-color: var(--bty-accent); color: var(--bty-atext); }
.bty-pub-filter .aantal { font-size: 13px; color: var(--bty-muted); }
.bty-pub-filter.is-actief {
    background: var(--bty-accent); border-color: var(--bty-accent);
    color: var(--bty-on-accent, #fff); font-weight: 600;
}
.bty-pub-filter.is-actief .aantal { color: var(--bty-on-accent, #fff); opacity: .75; }

/* ── Kaart ───────────────────────────────────────────────────────────────────── */
.bty-pub-kaart {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--pub-vlak); border-radius: var(--r-card);
    box-shadow: var(--pub-schaduw);
    transition: box-shadow .3s ease, transform .3s ease;
}
.bty-pub-kaart:hover,
.bty-pub-kaart:has(.bty-pub-kaart-link:focus-visible) {
    box-shadow: var(--pub-schaduw-op); transform: translateY(-4px);
}
/*  De hele kaart is één klikvlak naar de detailpagina. De downloadknop ligt er met een
    hogere z-index bovenop, zodat die apart klikbaar blijft. */
.bty-pub-kaart-link { position: absolute; inset: 0; z-index: 3; border-radius: var(--r-card); }

.bty-pub-omslag {
    position: relative; margin: clamp(8px, .8vw, 12px) clamp(8px, .8vw, 12px) 0;
    aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden;
    background: var(--pub-beeld); flex: none;
}
.bty-pub-omslag img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
.bty-pub-kaart:hover .bty-pub-omslag img { transform: scale(1.04); }

/*  Geen omslagfoto: een typografisch omslagvlak in de huisstijlkleur in plaats van een
    leeg grijs gat. De titel staat er groot in, zodat de kaart nog steeds iets zegt. */
.bty-pub-omslag--leeg {
    display: grid; align-content: center; justify-items: center; gap: 14px;
    padding: calc(clamp(18px, 1.6vw, 24px) + 34px) clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 24px);
    text-align: center;
    background: var(--brand-tertiary, var(--bty-warm)); color: var(--brand-on-tertiary, var(--bty-dark));
}
.bty-pub-omslag--leeg .leeg-kop {
    font-family: var(--alt-font); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3;
    color: inherit;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.bty-pub-omslag--leeg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: var(--bty-accent-2); }

.bty-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);
    background: var(--brand-secondary, var(--bty-warm)); color: var(--brand-on-secondary, var(--bty-dark));
}

/*  Waas over de omslag bij muisover — ook zichtbaar bij toetsenbordfocus, zodat wie met
    Tab navigeert dezelfde terugkoppeling krijgt als met de muis. */
.bty-pub-hover {
    position: absolute; inset: 0; z-index: 1;
    background: color-mix(in srgb, var(--bty-accent) 32%, transparent);
    opacity: 0; transition: opacity .3s ease;
}
.bty-pub-kaart:hover .bty-pub-hover,
.bty-pub-kaart:has(.bty-pub-kaart-link:focus-visible) .bty-pub-hover { opacity: 1; }

.bty-pub-body {
    display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1;
    padding: clamp(18px, 1.6vw, 24px) clamp(16px, 1.5vw, 22px);
}
.bty-pub-datum { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--bty-muted); }
.bty-pub-titel { margin-top: 8px; font-family: var(--alt-font); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; color: var(--bty-dark); }
.bty-pub-intro { margin: 10px 0 20px; font-size: 15.5px; line-height: 1.65; max-width: 38ch; color: var(--bty-ink); }
.bty-pub-titel + .bty-pub-knop { margin-block-start: 20px; }
.bty-pub-knop {
    position: relative; z-index: 4; text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px; margin-top: auto;
    font-size: 15px; font-weight: 600; letter-spacing: .02em;
    padding: 13px 26px; border-radius: var(--r-pill);
    background: var(--bty-accent); color: var(--bty-on-accent, #fff);
    transition: box-shadow .25s ease;
}
.bty-pub-kaart:hover .bty-pub-knop,
.bty-pub-knop:hover { color: var(--bty-on-accent, #fff); box-shadow: 0 10px 24px color-mix(in srgb, var(--bty-accent) 34%, transparent); }
.bty-pub-knop svg { width: 16px; height: 16px; transition: transform .25s ease; }
.bty-pub-kaart:hover .bty-pub-knop svg { transform: translateY(2px); }

/* ── Lege staat ──────────────────────────────────────────────────────────────── */
.bty-pub-leeg {
    text-align: center; background: var(--pub-vlak); border-radius: var(--r-card);
    padding: clamp(44px, 7vw, 80px) clamp(20px, 4vw, 48px); box-shadow: var(--pub-schaduw);
}
.bty-pub-leeg-vlak {
    width: 88px; height: 112px; margin: 0 auto 26px; border-radius: var(--r-img);
    background: var(--brand-tertiary, var(--bty-warm)); position: relative;
}
.bty-pub-leeg-vlak::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 6px;
    background: var(--bty-accent-2); border-radius: 0 0 var(--r-img) var(--r-img);
}
.bty-pub-leeg h2 { font-family: var(--alt-font); font-size: clamp(23px, 2.4vw, 28px); color: var(--bty-dark); }
.bty-pub-leeg p { margin: 10px auto 0; max-width: 46ch; color: var(--bty-ink); }

/* ── Detailpagina ────────────────────────────────────────────────────────────── */
.bty-pub-terug {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    font-size: 14.5px; font-weight: 600; letter-spacing: .04em; color: var(--bty-atext);
    margin-bottom: clamp(22px, 3vw, 34px);
}
.bty-pub-terug svg { width: 16px; height: 16px; transition: transform .25s ease; }
.bty-pub-terug:hover { color: var(--bty-atext); }
.bty-pub-terug:hover svg { transform: translateX(-3px); }

.bty-pub-detail {
    display: grid; gap: clamp(24px, 3.5vw, 52px); grid-template-columns: minmax(0, 1fr);
    background: var(--pub-vlak); border-radius: var(--r-card);
    padding: clamp(14px, 1.4vw, 20px); box-shadow: var(--pub-schaduw);
}
@media (min-width: 768px) {
    .bty-pub-detail { grid-template-columns: minmax(280px, 44%) minmax(0, 1fr); align-items: center; }
}
.bty-pub-detail-omslag {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden;
    background: var(--pub-beeld);
}
.bty-pub-detail-omslag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bty-pub-detail-omslag--leeg {
    display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center;
    padding: clamp(22px, 2.4vw, 34px);
    background: var(--brand-tertiary, var(--bty-warm)); color: var(--brand-on-tertiary, var(--bty-dark));
}
.bty-pub-detail-omslag--leeg .leeg-kop { font-family: var(--alt-font); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: inherit; }

.bty-pub-detail-tekst { padding: clamp(8px, 1.4vw, 22px) clamp(8px, 1.4vw, 22px) clamp(16px, 1.8vw, 26px); }
/*  Op de detailpagina staat de categorie in de tekstkolom en niet op de omslag: hij hoort
    daar bij de datum en de titel, en op een grote omslag zou hij verloren zweven. */
.bty-pub-detail-tekst .bty-pub-cat { position: static; display: inline-block; max-width: 100%; }
.bty-pub-detail-datum { display: block; margin-top: 16px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--bty-muted); }
.bty-pub-detail-titel { margin-top: 8px; font-family: var(--alt-font); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.22; color: var(--bty-dark); }
.bty-pub-detail-intro { margin: 16px 0 0; max-width: 52ch; color: var(--bty-ink); }
.bty-pub-detail-knop {
    display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(22px, 2.6vw, 32px);
    font-size: 16px; font-weight: 600; letter-spacing: .02em; text-decoration: none;
    padding: 15px 30px; border-radius: var(--r-pill);
    background: var(--bty-accent); color: var(--bty-on-accent, #fff);
    transition: box-shadow .25s ease, transform .25s ease;
}
.bty-pub-detail-knop:hover {
    color: var(--bty-on-accent, #fff); transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--bty-accent) 34%, transparent);
}
.bty-pub-detail-knop svg { width: 17px; height: 17px; transition: transform .25s ease; }
.bty-pub-detail-knop:hover svg { transform: translateY(2px); }

/*  De uitgebreide tekst staat onder het hoofdblok op leesbreedte, niet in de halve kolom
    naast de omslag: hij kan lang zijn en leest zo een stuk prettiger. */
.bty-pub-detail-body { max-width: 68ch; margin: clamp(32px, 4vw, 56px) auto 0; }

.bty-pub-meer { margin-top: clamp(52px, 7vw, 96px); }
.bty-pub-meer-kop {
    display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; justify-content: space-between;
    padding-bottom: 18px; border-bottom: 1px solid var(--pub-lijn); margin-bottom: clamp(22px, 3vw, 32px);
}
.bty-pub-meer-kop h2 { font-family: var(--alt-font); font-size: clamp(23px, 2.6vw, 30px); color: var(--bty-dark); }
.bty-pub-meer-alle { font-size: 14.5px; font-weight: 600; letter-spacing: .04em; color: var(--bty-atext); text-decoration: none; }
.bty-pub-meer-alle:hover { color: var(--bty-atext); text-decoration: underline; text-underline-offset: 3px; }

/* ── Donkere modus ───────────────────────────────────────────────────────────────
   De witte kaarten worden vlakken op de donkere basis, afgeleid van de Donkere kleur van
   de klant met een vleugje Steunkleur — geen nieuwe kleuren. Zelfde aanpak als bij het
   vestigingen-overzicht hierboven. */
[data-bs-theme="dark"] .bty-pub {
    --pub-vlak: color-mix(in srgb, var(--site-dark-bg) 88%, var(--bty-accent-2));
    --pub-beeld: color-mix(in srgb, var(--site-dark-bg) 74%, var(--bty-accent-2));
    --pub-lijn: color-mix(in srgb, #fff 14%, transparent);
    --pub-schaduw: 0 10px 26px rgba(0, 0, 0, .40);
    --pub-schaduw-op: 0 22px 48px rgba(0, 0, 0, .60);
}
[data-bs-theme="dark"] .bty-pub-titel,
[data-bs-theme="dark"] .bty-pub-detail-titel,
[data-bs-theme="dark"] .bty-pub-meer-kop h2,
[data-bs-theme="dark"] .bty-pub-leeg h2 { color: var(--bty-on-dark-soft); }
[data-bs-theme="dark"] .bty-pub-intro,
[data-bs-theme="dark"] .bty-pub-detail-intro,
[data-bs-theme="dark"] .bty-pub-leeg p { color: var(--bty-on-dark-soft); }
[data-bs-theme="dark"] .bty-pub-datum,
[data-bs-theme="dark"] .bty-pub-detail-datum,
[data-bs-theme="dark"] .bty-pub-filter .aantal { color: var(--bty-on-dark-muted); }
/*  Op donker moet het filterpilletje lichter zijn dan de achtergrond, niet donkerder —
    anders verdwijnt het in de pagina. */
[data-bs-theme="dark"] .bty-pub-filter {
    background: color-mix(in srgb, var(--site-dark-bg) 88%, var(--bty-accent-2));
    border-color: color-mix(in srgb, #fff 16%, transparent);
    color: var(--bty-on-dark-soft);
}

/* ── Kaarten binnen een blok met eigen blok-opmaak (voorpagina) ─────────────────
   Kiest de klant voor het voorpagina-blok een donkere achtergrond of een verloop, dan zet de
   blok-opmaak alle koppen en tekst op wit (`.wf-applied.wf-on-dark`, met !important). Dat klopt voor
   tekst die rechtstreeks op die achtergrond staat, maar niet voor tekst BINNEN een kaart: die heeft
   zijn eigen lichte vlak, en witte letters daarop zijn onzichtbaar. Precies dat gebeurde toen dit
   blok op de kaartopmaak overging — alleen de datum en de knop waren nog te zien.
   Alleen binnen de kaart terugdraaien; de kop, het pilletje en de knop van het blok zelf staan wél
   op de achtergrond en blijven dus wit. */
.wf-applied.wf-on-dark .bty-pub-kaart .bty-pub-titel { color: var(--bty-dark) !important; }
.wf-applied.wf-on-dark .bty-pub-kaart .bty-pub-intro { color: var(--bty-ink) !important; }
.wf-applied.wf-on-dark .bty-pub-kaart .bty-pub-datum { color: var(--bty-muted) !important; }
[data-bs-theme="dark"] .wf-applied.wf-on-dark .bty-pub-kaart .bty-pub-titel,
[data-bs-theme="dark"] .wf-applied.wf-on-dark .bty-pub-kaart .bty-pub-intro { color: var(--bty-on-dark-soft) !important; }
[data-bs-theme="dark"] .wf-applied.wf-on-dark .bty-pub-kaart .bty-pub-datum { color: var(--bty-on-dark-muted) !important; }

@media (max-width: 575.98px) {
    .bty-pub-filters { gap: 8px; margin-bottom: 28px; }
    .bty-pub-filter { padding: 9px 15px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .bty-pub * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PARTNEROVERZICHT (/partners) — ontwerp uit Claude Design, 06-08-2026.

   Was een kopie van de business1-indeling: per categorie een raster van
   witte kaarten met een logo in een vast vak van 80px. Dat las als een
   prijslijst, en logo's met sterk verschillende verhoudingen (een breed
   woordmerk naast een vierkant icoon) werden in dat vak of minuscuul of
   liepen tot de rand.

   Nu een redactionele lijst: de categorienaam staat in een eigen kolom die
   meeloopt met zijn partners, daarnaast regels met alleen haarlijnen —
   geen kaartvlakken. De logo's staan links uitgelijnd op één basislijn en
   zijn standaard grijs; bij hover komen ze in kleur en schuift de pijl mee.

   Donkere modus later: er wordt hier NERGENS een oppervlak vastgelegd
   behalve --bty-oppervlak (het paginavlak) en --bty-track (het vlakje
   onder een monogram). Die twee zijn genoeg om de hele pagina om te zetten.
   ═══════════════════════════════════════════════════════════════════════ */
.bty-partners {
    background: var(--bty-oppervlak);
    color: var(--medium-gray);
    overflow-wrap: break-word;
    /*  Eigen buitenruimte in plaats van een Crafto-.container: de lijst heeft links géén kolomgoot
        nodig (de logo's staan al op een eigen baan), maar op een telefoon moet de tekst wél van de
        schermrand af blijven. Zonder deze regel liep de categorienaam tot tegen de rand.

        Bovenruimte in twee stappen teruggebracht: eerst van 7vw (101px op een breed scherm) naar 4,5vw,
        daarna naar 3,2vw met een plafond van 48px (Jenny 06-08). Onder de kopbanner volgt eerst het
        kleine "Ga naar"-labeltje, en daar hoort geen halve schermhoogte wit boven.

        Het plafond is hier belangrijker dan de vw: zónder plafond groeit de ruimte op een breed scherm
        door tot ver boven wat je wilt, en juist daar viel het op. Nu: 28px tot ongeveer 875px breed,
        daarboven meegroeiend tot 48px op 1500px en breder. De ruimte ONDER de lijst blijft ruim — daar
        komt de footer achteraan. */
    padding: clamp(28px, 3.2vw, 48px) clamp(16px, 4vw, 40px) clamp(80px, 10vw, 140px);
}
.bty-partners__in { max-width: 1180px; margin-inline: auto; }

/*  Subtiele kleur (wens Jenny 06-08): de pagina was helemaal neutraal — grijze tekst op wit met
    haarlijnen, en het accent alleen in het streepje, de hover en het monogram. Nu overal een beetje
    van de huisstijl, nergens een gekleurd vlak. Eén variabele voor de lijnen, zodat de kleurtoon van
    de hele pagina op één plek te temperen is. --bty-atext is de hoofdkleur die _BrandVars per klant
    donker genoeg maakt om als tekst te lezen (4,6:1 op wit), dus dit blijft leesbaar bij elke
    huisstijl — ook bij een pastelkleur. */
.bty-partners { --bty-lijn-getint: color-mix(in srgb, var(--bty-line) 82%, var(--bty-accent)); }

/* ── Sprongnavigatie, vanaf drie categorieën ────────────────────────────
   Onder drie is er niets te springen: dan scrol je er sneller langs. */
.bty-jump {
    display: flex; flex-wrap: wrap; gap: 6px 8px;
    margin: 0 0 clamp(36px, 5vw, 60px); padding: 0 0 clamp(18px, 2.4vw, 26px);
    border-bottom: 1px solid var(--bty-lijn-getint); list-style: none;
}
.bty-jump__lbl {
    flex: 1 1 100%; margin-bottom: 12px;
    font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--bty-muted);
}
.bty-jump a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border-radius: var(--r-pill); text-decoration: none;
    font-size: 14.5px; font-weight: 500;
    /*  Tekst in de huisstijlkleur in plaats van grijs (wens Jenny 06-08): dit zijn de enige knoppen op
        de pagina, dus die mogen als eerste kleur dragen. --bty-atext is de hoofdkleur die _BrandVars
        per klant donker genoeg maakt om als tekst te lezen, dus dit blijft leesbaar bij elke huisstijl. */
    color: var(--bty-atext);
    background: color-mix(in srgb, var(--bty-accent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--bty-accent) 32%, transparent);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.bty-jump a:hover {
    border-color: color-mix(in srgb, var(--bty-accent) 65%, transparent);
    background: color-mix(in srgb, var(--bty-accent) 16%, transparent);
    color: var(--bty-atext);
}

/* ── Categorie: de naam staat naast zijn partners en loopt mee ──────────
   scroll-margin-top is ruimer dan in het ontwerp: onze Crafto-header staat
   vast en is tot 116px hoog, dus een anker zou anders onder de balk
   uitkomen. */
.bty-cat { margin: 0 0 clamp(52px, 7vw, 96px); scroll-margin-top: clamp(90px, 12vw, 140px); }
.bty-cat:last-child { margin-bottom: 0; }
.bty-cat__grid { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
    .bty-cat__grid { grid-template-columns: minmax(230px, 24%) minmax(0, 1fr); align-items: start; }
    /*  Alleen meelopen binnen de twee-kolomsindeling. Zonder deze afbakening werd élke .bty-cat__kop
        sticky — ook op de linkspagina, waar de kop boven een lijst over de volle breedte staat en dus
        onderweg zou blijven plakken. */
    .bty-cat__grid > .bty-cat__kop { position: sticky; top: clamp(90px, 12vw, 140px); }
}
.bty-cat__eyebrow {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--bty-atext);
}
.bty-cat__eyebrow::before { content: ""; width: 26px; height: 1px; flex: none; background: var(--bty-accent); }
.bty-cat__naam {
    margin: 0; line-height: 1.2;
    font-size: clamp(24px, 2.6vw, 33px); color: var(--dark-gray);
    /* Lange samenstellingen (Duits) breken op lettergreep, nooit midden in het woord. */
    overflow-wrap: normal; word-break: normal; hyphens: auto;
}
/* Accent-getint grijs: kleurt mee zonder de aandacht van de categorienaam weg te nemen. */
.bty-cat__aantal { margin: 8px 0 0; font-size: 14px; color: color-mix(in srgb, var(--bty-atext) 72%, var(--medium-gray)); }

/* ── Partnerregel ─────────────────────────────────────────────────────── */
.bty-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bty-lijn-getint); }
.bty-lijst > li { border-bottom: 1px solid var(--bty-lijn-getint); }

.bty-rij {
    position: relative; display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr); gap: 6px 28px;
    padding: clamp(20px, 2.4vw, 28px) clamp(12px, 1.4vw, 18px);
    min-height: clamp(104px, 11vw, 136px);
    text-decoration: none; color: inherit;
    /* Plafond op de klant-ronding: een regel van 136px hoog met ronding 50 zou een capsule worden. */
    border-radius: min(var(--r-card), 22px);
    transition: background .22s ease;
}
@media (min-width: 560px) {
    .bty-rij { grid-template-columns: minmax(140px, 196px) minmax(0, 1fr) auto; gap: 8px 28px; }
}
.bty-rij:hover { background: color-mix(in srgb, var(--bty-accent) 7%, transparent); }
.bty-rij:has(.bty-naam a:focus-visible) {
    outline: 2px solid var(--bty-atext); outline-offset: 3px;
    background: color-mix(in srgb, var(--bty-accent) 7%, transparent);
}
/*  Eén link per regel: het anker op de naam wordt met ::after over de hele regel gelegd, zodat de
    bezoeker overal kan klikken zonder dat er een tweede, lege link in de voorleesvolgorde komt.
    De externe websitelink ligt er met z-index bovenop en blijft dus apart klikbaar. */
.bty-naam a { color: inherit; text-decoration: none; }
.bty-naam a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bty-naam a:focus-visible { outline: none; }

/*  Logobaan: elk logo krijgt dezelfde hoogte en dezelfde linkerlijn, of het nu een breed woordmerk
    of een vierkant icoon is.

    De logo's staan ALTIJD in kleur (keuze Jenny 06-08), ook bij hover. Het ontwerp volgde de logostrip
    op de voorpagina: grijs in rust, kleur bij hover. Daar staan tien logo's dicht op elkaar en dempt het
    grijs de drukte; hier heeft elk logo zijn eigen regel met naam en tekst, dus dempen kost alleen maar
    herkenbaarheid.

    Geen grayscale meer in welke stand dan ook: een logo dat grijs wordt zodra je de regel aanwijst,
    werkt tegen de regel in — die licht juist op en de pijl schuift naar voren. Bij hover daarom alleen
    een klein zetje in helderheid, zodat de logobaan meedoet zonder de aandacht te trekken. */
.bty-logo { display: flex; align-items: center; justify-content: flex-start; height: clamp(40px, 4.4vw, 54px); }
.bty-logo img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; object-position: left center;
    opacity: .92;
    transition: opacity .25s ease;
}
.bty-rij:hover .bty-logo img,
.bty-rij:has(.bty-naam a:focus-visible) .bty-logo img { opacity: 1; }

/*  Geen logo: een monogram uit de naam. Geen gat in de rij, en geen verzonnen beeld. */
.bty-mono {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(40px, 4.4vw, 54px); height: clamp(40px, 4.4vw, 54px); flex: none;
    border-radius: var(--r-img);
    background: color-mix(in srgb, var(--bty-accent) 12%, var(--bty-track));
    font-size: clamp(17px, 1.7vw, 21px); color: var(--bty-atext); letter-spacing: .02em;
}

.bty-ptekst { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.bty-naam { margin: 0; line-height: 1.3; font-size: clamp(19px, 1.8vw, 23px); color: var(--dark-gray); }
.bty-intro { margin: 6px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--medium-gray); max-width: 60ch; }
.bty-site {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; min-height: 34px;
    font-size: 14px; font-weight: 500; color: var(--bty-atext); text-decoration: none;
    position: relative; z-index: 2;
}
.bty-site:hover { text-decoration: underline; text-underline-offset: 3px; }
.bty-site:focus-visible { outline: 2px solid var(--bty-atext); outline-offset: 3px; border-radius: 4px; }
.bty-site svg { width: 13px; height: 13px; }

/* Pijl alleen waar de regel drie kolommen heeft; op een telefoon zou hij onder de tekst belanden. */
.bty-pijl { display: none; flex: none; width: 34px; height: 34px; padding: 8px; color: var(--bty-muted); transition: transform .25s ease, color .25s ease; }
@media (min-width: 560px) { .bty-pijl { display: block; } }
.bty-rij:hover .bty-pijl,
.bty-rij:has(.bty-naam a:focus-visible) .bty-pijl { color: var(--bty-atext); transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .bty-partners *, .bty-partners *::before, .bty-partners *::after { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LINKS-MODULE (/links + voorpagina-blok) — ontwerp uit Claude Design,
   06-08-2026, richting A "redactionele lijst".

   Was in beide vormen de business1-opmaak. Nu een lijst in beauty1's taal:
   haarlijnen, schreefkop per naam, en het WEBADRES onder de naam als teken
   dat de link naar buiten gaat. Dat adres is meteen de vulling voor links
   zónder logo — en die zijn in de praktijk de meerderheid. Geen kettinkje,
   geen monogram, geen verzonnen beeld.

   EIGEN NAMEN (bty-lnk-*) en niet de namen uit het ontwerpbestand: het
   partneroverzicht gebruikt .bty-lijst / .bty-rij / .bty-naam al, met heel
   andere maten (regels van 136px met een vaste logobaan). Hergebruiken zou
   die pagina slopen. Wél gedeeld, want daar zijn ze identiek: .bty-jump*,
   .bty-cat, .bty-cat__kop, .bty-cat__naam en .bty-cat__eyebrow.

   OPPERVLAKKEN voor de donkere modus later: --bty-oppervlak (de pagina) en
   --bty-track (het vlakje onder een wit logo). Het voorpagina-blok heeft
   zijn eigen set, zie "VOORPAGINA-BLOK" onderaan.
   ═══════════════════════════════════════════════════════════════════════ */
.bty-lnk {
    background: var(--bty-oppervlak);
    color: var(--medium-gray);
    padding: clamp(40px, 6vw, 88px) clamp(16px, 4vw, 40px) clamp(72px, 9vw, 120px);
    overflow-wrap: break-word;
}
.bty-lnk__in { max-width: 1180px; margin-inline: auto; }

/*  Subcategorie bewust in een ánder register dan de hoofdcategorie: kleine kapitalen in de schreefloze
    letter, nooit dezelfde schreefkop. Anders lijken niveau 1 en 2 op elkaar. */
.bty-sub { margin-top: clamp(26px, 3vw, 38px); }
.bty-sub__naam {
    margin: 0 0 10px; font-size: 12px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--bty-muted-2);
}
.bty-cat__eigen { margin-top: clamp(14px, 2vw, 20px); }

/* ── De lijst ───────────────────────────────────────────────────────────── */
.bty-lnk-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bty-lijn-getint, var(--bty-line)); }
.bty-lnk-lijst > li { border-bottom: 1px solid var(--bty-lijn-getint, var(--bty-line)); }
.bty-lnk-rij {
    position: relative; display: grid; align-items: center; gap: 4px 20px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: clamp(14px, 1.7vw, 20px) clamp(10px, 1.2vw, 16px);
    min-height: 64px;
    text-decoration: none; color: inherit;
    border-radius: min(var(--r-card), 22px);
    transition: background .22s ease;
}
/*  De logobaan bestaat alleen als er in DEZE lijst een logo zit — per (sub)categorie apart bepaald.
    Zo staan er nooit acht lege vakjes of acht generieke icoontjes. */
.bty-lnk-lijst--logo .bty-lnk-rij { grid-template-columns: clamp(96px, 11vw, 130px) minmax(0, 1fr) auto; }
.bty-lnk-rij:hover { background: color-mix(in srgb, var(--bty-accent) 7%, transparent); }
.bty-lnk-rij:focus-visible {
    outline: 2px solid var(--bty-atext); outline-offset: 3px;
    background: color-mix(in srgb, var(--bty-accent) 7%, transparent);
}
/*  Vast logovak van ongeveer drie tekstregels hoog. Elk logo krijgt hetzelfde vak en staat daar
    optisch in het midden: een breed (horizontaal) logo vult de breedte, een vierkant of staand logo
    vult de hoogte, en toch staan ze allemaal in dezelfde kolom netjes onder elkaar. Met een vak dat
    alleen zo hoog was als één regel las een horizontaal logo als een favicon. */
.bty-lnk-logo { display: block; height: clamp(48px, 5vw, 64px); align-self: center; }
/*  Het logo vult het hele vak (object-fit houdt de verhouding heel), dus ook een klein aangeleverd
    bestand komt op dezelfde hoogte als de rest. Zou het alleen mogen krimpen, dan bleef een 16px-icoon
    piepklein naast een groot logo en rammelt de kolom alsnog. */
/*  Logo's staan ALTIJD in hun eigen kleur — ook bij hover en focus. Ze eerst ontkleuren en pas bij
    hover laten opleven leest bij een linkverzameling als "uitgeschakeld"; bovendien is een logo van een
    ander merk zijn kleur. Zet hier dus geen grayscale/opacity terug. */
.bty-lnk-logo img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
}
/*  Vlakje onder een logo dat zelf een witte rechthoek is, zodat die niet als vlek leest. Staat klaar
    voor als het CMS ooit een "wit logo"-vlaggetje krijgt; nu nog niet in gebruik — we hebben dat veld
    niet en verzinnen het niet. */
.bty-lnk-logo--vlak img { background: var(--bty-track); padding: 4px 8px; border-radius: var(--r-img); }

.bty-lnk-tekst { min-width: 0; }
.bty-lnk-naam { display: block; line-height: 1.3; font-size: clamp(18px, 1.7vw, 21px); color: var(--dark-gray); }
.bty-lnk-intro { display: block; margin-top: 3px; font-size: 15px; line-height: 1.65; color: var(--medium-gray); max-width: 62ch; }
/*  Het webadres is het teken dat de link naar buiten gaat, én de vulling voor links zonder logo. */
.bty-lnk-adres { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .04em; color: var(--bty-muted-2); transition: color .2s ease; }
.bty-lnk-rij:hover .bty-lnk-adres,
.bty-lnk-rij:focus-visible .bty-lnk-adres { color: var(--bty-atext); }
/*  Eén klein teken, alleen bij hover en focus zichtbaar — geen kolom met acht identieke pijltjes. */
.bty-lnk-ext {
    flex: none; width: 15px; height: 15px; color: var(--bty-atext); opacity: 0;
    transform: translate(-3px, 3px);
    transition: opacity .2s ease, transform .2s ease;
}
.bty-lnk-rij:hover .bty-lnk-ext,
.bty-lnk-rij:focus-visible .bty-lnk-ext { opacity: 1; transform: none; }

/* ── Voorleeshulp: tekst die alleen een schermlezer hoort ───────────────── */
.bty-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══ VOORPAGINA-BLOK ═══════════════════════════════════════════════════
   De ACHTERGROND komt van de blok-opmaak die de klant in het dashboard koos
   (.wf-applied.wf-block-*) — die zetten wij hier bewust NIET, want de
   dashboard-opmaak is leidend. Wat hier staat is alleen de INKT: welke
   tekst- en lijnkleuren meebewegen met een lichte of donkere ondergrond.
   `data-op` wordt serverside gezet uit diezelfde blok-keuze.
   ═══════════════════════════════════════════════════════════════════════ */
.bty-blok {
    --blok-ink: var(--dark-gray);      /* koppen en namen */
    --blok-ink-2: var(--medium-gray);  /* lopende tekst */
    --blok-muted: var(--bty-muted);    /* kapitalen, webadres */
    --blok-line: var(--bty-line);      /* haarlijnen */
    --blok-atext: var(--bty-atext);    /* accent als tekst */
    --blok-hover: color-mix(in srgb, var(--bty-accent) 8%, transparent);
    --blok-streep: var(--bty-accent);
    --blok-knopink: #fff;              /* tekst ÍN de gevulde knop bij hover */
    color: var(--blok-ink-2);
    /*  Eigen buitenruimte: dit blok gebruikt geen Crafto-.container maar een eigen .bty-blok__in met
        max-breedte. Zonder deze regel raakt de tekst de schermrand — dezelfde misser als eerder op de
        partnerpagina. De ACHTERGROND blijft van de blok-opmaak uit het dashboard komen. */
    padding: clamp(44px, 6vw, 88px) clamp(16px, 4vw, 40px);
}
.bty-blok[data-op="licht"] {
    --blok-line: color-mix(in srgb, var(--bty-dark) 14%, transparent);
    --blok-hover: color-mix(in srgb, var(--bty-accent) 22%, transparent);
}
/*  Donker (ook bij een foto-achtergrond): tekst en lijnen worden wit-doorschijnend en het accent
    vervalt als tekstkleur — de huisstijlkleur is op een donkere ondergrond niet gegarandeerd leesbaar,
    wit altijd. */
.bty-blok[data-op="donker"] {
    --blok-ink: #fff;
    --blok-ink-2: rgba(255, 255, 255, .78);
    --blok-muted: rgba(255, 255, 255, .6);
    --blok-line: rgba(255, 255, 255, .2);
    --blok-atext: #fff;
    --blok-hover: rgba(255, 255, 255, .08);
    --blok-streep: rgba(255, 255, 255, .6);
    --blok-knopink: var(--bty-dark);
}
.bty-blok__in { max-width: 1180px; margin-inline: auto; }
.bty-blok__kop { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(24px, 3vw, 38px); }
.bty-blok .bty-cat__eyebrow { color: var(--blok-muted); }
.bty-blok .bty-cat__eyebrow::before { background: var(--blok-streep); }
.bty-blok__titel { margin: 0; line-height: 1.2; font-size: clamp(26px, 3vw, 38px); color: var(--blok-ink); }
.bty-blok .bty-lnk-naam { color: var(--blok-ink); }
.bty-blok .bty-lnk-intro { color: var(--blok-ink-2); }
.bty-blok .bty-lnk-adres { color: var(--blok-muted); }
.bty-blok .bty-lnk-lijst,
.bty-blok .bty-lnk-lijst > li { border-color: var(--blok-line); }
.bty-blok .bty-lnk-rij:hover { background: var(--blok-hover); }
.bty-blok .bty-lnk-rij:hover .bty-lnk-adres { color: var(--blok-atext); }
.bty-blok .bty-lnk-ext { color: var(--blok-atext); }
.bty-blok .bty-lnk-rij:focus-visible { outline-color: var(--blok-atext); }
/*  Logo's staan overal al in hun eigen kleur, dus op een donkere ondergrond valt er niets terug te
    zetten. Alleen het witte vlakje onder een "wit logo" blijft daar nodig. */
.bty-blok[data-op="donker"] .bty-lnk-logo--vlak img { background: rgba(255, 255, 255, .9); }

.bty-knop {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px;
    border-radius: var(--r-btn); text-decoration: none;
    font-size: 15px; font-weight: 600; letter-spacing: .02em;
    border: 1px solid var(--blok-atext); color: var(--blok-atext);
    transition: background .2s ease, color .2s ease;
}
.bty-knop:hover { background: var(--blok-atext); color: var(--blok-knopink); }
.bty-knop:focus-visible { outline: 2px solid var(--blok-atext); outline-offset: 3px; }
.bty-knop svg { width: 15px; height: 15px; }
.bty-blok__voet { margin-top: clamp(22px, 3vw, 34px); }

/*  Op een telefoon zou een logovak van 96px te veel van de regel opeten; daar mag het smaller,
    zolang de logo's onderling nog steeds even groot zijn. */
@media (max-width: 480px) {
    .bty-lnk-lijst--logo .bty-lnk-rij { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 14px; }
    .bty-lnk-logo { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .bty-lnk *, .bty-blok * { transition: none !important; }
}

/*  SPONSORLOGO'S — VRIJSTAAND (keuze Jenny, 08-08-2026)
    ----------------------------------------------------
    Sponsors stond als enige logo-module in kaartjes (Crafto .card + box-shadow-quadruple-large),
    terwijl Partners en Merken hun logo's vrij op de blok-achtergrond tonen. Kaart is weg; dit blok
    doet de maatvoering. Zelfde klassenaam en zelfde opzet als in custom-business1.css en
    custom-business2.css — per template alleen andere maten, want elke template heeft zijn eigen
    ritme. Er laadt altijd maar één van die drie bestanden, dus de namen botsen niet.

    max-width < 100% is bewust: sponsorlogo's hebben sterk wisselende verhoudingen (breed woordmerk
    naast vierkant beeldmerk). Zonder breedteplafond vult het brede merk de hele kolom terwijl het
    vierkante er half zo groot bij staat.  */
.wf-sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    margin-bottom: 20px;
}
.wf-sponsor-logo img {
    max-height: 80px;
    max-width: 78%;
    width: auto;
    object-fit: contain;
    transition: transform .35s cubic-bezier(.25, .8, .25, 1);
}
.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. */
/* Alleen een logo dat ergens heen gaat vergroot; zonder tekst en website is het geen link (SponsorLink). */
a.wf-sponsor-logo[href]:hover img { transform: scale(1.07); }

/*  Sponsorniveau op de kaart (Hoofdsponsor / Goud / Zilver / Brons). Een sponsor betaalt juist voor
    die vermelding, dus hij staat bovenaan de kaart — maar ingetogen: het logo blijft de blikvanger.
    Kleuren komen uit de huisstijl (accent-tint op een zeer lichte accent-ondergrond), nooit een
    verzonnen goud/zilver/brons — de klant kiest zijn eigen niveaunamen en die hoeven geen metaal te
    zijn ("Vriend van de club" mag ook).

    :empty houdt de regel WEL op hoogte maar toont niets: als één sponsor in het blok een niveau heeft,
    krijgt elke kaart de regel, zodat de logo's in een rij op dezelfde hoogte beginnen. */
.wf-sponsor-tier {
    display: block;
    margin: 0 auto 18px;
    padding: 5px 16px;
    width: fit-content;
    max-width: 100%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.5;
    color: color-mix(in srgb, var(--bty-accent) 72%, #000);
    background: color-mix(in srgb, var(--bty-accent) 10%, var(--bty-mix-licht));
    border-radius: 999px;
}
.wf-sponsor-tier:empty { visibility: hidden; }
[data-bs-theme="dark"] .wf-sponsor-tier {
    color: #fff;
    background: color-mix(in srgb, var(--bty-accent) 34%, transparent);
}

/*  Op de LICHTE template staat het logo overal vrij, ook op een gekleurd blok (keuze Jenny 08-08).
    Op de DONKERE template blijft een lichte drager staan: een donker woordmerk op een bijna-zwarte
    basis is niet minder 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). De kaarten droegen Crafto's .border-radius-6px,
    en die zet 6px met !important — de kaart negeerde daarmee de ronding die de klant zelf instelt
    (0 tot 50px). Zelfde klassenaam als in business1, zodat beide templates één begrip houden.
    Zie [[site-radius-check-rule]].  */
.wf-sponsor-ovcard { border-radius: var(--r-card) !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 .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 (80px): 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%; }
}

/* ── Radius-naronde 09-08-2026 ───────────────────────────────────────────────
   Twee voorpagina-blokken droegen nog Crafto's vaste hulpklasse .border-radius-6px op een plek die de
   centrale regeling in _SiteLayout niet dekt (die pakt .card, [class*="-card"], [class*="-tile"] en
   familie, maar niet een kale .bg-white / .bg-very-light-gray). Ze bleven daardoor op 6px staan tussen
   kaarten die wél de klant-ronding volgen — op de voorpagina van Frenque stonden drie bijna vierkante
   pakketkaarten tussen ronde nieuws- en agendakaarten.

   .border-radius-6px staat in Crafto's style.css zélf op !important, dus hier is !important nodig én
   meer gewicht. Zie [[site-radius-check-rule]]. */

/*  Witte titelplaatje óver de galerijfoto. Keuze Jenny 09-08: exact dezelfde hoek als de fotokaart
    eronder, niet een bescheiden plafond. */
.box-layout .bty-gallery .hover-box .bg-white.border-radius-6px {
    border-radius: var(--r-card) !important;
}

/*  De pakketkaart heeft nu een eigen klasse (.bty-price-card, onderaan dit bestand) die de ronding
    zelf zet — op de voorpagina én op /prijzen. De regel die hier stond haakte alleen op de
    voorpagina (.bty-pricing), waardoor dezelfde kaart op /prijzen op 6px bleef staan. */

/*  Galerij-albums: hover van een halve seconde naar 0,35s (wens Jenny 09-08). Crafto zet op deze kaarten
    `transition: all .5s`, terwijl álle andere kaarten in beauty1 (nieuws, agenda, kennisbank, producten)
    al op .35s stonden — de galerij was de enige uitschieter, en omdat op een albumkaart het invagen van
    de donkere waas het énige is dat gebeurt, kijk je er recht naar en leest 0,5s als traag.
    0,35s in plaats van sneller: de hele site reageert zo in één ritme.

    Alleen de dúúr wordt overschreven, niet de hele `transition`-regel: zo blijven Crafto's eigen
    eigenschappenlijst en versnellingscurve staan. Geldt voor het voorpagina-blok én de
    overzichtspagina, want /galerij hergebruikt hetzelfde blok (`.bty-gallery`). */
.bty-gallery .hover-box,
.bty-gallery .hover-box * { transition-duration: .35s; }

/* ════════════════════════════════════════════════════════════════════════════
   AGENDA-OVERZICHT (10-08-2026) — /agenda in beauty1-stijl.

   Deze pagina stond nog in de kale business1-vorm: Crafto-utility's, een vaste
   `border-radius-6px` en een donkergrijze knop. De maandknoppen hadden in géén
   enkele stylesheet opmaak, dus dat werden de blokkerige knoppen van de browser,
   zonder klant-radius (opmerking Jenny 10-08-2026). De indeling blijft wat hij
   was — foto links, tekst rechts, één activiteit per rij — alleen de opmaak is
   nu beauty1: sierletter op de titel, accentkleur op de knop, één gedeelde
   kaartschaduw.

   RONDINGEN — zelfde afspraak als AGENDA-DETAIL hieronder. De kaart en de knop
   dragen een klassenaam op "-card" / "-btn", zodat de centrale regeling in
   _SiteLayout ze pakt. Die staat op !important en komt later in de pagina, dus
   die wint altijd: hier dus bewust géén eigen border-radius op die twee. De
   maandknoppen vallen buiten die regeling; hun ronding staat hierboven bij de
   blogfilters, waar ze de regels mee delen.
   ══════════════════════════════════════════════════════════════════════════ */
.bty-agenda-geenmaand { text-align: center; margin-bottom: 34px; color: var(--medium-gray); }

.bty-agenda-list { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); }

/*  Eén rij = één kaart. De fotokolom heeft een vaste breedte in plaats van een percentage: bij een
    korte activiteit (alleen een titel en een datum) kroop een percentage-kolom mee omhoog en werd de
    foto een postzegel naast een halflege tekstkolom. */
.bty-agenda-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    background: var(--bty-oppervlak);
    box-shadow: 0 0 20px rgba(0, 0, 0, .08);
    transition: transform .35s ease, box-shadow .35s ease;
}
@media (min-width: 768px) {
    .bty-agenda-card.has-foto { grid-template-columns: clamp(240px, 32%, 360px) minmax(0, 1fr); }
}

/*  De foto vult zijn hele vak, ook als de tekst ernaast langer is. `height: 100%` op de <img> samen
    met object-fit doet dat werk; een achtergrondfoto (zoals hier eerst stond) kan dat niet zonder een
    vaste hoogte, en die klopte nooit voor alle kaarten tegelijk. Op mobiel staat de foto bovenop en
    krijgt hij een vaste verhouding, anders wordt hij op een smal scherm onevenredig hoog.
    Géén eigen border-radius: de kaart klipt hem al (overflow: hidden), dus een tweede ronding hier zou
    een rond hoekje ín een rond hoekje tekenen. */
.bty-agenda-foto { display: block; overflow: hidden; }
.bty-agenda-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
@media (max-width: 767px) {
    .bty-agenda-foto img { height: auto; aspect-ratio: 16 / 9; }
}

.bty-agenda-body { min-width: 0; padding: clamp(26px, 3vw, 42px); }

/*  Het icoontje lijnt uit op de EERSTE regel, niet op het midden. Op een smal scherm loopt een datum
    met begin- én eindtijd over twee regels, en met align-items: center zakte de kalender daar tussenin
    (zichtbaar op 390px). Het randje marge boven zet hem optisch gelijk met de tekst. */
.bty-agenda-datum {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 12px;
    font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1.5;
    color: var(--bty-atext);
}
.bty-agenda-datum i { font-size: 16px; flex: none; margin-top: 2px; }

/*  Titel in de sierletter van beauty1, net als de kaartkop op de detailpagina. Was `fw-700 fs-24`:
    vet schreefloos, de enige plek op de site waar een kaartkop er zo uitzag. */
.bty-agenda-titel {
    margin: 0 0 10px;
    font-family: var(--alt-font); font-weight: 400;
    font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -.01em;
}
.bty-agenda-titel a { color: var(--dark-gray); text-decoration: none; transition: color .35s ease; }

/*  Locatie. Als er een kaartlink bij zit is het een <a>; zonder link een <span>. Beide zien er
    hetzelfde uit — de link verraadt zich pas bij muis-over en met het externe-link-pijltje. */
.bty-agenda-loc {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    font-size: 15px; color: var(--dark-gray); text-decoration: none;
}
.bty-agenda-loc i { color: var(--bty-atext); flex: none; }
.bty-agenda-loc-ext { font-size: 13px; }
.bty-agenda-loc.is-link { transition: color .35s ease; }
.bty-agenda-loc.is-link:hover { color: var(--bty-atext); }

.bty-agenda-intro { margin: 0 0 22px; color: var(--medium-gray); line-height: 1.75; }

.bty-agenda-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 28px; border: 1px solid transparent;
    font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.35;
    text-decoration: none;
    background: var(--bty-accent); color: var(--bty-on-accent, #fff);
    transition: background .35s ease, color .35s ease;
}
.bty-agenda-btn i { transition: transform .35s ease; }
.bty-agenda-btn:hover { background: color-mix(in srgb, var(--bty-accent) 82%, var(--bty-dark)); color: var(--bty-on-accent, #fff); }
.bty-agenda-btn:hover i { transform: translateX(4px); }

/*  Muis-over op de kaart. Dezelfde 0,35s als de rest van beauty1 — Crafto's eigen 0,5s voelt traag.
    Alleen op een echt aanwijsapparaat: op een aanraakscherm blijft de "hover" na een tik hangen en
    zou de kaart omhoog geschoven blijven staan. */
@media (hover: hover) {
    .bty-agenda-card:hover { transform: translateY(-4px); box-shadow: 0 6px 32px rgba(0, 0, 0, .14); }
    .bty-agenda-card:hover .bty-agenda-foto img { transform: scale(1.03); }
    .bty-agenda-card:hover .bty-agenda-titel a { color: var(--bty-atext); }
}
/*  Wie met een toetsenbord door de pagina loopt ziet de kaart net zo oplichten als bij muis-over. */
.bty-agenda-card:focus-within { box-shadow: 0 6px 32px rgba(0, 0, 0, .14); }
@media (prefers-reduced-motion: reduce) {
    .bty-agenda-card, .bty-agenda-foto img, .bty-agenda-btn i { transition: none; }
    .bty-agenda-card:hover { transform: none; }
    .bty-agenda-card:hover .bty-agenda-foto img { transform: none; }
}

/* ── Nog geen activiteiten ─────────────────────────────────────────────────── */
.bty-agenda-leeg { max-width: 640px; margin: 0 auto; padding: clamp(30px, 4vw, 48px) 20px; text-align: center; }
.bty-agenda-leeg-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 78px; height: 78px; margin-bottom: 22px; border-radius: 50%;
    background: color-mix(in srgb, var(--bty-accent) 10%, var(--bty-mix-licht));
    color: var(--bty-atext); font-size: 30px;
}
.bty-agenda-leeg-kop {
    margin: 0 0 12px;
    font-family: var(--alt-font); font-weight: 400;
    font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; color: var(--dark-gray);
}
.bty-agenda-leeg p { margin: 0; color: var(--medium-gray); }
.bty-agenda-leeg a { color: var(--bty-atext); text-decoration: underline; text-underline-offset: 3px; }

/* ── Donkere modus ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .bty-agenda-card { background: var(--wf-dark-card); box-shadow: none; }
[data-bs-theme="dark"] .bty-agenda-card:hover,
[data-bs-theme="dark"] .bty-agenda-card:focus-within { box-shadow: 0 6px 32px rgba(0, 0, 0, .38); }
[data-bs-theme="dark"] .bty-agenda-leeg-icoon { background: color-mix(in srgb, var(--bty-accent) 18%, var(--site-dark-bg)); }

/* ════════════════════════════════════════════════════════════════════════════
   AGENDA-DETAIL (09-08-2026) — ontwerp uit Claude Design, project 9529aec2,
   bestand `agenda-detail-beauty1.html`. Verving de business1-indeling.

   Opzet: tekstkolom links, meelopend paneel rechts met de eigen knop en het
   aanmeldblok, formulier en terugkoppeling eronder. Onder 1000px zakt alles in
   één kolom in leesvolgorde.

   RONDINGEN — dit is de afwijking t.o.v. het ontwerp (opmerking Jenny 09-08).
   Het ontwerp zette de knop op een vaste pil en het formulierveld op een
   afgeleide van de kaart-ronding; beide negeren de dashboardkeuze van de klant.
   Daarom dragen paneel en knop hier een klassenaam die de centrale regeling in
   _SiteLayout herkent: "-card" pakt de kaart-ronding, "-btn" de knop-ronding.
   Die regel staat later in de pagina én op !important, dus die wint altijd —
   we zetten hier bewust géén eigen border-radius op die twee. Het formulier is
   het gedeelde `_SiteForm`: `.wf-site-form` en `.form-control` zitten al in
   diezelfde regeling en volgen dus de kaart- en veldronding van de klant.
   ══════════════════════════════════════════════════════════════════════════ */
.bty-act { padding: clamp(44px, 7vw, 104px) 0 clamp(56px, 8vw, 112px); }
.bty-act-in {
    display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
    .bty-act-in.has-zij {
        grid-template-columns: minmax(0, 1fr) clamp(300px, 27%, 360px);
        align-items: start; column-gap: clamp(48px, 6vw, 96px); row-gap: 0;
    }
    .bty-act-in.has-zij .bty-act-hoofd  { grid-column: 1; grid-row: 1; }
    /*  Géén `position: sticky` meer. Met het formulier over de volle breedte (zie hieronder) bleef het
        meelopende paneel er bij het scrollen bovenop liggen. Meelopen is een aardigheidje; een paneel
        dat over een invulveld schuift is een fout. Het paneel staat nu gewoon rechts bovenaan. */
    .bty-act-in.has-zij .bty-act-zij    { grid-column: 2; grid-row: 1; align-self: start; }
    /*  Het formulier loopt over de VOLLE breedte, onder het aanmeldpaneel door. Stond het in de
        linkerkolom, dan bleef het even smal als de lopende tekst (~780px) en werd een formulier met
        velden naast elkaar een strook (opmerking Jenny 09-08). De zijkolom beslaat daarom alleen rij 1. */
    .bty-act-in.has-zij .bty-act-staart { grid-column: 1 / -1; grid-row: 2; }
}
/*  Leesbreedte begrenzen: lopende tekst over de volle breedte leest niet prettig. Het FORMULIER
    hoort daar niet bij — dat zijn invoervelden naast elkaar, geen lopende tekst, en op 70ch werd het
    een smalle strook (opmerking Jenny 09-08). De tekstkolom houdt zijn leesbreedte, de staart met het
    formulier mag ruimer. */
.bty-act-hoofd { min-width: 0; max-width: 70ch; }
.bty-act-staart { min-width: 0; max-width: 100%; }

/* ── Feitenregel: wanneer en waar ──────────────────────────────────────────── */
.bty-feiten { display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 3vw, 36px); margin: 0 0 clamp(26px, 3.4vw, 40px); padding: 0; list-style: none; }
.bty-feiten li { list-style: none; }
.bty-feit { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.bty-feit > i { flex: none; margin-top: 6px; font-size: 17px; color: var(--bty-atext); }
.bty-feit-t { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bty-atext); line-height: 2; }
.bty-feit-w { display: block; font-size: 16.5px; font-weight: 400; line-height: 1.55; color: var(--dark-gray); }
.bty-feit-w a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--bty-atext) 45%, transparent); transition: border-color .35s ease, color .35s ease; }
.bty-feit-w a:hover { color: var(--bty-atext); border-bottom-color: var(--bty-atext); }
.bty-feit-sub { display: block; font-size: 14.5px; color: var(--medium-gray); }

/* ── Intro boven de beschrijving ───────────────────────────────────────────── */
.bty-act-intro { margin: 0 0 clamp(22px, 2.6vw, 32px); font-size: clamp(19px, 1.9vw, 22px); font-weight: 300; line-height: 1.7; color: var(--dark-gray); }

/* ── Paneel in de zijkolom ─────────────────────────────────────────────────── */
.bty-act-card {
    background: color-mix(in srgb, var(--bty-accent) 7%, var(--bty-oppervlak));
    padding: clamp(24px, 2.6vw, 32px);
    box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--bty-dark) 45%, transparent);
}
.bty-act-card + .bty-act-card { margin-top: clamp(18px, 2vw, 24px); }
.bty-act-card-kop { margin: 0 0 6px; font-family: var(--alt-font); font-weight: 400; font-size: clamp(20px, 2vw, 23px); line-height: 1.3; letter-spacing: -.01em; color: var(--dark-gray); }
.bty-act-prijs { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.bty-act-prijs b { font-family: var(--alt-font); font-weight: 400; font-size: clamp(26px, 2.8vw, 32px); line-height: 1.15; color: var(--dark-gray); }
/* Beschikbaarheidspil: plafond op de ronding, anders wordt dit vakje een capsule. */
.bty-act-vrij { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: min(var(--r-card), 12px); font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--bty-accent) 16%, transparent); color: var(--bty-atext); }
.bty-act-vrij.is-op { background: transparent; border: 1px solid var(--bty-line); color: var(--medium-gray); }

/* ── Knoppen ───────────────────────────────────────────────────────────────── */
.bty-act-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
    min-height: 52px; padding: 13px 30px; border: 1px solid transparent;
    font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: .02em;
    text-align: center; text-decoration: none; cursor: pointer;
    background: var(--bty-accent); color: var(--bty-on-accent, #fff);
    /* Duits is fors langer dan Nederlands: de knop mag over twee regels lopen. */
    max-width: 100%; white-space: normal; overflow-wrap: break-word;
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.bty-act-btn:hover { background: color-mix(in srgb, var(--bty-accent) 82%, var(--bty-dark)); color: var(--bty-on-accent, #fff); }
.bty-act-btn.is-zacht { background: transparent; color: var(--bty-atext); border-color: var(--bty-line); }
.bty-act-btn.is-zacht:hover { background: color-mix(in srgb, var(--bty-accent) 10%, transparent); border-color: color-mix(in srgb, var(--bty-atext) 45%, transparent); color: var(--bty-atext); }
.bty-act-btn.is-uit { background: transparent; border-color: var(--bty-line); color: var(--medium-gray); cursor: not-allowed; opacity: .75; pointer-events: none; }
.bty-act-card .bty-act-btn { margin-top: 20px; }

/*  Kop boven het gekoppelde formulier. Zelfde sierletter als het paneel ernaast, een maat groter omdat
    dit blok over de volle breedte staat. De kop hoort bij de PAGINA, niet bij het formulier — vandaar
    hier en niet in het gedeelde _SiteForm. */
.bty-act-form-kop {
    margin: 0 0 clamp(18px, 2vw, 26px);
    font-family: var(--alt-font); font-weight: 400;
    font-size: clamp(22px, 2.3vw, 27px); line-height: 1.3; letter-spacing: -.01em;
    color: var(--dark-gray);
}

/* ── Formulier: het GEDEELDE _SiteForm, ONGEWIJZIGD ────────────────────────── *
   Alleen de ruimte eromheen wordt hier gezet. Het formulier zelf houdt bewust onze eigen,
   systeembrede opmaak (grijs paneel, gewone labels, klant-radius via de centrale regeling) —
   niet de variant uit het Claude Design-ontwerp. Regel Jenny 09-08: een klant maakt zijn
   formulier één keer in het systeem, en dan hoort het er overal hetzelfde uit te zien; een
   agenda-eigen inkleding zou dat per pagina laten verschillen.
   Hier stonden eerst overschrijvingen (achtergrond en rand weg, hoofdletterlabels, hogere
   velden). Die zijn verwijderd. Voeg hier niets toe. */
.bty-act-staart > .bty-act-form { margin-top: clamp(44px, 6vw, 80px); }

/* ── Terug naar de agenda ──────────────────────────────────────────────────── */
.bty-act-terug { margin-top: clamp(44px, 6vw, 80px); padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid var(--bty-line); }
.bty-act-terug a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 500; color: var(--bty-atext); text-decoration: none; transition: gap .35s ease; }
.bty-act-terug a i { transition: transform .35s ease; }
.bty-act-terug a:hover i { transform: translateX(-4px); }

/* ── Donkere modus ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .bty-act-card { background: color-mix(in srgb, var(--bty-accent) 12%, #2a2422); }
[data-bs-theme="dark"] .bty-act-vrij { background: rgba(255, 255, 255, .1); color: var(--bty-accent-2); }

/* ── Pakketkaart (voorpagina + /prijzen) ──────────────────────────────────────
   Deze kaart was opgebouwd uit losse Crafto-hulpklassen in de markup en werd daardoor absurd hoog:
   1026px per kaart, 1432px voor het hele blok — meer dan een volledig beeldscherm voor drie
   pakketten. De grootste boosdoener was `ps-12 pe-12` op elke kenmerkregel: 35px inspringing links
   én rechts, waardoor de tekstkolom nog maar ~230px breed was en bijna elke regel over twee of drie
   regels viel. Daar kwam 15px lucht boven én onder per regel bovenop = 91px per kenmerk.

   Hier staat nu één kaartopbouw voor beide plekken. Wat bewust in de markup blijft staan:
   `bg-very-light-gray` is het lichte-eiland-merk waar de donkere modus op haakt (zie de regels bij
   `:is(.wf-block-dark, .wf-on-dark)` hierboven) — die klasse mag er dus niet af. */
.bty-price-card {
    position: relative;
    display: flex; flex-direction: column;
    height: 100%;
    padding: clamp(26px, 2.4vw, 32px);
    border-radius: var(--r-card);
    text-align: center;
    transition: transform .35s ease, box-shadow .35s ease;
}

.bty-price-badge { margin-bottom: 14px; }
/*  Ruimtehouder: de pil blijft staan maar wordt niet getekend, zodat de pakketnamen van alle kaarten
    op dezelfde hoogte beginnen. Zie de toelichting in _PakkettenGrid.cshtml.
    Op een telefoon staan de kaarten onder elkaar en valt er niets uit te lijnen; daar gaat de
    ruimtehouder helemaal weg in plaats van 46px leegte per kaart toe te voegen. */
.bty-price-badge--leeg { display: none; }
@media (min-width: 768px) {
    .bty-price-badge--leeg { display: block; visibility: hidden; }
}

/*  Plafond op 30px: "Compleet Interieuradvies" viel op 38px over twee regels, en met drie kaarten
    naast elkaar bepaalt de langste naam de hoogte van alle drie. */
.bty-price-name { font-size: clamp(24px, 2vw, 30px); line-height: 1.18; margin: 0; }
.bty-price-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }

/*  Naam en intro krijgen allebei ruimte voor twee regels, ook als ze er maar één nodig hebben. Zonder
    dit begonnen prijs en kenmerken in de middelste kaart 34px lager dan in de andere twee, omdat
    "Compleet Interieuradvies" over twee regels valt.

    De reservering staat in `em`, dus in REGELS en niet in pixels: 1.18em is precies één regel van deze
    kop (line-height 1.18), 1.5em één regel intro. Zo blijft het kloppen als de kop meeschaalt met het
    scherm (de clamp hierboven) of als een klant een ander lettertype kiest — een vast getal als
    `min-height: 71px` zou daar meteen scheef van gaan staan.

    Alleen vanaf 768px, want daar staan de kaarten pas naast elkaar (row-cols-md-2). Op een telefoon
    staat elke kaart alleen onder de vorige; daar valt niets uit te lijnen en zou de reservering alleen
    maar ~75px lege ruimte per kaart toevoegen aan het scrollen.

    Grens: dit reserveert twee regels. Typt een klant een pakketnaam die er drie nodig heeft, dan zakt
    die ene kaart alsnog. Voor drie kaarten naast elkaar is een naam van die lengte sowieso te lang. */
@media (min-width: 768px) {
    .bty-price-name { min-height: calc(1.18em * 2); }
    .bty-price-sub { min-height: calc(1.5em * 2); }
}

.bty-price-amount { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 18px 0 0; }
.bty-price-bedrag { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.1; }
.bty-price-per { font-size: 15px; }

/*  Volle kaartbreedte voor de kenmerken: geen inspringing meer, alleen lucht tussen de regels.
    Van 91px per kenmerk naar ~34px voor een regel die past. */
.bty-price-features { list-style: none; padding: 0; margin: 20px 0 26px; text-align: left; font-weight: 500; }
.bty-price-features li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
    font-size: 15px; line-height: 1.5;
}
.bty-price-features li + li { border-top: 1px solid var(--bty-line); }

/*  Het vinkje stond met `align-self-center` halverwege een omgevallen regel te zweven. Nu ligt het
    vast op de eerste tekstregel: 22px regelhoogte, rondje 18px, dus 2px naar beneden om te centreren. */
.bty-price-tick {
    flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.bty-price-tick i { font-size: 12px; line-height: 1; color: #fff; }

.bty-price-btn { margin-top: auto; align-self: center; }

/*  Hele kaart klikbaar. Zelfde aanpak als bij de merkenlijst (.bty-naam a::after): het bestaande
    anker wordt over de kaart heen gelegd in plaats van er een tweede link bij te zetten, zodat een
    voorleesprogramma één link per pakket hoort en niet twee. */
.bty-price-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bty-price-btn:focus-visible { outline: none; }
.bty-price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(var(--bty-dark-rgb), .12); }
.bty-price-card:has(.bty-price-btn:focus-visible) { outline: 2px solid var(--bty-atext); outline-offset: 3px; }

/*  Bezoekers die liever geen beweging zien (systeeminstelling): kaart blijft staan, schaduw blijft. */
@media (prefers-reduced-motion: reduce) {
    .bty-price-card { transition: box-shadow .35s ease; }
    .bty-price-card:hover { transform: none; }
}

/* ── Pakket-detailpagina: uitlijning ──────────────────────────────────────────
   De pagina had drie breedtes door elkaar: de foto + tekst op de volle container (1220px), de
   kenmerken/omschrijving/het formulier gecentreerd op col-lg-8 (783px) en de foto's op col-lg-10.
   Elk blok hing dus aan geen enkele kant vast — de kenmerkenlijst begon 200px rechts van de foto en
   eindigde 218px vóór de rechterrand van de tekst. Dat is wat "niet uitgelijnd" eruitziet.

   De markup zet alles nu op de volle containerbreedte; hier staat alleen wat daarna nog moet. */

/*  Kenmerken in twee kolommen, die precies samenvallen met de foto links en de tekst rechts.
    Elke regel krijgt een streepje bóven zich; alleen de bovenste regel van elke kolom niet, zodat de
    lijst niet met een lijn begint (wens Jenny 10-08). */
.bty-detail-features li { border-top: 1px solid var(--bty-line); }
.bty-detail-features li:first-child { border-top: 0; }

@media (min-width: 768px) {
    /*  Een grid met KOLOM-vulling, niet `columns`. Twee overwegingen:
        - richting: een gewoon grid vult van links naar rechts, waardoor je de lijst zigzag leest
          (1-2 / 3-4) en de linkerkolom 1-3-5 wordt. Met grid-auto-flow: column loopt de linkerkolom
          netjes van boven naar beneden door in de rechter, zoals je een lijst leest.
        - aanwijsbaarheid: bij `columns` verdeelt de browser zelf, en is de bovenste regel van de
          tweede kolom nergens te selecteren om zijn streepje af te pakken. Nu weet de opmaak via
          --wf-kolomrijen (uitgerekend in PakketDetail.cshtml) na hoeveel regels de tweede kolom
          begint, en zet de view daar zelf .is-kolomkop op. */
    .bty-detail-features {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(var(--wf-kolomrijen, 3), auto);
        column-gap: clamp(30px, 4vw, 60px);
    }
    .bty-detail-features li.is-kolomkop { border-top: 0; }
}

/*  Prijs + vervolgstap onder de kenmerken. Iets meer lucht erboven dan tussen de kenmerkregels, zodat
    het als een eigen afsluiting leest en niet als nog een regel van de opsomming. */
.bty-detail-slot { margin-top: clamp(28px, 3vw, 40px); }
.bty-detail-prijs { font-size: clamp(32px, 3vw, 40px); line-height: 1.1; }

/*  Lopende tekst en het formulier op een leesbare regellengte. Links vastgezet en niet gecentreerd:
    zou dit blok in het midden staan, dan had het weer een eigen linkerrand en waren we terug bij het
    probleem hierboven. 72ch is ruwweg de bovengrens waarbij het oog de volgende regel nog terugvindt. */
.bty-detail-lees { max-width: 72ch; }

/*  ── Kennisbank-FAQ: huisstijlkleuren i.p.v. Bootstrap-blauw ───────────────────────────────────
    De FAQ op de kennisbank is de ENIGE accordeon in beauty1 die Bootstrap's `.accordion-button`
    gebruikt; het kwaliteitsblok op de voorpagina draait op Crafto's eigen structuur en heeft dit
    niet nodig. Zonder de regels hieronder kleurt een OPEN vraag naar Bootstrap's standaard
    #cfe2ff met donkerblauwe tekst — geen huisstijlkleur, en op een taupe/roze site vloekt dat.
    Dichtgeklapt was er niets aan de hand, daarom valt het pas op als je een vraag openklikt.

    Alles loopt via de Bootstrap-variabelen op de accordeon zelf: dat is één plek, en zo blijven
    hover, focus en de chevron vanzelf consistent. Kleuren komen uit --brand-*, dus ze volgen wat
    de klant in het dashboard heeft ingesteld. */
.bty-kb-faq {
  --bs-accordion-active-bg: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  /*  Tekst blijft in beide standen hetzelfde donker. --brand-ink is bij een zachte huisstijl (Frenque:
      taupe #877373) te licht voor een kop op bijna-wit; dan wordt een OPEN vraag slechter leesbaar dan
      een dichte. Het accent zit in de tint en de chevron. Zelfde afweging als business1. */
  --bs-accordion-active-color: var(--dark-gray, #1f2430);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

/*  De chevron is een los SVG-plaatje met een vaste kleur erin gebakken, dus die volgt de
    variabelen hierboven niet. We tekenen hem daarom als een masker: dan bepaalt background-color
    de kleur en kan die wél uit de huisstijl komen. */
.bty-kb-faq .accordion-button::after {
  background-image: none;
  background-color: var(--dark-gray, #1f2430);
  -webkit-mask: 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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
  mask: 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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

.bty-kb-faq .accordion-button:not(.collapsed)::after {
  background-color: var(--brand-primary);
}

/* ── 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; }
/*  ÉN alles wat ín zo'n link of knop staat (Tom 26-09-2026). Een kaart in de slider is één grote <a>,
    maar de foto, de titel en het pijltje erbinnen kregen 'auto !important' mee -- dus stond er een pijl
    zodra je ergens ín de kaart hing. Invoervelden houden hun eigen aanwijzer. */
:is(.magic-cursor, .magic-cursor-wrapper) :is(a[href], button, [role="button"], .wf-card-clickable)
  *:not(input):not(textarea):not(select) { 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; }

/* ---- Kennisbank op de voorpagina: "Lees meer" op één lijn -------------------
   De kaarten zijn al even hoog (h-100), maar de knop volgde gewoon de tekst: bij een korte intro stond
   hij hoog in de kaart en bij een lange onderaan, dus in een rij van drie zweefden ze op drie hoogtes
   (Jenny 31-08-2026). De kaartinhoud is nu een kolom-flexbox en de knop duwt zichzelf met een
   automatische bovenmarge naar beneden — de tekst blijft gewoon bovenaan staan.
   align-self houdt de knop op zijn eigen breedte; zonder die regel rekt een flex-item over de volle
   kaartbreedte uit en wordt de pil een balk. */
.bty-kennisbank .card-body { display: flex; flex-direction: column; }
.bty-kennisbank .bty-kb-more { margin-top: auto; align-self: flex-start; }

/*  Een knop midden in de lopende tekst van een pagina (bijvoorbeeld "Neem contact op!" na een zin en een
    regeleinde) plakte 1px onder die tekst (Tom, 13-09-2026). Wat lucht erboven, zonder de knop te verplaatsen
    als hij bovenaan een alinea staat. */
.bty-page-body br + a.btn { margin-top: 14px; }

/* ══ Kleine schermen: aanraakmaten (Tom, 13-09-2026) ══════════════════════════════════════════════════
   Uit de meetronde van beauty1: deze knoppen en links waren kleiner dan 44px. Tot en met iPad liggend
   minstens 44px. Waar een groter vak de opmaak zou verschuiven (kruimelregel, footerregels), wordt het
   element wél 44px hoog maar vangen negatieve marges dat op: het raakvlak groeit, de regel blijft staan. */
@media (max-width: 1024.98px) {
  .bty-pagetitle .fs-15 > a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; vertical-align: middle; }
  /* !important tegen Bootstraps .d-inline, dat zelf !important is; zonder dit bleef de link inline en 25px hoog. */
  .bty-footer h6 > a.text-white { display: inline-flex !important; align-items: center; min-height: 44px; margin-block: -10px; }
  .bty-footer a.footer-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .bty-faqp-chip { display: inline-flex; align-items: center; min-height: 44px; }
  .bty-pub-filter { min-height: 44px; }
}

/*  Onderstreepte tekstlinks ("E-mail ons", de juridische links, "Lees meer" bij nieuws): hun onderstreping is
    een border-bottom op de link zelf, dus een hoger vak zou die streep lager zetten. Hier groeit alleen het
    raakvlak, via een onzichtbaar ::after van 44px hoog: dezelfde aanpak als het hamburgerknopje bovenin dit
    bestand. Een tik erop komt gewoon bij de link uit, en er verschuift niets (Tom, 13-09-2026).

    Het telefoonnummer hoort hier sinds 18-09-2026 ook bij. Dat kreeg zijn 44px eerst via display:flex, en
    dan telt justify-content in plaats van de text-align die de link van zijn kolom erft -- op een telefoon
    stond het nummer daardoor tegen de linkerrand terwijl de rest van de kolom gecentreerd staat (Jenny). */
@media (max-width: 1024.98px) {
  .bty-footer a.wf-mail,
  .bty-footer a[href^="tel:"].d-block,
  .bty-footer-legalrow a:not(.wf-poweredby-link),
  .bty-news a.text-decoration-line-bottom { position: relative; }
  .bty-footer a.wf-mail::after,
  .bty-footer a[href^="tel:"].d-block::after,
  .bty-footer-legalrow a:not(.wf-poweredby-link)::after,
  .bty-news a.text-decoration-line-bottom::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* ══ Lange pagina's op een telefoon (Tom, 13-09-2026) ═══════════════════════════════════════════════════
   Team: vanaf vier teamleden twee kaarten naast elkaar (_Team_Home.cshtml, row-cols-2). Eén portret per rij
   maakte de teampagina ruim 5.200px lang. Een kaart is hier zo'n 160px breed, dus een lager portret, een
   compactere naam, en de functie zonder hoofdletters en letterafstand zodat een lange titel niet middenin
   een woord afbreekt. De !important is nodig tegen de Crafto-hoogte- en lettermaatklassen van de kaart. */
@media (max-width: 575.98px) {
  .bty-team .row-cols-2 > .team-style-05 > .position-relative > a { height: 210px !important; }
  .bty-team .row-cols-2 > .team-style-05 > .position-relative { margin-bottom: 14px !important; }
  .bty-team .row-cols-2 > .team-style-05 > span.fs-20 { font-size: 16px !important; line-height: 1.3 !important; }
  .bty-team .row-cols-2 > .team-style-05 > span.fs-13 {
    display: block; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important;
    line-height: 1.35; overflow-wrap: break-word; margin-top: 2px;
  }
}

/*  Projectkaarten: de omschrijving liep op een telefoon helemaal uit, waardoor één kaart zo'n 600px hoog werd.
    Onder 768px maximaal drie regels; de volledige tekst staat op de projectpagina, één tik verder. */
@media (max-width: 767.98px) {
  .bty-proj-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* 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); }

/*  Introfoto op de voorpagina: alleen de hoek rechtsonder is rond (standaard 50px) en volgt "Vrijstaande
    foto's". De andere drie blijven ALTIJD recht: links sluit de foto naadloos aan op de rand van het
    scherm, boven op de slider (Tom 27-09-2026). */
.bty-about .bty-about-img { border-radius: 0 0 var(--wf-radius-image, 50px) 0; }

/*  Logovak precies zo breed als het logo (Tom 01-10-2026, Geboortetrauma Coach 348). De balk bevat drie varianten van
    het logo (licht, donker bij scrollen, mobiel); Crafto verbergt er twee met visibility:hidden, en die nemen dan nog
    steeds ruimte in. Het vak werd zo 429-592px bij een logo van 348px, met een eigen logohoogte zelfs drie keer het
    logo, en het menu liep over twee regels. Nu liggen de drie over elkaar in dezelfde cel; het wisselen blijft werken. */
.bty-nav .navbar-brand { display: inline-grid; align-items: center; }
.bty-nav .navbar-brand > img { grid-area: 1 / 1; }
/*  En de logokolom minstens zo breed als het logo. col-lg-2 is 1/6 van de balk; een breed logo stak daar tussen 992 en
    1399px buiten en schoof onder het menu door, terwijl het hamburgerscript ("auto") de kolom mat en dus dacht dat het
    menu paste. Past het logo al in zijn kolom (de meeste sites, en col-xxl-3 vanaf 1400px), dan verandert er niets. */
.bty-nav > .container-fluid > [class*="col-"]:first-child { min-width: max-content; }
/*  Behalve op tablet en telefoon (demo-flow-agent 04-10-2026): daar staat alleen de hamburger (en eventueel iconen)
    naast het logo, en een breed logo met naam en slogan erin (5,5 : 1, 328px op 60px hoogte) duwde de hamburger naar
    een eigen regel. Het logo krimpt nu in verhouding tot het naast de knoppen past, links uitgelijnd; een gewoon logo
    past al en verandert niet. Dezelfde regel bestond al voor een balk met shop-iconen (.bty-nav-shop). */
@media (max-width: 991.98px) {
    .bty-nav > .container-fluid { flex-wrap: nowrap; }
    .bty-nav > .container-fluid > [class*="col-"]:first-child { min-width: 0; flex-shrink: 1; }
    .bty-nav .navbar-brand { max-width: 100%; }
    .bty-nav .navbar-brand > img { max-width: 100%; object-fit: contain; object-position: left center; }
}

/*  Blog op de voorpagina met één artikel: breed (16:7), maar op een telefoon 4:3, anders wordt de tegel een
    smalle strook (Tom 01-10-2026). !important wint van de verhouding die inline op de foto staat. */
@media (max-width: 767.98px) {
  .bty-blog-een img, .bty-blog-een .bty-metro-fallback { aspect-ratio: 4 / 3 !important; }
}

/*  Telefoon: beeldmerk · Privacy · Voorwaarden … op één regel, gecentreerd, in plaats van de links op een eigen regel
    eronder (Tom 04-10-2026). Het puntje voor de eerste link scheidt nu weer het beeldmerk van de links. */
@media (max-width: 575.98px) {
  .bty-footer-legalrow .bty-footer-legal { display: inline; margin-top: 0; font-size: inherit; }
  .bty-footer-legalrow .bty-footer-legal > .bty-footer-sep:first-child { display: inline; }
}

/*  "In het kort" in beauty1 (Tom 19-10-2026): aan alle kanten afgerond en zonder gekleurde lijn links; het label
    houdt zijn kleur. De gedeelde vorm (accentlijn) staat in site/css/wf-content.css en blijft voor business1. */
.wf-inhetkort.wf-inhetkort { border-left: 0; border-radius: min(var(--wf-radius-card, 12px), 18px); }

/*  Taalkeuze in de menubalk (Tom 20-10-2026), naar de taalkiezer van business1: een ronde knop met vlag, code en
    pijltje, en een witte lijst met de talen. De kleur volgt de balk: wit over de hero, donker zodra de balk
    vastplakt. De vlaggen gebruiken de gedeelde .biz-lang-flag uit fq-panel.css. */
.bty-nav .bty-lang { position: relative; display: flex; align-items: center; flex: none; margin: 0 14px 0 4px; }
.bty-nav .bty-lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border: 1.5px solid currentColor;
    border-radius: 999px; background: transparent; color: #232828; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer;
    white-space: nowrap; word-break: normal; flex: none;
    transition: background .2s, color .2s, border-color .2s; }
.bty-nav .bty-lang-btn:hover { background: rgba(0, 0, 0, .05); }
header:not(.sticky-active) .bty-nav .bty-lang-btn { color: #fff; border-color: rgba(255, 255, 255, .7); }
header:not(.sticky-active) .bty-nav .bty-lang-btn:hover { background: rgba(255, 255, 255, .14); }
.bty-lang .biz-lang-flag { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); flex: none; }
.bty-lang .biz-lang-flag svg { display: block; width: 150%; height: 100%; margin-left: -25%; }
.bty-lang .biz-lang-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bty-lang-chev { transition: transform .2s; }
.bty-lang-btn[aria-expanded="true"] .bty-lang-chev { transform: rotate(180deg); }
.bty-lang .dropdown-menu.bty-lang-menu { top: calc(100% + 10px); right: 0; left: auto; min-width: 180px; padding: 6px; margin: 0;
    background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; box-shadow: 0 14px 32px rgba(0, 0, 0, .14); }
.bty-lang-menu li:not(:last-child) { margin-bottom: 3px; }
.bty-lang-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 7px; font-size: 14px; font-weight: 600;
    color: #232828; text-decoration: none; white-space: nowrap; transition: background .15s; }
.bty-lang-row:hover { background: rgba(0, 0, 0, .05); color: #232828; }
.bty-lang-row.active { background: color-mix(in srgb, var(--bty-accent, #c2a46d) 14%, #fff); }
.bty-lang-check { margin-left: auto; stroke: var(--bty-atext, #232828); flex: none; }