/*
Theme Name: AquaVuro
Theme URI: https://aquavuro.nl
Author: MDV Online
Author URI: https://mdv-online.nl
Description: Zelfstandig blockthema voor AquaVuro. Gedeeld skelet met Wellness Works (zustersite, apart WordPress-account); dit is de AquaVuro-kleurvariant. Geen paginabouwer, content wordt bewerkt in de gewone blokeditor.
Version: 1.68
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: aquavuro
*/

/* =========================================================
   AquaVuro - basisstijl
   Kleuren: navy #0B1320 / #1A2438 / #2C3A52, goud #CBA662, off-white #F5F5F5
   Koppen: Playfair Display. Lopende tekst: Montserrat.
   Alle projectklassen zijn geprefixt met "av-" om botsing met
   plugin-CSS te voorkomen (zie Kennisbank: kale klasse "row").
   ========================================================= */

:root{
  --av-navy-deep:#0B1320;
  --av-navy:#1A2438;
  --av-slate:#2C3A52;
  --av-gold:#CBA662;
  --av-gold-light:#DEBC7E;
  --av-paper:#F5F5F5;
  --av-white:#fff;
}

/* ---------------- Merkfonts, lokaal gehost (25-09-2026, versie 1.30) ----------------
   Tot 1.29 laadde functions.php deze twee families via fonts.googleapis.com. Die
   CSS trok vervolgens de bestanden van fonts.gstatic.com, waardoor het IP-adres van
   elke bezoeker naar Google ging voordat er enige toestemming was gevraagd. Dat was
   het enige structurele derdepartijverzoek op de site (compliance-inventaris
   25-09-2026, blokkerend punt 5). De bestanden staan nu in assets/fonts/.

   Welke varianten, en waarom alleen deze: gemeten in de browser over alle 20
   pagina's en 11 berichten, op 1440px en op 390px, met document.fonts. De browser
   laadde uitsluitend Montserrat 400, 500 en 600 (alle 31 pagina's), Playfair
   Display 500 (alle 31) en Playfair Display 500 italic (alleen de homepage, id 14,
   door het <em> in de hero-H1). Montserrat 300 en Playfair Display 600 stonden wel
   in de Google-aanvraag maar werden op geen enkele pagina geladen: Montserrat 300
   komt in geen enkele regel voor, en Playfair 600 staat alleen op .av-brand, dat
   sinds 04-09-2026 twee afbeeldingen bevat in plaats van tekst. Die twee zijn dus
   niet meegenomen.

   De drie Montserrat-gewichten wijzen naar hetzelfde bestand, precies zoals Google
   het zelf uitlevert: het is een variabel font en de wght-as wordt door de losse
   font-weight-waarde vastgezet. Bewust losse waarden en geen bereik (400 600), dan
   blijft de weergave gelijk aan die van vandaag, inclusief de synthetische vetting
   die een <b> of <strong> (700) in lopende tekst nu al krijgt.

   latin-ext staat erbij met zijn eigen unicode-range en wordt dus alleen opgehaald
   zodra er een teken op de pagina staat dat erin valt. Gemeten op de huidige
   inhoud is dat nergens het geval, maar zonder die regel zou een later toegevoegd
   teken stil terugvallen op een systeemfont.

   Het pad is absoluut (/wp-content/themes/aquavuro/assets/fonts/) en niet relatief,
   want deze stylesheet staat als terugvalkopie ook in de themawortel als style.css;
   een relatief pad zou vanuit die kopie naar de verkeerde map wijzen.
   font-display:swap staat op elke regel, zodat tekst nooit onzichtbaar is tijdens
   het laden. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-montserrat-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-montserrat-ext-1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-montserrat-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-montserrat-ext-1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-montserrat-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-montserrat-ext-1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-playfairdisplay-500-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-playfairdisplay-500-ext-1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-playfairdisplay-500i-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/wp-content/themes/aquavuro/assets/fonts/av-playfairdisplay-500i-ext-1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--av-paper);color:var(--av-navy-deep);
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;
  font-weight:400;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:500;line-height:1.12;margin:0;letter-spacing:-0.005em}
p{margin:0 0 1.1em}
ul{padding-left:0}
:focus-visible{outline:2px solid var(--av-gold);outline-offset:4px}

/* Skip-link voor toetsenbordgebruikers */
.av-skip{position:absolute;left:-999px;top:auto;background:var(--av-gold);
  color:var(--av-navy-deep);padding:14px 20px;z-index:9999;font-weight:600;
  font-size:14px}
.av-skip:focus{left:16px;top:16px}

/* CSS10 (1.28): de max-width van 1280px is eraf. Gemeten 22-09-2026 op 1920px:
   header-inhoud 1192px met 357px lege strook links en rechts, terwijl de
   achtergrondbanden wel tot de schermrand liepen. Dat is een regressie tegen de
   staande eis van Mitch (16-09-2026): "HERO altijd sitebreed! Header ook altijd
   sitebreed!". De zijmarge komt nu uit een gutter die met het scherm meegroeit;
   lopende tekst wordt op KOLOMniveau begrensd (zie de 70ch-regels onderaan),
   niet door de sectie in te kaderen. */
.av-wrap{width:100%;margin:0 auto;padding-inline:clamp(20px,4.5vw,72px)}

/* De header is position:sticky, dus een ankerlink landt met de sectiekop
   achter de balk. Sitebreed opgevangen in plaats van per pagina. */
[id]{scroll-margin-top:96px}
@media (min-width:1280px){[id]{scroll-margin-top:210px}} /* 1.53: was 1024px, de rij staat pas vanaf 1280px */

/* labels: merkfont, gewone schrijfwijze, geen brede letterspatiering.
   1.37: niet meer boven een H1 gebruiken; daar staat een nav.av-kruimel (zie VERSIE 1.37). */
.av-lbl{font-size:13px;font-weight:500;color:var(--av-gold);margin:0 0 14px;display:flex;
  align-items:center;gap:10px}
.av-lbl::before{content:"";width:26px;height:12px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cg fill='none' stroke='%23CBA662' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 7c5.5-4.5 11 4.5 16.5 0S30.5 2.5 41 7'/%3E%3Cpath d='M3 15c5.5-4.5 11 4.5 16.5 0S30.5 10.5 41 15'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}

.av-btn{display:inline-block;padding:15px 30px;font-size:13.5px;font-weight:600;
  letter-spacing:.02em;transition:.28s cubic-bezier(.2,.7,.3,1);cursor:pointer;
  border:1px solid transparent;font-family:'Montserrat',Arial,sans-serif}
.av-btn-p{background:var(--av-gold);color:var(--av-navy-deep)}
.av-btn-p:hover{background:var(--av-gold-light);transform:translateY(-2px)}
.av-btn-o{border-color:var(--av-gold);color:var(--av-navy-deep);background:rgba(203,166,98,.12)}
.av-btn-o:hover{background:var(--av-gold);color:var(--av-navy-deep)}
.av-btn-l{border-color:rgba(255,255,255,.35);color:#fff}
.av-btn-l:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.av-btn-d{border-color:rgba(11,19,32,.25);color:var(--av-navy-deep)}
.av-btn-d:hover{border-color:var(--av-gold);color:var(--av-gold)}

/* placeholder-beeld: gebruikt zolang er geen vrijgegeven fotografie is */
.av-ph{position:relative;background:linear-gradient(135deg,var(--av-navy-deep) 0%,var(--av-navy) 55%,var(--av-slate) 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.av-ph::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(120deg,rgba(203,166,98,.10) 0 2px,transparent 2px 26px)}
/* 04-09-2026: tekstkleur van .55 naar .72. Gemeten op de lichtste stop van het
   navy-verloop (#2C3A52) gaf .55 nog 4,40:1 bij 12,5px, en 4,18:1 onder de gouden
   streepoverlay van .av-ph::before; dat is onder de 4,5:1-norm. Met .72 is de
   slechtste plek 6,31:1 (5,92:1 met streep) en de donkerste stop 9,13:1. Alleen de
   dekking van de tekst is veranderd, niet het verloop en niet de tekstgrootte, zodat
   de plaatsvervanger niet zwaarder gaat wegen dan de echte foto's ernaast. */
.av-ph span{position:relative;z-index:1;color:rgba(245,245,245,.72);font-size:12.5px;
  font-weight:600;letter-spacing:.03em;text-align:center;padding:0 20px}

/* ---------------- header ---------------- */
.av-mtog,.av-stog{position:absolute;opacity:0;pointer-events:none}
.av-head{position:sticky;top:0;z-index:80;background:var(--av-navy-deep)}
.av-head::after{content:"";display:block;height:1px;
  background:linear-gradient(90deg,rgba(203,166,98,0) 0%,rgba(203,166,98,.5) 50%,rgba(203,166,98,0) 100%)}
.av-head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;padding:14px 0}
.av-brand{font-family:'Playfair Display',Georgia,serif;font-size:26px;font-weight:600;
  color:var(--av-paper);letter-spacing:.01em}
.av-brand em{font-style:italic;color:var(--av-gold)}
/* Logo in de header (04-09-2026): het merk was opgemaakte tekst, nu het echte
   logo als horizontale lockup, beeldmerk plus woordmerk naast elkaar. Beide
   bestanden staan in de themamap (assets/av-logo-*-<versie>.webp) met een
   versienummer in het pad, om dezelfde reden als bij de stylesheet: de
   statische cache van deze host negeert de querystring. De bron is klein
   (uitsnede uit een WhatsApp-afbeelding), dus hier alleen verkleinen. */
.av-brand{display:flex;align-items:center;gap:10px;line-height:0;flex:none}
.av-logo-mark{height:36px;width:auto}
.av-logo-word{height:21px;width:auto}
.av-burger{display:flex;align-items:center;gap:10px;background:var(--av-gold);color:var(--av-navy-deep);
  font-size:13.5px;font-weight:600;cursor:pointer;padding:13px 18px;border:0;
  transition:.25s}
.av-burger:hover{background:var(--av-gold-light)}
.av-bars{display:block;width:18px;height:2px;background:var(--av-navy-deep);position:relative}
.av-bars::before,.av-bars::after{content:"";position:absolute;left:0;
  width:18px;height:2px;background:var(--av-navy-deep)}
.av-bars::before{top:-6px}.av-bars::after{top:6px}
.av-nav{display:none}
.av-nav ul{list-style:none;margin:0;padding:0}
.av-nav > ul > li > a,.av-nav > ul > li > .av-slab{display:block;padding:15px 2px;color:var(--av-paper);
  font-size:14.5px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer}
.av-nav > ul > li > .av-slab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.av-slab::after{content:"";display:block;width:7px;height:7px;flex:none;
  border-right:1.6px solid var(--av-gold);border-bottom:1.6px solid var(--av-gold);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.av-stog:checked + .av-slab::after{transform:translateY(1px) rotate(-135deg)}
.av-sub{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.av-stog:checked ~ .av-sub{max-height:640px}
.av-sub a{display:block;padding:12px 2px 12px 20px;
  color:rgba(245,245,245,.66);font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.05);transition:color .22s}
.av-sub a:hover{color:var(--av-gold)}
/* Merken in het hoofdmenu (04-09-2026): op mobiel blijft het label plus de
   .av-stog-checkbox de uitklap openen, precies zoals daarvoor. Op desktop is
   "Merken" zelf een echte link naar /merken/ (.av-slink) en opent de uitklap op
   hover of focus; het label is daar verborgen. Zo is de Merken-hub bereikbaar
   zonder JavaScript en zonder de mobiele mechaniek te veranderen. Mobiel loopt
   dat via het extra .av-sub-hub-item onderin de uitklap. */
.av-nav > ul > li > .av-slink{display:none}
.av-scar{display:inline-block;width:7px;height:7px;flex:none;margin-left:8px;
  border-right:1.6px solid var(--av-gold);border-bottom:1.6px solid var(--av-gold);
  transform:translateY(-2px) rotate(45deg)}
.av-headcta{display:none}
.av-headcta .av-btn{display:block;text-align:center}
.av-mtog:checked ~ .av-head-in .av-nav{display:block;width:100%;order:3;
  border-top:1px solid rgba(203,166,98,.22);margin-top:2px;padding-bottom:10px}
.av-mtog:checked ~ .av-head-in .av-headcta{display:block;width:100%;order:4;
  padding:14px 0 8px}

/* 1.56: de regels voor .av-nav2 (secundaire navigatiebalk) zijn weg; die staat sinds 1.53 niet meer in header.php */

/* ---------------- hero ---------------- */
.av-hero{position:relative;background:var(--av-navy-deep);color:var(--av-paper);overflow:hidden}
.av-hero-media{position:relative;height:340px}
.av-hero-media.av-ph{height:340px}
.av-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,19,32,.20) 0%,rgba(11,19,32,.44) 45%,
    rgba(11,19,32,.84) 70%,#0B1320 99%)}
/* 1.23: overlay lichter zodat de foto zichtbaar blijft (Mitch, 14-09-2026); de tekst
   begint op 72 procent van de beeldhoogte, daar staat de overlay op minimaal .85 */
/* Placeholder-bijschrift in de hero: vast in de linkerbovenhoek in plaats van
   gecentreerd, anders valt het middenin de H1/hero-tekst (bug gemeld
   24-08-2026 op de live sites). De hero-tekst zelf staat links-onder (mobiel)
   of links-midden (desktop), dus de rechterbovenhoek blijft altijd vrij. */
.av-hero-media.av-ph{align-items:flex-start;justify-content:flex-end}
.av-hero-media.av-ph span{max-width:230px;font-size:11px;line-height:1.5;
  text-align:right;padding:16px 18px 0 0}
.av-hero-body{position:relative;z-index:2;padding:0 0 44px;margin-top:-96px}
.av-hero h1{font-size:38px;margin:0 0 20px;max-width:15ch}
.av-hero h1 em{font-style:italic;color:var(--av-gold)}
.av-hero-lead{font-size:16px;color:rgba(245,245,245,.76);max-width:50ch;margin:0 0 30px}
.av-hero-acts{display:flex;flex-wrap:wrap;gap:12px}

/* feitenbalk onder de hero */
.av-facts{border-top:1px solid rgba(203,166,98,.22);background:var(--av-navy);color:var(--av-paper)}
/* background-clip:content-box (versie 1.18, 04-09-2026): de gouden tint hoort
   alleen door de 1px voegen TUSSEN de cellen te schijnen. Zonder deze regel
   schilderde de tint ook de horizontale binnenmarge van .av-wrap (22px mobiel,
   34px tablet, 44px desktop), waar geen cel overheen ligt, en stond er over de
   volle bandhoogte een gouden strook aan beide buitenkanten. Viel niet op
   zolang de balk laag was, wel sinds .av-facts een vaste hoogte kreeg.
   Eenkoloms op mobiel (was 1fr 1fr): een 2x2-raster in een vaste hoogte gaf
   per cel 35 tot 50 procent lege ruimte terwijl de tekst in de smalle kolom
   naar vijf tot acht regels van twee a drie woorden wrapte. */
/* CSS10 (1.28): max-width:1280px eraf. De USP-balk hoort bij de hero (vaste
   standaard: "USP-balk hoort direct onder elke paginahero") en de hero is
   sitebreed; een navy band over de volle breedte met daarin een kolom van 1192px
   is precies het beeld waar punt X2 over gaat. De cellen worden breder, dus de
   tekst wrapt naar MINDER regels en past ruimer binnen de vaste --av-uspb. */
.av-facts .av-wrap{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(203,166,98,.22);
  background-clip:content-box}
/* min-width:0 en het breken van een te lang woord: zonder deze twee regels duwt
   een lang woord in de <b> zijn 1fr-kolom breder dan de container en ontstaat er
   horizontale overflow op smalle schermen (gemeten 04-09-2026 op 360px). */
.av-fact{background:var(--av-navy);padding:22px 22px;min-width:0}
.av-fact b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:26px;
  font-weight:500;color:var(--av-gold);line-height:1;margin:0 0 8px;overflow-wrap:break-word}
.av-fact span{font-size:12.5px;color:rgba(245,245,245,.6);line-height:1.5;display:block;
  overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}

/* ---------------- secties ---------------- */
.av-sec{padding:64px 0}
.av-sec-dark{background:var(--av-navy-deep);color:var(--av-paper)}
.av-sec-navy{background:var(--av-navy);color:var(--av-paper)}
.av-sec-slate{background:var(--av-slate);color:var(--av-paper)}
.av-sec-paper{background:var(--av-paper)}
.av-sec-white{background:#fff}
.av-shead{max-width:60ch;margin:0 0 40px}
.av-shead h2{font-size:30px;margin:0 0 16px}
.av-split h2{font-size:30px} /* 1.63: H2 in een split dezelfde maat als .av-shead h2 */
.av-shead p{color:rgba(11,19,32,.62);margin:0;font-size:15.5px}
.av-sec-dark .av-shead p,.av-sec-navy .av-shead p,.av-sec-slate .av-shead p{color:rgba(245,245,245,.66)}

/* ---------------- assortiment-index ---------------- */
.av-index{position:relative}
.av-row{display:grid;grid-template-columns:38px 1fr 78px;gap:6px 14px;
  align-items:center;padding:20px 0;border-top:1px solid rgba(11,19,32,.14);
  transition:background .28s,padding .28s}
.av-row:last-child{border-bottom:1px solid rgba(11,19,32,.14)}
.av-rico{width:26px;height:26px;grid-column:1;grid-row:1;object-fit:contain;
  border-radius:50%;background:rgba(203,166,98,.16);
  display:flex;align-items:center;justify-content:center}
/* Icoon in de ronde plek van de assortiment-index (04-09-2026, versie 1.17).
   Hergebruikt de bestaande .av-ic-iconen uit het .av-ich-systeem, dus dezelfde
   SVG-inhoud, dezelfde stroke en dezelfde goudkleur. Alleen de maat wijkt af:
   .av-rico is een kleine ronde plek van 26px (34px vanaf 1024px), geen
   icoon-naast-kop-rij, dus de 26px van .av-ic zou de cirkel volledig vullen.
   Geen nieuwe iconenset en geen tweede stijl. */
.av-rico .av-ic{width:16px;height:16px}
.av-rtitle{grid-column:2;grid-row:1}
.av-rtitle h3{font-size:22px;margin:0;transition:color .28s}
.av-row:hover .av-rtitle h3{color:var(--av-gold)}
/* 1.26 (14-09-2026): var(--av-gold) #CBA662 haalde op paper 2,10:1 bij 12px. #7d6229 is de
   donkere variant die het thema al voert (.av-kmerk, .av-kbadge, .av-art .av-lees): 5,28:1. */
.av-rmeta{display:block;font-size:12px;color:#7d6229;font-weight:600;margin-top:5px}
.av-rdesc{grid-column:2 / -1;grid-row:2;font-size:14.5px;color:rgba(11,19,32,.6);
  margin:6px 0 0}
.av-rthumb{grid-column:3;grid-row:1;width:78px;height:56px}
.av-rthumb.av-ph span{font-size:9px;padding:0 4px}

/* ---------------- merken ---------------- */
.av-merken{display:grid;gap:18px}
.av-merk{background:var(--av-navy);border:1px solid rgba(203,166,98,.2);padding:26px 22px;
  transition:.3s;position:relative}
/* CTA-uitlijning: zelfde patroon als .av-kaart (margin-top:auto), zodat de
   "Bekijk ..."-link binnen een rij altijd op dezelfde y-positie staat, ook als
   een introzin een regel langer is. !important omdat bestaande paginacontent
   (Merken-hub) een inline margin-top op de laatste alinea zet. Gemeten
   03-09-2026 op pagina 18: 23,8px verschil op 768 en 1440px, nu 1 regel. */
.av-merk{display:flex;flex-direction:column}
.av-merk>*:last-child{margin-top:auto!important}
.av-merk:hover{border-color:var(--av-gold);transform:translateY(-4px)}
.av-merk .av-land{font-size:12px;color:var(--av-gold);margin:0 0 10px}
.av-merk h3{font-size:22px;color:var(--av-paper);margin:0 0 10px}
.av-merk p{font-size:14px;color:rgba(245,245,245,.66);margin:0 0 18px}
.av-merk .av-model{border-top:1px solid rgba(203,166,98,.22);padding-top:14px;
  font-size:12.5px;color:rgba(245,245,245,.5)}
.av-merk .av-model b{display:block;font-family:'Playfair Display',Georgia,serif;
  font-size:17px;color:var(--av-paper);font-weight:500;margin:0 0 3px}

/* ---------------- split ---------------- */
.av-split{display:grid;gap:32px;align-items:center}
/* Een grid-item heeft standaard min-width:auto, dus de kolom kan niet smaller worden
   dan de min-content van zijn inhoud. Op 360px duwde de .av-ment-row-tegelrij in de
   zwemspa-sectie van /spas/ de enige kolom naar 346,7px terwijl de container 316px
   breed is: 9px horizontale overflow op de hele pagina (gemeten 04-09-2026,
   document.scrollWidth 369 bij viewport 360). min-width:0 laat de kolom weer krimpen;
   op tablet en desktop verandert er niets, want daar was er geen tekort. */
.av-split > *{min-width:0}
.av-split .av-ph{height:260px}
.av-lijst{list-style:none;margin:0;padding:0}
.av-lijst li{position:relative;padding:13px 0 13px 28px;font-size:15px;
  border-bottom:1px solid rgba(11,19,32,.12)}
.av-lijst li::before{content:"";position:absolute;left:2px;top:20px;width:6px;height:6px;
  border-right:1.6px solid var(--av-gold);border-top:1.6px solid var(--av-gold);transform:rotate(45deg)}
.av-sec-dark .av-lijst li,.av-sec-navy .av-lijst li,.av-sec-slate .av-lijst li{border-color:rgba(255,255,255,.12)}

/* ---------------- dealerzoeker ---------------- */
.av-finder{background:#fff;padding:26px 22px;border:1px solid rgba(11,19,32,.12)}
.av-finder label{display:block;font-size:13px;font-weight:600;margin:0 0 9px}
.av-finder .av-row2{display:grid;gap:11px}
.av-finder input{width:100%;padding:15px 16px;border:1px solid rgba(11,19,32,.18);
  font-size:16px;font-family:'Montserrat',Arial,sans-serif;background:var(--av-paper)}
.av-finder input:focus-visible{outline:2px solid var(--av-gold);outline-offset:2px;
  border-color:var(--av-gold);background:#fff}
.av-finder .av-hint{font-size:12.5px;color:rgba(11,19,32,.55);margin:14px 0 0;line-height:1.6}

/* ---------------- artikelen ---------------- */
.av-arts{display:grid;gap:20px}
.av-art{background:#fff;border:1px solid rgba(11,19,32,.1);padding:24px 22px;transition:.3s}
/* 1.26 (14-09-2026): zelfde uitlijningscontract als .av-kaart en .av-merk. Gemeten op de
   homepage op 768px: CTA-onderkant per rij 45px ongelijk (51/75/30px tot de kaartonderkant),
   omdat dit kaarttype geen flex-column had; de inline display:flex op 15, 17 en 25 blijft
   gewoon werken en wordt hiermee sitebreed de standaard. */
.av-art{display:flex;flex-direction:column}
.av-art>*:last-child{margin-top:auto}
.av-art:hover{border-color:var(--av-gold);transform:translateY(-3px)}
.av-art .av-kop{font-size:12px;color:#7d6229;margin:0 0 12px} /* 1.26: was var(--av-gold), 2,29:1 op wit; nu 5,75:1 */
.av-art h3{font-size:19px;margin:0 0 10px}
.av-art p{font-size:14px;color:rgba(11,19,32,.6);margin:0 0 14px}
/* Kleur was var(--av-gold) #CBA662: op de witte kaartachtergrond van .av-art
   is dat 2,29:1, ruim onder de WCAG-norm van 4,5:1. #7d6229 is de donkere
   variant die het thema hiervoor al voert (.av-kmerk, .av-kbadge) en haalt
   5,75:1. Geen nieuwe tint verzonnen. (versie 1.18, 04-09-2026) */
.av-art .av-lees{font-size:12.5px;font-weight:600;color:#7d6229}

/* ---------------- dealerblok ---------------- */
.av-dealer{background:var(--av-navy);color:var(--av-paper);padding:34px 24px;
  border:1px solid rgba(203,166,98,.24)}
.av-dealer h2{font-size:27px;margin:0 0 16px}
.av-dealer p{color:rgba(245,245,245,.72);font-size:15px}

/* ---------------- faq ---------------- */
.av-faq details{border-bottom:1px solid rgba(11,19,32,.14)}
.av-faq summary{cursor:pointer;padding:20px 36px 20px 0;font-weight:600;font-size:15.5px;
  position:relative;list-style:none}
.av-faq summary::-webkit-details-marker{display:none}
.av-faq summary::after{content:"";position:absolute;right:4px;top:24px;width:8px;height:8px;
  border-right:1.6px solid var(--av-gold);border-bottom:1.6px solid var(--av-gold);
  transform:rotate(45deg);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.av-faq details[open] summary::after{transform:rotate(-135deg);top:28px}
.av-faq p{color:rgba(11,19,32,.62);font-size:14.5px;padding:0 0 20px;margin:0;max-width:70ch}

/* ---------------- notities (interne bouwlaag, niet voor de klant) ---------------- */
.av-note{border:1px dashed rgba(203,166,98,.55);background:rgba(203,166,98,.06);
  padding:18px 20px;font-size:13px;line-height:1.65;color:rgba(11,19,32,.68)}
.av-note b{display:block;color:var(--av-navy-deep);font-family:'Playfair Display',Georgia,serif;
  font-weight:500;font-size:16px;margin:0 0 6px}
.av-note ul{margin:10px 0 0;padding-left:18px}
.av-note li{margin:0 0 5px}
.av-sec-dark .av-note,.av-sec-navy .av-note,.av-sec-slate .av-note{background:rgba(203,166,98,.08);
  color:rgba(245,245,245,.72);border-color:rgba(203,166,98,.4)}
.av-sec-dark .av-note b,.av-sec-navy .av-note b,.av-sec-slate .av-note b{color:var(--av-paper)}

/* ---------------- generieke paginakop (niet-homepage) ---------------- */
.av-pagehero{background:var(--av-navy-deep);color:var(--av-paper);padding:56px 0}
.av-pagehero .av-hero-lead{margin-top:16px}
.av-pagehero h1{font-size:34px;max-width:20ch}

/* ---- achtergrondfoto in de paginakop (04-09-2026) ----
   Zelfde aanpak als .av-hero-media op de homepage: een echt <img>-element plus
   een gradient-overlay erboven, dus geen CSS background-image (dat blokkeert de
   LCP-optimalisatie). Alles hangt aan .av-pagehero-img, zodat een paginakop
   zonder foto exact blijft renderen zoals hij was. */
.av-pagehero{position:relative;overflow:hidden}
.av-pagehero > .av-wrap{position:relative;z-index:2}
.av-pagehero-img{padding:206px 0 54px}
.av-pagehero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.av-pagehero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av-pagehero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,19,32,.12) 0px,rgba(11,19,32,.18) 108px,
    rgba(11,19,32,.82) 198px,rgba(11,19,32,.90) 100%)}
/* 1.23: fotoband bovenaan lichter (.28/.34 naar .12/.18) en de tekstzone van .88/.95 naar
   .82/.90; het gouden label vraagt minimaal .81 voor 4,5:1 op een lichte foto */
.av-pagecontent{padding:64px 0;max-width:74ch;margin:0 auto}
.av-pagecontent .av-wrap{max-width:820px}
.av-content-body h2{font-size:26px;margin:34px 0 14px}
.av-content-body h3{font-size:20px;margin:26px 0 12px}
.av-content-body p{font-size:16px;color:rgba(11,19,32,.75)}
.av-content-body ul,.av-content-body ol{padding-left:22px;font-size:16px;color:rgba(11,19,32,.75)}
.av-content-body a{color:var(--av-navy-deep);text-decoration:underline;text-decoration-color:var(--av-gold)}
.av-content-body img{margin:20px 0}

/* ---------------- inline links sitebreed zichtbaar (03-09-2026) ----------------
   a{color:inherit;text-decoration:none} maakte elke link onzichtbaar behalve in
   .av-content-body (blogwrapper). Fix: elke link die in doorlopende tekst (een
   <p>) binnen de hoofdinhoud staat krijgt een randkleur/onderstreping, zonder de
   knoppen (.av-btn*) en kaart-CTA's (.av-kcta/.av-lees) te raken: die blijven
   precies zoals ze waren. .av-content-body a had dit al; deze regel dekt de rest
   van de paginacontent (av-note, av-shead, av-split, av-faq, hero-lead, enz). */
#av-main p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees){
  text-decoration:underline;text-decoration-color:var(--av-gold);
  text-underline-offset:3px;color:var(--av-navy-deep)}
#av-main p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):hover{
  color:#7d6229} /* 1.56: was var(--av-gold), 2,29:1 op wit; op een donkere sectie geldt de regel hieronder */
/* 1.24: sectieklasse staat binnen #av-main, dus de sectie moet na #av-main in de selector
   staan; de oude volgorde matchte nooit en gaf navy op navy (gemeld 14-09-2026) */
#av-main .av-sec-dark p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees),
#av-main .av-sec-navy p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees),
#av-main .av-sec-slate p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees){
  color:var(--av-paper)}

/* ---------------- footer ---------------- */
.av-foot{background:var(--av-navy-deep);color:rgba(245,245,245,.6);padding:52px 0 28px;font-size:14px}
.av-foot-top{display:grid;gap:34px}
/* 04-09-2026: de footer droeg nog het oude tekstmerk (Aqua<em>Vuro</em>) terwijl de
   header sinds vandaag het echte logo voert. Nu dezelfde horizontale lockup, met
   dezelfde .av-logo-mark/.av-logo-word-maten, zodat er geen tweede logovariant naast
   de eerste ontstaat. De footer heeft dezelfde achtergrond als de header
   (--av-navy-deep), dus het gemeten goud-op-navy-contrast geldt hier onveranderd. */
.av-foot-brand{display:flex;align-items:center;gap:10px;line-height:0;margin:0 0 18px}
.av-foot-brand p{font-size:13.5px;color:rgba(245,245,245,.55);max-width:36ch}
.av-foot-col h4{color:var(--av-paper);font-size:14px;margin:0 0 16px;font-weight:600;
  font-family:'Montserrat',Arial,sans-serif}
.av-foot-col ul{list-style:none;margin:0;padding:0}
.av-foot-col li{margin:0 0 10px}
.av-foot-col a{font-size:13.5px;color:rgba(245,245,245,.55)}
.av-foot-col a:hover{color:var(--av-gold)}
.av-foot-bot{margin-top:38px;padding-top:20px;border-top:1px solid rgba(203,166,98,.18);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:12.5px;color:rgba(245,245,245,.55)}
/* 1.26 (14-09-2026): de onderbalk-links erfden rgba(245,245,245,.38) = 3,36:1 en waren 15px
   hoog. Zelfde alpha als .av-foot-col a (.55 = 5,74:1 op navy-deep); padding 5px boven en
   onder met een even grote negatieve marge, zodat het tikdoel 25px wordt zonder dat de balk
   of de footer hoger wordt. */
.av-foot-bot a{color:rgba(245,245,245,.55);display:inline-block;padding:5px 0;margin:-5px 0}
.av-foot-bot a:hover{color:var(--av-gold)}
.av-sep{display:inline-block;width:1px;height:11px;background:rgba(203,166,98,.55);
  margin:0 13px;vertical-align:-1px}

/* ---------------- vaste balk onderaan, mobiel ---------------- */
.av-dock{position:sticky;bottom:0;z-index:70;background:var(--av-navy-deep);
  border-top:1px solid rgba(203,166,98,.3);display:grid;grid-template-columns:1fr 1fr}
.av-dock a{padding:16px 10px;text-align:center;font-size:13px;font-weight:600;color:var(--av-paper);
  min-height:44px;display:flex;align-items:center;justify-content:center}
.av-dock a + a{background:var(--av-gold);color:var(--av-navy-deep)}

/* ---------------- animatie: verwijderd 24-08-2026 -----------------
   Eerdere opzet verstopte .av-rev standaard (opacity:0) en toonde hem pas via
   een IntersectionObserver in functions.php. Bij snel herhaald scrollen bleven
   secties daardoor permanent onzichtbaar (gemeld door Mitch/coordinator op
   live aquavuro.nl en wellnesspartner.nl). Content moet altijd zichtbaar zijn
   zonder JavaScript; er is bewust geen vervangende CSS-only animatie
   toegevoegd. De .av-rev-klasse staat nog in de HTML maar heeft geen effect
   meer, dat is onschadelijk. */

/* ---------------- productkaarten (sinds 02-09-2026) ----------------
   Een standaard voor alle pillars. Vast 1:1 beeldvlak met object-fit:contain,
   bewust niet croppen: de fabrikantsrenders zijn strak op de productcontour
   gesneden, dus hun verhouding volgt de plattegrond. Hard croppen snijdt de
   staande modellen doormidden. Contain plus witruimte geeft rustige rijen en
   laat de werkelijke onderlinge maatverhouding zien.
   Zie Onderzoek/_BOUWCONTRACT-productkaart.md voor het HTML-patroon. */
.av-kaarten{display:grid;grid-template-columns:1fr;gap:16px;margin:0;padding:0;
  list-style:none}
.av-kaart{background:var(--av-white);border:1px solid rgba(11,19,32,.09);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.av-kaart:hover{border-color:rgba(203,166,98,.55);
  box-shadow:0 10px 30px rgba(11,19,32,.07)}
.av-kfig{margin:0;aspect-ratio:1/1;background:#fbfaf8;padding:12px;position:relative;
  display:flex;align-items:center;justify-content:center;
/* CSS1 (1.28), Daniël: "Kun je hier de lijndikte uniform maken?" De volledige rand
   van .av-kfig lag strak tegen de rand van .av-kaart, dus je zag 2px rond het
   beeldvlak en 1px langs het kaartlijf, in twee grijstinten (rgb(233,234,235)
   tegen rgb(226,227,228)). Nu nog een scheidingslijn onder het beeldvlak, in
   exact dezelfde tint als de kaartrand zelf (rgba(11,19,32,.09)). */
  border:0;border-bottom:1px solid rgba(11,19,32,.09)}
/* Het beeld absoluut positioneren in plaats van op 100% hoogte zetten. Reden:
   een percentagehoogte kan niet oplossen tegen een ouder waarvan de hoogte uit
   aspect-ratio komt, dus viel het beeld terug op height:auto en werd het frame
   bij een staande bron hoger dan breed. Gemeten op 22 kaarten met gemengde
   verhoudingen: 7 van de 22 frames waren niet vierkant, tot 329x489 in een
   kaart van 329 breed. Met deze opzet 0 van de 22. */
.av-kfig img{position:absolute;top:12px;left:12px;right:12px;bottom:12px;
  width:auto;height:auto;max-width:calc(100% - 24px);max-height:calc(100% - 24px);
  object-fit:contain;margin:auto}
/* .av-ph als plaatsvervanger in een kaart: die heeft geen eigen hoogte en werd
   door de flex-centrering van .av-kfig platgedrukt tot een streepje. */
.av-kfig .av-ph{align-self:stretch;width:100%;height:100%}
.av-kbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
/* donkerder goud: het merkgoud #CBA662 op wit haalt maar 2,29:1 en zakt door
   de toegankelijkheidsnorm. Op een donkere kaart mag het gewone merkgoud wel. */
.av-kmerk{font-size:11.5px;font-weight:600;color:#7d6229;
  margin:0 0 5px;letter-spacing:.01em}
.av-kbadge{display:inline-block;align-self:flex-start;font-size:11px;
  font-weight:600;padding:3px 9px;background:rgba(203,166,98,.16);color:#7d6229;
  margin:0 0 9px}
.av-kaart h3{font-family:'Playfair Display',Georgia,serif;font-size:21px;
  font-weight:500;margin:0 0 13px}
.av-kspecs{list-style:none;margin:0 0 4px;padding:0;font-size:14px}
.av-kspecs li{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:7px 0;border-bottom:1px solid rgba(11,19,32,.07);
  color:rgba(11,19,32,.66)}
.av-kspecs li::before{content:none}
.av-kspecs b{font-weight:600;color:var(--av-navy-deep);text-align:right;
  font-size:14px}
/* Versie 1.22, 04-09-2026: label en waarde in een .av-kspecs-regel zijn flex-items en
   hebben dus standaard min-width:auto. Een lange specificatiewaarde ("6 infrarood
   mica-carbonpanelen") kon daardoor niet krimpen en liep buiten de kaart. Gemeten
   04-09-2026 op pagina 21 en 219, vier kolommen van 217,5px breed: kaart Valo SR1 14px,
   Valo SR2 18px en Aura 620 30px te breed op 1024px, en tien spec-regels met 5 tot 50px
   overloop. min-width:0 laat de WAARDE krimpen, overflow-wrap breekt daarin het te lange
   woord en hyphens:auto legt die breuk op een lettergreep in plaats van midden in het
   woord (gemeten 17 gevallen op pagina 21 bij 1024px, onder meer "mica-carbonpanelen",
   "roodlichttherapie" en "steenkachel"); overflow-wrap blijft de harde garantie, ook in
   een browser zonder Nederlands afbreekwoordenboek. Bewust alleen op de <b> en niet op de <span>: met min-width:0 op het label brak
   ook de veldnaam midden in het woord ("Jets" over twee regels, "Verwarming" over drie,
   gemeten op 19, 21, 208 en 219). Het label houdt dus min-width:auto en blijft heel. */
.av-kspecs li > b{min-width:0}
.av-kspecs li b{overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual} /* 1.54: was auto, gaf "mica-car-bonpanelen" op 21 */
.av-kmeer{margin:0 0 16px;font-size:14px}
.av-kmeer summary{cursor:pointer;list-style:none;font-weight:600;font-size:13.5px;
  color:var(--av-navy-deep);padding:12px 0 11px;position:relative}
.av-kmeer summary::-webkit-details-marker{display:none}
.av-kmeer summary::after{content:"+";position:absolute;right:2px;top:11px;
  color:var(--av-gold);font-weight:600;font-size:15px}
.av-kmeer[open] summary::after{content:"\2212"}
.av-kmeer p{margin:0 0 12px;font-size:14px;line-height:1.65;
  color:rgba(11,19,32,.66)}
.av-kcta{margin-top:auto;align-self:flex-start;font-size:13px;font-weight:600;
  color:var(--av-navy-deep);border-bottom:1px solid var(--av-gold);
  padding-bottom:3px;transition:color .22s}
.av-kcta:hover{color:var(--av-gold)}
/* kaarten op een donkere sectie */
.av-sec-dark .av-kaart,.av-sec-navy .av-kaart,.av-sec-slate .av-kaart{background:var(--av-navy);
  border-color:rgba(203,166,98,.2)}
.av-sec-dark .av-kaart h3,.av-sec-navy .av-kaart h3,.av-sec-slate .av-kaart h3{color:var(--av-paper)}
.av-sec-dark .av-kmerk,.av-sec-navy .av-kmerk{color:var(--av-gold)}
/* 1.26 (14-09-2026): op de merkpagina Icelandic Wellness (219) is het merk de hele pagina, dus
   het merklabel op elk van de 29 kaarten zegt niets. WordPress-bodyklasse, geen nieuwe klasse. */
/* CSS11 (1.28): was body.page-id-219, dus per id. Nu per merkpagina: alle vijf de
   merkpaginas zijn kind van de Merken-hub (pagina 18) en dragen daardoor de
   WordPress-bodyklasse parent-pageid-18 (gemeten met get_body_class() op 26, 27,
   28, 29 en 219; de categoriepaginas 19, 20, 21 en 22 dragen hem niet). Op een
   merkpagina zegt het merklabel per kaart niets: het stond 17x "Mojodas SPA" op
   /mojodas/. Op een categoriepagina met meerdere merken blijft het label staan,
   want daar onderscheidt het. */
body.parent-pageid-18 .av-kaart .av-kmerk{display:none}
.av-sec-dark .av-kspecs li,.av-sec-navy .av-kspecs li,.av-sec-slate .av-kspecs li{color:rgba(245,245,245,.66);
  border-bottom-color:rgba(255,255,255,.1)}
.av-sec-dark .av-kspecs b,.av-sec-navy .av-kspecs b,.av-sec-slate .av-kspecs b{color:var(--av-paper)}
.av-sec-dark .av-kcta,.av-sec-navy .av-kcta,.av-sec-slate .av-kcta{color:var(--av-paper)}
/* de uitklap bleef donkere tekst op een donkere kaart houden */
.av-sec-dark .av-kmeer summary,.av-sec-navy .av-kmeer summary,.av-sec-slate .av-kmeer summary,
.av-sec-dark .av-kmeer p,.av-sec-navy .av-kmeer p,.av-sec-slate .av-kmeer p{color:rgba(245,245,245,.78)}
/* voorkomt dat de generieke .av-content-body a-regel (blogartikelen) de
   kaartlinks onderstreept; dat patroon is een bekende specificiteitsval */
.av-content-body .av-kcta,.av-content-body .av-btn{text-decoration:none}

/* ---------------- icoon+kop (03-09-2026, designronde) ----------------
   Sobere inline-SVG-lijniconen naast een h3, voor tekst-zware secties zonder
   visuele steun (av-shead/av-split-secties). Geen icoonsysteem bestond nog in
   theme.json of deze stylesheet (gecontroleerd voor gebruik), dus dit is de
   eerste set. Vast op 24x24, currentColor via stroke, goud op elke achtergrond
   (staat al overal als accent). Geen emoji, geen gevulde iconen. */
.av-ich{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.av-ich h3{margin:0}
.av-ic{width:26px;height:26px;flex:none;color:var(--av-gold)}

/* ---------------- .av-merk CTA als knop (03-09-2026) ----------------
   "Bekijk ..."-links in av-shead/av-split-secties lazen als tekst, niet als
   vervolgstap. Hergebruikt: dezelfde .av-btn/.av-btn-l-klassen als de rest van
   de site. Bij een hele kaart-als-link (a.av-merk) is dit een <span>, geen
   geneste <a>: nesten van links is ongeldige HTML. margin-top:auto komt al uit
   de .av-merk>*:last-child-regel hierboven (fix 03-09-2026, sectie merken). */
.av-merk-cta{align-self:flex-start}

/* ---------------- filterbalk grote modellensets (03-09-2026) ----------------
   Client-side, vanilla JS, progressive enhancement: zonder JavaScript doet de
   balk niets en blijven alle kaarten gewoon zichtbaar (geen hidden-attribuut
   wordt gezet). .av-kgroup groepeert een merk-blok (kop + intro + kaarten) zodat
   een leeg gefilterd merk-blok ook zijn eigen kop kan verbergen. */
.av-filter{display:flex;flex-wrap:wrap;gap:16px 26px;margin:0 0 34px;padding:20px 22px;
  background:#fff;border:1px solid rgba(11,19,32,.1)}
.av-filter-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* 04-09-2026 contrastronde op de filterbalk (die staat inmiddels op vier pagina's):
   het groepslabel haalde op de witte balk 3,30:1 bij 12px, onder de 4,5:1-norm; met
   .66 is dat 6,03:1. De chip-rand haalde 1,48:1 en is de enige begrenzing van een
   bedieningselement (WCAG 1.4.11 vraagt 3:1); met .45 is dat 3,02:1. De lege-melding
   stond op 4,75:1 en gaat met .72 naar 7,19:1 op paper en 7,50:1 op wit. De chiptekst
   zelf haalde al 18,61:1 in rust en actief en is ongewijzigd. */
.av-filter-group::before{content:attr(data-label);font-size:12px;font-weight:600;
  color:rgba(11,19,32,.66);margin-right:4px}
.av-fchip{font:inherit;font-size:13px;font-weight:600;padding:8px 15px;
  border:1px solid rgba(11,19,32,.45);background:#fff;color:var(--av-navy-deep);
  cursor:pointer;transition:.2s}
.av-fchip:hover{border-color:var(--av-gold)}
.av-fchip.is-active{background:var(--av-navy-deep);border-color:var(--av-navy-deep);color:#fff}
.av-kaart[hidden]{display:none}
.av-kgroup[hidden]{display:none}
/* .av-art draagt in de opmaak een inline display:flex voor de CTA-uitlijning,
   dus het hidden-attribuut deed hier niets en een filterscript moest zelf
   style.display zetten. !important is nodig omdat een inline style anders
   wint van elke selector. (versie 1.18, 04-09-2026) */
.av-art[hidden]{display:none!important}
.av-filter-empty{padding:6px 0 22px;color:rgba(11,19,32,.72);font-size:14.5px}

/* ---------------- "genoemd maar niet getoond" visuele steun (03-09-2026) ----
   Voor modellen die in de tekst genoemd worden zonder eigen productfoto
   (bijvoorbeeld de zwemspa-sectie): hergebruikt .av-ph-plaatsvervangerspatroon
   in een compacte tegel naast de tekst, in plaats van kale tekst alleen. */
.av-ment-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.av-ment-row .av-ph{flex:1 1 150px;aspect-ratio:4/3;min-height:110px}
.av-ment-row .av-ph span{font-size:11px;padding:0 14px}

/* ================= tablet ================= */
@media (min-width:720px){
  .av-hero-media,.av-hero-media.av-ph{height:480px}
  .av-pagehero-img{padding:212px 0 66px}
  .av-pagehero-media::after{background:linear-gradient(180deg,rgba(11,19,32,.12) 0px,
    rgba(11,19,32,.18) 110px,rgba(11,19,32,.82) 204px,rgba(11,19,32,.90) 100%)}
  .av-hero h1{font-size:52px}
  .av-facts .av-wrap{grid-template-columns:repeat(4,1fr)}
  .av-merken{grid-template-columns:1fr 1fr}
  .av-arts{grid-template-columns:repeat(3,1fr)}
  .av-finder .av-row2{grid-template-columns:1fr auto}
  .av-foot-top{grid-template-columns:1.5fr 1fr 1fr}
  .av-row{grid-template-columns:52px 1fr 128px;gap:4px 20px}
  .av-rthumb{width:128px;height:84px}
  .av-kaarten{grid-template-columns:repeat(2,1fr);gap:18px}
}

/* ================= desktop ================= */
@media (min-width:1024px){
  body{font-size:17px}
  .av-dock{display:none}
  /* 1.53: de headerregels van dit blok staan nu in het blok vanaf 1280px hieronder */

  .av-hero-media,.av-hero-media.av-ph{height:660px}
  .av-hero-media::after{background:
    linear-gradient(90deg,rgba(11,19,32,.86) 4%,rgba(11,19,32,.80) calc(50% + 40px),
      rgba(11,19,32,.36) calc(50% + 300px),rgba(11,19,32,.12) 100%)}
  /* 1.25: het stoppunt volgt de tekstkolom (op 1024px eindigt de lead op 599px, op 1440px op
     679px), daarna zakt de overlay snel zodat de foto rechts echt vrijkomt */
  .av-hero-body{position:absolute;inset:0;margin:0;padding:0;display:flex;
    flex-direction:column;justify-content:center}
  .av-hero-body .av-wrap{width:100%}
  .av-hero h1{font-size:74px;max-width:14ch;margin-bottom:26px}
  .av-hero-lead{font-size:18.5px;max-width:46ch}
  .av-fact{padding:30px 26px}
  .av-fact b{font-size:36px}

  .av-sec{padding:110px 0}
  .av-shead{margin-bottom:56px}
  .av-shead h2{font-size:44px}
  .av-split h2{font-size:44px} /* 1.63 */
  .av-shead p{font-size:17px}

  .av-row{grid-template-columns:64px 1.02fr 1.38fr 168px;gap:0 30px;padding:24px 16px;
    margin:0 -16px}
  .av-row:hover{background:rgba(203,166,98,.07)}
  .av-rico{width:34px;height:34px;grid-column:1;grid-row:1}
  .av-rico .av-ic{width:20px;height:20px}
  .av-rtitle{grid-column:2;grid-row:1}
  .av-rtitle h3{font-size:29px}
  .av-rdesc{grid-column:3;grid-row:1;font-size:15px;margin:0}
  .av-rthumb{grid-column:4;grid-row:1;width:168px;height:104px}

  .av-merken{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px} /* was repeat(4,1fr): gaf 3 lege kolommen bij de 5e merkkaart (Icelandic Wellness, pagina 18). auto-fit laat een 4-kaartenrij op 4 volle kolommen staan (5e track valt leeg weg) en een 5-kaartenrij op 5 kolommen, want 5x210+4x22=1138px past binnen de 1192px binnenbreedte van .av-wrap. */
  .av-kaarten{grid-template-columns:repeat(3,1fr);gap:22px}
  .av-kaarten-4{grid-template-columns:repeat(4,1fr)}
  .av-kaart h3{font-size:22px}
  .av-merk{padding:34px 28px}
  .av-split{grid-template-columns:1fr 1fr;gap:70px}
  .av-split-wide{grid-template-columns:1.08fr 1fr}
  .av-split .av-ph{height:520px}
  .av-arts{gap:26px}
  .av-art{padding:32px 28px}
  .av-dealer{padding:64px 58px}
  .av-dealer h2{font-size:38px}
  .av-finder{padding:32px 30px}
  .av-foot-top{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:46px}
  .av-pagehero h1{font-size:48px}
  .av-pagehero-img{padding:104px 0 96px}
  /* horizontale overlay, gelijk aan de homepage-hero: de tekst staat links op
     bijna volledig navy, de foto komt rechts van de tekstkolom vrij. */
  .av-pagehero-media::after{background:
    linear-gradient(90deg,rgba(11,19,32,.86) 0%,rgba(11,19,32,.80) calc(50% + 40px),
      rgba(11,19,32,.36) calc(50% + 300px),rgba(11,19,32,.12) 100%)}
  /* 1.23 en 1.25: stoppunt volgt de tekstkolom in plaats van een vast percentage, omdat de
     lead op 1024px tot 599px reikt; rechts daarvan komt de foto vrij (.12 in plaats van .40) */

}

/* 1.53 (09-10-2026): de desktopheader begint pas bij 1280px. Van 1024 tot 1279px past de rij van
   ontwerp E2 niet binnen de gutter (gemeten), daar staat het uitklapmenu zoals op tablet. Dit zijn de
   headerregels die tot 1.52 in het desktopblok vanaf 1024px stonden, ongewijzigd verplaatst. */
@media (min-width:1280px){
  .av-burger{display:none}
  .av-head-in{padding:16px 0}
  .av-logo-mark{height:44px}
  .av-logo-word{height:26px}
  .av-nav{display:block;flex:1 1 auto;min-width:0;order:0;border-top:0;margin-top:0;
    padding-bottom:0}
  .av-nav > ul{display:flex;align-items:center;gap:0;justify-content:space-evenly}
  .av-headcta .av-btn{display:inline-block}
  .av-nav > ul > li{position:relative}
  .av-nav > ul > li > a,.av-nav > ul > li > .av-slab{border-bottom:0;
    padding:12px clamp(7px,.85vw,13px);font-size:14px;position:relative}
  .av-nav > ul > li > a::after{content:"";position:absolute;
    left:clamp(7px,.85vw,13px);right:clamp(7px,.85vw,13px);bottom:5px;
    height:1px;background:var(--av-gold);transform:scaleX(0);transform-origin:left;
    transition:transform .3s cubic-bezier(.2,.7,.3,1)}
  .av-nav > ul > li > a:hover::after{transform:scaleX(1)}
  .av-slab::after{position:static;float:none;margin-left:7px;font-size:13px}
  .av-sub{position:absolute;top:100%;left:0;min-width:274px;background:var(--av-navy);
    border:1px solid rgba(203,166,98,.28);max-height:none;visibility:hidden;opacity:0;
    transform:translateY(6px);transition:opacity .22s,transform .22s}
  .av-nav > ul > li:hover .av-sub,.av-stog:checked ~ .av-sub{visibility:visible;opacity:1;
    transform:none}
  .av-sub a{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
  .av-headcta{display:block;flex:none;padding:0;margin-left:0}

  /* Merken: label weg, echte link zichtbaar, uitklap ook op toetsenbordfocus */
  .av-nav > ul > li > .av-slab{display:none}
  .av-nav > ul > li > .av-slink{display:block}
  .av-nav > ul > li:focus-within .av-sub{visibility:visible;opacity:1;transform:none}
  .av-sub-hub{display:none}
}

/* =========================================================
   Vaste maatvoering paginahero + USP-balk (versie 1.16, 04-09-2026)
   Mitch: "Elke site moet precies dezelfde hoogte hebben qua hero en USP
   kaarten" en "Elke hero en USP kaarten moeten op desktop bij de above the
   fold zichtbaar zijn en dan bij scrollen moet de rest van de body beginnen!"

   Aanpak: de USP-balk krijgt een vaste hoogte (--av-uspb) en de paginahero
   met achtergrondfoto krijgt op desktop de resthoogte van het eerste scherm:
   100svh minus de gemeten headerhoogte (--av-headh) minus die USP-balk.
   Daardoor is de hoogte per definitie op elk desktopscherm identiek en valt
   de onderkant van de USP-balk altijd binnen de viewport. svh en niet vh,
   want vh negeert de inklapbare browserbalk.

   Op mobiel en tablet is de hoogte wel VAST (dus gelijk op elke pagina) maar
   NIET aan de viewporthoogte gekoppeld: een hero die op een telefoon het
   hele scherm claimt is slechte UX.

   min-height en niet height op de hero: een pagina met uitzonderlijk lange
   heroteksten (buiten de tien assortimentspagina's) groeit dan mee in plaats
   van dat de tekst wordt afgekapt door .av-pagehero{overflow:hidden}.
   Voor de USP-balk is het wel een harde height: die inhoud is generiek en
   past gemeten op elke pagina en elke breedte binnen de gekozen waarden.

   Gemeten headerhoogtes 04-09-2026 (adminbalk uit de meting gehaald):
   360-1023px = 77,9px | 1024-1055px = 270,1px | vanaf 1056px = 204,3px.
   ========================================================= */
/* Versie 1.18, 04-09-2026: de vaste hoogte werkt vanaf hier als een sectie die
   zijn inhoud verticaal centreert, niet als vier cellen die elk moeten
   uitrekken. De speling staat daardoor boven en onder het blok in plaats van
   als lege bodem in vier vakjes. De eis blijft ongewijzigd: exact dezelfde
   hoogte op elke pagina, en op desktop past hero plus balk boven de vouw.
   Versie 1.22, 04-09-2026: .av-fact span heeft nu overflow-wrap:break-word plus
   hyphens:auto. Zonder die twee liep een lang woord uit zijn cel ("verwarmings-
   elementen" 150,7px in een kolom van 118px op pagina 23, "premiumuitvoering" 123px
   op 27, "9001:2015-gecertificeerd" 150,3px op 29, alle drie in de band 720 tot
   1023px). overflow-wrap is de harde garantie en werkt in elke browser; hyphens:auto
   zorgt dat de breuk op een lettergreep valt in plaats van midden in het woord.
   De vaste bandhoogtes hieronder zijn bewust gemeten ZONDER hyphens, dus een browser
   zonder Nederlands afbreekwoordenboek past er ook nog in.
   --av-uspb mobiel van 512 naar 524px: gemeten maximum van de gestapelde
   inhoud is 502,5px op 360, 390, 412 en 430px breed. 524px laat 10,75px boven
   en onder over en absorbeert een extra tekstregel (18,75px) zonder overflow. */
:root{--av-headh:78px;--av-uspb:524px;--av-heroh:712px}
.av-facts{height:var(--av-uspb);display:flex;align-items:center}
.av-facts > .av-wrap{height:auto}
.av-fact{display:flex;flex-direction:column;justify-content:center;height:auto}
.av-pagehero-img{min-height:var(--av-heroh);display:flex;flex-direction:column;
  justify-content:flex-end;padding:206px 0 44px}

@media (min-width:720px){
  /* --av-uspb van 250 naar 295px (versie 1.22, 04-09-2026). Gemeten maximale
     inhoudshoogte over alle twaalf pagina's in deze band: 272,75px op 720px breed
     (pagina 27, Celtic). Met 250px staken de vier cellen daar 11,4px boven en 11,9px
     onder de sectie uit en schilderden ze over de hero en de sectie eronder heen.
     295px laat 11,125px boven en onder over en absorbeert een extra tekstregel
     (18,75px) zonder overflow. */
  :root{--av-uspb:295px;--av-heroh:620px}
  .av-pagehero-img{padding:212px 0 56px}
}

@media (min-width:1024px){
  /* Was --av-headh:272px omdat de hoofdnavigatie tussen 1024 en 1040px breed
     naar twee regels wrapte (gemeten 270,1px in plaats van 204,3px). Oorzaak:
     logo 207,2px plus zeven menu-items 552px plus dealerzoeker 157,3px plus
     twee gaps van 18px is 952,5px, terwijl .av-head-in op 1024px maar 936px
     binnenbreedte heeft. De .av-headcta viel daardoor op een eigen regel.
     Opgelost met een smallere horizontale binnenmarge op de menu-items binnen
     die band (zie de media-query onderaan): 552px wordt 514px en alles past
     op een regel. Header daar nu 204,3px, gelijk aan 1056px en breder, dus
     een aparte --av-headh is niet meer nodig. (versie 1.18, 04-09-2026) */
  :root{--av-headh:78px;--av-uspb:240px} /* 1.53: was 206px; tot 1279px de compacte header, vanaf 1280px zie het 1.53-blok */
  .av-pagehero-img{min-height:clamp(386px,calc(100svh - var(--av-headh) - var(--av-uspb)),720px);
    justify-content:center;padding:10px 0}
  .av-fact{padding:14px 26px}
}
/* --av-uspb van 190 naar 205px (versie 1.22, 04-09-2026). Gemeten maximum in deze
   band: 183px op 1056px breed. 190px liet maar 7px speling, minder dan een tekstregel
   (18,75px). 205px geeft 11px boven en onder. De hero-clamp vangt de verhoging op:
   hero plus balk blijven samen 100svh min de header, zolang de clamp niet op zijn
   ondergrens van 386px valt (vanaf een vensterhoogte van 797px). */
@media (min-width:1056px){:root{--av-uspb:205px}}
@media (min-width:1200px){:root{--av-uspb:172px}}

/* Onder 360px: alleen de binnenmarges van de USP-balk smaller, niet de balk hoger.
   (versie 1.22, 04-09-2026)
   Probleem: op 320px was de tekstkolom in een .av-fact 232px in plaats van de 272px
   die hij vanaf 360px is, dus wrapte de tekst een regel extra en werd de gestapelde
   inhoud tot 577,5px terwijl --av-uspb 524px is. Gemeten op elf van de twaalf
   pagina's, 8,5 tot 27px te hoog; alleen pagina 29 paste. Hetzelfde gold tussen 350
   en 359px, waar de inhoud tot 521,25px liep en er nog maar 2,75px speling over was.
   Waarom niet een hogere --av-uspb onder 350px: de balk is daar al 524px hoog en een
   iPhone SE is 568px hoog, dus een nog hogere balk vult in zijn eentje het scherm.
   Waarom niet een kleinere .av-fact b of een kleiner lettertype: dat maakt de balk
   op precies het kleinste scherm ook nog eens minder leesbaar, en het breekt de
   typografische maatvoering die de balk op elke andere breedte heeft.
   Deze route houdt lettergrootte, regelhoogte en verticale binnenmarge exact gelijk
   aan die vanaf 360px; alleen de zijmarges gaan van 22+22 naar 12+14px, waarmee de
   tekstkolom 268px wordt (tegen 272px vanaf 360px) en het regelaantal dus gelijk is.
   Gemeten resultaat: maximale inhoudshoogte 502,5px op 320, 340, 349, 350 en 359px,
   exact hetzelfde getal als op 360, 390 en 412px. Tekst blijft 26px van de schermrand. */
@media (max-width:359px){
  .av-facts .av-wrap{padding-left:12px;padding-right:12px}
  .av-fact{padding:22px 14px}
}

/* Menu-items compacter tussen 1024 en 1055px, zodat logo, hoofdmenu en
   dealerzoeker daar op een regel passen. Buiten deze band blijft de
   binnenmarge clamp(7px,.85vw,13px) ongewijzigd. Gemeten: header 270,1px naar
   204,3px op 1024, 1032 en 1040px breed, zonder horizontale overflow.
   (versie 1.18, 04-09-2026) */
/* 1.53: vervallen. Tussen 1024 en 1279px staat het uitklapmenu, de regel raakte daar de mobiele rijen. */

/* 1.27 (14-09-2026): Formidable-verzendknop op Contact (17), Vind een dealer (24) en
   Dealer worden (167). frm_style=0 op de shortcode schakelt de pluginstijl op deze
   installatie niet uit (wrapper houdt with_frm_style, formidableforms.css laadt), dus de knop
   rendert standaardblauw (rgb(65,153,253)) uit
   .frm_style_formidable-stijlen.with_frm_style .frm_submit button (0,3,1), hover (0,4,1).
   Deze regel hangt aan #av-main (1,3,0) en wint daarvan. Waarden gelijk aan .av-btn.av-btn-p
   (padding, font, kleur, geen radius), min-height 44px als tikdoel. Geen nieuwe klasse. */
#av-main .frm_forms .frm_submit .frm_button_submit{
  display:inline-block;padding:15px 30px;min-height:44px;font-size:13.5px;font-weight:600;
  line-height:1.7;letter-spacing:.02em;transition:.28s cubic-bezier(.2,.7,.3,1);cursor:pointer;
  border:1px solid transparent;border-radius:0;font-family:'Montserrat',Arial,sans-serif;
  background:var(--av-gold);color:var(--av-navy-deep);box-shadow:none;text-shadow:none;margin:0}
#av-main .frm_forms .frm_submit .frm_button_submit:hover,
#av-main .frm_forms .frm_submit .frm_button_submit:focus{
  background:var(--av-gold-light);color:var(--av-navy-deep);border-color:transparent;
  box-shadow:none;transform:translateY(-2px)}


/* =========================================================
   Versie 1.28, 23-09-2026: elf verzamelde punten uit de feedbackronde van
   Daniël (22-09-2026), blok D-css. De wijzigingen hierboven in het bestand
   (CSS10 op .av-wrap en .av-facts .av-wrap, CSS1 op .av-kfig, CSS11 op het
   merklabel) staan bij hun eigen component; alles wat nieuw is staat hier.
   ========================================================= */

/* CSS2: ruimte tussen twee kaartgroepen in EEN sectie.
   In 1.27 bestond er geen enkele .av-kgroup-regel behalve [hidden]{display:none}.
   Gemeten op pagina 219 (390, 768 en 1440px): de onderkant van de laatste kaart
   en de bovenkant van de volgende groepskop vielen op exact dezelfde y, gat
   0,0px. Horizontaal klopte het wel (linkerverschil 0,0px), dus het oogde als
   een uitlijningsfout terwijl het een ruimtefout was.
   De tweede regel is er voor het filterscript: dat zet hidden op een hele
   groep zodra die leeg gefilterd is. Zonder die regel krijgt de eerste nog
   zichtbare groep een marge die nergens op slaat. */
.av-kgroup + .av-kgroup{margin-top:clamp(48px,5vw,72px)}
.av-kgroup[hidden] + .av-kgroup{margin-top:0}

/* CSS4: een groepskop staat hoger in de hierarchie dan een kaartkop.
   Sitebreed stond hij op een inline font-size van 18px, terwijl een kaartkop
   21px (mobiel) en 22px (desktop) is. Een nieuw onderwerp woog daardoor
   lichter dan de producten eronder. Drietrap na deze regel:
   H2 30/44px, groepskop 25/30px, kaartkop 21/22px. */
.av-kgroup > h3{font-size:clamp(25px,2.1vw,30px);line-height:1.25;margin:0 0 18px}

/* CSS3: .av-kbadge had geen donkere variant. background:rgba(203,166,98,.16)
   op --av-navy wordt effectief ongeveer #36393F en de tekstkleur #7d6229 komt
   daar uit op 1,95:1. Het thema heeft wel navy-varianten voor .av-kaart, de
   kaart-h3, .av-kspecs, .av-kcta en .av-kmeer, maar niet voor de badge, dus
   een donkere sectie met productkaarten die een badge dragen was onleesbaar. */
.av-sec-dark .av-kbadge,.av-sec-navy .av-kbadge,.av-sec-slate .av-kbadge{
  background:rgba(203,166,98,.22);color:var(--av-gold-light)}

/* CSS6: .av-art had geen regels voor een donkere sectie terwijl .av-kaart ze
   wel heeft. De kaart droeg hard background:#fff plus .av-art p{color:
   rgba(11,19,32,.6)}, en .av-art h3 en .av-lijst li hadden helemaal geen
   kleurregel. Op IJsbaden (22) gaf dat drie witte eilanden met onzichtbare
   koppen in een slate-sectie, zonder enige foutmelding. Deze set is de
   tegenhanger van de bestaande .av-sec-dark .av-kaart-regels; de waarden zijn
   letterlijk die van de inline reparatie die op 22 stond, zodat het uiterlijk
   daar niet verandert. .av-kop en .av-lees staan op wit op #7d6229 (5,75:1);
   op een donker paneel is dat onleesbaar, dus die gaan naar het merkgoud,
   gelijk aan wat .av-sec-dark .av-kmerk voor de productkaart doet. */
.av-sec-dark .av-art,.av-sec-navy .av-art,.av-sec-slate .av-art{
  background:rgba(11,19,32,.28);border-color:rgba(203,166,98,.32)}
.av-sec-dark .av-art p,.av-sec-navy .av-art p,.av-sec-slate .av-art p{
  color:rgba(245,245,245,.8)}
.av-sec-dark .av-art h3,.av-sec-navy .av-art h3,.av-sec-slate .av-art h3{
  color:var(--av-paper)}
.av-sec-dark .av-art .av-kop,.av-sec-navy .av-art .av-kop,.av-sec-slate .av-art .av-kop,
.av-sec-dark .av-art .av-lees,.av-sec-navy .av-art .av-lees,.av-sec-slate .av-art .av-lees{
  color:var(--av-gold)}

/* CSS9: .av-shead p heeft margin:0, dus twee opeenvolgende alineas in een
   sectiekop plakten op 0px aan elkaar en lazen als een blok. */
.av-shead p + p{margin-top:14px}

/* CSS8: drie inline oplossingen van de homepage horen in het thema, anders
   loopt pagina 14 uiteen met de Merken-hub (18). De modelregel ging daarbij
   van rgba(245,245,245,.5) naar --av-gold-light: dat is ook een contrastfix,
   van 4,63:1 naar 8,57:1 op --av-navy. */
.av-sec-dark .av-merk h3 a,.av-sec-dark .av-merk .av-model b{color:var(--av-gold)}
.av-sec-dark .av-merk .av-model{color:var(--av-gold-light)}

/* CSS10, vervolg: lopende tekst begrenzen op KOLOMniveau in plaats van de
   sectie in te kaderen. Zonder deze regels loopt een alinea op 1920px over de
   volle 1776px, dus ruim 190 tekens per regel. .av-shead (60ch), .av-faq p
   (70ch), .av-hero-lead (46/50ch) en .av-pagecontent (74ch) hadden dit al.
   Alles blijft links bij de gutter beginnen; niets wordt gecentreerd. */
.av-sec > .av-wrap > p,
.av-split > * > p,
.av-dealer p,
.av-note{max-width:70ch}

/* Lightbox-trigger. Absoluut gepositioneerd binnen .av-kfig (die staat al op
   position:relative), dus het beeld zelf verschuift niet en de flex-centrering
   van de figuur verandert niet. Het hele beeldvlak is het tikdoel, ruim boven
   de 44px. Dit element wordt uitsluitend door av-lightbox-<versie>.js
   aangemaakt: zonder JavaScript staat er niets extras in de kaart. */
.av-lbtrig{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;
  min-width:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;
  font:inherit;color:inherit;cursor:zoom-in}
.av-lbtrig::after{content:"";position:absolute;right:6px;bottom:6px;width:34px;height:34px;
  background:rgba(11,19,32,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.6-4.6M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E") no-repeat center/19px 19px;
  opacity:0;transition:opacity .22s}
.av-kaart:hover .av-lbtrig::after,.av-lbtrig:hover::after,.av-lbtrig:focus-visible::after{opacity:1}
@media (hover:none){.av-lbtrig::after{opacity:1}}

/* CSS5: de lightbox zelf. Daniël: "Kunnen we alle productfoto's die in de
   productoverzichten gebruikt worden klikbaar maken, zodat er van die foto een
   grote/high-res foto in popup komt?" Geen externe bibliotheek: een native
   <dialog> met showModal(), zodat het focusslot, Escape en de toplaag uit de
   browser zelf komen. Het beeld wordt NOOIT opgeschaald: de img krijgt zijn
   eigen pixelmaat als width/height-attribuut mee en krimpt alleen via
   max-width en max-height. */
.av-lb{border:0;padding:0;margin:auto;background:transparent;color:var(--av-paper);
  max-width:96vw;max-height:96svh;overflow:visible}
.av-lb::backdrop{background:rgba(11,19,32,.93)}
.av-lb-in{background:var(--av-navy-deep);border:1px solid rgba(203,166,98,.35);
  padding:0 14px 14px}
.av-lb-bar{display:flex;justify-content:flex-end;align-items:center;min-height:52px}
.av-lb-close{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-width:44px;min-height:44px;margin-right:-4px;padding:0;border:0;
  background:var(--av-gold);color:var(--av-navy-deep);cursor:pointer}
.av-lb-close:hover{background:var(--av-gold-light)}
.av-lb-img{display:block;width:auto;height:auto;max-width:100%;
  max-height:calc(96svh - 132px);margin:0 auto}
.av-lb-cap{margin:12px 0 0;font-size:13.5px;line-height:1.6;
  color:rgba(245,245,245,.82);max-width:70ch}

@media (min-width:1024px){
  /* CSS8: de kaarthoogte die op de homepage met een inline padding is gezet,
     hoort in het thema, anders wijkt de Merken-hub (18) af van de homepage. */
  .av-merk{padding-block:56px}

  /* CSS10: een tekst-plus-beeldblok mag binnen circa 1440px blijven, dat staat
     de breedteregel expliciet toe. Bewust NIET gecentreerd: het blok begint bij
     de linkergutter, gelijk met de .av-shead erboven, en de speling valt rechts.
     Zou het gecentreerd worden, dan staat het op 1920px 168px naar binnen ten
     opzichte van de sectiekop erboven, en dat leest als een uitlijningsfout. */
  .av-split{max-width:1440px}
}


/* =========================================================
   Versie 1.29, 24-09-2026: twee punten. De contrastfix op .av-foot-bot staat
   hierboven bij zijn eigen component; de donkere .av-faq-variant staat hier.
   ========================================================= */

/* De FAQ had geen variant voor een donkere sectie, anders dan .av-kaart,
   .av-kmerk en .av-kbadge die die sinds 1.28 wel hebben. .av-faq p stond hard
   op rgba(11,19,32,.62) en .av-faq details op een scheidingslijn van
   rgba(11,19,32,.14): allebei donker op donker, dus een FAQ in een navy, dark
   of slate sectie zou onleesbare tekst geven zonder enige foutmelding. De
   waarde .78 is dezelfde die .av-kmeer p al voert op een donkere sectie, dus
   geen nieuwe tint. Gemeten: 10,57:1 op --av-navy-deep, 9,17:1 op --av-navy en
   7,10:1 op --av-slate. De summary erft --av-paper (17,07 / 14,23 / 10,50:1) en
   de gouden chevron heeft al een eigen kleur, dus die hebben geen regel nodig.
   Additief: op 24-09-2026 stond er nul .av-faq in een donkere sectie, gemeten
   over alle 20 pagina's en 11 berichten. */
.av-sec-dark .av-faq p,.av-sec-navy .av-faq p,.av-sec-slate .av-faq p{color:rgba(245,245,245,.78)}
.av-sec-dark .av-faq details,.av-sec-navy .av-faq details,.av-sec-slate .av-faq details{border-bottom-color:rgba(245,245,245,.22)}

/* ---------------- icoonrij naast icoonloze koppen (25-09-2026, versie 1.30) ----
   Oorzaak: .av-ich is een flexrij met gap:12px en .av-ic is 26px breed, dus een
   kop MET icoon begint 38px verder naar rechts dan een kop zonder. Zolang alle
   koppen in een kolom een icoon dragen valt dat niet op (dat is het geval op 19,
   21, 22, 23, 26, 28, 167 en 219). Op Mojodas (29) staan sinds de icoonopschoning
   van 23-09-2026 drie .av-ich onder elkaar in dezelfde kolom waarvan er nog maar
   een een icoon heeft, en daar leest die 38px als een uitlijningsfout. Gemeten op
   360, 390, 768, 1440 en 1920px: 38,0px op alle vijf.

   De regel reserveert de icoonplek (26px plus de 12px gap) voor een icoonloze
   .av-ich, maar uitsluitend binnen een blok waar ook echt een icoonrij staat. Een
   kolom met alleen icoonloze koppen wordt dus niet aangeraakt, en een kolom met
   alleen icoonrijen ook niet. De pseudo is 1px hoog, zodat de rijhoogte en dus de
   verticale maatvoering ongewijzigd blijft.

   Bewust een eigen regel en niet aangehaakt aan een bestaande selectorlijst: een
   browser zonder :has() laat de hele regel vallen en houdt precies het gedrag van
   1.29, in plaats van een hele selectorlijst te verliezen. */
:where(div,section,article,aside,main,li,td):has(> .av-ich > .av-ic) > .av-ich:not(:has(> .av-ic))::before{
  content:"";flex:0 0 26px;height:1px}

/* =========================================================
   VERSIE 1.31 (25-09-2026) - feedbackronde Mitch van 25-09-2026
   Vier punten, alle vier uitsluitend in de thema-CSS. Geen paginacontent geraakt.
   ========================================================= */

/* ---------------- 1.31 / PUNT 1: kaart volledig klikbaar, hover die dat laat zien ----------------
   Mitch, 25-09-2026, punt B3: "alleen de titel van de categorie is nu klikbaar, en er is een heel
   subtiel hovereffect. Kan je de kaart niet helemaal klikbaar maken en dat hovereffect iets
   duidelijker is dat je naar die pagina dan kan gaan?" En punt B6 over de artikelkaarten op de
   homepage: "Eerlijke antwoorden sectie ook kaart probleem van aanklikken - kan je dit nog
   aanpassen?"

   Opgelost met een uitgerekt ::after op de bestaande link, dus zonder een letter paginacontent te
   wijzigen. Gemeten aandeel van de kaart dat klikbaar was, op 1440px:
   .av-merk op 14  2,7 tot 8,2 procent,  .av-merk op 18  5,0 tot 12,5 procent,
   .av-art op 14  13,5 tot 22,4 procent, .av-art op 15  6,4 procent, .av-art op 17  7,0 procent.
   Na deze regels is dat overal 100 procent; met negen meetpunten per kaart getest ging het van
   0 van de 9 naar 9 van de 9 rake punten, telkens naar de juiste href.

   Waarom h3 a EN a.av-lees allebei een ::after krijgen: welke link er in een kaart staat verschilt
   per pagina. Op 15 en 17 draagt alleen .av-lees de link (de h3 is daar kale tekst), op 14 draagt
   alleen de h3 hem, op 18 en op de homepage-artikelkaarten staan ze er allebei. Gemeten: in ELKE
   kaart met twee links wijzen die twee naar exact dezelfde href (5 kaarten op 18, 3 op 14), dus de
   bovenste overlay dekt de andere link af zonder dat er een bestemming onbereikbaar wordt.

   .av-art op pagina 22 heeft GEEN link (drie kaarten, puur uitleg). Die krijgt dus geen overlay en
   houdt bewust de bestaande 1.30-hover; hij wordt niet klikbaar gemaakt.
   .av-art op pagina 25 en .av-row op 14 en 16 zijn zelf al een <a> en waren al 100 procent
   klikbaar; die zijn niet aangeraakt.
   .av-kaart (de productkaart, 181 stuks) krijgt bewust GEEN uitgerekte link: daar staan drie
   bedieningselementen in (de lightbox-knop over het beeld, de details/summary-uitklap en de
   model-CTA), en een overlay zou de eerste twee onbereikbaar maken. Zie het verslag. */
.av-art{position:relative}
.av-merk h3 a::after,.av-merk a.av-lees::after,
.av-art h3 a::after,.av-art a.av-lees::after{content:"";position:absolute;inset:0;z-index:1}
/* Toetsenbord: de focusring hoort om de KAART te staan, niet om het stukje tekst. Het uitgerekte
   ::after dekt de kaart exact, dus de outline daarop tekent vanzelf om de hele kaart. Zo is geen
   :has() nodig voor de focusstaat en werkt hij ook in een oudere browser. */
.av-merk h3 a:focus-visible,.av-merk a.av-lees:focus-visible,
.av-art h3 a:focus-visible,.av-art a.av-lees:focus-visible{outline:0}
.av-merk h3 a:focus-visible::after,.av-merk a.av-lees:focus-visible::after,
.av-art h3 a:focus-visible::after,.av-art a.av-lees:focus-visible::after{
  outline:2px solid var(--av-gold);outline-offset:4px}
/* Duidelijker hover. Was: alleen border-color plus translateY(-3/-4px). Nu erbij een gouden
   binnenring (leest als een dikkere rand zonder dat de layout verschuift) en een echte schaduw,
   plus een grotere sprong. Geen nieuwe kleur: var(--av-gold) en het navy uit het palet.
   Gescoped met :has() op kaarten die ECHT een link dragen, zodat een kaart zonder link (pagina 22)
   niet gaat ogen alsof je erop kunt klikken. Een browser zonder :has() laat deze regel vallen en
   houdt exact het gedrag van 1.30. */
.av-merk:has(h3 a,a.av-lees):hover,.av-art:has(h3 a,a.av-lees):hover{
  border-color:var(--av-gold);transform:translateY(-6px);
  box-shadow:0 0 0 1px var(--av-gold) inset,0 16px 34px rgba(11,19,32,.16)}
/* Kop naar goud, maar ALLEEN op .av-merk: die kaart staat op var(--av-navy), daar haalt het
   merkgoud 6,78:1. Op de witte .av-art zou goud 2,29:1 geven, dus daar geen kleurwissel maar een
   onderstreping op de CTA-tekst: dat is net zo duidelijk en kost geen contrast. */
.av-merk:has(h3 a,a.av-lees):hover h3 a{color:var(--av-gold)}
.av-merk:has(a.av-lees):hover a.av-lees,.av-art:has(a.av-lees):hover a.av-lees{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------------- 1.31 / PUNT 2: uitlijningscontract voor de productkaarten ----------------
   Mitch, 25-09-2026, punt C5: "Bij productkaarten is de uitlijning beter, maar elk scheidslijn
   onderdeel hoort juist met elkaar te zijn uitgelijnd - titel, usp's en dan moet meer over dit
   model ook overal op dezelde hoogte beginnen. Nu door zon knp bij plug en play werkt alles ineens
   dan niet meer, plaats die dan niet op een manier die dit verstoord! Dit is weer relevant voor
   alle productoverzichten."

   Gemeten op pagina 19 op 1440px, spreiding binnen een kaartrij, voor deze versie:
   merklabel 0px, badge 0px, kaartkop 33,7px (7 van de 15 rijen), specblok 33,7px (7 rijen),
   uitklap 77,6px (14 rijen), CTA-bovenkant 22,1px (11 rijen).
   De 33,7px is exact de hoogte van de .av-kbadge plus zijn ondermarge; de rest komt uit koppen die
   op twee regels vallen en uit speclijsten van ongelijke lengte.

   Route: grid-template-rows:subgrid op de kaart EN op .av-kbody, met een expliciete grid-row per
   onderdeel. Daarmee delen alle kaarten in een rij dezelfde zes rijhoogtes, en is elk onderdeel per
   definitie op dezelfde hoogte. Expliciete plaatsing en geen auto-placement, zodat een ONTBREKENDE
   badge gewoon een lege rij achterlaat in plaats van alles een rij op te schuiven, en zodat een
   verborgen merklabel (body.parent-pageid-18 op de vijf merkpaginas) niets verschuift.
   Een vaste rijhoogte per onderdeel is bewust NIET gekozen: die lost de badge wel op maar niet een
   kop van twee regels of een speclijst van ongelijke lengte, en hij breekt zodra er ergens een
   langere kop bij komt.

   Na deze regels, gemeten op 19, 20, 26 en 219 op 360, 390, 412, 768, 1024, 1440 en 1920px:
   spreiding 0,0px op alle zes de onderdelen, 0 rijen met ongelijke kaarthoogte, 0 kaarten met
   interne overflow, en de rijafstand tussen kaartrijen onveranderd op circa 22px.

   row-gap:0 op de twee subgrids: zonder dat erft elke rij BINNEN de kaart de 22px van .av-kaarten.
   justify-self:start op de badge: een grid-item wordt geblokkeerd en zou de volle kolombreedte
   vullen, waardoor het gouden badgevlak over de hele kaartbreedte kwam te staan (gemeten 82,2px
   naar 268,8px). Met justify-self:start zijn de badgebreedtes exact gelijk aan 1.30.
   De CTA krijgt bewust GEEN justify-self: die staat in 1.30 al op de volle kolombreedte met zijn
   gouden onderlijn, en dat blijft zo (gemeten 268,8px voor en na).
   margin-top:0 plus align-self:start op de CTA: de margin-top:auto uit 1.30 duwt hem binnen zijn
   eigen rij naar beneden, waardoor de BOVENkant weer uiteen loopt. Buiten @supports blijft
   margin-top:auto gewoon gelden, dus een browser zonder subgrid houdt exact het gedrag van 1.30. */
@supports (grid-template-rows: subgrid){
  .av-kaart{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0}
  .av-kbody{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
  .av-kfig{grid-row:1}
  /* LET OP, dit ging in 1.31 mis en is in 1.32 gecorrigeerd: de rijnummers BINNEN een subgrid
     tellen vanaf 1 van dat subgrid zelf, niet vanaf de rij van de ouder. .av-kbody beslaat zes
     rijen, dus zijn geldige rijnummers zijn 1 tot en met 6. In 1.31 stonden hier 2 tot en met 7;
     de CTA viel daardoor buiten het bereik, kreeg een eigen impliciete rij en schoof over de
     uitklap heen (gemeten op 19: .av-kmeer 706,8 tot 752,7px en .av-kcta beginnend op 706,8px,
     dus 45,9px overlap). Alle kaarten schoven even hard op, dus de uitlijningsmeting gaf wel
     netjes 0 spreiding: die meet de onderlinge uitlijning, niet de overlap binnen een kaart.
     Daarom staat er sinds 1.32 ook een expliciete overlapcontrole in de QA. */
  .av-kmerk{grid-row:1}
  .av-kbadge{grid-row:2;justify-self:start}
  .av-kaart h3{grid-row:3}
  .av-kspecs{grid-row:4}
  .av-kmeer{grid-row:5}
  .av-kcta{grid-row:6;margin-top:0;align-self:start}
}

/* ---------------- 1.31 / PUNT 3: FAQ in twee kolommen ----------------
   Mitch, 25-09-2026, punt C10: "FAQ sectie is alles onder elkaar met veel te veel scrollen,
   overweeg dan naast elkaar te zetten met alle nieuwe ruimte - weer relevant voor alle pagina's."

   Vanaf 1024px twee kolommen, met align-items:start zodat een openklappend antwoord alleen zijn
   eigen rij hoger maakt en de buurvraag niet verspringt. Gemeten op 19, 20, 22 en 167: bij het
   openen van een vraag springt 0 van de items naar een andere kolom en blijft de buurvraag in
   dezelfde rij op exact dezelfde y-positie staan.
   Rij-voor-rij plaatsing (de gewone auto-placement), dus de visuele volgorde is links naar rechts
   en daarna omlaag, gelijk aan de DOM-volgorde: een schermlezer en de tabvolgorde lopen dezelfde
   route als het oog. Gecontroleerd op alle gemeten breedtes.

   Hoogte van het FAQ-blok, voor naar na op 1440px: pagina 19 (20 vragen) 1465 naar 818px,
   pagina 167 (12 vragen) 902 naar 498px, pagina 22 (14 vragen) 1037 naar 643px, pagina 20
   (3 vragen) 296 naar 229px. Op 1920px pagina 19 van 1465 naar 792px.

   Gescoped op .av-sec, dus uitsluitend de FAQ in een paginasectie. De FAQ in een kennisbankartikel
   staat in .av-pagecontent en is daar 689px breed (leeskolom van 820px); twee kolommen zouden daar
   ongeveer 330px per kolom geven, en die artikelen hebben vier tot zes vragen, dus geen
   scrollprobleem. Die blijft dus eenkoloms.
   Regellengte na de wijziging, gemeten: 52 tekens op 1024px, 65 op 1280, 73 op 1440 en 78 op 1920
   (daar begrenst de bestaande max-width:70ch op .av-faq p de alinea al). */
@media (min-width:1024px){
  .av-sec .av-faq{display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(30px,3.6vw,72px);align-items:start}
}

/* ---------------- 1.31 / PUNT 4: hero-maatvoering op een sitebrede pagina ----------------
   Mitch, 25-09-2026, punt B1: "Doordat we van ingekaderd design naar sitebreed staan de meeste
   content secties nu nog steeds erg ingekaderd, er kan meer gebruik worden gemaakt van de breedte
   die we nu hebben. Dit is relevant voor alle secties en HERO's op vrijwel elke pagina. Een goed
   voorbeeld is bijlage 1: de H1 en introductietekst staan nu helemaal links en de tekst is
   horizontaal erg ingekaderd waardoor de H1 nu zelfs 3 regels heeft -> dit hoort niet"

   Gemeten op 1440px, met een beschikbare tekstkolom van 1309px:
   homepage-H1 637px (49 procent van de kolom) en 3 regels, paginahero-H1 590px (45 procent),
   hero-lead 563px (43 procent). Op 1920px, kolom 1776px: 36, 33 en 32 procent.
   De begrenzers zijn max-width:14ch op .av-hero h1, 20ch op .av-pagehero h1 en 46ch op
   .av-hero-lead, alle drie uit de tijd van de kolom van 1280px.

   Nieuwe waarden vanaf 1280px: 20ch, 26ch en 56ch. Resultaat, gemeten:
   homepage-H1 van 3 naar 2 regels op 1280, 1366, 1440, 1600, 1920 en 2560px,
   paginahero-H1 van 3 naar 2 regels op Aanbod (16) en Kennisbank (25),
   hero-lead van 4 naar 3 regels op 14, 17, 22, 26 en 219.

   WAAROM PAS VANAF 1280px, en niet vanaf 1024px: de hero-overlay is viewport-relatief
   (90deg, .86 - .80 op calc(50% + 40px) - .36 op calc(50% + 300px) - .12 op 100%), dus hoe smaller
   het venster, hoe eerder de tekst in het lichte deel van de foto valt. Doorgerekend op de echte
   foto-pixels van elke hero: met 20ch komt de homepage-H1 op 1024px uit op 3,59:1 en op 1100px op
   5,11:1, tegen 8,92:1 met de huidige 14ch. Beneden 1280px verandert er daarom niets.
   Vanaf 1280px is de laagste gemeten waarde over alle heros: H1 7,24:1, lead 5,02:1 en het gouden
   label 5,10:1, alle ruim boven 4,5:1.
   De overlay zelf is bewust NIET aangepast: donkerder maken zou de foto weer wegdrukken, en dat is
   precies de klacht die op 14-09-2026 tot versie 1.25 leidde. */
@media (min-width:1280px){
  .av-hero h1{max-width:20ch}
  .av-pagehero h1{max-width:26ch}
  .av-hero-lead{max-width:56ch}
}
/* =========================================================
   Versie 1.33, 25-09-2026 (ronde B, de laatste thema-uitrol voor de
   contentronde). Vier punten, alle vier uitsluitend in de thema-CSS plus een
   nieuw scriptbestand assets/av-filter-<versie>.js. Er is in deze ronde GEEN
   paginacontent aangeraakt; de markup van punt 3 en punt 4 komt in ronde C.
   ========================================================= */

/* ---------------- PUNT 1: de sectiekop-begrenzing ----------------
   .av-shead stond op max-width:60ch. Die grens sloeg op de HELE sectiekop,
   dus ook op de H2 erin, en hij stamt uit de tijd dat de kolom nog 1280px was.
   Sinds 1.28 loopt de wrapper van gutter tot gutter, en sindsdien breken
   koppen midden op de pagina op drie regels terwijl de sectie maar een derde
   van de breedte vult.

   Gemeten met .automation/breedtecheck.py op de uitgeleverde 1.32, over
   zestien pagina's op 1440 en 1920px: 39 bevindingen. Met deze twee regels
   dertien, en die dertien zijn allemaal S5 (secties die alleen tekst dragen,
   dus contentwerk voor ronde C).

   De hero-koppen hebben hier niets nodig: die zijn in 1.32 al van 14 naar 20ch
   (.av-hero h1) en van 20 naar 26ch (.av-pagehero h1) gegaan, vanaf 1280px. */
.av-shead{max-width:none}
.av-shead p{max-width:62ch}

/* ---------------- PUNT 2: .av-art die zelf een <a> is ----------------
   Eigen bevinding uit ronde A: de elf kaarten op Kennisbank (25) zijn wel
   volledig klikbaar (ze zijn zelf een <a class="av-art">), maar ze kregen de
   sterkere hover van 1.32 niet, want die is gescoped met :has(h3 a,a.av-lees)
   en zulke links staan er niet in: de CTA is daar een <span class="av-lees">.
   Hetzelfde component had daardoor twee hoversterktes.

   Opgelost met een tweede ingang op dezelfde hoverstaat: a.av-art. Bewust
   GEEN :has() nodig, dus dit werkt ook in een browser zonder :has(). De drie
   .av-art op IJsbaden (22) blijven ongemoeid: dat zijn <article>-elementen
   zonder link, en die horen niet te ogen alsof je erop kunt klikken.

   De focusring hoeft hier niets: de kaart IS de link, dus de globale
   :focus-visible-regel tekent al om de hele kaart. */
a.av-art:hover{border-color:var(--av-gold);transform:translateY(-6px);
  box-shadow:0 0 0 1px var(--av-gold) inset,0 16px 34px rgba(11,19,32,.16)}
/* Zelfde keuze als op de witte .av-art in 1.32: geen kleurwissel naar goud
   (2,29:1 op wit), maar een onderstreping op de CTA-tekst. */
a.av-art:hover .av-lees{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}

/* ---------------- PUNT 3: het categorieblok als gesloten rechthoek ---------
   Mitch, 25-09-2026, letterlijk: "het moet een complete rechthoek worden die
   gevuld staat met interne blokken, het kan dus niet staan dat er witruimte is
   in totale rechthoek."

   Raster: drie kolommen bij drie rijen vanaf 680px, een kolom daaronder.
   Negen cellen, vijf tegels, nul gaten:
     .av-cattegel-groot  vier cellen (rij 1 en 2, kolom 1 en 2)
     .av-cattegel-hoog   twee cellen (rij 1 en 2, kolom 3)
     de drie overige     rij 3, kolom 1, 2 en 3 (automatische plaatsing; rij 1
                         en 2 zijn dan al vol, dus de plaatsing is eenduidig)
   Zet de twee met een klasse geplaatste tegels als eerste twee kinderen.

   De naad tussen de tegels is 1px goud, exact hetzelfde idioom als de
   USP-balk (.av-facts .av-wrap: gap 1px met de gouden kleur als
   rasterachtergrond). Dat is een naad, geen witruimte: elke cel van de
   rechthoek draagt een tegel.

   Er is bewust GEEN aantal-component. Mitch: "Getal rechtsboven in een blok
   voor aantal modellen is overbodig en halen we weg."

   Markup per tegel (ronde C):
     <a class="av-cattegel av-cattegel-groot" href="/jacuzzis/">
       <h3>Jacuzzi's en spa's</h3>
       <p class="av-catsub">...</p>
     </a>
   In plaats van <h3> mag <span class="av-cattitel"> staan waar een kopniveau
   niet klopt; in plaats van <p class="av-catsub"> mag een kale <p>. */
.av-cat{display:grid;grid-template-columns:1fr;gap:1px;
  background:rgba(203,166,98,.30);border:1px solid rgba(203,166,98,.30);
  margin:0}
.av-cattegel{position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;gap:10px;padding:26px 24px;
  min-height:clamp(150px,30vw,200px);
  background:var(--av-navy);color:var(--av-paper);
  transition:background .25s,box-shadow .25s,color .25s}

/* Onderstreping is hier VERBODEN, ook op de kop en de ondersteunende tekst.
   Dit ging in het voorstel mis en Mitch haalde het er expliciet uit. De
   selectoren staan bewust op .av-cat a.av-cattegel (0,2,1), zodat ze ook
   winnen van .av-content-body a (0,2,0), de regel die elke link in de
   leeskolom een gouden onderstreping geeft. */
.av-cat a.av-cattegel,
.av-cat a.av-cattegel:link,
.av-cat a.av-cattegel:visited,
.av-cat a.av-cattegel:hover,
.av-cat a.av-cattegel:focus,
.av-cat a.av-cattegel:focus-visible,
.av-cat a.av-cattegel:active,
.av-cat .av-cattegel h3,
.av-cat .av-cattegel .av-cattitel,
.av-cat .av-cattegel p,
.av-cat .av-cattegel .av-catsub,
.av-cat .av-cattegel span,
.av-cat .av-cattegel b,
.av-cat .av-cattegel em{text-decoration:none}

/* Kop in Playfair Display, ondersteunende tekst in Montserrat. Playfair staat
   lokaal alleen in gewicht 500 (zie de fontbullet), dus 500 en geen 600. */
.av-cat .av-cattegel h3,
.av-cat .av-cattegel .av-cattitel{display:block;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:500;
  font-size:clamp(21px,2.1vw,26px);line-height:1.14;letter-spacing:-0.005em;
  margin:0;color:inherit}
.av-cat .av-cattegel-groot h3,
.av-cat .av-cattegel-groot .av-cattitel{font-size:clamp(26px,3.1vw,38px)}
.av-cat .av-cattegel p,
.av-cat .av-cattegel .av-catsub{display:block;
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-weight:400;
  font-size:14.5px;line-height:1.6;margin:0;max-width:46ch;
  color:rgba(245,245,245,.78)}

/* Drie varianten. Donker is de standaard hierboven.
   Gemeten contrast, kop en ondersteunende tekst:
     donker  op --av-navy      14,23:1 en 9,17:1
     licht   op #fff           18,61:1 en 6,04:1
     goud    op --av-gold       8,13:1 en 5,50:1 */
.av-cat .av-cattegel-licht{background:var(--av-white);color:var(--av-navy-deep)}
.av-cat .av-cattegel-licht p,
.av-cat .av-cattegel-licht .av-catsub{color:rgba(11,19,32,.66)}
.av-cat .av-cattegel-goud{background:var(--av-gold);color:var(--av-navy-deep)}
.av-cat .av-cattegel-goud p,
.av-cat .av-cattegel-goud .av-catsub{color:rgba(11,19,32,.78)}

/* Hoverstaat, even sterk als de kaarthover van 1.32 (gouden binnenring plus
   een echte schaduw), maar BEWUST ZONDER translateY(-6px): een tegel die
   omhoog springt laat een gat vallen in de rechthoek, en dat is precies wat
   Mitch verbiedt. In plaats van de sprong komt de tegel naar voren met een
   z-index en een achtergrondwissel. Geen nieuwe kleuren.
   Gemeten na de wissel: kop 5,00:1 (goud op --av-slate) en tekst 7,11:1. */
.av-cat .av-cattegel:hover{z-index:2;background:var(--av-slate);
  box-shadow:0 0 0 2px var(--av-gold) inset,0 16px 34px rgba(11,19,32,.22)}
.av-cat .av-cattegel:hover h3,
.av-cat .av-cattegel:hover .av-cattitel{color:var(--av-gold)}
.av-cat .av-cattegel:hover p,
.av-cat .av-cattegel:hover .av-catsub{color:rgba(245,245,245,.78)}
/* Op een lichte tegel zou een gouden ring 2,29:1 halen; daar dus navy-deep
   (17,07:1 op --av-paper) en het donkere merkgoud #7d6229 (5,28:1) op de kop. */
.av-cat .av-cattegel-licht:hover{background:var(--av-paper);
  box-shadow:0 0 0 2px var(--av-navy-deep) inset,0 16px 34px rgba(11,19,32,.22)}
.av-cat .av-cattegel-licht:hover h3,
.av-cat .av-cattegel-licht:hover .av-cattitel{color:#7d6229}
.av-cat .av-cattegel-licht:hover p,
.av-cat .av-cattegel-licht:hover .av-catsub{color:rgba(11,19,32,.66)}
/* Op de gouden tegel is een gouden ring onzichtbaar; daar navy-deep
   (10,28:1 op --av-gold-light). */
.av-cat .av-cattegel-goud:hover{background:var(--av-gold-light);
  box-shadow:0 0 0 2px var(--av-navy-deep) inset,0 16px 34px rgba(11,19,32,.22)}
.av-cat .av-cattegel-goud:hover h3,
.av-cat .av-cattegel-goud:hover .av-cattitel{color:var(--av-navy-deep)}
.av-cat .av-cattegel-goud:hover p,
.av-cat .av-cattegel-goud:hover .av-catsub{color:rgba(11,19,32,.78)}

/* Focusstaat op de HELE tegel. outline-offset is negatief, zodat de ring
   binnen de rechthoek blijft staan en ook op de buitenste tegels zichtbaar
   is. Goud haalt 6,78:1 op navy, navy-deep 18,61:1 op wit en 8,13:1 op goud;
   alle drie ruim boven de 3:1 die een focusindicator vraagt. */
.av-cat .av-cattegel:focus-visible{z-index:3;
  outline:3px solid var(--av-gold);outline-offset:-5px}
.av-cat .av-cattegel-licht:focus-visible,
.av-cat .av-cattegel-goud:focus-visible{outline-color:var(--av-navy-deep)}

@media (min-width:680px){
  .av-cat{grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,minmax(clamp(122px,11vw,168px),auto))}
  .av-cat > .av-cattegel{min-height:0}
  .av-cat > .av-cattegel-groot{grid-column:1/3;grid-row:1/3}
  .av-cat > .av-cattegel-hoog{grid-column:3/4;grid-row:1/3}
}
@media (min-width:1024px){
  .av-cattegel{padding:32px 30px;gap:12px}
}

/* ---------------- PUNT 4: filterbalk met uitklap ----------------
   Mitch, 25-09-2026, letterlijk: "ik wil optie A met uitklappen, zorg alleen
   wel dat het uitklappen dan visueel er mooi uit ziet en logisch is, op de
   filter uitklap zelf, niet een onderbalk die dan ineens verschijnt." En
   daarna: "je kan dus meerdere filters aan drukken die er dan bij verschijnen,
   en dat je die ook met kruisje weg kan klikken en per filter meerdere opties
   kunnen aanklikken."

   Vervangt de chipmuur (.av-filter/.av-fchip). Die blijft gewoon bestaan en
   werken; dit is een apart component met eigen klassen, zodat de twee elkaar
   niet kunnen raken tot ronde C de markup omzet.

   Het paneel hangt aan de knop die je aanklikt en staat absoluut (op mobiel
   fixed), dus het duwt de kaarten eronder nooit weg. Het script staat in
   assets/av-filter-<versie>.js en doet niets zolang er geen .av-fbalk op de
   pagina staat.

   Markupcontract (ronde C):
     <div class="av-fbalk" data-target="#av-jacuzzi-modellen">
       <div class="av-fbalk-rail">
         <div class="av-ffacet" data-filter="merk">
           <button type="button" class="av-fknop" aria-expanded="false">
             <span class="av-fknop-naam">Merk</span>
             <span class="av-fknop-keuze" hidden></span>
             <span class="av-fknop-pijl" aria-hidden="true"></span>
           </button>
           <button type="button" class="av-fwis" hidden>
             <span class="av-vh">Merkfilter wissen</span></button>
           <div class="av-fpaneel" hidden>
             <div class="av-fopties">
               <button type="button" class="av-fvink" data-value="harmonic"
                       aria-pressed="false">Harmonic Hot Tubs</button>
             </div>
             <button type="button" class="av-fleeg">Wis dit filter</button>
           </div>
         </div>
       </div>
       <p class="av-ftel" role="status" aria-live="polite"><b>55</b> modellen</p>
     </div>
   De leegmelding blijft de bestaande <p class="av-filter-empty"> in de
   sectie. */
.av-fbalk{position:relative;z-index:6;display:flex;align-items:center;
  gap:12px 18px;flex-wrap:wrap;margin:0 0 34px;padding:14px 16px;
  background:#fff;border:1px solid rgba(11,19,32,.1)}
.av-fbalk-rail{display:flex;flex-wrap:wrap;gap:10px;min-width:0;flex:1 1 auto}
.av-ffacet{position:relative;display:inline-flex;align-items:stretch}

/* De knop is een echte <button> met aria-expanded; het script zet die waarde.
   De rand staat op rgba(11,19,32,.45) = 3,01:1 op wit, dus de begrenzing van
   het bedieningselement haalt de 3:1 van WCAG 1.4.11. */
.av-fknop{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  max-width:min(340px,72vw);padding:9px 14px;font:inherit;font-size:13.5px;
  font-weight:600;line-height:1.3;color:var(--av-navy-deep);background:#fff;
  border:1px solid rgba(11,19,32,.45);cursor:pointer;transition:.2s}
.av-fknop:hover{border-color:var(--av-navy-deep)}
.av-fknop-naam{white-space:nowrap}
.av-fknop-keuze{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:#7d6229}
.av-fknop-keuze[hidden]{display:none}
.av-fknop-pijl{flex:0 0 9px;width:9px;height:9px;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.av-fknop[aria-expanded="true"] .av-fknop-pijl{transform:translateY(1px) rotate(-135deg)}

/* Actief facet: gouden rand op de eigen knop, plus de gekozen waarden als
   tekst op die knop en een kruisje ernaast. De staat wordt dus niet alleen
   met kleur overgebracht. LET OP, gemeten: het merkgoud haalt op wit 2,29:1,
   dus de gouden rand zelf blijft onder de 3:1 die WCAG 1.4.11 voor een
   statusindicator vraagt. De gouden rand is een letterlijke eis van Mitch
   ("elk met een gouden rand op zijn eigen knop"); de niet-actieve rand van
   3,01:1 blijft eronder liggen als begrenzing, en de gekozen waarde staat er
   in #7d6229 (5,75:1) naast. */
.av-ffacet.is-actief .av-fknop{padding:8px 13px;background:rgba(203,166,98,.14);
  border:2px solid var(--av-gold)}
.av-fwis{position:relative;flex:0 0 44px;width:44px;min-height:44px;
  margin-left:-2px;padding:0;font:inherit;color:var(--av-navy-deep);
  background:rgba(203,166,98,.14);border:2px solid var(--av-gold);
  border-left:0;cursor:pointer;transition:.2s}
.av-fwis[hidden]{display:none}
.av-fwis:hover{background:rgba(203,166,98,.26)}
.av-fwis::before,.av-fwis::after{content:"";position:absolute;left:50%;top:50%;
  width:15px;height:2px;background:currentColor}
.av-fwis::before{transform:translate(-50%,-50%) rotate(45deg)}
.av-fwis::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Het paneel. Absoluut, dus het duwt niets weg; het pijltje wijst naar de
   knop waar het aan hangt. --av-fp-pijl wordt door het script gezet. */
.av-fpaneel{position:absolute;top:calc(100% + 10px);left:0;z-index:10;
  width:max-content;min-width:236px;max-width:min(380px,calc(100vw - 32px));
  padding:14px;background:#fff;border:1px solid rgba(11,19,32,.18);
  box-shadow:0 18px 44px rgba(11,19,32,.22)}
.av-fpaneel[hidden]{display:none}
.av-fpaneel::before{content:"";position:absolute;top:-7px;
  left:var(--av-fp-pijl,22px);width:12px;height:12px;background:#fff;
  border-left:1px solid rgba(11,19,32,.18);border-top:1px solid rgba(11,19,32,.18);
  transform:rotate(45deg)}
.av-fopties{display:flex;flex-wrap:wrap;gap:8px;
  max-height:min(46vh,340px);overflow:auto}
/* De chip is een echte <button> met aria-pressed, dus bedienbaar met het
   toetsenbord. Het vinkje is een echt vlak, niet alleen een kleurverschil. */
.av-fvink{display:inline-flex;align-items:center;gap:9px;min-height:40px;
  padding:8px 13px 8px 10px;font:inherit;font-size:13px;font-weight:600;
  line-height:1.3;text-align:left;color:var(--av-navy-deep);background:#fff;
  border:1px solid rgba(11,19,32,.45);cursor:pointer;transition:.18s}
.av-fvink:hover{border-color:var(--av-navy-deep)}
.av-fvink::before{content:"";flex:0 0 16px;width:16px;height:16px;
  border:1px solid rgba(11,19,32,.55);background:#fff}
.av-fvink[aria-pressed="true"]{border-color:var(--av-navy-deep);
  background:rgba(11,19,32,.05)}
.av-fvink[aria-pressed="true"]::before{border-color:var(--av-navy-deep);
  background:var(--av-navy-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-6.9'/%3E%3C/svg%3E") no-repeat center/12px 12px}
.av-fleeg{margin-top:12px;min-height:40px;padding:9px 13px;font:inherit;
  font-size:12.5px;font-weight:600;color:var(--av-navy-deep);background:#fff;
  border:1px solid rgba(11,19,32,.45);cursor:pointer;transition:.18s}
.av-fleeg:hover{border-color:var(--av-navy-deep)}
/* Een uitgeschakeld bedieningselement valt buiten de contrastnorm (WCAG 1.4.3,
   uitzondering voor inactieve onderdelen). */
.av-fleeg[disabled]{opacity:.5;cursor:default}
.av-fleeg[disabled]:hover{border-color:rgba(11,19,32,.45)}

/* Rechts blijft staan hoeveel modellen er overblijven, ook terwijl het paneel
   open is: de telling staat in de balk zelf, niet in het paneel. */
.av-ftel{flex:0 0 auto;margin:0 0 0 auto;font-size:13.5px;font-weight:600;
  color:var(--av-navy-deep);white-space:nowrap}
.av-ftel b{font-weight:600}

/* Alleen voor schermlezers (het kruisje heeft geen zichtbaar label). */
.av-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}

@media (max-width:679px){
  /* De knoppenrij schuift horizontaal. Het paneel staat daarom FIXED in
     plaats van absolute: een absoluut paneel binnen een overflow-x:auto-rail
     wordt afgekapt. Het script zet top en het pijltje in venstermaten. */
  .av-fbalk{flex-wrap:nowrap;gap:10px;padding:12px}
  .av-fbalk-rail{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    scrollbar-width:thin;padding-bottom:2px;
    -webkit-overflow-scrolling:touch}
  .av-ffacet{flex:0 0 auto}
  .av-fknop{max-width:none}
  .av-fpaneel{position:fixed;left:0;right:0;width:auto;max-width:none;
    border-left:0;border-right:0}
  .av-fopties{max-height:min(52vh,420px)}
}
@media (hover:none){
  .av-cat .av-cattegel:hover{background:var(--av-navy);box-shadow:none;z-index:auto}
  .av-cat .av-cattegel:hover h3,
  .av-cat .av-cattegel:hover .av-cattitel{color:inherit}
  .av-cat .av-cattegel-licht:hover{background:var(--av-white)}
  .av-cat .av-cattegel-goud:hover{background:var(--av-gold)}
}

/* =========================================================
   VERSIE 1.34, 25-09-2026. De vijf punten uit
   voorstellen/css-1.34-kandidaat.css, plus de afwerking die dat bestand
   als "TE METEN VOOR UITROL" openliet.
   ========================================================= */

/* ---------------- 1.34 PUNT 1: de splitsectie mag de volle breedte gebruiken ----
   `.av-split{max-width:1440px}` komt uit 1.28 en liet op 1920px een lege strook
   van 408px staan. Mitch, 25-09-2026: "er kan meer gebruik worden gemaakt van de
   breedte die we nu hebben. Dit is relevant voor alle secties en HERO's op vrijwel
   elke pagina." De lopende tekst blijft los begrensd met
   `.av-split > * > p{max-width:70ch}`, dus de regellengte verandert niet.
   Gemeten met .automation/breedtecheck.py over alle zestien pagina's op 1440 en
   1920px: 0 bevindingen voor en 0 na. Op pagina 14 stond deze regel al inline op
   de drie splits; die inline waarde wordt hiermee overbodig maar blijft geldig. */
@media (min-width:1024px){
  .av-split{max-width:none}
}

/* ---------------- 1.34 PUNT 5: beeld in de categorietegel ----------------
   Mitch, 25-09-2026, op de schermafdruk van het gebouwde blok: "hier moeten de
   foto's trouwens terugkomen, de beste foto voor de categorie, blok kan daardoor
   iets groter worden is niet erg."

   Opzet gelijk aan de hero: een echt img-element absoluut binnen de tegel, met
   een overlay op een pseudo-element erboven. Geen CSS background-image, om
   dezelfde reden als bij de hero: die blokkeert de LCP-optimalisatie en draagt
   geen alt-attribuut.

   Markup per tegel:
     <a class="av-cattegel ..." href="...">
       <span class="av-catmedia" aria-hidden="true"><img src="..." alt="" ...></span>
       <h3>Titel</h3><p class="av-catsub">...</p>
     </a>
   Het beeld is decoratief: de linktekst noemt de categorie al, dus alt="" plus
   aria-hidden op de wikkel, hetzelfde patroon als .av-rthumb op de homepage.

   De overlay loopt van onder (waar de tekst staat, want de tegel is
   justify-content:flex-end) naar boven, zodat de foto bovenin zichtbaar blijft en
   de tekst onderin op een vrijwel vlakke kleur valt. Per tegelvariant een eigen
   tint, zodat de drie varianten uit 1.33 herkenbaar blijven. */
.av-cattegel{overflow:hidden}
.av-cattegel > .av-catmedia{position:absolute;inset:0;z-index:0;overflow:hidden;
  display:block}
.av-cattegel > .av-catmedia img{display:block;width:100%;height:100%;
  object-fit:cover}
.av-cattegel > .av-catmedia::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(11,19,32,.93) 0%,rgba(11,19,32,.88) 46%,
    rgba(11,19,32,.60) 80%,rgba(11,19,32,.44) 100%)}
.av-cattegel-licht > .av-catmedia::after{
  background:linear-gradient(to top,
    rgba(255,255,255,.94) 0%,rgba(255,255,255,.90) 46%,
    rgba(255,255,255,.66) 80%,rgba(255,255,255,.50) 100%)}
.av-cattegel-goud > .av-catmedia::after{
  background:linear-gradient(to top,
    rgba(203,166,98,.95) 0%,rgba(203,166,98,.91) 46%,
    rgba(203,166,98,.68) 80%,rgba(203,166,98,.52) 100%)}
/* De kop en de ondersteunende tekst moeten boven het beeld staan. Ook een kale
   p is toegestaan in het markupcontract, dus die staat er los bij. */
.av-cattegel > h3,
.av-cattegel > .av-cattitel,
.av-cattegel > p,
.av-cattegel > .av-catsub{position:relative;z-index:1}

/* De hoverstaat van 1.33 wisselt de achtergrondkleur van de tegel, en die zit nu
   achter het beeld. De overlay wisselt daarom mee, met exact dezelfde drie
   hoverkleuren als 1.33 (slate, paper, gold-light). Gescoped op (hover:hover),
   zodat een aanraakscherm de hoverstaat niet vasthoudt; dat is dezelfde reden als
   het (hover:none)-blok onderaan 1.33. */
@media (hover:hover){
  .av-cat .av-cattegel:hover > .av-catmedia::after{
    background:linear-gradient(to top,
      rgba(44,58,82,.93) 0%,rgba(44,58,82,.88) 46%,
      rgba(44,58,82,.62) 80%,rgba(44,58,82,.46) 100%)}
  .av-cat .av-cattegel-licht:hover > .av-catmedia::after{
    background:linear-gradient(to top,
      rgba(245,245,245,.95) 0%,rgba(245,245,245,.91) 46%,
      rgba(245,245,245,.68) 80%,rgba(245,245,245,.52) 100%)}
  .av-cat .av-cattegel-goud:hover > .av-catmedia::after{
    background:linear-gradient(to top,
      rgba(222,188,126,.95) 0%,rgba(222,188,126,.91) 46%,
      rgba(222,188,126,.68) 80%,rgba(222,188,126,.52) 100%)}
}

/* De tegel mag hoger worden nu er beeld in staat; Mitch noemt dat expliciet geen
   bezwaar. Het kandidaatbestand zette daarvoor grid-auto-rows, maar dat raakt
   alleen impliciete rijen: .av-cat legt zijn drie rijen expliciet vast met
   grid-template-rows, dus die regel deed niets. De rijhoogte gaat daarom hier
   omhoog, van clamp(122px,11vw,168px) naar clamp(150px,13vw,200px), en de
   mobiele minimumhoogte van clamp(150px,30vw,200px) naar clamp(186px,40vw,232px).
   grid-auto-rows staat er alsnog bij, voor een eventuele impliciete rij. */
.av-cattegel{min-height:clamp(186px,40vw,232px)}
@media (min-width:680px){
  .av-cat{grid-template-rows:repeat(3,minmax(clamp(150px,13vw,200px),auto));
    grid-auto-rows:minmax(clamp(150px,13vw,200px),auto)}
  .av-cat > .av-cattegel{min-height:0}
}

/* ---------------- 1.34 PUNT 2: variant met vier tegels ----------------
   .av-cat gaat uit van vijf tegels in drie bij drie. Met vier tegels blijft er
   altijd een cel leeg, en dat is precies wat Mitch verbiedt: "het kan dus niet
   staan dat er witruimte is in totale rechthoek." Ronde C1 heeft dat op pagina 25
   opgelost met een id-gescopete style in de paginacontent; dit maakt er een
   themaregel van, zodat die style eruit kan.
   Let op de volgorde: deze regels staan NA de rijhoogte hierboven, want ze hebben
   dezelfde specificiteit (0,1,0) en moeten die overschrijven. */
@media (min-width:680px){
  .av-cat-4{grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(2,minmax(clamp(150px,13vw,200px),auto))}
  .av-cat-4 > .av-cattegel-groot,
  .av-cat-4 > .av-cattegel-hoog{grid-column:auto;grid-row:auto}
}

/* ---------------- 1.34 PUNT 3: gelijke kop in de onderste tegelrij ----------
   De kop in de onderste rij verspringt 23,2px zodra de ondersteunende tekst een
   regel korter is. Gemeten bij de uitrol van 1.33 en daar als contentwerk
   gemeld; een vaste minimumhoogte lost het op zonder de rechthoek te raken. */
.av-cat > .av-cattegel:not(.av-cattegel-groot):not(.av-cattegel-hoog) .av-catsub{
  min-height:3.2em}

/* ---------------- 1.34 PUNT 4: filterpaneel op mobiel ----------------
   Het paneel hangt onder de knop en niet onder de balk, waardoor het 7px van de
   onderrand van de balk overlapt. Gemeten op 390px: balk 16 tot 88, paneel vanaf
   81. Cosmetisch, gemeld bij de uitrol van 1.33. */
@media (max-width:1023px){
  .av-fbalk .av-fpaneel{margin-top:7px}
}

/* ---------------- 1.34: de beeldplaatsvervanger oogt niet meer als een gat ----
   Mitch, 25-09-2026, bij een schermafdruk van twee gestreepte kaders: "nog extreem
   veel placeholders ook - hier moet ook wat mee worden gedaan."
   De plaatsvervanger stond op het navy-verloop met gouden strepen. In een kaartrij
   waar de buren een productfoto op #fbfaf8 tonen, leest zo'n donker blok als een
   gat. Het vlak wordt daarom licht, in dezelfde toon als .av-kfig zelf, met een
   heel lichte structuur en een haarlijn als begrenzing. De typografie blijft
   ongewijzigd: modelnaam in Playfair, status eronder in gewone tekst, en
   nadrukkelijk GEEN hoofdletterlabel erboven (dat is de eyebrow-tell uit de
   anti-AI-lijst). Gescoped op de twee plekken waar de plaatsvervanger werkelijk
   staat: 46 keer in een .av-kfig (productkaart) en 1 keer in een .av-split
   (pagina 23). De hero- en rthumb-varianten van .av-ph worden nergens gebruikt en
   blijven ongemoeid. */
.av-kfig .av-ph,
.av-split .av-ph{
  background:linear-gradient(158deg,#fbfaf8 0%,#f4f1ea 58%,#ece7dc 100%);
  box-shadow:inset 0 0 0 1px rgba(11,19,32,.08)}
.av-kfig .av-ph::before,
.av-split .av-ph::before{opacity:1;
  background:repeating-linear-gradient(120deg,
    rgba(11,19,32,.05) 0 1px,transparent 1px 22px)}
.av-kfig .av-ph span,
.av-split .av-ph span{color:rgba(11,19,32,.72)}

/* =========================================================
   1.35 (02-10-2026): KENNISBANKARTIKEL IN ONTWERP C, plus het lichtere beeld in .av-cat
   Alleen toegevoegd, geen bestaande regel gewijzigd. Mitch, 02-10-2026, letterlijk:
   "Design C is het beste, en dan met kort antwoord verwerkt voor LLM leesbaarheid
   (maar niet in de hero)".
   index.php zet een artikel pas in deze opbouw als de content al uit
   section.av-sec-secties bestaat; een niet omgezet artikel rendert exact als in 1.34
   (smalle leeskolom in article.av-pagecontent). Alles hieronder hangt daarom aan
   .av-post of aan een eigen klasse die alleen in een omgezet artikel staat.
   Markupcontract: handover-artikelontwerp-C-2026-10-02.md in de klantmap.
   ========================================================= */

/* ---- kop: navy-deep, typografisch, geen foto, geen kort antwoord ---- */
.av-posthero{padding:44px 0 48px}
.av-posthero .av-kruimel{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;
  margin:0 0 18px;font-size:13.5px;line-height:1.7;color:rgba(245,245,245,.72)}
.av-posthero .av-kruimel a{display:inline-block;padding:2px 0;color:var(--av-paper);
  text-decoration:underline;text-decoration-color:rgba(203,166,98,.75);
  text-underline-offset:3px}
.av-posthero .av-kruimel a:hover{color:var(--av-gold)}
.av-posthero .av-postmeta{margin:20px 0 0;font-size:14px;line-height:1.6;
  color:rgba(245,245,245,.72)}
.av-posthero .av-postmeta .av-sep{margin:0 12px}
@media (min-width:1024px){
  .av-posthero{padding:68px 0 72px}
}

/* ---- secties binnen een omgezet artikel: iets compacter dan een paginasectie ---- */
.av-post .av-sec{padding:56px 0}
@media (min-width:1024px){
  .av-post .av-sec{padding:88px 0}
}
.av-post .av-sec > .av-wrap > h2,
.av-post .av-kort-tekst > h2,
.av-post .av-band-tekst > h2{font-size:clamp(27px,2.7vw,38px);line-height:1.15;
  margin:0 0 22px}
.av-post .av-sec-white > .av-wrap > p,
.av-post .av-sec-paper > .av-wrap > p,
.av-post .av-sec-white .av-kolommen p,
.av-post .av-sec-paper .av-kolommen p,
.av-post .av-kort-tekst p,
.av-post .av-stappen li{color:rgba(11,19,32,.78)}

/* ---- het korte antwoord: eigen blok direct onder de kop, beeld rechts ---- */
.av-kort-grid{display:grid;gap:32px}
.av-kort-tekst p{font-size:18px;line-height:1.65;max-width:70ch;margin:0}
.av-postfig{margin:0;min-width:0}
.av-postfig img{width:100%;height:auto;border-radius:4px}
.av-postfig figcaption{margin-top:10px;font-size:13px;line-height:1.55;
  color:rgba(11,19,32,.68);max-width:60ch}
@media (min-width:900px){
  .av-kort-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(40px,5vw,96px);align-items:center}
}

/* ---- twee kolommen lopende tekst, of tekst met een kanttekening ernaast ---- */
.av-kolommen{display:grid;gap:4px}
.av-kolommen > div{min-width:0}
.av-kolommen p{max-width:70ch}
@media (min-width:1024px){
  .av-kolommen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,96px);align-items:start}
  .av-kolommen > div > p:last-child{margin-bottom:0}
}

/* ---- kanttekening: vervangt het gestreepte .av-note-kader in een artikel ---- */
.av-kant{max-width:62ch;margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid rgba(11,19,32,.2);font-size:14px;line-height:1.65;
  color:rgba(11,19,32,.72)}
.av-kant b{display:block;margin:0 0 6px;font-family:'Playfair Display',Georgia,serif;
  font-weight:500;font-size:17px;line-height:1.3;color:var(--av-navy-deep)}
@media (min-width:1024px){
  .av-kolommen > .av-kant{margin-top:4px}
}

/* ---- stappen: cellen met een kop in de kopletter, twee kolommen ---- */
.av-stappen{list-style:none;margin:6px 0 30px;padding:0;display:grid;gap:22px}
.av-stappen li{max-width:62ch;font-size:16px;line-height:1.65}
.av-stappen b{display:block;margin:0 0 4px;font-family:'Playfair Display',Georgia,serif;
  font-weight:500;font-size:20px;line-height:1.3;color:var(--av-navy-deep)}
@media (min-width:820px){
  .av-stappen{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px clamp(40px,5vw,96px)}
}

/* ---- signalen: een rij cellen met een dunne gouden lijn (#7d6229) ---- */
/* 1.37: NIET GEBRUIKEN. .av-signalen herhaalde letterlijk de zin erboven (anti-ai-design
   02-10-2026); uit het markupcontract gehaald. De regels blijven alleen voor oude markup. */
.av-signalen{list-style:none;margin:30px 0 0;padding:0;display:grid;
  border-top:1px solid rgba(125,98,41,.45)}
.av-signalen li{padding:16px 18px 16px 0;border-bottom:1px solid rgba(125,98,41,.45);
  font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:20px;
  line-height:1.3;color:var(--av-navy-deep)}
@media (min-width:600px){
  .av-signalen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
@media (min-width:1024px){
  .av-signalen{grid-template-columns:repeat(4,minmax(0,1fr))}
  .av-signalen li{border-bottom:0}
}

/* ---- productband in navy: model, drie specificaties, dealerknop ---- */
.av-band-grid{display:grid;gap:32px;align-items:center}
.av-band-grid > *{min-width:0}
.av-band-tekst > p{color:rgba(245,245,245,.8);max-width:60ch;margin:0}
.av-band-specs{margin:22px 0 28px;padding:0;border-top:1px solid rgba(245,245,245,.16)}
.av-band-specs > div{display:grid;grid-template-columns:minmax(96px,32%) minmax(0,1fr);
  gap:4px 16px;padding:11px 0;border-bottom:1px solid rgba(245,245,245,.16)}
.av-band-specs dt{font-size:14px;line-height:1.5;color:rgba(245,245,245,.66)}
.av-band-specs dd{margin:0;font-size:15px;line-height:1.5;font-weight:600;
  color:var(--av-paper)}
.av-band-beeld{background:var(--av-paper);border-radius:4px;padding:clamp(14px,2vw,28px)}
.av-band-beeld img{width:100%;height:auto}
@media (min-width:900px){
  .av-band-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,96px)}
}

/* ---- verder lezen: twee klikbare kaarten met een kleine afbeelding ---- */
.av-verder-rij{display:grid;gap:18px}
.av-verder-kaart{position:relative;display:grid;
  grid-template-columns:clamp(92px,24vw,150px) minmax(0,1fr);gap:18px;align-items:center;
  padding:12px;background:var(--av-paper);border:1px solid rgba(11,19,32,.08);
  border-radius:4px;color:var(--av-navy-deep);
  transition:box-shadow .25s,transform .25s,border-color .25s}
.av-verder-beeld{display:block;aspect-ratio:5/4;overflow:hidden;border-radius:3px}
.av-verder-beeld img{width:100%;height:100%;object-fit:cover}
.av-verder-tekst{display:grid;gap:6px;min-width:0}
.av-verder-titel{font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:clamp(18px,1.6vw,21px);line-height:1.25}
.av-verder-sub{font-size:14px;line-height:1.55;color:rgba(11,19,32,.72)}
.av-verder-kaart:hover{border-color:var(--av-gold);
  box-shadow:0 0 0 1px var(--av-gold) inset,0 16px 34px rgba(11,19,32,.16);
  transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){
  .av-verder-kaart{transition:none}
  .av-verder-kaart:hover{transform:none}
}
@media (min-width:760px){
  .av-verder-rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}

/* ---- slotzin onder de FAQ ---- */
.av-post .av-faq-slot{margin:28px 0 0}

/* =========================================================
   1.35, PUNT 2: het beeld in .av-cat is zichtbaarder. Mitch, 02-10-2026, bij het
   categorieblok op de homepage op 1920px: "afbeeldingen zijn ook net te donker voor
   diensten overzicht op de homepage".
   Tot 1.34 lag over de hele tegel een verloop van onder naar boven (donker .93 tot .44,
   licht .94 tot .50, goud .95 tot .52). Daardoor was de foto ook bovenin, waar geen
   tekst staat, voor de helft weggedrukt.
   Nu twee lagen: (1) het beeld krijgt over de hele tegel een lichte waas, .10 bovenin
   en .30 onderin; (2) de tekst krijgt zijn eigen strakke vlak, als ::before op de
   kop (h3 of .av-cattitel), dat 64px boven de kop begint, 20px boven de kop vol staat
   (de regelbox van Playfair steekt boven de kop uit) en tot de onderkant van de tegel
   doorloopt. Dat vlak volgt de werkelijke hoogte van het tekstblok, dus
   een ondersteunende tekst van drie regels krijgt net zoveel dekking als een van een.
   Kop en tekst staan allebei op z-index 1; het vlak hoort bij de stapelcontext van de
   kop en ligt dus achter de tekst van kop en alinea, maar boven het beeld.
   Alleen voor een tegel MET beeld (.av-catmedia + h3); een tegel zonder beeld blijft
   exact 1.34. Geen paginacontent gewijzigd.
   In hover is het vlak dichter (slate .97, paper .96): de hoverkop staat in goud
   (#CBA662 op slate) of in #7d6229 (op paper), en die halen 4,5:1 alleen op een bijna
   vlakke ondergrond. Gemeten in 1.34 haalden die hoverkoppen op de echte foto 2,12 tot
   4,02:1; zie de handover voor de meting voor en na.
   ========================================================= */
.av-cattegel > .av-catmedia::after{
  background:linear-gradient(to top,
    rgba(11,19,32,.30) 0%,rgba(11,19,32,.18) 50%,rgba(11,19,32,.10) 100%)}
.av-cattegel-licht > .av-catmedia::after{
  background:linear-gradient(to top,
    rgba(255,255,255,.30) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.10) 100%)}
.av-cattegel-goud > .av-catmedia::after{
  background:linear-gradient(to top,
    rgba(203,166,98,.30) 0%,rgba(203,166,98,.18) 50%,rgba(203,166,98,.10) 100%)}
.av-cattegel > .av-catmedia + h3::before,
.av-cattegel > .av-catmedia + .av-cattitel::before{content:"";position:absolute;
  z-index:-1;left:-48px;right:-48px;top:-64px;bottom:-640px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,19,32,0) 0,rgba(11,19,32,.8) 44px,
    rgba(11,19,32,.84) 100%)}
.av-cattegel-licht > .av-catmedia + h3::before,
.av-cattegel-licht > .av-catmedia + .av-cattitel::before{
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.84) 44px,
    rgba(255,255,255,.88) 100%)}
.av-cattegel-goud > .av-catmedia + h3::before,
.av-cattegel-goud > .av-catmedia + .av-cattitel::before{
  background:linear-gradient(to bottom,rgba(203,166,98,0) 0,rgba(203,166,98,.92) 44px,
    rgba(203,166,98,.94) 100%)}
@media (hover:hover){
  .av-cat .av-cattegel:hover > .av-catmedia::after{
    background:linear-gradient(to top,
      rgba(44,58,82,.30) 0%,rgba(44,58,82,.18) 50%,rgba(44,58,82,.10) 100%)}
  .av-cat .av-cattegel-licht:hover > .av-catmedia::after{
    background:linear-gradient(to top,
      rgba(245,245,245,.30) 0%,rgba(245,245,245,.18) 50%,rgba(245,245,245,.10) 100%)}
  .av-cat .av-cattegel-goud:hover > .av-catmedia::after{
    background:linear-gradient(to top,
      rgba(222,188,126,.30) 0%,rgba(222,188,126,.18) 50%,rgba(222,188,126,.10) 100%)}
  .av-cat .av-cattegel:hover > .av-catmedia + h3::before,
  .av-cat .av-cattegel:hover > .av-catmedia + .av-cattitel::before{
    background:linear-gradient(to bottom,rgba(44,58,82,0) 0,rgba(44,58,82,.97) 44px,
      rgba(44,58,82,.97) 100%)}
  .av-cat .av-cattegel-licht:hover > .av-catmedia + h3::before,
  .av-cat .av-cattegel-licht:hover > .av-catmedia + .av-cattitel::before{
    background:linear-gradient(to bottom,rgba(245,245,245,0) 0,rgba(245,245,245,.96) 44px,
      rgba(245,245,245,.96) 100%)}
  .av-cat .av-cattegel-goud:hover > .av-catmedia + h3::before,
  .av-cat .av-cattegel-goud:hover > .av-catmedia + .av-cattitel::before{
    background:linear-gradient(to bottom,rgba(222,188,126,0) 0,rgba(222,188,126,.92) 44px,
      rgba(222,188,126,.94) 100%)}
}

/* =========================================================
   VERSIE 1.36, 02-10-2026: visuele doorloop van Mitch voor de livegang.
   Bron, letterlijk: feedback-mitch-2026-10-02.md in de klantmap. Plus de
   punten van de coordinator uit de artikelomzetting (30-37, 428-430) en de
   WebKit-test (webkit-test-2026-10-02.md). Alles hieronder is TOEGEVOEGD; geen
   regel uit 1.35 of eerder is gewijzigd. Waar iets anders moet, staat hier een
   overschrijving met gelijke of hogere specificiteit, later in het bestand.
   ========================================================= */

/* ---- 1.36 PUNT 1: homepage-H1 "Internationale wellnessmerken onder één dak" ----
   Besluit Mitch: "A, internationale wellnessmerken onder één dak -> voor nu prima".
   "Internationale wellnessmerken" is op 74px 1040px breed. Met de 20ch-grens van 1.31
   viel de kop vanaf 1280px op drie regels en liep de tweede regel tot in het lichte
   deel van de foto: gemeten 1,35:1 (1280) tot 2,84:1 (1600) op de echte fotopixels.
   De kop krijgt daarom vanaf 1280px een kleiner, meeschalend corps en een grens in em,
   zodat regel 1 precies "Internationale wellnessmerken" is en regel 2 "onder één dak".
   Gemeten op de echte pixels: H1 laagste 5,24:1, het gouden em-deel 5,96:1, op 1280 tot
   2560px; twee regels op elke breedte vanaf 1280. Onder 1280px verandert er niets. */
@media (min-width:1280px){
  #av-main .av-hero h1{font-size:clamp(50px,3.9vw,64px);max-width:14.6em}
}

/* ---- 1.36 PUNT 2: FAQ in twee ZELFSTANDIGE kolommen ----
   Mitch: "Fout bij FAQ qua symmetrie tussen de twee kanten". De twee kolommen van 1.31
   deelden hun rijen: een open vraag links liet rechts een gat. assets/av-extra-1.36.js
   verdeelt de details van elke .av-faq in een .av-sec over twee div.av-faq-kol (eerste
   helft links, tweede helft rechts, DOM-volgorde gelijk aan de leesvolgorde). Het
   bestaande raster van 1.31 (twee kolommen vanaf 1024px, align-items:start) zet die
   twee kolommen naast elkaar, dus hier is alleen de minimumbreedte nodig. Zonder
   JavaScript blijft de weergave van 1.35. */
.av-faq-kol{min-width:0}

/* ---- 1.36 PUNT 3: .av-note zonder gestreept kader ----
   Mitch: "Nog steeds specificatie blokken, was je mee bezig toch?" Geen gestreepte
   rand en geen gekleurd vlak meer, maar kleine tekst met een dunne lijn erboven, in
   de geest van .av-kant (1.35). Tekst en markup van de kaders blijven gelijk. */
.av-note{border:0;border-top:1px solid rgba(11,19,32,.2);background:none;
  padding:14px 0 0;font-size:14px;line-height:1.65;color:rgba(11,19,32,.72)}
.av-note b{font-size:17px;line-height:1.3;margin:0 0 6px}
.av-sec-dark .av-note,.av-sec-navy .av-note,.av-sec-slate .av-note{background:none;
  border-color:rgba(245,245,245,.24);color:rgba(245,245,245,.78)}

/* Links in een kanttekening (.av-kant, 1.35) en in .av-note kregen geen linkstijl:
   alleen #av-main p a heeft die. Zelfde onderstreping als in lopende tekst. */
#av-main .av-kant a:not(.av-btn),#av-main .av-note a:not(.av-btn){
  text-decoration:underline;text-decoration-color:var(--av-gold);
  text-underline-offset:3px;color:var(--av-navy-deep)}
#av-main .av-kant a:not(.av-btn):hover,#av-main .av-note a:not(.av-btn):hover{color:#7d6229}
#av-main .av-sec-dark .av-kant a:not(.av-btn),#av-main .av-sec-navy .av-kant a:not(.av-btn),
#av-main .av-sec-slate .av-kant a:not(.av-btn),#av-main .av-sec-dark .av-note a:not(.av-btn),
#av-main .av-sec-navy .av-note a:not(.av-btn),#av-main .av-sec-slate .av-note a:not(.av-btn){
  color:var(--av-paper)}
#av-main .av-sec-dark .av-kant a:not(.av-btn):hover,#av-main .av-sec-navy .av-kant a:not(.av-btn):hover,
#av-main .av-sec-slate .av-kant a:not(.av-btn):hover,#av-main .av-sec-dark .av-note a:not(.av-btn):hover,
#av-main .av-sec-navy .av-note a:not(.av-btn):hover,#av-main .av-sec-slate .av-note a:not(.av-btn):hover{
  color:var(--av-gold)}
/* .av-kant had geen donkere variant; nu dezelfde waarden als .av-note hierboven. */
.av-sec-dark .av-kant,.av-sec-navy .av-kant,.av-sec-slate .av-kant{
  border-top-color:rgba(245,245,245,.24);color:rgba(245,245,245,.78)}
.av-sec-dark .av-kant b,.av-sec-navy .av-kant b,.av-sec-slate .av-kant b{color:var(--av-paper)}

/* ---- 1.36 PUNT 4: opsomming met een betekenisdragend icoon per item ----
   Mitch: "Bepaalde body secties waar nog tekort is aan visualisatie van iconografie
   of symbolen bij opsomming/overzicht". Markup: ul.av-lijst.av-lijst-ic, met als
   eerste kind van elke li een <svg class="av-ic"> uit het bestaande lijnicoon-systeem
   (24px, stroke, goud). Het pijltje van .av-lijst vervalt alleen in deze variant.
   Een item zonder passend icoon krijgt geen svg en houdt dezelfde inspringing. */
.av-lijst-ic li{padding-left:40px}
.av-lijst-ic li::before{content:none;display:none}
.av-lijst-ic li > .av-ic{position:absolute;left:0;top:12px;width:24px;height:24px}

/* ---- 1.36 PUNT 5 (.av-pkeuzes, .av-pkeuze*, .av-pkbeeld) verwijderd in 1.39: niet meer in
   gebruik sinds 1.37, 0 treffers in pagina's, berichten, sjablonen, opties en meta. ---- */

/* ---- 1.36 PUNT 6: .av-split staat bovenaan uitgelijnd ----
   Mitch: ""Zwemspa's: zwemmen tegen de stroom in" sectie heeft een raar design ...
   Media en tekst ernaast ver van elkaar af - gekke opzet." Oorzaak sitebreed:
   .av-split{align-items:center} uit de eerste versie. Naast een lange tekstkolom zakt
   een korte kolom dan naar het midden, tot 302px onder de bovenkant van de buurkolom
   (gemeten op 15, 19, 21, 22, 23, 27, 28, 167 en 219). Vanaf nu staan beide kolommen
   bovenaan, zoals de drie splits op de homepage al inline deden. */
.av-split{align-items:start}
/* Een klein beeld (bron smaller dan een halve kolom) naast zijn tekst: het beeld links op
   zijn eigen breedte, nooit opgeschaald, de tekst er direct naast op leesbreedte. Zo
   staan beeld en tekst bij elkaar in plaats van aan weerszijden van een lege strook.
   Op mobiel en tot 1360px staat het beeld boven de tekst waar het bij hoort (op 1024px
   werd de tekstkolom naast het beeld 352px langer dan het beeld, op 1280px 154px). Eerst
   gebruikt op 19 (Aquarun, 500 x 450). */
@media (min-width:1024px){
  .av-split.av-split-beeld{grid-template-columns:minmax(0,1fr);max-width:70ch}
}
@media (min-width:1360px){
  .av-split.av-split-beeld{grid-template-columns:minmax(0,max-content) minmax(0,70ch);
    justify-content:start;max-width:none}
}
.av-split-beeld img{display:block;max-width:100%;height:auto;border-radius:4px}

/* ---- 1.36 PUNT 7: link van het assortiment naar de uitleg eronder ----
   Mitch: "een knop ... met een logische CTA die een bezoeker direct naar de body
   content eronder brengt". Secundaire knop in de sectiekop van het assortiment. */
.av-shead .av-naaruitleg{margin:18px 0 0}
.av-shead .av-naaruitleg .av-btn{display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;text-decoration:none}
.av-naaruitleg .av-btn::after{content:"";width:7px;height:7px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}

/* ---- 1.36 PUNT 8: footer met vier kolommen en een regel over de bouwer ----
   Mitch: "Footer: moet deze ondertussen worden geupdate met meer relevante pagina's?"
   en "Beide sites ... moeten in footer nog link krijgen naar Website realisatie door
   MDV Online - heel subtiel dat het eigenlijk niet opvalt." */
.av-foot-top.av-foot-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}
.av-foot-v2 > :first-child{grid-column:1/-1}
@media (min-width:720px){
  .av-foot-top.av-foot-v2{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 32px}
}
@media (min-width:1200px){
  .av-foot-top.av-foot-v2{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
    gap:46px}
  .av-foot-v2 > :first-child{grid-column:auto}
}
.av-foot-v2 .av-foot-col li{overflow-wrap:anywhere}
/* Rustiger dan de onderbalk (12,5px op .55): 11.5px op .5, gemeten 4,9:1 op
   --av-navy-deep. De link valt niet op door kleur, alleen door een vage lijn. */
.av-foot-mdv{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:rgba(245,245,245,.5)}
.av-foot-mdv a{color:inherit;text-decoration:underline;
  text-decoration-color:rgba(245,245,245,.22);text-underline-offset:3px;
  display:inline-block;padding:4px 0;margin:-4px 0}
.av-foot-mdv a:hover{color:var(--av-gold)}

/* ---- 1.36 PUNT 9: honeypot van Formidable zonder JavaScript ----
   Zonder JavaScript toonde Formidable "Indien je een mens bent, laat dit veld leeg"
   (je-vorm, en een zichtbaar veld). display:none haalt het veld ook uit de
   toegankelijkheidsboom, dus een schermlezer biedt het niet als invulbaar veld aan.
   Twee ingangen: de :has-regel, en als vangnet de container zonder class (alle echte
   velden dragen class="frm_form_field ..."). */
#av-main .frm_forms div[id$="_container"]:has(> input.frm_verify),
#av-main .frm_forms div[id^="frm_field_"][id$="_container"]:not([class]),
#av-main .frm_forms input.frm_verify{display:none!important}

/* ---- 1.36 PUNT 10: hogere lage tegels in .av-cat en de hoverring weer zichtbaar ----
   In de lage tegels (onderste rij op 14, alle vier op 25) bleef van de foto alleen de
   bovenrand over. Mitch eerder: "blok kan daardoor iets groter worden is niet erg".
   De rijen met lage tegels gaan omhoog; de grote tegels (rij 1 en 2) blijven gelijk. */
.av-cattegel{min-height:clamp(250px,66vw,300px)}
@media (min-width:680px){
  .av-cat{grid-template-rows:repeat(2,minmax(clamp(150px,13vw,200px),auto))
    minmax(clamp(230px,19.5vw,300px),auto)}
  .av-cat-4{grid-template-rows:repeat(2,minmax(clamp(230px,19.5vw,300px),auto))}
  .av-cat > .av-cattegel{min-height:0}
}
/* De gouden binnenring van de hover viel sinds 1.34 onder de beeldlaag. Hij staat nu
   op een eigen laag boven het beeld en de tekst (pointer-events:none). */
.av-cattegel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:none;transition:box-shadow .25s}
@media (hover:hover){
  .av-cat .av-cattegel:hover::after{box-shadow:0 0 0 2px var(--av-gold) inset}
  .av-cat .av-cattegel-licht:hover::after,
  .av-cat .av-cattegel-goud:hover::after{box-shadow:0 0 0 2px var(--av-navy-deep) inset}
}

/* ---- 1.36, coordinator (artikelen 34 tot 36): beeld en tekst in balans ----
   Een staande foto naast het korte antwoord werd op 1920px 751 tot 827px hoog, in de
   productband 784x929, naast een tekstblok van circa 400px. Nu een maximale hoogte;
   width:auto plus max-width:100% schaalt nooit op boven de eigen pixelmaat. */
@media (min-width:900px){
  .av-postfig img{width:auto;max-width:100%;max-height:clamp(300px,30vw,480px)}
  .av-band-beeld img{display:block;width:auto;max-width:100%;
    max-height:clamp(300px,28vw,460px);margin:0 auto}
}

/* ---- 1.36, coordinator: geen wees-item in .av-stappen ----
   Drie stappen in twee kolommen zetten de derde alleen op een tweede rij (34). Vanaf
   1024px krijgt een oneven aantal (3, 5) drie kolommen; daaronder loopt een oneven
   laatste stap over de volle breedte. */
@media (min-width:820px) and (max-width:1023px){
  .av-stappen > li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:1024px){
  .av-stappen:has(> li:nth-child(n+3):last-child:nth-child(odd)){
    grid-template-columns:repeat(3,minmax(0,1fr))}
  /* zeven stappen: de zevende loopt over de volle rij in plaats van als wees */
  .av-stappen:has(> li:nth-child(n+3):last-child:nth-child(odd)) > li:nth-child(3n+1):last-child{
    grid-column:1/-1}
}
/* Na een .av-kolommen volgde een .av-stappen te krap (30, 32, 428): vanaf 1024px heeft
   de laatste alinea in de kolom geen ondermarge en de stappen maar 6px bovenmarge.
   Gemeten 6px tussen tekst en eerste stap; daaronder was het al 24px. */
@media (min-width:1024px){
  .av-kolommen + .av-stappen{margin-top:clamp(28px,3vw,40px)}
}

/* ---- 1.36, coordinator: een kanttekening rechts vult op een breed scherm meer ---- */
@media (min-width:1440px){
  .av-kolommen > .av-kant,.av-kolommen > div > .av-kant{max-width:74ch;font-size:15px}
}

/* ---- 1.36, WebKit 1: plaatsvervanger in de kaart als absoluut vlak ----
   Safari rekende width/height:100% van .av-ph tegen de buitenmaat van .av-kfig plus
   de 12px padding, waardoor de kaart 26 tot 33px rechts uitliep (21, 22, 29). Nu
   geplaatst zoals de foto zelf, binnen de padding. */
.av-kfig .av-ph{position:absolute;inset:12px;width:auto;height:auto}
.av-kaart{grid-template-columns:minmax(0,1fr)}
.av-kfig{min-width:0}

/* ---- 1.36, WebKit 2: iPhone zoomt in bij een veld onder 16px ---- */
#av-main .frm_forms input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]),
#av-main .frm_forms select,#av-main .frm_forms textarea{font-size:16px}

/* ---- 1.36, WebKit 3: open mobiel menu scrolt binnen het scherm ----
   Het open menu was 722px hoog (1015px met Merken open) onder een sticky header. Nu
   begrensd op de schermhoogte met een eigen scroll; de menuknop blijft bovenin staan,
   zodat het menu altijd te sluiten is. Zonder JavaScript. */
@media (max-width:1279.98px){ /* 1.53: was 1023px */
  .av-mtog:checked ~ .av-head-in{max-height:100vh;max-height:100svh;max-height:100dvh;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .av-mtog:checked ~ .av-head-in .av-burger{position:sticky;top:0;z-index:2}
}

/* ---- 1.36, WebKit 4: filterpaneel boven de vaste balk onderaan ----
   Het paneel (mobiel position:fixed) lag onder .av-dock (z-index 70), omdat de balk
   zelf z-index 6 heeft. Met een open paneel gaat de balk boven de dock en onder de
   header (80). av-extra-1.36.js begrenst de optielijst tot boven de dock. */
@media (max-width:679px){
  .av-fbalk:has(.av-fpaneel:not([hidden])){z-index:76}
}

/* =========================================================
   VERSIE 1.37 (02-10-2026). Oordelen van anti-ai-design en kwaliteitspoort van
   02-10-2026, uitgevoerd door wp-bouwer. Bewijs: handover-fix-137-2026-10-02.md.
   ========================================================= */

/* ---- 1.37 punt 2: kruimelpad in plaats van het label boven de hero-H1 ----
   anti-ai-design: "eyebrow-patroon p.av-lbl met golficoon" op de heroes. Een categorie-,
   merk- of overzichtspagina krijgt een echt gelinkt kruimelpad (nav.av-kruimel), zonder
   icoon, in dezelfde stijl als de kop van een kennisbankartikel (.av-posthero). Hier
   gegeneraliseerd naar elke .av-pagehero. Op een paginahero nemen kruimel plus marge
   exact de hoogte van het oude label plus marge in (22,1 + 14 = 36px), zodat de
   heromaatvoering niet verschuift; de linkhoogte blijft 24px. */
.av-pagehero .av-kruimel{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;
  margin:0 0 18px;font-size:13.5px;line-height:1.7;color:rgba(245,245,245,.72)}
.av-pagehero .av-kruimel a{display:inline-block;padding:2px 0;color:var(--av-paper);
  text-decoration:underline;text-decoration-color:rgba(203,166,98,.75);
  text-underline-offset:3px}
.av-pagehero .av-kruimel a:hover{color:var(--av-gold)}
.av-pagehero:not(.av-posthero) .av-kruimel{margin:0 0 12px;line-height:22px}
.av-pagehero:not(.av-posthero) .av-kruimel a{padding:1px 0}

/* ---- 1.37 punt 1: personenkeuze op Jacuzzi's en spa's (19) ----
   anti-ai-design: "Statistiektegels in de personencellen" (zes identieke cellen met
   hetzelfde icoon en een los groot cijfer, op mobiel ruim 1500px). Nu: een rij
   keuzeknoppen in de vormtaal van de filterchips (.av-fvink), het personenicoon een keer
   vooraan, en daaronder de bestaande regels als gewone lijst (ul.av-lijst.av-lijst-ic).
   Knoppen en gelinkte regels dragen data-av-filter; av-extra-1.36.js zet bij een klik het
   filter in de balk van het assortiment, zonder JavaScript is het een link naar #modellen.
   (1.39: de regels van .av-pkies-rij, .av-pklijst en .av-pkbeeld uit dit blok zijn verwijderd.) */
.av-pkies{display:grid;gap:26px;margin:34px 0 0}
.av-pkies > *{min-width:0}
.av-pkies-lbl{display:inline-flex;align-items:center;gap:10px;margin:0 10px 0 0;
  font-size:14px;font-weight:600;line-height:1.3;color:var(--av-navy-deep)}
.av-pkies-lbl .av-ic{width:24px;height:24px}
.av-pknop{display:inline-flex;align-items:center;justify-content:center;min-width:48px;
  min-height:44px;padding:8px 14px;font-size:14px;font-weight:600;line-height:1.3;
  color:var(--av-navy-deep);background:#fff;border:1px solid rgba(11,19,32,.45);
  text-decoration:none;transition:border-color .18s,background-color .18s}
.av-pknop:hover{border-color:var(--av-navy-deep);background:rgba(11,19,32,.05)}
.av-pknop:focus-visible{outline:3px solid var(--av-navy-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.av-pknop{transition:none}}
@media (min-width:1024px){
  .av-pkies{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:30px 56px;
    align-items:start}
}

/* =========================================================
   VERSIE 1.38 (02-10-2026), uitgevoerd door wp-bouwer.
   Bewijs: handover-fix-138-2026-10-02.md.
   ========================================================= */

/* ---- 1.38: personenblok op Jacuzzi's en spa's (19), opnieuw ----
   Mitch: "Sectie "kies op aantal personen, op maat en op vorm" heeft rare opsomming erbij
   staan in een te simpel design [...] Ook weer geen visualisatie/iconografie/symbolen erbij".
   anti-ai-design op 1.37: het aantal personen stond drie keer (balk, knoppenrij, lijstregels)
   en 8 van de 10 regels hadden een lege icooninspringing.
   Nu twee groepen naast elkaar (onder elkaar op mobiel):
   - .av-pkrijen: een rij per aantal, links de keuzeknop (.av-pknop, ook de filterlink),
     rechts alleen de modelnamen per merk (.av-pknamen > .av-pkmerk). De hele rij is
     klikbaar via ::after op de knop.
   - .av-pkvormen: vorm en aansluiting, per regel een productfoto van een model uit die set,
     de titel als filterlink (hele rij klikbaar via ::after) en de bestaande zin eronder.
   .av-pkies-lbl uit 1.37 staat nog in de CSS maar wordt niet meer gebruikt (1.39). */
.av-pkies{gap:36px}
.av-pkgroep{min-width:0}
.av-pkgroep h3{font-size:20px;line-height:1.3;margin:0}
.av-pkgroep > h3{margin:0 0 14px}
.av-pkgroep > .av-ich{min-height:26px}
.av-pkrijen,.av-pkvormen{list-style:none;margin:0;padding:0;border-top:1px solid rgba(11,19,32,.12)}
.av-pkrijen > li,.av-pkvormen > li{position:relative;display:grid;align-items:center;
  border-bottom:1px solid rgba(11,19,32,.12)}
.av-pkrijen > li{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:11px 0;
  font-size:15px;line-height:1.5}
.av-pkrijen .av-pknop{min-width:56px}
.av-pkrijen .av-pknop::after{content:"";position:absolute;inset:0}
.av-pkrijen > li:hover .av-pknop{border-color:var(--av-navy-deep);background:rgba(11,19,32,.05)}
.av-pknamen{display:flex;flex-wrap:wrap;gap:2px 18px;min-width:0}
.av-pkmerk{min-width:0;text-wrap:pretty}
.av-pkmerk b{font-weight:600}
.av-pkvormen > li{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:12px 0}
.av-pkvormen img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:4px}
.av-pkvormen a{font-weight:600;font-size:15.5px;line-height:1.4;color:var(--av-navy-deep);
  text-decoration:underline;text-decoration-color:var(--av-gold);text-decoration-thickness:1px;
  text-underline-offset:3px}
.av-pkvormen a::after{content:"";position:absolute;inset:0}
.av-pkvormen > li:hover a{color:#7d6229}
.av-pkvormen a:focus-visible{outline:none}
.av-pkvormen a:focus-visible::after{outline:3px solid var(--av-navy-deep);outline-offset:2px}
.av-pkvormen p{margin:4px 0 0;font-size:15px;line-height:1.5;text-wrap:pretty}
@media (min-width:1024px){
  .av-pkies{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 64px}
  .av-pkvormen > li{grid-template-columns:112px minmax(0,1fr);gap:20px}
}

/* =========================================================
   VERSIE 1.39 (02-10-2026), uitgevoerd door wp-bouwer.
   Bewijs: handover-fix-139-2026-10-02.md.
   ========================================================= */

/* ---- 1.39: beeldkader in "Op vorm en aansluiting" (19) ----
   anti-ai-design op 1.38: beelden die op dezelfde pagina al op een productkaart staan, en
   vier beelden in een ongelijke schaal. Het beeld staat nu in span.av-pkfoto (vaste 4:3,
   afgerond, overflow verborgen). Per beeld te sturen met twee variabelen in een inline
   style op de span: --av-pkpos (uitsnede, standaard midden) en --av-pkzoom (vergroting
   rond die uitsnede, standaard 1), zodat het product ongeveer driekwart van het vlak vult. */
.av-pkfoto{display:block;overflow:hidden;border-radius:4px;aspect-ratio:4/3}
.av-pkvormen .av-pkfoto img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;
  object-fit:cover;object-position:var(--av-pkpos,50% 50%);
  transform:scale(var(--av-pkzoom,1));transform-origin:var(--av-pkpos,50% 50%)}

/* =========================================================
   VERSIE 1.43 (02-10-2026), afrondronde, uitgevoerd door wp-bouwer.
   Bewijs: handover-afrondronde-av-2026-10-02.md.
   ========================================================= */

/* ---- 1.43: footertitels als h2 in plaats van h4 ----
   De footer zette h4 direct na de laatste h2 van elke pagina (kopsprong). De titels zijn nu
   h2, met exact de stijl die .av-foot-col h4 had. De h4-regel blijft staan als terugval. */
.av-foot-col h2{color:var(--av-paper);font-size:14px;margin:0 0 16px;font-weight:600;
  font-family:'Montserrat',Arial,sans-serif}

/* ---- 1.43: tegelkoppen op /aanbod/ (16) en /merken/ (18) als h2 ----
   Daar sprong de kop van h1 naar h3 (geen sectiekop boven de tegels). De tegelkoppen zijn
   op die twee pagina's h2 geworden; onderstaande regels zijn letterlijke kopieën van alle
   regels voor .av-rtitle h3 en .av-merk h3, met h2, in dezelfde volgorde. Op de homepage
   blijven de tegels h3 (daar staat wel een h2 boven). */
.av-rtitle h2{font-size:22px;margin:0;transition:color .28s}
.av-row:hover .av-rtitle h2{color:var(--av-gold)}
.av-merk h2{font-size:22px;color:var(--av-paper);margin:0 0 10px}
@media (min-width:1024px){.av-rtitle h2{font-size:29px}}
.av-sec-dark .av-merk h2 a{color:var(--av-gold)}
.av-merk h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.av-merk h2 a:focus-visible{outline:0}
.av-merk h2 a:focus-visible::after{outline:2px solid var(--av-gold);outline-offset:4px}
.av-merk:has(h2 a,a.av-lees):hover{border-color:var(--av-gold);transform:translateY(-6px); box-shadow:0 0 0 1px var(--av-gold) inset,0 16px 34px rgba(11,19,32,.16)}
.av-merk:has(h2 a,a.av-lees):hover h2 a{color:var(--av-gold)}

/* ---- 1.43: cookiebeleid (567), zelfde kolom en H1 als de andere juridische pagina's ----
   page.php zet een pagina met een Complianz-document nu in .av-pagecontent >
   .av-wrap.av-content-body, met een H1. Privacyverklaring en voorwaarden doen dat met
   style="max-width:760px" op de wrap en style="font-size:34px;margin-bottom:20px" op de H1. */
.av-pagecontent .av-wrap.av-legal{max-width:760px}
.av-pagecontent .av-legal > h1{font-size:34px;margin-bottom:20px}

/* ---- 1.43: personenblok op 19, groep "Op aantal personen" vervallen ----
   Alleen "Op vorm en aansluiting" blijft over. Vanaf 1024px stond .av-pkies op twee kolommen,
   dan bleef de rechterhelft leeg. Een enige groep neemt nu de hele breedte en zet de vier
   regels in twee kolommen, zodat er geen lege kolom en geen lange smalle regels ontstaan. */
.av-pkies > .av-pkgroep:only-child{grid-column:1/-1}
@media (min-width:1024px){
  .av-pkgroep:only-child > .av-pkvormen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:64px}
}

/* =========================================================
   VERSIE 1.44 (03-10-2026): knoppen in een productkaartrij onderaan op een lijn.
   Opdracht: de onderkanten van "Meer over dit model" en "Vraag ... aan bij een dealer" per
   kaartrij gelijk, op elke breedte met meer dan een kolom; op 390 (een kolom) niets anders.
   Gemeten op 1.43 (19, 20, 21, 22, 26, 27, 28, 29 en 219, op 768, 1024, 1440 en 1920px):
   onderkant van de summary 0px spreiding per rij, onderkant van a.av-kcta tot 22,09px. De
   speclijsten van ongelijke lengte zijn al opgevangen door het subgrid van 1.32 (rij 4 is per
   kaartrij even hoog); het verschil van 22,09px is precies een tekstregel: de CTA-tekst
   ("Vraag de Mini Coziness aan bij een dealer") breekt in de ene kaart af en in de buurkaart
   niet, en de CTA stond met align-self:start bovenin zijn rij.
   De regel: binnen het subgrid staat de CTA onderin zijn rij (align-self:end). Rij 6 is per
   kaartrij zo hoog als de hoogste CTA, dus alle CTA-onderkanten vallen samen; de summary in
   rij 5 blijft bovenin staan zoals in 1.32. Gevolg, bewust: de BOVENkant van een CTA van een
   regel ligt nu een regel lager dan die van een CTA van twee regels.
   Gescoped op .av-kbody > .av-kcta: elke av-kcta op de site staat direct in .av-kbody (gemeten
   03-10-2026 over alle niet-verwijderde content), en buiten een grid zou align-self:end in een
   flexkolom naar rechts duwen.
   Zonder subgrid (oude browser) blijft de kaart de flexkolom van 1.30; daar groeit nu het
   specblok, zodat uitklap en CTA samen onderaan staan in plaats van direct onder de specs.
   ========================================================= */
.av-kbody > .av-kspecs{flex-grow:1}
@supports (grid-template-rows: subgrid){
  .av-kbody > .av-kcta{align-self:end}
}

/* =========================================================
   1.45 (07-10-2026): .av-pagehero-band, alleen op 19 (Jacuzzi's en spa's).
   Daniël over de herofoto: "Dat model klopt niet. Die schuine hoek is door AI bedacht.
   Het is een vierkante spa." Op 375px toonde de cover-uitsnede 29,6 procent van de
   fotobreedte. Onder 680px staat de foto daarom als band van 16:9 bovenaan de hero,
   met kruimel, H1 en lead daaronder op effen navy. Vanaf 680px ongewijzigd.
   1.46 (07-10-2026): breekpunt van 679.98px naar 639.98px. Tussen circa 663 en 679px
   was de band hoger dan de ruimte boven de kruimel (op 679px viel de kruimel 8,5px over
   de onderrand van de band); op 640px was er nog 13,4px ruimte. Vanaf 640px nu de
   standaardhero.
   ========================================================= */
@media (max-width:639.98px){
  .av-pagehero-band .av-pagehero-media{bottom:auto;height:auto;aspect-ratio:16/9}
}

/* =========================================================
   1.47 (08-10-2026): Cloudflare Turnstile in de formulieren
   Het Cloudflare-vak is altijd 300px breed. In .av-finder (22px binnenruimte plus 1px rand)
   staken de velden op 360px tot 317px en het vak tot 343px: 26px buiten de velden en 4px
   over de rand van het kader. Onder 386px verkleint het vak in stappen tot het binnen de
   velden valt (beschikbare breedte is schermbreedte min 86px). Zelfde aanpak als Paddock 1.65.1.
   ========================================================= */
@media (max-width:385.98px){
  .frm-cf-turnstile > *{transform-origin:0 0;transform:scale(.95)}
}
@media (max-width:370.98px){.frm-cf-turnstile > *{transform:scale(.91)}}
@media (max-width:358.98px){.frm-cf-turnstile > *{transform:scale(.85)}}
@media (max-width:340.98px){.frm-cf-turnstile > *{transform:scale(.78)}}

/* 1.48 (08-10-2026): privacyregel bij de verzendknop van formulier 2, 3 en 4 (Formidable
   HTML-veld, geen invoerveld, besluit Mitch 08-10). Kleine tekst in de kleur van de hints,
   iets donkerder voor leesbaarheid; de link navy met gouden onderstreping zoals in lopende
   tekst. Bij hover en focus wordt de link donkergoud (#7d6229, zelfde als .av-kant), niet
   het lichte goud uit #av-main p a:hover, dat op wit te weinig contrast geeft.
   Selector zwaarder dan #av-main .av-sec-navy p a:not(...) zodat die nooit wint. */
#av-main .frm_forms p.av-form-privacy{font-size:12.5px;line-height:1.6;color:#2C3A52;margin:0;max-width:none}
#av-main .frm_forms p.av-form-privacy a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees){
  color:var(--av-navy-deep);text-decoration:underline;text-decoration-color:var(--av-gold);
  text-decoration-thickness:1px;text-underline-offset:3px}
#av-main .frm_forms p.av-form-privacy a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):hover,
#av-main .frm_forms p.av-form-privacy a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):focus-visible{
  color:#7d6229;text-decoration-color:#7d6229;text-decoration-thickness:2px}
#av-main .frm_forms p.av-form-privacy a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):focus-visible{outline:2px solid var(--av-navy-deep);outline-offset:2px;border-radius:2px}

/* =========================================================
   1.49 (08-10-2026): desktopheader in de opbouw van wellnesspartner.nl.
   Mitch: "voor aquavuro wil ik toch nog even de header aanpassen omdat de onderdelen
   eigenlijk iets te ver uit elkaar staan - zou de wellnesspartner set-up voor desktop
   beter zijn hier?", daarna "Optie A!".
   Het hoofdmenu verdeelt zich niet meer met space-evenly over de breedte, maar vormt een
   groep rechts, direct voor de Dealerzoeker. De vrije ruimte valt tussen logo en menu.
   Gemeten op wellnesspartner.nl (1280, 1440 en 1920px): 22px van tekst tot tekst en 22px
   van de laatste menutekst tot de knop, verhouding 1:1; op 1024px 14px.
   Hier: tekst tot tekst is 2x --av-navpad (gap 0), tekst tot knop ook 2x --av-navpad
   (padding van het laatste item plus de flexgap van 18px plus een negatieve marge).
   --av-navpad: clamp(7px,.85vw,11px), dus 22px vanaf 1294px; 6px in de band
   1024-1055px (zie 1.18), zodat logo, menu en knop daar op een regel blijven.
   De Merken-uitklap lijnt rechts uit op zijn eigen li, zodat hij niet onder de knop valt.
   Mobiel en tablet tot 1023px: niets aan veranderd.
   ========================================================= */
@media (min-width:1280px){ /* 1.53: was 1024px */
  .av-head-in{--av-navpad:clamp(7px,.85vw,11px)}
  .av-nav > ul{justify-content:flex-end;gap:0}
  .av-nav > ul > li > a,.av-nav > ul > li > .av-slab,.av-nav > ul > li > .av-slink{
    padding:12px var(--av-navpad)}
  .av-nav > ul > li > a::after{left:var(--av-navpad);right:var(--av-navpad)}
  .av-headcta{margin-left:calc(var(--av-navpad) - 18px)}
  .av-nav > ul > li > .av-sub{left:auto;right:0}
}
@media (min-width:1024px) and (max-width:1055px){
  .av-head-in{--av-navpad:6px}
}

/* =========================================================
   1.50 (08-10-2026): desktopheader ruimer, ronde 2 van optie A.
   Mitch over 1.49: "het mag nog iets verder gespreid zijn, is nu wel heel erg gekropt".
   Opbouw blijft: logo links, menu als groep rechts tegen de Dealerzoeker. Alleen de
   tussenruimte gaat omhoog. Tekst tot tekst en tekst tot knop blijven 2x --av-navpad
   (de knopmarge calc(var(--av-navpad) - 18px) uit 1.49 houdt de verhouding 1:1).
   Streef: circa 28px op 1280, 32px op 1440, 40px vanaf 1920.
   Band 1024-1055px blijft 6px (regel uit 1.49 hieronder herhaald, zodat hij wint).
   De Merken-uitklap eindigt rechts gelijk met het einde van de gouden onderstreping.
   Mobiel en tablet tot 1023px: niets aan veranderd.
   ========================================================= */
@media (min-width:1280px){ /* 1.53: was 1024px */
  .av-head-in{--av-navpad:clamp(7px,1.1vw,20px)}
  .av-nav > ul > li > .av-sub{right:var(--av-navpad)}
}
@media (min-width:1056px) and (max-width:1279px){
  .av-head-in{--av-navpad:min(1.1vw,calc(7vw - 65px))}
}
@media (min-width:1024px) and (max-width:1055px){
  .av-head-in{--av-navpad:6px}
}

/* =========================================================
   1.51 (09-10-2026): header optie B. Op desktop blijft tijdens het scrollen alleen
   de hoofdrij staan (logo, hoofdmenu, Dealerzoeker); de bovenbalk (.av-util) en de
   subbalk (Over ons, Kennisbank, Contact) scrollen weg.
   Mitch: "Hoofdmenu moet wel sticky blijven" en "vooral belangrijk dat we eerst
   testen door submenu niet sticky te maken of dit het oplost."
   Opbouw, zonder JavaScript:
   - .av-head blijft sticky, maar met top = minus de hoogte van de bovenbalk. Die
     schuift dus boven het scherm weg en de hoofdrij komt tegen de bovenrand.
     --av-utilh moet gelijk zijn aan de hoogte van .av-util (12.5px x 21.25px
     regelhoogte plus 2x 9px padding = 39.25px, gemeten op 1024 tot 1920px). Wordt de
     tekst van de bovenbalk zo lang dat hij op twee regels valt, meet dit dan opnieuw.
   - De subbalk staat op desktop in een eigen blok direct na de header
     (.av-head-sub in header.php), dus buiten het vaste deel. De .av-nav2 binnen
     .av-head-in blijft voor het mobiele uitklapmenu (order:5) en is vanaf 1024px
     verborgen. De twee lijsten moeten gelijk blijven.
   - Bovenaan de pagina is alles gelijk aan 1.50: header plus subbalk samen 204.3px,
     zelfde posities. De 32px tussen hoofdrij en subbalk (18px rij-gap plus 14px
     marge in 1.50) is nu 16px onderin de header (15px plus de 1px streep) en 16px
     bovenin .av-head-sub. Het vaste deel is 86.9px hoog (16 + 54.9 + 16).
   - De gouden verloopstreep onder de header staat in de vaste stand onder de
     hoofdrij; bovenaan de pagina is hij onzichtbaar (daar staat hij onder de
     subbalk, op .av-head-sub::after). Waar scroll-gekoppelde animaties niet werken,
     blijft de streep in de vaste stand weg.
   Mobiel en tablet tot 1023px: niets aan veranderd.
   ========================================================= */
@media (min-width:1280px){ /* 1.53: was 1024px */
  /* 1.62: de regel .av-head{top:calc(-1 * var(--av-utilh))} is weg met de bovenbalk; .av-head staat op top:0 */
  .av-head-in{padding:16px 0 15px}
  .av-head::after{opacity:0}
  /* 1.54: de regels voor .av-head-sub (subbalk van 1.51) zijn weg; dat blok staat sinds 1.53 niet meer in header.php */
  /* Ankers landen onder het vaste deel (86.9px), met dezelfde speling als in 1.50. */
  [id]{scroll-margin-top:93px}
}
@keyframes av-kopstreep{from{opacity:0}to{opacity:1}}
@supports (animation-timeline:scroll()){
  @media (min-width:1280px){ /* 1.53: was 1024px */
    .av-head::after{animation:av-kopstreep auto linear both;animation-timeline:scroll(root block);
      animation-range:0px 40px}
  }
}


/* =========================================================
   1.52 (09-10-2026), deel 1: USP-kaarten (.av-facts / .av-fact) met icoon, label en uitleg.
   Mitch: "We hebben per pagina hele vage usp kaarten neer gezet. Denk aan alleen het getal
   "55" of 230V of "binnen 5". [...] daar moet een algemene term voor komen waarvan eronder
   wordt uitgelegd wat het doet" en "Naast zon algemene term kan namelijk naast de titel nog
   iconografie worden toegevoegd om het leesbaarder te maken en meer gevoel bij de krijgen."
   Markup per kaart (bron: Content/usp-kaarten-2026-10-09.md):
     <div class="av-fact"><b class="av-fact-ic">{svg.av-ic}Label</b><span><b>55</b> uitleg</span></div>
   Zonder passend icoon: <b> zonder klasse en zonder svg (BETEKENISREGEL, Bouwstandaard).
   - Het label staat op de plek van het oude grote getal, in Playfair en goud, maar kleiner
     gezet zodat labels van twee tot vier woorden passen. Het icoon staat links van het label,
     24px, en hangt aan de eerste labelregel.
   - De inhoud van een cel staat bovenaan (was verticaal gecentreerd), zodat de labels in een
     rij op een lijn staan, ook als de uitleg ongelijk lang is of een cel geen icoon heeft.
     Het blok als geheel blijft verticaal gecentreerd in de vaste balk (.av-facts uit 1.16).
   - Geen woordafbreking in de uitleg (Mitch zag "Euro-pese" en "verkoop-punt");
     overflow-wrap blijft als harde garantie tegen een woord dat uit zijn cel loopt.
   - De balkhoogte (--av-uspb) is op desktop NIET veranderd: 240 / 205 / 172px. Daarvoor
     staat de horizontale binnenmarge van een cel tussen 1024 en 1439px op 20px (was 26px):
     met 26px liep de inhoud op 1200px tot 170,9px in een balk van 172px.
   - Tablet (720-1023px): twee bij twee in plaats van vier smalle kolommen, want daar bleef
     voor het label naast het icoon maar circa 90px over. Balk 295 -> 326px.
   - Mobiel: label 19px, verticale binnenmarge 18px (was 22px). Balk 524 -> 536px, onder 360px
     578px. Gemeten maxima 09-10-2026 over alle 14 pagina's met deze CSS: 491,2px (390),
     514px (360), 555,5px (320), 303,5px (720), 274,3px (768), 189,7px (1056, 205px-band),
     152,2px (1200, 172px-band); dat laat overal minimaal 10px boven en onder over.
   ========================================================= */
:root{--av-uspb:536px}
@media (max-width:359.98px){:root{--av-uspb:578px}}
@media (min-width:720px){:root{--av-uspb:326px}}
@media (min-width:1024px){:root{--av-uspb:240px}}
@media (min-width:1056px){:root{--av-uspb:205px}}
@media (min-width:1200px){:root{--av-uspb:172px}}
.av-fact{justify-content:flex-start}
.av-fact > b{font-size:19px;line-height:1.2;margin:0 0 7px}
.av-fact > b.av-fact-ic{position:relative;padding-left:34px}
.av-fact > b.av-fact-ic > .av-ic{position:absolute;left:0;top:0;width:24px;height:24px}
.av-fact > span{-webkit-hyphens:manual;hyphens:manual}
/* het getal vooraan in de uitleg: zet de labelopmaak van .av-fact b (1.10) hier weer terug */
.av-fact > span > b{display:inline;font-family:inherit;font-size:inherit;line-height:inherit;
  font-weight:600;color:rgba(245,245,245,.9);margin:0}
@media (max-width:719.98px){
  .av-fact{padding-top:18px;padding-bottom:18px}
}
@media (min-width:720px) and (max-width:1023.98px){
  .av-facts .av-wrap{grid-template-columns:repeat(2,1fr)}
  .av-fact{padding:20px 24px}
}
@media (min-width:720px){
  .av-fact > b{font-size:20px}
}
@media (min-width:1024px){
  .av-fact > b{font-size:18px;margin-bottom:6px}
  .av-fact > b.av-fact-ic{padding-left:32px}
  .av-fact > b.av-fact-ic > .av-ic{top:-2px}
}
@media (min-width:1024px) and (max-width:1439.98px){
  .av-fact{padding-left:20px;padding-right:20px}
}
@media (min-width:1440px){
  .av-fact > b{font-size:19px}
}

/* =========================================================
   1.52 (09-10-2026), deel 2: productkaart (.av-kaart) compacter, vast beeldvlak en de
   specificatieregels per kaartrij op dezelfde hoogte.
   Mitch: "eigenlijk moet het wel een regel zijn dat die kaart goed helemaal leesbaar moet zijn
   in een scherm", "Voor de productkaarten is het belangrijk dat vraag het model aan wel blijft
   staan in de kaart, eigen onderdelen goed uitgelijnd staan" en "we moeten er rekening mee
   blijven houden dat veel afbeeldingen vierkant zijn, maar er ook rechthoekige tussen zitten
   -> niet alles is dus symmetrisch". Akkoord: "Prima, zolang kaarten aestethisch mooi blijven
   erdoor". Norm: de hele kaart (bovenkant beeld tot onderkant CTA) staat in beeld onder de
   vaste header op 1366x650 en 1280x680.
   - Beeldvlak 4:3 (was 1:1), object-fit:contain en de 12px binnenmarge uit 1.10 blijven: een
     vierkant, een staand en een liggend beeld staan er allemaal heel in, niets wordt
     afgesneden, en elke kaart in een rij begint even hoog. In een raster van drie kolommen
     (.av-kaarten zonder -4, vanaf 1024px) 3:2, want daar is de kaart circa 395px breed.
   - De badge (Nieuw, Plug & Play, Infrarood, ...) staat als label linksboven op het beeldvlak in
     plaats van op een eigen regel; rij 2 van het kaartlijf blijft leeg. Ondoorzichtig vlak in
     dezelfde tint als de badge op wit (#7d6229 op #f7f1e6, 5,12:1), want hij kan over een foto
     vallen. Ook in een donkere sectie, want het beeldvlak is daar ook licht.
     grid-row:auto is nodig: met grid-row:2 uit 1.32 plaatst Chrome het absoluut gepositioneerde
     element in rij 2 van het kaart-subgrid en kwam de badge over het merklabel te staan.
   - Specificatieregels per kaartrij op dezelfde hoogte: .av-kspecs is zelf een subgrid over
     vijf rijen (het maximum aantal regels op de site, gemeten 09-10-2026), dus regel n staat in
     elke kaart van een rij op dezelfde y, ook als een waarde in een buurkaart over twee regels
     loopt. LET OP: meer dan vijf regels in een kaart past niet; verhoog dan de drie spans
     hieronder (11 / 10 / 5) samen.
   - row-gap van .av-kaarten op 0 en de afstand tussen kaartrijen als margin-bottom op de kaart
     (16 / 18 / 22px, gelijk aan de oude gap) met dezelfde negatieve marge onder het raster: een
     subgrid-rij die in geen enkele kaart van een rij gevuld is (lege badgerij, ongebruikte
     specrijen), hield anders de 22px gap van .av-kaarten over. Gemeten op 22: 21px extra tussen
     merk en kop en 42px onder de speclijst.
   - Minder verticale ruimte in het tekstdeel, binnenmarge 12/16/14px, specregels 4px boven en
     onder met regelhoogte 1,4; lettergroottes ongewijzigd.
   - Klikdoelen: "Meer over dit model" blijft 45,9px hoog. De dealer-CTA houdt zijn vorm (tekst
     met gouden onderlijn) maar krijgt een tikvlak van minstens 44px via ::before.
   ========================================================= */
.av-kaart{position:relative}
.av-kaart > .av-kfig{aspect-ratio:4/3}
.av-kaart .av-kbody{padding:12px 16px 14px}
.av-kaart .av-kmerk{margin-bottom:3px}
.av-kaart > .av-kbody > .av-kbadge{position:absolute;top:10px;left:10px;z-index:3;margin:0;
  pointer-events:none;background:#f7f1e6;color:#7d6229;box-shadow:0 0 0 1px rgba(125,98,41,.16)}
.av-kaart h3{margin-bottom:6px}
.av-kaart .av-kspecs{margin-bottom:2px}
.av-kaart .av-kspecs li{gap:10px;padding:4px 0;line-height:1.4}
.av-kaart .av-kmeer{margin-bottom:8px}
.av-kaart .av-kcta{position:relative;line-height:1.45}
.av-kaart .av-kcta::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-14px}
@media (min-width:1024px){
  .av-kaarten:not(.av-kaarten-4) > .av-kaart > .av-kfig{aspect-ratio:3/2}
}
@supports (grid-template-rows: subgrid){
  .av-kaart{grid-row:span 11}
  .av-kbody{grid-row:span 10}
  .av-kaart > .av-kbody > .av-kbadge{grid-row:auto;grid-column:auto}
  .av-kaart .av-kspecs{grid-row:4 / span 5;display:grid;grid-template-rows:subgrid;row-gap:0;
    align-content:start}
  .av-kmeer{grid-row:9}
  .av-kcta{grid-row:10}
  .av-kaarten{row-gap:0;margin-bottom:-16px}
  .av-kaarten > .av-kaart{margin-bottom:16px}
}
@media (min-width:720px){
  @supports (grid-template-rows: subgrid){
    .av-kaarten{margin-bottom:-18px}
    .av-kaarten > .av-kaart{margin-bottom:18px}
  }
}
@media (min-width:1024px){
  @supports (grid-template-rows: subgrid){
    .av-kaarten{margin-bottom:-22px}
    .av-kaarten > .av-kaart{margin-bottom:22px}
  }
}

/* =========================================================
   1.53 (09-10-2026): header E2, alles op een rij.
   Mitch: "Dit is mijn idee: we doen alles op een balk, dealer worden komt ook als categorie in
   het hoofdmenu, telefoonnummer verdwijnt uit de announcement bar omdat we al een bel knop
   hebben. Over ons en kennisbank zouden dan naar announcement bar kunnen verhuizen. Fan van de
   iconografie en dat we het zo uitlijnen" en "Akkoord, bouw E2 en schrap /aanbod/".
   Ontwerp: canvas versie 14 (borden E2 1440/1366/1280, categoriepagina, mobiel open), maten uit
   de BAND-tabel van bouw_ronde3.py. Markup in header.php.
   - Bovenbalk (.av-util): links de voorraadregel, rechts Kennisbank en Over ons (.av-utilnav).
   - Rij vanaf 1280px: logo; vijf categorieen met icoon; Merken met uitklap, zonder icoon; een
     scheidingslijn van 1px (li.av-nav-dw::before); Dealer worden met de winkelpui; vrije ruimte;
     de belknop (44x44), Contact omlijnd en de Dealerzoeker als enige gouden knop.
   - Maten: 1280-1439px 13px tekst, iconen 18px (lijn 2,13), gap 15 tot 18, rijgap 16 tot 20;
     vanaf 1440px 14px, iconen 20px (lijn 1,92), gap 16, rijgap 18. Lijndikte 1.6 * 24 / maat.
   - Logo: het woordmerk past naast de rij pas vanaf circa 1500px binnen de gutter (gemeten: de
     rij met volledig logo vraagt 1348,5px binnenbreedte vanaf 1440px). Tussen 1280 en 1519px
     staat daarom alleen het beeldmerk, zoals in de vaste stand van het ontwerp; vanaf 1520px
     het volledige logo.
   - Actief: het item van de huidige pagina heeft aria-current="page" en een gouden lijn van 2px
     onder het item. Hover maakt alleen de tekst goud, zonder lijn.
   - Vaste stand (1.51 blijft): de bovenbalk schuift weg, de rij blijft staan (64px plus 1px).
   - Onder 1280px: het uitklapmenu. Volgorde: vijf categorieen met icoon, Merken (uitklap),
     Dealer worden met de winkelpui, dan Dealerzoeker (goud), Contact (omlijnd) en Bel
     06 44 06 30 39, daaronder Kennisbank en Over ons. Het actieve item in goud, zonder balk.
   ========================================================= */
.av-mic{display:block;width:22px;height:22px;flex:none;color:var(--av-gold);stroke-width:1.75}

/* uitklapmenu (tot en met 1279px) */
.av-nav > ul > li > a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 2px;font-size:17px}
.av-nav > ul > li > .av-slab{min-height:52px;padding:0 2px;font-size:17px}
.av-nav > ul > li > a[aria-current="page"],.av-nav > ul > li > .av-slab[data-actief],
.av-sub a[aria-current="page"]{color:var(--av-gold)}
.av-nav-dw::before{display:none}
.av-mtog:checked ~ .av-head-in .av-headcta{display:flex;flex-direction:column;gap:10px;padding:12px 0 8px}
.av-headcta .av-btn{display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 18px;font-size:15px;line-height:1.2}
.av-headcta .av-btn-p{order:1}
.av-headcta .av-btn-c{order:2;border-color:rgba(203,166,98,.55);color:var(--av-paper);font-weight:500}
.av-headcta .av-btn-c:hover,.av-headcta .av-btn-c:focus-visible{color:var(--av-gold);border-color:var(--av-gold)}
.av-bel{order:3;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  color:var(--av-paper);font-size:15px;font-weight:500}
.av-bel .av-mic{width:18px;height:18px;stroke-width:2.13}
.av-bel:hover,.av-bel:focus-visible{color:var(--av-gold)}

/* rij vanaf 1280px */
@media (min-width:1280px){
  .av-head-in{--av-mfs:13px;--av-misz:18px;--av-misw:2.13;
    --av-mgap:clamp(15px,calc(15px + (100vw - 1280px) * .0349),18px);
    --av-rijgap:clamp(16px,calc(16px + (100vw - 1280px) * .0465),20px);
    --av-ctapad:clamp(16px,calc(16px + (100vw - 1280px) * .0233),18px);--av-conpad:12px}
}
@media (min-width:1440px){
  .av-head-in{--av-mfs:14px;--av-misz:20px;--av-misw:1.92;--av-mgap:16px;--av-rijgap:18px;
    --av-ctapad:18px;--av-conpad:14px}
}
@media (min-width:1280px){
  :root{--av-headh:106px}
  [id]{scroll-margin-top:71px}
  .av-head-in{flex-wrap:nowrap;justify-content:flex-start;gap:var(--av-rijgap);padding:10px 0}
  .av-head::after{opacity:1;animation:none}
  .av-logo-word{display:none}
  .av-nav{flex:0 1 auto;min-width:0}
  .av-nav > ul{display:flex;align-items:center;justify-content:flex-start;gap:var(--av-mgap)}
  .av-nav > ul > li > a,.av-nav > ul > li > .av-slink{display:flex;align-items:center;gap:6px;
    min-height:44px;padding:0;font-size:var(--av-mfs);font-weight:500;white-space:nowrap;
    border-bottom:0;transition:color .2s}
  .av-nav .av-scar{margin-left:0}
  .av-nav .av-mic{width:var(--av-misz);height:var(--av-misz);stroke-width:var(--av-misw)}
  .av-nav > ul > li > a::after{left:0;right:0;bottom:0;height:2px;transform:none;opacity:0;transition:none}
  .av-nav > ul > li > a:hover::after{transform:none}
  .av-nav > ul > li > a[aria-current="page"]::after{opacity:1}
  .av-nav > ul > li > a[aria-current="page"]{color:var(--av-paper)}
  .av-nav > ul > li > a:hover,.av-nav > ul > li > a:focus-visible{color:var(--av-gold)}
  .av-nav-dw{display:flex;align-items:center}
  .av-nav-dw::before{content:"";display:block;flex:none;width:1px;height:22px;
    background:rgba(245,245,245,.22);margin-right:var(--av-mgap)}
  .av-nav > ul > li > .av-sub{left:0;right:auto}
  .av-headcta{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;padding:0}
  .av-headcta .av-btn-p,.av-headcta .av-btn-c,.av-bel{order:0}
  .av-bel{width:44px;height:44px;min-height:44px;flex:none;color:var(--av-gold)}
  .av-bel .av-mic{width:20px;height:20px;stroke-width:1.92}
  .av-bel:hover,.av-bel:focus-visible{color:var(--av-gold-light)}
  .av-bel-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .av-headcta .av-btn{min-height:44px;padding:0 var(--av-ctapad);font-size:var(--av-mfs);
    white-space:nowrap;letter-spacing:0}
  .av-headcta .av-btn-c{padding:0 var(--av-conpad)}
}
@media (min-width:1520px){
  .av-logo-word{display:block}
}


/* =========================================================
   1.54 (09-10-2026): header A, Merken-uitklap variant 2, announcement bar met twee links,
   componentbibliotheek voor Dealer worden, het kennisbankoverzicht en het artikel.
   Mitch: "Ik wil dat er een gelijke uitlijning is over de header balk, nu staan alle diensten apart
   rechts met veel witruimte en dan de knoppen rechts. Kennisbank mag naar alleen de footer en over ons
   mag naast dealer worden er gewoon bijkomen." en daarna "A met variant 2, dan wat jij aanraadt, start
   bouwronde". Markupcontract: handover-thema-1.54-2026-10-09.md in de klantmap.
   ========================================================= */


/* 1.62 (12-10-2026): het blok "announcement bar, alle breedtes" (--av-utilh, .av-util, .av-util-r/-lang/-kort en
   de sticky-offset .av-head{top:calc(-1 * var(--av-utilh))}) is weg; de bovenbalk staat niet meer in header.php. */

/* ---------- belknop naast Menu, onder 1280px ---------- */
.av-bel-m{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  margin-left:auto;margin-right:-8px;color:var(--av-gold)}
.av-bel-m .av-mic{width:20px;height:20px;stroke-width:1.92}
.av-bel-m:hover,.av-bel-m:focus-visible{color:var(--av-gold-light)}
.av-mtog:checked ~ .av-head-in .av-bel-m{position:sticky;top:0;z-index:2}
@media (max-width:1279.98px){
  /* het open menu begrenst zich op de schermhoogte (1.62: zonder aftrek van de bovenbalk, die is weg) */
  .av-mtog:checked ~ .av-head-in{max-height:100vh;max-height:100svh;max-height:100dvh}
  /* in het uitklapmenu: Contact staat als laatste menu-item, de belknop naast Menu; in de knoppengroep
     blijft alleen de Dealerzoeker */
  .av-headcta .av-bel,.av-headcta .av-con{display:none}
  .av-nav-deler{display:none}
}
.av-nav-m{display:block}
.av-con{display:none}

/* ---------- Merken-uitklap: naam plus een regel (variant 2) ----------
   Op mobiel blijft het de bekende uitklap met alleen de namen; de regel per merk en de slotlink
   "Alle merken op een rij" staan alleen vanaf 1280px (mobiel staat "Alle merken" bovenaan). */
.av-sub-n{display:block}
.av-sub-r{display:none}
.av-sub-alle{display:none}

/* ---------- header A vanaf 1280px ----------
   Hero-rekenhoogte --av-headh: de announcement bar staat nu ook tussen 1024 en 1279px in beeld, dus daar
   balk plus de compacte rij (78px); vanaf 1280px balk plus de rij van 80px plus de streep van 1px. */
@media (min-width:1024px){
  :root{--av-headh:78px} /* 1.62: was calc(var(--av-utilh) + 78px), de bovenbalk is weg */
}
@media (min-width:1280px){
  :root{--av-headh:81px} /* 1.62: was calc(var(--av-utilh) + 81px) */
  .av-bel-m{display:none}
  .av-head{transition:margin-bottom .2s ease}
  .av-head-in{--av-mfs:13px;--av-misz:18px;--av-misw:2.13;--av-mgap:10px;--av-navm:14px;
    --av-conpad:10px;--av-ctapad:14px;--av-rijpad:18px;
    gap:0;padding:var(--av-rijpad) 0;transition:padding .2s ease}
  /* vaste stand: de rij gaat terug naar 10px (65px met de streep, zoals 1.53). De header krijgt dezelfde
     16px als marge onderaan, zodat de pagina eronder niet verspringt. */
  .av-head.av-vast{margin-bottom:16px}
  .av-head.av-vast .av-head-in{--av-rijpad:10px}
  .av-nav{flex:1 1 auto;min-width:0;margin:0 var(--av-navm)}
  .av-nav > ul{justify-content:space-between;gap:var(--av-mgap)}
  .av-nav-m{display:none}
  .av-nav-dw::before{display:none}
  .av-nav-deler{display:block;flex:none;width:1px;height:24px;background:rgba(245,245,245,.22)}
  .av-headcta{margin-left:0;gap:8px}
  .av-con{display:flex;align-items:center;min-height:44px;padding:0 var(--av-conpad);color:var(--av-paper);
    font-size:var(--av-mfs);font-weight:500;white-space:nowrap;transition:color .2s}
  .av-con:hover,.av-con:focus-visible{color:var(--av-gold)}
  .av-con[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--av-gold)}
  .av-headcta .av-btn-p{padding:0 var(--av-ctapad);border-radius:2px}

  /* de checkbox van de mobiele uitklap is op desktop geen tabstop meer (de uitklap opent hier op hover en focus) */
  .av-nav .av-stog{display:none}
  /* Merken-paneel: smal, donker, direct onder de headerbalk */
  .av-nav > ul > li > .av-sub{left:0;right:auto;top:calc(100% + var(--av-rijpad) + 1px);width:360px;min-width:0;
    padding:8px;background:var(--av-navy);border:1px solid rgba(203,166,98,.25);
    box-shadow:0 18px 30px rgba(0,0,0,.35)}
  /* brug over de rijpadding, zodat de muis van Merken naar het paneel kan zonder dat het sluit */
  .av-nav > ul > li > .av-sub::before{content:"";position:absolute;left:0;right:0;
    bottom:100%;height:calc(var(--av-rijpad) + 2px)}
  .av-sub a{display:block;padding:12px 18px;border-bottom:0;border-radius:2px;color:var(--av-paper);
    transition:background-color .18s}
  .av-sub a:hover,.av-sub a:focus-visible{background:rgba(245,245,245,.06)}
  .av-sub a:focus-visible{outline-offset:-2px}
  .av-sub-n{font-size:15px;font-weight:600;line-height:1.35;transition:color .18s}
  .av-sub a:hover .av-sub-n,.av-sub a:focus-visible .av-sub-n,.av-sub a[aria-current="page"] .av-sub-n{color:var(--av-gold)}
  .av-sub-r{display:block;font-size:12.5px;line-height:1.45;color:rgba(245,245,245,.7);margin-top:3px}
  .av-sub-alle{display:block}
  .av-sub .av-sub-alle a{margin:6px 10px;padding:12px 0 4px;border-top:1px solid rgba(245,245,245,.12);
    border-radius:0;font-size:13px;font-weight:600;color:var(--av-gold)}
  .av-sub .av-sub-alle a:hover,.av-sub .av-sub-alle a:focus-visible{background:none;color:var(--av-gold-light)}
  .av-nav .av-scar{margin-left:2px;border-width:0 1.5px 1.5px 0;transition:transform .2s}
  .av-nav > ul > li:hover > .av-slink .av-scar,.av-nav > ul > li:focus-within > .av-slink .av-scar{
    transform:translateY(1px) rotate(225deg)}
  .av-nav > ul > li:hover > .av-slink,.av-nav > ul > li:focus-within > .av-slink{color:var(--av-gold)}
  /* Escape sluit het paneel (klasse gezet door aquavuro_header_script), ook als de focus erin staat */
  .av-nav > ul > li.av-dicht > .av-sub{visibility:hidden;opacity:0;transform:translateY(6px)}
  .av-nav > ul > li.av-dicht > .av-slink .av-scar{transform:translateY(-2px) rotate(45deg)}
  .av-nav > ul > li.av-dicht > .av-slink{color:var(--av-paper)}
}
@media (min-width:1440px){
  .av-head-in{--av-mfs:14px;--av-misz:20px;--av-misw:1.92}
}
/* Logo: het volledige logo (beeldmerk plus woordmerk, 207px breed) past pas vanaf 1480px naast het
   menu op een regel: logo, menu en knoppen vragen samen 1327,4px binnenbreedte bij 14px en de minimale
   tussenruimte van 10px (gemeten 09-10-2026). 1.55: grens van 1460 naar 1480px, want met een klassieke
   schuifbalk van 15px (Windows) is de pagina 15px smaller dan de viewport; gemeten in Chrome bij 1460px
   viewport 13,8px overloop tussen menu en Contact, bij 1480px (1465 breed) 0. Daaronder vanaf 1280px alleen het beeldmerk.
   1.53 toonde het woordmerk pas vanaf 1520px; die regel blijft staan en valt hierbinnen. */
@media (min-width:1480px){
  .av-logo-word{display:block}
}
/* De ruime maat van het concept (15px, 48px marge rond het menu) past met het volledige logo pas vanaf
   1660px: samen 1513,4px binnenbreedte (gemeten), bij een gutter van 72px is dat 1657,4px. 1.55: grens naar
   1690px om dezelfde schuifbalkreden (bij 1660px viewport in Chrome 12,4px te weinig, bij 1675px 0). */
@media (min-width:1690px){
  .av-head-in{--av-mfs:15px;--av-mgap:14px;--av-navm:48px;--av-conpad:18px;--av-ctapad:22px}
}

/* ---------- kaartknop: hover op licht minimaal 4,5:1 ----------
   Goud #CBA662 op wit was 2,29:1. #7d6229 is 5,9:1 op wit en 5,28:1 op #F5F5F5. Op een donkere
   sectie blijft de hover goud (daar is goud het contrast). */
.av-kcta:hover,.av-kcta:focus-visible{color:#7d6229;border-bottom-color:#7d6229}
.av-sec-dark .av-kcta:hover,.av-sec-navy .av-kcta:hover,.av-sec-slate .av-kcta:hover,
.av-sec-dark .av-kcta:focus-visible,.av-sec-navy .av-kcta:focus-visible,.av-sec-slate .av-kcta:focus-visible{
  color:var(--av-gold);border-bottom-color:var(--av-gold)}

/* ---------- vaste onderbalk mobiel (.av-dock, 55px) ----------
   Een anker, een focus met de Tab-toets of scrollIntoView houdt nu de balk vrij: de pagina scrolt
   zo dat het element boven de balk eindigt in plaats van eronder. */
@media (max-width:1023.98px){
  html{scroll-padding-bottom:64px}
}

/* =========================================================
   Componentbibliotheek 1.54 (prefix av-). Gebruik binnen de bestaande secties
   (.av-sec + .av-sec-white/-paper/-navy/-dark/-slate, nooit twee gelijke op rij).
   ========================================================= */

/* tekstlink (gold-donker op licht, goud-licht op donker). Niet in een <p> zetten: daar geldt de
   sitebrede regel voor inline links (navy met gouden onderstreping). */
.av-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:#7d6229;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s}
.av-link:hover,.av-link:focus-visible{color:var(--av-navy-deep)}
.av-sec-dark .av-link,.av-sec-navy .av-link,.av-sec-slate .av-link{color:var(--av-gold-light)}
.av-sec-dark .av-link:hover,.av-sec-navy .av-link:hover,.av-sec-slate .av-link:hover,
.av-sec-dark .av-link:focus-visible,.av-sec-navy .av-link:focus-visible,.av-sec-slate .av-link:focus-visible{color:var(--av-paper)}
/* categorielabel met icoon */
.av-tag{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;line-height:1.3;color:#7d6229}
.av-tag svg{width:18px;height:18px;flex:none;color:var(--av-gold)}
.av-sec-dark .av-tag,.av-sec-navy .av-tag,.av-sec-slate .av-tag,.av-band .av-tag{color:var(--av-gold-light)}

/* ---------- Dealer worden: hero (tekst links, beeld rechts) ---------- */
.av-dwhero{display:grid;grid-template-columns:minmax(0,1fr)}
.av-dwhero-tekst{padding:40px clamp(20px,4.5vw,72px) 44px;display:flex;flex-direction:column;justify-content:center}
.av-dwhero h1{font-size:38px;max-width:13ch;margin:0 0 18px;color:var(--av-paper)}
.av-dwhero-lead{font-size:16.5px;line-height:1.6;color:rgba(245,245,245,.82);max-width:52ch;margin:0}
.av-dwhero-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.av-dwhero-acties .av-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font-size:15px}
.av-dwhero-part{margin:34px 0 0;padding-top:18px;border-top:1px solid rgba(245,245,245,.16);font-size:14px;
  color:rgba(245,245,245,.72)}
.av-dwhero-beeld{margin:0;order:-1;aspect-ratio:16/10;overflow:hidden;background:var(--av-navy)}
.av-dwhero-beeld img{width:100%;height:100%;object-fit:cover}
@media (max-width:719.98px){
  .av-dwhero-acties .av-btn{width:100%}
}
@media (min-width:1024px){
  .av-dwhero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:min(560px,calc(100svh - var(--av-headh)))}
  .av-dwhero-tekst{padding:72px 56px 64px clamp(20px,4.5vw,72px)}
  .av-dwhero h1{font-size:52px;margin-bottom:22px}
  .av-dwhero-lead{font-size:18px}
  .av-dwhero-acties{margin-top:34px}
  .av-dwhero-part{margin-top:44px}
  .av-dwhero-beeld{order:0;aspect-ratio:auto}
}
@media (min-width:1440px){.av-dwhero h1{font-size:60px}}

/* ---------- voordelenraster 3x2 met lijnen ---------- */
.av-voor{display:grid;grid-template-columns:minmax(0,1fr);margin-top:36px;border-top:1px solid #DADDE2}
.av-voor > div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid #DADDE2}
.av-voor .av-ic{width:26px;height:26px;margin:0}
.av-voor b{display:block;font-size:17px;line-height:1.35;margin-bottom:4px}
.av-voor span{display:block;font-size:15px;line-height:1.55;color:var(--av-slate)}
@media (min-width:720px){
  .av-voor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-voor > div{padding:26px 28px 28px 0}
  .av-voor > div:nth-child(2n){padding-left:28px;border-left:1px solid #DADDE2}
}
@media (min-width:1024px){
  .av-voor{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px}
  .av-voor > div,.av-voor > div:nth-child(2n){padding:28px 32px 30px 0;border-left:0}
  .av-voor > div:nth-child(3n+2),.av-voor > div:nth-child(3n+3){padding-left:32px;border-left:1px solid #DADDE2}
}

/* ---------- verticale stappenrail (eerste stip gevuld) ---------- */
.av-railw{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.av-rail{list-style:none;margin:6px 0 0;padding:0}
.av-rail li{position:relative;padding:0 0 30px 40px}
.av-rail li:last-child{padding-bottom:0}
.av-rail li::before{content:"";position:absolute;left:5.25px;top:14px;bottom:-6px;width:1.5px;background:#C2C8D0}
.av-rail li:last-child::before{display:none}
.av-rail li::after{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;
  border:1.5px solid #8A6D2F;background:var(--av-paper)}
.av-sec-white .av-rail li::after{background:#fff}
.av-rail li:first-child::after{background:var(--av-gold);border-color:var(--av-gold)}
.av-rail h3{font-size:21px;margin:0 0 6px}
.av-rail p{font-size:15.5px;line-height:1.6;color:var(--av-slate);max-width:56ch;margin:0}
@media (min-width:1024px){
  .av-railw{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}
  .av-rail li{padding-bottom:34px}
  .av-rail h3{font-size:23px}
}

/* ---------- merkenrij van vijf (op een donkere sectie) ---------- */
.av-merkrij-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px}
.av-merkrij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin-top:32px}
.av-merkrij a{display:block;position:relative}
.av-merkrij figure{margin:0 0 14px;aspect-ratio:1;overflow:hidden;background:var(--av-navy-deep)}
.av-merkrij img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.av-merkrij a:hover img{transform:scale(1.03)}
.av-merkrij h3{font-size:19px;margin:0 0 6px;color:var(--av-paper);transition:color .2s}
.av-merkrij a:hover h3,.av-merkrij a:focus-visible h3{color:var(--av-gold)}
.av-merkrij p{font-size:14px;line-height:1.5;color:rgba(245,245,245,.74);margin:0}
@media (min-width:1024px){
  .av-merkrij{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:44px}
  .av-merkrij figure{aspect-ratio:4/5}
  .av-merkrij h3{font-size:20px}
}

/* ---------- twee kolommen, vinkjeslijst, plek voor Daniël ---------- */
.av-twee{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
@media (min-width:1024px){.av-twee{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}}
.av-vink{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.av-vink li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;font-size:16px;line-height:1.55}
.av-vink li::before{content:"";width:12px;height:7px;border-left:1.8px solid var(--av-gold);
  border-bottom:1.8px solid var(--av-gold);transform:rotate(-45deg);margin:7px 0 0 4px}
.av-daniel{background:var(--av-paper);display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px}
.av-sec-paper .av-daniel{background:#fff}
.av-daniel-portret{margin:0;aspect-ratio:4/5;overflow:hidden;background:#E4E7EB}
.av-daniel-portret img{width:100%;height:100%;object-fit:cover}
.av-daniel-portret.av-leeg{border:1.5px dashed #9AA3B2;background:none;display:flex;align-items:center;
  justify-content:center;text-align:center;font-size:12px;line-height:1.4;color:#5A6577;padding:10px}
.av-daniel h3{font-size:24px;margin:4px 0 10px}
.av-daniel p{font-size:15px;line-height:1.6;color:var(--av-slate);margin:0 0 12px}
.av-daniel p:last-child{margin-bottom:0}
@media (min-width:720px){
  .av-daniel{grid-template-columns:150px minmax(0,1fr);gap:26px;padding:30px}
  .av-daniel h3{font-size:26px}
}

/* ---------- formulierblok (tekst links, Formidable-formulier in een witte kaart rechts) ---------- */
.av-formblok{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.av-formkaart{background:#fff;color:var(--av-navy-deep);padding:22px}
.av-contactregel{display:grid;gap:10px;margin-top:26px;font-size:14px}
.av-contactregel a{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:600;color:inherit}
.av-contactregel a svg{width:20px;height:20px;flex:none;color:var(--av-gold)}
.av-contactregel a:hover,.av-contactregel a:focus-visible{color:var(--av-gold)}
.av-sec-dark .av-contactregel span,.av-sec-navy .av-contactregel span{color:rgba(245,245,245,.72)}
@media (min-width:1024px){
  .av-formblok{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
  .av-formkaart{padding:36px}
}

/* ---------- FAQ in twee kolommen met groepen (los van .av-faq, dat av-extra-1.36.js zelf splitst) ---------- */
.av-faqg{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:28px}
.av-faqg h3{font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:600;line-height:1.4;
  color:#7d6229;margin:30px 0 6px;letter-spacing:0}
.av-faqg > div > h3:first-child{margin-top:0}
.av-faqg details,.av-ar-faq details{border-bottom:1px solid #DADDE2;padding:17px 0}
.av-faqg summary,.av-ar-faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;
  font-weight:600;font-size:16px;line-height:1.45;cursor:pointer}
.av-faqg summary::-webkit-details-marker,.av-ar-faq summary::-webkit-details-marker{display:none}
.av-faqg summary::after,.av-ar-faq summary::after{content:"+";flex:none;font-weight:400;font-size:22px;line-height:1;color:var(--av-gold)}
.av-faqg details[open] summary::after,.av-ar-faq details[open] summary::after{content:"\2212"}
.av-faqg details p,.av-ar-faq details p{font-size:15px;line-height:1.65;color:var(--av-slate);margin:10px 0 0;max-width:66ch}
.av-sec-dark .av-faqg h3,.av-sec-navy .av-faqg h3{color:var(--av-gold-light)}
.av-sec-dark .av-faqg details,.av-sec-navy .av-faqg details{border-bottom-color:rgba(245,245,245,.16)}
.av-sec-dark .av-faqg details p,.av-sec-navy .av-faqg details p{color:rgba(245,245,245,.78)}
@media (max-width:1023.98px){.av-faqg > div + div > h3:first-child{margin-top:30px}}
@media (min-width:1024px){.av-faqg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;margin-top:40px}}

/* ---------- slotblok ---------- */
.av-slot{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.av-slot h2{font-size:29px;margin:0 0 10px}
.av-slot p{font-size:16px;line-height:1.6;color:var(--av-slate);max-width:62ch;margin:0}
.av-slot-acties{display:flex;flex-direction:column;align-items:flex-start;gap:14px;flex:none}
.av-slot-acties .av-btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;font-size:15px}
@media (min-width:1024px){
  .av-slot{flex-direction:row;justify-content:space-between;align-items:center;gap:40px}
  .av-slot h2{font-size:38px}
  .av-slot p{font-size:18px}
}

/* =========================================================
   Kennisbank: overzicht (page-kennisbank.php), kaart, blok "Uit de kennisbank"
   ========================================================= */
.av-kb{background:#fff}
.av-kb-kop{padding:32px 0 18px;border-bottom:1px solid #DADDE2}
.av-kb-kop h1{font-size:40px;margin:0 0 10px}
.av-kb-intro,.av-kb-intro p{font-size:16px;line-height:1.6;color:var(--av-slate);max-width:62ch;margin:0}
.av-kb-filter{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:18px -20px 0 0;padding:2px 20px 2px 2px}
.av-kb-filter[hidden]{display:none}
.av-kb-filter::-webkit-scrollbar{display:none}
.av-kb-filter button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid #C9CDD4;
  border-radius:21px;background:#fff;color:var(--av-navy-deep);font:500 14px/1 'Montserrat',Arial,sans-serif;
  white-space:nowrap;cursor:pointer;transition:border-color .2s,background-color .2s}
.av-kb-filter button svg{width:18px;height:18px;flex:none;color:var(--av-gold)}
.av-kb-filter button em{font-style:normal;color:#5A6577;font-size:12.5px}
.av-kb-filter button:hover{border-color:var(--av-navy-deep)}
.av-kb-filter button[aria-pressed="true"]{background:var(--av-navy-deep);border-color:var(--av-navy-deep);color:var(--av-paper)}
.av-kb-filter button[aria-pressed="true"] em{color:rgba(245,245,245,.7)}
.av-kb-filter button:focus-visible{outline-offset:2px}

/* kaart: de titel is de link, de hele kaart is klikbaar via de titel (::after over de kaart) */
.av-kb-kaart{position:relative;min-width:0}
.av-kb-kaart > a.av-kb-link{position:static}
.av-kb-fig{margin:0;overflow:hidden;background:var(--av-navy);aspect-ratio:4/3}
.av-kb-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.av-kb-kaart:hover .av-kb-fig img{transform:scale(1.03)}
.av-kb-tekst{min-width:0}
.av-kb-kaart h2,.av-kb-kaart h3{margin:8px 0 8px;line-height:1.2}
.av-kb-kaart h3{font-size:18px}
.av-kb-kaart h2 a,.av-kb-kaart h3 a{color:var(--av-navy-deep);transition:color .2s}
.av-kb-kaart h2 a::after,.av-kb-kaart h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.av-kb-kaart:hover h2 a,.av-kb-kaart:hover h3 a{color:#7d6229}
.av-kb-kaart h2 a:focus-visible,.av-kb-kaart h3 a:focus-visible{outline:0}
.av-kb-kaart h2 a:focus-visible::after,.av-kb-kaart h3 a:focus-visible::after{outline:2px solid var(--av-gold);outline-offset:4px}
.av-kb-kaart p.av-kb-uittreksel{font-size:14.5px;line-height:1.55;color:var(--av-slate);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.av-kb-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;line-height:1.4;color:#5A6577;margin:12px 0 0}
.av-kb-lees{color:#7d6229;font-weight:600}
.av-kb-kaart:hover .av-kb-lees{text-decoration:underline;text-underline-offset:3px}

/* topblok: een groot artikel (7fr) en twee kleine (5fr, beeld 42% links) */
.av-kb-top{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 0 36px;border-bottom:1px solid #DADDE2}
.av-kb-groot .av-kb-fig{aspect-ratio:16/10;margin-bottom:16px}
.av-kb-groot h2{font-size:28px;max-width:20ch;margin:10px 0 12px}
.av-kb-groot p.av-kb-uittreksel{font-size:15.5px;max-width:56ch;-webkit-line-clamp:4}
.av-kb-rechts{display:grid;gap:24px;align-content:start}
.av-kb-klein{display:grid;grid-template-columns:34% minmax(0,1fr);gap:14px;align-items:start}
.av-kb-klein .av-kb-fig{aspect-ratio:1}
.av-kb-klein h3{margin-top:6px}
.av-kb-klein p.av-kb-uittreksel{display:none}

/* feed: vier kolommen; onder 720px een rij met het beeld links */
.av-kb-feed{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 0 48px}
.av-kb-feed > .av-kb-kaart{display:grid;grid-template-columns:34% minmax(0,1fr);gap:14px;align-items:start}
.av-kb-feed > .av-kb-kaart .av-kb-fig{aspect-ratio:1}
.av-kb-feed > .av-kb-kaart h3{margin-top:4px}
.av-kb-feed > .av-kb-kaart p.av-kb-uittreksel{display:none}
/* zonder filter staan de drie topartikelen niet nog een keer in de feed; met een filter wel (de
   bovenste rij verdwijnt dan, zie data-filter op .av-kb-lijst) */
.av-kb-lijst:not([data-filter]) .av-kb-feed > .av-kb-intop{display:none}
.av-kb-lijst[data-filter] .av-kb-top{display:none}
.av-kb-lijst[data-filter] .av-kb-feed > .av-kb-kaart.av-kb-uit{display:none}
.av-kb-leeg{font-size:16px;color:var(--av-slate);padding:40px 0}
@media (min-width:720px){
  .av-kb-feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px;padding:48px 0 72px}
  .av-kb-feed > .av-kb-kaart{display:block}
  .av-kb-feed > .av-kb-kaart .av-kb-fig{aspect-ratio:4/3;margin-bottom:16px}
  .av-kb-feed > .av-kb-kaart p.av-kb-uittreksel{display:-webkit-box}
  .av-kb-kaart h3{font-size:21px}
}
@media (min-width:1024px){
  .av-kb-kop{padding:56px 0 26px}
  .av-kb-kop h1{font-size:56px}
  .av-kb-intro,.av-kb-intro p{font-size:18px}
  .av-kb-filter{flex-wrap:wrap;overflow:visible;margin:26px 0 0;padding:0}
  .av-kb-top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px;padding:40px 0 56px}
  .av-kb-groot h2{font-size:38px}
  .av-kb-groot p.av-kb-uittreksel{font-size:17px}
  .av-kb-rechts{gap:28px}
  .av-kb-klein{grid-template-columns:42% minmax(0,1fr);gap:20px}
  .av-kb-klein h3{font-size:22px}
  .av-kb-klein p.av-kb-uittreksel{display:-webkit-box}
  .av-kb-feed{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* donkere rij onderaan: naar de categoriepagina's en de dealerzoeker */
.av-kb-door{padding:44px 0 56px}
.av-kb-door-kop{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.av-kb-door h2{font-size:26px;margin:0;color:var(--av-paper)}
.av-kb-door-kop + p{font-size:14px;line-height:1.6;color:rgba(245,245,245,.72);margin:10px 0 26px;max-width:62ch}
.av-kb-cat{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid rgba(245,245,245,.16)}
.av-kb-cat a{display:flex;gap:14px;align-items:center;padding:20px 0;font-weight:600;font-size:16px;
  color:var(--av-paper);border-bottom:1px solid rgba(245,245,245,.16);transition:color .2s}
.av-kb-cat a svg{width:24px;height:24px;flex:none;color:var(--av-gold)}
.av-kb-cat a .av-kb-pijl{margin-left:auto;display:flex}
.av-kb-cat a .av-kb-pijl svg{width:20px;height:20px;transition:transform .2s}
.av-kb-cat a:hover,.av-kb-cat a:focus-visible{color:var(--av-gold)}
.av-kb-cat a:hover .av-kb-pijl svg{transform:translateX(3px)}
@media (min-width:720px){
  .av-kb-cat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-kb-cat a:nth-child(2n){padding-left:24px;border-left:1px solid rgba(245,245,245,.16)}
  .av-kb-cat a{padding-right:20px}
}
@media (min-width:1024px){
  .av-kb-door-kop{flex-direction:row;justify-content:space-between;align-items:baseline}
  .av-kb-cat{grid-template-columns:repeat(4,minmax(0,1fr))}
  .av-kb-cat a{padding:24px 20px 24px 0}
  .av-kb-cat a:nth-child(2n){padding-left:0;border-left:0}
  .av-kb-cat a + a{padding-left:24px;border-left:1px solid rgba(245,245,245,.16)}
}

/* blok "Uit de kennisbank" op de categoriepagina's, en "Verder lezen" onder een artikel */
.av-kb-blokkop{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.av-kb-blokkop h2{font-size:26px;margin:0}
.av-kb-blok .av-kb-feed,.av-verder .av-kb-feed{padding:28px 0 0}
.av-verder .av-kb-feed{gap:20px}
@media (min-width:720px){
  .av-kb-blok .av-kb-feed,.av-verder .av-kb-feed{padding-top:32px}
}
@media (min-width:1024px){
  .av-kb-blokkop{flex-direction:row;justify-content:space-between;align-items:baseline}
  .av-kb-blokkop h2{font-size:32px}
  .av-verder .av-kb-feed{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
}

/* =========================================================
   Artikel (index.php, alleen voor een omgezet artikel met div.av-ar-inhoud)
   ========================================================= */
.av-ar{background:#fff}
.av-ar-kop{padding:28px 0 0}
.av-ar-kop .av-kruimel{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:#5A6577;margin:0 0 18px}
.av-ar-kop .av-kruimel a{color:var(--av-slate);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(44,58,82,.4)}
.av-ar-kop .av-kruimel a:hover{color:#7d6229}
.av-ar-kop h1{font-size:36px;max-width:18ch;margin:8px 0 16px;color:var(--av-navy-deep)}
.av-ar-lead{font-size:16.5px;line-height:1.6;color:var(--av-slate);max-width:62ch;margin:0}
.av-ar-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;color:#5A6577;margin:16px 0 22px}
.av-ar-meta .av-sep{margin:0}
.av-ar-beeld{margin:0 calc(-1 * clamp(20px,4.5vw,72px));aspect-ratio:4/3;overflow:hidden;background:var(--av-navy)}
.av-ar-beeld img{width:100%;height:100%;object-fit:cover}
.av-ar-onder{font-size:13px;line-height:1.5;color:#5A6577;margin:10px 0 0}
.av-ar-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:28px 0 56px;align-items:start}
.av-ar-body{min-width:0;max-width:740px}
.av-ar-zij{display:none}
@media (min-width:720px){
  .av-ar-beeld{margin:0;aspect-ratio:21/9}
}
@media (min-width:1024px){
  .av-ar-kop{padding:52px 0 0}
  .av-ar-kop .av-kruimel{margin-bottom:22px}
  .av-ar-kop h1{font-size:58px;margin:12px 0 18px}
  .av-ar-lead{font-size:19px}
  .av-ar-meta{margin:22px 0 36px}
  .av-ar-grid{grid-template-columns:minmax(0,1fr) 300px;gap:72px;padding:56px 0 80px}
  .av-ar-zij{display:grid;gap:22px;position:sticky;top:111px}
}

/* de artikeltekst zelf */
.av-ar-inhoud{font-size:16.5px;line-height:1.75;color:#1F2A3C}
.av-ar-inhoud > h2{font-size:27px;margin:48px 0 12px;line-height:1.18}
.av-ar-inhoud > h3{font-size:22px;margin:32px 0 10px}
.av-ar-inhoud > p{margin:0 0 18px}
.av-ar-inhoud > ul,.av-ar-inhoud > ol{margin:0 0 18px;padding-left:22px}
.av-ar-inhoud > ul li,.av-ar-inhoud > ol li{margin-bottom:6px}
.av-ar-inhoud h2[id],.av-ar-kort h2[id]{scroll-margin-top:90px}
@media (min-width:1024px){
  .av-ar-inhoud{font-size:17.5px}
  .av-ar-inhoud > h2{font-size:34px;margin:64px 0 16px}
}

/* kort antwoord met groot getal */
.av-ar-kort{background:var(--av-navy-deep);color:var(--av-paper);padding:24px 22px;display:grid;
  grid-template-columns:minmax(0,1fr);gap:16px;align-items:center;margin:0 0 8px}
.av-ar-getal{font-family:'Playfair Display',Georgia,serif;font-size:60px;line-height:.9;color:var(--av-gold);white-space:nowrap}
.av-ar-getal small{display:block;font-family:'Montserrat',Arial,sans-serif;font-size:13px;line-height:1.4;
  color:rgba(245,245,245,.72);margin-top:10px;white-space:normal}
.av-ar-kort h2{font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:600;line-height:1.4;
  color:var(--av-gold-light);margin:0 0 6px;letter-spacing:0}
.av-ar-kort p{font-size:16px;line-height:1.6;margin:0;color:var(--av-paper)}
@media (min-width:720px){
  .av-ar-kort{grid-template-columns:auto minmax(0,1fr);gap:34px;padding:32px 34px}
  .av-ar-getal{font-size:76px}
}

/* somblok: drie vakken met + en =, het laatste in goud */
.av-som{display:grid;grid-template-columns:minmax(0,1fr);margin:26px 0 12px}
.av-som > div{background:var(--av-paper);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.av-som > .av-som-op{background:none;padding:0;height:30px;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:#7d6229}
.av-som-lbl{display:flex;gap:9px;align-items:center;font-size:13px;font-weight:600;color:var(--av-slate)}
.av-som-lbl svg{width:18px;height:18px;flex:none;color:var(--av-gold)}
.av-som-reken{font-size:14px;line-height:1.45;color:#5A6577}
.av-som-uit{font-family:'Playfair Display',Georgia,serif;font-size:30px;line-height:1.1;color:var(--av-navy-deep)}
.av-som > .av-som-tot{background:var(--av-gold)}
.av-som-tot .av-som-lbl,.av-som-tot .av-som-reken{color:var(--av-navy-deep)}
.av-som-tot .av-som-lbl svg{color:var(--av-navy-deep)}
@media (min-width:720px){
  .av-som{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1.05fr);align-items:stretch}
  .av-som > .av-som-op{height:auto;font-size:26px}
}
.av-voetnoot{font-size:14px;line-height:1.6;color:#5A6577;margin:0 0 22px}
.av-ar-inhoud > p.av-voetnoot{margin-bottom:22px}

/* kader */
.av-kader{background:#FBF8F1;padding:20px 24px;margin:26px 0}
.av-kader b{display:block;font-size:15px;margin-bottom:6px}
.av-kader p{font-size:15.5px;line-height:1.6;color:var(--av-slate);margin:0}
.av-kader code{font-family:'Montserrat',Arial,sans-serif;font-weight:600;font-size:.95em;background:#fff;
  padding:2px 8px;border:1px solid #E6DCC3;white-space:nowrap}

/* staafvergelijking */
.av-balk{margin:24px 0 16px;display:grid;gap:14px} /* 1.56: onderkant 8 naar 16px */
.av-balk-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;font-size:14px;line-height:1.4}
.av-balk-b{grid-column:1/-1;grid-row:2;height:14px;background:#EEF0F3;position:relative;display:block}
.av-balk-b i{position:absolute;left:0;top:0;bottom:0;background:var(--av-gold)}
.av-balk-b i.av-donker{background:var(--av-slate)}
.av-balk-w{font-weight:600;text-align:right;white-space:nowrap}
@media (min-width:720px){
  .av-balk{gap:12px}
  .av-balk-r{grid-template-columns:200px minmax(0,1fr) 110px;gap:16px}
  .av-balk-b{grid-column:auto;grid-row:auto}
}

/* vergelijking in twee vakken met een 24-uursbalk */
.av-verg{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:26px 0}
.av-verg > div{border:1px solid #DADDE2;padding:22px}
.av-verg h3{font-size:22px;margin:0 0 4px}
.av-verg-sub{font-size:14px;line-height:1.45;color:#5A6577;margin:0 0 18px}
.av-dag{display:flex;height:30px;margin:6px 0 8px;background:#EEF0F3}
.av-dag i{display:block;height:100%;background:var(--av-gold)}
.av-dag-lbl{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.4;color:#5A6577;margin:0 0 16px}
.av-verg dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;font-size:14.5px;line-height:1.45}
.av-verg dt{color:var(--av-slate)}
.av-verg dd{margin:0;font-weight:600;text-align:right;white-space:nowrap}
@media (min-width:720px){
  .av-verg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .av-verg > div{padding:24px}
}

/* factorlijst met iconen */
.av-factor{display:grid;grid-template-columns:minmax(0,1fr);gap:0 34px;margin:20px 0}
.av-factor > div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid #DADDE2}
.av-factor .av-ic{width:26px;height:26px;margin:2px 0 0}
.av-factor b{display:block;font-size:17px;line-height:1.35;margin-bottom:4px}
.av-factor p{font-size:15px;line-height:1.6;color:var(--av-slate);margin:0}
@media (min-width:720px){
  .av-factor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-factor > div{padding:22px 0}
  .av-factor > div.av-breed{grid-column:1/-1}
}

/* figuur met onderschrift */
.av-fig{margin:30px 0}
.av-fig img{width:100%;height:auto;background:var(--av-paper)}
.av-fig figcaption{font-size:13.5px;line-height:1.5;color:#5A6577;margin-top:10px}

/* productband: model uit het aanbod, beeld contain op #F5F5F5 */
.av-band{display:grid;grid-template-columns:minmax(0,1fr);background:var(--av-navy-deep);color:var(--av-paper);margin:40px 0}
.av-band-t{padding:24px 22px}
.av-band h3{font-size:24px;margin:8px 0 10px;color:var(--av-paper)}
.av-band p{font-size:15px;line-height:1.6;color:rgba(245,245,245,.8);margin:0}
.av-band dl{display:flex;flex-wrap:wrap;gap:12px 22px;margin:18px 0 22px;font-size:14px}
.av-band dl > div{min-width:0}
.av-band dt{color:rgba(245,245,245,.6);font-size:12.5px}
.av-band dd{margin:0;font-weight:600}
.av-band .av-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font-size:14px}
.av-band figure{margin:0;order:-1;aspect-ratio:16/10;background:var(--av-paper);padding:12px;overflow:hidden}
.av-band figure img{width:100%;height:100%;object-fit:contain}
@media (min-width:720px){
  .av-band{grid-template-columns:minmax(0,1fr) 260px}
  .av-band-t{padding:30px 32px}
  .av-band h3{font-size:28px}
  .av-band figure{order:0;aspect-ratio:auto}
}

/* zijbalk: inhoudsopgave en dealerkaart */
.av-toc{border-top:2px solid var(--av-navy-deep);padding-top:16px}
.av-toc-kop{font-size:13px;font-weight:600;margin:0 0 10px;color:var(--av-navy-deep)}
.av-toc ol{list-style:none;margin:0;padding:0}
.av-toc a{display:block;padding:8px 0 8px 14px;font-size:14.5px;line-height:1.4;color:var(--av-slate);
  border-left:2px solid #E3E6EA;transition:color .2s,border-color .2s}
.av-toc a:hover{color:var(--av-navy-deep);border-left-color:#C2C8D0}
.av-toc a.av-on{border-left-color:var(--av-gold);color:var(--av-navy-deep);font-weight:600}
.av-toc a:focus-visible{outline-offset:2px}
.av-zij-cta{background:var(--av-paper);padding:22px}
.av-zij-cta .av-zij-cta-kop{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:21px;line-height:1.2;margin:0 0 8px;color:var(--av-navy-deep)}
.av-zij-cta p{font-size:14px;line-height:1.6;color:var(--av-slate);margin:0 0 16px}
.av-zij-cta .av-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  padding:0 12px;font-size:14px;text-align:center;line-height:1.3}

/* artikel-FAQ (de gedeelde regels staan bij .av-faqg) */
.av-ar-faq{margin:8px 0 0}
.av-ar-faq summary{font-size:16.5px}
.av-ar-faq details p{font-size:15.5px}

/* 1.54 formulier 3 (pagina 24): de beschrijving onder veld 35 in dezelfde stijl als de andere hulptekst
   in het formulier (p.av-form-privacy: 12.5px, regelhoogte 1.6, slate). Was de Formidable-standaard
   (12px, #667085). Alleen formulier 3, alleen de beschrijvingsregel; het veld zelf blijft ongemoeid. */
#av-main #frm_form_3_container .frm_description{font-size:12.5px;line-height:1.6;color:#2C3A52;margin-top:6px;padding:0}

/* 1.54 vierkoloms productraster op een laag scherm (gemeten op 29, saunaraster onder #av-mojodas-saunas):
   op 1280x680 was rij 1 640,9px hoog, met de vaste header van 65px 25,9px te hoog; op 1366x650 11,8px.
   Oorzaak: specwaarden van drie regels in een kaart van 274,7px. Het beeldvlak gaat daar van 4:3 naar
   16:10; het beeld staat op object-fit:contain, dus er valt niets weg, het wordt alleen kleiner.
   Alleen 1280 tot 1439px breed en tot 720px hoog; daarboven past de rij al. */
@media (min-width:1280px) and (max-width:1439.98px) and (max-height:720px){
  .av-kaarten-4 > .av-kaart > .av-kfig{aspect-ratio:16/10}
}

/* 1.55 mobiele kopregel onder 420px: logo (170px), belknop (44px) en Menu (104px) met 18px tussenruimte
   vragen 386px; op 375px (iPhone SE en mini, of 390px met een klassieke schuifbalk) viel Menu naar een
   tweede regel (gemeten in Chrome: kopregel 138,9px in plaats van 76,9px). Tussenruimte 10px en Menu
   12px binnenmarge: samen 358px, past vanaf 358px breed. Grens 420px zodat ook een venster met een
   schuifbalk van 15px (386 plus 15) eronder valt. */
@media (max-width:419.98px){
  .av-head-in{column-gap:10px}
  .av-burger{padding-left:12px;padding-right:12px}
}

/* =========================================================
   1.56 (09-10-2026)
   ========================================================= */
/* Merkenrij (Dealer worden, 167) onder 1024px: vijf kaarten in twee kolommen lieten Mojodas alleen op de
   derde rij staan. Een oneven laatste kaart loopt daar over de volle breedte, met een beeld van 2:1 zodat
   hij net zo hoog is als een kaart in de rij erboven. Vanaf 1024px blijven het vijf kolommen. */
@media (max-width:1023.98px){
  .av-merkrij > :last-child:nth-child(odd){grid-column:1 / -1}
  .av-merkrij > :last-child:nth-child(odd) figure{aspect-ratio:2 / 1}
}


/* =========================================================
   1.57 (09-10-2026): header terug naar de B-opbouw, rustige bovenbalk met korte USP's, inline link op
   een donkere sectie bij hover goud.
   Mitch: "Menu voelt hier teveel gekropt, aquavuro naamlogo is hier namelijk verdwenen en "jacuzzi's en
   spa's begint nu wel heel dicht tegen het logo aan. Laten we maar terug gaan dat contact bel optie en
   dealerzoeker in hoofdmenu blijven en dat daaronder submenu staat met "dealer worden, over ons en
   kennisbank" -> deze is niet sticky zodat het niet in beeld gaat staan" en "huidige dingen in
   announcement bar vind ik overbodig en te aanwezig -> eerder was het nog beter met puur praktische korte
   USP's."
   Opbouw vanaf 1280px:
   - bovenbalk (.av-util): drie korte USP's als gewone tekst, verdeeld over de breedte. Schuift weg.
   - hoofdrij (vast): logo met woordmerk, vijf categorieen met icoon, Merken (variant 2), rechts Contact,
     de belknop en de Dealerzoeker. Het menu vult de ruimte met gelijke tussenruimte (space-between), met
     een vaste afstand tot het logo en tot Contact (--av-navm).
   - subbalk (.av-head-sub, na </header> en dus buiten het vaste deel, mechanisme van 1.51): Dealer
     worden, Over ons, Kennisbank, rechts uitgelijnd. Schuift weg met de bovenbalk.
   - vaste stand: de rij gaat van 18 naar 10px (zoals 1.55); de 16px die de header dan kleiner wordt,
     komt als padding bovenin de subbalk, zodat de pagina niet verspringt en er geen lichte strook
     tussen header en subbalk valt.
   - de verloopstreep onder de header staat alleen in de vaste stand; bovenaan staat de verloopstreep
     onder de subbalk.
   Onder 1280px: het uitklapmenu zoals in 1.56, met Kennisbank erbij (li.av-nav-m).
   ========================================================= */

/* 1.62: de regels voor de bovenbalk (.av-usps, .av-usp-1/-2) zijn weg met de balk. */

/* ---------- subbalk: alleen vanaf 1280px ---------- */
.av-head-sub{display:none}
@media (min-width:1280px){
  :root{--av-subh:47px;--av-headh:calc(81px + var(--av-subh))} /* 1.62: zonder --av-utilh */
  /* Ankersprong: in de vaste stand is alleen de hoofdrij in beeld (gemeten onderkant 65px bij 1280 en
     1920, klassieke scrollbalk). 65px plus 6px lucht = 71px; de subbalk en de bovenbalk zijn dan weg. */
  [id]{scroll-margin-top:71px}
  .av-logo-word{display:block}
  .av-head-in{--av-navm:clamp(32px,calc(32px + (100vw - 1280px) * .05),64px)}
  .av-head::after{opacity:0;transition:opacity .2s ease}
  .av-head.av-vast::after{opacity:1}
  .av-head.av-vast{margin-bottom:0}
  .av-head-sub{display:block;position:relative;background:var(--av-navy-deep);transition:padding-top .2s ease}
  .av-head.av-vast + .av-head-sub{padding-top:16px}
  .av-head-sub::after{content:"";display:block;height:1px;
    background:linear-gradient(90deg,rgba(203,166,98,0) 0%,rgba(203,166,98,.5) 50%,rgba(203,166,98,0) 100%)}
  .av-nav2{display:block;border-top:1px solid rgba(203,166,98,.16)}
  .av-nav2 ul{list-style:none;margin:0;padding:0 0 4px;display:flex;justify-content:flex-end;gap:28px}
  .av-nav2 a{display:flex;align-items:center;min-height:41px;padding:0;font-size:13px;font-weight:500;
    color:rgba(245,245,245,.72);white-space:nowrap;transition:color .2s}
  .av-nav2 a:hover,.av-nav2 a:focus-visible{color:var(--av-gold)}
  .av-nav2 a[aria-current="page"]{color:var(--av-paper);box-shadow:inset 0 -2px 0 var(--av-gold)}
}

/* ---------- inline link op een donkere sectie: hover en focus goud ----------
   Was bij hover #F5F5F5 (geen verandering): de regel voor donkere secties weegt even zwaar als de
   hoverregel en staat later. Deze selector is zwaarder (extra :hover) en staat onderaan. */
#av-main .av-sec-dark p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):hover,
#av-main .av-sec-navy p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):hover,
#av-main .av-sec-slate p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):hover,
#av-main .av-sec-dark p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):focus-visible,
#av-main .av-sec-navy p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):focus-visible,
#av-main .av-sec-slate p a:not(.av-btn):not(.av-btn-p):not(.av-btn-o):not(.av-btn-l):not(.av-btn-d):not(.av-kcta):not(.av-lees):focus-visible{
  color:var(--av-gold)}

/* =========================================================
   1.58 (09-10-2026): Merken-uitklap blijft open op weg naar het paneel, USP's in de bovenbalk netjes
   rond het midden, menu op desktop compacter, scheidingslijn tussen het menu en Contact terug.
   Mitch, letterlijk:
   "1. uitklap menu springt weg als je eroverheen wilt hoveren
   2. Announcement bar usp's op laptop niet netjes in het midden
   3. op laptop goede verhouding tussen onderdelen, maar desktop zouden het qua LP's iets dichter op
   elkaar kunnen staan
   4. Streepje dat lp's met contact gedeelte scheiden was best nice, kan eventueel terug"
   (punt 5, de blog-URL's, is geen CSS: mu-plugin aquavuro-concept-permalink.php)
   - 1: de brug onder Merken (.av-sub::before, sinds 1.55) deed niets: .av-sub heeft overflow:hidden
     (mobiele uitklap, bovenaan dit bestand) en knipte de brug weg. Tussen Merken en het paneel zat dus
     19px (11px in de vaste stand) zonder hover. Vanaf 1280px staat het paneel op overflow:visible en
     heeft het li zelf ook een brug van dezelfde hoogte, die ook geldt tijdens het openen (het paneel
     schuift dan nog 6px omhoog). De verloopstreep onder de rij ving bovenaan de muis op de onderste
     pixel van de rij; die krijgt pointer-events:none.
   - 2: vanaf 1024px een raster 1fr auto 1fr. USP 2 staat precies in het midden van .av-wrap, USP 1
     rechts en USP 3 links in hun kolom, met dezelfde tussenruimte: 20px op 1024, oplopend tot 48px
     vanaf 1280px (op 1024 past 48px niet naast de langste USP). Onder 1024px staat de ene USP in het
     midden.
   - 3: tot en met 1599px niets veranderd. Vanaf 1600px staan de vijf categorieen en Merken als groep
     tegen de scheidingslijn, met een vaste tussenruimte (48px op 1600, 52 op 1680, 64 op 1920; was 59,
     73 en 102). De vrije ruimte valt tussen logo en menu.
   - 4: de scheidingslijn van header A (li.av-nav-deler in 1.55: 1px breed, 24px hoog,
     rgba(245,245,245,.22)) staat terug, nu als .av-headcta::before, midden tussen Merken en Contact.
     Neemt geen ruimte in, dus het menu verschuift er niet door. header.php is niet gewijzigd.
   ========================================================= */

/* 1.62: punt 2 (USP's rond het midden) is weg met de bovenbalk. */

@media (min-width:1280px){
  /* ---------- 1. Merken: hoverbrug tussen menu-item en paneel ---------- */
  .av-nav > ul > li > .av-sub{overflow:visible}
  .av-nav > ul > li.av-nav-merk::after{content:"";position:absolute;left:0;right:0;top:100%;
    height:calc(var(--av-rijpad) + 2px)}
  /* de verloopstreep onder de rij (.av-head::after) heeft bovenaan opacity 0, wordt daardoor een eigen
     laag boven de brug en ving de muis op de onderste pixel van de rij: die streep is decoratie */
  .av-head::after{pointer-events:none}

  /* ---------- 4. scheidingslijn tussen menu en Contact ---------- */
  .av-headcta{position:relative}
  .av-headcta::before{content:"";position:absolute;top:50%;left:calc((var(--av-conpad) - var(--av-navm) + .5px) / 2);
    width:1px;height:24px;margin-top:-12px;background:rgba(245,245,245,.22);pointer-events:none}
}

/* ---------- 3. menu op desktop: vaste tussenruimte, groep tegen de scheidingslijn ---------- */
@media (min-width:1600px){
  .av-nav > ul{justify-content:flex-end;gap:clamp(48px,calc(48px + (100vw - 1600px) * .05),64px)}
}

/* =========================================================
   1.59 (09-10-2026): aanvulling op punt 1 van 1.58, zelfde ronde.
   Mitch: "uitklap menu springt weg als je eroverheen wilt hoveren"
   Met alleen de brug sloot het paneel nog als de muis schuin naar rechts naar het paneel ging (bijvoorbeeld
   naar Harmonic of Treesse): het li van Merken is 70px breed, het paneel 360px, dus de muis verlaat het li
   al binnen de menurij. Nu blijft het paneel na het verlaten nog 0,2 seconde aanwijsbaar (visibility
   schakelt pas na 0,2s om); komt de muis in die tijd op het paneel, dan blijft het open. Escape (.av-dicht)
   sluit nog steeds direct. Gemeten in Chrome met echte muisbewegingen: zie handover-1.58-2026-10-09.md.
   Een nieuw bestand en geen aanpassing in 1.58: de proxy bewaart elk pad 30 dagen.
   ========================================================= */
@media (min-width:1280px){
  .av-nav > ul > li > .av-sub{transition:opacity .22s,transform .22s,visibility 0s linear .2s}
  .av-nav > ul > li:hover > .av-sub,.av-nav > ul > li:focus-within > .av-sub{transition:opacity .22s,transform .22s,visibility 0s}
  .av-nav > ul > li.av-dicht > .av-sub{transition:none}
}

/* =========================================================
   1.60 (09/10-10-2026): fixronde op de eindcontrole (paginacontroleur B1, BL1 t/m BL4, K4) plus de aanvulling
   uit anti-ai-design (header vanaf 1600px). Opdracht Mitch: "niet laten liggen, alles oppakken!".
   - B1 kaart-CTA: binnen het kaart-subgrid vult a.av-kcta zijn rij (align-self:stretch) en zet de tekst
     onderaan (flex-end). Elke CTA in een rij heeft dus dezelfde boven- en onderkant, ook als de ene tekst
     over twee regels loopt en de buurtekst over een. Tekst en gouden onderlijn staan waar ze in 1.44 al
     stonden (onderaan de rij); de kaart wordt er niet hoger van.
   - BL1 specregels: de Mojodas-sauna's hebben nu zes vaste regels (Afmetingen, Verwarming, Vermogen,
     Isolatie, Indeling, Levering). Het specsubgrid gaat daarom van vijf naar zes rijen: spans 12 / 11 / 6,
     uitklap rij 10, CTA rij 11. Lege subgridrijen zijn 0px hoog (row-gap 0), andere kaarten veranderen niet.
   - BL3 tikdoelen minstens 24px op 360, via padding, met een even grote negatieve marge waar de vorm anders
     zou verschuiven: a.av-kcta (22,8 naar 24,8), .av-art a.av-lees (21,3), de label van de dealerzoeker
     op 14 (22,1), de kruimellink "Kennisbank" boven elk artikel (80 x 22,9), summary in .av-faqg en
     .av-ar-faq (23,2 en 23,9).
   - BL4 slot van de artikelen: div.av-slot staat nu op alle elf artikelen (content). De afstand erboven is
     gelijk aan die boven een H2 in het artikel: 48px, vanaf 1024px 64px.
   - BL2 pagina 22, vergelijking van de drie koelniveaus: vanaf 720px (drie kolommen) zijn kaart en lijst een
     subgrid, dus kop, inleiding en de vijf regels staan per rij op een lijn.
   - K4 pagina 21, donkere sectie: .av-kolommen-vloei laat de drie alinea's vanaf 1024px in twee gelijke
     kolommen doorlopen, in de oorspronkelijke volgorde, zonder tekstwijziging.
   - Header vanaf 1600px: tussenruimte van de vijf categorieen en Merken vast 48px (was 52 op 1680 en 64 op
     1920). Menu tot Contact blijft --av-navm (52 / 64). Tot en met 1599px niets veranderd.
   ========================================================= */

/* ---------- B1: kaart-CTA op een hoogte per rij ---------- */
@supports (grid-template-rows: subgrid){
  .av-kaart > .av-kbody > .av-kcta{align-self:stretch;display:flex;align-items:flex-end}
}

/* ---------- BL1: specsubgrid zes rijen ---------- */
@supports (grid-template-rows: subgrid){
  .av-kaart{grid-row:span 12}
  .av-kbody{grid-row:span 11}
  .av-kaart .av-kspecs{grid-row:4 / span 6}
  .av-kmeer{grid-row:10}
  .av-kcta{grid-row:11}
}

/* ---------- BL3: tikdoelen minstens 24px ---------- */
.av-kaart .av-kcta{padding-top:2px}
.av-art .av-lees{padding:2px 0;margin-bottom:-2px}
.av-finder label{padding:1px 0;margin-bottom:7px}
.av-ar-kop .av-kruimel a{padding:1px 0;margin:-1px 0}
.av-faqg summary,.av-ar-faq summary{padding:1px 0;margin:-1px 0}

/* ---------- BL4: slotblok in een artikel, afstand gelijk aan een H2 ---------- */
.av-ar-inhoud > .av-slot{margin-top:48px}
@media (min-width:1024px){
  .av-ar-inhoud > .av-slot{margin-top:64px}
}

/* ---------- BL2: pagina 22, drie koelniveaus per rij op een lijn ---------- */
@media (min-width:720px){
  @supports (grid-template-rows: subgrid){
    .page-id-22 .av-arts > .av-art{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0;align-content:start}
    .page-id-22 .av-arts > .av-art > .av-lijst{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;margin-top:0}
  }
}

/* ---------- K4: drie alinea's in twee doorlopende kolommen ---------- */
@media (min-width:1024px){
  .av-kolommen.av-kolommen-vloei{display:block;columns:2;column-gap:clamp(40px,5vw,96px)}
  .av-kolommen-vloei > p{max-width:none;orphans:3;widows:3}
  .av-kolommen-vloei > p:first-child{margin-top:0}
  .av-kolommen-vloei > p:last-child{margin-bottom:0}
}

/* ---------- header vanaf 1600px: vaste tussenruimte in het menu ---------- */
@media (min-width:1600px){
  .av-nav > ul{gap:48px}
}


/* =========================================================
   VERSIE 1.61 (12-10-2026): feedbackronde 12-10 (Mitch M1, Daniël A1 en A3).
   Alles hieronder is TOEGEVOEGD; geen regel uit 1.60 of eerder is gewijzigd.
   ========================================================= */


/* 1.62: M1 (bovenbalk breder, met een icoon per USP) is weg met de bovenbalk. */

/* ---------- A1. homepage-H1 in twee delen ----------
   Daniël, letterlijk: "Maak er maar van: Internationale wellnessmerken. Europees vertegenwoordigd,
   lokaal ondersteund. ..." De tweede zin staat in de H1 als em.av-h1-regel: een eigen regel, goud
   cursief zoals het em-deel van 1.36, op 58% van het corps. Zo blijft de kop vanaf 1280px drie
   regels hoog (eerste zin op een regel) en past de hero op 1024 nog binnen 660px. */
.av-hero h1 .av-h1-regel{display:block;font-size:.58em;line-height:1.25;margin-top:.3em}

/* ---------- A3. portret van Daniël op Over ons (15) ----------
   Daniël: "De foto heb ik nog niet, ik heb alleen de foto van m'n visitekaartje: Is dat voor nu
   genoeg?" Besluit: ja, als klein portret. Bron 600x600, getoond op hooguit 300px (2x), onder
   720px op hooguit 220px. Staat in een .av-split.av-split-beeld naast de bio (1.36 PUNT 6). */
.av-split-beeld img.av-portret{width:300px;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover}
@media (max-width:719.98px){
  .av-split-beeld img.av-portret{width:220px}
}

/* =========================================================
   VERSIE 1.62 (12-10-2026): de bovenbalk (announcement bar) is weg, sitebreed.
   Mitch, letterlijk: "En ik vind de announcement bar gewoon een betje afleiden, zullen we het gewoon
   laten? Want het staat gewoon niet mooi bij de header"
   - header.php: div.av-util met ul.av-usps (drie USP's met icoon) verwijderd.
   - Hierboven verwijderd: de .av-util-, .av-utilnav-, .av-usps- en .av-usp-regels uit 1.43, 1.53, 1.54,
     1.57, 1.58 en 1.61, en --av-utilh. .av-head staat sticky op top:0 (basisregel bovenaan).
   - --av-headh rekent zonder de balk: 78px (tot 1279px), 81px plus de subbalk (47px) vanaf 1280px.
   - Ankers ongewijzigd: 96px tot 1279px, 71px vanaf 1280px (het vaste deel was en blijft 77,94 / 65px).
   - functions.php (aquavuro_header_script): de vaste stand gaat aan na 8px scrollen en uit onder 3px,
     zonder de hoogte van de balk.
   Niets toegevoegd behalve dit commentaar.
   ========================================================= */

/* =========================================================
   VERSIE 1.63 (12-10-2026): .av-split h2 krijgt de maat van .av-shead h2.
   Een H2 in een kolom van div.av-split had geen themaregel voor font-size en viel terug op de
   browserstandaard (1.5em: 24px tot 1023px, 25,5px vanaf 1024px). Toegevoegd, direct naast de
   regels van .av-shead h2: .av-split h2{font-size:30px} en vanaf 1024px .av-split h2{font-size:44px}.
   line-height (1.12), letter-spacing (-0.005em), font-family (Playfair Display) en font-weight (500)
   komen voor beide uit de basisregel h1,h2,h3,h4 en waren al gelijk. Geen margin: de bestaande
   marges van deze koppen blijven zoals ze zijn. Een inline font-size op een kop wint nog steeds.
   Niets anders gewijzigd.
   ========================================================= */

/* =========================================================
   1.64 (13-10-2026): menuvakje #av-mtog uit de tabvolgorde waar de burger weg is.
   Lighthouse (Agentic browsing, desktop): "Form elements must have labels" op input#av-mtog. Het
   label .av-burger staat vanaf 1280px op display:none (blok 1.53 hierboven), waardoor het vakje
   daar zonder naam en toch met Tab bereikbaar was. Zelfde breekpunt als .av-burger{display:none};
   onder 1280px blijft het vakje zoals het was, zodat het label het menu opent en sluit.
   In header.php heeft het vakje daarnaast aria-label="Menu". Niets anders gewijzigd.
   ========================================================= */
@media (min-width:1280px){
  .av-mtog{display:none}
}

/* =========================================================
   1.65 (13-10-2026): filterbalk op mobiel (<680px), twee punten.
   Mitch, 13-10-2026, letterlijk: "extra fout gevonden: filters vouwen op categoriepagina's niet
   zichtbaar uit bij mobiel + 55 modellen staat een beetje in de weg".
   (1) Het open paneel stond op mobiel op position:fixed, maar bleef een kind van .av-fbalk-rail,
   en die rail heeft overflow-x:auto (dus overflow-y ook auto). iOS Safari knipt een fixed
   element binnen zo'n schuivende rail af: de knop klapte open, het paneel bleef onzichtbaar.
   Sinds av-filter-1.34.js verhuist het script het open paneel op mobiel naar een direct kind van
   .av-fbalk (zonder overflow). Daar staat het hieronder absoluut onder de balk, over de volle
   breedte, boven de kaarten (de balk krijgt met een open paneel z-index 76, regel 1.36), zonder
   iets weg te duwen. Het pijltje wijst naar de eigen knop (--av-fp-pijl uit het script). Dicht,
   of vanaf 680px, staat het paneel weer in zijn eigen facet en geldt alles van 1.33 ongewijzigd.
   De oude fixed-regel uit 1.33 raakt daardoor alleen nog een verborgen paneel.
   (2) De telling (.av-ftel) staat op mobiel op een eigen regel onder de knoppen, klein en links,
   zodat de knoppenrij de volle breedte van de balk krijgt. Vanaf 680px ongewijzigd (rechts).
   Niets anders gewijzigd.
   ========================================================= */
@media (max-width:679px){
  .av-fbalk{flex-wrap:wrap;row-gap:8px}
  .av-fbalk-rail{flex:1 1 100%}
  .av-ftel{flex:1 1 100%;margin:0;font-size:12.5px;text-align:left}
  .av-fbalk > .av-fpaneel{position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;
    margin-top:0;width:auto;min-width:0;max-width:none;
    border-left:1px solid rgba(11,19,32,.18);border-right:1px solid rgba(11,19,32,.18)}
}

/* =========================================================
   1.66 (13-10-2026): filterknop na een keuze op mobiel (<680px).
   Bevinding iOS Simulator 13-10-2026 (iPhone 17, Safari), letterlijk: "Filterknop na een keuze te
   breed: met "Harmonic Hot Tubs" gekozen neemt de knop Merk bijna de volle breedte en valt Type
   grotendeels buiten beeld, zonder teken dat de rij zijwaarts schuift. Bij Personen op 6 valt zelfs
   het kruisje om terug te zetten buiten beeld ("6 person..." afgekapt)."
   (1) Een actieve knop is nooit breder dan de zichtbare rail (--av-railb, gezet door
   av-filter-1.35.js; terugval 100vw min 66px) min het kruisje (42px zichtbaar), de vervaging (32px)
   en 2px speling. De gekozen waarde (.av-fknop-keuze) kapt dan af met een beletselteken (regel uit
   1.33); de volledige keuze staat in het paneel, in de naam van de knop voor schermlezers en als
   title op de keuze. Het script schuift de rail na openen en na een keuze zo dat knop plus kruisje
   heel in beeld staan, links van de vervaging.
   (2) Schuifhint: zolang de rail rechts nog iets te schuiven heeft, zet het script .is-meer op de
   rail en vervaagt de rechterrand over 32px (mask). Een mask is geen laag boven de knoppen, dus een
   tik op een knop in de vervaging komt gewoon aan. Aan het eind van de rail verdwijnt de vervaging.
   Het open paneel blijft een direct kind van .av-fbalk (zetPlek, 1.34/1.65). Vanaf 680px ongewijzigd.
   ========================================================= */
@media (max-width:679px){
  .av-ffacet.is-actief .av-fknop{max-width:calc(var(--av-railb, calc(100vw - 66px)) - 76px)}
  .av-fbalk-rail.is-meer{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
}


/* =========================================================
   VERSIE 1.68 (14-10-2026): brochure-downloadblok .av-bdl (vervangt het blok van 1.67)
   Daniël: "Kun jij op de site van AquaVuro ook brochures toevoegen? ... Mag allemaal wel in een
   'Download area' ofzo". Besluit Mitch: "Pagina plus merkpagina's". Vertaling van het Wellness
   Works-blok .ww-mkdl (WW-thema secties 46, 46b en 47): omslag (pagina 1 van de pdf, webp 480 breed)
   naast kop, metaregel en knop; onder 720px gestapeld en klein; verantwoordingsalinea op 56ch.
   Omslag 136px mobiel en 200px vanaf 720px (de omslagen zijn liggend).
   1.68, fixronde na de eindpoort (anti-ai-design en paginacontroleur):
   - metaregel en knop staan samen onderaan (margin-top:auto op .av-bdl-meta, niet op de knop), zodat
     de metaregel in een paar op een lijn staat, ook als een kop over twee regels loopt;
   - .av-bdl-lijst-2: twee vakken, vanaf 1024px twee kolommen met 40px tussenruimte. Twee brochures,
     of (merkpagina met één brochure) brochure plus verantwoordingszin, die dan onderaan uitlijnt;
   - /brochures/: .av-bdl-merken is een raster van twee kolommen vanaf 1024px; een merk met één
     brochure beslaat één kolom, .av-bdl-merk-breed (twee brochures) de hele rij. Geen merkkolom
     en geen scheidingslijnen meer; rijen 56px (mobiel) en 64px (vanaf 1024px) uit elkaar;
   - tussen 1024 en 1279px staat de omslag boven de tekst (een kolom is daar 446 tot 560px);
   - de overrides van 1.67 bij 1280 en 1600px zijn weg: de lijst gedraagt zich op /brochures/ en
     op de merkpagina gelijk.
   Alleen klassen .av-bdl*; raakt niets bestaands.
   ========================================================= */
.av-bdl-lijst{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.av-bdl{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.av-bdl-omslag{margin:0;width:136px}
.av-bdl-omslag img{display:block;width:100%;height:auto;margin:0;
  border:1px solid rgba(11,19,32,.12);box-shadow:0 6px 18px rgba(11,19,32,.10)}
.av-bdl-tekst{min-width:0}
.av-bdl-tekst > :first-child{margin-top:0}
.av-bdl-tekst h3{font-size:20px;line-height:1.3;margin:0 0 6px;text-wrap:pretty}
.av-bdl-meta{font-size:14px;color:rgba(11,19,32,.68);margin:0 0 16px}
.av-sec .av-bdl-bron{max-width:56ch;font-size:14px;line-height:1.65;color:rgba(11,19,32,.68);margin:36px 0 0;text-wrap:pretty}
.av-sec .av-bdl-lijst > .av-bdl-bron{margin:4px 0 0}
.av-sec .av-bdl-bron-kop{margin:0 0 40px}
.av-bdl-merken{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.av-bdl-merk{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:20px;min-width:0}
.av-bdl-merk > h2{font-size:26px;line-height:1.25;margin:0}
.av-bdl-merk > h2 a{color:inherit;text-decoration:none}
.av-bdl-merk > h2 a:hover{color:#7d6229}
.av-bdl-merk > h2 a:focus-visible{outline:2px solid var(--av-navy-deep);outline-offset:3px}
@media (min-width:720px){
  .av-bdl{align-items:stretch}
  .av-bdl-tekst{display:flex;flex-direction:column;align-items:flex-start}
  .av-bdl-meta{margin-top:auto}
}
@media (min-width:720px) and (max-width:1023.98px),(min-width:1280px){
  .av-bdl{grid-template-columns:200px minmax(0,1fr);gap:32px}
  .av-bdl-omslag{width:200px;align-self:start}
}
@media (min-width:1024px){
  .av-bdl-merken{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 40px}
  .av-bdl-merk-breed{grid-column:1/-1}
  .av-bdl-merk > h2{font-size:28px}
  .av-bdl-lijst-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .av-sec .av-bdl-lijst-2 > .av-bdl-bron{margin:0;align-self:end}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .av-bdl{grid-template-rows:auto 1fr}
  .av-bdl-omslag{width:200px}
}