/* ============================================================
   Soltherm Nederland — Impreza child theme
   Styling voor alle standaard Impreza- en WPBakery-elementen.
   Klassenprefix: st-
   ============================================================ */

/* ------------------------------------------------------------
   0. Design tokens
   ------------------------------------------------------------ */
:root{
  --st-oranje:        #ee7f1b;
  --st-oranje-tekst:  #b85c10;
  --st-oranje-licht:  #f7b578;
  --st-antraciet:     #3c3c3b;
  --st-antraciet-2:   #4f4f4e;
  --st-blauwgrijs:    #e9eff3;
  --st-grijs-vlak:    #f3f5f6;
  --st-lijn:          #e6e8ea;
  --st-lijn-donker:   #d5dde3;
  --st-tekst:         #5a5c5e;
  --st-tekst-licht:   #6d6f72;
  --st-tekst-zwak:    #8b8f92;
  --st-wit:           #ffffff;
  --st-placeholder-a: #d9dee2;
  --st-placeholder-b: #e4e8eb;

  --st-font:      'Archivo', system-ui, sans-serif;
  --st-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --st-max: 1400px; /* gelijk aan Impreza's content­breedte, zodat rijen, menu en footer uitlijnen */
  --st-pad: clamp(20px, 4vw, 56px);
  --st-sectie: clamp(48px, 7vw, 88px);
  --st-gap: clamp(24px, 3vw, 40px);
}

/* ------------------------------------------------------------
   1. Basis
   ------------------------------------------------------------ */
body.st-theme{
  background: var(--st-wit);
  color: var(--st-antraciet);
  font-family: var(--st-font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.st-theme :where(p, li, td){ color: var(--st-tekst); text-wrap: pretty; }
.st-theme ::selection{ background: var(--st-oranje); color: #fff; }
.st-theme img{ max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   2. Typografie
   ------------------------------------------------------------ */
.st-theme :where(h1,h2,h3,h4,h5,h6),
.st-theme .w-post-elm.post_title{
  font-family: var(--st-font);
  color: var(--st-antraciet);
  font-weight: 600;
  text-wrap: pretty;
  margin-top: 0;
}
.st-theme h1{ font-size: clamp(32px, 4vw, 48px); line-height: 1.1;  letter-spacing: -.025em; margin-bottom: 18px; }
.st-theme h2{ font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -.02em;  margin-bottom: 16px; }
.st-theme h3{ font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; margin-bottom: 10px; }
.st-theme h4{ font-size: 18px; line-height: 1.3; margin-bottom: 10px; }
.st-theme h5{ font-size: 16px; line-height: 1.4; margin-bottom: 8px; }
.st-theme h6{
  font-family: var(--st-font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--st-oranje-tekst); margin-bottom: 12px;
}

/* Kicker — kleine oranje bovenkop. el_class="st-kicker" */
.st-theme .st-kicker,
.st-theme .st-kicker :where(p,h1,h2,h3,h4,h5,h6){
  font-family: var(--st-font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--st-oranje-tekst) !important;
  line-height: 1.4 !important;
  margin-bottom: 14px;
}
/* Introparagraaf. el_class="st-lead" */
.st-theme .st-lead p{ font-size: 18px; line-height: 1.7; color: var(--st-tekst); }
.st-theme .st-lead p:last-child{ margin-bottom: 0; }

/* Broodkruimel. el_class="st-kruimel" */
.st-theme .st-kruimel,
.st-theme .st-kruimel p{ font-size: 13px; color: var(--st-tekst-licht); margin-bottom: 0; }
.st-theme .st-kruimel a{ color: var(--st-tekst-licht); }
.st-theme .st-kruimel a:hover{ color: var(--st-oranje-tekst); }

/* ------------------------------------------------------------
   3. Links
   ------------------------------------------------------------ */
.st-theme a{ color: var(--st-oranje-tekst); text-decoration: none; transition: color .2s; }
.st-theme a:hover{ color: var(--st-antraciet); }
.st-theme a:focus-visible{ outline: 2px solid var(--st-oranje); outline-offset: 3px; }
.st-theme .st-sectie-donker a{ color: var(--st-oranje-licht); }
.st-theme .st-sectie-donker a:hover{ color: #fff; }

/* Pijllink. el_class="st-pijllink" */
.st-theme .st-pijllink,
.st-theme .st-pijllink p{ margin-bottom: 0; }
.st-theme .st-pijllink a{ font-weight: 600; font-size: 15px; }

/* ------------------------------------------------------------
   4. Knoppen (us_btn + vc_btn + formulieren)
   Maatvoering exact volgens het ontwerp: 16px boven/onder, 26px links/rechts,
   Archivo 600 op 15px, rechte hoeken, geen schaduw.
   ------------------------------------------------------------ */
.st-theme :where(.w-btn, .vc_general.vc_btn3, button[type="submit"],
  input[type="submit"], .wpcf7-submit, .gform_button){
  font-family: var(--st-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 0 !important;
  border: 1px solid transparent;
  box-shadow: none !important;
  padding: 16px 26px !important;
  min-height: 0 !important;
  transition: background-color .22s, color .22s, border-color .22s !important;
}
.st-theme .w-btn .w-btn-label{
  font-size: inherit; font-weight: inherit; line-height: 1; letter-spacing: 0;
}
.st-theme .w-btn i, .st-theme .w-btn .w-btn-icon{ font-size: 1em; }

/* Primair — oranje vlak, witte tekst */
.st-theme :where(.w-btn.us-btn-style_1, .w-btn.us-btn-style_solid,
  .vc_general.vc_btn3, button[type="submit"], input[type="submit"],
  .wpcf7-submit, .gform_button){
  background-color: var(--st-oranje) !important;
  border-color: var(--st-oranje) !important;
  color: #fff !important;
}
.st-theme :where(.w-btn.us-btn-style_1, .w-btn.us-btn-style_solid,
  .vc_general.vc_btn3, button[type="submit"], input[type="submit"],
  .wpcf7-submit, .gform_button):hover{
  background-color: var(--st-antraciet) !important;
  border-color: var(--st-antraciet) !important;
  color: #fff !important;
}
.st-theme :where(.w-btn.us-btn-style_1, .w-btn.us-btn-style_solid) .w-btn-label{ color: #fff !important; }

/* Secundair — antraciet vlak */
.st-theme .w-btn.us-btn-style_2{
  background-color: var(--st-antraciet) !important;
  border-color: var(--st-antraciet) !important;
  color: #fff !important;
}
.st-theme .w-btn.us-btn-style_2 .w-btn-label{ color: #fff !important; }
.st-theme .w-btn.us-btn-style_2:hover{
  background-color: var(--st-oranje) !important; border-color: var(--st-oranje) !important; color: #fff !important;
}

/* Wit vlak — voor donkere secties en foto's */
.st-theme .w-btn.us-btn-style_3{
  background-color: #fff !important; border-color: #fff !important; color: var(--st-antraciet) !important;
}
.st-theme .w-btn.us-btn-style_3 .w-btn-label{ color: var(--st-antraciet) !important; }
.st-theme .w-btn.us-btn-style_3:hover{
  background-color: var(--st-antraciet) !important; border-color: var(--st-antraciet) !important; color: #fff !important;
}
.st-theme .w-btn.us-btn-style_3:hover .w-btn-label{ color: #fff !important; }

/* Lijn — transparant met dunne rand */
.st-theme :where(.w-btn.us-btn-style_4, .w-btn.us-btn-style_outlined){
  background-color: transparent !important;
  border-color: #d5d8da !important;
  color: var(--st-antraciet) !important;
}
.st-theme :where(.w-btn.us-btn-style_4, .w-btn.us-btn-style_outlined) .w-btn-label{ color: inherit !important; }
.st-theme :where(.w-btn.us-btn-style_4, .w-btn.us-btn-style_outlined):hover{
  background-color: var(--st-antraciet) !important; border-color: var(--st-antraciet) !important; color: #fff !important;
}
/* Op donkere grond wordt de lijnknop wit */
.st-theme :where(.st-sectie-donker, .st-hero) .w-btn.us-btn-style_4{
  border-color: rgba(255,255,255,.45) !important; color: #fff !important;
}
.st-theme :where(.st-sectie-donker, .st-hero) .w-btn.us-btn-style_4:hover{
  background-color: #fff !important; border-color: #fff !important; color: var(--st-antraciet) !important;
}

/* Compacte knoppen: header-CTA en footer */
.st-theme .l-header .w-btn,
.st-theme .l-footer .w-btn{ padding: 13px 22px !important; font-size: 14px !important; }

/* Tekstknop */
.st-theme .w-btn.us-btn-style_raw{
  padding: 0 !important; background: none !important; border: 0 !important;
  color: var(--st-oranje-tekst) !important; font-size: 14px !important;
}
.st-theme .w-btn.us-btn-style_raw:hover{ background: none !important; color: var(--st-antraciet) !important; }

/* ------------------------------------------------------------
   5. Secties (vc_row) — achtergrondvarianten
   ------------------------------------------------------------ */
.st-theme .st-sectie > .l-section-h,
.st-theme .st-sectie.type_default > .l-section-h{
  padding-top: var(--st-sectie);
  padding-bottom: var(--st-sectie);
  max-width: var(--st-max);
}
.st-theme .l-section.st-sectie{ padding-left: 0; padding-right: 0; }
.st-theme .st-sectie-licht{ background: var(--st-blauwgrijs); }
.st-theme .st-sectie-grijs{ background: var(--st-grijs-vlak); }
.st-theme .st-sectie-donker{ background: var(--st-antraciet); }
.st-theme .st-sectie-donker :where(h1,h2,h3,h4,h5,h6){ color: #fff; }
.st-theme .st-sectie-donker :where(p,li,td,span){ color: #d5d7d8; }
.st-theme .st-sectie-donker .st-kicker,
.st-theme .st-sectie-donker .st-kicker :where(p,h1,h2,h3,h4,h5,h6){ color: var(--st-oranje-licht) !important; }
/* Strakke sectie zonder bodemruimte */
.st-theme .st-sectie-kort > .l-section-h{ padding-top: clamp(32px,4vw,40px); padding-bottom: clamp(40px,5vw,56px); }
.st-theme .st-sectie-vlak > .l-section-h{ padding-top: 0; padding-bottom: 0; }

/* Sectie-intro (kop + subtitel + pijllink) en de bijbehorende grid staan in dezelfde
   sectie. Sluit ze aan zoals in het ontwerp: 10px kop→subtitel, 28px subtitel→grid. */
.st-theme .st-sectie:has(.st-pijllink) h2{ margin-bottom: 10px; }
.st-theme .st-sectie:has(.st-pijllink) .w-grid{ margin-top: 28px; }

/* Kop direct boven een grid in dezelfde kolom (bv. "Drie systemen"): 24px eronder. */
.st-theme .st-sectie .wpb_text_column + .w-grid{ margin-top: 24px; }

/* Kop + subtitel gevolgd door een USP-blok ("Waarom kiezen"): 10px kop→subtitel, 28px erna. */
.st-theme .st-sectie:has(.st-usps) h2{ margin-bottom: 10px; }
.st-theme .wpb_text_column + .st-usps{ margin-top: 28px; }

/* Knop na een tekstblok krijgt lucht boven zich; ~ zodat naast-elkaar-knoppen samen uitlijnen. */
.st-theme .l-section:not(.st-hero) .wpb_text_column ~ .w-btn-wrapper{ margin-top: 20px; }

/* Home-afwerkingenteaser: titel + subtitel zonder taxonomie-eyebrow (de overzichts-
   paginas tonen de eyebrow wel). */
.st-theme.home .st-grid-tegel .post_taxonomy{ display: none; }

/* Paginakop: broodkruimel + h1 + intro op lichte achtergrond */
.st-theme .st-paginakop{ background: var(--st-blauwgrijs); }
.st-theme .st-paginakop > .l-section-h{ padding-top: clamp(28px,3.5vw,40px); padding-bottom: clamp(40px,5vw,56px); }
.st-theme .st-paginakop h1{ margin-bottom: 14px; }
.st-theme .st-paginakop .st-kruimel{ margin-bottom: 18px; }
.st-theme .st-paginakop p{ max-width: 72ch; font-size: 18px; }

/* ------------------------------------------------------------
   5b. Blok-wrappers als <span>
   WordPress (wpautop) wikkelt tekstinhoud in <p>. Een <div> wordt door de
   browser uit die <p> geduwd, waardoor kaarten en rasters openbreken.
   Daarom zijn alle wrappers in de content <span> met display gezet.
   ------------------------------------------------------------ */
.st-theme :where(.st-slot, .st-raster, .st-projecten, .st-project, .st-voorna,
  .st-beeldraster, .st-kaart, .st-kaart-body, .st-kb-lijst, .st-kb-item,
  .st-zijbalk, .st-onderwerpen, .st-hulpblok, .st-formulier, .st-rol-keuze,
  .st-contactgegevens, .st-gegevens, .st-spec, .st-downloads, .st-partnerblok,
  .st-lijst, .st-usps, .st-opbouw, .st-stappen, .st-stappen-rij){
  display: block;
}
/* De layoutwaarden hierna overschrijven bovenstaande display waar nodig. */
.st-theme :where(.st-slot, .st-voorna, .st-kb-lijst, .st-zijbalk, .st-rol-keuze,
  .st-contactgegevens, .st-partnerblok, .st-kaart, .st-kaart-body, .st-kb-item,
  .st-project, .st-project-body){ display: flex; }
.st-theme :where(.st-raster, .st-projecten, .st-beeldraster){ display: grid; }
/* Losse <p> die wpautop binnen een wrapper achterlaat, niet laten meespelen */
.st-theme :where(.st-kaart, .st-kb-item, .st-project) > p:empty,
.st-theme :where(.st-raster, .st-projecten, .st-voorna, .st-beeldraster) > p:empty,
.st-theme :where(.st-kaart-body, .st-project-body) > p:empty{ display: none; }
.st-theme :where(.st-raster, .st-projecten) > br,
.st-theme :where(.st-kaart, .st-kaart-body, .st-kb-item, .st-project, .st-project-body) > br{ display: none; }

/* ------------------------------------------------------------
   6. Afbeeldingsplaatshouders (st-slot)
   Vervang de inhoud door een Image-element of <img>.
   ------------------------------------------------------------ */
.st-theme .st-slot{
  position: relative; display: flex; align-items: flex-end; justify-content: flex-start;
  background-color: var(--st-placeholder-b);
  background-image: repeating-linear-gradient(135deg, var(--st-placeholder-a) 0 10px, var(--st-placeholder-b) 10px 20px);
  color: #7d8286;
  font-family: var(--st-font-mono); font-size: 10px; letter-spacing: .08em;
  padding: 14px; overflow: hidden; margin-bottom: 0;
}
.st-theme .st-slot span{ color: inherit; position: relative; z-index: 1; }
.st-theme .st-slot img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-theme .st-slot.st-16x9{ aspect-ratio: 16/9; }
.st-theme .st-slot.st-16x10{ aspect-ratio: 16/10; }
.st-theme .st-slot.st-21x9{ aspect-ratio: 21/9; }
.st-theme .st-slot.st-4x3{ aspect-ratio: 4/3; }
.st-theme .st-slot.st-1x1{ aspect-ratio: 1/1; }
.st-theme .st-slot.st-4x5{ aspect-ratio: 4/5; }
.st-theme .st-slot.st-3x2{ aspect-ratio: 3/2; }
.st-theme .st-slot.st-hoog{ min-height: min(60vh, 560px); }

/* ------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------ */
.st-theme .st-hero{ position: relative; }
.st-theme .st-hero > .l-section-h{
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(64px, 8vw, 104px);
  max-width: var(--st-max);
}
.st-theme .st-hero .l-section-img{ background-size: cover; background-position: center; }
.st-theme .st-hero::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(60,60,59,.86) 0%, rgba(60,60,59,.66) 46%, rgba(60,60,59,.16) 78%, rgba(60,60,59,0) 100%);
}
.st-theme .st-hero .l-section-h{ position: relative; z-index: 1; }
.st-theme .st-hero :where(h1,h2,h3){ color: #fff; }
.st-theme .st-hero :where(p,li,span){ color: #e4e6e7; }
.st-theme .st-hero .st-kicker,
.st-theme .st-hero .st-kicker p{ color: var(--st-oranje-licht) !important; }
.st-theme .st-hero h1{ font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; margin-bottom: 20px; }
.st-theme .st-hero .st-lead p{ font-size: 19px; max-width: 52ch; color: #e4e6e7; }
.st-theme .st-hero .w-btn-wrapper{ margin-top: 28px; }
/* Zonder sectie-achtergrondafbeelding toont de hero de full-bleed foto-placeholder
   (streeppatroon + label), net als in het ontwerp. Zodra er een .l-section-img is
   ingesteld dekt die het patroon af en verdwijnt het label vanzelf. */
.st-theme .st-hero{
  background-color: var(--st-placeholder-b);
  background-image: repeating-linear-gradient(135deg, var(--st-placeholder-a) 0 12px, var(--st-placeholder-b) 12px 24px);
}
.st-theme .st-hero:not(:has(.l-section-img)) .wpb_wrapper:has(> .st-kicker)::after{
  content: "achtergrond — full-bleed projectfoto woning met steenstripgevel, 2400×1240";
  display: block; margin-top: 24px;
  font: 400 11px/1.4 var(--st-font-mono); letter-spacing: .1em; color: #b9bcbe;
}

/* ------------------------------------------------------------
   8. USP-blok (icoon + kop + tekst)
   ------------------------------------------------------------ */
.st-theme .st-usps ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.st-theme .st-usps li{
  display: flex; gap: 18px; padding: 24px; border: 1px solid var(--st-lijn); margin: 0; color: var(--st-tekst-licht);
}
.st-theme .st-usps .st-usps-icon{
  display: flex; flex: 0 0 56px; align-items: flex-start; justify-content: center;
  width: 56px; height: 56px; margin: 0; padding: 10px; box-sizing: border-box;
  border: 1px dashed #f0b988;
}
.st-theme .st-usps .st-usps-icon img{
  display: block; width: 34px; height: 34px; max-width: 100%; object-fit: contain;
}
.st-theme .st-usps .st-usps-content{ display: block; min-width: 0; }
.st-theme .st-usps li strong{
  display: block; font-size: 17px; font-weight: 600; color: var(--st-antraciet); margin-bottom: 6px;
}
.st-theme .st-usps li span{ display: block; font-size: 14px; line-height: 1.6; color: var(--st-tekst-licht); }

/* ------------------------------------------------------------
   9. Kenmerkenlijst met oranje blokje
   ------------------------------------------------------------ */
.st-theme .st-lijst ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.st-theme .st-lijst li{ display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 500; color: var(--st-antraciet); margin: 0; }
.st-theme .st-lijst li::before{ content:""; flex: none; width: 8px; height: 8px; background: var(--st-oranje); }

/* ------------------------------------------------------------
   10. Voor/na-beelden
   ------------------------------------------------------------ */
.st-theme .st-voorna{ display: flex; gap: 20px; align-items: flex-start; }
.st-theme .st-voorna > span{ position: relative; flex: 1; }
.st-theme .st-voorna > span:first-child{ margin-top: 36px; }
.st-theme .st-voorna .st-slot{ width: 100%; align-items: flex-start; }
.st-theme .st-voorna > span::after{
  position: absolute; bottom: 0; padding: 6px 16px; color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; z-index: 2;
}
.st-theme .st-voorna > span:first-child::after{ content: "VOOR"; left: 0; background: var(--st-antraciet); }
.st-theme .st-voorna > span:last-child::after{ content: "NA"; right: 0; background: var(--st-oranje); }

/* ------------------------------------------------------------
   11. Genummerde stappen / systeemopbouw
   ------------------------------------------------------------ */
.st-theme .st-stappen ol,
.st-theme .st-opbouw ol{ list-style: none; margin: 0; padding: 0; counter-reset: st; }
.st-theme .st-stappen li,
.st-theme .st-opbouw li{
  display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; row-gap: 2px;
  padding: 18px 0; border-top: 1px solid var(--st-lijn-donker); margin: 0;
}
.st-theme .st-stappen li:last-child,
.st-theme .st-opbouw li:last-child{ border-bottom: 1px solid var(--st-lijn-donker); }
.st-theme .st-stappen li::before,
.st-theme .st-opbouw li::before{
  counter-increment: st; content: "0" counter(st);
  font-family: var(--st-font-mono); font-size: 14px; font-weight: 500; color: var(--st-oranje-tekst);
}
.st-theme .st-stappen li strong,
.st-theme .st-opbouw li strong{ grid-column: 2; display: block; font-size: 16px; font-weight: 600; color: var(--st-antraciet); }
.st-theme .st-stappen li span,
.st-theme .st-opbouw li span{ grid-column: 2; display: block; font-size: 15px; line-height: 1.6; color: var(--st-tekst); }
.st-theme .st-sectie-donker .st-stappen li{ border-color: #4f4f4e; }
.st-theme .st-sectie-donker .st-stappen li strong{ color: #fff; }
.st-theme .st-sectie-donker .st-stappen li span{ color: #b7b9ba; }
.st-theme .st-sectie-donker .st-stappen li::before{ color: var(--st-oranje-licht); }

/* Stappen naast elkaar (4 kolommen met streep erboven) */
.st-theme .st-stappen-rij ol{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.st-theme .st-stappen-rij li{
  display: block; padding: 20px 0 0; border-top: 2px solid var(--st-antraciet); border-bottom: 0;
}
.st-theme .st-stappen-rij li::before{
  display: block; content: "STAP 0" counter(st); font-weight: 600; letter-spacing: .1em; margin-bottom: 10px;
}

/* ------------------------------------------------------------
   12. Kaarten en tegels
   ------------------------------------------------------------ */
.st-theme .st-kaarten{ display: grid; gap: 24px; }
.st-theme .st-kaarten-2{ grid-template-columns: repeat(2, 1fr); }
.st-theme .st-kaarten-3{ grid-template-columns: repeat(3, 1fr); }
.st-theme .st-kaarten-4{ grid-template-columns: repeat(4, 1fr); }
.st-theme .st-kaarten-5{ grid-template-columns: repeat(5, 1fr); gap: 16px; }

.st-theme .st-kaart{
  display: flex; flex-direction: column; border: 1px solid var(--st-lijn);
  background: #fff; transition: border-color .2s, transform .2s;
}
.st-theme a.st-kaart:hover{ border-color: var(--st-oranje); transform: translateY(-2px); }
.st-theme .st-kaart .st-slot{ margin-bottom: 0; }
.st-theme .st-kaart-body{ display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.st-theme .st-kaart-label{
  font-family: var(--st-font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--st-oranje-tekst);
}
.st-theme .st-kaart-titel{ font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--st-antraciet); }
.st-theme .st-kaart-tekst{ font-size: 15px; line-height: 1.6; color: var(--st-tekst-licht); }
.st-theme .st-kaart-link{ font-size: 14px; font-weight: 600; color: var(--st-oranje-tekst); padding-top: 4px; }

/* Compacte tegel (afwerkingen) */
.st-theme .st-tegel .st-kaart-body{ padding: 16px; gap: 4px; }
.st-theme .st-tegel .st-kaart-titel{ font-size: 16px; }
.st-theme .st-tegel .st-kaart-tekst{ font-size: 13px; line-height: 1.5; }

/* Kaartraster gemaakt in één tekstblok */
.st-theme .st-raster{ display: grid; gap: 24px; }
.st-theme .st-raster.st-kol-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.st-theme .st-raster.st-kol-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.st-theme .st-raster.st-kol-4{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.st-theme .st-raster.st-kol-5{ grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.st-theme .st-raster p{ margin: 0; }

/* ------------------------------------------------------------
   13. Projectkaarten (beeld met tekst eroverheen)
   ------------------------------------------------------------ */
.st-theme .st-projecten{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.st-theme .st-project{
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4/3; padding: 24px; overflow: hidden;
  background-color: var(--st-placeholder-b);
  background-image: repeating-linear-gradient(135deg, var(--st-placeholder-a) 0 10px, var(--st-placeholder-b) 10px 20px);
}
.st-theme .st-project img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-theme .st-project::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(60,60,59,.9) 0%, rgba(60,60,59,.48) 46%, rgba(60,60,59,0) 80%);
  transition: opacity .25s;
}
.st-theme a.st-project:hover::after{ opacity: .85; }
.st-theme .st-project-body{ position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.st-theme .st-project-label{
  font-family: var(--st-font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--st-oranje-licht);
}
.st-theme .st-project-titel{ font-size: 21px; font-weight: 600; line-height: 1.25; color: #fff; }
.st-theme .st-project-tekst{ font-size: 14px; line-height: 1.6; color: #e4e6e7; }

/* ------------------------------------------------------------
   14. Steenstrips uitgelicht (donker blok met beeldraster)
   ------------------------------------------------------------ */
.st-theme .st-beeldraster{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--st-antraciet-2); }
.st-theme .st-beeldraster .st-slot{
  aspect-ratio: 1; margin: 0;
  background-image: repeating-linear-gradient(135deg, #4f4f4e 0 10px, #575756 10px 20px);
  color: #a0a2a4;
}

/* ------------------------------------------------------------
   15. Specificatietabel en downloads
   ------------------------------------------------------------ */
.st-theme .st-spec table{ width: 100%; border-collapse: collapse; background: #fff; }
.st-theme .st-spec td{ padding: 15px 20px; border-bottom: 1px solid var(--st-lijn); font-size: 15px; }
.st-theme .st-spec tr:last-child td{ border-bottom: 0; }
.st-theme .st-spec td:first-child{ color: var(--st-tekst-licht); }
.st-theme .st-spec td:last-child{ text-align: right; font-weight: 600; color: var(--st-antraciet); }

.st-theme .st-downloads ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-theme .st-downloads li{ margin: 0; }
.st-theme .st-downloads a{
  display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px;
  background: #fff; font-size: 15px; font-weight: 500; color: var(--st-antraciet);
  border: 1px solid transparent; transition: border-color .2s;
}
.st-theme .st-downloads a:hover{ border-color: var(--st-oranje); color: var(--st-antraciet); }
.st-theme .st-downloads a::after{ content: "PDF ↓"; color: var(--st-oranje-tekst); font-weight: 600; }

/* Mogelijke afwerkingen (detailpagina): 4-koloms kaartenraster */
.st-theme .st-afwerkingen{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 22px;
}
.st-theme .st-afwerkingen > a{
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--st-lijn); text-decoration: none; color: var(--st-antraciet);
  transition: border-color .2s;
}
.st-theme .st-afwerkingen > a:hover{ border-color: var(--st-oranje); }
.st-theme .st-afwerkingen .st-slot{ margin-bottom: 0; }
.st-theme .st-afwerkingen .st-afw-titel{ padding: 15px 18px; font-size: 16px; font-weight: 600; }

/* Projectgegevens-blok */
.st-theme .st-gegevens{ background: var(--st-blauwgrijs); padding: 28px; }
.st-theme .st-gegevens h3{ margin-bottom: 12px; }
.st-theme .st-gegevens table{ width: 100%; border-collapse: collapse; }
.st-theme .st-gegevens td{ padding: 12px 0; border-top: 1px solid var(--st-lijn-donker); font-size: 15px; }
.st-theme .st-gegevens td:first-child{ color: var(--st-tekst-licht); }
.st-theme .st-gegevens td:last-child{ text-align: right; font-weight: 600; color: var(--st-antraciet); }
/* Knoppen in het gegevens- en hulpblok vullen de volle breedte van hun paneel. */
.st-theme .st-gegevens .w-btn,
.st-theme .st-hulpblok .w-btn{ display: flex; width: 100%; justify-content: center; }

/* ------------------------------------------------------------
   16. Kennisbank
   ------------------------------------------------------------ */
.st-theme .st-kb-lijst{ display: flex; flex-direction: column; gap: 20px; }
.st-theme .st-kb-item{
  display: flex; flex-direction: column; gap: 8px; padding: 24px;
  border: 1px solid var(--st-lijn); transition: border-color .2s;
}
.st-theme a.st-kb-item:hover{ border-color: var(--st-oranje); }
.st-theme .st-kb-item.is-verborgen{ display: none; }
.st-theme .st-kb-item .st-kaart-titel{ font-size: 21px; }
.st-theme .st-meer-laden{
  align-self: center; margin-top: 12px; display: inline-flex; align-items: center;
  padding: 15px 28px; border: 1px solid var(--st-antraciet); background: none;
  font-family: var(--st-font); font-size: 15px; font-weight: 600; color: var(--st-antraciet); cursor: pointer;
}
.st-theme .st-meer-laden:hover{ background: var(--st-antraciet); color: #fff; }

.st-theme .st-zijbalk{ display: flex; flex-direction: column; gap: 28px; }
.st-theme .st-onderwerpen ul{ list-style: none; margin: 0; padding: 0; }
.st-theme .st-onderwerpen li{ margin: 0; }
/* Navigatielinks in de zijbalk (kennisbankpagina, [kennis_onderwerpen]). */
.st-theme .st-onderwerpen a{
  display: block; padding: 11px 0; border-top: 1px solid var(--st-lijn);
  font-size: 15px; color: var(--st-tekst);
}
.st-theme .st-onderwerpen li:last-child a{ border-bottom: 1px solid var(--st-lijn); }
.st-theme .st-onderwerpen a:hover{ color: var(--st-oranje-tekst); }
.st-theme .st-onderwerpen a.is-actief{ color: var(--st-oranje-tekst); font-weight: 600; }
.st-theme .st-onderwerpen a.is-actief::after{ content: " ✓"; }
/* Meervoudige onderwerp-filter (onderwerp-archief): aanvinkbaar zonder zichtbare checkbox. */
.st-theme .st-onderwerp-keuze{
  display: block; position: relative; padding: 11px 0; border-top: 1px solid var(--st-lijn);
  font-size: 15px; color: var(--st-tekst); cursor: pointer; transition: color .2s;
}
.st-theme .st-onderwerpen li:last-child .st-onderwerp-keuze{ border-bottom: 1px solid var(--st-lijn); }
.st-theme .st-onderwerp-keuze:hover{ color: var(--st-oranje-tekst); }
.st-theme .st-onderwerp-keuze input{ position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.st-theme .st-onderwerp-keuze:has(input:focus-visible){ outline: 2px solid var(--st-oranje); outline-offset: 2px; }
.st-theme .st-onderwerp-keuze:has(input:checked){ color: var(--st-oranje-tekst); font-weight: 600; }
.st-theme .st-onderwerp-keuze:has(input:checked) span::after{ content: " ✓"; }
/* Wis-knop maakt alle gekozen onderwerpen leeg. */
.st-theme .st-onderwerpen .st-wis-filter{
  margin-top: 16px; display: inline-flex; align-items: center;
  padding: 10px 20px; border: 1px solid var(--st-antraciet); background: none;
  font-family: var(--st-font); font-size: 14px; font-weight: 600; color: var(--st-antraciet); cursor: pointer;
}
.st-theme .st-onderwerpen .st-wis-filter:hover{ background: var(--st-antraciet); color: #fff; }
.st-theme .st-onderwerpen .st-wis-filter[hidden]{ display: none; }
.st-theme .st-kb-leeg{ font-size: 15px; color: var(--st-tekst); }
.st-theme .st-hulpblok{ background: var(--st-blauwgrijs); padding: 24px; }
.st-theme .st-hulpblok h3{ font-size: 17px; margin-bottom: 8px; }
.st-theme .st-hulpblok p{ font-size: 15px; margin-bottom: 14px; }

/* Twee-koloms indeling van het onderwerp-archief: kaarten links, zijbalk rechts.
   Volgt dezelfde 2/1-verhouding als de kennisbankpagina (col-lg-8 / col-lg-4). */
.st-theme .st-kb-layout{ display: grid; grid-template-columns: 2fr 1fr; gap: var(--st-gap); align-items: start; }
.st-theme .st-kb-layout .st-zijbalk{ position: sticky; top: 120px; }
.st-theme .st-kb-layout .navigation.pagination{ margin-top: 28px; }
.st-theme .st-kb-layout .nav-links{ display: flex; flex-wrap: wrap; gap: 8px; }
.st-theme .st-kb-layout .page-numbers{
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px;
  padding: 10px 14px; border: 1px solid var(--st-lijn); font-size: 15px; color: var(--st-tekst);
}
.st-theme .st-kb-layout .page-numbers:hover{ border-color: var(--st-oranje); color: var(--st-oranje-tekst); }
.st-theme .st-kb-layout .page-numbers.current{ background: var(--st-antraciet); border-color: var(--st-antraciet); color: #fff; }
@media (max-width: 900px){
  .st-theme .st-kb-layout{ grid-template-columns: 1fr; }
  .st-theme .st-kb-layout .st-zijbalk{ position: static; }
}

/* ------------------------------------------------------------
   17. Formulieren (Gravity Forms / CF7 / WPForms)
   ------------------------------------------------------------ */
/* Formulierpaneel — de hele kolominhoud (doelgroepschakelaar + Gravity Form) in het
   grijze vlak. Het [gravityform]-blok is een <div> die uit de .st-formulier-<span>
   breekt (block in span), dus stylen we de omliggende wrapper i.p.v. de span. */
.st-theme .wpb_wrapper:has(.st-formulier){
  background: var(--st-grijs-vlak); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.st-theme .wpb_wrapper:has(.st-formulier) > p{ margin: 0; }
.st-theme .st-formulier{ background: none; padding: 0; }
.st-theme .st-formulier br{ display: none; }
.st-theme .st-formulier .gform_wrapper,
.st-theme .st-formulier .wpcf7{ margin: 0; }

/* Gravity Forms binnen het paneel */
.st-theme .gform_wrapper.gravity-theme{ margin: 0 !important; }
.st-theme .gform_wrapper .gform_fields{ grid-column-gap: 16px !important; grid-row-gap: 16px !important; }
.st-theme .gform_wrapper .gfield_label{ font-size: 13px !important; font-weight: 500 !important; color: var(--st-tekst) !important; margin: 0 0 8px !important; }
.st-theme .gform_wrapper .gfield input,
.st-theme .gform_wrapper .gfield textarea,
.st-theme .gform_wrapper .gfield select{ width: 100% !important; }
.st-theme .gform_wrapper .gform_validation_container,
.st-theme .gform_wrapper .gfield--type-honeypot{ display: none !important; }
.st-theme .gform_wrapper .gfield--type-consent .gchoice{ display: flex !important; align-items: flex-start !important; gap: 8px !important; }
.st-theme .gform_wrapper .gfield--type-consent label{ font-size: 14px !important; font-weight: 400 !important; color: var(--st-tekst) !important; margin: 0 !important; }
.st-theme .gform_wrapper .gfield--type-consent input[type="checkbox"]{ min-height: 0 !important; width: 18px !important; height: 18px !important; margin-top: 2px !important; }
.st-theme .gform_wrapper .gform_footer{ margin: 8px 0 0 !important; padding: 0 !important; display: block !important; }
.st-theme .gform_wrapper .gform_footer input[type="submit"],
.st-theme .gform_wrapper .gform_footer .gform_button{
  width: 100% !important; display: block !important; height: 52px !important; min-height: 52px !important; line-height: 1 !important;
  background: var(--st-oranje) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important;
  font-weight: 600 !important; font-size: 15px !important; margin: 0 !important; cursor: pointer;
}
.st-theme .gform_wrapper .gform_footer input[type="submit"]:hover,
.st-theme .gform_wrapper .gform_footer .gform_button:hover{ background: var(--st-oranje-tekst) !important; }

.st-theme :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="date"], input[type="search"], select, textarea){
  font-family: var(--st-font) !important;
  font-size: 15px !important;
  color: var(--st-antraciet) !important;
  background: #fff !important;
  border: 1px solid #dfe3e6 !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  min-height: 46px;
  box-shadow: none !important;
  transition: border-color .2s;
}
.st-theme textarea{ min-height: 104px; }
.st-theme :where(input, select, textarea):focus{ border-color: var(--st-oranje) !important; outline: none !important; }
.st-theme :where(label, .gfield_label, .wpcf7-form-control-wrap > span){
  font-family: var(--st-font); font-size: 13px; font-weight: 500; color: var(--st-tekst);
}
.st-theme ::placeholder{ color: var(--st-tekst-zwak); opacity: 1; }
.st-theme .gform_required_legend{ display: none; }

/* Doelgroepschakelaar boven het formulier */
.st-theme .st-rol-keuze{ display: flex; gap: 10px; margin-bottom: 16px; }
.st-theme .st-rol-keuze button{
  font-family: var(--st-font); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border: 1px solid #dfe3e6; background: #fff; color: var(--st-tekst);
}
.st-theme .st-rol-keuze button.is-actief{ background: var(--st-antraciet); border-color: var(--st-antraciet); color: #fff; }

/* Rolkeuze als knoppen ín het Gravity Form (keuzerondjesveld met class st-rol-veld).
   Zelfde uitstraling als de losse doelgroepschakelaar; met order bovenaan het formulier. */
.st-theme .gform_wrapper .st-rol-veld{ order: -1; }
.st-theme .gform_wrapper .st-rol-veld .gfield_label{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.st-theme .gform_wrapper .st-rol-veld .gfield_radio{ display: flex; flex-wrap: wrap; gap: 10px; }
.st-theme .gform_wrapper .st-rol-veld .gchoice{ display: block !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.st-theme .gform_wrapper .st-rol-veld .gchoice input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.st-theme .gform_wrapper .st-rol-veld .gchoice label{
  display: inline-block !important; width: auto !important; max-width: none !important; white-space: nowrap !important;
  font-family: var(--st-font) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer;
  padding: 10px 18px !important; border: 1px solid #dfe3e6 !important; background: #fff !important; color: var(--st-tekst) !important; margin: 0 !important;
}
.st-theme .gform_wrapper .st-rol-veld .gchoice:has(input:checked) label{
  background: var(--st-antraciet) !important; border-color: var(--st-antraciet) !important; color: #fff !important;
}
/* De rolkeuze zit nu ín het formulier; verberg de losse (niet-werkende) knoppen op de contactpagina. */
.st-theme.contact .st-rol-keuze{ display: none; }

/* Contactgegevens-blok */
.st-theme .st-contactgegevens{ display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--st-lijn); }
.st-theme .st-contactgegevens strong{ font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--st-antraciet); line-height: 1.2; }
.st-theme .st-contactgegevens em{
  font-family: var(--st-font-mono); font-style: normal; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--st-tekst-zwak);
}

/* ------------------------------------------------------------
   18. Slotzin met driehoekenprint (huisstijlelement)
   ------------------------------------------------------------ */
.st-theme .st-print{ position: relative; overflow: hidden; }
.st-theme .st-print > .l-section-h{ padding-top: clamp(48px,6vw,80px); padding-bottom: clamp(56px,7vw,96px); }
.st-theme .st-print p{ font-size: clamp(24px,3.2vw,40px); line-height: 1.25; color: var(--st-tekst); margin: 0; }
.st-theme .st-print p strong{ display: block; font-weight: 600; color: var(--st-antraciet); }
.st-theme .st-print::after{
  content: ""; position: absolute; right: 0; bottom: 0; width: 320px; height: 192px; pointer-events: none;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-image:
    linear-gradient(to bottom right, transparent 50%, var(--st-blauwgrijs) 50%),
    linear-gradient(to bottom left,  transparent 50%, var(--st-oranje) 50%),
    linear-gradient(to top right,    transparent 50%, var(--st-antraciet) 50%),
    linear-gradient(to bottom right, transparent 50%, var(--st-oranje) 50%),
    linear-gradient(var(--st-blauwgrijs), var(--st-blauwgrijs)),
    linear-gradient(to bottom left,  transparent 50%, var(--st-blauwgrijs) 50%),
    linear-gradient(to bottom right, transparent 50%, var(--st-oranje) 50%),
    linear-gradient(to top left,     transparent 50%, var(--st-antraciet) 50%),
    linear-gradient(to bottom right, transparent 50%, var(--st-antraciet) 50%);
  background-position:
    192px 0px, 256px 0px,
    128px 64px, 192px 64px, 256px 64px,
    64px 128px, 128px 128px, 192px 128px, 256px 128px;
}
@media (max-width: 767px){ .st-theme .st-print::after{ width: 192px; height: 128px; background-size: 64px 64px;
  background-position: 64px 0, 128px 0, 0 64px, 64px 64px, 128px 64px, -64px 128px, -64px 128px, -64px 128px, -64px 128px; } }

/* ------------------------------------------------------------
   19. Header en navigatie (Impreza us_header)
   ------------------------------------------------------------ */
.st-theme .l-header .w-nav-list .menu-item > a,
.st-theme .l-header .w-nav-anchor{
  font-family: var(--st-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--st-antraciet) !important;
}
.st-theme .l-header .w-nav-anchor:hover,
.st-theme .l-header .menu-item.current-menu-item > a,
.st-theme .l-header .menu-item.current-menu-ancestor > a{ color: var(--st-oranje-tekst) !important; }
.st-theme .l-subheader.at_top{
  background: var(--st-antraciet) !important;
  font-family: var(--st-font-mono); font-size: 12px; letter-spacing: .05em;
}
.st-theme .l-subheader.at_top,
.st-theme .l-subheader.at_top a{ color: #c8cacc !important; }
.st-theme .l-subheader.at_top a:hover{ color: #fff !important; }
.st-theme .l-subheader.at_top .st-topbar-punt{ margin: 0 6px; }
.st-theme .l-subheader.at_middle{ background: #fff !important; }
.st-theme .l-header.shadow_thin .l-subheader.at_middle{ box-shadow: inset 0 -1px 0 var(--st-lijn); }
.st-theme .w-nav.type_desktop .w-nav-list.level_2{
  border: 1px solid var(--st-lijn); border-radius: 0; box-shadow: 0 18px 36px -18px rgba(60,60,59,.45);
}
.st-theme .w-nav-list.level_2 .w-nav-anchor{ font-size: 14px !important; padding: 11px 20px !important; }
.st-theme .w-nav-list.level_2 .w-nav-anchor:hover{ background: var(--st-grijs-vlak) !important; }

/* ------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------ */
.st-theme .l-footer{ background: var(--st-antraciet); }
.st-theme .l-footer,
.st-theme .l-footer :where(p,li,td,span){ color: #c8cacc; }
.st-theme .l-footer .w-text-h :where(p,li,td,span) { color: #fff; }
.st-theme .l-footer :where(h1,h2,h3,h4,h5,h6){ color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.st-theme .l-footer a{ color: #c8cacc; }
.st-theme .l-footer a:hover{ color: #fff; }
.st-theme .l-footer .menu-item > a{ display: block; padding: 3px 0; font-size: 14px; }
.st-theme .st-footer-claim{ padding-top: 28px; border-top: 1px solid var(--st-antraciet-2); }
.st-theme .st-footer-claim p{ font-size: 15px; color: #e4e6e7; margin: 0; }
.st-theme .st-footer-claim strong{ color: #fff; font-weight: 600; }
.st-theme .st-socket,
.st-theme .st-socket p{ font-size: 13px; color: #a0a2a4; }
.st-theme .st-socket a{ color: #a0a2a4; }
.st-theme .st-socket .st-hart{ color: var(--st-oranje); }
.st-theme .st-partnerblok{ display: flex; flex-direction: column; gap: 16px; }
.st-theme .st-partnerblok p{ font-size: 14px; line-height: 1.6; max-width: 30ch; margin: 0; margin-left: auto;}

/* ------------------------------------------------------------
   21. Diverse Impreza-elementen
   ------------------------------------------------------------ */
.st-theme .w-separator{ border-color: var(--st-lijn) !important; }
.st-theme .w-iconbox .w-iconbox-icon{ color: var(--st-oranje) !important; }
.st-theme .w-tabs-item{ font-family: var(--st-font); }
.st-theme .w-tabs-section-header{ font-family: var(--st-font); font-weight: 600; }
.st-theme .w-grid-item{ padding: 0; }
.st-theme .w-pagination .page-numbers{ border-radius: 0 !important; font-family: var(--st-font); }
.st-theme .w-pagination .page-numbers.current{ background: var(--st-oranje) !important; color: #fff !important; border-color: var(--st-oranje) !important; }
.st-theme blockquote{ border-left: 4px solid var(--st-oranje); padding-left: 24px; font-style: normal; }

/* ------------------------------------------------------------
   22. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px){
  .st-theme .st-usps ul{ grid-template-columns: repeat(2, 1fr); }
  .st-theme .st-kaarten-4,
  .st-theme .st-afwerkingen,
  .st-theme .st-raster.st-kol-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .st-theme .st-kaarten-5,
  .st-theme .st-raster.st-kol-5{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .st-theme .st-stappen-rij ol{ grid-template-columns: repeat(2, 1fr); }
  .st-theme .st-projecten{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .st-theme .st-usps ul,
  .st-theme .st-kaarten-2,
  .st-theme .st-kaarten-3,
  .st-theme .st-kaarten-4,
  .st-theme .st-kaarten-5,
  .st-theme .st-raster.st-kol-2,
  .st-theme .st-raster.st-kol-3,
  .st-theme .st-raster.st-kol-4,
  .st-theme .st-afwerkingen,
  .st-theme .st-projecten{ grid-template-columns: 1fr; }
  .st-theme .st-raster.st-kol-5{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .st-theme .st-stappen-rij ol{ grid-template-columns: 1fr; }
  .st-theme .st-voorna > span:first-child{ margin-top: 0; }
  .st-theme .wpb_wrapper:has(.st-formulier){ padding: 24px 20px; }
  .st-theme .st-hero::before{ background: linear-gradient(to top, rgba(60,60,59,.9) 0%, rgba(60,60,59,.7) 60%, rgba(60,60,59,.5) 100%); }
  .st-theme .st-contactgegevens strong{ font-size: 24px; }
}

/* ------------------------------------------------------------
   23. Detailpagina's van contenttypes (single-project / single-kennisartikel)
   ------------------------------------------------------------ */
.st-theme .st-project-detail{ display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px,4vw,64px); align-items: start; }
.st-theme .st-project-tekst-kolom p{ font-size: 17px; }
.st-theme .st-project-zij .st-gegevens{ position: sticky; top: 120px; }
.st-theme .st-artikel{ max-width: 780px; }
.st-theme .st-artikel :where(p,li){ font-size: 17px; }
.st-theme .st-artikel h2{ margin-top: 36px; }
@media (max-width: 900px){
  .st-theme .st-project-detail{ grid-template-columns: 1fr; }
  .st-theme .st-project-zij .st-gegevens{ position: static; }
}

/* ------------------------------------------------------------
   24. Impreza Grid (us_grid)
   Alle overzichten gebruiken dezelfde opbouw: berichtafbeelding boven,
   tekstblok onder, in een witte tegel met een dunne rand. Geen verlopen,
   geen gevulde knoppen — dat staat niet in het ontwerp.
   ------------------------------------------------------------ */
.st-theme .w-grid .w-grid-item{ padding: 0; }
.st-theme .w-grid-list{ margin: 0; }
.st-theme .w-grid-preloader{ display: none; }
.st-theme .w-grid .w-grid-none{ font-size: 16px; color: var(--st-tekst-licht); }

/* Tegel */
.st-theme :where(.st-grid-project, .st-grid-kennis, .st-grid-product,
  .st-grid-systeem, .st-grid-tegel) .w-grid-item-h{
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--st-lijn); background: #fff;
  transition: border-color .2s, transform .2s;
}
.st-theme :where(.st-grid-project, .st-grid-kennis, .st-grid-product,
  .st-grid-systeem, .st-grid-tegel) .w-grid-item-h:hover{
  border-color: var(--st-oranje); transform: translateY(-2px);
}
.st-theme .w-grid .w-vwrapper{ width: 100%; }
.st-theme .w-grid .w-vwrapper > .w-vwrapper{ flex: 1; }

/* Beeldvlak: altijd het gestreepte huisstijlvlak als ondergrond, met de
   beeldverhouding uit de Grid Weergave. Staat er een uitgelichte afbeelding,
   dan dekt die het vlak volledig af. */
.st-theme .w-grid .post_image{
  position: relative; margin: 0; overflow: hidden;
  background-color: var(--st-placeholder-b);
  background-image: repeating-linear-gradient(135deg, var(--st-placeholder-a) 0 10px, var(--st-placeholder-b) 10px 20px);
}
.st-theme .w-grid .post_image img{ display: block; width: 100%; height: auto; }
.st-theme :where(.st-grid-project, .st-grid-systeem, .st-grid-kennis) .post_image{ aspect-ratio: 4/3; }
.st-theme :where(.st-grid-product, .st-grid-tegel) .post_image{ aspect-ratio: 1/1; }
.st-theme .w-grid .post_image .w-image-h,
.st-theme .w-grid .post_image > a{ display: block; width: 100%; height: 100%; }
.st-theme .w-grid .post_image img:not([src*="placeholder"]){
  position: absolute; inset: 0; height: 100%; object-fit: cover;
}
/* Impreza's eigen plaatshouder-illustratie verbergen; het label komt van ons */
.st-theme .w-grid .post_image img[src*="placeholder"]{ opacity: 0; }
.st-theme .w-grid .post_image::after{
  content: "foto";
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font-family: var(--st-font-mono); font-size: 10px; letter-spacing: .08em;
  color: #7d8286; pointer-events: none;
}
.st-theme .st-grid-project .post_image::after{ content: "projectfoto"; }
.st-theme .st-grid-systeem .post_image::after{ content: "foto \2014 systeemopbouw"; }
.st-theme :where(.st-grid-product, .st-grid-tegel) .post_image::after{ content: "productfoto"; }
/* Label weghalen zodra er een echte afbeelding staat */
.st-theme .w-grid .post_image:has(img:not([src*="placeholder"]))::after{ content: none; }
.st-theme .w-grid .post_image:has(img:not([src*="placeholder"])){ background-image: none; }

/* Titels en labels */
.st-theme .w-grid .post_title a{ color: var(--st-antraciet); text-decoration: none; }
.st-theme .w-grid .post_title a:hover{ color: var(--st-oranje-tekst); }
.st-theme .w-grid .post_taxonomy,
.st-theme .w-grid .post_taxonomy a{ color: var(--st-oranje-tekst); text-decoration: none; }
.st-theme .w-grid .post_content p:last-child{ margin-bottom: 0; }

/* Knoppen in een tegel zijn oranje tekstlinks, geen vlak en geen kader.
   Impreza zet achtergrond, rand en padding via eigen variabelen; die worden
   hier alle drie geneutraliseerd, anders blijft er een dun kader staan. */
.st-theme .w-grid .w-btn,
.st-theme .w-grid .w-btn.us-btn-style_1,
.st-theme .w-grid .w-btn.us-btn-style_2,
.st-theme .w-grid .w-btn.us-btn-style_3,
.st-theme .w-grid .w-btn.us-btn-style_4,
.st-theme .w-grid .w-btn.us-btn-style_raw{
  --btn-padding: 0;
  --btn-height: auto;
  --btn-width: auto;
  --btn-border-width: 0;
  --btn-border-radius: 0;
  --btn-color-bg: transparent;
  --btn-color-bg-hover: transparent;
  --btn-color-border: transparent;
  --btn-color-border-hover: transparent;
  --btn-color-text: var(--st-oranje-tekst);
  --btn-color-text-hover: var(--st-antraciet);
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--st-oranje-tekst) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}
.st-theme .w-grid .w-btn::before,
.st-theme .w-grid .w-btn::after{ display: none !important; }
.st-theme .w-grid .w-btn .w-btn-label{
  color: inherit !important; background: none !important; padding: 0 !important;
  border: 0 !important; text-decoration: none !important;
}
.st-theme .w-grid .w-btn:hover,
.st-theme .w-grid .w-btn:hover .w-btn-label{
  background: none !important; border-color: transparent !important;
  color: var(--st-antraciet) !important; text-decoration: none !important;
}

/* ------------------------------------------------------------
   24a. Kennisbanklijst (us_grid, type="list"): geen witte kaart met
   rand, maar items onder elkaar met een dunne lijn ertussen — de
   Berichtenlijst in Weergave "List" i.p.v. "Grid". Alleen gebruikt op de
   Kennisbank-overzichtspagina (1 kolom); de kaartweergave (st-grid-kennis)
   blijft ongewijzigd voor de 3-koloms teaser op de home.
   ------------------------------------------------------------ */
.st-theme .st-grid-kennis-lijst .w-grid-item-h{
  border: 0; background: none; border-bottom: 1px solid var(--st-lijn);
}
.st-theme .st-grid-kennis-lijst .w-grid-item-h:hover{ transform: none; border-color: var(--st-lijn); }
.st-theme .st-grid-kennis-lijst .w-grid-item:last-child .w-grid-item-h{ border-bottom: 0; }

/* ------------------------------------------------------------
   Projecten-teaser (home): beeld + tekst op de sectie-achtergrond, geen witte kaart.
   De /projecten/-overzichtspagina (body.projecten) gebruikt wel de overlay hieronder.
   ------------------------------------------------------------ */
.st-theme .st-grid-project .w-grid-item-h{ background: none; border: 0; }
.st-theme .st-grid-project .w-grid-item-h:hover{ transform: none; border-color: transparent; }
.st-theme .st-grid-project .w-vwrapper > .w-vwrapper{ padding: 14px 0 0; gap: 5px; }
/* Kaartspacing exact op het ontwerp: 14px beeld→tekst, 5px binnen het tekstblok, titel 19px.
   Alleen op de home-teaser; het /projecten/-overzicht gebruikt de overlay hieronder. */
.st-theme.home .st-grid-project .post_image{ margin-bottom: 0 !important; }
.st-theme.home .st-grid-project .w-vwrapper > .w-vwrapper{ --vwrapper-gap: 5px !important; gap: 5px !important; padding: 14px 0 0 !important; }
.st-theme.home .st-grid-project .w-vwrapper > .w-vwrapper > *{ margin: 0 !important; }
.st-theme.home .st-grid-project .post_title{ font-size: 19px !important; }

/* ------------------------------------------------------------
   Projectkaart: tekst OVER de foto met donker verloop (niet eronder).
   ALLEEN op de /projecten/-overzichtspagina (body.projecten). Op de home-teaser
   gebruikt dezelfde weergave de standaard kaart (foto boven, tekst eronder),
   precies zoals in het ontwerp. vwrapper:1 = beeld + tekst, vwrapper:2 = tekst.
   ------------------------------------------------------------ */
.st-theme.projecten .st-grid-project .w-grid-item-h{
  position: relative; overflow: hidden;
  background: transparent; border: 0;
}
/* Geen plaatshouderlabel: de overlaytekst neemt die plek in */
.st-theme.projecten .st-grid-project .post_image::after{ content: none; }
/* vwrapper:1 (bevat het beeld + de tekstwrapper) is de positioneringscontext */
.st-theme.projecten .st-grid-project .w-vwrapper:has(> .w-vwrapper){ position: relative; }
/* Donker verloop over het hele vlak, van onder naar boven */
.st-theme.projecten .st-grid-project .w-vwrapper:has(> .w-vwrapper)::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(60,60,59,.88) 0%, rgba(60,60,59,.45) 46%, rgba(60,60,59,0) 78%);
}
/* vwrapper:2 = de tekst, absoluut onderaan over het verloop */
.st-theme.projecten .st-grid-project .w-vwrapper > .w-vwrapper{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px;
}
/* Lichte tekstkleuren voor leesbaarheid op de donkere foto */
.st-theme.projecten .st-grid-project .post_taxonomy,
.st-theme.projecten .st-grid-project .post_taxonomy a{ color: var(--st-oranje-licht) !important; }
.st-theme.projecten .st-grid-project .post_title a,
.st-theme.projecten .st-grid-project .post_title a:hover{ color: #fff !important; }
.st-theme.projecten .st-grid-project :where(.post_custom_field, .post_content, .post_excerpt),
.st-theme.projecten .st-grid-project :where(.post_custom_field, .post_content, .post_excerpt) p{
  color: #e4e6e7 !important;
}

/* Impreza's height_medium legt 64px op elke .l-section, bovenop de section-h-padding.
   Op schaarse pagina's stapelt dat tot enorme gaten. Zet die dubbele padding site-breed
   uit (behalve de hero én de paginakop); de section-h bepaalt de sectie-afstanden (ontwerp). */
.st-theme .l-main > .l-section:not(.st-hero):not(.st-paginakop):not(.st-detailkop):not([class*="us_custom_"]){ padding-top: 0 !important; padding-bottom: 0 !important; }
/* Paginakop is de eerste sectie onder het fixed menu. De header-clearance zit op de sectie
   zelf (var(--header-height), responsive) en valt onder het menu; de section-h krijgt gelijke
   boven- en onderpadding zodat de ruimte boven de breadcrumb en onder de tekst gelijk is. */
.st-theme .l-main > .st-paginakop{ padding-top: var(--header-height) !important; padding-bottom: 0 !important; }
.st-theme .l-main > .st-paginakop > .l-section-h{ padding-top: 56px !important; padding-bottom: 56px !important; }
/* Detailkop (gevelsysteem/product/steenstrip): eerste witte sectie onder het vaste menu.
   Zelfde header-clearance als de paginakop, zodat er ruimte boven de foto en breadcrumb staat. */
.st-theme .l-main > .st-detailkop{ padding-top: var(--header-height) !important; padding-bottom: 0 !important; }
.st-theme .l-main > .st-detailkop > .l-section-h{ padding-top: clamp(24px,3vw,40px) !important; padding-bottom: clamp(40px,5vw,64px) !important; }
.st-theme .l-main > .st-sectie-vlak > .l-section-h{ padding-top: 56px !important; padding-bottom: 56px !important; }
/* Overzichtsgrid (bv. /projecten/) iets compacter dan de home-secties, zoals in het ontwerp. */
.st-theme.projecten .l-main > .st-sectie > .l-section-h{ padding-top: 64px !important; padding-bottom: 72px !important; }

/* Tijdelijk verborgen: het "Stalen aanvragen"-blok op de steenstripspagina.
   De inhoud blijft in de pagina staan; verwijder deze regel om het weer te tonen. */
.st-theme.steenstrips .st-sectie-licht{ display: none !important; }

/* Wit logo in de footer (rechterkolom) — verwijst naar het child-theme-asset */
.st-theme .st-footer-logo{ height: 40px; width: auto; max-width: 100%; display: block; margin-bottom: 16px; }

/* ------------------------------------------------------------
   25. Responsive
   Impreza zet zelf kolommen per breakpoint; deze regels vangen de
   gevallen op waarin een raster anders te smal of te druk wordt.
   ------------------------------------------------------------ */
@media (max-width: 1024px){
  .st-theme .st-grid-product .w-grid-list,
  .st-theme .st-grid-tegel .w-grid-list{ --gap: 16px; }
}
@media (max-width: 767px){
  .st-theme .w-grid .w-grid-item{ width: 100% !important; }
  .st-theme .st-grid-product .w-grid-item,
  .st-theme .st-grid-tegel .w-grid-item{ width: 50% !important; }
  .st-theme .w-grid .w-vwrapper > .w-vwrapper{ padding: 18px !important; }
  .st-theme .w-grid .post_title{ font-size: 18px !important; }
}
@media (max-width: 479px){
  .st-theme .st-grid-product .w-grid-item,
  .st-theme .st-grid-tegel .w-grid-item{ width: 100% !important; }
}

/* Detailpagina's van de contenttypes */
.st-theme .st-detail-kop{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; }
.st-theme .st-detail-body{ display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px,4vw,64px); align-items: start; }
.st-theme .st-project-detail{ display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px,4vw,64px); align-items: start; }
.st-theme .st-project-zij .st-gegevens{ position: sticky; top: 120px; }
.st-theme .st-artikel{ max-width: 780px; }
.st-theme .st-artikel :where(p,li){ font-size: 17px; }
.st-theme .st-artikel h2{ margin-top: 36px; }
@media (max-width: 900px){
  .st-theme .st-detail-kop,
  .st-theme .st-detail-body,
  .st-theme .st-project-detail{ grid-template-columns: 1fr; }
  .st-theme .st-project-zij .st-gegevens{ position: static; }
}

/* Algemene responsive vangnetten voor de contentblokken */
@media (max-width: 767px){
  .st-theme .st-hero h1{ font-size: 32px; }
  .st-theme .st-voorna{ flex-direction: column; }
  .st-theme .st-beeldraster{ grid-template-columns: 1fr 1fr; }
  .st-theme .st-spec td{ padding: 12px 14px; font-size: 14px; }
  .st-theme .st-gegevens{ padding: 20px; }
  .st-theme .st-print p{ font-size: 24px; }
  .st-theme .st-print::after{ opacity: .5; }
}

/* ------------------------------------------------------------
   26. Logo's begrenzen
   Het Soltherm-logo is een SVG zonder eigen afmetingen. Zonder
   expliciete begrenzing negeert de browser de hoogte-instelling van
   Impreza en schaalt de SVG naar de volle breedte van de pagina.
   Daarom hier een harde hoogte plus een maximale breedte.
   ------------------------------------------------------------ */
.st-theme :where(.l-header, .l-subheader) :where(.w-logo, .w-image, .w-img) img,
.st-theme :where(.l-header, .l-subheader) img{
  height: 38px !important;
  width: auto !important;
  max-width: 220px !important;
  max-height: 38px !important;
  object-fit: contain;
}
.st-theme .l-header.sticky .l-subheader.at_middle :where(.w-logo, .w-image, .w-img) img,
.st-theme .l-header.sticky .l-subheader.at_middle img{
  height: 32px !important; max-height: 32px !important;
}
/* Iconen en kleine afbeeldingen in de header niet meeschalen */
.st-theme :where(.l-header, .l-subheader) :where(.w-btn, .w-nav, .w-menu) img{
  height: 1em !important; max-height: 1em !important; max-width: none !important;
}

.st-theme .l-footer :where(.w-image, .w-img) img{
  height: 40px !important;
  width: auto !important;
  max-width: 220px !important;
  max-height: 40px !important;
  object-fit: contain;
}

@media (max-width: 1024px){
  .st-theme :where(.l-header, .l-subheader) :where(.w-logo, .w-image, .w-img) img,
  .st-theme :where(.l-header, .l-subheader) img{ height: 34px !important; max-height: 34px !important; }
}
@media (max-width: 600px){
  .st-theme :where(.l-header, .l-subheader) :where(.w-logo, .w-image, .w-img) img,
  .st-theme :where(.l-header, .l-subheader) img{ height: 28px !important; max-height: 28px !important; max-width: 170px !important; }
  .st-theme .l-footer :where(.w-image, .w-img) img{ height: 34px !important; max-height: 34px !important; }
}

/* Vangnet: een SVG zonder afmetingen nergens laten uitdijen */
.st-theme img[src$=".svg"]{ max-width: 100%; }
.st-theme .st-slot img[src$=".svg"]{ width: 100%; height: 100%; }