:root{
  --ink:#17323a;
  --ink-2:#254650;
  --green:#0f8f76;
  --green-dark:#08705e;
  --mint:#dff4ec;
  --cream:#f7f8f4;
  --paper:#ffffff;
  --line:#dfe8e5;
  --muted:#6b7f85;
  --navy:#123741;
  --dark:#0b2d35;
  --shadow:0 22px 60px rgba(16,48,57,.12);
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  background:#fff;
  line-height:1.55;
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.section{padding:96px 0}
h1,h2,h3,h4{font-family:Manrope,Inter,sans-serif;line-height:1.12;margin:0;color:var(--ink)}
h1{font-size:clamp(48px,6vw,78px);letter-spacing:-3px}
h2{font-size:clamp(34px,4vw,52px);letter-spacing:-1.7px}
h3{font-size:22px}
p{color:var(--muted)}
.eyebrow{
  display:inline-block;
  color:var(--green);
  font-weight:800;
  font-size:12px;
  letter-spacing:1.55px;
  margin-bottom:17px;
}
.eyebrow.light{color:#93e5d2}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 22px;
  border-radius:12px;
  font-weight:700;
  border:1px solid transparent;
  transition:.22s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 12px 26px rgba(15,143,118,.20)}
.btn-primary:hover{background:var(--green-dark)}
.btn-secondary{background:#fff;color:var(--ink);border-color:#ccd9d5}
.btn-light{background:#fff;color:var(--dark)}
.btn-outline-light{border-color:rgba(255,255,255,.45);color:#fff}
.btn-small{min-height:42px;padding:0 16px;font-size:13px}
.full{width:100%}

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(210,225,221,.7);
}
.nav-wrap{height:78px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand-mark{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--green);color:#fff;font-family:Manrope;font-weight:800;font-size:14px;
}
.brand strong{display:block;font-family:Manrope;font-size:16px;line-height:1.1}
.brand small{display:block;font-size:10px;color:#7a9095;margin-top:3px}
.main-nav{display:flex;gap:26px;margin-left:auto}
.main-nav a{font-size:13px;font-weight:600;color:#486068}
.main-nav a:hover{color:var(--green)}
.nav-actions{display:flex;align-items:center;gap:15px}
.login-link{font-size:13px;font-weight:600}
.mobile-menu{display:none;background:none;border:0;font-size:24px;color:var(--ink)}

.hero{
  min-height:720px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 30%, rgba(15,143,118,.10), transparent 28%),
    linear-gradient(180deg,#f8faf7 0%,#ffffff 100%);
}
.hero-grid{min-height:720px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:70px}
.hero-copy{padding:70px 0}
.hero-copy h1 span{color:var(--green)}
.hero-intro{font-size:19px;max-width:650px;margin:25px 0 30px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.trust-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:29px;color:#577078;font-size:12px;font-weight:600}
.hero-visual{position:relative;min-height:540px;display:grid;place-items:center}
.building-card{
  width:470px;max-width:100%;
  background:#fff;border-radius:30px;padding:14px;
  box-shadow:0 36px 80px rgba(26,65,75,.16);
  transform:rotate(1deg);
}
.building-image{height:255px;border-radius:20px;position:relative;overflow:hidden;background:#dbeceb}
.sky{position:absolute;inset:0;background:linear-gradient(#cce4e7,#eef4ed 72%)}
.building{
  position:absolute;left:78px;right:70px;bottom:0;height:205px;
  background:#e6dfd4;border:1px solid rgba(74,83,78,.16);
  box-shadow:0 7px 14px rgba(29,54,55,.12)
}
.roof{height:16px;background:#555e5b;transform:translateY(-11px);margin:-2px -6px 0}
.floor{height:52px;border-bottom:1px solid rgba(80,90,87,.12);display:grid;grid-template-columns:repeat(4,1fr);gap:19px;padding:12px 25px}
.floor i{background:#6b8386;border:4px solid #faf8f1;box-shadow:inset 0 0 0 1px #475f64}
.entrance{width:36px;height:54px;background:#5f7474;position:absolute;bottom:0;left:50%;transform:translateX(-50%);border:5px solid #f7f2e8}
.trees{position:absolute;left:18px;right:15px;bottom:0;display:flex;justify-content:space-between;align-items:flex-end}
.trees i{display:block;width:34px;height:74px;background:#52776d;border-radius:55% 45% 45% 55%;box-shadow:0 0 0 7px rgba(82,119,109,.13)}
.plan-card{padding:22px 15px 12px}
.plan-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}
.plan-head span{display:block;font-size:10px;color:#7d9196;text-transform:uppercase;font-weight:800}
.plan-head strong{display:block;margin-top:2px}
.status{background:var(--mint);color:var(--green)!important;padding:6px 9px;border-radius:999px}
.plan-line{display:grid;grid-template-columns:54px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid #edf1ef;font-size:12px}
.plan-line b{color:var(--green)}
.reserve{display:flex;justify-content:space-between;align-items:flex-end;margin-top:15px;background:#f3f8f5;padding:14px;border-radius:14px}
.reserve span{font-size:11px;color:#6a8085}
.reserve strong{font-size:19px}.reserve small{font-size:10px;font-weight:500}
.float-chip{
  position:absolute;background:white;border-radius:15px;box-shadow:0 18px 38px rgba(26,65,75,.15);
  padding:12px 16px;display:flex;align-items:center;gap:8px
}
.float-chip b{font-family:Manrope;color:var(--green)} .float-chip span{font-size:10px;color:#76898e}
.chip-one{left:-5px;top:92px}.chip-two{right:-18px;bottom:88px}

.section-heading{max-width:760px;margin-bottom:42px}
.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}
.section-heading p{font-size:17px}
.audience{background:#fff}
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.audience-card{
  border:1px solid var(--line);border-radius:20px;padding:28px 25px;transition:.2s;background:#fff
}
.audience-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#c5ddd5}
.icon-box{width:52px;height:52px;border-radius:15px;background:#edf7f3;display:grid;place-items:center;font-size:25px;margin-bottom:24px}
.audience-card h3{font-size:18px;margin-bottom:9px}.audience-card p{font-size:13px;min-height:60px}
.audience-card a{font-weight:700;color:var(--green);font-size:12px}

.wizard-section{background:var(--cream)}
.wizard-shell{
  display:grid;grid-template-columns:1.7fr .8fr;background:#fff;border-radius:28px;overflow:hidden;
  box-shadow:0 28px 70px rgba(27,69,75,.11);border:1px solid #e5ece9
}
.wizard-left{padding:38px 42px}
.progress-top{display:flex;justify-content:space-between;font-size:11px;color:#758a8f;font-weight:700}
.progress-bar{height:6px;background:#e9efed;border-radius:999px;margin:10px 0 33px;overflow:hidden}
.progress-bar div{height:100%;width:25%;background:var(--green);transition:.35s}
.wizard-step{display:none;min-height:380px}.wizard-step.active{display:block}
.question-number{font-family:Manrope;font-size:12px;color:var(--green);font-weight:800}
.wizard-step h3{font-size:28px;margin-top:6px}.wizard-step>p{margin-top:8px}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
.choice{
  min-height:92px;text-align:left;padding:16px;border:1px solid #dbe5e2;background:#fff;border-radius:15px;cursor:pointer;color:var(--ink)
}
.choice span{font-size:23px;margin-right:7px}.choice strong{display:block;font-size:14px}.choice small{display:block;color:#829398;margin-top:4px}
.choice.active{border-color:var(--green);box-shadow:0 0 0 2px rgba(15,143,118,.10);background:#f6fbf9}
.building-choice .choice{position:relative;padding-left:52px}.building-choice .choice span{position:absolute;left:16px;top:17px}
.toggle-list{display:grid;gap:8px;margin-top:20px}
.toggle-list label{display:flex;gap:12px;align-items:center;border:1px solid #e0e8e6;border-radius:14px;padding:11px 13px;cursor:pointer}
.toggle-list input{accent-color:var(--green);width:18px;height:18px}
.toggle-list span b,.toggle-list span small{display:block}.toggle-list span b{font-size:13px}.toggle-list span small{font-size:10px;color:#84959a}
.condition-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
.condition{border:1px solid #dce5e2;background:#fff;border-radius:15px;padding:18px;text-align:left;cursor:pointer}
.condition span{color:#54b18f;font-size:16px}.condition b,.condition small{display:block}.condition b{margin-top:7px}.condition small{color:#809298;margin-top:3px;font-size:10px}
.condition.active{border-color:var(--green);background:#f6fbf9;box-shadow:0 0 0 2px rgba(15,143,118,.10)}
.wizard-nav{display:flex;justify-content:space-between;margin-top:25px}
.wizard-summary{background:var(--dark);color:#fff;padding:36px 30px}
.wizard-summary h3{color:#fff;font-size:27px;margin:11px 0 20px}
.summary-tag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:1.4px;padding:6px 9px;border-radius:999px;color:#a9ebdb;background:rgba(255,255,255,.08)}
.wizard-summary dl{margin:0}.wizard-summary dl div{display:flex;justify-content:space-between;padding:8px 0;font-size:11px;border-bottom:1px solid rgba(255,255,255,.08)}
.wizard-summary dt{color:#9eb1b5}.wizard-summary dd{margin:0;font-weight:700}
.summary-divider{height:1px;background:rgba(255,255,255,.1);margin:23px 0}
.count-result span,.cost-card span,.reserve-card span{display:block;color:#9fb6ba;font-size:10px}.count-result strong{display:block;font-size:17px;margin-top:3px}
.cost-card,.reserve-card{border-radius:16px;padding:17px;margin-top:14px}
.cost-card{background:rgba(255,255,255,.07)}.reserve-card{background:var(--green)}
.cost-card strong,.reserve-card strong{display:block;font-family:Manrope;font-size:26px;margin-top:3px}.cost-card small,.reserve-card small{font-size:9px;color:#b4c5c8}
.reserve-card small{color:#d9fff6}
.summary-note{font-size:9px;color:#91a7ab;margin-top:19px;line-height:1.55}

.puzzle{background:#fff}
.puzzle-panel{background:var(--dark);color:#fff;border-radius:28px;padding:48px;overflow:hidden}
.puzzle-copy{max-width:630px}.puzzle-copy h2{color:#fff}.puzzle-copy p{color:#a9bec2;font-size:16px}
.flow{display:grid;grid-template-columns:repeat(9,auto);align-items:center;justify-content:space-between;gap:10px;margin-top:43px}
.flow-step{min-width:145px;padding:17px;border-radius:16px;background:rgba(255,255,255,.07)}
.flow-step span{display:block;font-size:9px;color:#8db4ac}.flow-step b{display:block;color:#fff;margin:3px 0}.flow-step small{color:#99afb3}
.flow-step.accent{background:var(--green)}
.flow i{color:#6c8b90;font-style:normal}

.example{background:#f9faf8}
.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.example p{font-size:16px;max-width:560px}
.mini-table{margin-top:30px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.mini-table>div{display:grid;grid-template-columns:72px 1fr 110px;padding:12px 16px;font-size:12px;border-bottom:1px solid #edf1ef}
.mini-table>div:last-child{border-bottom:0}.mini-table strong{text-align:right}.mini-head{background:#f0f5f2;font-size:9px!important;font-weight:800;color:#708287;text-transform:uppercase}
.chart-panel{background:#fff;border:1px solid #e0e8e6;border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.chart-title{display:flex;justify-content:space-between}.chart-title span{display:block;color:#7b9095;font-size:9px;text-transform:uppercase;font-weight:800}.chart-title strong{display:block;margin-top:4px}
.chart-badge{background:#edf6f2;padding:7px 9px;border-radius:999px;color:var(--green)!important}
.bars{height:250px;display:flex;align-items:end;gap:12px;border-bottom:1px solid #dce5e2;margin-top:24px;padding:0 4px}
.bars div{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:6px}
.bars span{width:100%;background:linear-gradient(180deg,#22a488,#7fd2bd);border-radius:6px 6px 0 0}
.bars small{font-size:8px;color:#84969a}
.chart-result{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.chart-result div{background:#f5f8f6;border-radius:13px;padding:12px}.chart-result span{display:block;font-size:9px;color:#7e9095}.chart-result strong{font-size:14px}

.routes{background:#fff}
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.route-card{border:1px solid var(--line);border-radius:22px;padding:28px;position:relative}
.route-card.featured{border-color:var(--green);box-shadow:0 18px 45px rgba(15,143,118,.12)}
.route-label{color:var(--green);font-size:9px;font-weight:800;letter-spacing:1.2px}.route-card h3{margin:11px 0}.route-card p{font-size:13px;min-height:63px}
.route-card ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:8px;color:#5c7379;font-size:12px}
.popular{position:absolute;right:18px;top:18px;background:var(--green);color:#fff;font-size:8px;font-weight:800;border-radius:999px;padding:6px 9px}

.inspection{background:var(--cream)}
.inspection-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.inspection-visual{min-height:460px;display:grid;place-items:center;background:radial-gradient(circle,#d7ece4 0,transparent 65%)}
.tablet{width:340px;background:#1c2b30;border:8px solid #253b41;border-radius:27px;padding:8px;box-shadow:0 26px 60px rgba(16,55,60,.25);transform:rotate(-3deg)}
.tablet-bar{height:42px;background:#f4f7f5;border-radius:12px 12px 0 0;padding:12px;font-size:10px;display:flex;justify-content:space-between}.tablet-bar span{color:var(--green)}
.tablet-body{background:#fff;border-radius:0 0 12px 12px;padding:18px;min-height:330px}.tiny-label{font-size:8px;color:var(--green);font-weight:800}.tablet-body h4{font-size:18px;margin:5px 0 17px}
.finding{display:flex;align-items:center;gap:11px;border:1px solid #e2e8e6;border-radius:12px;padding:12px;margin-bottom:10px}.finding span{font-size:18px}.finding b,.finding small{display:block}.finding b{font-size:10px}.finding small{font-size:8px;color:#84969a}
.tablet-body button{border:0;background:var(--green);color:#fff;border-radius:9px;padding:10px;width:100%;font-size:10px;font-weight:700;margin-top:6px}
.inspection-copy p{font-size:16px}.checklist{display:grid;gap:11px;margin:25px 0;color:#526c73;font-size:13px}.checklist span::first-letter{color:var(--green)}

.pro{background:#fff}
.pro-panel{background:linear-gradient(135deg,#0d3038,#164954);border-radius:30px;display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:55px;color:#fff;overflow:hidden}
.pro-copy h2{color:#fff}.pro-copy p{color:#a9c0c4}.pro-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.pro-tags span{font-size:9px;background:rgba(255,255,255,.08);padding:7px 9px;border-radius:999px;color:#d0dfe1}
.dashboard{background:#f6f8f7;border-radius:18px;padding:18px;color:var(--ink);box-shadow:0 28px 70px rgba(0,0,0,.2);transform:rotate(2deg)}
.dash-top{display:flex;align-items:center;gap:15px;font-size:10px}.dash-top b{background:var(--green);color:#fff;padding:7px;border-radius:7px}.dash-top i{margin-left:auto;color:var(--green)}
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.dash-kpi{background:#fff;padding:12px;border-radius:10px}.dash-kpi small,.dash-kpi span{display:block;font-size:7px;color:#85989c}.dash-kpi strong{display:block;font-size:16px;margin:3px 0}
.dash-chart{height:190px;background:#fff;border-radius:11px;position:relative;overflow:hidden}.dash-lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent 37px,#edf1ef 38px)}
.dash-chart svg{position:absolute;inset:22px 14px 15px;width:calc(100% - 28px);height:calc(100% - 37px)}.dash-chart polyline{fill:none;stroke:#0f8f76;stroke-width:4}

.knowledge{background:#f8faf8}
.section-heading.split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end}.section-heading.split a{color:var(--green);font-size:12px;font-weight:700}
.knowledge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.knowledge-grid article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px}.knowledge-grid article>span{font-size:8px;font-weight:800;color:var(--green);letter-spacing:1.1px}.knowledge-grid h3{font-size:16px;margin:10px 0}.knowledge-grid p{font-size:11px;min-height:52px}.knowledge-grid a{font-size:10px;font-weight:700;color:var(--green)}

.cta{background:#fff}.cta-panel{background:var(--green);border-radius:28px;color:#fff;padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-panel h2{color:#fff;max-width:720px}.cta-panel p{color:#d7fff5}.cta-buttons{display:flex;gap:10px;min-width:max-content}

footer{background:#0a2931;color:#fff;padding:58px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:50px}.footer-brand strong{color:#fff}.footer-grid p{color:#8da5aa;font-size:11px;max-width:350px}.footer-grid>div:not(:first-child){display:grid;align-content:start;gap:9px}.footer-grid b{font-size:11px;margin-bottom:5px}.footer-grid a{font-size:10px;color:#91a9ae}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:18px;display:flex;justify-content:space-between;color:#718d92;font-size:9px}

@media(max-width:1050px){
  .main-nav{display:none;position:absolute;top:77px;left:20px;right:20px;background:#fff;padding:18px;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);flex-direction:column}
  .main-nav.open{display:flex}.mobile-menu{display:block;margin-left:auto}.nav-actions{display:none}
  .hero-grid{grid-template-columns:1fr;gap:0;padding-bottom:70px}.hero-copy{text-align:center;padding-bottom:20px}.hero-intro{margin-left:auto;margin-right:auto}.hero-buttons,.trust-row{justify-content:center}
  .hero-visual{min-height:500px}
  .audience-grid,.knowledge-grid{grid-template-columns:repeat(2,1fr)}
  .wizard-shell{grid-template-columns:1fr}.wizard-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wizard-summary h3,.summary-tag,.wizard-summary dl,.summary-divider,.summary-note{grid-column:1/-1}
  .flow{grid-template-columns:1fr;}.flow i{transform:rotate(90deg);text-align:center}.flow-step{min-width:0}
  .example-grid,.inspection-grid,.pro-panel{grid-template-columns:1fr}
  .route-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .container{width:min(100% - 26px,1180px)}
  .section{padding:70px 0}
  h1{font-size:46px;letter-spacing:-2px}
  h2{font-size:34px}
  .hero{min-height:auto}.hero-grid{min-height:auto}.hero-copy{padding-top:60px}
  .building-card{width:360px}.building-image{height:215px}.building{left:58px;right:50px;height:175px}.floor{height:44px;padding:10px 17px;gap:10px}.entrance{height:45px}
  .float-chip{display:none}
  .audience-grid,.knowledge-grid{grid-template-columns:1fr}
  .wizard-left{padding:28px 20px}.choice-grid,.condition-row{grid-template-columns:1fr}.wizard-step{min-height:430px}
  .wizard-summary{grid-template-columns:1fr}.cost-card,.reserve-card{grid-column:auto}
  .puzzle-panel{padding:30px 22px}
  .mini-table>div{grid-template-columns:52px 1fr 90px;padding:10px;font-size:10px}
  .inspection-grid{gap:30px}.tablet{width:300px}
  .pro-panel{padding:35px 24px}.dash-grid{grid-template-columns:1fr}
  .section-heading.split{display:block}.section-heading.split a{display:inline-block;margin-top:12px}
  .cta-panel{padding:35px 25px;display:block}.cta-buttons{margin-top:20px;flex-direction:column}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
}


/* Omvangstap Onderhoudswijzer */
.size-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:24px;
}
.size-field{
  border:1px solid #dce6e3;
  border-radius:16px;
  padding:16px;
  background:#fbfcfb;
}
.size-field label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:9px;
}
.input-wrap{
  display:flex;
  align-items:center;
  border:1px solid #cedbd7;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
.input-wrap input{
  width:100%;
  border:0;
  outline:none;
  padding:13px 14px;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  background:transparent;
}
.input-wrap span{
  padding:0 13px;
  color:#6c8388;
  font-size:11px;
  font-weight:700;
  border-left:1px solid #e1e8e6;
}
.size-field small{
  display:block;
  color:#82959a;
  font-size:9px;
  line-height:1.45;
  margin-top:8px;
}
.size-presets{
  display:flex;
  gap:8px;
  margin-top:14px;
}
.size-presets button{
  border:1px solid #d7e2df;
  background:#fff;
  color:#61777d;
  border-radius:999px;
  padding:8px 12px;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
.size-presets button.active{
  border-color:var(--green);
  color:var(--green);
  background:#f1faf7;
}
.size-explainer{
  margin-top:18px;
  padding:14px 16px;
  border-radius:14px;
  background:#f1f7f4;
}
.size-explainer span{
  font-size:10px;
  font-weight:800;
  color:var(--green);
}
.size-explainer p{
  margin:5px 0 0;
  font-size:10px;
  line-height:1.5;
}

@media(max-width:700px){
  .size-grid{grid-template-columns:1fr}
}

/* Startcalculator V2: uitbreiding binnen de bestaande Onderhoudsdomein-huisstijl */
.address-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:14px;margin:24px 0 14px}
.bag-button{margin-bottom:14px}
.bag-result{border:1px solid #d9e6ef;background:#f5f9fc;border-radius:14px;padding:16px 18px;color:#50677c}
.bag-result strong{display:block;color:#173b5d;margin-bottom:4px}.bag-result p{margin:0;font-size:13px;line-height:1.6}
.bag-result.found{background:#eef8f2;border-color:#cce5d4}
.matrix-step{min-height:620px}
.matrix-category{border-top:1px solid #e4edf4;padding:18px 0}.matrix-category:first-child{border-top:0;padding-top:4px}
.matrix-category h4{margin:0 0 11px;color:#173b5d;font-size:16px}
.matrix-buttons{display:flex;flex-wrap:wrap;gap:9px}
.matrix-btn{appearance:none;border:1px solid #c8d9e6;background:#fff;color:#264c69;border-radius:11px;padding:11px 15px;min-height:44px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.18s ease}
.matrix-btn:hover{border-color:#6f9fbe;background:#f6fafc}.matrix-btn.active{background:#1f668f;color:#fff;border-color:#1f668f;box-shadow:0 5px 14px rgba(31,102,143,.16)}
.matrix-btn.small{padding:8px 12px;min-height:38px;font-size:12px}
.matrix-sub{display:none;margin:12px 0 2px 15px;padding:12px 14px;border-left:3px solid #a8c6da;background:#f7fafc;border-radius:0 11px 11px 0}
.matrix-sub.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.matrix-sub b{font-size:12px;color:#587084;margin-right:5px}
@media(max-width:700px){.address-grid{grid-template-columns:1fr}.matrix-btn{flex:1 1 130px}.matrix-sub{margin-left:0}.matrix-step{min-height:720px}}

.bag-fields{display:grid;grid-template-columns:1fr 1.5fr;gap:14px;margin:4px 0 22px}
.bag-badge{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:999px;background:#e7f1f7;color:#1f668f;font-size:10px;font-weight:800;vertical-align:1px}
.bag-result.loading{background:#f5f9fc;border-color:#c7dce9}.bag-result.error{background:#fff3f1;border-color:#edcbc5;color:#75453d}
@media(max-width:700px){.bag-fields{grid-template-columns:1fr}}

.excel-download{width:100%;margin-top:14px;justify-content:center}.excel-note{margin:8px 0 0;color:#71878c;font-size:10px;line-height:1.45}.excel-download:disabled{opacity:.55;cursor:not-allowed}

/* V9 BAG geometrie */
.geometry-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.geometry-inputs select{width:100%;border:0;background:transparent;font:inherit;padding:12px}.geometry-result{margin:16px 0;padding:16px 18px;border:1px solid #cbdceb;border-radius:14px;background:#f6faff;color:#27445f}.geometry-result p{margin:.4rem 0 0;line-height:1.55}.indicative-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:10px;background:#eef3f7;color:#52697d}.geometry-summary{font-size:13px}.geometry-title{display:block;font-weight:800;color:#1f5082;margin-bottom:8px}.geometry-summary dl{margin:0}.geometry-summary dt small{font-weight:600;color:#6f8496}.geometry-summary dd{font-weight:800}@media(max-width:700px){.geometry-inputs{grid-template-columns:1fr}}
.bag-tech-button{margin-top:12px}
.bag-tech-details{margin-top:10px;border:1px solid #d9e6ef;background:#f8fbfd;border-radius:14px;padding:14px 16px;color:#173b5d}
.bag-tech-details h4{margin:0 0 8px;font-size:14px}.bag-tech-details p{margin:0 0 10px;font-size:12px;color:#60788c}
.bag-tech-details pre{margin:8px 0 14px;padding:12px;border-radius:10px;background:#eef4f8;overflow:auto;max-height:300px;font:11px/1.45 Consolas,Monaco,monospace;white-space:pre-wrap;word-break:break-word;color:#18354d}

.runtime-panel{display:grid;gap:16px;padding:20px;border:1px solid #d9e4ef;border-radius:16px;background:#f8fbfe}.runtime-panel>label{display:grid;gap:7px;font-weight:700}.runtime-panel select{padding:12px;border:1px solid #cbd8e5;border-radius:10px;background:#fff}.runtime-state{display:flex;align-items:center;gap:12px}.runtime-state strong{padding:6px 10px;border-radius:999px;background:#e8eef5;color:#1f5082}.runtime-state strong[data-status="READY"]{background:#e5f4ea;color:#23643b}.runtime-state strong[data-status="NEEDS_INPUT"]{background:#fff2d8;color:#815b00}.runtime-state strong[data-status="INVALID"]{background:#fde7e7;color:#8a2424}.runtime-questions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.runtime-question{display:grid;gap:6px;font-weight:600}.runtime-question>div{display:flex;align-items:center;background:#fff;border:1px solid #cbd8e5;border-radius:10px;overflow:hidden}.runtime-question input{width:100%;border:0;padding:11px;outline:0}.runtime-question em{padding:0 10px;font-style:normal;color:#60758a}.runtime-actions,.runtime-result,.runtime-errors{padding:13px 15px;border-radius:11px;background:#fff;border:1px solid #e0e8f0}.runtime-errors>div>div{color:#8a2424;margin-top:5px}@media(max-width:700px){.runtime-questions{grid-template-columns:1fr}}

/* Gepubliceerde gebouwtypematrix uit IGBS Admin */
.matrix-api-loading{padding:18px;border:1px dashed #cbd5e1;border-radius:12px;color:#64748b;background:#f8fafc;grid-column:1/-1}
.matrix-published-info{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px;background:#f4f8fc;border:1px solid #d7e3ef;border-radius:12px}.matrix-published-info span,.matrix-published-info small{color:#64748b}.published-matrix-group{margin:14px 0 20px}.published-group-title{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}.published-group-title small{color:#64748b}.published-matrix-group .matrix-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.published-matrix-group .matrix-btn{min-height:74px;height:74px;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.published-matrix-group .matrix-btn small{font-size:11px;opacity:.7}.published-matrix-group .matrix-btn.proposed{background:#fff4cc;border-color:#ead58a}.published-matrix-group .matrix-btn.active{background:#336699;color:white;border-color:#336699}.published-matrix-group .matrix-btn.active small{color:white}@media(max-width:760px){.published-matrix-group .matrix-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}