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

/* =========================================================
   Wellness Works - basisstijl
   Kleuren: donkergroen #1E2925, middengroen #41534A, salie #A7B2A8,
   mist #D9DCDB, warm wit #F2F2EF. Montserrat overal, geen aparte
   koptekstfont (bewust anders dan AquaVuro).
   Alle projectklassen zijn geprefixt met "ww-" om botsing met
   het AquaVuro-themaskelet of pluginstijlen te voorkomen.
   ========================================================= */

:root{
  --ww-dark:#1E2925;
  --ww-mid:#41534A;
  --ww-sage:#A7B2A8;
  --ww-mist:#D9DCDB;
  --ww-warm:#F2F2EF;
  --ww-white:#fff;
  --ww-sage-rgb:167,178,168;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ww-warm);color:var(--ww-dark);
  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}

/* Inline links in platte paragraaftekst sitebreed herkenbaar maken. De
   basisregel hierboven verbergt een link volledig; tot nu toe kreeg alleen
   .ww-content-body (de contentwrapper van page.php) een onderstreping, en de
   homepage (front-page.php) wrapt zijn content niet in die klasse. Knoppen
   (.ww-btn) en kaart-/rijlinks (.ww-tr) hebben al hun eigen stijl en blijven
   dus buiten deze regel; die raakt alleen <a> binnen een <p>. */
p a:not(.ww-btn){color:var(--ww-dark);text-decoration:underline;text-decoration-color:var(--ww-mid)}
.ww-hero p a:not(.ww-btn),.ww-sec-dark p a:not(.ww-btn),.ww-sec-green p a:not(.ww-btn){
  color:var(--ww-sage);text-decoration-color:var(--ww-sage)}
h1,h2,h3,h4{font-family:'Montserrat',Arial,sans-serif;font-weight:300;line-height:1.14;
  margin:0;letter-spacing:-0.018em}
h3{font-weight:500;letter-spacing:-0.01em}
p{margin:0 0 1.1em}
:focus-visible{outline:2px solid var(--ww-mid);outline-offset:4px}

.ww-skip{position:absolute;left:-999px;top:auto;background:var(--ww-mid);
  color:#fff;padding:14px 20px;z-index:9999;font-weight:600;font-size:14px}
.ww-skip:focus{left:16px;top:16px}

.ww-wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 22px}

.ww-lbl{font-size:13px;font-weight:600;color:var(--ww-mid);margin:0 0 14px;display:flex;
  align-items:center;gap:10px}
.ww-lbl svg{width:16px;height:16px;flex:none;display:block}
/* Terugval voor een label zonder eigen icoon: nog steeds de druppel. */
.ww-lbl:not(:has(svg))::before{content:"";width:15px;height:18px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 2.4s7 7.6 7 12.1a7 7 0 0 1-14 0C3 10 10 2.4 10 2.4z' fill='none' stroke='%2341534A' stroke-width='1.8'/%3E%3Cpath d='M5.4 15.6c1.6-1.7 3.1.9 4.6-.8s3-1 4.6.8' fill='none' stroke='%2341534A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.ww-sec-dark .ww-lbl,.ww-sec-green .ww-lbl,
.ww-hero .ww-lbl,.ww-pagehero .ww-lbl{color:var(--ww-sage)}
.ww-sec-dark .ww-lbl:not(:has(svg))::before,.ww-sec-green .ww-lbl:not(:has(svg))::before,
.ww-hero .ww-lbl:not(:has(svg))::before,.ww-pagehero .ww-lbl:not(:has(svg))::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 2.4s7 7.6 7 12.1a7 7 0 0 1-14 0C3 10 10 2.4 10 2.4z' fill='none' stroke='%23A7B2A8' stroke-width='1.8'/%3E%3Cpath d='M5.4 15.6c1.6-1.7 3.1.9 4.6-.8s3-1 4.6.8' fill='none' stroke='%23A7B2A8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}

.ww-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}
.ww-btn-p{background:var(--ww-mid);color:#fff}
.ww-btn-p:hover{background:var(--ww-dark);transform:translateY(-2px)}
.ww-btn-l{background:var(--ww-warm);color:var(--ww-dark)}
.ww-btn-l:hover{background:#fff;transform:translateY(-2px)}
.ww-btn-o{border-color:rgba(255,255,255,.5);color:#fff}
.ww-btn-o:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.ww-btn-d{border-color:var(--ww-mid);color:var(--ww-mid)}
.ww-btn-d:hover{background:var(--ww-mid);color:#fff}

.ww-ph{position:relative;background:linear-gradient(135deg,var(--ww-dark) 0%,var(--ww-mid) 60%,var(--ww-sage) 130%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ww-ph::before{content:"";position:absolute;inset:0;opacity:.4;
  background:repeating-linear-gradient(120deg,rgba(255,255,255,.10) 0 2px,transparent 2px 26px)}
.ww-ph span{position:relative;z-index:1;color:rgba(255,255,255,.7);font-size:12.5px;
  font-weight:600;letter-spacing:.02em;text-align:center;padding:0 20px}

/* ---------------- header, licht ---------------- */
.ww-mtog,.ww-stog{position:absolute;opacity:0;pointer-events:none}
.ww-util{background:var(--ww-dark);color:rgba(242,242,239,.72);font-size:12.5px;display:none}
.ww-util .ww-wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:9px;padding-bottom:9px}
.ww-util a:hover{color:var(--ww-sage)}
.ww-head{position:sticky;top:0;z-index:80;background:var(--ww-warm);
  border-bottom:1px solid var(--ww-mist)}
.ww-head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;padding:13px 0}
.ww-brand{font-size:24px;font-weight:600;color:var(--ww-dark);letter-spacing:-0.01em}
.ww-brand b{font-weight:600;color:var(--ww-mid)}
/* Het woordmerk in tekst is op 04-09-2026 vervangen door het echte logo
   (media 75). De b-regel hierboven blijft staan als terugval. */
/* Logo-lockup sinds 04-09-2026: het losse beeldmerk naast het woordmerk in Montserrat,
   in plaats van het complete logo als een plaatje. Dat laatste maakte de header te hoog
   en liep uit de pas met de hoogte van de menu-items en de CTA-knop. */
.ww-brand{display:inline-flex;align-items:center;gap:9px;line-height:1}
.ww-brand img{display:block;height:26px;width:auto}
.ww-burger{display:flex;align-items:center;gap:10px;background:var(--ww-mid);color:#fff;
  font-size:13.5px;font-weight:600;cursor:pointer;padding:13px 18px;border:0;
  transition:.25s}
.ww-burger:hover{background:var(--ww-dark)}
.ww-bars{display:block;width:18px;height:2px;background:#fff;position:relative}
.ww-bars::before,.ww-bars::after{content:"";position:absolute;left:0;
  width:18px;height:2px;background:#fff}
.ww-bars::before{top:-6px}.ww-bars::after{top:6px}
.ww-nav{display:none}
.ww-nav ul{list-style:none;margin:0;padding:0}
.ww-nav > ul > li > a:not(.ww-btn),.ww-nav > ul > li > .ww-slab{display:block;padding:15px 2px;
  color:var(--ww-dark);font-size:14.5px;font-weight:500;border-bottom:1px solid var(--ww-mist);
  cursor:pointer}
.ww-nav > ul > li > .ww-slab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ww-slab::after{content:"";display:block;width:7px;height:7px;flex:none;
  border-right:1.6px solid var(--ww-mid);border-bottom:1.6px solid var(--ww-mid);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.ww-stog:checked + .ww-slab::after{transform:translateY(1px) rotate(-135deg)}
.ww-sub{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.ww-stog:checked ~ .ww-sub{max-height:520px}
.ww-sub a{display:flex;align-items:center;gap:11px;padding:12px 2px 12px 20px;
  color:var(--ww-dark);font-size:14.5px;font-weight:500;border-bottom:1px solid var(--ww-mist);
  transition:color .22s}
.ww-sub a:hover{color:var(--ww-mid)}
.ww-sub svg{width:18px;height:18px;flex:none;color:var(--ww-mid)}
.ww-navcta{padding:20px 0 8px}
.ww-navcta .ww-btn{display:block;text-align:center}
.ww-mtog:checked ~ .ww-head-in .ww-nav{display:block;width:100%;order:3;
  border-top:1px solid var(--ww-mist);margin-top:2px;padding-bottom:10px}

/* ---------------- hero ---------------- */
.ww-hero{position:relative;background:var(--ww-dark);color:#fff;overflow:hidden}
.ww-hero-media{position:relative;height:330px}
.ww-hero-media.ww-ph{height:330px}
.ww-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,41,37,.34) 0%,rgba(30,41,37,.74) 46%,#1E2925 99%)}
/* Placeholder-bijschrift in de hero: vast in de rechterbovenhoek in plaats
   van gecentreerd. Gemelde bug 24-08-2026: het bijschrift viel middenin de
   H1 omdat beide verticaal gecentreerd stonden binnen dezelfde hero-sectie.
   De hero-tekst staat links (mobiel onderin, desktop links-midden), dus de
   rechterbovenhoek blijft altijd vrij. */
.ww-hero-media.ww-ph{align-items:flex-start;justify-content:flex-end}
.ww-hero-media.ww-ph span{max-width:230px;font-size:11px;line-height:1.5;
  text-align:right;padding:16px 18px 0 0}
.ww-hero-body{position:relative;z-index:2;padding:0 0 44px;margin-top:-92px}
.ww-hero h1{font-size:34px;margin:0 0 20px;max-width:17ch}
.ww-hero h1 b{font-weight:600;color:var(--ww-sage)}
.ww-hero-lead{font-size:16px;color:rgba(242,242,239,.8);max-width:52ch;margin:0 0 30px}
.ww-hero-acts{display:flex;flex-wrap:wrap;gap:12px}

.ww-facts{background:var(--ww-mid);color:#fff}
.ww-facts .ww-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.22)}
.ww-fact{background:var(--ww-mid);padding:22px}
.ww-fact b{display:block;font-size:26px;font-weight:300;color:#fff;line-height:1;
  margin:0 0 8px;letter-spacing:-0.02em}
.ww-fact span{font-size:12.5px;color:rgba(255,255,255,.74);line-height:1.5;display:block}

/* ---------------- secties ---------------- */
.ww-sec{padding:60px 0}
.ww-sec-paper{background:var(--ww-warm)}
.ww-sec-white{background:#fff}
.ww-sec-mist{background:var(--ww-mist)}
.ww-sec-green{background:var(--ww-mid);color:#fff}
.ww-sec-dark{background:var(--ww-dark);color:#fff}
.ww-shead{max-width:60ch;margin:0 0 38px}
.ww-shead h2{font-size:29px;margin:0 0 16px}
.ww-shead p{color:rgba(30,41,37,.66);margin:0;font-size:15.5px}
.ww-sec-dark .ww-shead p,.ww-sec-green .ww-shead p{color:rgba(242,242,239,.76)}

/* levenscyclus */
.ww-track{display:grid;gap:0}
.ww-tr{position:relative;display:grid;grid-template-columns:56px 1fr;gap:0 18px;
  padding:0 0 30px}
.ww-tr::before{content:"";position:absolute;left:27px;top:58px;bottom:6px;width:1px;
  background:var(--ww-mist)}
.ww-tr:last-child::before{display:none}
.ww-trico{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--ww-mid);background:var(--ww-warm);transition:.3s}
.ww-tr:hover .ww-trico{background:var(--ww-mid)}
.ww-trico{color:var(--ww-mid)}
.ww-trico svg{width:24px;height:24px;display:block}
.ww-tr:hover .ww-trico{color:#fff}
.ww-trstep{display:block;font-size:11.5px;font-weight:600;color:var(--ww-mid);margin:0 0 6px;
  padding-top:6px}
.ww-trbody h3{font-size:21px;margin:0 0 9px;transition:color .28s}
.ww-tr:hover .ww-trbody h3{color:var(--ww-mid)}
.ww-trbody p{font-size:14.5px;color:rgba(30,41,37,.74);margin:0}

/* stappen */
.ww-stappen{display:grid;gap:16px}
.ww-stap{background:#fff;border:1px solid var(--ww-mist);padding:24px 22px;position:relative;
  transition:.28s}
.ww-stap:hover{border-color:var(--ww-mid);transform:translateY(-3px)}
.ww-stap .ww-stnum{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--ww-mid);color:var(--ww-mid);font-size:13px;
  font-weight:600;margin:0 0 14px}
.ww-stap h3{font-size:18px;margin:0 0 9px}
.ww-stap p{font-size:14px;color:rgba(30,41,37,.74);margin:0}

/* split */
.ww-split{display:grid;gap:30px;align-items:center}
.ww-split .ww-ph{height:250px}
.ww-lijst{list-style:none;margin:0;padding:0}
.ww-lijst li{position:relative;padding:13px 0 13px 28px;font-size:15px;
  border-bottom:1px solid var(--ww-mist)}
.ww-lijst li::before{content:"";position:absolute;left:2px;top:20px;width:6px;height:6px;
  border-right:1.6px solid var(--ww-mid);border-top:1.6px solid var(--ww-mid);transform:rotate(45deg)}
.ww-sec-dark .ww-lijst li,.ww-sec-green .ww-lijst li{border-color:rgba(255,255,255,.18)}
.ww-sec-dark .ww-lijst li::before,.ww-sec-green .ww-lijst li::before{border-color:var(--ww-sage)}

/* kaarten voor wie */
.ww-kaarten{display:grid;gap:18px}
.ww-kaart{background:#fff;border:1px solid var(--ww-mist);padding:28px 24px;transition:.28s;
  display:flex;flex-direction:column}
.ww-kaart:hover{border-color:var(--ww-mid);transform:translateY(-4px)}
.ww-kico{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--ww-warm);margin:0 0 20px;transition:.28s}
.ww-kaart:hover .ww-kico{background:var(--ww-mid)}
.ww-kico{color:var(--ww-mid)}
.ww-kico svg{width:26px;height:26px;display:block}
.ww-kaart:hover .ww-kico{color:#fff}
.ww-kaart h3{font-size:20px;margin:0 0 10px}
.ww-kaart p{font-size:14px;color:rgba(30,41,37,.64);margin:0 0 20px}
.ww-tags{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--ww-mist)}
.ww-tags li{position:relative;padding:7px 0 7px 22px;font-size:13px;font-weight:500}
.ww-tags li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;
  border-right:1.6px solid var(--ww-mid);border-top:1.6px solid var(--ww-mid);transform:rotate(45deg)}

/* dekkingsblok, licht */
.ww-dek{display:grid;gap:1px;background:var(--ww-mist);border:1px solid var(--ww-mist)}
.ww-dekcel{background:#fff;padding:24px 22px}
.ww-dekcel b{display:block;font-size:26px;font-weight:300;color:var(--ww-mid);line-height:1;
  margin:0 0 8px;letter-spacing:-0.02em}
.ww-dekcel span{font-size:13px;color:rgba(30,41,37,.64);line-height:1.55;display:block}

/* bewijsblok op donker */
.ww-proof{display:grid;gap:24px}
.ww-pcel{position:relative;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.2)}
/* Geen statistiekopmaak meer: 19 van de 21 cellen bevat geen cijfer, en cijferformaat
   belooft een meetwaarde die er niet is. Zelf gemeten 04-09-2026. */
.ww-pcel b{display:block;font-size:19px;font-weight:600;color:#fff;line-height:1.35;
  margin:0 0 12px;letter-spacing:-0.01em}
.ww-pcel .ww-pu{display:block;font-size:12px;font-weight:600;color:var(--ww-sage);margin:0 0 12px}
.ww-pcel span.ww-pt{display:block;font-size:14px;color:rgba(242,242,239,.72);line-height:1.6}

/* contactblok */
.ww-contact{background:var(--ww-dark);color:#fff;padding:32px 24px}
.ww-contact h2{font-size:26px;margin:0 0 16px;color:#fff}
.ww-contact p{color:rgba(242,242,239,.76);font-size:15px}
.ww-form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  padding:24px 22px;margin-top:24px}
.ww-form label{display:block;font-size:13px;font-weight:600;margin:0 0 9px;color:#fff}
.ww-form .ww-row2{display:grid;gap:11px}
.ww-form input{width:100%;padding:15px 16px;border:1px solid rgba(255,255,255,.24);
  font-size:16px;font-family:'Montserrat',Arial,sans-serif;background:rgba(255,255,255,.06);
  color:#fff}
.ww-form input::placeholder{color:rgba(242,242,239,.45)}
.ww-form input:focus-visible{outline:2px solid var(--ww-sage);outline-offset:2px;
  border-color:var(--ww-sage);background:rgba(255,255,255,.12)}
.ww-form .ww-hint{font-size:12.5px;color:rgba(242,242,239,.6);margin:14px 0 0;line-height:1.6}

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

/* generieke paginakop */
.ww-pagehero{background:var(--ww-dark);color:#fff;padding:56px 0}
.ww-pagehero h1{font-size:32px;max-width:24ch;color:#fff}
/* Paginabeeld onder de donkere paginakop, gevoed door de uitgelichte afbeelding.
   Toegevoegd 04-09-2026: 12 subpaginas hadden geen enkel beeld. */
.ww-pagebeeld{margin:0;position:relative;height:200px;overflow:hidden;background:var(--ww-dark)}
.ww-pagebeeld img{width:100%;height:100%;object-fit:cover;display:block}
.ww-pagecontent{padding:64px 0}
.ww-pagecontent .ww-wrap{max-width:1280px}
/* Leesbreedte ligt sinds 04-09-2026 op de tekstblokken zelf, niet op de wrapper.
   Kaartrijen, stappenrijen en full-bleed secties krijgen dus de volle 1280px,
   lopende tekst blijft op een leesbare regellengte. */
.ww-content-body>p,.ww-content-body>h2,.ww-content-body>h3,.ww-content-body>h4,
.ww-content-body>ul,.ww-content-body>ol,.ww-content-body>blockquote,
.ww-content-body>.ww-note{max-width:66ch}
.ww-content-body h2{font-size:24px;margin:34px 0 14px}
.ww-content-body h3{font-size:19px;margin:26px 0 12px}
.ww-content-body p{font-size:16px;color:rgba(30,41,37,.75)}
.ww-content-body ul,.ww-content-body ol{padding-left:22px;font-size:16px;color:rgba(30,41,37,.75)}
.ww-content-body a:not(.ww-btn):not(.ww-btn-p):not(.ww-btn-o):not(.ww-btn-l):not(.ww-btn-d){color:var(--ww-dark);text-decoration:underline;text-decoration-color:var(--ww-mid)}
.ww-content-body img{margin:20px 0}

/* Conceptmelding boven een pagina die Daniel nog moet beoordelen/aanvullen
   (bv. privacyverklaring, algemene voorwaarden), zelfde functie als AquaVuro's
   .av-note maar in de Wellness Works-kleuren. */
/* Formidable-opmaak, sinds 04-09-2026 in het thema in plaats van in een style-blok op
   de contactpagina, zodat formulier 2 ook op de homepage de juiste vorm heeft. */
.ww-frmwrap .frm_primary_label{display:block;font-size:12.5px;font-weight:600;margin:0 0 6px;
  padding:0;color:var(--ww-dark);line-height:1.3}
.ww-frmwrap .frm_required{color:var(--ww-mid)}
.ww-frmwrap input[type=text],.ww-frmwrap input[type=email],.ww-frmwrap input[type=tel],
.ww-frmwrap input[type=number],.ww-frmwrap select,.ww-frmwrap textarea{
  width:100%;min-height:46px;padding:12px 14px;border:1px solid var(--ww-mist);font-size:15px;
  line-height:1.3;font-family:'Montserrat',Arial,sans-serif;background:#fff;color:var(--ww-dark);
  margin:0;box-sizing:border-box;border-radius:8px}
/* Twee kolommen vanaf tablet, zodat het formulier in een scherm past in plaats van een
   lange kolom te worden. Tekstvak, keuzerondjes en de verzendknop lopen over de volle
   breedte. Verborgen velden zijn geen rasteritem (display:none uit de UA-stijl). */
/* Formidable zet zelf al een raster van twaalf kolommen op .frm_fields_container en dwingt
   elk veld af op "span 12", waardoor er altijd een veld per regel staat. Vandaar dat wij niet
   een eigen grid-template opleggen (dat verliest of wordt overruled), maar meebewegen met hun
   raster: elk veld op zes van de twaalf kolommen, en alleen wat breed moet zijn op twaalf.
   De selector is een niveau specifieker dan die van Formidable, dus hij wint. Gecontroleerd in
   formidableforms.css op 04-09-2026. */
@media (min-width:720px){
  .ww-frmwrap .frm_fields_container > .frm_form_field{grid-column:span 6 / span 6}
  .ww-frmwrap .frm_fields_container > .frm_form_field:has(textarea),
  .ww-frmwrap .frm_fields_container > .frm_form_field:has(.frm_radio),
  .ww-frmwrap .frm_fields_container > .frm_form_field:has(.frm_checkbox){grid-column:span 12 / span 12}
}
/* 1.25: de drie kolommen op desktop zijn vervallen (feedback Mitch 14-09-2026: moderner en
   compacter). Vanaf 720px gelden overal twee kolommen; met acht velden geeft dat drie rijen van
   twee, daarna keuze, bericht en knop over de volle breedte. */
.ww-frmwrap .frm_radio{display:inline-block;margin:0 20px 8px 0;vertical-align:top}
.ww-frmwrap textarea{min-height:96px;height:96px;resize:vertical}
.ww-frmwrap .frm_description{font-size:12px;color:rgba(30,41,37,.6);margin:6px 0 0}
.ww-contact .ww-frmwrap .frm_description{color:rgba(242,242,239,.6)}
.ww-frmwrap .frm_submit{margin-top:2px}
.ww-frmwrap .frm_form_field{margin:0}
.ww-frmwrap .frm_radio,.ww-frmwrap .frm_checkbox{margin:0 0 8px;font-size:14.5px}
.ww-frmwrap .frm_radio label,.ww-frmwrap .frm_checkbox label{display:flex;align-items:center;
  gap:9px;font-weight:400}
.ww-frmwrap .frm_forms .frm_submit .frm_button_submit{display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:15px 30px;font-size:13.5px;line-height:1.7;
  font-weight:600;letter-spacing:.02em;background:var(--ww-mid)!important;color:#fff!important;
  border:1px solid transparent!important;cursor:pointer;font-family:'Montserrat',Arial,sans-serif;
  transition:.25s;border-radius:0!important;box-shadow:none!important;margin:0!important}
.ww-frmwrap .frm_forms .frm_submit .frm_button_submit:hover{background:var(--ww-dark)!important}
@media (min-width:720px){.ww-frmwrap .frm_forms .frm_submit .frm_button_submit{width:auto;min-width:220px}}
.ww-frmwrap .frm_error_style,.ww-frmwrap .frm_error{color:#9c3b32;font-size:12.5px;margin:6px 0 0}
/* Binnen het donkere kennismaakblok op de homepage staan de labels op wit. */
.ww-contact .ww-frmwrap .frm_primary_label{color:#fff}
.ww-contact .ww-frmwrap .frm_required{color:var(--ww-sage)}
.ww-contact .ww-frmwrap .frm_radio label,.ww-contact .ww-frmwrap .frm_checkbox label{color:#fff}
.ww-contact .ww-frmwrap .frm_forms .frm_submit .frm_button_submit{background:var(--ww-warm)!important;color:var(--ww-dark)!important}
.ww-contact .ww-frmwrap .frm_forms .frm_submit .frm_button_submit:hover{background:#fff!important}
.ww-contact .ww-frmwrap .frm_error_style,.ww-contact .ww-frmwrap .frm_error{color:#f2b8b0}
.ww-contact .ww-hint{font-size:12.5px;color:rgba(242,242,239,.66);margin:16px 0 0;line-height:1.6}
.ww-contact .ww-hint a{color:var(--ww-sage)}


/* ---------------------------------------------------------------------------
   Modelkaarten en filterbalk voor de aanbodpagina, toegevoegd 04-09-2026.
   Contract, letterlijk, zodat een volgende modellenset dezelfde vorm krijgt:
   article.ww-mk > figure.ww-mkfig (img of div.ww-ph) + div.ww-mkbody
     > p.ww-mkmerk + h3 + ul.ww-mkspecs (li > span + b) + details.ww-mkmeer + a.ww-mkcta
   De rij eromheen is div.ww-mks: 1 kolom mobiel, 2 vanaf 720px, 4 op desktop.
   Beeld schaalt nooit op: de figuur is vierkant met object-fit:contain, dus een
   klein bronbeeld wordt op eigen grootte getoond of kleiner, nooit uitgerekt.
   --------------------------------------------------------------------------- */
.ww-mks{display:grid;gap:18px;margin:0}
.ww-mk{background:#fff;border:1px solid var(--ww-mist);display:flex;flex-direction:column;
  transition:.28s}
.ww-mk:hover{border-color:var(--ww-mid);transform:translateY(-4px)}
/* De bronbeelden uit de brochure staan op een egale zwarte of witte ondergrond. De figuur
   krijgt dezelfde ondergrond, zodat het beeld naadloos in de kaart valt in plaats van als
   een gekleurd blok in een beige kader. */
.ww-mkfig{position:relative;margin:0;aspect-ratio:1/1;padding:12px;
  border-bottom:1px solid var(--ww-mist);background:#000}
.ww-mkfig[data-bg="licht"]{background:#fff}
.ww-mkfig img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:calc(100% - 24px);max-height:calc(100% - 24px);
  object-fit:contain;display:block}
.ww-mkfig .ww-ph{position:absolute;inset:12px;height:auto;display:grid;place-items:center;
  text-align:center;padding:14px}
.ww-mkbody{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
/* Badge in plaats van een eyebrow: met een eigen vorm leest het als metadata bij de kaart
   en niet als een decoratief labeltje boven de titel. */
.ww-mkmerk{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ww-dark);background:var(--ww-mist);padding:4px 10px;margin:0 0 10px;
  align-self:flex-start}
.ww-mk h3{font-size:19px;margin:0 0 6px}
.ww-mkclaim{font-size:13.5px;color:rgba(30,41,37,.74);margin:0 0 14px}
.ww-mkspecs{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--ww-mist)}
.ww-mkspecs li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--ww-mist);font-size:13px}
.ww-mkspecs li span{color:rgba(30,41,37,.66)}
.ww-mkspecs li b{font-weight:600;text-align:right}
.ww-mkmeer{margin:0 0 14px;font-size:13.5px}
.ww-mkmeer summary{cursor:pointer;font-weight:600;color:var(--ww-mid);list-style:none}
.ww-mkmeer summary::-webkit-details-marker{display:none}
.ww-mkmeer summary::after{content:" +";font-weight:400}
.ww-mkmeer[open] summary::after{content:" -"}
.ww-mkmeer p{margin:10px 0 0;color:rgba(30,41,37,.74);font-size:13.5px}
.ww-mkcta{margin-top:auto;align-self:flex-start}
.ww-mkbron{font-size:11.5px;color:rgba(30,41,37,.55);margin:12px 0 0}

.ww-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 26px;
  padding:16px 18px;background:#fff;border:1px solid var(--ww-mist)}
.ww-filter p{margin:0;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ww-mid);
  width:100%}
.ww-fchip{appearance:none;border:1px solid var(--ww-mist);background:var(--ww-warm);
  color:var(--ww-dark);font-family:inherit;font-size:13px;padding:8px 15px;cursor:pointer;
  transition:.2s}
.ww-fchip:hover{border-color:var(--ww-mid)}
.ww-fchip[aria-pressed="true"]{background:var(--ww-mid);color:#fff;border-color:var(--ww-mid)}
.ww-kgroup[hidden]{display:none}
.ww-geen{margin:0;padding:22px;background:#fff;border:1px dashed var(--ww-mist);
  color:rgba(30,41,37,.7)}

@media (min-width:720px){
  .ww-mks{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .ww-mks{grid-template-columns:repeat(4,1fr);gap:22px}
  .ww-filter{padding:18px 22px}
  .ww-filter p{width:auto;margin-right:6px}
}


/* ===========================================================================
   Landingspagina-componenten, versie 2 (04-09-2026)
   Editorial en premium in de vorm, zakelijk in de dichtheid. Zie de kop van
   dit bestand in het klantdossier voor de onderbouwing per keuze.
   =========================================================================== */

/* De standaard paginakop en beeldband vervallen zodra een pagina een v2-hero heeft. */
#ww-main:has(.ww-v2hero) > .ww-pagehero,
#ww-main:has(.ww-v2hero) > .ww-pagebeeld{display:none}
#ww-main:has(.ww-v2hero) > .ww-pagecontent{padding:0}
#ww-main:has(.ww-v2hero) > .ww-pagecontent > .ww-wrap{max-width:none;padding:0}

.ww-v2{--v2-gap:clamp(28px,4vw,72px)}
.ww-v2 section{position:relative}

/* --- hero: tekst links, beeld rechts dat naar de rand doorloopt --- */
.ww-v2hero{background:var(--ww-dark);color:#fff;overflow:hidden}
.ww-v2hero-in{display:grid;gap:0}
.ww-v2hero-tx{padding:44px 22px 48px;max-width:640px;margin:0 auto;width:100%}
.ww-v2 .ww-v2kruimel{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--ww-sage);margin:0 0 20px}
.ww-v2kruimel svg{width:15px;height:15px;flex:none}
.ww-v2hero h1{font-size:clamp(34px,7vw,46px);line-height:1.04;letter-spacing:-0.022em;
  margin:0 0 20px;color:#fff;font-weight:500;max-width:15ch;text-wrap:balance}
.ww-v2 .ww-v2lead{font-size:17px;line-height:1.62;color:rgba(242,242,239,.82);margin:0 0 28px;max-width:46ch}
.ww-v2acts{display:flex;flex-wrap:wrap;gap:12px}
.ww-v2hero-fig{margin:0;position:relative;min-height:280px}
.ww-v2hero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* --- feitenstrook direct onder de hero: dicht, met haarlijnen --- */
.ww-v2facts{background:var(--ww-mid);color:#fff}
.ww-v2facts .ww-wrap{display:grid;gap:0}
.ww-v2fact{padding:20px 0;border-top:1px solid rgba(255,255,255,.22)}
.ww-v2fact:first-child{border-top:0}
.ww-v2fact b{display:block;font-size:17px;font-weight:600;line-height:1.3;margin:0 0 4px;
  font-variant-numeric:tabular-nums}
.ww-v2fact span{display:block;font-size:13px;color:rgba(242,242,239,.74);line-height:1.5}

/* --- intro: label en kop links, lopende tekst rechts --- */
.ww-v2sec{padding:clamp(44px,6vw,88px) 0}
.ww-v2sec-paper{background:var(--ww-warm)}
.ww-v2sec-white{background:#fff}
.ww-v2sec-dark{background:var(--ww-dark);color:#fff}
.ww-v2sec-dark h2,.ww-v2sec-dark h3{color:#fff}
.ww-v2 .ww-v2sec-dark p{color:rgba(242,242,239,.8)}
.ww-v2grid{display:grid;gap:var(--v2-gap)}
.ww-v2kop h2{font-size:clamp(27px,3.4vw,38px);line-height:1.12;letter-spacing:-0.018em;
  margin:0 0 14px;font-weight:500;text-wrap:balance}
/* Het label en zijn icoon gelden overal, niet alleen binnen .ww-v2kop. Zonder die
   maatregel rekt een inline-SVG op tot de volle kolombreedte. */
.ww-v2 .ww-v2label{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  color:var(--ww-mid);margin:0 0 16px}
.ww-v2 .ww-v2sec-dark .ww-v2label{color:var(--ww-sage)}
.ww-v2label svg,.ww-v2kruimel svg{width:15px;height:15px;flex:none;display:block}
.ww-v2tekst p{font-size:16px;line-height:1.72;color:rgba(30,41,37,.8);margin:0 0 16px;max-width:62ch}
.ww-v2sec-dark .ww-v2tekst p{color:rgba(242,242,239,.8)}
.ww-v2tekst p:last-child{margin-bottom:0}
.ww-v2tekst p.ww-v2opener{font-size:19px;line-height:1.55;color:var(--ww-dark);font-weight:500}
.ww-v2sec-dark .ww-v2tekst p.ww-v2opener{color:#fff}

/* --- specificatietabel: het zakelijke element --- */
.ww-v2spec{margin:0;border-top:1px solid var(--ww-mist)}
.ww-v2sec-dark .ww-v2spec{border-color:rgba(255,255,255,.2)}
.ww-v2spec div{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--ww-mist)}
.ww-v2sec-dark .ww-v2spec div{border-color:rgba(255,255,255,.2)}
.ww-v2spec dt{font-size:13.5px;color:rgba(30,41,37,.66);margin:0}
.ww-v2sec-dark .ww-v2spec dt{color:rgba(242,242,239,.68)}
.ww-v2spec dd{margin:0;font-size:14px;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums}
.ww-v2 .ww-v2spec-kop{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ww-mid);
  margin:0 0 10px}
.ww-v2 .ww-v2sec-dark .ww-v2spec-kop{color:var(--ww-sage)}

/* --- split met beeld, om en om --- */
.ww-v2split{display:grid;gap:var(--v2-gap);align-items:center}
.ww-v2fig{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ww-dark)}
.ww-v2fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ww-v2fig figcaption{position:absolute;left:0;bottom:0;right:0;padding:12px 16px;font-size:12.5px;
  color:#fff;background:linear-gradient(0deg,rgba(30,41,37,.82),transparent)}

/* --- genummerde stappen, editorial in plaats van kaartjes --- */
.ww-v2stap{display:grid;gap:0;border-top:1px solid var(--ww-mist)}
.ww-v2sec-dark .ww-v2stap{border-color:rgba(255,255,255,.2)}
.ww-v2stap article{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--ww-mist)}
.ww-v2sec-dark .ww-v2stap article{border-color:rgba(255,255,255,.2)}
.ww-v2stap b{font-size:26px;font-weight:300;line-height:1;color:var(--ww-mid);
  font-variant-numeric:tabular-nums}
/* Variant met een icoon in plaats van een nummer, voor lijsten waar de volgorde
   niets betekent. Genummerde markers alleen waar er echt een volgorde is. */
.ww-v2stap-ico b.ww-v2ico{display:block;color:var(--ww-mid)}
.ww-v2stap-ico b.ww-v2ico svg{width:26px;height:26px;display:block}
.ww-v2sec-dark .ww-v2stap-ico b.ww-v2ico{color:var(--ww-sage)}
.ww-v2sec-dark .ww-v2stap b{color:var(--ww-sage)}
.ww-v2stap h3{font-size:18px;margin:0 0 7px;font-weight:600}
.ww-v2stap p{font-size:14.5px;line-height:1.62;color:rgba(30,41,37,.74);margin:0;max-width:58ch}
.ww-v2sec-dark .ww-v2stap p{color:rgba(242,242,239,.76)}

/* --- afsluiting --- */
.ww-v2cta h2{font-size:clamp(25px,3vw,34px);line-height:1.14;margin:0 0 14px;font-weight:500;
  max-width:20ch;text-wrap:balance}
.ww-v2 .ww-v2cta p{max-width:52ch;margin:0 0 26px}

@media (min-width:720px){
  .ww-v2facts .ww-wrap{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .ww-v2hero-in{grid-template-columns:1.02fr .98fr;align-items:stretch;min-height:520px}
  .ww-v2hero-tx{padding:76px 56px 80px 0;max-width:none;margin:0;display:flex;
    flex-direction:column;justify-content:center}
  .ww-v2hero-fig{min-height:0}
  /* het beeld loopt door tot de rechterrand van het scherm */
  .ww-v2hero-fig{margin-right:calc(50% - 50vw)}
  .ww-v2facts .ww-wrap{grid-template-columns:repeat(4,1fr)}
  .ww-v2fact{padding:26px 26px 26px 0;border-top:0;border-left:1px solid rgba(255,255,255,.22)}
  .ww-v2fact:first-child{border-left:0}
  .ww-v2fact + .ww-v2fact{padding-left:26px}
  .ww-v2grid-32{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .ww-v2grid-11{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ww-v2split{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .ww-v2split > .ww-v2fig{aspect-ratio:auto;min-height:420px}
  .ww-v2split-om .ww-v2fig{order:2}
  .ww-v2stap article{grid-template-columns:72px 1fr;padding:26px 0}
  .ww-v2stap b{font-size:32px}
}

.ww-note{border:1px dashed var(--ww-mid);background:var(--ww-mist);
  padding:18px 20px;font-size:13px;line-height:1.65;color:var(--ww-dark);margin:0 0 30px}
.ww-note b{display:block;font-weight:600;font-size:15px;margin:0 0 6px;color:var(--ww-dark)}
.ww-note p{margin:0 0 8px}
.ww-note p:last-child{margin-bottom:0}


/* Zodra een .ww-ph-placeholdervak een echte foto krijgt (class ww-photo erbij,
   svg vervangen door img), het diagonale streeppatroon en de "Beeld
   volgt"-tekststijl uitschakelen zodat er niets meer over de foto ligt. De
   responsive hoogtes van .ww-ph (en van .ww-split .ww-ph) blijven ongemoeid
   gelden, want de klasse ww-ph blijft gewoon staan. */
.ww-ph.ww-photo{background:var(--ww-dark)}
.ww-ph.ww-photo::before{display:none}
.ww-ph.ww-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* footer */
.ww-foot{background:var(--ww-dark);color:rgba(242,242,239,.62);padding:50px 0 26px;font-size:14px}
.ww-foot-top{display:grid;gap:32px}
.ww-foot-brand{font-size:24px;color:#fff;margin:0 0 18px}
.ww-foot-brand p{font-size:13.5px;color:rgba(242,242,239,.56);max-width:36ch}
.ww-foot-col h3{color:#fff;font-size:14px;margin:0 0 16px;font-weight:600}
.ww-foot-col ul{list-style:none;margin:0;padding:0}
.ww-foot-col li{margin:0 0 10px}
.ww-foot-col a{font-size:13.5px;color:rgba(242,242,239,.56)}
.ww-foot-col a:hover{color:var(--ww-sage)}
.ww-foot-bot{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:12.5px;color:rgba(242,242,239,.62)}
.ww-foot-bot a:hover{color:var(--ww-sage)}
.ww-sep{display:inline-block;width:1px;height:11px;background:rgba(255,255,255,.35);
  margin:0 13px;vertical-align:-1px}

/* vaste balk onderaan, mobiel */
.ww-dock{position:sticky;bottom:0;z-index:70;background:var(--ww-dark);
  border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:1fr 1fr}
.ww-dock a{padding:16px 10px;text-align:center;font-size:13px;font-weight:600;color:#fff;
  min-height:44px;display:flex;align-items:center;justify-content:center}
.ww-dock a + a{background:var(--ww-mid)}

/* Animatie verwijderd 24-08-2026, zelfde reden als bij AquaVuro: bij snel
   herhaald scrollen bleven secties permanent onzichtbaar (opacity:0, nooit
   getoond). Content moet altijd zichtbaar zijn zonder JavaScript. De
   .ww-rev-klasse staat nog in de HTML maar heeft geen effect meer. */

/* ================= tablet ================= */
@media (min-width:720px){
  .ww-wrap{padding:0 34px}
  .ww-hero-media,.ww-hero-media.ww-ph{height:460px}
  .ww-hero h1{font-size:46px}
  .ww-facts .ww-wrap{grid-template-columns:repeat(4,1fr)}
  .ww-stappen{grid-template-columns:1fr 1fr}
  .ww-kaarten{grid-template-columns:repeat(3,1fr)}
  .ww-pagebeeld{height:300px}
  .ww-dek{grid-template-columns:repeat(3,1fr)}
  .ww-proof{grid-template-columns:repeat(3,1fr);gap:30px}
  .ww-form .ww-row2{grid-template-columns:1fr auto}
  .ww-foot-top{grid-template-columns:1.5fr 1fr 1fr}
  .ww-track{grid-template-columns:1fr 1fr;gap:0 34px}
  .ww-tr:nth-last-child(2)::before{display:none}
}

/* ================= desktop ================= */
@media (min-width:1024px){
  body{font-size:17px}
  .ww-wrap{padding:0 44px}
  .ww-dock{display:none}
  .ww-util{display:block}
  .ww-burger{display:none}
  .ww-head-in{padding:15px 0}
  .ww-brand{font-size:26px}
  .ww-brand img{height:30px}
  .ww-nav{display:block;width:auto;order:0;border-top:0;margin-top:0;padding-bottom:0}
  .ww-nav > ul{display:flex;align-items:center;gap:2px}
  .ww-nav > ul > li{position:relative}
  /* Krappere padding sinds het zevende menu-item (Aanbod, 04-09-2026): met 14px brak de
     header naar twee regels op een normaal laptopscherm. */
  .ww-nav > ul > li > a:not(.ww-btn),.ww-nav > ul > li > .ww-slab{border-bottom:0;padding:12px 10px;
    font-size:14px;position:relative}
  .ww-nav > ul > li > a:not(.ww-btn)::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;
    height:1px;background:var(--ww-mid);transform:scaleX(0);transform-origin:left;
    transition:transform .3s cubic-bezier(.2,.7,.3,1)}
  .ww-nav > ul > li > a:not(.ww-btn):hover::after{transform:scaleX(1)}
  .ww-sub{position:absolute;top:100%;left:0;min-width:268px;background:#fff;
    border:1px solid var(--ww-mist);max-height:none;visibility:hidden;opacity:0;
    transform:translateY(6px);transition:opacity .22s,transform .22s;
    box-shadow:0 18px 40px rgba(30,41,37,.12)}
  .ww-nav > ul > li:hover .ww-sub,.ww-nav > ul > li:focus-within .ww-sub,
  .ww-stog:checked ~ .ww-sub{visibility:visible;opacity:1;
    transform:none}
  .ww-sub a{padding:12px 18px}
  .ww-navcta{padding:0;margin-left:10px}
  .ww-navcta .ww-btn{display:inline-block}

  .ww-hero-media,.ww-hero-media.ww-ph{height:620px}
  .ww-hero-media::after{background:
    linear-gradient(90deg,#1E2925 3%,rgba(30,41,37,.84) 44%,rgba(30,41,37,.34) 100%)}
  .ww-hero-body{position:absolute;inset:0;margin:0;padding:0;display:flex;
    flex-direction:column;justify-content:center}
  .ww-hero-body .ww-wrap{width:100%}
  .ww-hero h1{font-size:64px;max-width:16ch;margin-bottom:26px}
  .ww-hero-lead{font-size:18.5px;max-width:48ch}
  .ww-fact{padding:30px 26px}
  .ww-fact b{font-size:36px}

  .ww-sec{padding:104px 0}
  .ww-shead{margin-bottom:54px}
  .ww-shead h2{font-size:42px}
  .ww-shead p{font-size:17px}

  .ww-track{grid-template-columns:repeat(5,1fr);gap:0}
  .ww-tr{grid-template-columns:1fr;gap:0;padding:0 26px 0 0}
  .ww-tr::before{display:none}
  .ww-tr::after{content:"";position:absolute;left:66px;right:0;top:27px;height:1px;
    background:var(--ww-mist)}
  .ww-tr:last-child::after{display:none}
  .ww-trstep{padding-top:0;margin:22px 0 7px}
  .ww-trbody h3{font-size:20px}
  .ww-trbody p{font-size:14px}

  .ww-stappen{grid-template-columns:repeat(4,1fr);gap:22px}
  .ww-stap{padding:32px 26px}
  .ww-kaarten{gap:24px}
  .ww-kaart{padding:34px 30px}
  .ww-split{grid-template-columns:1fr 1fr;gap:66px}
  .ww-split .ww-ph{height:480px}
  .ww-dekcel{padding:34px 30px}
  .ww-dekcel b{font-size:40px}
  .ww-proof{grid-template-columns:repeat(3,1fr);gap:44px}
  .ww-pcel b{font-size:21px}
  .ww-contact{padding:62px 56px}
  .ww-contact h2{font-size:36px}
  .ww-form{padding:30px 28px}
  .ww-foot-top{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
  .ww-pagehero h1{font-size:44px}
  .ww-pagebeeld{height:400px}
}

/* 1.18 - formulierdetails na de v2-ronde op de contactpagina.
   1. Het honeypot-veld ("Indien je een mens bent, laat dit veld leeg") stond zichtbaar in de
      reconstructie. Het hoort voor iedereen weg te vallen, dus ook het label, niet alleen de input.
      Twee losse regels omdat een browser zonder :has() anders de hele selectorlijst laat vallen.
   2. Radiogroepen: Formidable zet vertical_radio op het veld en geeft het label width:100%,
      waardoor drie korte keuzes onder elkaar vallen en ~50px hoogte verspillen. */
.ww-frmwrap .frm_verify{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden}
.ww-frmwrap .frm_fields_container > div:has(> .frm_verify){position:absolute!important;
  left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
.ww-frmwrap .frm_opt_container{display:flex;flex-wrap:wrap;gap:8px 22px}
.ww-frmwrap .frm_opt_container .frm_radio,
.ww-frmwrap .frm_opt_container .frm_checkbox{margin:0;width:auto}
.ww-frmwrap .frm_opt_container .frm_radio label,
.ww-frmwrap .frm_opt_container .frm_checkbox label{width:auto!important;display:flex;
  align-items:center;gap:8px;white-space:nowrap}

/* 1.19 - twee componenten die de homepage nodig had om in dezelfde taal te staan als de
   landingspagina's. De oude homepage gebruikte kaartjes met een dunne rand en iconen in
   cirkels; dat was precies de goedkope indruk waar Mitch op 04-09-2026 over viel. */
.ww-v2kolommen{display:grid;gap:26px}
.ww-v2kolommen > div{border-top:1px solid var(--ww-mist);padding-top:20px}
.ww-v2sec-dark .ww-v2kolommen > div{border-color:rgba(255,255,255,.22)}
.ww-v2 .ww-v2kol-ico{color:var(--ww-mid);margin:0 0 14px;line-height:0}
.ww-v2sec-dark .ww-v2 .ww-v2kol-ico,.ww-v2sec-dark .ww-v2kol-ico{color:var(--ww-sage)}
.ww-v2kol-ico svg{width:26px;height:26px;display:block}
.ww-v2 .ww-v2kollabel{font-size:12.5px;font-weight:600;color:var(--ww-mid);margin:0 0 5px}
.ww-v2sec-dark .ww-v2 .ww-v2kollabel{color:var(--ww-sage)}
.ww-v2kolommen h3{font-size:18px;line-height:1.24;margin:0 0 8px;font-weight:600}
.ww-v2 .ww-v2kolommen p:not(.ww-v2kollabel):not(.ww-v2kol-ico){font-size:14.5px;line-height:1.62;
  color:rgba(30,41,37,.74);margin:0}
.ww-v2sec-dark .ww-v2kolommen p{color:rgba(242,242,239,.76)}
.ww-v2mini{list-style:none;margin:16px 0 0;padding:0}
.ww-v2mini li{border-top:1px solid var(--ww-mist);padding:9px 0 0;margin:9px 0 0;font-size:13px;
  line-height:1.45;color:rgba(30,41,37,.66)}
.ww-v2sec-dark .ww-v2mini li{border-color:rgba(255,255,255,.2);color:rgba(242,242,239,.7)}

.ww-v2lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--ww-mist)}
.ww-v2sec-dark .ww-v2lijst{border-color:rgba(255,255,255,.22)}
.ww-v2lijst li{display:grid;grid-template-columns:19px 1fr;gap:13px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--ww-mist);font-size:14.5px;line-height:1.55;
  color:rgba(30,41,37,.8)}
.ww-v2sec-dark .ww-v2lijst li{border-color:rgba(255,255,255,.22);color:rgba(242,242,239,.84)}
.ww-v2lijst svg{width:19px;height:19px;display:block;color:var(--ww-mid);margin-top:1px}
.ww-v2sec-dark .ww-v2lijst svg{color:var(--ww-sage)}

@media(min-width:720px){
  .ww-v2kolommen-3,.ww-v2kolommen-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 34px}
}
@media(min-width:1024px){
  .ww-v2kolommen-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ww-v2kolommen-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:30px}
  .ww-v2kolommen-5 h3{font-size:16.5px}
  .ww-v2 .ww-v2kolommen-5 p:not(.ww-v2kollabel):not(.ww-v2kol-ico){font-size:13.5px}
}

/* 1.20 - twee reparaties uit de eigen controle van de homepage.
   1. In de donkere sectie viel de kolomtekst weg: mijn eigen regel met twee :not()'s telde
      zwaarder (0,4,0) dan de donkere terugval (0,3,0), dus stond donkergroen op donkergroen.
      Zelfde fout als eerder bij .ww-v2lead; de donkere variant moet altijd even zwaar of
      zwaarder wegen als de lichte.
   2. .ww-facts liet aan weerszijden een lichte rand zien, omdat de scheidingslijnen gemaakt
      zijn met een lichte achtergrond onder een raster met gap:1px, en de horizontale padding
      van .ww-wrap die achtergrond dus zichtbaar laat. De strook gebruikt nu de v2-opzet. */
.ww-v2 .ww-v2sec-dark .ww-v2kolommen p:not(.ww-v2kollabel):not(.ww-v2kol-ico){
  color:rgba(242,242,239,.78)}
.ww-facts .ww-wrap{background:none;gap:0}
.ww-fact{padding-left:0;padding-right:26px;border-left:1px solid rgba(255,255,255,.22)}
.ww-fact:first-child{border-left:0}
.ww-fact + .ww-fact{padding-left:26px}

/* 1.21 - de aanbodpagina in dezelfde taal als de rest na de v2-ronde.
   De filterknoppen zaten in een wit kader op een grijze band, waardoor de balk als een
   los widget in de pagina hing. Nu twee haarlijnen op de eigen ondergrond, zoals de
   scheidingen elders. Het merklabel op de kaart was een grijze pill; dat leest als een
   tag uit een sjabloon, dus terug naar tekst met een liggend streepje ervoor. */
.ww-filterbalk{padding-top:clamp(30px,4vw,44px);padding-bottom:0}
.ww-filter{background:none;border:0;border-top:1px solid var(--ww-mist);
  border-bottom:1px solid var(--ww-mist);padding:16px 0;margin:0}
.ww-mkmerk{background:none;padding:0;color:var(--ww-mid);display:flex;align-items:center;gap:8px}
.ww-mkmerk::before{content:"";width:16px;height:1px;background:currentColor;flex:none}
.ww-mk{border-color:rgba(30,41,37,.1)}
.ww-mk:hover{box-shadow:0 10px 30px rgba(30,41,37,.09)}
@media(min-width:1024px){
  .ww-filter{padding:18px 0}
}

/* 1.22 - de footerkoppen waren h4 terwijl de pagina bij h2 eindigt, dus een niveausprong
   die de kwaliteitspoort op alle zestien pagina's aanwees. Nu h3, opmaak ongewijzigd. */

/* 1.23 - verwerking van de anti-ai-design-ronde van 04-09-2026.
   1. Het streepje in de merkkleur voor het merklabel op de modelkaart is een tell die in
      Anti-AI-design-tells letterlijk verboden is op elk project. Ik had daarmee de grijze pill
      ingeruild voor iets zwaarders. Het merk staat nu in de kop van de kaart zelf, zoals de
      specificatietabel eronder het ook doet, en het losse label verdwijnt.
   2. Het contactblok op de homepage hing als paneel in een witte sectie, terwijl de twee andere
      donkere secties van rand tot rand lopen. Dat leest als een fout, niet als afwisseling.
      Het blok loopt nu net als de rest door. */
.ww-mkmerk{display:none}
.ww-contact{padding:0;background:none;color:inherit}
.ww-sec-dark .ww-contact h2{color:#fff}
@media(min-width:1024px){.ww-contact{padding:0}}

/* 1.24 - de homepagehero gebruikt nu dezelfde beeldkolom als de andere pagina's, zodat het
   bronbeeld van 1241px verkleind wordt in plaats van op een breed scherm opgerekt. De kop
   blijft bewust groter dan op de andere pagina's, zodat de voordeur zich onderscheidt zonder
   dat daar een apart hero-component voor nodig is. */
.ww-v2-home .ww-v2hero h1{font-size:clamp(37px,7.2vw,58px)}
.ww-v2-home .ww-v2 .ww-v2lead,.ww-v2-home .ww-v2lead{font-size:18px}
@media(min-width:1024px){
  .ww-v2-home .ww-v2hero-in{min-height:600px}
}

/* ===========================================================================
   1.25 (14-09-2026) - feedback Mitch na eigen doorloop, plus de blokkerende CSS-punten uit de
   livegangcontrole van 11-09 (A1). Drie onderwerpen:
   1. Uitklapmenu: donkere tekst, 14,5px/500 en een icoon per subcategorie (header.php).
      Toetsenbord: submenu opent ook bij focus-within (stond op opacity 0 met focusbare links).
   2. Formulier 2: twee kolommen, velden 46px met radius 8, keuzerondjes als pills, verzendknop
      in de maat van .ww-btn. Het veld Plaats (id 12) is uit het formulier gehaald.
   3. Hero: .ww-content-body img{margin:20px 0} raakte ook het absolute herobeeld en de
      kaartbeelden (groene streep boven het beeld). Plus: H1 afgekapt op 360/390, onzichtbare
      links op donkere secties, 8px scrollbar op Aanbod, kleine letter onder 4,5:1.
   =========================================================================== */

/* 3a. beeld begint op de bovenrand van zijn kader */
.ww-v2hero-fig img,.ww-mkfig img{margin:0}

/* 3b. hero-tekstkolom mag krimpen; lange woorden in de H1 breken af */
.ww-v2hero-in > *{min-width:0}
@media (max-width:719px){.ww-v2hero h1{overflow-wrap:anywhere;hyphens:auto}}
@media (min-width:720px){.ww-v2hero h1{hyphens:manual;overflow-wrap:normal;max-width:580px}}
@media (min-width:1024px) and (max-width:1259px){.ww-v2hero h1{hyphens:auto;overflow-wrap:anywhere}}

/* 3c. links in platte tekst op een donkere v2-sectie: de contentregel hierboven zette ze op
   donkergroen op donkergroen. Zelfde uitzonderingen als die regel, een niveau specifieker. */
.ww-content-body .ww-v2sec-dark a:not(.ww-btn):not(.ww-btn-p):not(.ww-btn-o):not(.ww-btn-l):not(.ww-btn-d){
  color:var(--ww-warm);text-decoration-color:var(--ww-sage)}

/* 3d. full-bleed secties met margin-inline:calc(50% - 50vw) rekenen met 100vw, en dat is bij een
   klassieke scrollbar 8px te breed. De wrapper knipt die 8px af zonder scrollcontext te maken. */
.ww-sec[style*="50vw"]{width:auto}
#ww-main{overflow-x:clip}

/* 3e. kleine bronregel onder een spec-tabel: van .6 naar .78 (4,11:1 werd te weinig). Staat
   inline in de content, vandaar !important. */
.ww-v2split p[style*="12.5px"],.ww-v2split small{color:rgba(30,41,37,.78)!important}

/* 2. formulier: raster, selects, pills, focus */
.ww-frmwrap .frm_form_fields .frm_fields_container{gap:14px 14px}
.ww-frmwrap .frm_forms select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2341534A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;
  background-size:12px 12px}
.ww-frmwrap input::placeholder,.ww-frmwrap textarea::placeholder{color:rgba(30,41,37,.45)}
.ww-frmwrap .frm_forms .form-field input:not([type=file]):not([type=range]):not([readonly]):focus,
.ww-frmwrap .frm_forms select:focus,
.ww-frmwrap .frm_forms .form-field textarea:focus{outline:none;
  border-color:var(--ww-mid)!important;box-shadow:0 0 0 3px rgba(65,83,74,.18)!important;
  background-color:#fff!important}
/* keuzerondjes als pills; Formidable zet de input in het label, dus :has(input:checked) */
.ww-frmwrap .frm_opt_container{gap:8px 8px}
.ww-frmwrap .frm_opt_container .frm_radio label{position:relative;display:inline-flex;align-items:center;
  gap:0;min-height:40px;padding:0 16px;border:1px solid var(--ww-mist);border-radius:999px;
  cursor:pointer;font-size:14px;font-weight:500;line-height:1.3;background:#fff;color:var(--ww-dark);
  transition:background .2s,border-color .2s,color .2s}
.ww-frmwrap .frm_opt_container .frm_radio input[type=radio]{position:absolute!important;opacity:0!important;
  width:1px!important;min-width:0!important;height:1px!important;margin:0!important;left:8px;top:50%;
  pointer-events:none}
.ww-frmwrap .frm_opt_container .frm_radio label:hover{border-color:var(--ww-mid)}
.ww-frmwrap .frm_opt_container .frm_radio label:has(input:checked){background:var(--ww-mid);
  color:#fff;border-color:var(--ww-mid)}
.ww-frmwrap .frm_opt_container .frm_radio label:has(input:focus-visible){outline:2px solid var(--ww-mid);
  outline-offset:2px}
.ww-frmwrap .frm_button_submit:focus-visible{outline:2px solid var(--ww-mid);outline-offset:3px}

/* 2b. donkere variant in het kennismaakblok op de homepage (.ww-contact) */
.ww-contact .ww-frmwrap input[type=text],.ww-contact .ww-frmwrap input[type=email],
.ww-contact .ww-frmwrap input[type=tel],.ww-contact .ww-frmwrap input[type=number],
.ww-contact .ww-frmwrap select,.ww-contact .ww-frmwrap textarea{
  border:1px solid rgba(255,255,255,.22);background-color:rgba(255,255,255,.07);color:#fff}
.ww-contact .ww-frmwrap .frm_forms select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ww-contact .ww-frmwrap select option{color:var(--ww-dark);background:#fff}
.ww-contact .ww-frmwrap input::placeholder,.ww-contact .ww-frmwrap textarea::placeholder{color:rgba(242,242,239,.45)}
.ww-contact .ww-frmwrap .frm_forms .form-field input:not([type=file]):not([type=range]):not([readonly]):focus,
.ww-contact .ww-frmwrap .frm_forms select:focus,
.ww-contact .ww-frmwrap .frm_forms .form-field textarea:focus{
  border-color:var(--ww-sage)!important;box-shadow:0 0 0 3px rgba(var(--ww-sage-rgb),.25)!important;
  background-color:rgba(255,255,255,.1)!important;color:#fff!important}
.ww-contact .ww-frmwrap .frm_opt_container .frm_radio label{border-color:rgba(255,255,255,.28);
  background:transparent;color:#fff}
.ww-contact .ww-frmwrap .frm_opt_container .frm_radio label:hover{border-color:var(--ww-sage)}
.ww-contact .ww-frmwrap .frm_opt_container .frm_radio label:has(input:checked){background:var(--ww-sage);
  color:var(--ww-dark);border-color:var(--ww-sage)}
.ww-contact .ww-frmwrap .frm_opt_container .frm_radio label:has(input:focus-visible){outline-color:var(--ww-sage)}
.ww-contact .ww-frmwrap .frm_button_submit:focus-visible{outline-color:var(--ww-sage)}

/* 1.26 - Formidable 6.34 zet de verzendknop bij het opslaan in de bouwer om naar een eigen veld
   (frm_field_15_container), dat als gewoon rasteritem een halve kolom kreeg. De knop krijgt zijn
   eigen rij, en de knopregel hierboven is vier klassen diep gemaakt omdat
   .frm_style_formidable-stijlen.with_frm_style .frm_submit button (0,3,1) anders wint. */
.ww-frmwrap .frm_fields_container > .frm_form_field:has(.frm_submit){grid-column:span 12 / span 12}

/* 1.27 - de hover en de donkere kleurvariant van de verzendknop zijn mee omhoog gebracht naar
   dezelfde diepte als de basisregel (1.26), anders verloren ze van hun eigen basis. */

/* 1.28 - drie metingen op de homepage na 1.27:
   1. .frm_style_formidable-stijlen.with_frm_style .form-field{margin-bottom:20px} (0,3,0) won van
      .ww-frmwrap .frm_form_field{margin:0}; de rijafstand was daardoor 34px in plaats van 14px.
   2. De donkere veldregel gebruikte de background-shorthand, waardoor de chevron van de select
      herhaald werd (repeat en size gereset). Nu background-color, en de chevronregel zet
      repeat/positie/maat zelf nog een keer.
   3. Het tekstvak heeft rows=5 in de markup; height:96px maakt er drie regels van, resize blijft. */
.ww-frmwrap .frm_forms .frm_fields_container > .frm_form_field{margin:0}
.ww-contact .ww-frmwrap .frm_forms select{background-repeat:no-repeat;background-position:right 14px center;
  background-size:12px 12px}

/* 1.29 - de lichte pill (contactpagina) kreeg zijn tekstkleur nog van Formidable (#1D2939);
   nu var(--ww-dark) in de pillregel zelf. */

/* 1.30 - de mobiele H1-fix (3b) brak op desktop door: op Aanbod stond op 1920px
   "Wellnessvoor-zieningen", want de H1 stond op max-width:15ch (460px bij 46px) en het woord is
   breder. Afbreken en hyphens gelden nu alleen onder 720px; daarboven manual/normal en een
   H1-box van 580px, zodat het woord op een regel past. */

/* 1.31 - tussen 1024 en 1259px is de tekstkolom van de tweekoloms hero smaller dan het woord
   "Wellnessvoorzieningen" (521px bij 46px; kolom 414px op 1024, 514px op 1220, pas 534px op 1260).
   Zonder terugval stak het woord daar tot 113px de beeldkolom in. In die band mag het dus wel
   afbreken; daarbuiten niet. Gemeten op Aanbod (138) en Onderhoud (18). */

/* ==========================================================================
   Wellness Works, ontwerpronde 1.32 (24-09-2026)
   Deze laag komt bovenop 1.31 en wordt bij akkoord samengevoegd tot
   style-1.32.css. Vijf onderwerpen, in deze volgorde:
   1. sitebreed, 2. eyebrow-labels weg, 3. spectabel alleen bij waarden,
   4. navigatieband, 5. tikdoelen.
   ========================================================================== */

/* --- 1. Sitebreed: geen gecentreerde container meer -----------------------
   Regel van Mitch (16-09-2026): elke sectie, header en hero inbegrepen, van
   gutter tot gutter. De afwisseling komt uit achtergrond, kolommen en beeld.
   .ww-wrap-kader blijft over voor de kleine secties die juist smal mogen. */
.ww-wrap{max-width:none;padding-inline:clamp(20px,4.5vw,72px);padding-left:clamp(20px,4.5vw,72px);
  padding-right:clamp(20px,4.5vw,72px)}
/* .ww-pagecontent .ww-wrap (0,2,0) in 1.31 regel 292 is specifieker dan de
   regel hierboven en hield de content op 1280px gecentreerd terwijl de header
   al sitebreed was. Gemeten 24-09-2026: wrap links op 313px bij een logo op
   72px. Daarom hier expliciet op hetzelfde niveau teruggezet. */
.ww-pagecontent .ww-wrap{max-width:none}
.ww-wrap-kader,.ww-pagecontent .ww-wrap-kader{max-width:1180px;margin-inline:auto}

/* De hero-tekst zat nog in de container en kreeg daardoor op 1920 een lege
   strook links. Tekstkolom dominant, beeld ernaast tot de rand. */
.ww-v2hero-tx{max-width:none}
@media (min-width:1024px){
  .ww-v2hero-in{grid-template-columns:1.18fr .82fr}
  .ww-v2hero-tx{padding:84px 64px 88px 0}
  .ww-v2hero h1{max-width:18ch}
}
/* H1 onder 400px een maat kleiner, zodat "wellnesspartner" zonder zacht
   afbreekstreepje in de kolom past (gemeten: 253px woord in 257px kolom).
   Hiermee kan de &shy; uit de homepage-H1 en vindt Ctrl+F het woord weer. */
@media (max-width:400px){
  .ww-v2hero h1{font-size:35px}
}

/* --- 2. Eyebrow-labels: vervallen ----------------------------------------
   Het label met lijnicoon boven elke H2 stond 39 keer op 14 pagina's, met
   hetzelfde icoon voor verschillende betekenissen. Regel hieruit: een icoon
   staat op deze site voor precies een ding, een pagina, en nooit voor een
   abstract begrip. De klasse blijft bestaan zodat oude opmaak niet breekt,
   maar rendert niet meer. */
.ww-v2 .ww-v2label{display:none}

/* Wat het label soms wel deed, context geven die de kop niet geeft, doet nu
   een gewone zin onder de kop in zinshoofdletters. */
.ww-v2 .ww-v2kopnoot{font-size:15.5px;line-height:1.6;color:rgba(30,41,37,.68);
  margin:-6px 0 0;max-width:46ch}
.ww-v2 .ww-v2sec-dark .ww-v2kopnoot{color:rgba(242,242,239,.7)}

/* --- 3. Spectabel alleen waar een waarde staat ---------------------------
   .ww-v2spec bleef staan voor echte meetwaarden (Installatie: 230V/16A,
   3 kW). De acht tabellen met proza in cijferopmaak worden .ww-v2punt: een
   opsomming van hele zinnen, zonder marker en zonder rechterkolom. */
.ww-v2punt{margin:0;padding:0;list-style:none;border-top:1px solid var(--ww-mist)}
.ww-v2punt li{padding:13px 0;border-bottom:1px solid var(--ww-mist);
  font-size:15.5px;line-height:1.62;color:rgba(30,41,37,.82);max-width:60ch}
.ww-v2sec-dark .ww-v2punt{border-color:rgba(255,255,255,.2)}
.ww-v2sec-dark .ww-v2punt li{border-color:rgba(255,255,255,.2);color:rgba(242,242,239,.82)}

/* Bedrijfsgegevens zijn geen specificaties: adresblok in plaats van tabel. */
.ww-v2adres{font-style:normal;font-size:16px;line-height:1.75;color:rgba(30,41,37,.82)}
.ww-v2adres b{display:block;font-size:18px;font-weight:600;color:var(--ww-dark);margin:0 0 4px}
.ww-v2sec-dark .ww-v2adres{color:rgba(242,242,239,.82)}
.ww-v2sec-dark .ww-v2adres b{color:#fff}

/* --- 4. Navigatieband ----------------------------------------------------
   Vervangt de "Sluit aan op"-rijen, die 4 tot 6 keer per pagina "Bekijken"
   in een vetgedrukte rechterkolom zetten en tikdoelen van 18px opleverden.
   Nu een eigen band onder de afsluiting: kaart per pagina, met het icoon dat
   die pagina ook in het submenu heeft, en een regel die zegt wat er staat. */
.ww-v2volg{background:#fff;padding:clamp(36px,4vw,56px) 0;border-top:1px solid var(--ww-mist)}
.ww-v2volg h2{font-size:clamp(20px,2.2vw,25px);line-height:1.2;margin:0 0 22px;font-weight:500}
.ww-v2volg ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ww-v2volg a{display:grid;grid-template-columns:24px 1fr;gap:0 14px;align-items:start;
  height:100%;padding:18px 20px;background:var(--ww-warm);
  transition:background .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1)}
.ww-v2volg a:hover{background:var(--ww-mist);transform:translateY(-2px)}
.ww-v2volg svg{width:22px;height:22px;display:block;color:var(--ww-mid);margin-top:1px}
.ww-v2volg b{font-size:16px;font-weight:600;color:var(--ww-dark);display:block;margin:0 0 4px}
.ww-v2volg span{grid-column:2;font-size:14px;line-height:1.55;color:rgba(30,41,37,.72);display:block}
@media (min-width:720px){.ww-v2volg ul{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ww-v2volg ul{grid-template-columns:repeat(4,1fr)}}

/* De afsluiting wordt daardoor een kolom in plaats van twee, en krijgt de
   ruimte die hij eerst met de linklijst deelde. */
.ww-v2cta-solo .ww-v2cta-in{max-width:56ch}
.ww-v2cta-solo h2{max-width:22ch}

/* --- 5. Tikdoelen --------------------------------------------------------
   Gemeten 11-09-2026: 17 tot 26 doelen per pagina onder 24px, geen enkele
   pagina haalde de 44px-poort. Footerlinks en keuzerondjes waren de bron;
   de "Bekijken"-rijen verdwijnen met punt 4. */
.ww-foot-col li{margin:0}
/* 13px boven en onder plus regelhoogte 1,35 op 13,5px tilt de footerlink
   precies over de 44px. Met 11px bleef hij op 40px steken, gemeten 390px. */
.ww-foot-col a{display:inline-block;padding:13px 0;line-height:1.35}
.ww-foot-bot a{display:inline-block;padding:14px 0;line-height:1.35}
.ww-brand{padding-block:9px}
.ww-v2adres a{display:inline-block;padding:11px 0}
/* Bovenbalk: de twee links stonden op 15px. De balkpadding verhuist van de
   wrap naar de links zelf, zodat het tikdoel 44px wordt zonder dat de balk
   hoger uitvalt dan hij nu is (9 + 15 + 9 = 33px blijft 33px voor de tekst
   ernaast, de links nemen alleen hun eigen ruimte). */
.ww-util .ww-wrap{padding-top:0;padding-bottom:0;align-items:center;min-height:44px}
.ww-util a{display:inline-block;padding-block:14px}
/* Losse links binnen lopende tekst blijven inline: daar zou padding het
   regelblok openbreken. Die vallen bewust buiten de 44px-eis. */
.ww-frmwrap .frm_radio label,.ww-frmwrap .frm_checkbox label{display:block;padding:9px 0;
  min-height:44px;display:flex;align-items:center;gap:10px}

/* --- 6. Skelet doorbreken -------------------------------------------------
   Tien van de veertien paginas hadden hetzelfde skelet: hero, intro met
   label, split met foto en haarlijntabel, donkere sectie, afsluiting met twee
   knoppen en "Sluit aan op". Hieronder de onderdelen waarmee dat per pagina
   uiteen gaat lopen. */

/* Werkwijze: de vier stappen zijn het onderwerp van de pagina en staan nu
   direct onder de hero, als rij over de volle breedte in plaats van als
   lijst diep in een donkere sectie. */
.ww-v2kopblok{margin:0 0 clamp(26px,3vw,40px)}
.ww-v2kopblok h2{font-size:clamp(27px,3.4vw,38px);line-height:1.12;letter-spacing:-0.018em;
  margin:0 0 12px;font-weight:500;max-width:22ch;text-wrap:balance}
@media (min-width:900px){
  .ww-v2stap-rij{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;border-top:0}
  /* grid-template-rows expliciet: zonder deze regel verdeelt de grid de
     overtollige hoogte van de kortste kolommen over beide rijen, waardoor het
     nummer meerekt en de koppen van 01 tot 03 twaalf pixels lager stonden dan
     die van 04. Gemeten 24-09-2026: b-hoogte 43,7px tegen 32px. */
  .ww-v2stap-rij article{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;
    padding:22px 0 0;border-top:1px solid var(--ww-mist);border-bottom:0}
  .ww-v2sec-dark .ww-v2stap-rij article{border-top-color:rgba(255,255,255,.2)}
  .ww-v2stap-rij b{margin:0 0 14px;display:block}
}

/* Over ons: de bio is daar het hoofdelement, niet een alinea naast een
   sfeerfoto. Portret links, citaat en naam rechts. */
.ww-v2persoon{display:grid;gap:clamp(24px,3.5vw,48px);align-items:start}
/* Twee kolommen: portret met onderschrift, en de biografie met een eigen kop.
   De derde kolom is vervallen samen met het citaatblok: een grote losse regel
   naast een naam en functie leest als een uitspraak van die persoon, ook
   zonder aanhalingstekens, en dat was het nu juist niet. */
@media (min-width:860px){
  .ww-v2persoon{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
}
@media (min-width:1280px){
  .ww-v2persoon{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
}
.ww-v2portret{margin:0;max-width:380px}
.ww-v2portret-vak{aspect-ratio:4/5;background:var(--ww-mist);position:relative;
  display:grid;place-items:center;overflow:hidden}
.ww-v2portret img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Zolang de foto van Daniel openstaat, is het vak zichtbaar leeg en zegt het
   dat ook. Een sfeerfoto op de plek van een gezicht is precies de tell die
   anti-ai-design op deze pagina aanwees. */
.ww-v2portret span{font-size:13.5px;line-height:1.5;color:rgba(30,41,37,.55);text-align:center;
  padding:0 16px}
/* Bewust GEEN aanhalingstekens en geen naam eronder: deze zin is sitetekst,
   geen uitspraak van Daniel. Een pull-quote met zijn naam eronder zou hem
   woorden toeschrijven die hij nooit heeft gezegd. Zodra hij zelf een citaat
   aanlevert, kan dit blok alsnog een echt citaat worden. */
.ww-v2cit{font-size:clamp(21px,2.6vw,27px);line-height:1.38;font-weight:300;color:var(--ww-dark);
  margin:0;max-width:28ch;letter-spacing:-0.012em}
/* De naam staat nu als onderschrift bij het portret: een bijschrift benoemt
   wie er op de foto staat, het schrijft geen uitspraak toe. */
.ww-v2naam{font-size:14.5px;line-height:1.5;color:rgba(30,41,37,.66);margin:14px 0 0}
.ww-v2naam b{display:block;font-size:16px;font-weight:600;color:var(--ww-dark);margin:0 0 2px}

/* Driekoloms tekstrij zonder marker. Verving de variant met een icoon per
   rij: die iconen stonden op een abstract begrip, en twee ervan waren
   byte-gelijk aan het paginapictogram van Installatie en Vakantieparken uit
   het submenu. Dat botst met de regel dat een icoon voor precies een pagina
   staat, dus hier draagt de kop het alleen. */
.ww-v2rij{display:grid;gap:0;border-top:1px solid var(--ww-mist)}
.ww-v2sec-dark .ww-v2rij{border-color:rgba(255,255,255,.2)}
.ww-v2rij article{padding:22px 0;border-bottom:1px solid var(--ww-mist)}
.ww-v2sec-dark .ww-v2rij article{border-color:rgba(255,255,255,.2)}
.ww-v2rij h3{font-size:20px;margin:0 0 9px;font-weight:600}
.ww-v2rij p{font-size:15px;line-height:1.62;color:rgba(30,41,37,.74);margin:0;max-width:52ch}
.ww-v2sec-dark .ww-v2rij p{color:rgba(242,242,239,.78)}
@media (min-width:900px){
  .ww-v2rij{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
  .ww-v2rij article{padding:24px 0 0;border-bottom:0}
  .ww-v2rij h3{font-size:21px}
}

/* Koppen die eerder een inline style droegen. Uit de content gehaald, zodat
   opmaak in het stylesheet staat en niet per pagina herhaald wordt. */
.ww-v2 .ww-v2h2m{font-size:clamp(24px,3vw,32px);line-height:1.15;margin:0 0 16px;font-weight:500;
  max-width:24ch;text-wrap:balance}
.ww-v2 .ww-v2h3m{font-size:17px;line-height:1.3;margin:0 0 4px;font-weight:600}
.ww-v2tekst-kort{margin:0 0 24px}
.ww-v2tekst-kort p:last-child{margin-bottom:0}

/* Afsluiting als een kolom, nu de linklijst een eigen band heeft. */
.ww-v2 .ww-v2cta-in p{font-size:17px;line-height:1.7;margin:0 0 26px;max-width:52ch}
.ww-v2 .ww-v2sec-white .ww-v2cta-in p{color:rgba(30,41,37,.8)}

/* --- 7. Aanvullingen uit de uitrol van 25-09-2026 ------------------------ */

/* Pagina 24 houdt een lijst met eigen labels ("Beheerplan" wijst naar
   Waterbehandeling). Die labels zijn betekenisvol, dus daar geen
   navigatieband met paginatitels maar een opsomming met de link in de regel.
   Het tikdoel is de hele regel, niet alleen het woord. */
.ww-v2punt-link li{padding:0}
.ww-v2punt-link li a{display:block;padding:13px 0;color:var(--ww-dark);
  text-decoration:underline;text-decoration-color:var(--ww-mid);
  text-underline-offset:3px;transition:color .28s}
.ww-v2punt-link li a:hover{color:var(--ww-mid)}
.ww-v2sec-dark .ww-v2punt-link li a{color:#fff;text-decoration-color:var(--ww-sage)}

/* Contact heeft geen eigen afsluitsectie, dus daar staat de navigatieband
   binnen een bestaande sectie in plaats van als eigen band. */
.ww-v2volg-in{background:none;padding:0;border-top:0}
.ww-v2volg-in ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:720px){.ww-v2volg-in ul{grid-template-columns:1fr 1fr}}

/* --- 8. Nagemeten op de echte pagina's, 25-09-2026 ----------------------- */

/* Filterchips op Aanbod stonden op 34px en waren de laatste tikdoelen onder
   de 44px-grens. Gemeten in een iframe van 1920px. */
.ww-fchip{min-height:44px;display:inline-flex;align-items:center}

/* Op Home is de kop van een doelgroepkaart een link van 22px hoog. De link
   zelf wordt 44px met een even grote negatieve marge, zodat het tikdoel klopt
   en de opmaak geen millimeter verschuift. Het uitgerekte ::after maakt daar
   bovenop de hele kaart klikbaar; dat is winst, maar de 44px hangt er niet
   van af, want een trefvlak van een pseudo-element is niet te meten. */
.ww-v2stap article{position:relative}
.ww-v2stap h3 > a{display:block;padding-block:12px;margin-block:-12px;
  text-decoration:none;color:inherit}
.ww-v2stap h3 > a::after{content:"";position:absolute;inset:0}
.ww-v2stap article:hover h3 > a{color:var(--ww-mid)}
.ww-v2sec-dark .ww-v2stap article:hover h3 > a{color:var(--ww-sage)}

/* --- 9. Na de icoonronde van 25-09-2026 --------------------------------- */

/* De doelgroepkaarten verhuisden van .ww-v2stap naar .ww-v2rij toen hun icoon
   verdween, en vielen daarmee uit de tikdoelregel: gemeten 25px. De vijf
   dienstkolommen op Home werden diezelfde ronde echte paginalinks en stonden
   op 20px. Een koplink is voortaan in elke kaartcomponent 44px, met de hele
   kaart als trefvlak. */
.ww-v2stap h3 > a,
.ww-v2rij h3 > a,
.ww-v2kolommen h3 > a{display:block;padding-block:12px;margin-block:-12px;
  text-decoration:none;color:inherit}
.ww-v2rij article,.ww-v2kolommen > div{position:relative}
.ww-v2rij h3 > a::after,
.ww-v2kolommen h3 > a::after{content:"";position:absolute;inset:0}
.ww-v2rij article:hover h3 > a,
.ww-v2kolommen > div:hover h3 > a{color:var(--ww-mid)}
.ww-v2sec-dark .ww-v2rij article:hover h3 > a{color:var(--ww-sage)}

/* .ww-v2rij staat niet overal even breed: op Over ons over de volle breedte,
   op Onderhoud in de rechterkolom van een tweekoloms raster (gemeten 648px,
   wat drie kolommen van 192px opleverde met een vierde item eronder).
   Auto-fit laat het aantal kolommen de ruimte volgen. */
@media (min-width:900px){
  .ww-v2rij{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* --- 10. REGRESSIE, gemeld door Mitch 25-09-2026 ------------------------- */

/* `.ww-v2lijst li` is een grid van `19px 1fr` met het icoon in de eerste
   kolom. Toen de iconen eruit gingen viel de tekst IN die kolom van 19px en
   brak hij af op een woord per regel. Zichtbaar op de homepage en op
   Responstijden. Dit is door mij veroorzaakt en niet door de meting gevangen,
   omdat overflow, H1 en tikdoelen allemaal gewoon goed bleven: een
   eigenschappenlijst is geen ontwerpcontrole. */
.ww-v2lijst li{grid-template-columns:1fr;gap:0}
.ww-v2lijst li:has(svg){grid-template-columns:19px 1fr;gap:13px}

/* ==========================================================================
   Wellness Works 1.40, ontwerpronde 25-09-2026 op de feedback van Mitch.

   Aanleiding, letterlijk: "door ingekaderd naar sitebreed design is de H1,
   tekst en CTA's gewoon raar ingekaderd met lay-out (...) er moet echt meer
   wow factor aan gaan komen", en per sectie een reeks punten.

   De rode draad is dat secties bij de omzetting naar sitebreed alleen breder
   zijn gemaakt en niet opnieuw ontworpen. Elke maat hieronder is daarom
   opnieuw bepaald op de breedte die er nu werkelijk is.
   ========================================================================== */

/* --- 1. Hero, voorstel 2 uit het artifact -------------------------------
   Foto over de volle breedte, een hard donker vlak eroverheen in plaats van
   een verlooplaag, en drie merkgroene USP-blokken die over de naad liggen.
   Gemeten uitgangspunt van de oude hero op 1568px: H1 afgetopt op 696px in
   een kolom van 833px (drie regels, 137px ongebruikt), beeldkolom 1073px
   tegenover een tekstkolom van 833px. Beide omgedraaid. */
.ww-v3hero{position:relative;background:var(--ww-dark);color:#fff;overflow:hidden;
  display:flex;align-items:stretch}

/* De foto is de ACHTERGROND van de hele hero, niet een kolom ernaast. Mitch,
   letterlijk: "dit een complete achtergrond zou zijn met een transparantie
   filter waardoor de tekst beter naar voren komt. en dan met die groene
   kaarten erbij in verwerkt." De vorige versie zette een hard paneel over
   60% van de breedte; dat is een split en geen achtergrond. */
.ww-v3hero-beeld{position:absolute;inset:0;z-index:0}
.ww-v3hero-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Transparantiefilter over het hele beeld: overal aanwezig, aan de tekstkant
   dichter zodat de kop leesbaar blijft zonder dat de foto wordt afgedekt. */
.ww-v3scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(98deg,rgba(30,41,37,.93) 0%,rgba(30,41,37,.88) 38%,
  rgba(30,41,37,.66) 70%,rgba(30,41,37,.52) 100%)}
@media (max-width:860px){.ww-v3scrim{background:rgba(30,41,37,.86)}}

/* Header plus hero vullen samen precies de eerste schermhoogte, zonder
   witruimte en zonder dat de volgende sectie er al onderuit piept. De
   headerhoogte is per breedte gemeten op de live site: 138 mobiel, 76 vanaf
   768, 201 tussen 1024 en 1259 (daar breekt het menu naar twee regels) en
   135 vanaf 1260. */
.ww-v3hero{--kop:138px;min-height:calc(100svh - var(--kop))}
@media (min-width:768px){.ww-v3hero{--kop:76px}}
@media (min-width:1024px){.ww-v3hero{--kop:201px}}
@media (min-width:1260px){.ww-v3hero{--kop:135px}}

.ww-v3hero-in{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(28px,4vw,54px);padding-block:clamp(34px,4vw,60px)}
.ww-v3blok{max-width:min(880px,58%)}
@media (max-width:860px){.ww-v3blok{max-width:none}}
.ww-v2 .ww-v3kruimel{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  color:var(--ww-sage);margin:0 0 18px}
.ww-v3kruimel svg{width:15px;height:15px;flex:none;display:block}
.ww-v3hero h1{font-size:clamp(29px,3.6vw,46px);line-height:1.08;letter-spacing:-.022em;
  font-weight:500;color:#fff;margin:0 0 18px;max-width:27ch;text-wrap:balance}
.ww-v2 .ww-v3lead{font-size:17px;line-height:1.62;color:rgba(242,242,239,.86);
  margin:0;max-width:56ch}
.ww-v3acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* Het nummer hoort in de hero: bij een storing om elf uur 's avonds is dat
   het enige wat telt. Tikdoel 45px, gemeten. */
.ww-v2 .ww-v3tel{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:14.5px;
  color:rgba(242,242,239,.86);text-decoration:none;border-bottom:1px solid rgba(167,178,168,.5);
  padding:11px 0 13px}
.ww-v3tel svg{width:16px;height:16px;flex:none}
.ww-v2 .ww-v3tel b{color:#fff;font-weight:600}
.ww-v2 .ww-v3tel:hover{color:#fff;border-bottom-color:var(--ww-sage)}

/* USP-blokken in de merkkleur, nu IN de hero over de achtergrondfoto in
   plaats van eronder over de naad. Half doorzichtig zodat de foto er doorheen
   blijft meespelen; dat houdt het een achtergrond en geen tweede vlak. */
.ww-v3usp{display:grid;gap:12px}
@media (min-width:820px){.ww-v3usp{grid-template-columns:repeat(3,1fr)}}
.ww-v3usp article{display:grid;grid-template-columns:44px 1fr;gap:0 16px;align-items:start;
  background:rgba(65,83,74,.86);backdrop-filter:blur(2px);color:#fff;padding:20px 22px;
  border-top:2px solid var(--ww-sage)}
.ww-v3usp .ico{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;
  background:rgba(167,178,168,.2);color:var(--ww-sage);line-height:0}
.ww-v3usp .ico svg{width:22px;height:22px;display:block}
.ww-v3usp b{display:block;font-size:16px;font-weight:600;margin:0 0 5px;color:#fff}
.ww-v3usp span{display:block;font-size:13.5px;line-height:1.55;color:rgba(242,242,239,.84)}
@media (max-width:520px){
  .ww-v3usp article{grid-template-columns:36px 1fr;gap:0 13px;padding:16px}
  .ww-v3usp .ico{width:36px;height:36px}
  .ww-v3usp .ico svg{width:19px;height:19px}
}

/* Compacte variant voor de landingspagina's: zelfde taal, minder hoogte,
   geen USP-blokken. */
.ww-v3hero-kort{min-height:clamp(340px,34vw,460px)}
.ww-v3hero-kort h1{font-size:clamp(27px,3.1vw,40px)}

/* --- 2. Sectiekop: kop en intro onder elkaar, niet ver uit elkaar --------
   Mitch: "die introductietekst dan op zon afstand daar rechts staan is ook
   een rare oplossing". De kop stond links en de intro rechts met soms 300px
   leegte ertussen. Nu staan ze als blok onder elkaar, links op de gutter,
   met de inhoud eronder over de volle breedte. */
.ww-v3kop{max-width:none;margin:0 0 clamp(26px,3.2vw,44px)}
.ww-v3kop h2{font-size:clamp(27px,3.4vw,40px);line-height:1.1;letter-spacing:-.018em;
  font-weight:500;margin:0 0 14px;max-width:24ch;text-wrap:balance}
.ww-v2 .ww-v3kop p{font-size:17px;line-height:1.66;color:rgba(30,41,37,.75);margin:0;max-width:64ch}
.ww-v3sec-dark .ww-v3kop p,.ww-v2sec-dark .ww-v3kop p{color:rgba(242,242,239,.8)}

/* --- 3. Hover die je ziet ------------------------------------------------
   Mitch: "mis alleen de wow factor hover effecten als je erover heen gaat"
   en over het menu: "hovereffecten over de menu's die uitklappen zijn
   bijzonder niet opvallend". */
.ww-v2kolommen > div{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.ww-v2kolommen > div:hover{transform:translateY(-3px)}
.ww-v2kolommen > div:hover .ww-v2kol-ico{color:var(--ww-dark)}
.ww-v2kolommen > div::after{content:"";display:block;height:2px;width:0;background:var(--ww-mid);
  margin-top:14px;transition:width .3s cubic-bezier(.2,.7,.3,1)}
.ww-v2kolommen > div:hover::after{width:46px}

.ww-sub a{position:relative;transition:background .2s,color .2s,padding-left .2s}
.ww-sub a:hover,.ww-sub a:focus-visible{background:var(--ww-warm);color:var(--ww-dark);
  padding-left:18px}
.ww-sub a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--ww-mid);transition:width .2s}
.ww-sub a:hover::before,.ww-sub a:focus-visible::before{width:3px}
.ww-sub a:hover svg{color:var(--ww-dark)}

/* --- 4. Tijdlijn in plaats van 01 02 03 04 -------------------------------
   Mitch: "die cijfers zijn AI design en moet iconografie/symbool komen ipv
   dit. Misschien tijdlijn maken van de 4 stappen". De volgorde zit nu in de
   lijn zelf; het nummer is klein en hangt aan de knoop in plaats van als
   displaycijfer boven de kop te staan. */
.ww-v3tijd{display:grid;gap:0;position:relative}
.ww-v3tijd article{position:relative;padding:0 0 26px 46px}
.ww-v3tijd article::before{content:"";position:absolute;left:17px;top:34px;bottom:-4px;width:1px;
  background:var(--ww-mist)}
.ww-v3tijd article:last-child::before{display:none}
.ww-v3tijd .knoop{position:absolute;left:0;top:0;width:35px;height:35px;display:grid;
  place-items:center;background:var(--ww-mid);color:#fff;line-height:0}
.ww-v3tijd .knoop svg{width:19px;height:19px;display:block}
.ww-v3tijd .stap{display:block;font-size:12px;font-weight:600;color:var(--ww-mid);
  margin:0 0 3px;font-variant-numeric:tabular-nums}
.ww-v3tijd h3{font-size:19px;font-weight:600;margin:0 0 7px;line-height:1.25}
.ww-v3tijd p{font-size:15px;line-height:1.62;color:rgba(30,41,37,.76);margin:0;max-width:44ch}
.ww-v3sec-dark .ww-v3tijd article::before,.ww-v2sec-dark .ww-v3tijd article::before{
  background:rgba(255,255,255,.22)}
.ww-v3sec-dark .ww-v3tijd .knoop,.ww-v2sec-dark .ww-v3tijd .knoop{background:var(--ww-sage);
  color:var(--ww-dark)}
.ww-v3sec-dark .ww-v3tijd .stap,.ww-v2sec-dark .ww-v3tijd .stap{color:var(--ww-sage)}
.ww-v3sec-dark .ww-v3tijd h3,.ww-v2sec-dark .ww-v3tijd h3{color:#fff}
.ww-v3sec-dark .ww-v3tijd p,.ww-v2sec-dark .ww-v3tijd p{color:rgba(242,242,239,.78)}
@media (min-width:900px){
  /* Horizontaal, zodat de vier stappen in een oogopslag te zien zijn in
     plaats van vier schermen scrollen. */
  .ww-v3tijd{grid-template-columns:repeat(4,1fr);gap:0 30px}
  .ww-v3tijd article{padding:52px 0 0}
  .ww-v3tijd article::before{left:35px;right:-30px;top:17px;bottom:auto;width:auto;height:1px}
  .ww-v3tijd .knoop{top:0;left:0}
  .ww-v3tijd p{max-width:34ch}
}

/* --- 5. Bewijsblok met beeld --------------------------------------------
   Mitch over "Een spa die stilstaat kost boekingen": "Moet een sectie zijn
   die niet teveel scrollen kost, sterke visualisaties en overtuigende
   elementen die snel duidelijk worden." De opsomming met haarlijnen wordt
   een raster van blokken naast het beeld. */
.ww-v3bewijs{display:grid;gap:clamp(26px,3.4vw,52px);align-items:center}
@media (min-width:1000px){.ww-v3bewijs{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.ww-v3bewijs figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--ww-dark)}
.ww-v3bewijs figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ww-v3punten{display:grid;gap:1px;background:rgba(255,255,255,.18);margin-top:26px}
@media (min-width:620px){.ww-v3punten{grid-template-columns:1fr 1fr}}
.ww-v3punten div{background:var(--ww-dark);padding:18px 20px}
.ww-v3punten svg{width:20px;height:20px;display:block;color:var(--ww-sage);margin-bottom:10px}
.ww-v3punten b{display:block;font-size:15.5px;font-weight:600;color:#fff;margin-bottom:4px}
.ww-v3punten span{display:block;font-size:14px;line-height:1.55;color:rgba(242,242,239,.76)}

/* --- 6. Doelgroepkaarten: duidelijk dat het links zijn ------------------
   Mitch: "geen visualisatie voor de USP kaarten en niet duidelijk genoeg dat
   het interne links zijn". */
.ww-v3kaarten{display:grid;gap:14px}
@media (min-width:820px){.ww-v3kaarten{grid-template-columns:repeat(3,1fr)}}
.ww-v3kaarten a{position:relative;display:block;background:#fff;border:1px solid var(--ww-mist);
  padding:24px 26px 54px;text-decoration:none;color:var(--ww-dark);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s}
.ww-v3kaarten a:hover{transform:translateY(-3px);border-color:var(--ww-mid);
  box-shadow:0 12px 28px rgba(30,41,37,.10)}
.ww-v3kaarten .ico{display:grid;place-items:center;width:46px;height:46px;background:var(--ww-warm);
  color:var(--ww-mid);line-height:0;margin-bottom:16px}
.ww-v3kaarten .ico svg{width:23px;height:23px;display:block}
.ww-v3kaarten h3{font-size:19px;font-weight:600;margin:0 0 7px}
.ww-v3kaarten p{font-size:14.5px;line-height:1.6;color:rgba(30,41,37,.74);margin:0}
.ww-v3kaarten .ga{position:absolute;left:26px;bottom:22px;display:inline-flex;align-items:center;
  gap:8px;font-size:14px;font-weight:600;color:var(--ww-mid)}
.ww-v3kaarten .ga::after{content:"";width:16px;height:1px;background:currentColor;
  transition:width .28s cubic-bezier(.2,.7,.3,1)}
.ww-v3kaarten a:hover .ga::after{width:30px}

/* --- 7. FAQ naast elkaar ------------------------------------------------
   Mitch: "FAQ sectie is alles onder elkaar met veel te veel scrollen,
   overweeg dan naast elkaar te zetten met alle nieuwe ruimte". */
/* Twee eigen kolommen, geen raster: bij een raster rekt de rij mee zodra er
   links een antwoord openstaat en valt er rechts een gat. Gemeld door Mitch
   met screenshot. Met aparte kolommen duwt een open antwoord alleen zijn
   eigen kolom omlaag. */
.ww-faq-kol{display:block}
@media (min-width:900px){
  .ww-faq{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start}
}
.ww-faq details{border-bottom:1px solid var(--ww-mist)}
.ww-faq summary{cursor:pointer;padding:17px 0;font-weight:600;font-size:16px;
  list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  transition:color .2s}
.ww-faq summary::-webkit-details-marker{display:none}
.ww-faq summary:hover{color:var(--ww-mid)}
.ww-faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:6px;
  border-right:1.6px solid var(--ww-mid);border-bottom:1.6px solid var(--ww-mid);
  transform:rotate(45deg);transition:transform .25s}
.ww-faq details[open] summary::after{transform:rotate(-135deg)}
.ww-faq details p{margin:0 0 18px;font-size:15px;line-height:1.66;color:rgba(30,41,37,.76);
  max-width:56ch}

/* --- 8. Footer ----------------------------------------------------------
   Mitch: "Footer is ook bijzonder basic, kan echt meer ziel en soort wow
   factor in." Merknaam groot met de tagline eronder, een salielijn boven de
   kolommen, en links die als links voelen. */
.ww-foot{padding-top:clamp(48px,6vw,80px)}
.ww-foot-brand{font-size:clamp(28px,3vw,38px);font-weight:300;letter-spacing:-.02em;
  color:#fff;margin:0 0 10px}
.ww-foot-brand + p{font-size:15px;line-height:1.66;color:rgba(242,242,239,.66);max-width:40ch}
.ww-foot-top{position:relative;padding-top:clamp(26px,3vw,38px);
  border-top:1px solid rgba(167,178,168,.34)}
.ww-foot-col h3{font-size:12.5px;font-weight:600;color:var(--ww-sage);margin:0 0 14px}
.ww-foot-col a{position:relative;transition:color .22s,padding-left .22s}
.ww-foot-col a:hover{color:#fff;padding-left:13px}
.ww-foot-col a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;
  background:var(--ww-sage);transition:width .22s}
.ww-foot-col a:hover::before{width:8px}
.ww-foot-tag{margin-top:clamp(30px,4vw,48px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);font-size:clamp(17px,2vw,22px);font-weight:300;
  color:rgba(242,242,239,.8);max-width:36ch}
.ww-foot-tag b{color:#fff;font-weight:500}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Montserrat, zelf gehost sinds 25-09-2026. Reden: fonts.googleapis.com
   was de enige externe host op de site en zou bij een bezoeker al een
   verbinding met Google maken voordat er toestemming is gegeven. Variabel
   font, dus een bestand per subset dekt alle gewichten van 300 tot 700. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/montserrat-latin.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:300 700;font-display:swap;src:url('fonts/montserrat-latin-ext.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}
/* ==========================================================================
   Wellness Works 1.43, vervolg op de ontwerpronde van 25-09-2026.

   Vier dingen: een headerfout die de sitebreed-omzetting heeft veroorzaakt,
   de H1 die op grote schermen te klein bleef, de nieuwe snelverwijzing op
   Aanbod, en modelkaarten die de sitebreedte gebruiken in plaats van er
   uitgerekt in te hangen.
   ========================================================================== */

/* --- 1. Header past weer op een regel onder 1145px ----------------------
   Omzettingsfout: .ww-wrap had op 1024+ een padding van 44px, de sitebreed-
   laag maakte er clamp(20px,4.5vw,72px) van. Op 1100px is dat 49,5px, dus de
   gutter werd BREDER terwijl er een menu van 828px naast een merknaam van
   214px moest passen. Vanaf ongeveer 1145px is er genoeg ruimte; daaronder
   brak het menu naar een tweede regel en werd de header 201px hoog.
   Gemeten op de live site op 1100px voordat dit erin ging. */
@media (min-width:1024px) and (max-width:1259px){
  .ww-head .ww-wrap{padding-inline:20px}
  /* Gemeten op 1024px met alleen de regels hieronder zonder de merknaam:
     merk 238 plus menu 729 is 967 in een rij van 969, dus twee pixels over
     en de knop viel alsnog naar een tweede regel (header 193px). De
     merknaam moest dus mee omlaag. */
  .ww-brand{font-size:22px}
  .ww-brand img{height:26px}
  .ww-nav > ul > li > a:not(.ww-btn),.ww-nav > ul > li > .ww-slab{padding:12px 6px;font-size:13px}
  .ww-nav > ul > li > a:not(.ww-btn)::after{left:6px;right:6px}
  .ww-navcta{margin-left:6px}
  .ww-navcta .ww-btn{padding:10px 13px;font-size:12.8px}
}
/* Gemeten na de reparatie: 126px op 1024, 1100 en 1200, en 135px vanaf
   1260 waar de gewone maatvoering weer past. Op 1201 was de header nog 201,
   want met de normale maten blijft er daar maar 12px over; daarom loopt de
   compacte band door tot 1259 en niet tot 1200. */
@media (min-width:1024px){.ww-v3hero{--kop:126px}}
@media (min-width:1260px){.ww-v3hero{--kop:135px}}

/* --- 2. De H1 mag meegroeien met het scherm -----------------------------
   Gemeten na 1.42: op 1920px stond de H1 op 46px en 695px breed, in een
   kolom van 1761px. Dat is dezelfde fout als in de nulmeting, alleen kleiner.
   De maat blijft in ch staan, dus het aantal regels verandert niet; alleen
   de letter groeit mee. */
.ww-v3hero h1{font-size:clamp(29px,2.2vw + 14px,57px)}
.ww-v3hero-kort h1{font-size:clamp(27px,1.7vw + 13px,48px)}
.ww-v3blok{max-width:min(1000px,60%)}
@media (max-width:860px){.ww-v3blok{max-width:none}}

/* --- 3. Snelverwijzing naar een categorie -------------------------------
   Mitch over Aanbod: "Pagina is simpel qua opzet: HERO, snelverwijzing met
   sterk design naar specifiek aanbod cateorie en dan alle productoverzichten
   (waar filters ook horen worden gefixt)."
   Geen achtergrondfoto maar het product zelf. De leverancier levert de
   spa's en hot tubs als uitsnede op zwart en de sauna's op wit of
   transparant; met mix-blend-mode lighten valt dat zwart precies weg tegen
   de merkkleur, zodat alle drie de categorieen dezelfde behandeling krijgen
   zonder de bestanden te bewerken. Het is een sprong binnen de pagina, dus
   de kaart zegt met een teller hoeveel modellen eronder zitten. */
.ww-v3snel{display:grid;gap:14px}
@media (min-width:760px){.ww-v3snel{grid-template-columns:repeat(3,1fr)}}
/* De beeldrij krijgt een VASTE hoogte. Met 1fr baseert de rij op zijn
   inhoud en de afbeelding op de rij (max-height:100%), en dan houden ze
   elkaar vast: eerst allebei op nul gemeten, daarna een rij van 718px die
   de hele natuurlijke fotohoogte overnam. Een vaste tracklengte is wel
   bepaald, dus de foto past zich netjes aan. */
.ww-v3snel a{position:relative;display:grid;grid-template-rows:clamp(160px,14vw,230px) auto;
  gap:18px;padding:24px 26px 24px;overflow:hidden;
  text-decoration:none;color:#fff;background:var(--ww-dark);
  transition:background .3s,transform .3s cubic-bezier(.2,.7,.3,1)}
.ww-v3snel a:hover,.ww-v3snel a:focus-visible{background:#18211D;transform:translateY(-3px)}
.ww-v3snel .beeld{position:relative;min-height:0;overflow:hidden}
/* De foto vult het vak en wordt door object-fit binnen de verhouding
   gehouden. Niet met max-height:100%: dat percentage bleef bij twee van de
   drie foto's ongeldig, waardoor een staande foto van 700px uit een vak van
   230px liep. */
.ww-v3snel img{width:100%;height:100%;object-fit:contain;object-position:center;
  display:block;margin:0;mix-blend-mode:lighten;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.ww-v3snel a:hover img,.ww-v3snel a:focus-visible img{transform:scale(1.05)}
.ww-v3snel .tel{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ww-sage);margin:0 0 7px;font-variant-numeric:tabular-nums}
.ww-v3snel h3{font-size:clamp(20px,1.5vw,25px);font-weight:600;color:#fff;
  margin:0 0 8px;line-height:1.16}
.ww-v3snel p{font-size:14px;line-height:1.55;color:rgba(242,242,239,.8);
  margin:0 0 16px;max-width:36ch}
.ww-v3snel .ga{display:inline-flex;align-items:center;gap:10px;font-size:14px;
  font-weight:600;color:#fff}
.ww-v3snel .ga::after{content:"";width:18px;height:1px;background:currentColor;
  transition:width .3s cubic-bezier(.2,.7,.3,1)}
.ww-v3snel a:hover .ga::after,.ww-v3snel a:focus-visible .ga::after{width:36px}

/* --- 4. Groepskop met het filter erin -----------------------------------
   Mitch: "Filters zijn hier weer zo raar voor alle dingen die we
   aanbieden (...) waar filters ook horen worden gefixt." Het filter hoort
   dus bij het overzicht waar het over gaat, niet als losse balk bovenaan
   de pagina. De chips staan op de regel van de kop en tonen hun aantal,
   zodat je vooraf ziet of klikken zin heeft. */
.ww-v3groepkop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px 26px;margin:0 0 clamp(24px,2.6vw,36px)}
.ww-v3groepkop .tx{max-width:62ch}
.ww-v3groepkop h2{font-size:clamp(25px,2.6vw,34px);line-height:1.12;letter-spacing:-.018em;
  font-weight:500;margin:0 0 12px;text-wrap:balance}
.ww-v3groepkop p{font-size:15.5px;line-height:1.62;color:rgba(30,41,37,.72);margin:0 0 10px}
.ww-v3groepkop p:last-child{margin-bottom:0}
.ww-sec-dark .ww-v3groepkop p{color:rgba(242,242,239,.78)}
.ww-v3chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:none}
.ww-v3chips .ww-fchip{font-size:13px;padding:9px 15px}
.ww-v3chips .ww-fchip b{font-weight:600;font-variant-numeric:tabular-nums;opacity:.6;
  margin-left:6px}
.ww-v3chips .ww-fchip[aria-pressed="true"] b{opacity:.75}

/* --- 5. Modelkaarten gebruiken de breedte -------------------------------
   Op 1920px stonden vier vierkante kaarten van 440px naast elkaar; bij zes
   modellen bleef de tweede rij halfleeg en werd de pagina onnodig lang.
   Vanaf 1200px liggen de kaarten daarom op hun kant: beeld links, gegevens
   rechts, twee per rij. Zes modellen vullen dan drie volle rijen en de
   sectie is ongeveer de helft korter. */
@media (min-width:1200px){
  .ww-mks{grid-template-columns:1fr 1fr;gap:20px}
  .ww-mk{flex-direction:row;align-items:stretch}
  .ww-mkfig{aspect-ratio:auto;width:40%;flex:none;min-height:100%}
  .ww-mkbody{padding:24px 26px 26px;width:60%}
  .ww-mk h3{font-size:20px}
}
@media (min-width:1500px){
  .ww-mks{grid-template-columns:repeat(3,1fr)}
  .ww-mkfig{width:38%}
  .ww-mkbody{width:62%;padding:22px 22px 24px}
}

/* --- 6. Ankersprong onder de plakkende header ---------------------------
   Zonder dit verdwijnt de groepskop achter de header zodra je op een
   snelverwijzing klikt. */
.ww-kgroup{scroll-margin-top:150px}
@media (max-width:1023px){.ww-kgroup{scroll-margin-top:90px}}

/* --- 7. Dezelfde hernoemfout, nu in de CSS -----------------------------
   De stylesheet had al precies de juiste regels staan om de sjabloonkop, de
   uitgelichte afbeelding, de kopruimte en de gutter van .ww-pagecontent uit
   te zetten zodra een pagina zijn eigen hero meebrengt. Ze sleutelden alleen
   op `.ww-v2hero`, en die hero heet sinds deze ronde `.ww-v3hero`. Gevolg,
   gemeten op /installatie/ voor de reparatie: 64px witruimte tussen header
   en hero, en een hero van 1761px in een venster van 1905px omdat
   .ww-content-body er 72px gutter omheen zette. Dat is precies het
   ingekaderde beeld dat deze ronde weg moest. */
#ww-main:has(.ww-v3hero) > .ww-pagehero,
#ww-main:has(.ww-v3hero) > .ww-pagebeeld{display:none}
#ww-main:has(.ww-v3hero) > .ww-pagecontent{padding:0}
#ww-main:has(.ww-v3hero) > .ww-pagecontent > .ww-wrap{max-width:none;padding:0}

/* --- 8. Telefoonregel in de hero was onzichtbaar op dertien pagina's ----
   `.ww-v3tel` is een <a> en valt op elke page.php-pagina onder de themaregel
   `.ww-content-body a:not(.ww-btn):not(.ww-btn-p):not(.ww-btn-o):not(.ww-btn-l):not(.ww-btn-d)`
   (0,5,0), die hem donkergroen maakt met een onderstreping. Die regel
   verslaat `.ww-v2 .ww-v3tel` (0,2,0). Op de homepage bestaat die wrapper
   niet, dus daar klopte de kleur en viel het niet op. Gemeten op
   /aanbod/ voor de reparatie: rgb(30,41,37) op rgb(30,41,37). */
.ww-content-body .ww-v3hero a:not(.ww-btn):not(.ww-btn-p):not(.ww-btn-o):not(.ww-btn-l):not(.ww-btn-d){
  color:rgba(242,242,239,.86);text-decoration:none}
.ww-content-body .ww-v3hero a:not(.ww-btn):not(.ww-btn-p):not(.ww-btn-o):not(.ww-btn-l):not(.ww-btn-d):hover{
  color:#fff}
.ww-content-body .ww-v3tel b{color:#fff}

/* --- 9. Het transparantiefilter was te zwaar --------------------------
   Mitch: "een complete achtergrond zou zijn met een transparantie filter
   waardoor de tekst beter naar voren komt". Met .93 aan de tekstkant kwam
   de foto er niet meer doorheen: gemeten op de homepage was het verschil
   tussen de samengestelde kleur en de kale ondergrond links 8 tot 10 van
   765, dus visueel vlak, terwijl het rechts 108 was.

   Er is ruimte zat om lichter te gaan. Wit op een ondergrond van .82 over
   een fel beeld (240,240,240) geeft nog 8,7:1, ruim boven de 4,5:1-norm;
   over een donker beeld zit het boven de 12:1. Daarom .86 aan de tekstkant
   en .40 aan de beeldkant, plus een lichte lift op het beeld zelf zodat
   een donkere foto ook op de tekstkant nog leest. */
.ww-v3scrim{background:linear-gradient(98deg,
  rgba(30,41,37,.86) 0%,rgba(30,41,37,.80) 38%,
  rgba(30,41,37,.56) 70%,rgba(30,41,37,.40) 100%)}
@media (max-width:860px){.ww-v3scrim{background:rgba(30,41,37,.82)}}
.ww-v3hero-beeld img{filter:brightness(1.1) saturate(1.04);margin:0}

/* --- 10. Tikdoel op de modelkaart --------------------------------------
   `Meer over dit model` was 23px hoog, zeventien keer op Aanbod, tegen een
   norm van 44px. De marge van .ww-mkmeer schuift mee naar de summary zodat
   de kaart niet hoger wordt. */
.ww-mkmeer{margin-bottom:3px}
.ww-mkmeer summary{display:flex;align-items:center;min-height:44px;padding:0}

/* --- 11. Bevindingen van anti-ai-design, 25-09-2026 --------------------
   "De gekleurde kaartrand in de merkkleur is terug, in twee gloednieuwe
   componenten": een salie bovenrand van 2px op zes kaarten. Dat is
   de tell uit Anti-AI-design-tells paragraaf 2, en die is verboden op elk
   project, aan welke kant dan ook. De rand van .ww-v3snel is hierboven al
   uit de regel gehaald; die van de hero-kaarten staat in laag-1.39 en wordt
   hier uitgezet. Het onderscheid komt van het donkere vlak, de icoontegel
   en de hover, niet van een streep over de volle kaartbreedte. Het salie
   streepje achter "Bekijk de modellen" volgt nu currentColor, gelijk aan de
   doelgroepkaarten op de homepage. */
.ww-v3usp article{border-top:0}

/* De bevestigde tagline van Daniel staat weer als tweede regel in de hero.
   Zelfde maat als de lead, iets zwaarder, zoals hij voor de omzetting stond. */
.ww-v3slogan{font-weight:500;margin-top:14px}

/* Tijdlijn zonder iconen, voor Installatie en Projectmanagement. Daar
   bestaat voor de stappen nog geen glyph, en op deze site betekent een glyph
   sitebreed precies een ding; liever een stip op de rail dan een icoon dat
   er een tweede betekenis bij krijgt. */
.ww-v3tijd-kaal .knoop{background:transparent}
.ww-v3tijd-kaal .knoop::after{content:"";width:13px;height:13px;background:var(--ww-mid);
  display:block}
.ww-v2sec-dark .ww-v3tijd-kaal .knoop,.ww-v3sec-dark .ww-v3tijd-kaal .knoop{background:transparent}
.ww-v2sec-dark .ww-v3tijd-kaal .knoop::after,.ww-v3sec-dark .ww-v3tijd-kaal .knoop::after{
  background:var(--ww-sage)}
@media (min-width:900px){.ww-v3tijd-3{grid-template-columns:repeat(3,1fr)}}

/* --- 12. Uitsnede van de hero op Werkwijze -----------------------------
   Sitebreed snijdt de hero veel harder verticaal dan de oude beeldkolom:
   het bronbeeld is 1241x640 en het vak 1905x507, dus er is nog circa 52
   procent van de hoogte in beeld in plaats van bijna alles. Op Werkwijze
   viel die band precies op de rompen van de gasten, zonder hoofden. Met een
   hoger ankerpunt staan de gezichten weer in beeld.
   Let op: dit repareert de UITSNEDE, niet de beeldkeuze. Een foto van
   gasten in bad hoort inhoudelijk niet op een pagina over storings-
   afhandeling; dat staat als open punt bij Mitch. */
.ww-v3hero-hoog .ww-v3hero-beeld img{object-position:center 22%}

/* --- 13. Snelverwijzing in verschillende groottes ----------------------
   `anti-ai-design` over de eerste versie: "geen sterk design, het is een
   standaard kaartenrij. Drie a-blokken van exact 374x417 px, identiek van
   opbouw." Zijn alternatief, door Mitch op 25-09-2026 gekozen: "laat de
   drie kaarten verschillen in grootte in plaats van in inhoud."

   Spa's en hot tubs is met zes modellen de grootste categorie en de eerste
   die een parkbeheerder zoekt; die krijgt de hele linkerkolom. Houtgestookt
   en sauna's staan er rechts gestapeld naast. De grootte zegt daarmee iets
   over het aanbod en is geen decoratie.

   De beeldrij van de grote kaart staat op 1fr en niet op een vaste maat:
   zijn hoogte ligt vast doordat hij twee rijen overspant, dus 1fr is hier
   wel bepaald. Bij de twee kleine kaarten blijft de rij vast, want daar
   zou 1fr zich weer aan de natuurlijke fotohoogte optrekken. */
@media (min-width:760px){
  .ww-v3snel{grid-template-columns:1.35fr 1fr}
  .ww-v3snel a:first-child{grid-row:1 / span 2;grid-template-rows:1fr auto;
    padding:30px 34px}
  .ww-v3snel a:first-child h3{font-size:clamp(25px,2.2vw,34px)}
  .ww-v3snel a:first-child p{font-size:15.5px;max-width:42ch;margin-bottom:20px}
  .ww-v3snel a:first-child .ga{font-size:15px}
}
/* De productfoto's zijn uitsnedes van 359 tot 614px breed. In het grote vak
   van de spa-kaart (936x662 gemeten) rekt object-fit:contain die tot 1,8
   keer op. Daarom hier een eigen begrenzing en centrering: de foto wordt
   hooguit 700px breed, wat voor een uitsnede op donker nog scherp oogt. */
@media (min-width:760px){
  .ww-v3snel a:first-child .beeld{display:grid;place-items:center}
  .ww-v3snel a:first-child img{width:auto;height:auto;
    max-width:min(100%,700px);max-height:100%}
}

/* --- 14. Kaartlinks binnen .ww-content-body ---------------------------
   Dezelfde val als bij de telefoonregel in de hero: een kaart die in zijn
   geheel een <a> is, valt op elke page.php-pagina onder
   `.ww-content-body a:not(.ww-btn):not(...)` (0,6,0) en krijgt daar een
   onderstreping en donkergroene tekst van. Gemeten op /aanbod/: drie
   onderstreepte snelverwijskaarten met `color: rgb(30,41,37)`. De inline
   link in de introtekst hoort wel onderstreept te blijven, dus dit wordt
   per component uitgezet en niet in het algemeen. */
.ww-content-body .ww-v3snel a:not(.ww-btn):not(.ww-btn-p):not(.ww-btn-o):not(.ww-btn-l):not(.ww-btn-d){
  color:#fff;text-decoration:none}
.ww-content-body .ww-v3kaarten a:not(.ww-btn):not(.ww-btn-p):not(.ww-btn-o):not(.ww-btn-l):not(.ww-btn-d){
  color:var(--ww-dark);text-decoration:none}

/* ==========================================================================
   Sectieontwerpen, gekozen door Mitch op 25-09-2026 uit het canvas
   "Sectieontwerpen Wellness Works": intro typografisch, specificaties als
   beeldband met cijfers, afsluiting donker en samengevoegd. Plus het ritme
   per paginatype, dat hij aan mij liet.
   ========================================================================== */

/* --- 15. Kop en intro -------------------------------------------------
   Was twee kolommen platte tekst van gelijk gewicht, het zwakste blok van
   elke landingspagina. Nu een echte hierarchie: kop en kernzin links op
   leesmaat, de toelichting in een smallere kolom ernaast, en eronder drie
   feiten op een haarlijnrij. Elk feit komt letterlijk uit de tekst van die
   pagina zelf; er staat niets nieuws. */
.ww-v3intro{display:grid;gap:clamp(26px,3.2vw,54px);max-width:1080px}
@media (min-width:900px){
  .ww-v3intro{grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:start}
}
/* Op Vakantieparken en Lodges staat de hele bronalinea in de lead, dus er is
   geen zijkolom. Zonder deze regel bleef de tweede kolom leeg. */
.ww-v3intro:not(:has(.naast)){grid-template-columns:minmax(0,1fr)}
.ww-v3intro h2{font-size:clamp(27px,3vw,36px);line-height:1.12;letter-spacing:-.018em;
  font-weight:500;margin:0 0 18px;max-width:21ch;text-wrap:balance}
.ww-v2 .ww-v3intro .lead{font-size:clamp(16.5px,1.1vw,19px);line-height:1.56;
  color:var(--ww-dark);margin:0;max-width:58ch}
.ww-v2 .ww-v3intro .naast p{font-size:14.5px;line-height:1.66;
  color:rgba(30,41,37,.78);margin:0 0 13px}
.ww-v2 .ww-v3intro .naast p:last-child{margin-bottom:0}
@media (min-width:900px){
  .ww-v3intro .naast{padding-left:28px;border-left:1px solid var(--ww-mist)}
}
/* De grensuitspraak onder de intro. Dit was een rij van drie feitencellen,
   maar geen van de vierentwintig cellen bevatte een getal en ze vatten steeds
   de alinea erboven samen: de feitenstrook-tell voor de vierde keer onder een
   nieuwe klassenaam. Nu twee uitspraken in lopende tekst, en wel de twee die
   volgens het klantdossier op elke pagina expliciet horen te staan: waar
   Wellness Works wel en niet aan werkt, en wat het park zelf blijft doen.
   Twee kolommen, geen cellen, geen cijferopmaak. */
.ww-v3grens{margin-top:clamp(28px,3.2vw,46px);padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--ww-mist);display:grid;gap:clamp(16px,2.4vw,44px)}
@media (min-width:820px){.ww-v3grens{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ww-v2 .ww-v3grens p{font-size:15px;line-height:1.62;color:rgba(30,41,37,.86);
  margin:0;max-width:52ch}
.ww-v2sec-dark .ww-v3grens{border-top-color:rgba(167,178,168,.34)}
.ww-v2 .ww-v2sec-dark .ww-v3grens p{color:rgba(242,242,239,.86)}

/* --- 16. Specificaties als beeldband met cijfers ----------------------
   Alleen waar in elke cel een echt getal staat. Op Installatie is dat zo:
   de stroomvraag per model. Cijferopmaak zonder cijfers is bij deze klant
   al drie keer afgekeurd, dus dit component wordt nergens anders gebruikt. */
.ww-v3band figure{margin:0;height:clamp(300px,29vw,450px);
  overflow:hidden;background:var(--ww-dark)}
.ww-v3band figure img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.ww-v3band-tx{display:grid;gap:clamp(20px,2.8vw,54px);align-items:center}
@media (min-width:900px){
  .ww-v3band-tx{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
}
.ww-v3band h2{font-size:clamp(25px,2.5vw,31px);line-height:1.14;letter-spacing:-.018em;
  font-weight:500;margin:0;text-wrap:balance}
.ww-v2 .ww-v3band-tx p{font-size:15.5px;line-height:1.66;color:rgba(30,41,37,.8);margin:0 0 12px}
.ww-v2 .ww-v3band-tx p:last-child{margin-bottom:0}
.ww-v3waarden{display:grid;gap:1px;background:var(--ww-mist);margin-top:clamp(26px,3vw,42px)}
@media (min-width:760px){.ww-v3waarden{grid-template-columns:repeat(3,1fr)}}
.ww-v3waarden div{background:#fff;padding:22px 24px 6px}
@media (min-width:760px){
  .ww-v3waarden div:first-child{padding-left:0}
  .ww-v3waarden div:last-child{padding-right:0}
}
.ww-v3band-tx h2{margin:0 0 16px}
.ww-v3band .ww-v2spec-kop{margin:clamp(26px,2.8vw,40px) 0 12px;font-size:12.5px;
  font-weight:600;letter-spacing:.01em;color:var(--ww-mid)}
.ww-v3band .ww-v3waarden{margin-top:0}
.ww-v3waarden b{display:block;font-size:clamp(21px,1.9vw,27px);font-weight:500;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:0 0 6px;color:var(--ww-dark)}
.ww-v2 .ww-v3waarden span{display:block;font-size:13.5px;line-height:1.5;color:rgba(30,41,37,.76)}
.ww-v2 .ww-v3bron{font-size:12.5px;line-height:1.55;color:rgba(30,41,37,.72);
  margin:clamp(18px,2vw,26px) 0 0}

/* --- 17. Afsluiting en verder lezen samengevoegd ----------------------
   Waren twee losse secties achter elkaar, op tien pagina's. Nu een donkere
   sectie: de uitnodiging links, de vervolglinks rechts. Dat scheelt een
   sjabloonsectie per pagina en de pagina eindigt op de merkkleur. */
.ww-v3slot{display:grid;gap:clamp(30px,3.6vw,64px)}
@media (min-width:900px){
  .ww-v3slot{grid-template-columns:minmax(0,430px) minmax(0,1fr);align-items:start}
}
.ww-v3slot h2{font-size:clamp(25px,2.4vw,30px);line-height:1.14;letter-spacing:-.018em;
  font-weight:500;margin:0 0 14px;color:#fff;text-wrap:balance}
.ww-v2 .ww-v3slot .tx p{font-size:15px;line-height:1.62;color:rgba(242,242,239,.82);
  margin:0;max-width:52ch}
.ww-v3slot .ww-v3acts{margin-top:22px}
.ww-v3slot .ww-btn-p,.ww-v3slot .ww-btn-o{background:var(--ww-warm);color:var(--ww-dark);
  border-color:var(--ww-warm)}
.ww-v3slot .ww-btn-p:hover,.ww-v3slot .ww-btn-o:hover{background:#fff;color:var(--ww-dark)}
.ww-v3slot .lijst{display:flex;flex-direction:column;max-width:880px}
.ww-v3slot .lijst > .kop{font-size:clamp(18px,1.5vw,21px);font-weight:500;
  letter-spacing:-.012em;color:#fff;margin:0 0 16px}
.ww-v3slot .lijst a{display:flex;align-items:center;gap:14px;min-height:58px;padding:11px 0;
  border-top:1px solid rgba(167,178,168,.34);text-decoration:none;
  transition:padding-left .22s,color .22s}
.ww-v3slot .lijst a:last-child{border-bottom:1px solid rgba(167,178,168,.34)}
.ww-v3slot .lijst a:hover{padding-left:10px}
.ww-v3slot .lijst svg{width:18px;height:18px;flex:none;color:var(--ww-sage)}
.ww-v3slot .lijst .tx2{flex:1 1 auto;min-width:0}
.ww-v3slot .lijst b{display:block;font-size:16px;font-weight:600;color:#fff}
.ww-v3slot .lijst em{display:block;font-style:normal;font-size:13px;line-height:1.5;
  color:rgba(242,242,239,.74);margin-top:3px}
.ww-v3slot .lijst .pijl{flex:none;font-size:17px;color:var(--ww-sage);line-height:1}
.ww-v3slot .lijst a:hover b{color:var(--ww-sage)}
/* dezelfde specificiteitsval als bij de hero en de snelverwijzing */
.ww-content-body .ww-v3slot a:not(.ww-btn):not(.ww-btn-p):not(.ww-btn-o):not(.ww-btn-l):not(.ww-btn-d){
  color:#fff;text-decoration:none}


/* --- 19. De drie doelgroepen op de homepage --------------------------
   Eerst een vierde kaartenrij met een icoon, toen brede rijen onder elkaar.
   Mitch, 25-09: "alleen deze sectie op de homepage wil ik nog wel echt naast
   elkaar krijgen, nu teveel witruimte horizontaal voor die sectie". Dus weer
   drie naast elkaar, maar met de foto van die doelgroep in plaats van een
   icoon en zonder kaartvlak of rand, zodat het geen vierde icoonkaartrij is. */
.ww-v3rijen{display:grid;gap:clamp(22px,2.6vw,40px)}
@media (min-width:820px){.ww-v3rijen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ww-v3rijen a{display:flex;flex-direction:column;text-decoration:none;
  transition:transform .22s}
.ww-v3rijen a:hover{transform:translateY(-3px)}
.ww-v3rijen figure{margin:0 0 16px;width:100%;aspect-ratio:3/2;overflow:hidden;
  background:var(--ww-mist)}
.ww-v3rijen figure img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.ww-v3rijen .tx2{min-width:0;display:flex;flex-direction:column;flex:1 1 auto}
.ww-v3rijen h3{font-size:clamp(18px,1.4vw,21px);font-weight:600;margin:0 0 7px;
  letter-spacing:-.012em}
.ww-v2 .ww-v3rijen p{font-size:14.5px;line-height:1.6;color:rgba(30,41,37,.76);margin:0}
.ww-v3rijen .ga{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:14px;font-weight:600;color:var(--ww-mid)}
.ww-v3rijen a:hover .ga{gap:11px}
.ww-v3rijen a:hover h3{color:var(--ww-mid)}

/* ==========================================================================
   Versie 1.65, 02-10-2026: aanbodronde, Safari/iOS-fixes en de splitbeeldmarge.
   ========================================================================== */

/* --- 15. Categorieblok op Aanbod: sfeerfoto in plaats van product op zwart --
   Mitch, 02-10-2026: "blok is nice, maar kan iets kleiner dat het in een scherm
   past en de afbeelding kan echt veel beter - nu lelijke afbeelding met weinig
   feeling". De opzet van de tegels blijft (donkere tegel, beeld boven, tekst
   eronder, grote spa-tegel links); het beeld is nu een sfeerfoto tot de rand
   van de tegel, en de beeldrij is lager, zodat header plus blok op 1440x900 in
   een scherm passen. De mix-blend-mode van de productuitsnedes moet weg: op een
   foto bleekt hij alles uit. */
.ww-v3snel a{grid-template-rows:clamp(128px,11vw,200px) auto;gap:0;padding:0}
.ww-v3snel a:hover,.ww-v3snel a:focus-visible{transform:translateY(-2px)}
.ww-v3snel .beeld{background:#18211D}
.ww-v3snel img{object-fit:cover;object-position:center 55%;mix-blend-mode:normal}
.ww-v3snel a:hover img,.ww-v3snel a:focus-visible img{transform:scale(1.03)}
.ww-v3snel .tx{padding:18px 22px 20px}
.ww-v3snel p{margin-bottom:12px}
.ww-v3snel a[href="#hout"] img{object-position:center 72%}
.ww-v3snel a[href="#sauna"] img{object-position:center 52%}
@media (min-width:760px){
  .ww-v3snel a:first-child{padding:0;grid-template-rows:1fr auto}
  .ww-v3snel a:first-child .beeld{display:block}
  .ww-v3snel a:first-child img{width:100%;height:100%;max-width:none;max-height:none;
    object-position:center 62%}
  .ww-v3snel a:first-child .tx{padding:24px 30px 26px}
  .ww-v3snel a:first-child p{margin-bottom:16px}
}

/* --- 16. Modelkaarten: product groot op een lichte ondergrond ---------------
   Mitch, 02-10-2026: "kaarten opzet is super nice maar op deze manier zijn de
   werkelijke producten gewoon slecht zichtbaar (...) die zwarte achtergrond dan
   met het product ziet er beetje goedkoop uit." De kaart blijft: beeld links,
   gegevens rechts, knop onderaan. Het zwarte vlak is weg; de productbeelden
   zijn vrijstaand (v3, zonder zwart in het bestand) en tot de rand van het
   product bijgesneden. De marge komt hier vandaan, voor elke kaart dezelfde,
   zodat de reeks gelijk gekadreerd is. Spa's liggen breed en krijgen een vak
   van 4:3, de houtgestookte kuipen en sauna's staan rechtop en houden 1:1.
   Vanaf 1200px twee kaarten per rij met het beeld op de helft van de kaart;
   drie per rij liet het product op 1920px op 216px breedte staan. */
.ww-mkfig{background:var(--ww-warm);border-bottom:0;padding:0;overflow:hidden}
.ww-mkfig[data-bg="licht"]{background:var(--ww-warm)}
.ww-mkfig img{top:0;left:0;transform:none;width:100%;height:100%;max-width:none;
  max-height:none;padding:6%;box-sizing:border-box;object-fit:contain;object-position:center;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.ww-mkfig-foto img{padding:0;object-fit:cover}
.ww-kgroup[data-cat="spa"] .ww-mkfig{aspect-ratio:4/3}
.ww-mk:hover{transform:translateY(-2px);border-color:rgba(30,41,37,.18)}
.ww-mk:hover .ww-mkfig img{transform:scale(1.03)}
@media (min-width:1200px){
  .ww-kgroup[data-cat="spa"] .ww-mkfig{aspect-ratio:auto}
  .ww-mkfig{width:50%}
  .ww-mkbody{width:50%;padding:22px 24px 24px}
}
@media (min-width:1500px){
  .ww-mks{grid-template-columns:1fr 1fr}
  .ww-mkfig{width:50%}
  .ww-mkbody{width:50%;padding:24px 28px 26px}
}

/* --- 17. Safari en iOS --------------------------------------------------------
   1. Invoervelden onder 16px laten iOS Safari inzoomen zodra het veld focus
      krijgt. 2. Safari kent hyphens alleen met het -webkit-voorvoegsel; de
      drie regels uit .ww-v2hero h1 hieronder herhaald met de prefix, in
      dezelfde volgorde, zodat de cascade gelijk blijft. 3. Hetzelfde voor
      backdrop-filter op de USP-kaarten. */
.ww-frmwrap input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]):not([type=file]),
.ww-frmwrap select,.ww-frmwrap textarea{font-size:16px}
@media (max-width:719px){.ww-v2hero h1{-webkit-hyphens:auto}}
@media (min-width:720px){.ww-v2hero h1{-webkit-hyphens:manual}}
@media (min-width:1024px) and (max-width:1259px){.ww-v2hero h1{-webkit-hyphens:auto}}
.ww-v3usp article{-webkit-backdrop-filter:blur(2px)}

/* --- 18. Splitbeeld zakte 20px ---------------------------------------------
   .ww-content-body img{margin:20px 0} gaf ook het absoluut geplaatste beeld in
   .ww-v2fig een marge: bovenin kwam 20px van de donkere figuurachtergrond bloot
   en onderaan viel 20px beeld weg (pagina 15, 18, 19, 20 en 21). De vulfoto in
   een placeholder (.ww-ph.ww-photo) erft dezelfde marge. */
.ww-v2fig img,.ww-content-body .ww-v2fig img,
.ww-ph.ww-photo img,.ww-content-body .ww-ph.ww-photo img{margin:0}

/* --- 19. Correctie op 15 en 16, versie 1.66 (02-10-2026) --------------------
   Gemeten na 1.65: in de houtsectie (.ww-sec-paper, achtergrond #F2F2EF) had
   het beeldvak dezelfde kleur als de sectie, waardoor de linkerhelft van elke
   kaart wegviel en het product los op de pagina leek te staan. Op een papieren
   sectie is het beeldvak daarom wit. Daarnaast een iets hogere beeldrij in de
   categorietegels: 1.65 liet op 1440x900 nog 58px ruimte over. */
.ww-sec-paper .ww-mkfig,.ww-sec-paper .ww-mkfig[data-bg="licht"]{background:#fff}
.ww-v3snel a{grid-template-rows:clamp(128px,12vw,210px) auto}

/* ==========================================================================
   Versie 1.67 (02-10-2026): correctieronde na de controlepoorten
   ========================================================================== */

/* --- 20. Keuzepills in het formulier: tikdoel 44px ------------------------
   paginacontroleur, 02-10-2026: de pills "Op het park", "Digitaal" en "Eerst
   telefonisch" waren op 390px 40px hoog. De pillregel hierboven (0,3,1) zet
   40px; Formidable wint op drie klassen, dus deze regel is vier klassen diep
   (formulierstandaard in Bouwstandaard.md). Geldt ook voor de donkere variant
   onder .ww-contact op de homepage. */
.ww-frmwrap .frm_forms .frm_opt_container .frm_radio label{min-height:44px}

/* --- 21. Specificaties op de modelkaart: waarde onder het label als het niet
   past ----------------------------------------------------------------------
   paginacontroleur, 02-10-2026: op /aanbod/ braken op 1440px 25 van de 101
   regels in ul.ww-mkspecs, steeds in de waarde (b). De gegevenskolom smaller
   maken voor het beeld kon niet zonder het productbeeld te verkleinen. Daarom:
   past label plus waarde niet op een regel, dan schuift de hele waarde naar
   een eigen regel onder het label, rechts uitgelijnd zoals de andere
   waarden. Het beeld blijft zoals het was. */
.ww-mkspecs li{flex-wrap:wrap;row-gap:2px}
.ww-mkspecs li b{margin-left:auto}

/* --- 22. Categorieblok op brede schermen: groeit niet meer mee ------------
   anti-ai-design, 02-10-2026: de grote spa-tegel nam de hoogte van zijn foto
   aan (1536x1024), dus het raster groeide met de schermbreedte mee (888px op
   1920, 1133px op 2560). De foto staat nu buiten de stroom en vult zijn vak;
   de hoogte van het raster volgt de twee kleine tegels, waarvan de beeldrij al
   op 210px is begrensd. Op 1440 bepaalden de kleine tegels de hoogte al, dus
   daar verandert niets; onder 760px geldt dit niet. */
@media (min-width:760px){
  .ww-v3snel a:first-child .beeld{position:relative;min-height:0}
  .ww-v3snel a:first-child img{position:absolute;inset:0}
}

/* --- 23. "Bekijk de modellen": chevron in plaats van een lijntje ----------
   anti-ai-design, 02-10-2026: het lijntje van 18x1px achter de tekst las op
   het scherm als een em-dash. Nu een chevron in salie, die bij hover iets
   opschuift in plaats van langer te worden. */
.ww-v3snel .ga::after{content:"\203A";width:auto;height:auto;background:none;
  color:var(--ww-sage);font-size:1.3em;line-height:1;font-weight:500;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.ww-v3snel a:hover .ga::after,.ww-v3snel a:focus-visible .ga::after{width:auto;transform:translateX(4px)}

/* --- 24. "Meer over dit model +": ruimte voor het plusteken ----------------
   De summary is flex (44px-tikdoel), en in een flexcontainer valt de spatie
   aan het begin van content:" +" weg. Daarom een vaste marge. */
.ww-mkmeer summary::after{margin-left:4px}

/* --- 25. Specificaties: inspringing van de lijst weg (versie 1.68) ----------
   Gemeten na 1.67: .ww-mkspecs{padding:0} (0,1,0) verloor van de lijstregel
   .ww-content-body ul (0,1,1), waardoor elke specificatielijst 22px links
   inspringde. Die 22px gingen van de gegevenskolom af en veroorzaakten een
   deel van de afgebroken regels. Zonder de inspringing: op 1440px 15 in
   plaats van 25 regels over twee regels, 6 in plaats van 10 afgebroken
   waarden; het productbeeld blijft 318px breed. */
.ww-content-body .ww-mkspecs{padding-left:0}

/* ==========================================================================
   Versie 1.69 (02-10-2026): slotronde na de controlepoorten
   ========================================================================== */

/* --- 26. Vrijstaande sauna's op wit: helemaal in beeld (versie 1.69) --------
   anti-ai-design, 02-10-2026: Coziness en Igloo werden rond 1280px tot de helft
   afgesneden. Oorzaak: object-fit:cover van .ww-mkfig-foto in een staand vak
   (gemeten 281x562 op 1280). Beide zijn nu vrijstaande uitsnedes op wit (v4, uit
   de brochure met het masker), dus ze krijgen dezelfde behandeling als de
   vrijstaande spa's: contain met 6 procent marge, op een wit vlak zodat de
   witte ondergrond van het bestand niet als blok in een warm vak staat.
   Specificiteit: het vak met data-bg="licht" kreeg var(--ww-warm) via
   .ww-mkfig[data-bg="licht"] (0,2,0); deze regel is (0,3,0). De img-regel staat
   er ook onder .ww-content-body, zodat .ww-content-body img (0,1,1) er nooit
   tussen komt. ww-mkfig-foto komt alleen op 138 voor (Coziness en Igloo). */
.ww-mkfig.ww-mkfig-foto,.ww-mkfig.ww-mkfig-foto[data-bg="licht"]{background:#fff}
.ww-mkfig-foto img,.ww-content-body .ww-mkfig-foto img{padding:6%;object-fit:contain}

/* --- 27. Specificaties: waarde op een eigen regel staat links (versie 1.69) --
   anti-ai-design, 02-10-2026: schoof de waarde onder het label, dan stond hij
   rechts uitgelijnd (margin-left:auto uit 1.67) en over twee regels rafelig.
   Nu groeit het label en duwt het de waarde naar rechts zolang ze op een regel
   passen; breekt de waarde af, dan staat hij alleen op zijn regel, zonder auto-
   marge, dus links, en loopt zijn tekst links uitgelijnd door. Geen breekpunt
   of vaste breedte nodig, dus het werkt bij elke kaartbreedte. Gemeten in de
   iframe op 1280: 27 waarden op een eigen regel, alle 27 links op 0px. */
.ww-mkspecs li span,.ww-content-body .ww-mkspecs li span{flex:1 0 auto}
.ww-mkspecs li b,.ww-content-body .ww-mkspecs li b{margin-left:0;text-align:left}

/* ==========================================================================
   Versie 1.70 (02-10-2026): mobielronde na de WebKit-test
   Bron: webkit-test-2026-10-02.md, punt 1 tot en met 4. Alle vier gingen in
   WebKit en Chromium hetzelfde mis, dus ook in Chrome en op Android.
   ========================================================================== */

/* --- 28. Open mobiel menu past in het scherm (versie 1.70) -----------------
   De header is sticky zonder hoogtegrens. Met Diensten en Voor wie open was
   hij 983px op 375x667 en 921px op 390x664, en bleven Werkwijze, Responstijden,
   Over ons en "Plan een kennismaking" daar onbereikbaar (de pagina scrollt
   eronder door, het menu niet). Nu wordt de kop met het open menu een raster
   van twee rijen, begrensd op de zichtbare schermhoogte: bovenin merk en
   menuknop, die blijven staan zodat het menu altijd te sluiten is, en
   daaronder het menu als eigen scrollvak. Zonder JavaScript.
   max-height: vh als terugval, dan svh (zichtbare hoogte met de balken van
   Safari), dan dvh. De 1px is de onderrand van .ww-head. */
@media (max-width:1023px){
  .ww-mtog:checked ~ .ww-head-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto minmax(0,1fr);align-items:center;column-gap:18px;row-gap:18px;
    max-height:calc(100vh - 1px);max-height:calc(100svh - 1px);max-height:calc(100dvh - 1px)}
  .ww-mtog:checked ~ .ww-head-in .ww-nav{grid-column:1 / -1;align-self:stretch;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* --- 29. Header onder 390px in een rij (versie 1.70) -----------------------
   Op 375px en smaller viel de menuknop onder het logo: merk 219 plus tussen-
   ruimte 18 plus knop 104 is 341px, er is 335px (375) of 320px (360). De
   header werd 138px in plaats van 76px, de hele tijd, op een scherm van 667.
   Onder 390px: tussenruimte 10px en een smallere knop (94px, nog steeds 49px
   hoog). Onder 375px ook de merknaam 22px, dezelfde maat als tussen 1024 en
   1259px; het beeldmerk blijft 26px hoog. Rekensom: 375 geeft 219+10+94=323
   van 335, 360 geeft 203+10+94=307 van 320. */
@media (max-width:389px){
  .ww-head-in{gap:10px}
  .ww-mtog:checked ~ .ww-head-in{column-gap:10px}
  .ww-burger{padding:13px 14px;gap:8px}
}
@media (max-width:374px){
  .ww-brand{font-size:22px}
}
/* De hero-hoogte rekent met de headerhoogte (--kop, zie "Header plus hero
   vullen samen precies de eerste schermhoogte"). Die was 138 omdat de header
   op 375 twee rijen had; onder 390 is hij nu 76. */
@media (max-width:389px){.ww-v3hero{--kop:76px}}

/* --- 30. Filterchips op Aanbod binnen beeld (versie 1.70) ------------------
   De chiprij van Sauna's (Alle sauna's, Buitensauna, Infrarood en hybride) was
   448px breed in een kolom van 335 (375) of 350 (390): "Infrarood en hybride"
   liep 93px en 78px buiten beeld en werd afgeknipt. Oorzaak: flex:none, dus de
   rij mocht niet krimpen en zijn eigen flex-wrap brak nooit af. Nu krimpt hij
   tot de kolom en gaan de chips naar een tweede regel. Op iPad en desktop
   verandert er niets: daar past de rij al. */
.ww-v3chips{flex:0 1 auto;min-width:0}

/* --- 31. Cookiebanner: compact op telefoons, knoppen in Montserrat (1.70) ---
   De banner was 431px hoog op 375x667 (65 procent van het scherm), de knoppen
   stonden in het browserlettertype, de links waren 15px hoog en de
   schakelaars 40x20. Geen tekstwijziging: alleen opmaak.
   Waarom in het themabestand en niet in de Complianz-instellingen: de
   proxycache bewaart uploads/complianz/css/banner-1-optin.css 30 dagen onder
   dezelfde naam en levert per Accept-Encoding een eigen kopie. Gemeten
   02-10-2026: de gzip-kopie, die elke browser krijgt, is nog die van 25-09
   (Age 613112) met de blauwe standaardknoppen #3B29FF; alleen een verzoek
   zonder compressie krijgt de versie met de merkkleuren. Daarom staan de
   merkkleuren van 02-10 hier ook, zodat ze met dit nieuwe pad wel aankomen.
   #cmplz-cookiebanner-container ervoor (1,1,0) wint van elke Complianz-regel,
   ongeacht de laadvolgorde. */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  --cmplz_banner_border_color:#D9DCDB;--cmplz_text_color:#1E2925;
  --cmplz_hyperlink_color:#41534A;--cmplz_button_border_radius:8px 8px 8px 8px;
  --cmplz_button_accept_background_color:#1E2925;--cmplz_button_accept_border_color:#1E2925;
  --cmplz_button_accept_text_color:#fff;
  --cmplz_button_deny_background_color:#1E2925;--cmplz_button_deny_border_color:#1E2925;
  --cmplz_button_deny_text_color:#fff;
  --cmplz_button_settings_background_color:#F2F2EF;--cmplz_button_settings_border_color:#D9DCDB;
  --cmplz_button_settings_text_color:#1E2925;
  --cmplz_slider_active_color:#41534A;--cmplz_slider_inactive_color:#A7B2A8;
  font-family:inherit}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn{font-family:inherit;font-weight:600}
/* Links minstens 24px hoog (WCAG 2.5.8): 15px regel plus 5px boven en onder. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link{display:inline-block;
  padding:5px 0;line-height:15px}
/* Schakelaars: het tikvlak is het onzichtbare invoerveld (40x20). Groter en
   gecentreerd over de schakelaar (44x28); het zichtbare bolletje blijft gelijk. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox{
  width:44px;height:28px;left:-2px;margin-top:-14px}
@media (max-width:768px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{padding:12px 16px;grid-row-gap:8px;row-gap:8px;
    max-height:calc(100vh - 8px);max-height:calc(100svh - 8px)}
  /* Kop (op mobiel alleen het sluitkruis) naar de rechterbovenhoek, uit de stroom. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header{position:absolute;top:4px;right:4px;
    display:block;margin:0}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-logo,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title{display:none}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close{width:40px;height:40px;
    display:flex;align-items:center;justify-content:center}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg{width:16px;height:16px}
  /* Complianz zet de focus bij openen op het kruis; de focusring valt binnen het vak,
     anders knipt de rand van de banner hem af. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible{outline-offset:-4px}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider{display:none}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{min-width:0}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message{width:auto;margin:0}
  /* Ruimte voor het sluitkruis alleen naast de eerste regels, niet langs de hele tekst. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message::before{content:"";float:right;
    width:30px;height:26px}
  /* De drie knoppen op een rij en even breed, dus Accepteren en Weigeren even zwaar.
     Een label dat niet op een regel past ("Bekijk voorkeuren") loopt binnen de knop
     door naar een tweede regel; de knop blijft 44px hoog. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{flex-direction:row;flex-wrap:nowrap;gap:8px}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{flex:1 1 0;min-width:0;
    width:auto;min-height:44px;height:auto;padding:5px 6px;font-size:13.5px;line-height:1.2;
    white-space:normal;overflow-wrap:normal}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-documents ul{
    justify-content:flex-start;gap:18px}
}

/* ==========================================================================
   Versie 1.71 (02-10-2026): vervolg op de mobielronde
   ========================================================================== */

/* --- 32. Filter op Aanbod verbergt de kaarten echt (versie 1.71) ---------
   Het chipscript op 138 zet hidden op de kaarten die niet passen, maar
   .ww-mk{display:flex} (0,1,0) won van de [hidden]-regel van de browser:
   gemeten 02-10-2026 bleven de drie cabinekaarten bij "Buitensauna" gewoon
   staan (hidden=true, display:flex, 886px hoog). Deze regel is (0,3,0) en
   staat ook onder .ww-content-body, zodat geen kaartregel er tussen komt. */
.ww-mks .ww-mk[hidden],.ww-content-body .ww-mk[hidden]{display:none}

/* --- 33. --kop gelijk aan de header tot 768px (versie 1.71) -----------------
   Sinds 1.70 is de header op elke telefoon 76px hoog (vanaf 360px), maar
   --kop stond tussen 390 en 767px nog op 138px. Nu overal onder 768px 76px,
   gelijk aan de band 768 tot 1023. Gemeten in de andere banden: 126px tussen
   1024 en 1259 (header 126) en 135px vanaf 1260 (header 135) kloppen al. */
@media (max-width:767px){.ww-v3hero{--kop:76px}}

/* ==========================================================================
   Versie 1.72 (02-10-2026): restpunten uit anti-ai-design
   ========================================================================== */

/* --- 31b. Cookiebanner, voorkeurenpaneel in de merkkleuren (versie 1.72) ---
   Hoort bij sectie 31. Na "Bekijk voorkeuren" stonden nog twee standaardkleuren
   van Complianz: "Altijd actief" in rgb(0,128,0) en de categorierijen in
   rgba(239,239,239,.5). Nu "Altijd actief" in middengroen #41534A en de rijen
   in warm wit #F2F2EF, hetzelfde vlak als de knop Voorkeuren: rustig naast de
   donkergroene knoppen, zonder extra lijnen in een al vol paneel. */
#cmplz-cookiebanner-container .cmplz-cookiebanner{--cmplz_category_header_always_active_color:#41534A}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active{
  color:#41534A}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category{background-color:#F2F2EF}

/* --- 34. Open telefoonmenu: focus en tik zonder afgesneden rand (versie 1.72) ---
   Sinds 1.70 is .ww-nav in het open telefoonmenu een scrollvak
   (overflow-y:auto). De sitebrede focusring (:focus-visible, 2px op 4px
   afstand) viel daardoor links en rechts buiten het vak en werd afgesneden.
   Binnen het open menu ligt de ring nu 2px naar binnen.
   Daarnaast bleek de groene balk links naast "Hotels en resorts" op de
   schermafdruk van 1.70 geen focusring maar de hoverstand van .ww-sub a
   (3px balk, warm vlak, 2px inspringing): gemeten in Chromium met tikken,
   :hover true, ::before 3px. Op een aanraakscherm blijft die hover na een
   tik staan. Daarom op aanraakschermen onder 1024px geen hoverbalk meer; de
   focusstand voor het toetsenbord blijft. */
@media (max-width:1023px){
  .ww-mtog:checked ~ .ww-head-in .ww-nav a:focus-visible{outline-offset:-2px}
  /* Diensten en Voor wie zijn verborgen checkboxen: de ring stond om een
     onzichtbaar vakje van 25px links van het label, half afgesneden. De ring
     gaat nu om de hele labelrij, binnen het scrollvak. */
  .ww-mtog:checked ~ .ww-head-in .ww-nav .ww-stog:focus-visible{outline:none}
  .ww-mtog:checked ~ .ww-head-in .ww-nav .ww-stog:focus-visible + .ww-slab{outline:2px solid var(--ww-mid);
    outline-offset:-2px}
}
@media (max-width:1023px) and (hover:none){
  .ww-sub a:hover:not(:focus-visible){background:none;padding-left:20px}
  .ww-sub a:hover:not(:focus-visible)::before{width:0}
  .ww-sub a:hover:not(:focus-visible) svg{color:var(--ww-mid)}
}

/* --- 34. FAQ: ruimte voor het pijltje (versie 1.73, afrondronde 02-10-2026) ---
   Opleveraudit 02-10-2026: op de homepage liep de vraagtekst op een telefoon
   tegen het pijltje aan (op 360px bij 3 van de 5 vragen, op 390px bij 2).
   Oorzaak: sectie 7 zet de summary op padding:17px 0, maar het pijltje
   (::after) staat sinds de eerste FAQ-regel absoluut rechts (right:4px), dus
   de tekst liep eronder door. De summary houdt rechts 36px vrij, gelijk aan
   AquaVuro. */
.ww-faq summary{padding-right:36px}

/* --- 35. Footerkoppen als h2 (versie 1.74, 03-10-2026) ---
   Controle 03-10-2026: de footerkoppen Diensten, Voor wie en Contact waren
   h3, en op pagina's zonder h2 (bedankpagina, 404) sprong de kopvolgorde
   daardoor van h1 naar h3. footer.php zet ze nu als h2, gelijk aan AquaVuro
   1.43. Deze regel geeft de h2 exact de berekende opmaak van de oude h3:
   sectie 8 (12,5px, 600, salie, marge 0 0 14px) plus de letterafstand van
   de kale h3-regel (-0.01em; een kale h2 krijgt anders -0.018em). Lettertype
   en regelhoogte komen voor h2 en h3 uit dezelfde basisregel. */
.ww-foot-col h2{font-size:12.5px;font-weight:600;color:var(--ww-sage);margin:0 0 14px;letter-spacing:-0.01em}