/* ============================================================
   Voorstelpagina JH Schilderwerken.
   Zelfde vormtaal als de site: Poppins, inkt #00334E, accent
   #0072AE, en de handtekening van het ontwerp: alles heeft een
   ronde radius behalve EEN hoek (linksboven bij vlakken,
   linksonder bij knoppen).
   ============================================================ */

:root {
  --accent: #0072AE;
  --accent-donker: #005C8D;
  --inkt: #00334E;
  --band: #005980;
  --vlak: #F2F2F2;
  --markeer: #009FE3;
  --wit: #fff;
  --rand: #e3e6ea;
  --let-op: #F7B80C;

  --breedte: 1320px;
  --gutter: clamp(18px, 4vw, 60px);
  --sectie: clamp(48px, 7vw, 100px);

  --r-vlak: 0 18px 18px 18px;
  --r-klein: 0 10px 10px 10px;
}

@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--wit);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--breedte); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- bovenbalk ---------- */
.balk {
  position: sticky; top: 0; z-index: 40;
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
}
.balk__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.merk { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.merk img { border-radius: 50%; }
.merk span { display: flex; flex-direction: column; line-height: 1.15; }
.merk strong { font-size: 16px; letter-spacing: .01em; }
.merk small { font-size: 13px; color: #6b7c88; }

.schakel { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.schakel input { position: absolute; opacity: 0; pointer-events: none; }
.schakel__vlak {
  width: 46px; height: 26px; border-radius: 999px; background: #cdd6dc;
  position: relative; transition: background .18s;
}
.schakel__vlak::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.schakel input:checked + .schakel__vlak { background: var(--accent); }
.schakel input:checked + .schakel__vlak::after { transform: translateX(20px); }
.schakel input:focus-visible + .schakel__vlak { outline: 2px solid var(--markeer); outline-offset: 2px; }
.schakel__tekst { font-size: 14px; font-weight: 500; }

/* ---------- hero ---------- */
.hero { background: var(--inkt); color: #fff; padding-block: clamp(44px, 7vw, 84px); }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--markeer); margin-bottom: 14px;
}
.hero h1 { font-size: clamp(30px, 5vw, 52px); max-width: 20ch; margin-bottom: 18px; }
.hero__onder { font-size: clamp(17px, 2vw, 20px); max-width: 62ch; color: #d7e4ec; }
.hero__meta { margin-top: 22px; font-size: 14px; color: #90aebf; }
.hero__meta a { color: #d7e4ec; }

/* ---------- waarom ---------- */
.waarom { padding-block: var(--sectie); }
.waarom__in { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.waarom h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 20px; max-width: 22ch; }
.waarom__tekst p { max-width: 62ch; }
.waarom__cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cijfer {
  background: var(--vlak); border-radius: var(--r-vlak); padding: 20px 18px;
}
.cijfer strong { display: block; font-size: 34px; line-height: 1; color: var(--accent); }
.cijfer span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; }
.voetnoot { grid-column: 1 / -1; font-size: 13px; color: #6b7c88; margin: 0; }

/* ---------- hoe te lezen ---------- */
.lezen { background: var(--band); color: #fff; padding-block: clamp(36px, 5vw, 64px); }
.lezen h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 18px; }
.lezen__lijst { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; max-width: 90ch; }
.lezen__lijst li { padding-left: 6px; }
.lezen__lijst::marker { font-weight: 700; }

/* ---------- springnavigatie ---------- */
.springen {
  position: sticky; top: 68px; z-index: 30;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rand);
}
.springen__in { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding-block: 12px; scrollbar-width: thin; }
.springen span { font-size: 13px; color: #6b7c88; white-space: nowrap; }
.springen a {
  font-size: 13px; font-weight: 500; text-decoration: none; color: var(--inkt);
  background: var(--vlak); border-radius: 999px; padding: 6px 13px; white-space: nowrap;
}
.springen a:hover { background: var(--accent); color: #fff; }

/* ---------- blokken ---------- */
.blok { padding-block: var(--sectie); }
.blok--grijs { background: var(--vlak); }
.blok__kop { font-size: clamp(24px, 3.4vw, 38px); margin-bottom: 12px; }
.blok__intro { max-width: 70ch; color: #45606f; margin-bottom: clamp(28px, 4vw, 46px); }

/* ---------- kaart met de twee kolommen ---------- */
.kaart {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-vlak);
  padding: clamp(20px, 3vw, 34px); margin-bottom: clamp(24px, 3vw, 40px);
}
.kaart__hoofd { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.kaart__nr { display: block; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .1em; margin-bottom: 4px; }
.kaart__hoofd h2 { font-size: clamp(21px, 2.6vw, 28px); }
.kaart__url { font-size: 13px; color: #6b7c88; margin: 6px 0 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.kaart__meting { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.meting__oud { color: #8b9aa4; text-decoration: line-through; }
.meting__pijl { color: #b3bec5; }
.meting__nieuw { background: #E6F2F9; color: var(--accent-donker); font-weight: 600; border-radius: 999px; padding: 4px 11px; }

.kaart__waarom {
  margin: 18px 0 24px; padding-left: 16px; border-left: 3px solid var(--accent);
  color: #37525f; max-width: 88ch;
}

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); align-items: start; }

.kolom { border-radius: var(--r-klein); overflow: hidden; border: 1px solid var(--rand); }
.kolom--huidig { background: #fafbfc; }
.kolom--nieuw { background: var(--wit); border-color: #bcdcee; box-shadow: 0 2px 16px rgba(0,114,174,.08); }

.kolom__hoofd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--rand); background: #fff;
}
.kolom--huidig .kolom__hoofd { background: #f3f5f7; }
.vlag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }
.vlag--huidig { background: #e4e9ec; color: #55686f; }
.vlag--nieuw { background: var(--accent); color: #fff; }
.kolom__sub { font-size: 12px; color: #7c8b95; }
.telling { margin-left: auto; font-size: 12px; color: #9aa7ae; }

.kolom__body { padding: clamp(16px, 2vw, 26px); }
.kolom__kop { font-size: clamp(18px, 2vw, 22px); margin-bottom: 14px; }
.kolom__body h4 { font-size: 16px; margin: 22px 0 8px; color: var(--band); }
.kolom--huidig .kolom__body { color: #55686f; }
.lijstkop { font-weight: 600; margin-bottom: 8px; }
.lijst { margin: 0 0 1em; padding: 0; list-style: none; display: grid; gap: 7px; }
.lijst li { position: relative; padding-left: 24px; }
.lijst li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
  border-radius: 0 3px 3px 3px; background: var(--accent);
}
.kolom--huidig .lijst li::before { background: #b9c4ca; }

.vraag { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.vraag:last-child { border-bottom: 0; }
.vraag__v { font-weight: 600; margin-bottom: 6px; }
.vraag__a { font-size: 15px; margin: 0; }

/* ---------- gele controle-blok ---------- */
.check {
  margin-top: 24px; background: #FFF8E3; border-radius: var(--r-klein);
  border-left: 4px solid var(--let-op); padding: 18px 20px;
}
.check__kop { font-weight: 700; margin-bottom: 8px; }
.check ul { margin: 0; padding-left: 1.2em; display: grid; gap: 5px; font-size: 15px; }

/* ---------- keuzes ---------- */
.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.keuze { background: var(--vlak); border-radius: var(--r-vlak); padding: clamp(20px, 2.4vw, 28px); }
.keuze__hoofd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.keuze h3 { font-size: 20px; max-width: 24ch; }
.keuze p { font-size: 15.5px; }
.urg { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.urg--nu-beslissen { background: var(--accent); color: #fff; }
.urg--snel { background: #D9EAF4; color: var(--accent-donker); }
.urg--later { background: #e2e7ea; color: #5b6d77; }
.keuze__vraag {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #d8dee2;
  font-weight: 600; color: var(--band);
}

/* ---------- slot ---------- */
.slot { background: var(--inkt); color: #fff; padding-block: var(--sectie); }
.slot h2 { font-size: clamp(24px, 3.4vw, 36px); margin-bottom: clamp(24px, 3vw, 40px); }
.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.stap { background: rgba(255,255,255,.07); border-radius: var(--r-vlak); padding: 24px 22px; }
.stap__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 0 9px 9px 9px;
  background: var(--accent); font-weight: 700; margin-bottom: 14px;
}
.stap h3 { font-size: 17px; margin-bottom: 8px; }
.stap p { font-size: 15px; color: #cfe0ea; }
.slot__voet { margin-top: clamp(24px, 3vw, 36px); color: #9db8c8; font-size: 15px; }
.slot__voet a { color: #fff; }

/* ---------- voet ---------- */
.voet { padding-block: 34px; font-size: 14px; color: #55686f; }
.voet__klein { font-size: 13px; color: #8b9aa4; margin: 6px 0 0; }

/* ---------- alleen het voorstel tonen ---------- */
body.is-alleen-nieuw .kolom--huidig { display: none; }
body.is-alleen-nieuw .duo { grid-template-columns: 1fr; }
body.is-alleen-nieuw .kaart__meting { display: none; }
body.is-alleen-nieuw .kolom--nieuw { border-color: var(--rand); box-shadow: none; }

/* ---------- smaller ---------- */
@media (max-width: 980px) {
  .waarom__in { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .kolom--huidig { order: 2; }
}
@media (max-width: 620px) {
  .schakel__tekst { display: none; }
  .springen { top: 68px; }
  .waarom__cijfers { grid-template-columns: 1fr 1fr; }
  .kaart__meting { font-size: 12px; }
}

@media print {
  .balk, .springen, .schakel { display: none; }
  .kaart { break-inside: avoid; }
  body { font-size: 11pt; }
}