/*  BOVENBALK-VANGNET — Layout website > Overige instellingen > tabblad Bovenbalk.
    Staat er op een pagina geen foto in de bovenbalk (geen eigen foto, geen modulefoto), dan valt de balk
    terug op wat de klant hier koos: een sitebrede foto, of een achtergrond in een merkkleur met eventueel
    een patroon. Over het vangnet ligt een eigen waas (--wfvn-ov, standaard 40%) zodat titel en
    kruimelpad leesbaar blijven; een eigen foto van een pagina houdt de waas van de template.

    Opbouw (in de templates en in de kiezer op het dashboard):
        <section class="wf-kopvn" data-kopvn data-patroon="staal" style="--wfvn-k:...; --wfvn-ov:.4">
            <span class="wfvn-tex"></span>   patroon (alleen bij achtergrond)
            <span class="wfvn-ov"></span>    waas
            <div class="container">...</div>
    Klasse -foto = de sitebrede foto (--wfvn-foto); het patroon telt dan niet.

    De patronen zijn zelf gemaakt (CSS-verlopen en inline SVG, geen beeld van derden), dus zonder
    licentie. Ruis komt uit een SVG-filter (feTurbulence) en neemt via mix-blend-mode de merkkleur over.
    GEGENEREERD door tools/kop-vangnet/genereer.js (13-09-2026): wijzig dat script en draai het opnieuw. Wie een patroon toevoegt, zet de sleutel
    ook in SiteSettingsConfig.BannerPatterns; anders weigert het opslaan hem.

    [data-kopvn] staat in elke selector voor gewicht: de templates zetten zelf een achtergrondkleur op
    hun kopbalk (.bty-pagetitle), en het vangnet moet die winnen, ongeacht de laadvolgorde. */

/*  --wfvn-k (de gekozen kleur) mag op de balk zelf staan of op een ouder, zoals het tegelraster van de
    kiezer. Daarom wordt hij hier niet gedeclareerd maar alleen gelezen, met de steunkleur als terugval. */
.wf-kopvn[data-kopvn] {
    --wfvn-c: var(--wfvn-k, var(--brand-secondary, #4b5563));
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
/*  [data-patroon] erbij voor extra gewicht: business1-dark zet op zijn kopbalken een donkere
    achtergrond met [data-bs-theme="dark"] :is(...), en die laadt na dit bestand. */
.wf-kopvn[data-kopvn][data-patroon] { background-color: var(--wfvn-c); }
.wf-kopvn[data-kopvn] > .wfvn-tex, .wf-kopvn[data-kopvn] > .wfvn-ov { position: absolute; inset: 0; pointer-events: none; }
.wf-kopvn[data-kopvn] > .wfvn-tex { z-index: 0; }
.wf-kopvn[data-kopvn] > .wfvn-tex::after { content: ""; position: absolute; inset: 0; }
.wf-kopvn[data-kopvn] > .wfvn-ov { z-index: 1; background: linear-gradient(180deg, rgb(14 11 20 / calc(var(--wfvn-ov, .4) * .72)), rgb(14 11 20 / var(--wfvn-ov, .4))); }
.wf-kopvn[data-kopvn] > .container { position: relative; z-index: 2; }
.wf-kopvn[data-kopvn].-foto { background-image: var(--wfvn-foto); background-size: cover; background-position: center; }
.wf-kopvn[data-kopvn].-foto > .wfvn-tex { display: none; }
/*  De eigen waas van de template hoort bij een eigen foto; op het vangnet doet .wfvn-ov dat werk. */
.wf-kopvn[data-kopvn] > .opacity-extra-medium, .wf-kopvn[data-kopvn] > .bty-pagetitle-overlay,
.wf-kopvn[data-kopvn] > .biz-svc-hero-overlay, .wf-kopvn[data-kopvn] > .biz-prod-hero-overlay { display: none; }
.wf-kopvn[data-kopvn].-foto[data-patroon] { background-image: var(--wfvn-foto); }

/*  PATROONLAAG IN EEN VOORPAGINA-BLOK (Layout website > Voorpagina > Blok bewerken > Patroon).
    Dezelfde patronen, maar als losse laag over de kleur van het blok: die kleur verandert niet en er komt
    geen waas overheen. !important omdat de templates alle kinderen van een effect-blok naar
    position:relative; z-index:1 tillen (.wf-applied.wf-fx > *). Op een lichte kleur (-licht) worden de
    lijnen donker: omkeren en vermenigvuldigen, want overlay-mengen op wit blijft wit. Kleurverloop rekent
    zelf met de kleur van het blok en blijft zoals hij is. */
.wf-fx-patroonlaag.wf-kopvn[data-kopvn] { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; background-color: transparent !important; }
.wf-fx-patroonlaag.wf-kopvn[data-kopvn].-licht:not([data-patroon="kleurverloop"]) > .wfvn-tex { filter: invert(1); mix-blend-mode: multiply; opacity: .5; }
.wf-fx-patroonlaag.wf-kopvn[data-kopvn].-licht:not([data-patroon="kleurverloop"]) > .wfvn-tex::after { mix-blend-mode: multiply; }

/* staal */
.wf-kopvn[data-kopvn][data-patroon="staal"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 32%, #8d9399); }
.wf-kopvn[data-kopvn][data-patroon="staal"] > .wfvn-tex { background: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .22) 42%, transparent 58%), linear-gradient(180deg, rgb(255 255 255 / .12), rgb(0 0 0 / .22)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='1800' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(3600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(3600 600) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: 100% 100%, 100% 100%, 3600px 600px; mix-blend-mode: overlay; }

/* gietijzer */
.wf-kopvn[data-kopvn][data-patroon="gietijzer"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 38%, #1b1b1d); }
.wf-kopvn[data-kopvn][data-patroon="gietijzer"] > .wfvn-tex { background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgb(0 0 0 / .45) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(600 600) scale(-1 -1)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='500' height='500' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(1000 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 1000) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(1000 1000) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: 100% 100%, 600px 600px, 1000px 1000px; mix-blend-mode: overlay; opacity: .9; }

/* carbon */
.wf-kopvn[data-kopvn][data-patroon="carbon"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 22%, #1c1c1f); }
.wf-kopvn[data-kopvn][data-patroon="carbon"] > .wfvn-tex { background: linear-gradient(27deg, rgb(0 0 0 / .45) 5px, transparent 5px) 0 5px, linear-gradient(207deg, rgb(0 0 0 / .45) 5px, transparent 5px) 10px 0, linear-gradient(27deg, rgb(255 255 255 / .07) 5px, transparent 5px) 0 10px, linear-gradient(207deg, rgb(255 255 255 / .07) 5px, transparent 5px) 10px 5px, linear-gradient(90deg, rgb(0 0 0 / .18) 10px, transparent 10px), linear-gradient(rgb(0 0 0 / .28) 25%, rgb(0 0 0 / .16) 25%, rgb(0 0 0 / .16) 50%, transparent 50%, transparent 75%, rgb(255 255 255 / .05) 75%); background-size: 20px 20px; }
.wf-kopvn[data-kopvn][data-patroon="carbon"] > .wfvn-tex::after { background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .10) 50%, transparent 70%); }

/* beton */
.wf-kopvn[data-kopvn][data-patroon="beton"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 28%, #9b9893); }
.wf-kopvn[data-kopvn][data-patroon="beton"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='500' height='500' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(1000 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 1000) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(1000 1000) scale(-1 -1)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(600 600) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: 1000px 1000px, 600px 600px; mix-blend-mode: overlay; opacity: .95; }

/* linnen */
.wf-kopvn[data-kopvn][data-patroon="linnen"] > .wfvn-tex { background: repeating-linear-gradient(0deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(600 600) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: auto, auto, 600px 600px; mix-blend-mode: soft-light; }

/* traanplaat */
.wf-kopvn[data-kopvn][data-patroon="traanplaat"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 40%, #737980); }
.wf-kopvn[data-kopvn][data-patroon="traanplaat"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='3.6'%3E %3Cpath d='M5 13 L13 5 M23 5 L31 13 M5 23 L13 31 M23 31 L31 23' stroke='black' stroke-opacity='.45' transform='translate(.9 1.2)'/%3E %3Cpath d='M5 13 L13 5 M23 5 L31 13 M5 23 L13 31 M23 31 L31 23' stroke='white' stroke-opacity='.28'/%3E %3C/g%3E%3Cpath d='M5.4 12 L12 5.4 M24 5.4 L30.6 12 M5.4 24 L12 30.6 M24 30.6 L30.6 24' fill='none' stroke='white' stroke-opacity='.22' stroke-width='1' stroke-linecap='round' transform='translate(-.5 -.5)'/%3E%3C/svg%3E") 0 0 / 36px 36px; }
.wf-kopvn[data-kopvn][data-patroon="traanplaat"] > .wfvn-tex::after { background: linear-gradient(115deg, transparent 20%, rgb(255 255 255 / .20) 45%, transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='1800' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(3600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(3600 600) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: 100% 100%, 3600px 600px; mix-blend-mode: overlay; }

/* geperforeerd */
.wf-kopvn[data-kopvn][data-patroon="geperforeerd"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 30%, #5d646b); }
.wf-kopvn[data-kopvn][data-patroon="geperforeerd"] > .wfvn-tex { background: radial-gradient(circle, rgb(0 0 0 / .6) 0 2.3px, rgb(255 255 255 / .16) 2.8px 3.3px, transparent 3.7px) 0 0 / 14px 12px, radial-gradient(circle, rgb(0 0 0 / .6) 0 2.3px, rgb(255 255 255 / .16) 2.8px 3.3px, transparent 3.7px) 7px 6px / 14px 12px; }
.wf-kopvn[data-kopvn][data-patroon="geperforeerd"] > .wfvn-tex::after { background: linear-gradient(105deg, transparent 25%, rgb(255 255 255 / .14) 48%, transparent 66%), linear-gradient(180deg, rgb(255 255 255 / .06), rgb(0 0 0 / .2)); }

/* marmer */
.wf-kopvn[data-kopvn][data-patroon="marmer"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 26%, #1f1e22); }
.wf-kopvn[data-kopvn][data-patroon="marmer"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='2400'%3E%3Cdefs%3E%3Cfilter id='m7' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='turbulence' baseFrequency='.0045 .0028' numOctaves='4' seed='7' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -4 0 0 0 1'/%3E %3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='2.2' offset='0'/%3E%3C/feComponentTransfer%3E %3C/filter%3E%3Cfilter id='m13' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='turbulence' baseFrequency='.011 .007' numOctaves='3' seed='13' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -6 0 0 0 1'/%3E %3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='2.2' offset='0'/%3E%3C/feComponentTransfer%3E %3C/filter%3E%3Cg id='q'%3E%3Crect width='1200' height='1200' filter='url(%23m7)'/%3E%3Crect width='1200' height='1200' filter='url(%23m13)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(2400 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 2400) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(2400 2400) scale(-1 -1)'/%3E%3C/svg%3E") 0 0 / 2400px 2400px; opacity: .5; }
.wf-kopvn[data-kopvn][data-patroon="marmer"] > .wfvn-tex::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(600 600) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: 600px 600px; mix-blend-mode: overlay; opacity: .35; }

/* hout */
.wf-kopvn[data-kopvn][data-patroon="hout"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 34%, #6a4a2e); }
.wf-kopvn[data-kopvn][data-patroon="hout"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='840'%3E%3Cdefs%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.0018 .11' numOctaves='4' seed='3' stitchTiles='stitch'/%3E %3CfeColorMatrix type='saturate' values='0'/%3E %3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0 .9 .15 .8 .1 .95 .2 .85 0'/%3E%3CfeFuncG type='table' tableValues='0 .9 .15 .8 .1 .95 .2 .85 0'/%3E%3CfeFuncB type='table' tableValues='0 .9 .15 .8 .1 .95 .2 .85 0'/%3E%3C/feComponentTransfer%3E %3C/filter%3E%3Cg id='q'%3E%3Crect width='900' height='420' filter='url(%23h)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(1800 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 840) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(1800 840) scale(-1 -1)'/%3E%3C/svg%3E") 0 0 / 1800px 840px; mix-blend-mode: overlay; opacity: .55; }
.wf-kopvn[data-kopvn][data-patroon="hout"] > .wfvn-tex::after { background: radial-gradient(130% 100% at 50% 50%, transparent 45%, rgb(0 0 0 / .35) 100%); }

/* leer */
.wf-kopvn[data-kopvn][data-patroon="leer"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 42%, #2c2420); }
.wf-kopvn[data-kopvn][data-patroon="leer"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.075' numOctaves='3' seed='5' stitchTiles='stitch'/%3E %3CfeDiffuseLighting lighting-color='white' surfaceScale='2.2' diffuseConstant='1.1'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E %3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E") 0 0 / 320px 320px; mix-blend-mode: overlay; opacity: .55; }
.wf-kopvn[data-kopvn][data-patroon="leer"] > .wfvn-tex::after { background: radial-gradient(120% 95% at 50% 45%, rgb(255 255 255 / .06), transparent 50%, rgb(0 0 0 / .4) 100%); }

/* raster */
.wf-kopvn[data-kopvn][data-patroon="raster"] > .wfvn-tex { background: linear-gradient(rgb(255 255 255 / .16) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(90deg, rgb(255 255 255 / .16) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px) 0 0 / 16px 16px; }

/* krijtstreep */
.wf-kopvn[data-kopvn][data-patroon="krijtstreep"] > .wfvn-tex { background: repeating-linear-gradient(90deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 26px); }
.wf-kopvn[data-kopvn][data-patroon="krijtstreep"] > .wfvn-tex::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(600 600) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: 600px 600px; mix-blend-mode: overlay; opacity: .35; }

/* stippen */
.wf-kopvn[data-kopvn][data-patroon="stippen"] > .wfvn-tex { background: radial-gradient(rgb(255 255 255 / .22) 1.3px, transparent 1.8px) 0 0 / 18px 18px; }

/* honingraat */
.wf-kopvn[data-kopvn][data-patroon="honingraat"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='120' viewBox='0 0 69.28 120'%3E%3Cpath d='M0 20 L34.64 0 L69.28 20 V60 L34.64 80 L0 60 Z M34.64 80 V120' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 69.28px 120px; }

/* golven */
.wf-kopvn[data-kopvn][data-patroon="golven"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28' viewBox='0 0 240 28'%3E%3Cpath d='M0 14 C 30 2, 90 2, 120 14 S 210 26, 240 14' fill='none' stroke='white' stroke-opacity='.15' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 240px 28px; }

/* parket */
.wf-kopvn[data-kopvn][data-patroon="parket"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E %3Cpath d='M0 12 L24 0 M0 24 L24 12 M0 36 L24 24 M0 48 L24 36 M24 0 L48 12 M24 12 L48 24 M24 24 L48 36 M24 36 L48 48 M24 0 V48' fill='none' stroke='black' stroke-opacity='.16' stroke-width='1' transform='translate(0 1)'/%3E %3Cpath d='M0 12 L24 0 M0 24 L24 12 M0 36 L24 24 M0 48 L24 36 M24 0 L48 12 M24 12 L48 24 M24 24 L48 36 M24 36 L48 48 M24 0 V48' fill='none' stroke='white' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 48px 48px; }
.wf-kopvn[data-kopvn][data-patroon="parket"] > .wfvn-tex::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(600 600) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: 600px 600px; mix-blend-mode: soft-light; opacity: .6; }

/* kubussen */
.wf-kopvn[data-kopvn][data-patroon="kubussen"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E %3Cpath d='M17.32 0 L34.64 10 L17.32 20 L0 10 Z M0 30 L17.32 40 L0 50 L-17.32 40 Z M34.64 30 L51.96 40 L34.64 50 L17.32 40 Z M0 -30 L17.32 -20 L0 -10 L-17.32 -20 Z M34.64 -30 L51.96 -20 L34.64 -10 L17.32 -20 Z' fill='white' fill-opacity='.10'/%3E%3Cpath d='M0 10 L17.32 20 L17.32 40 L0 30 Z M-17.32 40 L0 50 L0 70 L-17.32 60 Z M17.32 40 L34.64 50 L34.64 70 L17.32 60 Z M-17.32 -20 L0 -10 L0 10 L-17.32 0 Z M17.32 -20 L34.64 -10 L34.64 10 L17.32 0 Z' fill='black' fill-opacity='.13'/%3E%3C/svg%3E") 0 0 / 34.64px 60px; }

/* ruiten */
.wf-kopvn[data-kopvn][data-patroon="ruiten"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='72' viewBox='0 0 48 72'%3E %3Cpath d='M24 0 L48 36 L24 72 L0 36 Z' fill='white' fill-opacity='.06'/%3E %3Cpath d='M0 0 L48 72 M48 0 L0 72' fill='none' stroke='white' stroke-opacity='.18' stroke-width='1' stroke-dasharray='3 3'/%3E%3C/svg%3E") 0 0 / 48px 72px; }

/* topografie */
.wf-kopvn[data-kopvn][data-patroon="topografie"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='1600'%3E%3Cdefs%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='2' seed='11' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -1.1'/%3E %3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1'/%3E%3C/feComponentTransfer%3E %3CfeConvolveMatrix order='3' kernelMatrix='-1 -1 -1 -1 8 -1 -1 -1 -1' preserveAlpha='false'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E %3C/filter%3E%3Cg id='q'%3E%3Crect width='1200' height='800' filter='url(%23t)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(2400 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 1600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(2400 1600) scale(-1 -1)'/%3E%3C/svg%3E") 0 0 / 2400px 1600px; opacity: .2; }

/* kleurverloop */
.wf-kopvn[data-kopvn][data-patroon="kleurverloop"]:not(.-foto) { background-color: color-mix(in srgb, var(--wfvn-c) 88%, black); }
.wf-kopvn[data-kopvn][data-patroon="kleurverloop"] > .wfvn-tex { background: radial-gradient(60% 90% at 12% 15%, color-mix(in srgb, var(--wfvn-c) 55%, white) 0%, transparent 62%), radial-gradient(55% 80% at 88% 25%, color-mix(in srgb, var(--wfvn-c) 60%, black) 0%, transparent 68%), radial-gradient(70% 90% at 62% 115%, color-mix(in srgb, var(--wfvn-c) 70%, #f2a65a) 0%, transparent 62%); }
.wf-kopvn[data-kopvn][data-patroon="kleurverloop"] > .wfvn-tex::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cg id='q'%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23q'/%3E%3Cuse href='%23q' transform='translate(600 0) scale(-1 1)'/%3E%3Cuse href='%23q' transform='translate(0 600) scale(1 -1)'/%3E%3Cuse href='%23q' transform='translate(600 600) scale(-1 -1)'/%3E%3C/svg%3E"); background-size: 600px 600px; mix-blend-mode: overlay; opacity: .22; }

/*  Sterkte van een patroon in een voorpagina-blok (schuif "Zachter / Harder" in de blok-pop-up, Tom 13-09-2026).
    --wfvn-sterkte komt uit HomepageBlockStyle.PatternPct: 50% = het patroon zoals ontworpen (1), 0% = uit (de
    laag wordt dan niet eens gerenderd), 100% = twee keer zo sterk. Onder 1 wordt de laag doorzichtiger, boven 1
    krijgt hij meer contrast; het blijft hetzelfde patroon. De balk-variant (vangnet bovenaan de pagina) heeft
    deze klasse niet en blijft zoals hij is. */
.wf-fx-patroonlaag.wf-kopvn[data-kopvn] {
    opacity: min(1, var(--wfvn-sterkte, 1));
    filter: contrast(max(1, var(--wfvn-sterkte, 1)));
}