/* Self-hosted fonts (voorheen via Google Fonts <link>). Variabele woff2-bestanden:
   één bestand per subset dekt het volledige gewichtsbereik. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(assets/fonts/dmsans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(assets/fonts/dmsans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --navy:#0a1834;--navy-mid:#14295a;--navy-light:#e9eef7;
  --amber:#c7961e;--amber-bright:#f2b933;--amber-light:#fef3c7;
  --gold-deep:#a87d14;
  --green:#15803d;--green-light:#dcfce7;
  --red:#b91c1c;--red-light:#fee2e2;
  --slate:#475569;--slate-light:#f8fafc;
  --white:#fff;--border:#e2e8f0;
  --shadow:0 4px 20px rgba(12,31,63,.07);
  --shadow-lg:0 16px 48px rgba(12,31,63,.14);
  --shadow-xl:0 32px 80px rgba(12,31,63,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;font-size:16px;color:var(--navy);background:#fff;line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Fraunces',serif;line-height:1.15}

/* SCROLL ANIMATIONS */
.reveal{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}
.reveal-r.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between;transition:all .3s}
nav.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-mark{width:36px;height:36px;background:var(--navy);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;color:#fff;font-size:18px;font-weight:700}
.nav-name{font-family:'Fraunces',serif;font-size:17px;font-weight:700;color:#fff;transition:color .3s}
nav.scrolled .nav-name{color:var(--navy)}
.nav-name span{color:var(--amber-bright)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:rgba(255,255,255,.8);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s}
nav.scrolled .nav-links a{color:var(--slate)}
.nav-links a:hover{color:#fff}
nav.scrolled .nav-links a:hover{color:var(--navy)}
.nav-btn{background:var(--amber-bright);color:var(--navy)!important;padding:10px 22px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;transition:background .2s!important}
.nav-btn:hover{background:#ffca4d!important}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--navy)}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 78% 16%,rgba(242,185,51,.22),transparent 46%),radial-gradient(circle at 10% 88%,rgba(255,255,255,.05),transparent 45%);opacity:1}
.hero-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(12,31,63,.96) 0%,rgba(22,50,96,.88) 60%,rgba(12,31,63,.75) 100%)}
.hero-inner{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:120px 32px 80px;display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:center;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:6px 16px;border-radius:var(--radius-pill);color:rgba(255,255,255,.75);font-size:13px;font-weight:500;margin-bottom:24px}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0}
.hero h1{font-size:clamp(38px,4.6vw,64px);color:#fff;font-weight:900;margin-bottom:20px;letter-spacing:-.025em;line-height:1.04}
.hero h1 em{color:var(--amber-bright);font-style:normal}
.hero-sub{color:rgba(255,255,255,.65);font-size:17px;max-width:500px;line-height:1.75;margin-bottom:36px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.btn-hero{background:var(--amber-bright);color:var(--navy);padding:15px 30px;border-radius:var(--radius-sm);font-size:16px;font-weight:700;text-decoration:none;transition:all .25s;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif}
.btn-hero:hover{background:#ffca4d;transform:translateY(-2px);box-shadow:0 12px 28px rgba(242,185,51,.4)}
.btn-ghost{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.9);padding:15px 26px;border-radius:var(--radius-sm);font-size:16px;font-weight:500;text-decoration:none;transition:all .25s;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:'DM Sans',sans-serif}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.hero-checks{display:flex;flex-direction:column;gap:9px}
.hc{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.6)}
.hc svg{color:#4ade80;flex-shrink:0}

/* HERO CARD */
.hero-card{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-xl)}
.hc-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);margin-bottom:16px}
.hc-boxes{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin-bottom:12px}
.hc-box{border-radius:var(--radius);padding:16px;text-align:center}
.hc-box.b{background:var(--red-light);border:1.5px solid #fca5a5}
.hc-box.a{background:var(--green-light);border:1.5px solid #86efac}
.hc-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.hc-box.b .hc-tag{color:var(--red)}.hc-box.a .hc-tag{color:var(--green)}
.hc-pts{font-family:'Fraunces',serif;font-size:28px;font-weight:900;line-height:1}
.hc-box.b .hc-pts{color:var(--red)}.hc-box.a .hc-pts{color:var(--green)}
.hc-rent{font-size:16px;font-weight:700;color:var(--navy);margin-top:4px}
.hc-sub{font-size:11px;color:var(--slate);margin-top:2px}
.hc-arr{display:flex;align-items:center;justify-content:center;color:var(--slate);font-size:16px}
.hc-footer{background:var(--navy-light);border-radius:var(--radius);padding:13px 16px;display:flex;justify-content:space-between;align-items:center}
.hc-footer-lbl{font-size:13px;font-weight:500;color:var(--navy)}
.hc-footer-val{font-family:'Fraunces',serif;font-size:22px;font-weight:900;color:var(--amber)}
.hc-note{font-size:11px;color:var(--slate);text-align:center;margin-top:10px}

/* STATS */
.stats{background:var(--amber-bright);padding:24px 32px}
.stats-inner{max-width:1160px;margin:0 auto;display:flex;justify-content:space-around;align-items:center;gap:24px;flex-wrap:wrap}
.stat-n{font-family:'Fraunces',serif;font-size:34px;font-weight:900;color:var(--navy);line-height:1}
.stat-l{font-size:13px;color:rgba(10,24,52,.78);margin-top:3px;font-weight:500}

/* SECTIONS */
.section{padding:88px 32px}
.si{max-width:1160px;margin:0 auto}
.tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:10px;display:block}
.title{font-size:clamp(26px,3vw,42px);font-weight:700;color:var(--navy);margin-bottom:14px;letter-spacing:-.01em}
.sub{font-size:17px;color:var(--slate);max-width:560px;line-height:1.75}

/* PHOTO SECTIONS */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:52px}
.photo-wrap{border-radius:var(--radius-lg);overflow:hidden;position:relative}
.photo-wrap img{width:100%;height:400px;object-fit:cover;display:block;transition:transform .5s ease}
.photo-wrap:hover img{transform:scale(1.04)}
.photo-illus{width:100%;height:400px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0c1f3f 0%,#163260 100%)}.photo-illus svg{width:74%;height:auto;opacity:.92}
.photo-badge{position:absolute;bottom:18px;left:18px;background:rgba(12,31,63,.88);backdrop-filter:blur(8px);color:#fff;padding:9px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600}
.feature-list{display:flex;flex-direction:column;gap:20px;margin-top:24px}
.fi{display:flex;gap:14px;align-items:flex-start}
.fi-icon{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.fi-icon.blue{background:var(--navy-light)}.fi-icon.amber{background:var(--amber-light)}.fi-icon.green{background:var(--green-light)}
.fi-title{font-weight:700;color:var(--navy);font-size:15px;margin-bottom:2px}
.fi-text{color:var(--slate);font-size:14px;line-height:1.6}

/* ENERGY TABLE */
.label-table{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.lt-row{display:flex;justify-content:space-between;align-items:center;border-radius:var(--radius);padding:11px 16px}
.lt-row.good{background:var(--green-light)}.lt-row.mid{background:var(--navy-light)}.lt-row.bad{background:var(--red-light)}
.lt-label{font-weight:600;font-size:14px}
.lt-row.good .lt-label{color:var(--green)}.lt-row.mid .lt-label{color:var(--navy)}.lt-row.bad .lt-label{color:var(--red)}
.lt-pts{font-family:'Fraunces',serif;font-size:22px;font-weight:900}
.lt-row.good .lt-pts{color:var(--green)}.lt-row.mid .lt-pts{color:var(--navy)}.lt-row.bad .lt-pts{color:var(--red)}

/* 3 PATHS */
.paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.path-card{border-radius:var(--radius);padding:32px 26px;border:1.5px solid var(--border);background:#fff;transition:all .3s;display:flex;flex-direction:column;position:relative;overflow:hidden}
.path-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.path-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.path-card:hover::after{transform:scaleX(1)}
.path-num{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.path-icon{font-size:34px;margin-bottom:14px}
.path-title{font-family:'Fraunces',serif;font-size:20px;font-weight:700;color:var(--navy);margin-bottom:10px}
.path-desc{font-size:14px;color:var(--slate);line-height:1.7;flex:1}
.path-link{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--amber);text-decoration:none;margin-top:18px;transition:gap .2s}
.path-link:hover{gap:9px}

/* CALCULATOR */
.calc-shell{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-top:52px;border:1px solid var(--border)}
.calc-top{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);padding:34px 44px 28px}
.calc-top h3{font-family:'Fraunces',serif;font-size:24px;color:#fff;margin-bottom:6px}
.calc-top p{color:rgba(255,255,255,.55);font-size:14px}
.cpb{display:flex;gap:4px;margin-top:20px}
.cpb-s{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.15);transition:background .3s}
.cpb-s.on{background:var(--amber)}.cpb-s.done{background:rgba(255,255,255,.45)}
.calc-body{padding:44px}
.sp{display:none}
.sp.on{display:block;animation:fiu .35s ease both}
@keyframes fiu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.full{grid-column:1/-1}
.fl{display:flex;flex-direction:column;gap:5px}
.lbl{font-size:13px;font-weight:600;color:var(--navy)}
.lbl span{font-weight:400;color:var(--slate);margin-left:3px}
.inp{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:15px;font-family:'DM Sans',sans-serif;color:var(--navy);background:#fff;outline:none;width:100%;transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(12,31,63,.07)}
.hint{font-size:12px;color:var(--slate)}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.ri{flex:1;min-width:120px;border:2px solid var(--border);border-radius:var(--radius-sm);padding:13px 14px;cursor:pointer;transition:all .2s;text-align:center;user-select:none}
.ri:hover{border-color:var(--navy-mid)}
.ri.on{border-color:var(--navy);background:var(--navy-light)}
.ri-t{font-size:14px;font-weight:600;color:var(--navy)}
.ri-s{font-size:12px;color:var(--slate);margin-top:2px}
.checks{display:flex;flex-wrap:wrap;gap:7px}
.ci{display:flex;align-items:center;gap:7px;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;cursor:pointer;user-select:none;font-size:14px;color:var(--navy);transition:all .2s}
.ci input[type=checkbox]{accent-color:var(--navy);width:14px;height:14px}
.ci:has(input:checked){border-color:var(--navy);background:var(--navy-light)}
.calc-foot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;margin-top:24px;border-top:1px solid var(--border)}
.btn-back{background:none;border:1.5px solid var(--border);color:var(--slate);padding:11px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.btn-back:hover{border-color:var(--navy);color:var(--navy)}
.btn-next{background:var(--navy);color:#fff;padding:13px 28px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all .2s;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:7px}
.btn-next:hover{background:var(--navy-mid)}
.btn-next.go{background:var(--amber)}.btn-next.go:hover{background:#ffca4d}
.dots{display:flex;gap:5px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:background .2s}
.dot.on{background:var(--amber)}.dot.done{background:var(--navy)}

/* RESULTS */
.rp{display:none}
.rp.open{display:block;animation:fiu .4s ease both}
.res-head{text-align:center;padding:40px 0 32px;border-bottom:1px solid var(--border);margin-bottom:32px}
.res-pts{font-family:'Fraunces',serif;font-size:88px;font-weight:900;line-height:1}
.res-pts.free{color:var(--green)}.res-pts.mid{color:var(--amber)}.res-pts.low{color:var(--red)}
.res-sub{font-size:15px;color:var(--slate);margin:8px 0 14px}
.res-verdict{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:var(--radius-pill);font-size:14px;font-weight:600}
.res-verdict.free{background:var(--green-light);color:var(--green)}
.res-verdict.mid{background:var(--amber-light);color:#92400e}
.res-verdict.low{background:var(--red-light);color:var(--red)}
.res-huur{font-size:13px;color:var(--slate);margin-top:8px}
.bdc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.bdc{border:1.5px solid var(--border);border-radius:var(--radius);padding:20px;overflow:hidden}
.bdc-head{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.bdc-row{display:flex;justify-content:space-between;font-size:13px;color:var(--navy);padding:4px 0;border-bottom:1px solid #f1f5f9}
.bdc-row:last-child{border:none;font-weight:700;padding-top:9px;font-size:14px}
.bdc-pts{font-weight:600}
.woz-cap-note{font-size:11px;color:var(--amber);font-style:italic;margin-top:3px}
.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cta-card{border:2px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;transition:all .25s}
.cta-card:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--shadow)}
.cta-card.feat{border-color:var(--amber);background:#fffbf0}
.cta-icon{font-size:32px;margin-bottom:12px}
.cta-title{font-family:'Fraunces',serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:7px}
.cta-desc{font-size:13px;color:var(--slate);line-height:1.6;margin-bottom:16px}
.btn-s{padding:9px 20px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;text-decoration:none;display:inline-block;transition:all .2s}
.btn-s.amber{background:var(--amber-bright);color:var(--navy);font-weight:700}.btn-s.amber:hover{background:#ffca4d}
.btn-s.navy{background:var(--navy);color:#fff}.btn-s.navy:hover{background:var(--navy-mid)}
.btn-s.out{border:1.5px solid var(--border);color:var(--navy);background:#fff}.btn-s.out:hover{border-color:var(--navy)}
.res-reset{text-align:center;margin-top:20px}

/* ENERGY TOOL */
.etool{background:#fff;border-radius:var(--radius-lg);padding:40px 44px;margin-top:52px;border:1px solid var(--border);box-shadow:var(--shadow)}
.e-inputs{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end;margin-bottom:32px}
.btn-go{background:var(--navy);color:#fff;padding:12px 26px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;white-space:nowrap;transition:background .2s}
.btn-go:hover{background:var(--navy-mid)}
.er{display:none}.er.open{display:block;animation:fiu .4s ease}
.e-journey{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:6px;margin-bottom:24px}
.e-node{min-width:148px;border-radius:var(--radius);padding:20px 16px;text-align:center;border:2px solid var(--border);flex-shrink:0}
.e-node.curr{border-color:var(--amber);background:var(--amber-light)}
.e-node.tgt{border-color:var(--green);background:var(--green-light)}
.e-node.step{background:var(--slate-light)}
.e-conn{display:flex;align-items:center;padding:0 6px;color:var(--slate);font-size:16px;flex-shrink:0}
.e-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.e-node.curr .e-tag{color:var(--amber)}.e-node.tgt .e-tag{color:var(--green)}.e-node.step .e-tag{color:var(--slate)}
.e-lbl{font-family:'Fraunces',serif;font-size:38px;font-weight:900;line-height:1}
.e-node.curr .e-lbl{color:var(--amber)}.e-node.tgt .e-lbl{color:var(--green)}.e-node.step .e-lbl{color:var(--navy)}
.e-pts{font-size:13px;font-weight:600;color:var(--navy);margin:5px 0 3px}
.e-cost{font-size:12px;color:var(--slate)}
.e-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.e-sc{background:var(--slate-light);border-radius:var(--radius);padding:18px;text-align:center}
.e-sv{font-family:'Fraunces',serif;font-size:20px;font-weight:700;color:var(--navy);margin:5px 0}
.e-sl{font-size:12px;color:var(--slate);font-weight:500}
.e-disc{font-size:12px;color:var(--slate);background:var(--amber-light);border-radius:var(--radius-sm);padding:11px 14px;line-height:1.6;border-left:3px solid var(--amber)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:52px}
.ct-t{font-family:'Fraunces',serif;font-size:24px;font-weight:700;margin-bottom:14px}
.ct-p{color:var(--slate);font-size:15px;line-height:1.75;margin-bottom:28px}
.ct-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.ct-icon{width:44px;height:44px;border-radius:var(--radius);background:var(--navy-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ct-il{font-weight:600;font-size:14px;color:var(--navy)}
.ct-iv{font-size:15px;color:var(--slate)}
.ct-tdr{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);border-radius:var(--radius);padding:22px;color:#fff;margin-top:24px}
.ct-tdr-t{font-family:'Fraunces',serif;font-size:15px;margin-bottom:7px}
.ct-tdr-p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.65}
.cf{background:var(--slate-light);border-radius:var(--radius-lg);padding:36px}
.cf-t{font-family:'Fraunces',serif;font-size:20px;font-weight:700;margin-bottom:24px}
.cf-form{display:flex;flex-direction:column;gap:14px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-btn{background:var(--amber-bright);color:var(--navy);padding:15px;border-radius:var(--radius-sm);font-size:16px;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;width:100%;transition:background .2s;margin-top:4px}
.cf-btn:hover{background:#ffca4d}
.cf-ok{display:none;text-align:center;padding:24px}
.cf-ok.open{display:block}
.cf-ok-i{font-size:48px;margin-bottom:12px}
.cf-ok h4{font-family:'Fraunces',serif;font-size:20px;color:var(--navy);margin-bottom:7px}
.cf-ok p{color:var(--slate);font-size:15px}

/* FOOTER */
footer{background:var(--navy);padding:52px 32px 28px}
.fi{max-width:1160px;margin:0 auto}
.ft{display:grid;grid-template-columns:260px 1fr;gap:56px;margin-bottom:44px}
.fb{font-family:'Fraunces',serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:10px}
.fb span{color:var(--amber-bright)}
.ftag{font-size:13px;color:rgba(255,255,255,.4);line-height:1.65;max-width:220px}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.fct{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.fc a{display:block;color:rgba(255,255,255,.4);font-size:14px;text-decoration:none;margin-bottom:9px;transition:color .2s}
.fc a:hover{color:#fff}
.fb-line{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.fc-copy{font-size:12px;color:rgba(255,255,255,.3)}
.fc-disc{font-size:11px;color:rgba(255,255,255,.22);max-width:560px;line-height:1.55}

/* RESPONSIVE */
/* ── TABLET (max 1024px) ── */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px;padding:100px 24px 60px}
  .hero-card{max-width:100%;display:none} /* hero card verbergen op tablet — te krap */
  .photo-grid{grid-template-columns:1fr;gap:32px}
  .photo-grid.reverse{direction:ltr}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .ft{grid-template-columns:1fr;gap:32px}
  .paths-grid{grid-template-columns:1fr 1fr;gap:16px}
  .bdc-grid,.cta-grid,.e-sum{grid-template-columns:1fr}
  .e-inputs{grid-template-columns:1fr 1fr;gap:12px}
  .fcols{grid-template-columns:repeat(3,1fr);gap:24px}
  .section{padding:72px 24px}
  .stats-inner{gap:16px}
  .calc-body{padding:32px 28px}
  .calc-top{padding:28px 28px 22px}
  .etool{padding:28px}
  .cf{padding:28px}
}

/* ── GROTE MOBIEL (max 768px) ── */
@media(max-width:768px){
  .hero-inner{padding:88px 20px 52px}
  .hero h1{font-size:clamp(30px,7vw,44px)}
  .hero-sub{font-size:16px}
  .paths-grid{grid-template-columns:1fr}
  .e-inputs{grid-template-columns:1fr;gap:12px}
  .e-inputs button{width:100%}
  .section{padding:60px 20px}
  .section-title,.title{font-size:clamp(24px,5vw,34px)}
  .stats-inner{flex-direction:column;gap:20px;text-align:center}
  .stat-n{font-size:40px}
  .calc-body{padding:24px 20px}
  .calc-top{padding:24px 20px 18px}
  .etool{padding:24px 20px}
  .cf{padding:24px 20px}
  .fg{grid-template-columns:1fr}
  .full{grid-column:auto}
  .cf-row{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr;gap:20px}
  .bdc-grid{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
  .e-sum{grid-template-columns:1fr}
  .photo-wrap img,.photo-illus{height:280px}
  .hc-boxes{grid-template-columns:1fr auto 1fr}
  .ft{grid-template-columns:1fr;gap:24px}
}

/* ── MOBIEL (max 480px) ── */
@media(max-width:480px){
  nav{padding:0 16px;height:60px}
  .nav-links a:not(.nav-btn){display:none}
  .nav-btn{padding:8px 16px;font-size:13px}
  .nav-name{font-size:15px}
  .hero-inner{padding:80px 16px 48px}
  .hero h1{font-size:clamp(26px,8vw,36px);margin-bottom:16px}
  .hero-sub{font-size:15px;margin-bottom:28px}
  .hero-btns{flex-direction:column;gap:10px}
  .btn-hero,.btn-ghost{width:100%;justify-content:center;padding:14px 20px;font-size:15px}
  .hero-checks{gap:8px}
  .section{padding:52px 16px}
  .title,.section-title{font-size:clamp(22px,6vw,30px)}
  .sub,.section-sub{font-size:15px}
  .stats{padding:20px 16px}
  .stats-inner{gap:16px}
  .stat-n{font-size:36px}
  .stat-l{font-size:12px}
  .paths-grid{gap:14px}
  .path-card{padding:24px 20px}
  .path-title{font-size:18px}
  .calc-shell{border-radius:var(--radius-lg)}
  .calc-top{padding:20px 16px 16px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .calc-top h3{font-size:20px}
  .calc-body{padding:20px 16px}
  .calc-foot{flex-wrap:wrap;gap:12px}
  .btn-next{width:100%;justify-content:center;padding:13px}
  .btn-back{width:auto}
  .dots{justify-content:center}
  .radio-row{flex-direction:column;gap:8px}
  .ri{min-width:unset;width:100%;text-align:left;display:flex;align-items:center;gap:10px;padding:12px 14px}
  .ri-t{font-size:15px}
  .checks{gap:6px}
  .ci{font-size:13px;padding:7px 10px}
  .bdc{padding:16px}
  .cta-card{padding:20px}
  .res-pts{font-size:72px}
  .etool{padding:20px 16px;border-radius:var(--radius-lg)}
  .e-node{min-width:130px;padding:16px 12px}
  .e-lbl{font-size:32px}
  .e-sum{gap:10px}
  .e-sc{padding:14px}
  .cf{padding:20px 16px;border-radius:var(--radius-lg)}
  .contact-grid{gap:32px}
  .ct-tdr{padding:18px}
  footer{padding:40px 16px 24px}
  .ft{gap:20px}
  .fcols{grid-template-columns:1fr;gap:20px}
  .fb-line{flex-direction:column;gap:12px}
  .fc-disc{font-size:11px}
  .lookup-grid{grid-template-columns:1fr!important}
  .lookup-grid button{width:100%}
  .hc-boxes{grid-template-columns:1fr;gap:8px}
  .hc-arr{transform:rotate(90deg)}
}

/* GATE 1 */
.g1-wrap{background:#fff;border-radius:var(--radius-lg);border:2px solid var(--navy);padding:32px;margin:28px 0}
.g1-head{text-align:center;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.g1-head h3{font-family:'Fraunces',serif;font-size:21px;font-weight:700;color:var(--navy);margin-bottom:8px}
.g1-head p{font-size:15px;color:var(--slate);max-width:440px;margin:0 auto}
.g1-perks{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.g1-perk{font-size:13px;color:var(--navy);font-weight:500;display:flex;align-items:center;gap:5px}
.g1-perk::before{content:'✓';color:var(--green);font-weight:700;font-size:14px}
.g1-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g1-full{grid-column:1/-1}
.g1-submit{width:100%;background:var(--amber-bright);color:var(--navy);padding:14px;border-radius:var(--radius-sm);font-size:16px;font-weight:600;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:4px;transition:background .2s}
.g1-submit:hover{background:#ffca4d}
.g1-submit:disabled{background:#ccc;cursor:default}
.g1-privacy{font-size:12px;color:var(--slate);text-align:center;margin-top:9px}
.g1-ok{text-align:center;padding:28px 24px;background:var(--green-light);border-radius:var(--radius);border:1.5px solid #86efac;margin:0 0 24px}
.g1-ok h4{font-family:'Fraunces',serif;font-size:20px;color:var(--green);margin:8px 0 8px}
.g1-ok p{color:var(--slate);font-size:15px;margin-bottom:18px}
.pdf-btn{background:var(--navy);color:#fff;padding:11px 24px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:7px;transition:background .2s}
.pdf-btn:hover{background:var(--navy-mid)}
.g2-cta{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);border-radius:var(--radius);padding:26px 28px;text-align:center;margin:0 0 24px}
.g2-cta h4{font-family:'Fraunces',serif;font-size:20px;color:#fff;margin-bottom:8px}
.g2-cta p{color:rgba(255,255,255,.65);font-size:15px;margin-bottom:18px}
.g2-cta-btn{background:var(--amber-bright);color:var(--navy);padding:12px 28px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;text-decoration:none;display:inline-block;transition:background .2s}
.g2-cta-btn:hover{background:#ffca4d}
@media(max-width:640px){
  .g1-fields{grid-template-columns:1fr}
  .g1-full{grid-column:auto}
  .g1-wrap{padding:22px 18px}
}

/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — premium redesign (Fase 2)
   ═══════════════════════════════════════════════════════════ */
:root{
  --v-navy:#0e1c33; --v-navy-2:#16294a; --v-navy-3:#213a63;
  --v-gold:#c19a4e; --v-gold-2:#d8b877; --v-gold-soft:#f3ead6;
  --v-cream:#f7f3ec; --v-paper:#fbf9f5; --v-white:#fff;
  --v-ink:#182233; --v-muted:#5c6675; --v-faint:#8b93a1;
  --v-line:#e9e3d7; --v-line-2:#efeae0;
  --v-green:#2f7d5b; --v-green-bg:#e7f2ec;
  --v-sp-1:8px; --v-sp-2:16px; --v-sp-3:24px; --v-sp-4:36px; --v-sp-5:56px; --v-sp-6:88px;
  /* Radius-systeem (één bron van waarheid) */
  --radius-sm:8px; --radius:12px; --radius-lg:20px; --radius-pill:999px;
  /* Legacy radius-aliassen verwijzen naar het nieuwe systeem */
  --v-r:var(--radius); --v-r-lg:var(--radius-lg); --v-r-pill:var(--radius-pill);
  --v-sh-sm:0 1px 2px rgba(16,28,51,.05),0 1px 3px rgba(16,28,51,.04);
  --v-sh:0 8px 30px rgba(16,28,51,.08);
  --v-sh-lg:0 30px 70px rgba(16,28,51,.16);
  --v-serif:'Fraunces',serif; --v-sans:'DM Sans',sans-serif;
}
.v2{font-family:var(--v-sans);color:var(--v-ink);background:var(--v-paper);-webkit-font-smoothing:antialiased}
.v2 ::selection{background:var(--v-gold-soft)}
.v-wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.v-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--v-gold);margin-bottom:14px}
.v-h2{font-family:var(--v-serif);font-weight:600;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.01em;color:var(--v-navy)}
.v-lead{font-size:18px;line-height:1.7;color:var(--v-muted);max-width:620px}
.v-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.v-reveal.in{opacity:1;transform:none}

/* NAV */
.v-nav{position:fixed;top:0;left:0;right:0;z-index:200;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.v-nav.scrolled{background:rgba(251,249,245,.86);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--v-line)}
.v-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.v-mark{width:38px;height:38px;border-radius:10px;background:var(--v-navy);display:flex;align-items:center;justify-content:center;font-family:var(--v-serif);color:var(--v-gold-2);font-size:19px;font-weight:600}
.v-logo-t{font-family:var(--v-serif);font-size:18px;font-weight:600;color:#fff;transition:color .35s}
.v-nav.scrolled .v-logo-t{color:var(--v-navy)}
.v-logo-t b{color:var(--v-gold-2);font-weight:600}
.v-nav-links{display:flex;align-items:center;gap:30px}
.v-nav-links a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s}
.v-nav.scrolled .v-nav-links a{color:var(--v-muted)}
.v-nav-links a:hover{color:#fff}.v-nav.scrolled .v-nav-links a:hover{color:var(--v-navy)}
.v-nav-cta{background:var(--v-gold);color:#fff!important;padding:11px 22px;border-radius:var(--radius-sm);font-weight:600;font-size:14.5px;transition:background .25s,transform .2s,box-shadow .2s}
.v-nav-cta:hover{background:#a9863f;transform:translateY(-1px);box-shadow:0 10px 24px rgba(193,154,78,.35)}
.v-nav-burger{display:none}

/* HERO (foto) */
.v-hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--v-navy)}
.v-hero-img{position:absolute;inset:0;background:url('assets/hero.jpg') center right/cover no-repeat;transform:scale(1.06);animation:v-kenburns 24s ease-out forwards}
@keyframes v-kenburns{to{transform:scale(1)}}
.v-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,38,.94) 0%,rgba(10,20,38,.82) 34%,rgba(12,24,44,.5) 62%,rgba(12,24,44,.28) 100%)}
.v-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:120px 40px 70px;width:100%;display:grid;grid-template-columns:1.05fr .82fr;gap:56px;align-items:center}
.v-hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.82);font-size:12.5px;font-weight:500;letter-spacing:.02em;margin-bottom:26px}
.v-hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--v-gold-2)}
.v-hero h1{font-family:var(--v-serif);color:#fff;font-weight:600;font-size:clamp(40px,5vw,66px);line-height:1.04;letter-spacing:-.02em;margin-bottom:22px}
.v-hero h1 em{font-style:italic;color:var(--v-gold-2)}
.v-hero-sub{color:rgba(255,255,255,.74);font-size:19px;line-height:1.65;max-width:500px;margin-bottom:34px}
.v-hero-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.v-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--v-sans);font-weight:600;font-size:16px;border-radius:var(--radius-sm);padding:16px 28px;cursor:pointer;text-decoration:none;border:none;transition:transform .2s,box-shadow .25s,background .25s}
.v-btn-primary{background:var(--v-gold);color:#fff}
.v-btn-primary:hover{background:#b08c42;transform:translateY(-2px);box-shadow:0 16px 34px rgba(193,154,78,.4)}
.v-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25)}
.v-btn-ghost:hover{background:rgba(255,255,255,.16)}
.v-btn-dark{background:var(--v-navy);color:#fff}.v-btn-dark:hover{background:var(--v-navy-2);transform:translateY(-2px)}

/* Analysekaart (hero) */
.v-acard{background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-radius:var(--radius);padding:26px;box-shadow:var(--v-sh-lg);border:1px solid rgba(255,255,255,.6)}
.v-acard-h{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--v-line)}
.v-acard-h .t{font-family:var(--v-serif);font-size:17px;font-weight:600;color:var(--v-navy)}
.v-acard-h .demo{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--v-faint);background:var(--v-cream);padding:4px 9px;border-radius:var(--radius-sm)}
.v-acard-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--v-line-2)}
.v-acard-row .k{font-size:14px;color:var(--v-muted)}
.v-acard-row .val{font-size:16px;font-weight:600;color:var(--v-ink)}
.v-acard-row .val.big{font-family:var(--v-serif);font-size:22px;font-weight:600}
.v-acard-row .val.gold{color:var(--v-gold)}
.v-badge-ok{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;padding:11px;border-radius:var(--radius);background:var(--v-green-bg);color:var(--v-green);font-weight:600;font-size:14px}

/* TRUST STRIP */
.v-trust{border-top:1px solid var(--v-line);border-bottom:1px solid var(--v-line);background:var(--v-white)}
.v-trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 40px;max-width:1200px;margin:0 auto}
.v-trust-i{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:500;color:var(--v-ink)}
.v-trust-i svg{width:22px;height:22px;color:var(--v-gold);flex-shrink:0}

/* SECTION */
.v-sec{padding:var(--v-sp-6) 0}
.v-sec.cream{background:var(--v-cream)}
.v-sec.navy{background:var(--v-navy);color:#fff}
.v-sec-head{max-width:680px;margin-bottom:var(--v-sp-5)}
.v-sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.v-sec.navy .v-h2{color:#fff}.v-sec.navy .v-lead{color:rgba(255,255,255,.72)}

/* STEPS */
.v-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:st}
.v-step{position:relative;background:var(--v-white);border:1px solid var(--v-line);border-radius:var(--radius);padding:34px 30px;transition:transform .3s,box-shadow .3s,border-color .3s}
.v-step:hover{transform:translateY(-4px);box-shadow:var(--v-sh);border-color:var(--v-gold-soft)}
.v-step .n{font-family:var(--v-serif);font-size:14px;font-weight:600;color:var(--v-gold);letter-spacing:.05em;margin-bottom:18px}
.v-step h3{font-family:var(--v-serif);font-size:21px;font-weight:600;color:var(--v-navy);margin-bottom:9px}
.v-step p{font-size:15px;line-height:1.65;color:var(--v-muted)}
.v-step-ic{width:46px;height:46px;border-radius:var(--radius);background:var(--v-gold-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--v-gold)}
.v-step-ic svg{width:23px;height:23px}

/* VOORBEELDANALYSE */
.v-exa{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.v-exa-panel{background:var(--v-navy);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--v-sh-lg);position:relative;overflow:hidden}
.v-exa-panel::before{content:'';position:absolute;top:-40%;right:-20%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(193,154,78,.22),transparent 70%)}
.v-exa-demo{position:relative;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px}
.v-exa-hero{position:relative;display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.v-exa-hero .amt{font-family:var(--v-serif);font-size:46px;font-weight:600;color:#fff;line-height:1}
.v-exa-hero .per{color:rgba(255,255,255,.6);font-size:15px}
.v-exa-cap{position:relative;font-size:13px;color:var(--v-gold-2);margin-bottom:22px}
.v-exa-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v-exa-cell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:14px 16px}
.v-exa-cell .k{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:3px}
.v-exa-cell .v{font-size:17px;font-weight:600;color:#fff}

/* WAT ANALYSEREN WE — asymmetrisch */
.v-data{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(120px,auto);gap:16px}
.v-dcard{background:var(--v-white);border:1px solid var(--v-line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s,box-shadow .3s}
.v-dcard:hover{transform:translateY(-3px);box-shadow:var(--v-sh)}
.v-dcard .lab{font-size:13px;color:var(--v-muted);font-weight:500}
.v-dcard .big{font-family:var(--v-serif);font-size:26px;font-weight:600;color:var(--v-navy);line-height:1.1}
.v-dcard .ic{width:40px;height:40px;border-radius:var(--radius);background:var(--v-cream);display:flex;align-items:center;justify-content:center;color:var(--v-gold);margin-bottom:14px}
.v-dcard .ic svg{width:21px;height:21px}
.v-dcard.wide{grid-column:span 3}.v-dcard.mid{grid-column:span 2}.v-dcard.sm{grid-column:span 2}
.v-dcard.feat{background:var(--v-navy);color:#fff}
.v-dcard.feat .lab{color:rgba(255,255,255,.6)}.v-dcard.feat .big{color:#fff}
.v-dcard.feat .ic{background:rgba(255,255,255,.1);color:var(--v-gold-2)}

/* WBH trust */
.v-wbh{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.v-wbh-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.v-wbh-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15.5px;color:rgba(255,255,255,.86)}
.v-wbh-chip svg{width:18px;height:18px;color:var(--v-gold-2);flex-shrink:0}

@media(max-width:920px){
  .v-hero-inner{grid-template-columns:1fr;gap:34px;padding:104px 24px 56px}
  .v-exa,.v-wbh{grid-template-columns:1fr;gap:32px}
  .v-steps{grid-template-columns:1fr}
  .v-trust-in{grid-template-columns:1fr 1fr;gap:16px 20px}
  .v-data{grid-template-columns:repeat(2,1fr)}
  .v-dcard.wide,.v-dcard.mid,.v-dcard.sm{grid-column:span 1}
  .v-wrap,.v-nav{padding-left:22px;padding-right:22px}
  .v-nav-links a:not(.v-nav-cta){display:none}
}
@media(max-width:520px){
  .v-trust-in{grid-template-columns:1fr}
  .v-data{grid-template-columns:1fr}
  .v-hero h1{font-size:clamp(32px,8vw,42px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   F03C Consumer flow — visuele laag (UX-revisie F03C-UX-REVISION).
   Licht, warm canvas met een smalle contentkolom, serif schermvraag als
   paginakop, gouden CTA's en een dunne stippenvoortgang. Alles gebruikt de
   bestaande tokens (--navy, --navy-mid, --navy-light, --amber, --amber-bright,
   --gold-deep, --slate, --border, --radius*, --shadow*) en de bestaande fonts
   (Fraunces voor koppen en cijfers, DM Sans voor de rest). Eén nieuwe tint:
   --cf-creme, de warme canvaskleur uit de goedgekeurde mockup; verder alleen de
   drie neutrale tinten van de resultaatbalk.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── canvas ─────────────────────────────────────────────────────────────── */
.cf-sectie{--cf-creme:#f7f3ec;background:var(--cf-creme);padding:62px 32px 78px}
.cf-si{max-width:1080px}
.cf-intro{text-align:center;margin-bottom:30px}
.cf-sectiekop{font-family:'Fraunces',serif;font-size:19px;font-weight:700;color:var(--navy);opacity:.7}

/* ── Voortgangsbalk — 5 stippen op één dunne lijn ────────────────────────────
   Betekenis nooit alleen via kleur: de voltooide stap krijgt óók een vinkje, de
   actieve stap aria-current="step" én een grotere navy stip.
   LET OP — de balk is in index.html bewust een <div role="navigation"> en geen
   <nav>: hoger in dit bestand staat een KALE elementselector nav{position:fixed;
   top:0;height:68px;padding:0 32px;z-index:200} voor de sitenavigatie. Als <nav>
   zou die regel winnen (0,0,1 tegen 0,1,0 zonder eigen position-declaratie) en de
   balk naar de bovenkant van het scherm tillen, boven op de sitenavigatie. De
   declaraties hieronder zijn een vangnet voor het geval het element ooit tóch
   weer een <nav> wordt. */
.cf-steps{display:flex;gap:4px;margin:0 auto 46px;max-width:660px;flex-wrap:nowrap;
  position:static;top:auto;left:auto;right:auto;height:auto;padding:0;z-index:auto}
.cf-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:transparent;border:none;padding:0;text-align:center;cursor:default;position:relative;
  font-family:'DM Sans',sans-serif;color:var(--slate);font-size:12.5px;transition:color .25s}
.cf-step::before{content:'';position:absolute;top:11px;right:50%;left:-50%;height:1px;background:var(--border)}
.cf-step:first-child::before{display:none}
.cf-step-n{position:relative;z-index:1;flex-shrink:0;width:22px;height:22px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
  background:#fff;border:1.5px solid var(--border);color:var(--slate);transition:all .25s}
.cf-step-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;max-width:100%}
.cf-step.is-klaar{color:var(--navy);cursor:pointer}
.cf-step.is-klaar::before{background:var(--amber)}
.cf-step.is-klaar .cf-step-n{background:var(--amber);border-color:var(--amber);color:#fff}
.cf-step.is-klaar:hover .cf-step-n{background:var(--gold-deep);border-color:var(--gold-deep)}
.cf-step.is-actief{color:var(--navy);font-weight:700}
.cf-step.is-actief::before{background:var(--amber)}
.cf-step.is-actief .cf-step-n{width:28px;height:28px;margin-top:-3px;font-size:12px;
  background:var(--navy);border-color:var(--navy);color:#fff}
.cf-step:focus-visible{outline:2px solid var(--amber-bright);outline-offset:3px;border-radius:var(--radius-sm)}

/* ── schermen + typografie ──────────────────────────────────────────────── */
.cf-body{min-height:320px}
.cf-screen{display:none}
.cf-screen.on{display:block;animation:fiu .35s ease both}
.cf-h{font-family:'Fraunces',serif;font-size:clamp(26px,3.3vw,36px);line-height:1.18;
  letter-spacing:-.012em;color:var(--navy);margin-bottom:10px}
.cf-lead{font-size:15.5px;color:var(--slate);margin-bottom:30px;max-width:62ch}
.cf-kaart-t{font-family:'Fraunces',serif;font-size:16.5px;color:var(--navy);margin-bottom:8px}
.cf-kaart-p{font-size:14.5px;color:var(--slate);max-width:66ch}

/* ── kolomindeling ──────────────────────────────────────────────────────── */
.cf-duo{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:40px;align-items:start}
.cf-trio{display:grid;grid-template-columns:196px minmax(0,1fr) 250px;gap:26px;align-items:start}
.cf-main{min-width:0}
.cf-zij{min-width:0;display:flex;flex-direction:column;gap:16px}

/* ── kaartvlakken ───────────────────────────────────────────────────────── */
.cf-paneelkaart{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 28px;box-shadow:var(--shadow)}
.cf-hulpkaart{background:rgba(255,255,255,.62);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px}
.cf-hulp-t{font-family:'Fraunces',serif;font-size:15.5px;color:var(--navy);margin:2px 0 8px}
.cf-hulp-p{font-size:13.5px;line-height:1.65;color:var(--slate);margin-bottom:7px}
.cf-hulp-p:last-child{margin-bottom:0}

/* ── formuliervelden ────────────────────────────────────────────────────── */
.cf-field{padding:22px 0;border-top:1px solid var(--border)}
.cf-field:first-of-type{border-top:none;padding-top:0}
.cf-qlbl{display:block;font-size:16px;font-weight:600;color:var(--navy);margin-bottom:4px}
.cf-help{font-size:13px;color:var(--slate);margin-bottom:12px;max-width:62ch}
.cf-note{font-size:13px;color:var(--slate);background:var(--navy-light);border-radius:var(--radius-sm);
  padding:10px 13px;margin-top:10px;max-width:62ch}
.cf-err{font-size:13px;font-weight:600;color:var(--red);margin-top:8px}
.cf-err::before{content:"! ";font-weight:700}
.cf-link{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.cf-inputrow{display:flex;align-items:center;gap:9px}
.cf-num{max-width:220px}
.cf-unit{font-size:15px;color:var(--slate);font-weight:600}
.cf-mirror{background:var(--navy-light);border-radius:var(--radius-sm);padding:12px 15px;margin-top:10px}
.cf-mirror-t{font-size:13.5px;font-weight:700;color:var(--navy)}
.cf-mirror-s{font-size:12.5px;line-height:1.6;color:var(--slate);margin-top:3px}
.cf-bron{font-size:12px;color:var(--slate);margin-top:14px;text-align:center}
.cf-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:36px;padding-top:24px;border-top:1px solid var(--border)}

/* Gouden hoofdknop — de CTA-stand uit de mockup. */
.cf-goud{grid-column:1/-1;background:linear-gradient(135deg,var(--amber) 0%,var(--gold-deep) 100%);
  color:#fff;border:none;border-radius:var(--radius-sm);padding:14px 24px;font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:700;cursor:pointer;transition:filter .2s;box-shadow:0 6px 18px rgba(168,125,20,.24)}
.cf-goud:hover{filter:brightness(1.07)}
/* Staat er een keuzelijst met wooneenheden, dan is kiezen de volgende stap. De
   zoekknop zakt dan terug naar een rustige secundaire stand zodat de chips de
   primaire actie zijn. De knop blijft volledig werkend en klikbaar. */
.cf-goud.is-gedempt{background:#fff;color:var(--navy);border:1.5px solid var(--border);
  box-shadow:none;font-weight:600}
.cf-goud.is-gedempt:hover{filter:none;border-color:var(--navy)}
.cf-secundair{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 16px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--navy);
  cursor:pointer;margin-top:10px}
.cf-secundair:hover{border-color:var(--navy)}
.cf-link-knop{background:none;border:none;padding:6px 4px;font-family:'DM Sans',sans-serif;font-size:13px;
  font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cf-link-knop:hover{color:var(--gold-deep)}
/* ── B2 — de hiërarchie stond omgekeerd ──────────────────────────────────────
   "Start de analyse" was in onderdeel 1-4 de zware gouden knop terwijl "Verder
   naar Sanitair →" een lichte outline was, dus werd de afslag naar buiten het
   zwaarst aangezet. Nu is de categorievoortgangsknop de gouden primaire actie
   (.cf-primair) en is de overslaan-route een bescheiden tekstlink
   (.cf-tekstlink). De gouden Start-knop verschijnt alleen nog op het
   Overzicht-paneel. Knop-id cf-s3-next blijft één en dezelfde knop — alleen
   zijn stand en opschrift wisselen per context — zodat het validatie- en
   springgedrag (cfSpringNaarFout) ongewijzigd blijft werken. */
.cf-primair{background:linear-gradient(135deg,var(--amber) 0%,var(--gold-deep) 100%);
  color:#fff;border:none;border-radius:var(--radius-sm);padding:13px 22px;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;
  transition:filter .2s;box-shadow:0 6px 18px rgba(168,125,20,.24)}
.cf-primair:hover{filter:brightness(1.07)}
.cf-tekstlink{background:none;border:none;padding:10px 2px;font-family:'DM Sans',sans-serif;
  font-size:13.5px;font-weight:500;color:var(--slate);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;box-shadow:none}
.cf-tekstlink:hover{color:var(--navy)}
.cf-primair:focus-visible,.cf-tekstlink:focus-visible{outline:3px solid var(--amber-bright);outline-offset:2px}

/* ── scherm 1 — adres ───────────────────────────────────────────────────── */
.cf-adresgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-bevestig{margin-top:16px;background:var(--navy-light);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px}
.cf-bevestig-tekst{display:inline-block;vertical-align:middle;max-width:calc(100% - 62px)}
.cf-bevestig-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-deep)}
.cf-bevestig-a{display:block;font-family:'Fraunces',serif;font-size:19px;font-weight:700;color:var(--navy);margin-top:4px}
.cf-bevestig-m{display:block;font-size:13px;color:var(--slate);margin-top:3px}
.cf-keuzeblok{margin-top:16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.cf-keuze-kop{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:10px}
.cf-keuze-melding{font-size:12px;color:var(--slate);margin-bottom:8px}
.cf-keuze-opties{display:flex;flex-wrap:wrap;gap:9px}
/* De keuzeknoppen worden door app.js met inline stijl gezet (D03A, bevroren);
   alleen hun maatvoering wordt hier tot nette kaartknoppen opgewaardeerd. */
.cf-keuze-opties button{min-width:66px;padding:12px 16px!important;border-radius:var(--radius-sm)!important;
  font-size:14px!important;background:#fff!important;transition:border-color .2s,box-shadow .2s}
.cf-keuze-opties button:hover{border-color:var(--navy)!important;box-shadow:var(--shadow)}
.cf-trustrij{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:34px;
  padding-top:24px;border-top:1px solid var(--border)}
.cf-trust-i{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--slate)}
.cf-trust-i svg{width:17px;height:17px;color:var(--amber);flex-shrink:0}

/* ── scherm 2 — woning ──────────────────────────────────────────────────── */
.cf-tegelrij{display:flex;flex-wrap:wrap;gap:10px}
.cf-tegel{background:#fff;font-family:'DM Sans',sans-serif;display:block}
.cf-tegel .ri-t,.cf-tegel .ri-s{display:block}
/* B6a — de gekozen tegel moet er onmiskenbaar gekozen uitzien, en niet alleen
   via een tint: dubbele rand, vinkje en een lichte lift. */
.cf-tegel.on{border-color:var(--navy);background:var(--navy-light);box-shadow:0 0 0 1px var(--navy)}
.cf-tegel.on .ri-t::after{content:" ✓";color:var(--gold-deep);font-weight:700}
/* B6a — een ingevulde waarde is donker en zwaar, een placeholder licht en dun.
   Zonder dit verschil ogen de velden op de opnames allemaal even "leeg". */
.cf-screen .inp{color:var(--navy);font-weight:600}
.cf-screen .inp::placeholder{color:var(--slate);opacity:.5;font-weight:400}
.cf-screen .inp.is-leeg{color:var(--slate);font-weight:400}
.cf-woningkaart{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.cf-woning-beeld{background:var(--cf-creme);border-bottom:1px solid var(--border);padding:22px 30px}
.cf-woning-body{padding:18px 20px 20px}
/* B4 — "Bekend over deze woning" is de kop van de kaart en krijgt het meeste
   gewicht; het energielabel is daaronder één blok, geen tweede verhaal. */
.cf-woning-kop{font-size:18px;font-weight:700;margin-bottom:10px}
.cf-feitrij{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--border)}
.cf-feitrij:first-of-type{border-top:none;padding-top:2px}
.cf-feit-l{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.cf-feit-w{flex:1 1 140px;font-size:14px;font-weight:600;color:var(--navy)}
.cf-feitrij:first-of-type .cf-feit-w{font-size:15.5px;font-weight:700}
/* B4 — het ene labelblok: kop → badge + bron → keuzeveld → één fallbackzin.
   Het vlak om de badge is NEUTRAAL (slate-light uit het bestaande palet); de
   badge zelf houdt zijn eigen labelkleur, die app.js inline zet. */
.cf-labelblok{margin-top:14px;padding-top:13px;border-top:1px solid var(--border)}
.cf-labelblok-k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);margin-bottom:8px}
.cf-labelkaart{background:var(--slate-light);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 13px;gap:12px}
.cf-labelkaart-i{font-size:12.5px;line-height:1.5;color:var(--slate);min-width:0}
/* De statusregel is een bevestiging achteraf, geen instructie: hij staat het
   verst naar achteren in de hiërarchie. De COPY komt uit app.js en blijft
   ongewijzigd — alleen het visuele gewicht is gedempt. */
.cf-labelstatus{margin-top:9px;font-size:11.5px;line-height:1.5;color:var(--slate);opacity:.72}
.cf-labelkeuze{margin-top:10px}

/* ── scherm 3 — kenmerken per onderdeel ─────────────────────────────────── */
.cf-catnav-wrap{position:sticky;top:86px;min-width:0}
.cf-catnav{display:flex;flex-direction:column;gap:6px}
/* S5 — alleen op mobiel zichtbaar (zie de 900px-laag). */
.cf-catnav-teller{display:none;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--slate)}
.cf-catknop{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;
  font-family:'DM Sans',sans-serif;font-size:14.5px;font-weight:600;color:var(--navy);
  text-align:left;cursor:pointer;transition:all .2s}
.cf-catknop:hover{border-color:var(--navy-mid)}
.cf-catknop.is-actief{background:var(--navy);border-color:var(--navy);color:#fff}
.cf-catknop-v{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--gold-deep)}
.cf-catknop.is-actief .cf-catknop-v{color:var(--amber-bright)}
.cf-paneel{display:none}
.cf-paneel.is-actief{display:block}
.cf-paneel-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:20px;
  padding-bottom:12px;border-bottom:1px solid var(--border)}
.cf-cat-t{font-family:'Fraunces',serif;font-size:22px;color:var(--navy)}
.cf-cat-n{font-size:12.5px;font-weight:600;color:var(--slate)}
.cf-vraagblok{margin-bottom:26px;border-radius:var(--radius);transition:background .4s}
.cf-vraagblok.cf-gemarkeerd{background:var(--amber-light);box-shadow:0 0 0 10px var(--amber-light)}
.cf-vraag{font-size:15.5px;font-weight:600;color:var(--navy);margin-bottom:4px}
/* Slotronde nit 2 — de teller boven de open vraag. Op desktop staat de hele
   vragenlijst van een onderdeel in beeld; daar zegt "Vraag 3 van 4" niets en
   staat hij dus uit. Hij verschijnt alleen mobiel, en alleen bij de vraag die
   daadwerkelijk open staat (zie de 600px-laag). */
.cf-vraagteller{display:none;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);margin-bottom:5px}
.cf-kaarten{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.cf-card{display:flex;align-items:center;gap:13px;text-align:left;background:#fff;
  border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;min-height:58px;
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .18s,background .18s,box-shadow .18s}
.cf-card:hover{border-color:var(--navy-mid);box-shadow:var(--shadow)}
.cf-card.on{border-color:var(--navy);background:var(--navy-light)}
.cf-card-i{flex:0 0 auto;width:32px;height:32px;color:var(--navy);opacity:.72}
.cf-card-i svg{display:block;width:100%;height:auto}
.cf-card.on .cf-card-i{opacity:1}
.cf-card-tekst{flex:1 1 auto;min-width:0}
.cf-card-t{display:block;font-size:14.5px;font-weight:600;color:var(--navy)}
.cf-card-s{display:block;font-size:12.5px;color:var(--slate);margin-top:2px}
.cf-card[aria-pressed="true"] .cf-card-t::after{content:" ✓";color:var(--gold-deep);font-weight:700}
/* Dit is een STATUSMELDING, geen knop. In goud las hij als een tweede actie
   naast de gouden doorgaan-knop; de groene status-tint uit het bestaande palet
   maakt het onderscheid meteen duidelijk. */
.cf-catklaar{display:inline-flex;align-items:center;gap:8px;background:var(--green-light);
  color:var(--green);border-radius:var(--radius-pill);padding:7px 15px;font-size:13px;font-weight:700}
.cf-paneel-voet{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.cf-uitleg-t{font-family:'Fraunces',serif;font-size:15px;color:var(--navy);margin-bottom:8px}
/* S6 — de mobiele plaats van de uitlegkaart: binnen het paneel, vlak vóór de
   doorgaan-knop. Op desktop staat deze kopie uit en doet de zijkolom het werk;
   er is dus altijd precies één uitlegkaart in beeld. */
.cf-paneel-uitleg{display:none;margin:4px 0 16px}
.cf-adreschip{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.62);
  border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.cf-adreschip-t{min-width:0;font-size:13px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis}
.cf-adreschip-s{display:block;font-size:11.5px;font-weight:500;color:var(--slate)}
.cf-mobielsam{display:none}
.cf-mobielsam summary{cursor:pointer;list-style:revert;font-size:13.5px;font-weight:600;color:var(--navy);padding:9px 0}
.cf-mobielsam-w{font-size:13px;color:var(--slate);padding:0 0 10px}
/* B3 — de samenvattingsregel van één beantwoorde vraag. Op desktop staat hij uit;
   daar blijft de volledige vragenlijst gewoon staan. */
.cf-vraagsam{display:none;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;font-family:'DM Sans',sans-serif;text-align:left;cursor:pointer}
.cf-vraagsam-t{min-width:0;font-size:13.5px;font-weight:600;color:var(--navy)}
.cf-vraagsam-w{display:block;font-size:12.5px;font-weight:500;color:var(--slate);margin-top:2px}
.cf-vraagsam-i{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--gold-deep)}
.cf-vraagsam:focus-visible{outline:3px solid var(--amber-bright);outline-offset:2px}
/* B1 — het compacte woninganker boven de hoofdkolom; alleen op mobiel in beeld. */
.cf-mobielanker{display:none;align-items:center;gap:11px;background:rgba(255,255,255,.72);
  border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;margin-bottom:18px}
.cf-mobielanker-t{min-width:0;font-size:13px;font-weight:700;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis}
.cf-mobielanker-s{display:block;font-size:11.5px;font-weight:500;color:var(--slate)}
.cf-mobielanker .cf-ill .bgv{fill:#fff}

/* Samenvatting + wijziglinks */
.cf-sam{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow)}
.cf-sam-rij{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--border)}
.cf-sam-rij:first-of-type{border-top:none}
.cf-sam-l{flex:0 0 118px;font-size:13px;font-weight:700;color:var(--navy)}
.cf-sam-w{flex:1 1 200px;font-size:14px;color:var(--slate)}
.cf-sam-r{font-size:14px;color:var(--navy);flex:1 1 240px}
.cf-verwarming{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;
  padding:12px 0 0;margin-top:10px;border-top:1px solid var(--border)}
.cf-inlinevraag{flex:1 1 100%;margin-top:8px}

/* ── scherm 4 — analyse ─────────────────────────────────────────────────── */
.cf-analyse{max-width:640px;margin:0 auto;text-align:center}
.cf-analyse .cf-lead{margin-left:auto;margin-right:auto}
/* Vierkant vlak met een expliciete hoogte in plaats van aspect-ratio: dat werkt
   ook in oudere renderers, en een procentuele padding-truc zou hier meten aan de
   breedte van de OUDER (640px) in plaats van aan de kolom zelf. */
.cf-viz{position:relative;width:100%;max-width:392px;height:392px;margin:6px auto 30px}
.cf-viz-huis{position:absolute;left:22%;top:24%;width:56%}
.cf-viz-i{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:var(--radius-pill);
  background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--slate);opacity:.55;transition:all .45s}
.cf-viz-i svg{width:26px;height:26px}
.cf-viz-i.is-klaar{opacity:1;border-color:var(--amber);color:var(--gold-deep);box-shadow:var(--shadow)}
/* S8 — welke woning er doorgerekend wordt. */
.cf-analyse-adres{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 16px;
  font-size:13.5px;font-weight:600;color:var(--navy);margin:0 auto 18px}
.cf-analyse-adres span{font-weight:500;color:var(--slate)}
.cf-analyse-adres+.cf-viz{margin-top:0}
/* ── S-c — de vijf cirkels en de vijf checklistregels lichten in de ECHTE
   statusvolgorde op, met een micro-overgang van 90ms tussen de stappen.
   Dit is UITSLUITEND een vertragingsprofiel op één en dezelfde CSS-overgang: er
   staat geen timer in de flow, er wordt niets uitgesteld en de totale duur van de
   analyse blijft precies de echte rekenduur + paint. De checklist blijft de
   statusbron — de cirkels krijgen hun is-klaar-stand uit exact dezelfde
   render-aanroep als de regels eronder (cfRenderChecklist). Wie de opnames
   vergelijkt ziet dus geen enkele stap later klaar zijn dan hij echt was. */
.cf-viz-i:nth-of-type(2){transition-delay:0s}
.cf-viz-i:nth-of-type(3){transition-delay:.09s}
.cf-viz-i:nth-of-type(4){transition-delay:.18s}
.cf-viz-i:nth-of-type(5){transition-delay:.27s}
.cf-viz-i:nth-of-type(6){transition-delay:.36s}
.cf-checklist{list-style:none;margin:0 auto;max-width:420px;text-align:left}
.cf-check{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);
  font-size:14.5px;color:var(--slate);transition:color .3s}
.cf-check-i{transition:background .3s,color .3s}
.cf-check:nth-child(1),.cf-check:nth-child(1) .cf-check-i{transition-delay:0s}
.cf-check:nth-child(2),.cf-check:nth-child(2) .cf-check-i{transition-delay:.09s}
.cf-check:nth-child(3),.cf-check:nth-child(3) .cf-check-i{transition-delay:.18s}
.cf-check:nth-child(4),.cf-check:nth-child(4) .cf-check-i{transition-delay:.27s}
.cf-check:nth-child(5),.cf-check:nth-child(5) .cf-check-i{transition-delay:.36s}
.cf-check-i{width:24px;height:24px;flex-shrink:0;border-radius:var(--radius-pill);background:var(--navy-light);
  color:var(--slate);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.cf-check.is-klaar{color:var(--navy)}
.cf-check.is-klaar .cf-check-i{background:var(--green-light);color:var(--green)}
.cf-weetje{margin-top:26px;background:rgba(255,255,255,.7);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;text-align:left}
.cf-foutkaart{background:var(--red-light);color:var(--red);border-radius:var(--radius);
  padding:16px 18px;font-size:15px;font-weight:600;margin:18px 0}

/* ── scherm 5 — resultaat ───────────────────────────────────────────────── */
.cf-hero{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:26px;align-items:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);border-radius:var(--radius-lg);
  padding:30px 34px;margin-bottom:18px;color:#fff}
.cf-hero-k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cf-hero-a{font-family:'Fraunces',serif;font-size:clamp(21px,2.7vw,29px);line-height:1.2;margin:8px 0 3px}
.cf-hero-p{font-size:13.5px;color:rgba(255,255,255,.6)}
.cf-hero-strip{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.15)}
.cf-hero-i{min-width:0}
.cf-hero-il{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.cf-hero-iv{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:#fff;margin-top:3px}
.cf-hero-badge{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:25px;
  padding:0 7px;border-radius:var(--radius-sm);background:var(--amber);color:var(--navy);
  font-family:'Fraunces',serif;font-size:14px;font-weight:900}
.cf-scorekaart{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 28px 24px;box-shadow:var(--shadow);margin-bottom:14px;text-align:center}
.cf-res-boven{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.cf-res-punten{font-family:'Fraunces',serif;font-size:clamp(34px,6vw,54px);font-weight:900;
  line-height:1.1;color:var(--navy);margin:8px 0 6px}
.cf-res-sub{font-size:14px;color:var(--slate);max-width:56ch;margin:0 auto}
.cf-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin-bottom:16px}
.cf-res-grid .cf-kaart{margin-bottom:0}
.cf-segment-t{font-family:'Fraunces',serif;font-size:19px;line-height:1.25;color:var(--navy)}
/* De segmentkaart is de conclusie ná de bandbreedte. Een accent in het bestaande
   palet maakt die leesvolgorde zichtbaar zonder te schreeuwen.
   Slotronde nit 4 — de kaart viel op ware grootte helemaal weg tussen zijn twee
   witte buren, en dat had een harde oorzaak: deze regel stond vóór .cf-kaart
   (hieronder) met dezelfde specificiteit, dus .cf-kaart{background:#fff;
   border:1px solid var(--border)} overschreef zowel het vlak als het linkaccent
   — er was in de praktijk NOOIT een accent te zien. De selector is daarom
   .cf-kaart.cf-kaart-segment: die wint van de basiskaart ongeacht de volgorde.
   Het accent gaat van 3px naar 6px en de rand wordt zwaarder, zodat de kaart
   ook echt leest als de conclusie. Er komt GEEN nieuwe kleur bij — vlak, rand
   en accent zijn de tokens die er al stonden. */
.cf-kaart.cf-kaart-segment{background:var(--navy-light);border:1.5px solid var(--navy-mid);
  border-left:6px solid var(--navy);box-shadow:var(--shadow)}
.cf-balk{margin:22px auto 0;max-width:560px}
.cf-balk-spoor{position:relative;display:flex;height:16px;border-radius:var(--radius-pill);overflow:hidden;background:var(--navy-light)}
.cf-balk-zone{display:block;height:100%;border-right:2px solid #fff}
.cf-balk-zone-0{background:#dfe6f2}.cf-balk-zone-1{background:#c9d4e8}.cf-balk-zone-2{background:#aebbd8;border-right:none}
.cf-balk-marker{position:absolute;top:-4px;height:24px;border-radius:var(--radius-pill);
  background:var(--amber);border:2px solid var(--navy);box-sizing:border-box}
/* S2 — het merkteken 187 op de bestaande CF_AS-schaal. Puur presentatie: het
   getal stuurt geen enkele beslissing aan, het maakt alleen zichtbaar waar de
   grens ligt waar de copy het over heeft. Beide onderdelen hangen aan .cf-balk
   en niet aan .cf-balk-spoor, want dat spoor heeft overflow:hidden. */
.cf-balk{position:relative;padding-top:24px}
.cf-balk-187{position:absolute;top:20px;height:24px;width:2px;background:var(--navy);
  transform:translateX(-1px);border-radius:1px}
.cf-balk-187merk{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:'Fraunces',serif;font-size:11.5px;font-weight:700;color:var(--navy)}
.cf-balk-labels{display:flex;margin-top:8px;font-size:11.5px;color:var(--slate);justify-content:space-between}
/* ── B7 — het huurbedrag als display-getal in plaats van als lopende tekst.
   De WEERGAVE is afgerond op hele euro's; res.rent.lower/upper zelf blijven de
   exacte engine-waarden en worden nergens overschreven. */
.cf-huur-bedrag{font-family:'Fraunces',serif;font-size:clamp(26px,3.6vw,34px);font-weight:900;
  line-height:1.15;color:var(--navy);margin:4px 0 5px}
.cf-huur-sub{font-size:13px;color:var(--slate)}
/* Ook in de voorwaardelijke 187-zin hoort het bedrag als getal te lezen. De zin
   zelf blijft letterlijk ongewijzigd; alleen het bedrag krijgt display-gewicht. */
.cf-huur-inline{font-family:'Fraunces',serif;font-size:19px;font-weight:900;
  color:var(--navy);white-space:nowrap}
/* ── S1 — betrouwbaarheid als 3-puntsschaal. De positie komt uit result.confidence
   en nergens anders; er wordt niets herleid uit breedte of configuratie. */
/* Slotronde nit 3 — ÉÉN vulkleur voor de hele schaal: gevuld tot en met het
   niveau, daarna leeg. Twee kleuren (goud voor de gepasseerde stand, navy voor
   de huidige) lazen als drie losse tekens in plaats van als één oplopende
   schaal; de gelijke maat doet dat werk nu samen met de vulling. */
.cf-conf-schaal{display:flex;align-items:center;gap:8px;margin:2px 0 9px}
.cf-conf-bol{width:13px;height:13px;border-radius:var(--radius-pill);
  background:var(--navy-light);border:1.5px solid var(--border);box-sizing:border-box}
.cf-conf-bol.is-aan{background:var(--navy);border-color:var(--navy)}
.cf-conf-w{margin-left:4px;font-size:13px;font-weight:700;color:var(--navy)}
/* S3/S4 — één uitlegregel onder de geschatte WOZ-rij. */
.cf-comp-uitleg{font-size:12.5px;line-height:1.55;color:var(--slate);padding:2px 0 9px;
  border-bottom:1px solid var(--border)}
.cf-kaart{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:14px}
.cf-kaart-actie{background:linear-gradient(135deg,var(--amber-light) 0%,#fff 100%);border-color:var(--amber)}
.cf-kaart-actie .btn-next{margin-top:12px}
.cf-uitklap summary{cursor:pointer;list-style:revert}
.cf-lijst{margin:10px 0 10px 20px;font-size:14.5px;color:var(--slate)}
.cf-lijst li{padding:3px 0}
.cf-comp-groep{margin-top:14px}
.cf-comp-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);
  padding-bottom:7px;border-bottom:1.5px solid var(--border)}
.cf-comp-rij{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--border)}
.cf-comp-l{font-size:14px;color:var(--navy);font-weight:500}
.cf-comp-w{font-family:'Fraunces',serif;font-size:15px;font-weight:700;color:var(--navy);white-space:nowrap}
.cf-comp-w.is-schatting{font-weight:400;color:var(--slate)}
.cf-bron-rij{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--border)}
.cf-bron-t{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--navy)}
.cf-bron-s{flex:1 1 220px;font-size:13.5px;color:var(--slate)}
.cf-juridisch{font-size:12.5px;line-height:1.6;color:var(--slate);background:rgba(255,255,255,.7);
  border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:18px 0 0}
/* S9 — de voetregel van het resultaat volgt dezelfde stand als stap 1-3:
   secundair links, primair rechts. De row-reverse die hier stond zette de
   primaire actie juist links en brak dus met de rest van de flow. */

/* ── woninganker: één lijntekening in huisstijl, geen foto ──────────────── */
.cf-ill{display:block;color:var(--navy)}
.cf-ill svg{display:block;width:100%;height:auto}
.cf-ill .l{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cf-ill .g{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cf-ill .gv{fill:var(--amber);stroke:none}
.cf-ill .bgv{fill:var(--cf-creme);stroke:none}
.cf-ill-mini{width:52px;margin-bottom:12px}
.cf-ill-chip{display:inline-block;vertical-align:middle;width:44px;margin-right:14px}
.cf-ill-klein{width:34px;flex:0 0 auto}
.cf-ill-groot{max-width:186px;margin:0 auto}
.cf-hero .cf-ill .l{stroke:rgba(255,255,255,.82)}
.cf-hero .cf-ill .g{stroke:var(--amber-bright)}
.cf-hero .cf-ill .gv{fill:var(--amber-bright)}
.cf-hero .cf-ill .bgv{fill:rgba(255,255,255,.07)}
.cf-adreschip .cf-ill .bgv,.cf-hulpkaart .cf-ill .bgv{fill:#fff}

/* Uitgeschakelde vervolgknop. Zonder deze regel oogt de Verder-knop op scherm 1
   donkerblauw en dus klikbaar terwijl hij disabled is. Het verschil zit niet
   alleen in kleur: de knop wordt vlak, de cursor wordt not-allowed en de
   hover-toestand vervalt. */
.cf-screen .btn-next:disabled,.cf-screen .btn-next.go:disabled{
  background:var(--border);color:var(--slate);cursor:not-allowed;box-shadow:none}
.cf-screen .btn-next:disabled:hover,.cf-screen .btn-next.go:disabled:hover{background:var(--border)}
/* De vervolgknoppen van de flow dragen de gouden CTA-stand uit de mockup. */
.cf-screen .btn-next:not(:disabled){background:linear-gradient(135deg,var(--amber) 0%,var(--gold-deep) 100%);
  color:#fff;box-shadow:0 6px 18px rgba(168,125,20,.24)}
.cf-screen .btn-next:not(:disabled):hover{background:linear-gradient(135deg,var(--amber) 0%,var(--gold-deep) 100%);filter:brightness(1.07)}

/* Zichtbare focus binnen het bestaande palet — nooit alleen kleur */
.cf-card:focus-visible,.cf-tegel:focus-visible,.cf-link-knop:focus-visible,.cf-catknop:focus-visible,
.cf-goud:focus-visible,.cf-secundair:focus-visible,.cf-screen .btn-next:focus-visible,
.cf-screen .btn-back:focus-visible,
.cf-screen .inp:focus-visible{outline:3px solid var(--amber-bright);outline-offset:2px}

@media(max-width:900px){
  .cf-sectie{padding:48px 22px 62px}
  .cf-duo,.cf-trio{grid-template-columns:1fr;gap:26px}
  /* ── B1 — op een smal scherm eerst de VRAAG, dan pas de uitleg ─────────────
     De zijkolom (uitleg, woningkaart) stond met order:-1 boven de hoofdvraag,
     waardoor de primaire actie onder de vouw verdween. Hij staat nu ná de
     hoofdkolom en vóór de voetregel — dat dekt meteen S6 (uitleg-kaartje vlak
     vóór de doorgaan-knop) en B8 (het labelblok is mobiel gewoon aanwezig,
     onder de velden). Het woninganker zelf staat als compacte regel bovenaan
     de hoofdkolom (.cf-mobielanker). */
  .cf-duo .cf-zij{order:1;flex-direction:row;flex-wrap:wrap}
  .cf-duo .cf-zij>*{flex:1 1 260px}
  .cf-mobielanker{display:flex}
  .cf-woning-beeld{padding:16px 24px}
  .cf-ill-groot{max-width:132px}
  .cf-catnav-wrap{position:static}
  .cf-catnav{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px;
    /* S5 — de rij chips loopt door buiten beeld; een fade maakt zichtbaar dat er
       nog meer staat in plaats van de laatste chip hard af te kappen (een masker
       leest de ALFA van deze gradiënt, dus #fff = volledig zichtbaar).
       F03C-PUNCHLIST: hier stond een dubbel afgesloten comment, waardoor de tekst
       ertussen als declaratie in de parser belandde. CSS-foutherstel slikte dan
       alles tot en met de eerstvolgende puntkomma — en dat was precies de
       -webkit-mask-image-regel hieronder, die dus nooit heeft gewerkt. */
    -webkit-mask-image:linear-gradient(90deg,#fff 0,#fff calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#fff 0,#fff calc(100% - 26px),transparent 100%)}
  .cf-catnav-teller{display:block}
  /* Zonder width:auto zou de basisregel (width:100%) elke knop schermbreed maken
     en stond alleen het eerste onderdeel in beeld. */
  .cf-catknop{flex:0 0 auto;width:auto;gap:8px}
  /* S6 — op smal scherm verhuist de uitleg naar bínnen het paneel (vlak vóór de
     doorgaan-knop); de zijkolom van scherm 3 zou daaronder terechtkomen en toont
     bovendien een adreschip die het mobiele anker bovenaan al laat zien. */
  .cf-trio .cf-zij{display:none}
  .cf-paneel-uitleg{display:block}
  .cf-h{font-size:26px}
  .cf-lead{margin-bottom:22px}
  .cf-sam-l{flex-basis:100%}
  .cf-bron-t{flex-basis:100%}
}
@media(max-width:600px){
  /* Compacte voortgang: alleen de actieve stap houdt zijn naam. Die stap krijgt
     ook méér ruimte dan de andere vier, anders knijpt de gelijke verdeling de
     naam af tot "Ad…" — precies de stap waarvan de gebruiker moet kunnen lezen
     waar hij is. Met flex 3 tegen 1 houdt "Kenmerken" en "Resultaat" ruimte over. */
  .cf-steps{gap:4px;margin-bottom:34px}
  .cf-step{font-size:12px}
  .cf-step .cf-step-t{display:none}
  .cf-step.is-actief{flex:3 1 auto;min-width:0}
  .cf-step.is-actief .cf-step-t{display:inline}
  .cf-sectie{padding:38px 18px 54px}
  .cf-paneelkaart{padding:20px 18px}
  .cf-hero{grid-template-columns:1fr;padding:24px 22px;text-align:center}
  .cf-hero .cf-ill{max-width:112px;margin:4px auto 0}
  .cf-hero-strip{justify-content:center;text-align:center}
  .cf-scorekaart{padding:22px 18px}
  .cf-res-grid{grid-template-columns:1fr}
  .cf-duo .cf-zij{flex-direction:column}
  /* B8 — zonder deze regel bleef flex:1 1 260px uit de 900px-laag staan. In een
     KOLOM is die 260px geen breedte maar een HOOGTE: de woningkaart werd op
     precies 260px afgekapt (hij heeft overflow:hidden) en daarmee viel het hele
     labelblok mobiel weg. De kaarten krijgen hier hun eigen inhoudshoogte terug. */
  .cf-duo .cf-zij>*{flex:0 0 auto}
  /* Voltooide onderdelen als inklapbare regels boven de actieve vraaggroep. */
  .cf-mobielsam{display:block;background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:2px 14px;margin-bottom:8px}
  /* ── B3 — chunking BINNEN een onderdeel ───────────────────────────────────
     Eén categorie was op mobiel nog een lijst van bijna 3.000px. Een beantwoorde
     vraag klapt daarom in tot dezelfde compacte samenvattingsregel als een
     voltooid onderdeel, zodat er steeds één open vraag in beeld staat; tikken op
     de regel klapt hem weer uit. Dit is UITSLUITEND presentatie: de vraag, de
     kaarten en de foutregel blijven volledig in de DOM staan (verborgen-maar-
     aanwezig), de conditie- en wislogica merken er niets van, en de
     samenvattingsregel staat als LAATSTE kind zodat de aria-koppelingen op hun
     bestaande plek blijven — hij wordt alleen visueel naar voren gehaald. */
  .cf-vraagblok{display:flex;flex-direction:column}
  .cf-vraagsam{display:flex;order:-1}
  /* Slotronde nit 2 — de teller hoort bij de vraag die open staat en volgt
     daarom exact dezelfde standen als de vraagtekst en de kaarten hieronder:
     ingeklapt of nog niet aan de beurt = ook geen teller. */
  .cf-vraagblok>.cf-vraagteller{display:block}
  .cf-vraagblok.is-ingeklapt>.cf-vraagteller,
  .cf-vraagblok.is-wachtend>.cf-vraagteller{display:none}
  .cf-vraagblok.is-ingeklapt>.cf-vraag,
  .cf-vraagblok.is-ingeklapt>.cf-help,
  .cf-vraagblok.is-ingeklapt>.cf-kaarten{display:none}
  .cf-vraagblok.is-ingeklapt{margin-bottom:8px}
  /* Nog niet aan de beurt: de vraag staat volledig in de DOM maar nog niet in
     beeld. Zo staat er binnen een onderdeel altijd precies één vraag open. De
     foutregel wordt hier BEWUST niet verborgen — een melding mag nooit achter
     een dichtgeklapt blok verdwijnen. */
  .cf-vraagblok.is-wachtend>.cf-vraag,
  .cf-vraagblok.is-wachtend>.cf-help,
  .cf-vraagblok.is-wachtend>.cf-kaarten{display:none}
  .cf-vraagblok.is-wachtend{margin-bottom:0}
  /* Tikvlakken ruim boven 44px op mobiel. */
  .cf-card{min-height:60px;padding:15px}
  .cf-link-knop{padding:11px 6px}
  .cf-num{max-width:100%}
  .cf-foot{flex-direction:column-reverse;align-items:stretch}
  .cf-foot .btn-back,.cf-foot .btn-next{width:100%;justify-content:center}
  .cf-adresgrid{grid-template-columns:1fr}
  .cf-trustrij{gap:12px 20px}
  .cf-trust-i{font-size:12.5px}
  .cf-balk-labels{font-size:10.5px}
  .cf-res-punten{font-size:32px}
  .cf-viz{max-width:280px;height:280px}
  .cf-viz-i{width:46px;height:46px;margin:-23px 0 0 -23px}
  .cf-viz-i svg{width:22px;height:22px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   F03C-PUNCHLIST — P1 (centrale analysewerkruimte) + P3 (beperkte polish).
   Toegevoegd ná het bestaande F03C-blok, dus ná de media-lagen daarvan. Elke
   basisregel hieronder die een eigenschap zet die dáár in een media query staat,
   krijgt daarom een eigen media-tegenhanger onderaan dit blok — anders zou een
   latere basisregel de eerdere mobiele regel overrulen.
   Geen nieuwe kleuren: navy/goud/crème en de bestaande tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── P1 · de werkruimte ──────────────────────────────────────────────────────
   Een gecentreerde zone van ±1160px met ruime buitenmarge en een ZACHT
   papiervlak eronder: half-transparant wit op de crème pagina, grote radius,
   hairline rand en een schaduw die je eerder voelt dan ziet. Bewust géén
   gesloten formulierkaart — de losse kaarten houden binnen deze zone hun eigen
   vorm, het vlak begrenst alleen de werkzone. */
.cf-sectie{padding:56px 32px 76px}
.cf-si{max-width:1248px}
.cf-werkruimte{max-width:1160px;margin:0 auto;padding:34px 44px 42px;
  background:rgba(255,255,255,.55);border:1px solid rgba(10,24,52,.07);
  border-radius:28px;
  box-shadow:0 1px 2px rgba(12,31,63,.03),0 26px 52px -42px rgba(12,31,63,.3)}
/* De kop en de voortgangsbalk staan bínnen de zone en horen er dus ook bij. */
.cf-intro{margin-bottom:20px}
.cf-steps{margin-bottom:36px}

/* §5 — alle vijf de stappen delen dezelfde contentkolom, dezelfde uitlijning en
   hetzelfde verticale ritme. Het resultaat mag iets breder: dat is een rapport,
   geen formulier — maar het blijft binnen dezelfde zonetaal en op dezelfde
   middenlijn. */
.cf-screen{max-width:960px;margin:0 auto}
#cf-s5{max-width:1040px}
.cf-screen>.cf-h{margin:0 0 8px}
.cf-screen>.cf-lead{margin-bottom:24px}
.cf-screen .cf-foot{margin-top:32px}
/* De staptitel krijgt tabindex="-1" voor de focusverplaatsing (§24). Dat is de
   bekende "skip-link-doel"-constructie: de kop is GEEN bedieningselement, staat
   niet in de tabvolgorde en kan alleen focus krijgen doordat de flow hem er zelf
   op zet — om een schermlezer de nieuwe stap te laten aankondigen. WCAG 2.4.7
   (Focus Visible) gaat over toetsenbord-bedienbare onderdelen; een ring om een
   hele kopregel voegt hier niets toe en leest als een foutmelding. De echte
   bedieningselementen (knoppen, kaarten, velden) houden hun focusring
   onverkort — zie de focus-visible-regels in het blok hierboven.
   De selector hangt aan het ID-PATROON van de staptitels (cf-h-s1 … cf-h-s5) en
   niet aan een klasse: scherm 5 zet dezelfde id op de kop van de herokaart, en
   die draagt een andere klasse. */
[id^="cf-h-s"][tabindex="-1"]:focus,[id^="cf-h-s"][tabindex="-1"]:focus-visible{outline:none}

/* ── scherm 1 + 2 · de twee kolommen als ÉÉN werkgebied ──────────────────────
   De vraagkolom en de hulpkolom deelden alleen een gat van 40px en lazen als
   twee losse dingen op een leeg vlak. Ze staan nu op één gedeeld vlak met een
   scheidingslijn ertussen: één compositie, minder lege horizontale ruimte. */
.cf-duo{grid-template-columns:minmax(0,1fr) 312px;gap:0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden}
.cf-duo>.cf-main{padding:26px 28px 28px}
.cf-duo>.cf-zij{padding:24px 26px 26px;background:var(--cf-creme);
  border-left:1px solid var(--border);align-self:stretch}
/* Binnen dat gedeelde vlak geen kaart-in-een-kaart meer: het adrespaneel en de
   uitlegkaart zijn hier vlakken zonder eigen rand. */
.cf-duo .cf-paneelkaart{background:transparent;border:none;box-shadow:none;
  border-radius:0;padding:0}
.cf-duo .cf-zij>.cf-hulpkaart{background:transparent;border:none;padding:0}
.cf-duo .cf-zij>*+*{padding-top:18px;border-top:1px solid var(--border)}
.cf-duo .cf-bron{text-align:left;margin-top:16px}
/* Boven de eerste vraag hoorde geen scheidingslijn te staan. .cf-field:first-of-type
   greep niet: het eerste div-kind van de kolom is het mobiele woninganker, dus
   het eerste .cf-field is nooit het eerste div van zijn type. Beide gevallen
   worden hier expliciet afgevangen. */
.cf-duo .cf-main>.cf-field:first-of-type,
.cf-duo .cf-main>.cf-mobielanker+.cf-field{border-top:none;padding-top:0}
/* De trustregel is een geruststelling, geen onderdeel van de taak: ondergeschikt
   in gewicht en dichter tegen de compositie aan. */
#cf-s1 .cf-trustrij{margin-top:20px;padding-top:0;border-top:none;gap:9px 24px;
  justify-content:flex-start}
#cf-s1 .cf-trust-i{font-size:12.5px;opacity:.88}
#cf-s1 .cf-trust-i svg{width:15px;height:15px}

/* ── scherm 3 · één horizontale werkruimte ───────────────────────────────────
   Onderdelennavigatie · actieve vragen · uitleg staan naast elkaar op het
   papiervlak van de werkruimte. De vraagzone in het midden is als enige een wit
   vlak: daar werkt de gebruiker, dus dat is de primaire focus. */
.cf-trio{grid-template-columns:184px minmax(0,1fr) 236px;gap:20px}
.cf-trio>.cf-main{background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px 26px 26px}
.cf-trio .cf-main .cf-sam{background:transparent;border:none;box-shadow:none;padding:0}
.cf-trio>.cf-zij>.cf-hulpkaart{background:rgba(255,255,255,.72)}

/* ── scherm 4 · gecentreerd, niet overmatig breed ───────────────────────────── */
#cf-s4 .cf-analyse{max-width:640px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:30px 34px 34px}
#cf-s4 .cf-weetje{background:var(--cf-creme);border-color:transparent}

/* ── P3 · selectiestanden (§20) ──────────────────────────────────────────────
   Betekenis nooit alleen via kleur: de gekozen kaart houdt zijn vinkje en zijn
   aria-pressed en krijgt daar bovenop een dubbele navy rand plus de lichte
   navy-tint. */
.cf-card.on{border-color:var(--navy);background:var(--navy-light);
  box-shadow:inset 0 0 0 1px var(--navy)}
.cf-card.on:hover{box-shadow:inset 0 0 0 1px var(--navy),var(--shadow)}
.cf-card:hover .cf-card-i{opacity:.92}
/* Vaste icooncontainer: een icoon mag nooit layout shift veroorzaken, ook niet
   als de SVG ontbreekt. Per vraag is het alles-of-niets, dus binnen één vraag
   beginnen alle kaarten op dezelfde lijn. */
.cf-card-i{flex:0 0 32px;width:32px;height:32px}
/* Een afgerond onderdeel in de navigatie: het vinkje blijft de drager, het
   gouden randaccent maakt het op een rij ook zonder lezen zichtbaar. */
.cf-catknop.is-compleet{border-color:var(--amber)}
.cf-catknop.is-compleet:hover{border-color:var(--gold-deep)}
.cf-catknop.is-compleet.is-actief{border-color:var(--navy)}

/* ── §11 · mobiel: volle breedte, geen container-in-container ────────────────
   Op smal scherm IS de pagina de werkruimte. Het papiervlak, de gedeelde
   duo-/trio-vlakken en de kaart om scherm 4 vallen weg; de kaarten die binnen
   die vlakken hun rand hadden ingeleverd, krijgen hem hier terug. Zo staat er
   nooit een kader in een kader en ontstaat er geen horizontale overflow. */
@media(max-width:900px){
  .cf-sectie{padding:44px 20px 58px}
  .cf-si{max-width:none}
  .cf-werkruimte{max-width:none;padding:0;background:none;border:none;
    border-radius:0;box-shadow:none}
  .cf-screen,#cf-s5{max-width:none}
  .cf-duo,.cf-trio{grid-template-columns:1fr;gap:24px}
  .cf-duo{background:transparent;border:none;box-shadow:none;border-radius:0;
    overflow:visible}
  .cf-duo>.cf-main{padding:0}
  .cf-duo>.cf-zij{padding:0;background:transparent;border-left:none}
  .cf-duo .cf-zij>*+*{padding-top:0;border-top:none}
  .cf-duo .cf-paneelkaart{background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:24px 22px;box-shadow:var(--shadow)}
  .cf-duo .cf-zij>.cf-hulpkaart{background:rgba(255,255,255,.62);
    border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}
  .cf-duo .cf-bron{text-align:center}
  .cf-trio>.cf-main{background:transparent;border:none;box-shadow:none;padding:0}
  .cf-trio .cf-main .cf-sam{background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow)}
  #cf-s4 .cf-analyse{background:transparent;border:none;box-shadow:none;padding:0}
  #cf-s4 .cf-weetje{background:rgba(255,255,255,.7);border-color:var(--border)}
  #cf-s1 .cf-trustrij{justify-content:center;margin-top:24px}
}
@media(max-width:600px){
  .cf-sectie{padding:34px 16px 48px}
  .cf-intro{margin-bottom:16px}
  .cf-steps{margin-bottom:30px}
  .cf-duo .cf-paneelkaart{padding:20px 18px}
  .cf-screen>.cf-lead{margin-bottom:20px}
  #cf-s1 .cf-trustrij{gap:10px 18px}
}

/* ═══ D03B — BAG-OBJECTDATA OP SCHERM 2 ══════════════════════════════════════
   Volledig ADDITIEF: er wordt geen bestaande regel gewijzigd of overschreven.
   Alleen de nieuwe BAG-regel, zijn statusregel en de gereserveerde ruimte
   eronder. De reservering (min-height) voorkomt dat de pagina verspringt als de
   BAG-gegevens progressief binnenvallen — precies zoals bij het labelblok. */
/* GEMETEN, niet geschat (headless Chrome op de echte driver, scherm 2 met
   BAG-data): het BAG-blok is 172px hoog op 1440px en 213px op 375px; de
   m²-invoerrij die op dat moment juist verdwijnt is 44px. Gereserveerd wordt
   daarom het VERSCHIL — 128px resp. 169px. Precies dan is de netto verschuiving
   nul op de gewone route: de wrap groeit met 44px terwijl de invoerrij met 44px
   krimpt. Zou hier de volle blokhoogte staan, dan sprong de pagina alsnog 44px
   omhoog. */
.cf-bagslot{min-height:128px}
/* Staat vast dat er geen BAG-gegevens komen, dan valt de gereserveerde ruimte
   weer weg: een blijvend gat onder een leeg blok is lelijker dan de sprong die
   de reservering voorkomt. De klasse wordt door cfRenderScherm2() gezet. */
.cf-bagslot.is-klaar{min-height:0}
.cf-bagblok{margin-top:2px}
.cf-bagregel{font-size:14px;font-weight:600;color:var(--navy);margin-top:10px}
.cf-bagstatus{font-size:13px;color:var(--slate);margin-top:3px}
.cf-bagblok .cf-secundair{margin-top:12px}
.cf-bagblok .cf-link-knop{display:inline-block;margin-top:8px}
#cf-bj-bag{margin-top:9px}
@media(max-width:600px){
  .cf-bagslot{min-height:169px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   F03D — VERBETERPOTENTIEEL (scherm 6), VERVOLGSTAPPEN (scherm 7), LEADROUTE
   ═══════════════════════════════════════════════════════════════════════════
   Volledig ADDITIEF. Er wordt geen bestaande regel gewijzigd of overschreven en
   er komt geen nieuwe hexwaarde bij: alles gebruikt de bestaande designtokens
   (--navy, --amber, --border, --slate, --radius…) en de bestaande kaart-,
   knop- en formulierklassen. */

/* De secundaire tekstlinks onder de contextuele vervolgstap op scherm 5. */
.cf-vervolg-sec{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px}

/* ── scherm 6: de scenariokaarten ──────────────────────────────────────── */
.cf-scen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;
  margin-bottom:16px}
.cf-scen-grid .cf-kaart{margin-bottom:0;display:flex;flex-direction:column}
.cf-scen-merk{display:inline-block;align-self:flex-start;margin-bottom:8px;padding:3px 9px;
  border-radius:var(--radius-pill);background:var(--navy-light);color:var(--navy);
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.cf-kaart-actie .cf-scen-merk{background:var(--amber);color:var(--navy)}
.cf-scen-rij{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.cf-scen-l{color:var(--slate);white-space:nowrap}
.cf-scen-w{font-weight:600;color:var(--navy);text-align:right;white-space:nowrap}
.cf-scen-w.is-nieuw{font-family:'Fraunces',serif;font-size:16px;font-weight:900}
.cf-scen-delta{font-family:'Fraunces',serif;font-size:19px;font-weight:900;color:var(--navy);
  margin:10px 0 6px}
.cf-scen-segment{font-size:14px;font-weight:600;color:var(--navy);margin-top:6px}
.cf-scen-noot{font-size:12.5px;color:var(--slate);margin:4px 0 6px}
.cf-scen-kaart .cf-conf-schaal{margin-top:2px}
.cf-scen-kaart .cf-res-boven{margin-top:auto;padding-top:10px}

/* ── scherm 7: de vier routes ──────────────────────────────────────────── */
.cf-route-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;
  margin-bottom:16px}
.cf-route-lijst .cf-kaart{margin-bottom:0;display:flex;flex-direction:column}
.cf-route .cf-kaart-p{flex:1 1 auto}
.cf-route .btn-next,.cf-route .cf-secundair{margin-top:12px;align-self:flex-start}
/* De contextueel relevante route staat vooraan én weegt visueel het zwaarst;
   de overige drie blijven volwaardig bereikbaar als outline-knop. */
.cf-route.is-primair{grid-column:1/-1;box-shadow:var(--shadow)}

/* ── het inline leadformulier ──────────────────────────────────────────── */
.cf-lead .cf-lead-veld{margin-top:14px}
.cf-lead .cf-lead-veld .cf-qlbl{font-size:14.5px}
.cf-lead .inp{max-width:420px}
.cf-lead textarea.inp{min-height:78px;resize:vertical}
.cf-lead .btn-next{margin-top:18px}
.cf-lead .cf-link-knop{margin-left:14px}
/* Honeypot: onzichtbaar voor mensen, wél in de DOM voor bots. Bewust geen
   display:none — dat slaan veel bots juist over. */
.cf-lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-lead-ctx{margin-top:18px;padding:14px 16px;background:var(--navy-light);
  border-radius:var(--radius-sm)}
.cf-lead-ctx .cf-sam-rij{border-color:rgba(12,31,63,.08)}

@media(max-width:600px){
  .cf-scen-grid,.cf-route-lijst{grid-template-columns:1fr}
  .cf-vervolg-sec{flex-direction:column;gap:4px}
  .cf-route .btn-next,.cf-route .cf-secundair{width:100%;justify-content:center;align-self:stretch}
  .cf-lead .inp{max-width:none}
}

/* ═══ VA-021 — GEEN INZOOMENDE VELDEN OP iOS/iPadOS ═══════════════════════════
   Safari op iOS zoomt de pagina in zodra een invoerveld met een lettergrootte
   onder 16px focus krijgt (.inp staat op 15px), en die zoom blijft staan nadat
   het veld is losgelaten: de gebruiker scrolt daarna in een ingezoomde pagina.
   Alleen de velden van de analyseschermen 1 t/m 3 krijgen daarom 16px op smal
   scherm én op elk touchapparaat (ook een iPad in landscape of een iPad Pro in
   portrait, die breder zijn dan 900px) — alles buiten de flow blijft exact wat
   het was. VA-022 (managerbesluit): dezelfde regel geldt nu ook voor het
   leadformulier op scherm 7 (#cf-s7), het formulier waar VA-022 over gaat.
   Bewust GEEN maximum-scale in de viewport-meta: dat zou inzoomen voor
   iedereen blokkeren, ook voor wie het nodig heeft. */
@media(max-width:900px),(pointer:coarse){
  #cf-s1 .inp,#cf-s2 .inp,#cf-s3 .inp,#cf-s7 .inp{font-size:16px}
}

/* ═══ VA-023 — RESULTAATSCHERM (scherm 5): vervolgstap, hiërarchie, toegankelijkheid ══
   GO-2 Robin 06-10-2026, UITSLUITEND scherm 5. Volledig ADDITIEF en achteraan: er
   wordt geen bestaande regel gewijzigd. Elke selector hangt aan #cf-s5 of aan een
   element dat alleen op scherm 5 bestaat (#cf-res-*, #contact-kop na de scherm
   5-knop), zodat scherm 1-4, 6 en 7 ongewijzigd renderen. Geen nieuwe hexwaarde:
   alleen de tokens uit :root. */

/* F-1 — score en "Je volgende stap" als één blok, direct na de score en vóór het
   raster; vanaf 901px naast elkaar (score iets breder), daaronder onder elkaar. */
#cf-s5 .cf-res-top{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:14px}
#cf-s5 .cf-res-top>.cf-scorekaart{margin-bottom:0}
#cf-s5 #cf-res-vervolg{margin-bottom:0;padding:20px 22px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--amber-light) 0%,var(--white) 100%);
  border:1.5px solid var(--amber);border-left:6px solid var(--amber);box-shadow:var(--shadow)}
#cf-s5 #cf-res-vervolg>.cf-kaart-t{font-size:19px;margin-bottom:6px}
#cf-s5 #cf-res-vervolg .btn-next{width:100%;justify-content:center;text-align:center;
  margin-top:14px;min-height:48px;font-size:15.5px;font-weight:700}
#cf-s5 .cf-vervolg-regel{font-size:13px;line-height:1.5;color:var(--slate);margin-top:9px}
#cf-s5 .cf-vervolg-voet{display:block;font-size:12px;line-height:1.5;color:var(--slate);margin-top:3px}
#cf-s5 #cf-res-vervolg .cf-vervolg-sec{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--border)}
#cf-s5 #cf-res-vervolg .cf-vervolg-sec .cf-secundair{flex:1 1 210px;margin-top:0;border-color:var(--navy-mid)}
@media(min-width:901px){
  #cf-s5 .cf-res-top{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}
}

/* c2 — "Nog 1 stap: je vervolgopties", direct onder de voortgangsbalk (de balk
   zelf is niet aangeraakt). De negatieve bovenmarge brengt de afstand tot de balk
   van 36px (≤600: 30px) terug naar 12px, zoals in de mockup. */
#cf-s5 .cf-nog1{margin:-24px 0 26px;text-align:center;font-size:13.5px;font-weight:600;color:var(--navy)}
#cf-s5 .cf-nog1>span[aria-hidden]{color:var(--gold-deep);margin-right:4px}

/* (a2) — de primaire knop op scherm 5: navy tekst op de BESTAANDE amber→gold-deep-
   gradiënt (6,55:1 aan de amberkant, 4,70:1 aan de gold-deep-kant; de hover maakt
   de knop lichter en het contrast dus hoger). Scherm 1-4, 6 en 7 houden wit-op-goud
   (Manager-interpretatie van "uitsluitend scherm 5"; consistentie volgt bij de
   scherm 6/7-ronde). De disabled-stand blijft de bestaande regel (:not(:disabled)). */
#cf-s5 .btn-next:not(:disabled){color:var(--navy)}

/* Focus — 3px navy met 2px afstand (15,8-17,6:1), op alle bedieningselementen van
   scherm 5 (de oude amber-bright-rand haalde 1,60-1,79:1). */
#cf-s5 .btn-next:focus-visible,#cf-s5 .btn-back:focus-visible,#cf-s5 .cf-secundair:focus-visible,
#cf-s5 .cf-link-knop:focus-visible,#cf-s5 summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* F-3 — volwaardige secundaire knoppen en tikdoelen van minstens 44px, op elke
   breedte (ook iPad): de twee vervolgknoppen, "Aanpassen" en "← Nieuwe analyse". */
#cf-s5 .cf-secundair{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  text-align:center;line-height:1.3}
#cf-s5 .btn-back{min-height:44px}
#cf-s5 .cf-bron-rij .cf-link-knop{min-height:44px;padding:6px 8px}

/* F-2 — de onderste knop "Plan een gesprek met …" is secundair (geen bovenmarge in
   de voetregel). Na de klik krijgt de kop van #contact programmatisch de focus
   (tabindex="-1", zelfde constructie als de staptitels): geen ring om een kop. */
#cf-s5 .cf-foot .cf-secundair{margin-top:0}
#contact h2[tabindex="-1"]:focus,#contact h2[tabindex="-1"]:focus-visible{outline:none}

/* F-5 — R1: één primaire knop. De raster-WOZ-knop (#cf-woz-toevoegen) staat in de
   byte-beschermde JS en wordt UITSLUITEND hier secundair gestyled; zijn kaart wordt
   een gewone kaart. Tekst, bestemming en meting (complete_analysis) ongewijzigd. */
#cf-s5 #cf-res-woz{background:var(--white);border-color:var(--border)}
#cf-s5 #cf-woz-toevoegen:not(:disabled),#cf-s5 #cf-woz-toevoegen:not(:disabled):hover{
  background:var(--white);color:var(--navy);border:1.5px solid var(--border);box-shadow:none;filter:none;
  min-height:44px;padding:10px 16px;font-size:14px;font-weight:600}
#cf-s5 #cf-woz-toevoegen:not(:disabled):hover{border-color:var(--navy)}

@media(max-width:600px){
  /* F-1 mobiel — de hero-illustratie valt weg (±130px winst); tekst en focusdoel
     #cf-h-s5 blijven gelijk. Alleen de herokaart van scherm 5. */
  #cf-res-hero .cf-ill{display:none}
  #cf-s5 .cf-nog1{margin-top:-18px}
  #cf-s5 #cf-res-vervolg{padding:18px}
  #cf-s5 #cf-res-vervolg .cf-vervolg-sec{flex-direction:column}
  #cf-s5 #cf-res-vervolg .cf-vervolg-sec .cf-secundair{flex:0 0 auto;width:100%}
  #cf-s5 .cf-foot .cf-secundair{width:100%}
}

/* ═══ VA-023 — SCHERM 6/7 (vervolgschermen): stijl doorgetrokken, overgang, disclosure ══
   GO Robin 07-10-2026 (avond), B-0/B-1/B-5 basis/B-11. Volledig ADDITIEF en
   achteraan: er wordt geen bestaande regel gewijzigd. Elke selector hangt aan
   #cf-s6, #cf-s7 of aan #cf-steps.is-na-resultaat (die klasse zet cfRenderStappen
   uitsluitend op scherm 6 en 7), zodat scherm 1-5 ongewijzigd renderen. Geen
   nieuwe hexwaarde: alleen de tokens uit :root. */

/* B-1 (A1) — navy tekst op de BESTAANDE amber→gold-deep-gradiënt, zoals scherm 5
   (r.1450). De disabled-stand blijft de bestaande regel (:not(:disabled)). */
#cf-s6 .btn-next:not(:disabled),#cf-s7 .btn-next:not(:disabled){color:var(--navy)}

/* B-1 — focus 3px navy met 2px afstand op alle bedieningselementen, de velden en
   de privacylink van 6/7, en op de stapchips ná het resultaat. */
#cf-s6 .btn-next:focus-visible,#cf-s6 .btn-back:focus-visible,#cf-s6 .cf-secundair:focus-visible,
#cf-s6 .cf-link-knop:focus-visible,#cf-s7 .btn-next:focus-visible,#cf-s7 .btn-back:focus-visible,
#cf-s7 .cf-secundair:focus-visible,#cf-s7 .cf-link-knop:focus-visible,#cf-s7 .inp:focus-visible,
#cf-s7 a:focus-visible,#cf-steps.is-na-resultaat .cf-step:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
/* Programmatische focusdoelen (tabindex="-1"): de bevestiging na verzenden. */
#cf-s7 #cf-lead-ok:focus,#cf-s7 #cf-lead-ok:focus-visible{outline:none}

/* B-1 — tikdoelen van minstens 44px op elke breedte. */
#cf-s6 .btn-next,#cf-s7 .btn-next{min-height:44px}
#cf-s6 .cf-secundair,#cf-s7 .cf-secundair{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;text-align:center;line-height:1.3}
#cf-s6 .btn-back,#cf-s7 .btn-back{min-height:44px}
#cf-s6 .cf-link-knop,#cf-s7 .cf-link-knop{min-height:44px;padding:6px 8px}
#cf-steps.is-na-resultaat .cf-step{min-height:44px}

/* Alleen voor schermlezers: "(klaar)" op de stapchips en "(gekozen, formulier
   hieronder)" op de gekozen routeknop. */
#cf-steps .cf-sr-only,#cf-s7 .cf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* B-7 (D1) — de voortgangsregel direct ná de staptitel; de pijl is decoratief. */
#cf-s6 .cf-voortgang,#cf-s7 .cf-voortgang{font-size:13.5px;font-weight:600;color:var(--navy);margin:0 0 10px}
#cf-s6 .cf-voortgang>span[aria-hidden],#cf-s7 .cf-voortgang>span[aria-hidden]{color:var(--gold-deep);margin-right:5px}

/* B-5 basis — de overgangskaart "Hoe nu verder?" (meetneutraal). */
#cf-s6 .cf-brug{border:1.5px solid var(--navy-mid);border-left:6px solid var(--navy);box-shadow:var(--shadow);
  margin-top:18px}
#cf-s6 .cf-brug .cf-kaart-p strong{color:var(--navy)}
#cf-s6 .cf-brug .btn-next{margin-top:14px}

/* B-11 — de ene gedeelde, rustige disclosure boven de vier dienstkaarten. */
#cf-s7 .cf-route-disclosure{font-size:14px;line-height:1.55;color:var(--slate);max-width:66ch;
  margin:-12px 0 18px;padding-left:12px;border-left:3px solid var(--border)}

/* A1 — de routeknoppen: secundair met een navy-mid rand (zoals scherm 5); de
   gekozen knop bij een open formulier is gemarkeerd, het ✓ is decoratief. */
#cf-s7 .cf-route .cf-secundair{border-color:var(--navy-mid)}
#cf-s7 .cf-route .cf-secundair.is-gekozen{border-color:var(--navy);background:var(--navy-light)}
#cf-s7 .cf-gekozen-vink{margin-left:6px}

/* B-0/B-2 — W7: omkaderd, direct boven "Verstuur" (en boven een foutmelding). */
#cf-s7 .cf-lead-w7{margin-top:16px;padding:12px 14px;background:var(--white);border:1.5px solid var(--navy-mid);
  border-left:5px solid var(--navy);border-radius:var(--radius-sm);font-size:14px;line-height:1.55;
  color:var(--navy);max-width:620px}
#cf-s7 .cf-lead-w7 a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;font-weight:600}

/* Directe pad 5 → formulier: scherm 7 komt binnen met alleen een fade. De
   bestaande fiu-animatie schuift 14px; cfOpenRoute meet het formulier op t=0
   en het belandde daardoor 14px te hoog (fase 0 / ronde 2-analyse). cfOpenRoute
   zelf is ongewijzigd. */
#cf-s7.on{animation-name:cf-fi}
@keyframes cf-fi{from{opacity:0}to{opacity:1}}

@media(max-width:600px){
  /* Basis — op 6/7 blijven de staplabels voor schermlezers leesbaar (visueel
     verborgen in plaats van display:none). */
  #cf-steps.is-na-resultaat .cf-step .cf-step-t{display:inline;position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Compactere scenariokaart (alleen opmaak, geen getal anders). */
  #cf-s6 .cf-scen-kaart{padding:16px 16px 14px}
  #cf-s6 .cf-scen-kaart .cf-kaart-p{font-size:13.5px;line-height:1.5}
  #cf-s6 .cf-scen-rij{padding:5px 0}
  #cf-s6 .cf-scen-delta{font-size:18px;margin:8px 0 4px}
  #cf-s6 .cf-brug .btn-next{width:100%;justify-content:center}
  /* Voet in DOM-volgorde (overschrijft column-reverse uitsluitend op 6/7). */
  #cf-s6 .cf-foot,#cf-s7 .cf-foot{flex-direction:column}
  #cf-s6 .cf-foot .btn-back,#cf-s7 .cf-foot .btn-back,#cf-s7 .cf-foot .cf-link-knop{width:100%;justify-content:center}
  #cf-s7 #cf-advies-calendly{width:100%}
  #cf-s7 .cf-lead .btn-next{width:100%;justify-content:center}
  #cf-s7 .cf-lead .cf-link-knop{margin-left:0;width:100%}
}