/* ============================================================================
   wf-content.css — weergave van door de klant geschreven inhoud op de publieke site.

   Dit is de tegenhanger van tomeditor.css: alles wat een klant in de rich editor
   invoegt (foto's, ingesloten video's) moet op de site precies zo uitpakken als
   in het bewerkvlak. Zonder dit bestand kán de editor wel uitlijning en breedte
   aanbieden, maar komt daar publiek niets van terecht.

   Bewust template-onafhankelijk en vanuit _SiteLayout.cshtml geladen, dus het
   werkt in business1, beauty1 en business2 zonder dat er ook maar één regel in
   een template-bestand verandert.

   De wf-*-klassen staan met opzet NIET gescopeerd op een content-container: ze
   dragen een eigen prefix, komen alleen in editor-inhoud voor, en zouden anders
   bij elke nieuwe template opnieuw geregistreerd moeten worden.
   ========================================================================== */

/* ── Breedte van een ingevoegd object ──────────────────────────────────────────
   Procentueel, niet in pixels: een vaste pixelbreedte breekt op mobiel. De hoogte
   volgt automatisch mee, zodat de verhouding van de foto altijd klopt.

   De klassenaam staat overal DUBBEL. Dat is geen typefout maar de manier om zonder
   template-namen boven de template-CSS uit te komen: `.biz-page-body img` is met
   één klasse plus één element specifieker dan een enkele klasse, en zet met
   `margin: 10px 0` de uitlijning terug op links. `.wf-align-center.wf-align-center`
   telt als twee klassen en wint dus, in élke template, ook in toekomstige.       */
.wf-w-25.wf-w-25   { width: 25%; }
.wf-w-50.wf-w-50   { width: 50%; }
.wf-w-75.wf-w-75   { width: 75%; }
.wf-w-100.wf-w-100 { width: 100%; }

/* Een zelf ingetypte breedte gaat via een custom property in plaats van een inline
   width, zodat de mobiele terugval hieronder hem óók kan overrulen — een inline
   style is met CSS niet te overschrijven. */
.wf-w-custom.wf-w-custom { width: var(--wf-w, 100%); }

/* ── Uitlijning ───────────────────────────────────────────────────────────────
   display:block is nodig om met auto-marges te kunnen centreren; templates zetten
   dat niet standaard op afbeeldingen.                                           */
.wf-align-left.wf-align-left,
.wf-align-center.wf-align-center,
.wf-align-right.wf-align-right { display: block; height: auto; }

.wf-align-left.wf-align-left     { margin-left: 0;    margin-right: auto; }
.wf-align-center.wf-align-center { margin-left: auto; margin-right: auto; }
.wf-align-right.wf-align-right   { margin-left: auto; margin-right: 0; }

/* Op een telefoon is een kolom van 25% onleesbaar klein — daar gaat alles over de
   volle breedte, ongeacht wat de klant koos. */
@media (max-width: 575.98px) {
    .wf-w-25.wf-w-25,
    .wf-w-50.wf-w-50,
    .wf-w-75.wf-w-75,
    .wf-w-custom.wf-w-custom { width: 100%; }
}

/* ── Ingesloten media ─────────────────────────────────────────────────────────
   BUGFIX: de editor schrijft al sinds jaar en dag <div class="om-embed"><iframe>,
   maar de bijbehorende verhoudings-CSS bestond alléén binnen het bewerkvlak. Op de
   publieke site kreeg de iframe daardoor geen hoogte en klapte een ingesloten video
   in tot de HTML-standaard van 300x150px. Hier staat hij eindelijk waar hij hoort.

   --wf-embed-ratio is de hoogte als percentage van de breedte: 56.25% = 16:9.     */
.om-embed,
.wf-embed {
    position: relative;
    width: 100%;
    margin: 16px 0;
}

.om-embed::before,
.wf-embed::before {
    content: "";
    display: block;
    padding-top: var(--wf-embed-ratio, 56.25%);
}

/* Sommige diensten leveren een blok met een vaste hoogte in plaats van een verhouding —
   een Spotify-speler, een tweet of een LinkedIn-bericht schaalt niet mee met de breedte. */
.wf-embed-fixed::before { padding-top: 0; }
.wf-embed-fixed         { height: var(--wf-embed-h, 400px); }

/* Een geplakte widgetcode (Google-reviews, Trustpilot) heeft geen verhouding: zijn eigen script bepaalt
   de hoogte. Zolang hij op toestemming wacht krijgt het blok een minimumhoogte, anders valt de uitleg
   met de knop buiten het blok. */
.wf-embed-code::before           { padding-top: 0; }
.wf-embed-code.wf-embed-blocked  { min-height: 220px; }

.om-embed > iframe,
.wf-embed > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

/* Een ingesloten video met een breedte-instelling houdt zijn verhouding: de wrapper
   wordt smaller, de iframe blijft hem volledig vullen. */
.om-embed.wf-align-center.wf-align-center,
.wf-embed.wf-align-center.wf-align-center { margin-left: auto; margin-right: auto; }

/* ── Nog niet toegestane insluiting ───────────────────────────────────────────
   Zonder cookietoestemming heeft de iframe geen bron en is het blok dus leeg. Een
   lege plek voelt als een kapotte pagina, dus zetten we er uitleg in met een knop.
   Zie wf-consent.js.                                                            */
.wf-embed-blocked {
    background: rgba(0, 0, 0, .04);
    border: 1px dashed rgba(0, 0, 0, .18);
    border-radius: 8px;
}

.wf-embed-note {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    text-align: center;
}

.wf-embed-note-t {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.wf-embed-note-s {
    margin: 0;
    max-width: 38em;
    font-size: max(12px, .875rem);
    line-height: 1.5;
    opacity: .75;
}

.wf-embed-note-b {
    margin-top: 6px;
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-primary, #1f2937);
    color: var(--brand-on-primary, #fff);
    font: inherit;
    font-size: max(12px, .875rem);
    font-weight: 600;
    cursor: pointer;
}

.wf-embed-note-b:hover { filter: brightness(.94); }

/* ── Geïmporteerde CKEditor-insluiting met nul-hoogte ─────────────────────────
   De oude editor schreef een video als <div data-oembed-url><div style="width:100%;height:0">,
   waarbij de hoogte uit een padding-truc op datzelfde blok kwam. Die padding overleefde de import
   niet, de height:0 wél — de video telde daardoor voor NUL mee in de paginahoogte, viel buiten de
   sectie en lag over de footer heen (woningbrochure, Tom 11-08). De verhouding komt al van
   .wf-embed hierboven, dus de wrapper hoeft alleen zijn hoogte terug te krijgen. !important is
   nodig omdat het een inline style is.                                          */
[data-oembed-url] > div[style*="height:0"],
[data-oembed-url] > div[style*="height: 0"] { height: auto !important; padding: 0 !important; }

/* ── Zwevende foto in geïmporteerde tekst ─────────────────────────────────────
   Oude content zet foto's met een inline `float: right`. Is zo'n foto hoger dan de tekst ernaast,
   dan steekt hij onder de tekstkolom uit en loopt hij het volgende blok in — een float telt niet
   mee voor de hoogte van zijn ouder. Een clearfix op de content-containers sluit het blok netjes
   onder de foto af. `[class*="-page-body"]` vangt bty-, biz- en wf-page-body in één regel, ook in
   toekomstige templates.                                                        */
[class*="-page-body"]::after,
.wf-content::after,
.b2-prose::after,
.biz-richtext::after {
    content: "";
    display: table;
    clear: both;
}

/* Naast een zwevende foto moet er nog tekst passen — en dat ging mis. De oude editor schreef een
   vaste pixelbreedte mee (`<img width="519">`), en die telde vroeger tegen een bredere kolom dan de
   onze: in een tekstkolom van 885px pakt zo'n foto 59% van de breedte. Er bleef ~360px tekst over,
   waardoor élke regel afbrak — bij een opsomming zag je dat het hardst: bullets over twee en drie
   regels door elkaar, met een rafelig ritme tot gevolg (Meijerink, woningbrochure).
   Daar kwam bij dat de foto gééns marge had, dus de tekst plakte er tegenaan.

   De foto wordt hier NIET bijgesneden — `max-width` schaalt hem evenredig kleiner, de hele foto
   blijft zichtbaar en de verhouding klopt (`height: auto` is nodig omdat het oude `height`-attribuut
   hem anders zou uitrekken). Boven de 40% is er domweg geen leesbare tekstkolom meer over; die 420px
   houdt hem ook op een brede pagina in verhouding. Is een foto van zichzelf al smaller, dan verandert
   er niets aan zijn formaat — alleen de witruimte komt erbij.

   Alleen `float: left/right` (met én zonder spatie, beide komen in de overgezette content voor).
   Bewust niet het bredere `[style*="float"]`: uit Word geplakte tekst zit vol `float: none`, en dat
   zijn foto's die gewoon in de tekststroom horen te blijven staan.

   Staat in een `min-width`-mediaquery zodat hij de telefoonregel hieronder met rust laat: `max-width`
   wint namelijk altijd van `width`, ook van een `width: 100% !important`. Zonder die grens zou een
   foto op een telefoon op 40% blijven hangen in plaats van over de volle breedte te gaan.          */
@media (min-width: 768px) {
    :is([class*="-page-body"], .wf-content, .b2-prose, .biz-richtext)
    img:is([style*="float: left"], [style*="float:left"], [style*="float: right"], [style*="float:right"]) {
        max-width: min(40%, 420px);
        height: auto;
    }
    /* De witruimte hoort aan de kant waar de tekst langsloopt; aan de buitenkant blijft de foto
       netjes op de rand van de tekstkolom staan. De 0.35rem bovenaan laat de bovenkant van de foto
       uitkomen op de regel ernaast in plaats van op de regelafstand erboven. */
    :is([class*="-page-body"], .wf-content, .b2-prose, .biz-richtext)
    img:is([style*="float: right"], [style*="float:right"]) { margin: .35rem 0 1.4rem 2.2rem; }

    :is([class*="-page-body"], .wf-content, .b2-prose, .biz-richtext)
    img:is([style*="float: left"], [style*="float:left"]) { margin: .35rem 2.2rem 1.4rem 0; }
}

/* Op een telefoon past er sowieso geen tekst naast, dus daar gaat hij over de volle breedte in de
   stroom staan. */
@media (max-width: 767.98px) {
    [class*="-page-body"] img[style*="float"],
    .wf-content img[style*="float"],
    .b2-prose img[style*="float"],
    .biz-richtext img[style*="float"] {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 16px 0 !important;
    }
}

/* ── Ontbrekende kop-stijl ────────────────────────────────────────────────────
   business1 stijlt h2 t/m h6 binnen .biz-page-body, maar h1 niet — die viel terug
   op de browserstandaard en sprong daardoor uit de schaal zodra een klant een
   Kop 1 gebruikte. Gescopeerd op de content-containers, want een kale h1-regel zou
   ook de paginatitels van de template raken.                                     */
.biz-page-body h1,
.biz-richtext h1,
.bty-page-body h1,
.b2-prose h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.6em 0 .6em;
}

/* ── Maat × stof-keuze op de productpagina ────────────────────────────────
   Gedeeld door business1 en business2 (beauty1 heeft een eigen versie in zijn 1b-indeling). Staat in
   wf-content.css omdat de schil dit bestand op élke template laadt. Uitsluitend huisstijlvariabelen,
   zodat het blok zich vanzelf naar de template voegt. */
.wf-vm { display: flex; flex-direction: column; gap: 20px; }
.wf-vm-matrix { display: flex; flex-direction: column; gap: 18px; }
.wf-vm-group { display: flex; flex-direction: column; gap: 10px; }
.wf-vm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wf-vm-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.wf-vm-current { font-size: 13px; opacity: .8; }

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

.wf-vm-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.wf-vm-swatch {
    position: relative; width: 40px; height: 40px; padding: 0; font: inherit;
    border: 1px solid rgba(0, 0, 0, .14); border-radius: 7px; cursor: pointer;
    outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s;
}
.wf-vm-swatch.is-active { outline-color: var(--brand-secondary); }
.wf-vm-swatch.is-textonly { width: auto; min-width: 40px; padding: 0 12px; background: transparent; font-size: 12px; font-weight: 600; color: inherit; }
/* Niet leverbaar in de gekozen maat: zichtbaar houden, duidelijk niet te kiezen. */
.wf-vm-swatch.is-unavailable { opacity: .4; cursor: not-allowed; }
.wf-vm-swatch.is-unavailable::after {
    content: ''; position: absolute; left: -2px; right: -2px; top: 50%;
    border-top: 1.5px solid currentColor; transform: rotate(-45deg);
}

.wf-vm-price { font-size: 24px; font-weight: 700; }

.wf-vm-actions { display: flex; align-items: center; gap: 10px; }
.wf-vm-qty { display: inline-flex; align-items: center; height: 48px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 7px; overflow: hidden; }
.wf-vm-qty button { width: 40px; height: 100%; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; opacity: .7; }
.wf-vm-val { min-width: 32px; text-align: center; font-size: 15px; font-weight: 600; }
.wf-vm-cart {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--brand-secondary); color: var(--brand-on-secondary, #fff);
    font: inherit; font-size: 15px; font-weight: 700; white-space: nowrap;
    transition: filter .15s;
}
.wf-vm-cart:hover { filter: brightness(.94); }

/* Terugval zonder JavaScript: een gewone lijst keuzerondjes. */
.wf-vm-flat { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wf-vm-flatitem { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wf-vm-flatitem.is-soldout { opacity: .55; cursor: not-allowed; }

/* Donkere kaart: de vaste zwarttinten hierboven zijn daar onzichtbaar. */
[data-bs-theme="dark"] .wf-vm-size,
[data-bs-theme="dark"] .wf-vm-swatch,
[data-bs-theme="dark"] .wf-vm-qty { border-color: rgba(255, 255, 255, .22); }
[data-bs-theme="dark"] .wf-vm-size.is-active { background: rgba(255, 255, 255, .07); }

@media (max-width: 575px) {
    .wf-vm-cart { font-size: 14px; padding: 0 14px; }
}

/* ── Bladerpijlen van de fotomap-slider (_FotomapWeergave, weergave "grote slider") ────────────
   Crafto's .swiper-button-next/prev erft de tekstkleur van de template, en die pijl ligt hier ÓP een
   foto van de klant: bij Frenque was hij (#564d4d) op de nachtfoto van de gevel niet te zien. Wit,
   net als de pijlen in de hero — keuze Jenny. Let op: op een overwegend lichte foto is wit óók zwak;
   komt dat voor, dan is de oplossing een zachte schaduw of een plaat eronder, niet een andere kleur.

   Bewust hier en niet per template: de partial is gedeeld, dus business1, business2 en italianjob
   hebben exact hetzelfde gat. De kleuren komen uit Crafto's variabelen, die élke template aan de
   huisstijl van de klant koppelt — er staat dus geen enkele vaste kleur in behalve de schaduw.
   De ronding volgt de klantinstelling, met een plafond van de helft van de knop: zonder dat plafond
   is het bij een grote ronding tóch weer een cirkel, en bij ronding 0 hoort hij vierkant te zijn. */
.wf-fotomap-arrow { color: var(--white); transition: opacity .25s ease; }
.wf-fotomap-arrow:hover { opacity: .75; }
/* Swiper zet dit zelf zodra je aan het begin of eind van een niet-doorlopende slider staat. */
.wf-fotomap-arrow.swiper-button-disabled { opacity: .35; }
/*  Valt er niets te schuiven (album met één foto), dan zet Swiper `swiper-button-lock` op de pijlen en
    hoort hij ze te verbergen. Crafto zet daarná `display: flex` op .swiper-button-next/-prev, en met
    gelijke specificiteit wint de laatste regel — de pijlen bleven dus staan en deden niets. Twee klassen
    diep is genoeg om dat terug te draaien. */
.wf-fotomap-arrow.swiper-button-lock { display: none; }

/* Actieve stip in de donkere modus. Crafto's .swiper-dark-pagination kleurt hem --dark-gray, en dat is
   in elke template de donkere merkkleur: op een donkere achtergrond valt hij dus weg. De licht-genoeg-
   gemaakte merkkleur die de templates daar al voor hebben, met de neutrale terugval van Crafto zelf.
   Stond eerst in custom-business1.css; hij hoort hier, want het gedeelde fotomap-blok veroorzaakt het
   en business1 is niet van deze chat. */
[data-bs-theme="dark"] .wf-fotomap-dots .swiper-pagination-bullet-active {
    background: var(--brand-secondary-ondark, var(--light-gray));
}

/* ============================================================================
   JAARFILTER BOVEN HET NIEUWSARCHIEF (_shared/_NieuwsJaarFilter.cshtml)

   Overgezette klanten hebben soms tien jaar aan berichten op één pagina staan; zonder filter is een
   bericht uit 2019 onvindbaar. De knoppen volgen het patroon van het maandfilter bij de agenda, maar
   die opmaak staat alleen in custom-business1.css — en dit blok moet in alle zes de ontwerpen werken.
   Vandaar hier, in het enige stylesheet dat _SiteLayout voor élke template laadt.

   Alle kleur komt uit de huisstijl-variabelen, dus de knop klopt bij elke klant. Een template dat zijn
   eigen knopvorm heeft (beauty1) geeft via ViewData een extra klasse mee; die wint dan met zijn eigen,
   specifiekere regels.
   ============================================================================ */
.wf-jaarfilter {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 0 0 34px;
}
/*  Dit waren knoppen die in de browser filterden. Sinds 11-09-2026 zijn het gewone links (?jaar=2019),
    omdat het nieuwsoverzicht gepagineerd is en een DOM-filter dan alleen de huidige pagina ziet. Een
    <a> is van zichzelf inline en onderstreept, dus die twee regels staan er nu bij; de rest van de
    opmaak is onveranderd, zodat de pil er precies zo uitziet als hij deed. */
.wf-jaar-pill {
  display: inline-block; text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: transparent; color: inherit;
  border-radius: var(--wf-radius-button, 100px);
  padding: 8px 20px; font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.wf-jaar-pill:hover { text-decoration: none; }
.wf-jaar-pill:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.wf-jaar-pill.is-actief {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary, #fff);
}
/*  Tot en met iPad liggend een pil van 44px hoog; hij was 30px en daarmee lastig te raken (Tom,
    13-09-2026). Inline-flex zodat de tekst in het midden blijft staan. */
@media (max-width: 1024.98px) {
  .wf-jaar-pill { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Op een donker vlak is de merkkleur als tekstkleur vaak te donker; daar wint de lichte variant. */
[data-bs-theme="dark"] .wf-jaar-pill:hover:not(.is-actief) {
  border-color: var(--brand-secondary-ondark, #cbd5e1);
  color: var(--brand-secondary-ondark, #cbd5e1);
}
.wf-jaarfilter-leeg { text-align: center; margin: 0 0 30px; opacity: .75; }
/*  Een volle jaarbalk blijft één regel (Jenny, 14-09-2026). De vijf nieuwste jaren blijven zichtbaar, onder
    768px drie en op een telefoon twee; de rest zit achter de knop "Ouder". Alles hangt aan .js-jaarbalk, dat pas door het script
    onder de balk wordt gezet: zonder JavaScript staan alle jaren gewoon zichtbaar en is er geen knop.
    Het actieve jaar blijft altijd in beeld, ook als het een oud jaar is. */
.wf-jaar-meer { display: none; font-family: inherit; -webkit-appearance: none; appearance: none; }
.wf-jaarfilter.js-jaarbalk .wf-jaar-meer { display: inline-flex; align-items: center; gap: 9px; }
.wf-jaar-meer::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease;
}
.wf-jaarfilter.is-open .wf-jaar-meer::after { transform: translateY(1px) rotate(-135deg); }
.wf-jaarfilter.js-jaarbalk:not(.is-open) .wf-jaar-oud:not(.is-actief) { display: none; }
@media (min-width: 768px) {
  .wf-jaarfilter.js-jaarbalk .wf-jaar-meer.wf-jaar-meer-sm { display: none; }
}
@media (min-width: 576px) {
  .wf-jaarfilter.js-jaarbalk .wf-jaar-meer.wf-jaar-meer-xs { display: none; }
}
@media (max-width: 767.98px) {
  .wf-jaarfilter.js-jaarbalk:not(.is-open) .wf-jaar-oud-sm:not(.is-actief) { display: none; }
}
@media (max-width: 575.98px) {
  .wf-jaarfilter.js-jaarbalk:not(.is-open) .wf-jaar-oud-xs:not(.is-actief) { display: none; }
}

/*  Wisselen van jaar of pagina zonder herladen: de berichten onder de balk vervagen even terwijl de nieuwe
    worden opgehaald, de balk zelf blijft rustig staan. */
[data-nieuws-archief] > :not(.wf-jaarfilter) { transition: opacity .25s ease; }
[data-nieuws-archief].is-laden > :not(.wf-jaarfilter) { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  [data-nieuws-archief] > * { transition: none; }
}
/* Op een telefoon zijn veertien jaarknoppen anders vijf rijen hoog (gemeten: 214px) en duw je het
   eerste bericht onder de vouw. Kleinere knoppen en minder tussenruimte halen dat terug naar drie
   rijen, zonder een jaar te verstoppen achter een uitklapmenu. */
@media (max-width: 575.98px) {
  .wf-jaarfilter { gap: 7px; margin-bottom: 24px; }
  .wf-jaar-pill { padding: 6px 13px; font-size: 13px; }
}

/* ============================================================================
   KNOP IN EEN TEKST (rich editor, "Als knop")

   De editor zet zo'n knop neer als <a class="btn btn-primary">. Dat zijn DASHBOARD-klassen: daar is
   btn-primary het Webfix-magenta uit webfix.css. Op de publieke site kennen onze templates die klasse
   niet — daar pikt alleen de Bootstrap die met Crafto meekomt hem op, met zijn eigen #0d6efd. Bij CVSM
   stond de knop naar het opleidingsaanbod daardoor in Bootstrap-blauw op een pagina waar die kleur
   nergens anders voorkomt (Jenny 29-08-2026).

   Kleur komt uit --brand-secondary, niet uit --brand-primary. Dat is de kleur waarmee alle zes de
   ontwerpen hun GEVULDE knop maken (business1 .biz-btn-fill, en beauty1/business2/hotel1 gebruiken hem
   ook), dus zo lijkt een knop in een tekst op de knoppen die er op dezelfde pagina al staan. De
   primaire kleur is daar ongeschikt voor: die is bij sommige klanten een lichte tint (Brain Wellness
   Lab heeft #f4f8fc) en geeft dan een witte knop.

   Vorm via --wf-radius-button, zodat de klantinstelling voor hoekafronding ook hier geldt; zonder
   instelling 4px, gelijk aan de eigen knoppen van business1. De border-radius staat er expliciet bij
   omdat Crafto die op .btn hardzet en Bootstraps eigen variabele dan niet meer doorkomt.

   Bewust GEEN kopie van .biz-btn-fill: die vorm verschilt per ontwerp en dit blok geldt voor alle zes.
   Een template dat zijn eigen vorm wil, neemt hem over met een specifiekere regel.
   ============================================================================ */
.wf-content a.btn.btn-primary,
[class*="-page-body"] a.btn.btn-primary,
[class*="-footer-richtext"] a.btn.btn-primary,
.wf-rich a.btn.btn-primary {
  --bs-btn-bg: var(--brand-secondary, var(--brand-primary));
  --bs-btn-border-color: var(--brand-secondary, var(--brand-primary));
  --bs-btn-color: var(--brand-on-secondary, #fff);
  --bs-btn-hover-bg: var(--brand-secondary, var(--brand-primary));
  --bs-btn-hover-border-color: var(--brand-secondary, var(--brand-primary));
  --bs-btn-hover-color: var(--brand-on-secondary, #fff);
  --bs-btn-active-bg: var(--brand-secondary, var(--brand-primary));
  --bs-btn-active-border-color: var(--brand-secondary, var(--brand-primary));
  --bs-btn-active-color: var(--brand-on-secondary, #fff);
  border-radius: var(--wf-radius-button, 4px);
  /* Bootstraps standaardknop (14px, 6px hoog) oogt priegelig naast de knoppen van het ontwerp. */
  padding: 12px 26px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: filter .35s ease;
}
/* Zelfde hover als .biz-btn-fill: iets donkerder. Werkt bij elke huisstijlkleur, dus we hoeven geen
   tweede kleur te verzinnen die bij sommige klanten uit de toon valt. */
.wf-content a.btn.btn-primary:hover,
[class*="-page-body"] a.btn.btn-primary:hover,
[class*="-footer-richtext"] a.btn.btn-primary:hover,
.wf-rich a.btn.btn-primary:hover { filter: brightness(.92); }

/*  Een knop in het VRIJE FOOTERBLOK kreeg tot 11-09-2026 geen van deze regels: de selectorlijst
    hierboven kende alleen de pagina-tekstvelden, dus zo'n knop viel terug op Bootstraps eigen
    blauw. Erger nog, elke footer zet `a { color: <accentkleur> }` en die regel is specifieker dan
    `.btn`, dus de tekst in de knop werd accentkleurig op blauw, met bij hover ook nog een
    onderstreping van de footer-linkregel. Dat is de knop die afweek van de CTA ernaast.
    Vandaar de footer erbij in beide lijsten, plus hieronder per ontwerp de kleuren van de eigen
    footer-CTA. De onderstreping gaat er expliciet af: die hoort bij een tekstlink, niet bij een
    knop, en de footerregel zou hem anders terugzetten. */
/*  Bewust op a.btn en niet alleen op a.btn.btn-primary: de tekstverwerker maakt tegenwoordig een
    btn-primary, maar in overgenomen inhoud staat ook een btn-outline-primary. Binnen een vrij
    footerblok is elke a.btn klantinhoud, dus daar mogen ze allemaal dezelfde vorm krijgen. */
[class*="-footer-richtext"] a.btn,
[class*="-footer-richtext"] a.btn:hover,
[class*="-footer-richtext"] a.btn:focus {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .wf-content a.btn.btn-primary,
  [class*="-page-body"] a.btn.btn-primary,
  [class*="-footer-richtext"] a.btn.btn-primary,
  .wf-rich a.btn.btn-primary { transition: none; }
}

/* ── Formulieren: tussenkoppen, scheidingslijnen en halve breedte ─────────────
   Het gedeelde _SiteForm staat overal: paginabreed op een contactpagina, smal in
   een zijbalk van een dienstpagina, en in een blok op de voorpagina. Of twee
   velden naast elkaar kúnnen staan hangt dus niet van het scherm af maar van de
   breedte van de formulierbox zelf — vandaar een container query en geen media
   query. Zonder die ondersteuning blijft alles onder elkaar: dat is nooit stuk,
   alleen wat langer.

   De klant kiest de halve breedte per veld in de formulierbouwer; hier staat
   alleen wanneer die keuze ook echt uitgevoerd wordt.
   ────────────────────────────────────────────────────────────────────────── */
.wf-site-form { container-type: inline-size; container-name: wfform; }

/* Terugval en mobiel: volle breedte. .row > * levert de tussenruimte al. */
.wf-site-form .wf-form-col-half { flex: 0 0 auto; width: 100%; }

@container wfform (min-width: 460px) {
  .wf-site-form .wf-form-col-half { width: 50%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Typografie van een formulier: kop → invoerveld → label

   Zo hoort de volgorde te zijn, want in het VELD typt de bezoeker; het label is
   maar een aanduiding. Voor 30-08-2026 stond het precies omgekeerd: de kop was
   een gewone h3 uit de paginatekst (18,9px in de grijsbruine accentkleur) en de
   labels erfden de bodygrootte (15,75px) mét `fw-600` in de donkerste tekstkleur.
   Nagemeten scheelde dat maar 3px, en door kleur en gewicht wonnen de labels het
   visueel van de kop. Het formulier zag er daardoor rommelig uit.

   Staat hier en niet per template: dit is een basisfout in de opmaak, geen smaak
   per klant. Geldt dus voor elk formulier bij elke klant.
   ────────────────────────────────────────────────────────────────────────── */

/* De kop van een ingevoegd formulier. Twee klassen diep, zodat dit wint van de
   h3-regel uit de paginatekst (bv. `.biz-page-body h3`) zonder !important. */
/*  Introkop van de contactpagina: geen los woord op de laatste regel.

    "Waar kunnen wij u mee helpen?" brak als "Waar kunnen wij u mee" + "helpen?" —
    één woord alleen onderaan, wat er slordig uitziet. `balance` laat de browser de
    regels even lang maken, dus het wordt "Waar kunnen wij" + "u mee helpen?".

    Alleen op koppen van een paar regels; daar is deze eigenschap voor bedoeld en
    daar rekent de browser hem ook alleen voor door. Kent een browser hem niet, dan
    breekt de kop gewoon zoals voorheen — geen terugval nodig. */
.wf-introkop { text-wrap: balance; }

/* ══════════════════════════════════════════════════════════════════════════
   Overige instellingen: foto-opmaak

   De klant zet deze drie los aan onder Layout website → Overige instellingen. Ze
   staan als woord in `data-wf-fx` op de <body>; zie Services/Sites/SiteVlaggen.cs.

   Belangrijk voor wie hier iets bijzet: de standaardwaarden in SiteSettingsConfig
   zijn gelijkgetrokken met wat de templates zónder instellingen doen. Fotolijst en
   schaduw staan dus standaard UIT (die opmaak bestond niet) en hover-zoom AAN (die
   bestond wél). Zo verandert er niets bij een klant die hier nooit iets aanraakte.
   ══════════════════════════════════════════════════════════════════════════ */

/*  Zachte schaduw: de kaart ligt iets van de pagina af.

    Twee lagen in plaats van één: een korte donkere voor het contactvlak en een
    langere, veel zachtere voor de diepte. Eén enkele schaduw wordt op een lichte
    achtergrond snel vuil of juist onzichtbaar.

    De schaduwkleur is neutraal zwart met lage dekking en geen huisstijlkleur: een
    gekleurde schaduw leest als een gloed, niet als diepte, en gaat bij een felle
    merkkleur meteen mis. */
body[data-wf-fx~="schaduw"] :is(.card, .feature-box, [class*="-card"], [class*="-tile"], .blog-box, .portfolio-box, .services-box) {
    box-shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 10px 28px -8px rgba(16, 20, 28, .14);
}

/*  Witte lijst rond foto's (passe-partout), zoals bij een ingelijste foto.

    ALLEEN in de tekst van een pagina, dienst of artikel — dus waar de klant zelf een
    foto tussen zijn woorden zet. Een passe-partout hoort om een foto die je bekíjkt;
    hij hoort niet om een foto die zélf al een kaart is.

    Hier stond eerst ook `figure > img` en `[class*="-media"|"-photo"|"-thumb"] > img`,
    en dat was te breed. Crafto gebruikt `figure` óók voor de omslagfoto van een kaart
    (de projectkaarten op de voorpagina zijn `a.interactive-banner-style-04 > figure >
    img`), en dan zet deze regel een witte rand van 8px mét de klant-ronding rondom een
    foto die de hele kaart vult. Dat leest niet als een lijstje maar als een dikke rand
    om de kaart — bij CVSM op 31-08-2026 op de voorpagina gezien, met 22px ronding.

    De lijst is een witte rand plus dezelfde ronding als de foto zelf, zodat hij de
    hoeken volgt in plaats van ze vierkant af te snijden. */
body[data-wf-fx~="fotolijst"] :is(.wf-content, .wf-rich, [class*="-page-body"]) img {
    background: #fff;
    /*  De klant kiest de dikte (0-10px) bij Overige instellingen; _SiteLayout zet hem als variabele.
        Stond hier vast op 8px, wat als een brede lijst leest; 4px is de nieuwe standaard. */
    padding: var(--wf-fotolijst, 4px);
    border-radius: var(--wf-radius-image, 6px);
    box-shadow: 0 1px 3px rgba(16, 20, 28, .10);
}

/*  Inzoomen bij hover UITzetten.

    Andersom dan de twee hierboven: dit effect zit al in de templates (bijna honderd
    CSS-regels met een schaal bij hover). Staat de schakelaar uit, dan halen we het
    weg in plaats van het toe te voegen — vandaar de :not(). !important omdat die
    regels uit de template-CSS komen en specifieker zijn dan wat we hier kunnen
    schrijven zonder elke selector na te bouwen.

    De overgang blijft staan: zonder schaal doet die toch niets, en zo blijven andere
    hover-effecten op hetzelfde element (kleur, schaduw) gewoon zacht verlopen. */
body:not([data-wf-fx~="hoverzoom"]) :is(figure, .wf-content, [class*="-media"], [class*="-photo"], [class*="-thumb"], .card, .feature-box, [class*="-card"], .blog-box, .portfolio-box):hover img {
    transform: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Overige instellingen: de terug-naar-boven-knop

   De knop staat vast in _SiteLayout (Crafto's `.scroll-progress`: het "Scroll"-
   label met de lijn). Hier alleen aan/uit en de kant; de drempel — na hoeveel
   pixels hij verschijnt — zit in main.js, want die telt mee bij het scrollen.
   ────────────────────────────────────────────────────────────────────────── */

/*  Uit betekent echt weg, niet alleen onzichtbaar: `display: none` haalt hem ook
    uit de voorleesvolgorde en de tab-volgorde. Een knop die je niet ziet maar wel
    kunt aantabben is verwarrender dan geen knop. */
body:not([data-wf-fx~="naarboven"]) .scroll-progress { display: none !important; }

/*  Links in plaats van rechts. `right: auto` moet erbij: Crafto zet hem met
    `right: 20px` vast, en zonder dat terug te draaien staat hij aan twee kanten
    tegelijk vastgezet en blijft hij rechts hangen. */
body[data-wf-fx~="naarboven-links"] .scroll-progress { right: auto; left: 20px; }

/* ──────────────────────────────────────────────────────────────────────────
   Overige instellingen: de deelknoppen onder nieuws en projecten
   ────────────────────────────────────────────────────────────────────────── */

/*  De hele balk uit. Ook hier `display: none` en niet alleen onzichtbaar, zodat de
    knoppen ook uit de tab- en voorleesvolgorde verdwijnen. */
body:not([data-wf-fx~="deel"]) :is([data-blog-share], .biz-art-share-rail) { display: none !important; }

/*  Per netwerk. "Link kopiëren" staat er bewust buiten: dat is geen sociaal netwerk
    maar een hulpmiddel, en de enige manier om te delen voor wie geen van de drie
    gebruikt. Die blijft dus staan zolang de balk zelf aan staat. */
body:not([data-wf-fx~="deel-whatsapp"]) [data-share="whatsapp"] { display: none !important; }
body:not([data-wf-fx~="deel-facebook"]) [data-share="facebook"] { display: none !important; }
body:not([data-wf-fx~="deel-linkedin"]) [data-share="linkedin"] { display: none !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Contactformulier: omkaderde velden in plaats van kale onderstrepingen

   Het contactformulier op de contactpagina is Crafto's `contact-form-style-03`:
   velden met alleen een streepje eronder. De klant-ronding stond er wel op (22px
   bij CVSM), maar je zag hem niet — een ronding op een lijn is nu eenmaal
   onzichtbaar. Daardoor week dit formulier zichtbaar af van elk ánder formulier
   op de site, dat wél nette omkaderde velden heeft.

   Deze regels trekken het gelijk met `.wf-site-form`: zelfde kader, zelfde
   vulling, zelfde ronding, zelfde labeltypografie. Gemeten referentie: 1px
   #e4e4e4, wit, opvulling 12/25px.

   Selector begint bewust met `form.` — één puntje specifieker dan de bestaande
   regels in custom-business1.css, zodat de laadvolgorde van de stylesheets niet
   uitmaakt en dit ook wint van hun `!important` op de opvulling.
   ────────────────────────────────────────────────────────────────────────── */
form.contact-form-style-03 .form-control:is(input, select, textarea) {
    border: 1px solid #e4e4e4;
    /*  !important omdat de velden in de opmaak de hulpklasse `bg-transparent`
        dragen, en die staat in vendors.min.css zélf met !important. Zonder dit
        bleef het veld doorzichtig en zag je het kader om een gekleurd vlak. */
    background: #fff !important;
    border-radius: var(--wf-radius-input, 6px);
    /*  Rechts meer ruimte dan links: daar staat het veld-icoon. Niet ruimer dan
        nodig — het icoon staat op 18px en is ~16px breed, dus 40px is precies
        genoeg. Elke pixel extra knabbelt aan de placeholder, en die zijn hier lang
        ("Waarmee kunnen we helpen?"). */
    /*  Rechts was 40px, als ruimte voor het icoon in het veld. Sinds 13-09-2026 staat daar geen icoon meer
        (Jenny), dus rechts gelijk aan links; anders breekt getypte tekst onnodig vroeg af. */
    padding: 12px 25px 12px 25px !important;
}

/*  Het akkoord-vakje hoort géén onderstreping te krijgen.

    Crafto's `contact-form-style-03 input` geeft ELKE input in dit formulier een
    streepje eronder en een doorzichtige vulling. Voor een tekstveld is dat de
    bedoelde stijl, maar een selectievakje werd daardoor letterlijk een streepje:
    18×18 zonder kader, zonder vulling, niet als aanvinkvakje te herkennen.
    Hier krijgt het zijn eigen kader terug, gelijk aan dat van de andere
    formulieren. De ronding komt uit de template zelf (met plafond, anders lijkt
    het op een keuzerondje). */
form.contact-form-style-03 .form-check-input {
    border: 1px solid #b9bcc4 !important;
    background-color: #fff !important;
}
form.contact-form-style-03 .form-check-input:checked {
    background-color: var(--base-color, #333) !important;
    border-color: var(--base-color, #333) !important;
    /*  Het vinkje terugzetten. Diezelfde Crafto-regel doet `background-image:
        initial` en wist daarmee het haakje van Bootstrap; zonder dit zag je alleen
        een gekleurd vlakje en niet dát je akkoord had gegeven. Dit is Bootstraps
        eigen haakje-SVG, wit — zelfde keuze als in de andere formulieren. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 68% !important;
}
form.contact-form-style-03 textarea.form-control { padding-top: 14px !important; }

/* Het veld-icoon mee naar binnen: bij een kader hoort het niet meer tegen de rand
   te plakken zoals bij een kale onderstreping. */
form.contact-form-style-03 .form-group .form-icon,
form.contact-form-style-03 .form-group.form-textarea .form-icon { right: 18px; }

/* Focus: een kader in de merkkleur in plaats van alleen een onderstreep. */
form.contact-form-style-03 .form-control:is(input, select, textarea):focus {
    border-color: var(--base-color, #999);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--base-color, #999) 18%, transparent);
    outline: none;
}

/* Labels net zo rustig als in .wf-site-form — anders schreeuwen ze weer harder dan
   de kop erboven. Zie de blokuitleg bij "Typografie van een formulier". */
form.contact-form-style-03 label:not(.form-check-label) {
    font-size: 14px;
    font-weight: 500 !important;
    color: color-mix(in srgb, var(--dark-gray) 82%, #fff);
}

/* Donkere modus: het witte veldoppervlak en het lichte kader terugdraaien. De
   templates zetten hun eigen randkleur al met !important; alleen de vulling en de
   achtergrond moeten hier nog mee. */
[data-bs-theme="dark"] form.contact-form-style-03 .form-control:is(input, select, textarea) {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .18);
}

.wf-inline-form .wf-inline-form-title {
    /*  In px en niet in rem: de site-root verschilt per schermbreedte (14px op
        desktop, 12px op mobiel). Met rem kromp de kop op de telefoon mee tot
        17,8px — nauwelijks groter dan het invoerveld van 16px, en dan is er weer
        geen hiërarchie. Deze clamp houdt hem overal duidelijk de grootste. */
    font-size: clamp(20px, 16px + 1.2vw, 26px);
    line-height: 1.25;
    /* De donkere koptekstkleur, niet de accentkleur: die is bij veel klanten een
       zachte tint en gaat dan als kop kopje-onder tussen de labels. */
    color: var(--dark-gray);
}

/* Veldlabels: kleiner en rustiger dan het invoerveld eronder.

   De kleur is een gedempte versie van de koptekstkleur, geen `--medium-gray`:
   die haalt op de lichte formulierachtergrond (#f7f7f7) maar 4,52 contrast en
   zit daarmee op het randje van de leesbaarheidsnorm. Deze mix blijft ruim
   daarboven en volgt nog steeds de huisstijl.

   Donkere modus regelt elke template zelf met !important, dus die blijft goed. */
.wf-site-form .form-label,
.wf-site-form .form-check-label {
    /*  Ook hier px: met 1rem werd het label op mobiel 12px, te krap om prettig te
        lezen. 14px staat overal vast en blijft netjes onder het veld (16px). */
    font-size: 14px;
    /*  !important is hier nodig, niet lui: de labels dragen in de partial de
        hulpklasse `fw-600`, en die staat in style.css zélf met !important. Zonder
        dit bleef het label halfvet en was het nog steeds zwaarder dan de kop.
        Alternatief was de klasse uit _SiteForm halen, maar dan verliest het label
        zijn terugval als deze stylesheet ooit niet laadt. */
    font-weight: 500 !important;
    color: color-mix(in srgb, var(--dark-gray) 82%, #fff);
}

/* Tussenkop: iets meer lucht erboven dan tussen twee gewone velden, zodat je ziet
   dat er een nieuw onderdeel begint. Kleur komt van de tekstklassen in de partial,
   dus dit blijft in donkere modus vanzelf goed. */
.wf-form-heading { margin-top: 10px; margin-bottom: 20px; }
.wf-form-heading h4 { font-size: 1.125rem; line-height: 1.4; margin: 0; }
.wf-form-heading-sub { margin-top: 4px; opacity: .75; }

/* Scheidingslijn. Bootstrap tekent de <hr> al in de eigen tekstkleur met lage
   dekking, dus we zetten hier geen kleur vast en hoeven niets aan donkere modus
   te doen; alleen de ruimte eromheen. */
.wf-form-divider { margin: 5px 0 25px; }

/* ── Alleen fouten markeren ───────────────────────────────────────────────────
   Bootstrap zet na een controle een groen vinkje in ELK veld dat klopt, dus ook
   in een leeg veld dat niet verplicht is. Dat leest als "goed ingevuld" terwijl
   er niets staat. We tonen daarom alleen de rode markering met de melding; die
   blijft volledig intact. */
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated input:not([type="checkbox"]):not([type="radio"]):valid,
.was-validated select:valid,
.was-validated textarea:valid { background-image: none; }
.valid-feedback, .valid-tooltip { display: none; }

/* ── Introtekst van een module op de VOORPAGINA ────────────────────────────────
   De korte teaser onder de titel van een moduleblok (Dashboard -> module ->
   Instellingen -> Voorpagina). Gerenderd door de gedeelde _ModuleIntro-partial,
   die in elke template naast _ModulePill staat.

   Bewust minimaal: alleen de ruimte eromheen. GEEN kleur en GEEN lettertype, want
   het blok staat in de ene template op een lichte en in de andere op een donkere
   ondergrond — laat het de kleur van de kop eromheen erven. Wil een template iets
   anders, dan zet die het in zijn eigen custom-<template>.css.

   De laatste alinea verliest zijn ondermarge: de editor levert <p>-tekst, en die
   marge zou onder de teaser een gat richting de items open trekken.
   ────────────────────────────────────────────────────────────────────────── */
.wf-module-intro { margin-top: 14px; }
.wf-module-intro > :last-child { margin-bottom: 0; }

/*  De variant MET een eigen rij (_ModuleIntroRow) staat onder een kop waarvan de rij zelf al een
    ondermarge heeft — mb-5 of mb-6. Zonder correctie valt de teaser daardoor verder van zijn titel af
    dan van de items eronder, en leest hij als een los regeltje in plaats van als bijschrift bij de
    kop. Deze negatieve bovenmarge haalt ongeveer de helft van die marge weer weg. */
.wf-module-intro-row { margin-top: -1.5rem; }

/* =====================================================================   Contactformulier met foto's — naar het ontwerp "Webfix Contactformulier Foto"
   (claude-design/…/Webfix Contactformulier Foto.dc.html), 02-09-2026.

   Twee kolommen die op dezelfde hoogte beginnen en eindigen: het formulier in
   een witte kaart, ernaast (of erboven) één tot drie foto's. De klant kiest op
   /dashboard/layout/contact de kant (links/rechts/boven), de opstelling (raster
   of waaier) en of er een rand om de foto's staat.

   Template-onafhankelijk: deze stylesheet laadt _SiteLayout voor élke template,
   dus business1, beauty1 en de rest delen exact dezelfde opmaak. Kleuren komen
   uit de merk-tokens van de klant (--brand-primary), niet uit de Webfix-huisstijl:
   dit staat op de website van de klant.
   ============================================================================ */
.wf-cf-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 30px; align-items: stretch;
}
/* Foto's links van het formulier. */
.wf-cf-grid.-links { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.wf-cf-grid.-links > .wf-cf-media { order: -1; }
/* Foto's boven het formulier, over de volle breedte. */
.wf-cf-grid.-boven { grid-template-columns: 1fr; }
.wf-cf-grid.-boven > .wf-cf-media { order: -1; }
.wf-cf-grid.-boven .wf-cf-media.-n1 .wf-cf-ph { aspect-ratio: 16 / 6; min-height: 0; }
.wf-cf-grid.-boven .wf-cf-media.-n2,
.wf-cf-grid.-boven .wf-cf-media.-n3 { grid-template-rows: none; grid-template-columns: 1fr 1fr 1fr; }
.wf-cf-grid.-boven .wf-cf-media.-n2 { grid-template-columns: 1fr 1fr; }
.wf-cf-grid.-boven .wf-cf-media.-n3 > .wf-cf-ph:first-child { grid-column: auto; }
.wf-cf-grid.-boven .wf-cf-media:not(.-fan) .wf-cf-ph { aspect-ratio: 4 / 3; min-height: 0; }
/*  Boven het formulier is de waaier horizontaal getrapt. De verticale sprong gaat via transform (geen
    invloed op de layout), dus de strook is precies zo hoog als één kaart plus de kanteling. */
.wf-cf-grid.-boven .wf-cf-media.-fan {
  display: flex; align-items: center; justify-content: center; padding: 18px 0 22px; aspect-ratio: auto;
}
.wf-cf-grid.-boven .wf-cf-media.-fan > .wf-cf-ph { flex: none; width: 30%; margin: 0; }
.wf-cf-grid.-boven .wf-cf-media.-fan > .wf-cf-ph:nth-child(1) { transform: rotate(-4deg) translateY(-7%); }
.wf-cf-grid.-boven .wf-cf-media.-fan > .wf-cf-ph:nth-child(2) { transform: rotate(3deg) translateY(7%); margin: 0 -3%; z-index: 3; }
.wf-cf-grid.-boven .wf-cf-media.-fan > .wf-cf-ph:nth-child(3) { transform: rotate(-6deg) translateY(-3%); }
/*  Ook boven het formulier moet hoveren werken. De regels hierboven zijn specifieker dan de algemene
    hover, dus die zou het anders nooit winnen -- vandaar deze drie apart (zoals in het ontwerp). */
.wf-cf-grid.-boven .wf-cf-media.-fan > .wf-cf-ph:nth-child(1):hover,
.wf-cf-grid.-boven .wf-cf-media.-fan > .wf-cf-ph:nth-child(2):hover,
.wf-cf-grid.-boven .wf-cf-media.-fan > .wf-cf-ph:nth-child(3):hover {
  z-index: 4; transform: rotate(0deg) scale(1.05); box-shadow: 0 28px 56px rgba(1, 6, 20, .22);
}

/* -- De fotokolom -- */
.wf-cf-media { display: grid; gap: 16px; min-height: 100%; }
.wf-cf-media.-n1 { grid-template-rows: 1fr; }                     /* één foto: volle hoogte naast het formulier */
.wf-cf-media.-n2 { grid-template-rows: 1fr 1fr; }                 /* twee: gelijke helften */
.wf-cf-media.-n3 { grid-template-rows: 1.25fr 1fr; grid-template-columns: 1fr 1fr; }   /* drie: één groot boven, twee eronder */
.wf-cf-media.-n3 > .wf-cf-ph:first-child { grid-column: 1 / -1; }

/*  Waaier: alle kaarten staan in de flow en verschuiven met negatieve marges in PROCENTEN VAN DE
    BREEDTE. Eén referentiemaat, dus de container volgt altijd zijn inhoud — geen aspect-ratio en geen
    absolute positionering. Kaart = 68% breed op 4:3 = 51% hoog.

    De overlap stond eerst op -25% van de breedte (de helft van een kaart): dan schuiven ze zó ver over
    elkaar dat je van de onderste vooral een randje ziet. Nu -12%, ongeveer een kwart van de kaarthoogte
    — ze raken elkaar nog duidelijk, maar elke foto is te zien.

    13-09-2026 (Jenny): de foto's iets groter (78% in plaats van 68% van de kolombreedte, voor zover de kolom
    ruimte heeft) en minder overlap: een vaste 15px in plaats van 12% van de breedte, zodat ze meer uit
    elkaar staan maar elkaar nog wel raken. Alleen naast het formulier (links of rechts); boven het
    formulier en onder 992px gelden eigen regels, die breedte en marge zelf vastzetten. */
.wf-cf-media.-fan { display: block; align-self: start; padding: 10px 0 0; grid-template-rows: none; grid-template-columns: none; }
.wf-cf-media.-fan > .wf-cf-ph {
  position: relative; width: 78%; aspect-ratio: 4 / 3; min-height: 0;
  transition: transform .4s cubic-bezier(.25, .1, .25, 1), box-shadow .4s cubic-bezier(.25, .1, .25, 1);
}
.wf-cf-media.-fan > .wf-cf-ph:nth-child(1) { margin: 0 auto 0 0;  transform: rotate(-4deg); z-index: 1; box-shadow: 0 16px 34px rgba(1, 6, 20, .14); }
.wf-cf-media.-fan > .wf-cf-ph:nth-child(2) { margin: -15px 0 0 auto; transform: rotate(3deg);  z-index: 2; box-shadow: 0 20px 42px rgba(1, 6, 20, .16); }
.wf-cf-media.-fan > .wf-cf-ph:nth-child(3) { margin: -15px auto 0 2%; transform: rotate(-6deg); z-index: 3; box-shadow: 0 22px 46px rgba(1, 6, 20, .18); }
/*  Waar je overheen gaat komt bovenop, gaat recht staan en licht op. Deze regel staat ná de
    nth-child-regels: bij gelijke specificiteit wint de laatste, en dan wint hover van de stand. */
.wf-cf-media.-fan > .wf-cf-ph:hover { z-index: 4; transform: rotate(0deg) scale(1.04); box-shadow: 0 28px 56px rgba(1, 6, 20, .22); }

/* -- Eén foto -- */
.wf-cf-ph {
  position: relative; overflow: hidden; min-height: 150px; border-radius: 24px; border: 6px solid #fff;
  box-shadow: 0 14px 34px rgba(1, 6, 20, .10); margin: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(1, 16, 61, .04);
}
.wf-cf-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- Het formulier in een kaart -- */
.wf-cf-form {
  background: #fff; border: 1px solid rgba(1, 16, 61, .08); border-radius: 30px; padding: 30px;
  box-shadow: 0 1px 3px rgba(18, 20, 32, .06);
}
/*  De templates geven hun contactformulier een negatieve ondermarge (Crafto trekt daarmee de volgende
    sectie omhoog). Binnen de kaart betekent dat: de kaart eindigt 85px boven zijn eigen inhoud en de
    verzendknop hangt eruit. In de kaart hoort die truc niet thuis. */
.wf-cf-form > form { margin-bottom: 0; }

/*  De akkoordverklaring als eigen vlak, zoals in het ontwerp: rustiger dan een los vinkje onder de
    velden, en de hele regel is aanklikbaar. */
.wf-cf-akk {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 15px 17px;
  border-radius: 20px; background: #f7f9fb; border: 1px solid rgba(1, 16, 61, .07);
}
/*  Bootstrap zet .form-check op padding-left met een uitstekende input; in dit vlak willen we ze
    gewoon naast elkaar. Zonder deze twee regels stond het vinkje bóven zijn tekst (beauty1). */
.wf-cf-akk .form-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding-left: 0; min-width: 0; flex-wrap: wrap; }
/*  De foutmelding hoort ONDER het vinkje, niet ernaast. wf-form-validation.js hangt de
    .invalid-feedback aan de ouder van het veld — bij een tekstveld is dat een blok en gaat dat goed,
    maar hier is die ouder deze flex-rij, dus werd de melding een derde kolom. Bootstrap geeft haar
    width:100%, dus eiste ze de hele regel op en bleef er voor het label 0px over: met Crafto's
    globale word-break:break-word is het kleinste stukje tekst één létter, dus zakte het label door
    tot één letter per regel (gemeten: label 0px breed, 1656px hoog).
    Verplaatsen kan niet — Bootstrap toont .invalid-feedback via de broer/zus-selector
    (.form-check-input:invalid ~ .invalid-feedback), dus ze moet in deze rij blijven staan. Daarom
    laten we de rij afbreken en geeft de melding zelf een hele regel. De inspringing houdt haar
    onder de labeltekst: 20px vinkje + 10px tussenruimte. Die inspringing moet BINNEN de 100%
    vallen (padding, geen margin) — met margin werd de melding 100% + 30px en knipte hij op een
    telefoon het laatste woord af. */
.wf-cf-akk .form-check .invalid-feedback { flex: 0 0 100%; padding-left: 30px; }
.wf-cf-akk .form-check-input { flex: none; float: none; margin: 1px 0 0; width: 20px; height: 20px; border-radius: 6px; }
.wf-cf-akk .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
/*  word-break: normal is een RANDBEVEILIGING, niet de reparatie hierboven. Crafto zet globaal
    word-break: break-word (_crafto/css/style.css regel 108); daardoor is het kleinste stukje tekst
    één létter en mag dit label met min-width:0 tot één letter smal krimpen — precies wat er gebeurde
    toen de foutmelding de ruimte opeiste. Met normal is het kleinste stukje weer een heel WOORD, dus
    wordt het bij een volgende krapte hooguit lelijk in plaats van onleesbaar. overflow-wrap zorgt dat
    één te lang woord alsnog netjes afbreekt. Dezelfde reparatie staat al bij de footer van beauty1 en
    bij de artikelentabel op de productpagina. */
.wf-cf-akk label { flex: 1; min-width: 0; margin: 0; cursor: pointer; word-break: normal; overflow-wrap: break-word; }
.wf-cf-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.wf-cf-send-n { font-size: 12.5px; line-height: 1.5; color: #666c73; }

/* -- Responsief, precies zoals in het ontwerp -- */
/* Onder 992px: de foto's als nette strook boven het formulier. */
@media (max-width: 991.98px) {
  /*  .-links moet hier expliciet bij: een mediaquery telt niet mee voor de specificiteit, dus
      ".wf-cf-grid.-links" hierboven won gewoon van ".wf-cf-grid" en dan bleven de foto's op een
      telefoon naast het formulier staan — het formulier werd zo'n 180px breed (Jenny 08-09). */
  .wf-cf-grid,
  .wf-cf-grid.-links,
  .wf-cf-grid.-boven { grid-template-columns: 1fr; gap: 22px; }
  .wf-cf-media { order: -1; }
  .wf-cf-media.-n1, .wf-cf-media.-n2, .wf-cf-media.-n3 { grid-template-rows: none; grid-template-columns: 1fr; }
  /* .-fan.-n3 moet .-n3 verslaan: bij gelijke specificiteit wint anders de volgorde. */
  .wf-cf-media.-fan.-n1, .wf-cf-media.-fan.-n2, .wf-cf-media.-fan.-n3 {
    display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; padding: 0; aspect-ratio: auto;
  }
  .wf-cf-media.-fan > .wf-cf-ph:nth-child(1),
  .wf-cf-media.-fan > .wf-cf-ph:nth-child(2),
  .wf-cf-media.-fan > .wf-cf-ph:nth-child(3) {
    position: static; width: auto; aspect-ratio: 4 / 3; margin: 0 !important; transform: none;
    box-shadow: 0 14px 34px rgba(1, 6, 20, .10);
  }
  .wf-cf-media.-n2 { grid-template-columns: 1fr 1fr; }
  .wf-cf-media.-n3 { grid-template-columns: 1fr 1fr 1fr; }
  .wf-cf-media.-n3 > .wf-cf-ph:first-child { grid-column: auto; }
  .wf-cf-ph { min-height: 0; aspect-ratio: 4 / 3; }
  .wf-cf-media.-n1 .wf-cf-ph { aspect-ratio: 16 / 7; }
}
@media (max-width: 700px) {
  .wf-cf-form { padding: 22px 18px 24px; border-radius: 24px; }
  /* Op een telefoon één beeld; de rest zou het formulier wegdrukken. */
  .wf-cf-media.-n2, .wf-cf-media.-n3 { grid-template-columns: 1fr; }
  .wf-cf-media > .wf-cf-ph:nth-child(n+2) { display: none !important; }
  .wf-cf-ph { aspect-ratio: 16 / 9; }
  .wf-cf-send { flex-direction: column; align-items: stretch; }
  .wf-cf-send-n { text-align: center; }
}

/* ============================================================================
   Kop van de contactpagina — naar de ontwerpen "Webfix Contactpagina Kop"
   (business1) en "Webfix Contactpagina Kop Beauty" (beauty1), 02-09-2026.

   Eén blok: links de aanhef met de titel, rechts de begeleidende tekst met de
   knop, daaronder een strook met bezoekadres, e-mail, telefoon en werken-bij.
   Die strook vervangt de vier losse infoblokjes die hier eerder stonden.

   Template-onafhankelijk, net als .wf-cf-* hierboven: deze stylesheet laadt
   _SiteLayout voor élke template. Het verschil tussen de twee ontwerpen zit in
   één modifier op de wortel — .wf-ck.-bty — die de typografie sierlijk maakt en
   de strook centreert. Alles wat hetzelfde is, staat maar één keer.

   Kleuren komen uit de merk-tokens van de klant (--brand-*), nooit uit de
   Webfix-huisstijl: dit staat op de website van de klant.
   ============================================================================ */
.wf-ck {
  --ck-acc: var(--brand-primary);
  --ck-acc-d: var(--brand-ink);
  --ck-acc-2: var(--brand-secondary);
  --ck-acc-50: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --ck-line: rgba(1, 16, 61, .10);
  --ck-line-2: rgba(1, 16, 61, .09);
  --ck-ink: #1b1e24;
  --ck-body: #5f6368;
}

/* -- kop ------------------------------------------------------------------ */
.wf-ck-head {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 40px 60px; align-items: end; padding-bottom: 38px;
}
.wf-ck-eyebrow {
  display: inline-block; margin-bottom: 20px; padding: 9px 16px; border-radius: 100px;
  background: var(--ck-acc-50); color: var(--ck-acc-d);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.wf-ck-h1 {
  margin: 0; font-family: var(--alt-font); font-weight: 800; font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08; letter-spacing: -.035em; color: var(--ck-ink); text-wrap: balance;
}
.wf-ck-h1 em { font-style: normal; color: var(--ck-acc-d); }
/*  Het streepje onder de titel loopt van de hoofd- naar de steunkleur. Zijn die twee bijna
    gelijk, dan ziet niemand het verloop -- dat geeft niet, het blijft een accentstreep. */
.wf-ck-rule {
  display: block; width: 64px; height: 4px; margin: 24px 0 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--ck-acc), var(--ck-acc-2));
}
.wf-ck-aside { padding-bottom: 4px; }
.wf-ck-lead { margin: 0; font-size: 17px; line-height: 1.72; color: var(--ck-body); text-wrap: pretty; }
.wf-ck-lead > :last-child { margin-bottom: 0; }
.wf-ck-lead strong { font-weight: 700; color: var(--ck-ink); }
.wf-ck-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/*  De knop bouwen we hier zelf op in plaats van hem uit de template te lenen: dit blok moet in
    elke template hetzelfde ogen, en de knopklassen van Crafto verschillen per template. */
.wf-ck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: clamp(46px, 4.6vw, 52px); padding: 0 clamp(22px, 3vw, 42px); border-radius: 100px;
  background: var(--ck-acc); color: var(--brand-on-primary); font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16px); line-height: 1; text-decoration: none;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.wf-ck-btn:hover, .wf-ck-btn:focus {
  background: var(--ck-acc-d); color: var(--brand-on-primary);
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(1, 6, 20, .16);
}
.wf-ck-btn i { font-size: 12px; }
.wf-ck-alt {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 700;
  font-size: clamp(13.5px, 1.1vw, 14.5px); color: var(--ck-body); text-decoration: none;
  transition: color .2s ease;
}
.wf-ck-alt i { font-size: 10px; transition: transform .3s ease; }
.wf-ck-alt:hover { color: var(--ck-acc-d); }
.wf-ck-alt:hover i { transform: translateX(3px); }
.wf-ck-alt span { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s ease; }
.wf-ck-alt:hover span { border-color: var(--ck-acc); }

/* -- contactstrook -------------------------------------------------------- */
.wf-ck-bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ck-line); border-bottom: 1px solid var(--ck-line);
}
.wf-ck-bar.-c1 { grid-template-columns: minmax(0, 1fr); }
.wf-ck-bar.-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-ck-bar.-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-ck-cell { position: relative; display: flex; flex-direction: column; padding: 26px 30px 26px 0; }
.wf-ck-cell + .wf-ck-cell { padding-left: 30px; }
.wf-ck-cell + .wf-ck-cell::before {
  content: ""; position: absolute; top: 26px; bottom: 26px; left: 0; width: 1px; background: var(--ck-line-2);
}
/*  Het accentstreepje dat bij hover onder de cel uit schuift. Het ligt op de onderrand van de
    strook (bottom:-1px), zodat het die lijn overneemt in plaats van er bovenop te komen. */
.wf-ck-cell::after {
  content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px;
  background: var(--ck-acc); transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.wf-ck-cell:hover::after { transform: scaleX(1); }
.wf-ck-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  margin-bottom: 16px; border-radius: 12px; background: var(--ck-acc-50); color: var(--ck-acc-d);
  font-size: 14px; transition: background .3s ease, color .3s ease;
}
.wf-ck-cell:hover .wf-ck-ic { background: var(--ck-acc); color: var(--brand-on-primary); }
.wf-ck-lbl { font-weight: 700; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: #666c73; }
.wf-ck-val {
  margin: 9px 0 0; font-family: var(--alt-font); font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--ck-ink);
}
.wf-ck-val a { color: inherit; text-decoration: none; }
.wf-ck-val a:hover { color: var(--ck-acc-d); }
.wf-ck-val span { display: block; font-family: var(--primary-font); font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--ck-body); }
.wf-ck-sub { margin-top: auto; padding-top: 16px; }
.wf-ck-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--ck-acc-d); text-decoration: none; }
.wf-ck-link i { font-size: 10px; transition: transform .3s ease; }
.wf-ck-link:hover { color: var(--ck-acc-d); }
.wf-ck-link:hover i { transform: translateX(3px); }
/*  Regel zonder link (bijvoorbeeld "nu geopend"): zelfde plek, rustiger. */
.wf-ck-subtxt { display: inline-block; font-size: 13.5px; line-height: 1.5; color: var(--ck-body); }

/*  Eigen tekst van de klant boven de contactstrook (openingstijden, parkeren, bereikbaarheid).
    Zelfde leesmaat als de begeleidende tekst in de kop, want het is lopende tekst van dezelfde soort.
    Wel eigen ruimte eromheen: dit blok staat TUSSEN het kopblok en de strook, en die strook begint
    met een lijn — zonder die ruimte plakt de tekst er tegenaan.
    Het is HTML uit de rijke editor, dus lijstjes en alinea's moeten hier ook goed staan. */
.wf-ck-vrij {
  margin: 0; padding: clamp(22px, 3vw, 34px) 0 clamp(26px, 3.4vw, 38px);
  font-size: 17px; line-height: 1.72; color: var(--ck-body); text-wrap: pretty;
}
.wf-ck-vrij > :first-child { margin-top: 0; }
.wf-ck-vrij > :last-child { margin-bottom: 0; }
.wf-ck-vrij strong { font-weight: 700; color: var(--ck-ink); }
.wf-ck-vrij ul, .wf-ck-vrij ol { margin: 0 0 14px; padding-left: 20px; }
.wf-ck-vrij li { margin-bottom: 6px; }
.wf-ck-vrij a { color: var(--ck-acc-d); text-decoration: underline; }

/* -- beauty-variant: sierlijker, gecentreerd ------------------------------ */
.wf-ck.-bty { --ck-line: rgba(27, 30, 36, .12); --ck-line-2: rgba(27, 30, 36, .12); --ck-body: #63666c; }
/*  Geen eigen uitlijning voor de vrije tekst in beauty1: alleen de CELLEN van de contactstrook staan
    daar gecentreerd, de kop niet. Deze tekst hoort bij de kop, dus die blijft links — gecentreerd zou
    hem juist als enige uit de pas laten lopen. */
.wf-ck.-bty .wf-ck-head { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 44px 60px; padding-bottom: 0; }
/*  De aanhef krijgt hier geen pil maar een hairline die naar de titel toe loopt. */
.wf-ck.-bty .wf-ck-eyebrow {
  display: inline-flex; align-items: center; gap: 16px; margin-bottom: 0; padding: 0;
  background: none; border-radius: 0; color: var(--ck-acc-d); letter-spacing: .17em;
}
.wf-ck.-bty .wf-ck-eyebrow::after { content: ""; display: block; width: 52px; height: 1px; background: var(--ck-line); }
.wf-ck.-bty .wf-ck-h1 {
  margin: 20px 0 0; max-width: 17ch; font-weight: 400; font-size: clamp(36px, 5vw, 60px);
  line-height: 1.14; letter-spacing: -.015em;
}
/*  Recht in plaats van cursief (Jenny, 14-09-2026). De accentkleur blijft, zodat de tweede regel
    herkenbaar blijft als accent. */
.wf-ck.-bty .wf-ck-h1 em { font-style: normal; color: var(--ck-acc-d); }
/*  Ornament in plaats van het gradientstreepje: een lijntje met een ruitje in de merkkleur. */
.wf-ck.-bty .wf-ck-rule {
  display: flex; align-items: center; gap: 14px; width: auto; height: auto; margin: 24px 0 0;
  border-radius: 0; background: none;
}
.wf-ck.-bty .wf-ck-rule::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 1px; background: var(--ck-acc); transform: rotate(45deg); }
.wf-ck.-bty .wf-ck-rule::after { content: ""; display: block; width: 66px; height: 1px; background: linear-gradient(90deg, var(--ck-line), rgba(27, 30, 36, 0)); }
.wf-ck.-bty .wf-ck-aside { padding-bottom: 6px; }
.wf-ck.-bty .wf-ck-lead { line-height: 1.8; }
.wf-ck.-bty .wf-ck-lead strong { font-weight: 600; color: var(--ck-ink); }
.wf-ck.-bty .wf-ck-act { gap: 22px; margin-top: 28px; }
.wf-ck.-bty .wf-ck-bar { margin-top: 44px; padding-top: 40px; border-bottom: 0; }
.wf-ck.-bty .wf-ck-cell { align-items: center; padding: 0 26px; text-align: center; }
.wf-ck.-bty .wf-ck-cell + .wf-ck-cell { padding-left: 26px; }
.wf-ck.-bty .wf-ck-cell + .wf-ck-cell::before { top: 6px; bottom: 6px; background: var(--ck-line); }
.wf-ck.-bty .wf-ck-cell::after { display: none; }
.wf-ck.-bty .wf-ck-ic {
  width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid var(--ck-line); border-radius: 9999px;
  background: none; color: var(--ck-acc-d);
  transition: border-color .35s ease, background .35s ease;
}
.wf-ck.-bty .wf-ck-cell:hover .wf-ck-ic { border-color: var(--ck-acc); background: var(--ck-acc-50); color: var(--ck-acc-d); }
.wf-ck.-bty .wf-ck-lbl { letter-spacing: .17em; }
.wf-ck.-bty .wf-ck-val { margin-top: 12px; font-weight: 400; font-size: 19px; line-height: 1.45; }
.wf-ck.-bty .wf-ck-val span { font-size: 15px; line-height: 1.7; }
.wf-ck.-bty .wf-ck-sub { padding-top: 14px; }
.wf-ck.-bty .wf-ck-link { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .25s ease; }
.wf-ck.-bty .wf-ck-link:hover { border-color: var(--ck-acc); }
/*  Vanaf 1081px, waar de kop twee kolommen heeft (Jenny, 14-09-2026):
    - de knop en de tweede route staan naast elkaar in een balk ONDER kop en tekst. In de rechterkolom
      pasten ze niet naast elkaar (samen ruim 820px, de kolom is 520px). Zelfde techniek als business1:
      het rechterblok laat met display: contents zijn eigen vak los, zodat tekst en balk zelf vakjes van
      het kopraster worden en de balk over beide kolommen mag. De markup blijft gedeeld;
    - de tekst rechts staat verticaal gecentreerd op de TITEL links (Tom, 14-09-2026; eerder lijnde hij
      bovenaan uit op de aanhef en stond hij te hoog). Daarvoor laat ook het linkerblok zijn vak los:
      aanhef, titel en ornament krijgen elk een eigen rij, en de tekst deelt de rij van de titel.
      Is de tekst hoger dan de titel, dan centreert de titel zich in die rij; ze blijven dus altijd
      op elkaar gecentreerd. Zelfde opzet als business1.
    Let op het breekpunt: 1081 en niet 992, want de kop wordt pas bij 1080px en smaller één kolom. */
@media (min-width: 1081px) {
  .wf-ck.-bty .wf-ck-head { row-gap: 0; }
  .wf-ck.-bty .wf-ck-head > :first-child,
  .wf-ck.-bty .wf-ck-aside { display: contents; }
  .wf-ck.-bty .wf-ck-eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  /*  De 20px boven de titel verhuist naar de aanhef: centreren telt de marge mee, en dan stond de titel
      10px lager dan de tekst ernaast. */
  .wf-ck.-bty .wf-ck-eyebrow { margin-bottom: 20px; }
  .wf-ck.-bty .wf-ck-h1 { grid-column: 1; grid-row: 2; align-self: center; margin-top: 0; }
  .wf-ck.-bty .wf-ck-rule { grid-column: 1; grid-row: 3; }
  .wf-ck.-bty .wf-ck-lead { grid-column: 2; grid-row: 2; align-self: center; }
  .wf-ck.-bty .wf-ck-act { grid-column: 1 / -1; grid-row: 4; margin-top: 44px; }
}

/* -- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .wf-ck-head { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .wf-ck.-bty .wf-ck-head { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .wf-ck.-bty .wf-ck-h1 { max-width: 22ch; }
  .wf-ck-bar, .wf-ck-bar.-c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /*  Twee kolommen: de eerste cel van elke rij heeft geen scheidingslijn links, en vanaf de
      derde cel begint een nieuwe rij die zijn eigen lijn erboven krijgt. */
  .wf-ck-cell:nth-child(odd) { padding-left: 0; }
  .wf-ck-cell:nth-child(odd)::before { display: none; }
  .wf-ck-cell:nth-child(n+3) { border-top: 1px solid var(--ck-line-2); }
  .wf-ck.-bty .wf-ck-cell:nth-child(odd) { padding-left: 26px; }
  .wf-ck.-bty .wf-ck-bar { row-gap: 40px; }
  .wf-ck.-bty .wf-ck-cell:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 620px) {
  .wf-ck-bar, .wf-ck-bar.-c2, .wf-ck-bar.-c3 { grid-template-columns: 1fr; }
  .wf-ck-cell, .wf-ck-cell + .wf-ck-cell { padding: 24px 0; }
  .wf-ck-cell + .wf-ck-cell { border-top: 1px solid var(--ck-line-2); }
  .wf-ck-cell + .wf-ck-cell::before { display: none; }
  .wf-ck.-bty .wf-ck-bar { row-gap: 0; }
  .wf-ck.-bty .wf-ck-cell, .wf-ck.-bty .wf-ck-cell + .wf-ck-cell { padding: 24px 0; }
  .wf-ck.-bty .wf-ck-cell + .wf-ck-cell { border-top: 1px solid var(--ck-line); }
  /*  Hoofdknop over de volle breedte, met de tweede route eronder -- en allebei hoog genoeg
      om met een duim te raken. */
  .wf-ck-act { gap: 16px; }
  .wf-ck-act > * { flex: 1 0 100%; }
  .wf-ck-btn { width: 100%; }
  .wf-ck-alt { justify-content: center; min-height: 44px; }
  .wf-ck-link { min-height: 44px; }
  .wf-ck-val a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* -- donkere variant van de template ------------------------------------- */
[data-bs-theme="dark"] .wf-ck {
  /*  De merkkleur als tekst wordt hier de lichte variant, anders valt hij weg in het donker. */
  --ck-acc-d: var(--brand-primary-ondark);
  --ck-acc-50: color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --ck-line: rgba(255, 255, 255, .18);
  --ck-line-2: rgba(255, 255, 255, .14);
  --ck-ink: #f2f3f5;
  --ck-body: rgba(255, 255, 255, .68);
}
[data-bs-theme="dark"] .wf-ck-lbl { color: rgba(255, 255, 255, .6); }
/*  De knop houdt zijn merkvulling; alleen het oplichten bij hover verandert, want de lichte
    tekstvariant van de merkkleur zou als vlak te licht worden onder witte letters. */
[data-bs-theme="dark"] .wf-ck-btn:hover,
[data-bs-theme="dark"] .wf-ck-btn:focus { background: var(--ck-acc); filter: brightness(1.12); }
/*  ── De lijst óók om kaart-omslagfoto's ──────────────────────────────────────
    De schakelaar heet in het dashboard "Witte rand om foto's" en belooft daar
    "een witte lijst rond foto's, zoals een passe-partout" — zonder beperking.
    Hij raakte alleen foto's in de lopende tekst, dus op een overzicht vol
    projecten, nieuws of referenties gebeurde er niets. Een instelling die de
    klant kan aanzetten hoort hij ook terug te zien. (Besluit Jenny, 02-09-2026.)

    WAAROM OP DE SRC EN NIET OP HET OMHULSEL: elke template noemt zijn
    kaartfoto's anders. business1 zet ze in een <figure>, interieur1 geeft ze de
    klasse td-tile-img, en beauty1 doet sommige als achtergrondfoto. Een regel op
    omhulsel-namen mist er dus altijd een paar — een eerdere poging hierop raakte
    business1 wél en interieur1 niet, en dat verschil zag Jenny meteen. Wat álle
    klantfoto's wél gemeen hebben is dat ze uit de mediamap van de klant komen.

    Bewust NIET geraakt:
      - alles in de <header> en de <footer> (daar staan de logo's);
      - alles met "logo" in de klasse, of ín zo'n element;
      - het hero-beeld: een passe-partout om een schermvullende hero is geen
        lijstje meer maar een kader om de hele pagina.

    Achtergrondfoto's (beauty1 team en vacatures) vallen hier nog buiten: die zijn
    geen <img> en kunnen geen padding krijgen. Die hebben een border-oplossing
    nodig; aparte stap. */
body[data-wf-fx~="fotolijst"] img[src*="/media/"]:not(header *):not(footer *):not([class*="hero"]):not([class*="hero"] *):not([class*="logo"]):not([class*="logo"] *) {
    background: #fff;
    padding: var(--wf-fotolijst, 4px);
    border-radius: var(--wf-radius-image, 6px);
}

/*  In de DONKERE stand is wit geen passe-partout maar een schreeuwende rand. Een lijst hoort de kleur
    van de ondergrond te hebben — dat is precies wat een passe-partout is: de foto ligt verzonken in de
    pagina. De site kent zijn eigen donkere basiskleur al (--site-dark-bg, gezet in _SiteLayout uit de
    kleurkeuze van de klant), dus dit hoeft de klant niet apart in te stellen.

    Als variabele, zodat er later eventueel tóch een keuze aan gehangen kan worden zonder dat de regels
    hieronder veranderen. */
:root { --wf-fotolijst-kleur: #fff; }
[data-bs-theme="dark"] { --wf-fotolijst-kleur: color-mix(in srgb, var(--site-dark-bg, #1b2330) 78%, #fff); }

body[data-wf-fx~="fotolijst"] :is(.wf-content, .wf-rich, [class*="-page-body"]) img,
body[data-wf-fx~="fotolijst"] img[src*="/media/"]:not(header *):not(footer *):not([class*="hero"]):not([class*="hero"] *):not([class*="logo"]):not([class*="logo"] *) {
    background: var(--wf-fotolijst-kleur, #fff);
}

/*  Kaartfoto's die als ACHTERGROND staan in plaats van als <img> (beauty1 doet dat bij team en
    vacatures: een <a class="cover-background"> met de foto als background-image en een vaste hoogte).
    Zo'n vlak kan geen padding krijgen — de achtergrond vult het toch wel — dus hier maakt een echte
    rand het lijstje. `background-clip: padding-box` houdt de foto binnen de rand; zonder die regel
    loopt hij eronderdoor en zie je niets.

    De kopbanner boven aan een pagina (bty-pagetitle) en de artikel-hero blijven er buiten: dat zijn
    schermbrede banden, geen foto's in een lijstje.

    box-sizing staat sitebreed op border-box, dus het vlak blijft even groot; alleen de foto erin
    wordt iets kleiner. */
body[data-wf-fx~="fotolijst"] .cover-background[style*="/media/"]:not(header *):not(footer *):not([class*="hero"]):not([class*="hero"] *):not([class*="pagetitle"]):not([class*="pagetitle"] *) {
    border: var(--wf-fotolijst, 4px) solid var(--wf-fotolijst-kleur, #fff);
    background-clip: padding-box;
}

/* -- meldblok op de juridische pagina's ------------------------------------ */
/*  Onderaan de privacyverklaring en de disclaimer staat ons meldmechanisme (zie
    Views/Site/Templates/_shared/_LegalMeldkaart.cshtml).

    Het was een kader met een rand, afgeronde hoeken en tekst op paginagrootte, en dat trok op de
    pagina van een klant te veel aandacht naar ons (Jenny 04-09). De tekst moet er staan, maar als
    voetnoot. Dus: geen kader meer, alleen een haarlijn erboven die hem van de klantinhoud scheidt,
    kleinere letter en gedempte kleur. Geen accentkleur, want het is geen call-to-action.

    Wat we NIET kleiner maken: de letter zakt niet onder 13px en de kleur blijft ruim leesbaar. Een
    meldmechanisme dat je moet zoeken voldoet niet aan "duidelijk herkenbaar" — ingetogen is iets
    anders dan weggemoffeld. */
/*  GEEN eigen leesbreedte (07-09). Er stond max-width:900px met auto-marges, en daardoor lijnde het
    blok met niets uit: op de disclaimer van CVSM stond het aan beide kanten 145px naar binnen ten
    opzichte van de paginatekst (tekst 118–1308, meldblok 263–1163 bij 1440px). Smal maken maakte
    hem niet rustiger maar scheef. Nu vult hij de wrapper die de template er zelf omheen zet —
    .container bij vijf templates, .b2-wrap bij business2 — en dat is exact dezelfde wrapper als de
    paginatekst gebruikt. Uitlijnen doet het werk dat de smalle maat moest doen. */
.wf-legal-melding {
  margin: clamp(26px, 3.2vw, 38px) 0 clamp(30px, 3.6vw, 44px);
  padding: 14px 0 0;
  border-top: 1px solid var(--ck-line, rgba(27, 30, 36, .12));
}
/*  Een <h2> om de goede reden: een schermlezer kan zo naar dit blok springen, en dat is nu juist het
    punt van een meldmechanisme. Optisch blijft het een regeltje — vandaar maat, gewicht en
    regelhoogte hier expliciet, los van wat de template verder aan <h2> hangt.

    Let op de kleur: de --ck-*-tokens staan op .wf-ck en dit blok hangt daar NIET onder, dus in de
    praktijk gold altijd de terugval #1b1e24 — bijna zwart, terwijl de koppen van de pagina zelf de
    zachte merkinkt gebruiken (#726a61 bij CVSM). Dat beet. Vandaar nu de merkinkt vooraan, met de
    oude waarde als terugval voor een site zonder dat token. */
.wf-legal-melding-kop {
  margin: 0 0 3px; font-size: 14px; line-height: 1.5; font-weight: 600;
  color: var(--brand-secondary-ink, var(--ck-ink, #1b1e24));
}
.wf-legal-melding p {
  margin: 0; font-size: 14px; line-height: 1.65;
  color: var(--ck-body, #63666c); text-wrap: pretty;
}
.wf-legal-melding a {
  color: var(--brand-ink, inherit); text-decoration: underline; text-underline-offset: 2px;
}
.wf-legal-melding a:hover, .wf-legal-melding a:focus { text-decoration: none; }
/*  Donkere sites (body[data-bs-theme="dark"], gezet in _SiteLayout). Zonder deze regels valt het blok
    terug op de lichte inkt en staat er donkere tekst op een donkere achtergrond — een meldmechanisme
    dat je niet kunt lezen voldoet niet. */
[data-bs-theme="dark"] .wf-legal-melding { border-top-color: rgba(255, 255, 255, .16); }
[data-bs-theme="dark"] .wf-legal-melding-kop { color: rgba(255, 255, 255, .92); }
[data-bs-theme="dark"] .wf-legal-melding p { color: rgba(255, 255, 255, .70); }
[data-bs-theme="dark"] .wf-legal-melding a { color: inherit; }

/* Een eigen video, ingesloten als speler. Zelfde kader als een YouTube-blok: de wrapper bepaalt de
   verhouding, de speler vult hem. `background` zwart, zodat een liggende film in een staand kader
   niet op een witte vlek staat te wachten. */
.wf-embed > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
    background: #000;
    object-fit: contain;
}

/* ── Vacaturefilter op een telefoon (Templates/Shared/_VacancyFilter.cshtml) ──────────────────────
   De chips liepen daar over twee of drie regels met 6px ertussen, waardoor ze tegen elkaar aan
   plakten en het filter een half scherm hoog werd (Tom, 13-09-2026). Nu één rij die zijwaarts
   schuift, met chips van 44px hoog. De rij schuift, de pagina niet: daarom min-width: 0.
   De !important is nodig tegen Bootstraps .flex-wrap, dat zelf !important is. */
@media (max-width: 767.98px) {
  .wf-vac-filter { min-width: 0; }
  .wf-vac-filter .wf-vac-filter-tops.flex-wrap,
  .wf-vac-filter .wf-vac-filter-subs.flex-wrap {
    flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .wf-vac-filter .wf-vac-filter-tops::-webkit-scrollbar,
  .wf-vac-filter .wf-vac-filter-subs::-webkit-scrollbar { display: none; }
  .wf-vac-filter .wf-vac-filter-tops > button,
  .wf-vac-filter .wf-vac-filter-subs > button {
    flex: none; white-space: nowrap; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    /* In een flexknop valt de spatie tussen de naam en het aantal weg ("Verkoop(1)"); gap zet hem terug. */
    gap: .3em;
  }
}

/* ── Foto die niet laadt ──────────────────────────────────────────────────────
   Het scriptje in _SiteLayout geeft een kapotte foto een ingebouwde SVG (doorgestreept fotoicoon) als bron
   en deze klasse (Jenny, 13-09-2026). Het icoon staat op ware grootte in het midden (object-fit: none) op
   een grijs vlak, en het vlak houdt de maat die de foto zou hebben gehad: bij een kaartfoto met een vaste
   hoogte doet de bestaande opmaak dat al. Alleen een foto zonder vaste hoogte krijgt een 4:3-verhouding,
   zodat hij niet tot de 56px van het icoon inkrimpt; aspect-ratio doet niets zodra hoogte en breedte
   allebei vastliggen. De !important is nodig omdat veel kaartfoto's inline object-fit: cover dragen. */
img.wf-img-leeg {
  object-fit: none !important;
  object-position: center !important;
  background-color: #e9ebef !important;
  aspect-ratio: 4 / 3;
}
[data-bs-theme="dark"] img.wf-img-leeg { background-color: #2b2f37 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Deelbalk onderaan detail- en contentpagina's (_shared/_ShareBar.cshtml)

   Een rustig kaartje met het label en glazige, neutrale knoppen met het
   officiele logo van elk netwerk. Kaart, rand, tekst en hoverkleur volgen de
   template. De afronding
   van het kaartje is de klant-instelling voor kaarten, die van de knoppen de
   instelling voor knoppen (de template geeft elke -btn-klasse die afronding).

   Twee opstellingen (wens Tom, 13-09-2026):
   - standaard: titel boven, met een scheidingslijn eronder, knoppen eronder;
   - .is-rij: label links, knoppen rechts op een regel. Die klasse zet het
     script in de partial alleen als alles werkelijk op een regel past.
   ────────────────────────────────────────────────────────────────────────── */
.wf-share {
  display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  margin: 50px 0 0; padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--extra-medium-gray, #e4e4e4);
  border-radius: var(--wf-radius-card, 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
/*  Sinds 16-09-2026 op een eigen rij over de volle breedte, net boven de footer (wens Tom): altijd 30px
    tussen de inhoud en de balk en 30px tussen de balk en de footer. De sectie erboven houdt daarom
    onderaan geen eigen witruimte meer over. */
.wf-share-rij { padding: 30px 0; }
.wf-share-rij .wf-share { margin: 0; }
section:has(+ .wf-share-rij) { padding-bottom: 0 !important; }

.wf-share-label {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding-bottom: 14px;
  font-size: 16px; line-height: 1.3; font-weight: 600;
  color: var(--dark-gray, #232323);
}
/*  De scheidingslijn: een kort accent in de huisstijlkleur op een haarlijn die
    naar rechts wegloopt. Chiquer dan een volle lijn, en hij sluit aan op de
    accentkleur van de pijl. */
.wf-share-label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background:
    linear-gradient(var(--base-color, var(--brand-primary)), var(--base-color, var(--brand-primary))) left bottom / 44px 2px no-repeat,
    linear-gradient(90deg, var(--extra-medium-gray, #e4e4e4) 40%, transparent) left bottom / 100% 1px no-repeat;
}
.wf-share-label i { color: var(--base-color, var(--brand-primary)); font-size: 18px; transform: rotate(90deg); transition: transform .25s ease; }
.wf-share-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wf-share-list li { margin: 0; padding: 0; flex-shrink: 0; }

/*  Op een regel: label links, knoppen rechts, geen scheidingslijn, pijl naar rechts. */
.wf-share.is-rij { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
.wf-share.is-rij .wf-share-label { flex: 0 0 auto; white-space: nowrap; padding-bottom: 0; }
.wf-share.is-rij .wf-share-label::after { display: none; }
.wf-share.is-rij .wf-share-label i { transform: none; }
.wf-share.is-rij:hover .wf-share-label i { transform: translateX(3px); }
.wf-share.is-rij .wf-share-list { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }

/*  Alle knoppen glazig en neutraal, netwerken en hulpknoppen gelijk (wens Tom, 13-09-2026: niet in
    de kleuren van de socials). Bij hover lichten rand en icoon op in de accentkleur van de template. */
.wf-share-btn {
  --wf-share-c: var(--base-color, var(--brand-primary));
  width: 40px; min-width: 40px; height: 40px; padding: 0; gap: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--extra-medium-gray, #e4e4e4); border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  color: var(--dark-gray, #232323) !important;
  font-size: 17px; line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, background-color .2s ease;
}
.wf-share-btn:hover, .wf-share-btn:focus-visible, .wf-share-btn.is-done {
  transform: translateY(-2px);
  border-color: var(--wf-share-c); color: var(--wf-share-c) !important;
  background: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}
.wf-share-btn:focus-visible { outline: 2px solid var(--wf-share-c); outline-offset: 3px; }

/*  Met weinig netwerken aan (-namen) staat de naam van het platform in de knop. */
.wf-share-name { display: none; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; }
.wf-share.-namen .wf-share-btn:not(.-tool) { width: auto; padding: 0 17px 0 14px; }
.wf-share.-namen .wf-share-name { display: inline; }

/*  "Link kopieren" en "Delen...": hulpmiddelen, geen netwerk. Een dun streepje houdt de twee
    groepen uit elkaar; de knoppen zelf zien er hetzelfde uit. */
.wf-share-sep { width: 1px; height: 24px; margin: 0 4px !important; background: var(--extra-medium-gray, #e4e4e4); }

/*  Telefoon: altijd gestapeld (het script zet daar nooit is-rij), iets compacter, en de
    namen alleen bij hooguit twee netwerken (-namen-mobiel). */
@media (max-width: 575.98px) {
  .wf-share { padding: 16px; margin-top: 40px; gap: 14px; }
  .wf-share-label { font-size: 15px; padding-bottom: 12px; }
  .wf-share-btn { width: 38px; min-width: 38px; height: 38px; font-size: 16px; }
  .wf-share.-namen:not(.-namen-mobiel) .wf-share-btn:not(.-tool) { width: 38px; padding: 0; }
  .wf-share.-namen:not(.-namen-mobiel) .wf-share-name { display: none; }
  .wf-share.-namen-mobiel .wf-share-btn:not(.-tool) { padding: 0 12px 0 10px; font-size: 15px; }
  .wf-share.-namen-mobiel .wf-share-name { font-size: 13px; }
  /*  Het streepje voor de hulpknoppen kost hier net de ruimte waardoor "Link kopieren" met
      twee naamknoppen alleen op een tweede regel viel (gemeten 13-09 op 375px). Op een
      telefoon is de afstand tot de ronde omlijnde knop onderscheid genoeg. */
  .wf-share-sep { display: none; }
}

[data-bs-theme="dark"] .wf-share { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
[data-bs-theme="dark"] .wf-share-label { color: #f2f3f5; }
[data-bs-theme="dark"] .wf-share-label i { color: var(--brand-secondary-ondark, var(--brand-primary-ondark, #d7dae3)); }
[data-bs-theme="dark"] .wf-share-label::after {
  background:
    linear-gradient(var(--brand-secondary-ondark, #d7dae3), var(--brand-secondary-ondark, #d7dae3)) left bottom / 44px 2px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .18) 40%, transparent) left bottom / 100% 1px no-repeat;
}
[data-bs-theme="dark"] .wf-share-sep { background: rgba(255, 255, 255, .18); }
[data-bs-theme="dark"] .wf-share-btn {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18);
  color: #d7dae3 !important; box-shadow: none;
}
[data-bs-theme="dark"] .wf-share-btn:hover,
[data-bs-theme="dark"] .wf-share-btn:focus-visible,
[data-bs-theme="dark"] .wf-share-btn.is-done {
  --wf-share-c: var(--brand-secondary-ondark, #d7dae3);
  background: rgba(255, 255, 255, .10); box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}

/* ── Nieuwsbrief-aanmeldformulieren: teller en controle ONDER het veld en de knop (14-09-2026) ──
   Het voorpagina-blok en de footerbalk zetten veld en knop naast elkaar in een flexrij. De teller van
   het tijdslot (_WfFormTijdslot) en de Turnstile-controle (turnstile-forms.js zet die vlak voor de knop)
   kwamen daardoor TUSSEN veld en knop te staan. Nu schuiven ze naar een eigen regel eronder, en is de
   teller klein en rustig: hij legt alleen uit waarom de knop heel even niet werkt. Geldt ook voor de
   pagina /nieuwsbrief, waar de teller onder de knop komt. */
form[action*="/nieuwsbrief/"] .wf-tijdslot {
    flex: 0 0 100%; order: 99; width: 100%; margin: 8px 0 0;
    font-size: 12px; line-height: 1.4; opacity: .7;
}
.wf-nl-form .wf-ts-frame { flex: 0 0 100%; order: 98; margin: 12px auto 0 !important; }

/* ============================================================================
   Groepen en zoeken boven het referentie-overzicht (Tom, 14-09-2026).
   Markup: _shared/_ReferentieFilter.cshtml, rekenwerk: ReferentieOverzicht.
   business1 ronde knoppen, beauty1 hoekig (.-bty), net als hun andere knoppen.
   Kleuren uit de merk-tokens van de klant.
   ============================================================================ */
.wf-rf {
  --rf-acc: var(--brand-primary);
  --rf-ink: var(--brand-ink, var(--brand-primary));
  --rf-line: rgba(1, 16, 61, .12);
  --rf-rond: 9999px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; margin: 0 0 34px; scroll-margin-top: 110px;
}
.wf-rf.-bty { --rf-rond: 2px; }
.wf-rf-groepen { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-rf-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid var(--rf-line); border-radius: var(--rf-rond); background: #fff;
  color: #1b1e24; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.wf-rf-chip:hover, .wf-rf-chip:focus-visible { border-color: var(--rf-acc); color: var(--rf-ink); }
.wf-rf-chip.is-on { background: var(--rf-acc); border-color: var(--rf-acc); color: #fff; }
.wf-rf-n {
  min-width: 22px; padding: 2px 7px; border-radius: var(--rf-rond); text-align: center;
  background: color-mix(in srgb, var(--rf-acc) 10%, transparent); color: var(--rf-ink);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.wf-rf-chip.is-on .wf-rf-n { background: rgba(255, 255, 255, .22); color: #fff; }
.wf-rf-zoek { position: relative; display: flex; align-items: center; flex: 0 1 340px; margin: 0; }
.wf-rf-zoek > i { position: absolute; left: 15px; color: #8a8f98; font-size: 15px; pointer-events: none; }
.wf-rf-zoek input[type="search"] {
  width: 100%; height: 46px; margin: 0; padding: 0 104px 0 42px;
  border: 1px solid var(--rf-line); border-radius: var(--rf-rond); background: #fff;
  color: #1b1e24; font-size: 14px;
}
.wf-rf-zoek input[type="search"]:focus { outline: none; border-color: var(--rf-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-acc) 18%, transparent); }
.wf-rf-zoek button {
  position: absolute; right: 5px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--rf-rond);
  background: var(--rf-ink); color: #fff; font-size: 13px; font-weight: 600; line-height: 1;
}
.wf-rf-zoek button:hover { background: var(--rf-acc); }
.wf-rf-uitkomst { margin: -18px 0 26px; font-size: 14px; color: #5f6368; }
.wf-rf-uitkomst a { color: var(--brand-ink, var(--brand-primary)); text-decoration: underline; text-underline-offset: 3px; }
[data-bs-theme="dark"] .wf-rf { --rf-line: rgba(255, 255, 255, .18); }
[data-bs-theme="dark"] .wf-rf-chip, [data-bs-theme="dark"] .wf-rf-zoek input[type="search"] { background: transparent; color: #fff; }
[data-bs-theme="dark"] .wf-rf-n { color: #fff; }
[data-bs-theme="dark"] .wf-rf-uitkomst { color: rgba(255, 255, 255, .75); }
/*  Telefoon en tablet: zoeken over de volle breedte, de groepen als één rij die zijwaarts schuift. */
@media (max-width: 767.98px) {
  /*  nowrap: met flex-wrap: wrap is dit een kolom met meerdere "regels", en zo'n regel wordt zo breed als zijn
      breedste kind. De hele rij knoppen duwde de pagina daardoor op een telefoon naar 527px. Met één regel is
      de kolom precies zo breed als het scherm, en schuift de knoppenrij daarbinnen. */
  .wf-rf { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .wf-rf-groepen, .wf-rf-zoek { min-width: 0; max-width: 100%; }
  .wf-rf-groepen { flex-wrap: nowrap; overflow-x: auto; margin: 0 -15px; padding: 2px 15px 6px; scrollbar-width: none; }
  .wf-rf-groepen::-webkit-scrollbar { display: none; }
  .wf-rf-chip { flex: none; min-height: 44px; }
  .wf-rf-zoek { flex-basis: auto; }
}

/* ── Nieuwsbriefarchief: /nieuwsbrieven en /nieuwsbrieven/{id} (14-09-2026) ──
   Stond in webfix.css, en dat stylesheet laadt de klantsite niet: de pagina stond onopgemaakt tegen de
   linkerkant. Nu hier, voor elke template. De kaarten zijn altijd licht (ook in een donkere template),
   en de hoeken volgen de klantinstelling. */
.wf-nba { padding: 70px 0 90px; }
.wf-nba-wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.wf-nba-intro { text-align: center; margin: 0 auto 32px; font-size: 17px; opacity: .8; }
.wf-nba-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wf-nba-kaart {
    display: block; padding: 26px 30px; text-decoration: none;
    background: #fff; color: #1f2a44; color-scheme: light;
    border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--wf-radius-card, 16px);
    box-shadow: 0 6px 22px rgba(15, 23, 42, .05);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.wf-nba-kaart:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15, 23, 42, .10); border-color: var(--brand-primary, #1e3a5f); }
.wf-nba-datum { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: #7b8496; margin-bottom: 8px; }
.wf-nba-titel { display: block; font-size: 21px; line-height: 1.35; font-weight: 700; color: #1f2a44; }
.wf-nba-sub { display: block; margin-top: 6px; font-size: 15px; line-height: 1.6; color: #5b6475; }
.wf-nba-lees { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--brand-primary, #1e3a5f); }
.wf-nba-leeg {
    text-align: center; padding: 56px 32px;
    background: #fff; color: #1f2a44; color-scheme: light;
    border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--wf-radius-card, 16px);
}
.wf-nba-leeg-ic {
    display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 18px;
    border-radius: 50%; font-size: 30px; background: rgba(15, 23, 42, .05); color: var(--brand-primary, #1e3a5f);
}
.wf-nba-leeg-kop { font-size: 24px; font-weight: 700; margin: 0 0 10px; color: #1f2a44; }
.wf-nba-leeg p { max-width: 460px; margin: 0 auto 26px; line-height: 1.7; color: #5b6475; }
.wf-nba-knop {
    display: inline-block; padding: 13px 28px; font-weight: 600; text-decoration: none;
    background: var(--brand-primary, #1e3a5f); color: #fff !important; border-radius: var(--wf-radius-button, 8px);
}
.wf-nba-terug { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 0 0 22px; }
.wf-nba-terug a { font-size: 15px; font-weight: 600; color: inherit; opacity: .85; text-decoration: none; }
.wf-nba-terug a:hover { opacity: 1; text-decoration: underline; }
.wf-nba-mail {
    background: #fff; color-scheme: light; overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--wf-radius-card, 16px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
.wf-nba-mail table { max-width: 100%; }
@media (max-width: 575.98px) {
    .wf-nba { padding: 44px 0 60px; }
    .wf-nba-kaart { padding: 22px 20px; }
    .wf-nba-titel { font-size: 18px; }
    .wf-nba-leeg { padding: 42px 22px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Logokader op de detailpagina's van Merken en Partners (Tom 16-09-2026)
   Het kader stond als laag blokje naast een lange tekst. Op een groot scherm
   is het nu even hoog als de tekstkolom, met het logo in het midden. Bij een
   heel lange tekst stopt het kader op 520px, zodat het geen lege zuil wordt;
   bij partners scrollt het dan mee (.biz-partner-sticky). Mobiel: ongewijzigd.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .wf-logo-rij { align-items: stretch !important; }
  .wf-logo-rij > .wf-logo-kol { display: flex; flex-direction: column; }
  .wf-logo-rij > .wf-logo-kol > .biz-partner-sticky { flex: 0 1 auto; height: 100%; max-height: 520px; display: flex; flex-direction: column; }
  .wf-logo-rij > .wf-logo-kol .wf-logo-plate {
    flex: 1 1 auto; height: 100%; max-height: 520px; min-height: 220px;
    display: flex !important; align-items: center; justify-content: center;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Overzichtsrasters die meegroeien met het aantal items (Tom 16-09-2026)
   Klasse .wf-autokol op een vast raster (row-cols-lg-3). Een item: in het
   midden, half breed. Twee items: twee halve kolommen. Vanaf drie: het gewone
   raster. Zelfde regel als SiteRenderModel.GridRowClass (nieuws, publicaties),
   maar in CSS, zodat de views hun vaste klassen houden.
   ────────────────────────────────────────────────────────────────────────── */
.row.wf-autokol:has(> :only-child) { justify-content: center; }
@media (min-width: 992px) {
  .row.wf-autokol > :only-child,
  .row.wf-autokol > :first-child:nth-last-child(2),
  .row.wf-autokol > :first-child:nth-last-child(2) + * { flex: 0 0 auto; width: 50%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Zijbalk op de detailpagina's van de kennisbank (Tom 16-09-2026)
   _shared/_KennisbankZijbalk.cshtml: andere artikelen (met fotootje) en een
   lijstje veelgestelde vragen. Kleuren en afronding volgen de template;
   -bty = beauty1 (koppen in de alt-font). Op een groot scherm scrollt de
   zijbalk mee zolang de tekst ernaast doorloopt.
   ────────────────────────────────────────────────────────────────────────── */
.wf-kbz { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 992px) {
  .wf-kbz-rij > aside { padding-left: 30px; }
  .wf-kbz { position: sticky; top: 110px; }
}
.wf-kbz-blok {
  padding: 24px 24px 20px;
  background: var(--very-light-gray, #f7f7f7);
  border: 1px solid var(--extra-medium-gray, #e4e4e4);
  border-radius: var(--wf-radius-card, 12px);
}
.wf-kbz-kop {
  position: relative; margin: 0 0 16px; padding-bottom: 12px;
  font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: 0;
  color: var(--dark-gray, #232323);
}
.wf-kbz-kop::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px;
  background: var(--base-color, var(--brand-primary));
}
.wf-kbz.-bty .wf-kbz-kop { font-family: var(--alt-font, inherit); font-weight: 500; font-size: 20px; }
.wf-kbz-artikelen, .wf-kbz-vragen { margin: 0; padding: 0; list-style: none; }

.wf-kbz-artikelen li + li { border-top: 1px solid var(--extra-medium-gray, #e4e4e4); }
.wf-kbz-artikelen a { display: flex; align-items: center; gap: 14px; padding: 12px 0; text-decoration: none; }
.wf-kbz-artikelen li:first-child a { padding-top: 0; }
.wf-kbz-artikelen li:last-child a { padding-bottom: 0; }
.wf-kbz-foto {
  flex: 0 0 72px; width: 72px; height: 56px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--wf-radius-card, 12px) * .6);
  background: color-mix(in srgb, var(--base-color, var(--brand-primary, #888)) 12%, #fff);
  color: var(--base-color, var(--brand-primary)); font-size: 22px;
}
.wf-kbz-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.wf-kbz-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wf-kbz-titel {
  font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--dark-gray, #232323);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s ease;
}
.wf-kbz-datum { font-size: 13px; line-height: 1.3; color: var(--medium-gray, #8a8a8a); }
.wf-kbz-artikelen a:hover .wf-kbz-titel,
.wf-kbz-artikelen a:focus-visible .wf-kbz-titel { color: var(--base-color, var(--brand-primary)); }
.wf-kbz-artikelen a:hover img { transform: scale(1.06); }

.wf-kbz-vragen li { position: relative; padding-left: 18px; }
.wf-kbz-vragen li + li { margin-top: 10px; }
.wf-kbz-vragen li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--base-color, var(--brand-primary));
}
.wf-kbz-vragen a { font-size: 15px; line-height: 1.45; color: var(--dark-gray, #232323); text-decoration: none; transition: color .2s ease; }
.wf-kbz-vragen a:hover, .wf-kbz-vragen a:focus-visible { color: var(--base-color, var(--brand-primary)); text-decoration: underline; text-underline-offset: 3px; }

.wf-kbz-alle {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--base-color, var(--brand-primary)); text-decoration: none;
}
.wf-kbz-alle i { transition: transform .25s ease; }
.wf-kbz-alle:hover i { transform: translateX(4px); }

[data-bs-theme="dark"] .wf-kbz-blok { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .wf-kbz-kop,
[data-bs-theme="dark"] .wf-kbz-titel,
[data-bs-theme="dark"] .wf-kbz-vragen a { color: #f1efec; }
[data-bs-theme="dark"] .wf-kbz-artikelen li + li { border-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .wf-kbz-foto { background: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) {
  .wf-kbz-foto img, .wf-kbz-alle i { transition: none; }
}

/*  Formuliercontrole (wf-form-validation.js, Tom 16-09-2026): een lege melding van ons neemt geen ruimte
    in. Bootstraps regel ":invalid ~ .invalid-feedback" toont anders ook het (lege) blok van een buurveld
    dat in dezelfde houder staat. */
.invalid-feedback[data-wf-fv]:empty { display: none !important; }

/*  Verzendknop in de bezig-stand (wf-form-validation.js): een kleine draaiende ring voor de tekst, in de
    tekstkleur van de knop. De knop blijft even breed en houdt zijn eigen kleur (niet het grijs van een
    uitgeschakelde knop). */
.wf-knop-bezig { cursor: progress !important; opacity: 1 !important; }
.wf-knop-bezig:disabled { pointer-events: none; }
.wf-knop-spinner {
  display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.15em;
  border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: wf-knop-draai .7s linear infinite;
}
@keyframes wf-knop-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wf-knop-spinner { animation-duration: 1.6s; } }