/* ==========================================================================
   LabelLogisch — publieke website, vormgeving 2026 (artifact "Prototype B v4")

   Bron van waarheid: het claude.ai-artifact 3kZ2wm8VRBtzvbUpyBPbuY
   (lokaal: labellogisch-3.0/website-ontwerp/prototypes-2026-10-09/b-woning.html).
   Deel 1 is de CSS van dat artifact, letterlijk overgenomen. Alleen weg:
   de prototypebalk, de telefoonmodus, de meetpunten en het chatbotvoorbeeld,
   en de 34 px die de prototypebalk boven de sticky kop innam.
   Deel 2 (onderaan) bevat alleen onderdelen die het artifact niet heeft maar
   de echte site wel: foutmeldingen, het honeypotveld, de cookiemelding, de
   juridische teksten en de stappen van de boekingsflow die het artifact
   samenvoegt. Die zijn in dezelfde tokens en dezelfde beeldtaal gebouwd.

   Het partnerportaal (de werkschil) laadt deze stylesheet niet; dat houdt
   voorlopig site.css.

   Lettertypes: zelf gehost onder de SIL Open Font License (zie
   fonts/OFL-*.txt). Bricolage Grotesque in de variabele versie met de
   breedte-as (75–100 %), want de koppen staan op 88–96 % breedte.
   ========================================================================== */

@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-wdth-latin.woff2") format("woff2");font-weight:500 800;font-stretch:75% 100%;font-style:normal;font-display:swap;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:"Source Sans 3";src:url("fonts/source-sans-3-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;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}

/* ── Deel 1: het artifact ─────────────────────────────────────────────────── */

:root{
  color-scheme: light;
  --paper:#ffffff;
  --paper-glass:rgba(255,255,255,.94);
  --mist:#f2f6f3;
  --mist-2:#e4ebe6;
  --line:#d6dfd9;
  --line-2:#b8c7bd;
  --ink:#122019;
  --ink-2:#34443b;
  --ink-3:#5b6b61;
  --green:#14532d;
  --green-2:#166534;
  --green-3:#1f7a45;
  --green-deep:#0d3a20;
  --green-soft:#cfe5d6;
  --green-tint:#ecf5ef;
  --green-line:#2b5c3e;
  --on-green:#eef6f0;
  --on-green-2:#a9c9b3;
  --sticker:#ffd43b;
  --sticker-2:#fff1b8;
  --sticker-ink:#2a2100;
  --star:#c98f00;
  --danger:#b42318;
  --danger-tint:#fdeceb;
  --shade:rgba(18,32,25,.32);
  --shadow-card:0 1px 2px rgba(18,32,25,.06),0 24px 48px -24px var(--shade);
  --shadow-soft:0 1px 2px rgba(18,32,25,.05),0 10px 24px -16px var(--shade);
  --l-a4:#006837; --l-a3:#00823f; --l-a2:#009444; --l-a1:#2bab4a; --l-a:#55b947; --l-b:#a3cd3a;
  --l-c:#d6df24; --l-d:#fff200; --l-e:#fdb913; --l-f:#f26f21; --l-g:#ed1c24;
  --font-display:"Bricolage Grotesque","Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  --font-text:"Source Sans 3",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-photo:6px;
  --r-card:14px;
  --r-btn:10px;
  --maxw:1240px;
  --hdr-h:88px;
}

*,*::before,*::after{box-sizing:border-box}
/* het losse exportbestand heeft geen host-reset: hidden wint altijd van een display-regel */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--green-2);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--green)}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.1;text-wrap:balance;font-optical-sizing:auto;color:inherit}
:focus-visible{outline:2.5px solid var(--green-3);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--sticker)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.i-fill{fill:currentColor;stroke:none}
.star{color:var(--star)}
.nw{white-space:nowrap}


/* prototype-aantekening en voorbeeldcijfers.
   Alles met data-proto bestaat alleen in het prototype. Vóór livegang: .proto-note verwijderen, .tbd uitpakken (de waarde blijft staan, de stippellijn gaat weg). */
.proto-note{font:500 12.5px/1.4 var(--font-ui);color:#4d3d00;border:1px dashed #b38f00;border-radius:6px;padding:6px 9px;background:var(--sticker-2);text-align:left}
.proto-note b{font-weight:700}
.tbd{text-decoration:underline dotted #b38f00;text-decoration-thickness:2px;text-underline-offset:.24em;cursor:help}
.demo-flag{display:inline-flex;align-items:center;font:700 12px/1 var(--font-ui);letter-spacing:.02em;padding:5px 8px;border-radius:4px;background:var(--sticker-2);color:var(--sticker-ink);border:1px dashed #b38f00;white-space:nowrap}
.score-item{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);text-decoration:none;font-size:15.5px;line-height:1.3}
.score-item b{color:var(--ink);font-weight:700}
.score-item:hover{color:var(--green)}
.on-dark .score-item{color:var(--on-green-2)}
.on-dark .score-item b{color:var(--paper)}

/* frame en site */
.site{container:site / inline-size;overflow-x:clip;min-height:100vh;background:var(--paper)}
.wrap{--gutter:32px;width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
@container site (max-width:760px){.wrap{--gutter:16px}}
.page{animation:pagein .28s ease-out}
@keyframes pagein{from{transform:translateY(6px)}to{transform:none}}

/* typografie */
.d1{font-weight:800;font-stretch:88%;font-size:clamp(36px,4.4cqi,62px);line-height:.98;letter-spacing:-.035em}
.d2{font-weight:760;font-stretch:90%;font-size:clamp(29px,3.2cqi,44px);line-height:1.04;letter-spacing:-.03em}
.d3{font-weight:720;font-stretch:92%;font-size:clamp(22px,1.9cqi,27px);line-height:1.12;letter-spacing:-.018em}
.d4{font-weight:700;font-stretch:95%;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.eyebrow{font:700 13px/1.25 var(--font-text);letter-spacing:.09em;text-transform:uppercase;color:var(--green-2)}
.on-dark .eyebrow{color:var(--sticker)}
.lead{font-size:clamp(18px,1.5cqi,21px);line-height:1.5;color:var(--ink-2);max-width:36em}
.muted{color:var(--ink-3)}
.small{font-size:15px;line-height:1.45}
.prose{max-width:40em;color:var(--ink-2)}
.prose > * + *{margin-top:1em}
.prose h2,.prose h3{color:var(--ink);margin-top:1.6em}
@container site (max-width:760px){.eyebrow{font-size:13.5px}.lead{font-size:17.5px}}

/* knoppen en links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--r-btn);border:1.5px solid transparent;font:650 17px/1.1 var(--font-display);font-stretch:96%;letter-spacing:-.005em;text-decoration:none;text-align:center;transition:background-color .15s,border-color .15s,color .15s}
.btn .i{width:20px;height:20px}
.btn-primary{background:var(--green);color:var(--paper)}
.btn-primary:hover{background:var(--green-deep);color:var(--paper)}
.btn-line{border-color:var(--line-2);color:var(--ink);background:var(--paper)}
.btn-line:hover{border-color:var(--green);color:var(--green)}
.btn-sticker{background:var(--sticker);color:var(--sticker-ink)}
.btn-sticker:hover{background:var(--sticker-2);color:var(--sticker-ink)}
.btn-ghost-dark{border-color:var(--green-line);color:var(--on-green);background:transparent}
.btn-ghost-dark:hover{border-color:var(--on-green-2);color:var(--paper)}
.btn-ghost-dark .i{color:var(--sticker)}
.btn-sm{min-height:42px;padding:0 16px;font-size:15.5px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.softlink{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;color:var(--ink-2);text-decoration:none;font-size:16px;line-height:1.3}
.softlink .i{color:var(--green-2)}
.softlink strong{color:var(--green);font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.22em}
.softlink:hover strong{text-decoration-color:var(--green)}
.on-dark .softlink{color:var(--on-green-2)}
.on-dark .softlink .i{color:var(--sticker)}
.on-dark .softlink strong{color:var(--paper);text-decoration-color:var(--on-green-2)}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--green);text-decoration:none}
.arrow-link .i{transition:transform .15s}
.arrow-link:hover{text-decoration:underline}
.arrow-link:hover .i{transform:translateX(3px)}
.on-dark .arrow-link{color:var(--sticker)}
.link-btn{background:none;border:0;padding:6px 0;color:var(--green);font-weight:650;display:inline-flex;align-items:center;gap:6px}
.link-btn:hover{text-decoration:underline}

/* prijs-tag en sticker */
.tag{position:relative;display:inline-flex;align-items:baseline;gap:7px;background:var(--sticker);color:var(--sticker-ink);font:800 20px/1 var(--font-display);font-stretch:90%;letter-spacing:-.02em;padding:9px 14px 9px 24px;clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.tag::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--hole,var(--paper))}
.tag small{font:600 13px/1 var(--font-text);letter-spacing:0}
.tag-lg{font-size:28px;padding:12px 18px 12px 30px}
.sticker{display:inline-flex;align-items:baseline;gap:6px;background:var(--sticker);color:var(--sticker-ink);font:650 14.5px/1.1 var(--font-text);padding:8px 12px 9px;border-radius:4px;transform:rotate(-2.5deg);box-shadow:0 8px 16px -10px var(--shade);white-space:nowrap}
.sticker b{font:800 17px/1 var(--font-display);font-stretch:90%;letter-spacing:-.015em}

/* header */
.hdr{position:sticky;top:0;z-index:60;background:var(--paper-glass);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.hdr .label-band-hdr{height:5px}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:var(--hdr-h)}
.hdr-lp{display:flex;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand:hover{color:var(--ink)}
/* v4.22: logo weer links, alle menu-items op één lijn ernaast, telefoon + knop rechts (hamburger rechts op mobiel) */
.hdr-full{gap:28px}
.hdr-full .nav{min-width:0}
.hdr-actions{flex:none;margin-left:auto}
.hdr-cta{white-space:nowrap;flex:none}
/* echt logo (lllogo-green.png van labellogisch.nl), liggend gezet: monogram + woordbeeld, 2x-resolutie */
.brand-logo{display:block;height:46px;width:auto}
.hdr-full .brand-logo{height:52px}
.ftr-brand .brand-logo{height:42px}
.nav{display:flex;align-items:center;gap:2px}
.nav > a,.dd-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 10px;border-radius:8px;border:0;background:none;color:var(--ink-2);text-decoration:none;font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap}
.nav > a:hover,.dd-btn:hover{color:var(--green);background:var(--green-tint)}
.nav > a[aria-current="page"],.dd-btn.is-current{color:var(--green);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:9px}
/* menupaneel Energielabel: klik of toetsenbord, Escape sluit. hidden moet winnen van display:grid. */
.dd{position:relative}
.dd-btn .i{width:16px;height:16px;transition:transform .15s}
.dd-btn[aria-expanded="true"]{color:var(--green);background:var(--green-tint)}
.dd-btn[aria-expanded="true"] .i{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 14px);left:-18px;width:660px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;z-index:5}
.dd-panel[hidden]{display:none}
.dd-h{display:flex;align-items:center;gap:8px;font:700 12.5px/1 var(--font-text);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:8px 12px 10px}
.dd-h .i{width:17px;height:17px;color:var(--green-2)}
.dd-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:baseline;padding:11px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.dd-item:hover{background:var(--mist);color:var(--ink)}
.dd-item[aria-current="page"]{background:var(--green-tint)}
.dd-item b{font:700 17px/1.2 var(--font-display);font-stretch:94%}
.dd-item .p{font-size:15px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.dd-item .p-ask{color:var(--ink-3);font-weight:600}
.dd-item small{grid-column:1 / -1;color:var(--ink-3);font-size:14.5px;line-height:1.35}
.dd-item.is-main{box-shadow:inset 3px 0 0 var(--green)}
.dd-foot{grid-column:1 / -1;border-top:1px solid var(--line);margin-top:8px;padding:14px 12px 2px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.dd-foot .softlink{font-size:15px}
.hdr-actions{display:flex;align-items:center;gap:16px}
.hdr-tel{display:inline-flex;gap:8px;align-items:center;color:var(--ink);text-decoration:none;font-weight:700;white-space:nowrap}
.hdr-tel .i{color:var(--green-2)}
.hdr-tel:hover{color:var(--green)}
.icon-btn{display:none;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);text-decoration:none}
.icon-btn .i{width:22px;height:22px}
.hdr-call .i{color:var(--green-2)}
.mnav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 30px -24px var(--shade);padding:4px 16px 20px;max-height:calc(100vh - 110px);overflow:auto}
.mnav a:not(.btn){display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:650;font-size:18px}
.mnav a:not(.btn) .i{color:var(--ink-3);width:18px;height:18px}
.mnav a[aria-current="page"]{color:var(--green)}
.mnav-cta{display:grid;gap:10px;margin-top:18px}
/* mobiel menu: twee dienstgroepen met Basis en Detail naast elkaar, daaronder de overige links */
.mnav-h{display:flex;align-items:center;gap:8px;font:700 12.5px/1 var(--font-text);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:18px 2px 10px}
.mnav-h .i{width:17px;height:17px;color:var(--green-2)}
.mnav-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mnav .mnav-svc a{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:17.5px;line-height:1.2}
.mnav .mnav-svc a span{font:600 14.5px/1.25 var(--font-text);color:var(--ink-3)}
.mnav .mnav-svc a.is-main{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.mnav .mnav-svc a.is-main span{color:var(--green)}
.mnav .mnav-svc a[aria-current="page"]{background:var(--green-tint)}
.mnav .proto-note{margin-top:10px}
.mnav-links{margin-top:12px;border-top:1px solid var(--line)}
/* menupaneel Diensten zolang alleen Woning · Basis live is: eén dienst + "Handig vooraf" */
.dd-more a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.dd-more a:hover{background:var(--mist);color:var(--green)}
.dd-more a .i{width:16px;height:16px;color:var(--ink-3)}
.hdr-full .hdr-tel .t{display:none}
@container site (min-width:1480px){.hdr-full .hdr-tel .t{display:inline}}
@container site (max-width:1340px){.hdr-full .hdr-tel{display:none}}
@container site (max-width:1220px){.nav,.hdr-full .hdr-tel{display:none}.icon-btn{display:inline-flex}.hdr-actions{gap:10px}}
@container site (max-width:1220px){.hdr-full{min-height:72px}.hdr-full .brand-logo{height:44px}}
/* onder 761 px staat "Bekijk je prijs" in de onderbalk; in de header past hij dan niet meer naast het logo */
@container site (max-width:760px){.hdr-cta{display:none}}
@container site (max-width:520px){.hdr-in,.hdr-full{min-height:60px}.hdr-full{gap:10px}.brand-logo,.hdr-full .brand-logo{height:36px}.icon-btn{width:44px;height:44px}}

/* secties */
.sec{padding-block:clamp(60px,7.5cqi,112px)}
.sec-tight{padding-block:clamp(44px,5cqi,72px)}
.sec-mist{background:var(--mist)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px 56px;align-items:end;margin-bottom:clamp(28px,4cqi,52px)}
.sec-head > div{display:flex;flex-direction:column;gap:14px;min-width:0}
.sec-head p:not(.eyebrow){color:var(--ink-2)}
@container site (max-width:760px){.sec-head{grid-template-columns:minmax(0,1fr)}}

/* 2 · hero met prijskaart */
.hero{padding-block:clamp(20px,3cqi,44px) clamp(28px,3cqi,40px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(600px,46cqi));grid-template-areas:"text media" "card media" "proof media";grid-template-rows:auto 1fr auto;column-gap:clamp(36px,4.6cqi,72px);row-gap:30px}
.hero-text{grid-area:text;display:flex;flex-direction:column;gap:18px;min-width:0;padding-top:6px}
.hero-h1{font-weight:800;font-stretch:88%;font-size:clamp(40px,4.5cqi,66px);line-height:.98;letter-spacing:-.035em}
.hero-h1 .q{display:block;font-size:.6em;font-weight:700;font-stretch:92%;letter-spacing:-.02em;line-height:1.12;color:var(--ink-2);margin-bottom:.12em}
.hero-h1 .a{display:block}
.hero-h1 em{font-style:normal;color:var(--green-3)}
.hero-sub b{color:var(--ink);font-weight:700}
/* reviews onder de prijskaart ("Bekijk je prijs"), op elke breedte: de Trustoo-scorewidget (Trustoo + Google).
   Zonder toestemming, of als hij niet laadt, staan hier de eigen cijfers. */
.proof{grid-area:proof;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;min-height:44px;margin-top:-8px}
.proof-item{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;line-height:1.2}
.proof-item:hover .proof-n{color:var(--green);text-decoration:underline}
.proof-num{font:800 22px/1 var(--font-display);font-stretch:90%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof-stars{display:inline-flex;gap:1px;color:var(--star)}
.proof-stars .i{width:17px;height:17px}
.proof-box{display:inline-grid;place-items:center;min-width:38px;height:34px;padding:0 6px;border-radius:8px;background:var(--green);color:var(--paper);font:800 18px/1 var(--font-display);font-stretch:90%;font-variant-numeric:tabular-nums}
.proof-txt{display:flex;flex-direction:column;gap:2px}
.proof-txt b{font:700 15px/1.1 var(--font-text)}
.proof-n{font-size:14px;color:var(--ink-3)}
.proof-sep{width:1px;height:30px;background:var(--line)}
.proof-card{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:9px 18px 9px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-soft)}
@container site (max-width:420px){.proof-card{gap:8px 12px;padding:8px 12px}.proof-num{font-size:20px}.proof-stars .i{width:15px;height:15px}}
.proof-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 0;color:var(--green);font:650 15.5px/1.2 var(--font-text)}
.proof-link:hover{text-decoration:underline}
.proof-link .i{width:17px;height:17px}
.hero-sub{font-size:clamp(17px,1.4cqi,20px);line-height:1.5;color:var(--ink-2);max-width:33em}
/* v4.8: foto kleiner, binnen de kolom en niet meer tot de schermrand */
.hero-media{grid-area:media;position:relative;min-height:420px}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:var(--r-photo)}
/* v4.17: desktop toont de hele staande foto; mobiel (16:9) de liggende uitsnede. Op de echte site met <picture> */
.hero-photo-wide{display:none}
.pcard{grid-area:card;align-self:end;position:relative;z-index:3;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:34px 24px 20px;display:flex;flex-direction:column;gap:14px;max-width:620px}
/* twee labels op de rand van de kaart: links de doorlooptijd (sticker), rechts de prijs (prijslabel) */
.pcard .sticker{position:absolute;top:-17px;left:20px}
.pcard .pcard-tag{position:absolute;top:-19px;right:22px;transform:rotate(2deg);box-shadow:0 8px 16px -10px var(--shade)}
.pcard-title{font:760 23px/1.15 var(--font-display);font-stretch:92%;letter-spacing:-.015em}
.pcard-terms{list-style:none;margin:-2px 0 0;padding:0;display:grid;gap:4px;font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.pcard-terms li{display:flex;gap:8px;align-items:flex-start}
.pcard-terms .i{width:16px;height:16px;margin-top:1px;color:var(--green-3);stroke-width:2.6}
.pcard-terms b{color:var(--ink);font-weight:700}
.pcard-fields{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) auto;gap:10px;align-items:end}
.pcard-fields .btn{min-height:50px}
.pcard .softlink{font-size:15.5px}
.pcard-util{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:-4px;font-size:15px;font-weight:600;color:var(--ink-3);text-decoration:none}
.pcard-util span{color:var(--green);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.22em}
.pcard-util .i{width:16px;height:16px;color:var(--green)}
.pcard-util:hover span{text-decoration-color:var(--green)}
.hero-sub .sub-short,.pcard-lead{display:none}
@container site (min-width:901px) and (max-width:1100px){.pcard-fields{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.pcard-fields .btn{grid-column:1 / -1}}
@container site (max-width:900px){
  .hero{padding-block:16px 0}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "media" "card" "proof";grid-template-rows:auto;row-gap:16px}
  .proof{margin-top:2px}
  .hero-text{gap:10px;padding-top:0}
  .hero-media{min-height:0;margin-inline:calc(-1 * var(--gutter));aspect-ratio:16 / 9;max-height:440px}
  .hero-photo{border-radius:0;object-position:50% 34%}
  .hero-photo-tall{display:none}
  .hero-photo-wide{display:block}
  .pcard{margin-top:-56px;max-width:none}
}
@container site (max-width:760px){
  .hero-h1{font-size:clamp(34px,10.6cqi,46px)}
  .hero-h1 .q{font-size:.6em;margin-bottom:.1em}
  .hero-sub{font-size:16.5px;line-height:1.45}
  .hero-sub .sub-long{display:none}
  .hero-sub .sub-short{display:inline}
  .pcard-lead{display:block;font-size:15px;line-height:1.4;color:var(--ink-3);margin:12px 0 -2px}
  .hero-media{aspect-ratio:2 / 1}
  .pcard{padding:28px 16px 12px;gap:8px}
  .pcard .sticker{left:12px;top:-15px;font-size:13.5px;padding:7px 10px 8px}
  .pcard .sticker b{font-size:15.5px}
  .pcard .pcard-tag{right:12px;top:-17px;font-size:17px;padding:8px 12px 8px 22px}
  .pcard .pcard-tag small{display:none}
  .pcard-title{font-size:20px}
  .pcard-terms{font-size:14px;line-height:1.3;gap:3px;margin-top:0}
  .pcard .softlink{display:none}
  .pcard-fields{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .pcard-fields .btn{grid-column:1 / -1;min-height:52px}
  .pcard .softlink{justify-content:center}
  .pcard-util{display:none}
}
@container site (max-width:372px){.pcard-title{font-size:18.5px}}

/* 3 · vertrouwensstrook (v4: compacter, sterkere argumenten; de prijs eerst en gemarkeerd) */
.trust{border-block:1px solid var(--line);background:var(--paper)}
.trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.trust-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 10px;align-items:start;padding:12px 16px 12px 0;min-width:0}
.trust-list li + li{padding-left:18px;border-left:1px solid var(--line)}
.trust-list .i{grid-row:span 2;width:20px;height:20px;color:var(--green-2);margin-top:1px}
.trust-list b{font:700 15.5px/1.25 var(--font-display);font-stretch:95%;letter-spacing:-.005em;color:var(--ink)}
.trust-list b mark{background:var(--sticker);color:var(--sticker-ink);padding:0 5px;border-radius:3px;white-space:nowrap}
.trust-list small{font-size:14px;color:var(--ink-3);line-height:1.3}
.trust-scores{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:14px 0 16px;border-top:1px solid var(--line)}
@container site (max-width:1000px){
  .trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-list li:nth-child(3){padding-left:0;border-left:0}
  .trust-list li:nth-child(n+3){border-top:1px solid var(--line)}
}
@container site (max-width:760px){
  .trust{border:0;padding-top:16px}
  .trust-list{gap:8px}
  .trust-list li,.trust-list li + li,.trust-list li:nth-child(n+3){display:flex;flex-direction:row;align-items:flex-start;gap:8px;padding:10px 11px;border:0;background:var(--mist);border-radius:10px}
  .trust-list small{display:none}
  .trust-list b{font-size:14.5px;line-height:1.25}
  .trust-list .i{width:18px;height:18px;margin-top:0}
  .trust-scores{border-top:0;padding:16px 0 0;flex-direction:column;align-items:flex-start;gap:10px}
}

/* diensten die later dit jaar live gaan (Woning · Detail, Utiliteit · Basis en Detail).
   data-later = alleen tonen als die diensten live zijn; data-now = alleen zolang ze dat niet zijn.
   Op de echte site: niet renderen achter een featureflag. In het prototype: knop "Later-diensten" in de balk. */
html:not(.show-later) [data-later]{display:none!important}
html.show-later [data-now]{display:none!important}
html:not(.show-later) .mnav-svc{grid-template-columns:minmax(0,1fr)}
@container site (min-width:761px){
  html:not(.show-later) .svx-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding-top:20px}
  html:not(.show-later) .sv-main{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h dl" "for dl" "price act";column-gap:clamp(28px,3.4cqi,48px);row-gap:18px;padding:36px 32px 28px}
  html:not(.show-later) .sv-main h3{grid-area:h;align-self:start}
  html:not(.show-later) .sv-main .sv-for{grid-area:for}
  html:not(.show-later) .sv-main .sv-dl{grid-area:dl}
  html:not(.show-later) .sv-main .sv-price{grid-area:price}
  html:not(.show-later) .sv-main .sv-act{grid-area:act;align-self:end}
}
.svx-now{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:16px;line-height:1.45}
.svx-now .i{color:var(--green-2);margin-top:3px}
.svx-now a{font-weight:700;color:var(--green);white-space:nowrap}

/* 4 · dienstenmodule. Schakelaar Woning | Utiliteit (role=tablist), per categorie Basis en Detail.
   Woning · Basis is de standaardkeuze: witte kaart met groene rand, label erboven, geel prijslabel en volle knop.
   Utiliteit · Basis: witte kaart met dunne rand en volle knop. Detail: rustige mistkaart met omlijnde knop.
   Op desktop staan de kaartrijen gelijk (subgrid) en staat er één foto naast de module; mobiel geen foto. */
.svx{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,4cqi,56px)}
.svx-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.svx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.svx-tabs{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:5px;border-radius:14px;background:var(--mist-2)}
.svx-tabs [role="tab"]{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font:680 17.5px/1.1 var(--font-display);font-stretch:95%;letter-spacing:-.005em;transition:background-color .15s,color .15s,box-shadow .15s}
.svx-tabs [role="tab"] .i{width:21px;height:21px;color:var(--ink-3)}
.svx-tabs [role="tab"]:hover{color:var(--green)}
.svx-tabs [role="tab"][aria-selected="true"]{background:var(--paper);color:var(--green);box-shadow:var(--shadow-soft)}
.svx-tabs [role="tab"][aria-selected="true"] .i{color:var(--green-2)}
.svx-ctx{font-size:15.5px;line-height:1.35;color:var(--ink-3)}
.svx-ctx b{color:var(--ink-2);font-weight:650}
.svx-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto) auto;column-gap:20px;padding-top:14px}
.sv{grid-row:1 / span 5;display:grid;grid-template-rows:subgrid;row-gap:16px;position:relative;min-width:0;padding:30px 26px 22px;border-radius:16px;background:var(--mist);--hole:var(--mist)}
.sv-main{background:var(--paper);box-shadow:inset 0 0 0 2px var(--green),var(--shadow-card);--hole:var(--paper)}
.sv-firm{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);--hole:var(--paper)}
.sv-flag{position:absolute;left:22px;top:0;transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border-radius:999px;background:var(--green);color:var(--paper);font:700 13.5px/1.1 var(--font-text);letter-spacing:.005em;white-space:nowrap}
.sv-flag .i{width:15px;height:15px;stroke-width:2.8;color:var(--sticker)}
.sv h3{align-self:end}
.sv-for{color:var(--ink-2);font-size:16.5px;line-height:1.45}
.sv-for b{color:var(--ink);font-weight:700}
.sv-for-more{display:block;margin-top:8px;color:var(--ink-3);font-size:15.5px}
.sv-dl{align-self:start;display:grid;border-top:1px solid var(--line)}
.sv-dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--line)}
.sv-dl dt{font-size:15px;color:var(--ink-3);white-space:nowrap}
.sv-dl dd{font-size:15.5px;font-weight:650;color:var(--ink);text-align:right}
.sv-price{align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sv-price .tag{transform:rotate(-2deg);margin-left:2px}
.sv-price-sub{font-size:15px;color:var(--ink-3)}
.sv-ask{font:720 21px/1.15 var(--font-display);font-stretch:92%;letter-spacing:-.01em;color:var(--ink)}
.sv .proto-note{font-size:12px;padding:5px 8px}
.sv-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sv-act .btn{width:100%}
.sv-act .btn-line{background:var(--paper)}
.sv-act .arrow-link{font-size:15.5px;padding-block:4px}
.svx-help{grid-column:1 / -1;grid-row:6;display:flex;gap:10px;align-items:flex-start;margin-top:24px;color:var(--ink-2);font-size:16px;line-height:1.45}
.svx-help .i{color:var(--green-2);margin-top:3px}
.svx-help a{font-weight:700;color:var(--green);white-space:nowrap;text-decoration-color:var(--line-2)}
.svx-help a:hover{text-decoration-color:var(--green)}
.svx-photo{position:relative;margin:0;min-height:100%;border-radius:var(--r-photo);overflow:hidden}
.svx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* v4.18: energielabel in plaats van een foto naast de dienstkaart (HTML/CSS, geen afbeelding) */
.svx-label{display:grid;place-items:center;padding:28px;background:var(--green-tint)}
.elabel{width:100%;max-width:300px;display:grid;gap:14px;padding:18px 18px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 26px 50px -30px rgba(13,58,32,.5);transform:rotate(-1.5deg)}
.elabel-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.elabel-hd span{font:700 12px/1 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.elabel-hd strong{font:800 22px/1 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.elabel-scale{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.elabel-scale li{position:relative;height:21px}
.elabel-scale li>span{display:flex;align-items:center;height:100%;padding-left:8px;font:800 12.5px/1 var(--font-display);color:#fff;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)}
.elabel-scale .lb-b,.elabel-scale .lb-c,.elabel-scale .lb-d,.elabel-scale .lb-e{color:var(--ink)}
.elabel-scale li:nth-child(1)>span{width:30%}.elabel-scale li:nth-child(2)>span{width:34%}.elabel-scale li:nth-child(3)>span{width:38%}.elabel-scale li:nth-child(4)>span{width:42%}
.elabel-scale li:nth-child(5)>span{width:46%}.elabel-scale li:nth-child(6)>span{width:50%}.elabel-scale li:nth-child(7)>span{width:55%}.elabel-scale li:nth-child(8)>span{width:60%}
.elabel-scale li:nth-child(9)>span{width:64%}.elabel-scale li:nth-child(10)>span{width:68%}.elabel-scale li:nth-child(11)>span{width:72%}
.elabel-mark{position:absolute;right:0;top:50%;transform:translateY(-50%);height:30px;min-width:56px;padding-left:12px;display:grid;place-items:center;font:800 18px/1 var(--font-display);color:#fff;background:var(--ink);clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%)}
.elabel-ft{display:flex;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--line);font:600 12.5px/1.3 var(--font-ui);color:var(--ink-2)}
@container site (max-width:1100px){.svx{grid-template-columns:minmax(0,1fr)}.svx-photo{display:none}}
@container site (max-width:760px){
  .svx-main{gap:12px}
  .svx-bar{flex-direction:column;align-items:stretch;gap:10px}
  .svx-tabs{display:grid;width:100%}
  .svx-tabs [role="tab"]{min-height:50px;padding:0 10px;font-size:17px}
  .svx-ctx{font-size:15px}
  .svx-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:30px;padding-top:16px}
  .sv{grid-row:auto;display:flex;flex-direction:column;gap:14px;padding:22px 16px 14px;border-radius:14px}
  .sv > *,.sv h3{align-self:stretch}
  .sv-for-more{display:none}
  .sv-main{padding-top:28px}
  .sv-flag{left:14px;font-size:13px}
  .sv h3{font-size:23px}
  .sv-for{font-size:16px}
  .sv-dl > div{padding:8px 0}
  .sv-price{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .sv-act{gap:4px}
  .sv-act .btn{min-height:52px}
  .sv-act .arrow-link{align-self:center}
  .svx-help{grid-row:auto;margin-top:0;font-size:15.5px}
}

/* 5 · persoonlijk blok */
/* v4.12: compacter; op desktop is de foto even hoog als de tekst (de tekst bepaalt de hoogte) */
.me{background:var(--green-deep);color:var(--on-green);padding-block:clamp(44px,4.4cqi,64px)}
.me-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5cqi,72px);align-items:stretch}
.me-photo{position:relative;min-height:260px}
.me-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;border-radius:var(--r-photo)}
.me-body{display:flex;flex-direction:column;gap:24px;min-width:0}
.me-quote p{font:650 clamp(25px,2.8cqi,40px)/1.18 var(--font-display);font-stretch:92%;letter-spacing:-.02em;color:var(--paper);text-wrap:pretty}
.me-quote p::before{content:"\201C";color:var(--sticker);margin-right:.06em}
.me-quote p::after{content:"\201D";color:var(--sticker);margin-left:.04em}
.me-by{display:flex;align-items:center;gap:14px}
.me-by img{display:none;width:68px;height:84px;object-fit:cover;object-position:50% 20%;border-radius:6px;flex:none}
.me-by b{display:block;font:700 19px/1.2 var(--font-display);color:var(--paper)}
.me-by span{display:block;color:var(--on-green-2);font-size:15.5px;line-height:1.35;margin-top:2px}
.me-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.me-actions .arrow-link{margin-left:10px}
@container site (max-width:760px){
  .me{padding-block:52px}
  .me-grid{grid-template-columns:minmax(0,1fr)}
  .me-photo{display:none}
  .me-body{gap:20px}
  .me-quote p{font-size:23px;line-height:1.22}
  .me-by img{display:block}
  .me-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .me-actions .btn{padding:0 12px}
  .me-actions .arrow-link{grid-column:1 / -1;margin:6px 0 0;justify-self:start}
}

/* 6 · werkwijze-stappen */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.steps::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;background:var(--line)}
.step{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.step-n{width:48px;height:48px;border-radius:50%;background:var(--paper);border:2px solid var(--green);color:var(--green);display:grid;place-items:center;font:800 20px/1 var(--font-display);position:relative;z-index:1}
.step:last-child .step-n{background:var(--green);color:var(--paper)}
.step h3{margin-top:6px}
.step p{color:var(--ink-2)}
.step-time{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:var(--sticker-2);color:var(--sticker-ink);border-radius:999px;padding:6px 12px;font-weight:650;font-size:14.5px;line-height:1.2}
.step-time .i{width:16px;height:16px}
.steps .step-time{margin-top:auto}
.sec-mist .step-n{background:var(--mist)}
.sec-mist .step:last-child .step-n{background:var(--green)}
.steps-more{margin-top:28px}
@container site (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr);gap:22px}
  .steps::before{left:19px;right:auto;top:20px;bottom:24px;width:2px;height:auto}
  .step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:6px}
  .step > :not(.step-n){grid-column:2}
  .step-n{grid-row:1 / span 3;width:40px;height:40px;font-size:17px}
  .step h3{margin-top:8px;font-size:18.5px}
  .step p{font-size:16px;line-height:1.45}
  .step-time{font-size:14.5px;padding:5px 10px}
}

/* 7 · ervaringen */
.reviews{columns:3 300px;column-gap:22px}
.rev{break-inside:avoid;display:flex;flex-direction:column;gap:16px;margin:0 0 22px;padding:24px 24px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card)}
.rev blockquote::before{content:"\201C";display:block;font:800 54px/.75 var(--font-display);color:var(--green-3);height:24px}
.rev blockquote p{font-size:17.5px;line-height:1.55;color:var(--ink)}
.rev figcaption{position:relative;display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-3);line-height:1.25}
.rev .av{width:36px;height:36px;border-radius:50%;background:var(--green-tint);color:var(--green);display:grid;place-items:center;font:800 16px/1 var(--font-display);flex:none}
.rev figcaption b{display:block;color:var(--ink);font-size:16px}
.sec:not(.sec-mist) .rev,.sec-tight:not(.sec-mist) .rev{background:var(--mist);border-color:transparent}
.reviews.two{columns:2 260px}
.rev-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:6px}
.swipe-hint{display:none;align-items:center;gap:8px;font-size:15px;color:var(--ink-3)}
.scores-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
@container site (max-width:760px){
  .reviews,.reviews.two{columns:auto;display:flex;align-items:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter) 14px;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .reviews::-webkit-scrollbar{display:none}
  .reviews .rev{flex:0 0 82%;scroll-snap-align:start;margin:0;padding:20px 18px 16px}
  .rev blockquote p{font-size:16.5px}
  .swipe-hint{display:inline-flex}
  .scores-line{flex-direction:column;align-items:flex-start;gap:8px}
}

/* 8 · vragen op home en accordion */
.faq-home{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5cqi,72px);align-items:start}
.faq-home-side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.faq-home-side p:not(.eyebrow){color:var(--ink-2)}
@container site (max-width:900px){.faq-home{grid-template-columns:minmax(0,1fr)}}
.acc{border-bottom:1px solid var(--line)}
.acc:first-child{border-top:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;cursor:pointer;font:700 19px/1.3 var(--font-display);font-stretch:95%;letter-spacing:-.01em;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--green)}
.acc .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;color:var(--green);transition:transform .2s,background-color .2s}
.acc .pm .i{width:16px;height:16px}
.acc[open] .pm{transform:rotate(45deg);background:var(--green);border-color:var(--green);color:var(--paper)}
.acc-body{padding:0 46px 22px 0;color:var(--ink-2);max-width:64ch;display:flex;flex-direction:column;gap:10px}
@container site (max-width:760px){.acc summary{font-size:17.5px;padding:16px 0}.acc-body{padding-right:0}}

/* 9 · afsluitende cta */
.cta-panel{background:var(--green-deep);color:var(--on-green);border-radius:18px;overflow:hidden}
/* afsluitend blok zonder foto: alles gecentreerd, het formulier in het midden */
.cta-panel-body{padding:clamp(36px,5cqi,76px) clamp(20px,4.6cqi,68px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;min-width:0}
.cta-panel-body .cta-form{width:100%;text-align:left}
.cta-panel-body .cta-lines{justify-content:center}
.cta-panel-body h2{color:var(--paper);max-width:16em}
.cta-panel-body .lead{color:var(--on-green-2);max-width:32em}
.cta-form{display:flex;flex-direction:column;gap:12px;max-width:640px}
.cta-fields{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) auto;gap:10px;align-items:end}
.cta-form .field label{color:var(--on-green-2)}
.cta-form .field input{border-color:transparent}
.cta-form .err{color:#ffb4ab}
.cta-lines{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:16px;padding-top:6px;border-top:1px solid var(--green-line)}
.cta-lines a{display:inline-flex;align-items:center;gap:8px;color:var(--on-green);text-decoration:none;padding-top:10px}
.cta-lines a:hover{color:var(--paper);text-decoration:underline}
.cta-lines .i{color:var(--sticker)}
@container site (max-width:760px){
  .sec-cta{padding-block:0}
  .sec-cta .wrap{padding-inline:0}
  .cta-panel{border-radius:0}
  .cta-panel-body{padding:28px 16px 36px;gap:16px}
  .cta-fields{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .cta-fields .btn{grid-column:1 / -1}
  .cta-lines{flex-direction:column;align-items:center;gap:2px}
}

/* 10 · footer */
.ftr{background:var(--green-deep);color:var(--on-green)}
.label-band{display:flex;height:7px}
.label-band i{flex:1}
.lb-a4{background:var(--l-a4)}.lb-a3{background:var(--l-a3)}.lb-a2{background:var(--l-a2)}.lb-a1{background:var(--l-a1)}.lb-a{background:var(--l-a)}.lb-b{background:var(--l-b)}.lb-c{background:var(--l-c)}.lb-d{background:var(--l-d)}.lb-e{background:var(--l-e)}.lb-f{background:var(--l-f)}.lb-g{background:var(--l-g)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;padding-block:60px 48px}
.ftr a{color:var(--on-green);text-decoration:none}
.ftr a:hover{color:var(--paper);text-decoration:underline}
.ftr h4,.ftr .ftr-kop{font:700 12.5px/1 var(--font-text);text-transform:uppercase;letter-spacing:.1em;color:var(--on-green-2);margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr-brand{display:flex;flex-direction:column;gap:16px}
.ftr-brand .brand{color:var(--paper)}
.ftr-brand p{color:var(--on-green-2);max-width:30em}
.ftr-contact a{display:inline-flex;align-items:center;gap:9px}
.ftr-contact .i{color:var(--sticker)}
.ftr .ftr-cta{align-self:flex-start;margin-top:4px;color:var(--sticker-ink)}
.ftr .ftr-cta:hover{color:var(--sticker-ink);text-decoration:none}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid var(--green-line);padding-block:20px;font-size:14.5px;color:var(--on-green-2)}
.ftr-lp .ftr-base{border-top:0}
@container site (max-width:900px){.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr-brand{grid-column:1 / -1}}
@container site (max-width:760px){.ftr-grid{padding-block:44px 32px;gap:32px 20px}.ftr-base{padding-bottom:100px;flex-direction:column}}
@container site (max-width:560px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-col-wide{grid-column:1 / -1}}
/* mobiel: één compacte linklijst + "Meer"; desktop en tablet houden de kolommen */
.ftr-m{display:none}
@container site (max-width:560px){
  .ftr-grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:36px 24px}
  .ftr-col{display:none}
  .ftr-brand{gap:12px}
  .ftr-m{display:grid;gap:14px;border-top:1px solid var(--green-line);padding-top:20px}
  .ftr-m-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
  .ftr-m-links a{display:block;padding-block:4px;font-weight:600}
  .ftr-more summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--on-green-2);font-weight:600;padding-block:6px;list-style:none}
  .ftr-more summary::-webkit-details-marker{display:none}
  .ftr-more summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
  .ftr-more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .ftr-more ul{gap:8px;padding-top:6px;font-size:15px}
  .ftr-base{gap:4px;font-size:13.5px;padding-top:16px}
}

/* mobiele onderbalk: verborgen zolang een prijskaart in beeld is */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));gap:10px;box-shadow:0 -12px 28px -18px var(--shade);transition:transform .25s ease}
.mbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;border-radius:var(--r-btn);text-decoration:none;font:700 16.5px/1.1 var(--font-display);font-stretch:95%}
.mbar .mb-call{border:1.5px solid var(--line-2);color:var(--ink);background:var(--paper)}
.mbar .mb-call .i{color:var(--green-2)}
.mbar .mb-call small{display:block;font:600 13px/1.1 var(--font-text);color:var(--ink-3)}
.mbar .mb-calc{background:var(--green);color:var(--paper);flex:1.15}
.mbar.is-off{transform:translateY(120%)}
@media (max-width:760px){.mbar{display:flex}}

/* formulieren */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.flabel{font-weight:650;font-size:15px;color:var(--ink-2);line-height:1.3}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--paper);font-size:17px;color:var(--ink)}
.field textarea{min-height:112px;resize:vertical;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-3);box-shadow:0 0 0 3px var(--green-soft)}
.field.invalid input,.field.invalid textarea{border-color:var(--danger);background:var(--danger-tint)}
.err{color:var(--danger);font-size:15px;font-weight:600;line-height:1.35}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .full{grid-column:1 / -1}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2);line-height:1.4;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--green);margin:1px 0 0;flex:none}
.check.invalid{color:var(--danger)}
.form-ok{background:var(--green-tint);border:1px solid var(--green-soft);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.form-ok .ok-check{width:44px;height:44px;border-radius:50%;background:var(--green);color:var(--paper);display:grid;place-items:center}
.form-ok .ok-check .i{width:24px;height:24px;stroke-width:2.4}
@container site (max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}

/* paginakop binnenpagina's */
.phead{padding-block:clamp(36px,5cqi,72px) clamp(28px,3.4cqi,48px);border-bottom:1px solid var(--line)}
.phead-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 56px;align-items:end}
.phead-grid > div{display:flex;flex-direction:column;gap:16px;min-width:0}
.phead-side{align-items:flex-start}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:15px;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
@container site (max-width:760px){.phead-grid{grid-template-columns:minmax(0,1fr)}}

/* tabellen */
.tbl-wrap{overflow-x:auto;min-width:0}
.ptable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ptable caption{text-align:left;font:700 18px/1.25 var(--font-display);font-stretch:95%;padding-bottom:12px;color:var(--ink)}
.ptable th,.ptable td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable th:first-child,.ptable td:first-child{padding-left:0}
.ptable th:last-child,.ptable td:last-child{padding-right:0}
.ptable thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700;border-bottom:1.5px solid var(--ink)}
.ptable .num{text-align:right;white-space:nowrap}
.ptable td.num{font-weight:700;font-size:17.5px}
.ptable tr.hit td{background:var(--sticker-2)}
.ptable tr.hit td:first-child{box-shadow:inset 4px 0 0 var(--sticker);padding-left:12px}
@container site (max-width:420px){.ptable td.num{white-space:normal}}

/* dienstpagina */
.svc-hero{padding-block:clamp(24px,3.6cqi,52px) 0}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4.6cqi,64px);align-items:center}
.svc-hero-text{display:flex;flex-direction:column;gap:20px;min-width:0}
.svc-hero-price{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.svc-hero-photo img{width:100%;aspect-ratio:5 / 4;object-fit:cover;border-radius:var(--r-photo)}
.pos-top{object-position:50% 22%}
.pos-mid{object-position:50% 45%}
.pos-voordeur{object-position:38% 40%}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin-top:clamp(28px,4cqi,48px)}
.facts > div{padding:18px 20px 18px 0;display:flex;flex-direction:column;gap:4px;min-width:0}
.facts > div + div{padding-left:20px;border-left:1px solid var(--line)}
.facts dt{font-size:13.5px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.facts dd{font:720 21px/1.15 var(--font-display);font-stretch:92%;letter-spacing:-.01em}
.svc-body{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5cqi,72px);padding-block:clamp(48px,6cqi,88px)}
.svc-main{display:flex;flex-direction:column;gap:clamp(40px,4.5cqi,60px);min-width:0}
.svc-sec{display:flex;flex-direction:column;gap:18px;min-width:0}
.svc-aside{min-width:0}
.aside-card{position:sticky;top:calc(var(--hdr-h) + 24px);display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--r-card);background:var(--mist);--hole:var(--mist)}
.aside-card hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.mini-dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.mini-dl dt,.mini-dl dd{padding:9px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.mini-dl dt{color:var(--ink-3);padding-right:16px}
.mini-dl dd{text-align:right;font-weight:650}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;color:var(--ink-2)}
.ticks .i{color:var(--green-3);width:22px;height:22px;margin-top:2px;stroke-width:2.2}
.doe{counter-reset:d;list-style:none;padding:0;margin:0;display:grid}
.doe li{counter-increment:d;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.doe li:last-child{border-bottom:1px solid var(--line)}
.doe li::before{content:counter(d);width:32px;height:32px;border-radius:50%;background:var(--green-tint);color:var(--green);display:grid;place-items:center;font:800 15px/1 var(--font-display)}
.klaar{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.klaar li{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border-radius:10px;padding:14px 16px;color:var(--ink-2);line-height:1.4}
.klaar .i{color:var(--green-2);width:20px;height:20px;margin-top:2px}
.cta-rev-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5cqi,72px);align-items:start}
.cta-rev-text{display:flex;flex-direction:column;gap:18px}
.contact-lines{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:16px}
.contact-lines a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);text-decoration:none}
.contact-lines a:hover{color:var(--green)}
.contact-lines .i{color:var(--green-2)}
@container site (max-width:900px){
  .svc-hero-grid,.svc-body,.cta-rev-grid{grid-template-columns:minmax(0,1fr)}
  .svc-hero-photo img{aspect-ratio:4 / 3}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts > div:nth-child(3){padding-left:0;border-left:0}
  .facts > div:nth-child(n+3){border-top:1px solid var(--line)}
  .aside-card{position:static}
}
@container site (max-width:560px){.klaar{grid-template-columns:minmax(0,1fr)}}
/* dienstpagina's zonder vaste prijs: rustig prijsblok "Prijs op aanvraag" in plaats van het gele label */
.pos-right{object-position:72% 50%}
.ask{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--paper);font:720 19px/1.1 var(--font-display);font-stretch:92%;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ask-lg{font-size:24px;padding:11px 18px}
.aside-card .ask{align-self:flex-start}
.svc-hero-price .proto-note{flex-basis:100%}
.facts-note{margin-top:12px;align-self:flex-start;display:inline-block}
.price-ask{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px 24px;border-radius:var(--r-card);background:var(--mist)}
.price-ask p:not(.proto-note){color:var(--ink-2)}
.svc-sib{display:flex;flex-direction:column;gap:6px}

/* calculator en tarieven */
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--mist-2);gap:2px;flex-wrap:wrap}
.seg button{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:9px 18px;border-radius:999px;font:650 15.5px/1.1 var(--font-text);color:var(--ink-2)}
.seg button:hover{color:var(--green)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--green);box-shadow:var(--shadow-soft)}
.calc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);border:1px solid var(--line);border-radius:18px}
.calc-in{padding:clamp(22px,3cqi,36px);background:var(--mist);border-radius:18px 0 0 18px;display:flex;flex-direction:column;gap:20px;min-width:0}
.calc-out{padding:clamp(22px,3cqi,36px);display:flex;flex-direction:column;gap:16px;min-width:0;--hole:var(--paper)}
.m2-row{display:flex;align-items:center;gap:16px}
.m2-row input[type="range"]{flex:1;accent-color:var(--green);min-width:0}
.m2-num{display:flex;align-items:center;gap:8px}
.m2-num input{width:96px;min-height:46px;padding:8px 10px;border:1.5px solid var(--line-2);border-radius:8px;font-size:18px;font-weight:700;text-align:right;background:var(--paper)}
.m2-num input:focus{outline:none;border-color:var(--green-3);box-shadow:0 0 0 3px var(--green-soft)}
.calc-price{font:800 clamp(46px,5cqi,66px)/1 var(--font-display);font-stretch:88%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc-band{font-size:16px;color:var(--ink-3)}
.calc-band b{color:var(--ink)}
.found{display:flex;gap:14px;align-items:flex-start;background:var(--green-tint);border:1px solid var(--green-soft);border-radius:12px;padding:15px 18px;line-height:1.4}
.found > .i{color:var(--green);width:22px;height:22px;margin-top:1px}
.found > div{display:flex;flex-direction:column;gap:8px;min-width:0}
.addr-inline{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.incl{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.incl li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--green-tint);color:var(--green);font-weight:650;font-size:15.5px}
.incl .i{width:18px;height:18px;stroke-width:2.2}
.prices-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,5cqi,72px);align-items:start}
.note-card{background:var(--mist);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:12px}
.note-card p{color:var(--ink-2)}
@container site (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}.calc-in{border-radius:18px 18px 0 0}.prices-grid{grid-template-columns:minmax(0,1fr)}}
/* tarieven: rustig blok met de drie diensten zonder vaste prijs */
.other{list-style:none;margin:0;padding:0 28px;background:var(--paper);border-radius:18px}
.other-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:16px 32px;align-items:center;padding:24px 0;border-top:1px solid var(--line)}
.other-row:first-child{border-top:0}
.other-name{display:flex;flex-direction:column;gap:6px;min-width:0}
.other-name p{color:var(--ink-2);font-size:16px;line-height:1.45}
.other-meta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.other-meta .small{color:var(--ink-3)}
.other-act{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.other-act .btn{width:100%}
@container site (max-width:900px){.other{padding:0 18px}.other-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.other-name{grid-column:1 / -1}}
@container site (max-width:560px){.other{padding:0 16px}.other-row{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 0}.other-act .btn{min-height:52px}.other-act .arrow-link{align-self:center}}
@container site (max-width:480px){.addr-inline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.addr-inline .btn{grid-column:1 / -1}.calc-out .btn{width:100%}}

/* werkwijze-pagina */
.ww-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5cqi,72px);align-items:start}
.ww-photo{position:sticky;top:calc(var(--hdr-h) + 24px)}
.ww-photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover;object-position:62% 50%;border-radius:var(--r-photo)}
.ww-photo figcaption{font-size:15px;color:var(--ink-3);margin-top:10px}
.ww-steps{list-style:none;margin:0;padding:0;display:grid}
.ww-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:28px 0;border-top:1px solid var(--line)}
.ww-step:first-child{border-top:0;padding-top:0}
.ww-step .step-n{width:56px;height:56px;font-size:22px}
.ww-step > div{display:flex;flex-direction:column;gap:10px;min-width:0}
.ww-step p{color:var(--ink-2)}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.checklist label{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:var(--paper);border:1.5px solid var(--line);cursor:pointer;line-height:1.4;color:var(--ink-2);height:100%}
.checklist input{width:20px;height:20px;accent-color:var(--green);flex:none;margin-top:1px}
.checklist label.is-on{border-color:var(--green-3);background:var(--green-tint);color:var(--ink)}
.checklist b{display:block;color:var(--ink)}
.check-count{font:760 22px/1 var(--font-display);font-stretch:92%}
.cta-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5cqi,72px);align-items:center}
.cta-photo img{width:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:50% 45%;border-radius:var(--r-photo)}
.cta-text{display:flex;flex-direction:column;gap:20px;min-width:0}
@container site (max-width:900px){.ww-grid{grid-template-columns:minmax(0,1fr)}.ww-photo{position:static}.ww-photo img{aspect-ratio:16 / 10}}
@container site (max-width:760px){.cta-grid{grid-template-columns:minmax(0,1fr)}.cta-photo img{aspect-ratio:4 / 3}.ww-step{grid-template-columns:44px minmax(0,1fr);gap:16px}.ww-step .step-n{width:44px;height:44px;font-size:18px}}
@container site (max-width:640px){.checklist{grid-template-columns:minmax(0,1fr)}}

/* ervaringen-pagina */
.compare{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4cqi,56px);align-items:center;background:var(--green-deep);color:var(--on-green);border-radius:18px;padding:clamp(24px,4cqi,52px)}
.compare h2{color:var(--paper)}
.compare p{color:var(--on-green-2)}
.compare ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.compare li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;color:var(--on-green)}
.compare li .i{color:var(--sticker);width:22px;height:22px;stroke-width:2.2}
.links-row{display:flex;flex-wrap:wrap;gap:12px 26px}
@container site (max-width:760px){.compare{grid-template-columns:minmax(0,1fr)}}

/* over mij */
.about-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5cqi,72px);align-items:end}
.about-hero img{width:100%;aspect-ratio:4 / 5;object-fit:cover;object-position:50% 20%;border-radius:var(--r-photo)}
.about-hero > div{display:flex;flex-direction:column;gap:18px;min-width:0}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5cqi,72px)}
.data-dl{display:grid;grid-template-columns:auto minmax(0,1fr)}
.data-dl dt,.data-dl dd{padding:12px 0;border-bottom:1px solid var(--line)}
.data-dl dt{color:var(--ink-3);padding-right:24px;font-size:15.5px}
.data-dl dd{font-weight:600;overflow-wrap:anywhere}
@container site (max-width:760px){.about-hero,.two-col{grid-template-columns:minmax(0,1fr)}.about-hero img{max-width:340px}}

/* werkgebied */
.map-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5cqi,64px);align-items:start}
.map{width:100%;height:auto;display:block;background:var(--mist);border-radius:18px;color:var(--ink-3)}
.map .ring{fill:none;stroke:var(--green-3);stroke-dasharray:4 6;stroke-width:1.5;opacity:.55}
.map .zone{fill:var(--green-soft);opacity:.55}
.map .road{fill:none;stroke:var(--paper);stroke-width:5;stroke-linecap:round}
.map .dot{fill:var(--green)}
.map .dot-o{fill:var(--paper);stroke:var(--green);stroke-width:2.5}
.map .home{fill:var(--sticker);stroke:var(--green);stroke-width:3}
.map text{font:600 13px var(--font-text);fill:var(--ink-2)}
.map .t-main{font:800 17px var(--font-display);fill:var(--ink)}
.map .t-big{font:700 14px var(--font-text);fill:var(--ink)}
.map .t-n{font:700 11px var(--font-ui);fill:var(--ink-3);letter-spacing:.1em}
.places{display:flex;flex-direction:column;gap:22px}
.place-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.place-list li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.place-list .i{color:var(--green-2);width:18px;height:18px}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);font-size:15px;color:var(--ink-2);background:var(--paper)}
.legend{font-size:15px;color:var(--ink-3);line-height:1.35}
@container site (max-width:900px){.map-grid{grid-template-columns:minmax(0,1fr)}}

/* plaatspagina */
.place-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5cqi,64px);align-items:center}
.place-hero > div{display:flex;flex-direction:column;gap:20px;min-width:0}
.place-hero img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--r-photo)}
.addr-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-soft);padding:20px;display:flex;flex-direction:column;gap:12px;max-width:560px}
.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.answer{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line-2)}
.answer p{color:var(--ink-2)}
.answer .arrow-link{margin-top:auto}
@container site (max-width:900px){.answers{grid-template-columns:minmax(0,1fr);gap:26px}}
@container site (max-width:760px){.place-hero{grid-template-columns:minmax(0,1fr)}.place-hero img{aspect-ratio:4 / 3}}

/* vragen-pagina */
.faq-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5cqi,72px);align-items:start}
.faq-side{position:sticky;top:calc(var(--hdr-h) + 24px);display:flex;flex-direction:column;gap:16px}
.faq-search{position:relative}
.faq-search .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);width:20px;height:20px}
.faq-search input{padding-left:44px}
.faq-group{display:flex;flex-direction:column;gap:6px;margin-bottom:36px}
.faq-group h2{margin-bottom:8px}
.faq-empty{padding:20px;border-radius:12px;background:var(--mist)}
@container site (max-width:900px){.faq-layout{grid-template-columns:minmax(0,1fr)}.faq-side{position:static}}

/* samenwerken */
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink)}
.aud > article{padding:24px 24px 28px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.aud > article + article{padding-left:24px;border-left:1px solid var(--line)}
.aud .i{width:28px;height:28px;color:var(--green-2)}
.aud p{color:var(--ink-2)}
.biz-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5cqi,72px);align-items:start}
.form-card{background:var(--mist);border-radius:18px;padding:clamp(22px,3.4cqi,40px);display:flex;flex-direction:column;gap:18px}
.sec-mist .form-card{background:var(--paper)}
@container site (max-width:900px){.biz-grid{grid-template-columns:minmax(0,1fr)}}
@container site (max-width:760px){.aud{grid-template-columns:minmax(0,1fr)}.aud > article,.aud > article + article{padding:22px 0;border-left:0}.aud > article + article{border-top:1px solid var(--line)}}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5cqi,72px);align-items:start}
.ways{display:grid;gap:12px}
.way{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.way .way-i{width:48px;height:48px;border-radius:50%;background:var(--green-tint);color:var(--green);display:grid;place-items:center;grid-row:span 2}
.way .way-i .i{width:22px;height:22px}
.way b{font:720 20px/1.15 var(--font-display);font-stretch:94%;color:var(--ink)}
.way a.way-val{font-weight:650;color:var(--green);text-decoration:none;overflow-wrap:anywhere}
.way a.way-val:hover{text-decoration:underline}
.way b,.way a.way-val{grid-column:2}
.way .copy{grid-column:3;grid-row:1 / span 2;align-self:center}
.copy{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;border:1px solid var(--line-2);background:var(--paper);font-size:14px;font-weight:650;color:var(--ink-2)}
.copy .i{width:16px;height:16px}
.copy:hover{border-color:var(--green);color:var(--green)}
@container site (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@container site (max-width:420px){.way{grid-template-columns:40px minmax(0,1fr)}.way .way-i{width:40px;height:40px}.way .copy{grid-column:2;grid-row:auto;justify-self:start;margin-top:6px}}

/* aanvraagflow */
.flow-page{padding-block:clamp(28px,4cqi,56px) clamp(56px,6cqi,96px)}
.flow-top{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:46em}
.flow-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4cqi,56px);align-items:start}
.stepbar{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.stepbar li{min-width:0}
.stepbar li > *{display:flex;flex-direction:column;gap:8px;width:100%;padding:0;border:0;background:none;text-align:left;color:var(--ink-3);font:650 14px/1.2 var(--font-text)}
.stepbar li > *::before{content:"";display:block;height:5px;border-radius:3px;background:var(--mist-2)}
.stepbar .sb-row{display:flex;align-items:center;gap:7px}
.stepbar .sb-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--mist-2);color:var(--ink-3);font:800 12px/1 var(--font-display);flex:none}
.stepbar .sb-n .i{width:13px;height:13px;stroke-width:2.6}
.stepbar li.done > *::before{background:var(--green-3)}
.stepbar li.done .sb-n{background:var(--green-3);color:var(--paper)}
.stepbar li.cur > *::before{background:var(--green)}
.stepbar li.cur > *{color:var(--ink)}
.stepbar li.cur .sb-n{background:var(--green);color:var(--paper)}
.stepbar button:hover{color:var(--green)}
.flow-panel{display:flex;flex-direction:column;gap:24px;min-width:0}
.flow-h{display:flex;flex-direction:column;gap:8px}
.flow-nav{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;border-top:1px solid var(--line);padding-top:22px;flex-wrap:wrap}
.flow-nav .btn-primary{margin-left:auto}
.addr-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.price-box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 28px;padding:24px 26px;border-radius:var(--r-card);background:var(--green-deep);color:var(--on-green)}
/* v4.23: prijsvak in de groene huisstijl (zoals het blok "Eén adviseur") */
.price-box .pb-k{font:700 13px/1.2 var(--font-text);letter-spacing:.09em;text-transform:uppercase;color:var(--sticker)}
.price-box .price-big{color:var(--paper)}
.price-box .muted{color:var(--on-green-2)}
.price-box .field label{color:var(--on-green)}
.price-box .m2-num span{color:var(--on-green);font-weight:650}
.price-box .m2-num input{border-color:transparent}
.price-big{font:800 56px/1 var(--font-display);font-stretch:88%;letter-spacing:-.03em;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.cal-wrap{display:flex;flex-direction:column;gap:12px}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cal-month{font:720 20px/1.2 var(--font-display);font-stretch:94%;text-transform:capitalize}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding-top:6px}
.cal-dow{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);text-align:center;font-weight:700}
.cal-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 4px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-variant-numeric:tabular-nums;color:var(--ink);min-width:0}
.cal-day .n{font:760 21px/1 var(--font-display)}
.cal-day .m{font-size:12px;color:var(--ink-3)}
.cal-day .dots{display:flex;gap:4px;margin-top:3px}
.cal-day .dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.cal-day .dots i.free{background:var(--green-3)}
.cal-day:hover:not(:disabled){border-color:var(--green-3)}
.cal-day:disabled{background:var(--mist);color:var(--ink-3);cursor:not-allowed;border-color:transparent}
.cal-day:disabled .n{opacity:.55}
.cal-day[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:var(--paper)}
.cal-day[aria-pressed="true"] .m{color:var(--on-green-2)}
.cal-day[aria-pressed="true"] .dots i{background:var(--green-line)}
.cal-day[aria-pressed="true"] .dots i.free{background:var(--sticker)}
.cal-day.first::after{content:"eerste vrij";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--sticker);color:var(--sticker-ink);font:700 11px/1 var(--font-text);padding:3px 6px;border-radius:3px;white-space:nowrap}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.slot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--paper);text-align:left}
.slot b{font:720 18px/1.2 var(--font-display)}
.slot span{color:var(--ink-3);font-size:15px}
.slot em{font-style:normal;font-size:13px;font-weight:700;color:var(--ink-3)}
.slot:hover:not(:disabled){border-color:var(--green-3)}
.slot:disabled{background:var(--mist);border-color:transparent;cursor:not-allowed;color:var(--ink-3)}
.slot[aria-pressed="true"]{border-color:var(--green);background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green)}
.flow-sum .sum-card{position:sticky;top:calc(var(--hdr-h) + 24px);background:var(--mist);border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:16px}
.sum-who{display:flex;align-items:center;gap:12px;line-height:1.3}
.sum-who img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.sum-who b{display:block}
.sum-who span{font-size:15px;color:var(--ink-3)}
.sum-dl{display:grid;grid-template-columns:auto minmax(0,1fr)}
.sum-dl dt,.sum-dl dd{padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.sum-dl dt{color:var(--ink-3);padding-right:16px}
.sum-dl dd{text-align:right;font-weight:650}
.flow-panel .sum-dl dd{text-align:left}
.sum-help{font-size:15px;color:var(--ink-2)}
.done-head{display:flex;gap:18px;align-items:flex-start}
.done-check{width:56px;height:56px;border-radius:50%;background:var(--green);color:var(--paper);display:grid;place-items:center;flex:none}
.done-check .i{width:30px;height:30px;stroke-width:2.4}
.next{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--r-card);background:var(--mist)}
.next-list{margin:0;padding-left:22px;display:grid;gap:10px;color:var(--ink-2)}
.next-list b{color:var(--ink)}
/* v4.19 boekingsflow: spoed, actiecode, prijsregels, tijden */
.flow-terms{margin:0;font-size:15px;gap:6px}
.opt-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 18px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--paper);cursor:pointer}
.opt-card:hover{border-color:var(--green-3)}
.opt-card.is-on{border-color:var(--green);background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green)}
.opt-card input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--green)}
.opt-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.opt-main b{font:720 18px/1.2 var(--font-display)}
.opt-main span{color:var(--ink-2);font-size:16px;line-height:1.4}
.opt-main small{color:var(--ink-3);font-size:14px;line-height:1.4}
.opt-price{font:800 19px/1.2 var(--font-display);white-space:nowrap;color:var(--ink)}
.code-row{display:flex;flex-direction:column;gap:8px}
.code-in{display:flex;gap:10px;max-width:440px}
.code-in input{flex:1;min-width:0;min-height:50px;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--paper);font:600 17px/1.2 var(--font-text);color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.code-in input::placeholder{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3);opacity:.75}
.code-in input:focus{outline:none;border-color:var(--green-3);box-shadow:0 0 0 3px var(--green-soft)}
.code-in.invalid input{border-color:var(--danger);background:var(--danger-tint)}
.code-in .btn{min-height:50px;flex:none}
.code-msg{color:var(--danger);font-size:15px;font-weight:600}
.code-ok{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px;border-radius:10px;background:var(--green-tint);border:1px solid var(--green-soft);color:var(--ink-2);font-size:16px;max-width:560px}
.code-ok > .i{width:18px;height:18px;color:var(--green-3);stroke-width:2.6}
.code-ok span{flex:1;min-width:12em}
.code-ok .link-btn{padding:2px 0;font-size:15px}
.price-lines{margin:0;display:grid;border-top:1px solid var(--line)}
.price-lines > div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px}
.price-lines dt{color:var(--ink-2)}
.price-lines dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-lines .pl-disc dd{color:var(--green-3)}
.price-lines .pl-total{border-bottom:0;padding-top:12px}
.price-lines .pl-total dt{font-weight:700;color:var(--ink)}
.price-lines .pl-total dt span{font-weight:400;color:var(--ink-3);font-size:14.5px;margin-left:6px}
.price-lines .pl-total dd{font:800 22px/1.1 var(--font-display)}
.slots-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.times-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.time{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;padding:8px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--paper);font:720 18px/1.1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.time em{font:600 12.5px/1 var(--font-text);font-style:normal;color:var(--ink-3)}
.time:hover:not(:disabled){border-color:var(--green-3)}
.time:disabled{background:var(--mist);border-color:transparent;color:var(--ink-3);cursor:not-allowed}
.time[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:var(--paper)}
.rush-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;border-radius:10px;background:var(--mist);font-size:15.5px;color:var(--ink-2);line-height:1.4}
.rush-bar > .i{width:20px;height:20px;color:var(--green-3);flex:none}
.rush-bar p{flex:1;min-width:14em;margin:0}
.rush-bar b{color:var(--ink)}
.rush-bar.is-on{background:var(--sticker-2)}
.rush-bar.is-on > .i{color:var(--sticker-ink)}
.rush-bar .link-btn{padding:2px 0}
.sum-terms{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.35}
.sum-terms .i{width:16px;height:16px;margin-top:2px;color:var(--green-3);stroke-width:2.6;flex:none}
/* v4.20: 14 dagen incl. za/zo, terugbeloptie, akkoordzin bij de boekknop, doorschuiven */
.cal-nav{display:flex;justify-content:space-between;gap:12px}
.cal-nav-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--paper);color:var(--ink);font:650 15px/1.1 var(--font-text)}
.cal-nav-btn .i{width:16px;height:16px}
.cal-nav-btn:hover:not(:disabled){border-color:var(--green-3);color:var(--green)}
.cal-nav-btn:disabled{opacity:.4;cursor:not-allowed}
.cal-day.we:disabled{background:var(--paper);border-style:dashed;border-color:var(--line)}
.bel-opt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:14px 18px;border:1.5px dashed var(--line-2);border-radius:12px;color:var(--ink-2);font-size:16px;line-height:1.4}
.bel-opt p{flex:1;min-width:15em;margin:0}
.bel-opt b{color:var(--ink)}
.bel-opt.is-on{border-style:solid;border-color:var(--green);background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green)}
#f4-bel[aria-pressed="true"]{border-color:var(--green);color:var(--green)}
.flow-go{display:flex;flex-direction:column;gap:14px}
.legal-line{font-size:14.5px;line-height:1.45;color:var(--ink-2);margin:0}
#f4-dp,#f4-times,#f4-go,.bel-opt{scroll-margin-top:calc(var(--hdr-h) + 56px)}
@container site (max-width:900px){.flow-grid{grid-template-columns:minmax(0,1fr)}.flow-sum .sum-card{position:static}}
@container site (max-width:640px){
  .flow-top{margin-bottom:20px}
  .flow-top .muted{display:none}
  .stepbar .sb-t{display:none}
  .addr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .addr-grid .field:first-child{grid-column:1 / -1}
  .cal{gap:4px}
  .cal-day{padding:9px 0 7px;border-radius:8px}
  .cal-day .n{font-size:17px}
  .cal-day .m{display:none}
  .cal-day.first::after{content:"1e";padding:1px 5px}
  .cal-nav-btn{font-size:14px;padding:6px 10px}
  .bel-opt .btn{width:100%}
  .flow-go .flow-nav{flex-direction:column-reverse;align-items:stretch}
  .flow-go .flow-nav .btn{width:100%;margin-left:0}
  .flow-nav .btn{flex:1}
  .price-box{padding:18px}
  .price-big{font-size:48px}
  .opt-card{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .opt-price{grid-column:2}
  .slots-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .slots-3 .slot:last-child{grid-column:1 / -1}
  .time{font-size:17px}
}

/* landingspagina Google */
.lp-hero{padding-block:clamp(20px,3cqi,40px) clamp(40px,5cqi,64px);background:linear-gradient(var(--mist),var(--mist)) bottom / 100% 38% no-repeat}
.lp-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4cqi,56px);align-items:start}
.lp-text{display:flex;flex-direction:column;gap:16px;min-width:0}
.lp-price{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-weight:650;color:var(--ink-2)}
.lp-price .i{color:var(--green-2)}
.lp-form{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-card);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.lp-trustline{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--ink-2)}
.lp-trustline span{display:inline-flex;align-items:center;gap:7px}
.lp-trustline .i{color:var(--green-2)}
.lp-photo{position:relative}
.lp-photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover;object-position:34% 50%;border-radius:var(--r-photo)}
.lp-photo figcaption{position:absolute;left:16px;right:16px;bottom:16px;background:var(--paper);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.45}
.lp-photo figcaption span{font-size:15px;color:var(--ink-3)}
.lp-result{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.lp-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-result-grid > div{padding:14px 16px;border-radius:10px;background:var(--mist)}
.lp-result-grid .big{font:800 30px/1.05 var(--font-display);font-stretch:90%;letter-spacing:-.02em;margin-top:4px}
.lp-result-grid .big-2{font:760 20px/1.15 var(--font-display);font-stretch:92%;margin-top:4px}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.why > div{display:flex;flex-direction:column;gap:10px}
.why .i{width:30px;height:30px;color:var(--green-2)}
.why p{color:var(--ink-2)}
@container site (max-width:900px){.lp-grid{grid-template-columns:minmax(0,1fr)}.lp-photo img{aspect-ratio:16 / 10;object-position:40% 32%}.lp-photo figcaption{position:relative;left:auto;right:auto;bottom:auto;margin:-40px 12px 0}.why{grid-template-columns:minmax(0,1fr);gap:24px}.lp-hero{background:none}}

/* landingspagina ChatGPT */
.gpt{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,5cqi,72px);align-items:start;padding-block:clamp(28px,4cqi,64px)}
.gpt-main{display:flex;flex-direction:column;min-width:0}
.gpt-q{display:flex;flex-direction:column;gap:18px;padding-bottom:36px}
.gpt-q .d1{font-size:clamp(34px,4.2cqi,60px)}
.gpt-answer{border-left:4px solid var(--sticker);padding:4px 0 4px 20px;display:flex;flex-direction:column;gap:18px}
.gpt-answer p{font-size:clamp(19px,1.7cqi,23px);line-height:1.45;color:var(--ink)}
.gpt-list{list-style:none;margin:0;padding:0}
.gpt-item{display:flex;flex-direction:column;gap:12px;padding:30px 0;border-top:1px solid var(--line)}
.gpt-item p{color:var(--ink-2);max-width:40em}
.gpt-item .btn,.gpt-item .softlink{align-self:flex-start}
.gpt-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.gpt-chips li{padding:7px 12px;border-radius:8px;background:var(--mist);font-size:15px;font-variant-numeric:tabular-nums}
.gpt-chips b{color:var(--ink)}
.gpt-side{position:sticky;top:calc(var(--hdr-h) + 24px);display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--r-card);background:var(--mist)}
.gpt-side img{width:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:50% 22%;border-radius:var(--r-photo)}
@container site (max-width:900px){.gpt{grid-template-columns:minmax(0,1fr)}.gpt-side{position:static;flex-direction:row;flex-wrap:wrap;align-items:center}.gpt-side img{width:88px;height:88px;border-radius:50%}.gpt-side > div{flex:1;min-width:200px}}

/* over mij v4: feitenband, citaat, vier kenmerken en zelf controleren (beste van de live pagina en B) */
.about-facts{background:var(--green-deep);color:var(--on-green)}
.about-facts-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.about-facts-list li{display:flex;flex-direction:column;gap:2px;padding:20px 20px 20px 0;min-width:0}
.about-facts-list li + li{padding-left:20px;border-left:1px solid var(--green-line)}
.about-facts-list b{font:700 12.5px/1.2 var(--font-text);letter-spacing:.09em;text-transform:uppercase;color:var(--on-green-2)}
.about-facts-list span{font:720 20px/1.2 var(--font-display);font-stretch:92%;color:var(--paper)}
.about-quote{text-align:left}
.about-quote blockquote{display:flex;flex-direction:column;gap:14px;max-width:30em}
.about-quote blockquote p{font:700 clamp(28px,3.4cqi,46px)/1.12 var(--font-display);font-stretch:90%;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.about-quote blockquote p::before{content:"\201C";color:var(--green-3)}
.about-quote blockquote p::after{content:"\201D";color:var(--green-3)}
.about-quote cite{font-style:normal;color:var(--ink-3);font-size:16px}
.traits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.traits li{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-card);background:var(--mist);min-width:0}
.traits .i{width:26px;height:26px;color:var(--green-2)}
.traits p{color:var(--ink-2);font-size:16px;line-height:1.5}
.verify{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.verify a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:650;line-height:1.3}
.verify a:hover{border-color:var(--green);color:var(--green)}
.verify a .i{color:var(--green-2)}
@container site (max-width:900px){.traits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container site (max-width:760px){.about-facts-list{grid-template-columns:repeat(2,minmax(0,1fr))}.about-facts-list li:nth-child(3){padding-left:0;border-left:0}.about-facts-list li:nth-child(n+3){border-top:1px solid var(--green-line)}.about-facts-list li{padding:14px 12px 14px 0}.about-facts-list span{font-size:17.5px}}
@container site (max-width:560px){.traits{grid-template-columns:minmax(0,1fr)}}

/* samenwerken v4: drie werkwijzen, wat vastligt, voor wie (beste van de live pagina en B) */
.wijzen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wijze{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:16px;background:var(--paper);min-width:0}
.wijze-when{color:var(--ink-2);font-size:16.5px;line-height:1.45}
.wijze-dl{display:grid;margin-top:4px;border-top:1px solid var(--line)}
.wijze-dl > div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.wijze-dl dt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.wijze-dl dd{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}
.promises li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1.5px solid var(--ink);min-width:0}
.promises p{color:var(--ink-2);font-size:16px;line-height:1.5}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.roles article{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r-card);background:var(--paper);min-width:0}
.roles p{color:var(--ink-2);font-size:16px;line-height:1.5}
.samen-login{font-size:15px;color:var(--ink-3)}
.samen-seg{align-self:flex-start}
@container site (max-width:1000px){.wijzen{grid-template-columns:minmax(0,1fr)}.promises{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container site (max-width:760px){.roles,.promises{grid-template-columns:minmax(0,1fr)}.promises{gap:20px}.wijze{padding:22px 18px}.wijze-dl > div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* projecten: kaarten als sjabloon (echte opnames aanleveren), daaronder de reviews */
.proj{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.proj-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper);min-width:0}
.proj-card img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
.proj-body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px}
.proj-meta{font-size:14.5px;color:var(--ink-3)}
.proj-body p:not(.proj-meta){color:var(--ink-2);font-size:16px;line-height:1.5}
.proj-dl{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line);font-size:15px}
.proj-dl div{display:flex;gap:6px;align-items:baseline}
.proj-dl dt{color:var(--ink-3)}
.proj-dl dd{font-weight:700}
.proj-note{margin-bottom:18px;display:inline-block}
@container site (max-width:900px){.proj{grid-template-columns:minmax(0,1fr)}.proj-card{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}.proj-card img{height:100%;aspect-ratio:auto}}
@container site (max-width:560px){.proj-card{display:flex}.proj-card img{aspect-ratio:16 / 10}}


.sec-flush{padding-top:0}
.mt-s{margin-top:12px}.mt-m{margin-top:18px}.mt-l{margin-top:28px}.mb-l{margin-bottom:32px}.cta-end{align-items:flex-start}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── Deel 2: wat de echte site extra heeft, in dezelfde beeldtaal ─────────── */

/* De uitklappers zijn <details> (werken zonder JavaScript); ze nemen de stand van de
   knoppen uit het artifact over. */
.dd > summary,.mnav-wrap > summary{list-style:none;cursor:pointer}
.dd > summary::-webkit-details-marker,.mnav-wrap > summary::-webkit-details-marker{display:none}
.dd[open] > .dd-btn{color:var(--green);background:var(--green-tint)}
.dd[open] > .dd-btn .i{transform:rotate(180deg)}
.dd:not([open]) > .dd-panel{display:none}
.mnav-wrap:not([open]) > .mnav{display:none}
.burger .i-dicht{display:none}
.mnav-wrap[open] .burger .i-open{display:none}
.mnav-wrap[open] .burger .i-dicht{display:block}
@container site (max-width:1220px){.mnav-wrap > .burger{display:inline-flex}}
@container site (min-width:1221px){.mnav-wrap{display:none}}

/* Naar de inhoud: alleen zichtbaar bij toetsenbordfocus. */
.skip{position:absolute;left:16px;top:-60px;z-index:400;padding:10px 14px;border-radius:8px;background:var(--green);color:var(--paper);font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:var(--paper)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Het honeypotveld van de formulieren: voor mensen onzichtbaar, voor bots gewoon een veld. */
.hp-veld{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Links die in het artifact een knop waren. */
a.proof-link{text-decoration:none}

/* Een veld met een fout, ook als de server hem markeert. */
.field.has-error input,.field.has-error textarea,.field.has-error select,.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-tint)}
.field-error{color:var(--danger);font-size:15px;font-weight:600;line-height:1.35}
.field-hint{color:var(--ink-3);font-size:15px;line-height:1.4}

/* De cookiemelding: rustig onderaan, twee even grote knoppen. */
.cookiebar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:120;max-width:560px;margin-inline:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:18px 20px}
.cookiebar-text{display:flex;flex-direction:column;gap:14px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.cookiebar-acties{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cookiebar-acties .btn{width:100%}
/* Op een telefoon blijft de melding onderaan (de stand bovenaan geldt pas vanaf 600 px), dus
   compact: dezelfde tekst en twee even grote knoppen naast elkaar, met minder lucht. Zo blijft
   de hoofdknop van de hero op 390 px vrij (pre-live, 2026-10-16). */
@media (max-width:599px){
  .cookiebar{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:12px 14px}
  .cookiebar-text{gap:10px;font-size:14.5px;line-height:1.4}
  .cookiebar-acties{gap:8px}
  .cookiebar-acties .btn{padding-inline:8px;min-height:44px}
}
/* Dekt de melding onderaan een hoofdknop af, dan zet website.js hem bovenaan, onder de kop.
   Alleen vanaf tabletbreedte; op een telefoon blijft hij onderaan. */
@media (min-width:600px){.cookiebar.is-boven{top:calc(var(--hdr-h) + 12px);bottom:auto}}

/* De foutsamenvatting van het contactformulier: het anker waar de browser na een afgekeurde
   verzending naartoe springt. Ruimte voor de vaste kop erboven, en lange tekst breekt af. */
#contact-fout{scroll-margin-top:calc(var(--hdr-h) + 24px);overflow-wrap:anywhere}
#contact-fout:focus{outline:none}

/* De actiebalk van de homepage (alleen als de beheerder een homepageactie aanzet). */
.actiebalk{background:var(--sticker-2);border-bottom:1px solid var(--line)}
.actiebalk-tekst{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-block:12px;font-weight:600;color:var(--sticker-ink)}
.actiebalk-label{transform:rotate(-1.5deg)}
a.link-btn{text-decoration:none}

/* Samenwerken: de schakelaar opdracht/kennismaking als links naar de twee echte formulieren. */
.seg a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font:650 15.5px/1.1 var(--font-text);color:var(--ink-2);text-decoration:none}
.seg a:hover{color:var(--green)}
.seg a.is-aan{background:var(--paper);color:var(--green);box-shadow:var(--shadow-soft)}
.samen-kiezer{gap:22px}
.samen-velden{display:grid;border-top:1px solid var(--line)}
.samen-velden > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.samen-velden dt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.samen-velden dd{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
@container site (max-width:560px){.samen-velden > div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* Boekingsflow: wat de echte flow extra heeft. */
.stepbar-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stepbar a{display:flex;flex-direction:column;gap:8px;width:100%;color:var(--ink-3);text-decoration:none;font:650 14px/1.2 var(--font-text)}
.stepbar a::before{content:"";display:block;height:5px;border-radius:3px;background:var(--green-3)}
.stepbar a:hover{color:var(--green)}
.flow-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--mist);color:var(--ink-2);font-size:15.5px;line-height:1.45;margin-bottom:18px}
.flow-note > .i{width:20px;height:20px;color:var(--green-3);flex:none;margin-top:1px}
.flow-note p{margin:0}
.flow-note b{color:var(--ink)}
.flow-note.is-warn{background:var(--sticker-2)}
.flow-note.is-warn > .i{color:var(--sticker-ink)}
.flow-panel .flow-note{margin-bottom:0}
.field-required{display:none}
.opt-card.is-locked{opacity:.6;cursor:not-allowed}
.price-box .m2-num{flex-wrap:wrap}
.price-box .m2-num input{width:96px;min-height:46px;padding:8px 10px;border:1.5px solid transparent;border-radius:8px;font-size:18px;font-weight:700;text-align:right;background:var(--paper);color:var(--ink)}
.price-box .field-error{color:#ffb4ab}
.code-ok button.link-btn{margin-left:auto}
/* De tijden zijn radioknoppen (name="start"); ze nemen de knopvorm van het artifact over. */
label.time{position:relative;cursor:pointer}
label.time input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
label.time:hover{border-color:var(--green-3)}
label.time:has(input:checked){border-color:var(--green);background:var(--green);color:var(--paper)}
label.time:has(input:focus-visible){outline:2.5px solid var(--green-3);outline-offset:3px}
.tijden-deel{border:0;padding:0;margin:0;min-width:0}
.tijden-deel legend{padding:0;margin-bottom:6px}
.dag-paneel{display:flex;flex-direction:column;gap:14px}
.dag-kop{font:720 18px/1.2 var(--font-display)}
.cal-nav-btn{text-decoration:none}
.cal-nav-btn.is-uit{opacity:.4}
.gekozen-moment{font-size:16px;color:var(--ink-2)}
.gekozen-moment:empty{display:none}
/* De dagdeelregel van de online agenda in één zin, en een gesloten dagdeel dat ook zonder kleur als gesloten leest. */
.moment-regel{margin:0;color:var(--ink-2);font-size:16px;line-height:1.45;max-width:38em}
.slot.is-dicht:disabled{background:transparent;border:1.5px dashed var(--line-2);color:var(--ink-3)}
.slot.is-dicht b{color:var(--ink-3)}
form[data-momentkiezer],#bk-prijs{display:flex;flex-direction:column;gap:24px}
.check a{color:var(--green-2)}

/* Juridische teksten en andere leesdocumenten: de proza van het artifact, met kopjes en lijsten. */
.legal h2{font:720 clamp(22px,1.9cqi,27px)/1.12 var(--font-display);font-stretch:92%;letter-spacing:-.018em;color:var(--ink);margin-top:1.6em}
.legal h3{font:700 19px/1.25 var(--font-display);font-stretch:95%;letter-spacing:-.01em;color:var(--ink)}
.legal ul,.legal ol{padding-left:1.3em;display:grid;gap:6px;margin:0}
.legal .kv-list{display:grid;gap:2px 0;margin:0}
.legal .kv-list dt{font-weight:700;color:var(--ink);margin-top:12px}
.legal .kv-list dd{margin:0}
.legal code{font-size:.92em;background:var(--mist);padding:1px 5px;border-radius:4px}
.legal .btn-row{margin-bottom:8px}
/* de klassen die App\Legal\LegalHtmlRenderer meegeeft (voorwaarden en modelformulier), uit de vorige site.css */
.legal .legal-clause{position:relative;margin:0 0 .9em}
.legal .legal-nr{font-weight:700;color:var(--ink-2)}
@container site (min-width:640px){.legal .legal-clause{padding-left:3.4em}.legal .legal-nr{position:absolute;left:0;top:0}}
.legal .legal-facts,.legal .legal-fields{margin:0 0 1.4em}
.legal .legal-facts dt,.legal .legal-fields dt{color:var(--ink-3);font-size:.92em}
.legal .legal-facts dd,.legal .legal-fields dd{margin:0 0 .6em}
@container site (min-width:640px){.legal .legal-facts{display:grid;grid-template-columns:12em minmax(0,1fr);gap:.25em 1em}.legal .legal-facts dt,.legal .legal-facts dd{margin:0}}
.legal .legal-rule{display:block;height:1.6em;border-bottom:1px solid var(--line)}
.legal .legal-toc{display:block;list-style:none;padding:0;margin:0 0 1.5em;columns:1}
.legal .legal-toc li{margin-bottom:.35em}
@container site (min-width:720px){.legal .legal-toc{columns:2;column-gap:2em}}
.phead-side .verify{width:100%;max-width:360px}
.acc summary .acc-vraag{font:inherit;margin:0}
.acc-body ul,.acc-body ol{padding-left:1.3em;display:grid;gap:6px;margin:0}
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.voorb-zwaarte{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--paper);font-size:13px;font-weight:650;color:var(--green);white-space:nowrap}
.faq-list{display:flex;flex-direction:column}
.opt-card:has(input:checked){border-color:var(--green);background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green)}
.opt-card:has(input:focus-visible){outline:2.5px solid var(--green-3);outline-offset:3px}
.verzoek-keuze{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.verzoek-keuze .opt-card{grid-template-columns:auto minmax(0,1fr)}
.form-card .form-grid .check{grid-column:1 / -1}
.postcheck-status{font-size:15px;color:var(--ink-3)}
.on-dark .postcheck-status{color:var(--on-green-2)}
/* Het woningblok van het opdrachtformulier verschijnt pas bij de keuze "concrete woning"
   (zonder JavaScript, met :has), zoals in de vorige vormgeving. */
.verzoek-form .verzoek-woning{display:none}
.verzoek-form:has(#vz-keuze-woning:checked) .verzoek-woning{display:grid}
.contact-status{display:flex;gap:10px;align-items:flex-start;margin:4px 0 8px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.contact-stip{width:10px;height:10px;border-radius:50%;background:var(--line-2);flex:none;margin-top:6px}
.contact-status.is-open .contact-stip{background:var(--green-3);box-shadow:0 0 0 4px var(--green-soft)}
/* De pagina's achter de beheerlink (afspraak bekijken en annuleren), sinds 2026-10-14 in de
   schil van de website (public/layout.php): één smalle kolom, de opbouw van de flow. */
.beheer{max-width:calc(760px + 2 * var(--gutter))}
.beheer-stapel{display:flex;flex-direction:column;gap:32px}
.beheer-blok{display:flex;flex-direction:column;gap:14px;color:var(--ink-2)}
.beheer-blok .d4{color:var(--ink)}
.beheer-blok .btn-row{margin-top:4px}
.beheer-blok .flow-note{margin-bottom:0}
.beheer-contact > p{margin:0}
.btn-stop{background:var(--danger);color:var(--paper)}
.btn-stop:hover{background:#8f1c13;color:var(--paper)}
.beheer-blok .sum-dl dd{text-align:left}
/* Geen onderbalk achter de beheerlink, dus geen ruimte ervoor onder de voet. */
@container site (max-width:760px){.ftr-beheer .ftr-base{padding-bottom:28px}}
.site:has(> .ftr-beheer){display:flex;flex-direction:column}
.site:has(> .ftr-beheer) > main{flex:1 0 auto}

/* Ontvangst van een aanvraag met agenda: over de volle breedte een bedankje, want de
   aanvraag is af en doorboeken mag maar hoeft niet. Het feestje is klein: het vinkje
   ploft erin en tien snippers springen er één keer vanaf. De snippers staan in rust
   onzichtbaar, dus zonder animatie (minder beweging) is er alleen het vinkje.
   Hun richting staat per :nth-child hieronder; een elfde snipper zou blijven liggen. */
.aanvraag-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3cqi,32px);align-items:start;padding:clamp(24px,4cqi,44px);margin-bottom:clamp(28px,4cqi,44px);border-radius:var(--r-card);background:var(--green-tint);border:1px solid var(--green-soft)}
.ah-tekst{display:flex;flex-direction:column;gap:14px;min-width:0;max-width:54em}
.ah-tekst h1{margin:0}
.ah-tekst h1:focus{outline:none}
.ah-lead{margin:0;font-size:clamp(17px,1.6cqi,19.5px);line-height:1.5;color:var(--ink-2)}
.ah-paden{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:4px}
.ah-paden p{margin:0;flex:1;min-width:16em;color:var(--ink-2);font-size:16px;line-height:1.45}
.ah-paden b{color:var(--ink)}
.ah-check{position:relative;width:64px;height:64px}
.ah-vink{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--paper);display:grid;place-items:center}
.ah-vink .i{width:34px;height:34px;stroke-width:2.6}
.ah-check i{position:absolute;left:28px;top:28px;width:8px;height:8px;border-radius:2px;opacity:0;background:var(--green-3);pointer-events:none}
.ah-check i:nth-child(2){--x:-46px;--y:-38px;--r:-120deg;background:var(--sticker)}
.ah-check i:nth-child(3){--x:-8px;--y:-58px;--r:200deg}
.ah-check i:nth-child(4){--x:34px;--y:-48px;--r:-160deg;background:var(--l-b)}
.ah-check i:nth-child(5){--x:58px;--y:-14px;--r:140deg;background:var(--sticker)}
.ah-check i:nth-child(6){--x:52px;--y:26px;--r:-90deg;background:var(--l-a1)}
.ah-check i:nth-child(7){--x:18px;--y:54px;--r:180deg;background:var(--green)}
.ah-check i:nth-child(8){--x:-26px;--y:50px;--r:-200deg;background:var(--sticker)}
.ah-check i:nth-child(9){--x:-56px;--y:16px;--r:110deg;background:var(--l-b)}
.ah-check i:nth-child(10){--x:-50px;--y:-6px;--r:-70deg;background:var(--l-a1)}
.ah-check i:nth-child(11){--x:4px;--y:-44px;--r:90deg;border-radius:50%}
.ah-check i:nth-child(odd){width:6px;height:10px}
.is-feest .ah-vink{animation:ah-plof .55s cubic-bezier(.3,1.5,.5,1) both}
.is-feest .ah-check i{animation:ah-snipper 1.1s cubic-bezier(.2,.7,.3,1) .25s both}
@keyframes ah-plof{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes ah-snipper{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 18px)) rotate(var(--r))}}
@container site (max-width:640px){
  .aanvraag-hero{grid-template-columns:minmax(0,1fr);padding:22px 18px}
  .ah-check,.ah-vink{width:52px;height:52px}
  .ah-vink .i{width:28px;height:28px}
  .ah-check i{left:22px;top:22px}
  .ah-paden .btn{width:100%;justify-content:center}
}

/* Boekingsflow, ronde vertrouwen en scroll (2026-10-14). */

/* De samenvattingskaart scrolt mee. Hij stond al sticky, maar de kolom eromheen was
   met align-items:start precies zo hoog als de kaart zelf, en dan heeft sticky geen
   ruimte om te bewegen. Nu rekt de kolom mee met de stap. Alleen bij genoeg hoogte:
   een kaart die hoger is dan het venster zou onderaan wegvallen. Onder 900 px staat
   hij gewoon in de stroom (regel hierboven). */
.flow-sum{align-self:stretch}
@media (max-height:620px){.flow-sum .sum-card{position:static}}
.sum-terms{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sum-terms li{display:flex;gap:8px;align-items:flex-start}

/* Stap 1: de gebiedsmelding binnen het boekingsgebied, positief maar rustig. */
.found.is-ok > .i{color:var(--green-3);stroke-width:2.6}

/* Stap 2: het gevonden adres op één regel; de bron staat onder de oppervlakte. */
.found.is-compact{align-items:center;padding:11px 16px}
.found.is-compact > .i{width:20px;height:20px;margin-top:0}
.found.is-compact p{margin:0}
.price-box .pk-bron{margin:6px 0 0;font-size:13.5px;line-height:1.35;color:var(--on-green-2)}

/* Stap 3: het opmerkingenveld is één regel op desktop en twee op een telefoon. Waar de
   browser field-sizing kent, groeit het veld mee met wat er getypt wordt. */
.field textarea#bk-opmerking{min-height:50px;max-height:12em;field-sizing:content}
@container site (max-width:640px){.field textarea#bk-opmerking{min-height:76px}}
.flow-indienen{display:flex;flex-direction:column;gap:10px;margin:0}
.flow-indienen p{margin:0}
.flow-uitleg{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.flow-uitleg b{color:var(--ink)}
.legal-line a[data-juridisch]{color:var(--green-2)}

/* Het venster met de privacyverklaring of de voorwaarden, boven de flow. Een native
   <dialog> met showModal(): Escape, een inerte achtergrond en focus binnen het venster
   doet de browser zelf. Hij hangt aan body, buiten de container .site, dus de
   telefoonstand gaat met een media query. */
.jur-venster{width:min(760px,calc(100vw - 32px));max-height:min(86vh,900px);padding:0;border:0;border-radius:var(--r-card);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-card)}
.jur-venster::backdrop{background:rgba(18,32,25,.55)}
.jur-venster[open]{display:flex;flex-direction:column}
.jur-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);flex:none}
.jur-kop h2{margin:0;font:720 20px/1.2 var(--font-display);font-stretch:94%}
.jur-sluit{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--paper);font:650 15px/1 var(--font-text);color:var(--ink);cursor:pointer}
.jur-sluit:hover{border-color:var(--green-3)}
.jur-sluit:focus-visible{outline:2.5px solid var(--green-3);outline-offset:2px}
.jur-inhoud{overflow-y:auto;padding:20px 22px 28px;overscroll-behavior:contain}
.jur-inhoud:focus{outline:none}
.jur-voet{padding:12px 20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-3);flex:none}
@media (max-width:640px){.jur-venster{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0;border-radius:0}}

/* Controlestap (2026-10-15): de RVO-mededeling als kleine highlight, en de akkoordzin
   direct boven de knop in plaats van een vinkje. */
.rvo-noot{font-size:14.5px;padding:11px 14px;background:var(--green-tint)}
.rvo-noot > .i{width:18px;height:18px}
.akkoordzin{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.akkoordzin a{color:var(--green-2)}

/* Trustoo-widgets (scorewidget en reviewwidget), alleen met PUBLIC_TRUSTOO_ENABLED=true. Zie
   public/assets/trustoo.js: de widget staat in een iframe met een eigen document, en de
   lokale weergave met data-ll-trustoo-terugval blijft staan tot de widget getekend is.
   Pas dan verdwijnt die, zodat dezelfde cijfers en reviews nooit dubbel op de pagina
   staan. Tekent de widget niets, dan komt hij terug (-mislukt).

   De scorewidget staat in de hero, onder de prijskaart. Daar houdt ll-trustoo-ja (toestemming
   bekend) de plek vanaf de eerste weergave vrij op de hoogte van de compacte widget, en
   verbergt het de cijferkaart al, zodat er niets verspringt als de widget binnenkomt. */
.proof.has-trustoo{position:relative}
.ll-trustoo-doel{min-width:0;max-width:100%}
.ll-trustoo-frame{display:block;width:100%;border:0;background:transparent;color-scheme:light}
.ll-trustoo-doel-score{display:none;flex:1 1 100%}
html.ll-trustoo-ja:not(.ll-trustoo-score-mislukt) [data-ll-trustoo-terugval~="score"]{display:none}
html.ll-trustoo-ja:not(.ll-trustoo-score-mislukt) .ll-trustoo-doel-score{display:block;min-height:58px}
html.ll-trustoo-ja:not(.ll-trustoo-score-live) .ll-trustoo-doel-score{visibility:hidden}
html.ll-trustoo-reviews-live [data-ll-trustoo-terugval~="reviews"]{display:none}
html:not(.ll-trustoo-reviews-live) .ll-trustoo-doel-reviews{height:0;overflow:hidden;visibility:hidden;pointer-events:none}
html.ll-trustoo-reviews-live .ll-trustoo-doel-reviews{margin-bottom:18px}
.rev-trustoo{margin:18px 0 0}
/* De Trustoo-chatbot staat vast rechtsonder. Zolang de onderbalk op mobiel zichtbaar is,
   staat hij erboven, anders valt zijn knop over "Bekijk je prijs".
   De teaser ("Vraag, prijsopgave…") is breder dan de knop en viel op 390 px over de
   vertrouwensregels van de prijskaart. Zolang er een prijskaart in beeld is
   (html.ll-pcard-in-beeld, website.js), staat op mobiel alleen de chatknop; de teaser komt
   terug zodra de kaart uit beeld is. De chat opent nooit vanzelf. */
@media (max-width:760px){
  body:has(.mbar:not(.is-off)) .trustoo-chatbot{bottom:calc(86px + env(safe-area-inset-bottom,0px));transition:bottom .25s ease}
  html.ll-pcard-in-beeld .trustoo-chatbot__teaser{display:none}
}