/* Droogbouwcluster (13 okt 2026): extra onderdelen bovenop css/style.css.
   Alles hangt onder .pillar en heeft het voorvoegsel dv-, zodat het thema en de andere
   projectpagina's er niets van merken. Maten in px: het thema zet html{font-size:10px}.
   Kleuren uit de stijlgids via de tokens van style.css; tekst op oranje altijd wit. */

.pillar .dv-sectie-kop{max-width:760px;}

/* ---------- Op deze pagina ---------- */
.pillar .dv-ankers{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:34px 0 0; padding:0; list-style:none;
}
.pillar .dv-ankers .dv-ankers-label{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-right:6px;
}
.pillar .dv-ankers a{
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white);
  font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
  transition:border-color .15s, color .15s;
}
.pillar .dv-ankers a:hover{border-color:var(--orange); color:var(--orange-deep);}

/* ---------- In het kort (direct antwoord bovenaan) ---------- */
.pillar .dv-kort{
  display:grid; grid-template-columns:auto 1fr; gap:22px;
  background:var(--white); border:1px solid var(--line); border-left:5px solid var(--orange);
  border-radius:var(--radius); padding:26px 30px;
  box-shadow:0 10px 30px rgba(22,22,22,.06);
}
.pillar .dv-kort-label{
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-deep); padding-top:4px; white-space:nowrap;
}
.pillar .dv-kort p{font-size:17px; line-height:1.7; color:var(--ink);}
.pillar .dv-kort p + p{margin-top:10px;}
.pillar .dv-kort strong{font-weight:700;}

/* ---------- Opbouwkiezer met de Variotherm-doorsneden ---------- */
.pillar .dv-viewer{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:0 18px 50px rgba(28,35,56,.08);
}
.pillar .dv-tabs{
  display:flex; flex-wrap:wrap; gap:6px; padding:14px; margin:0;
  background:var(--bg-soft); border-bottom:1px solid var(--line); list-style:none;
}
.pillar .dv-tab{
  appearance:none; -webkit-appearance:none;
  font-family:'Open Sans',Arial,sans-serif; font-size:14.5px; font-weight:700; line-height:1.2;
  padding:11px 16px; border-radius:8px; border:1.5px solid transparent;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.pillar .dv-tab:hover{color:var(--ink); border-color:var(--line); background:var(--white);}
.pillar .dv-tab[aria-selected="true"]{background:var(--orange); color:#fff; border-color:var(--orange);}
.pillar .dv-tab:focus-visible{outline:3px solid var(--navy); outline-offset:2px;}
.pillar .dv-paneel{display:grid; grid-template-columns:1.25fr 1fr; align-items:stretch;}
.pillar .dv-paneel[hidden]{display:none;}
.pillar .dv-paneel-beeld{background:#fff; display:flex; align-items:center; justify-content:center; padding:18px;}
.pillar .dv-paneel-beeld img{width:100%; height:auto; max-width:720px;}
.pillar .dv-paneel-tekst{padding:30px 32px; border-left:1px solid var(--line); display:flex; flex-direction:column;}
.pillar .dv-paneel-tekst h3{font-size:22px; line-height:1.25; margin-bottom:8px;}
.pillar .dv-paneel-tekst > p{font-size:15.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:18px;}
.pillar .dv-lagen{list-style:none; margin:0 0 20px; padding:0; border-top:1px solid var(--line);}
.pillar .dv-lagen li{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:15px;
}
.pillar .dv-lagen li span:last-child{font-weight:700; white-space:nowrap;}
.pillar .dv-lagen li.dv-systeem{color:var(--orange-deep); font-weight:700;}
.pillar .dv-totaal{
  margin-top:auto; display:flex; align-items:baseline; gap:12px;
  background:var(--navy); color:#fff; border-radius:10px; padding:16px 20px;
}
.pillar .dv-totaal b{font-size:26px; font-weight:800; letter-spacing:-.01em; white-space:nowrap;}
.pillar .dv-totaal span{font-size:14px; color:rgba(255,255,255,.78); line-height:1.45;}

/* ---------- Droog tegenover nat: balken ---------- */
.pillar .dv-vergelijk{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.pillar .dv-meting{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 24px 22px;
}
.pillar .dv-meting h3{font-size:17px; margin-bottom:18px;}
.pillar .dv-balk{margin-bottom:14px;}
.pillar .dv-balk:last-child{margin-bottom:0;}
.pillar .dv-balk-kop{display:flex; justify-content:space-between; gap:10px; font-size:14px; margin-bottom:6px;}
.pillar .dv-balk-kop b{font-weight:800;}
.pillar .dv-balk-spoor{height:12px; border-radius:999px; background:var(--bg-alt); overflow:hidden;}
.pillar .dv-balk-vulling{display:block; height:100%; border-radius:999px; background:#9A9A96;}
.pillar .dv-balk.dv-droog .dv-balk-vulling{background:var(--orange);}
.pillar .dv-balk.dv-droog .dv-balk-kop b{color:var(--orange-deep);}
.pillar .dv-meting p{font-size:14px; color:var(--ink-soft); line-height:1.6; margin-top:14px;}

/* ---------- Kosten ---------- */
.pillar .dv-kosten-intro{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
.pillar .dv-kosten-intro .prose p{font-size:17px; line-height:1.75; color:var(--ink-soft);}
.pillar .dv-kosten-intro .prose p + p{margin-top:14px;}
.pillar .dv-kosten-intro .prose strong{color:var(--ink);}
.pillar .dv-weg{
  background:var(--navy); color:#fff; border-radius:14px; padding:28px 30px;
}
.pillar .dv-weg h3{font-size:19px; margin-bottom:6px; color:#fff;}
.pillar .dv-weg > p{font-size:14.5px; color:rgba(255,255,255,.75); line-height:1.6; margin-bottom:16px;}
.pillar .dv-weg ul{list-style:none; margin:0; padding:0;}
.pillar .dv-weg li{
  display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  padding:11px 0; border-top:1px solid rgba(255,255,255,.14); font-size:15px; line-height:1.5;
}
.pillar .dv-weg li svg{width:20px; height:20px; color:var(--orange); margin-top:1px;}
.pillar .dv-weg li s{color:rgba(255,255,255,.6); text-decoration-color:var(--orange); text-decoration-thickness:2px;}
.pillar .dv-weg li small{display:block; color:rgba(255,255,255,.7); font-size:13.5px; margin-top:2px;}

.pillar .dv-factoren{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px;}
.pillar .dv-factor{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px; position:relative;
}
.pillar .dv-factor-nr{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff;
  font-size:13.5px; font-weight:800; margin-bottom:12px;
}
.pillar .dv-factor h3{font-size:16.5px; line-height:1.3; margin-bottom:8px;}
.pillar .dv-factor p{font-size:14.5px; line-height:1.6; color:var(--ink-soft);}
.pillar .dv-factor .dv-effect{
  display:inline-block; margin-top:12px; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--navy); background:var(--bg-alt); border-radius:4px; padding:4px 8px;
}

.pillar .dv-prijsroute{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px;}
.pillar .dv-route{
  border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; background:var(--bg-soft);
  display:flex; flex-direction:column; gap:10px;
}
.pillar .dv-route .eyebrow{margin-bottom:0;}
.pillar .dv-route h3{font-size:19px;}
.pillar .dv-route p{font-size:15px; color:var(--ink-soft); line-height:1.65;}
.pillar .dv-route .btn{align-self:flex-start; margin-top:6px;}

/* ---------- Eindvloer: rechtstreeks of met egaline ---------- */
.pillar .dv-eindvloer{width:100%; border-collapse:collapse; font-size:15px;}
.pillar .dv-eindvloer th, .pillar .dv-eindvloer td{
  text-align:left; padding:12px 14px 12px 0; border-bottom:1px solid var(--line); vertical-align:top;
}
.pillar .dv-eindvloer thead th{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:700;
}
.pillar .dv-eindvloer td:first-child{font-weight:700;}
.pillar .dv-label{
  display:inline-block; font-size:12.5px; font-weight:700; border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.pillar .dv-label.dv-direct{background:#E6F2E6; color:#235C2A;}
.pillar .dv-label.dv-egaline{background:#FDEBD8; color:#8A4A0E;}

/* ---------- Rekenhulp opbouwhoogte ---------- */
.pillar .dv-calc{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--white);
  box-shadow:0 18px 50px rgba(28,35,56,.08);
}
.pillar .dv-calc-invoer{padding:30px 32px;}
.pillar .dv-vraag{border:0; margin:0 0 22px; padding:0;}
.pillar .dv-vraag:last-child{margin-bottom:0;}
.pillar .dv-vraag legend{font-size:15.5px; font-weight:700; margin-bottom:10px; padding:0; border:0; width:auto; line-height:1.4; color:var(--ink);}
.pillar .dv-calc label, .pillar .dv-check label{font-weight:inherit; margin:0; display:inline-block;}
.pillar .dv-calc, .pillar .dv-calc *{box-sizing:border-box;}
.pillar .dv-vraag .dv-hint{display:block; font-size:13.5px; color:var(--ink-soft); font-weight:400; margin-top:2px;}
.pillar .dv-keuzes{display:flex; flex-wrap:wrap; gap:8px;}
.pillar .dv-keuze{position:relative;}
.pillar .dv-keuze input{position:absolute; opacity:0; width:1px; height:1px;}
.pillar .dv-keuze span{
  display:inline-block; padding:10px 14px; border-radius:8px; border:1.5px solid var(--line);
  font-size:14.5px; font-weight:600; cursor:pointer; background:var(--white); color:var(--ink);
  transition:border-color .15s, background .15s, color .15s;
}
.pillar .dv-keuze span:hover{border-color:var(--orange);}
.pillar .dv-keuze input:checked + span{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:700;}
.pillar .dv-keuze input:focus-visible + span{outline:3px solid var(--navy); outline-offset:2px;}
.pillar .dv-getal{display:flex; align-items:center; gap:10px;}
.pillar .dv-getal input{
  width:96px; font-family:'Open Sans',Arial,sans-serif; font-size:16px; font-weight:700;
  padding:10px 12px; border:1.5px solid var(--line); border-radius:8px; color:var(--ink); background:#fff;
}
.pillar .dv-getal input:focus{outline:none; border-color:var(--orange);}
.pillar .dv-getal span{font-size:15px; color:var(--ink-soft);}

.pillar .dv-calc-uitkomst{
  background:var(--navy); color:#fff; padding:30px 32px; display:flex; flex-direction:column; gap:18px;
}
.pillar .dv-calc-uitkomst .eyebrow{margin-bottom:0;}
.pillar .dv-calc-totaal{font-size:52px; font-weight:800; line-height:1; letter-spacing:-.02em;}
.pillar .dv-calc-totaal small{font-size:20px; font-weight:700; margin-left:4px; color:rgba(255,255,255,.8);}
.pillar .dv-stapel{display:flex; flex-direction:column-reverse; gap:3px; margin:0; padding:0; list-style:none;}
.pillar .dv-stapel li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-radius:5px; padding:0 12px; font-size:13.5px; font-weight:700; color:#161616;
  min-height:26px; transition:min-height .25s ease;
}
.pillar .dv-stapel li[hidden]{display:none;}
.pillar .dv-laag-ondergrond{background:#C9C9C4;}
.pillar .dv-laag-isolatie{background:#E7B3D6;}
.pillar .dv-laag-houtvezel{background:#9CC98A;}
.pillar .dv-laag-systeem{background:#F5D6BC; box-shadow:inset 0 -3px 0 var(--orange);}
.pillar .dv-laag-egaline{background:#DADAD5;}
.pillar .dv-laag-eindvloer{background:#F28D2D; color:#fff !important;}
.pillar .dv-calc-uitleg{font-size:14px; line-height:1.6; color:rgba(255,255,255,.78);}
.pillar .dv-calc-uitleg strong{color:#fff;}

/* ---------- Geschiktheidscheck houten vloer ---------- */
.pillar .dv-check{
  border:1px solid var(--line); border-radius:14px; background:var(--white); overflow:hidden;
  box-shadow:0 18px 50px rgba(28,35,56,.08);
}
.pillar .dv-check-vraag{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  padding:18px 26px; border-bottom:1px solid var(--line);
}
.pillar .dv-check-vraag h3{font-size:16.5px; line-height:1.35; margin-bottom:3px;}
.pillar .dv-check-vraag p{font-size:14px; color:var(--ink-soft); line-height:1.55;}
.pillar .dv-check-uitslag{padding:22px 26px; background:var(--bg-soft); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;}
.pillar .dv-check-uitslag .dv-icoon{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt); color:var(--ink-soft); font-weight:800; font-size:18px;
}
.pillar .dv-check-uitslag[data-stand="goed"] .dv-icoon{background:#2F7D3A; color:#fff;}
.pillar .dv-check-uitslag[data-stand="let-op"] .dv-icoon{background:var(--orange); color:#fff;}
.pillar .dv-check-uitslag h3{font-size:18px; margin-bottom:4px;}
.pillar .dv-check-uitslag p{font-size:15px; color:var(--ink-soft); line-height:1.6;}

/* ---------- Vergelijkingsmatrix alternatieven ---------- */
.pillar .dv-matrix-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--white);}
.pillar .dv-matrix{width:100%; min-width:760px; border-collapse:collapse; font-size:14.5px;}
.pillar .dv-matrix th, .pillar .dv-matrix td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle;}
.pillar .dv-matrix thead th{background:var(--bg-soft); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.pillar .dv-matrix tbody th{font-size:15.5px; font-weight:800;}
.pillar .dv-matrix tbody th small{display:block; font-weight:600; font-size:13px; color:var(--ink-soft); margin-top:2px;}
.pillar .dv-matrix tr.dv-uitgelicht th, .pillar .dv-matrix tr.dv-uitgelicht td{background:#FEF5EC;}
.pillar .dv-matrix tr:last-child th, .pillar .dv-matrix tr:last-child td{border-bottom:0;}
.pillar .dv-stippen{display:inline-flex; gap:4px; vertical-align:middle;}
.pillar .dv-stippen i{width:10px; height:10px; border-radius:50%; background:var(--bg-alt); display:block;}
.pillar .dv-stippen[data-score="1"] i:nth-child(-n+1),
.pillar .dv-stippen[data-score="2"] i:nth-child(-n+2),
.pillar .dv-stippen[data-score="3"] i:nth-child(-n+3),
.pillar .dv-stippen[data-score="4"] i:nth-child(-n+4),
.pillar .dv-stippen[data-score="5"] i:nth-child(-n+5){background:var(--orange);}
.pillar .dv-matrix-noot{font-size:13.5px; color:var(--ink-soft); margin-top:12px;}

/* ---------- Durk ---------- */
.pillar .dv-durk{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:28px; padding:18px 22px; border-radius:var(--radius);
  background:var(--white); border:1px dashed #CFCFCB;
}
.pillar .dv-durk p{font-size:15px; color:var(--ink-soft); line-height:1.55; max-width:56ch;}
.pillar .dv-durk p strong{color:var(--ink);}

/* ---------- Tekst/beeld met bron ---------- */
.pillar .dv-bron{font-size:13px; color:var(--ink-soft); margin-top:10px;}

/* Voor- en nadelen: plus en min in plaats van een vinkje bij alles */
.pillar .checklist.dv-pm li::before{
  content:"+"; flex:none; width:20px; height:20px; border-radius:50%; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:#fff; font-size:15px; font-weight:800; line-height:1;
}
.pillar .checklist.dv-pm li.dv-min::before{content:"\2212"; background:var(--white); color:var(--ink-soft); border:1.5px solid #CFCFCB;}
.pillar .checklist.dv-pm li.dv-min{color:var(--ink-soft);}

/* Drie kaarten naast elkaar in plaats van het standaardraster van vier */
.pillar .nav-grid.dv-drie{grid-template-columns:repeat(3,1fr);}
@media (max-width:1112px){ .pillar .nav-grid.dv-drie{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .pillar .nav-grid.dv-drie{grid-template-columns:1fr;} }

/* ---------- Responsief ---------- */
@media (max-width:1000px){
  .pillar .dv-paneel{grid-template-columns:1fr;}
  .pillar .dv-paneel-tekst{border-left:0; border-top:1px solid var(--line);}
  .pillar .dv-vergelijk{grid-template-columns:1fr;}
  .pillar .dv-kosten-intro{grid-template-columns:1fr; gap:32px;}
  .pillar .dv-factoren{grid-template-columns:1fr 1fr;}
  .pillar .dv-calc{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pillar .dv-kort{grid-template-columns:1fr; gap:8px; padding:22px 20px;}
  .pillar .dv-kort p{font-size:16px;}
  .pillar .dv-tabs{padding:10px; gap:4px;}
  .pillar .dv-tab{font-size:13.5px; padding:9px 11px;}
  .pillar .dv-paneel-tekst{padding:22px 20px;}
  .pillar .dv-factoren{grid-template-columns:1fr;}
  .pillar .dv-prijsroute{grid-template-columns:1fr;}
  .pillar .dv-calc-invoer, .pillar .dv-calc-uitkomst{padding:24px 20px;}
  .pillar .dv-calc-totaal{font-size:44px;}
  .pillar .dv-check-vraag{grid-template-columns:1fr; padding:16px 18px;}
  .pillar .dv-check-uitslag{padding:18px;}
  .pillar .dv-eindvloer{font-size:14px;}
}