/* Pillar douchebak-wtw (22 okt 2026). Alleen wat de pillar-klassen (css/style.css) en
   droogbouw-cluster/dv.css nog niet hebben. Alles onder .pillar .dbw-*, maten in px. */

/* Kleuren volgens de webstyleguide (22 okt 2026). dv.css van het droogbouwcluster gebruikt
   een paar tinten buiten het palet; hier voor deze pagina rechtgezet:
   - #FEF5EC (uitgelichte rij)       -> oranje tint #FDF1E4
   - #9A9A96 (grijze balken)         -> navy #2A3550
   - #D97A1F als tekstkleur          -> #F28D2D (oranje tekst is altijd het huisstijloranje)
   - #CFCFCB (stippelrand Durk)      -> lijnkleur #E3E5E9 */
.pillar .dv-matrix tr.dv-uitgelicht th, .pillar .dv-matrix tr.dv-uitgelicht td{background:#FDF1E4;}
.pillar .dv-balk-vulling{background:#2A3550;}
.pillar .dv-balk.dv-droog .dv-balk-vulling{background:#F28D2D;}
.pillar .dv-balk.dv-droog .dv-balk-kop b,
.pillar .dv-lagen li.dv-systeem,
.pillar .dv-kort-label,
.pillar .dv-ankers a:hover{color:#F28D2D;}
.pillar .dv-durk{border-color:#E3E5E9;}
/* kopregel van tabellen oranje, tekst wit (Berber, 22 okt); kader op de kaartafronding van 10px */
.pillar .dv-matrix thead th{background:#F28D2D; color:#FFFFFF; font-weight:700; border-bottom-color:#F28D2D;}
.pillar .dv-matrix-wrap{border-radius:10px;}

/* kerncijfers oranje (Johan, 22 okt); de BCRG-kaart is een link naar de vraag over het energielabel */
.pillar .spec-overlap .fig{color:#F28D2D; font-variant-numeric:tabular-nums;}
.pillar a.dbw-spec-link{text-decoration:none; color:inherit; transition:background .15s ease;}
.pillar a.dbw-spec-link:hover{background:#FDF1E4;}
.pillar a.dbw-spec-link:hover .lbl{color:#161616;}
.pillar #faq-energielabel{scroll-margin-top:140px;}

/* ervaringen: logo's en reviews */
.pillar .dbw-logos{display:flex; flex-wrap:wrap; align-items:center; gap:24px 56px; margin:4px 0 40px;}
.pillar .dbw-logos img{display:block; height:48px; width:auto;}
.pillar .dbw-reviews{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;}
.pillar .dbw-review{margin:0; background:#FFFFFF; border:1px solid #E3E5E9; border-radius:10px; padding:24px 26px; display:flex; flex-direction:column; gap:14px;}
.pillar .dbw-tag{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#F28D2D;}
/* het sitethema geeft blockquote een grijs vlak en gecentreerde tekst */
.pillar .dbw-review blockquote{margin:0 !important; padding:0 !important; border:0 !important; background:none !important; text-align:left !important; font-size:16px; line-height:1.7; color:#161616; font-style:normal; flex:1;}
.pillar .dbw-review blockquote::before,.pillar .dbw-review blockquote::after{content:none !important;}
.pillar .dbw-review figcaption{font-size:14px; color:#5C5C5C;}
.pillar .dbw-review figcaption b{display:block; color:#161616; font-size:15px;}

/* fotostrook met sfeerbeelden */
.pillar .dbw-sfeer{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:44px;}
/* vaste hoogte: een algemene img-regel in de sitestijl overschrijft aspect-ratio */
.pillar .dbw-sfeer img{display:block; width:100%; height:280px !important; object-fit:cover; border-radius:10px;}

/* productkaarten met beeld: nav-card met een vierkante foto erboven */
.pillar .dbw-kaarten{grid-template-columns:repeat(3,minmax(0,1fr));}
.pillar .dbw-kaarten .nav-card{padding-top:16px;}
.pillar .dbw-kaartbeeld{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; margin:0 0 16px; background:#F3F4F7;}

/* sfeerbeeld naast de tekst in de split-blokken: staand formaat */
.pillar .dbw-staand{height:560px;}

/* matrix: geen stippen, wel een uitgelichte kolomkop */
.pillar .dbw-matrix td{vertical-align:top;}

@media (max-width:900px){
  .pillar .dbw-sfeer{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pillar .dbw-sfeer img{height:200px !important;}
  .pillar .dbw-reviews{grid-template-columns:minmax(0,1fr);}
  .pillar .dbw-logos{gap:20px 36px;}
  .pillar .dbw-logos img{height:36px;}
  .pillar .dbw-kaarten{grid-template-columns:minmax(0,1fr);}
  .pillar .dbw-staand{height:420px;}
  /* style.css zet .pillar .intake-layout (300px + rest) ná de mobiele regel, waardoor de
     vragen op mobiel in een smalle kolom vallen. Hier op deze pagina rechtgezet. */
  .pillar .intake-layout{grid-template-columns:minmax(0,1fr) !important; gap:24px;}
}