/* Batterijcluster (28 okt 2026, derde versie): kleine aanvullingen op dv.css en style.css.
   De pagina's gebruiken het droogbouwformat (dv-*). Dit bestand voegt alleen toe wat daar
   ontbreekt. Maten in px: het thema zet html op 10px. */

/* Inhoudsopgave die onder de vaste menubalk blijft staan (zie --kop-hoogte in build_projectpaginas.py).
   Staat als los blok direct onder de kerncijfers, zodat hij over de hele pagina meeloopt. */
.pillar .bt-plak{position:sticky; top:var(--kop-hoogte, 0px); z-index:30; background:#fff; border-bottom:1px solid var(--line); margin-top:36px;}
.pillar .bt-plak .dv-ankers{margin:0; padding:12px 0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;}
.pillar .bt-plak .dv-ankers a{white-space:nowrap; padding:7px 13px; font-size:13.5px;}
.pillar .bt-plak .dv-ankers-label{white-space:nowrap; color:var(--navy);}
/* tussenkoppen niet achter menubalk en inhoudsopgave laten verdwijnen */
.pillar section[id]{scroll-margin-top:calc(var(--kop-hoogte, 0px) + 84px);}

/* video in een tekst/beeld-blok */
.pillar .bt-video{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#1C2338;}
.pillar .bt-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* productfoto of schema op wit, ook op een grijs of donker vlak */
.pillar .bt-wit-vlak{background:#fff; padding:16px; border-radius:var(--radius);}

/* prijzen alleen in kleine letters (besluit Berber) */
.pillar .bt-klein{font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin-top:14px; max-width:none;}

/* datum van de laatste inhoudelijke controle */
.pillar .bt-gecontroleerd{font-size:13px; color:var(--ink-soft); margin-top:18px;}
.pillar .bt-gecontroleerd a{color:var(--ink-soft); text-decoration:underline;}

/* aandachtspunt vanuit Technea */
.pillar .bt-tip{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; margin-top:28px;
  background:#FDF1E4; border:1px solid #F6D9B8; border-radius:var(--radius); padding:20px 22px;}
.pillar .bt-tip-label{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-deep); padding-top:3px; white-space:nowrap;}
.pillar .bt-tip p{font-size:15.5px; line-height:1.65; color:var(--ink); max-width:none;}
.pillar .bt-tip p + p{margin-top:8px;}

/* vragen die de installateur stelt, in twee kolommen */
.pillar .bt-vragen{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin-top:44px;}
.pillar .bt-vragen h3{font-size:19px; margin-bottom:6px;}
.pillar .bt-vragen > p{font-size:15px; color:var(--ink-soft); margin-bottom:12px;}
.pillar .bt-vragen ul{columns:2; column-gap:40px; list-style:none; margin:0; padding:0;}
.pillar .bt-vragen li{break-inside:avoid; display:flex; gap:10px; font-size:15px; line-height:1.55; padding:8px 0; border-top:1px solid var(--line);}
.pillar .bt-vragen li::before{content:"?"; flex:none; width:22px; height:22px; border-radius:50%; background:var(--orange); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; margin-top:1px;}

/* drie foto's naast elkaar / twee foto's naast elkaar */
.pillar .bt-beeldrij{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.pillar .bt-duo{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.pillar .bt-beeldrij figure,.pillar .bt-duo figure{margin:0;}
.pillar .bt-beeldrij img,.pillar .bt-duo img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); display:block;}
.pillar .bt-duo img{aspect-ratio:3/4;}
.pillar .bt-beeldrij figcaption,.pillar .bt-duo figcaption{font-size:13.5px; font-weight:700; color:var(--ink); margin-top:8px;}

/* productkaarten met een kleine foto */
.pillar .nav-card.bt-prod img{width:100%; height:150px; object-fit:contain; background:#fff; border-radius:8px; margin-bottom:14px;}
.pillar .nav-card.bt-prod .bt-spec{display:inline-block; align-self:flex-start; font-size:12px; font-weight:700; color:var(--navy); background:var(--bg-alt); border-radius:4px; padding:3px 8px; margin-bottom:8px;}

/* waarde van een bedrijfsbatterij: drie grote kaarten, daaronder drie compact */
.pillar .bt-waarde{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pillar .bt-waarde-kaart{background:#fff; border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:var(--radius); padding:26px 26px 24px;}
.pillar .bt-waarde-kaart .bt-nr{font-size:34px; font-weight:800; color:var(--orange); line-height:1; display:block; margin-bottom:12px;}
.pillar .bt-waarde-kaart h3{font-size:20px; line-height:1.3; margin-bottom:10px;}
.pillar .bt-waarde-kaart p{font-size:15.5px; line-height:1.7; color:var(--ink-soft);}
.pillar .bt-waarde-kaart .dv-effect{display:inline-block; margin-top:14px; 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 .bt-waarde-klein{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px;}
.pillar .bt-waarde-klein div{border-top:1px solid var(--line); padding-top:14px;}
.pillar .bt-waarde-klein h3{font-size:16px; margin-bottom:6px;}
.pillar .bt-waarde-klein p{font-size:14.5px; line-height:1.6; color:var(--ink-soft);}

/* conversiemoment in de donkere aanpakband */
.pillar .bt-band-cta{margin-top:48px; background:#fff; color:var(--ink); border-radius:14px; padding:28px 30px; display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; align-items:start;}
.pillar .bt-band-cta h3{font-size:21px; margin-bottom:8px; color:var(--ink);}
.pillar .bt-band-cta p{font-size:15.5px; color:var(--ink-soft); line-height:1.65; max-width:none;}
.pillar .bt-band-cta .checklist li{color:var(--ink); font-size:15px; margin-bottom:9px;}
.pillar .bt-band-cta .btn{margin-top:18px;}

/* geschikt voor / onderscheid / let op in de productkiezer */
.pillar .bt-keuzeregel{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:8px;}
.pillar .bt-keuzeregel strong{color:var(--ink);}

/* links in de lagenlijst van de kiezer herkenbaar maken */
.pillar .dv-lagen a{color:inherit; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px;}

/* schema bij warmte: heel tonen, niet bijsnijden */
.pillar #warmte .split-img{height:auto; object-fit:contain;}

@media (max-width:1000px){
  .pillar .bt-waarde,.pillar .bt-waarde-klein{grid-template-columns:1fr;}
  .pillar .bt-band-cta{grid-template-columns:1fr;}
}
@media (max-width:860px){
  /* op de telefoon eerst de kop en de tekst, dan de foto's */
  .pillar .opbouw-grid > .bt-duo{order:2;}
}
@media (max-width:760px){
  .pillar .bt-beeldrij{grid-template-columns:1fr;}
  .pillar .bt-vragen ul{columns:1;}
  .pillar .bt-tip{grid-template-columns:1fr; gap:6px;}
  /* inhoudsopgave: alleen de ankers, het label neemt anders de halve breedte */
  .pillar .bt-plak .dv-ankers-label{display:none;}
  .pillar .bt-plak .dv-ankers{padding:10px 0;}
}
@media (max-width:640px){
  /* tabs van de kiezers als gelijke knoppen in twee kolommen */
  .pillar .dv-tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
  .pillar .dv-tab{background:#fff; border-color:var(--line); text-align:center;}
  .pillar .dv-tab:last-child:nth-child(odd){grid-column:1 / -1;}
  /* lange waarden in de lagenlijst laten afbreken, anders loopt het paneel buiten beeld */
  .pillar .dv-lagen li > :first-child{flex:1 1 0; min-width:0;}
  .pillar .dv-lagen li span:last-child{flex:0 1 auto; max-width:60%; white-space:normal; text-align:right;}
  .pillar .dv-totaal{flex-wrap:wrap; gap:4px 12px;}
  .pillar .dv-totaal b{font-size:22px;}
}