/*  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"]):not([data-patroon="eigen"]) > .wfvn-tex { filter: invert(1); mix-blend-mode: multiply; opacity: .5; }
.wf-fx-patroonlaag.wf-kopvn[data-kopvn].-licht:not([data-patroon="kleurverloop"]):not([data-patroon="eigen"]) > .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; }

/* blad */
.wf-kopvn[data-kopvn][data-patroon="blad"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(38 50) rotate(-28)' d='M0 0C9.6 -7.5 9.6 -21 0 -30C-9.6 -21 -9.6 -7.5 0 0Z M0 3L0 -25.5M0 -10.5L5.8 -15.6M0 -10.5L-5.8 -15.6M0 -18L4.3 -22.2M0 -18L-4.3 -22.2'/%3E%3Cpath transform='translate(112 40) rotate(38)' d='M0 0C7 -5.5 7 -15.4 0 -22C-7 -15.4 -7 -5.5 0 0Z M0 3L0 -18.7M0 -7.7L4.2 -11.4M0 -7.7L-4.2 -11.4M0 -13.2L3.2 -16.3M0 -13.2L-3.2 -16.3'/%3E%3Cpath transform='translate(100 122) rotate(152)' d='M0 0C9 -7 9 -19.6 0 -28C-9 -19.6 -9 -7 0 0Z M0 3L0 -23.8M0 -9.8L5.4 -14.6M0 -9.8L-5.4 -14.6M0 -16.8L4 -20.7M0 -16.8L-4 -20.7'/%3E%3Cpath transform='translate(32 128) rotate(-130)' d='M0 0C6.4 -5 6.4 -14 0 -20C-6.4 -14 -6.4 -5 0 0Z M0 3L0 -17M0 -7L3.8 -10.4M0 -7L-3.8 -10.4M0 -12L2.9 -14.8M0 -12L-2.9 -14.8'/%3E%3Cpath transform='translate(74 88) rotate(75)' d='M0 0C4.5 -3.5 4.5 -9.8 0 -14C-4.5 -9.8 -4.5 -3.5 0 0Z M0 3L0 -11.9M0 -4.9L2.7 -7.3M0 -4.9L-2.7 -7.3M0 -8.4L2 -10.4M0 -8.4L-2 -10.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 150px 150px; }

/* ijskristallen */
.wf-kopvn[data-kopvn][data-patroon="ijskristallen"] > .wfvn-tex { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M36 40L36 27M36 33.5L38.8 30.7M36 33.5L33.2 30.7M36 29.9L37.8 28M36 29.9L34.2 28M36 40L24.7 33.5M30.4 36.8L29.4 33M30.4 36.8L26.6 37.8M27.2 34.9L26.5 32.4M27.2 34.9L24.7 35.6M36 40L24.7 46.5M30.4 43.2L26.6 42.2M30.4 43.2L29.4 47M27.2 45.1L24.7 44.4M27.2 45.1L26.5 47.6M36 40L36 53M36 46.5L33.2 49.3M36 46.5L38.8 49.3M36 50.1L34.2 52M36 50.1L37.8 52M36 40L47.3 46.5M41.6 43.2L42.6 47M41.6 43.2L45.4 42.2M44.8 45.1L45.5 47.6M44.8 45.1L47.3 44.4M36 40L47.3 33.5M41.6 36.8L45.4 37.8M41.6 36.8L42.6 33M44.8 34.9L47.3 35.6M44.8 34.9L45.5 32.4M104 26L104 19.5M104 22.8L105.4 21.4M104 22.8L102.6 21.4M104 20.9L104.9 20M104 20.9L103.1 20M104 26L98.4 22.8M101.2 24.4L100.7 22.5M101.2 24.4L99.3 24.9M99.6 23.5L99.3 22.2M99.6 23.5L98.4 23.8M104 26L98.4 29.2M101.2 27.6L99.3 27.1M101.2 27.6L100.7 29.5M99.6 28.5L98.4 28.2M99.6 28.5L99.3 29.8M104 26L104 32.5M104 29.2L102.6 30.6M104 29.2L105.4 30.6M104 31.1L103.1 32M104 31.1L104.9 32M104 26L109.6 29.3M106.8 27.6L107.3 29.5M106.8 27.6L108.7 27.1M108.4 28.5L108.7 29.8M108.4 28.5L109.6 28.2M104 26L109.6 22.8M106.8 24.4L108.7 24.9M106.8 24.4L107.3 22.5M108.4 23.5L109.6 23.8M108.4 23.5L108.7 22.2M108 100L108 90.5M108 95.2L110 93.2M108 95.2L106 93.2M108 92.6L109.3 91.2M108 92.6L106.7 91.2M108 100L99.8 95.2M103.9 97.6L103.1 94.9M103.9 97.6L101.1 98.4M101.6 96.3L101.1 94.5M101.6 96.3L99.7 96.8M108 100L99.8 104.8M103.9 102.4L101.1 101.6M103.9 102.4L103.1 105.1M101.6 103.7L99.7 103.2M101.6 103.7L101.1 105.5M108 100L108 109.5M108 104.8L106 106.8M108 104.8L110 106.8M108 107.4L106.7 108.8M108 107.4L109.3 108.8M108 100L116.2 104.8M112.1 102.4L112.9 105.1M112.1 102.4L114.9 101.6M114.4 103.7L114.9 105.5M114.4 103.7L116.3 103.2M108 100L116.2 95.2M112.1 97.6L114.9 98.4M112.1 97.6L112.9 94.9M114.4 96.3L116.3 96.8M114.4 96.3L114.9 94.5M34 112L34 106.5M34 109.2L35.2 108.1M34 109.2L32.8 108.1M34 107.7L34.8 106.9M34 107.7L33.2 106.9M34 112L29.2 109.2M31.6 110.6L31.2 109M31.6 110.6L30 111.1M30.3 109.9L30 108.8M30.3 109.9L29.2 110.1M34 112L29.2 114.8M31.6 113.4L30 112.9M31.6 113.4L31.2 115M30.3 114.1L29.2 113.9M30.3 114.1L30 115.2M34 112L34 117.5M34 114.8L32.8 115.9M34 114.8L35.2 115.9M34 116.3L33.2 117.1M34 116.3L34.8 117.1M34 112L38.8 114.8M36.4 113.4L36.8 115M36.4 113.4L38 112.9M37.7 114.1L38 115.2M37.7 114.1L38.8 113.9M34 112L38.8 109.2M36.4 110.6L38 111.1M36.4 110.6L36.8 109M37.7 109.9L38.8 110.1M37.7 109.9L38 108.8M72 72L72 68.5M72 70.2L72.7 69.5M72 70.2L71.3 69.5M72 69.3L72.5 68.8M72 69.3L71.5 68.8M72 72L69 70.2M70.5 71.1L70.2 70.1M70.5 71.1L69.5 71.4M69.6 70.6L69.5 70M69.6 70.6L69 70.8M72 72L69 73.8M70.5 72.9L69.5 72.6M70.5 72.9L70.2 73.9M69.6 73.4L69 73.2M69.6 73.4L69.5 74M72 72L72 75.5M72 73.8L71.3 74.5M72 73.8L72.7 74.5M72 74.7L71.5 75.2M72 74.7L72.5 75.2M72 72L75 73.8M73.5 72.9L73.8 73.9M73.5 72.9L74.5 72.6M74.4 73.4L74.5 74M74.4 73.4L75 73.2M72 72L75 70.2M73.5 71.1L74.5 71.4M73.5 71.1L73.8 70.1M74.4 70.6L75 70.8M74.4 70.6L74.5 70'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 140px 140px; }

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

/*  EIGEN PATROON VAN DE KLANT (Huisstijl → Patronen, Tom 01-10-2026). data-patroon="eigen", het beeld als --wfvn-img
    (HomepageBlockStyle.PatternLayerHtml voor een blok, _SiteLayout voor de bovenbalk). Een groot beeld vult het vlak,
    -tegel herhaalt een smal beeld. -kleur kleurt een doorzichtig beeld in via een mask in --wfvn-kleur (huisstijl op
    een lichte, wit op een donkere achtergrond). Nooit omkeren zoals de standaardpatronen op licht: het is een echt beeld.
    Staat in tools/kop-vangnet/genereer.js; met de hand in kop-vangnet.css bijgezet. */
.wf-kopvn[data-kopvn][data-patroon="eigen"] > .wfvn-tex { background: var(--wfvn-img) center / cover no-repeat; }
.wf-kopvn[data-kopvn][data-patroon="eigen"].-tegel > .wfvn-tex { background-size: auto; background-repeat: repeat; background-position: 0 0; }
.wf-kopvn[data-kopvn][data-patroon="eigen"].-kleur > .wfvn-tex {
    background: var(--wfvn-kleur, #fff);
    -webkit-mask: var(--wfvn-img) center / cover no-repeat; mask: var(--wfvn-img) center / cover no-repeat;
}
.wf-kopvn[data-kopvn][data-patroon="eigen"].-kleur.-tegel > .wfvn-tex {
    -webkit-mask-size: auto; mask-size: auto; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: 0 0; mask-position: 0 0;
}
/*  Op een telefoon is een blok hoog en smal: cover blies een groot patroon daar enorm op. Daar herhalen we het op
    900px breed, dan houdt het zijn schaal. Alleen voor de patroonlaag van een blok; de bovenbalk is laag en blijft cover. */
@media (max-width: 767.98px) {
    .wf-fx-patroonlaag.wf-kopvn[data-kopvn][data-patroon="eigen"]:not(.-tegel) > .wfvn-tex { background-size: 900px auto; background-repeat: repeat; background-position: 50% 0; }
    .wf-fx-patroonlaag.wf-kopvn[data-kopvn][data-patroon="eigen"].-kleur:not(.-tegel) > .wfvn-tex { -webkit-mask-size: 900px auto; mask-size: 900px auto; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: 50% 0; mask-position: 50% 0; }
}