/* =============================================================================
   SolarKonut Blog
   Alles staat binnen .sk-blog, met !important, omdat Impreza anders
   regelhoogtes in pixels en padding op koppen doordrukt.
   ========================================================================== */

.sk-blog{
  --green:#02A862; --green-d:#028A50; --mint:#0BE18B; --gold:#F2B33C;
  --navy:#121F34; --dim:#5B6670; --faint:#8CA0B8;
  --line:rgba(18,31,52,.10); --line2:rgba(18,31,52,.16);
  --moss:#EDF7F2; --bg2:#F6F8F7;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sk-pad:0px;
}

/* ---------- thema-reset ---------- */
.sk-blog{font-family:Manrope,system-ui,sans-serif!important;font-size:16px!important;font-weight:400!important;
  line-height:1.6!important;color:var(--navy)!important;letter-spacing:normal!important;
  text-transform:none!important;text-align:left!important;padding:0 var(--sk-pad)!important}
.sk-blog *{line-height:inherit!important}
.sk-blog h1,.sk-blog h2,.sk-blog h3,.sk-blog h4,.sk-blog h5,.sk-blog h6{margin:0!important;padding:0!important;
  font-family:var(--disp)!important;font-weight:600!important;letter-spacing:-.025em!important;color:var(--navy)!important;
  text-transform:none!important}
.sk-blog p,.sk-blog ul,.sk-blog ol,.sk-blog li,.sk-blog figure,.sk-blog blockquote,.sk-blog table{margin:0!important;padding:0!important}
.sk-blog a{text-decoration:none!important;color:inherit!important}
.sk-blog img{max-width:100%!important;height:auto!important;display:block!important}
.sk-blog .wrap{max-width:none!important;margin:0!important;padding:0!important}

/* ---------- kop van de blogpagina ---------- */
.sk-blog .kop{max-width:760px!important;margin:0 0 40px!important}
.sk-blog .kop h1{font-size:clamp(30px,4vw,44px)!important;line-height:1.12!important}
.sk-blog .kop .lead{margin-top:16px!important;font-size:17.5px!important;line-height:1.7!important;color:var(--dim)!important;max-width:64ch!important}

/* ---------- uitgelicht artikel ---------- */
.sk-blog .uit{display:grid!important;grid-template-columns:1.05fr .95fr!important;gap:0!important;
  border:1px solid var(--line)!important;border-radius:20px!important;overflow:hidden!important;
  background:#fff!important;margin:0 0 34px!important;transition:box-shadow .18s ease,border-color .18s ease!important}
.sk-blog .uit:hover{border-color:var(--line2)!important;box-shadow:0 14px 40px -22px rgba(18,31,52,.35)!important}
.sk-blog .uit .beeld{position:relative!important;min-height:320px!important;background:var(--bg2)!important;overflow:hidden!important}
.sk-blog .uit .beeld img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
.sk-blog .uit .tekst{padding:36px 38px 34px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.sk-blog .uit h2{font-size:clamp(23px,2.4vw,30px)!important;line-height:1.22!important;margin:12px 0 0!important}
.sk-blog .uit p{margin-top:12px!important;color:var(--dim)!important;font-size:16px!important;line-height:1.72!important}
.sk-blog .vlag{display:inline-flex!important;align-items:center!important;gap:7px!important;align-self:flex-start!important;
  background:var(--moss)!important;color:var(--green-d)!important;border-radius:99px!important;padding:6px 12px!important;
  font-family:var(--mono)!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.09em!important;
  text-transform:uppercase!important;margin-bottom:16px!important}

/* ---------- meta-regel ---------- */
.sk-blog .meta{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:9px!important;
  font-family:var(--mono)!important;font-size:11px!important;font-weight:500!important;letter-spacing:.07em!important;
  text-transform:uppercase!important;color:var(--faint)!important}
.sk-blog .meta .kat{color:var(--green-d)!important;font-weight:600!important}
.sk-blog .meta .kat::after{content:'·';margin-left:9px;color:var(--faint)}
.sk-blog .meta .sep{opacity:.7!important}

/* ---------- chips ---------- */
.sk-blog .chips{display:flex!important;flex-wrap:wrap!important;gap:9px!important;margin:0 0 26px!important}
.sk-blog .chip{display:inline-flex!important;align-items:center!important;gap:8px!important;
  border:1px solid var(--line)!important;border-radius:99px!important;padding:9px 16px!important;background:#fff!important;
  font-size:14px!important;font-weight:600!important;color:var(--navy)!important;
  transition:border-color .15s ease,background .15s ease,color .15s ease!important}
.sk-blog .chip:hover{border-color:var(--green)!important;color:var(--green-d)!important}
.sk-blog .chip.aan{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}
.sk-blog .chip .n{font-family:var(--mono)!important;font-size:11px!important;font-weight:500!important;
  color:var(--faint)!important;background:var(--bg2)!important;border-radius:99px!important;padding:1px 7px!important}
.sk-blog .chip.aan .n{background:rgba(255,255,255,.14)!important;color:rgba(255,255,255,.75)!important}

/* ---------- kaartenraster ---------- */
.sk-blog .raster{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:26px!important}
.sk-blog .kaart{display:flex!important;flex-direction:column!important;background:#fff!important;
  border:1px solid var(--line)!important;border-radius:16px!important;overflow:hidden!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.sk-blog .kaart:hover{transform:translateY(-3px)!important;border-color:var(--line2)!important;
  box-shadow:0 16px 34px -22px rgba(18,31,52,.4)!important}
.sk-blog .kaart .beeld{position:relative!important;aspect-ratio:16/10!important;background:var(--bg2)!important;overflow:hidden!important}
.sk-blog .kaart .beeld img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
.sk-blog .beeld.leeg{display:flex!important;align-items:center!important;justify-content:center!important;
  background:linear-gradient(135deg,#EDF7F2 0%,#F6F8F7 100%)!important}
.sk-blog .beeld.leeg span{color:var(--green)!important;opacity:.32!important}
.sk-blog .kaart .tekst{padding:20px 22px 22px!important;display:flex!important;flex-direction:column!important;flex:1!important}
.sk-blog .kaart h3{font-size:19px!important;line-height:1.32!important;margin:11px 0 0!important}
.sk-blog .kaart p{margin-top:9px!important;color:var(--dim)!important;font-size:14.5px!important;line-height:1.68!important;flex:1!important}
.sk-blog .lees{display:inline-flex!important;align-items:center!important;gap:8px!important;margin-top:16px!important;
  color:var(--green-d)!important;font-weight:700!important;font-size:14.5px!important}
.sk-blog .lees svg{transition:transform .18s ease!important}
.sk-blog .kaart:hover .lees svg,.sk-blog .uit:hover .lees svg{transform:translateX(4px)!important}
.sk-blog .uit .lees{margin-top:20px!important;font-size:15.5px!important}

/* ---------- leeg ---------- */
.sk-blog .bos{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important;
  padding:64px 24px!important;border:1px dashed var(--line2)!important;border-radius:18px!important;
  background:var(--bg2)!important;color:var(--faint)!important;text-align:center!important}
.sk-blog .bos p{color:var(--dim)!important;font-size:16px!important;max-width:44ch!important}

/* ---------- bladeren ---------- */
.sk-blog .blader{display:flex!important;align-items:center!important;justify-content:center!important;gap:18px!important;margin-top:38px!important}
.sk-blog .bknop{display:inline-flex!important;align-items:center!important;gap:9px!important;
  border:1px solid var(--line)!important;border-radius:11px!important;padding:11px 18px!important;background:#fff!important;
  font-weight:700!important;font-size:14.5px!important;color:var(--navy)!important;transition:border-color .15s ease!important}
.sk-blog .bknop:hover{border-color:var(--green)!important;color:var(--green-d)!important}
.sk-blog .tel{font-family:var(--mono)!important;font-size:12px!important;letter-spacing:.06em!important;color:var(--faint)!important}

/* =============================================================================
   Het artikel
   ========================================================================== */
.sk-yazi .terug{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0 0 26px!important;
  font-family:var(--mono)!important;font-size:11.5px!important;font-weight:500!important;letter-spacing:.09em!important;
  text-transform:uppercase!important;color:var(--faint)!important;transition:color .15s ease!important}
.sk-yazi .terug:hover{color:var(--green-d)!important}

.sk-yazi .ykop{max-width:760px!important;margin:0 0 28px!important}
.sk-yazi .ykat{display:inline-flex!important;align-items:center!important;gap:7px!important;margin-bottom:16px!important;
  background:var(--moss)!important;color:var(--green-d)!important;border-radius:99px!important;padding:6px 13px!important;
  font-family:var(--mono)!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.09em!important;
  text-transform:uppercase!important}
.sk-yazi .ykop h1{font-size:clamp(31px,4.4vw,47px)!important;line-height:1.1!important}
.sk-yazi .ylead{margin-top:18px!important;font-size:19px!important;line-height:1.65!important;color:var(--dim)!important;max-width:60ch!important}
.sk-yazi .ymeta{display:flex!important;flex-wrap:wrap!important;gap:20px!important;margin:0 0 30px!important;
  padding-top:18px!important;border-top:1px solid var(--line)!important;
  font-family:var(--mono)!important;font-size:11.5px!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;color:var(--faint)!important}
.sk-yazi .ymeta span{display:inline-flex!important;align-items:center!important;gap:8px!important}

.sk-yazi .yfoto{margin:0 0 42px!important}
/* Geen vaste verhouding: de foto van het artikel tonen we heel, zoals
   hij is aangeleverd. Anders snijden we bij een staande of 4:3-foto net
   het onderwerp eraf. De kaartjes in het overzicht snijden wel bij. */
.sk-yazi .yfoto img{width:100%!important;height:auto!important;border-radius:16px!important;
  max-height:620px!important;object-fit:cover!important;object-position:center 38%!important}
.sk-yazi .yfoto figcaption{margin-top:11px!important;font-size:13.5px!important;color:var(--faint)!important;line-height:1.6!important}

/* ---------- raster: inhoudsopgave naast de tekst ---------- */
/* Vier onderdelen in twee kolommen. In de bron staat de inhoudsopgave vóór
   de tekst, zodat hij op een telefoon na de foto en boven het artikel komt;
   op een breed scherm zet het raster hem rechts, over de volle hoogte. */
.sk-yazi .ygrid{display:grid!important;grid-template-columns:minmax(0,720px) 236px!important;
  column-gap:64px!important;align-items:start!important}
.sk-yazi .ymeta{grid-column:1!important;grid-row:1!important}
.sk-yazi .yfoto{grid-column:1!important;grid-row:2!important}
.sk-yazi .toc{grid-column:2!important;grid-row:1 / span 3!important}
.sk-yazi .ybody{grid-column:1!important;grid-row:3!important;min-width:0!important}
.sk-yazi .ygrid.zonder{grid-template-columns:minmax(0,760px)!important}
.sk-yazi .ygrid.zonder .ymeta,.sk-yazi .ygrid.zonder .yfoto,.sk-yazi .ygrid.zonder .ybody{
  grid-column:1!important;grid-row:auto!important}

.sk-yazi .toc{position:sticky!important;top:var(--sk-sticky,110px)!important;align-self:start!important}
.sk-yazi .toch{border-left:2px solid var(--line)!important;padding-left:20px!important}
.sk-yazi .toc .tt{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:14px!important;
  font-family:var(--mono)!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.10em!important;
  text-transform:uppercase!important;color:var(--green-d)!important}
.sk-yazi .toc ul{list-style:none!important}
.sk-yazi .toc li{margin:0 0 10px!important}
.sk-yazi .toc li.n3{padding-left:14px!important}
.sk-yazi .toc a{font-size:14px!important;line-height:1.5!important;color:var(--dim)!important;
  transition:color .15s ease!important;display:block!important}
.sk-yazi .toc a:hover{color:var(--navy)!important}
.sk-yazi .toc li.hier a{color:var(--navy)!important;font-weight:700!important}

/* ---------- de tekst ---------- */
.sk-yazi .ybody{font-size:18px!important;line-height:1.78!important;color:#1F2B3F!important}
.sk-yazi .ybody > *:first-child{margin-top:0!important}
.sk-yazi .ybody p{margin:0 0 1.35em!important}
.sk-yazi .ybody h2{font-size:27px!important;line-height:1.25!important;margin:2.1em 0 .6em!important;scroll-margin-top:120px!important}
.sk-yazi .ybody h3{font-size:21px!important;line-height:1.35!important;margin:1.9em 0 .5em!important;scroll-margin-top:120px!important}
.sk-yazi .ybody h2 + h3{margin-top:1.1em!important}
.sk-yazi .ybody a{color:var(--green-d)!important;font-weight:600!important;
  box-shadow:inset 0 -1px 0 rgba(2,138,80,.35)!important;transition:box-shadow .15s ease!important}
.sk-yazi .ybody a:hover{box-shadow:inset 0 -2px 0 var(--green)!important}
.sk-yazi .ybody strong{font-weight:700!important;color:var(--navy)!important}
.sk-yazi .ybody ul,.sk-yazi .ybody ol{margin:0 0 1.35em!important;padding-left:1.35em!important}
.sk-yazi .ybody ul{list-style:disc!important}
.sk-yazi .ybody ol{list-style:decimal!important}
.sk-yazi .ybody li{margin:0 0 .5em!important;padding-left:.25em!important}
.sk-yazi .ybody li::marker{color:var(--green)!important}
/* Uitgelichte gedachte. Impreza zet hier standaard een groot grijs
   aanhalingsteken voor; dat halen we weg, het leidt alleen maar af. */
.sk-yazi .ybody blockquote{margin:2.3em 0!important;padding:26px 30px!important;
  background:var(--moss)!important;border:0!important;border-left:3px solid var(--green)!important;
  border-radius:0 14px 14px 0!important;quotes:none!important;
  font-family:var(--disp)!important;font-size:20px!important;line-height:1.55!important;
  font-weight:500!important;letter-spacing:-.015em!important;color:var(--navy)!important;
  text-align:left!important;font-style:normal!important}
.sk-yazi .ybody blockquote::before,.sk-yazi .ybody blockquote::after,
.sk-yazi .ybody blockquote > p::before,.sk-yazi .ybody blockquote > p::after,
.sk-yazi .ybody blockquote .w-blockquote-icon,.sk-yazi .ybody blockquote .icon{
  content:none!important;display:none!important;background:none!important}
.sk-yazi .ybody blockquote p{margin:0 0 .55em!important;font-size:inherit!important;
  line-height:inherit!important;font-family:inherit!important;color:inherit!important}
.sk-yazi .ybody blockquote p:last-child{margin:0!important}
.sk-yazi .ybody blockquote cite{display:block!important;margin-top:14px!important;
  font-family:var(--mono)!important;font-size:11px!important;font-style:normal!important;
  letter-spacing:.09em!important;text-transform:uppercase!important;color:var(--faint)!important}
.sk-yazi .ybody figure{margin:2em 0!important}
.sk-yazi .ybody figure img,.sk-yazi .ybody p > img{border-radius:14px!important}
.sk-yazi .ybody figcaption{margin-top:10px!important;font-size:13.5px!important;color:var(--faint)!important;line-height:1.6!important}
.sk-yazi .ybody hr{margin:2.4em 0!important;border:0!important;border-top:1px solid var(--line)!important}
.sk-yazi .ybody code{font-family:var(--mono)!important;font-size:.88em!important;background:var(--bg2)!important;
  border:1px solid var(--line)!important;border-radius:5px!important;padding:2px 6px!important}
.sk-yazi .ybody table{width:100%!important;border-collapse:collapse!important;margin:2em 0!important;font-size:15.5px!important}
.sk-yazi .ybody th,.sk-yazi .ybody td{padding:12px 14px!important;text-align:left!important;
  border-bottom:1px solid var(--line)!important;line-height:1.55!important}
.sk-yazi .ybody th{font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.09em!important;
  text-transform:uppercase!important;color:var(--faint)!important;font-weight:500!important;
  border-bottom:1px solid var(--line2)!important}
.sk-yazi .ybody td strong{color:var(--navy)!important}

/* een eerste alinea die opvalt */
.sk-yazi .ybody > p:first-of-type{font-size:19.5px!important;line-height:1.72!important;color:var(--navy)!important}

/* ---------- verwante artikelen ---------- */
.sk-blog .ilgili{margin-top:72px!important;padding-top:44px!important;border-top:1px solid var(--line)!important}
.sk-blog .ilgili > h2{font-size:26px!important;line-height:1.2!important;margin:0 0 26px!important}

/* ---------- afsluitende strook ---------- */
.sk-blog .cta{display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:26px!important;flex-wrap:wrap!important;margin:52px 0 8px!important;padding:32px 34px!important;
  border:1px solid var(--line)!important;border-radius:18px!important;background:var(--bg2)!important}
.sk-blog .cta h2{font-size:23px!important;line-height:1.25!important}
.sk-blog .cta p{color:var(--dim)!important;font-size:15.5px!important;line-height:1.7!important;margin-top:9px!important;max-width:62ch!important}
.sk-blog .ctabtn{display:inline-flex!important;align-items:center!important;gap:9px!important;flex:none!important;
  border:1px solid rgba(2,168,98,.45)!important;border-radius:11px!important;padding:13px 20px!important;
  background:#fff!important;color:var(--green-d)!important;font-weight:700!important;font-size:15px!important;
  transition:background .15s ease,border-color .15s ease!important}
.sk-blog .ctabtn:hover{background:rgba(2,168,98,.06)!important;border-color:var(--green)!important}

/* =============================================================================
   Het thema stil houden op de berichtpagina
   Impreza tekent zelf een titel, meta en reacties; die vervangen wij.
   ========================================================================== */
body.single-post .l-titlebar,
body.single-post .l-section.for_pagetitle,
body.single-post .w-blog-post-meta,
body.single-post .post_meta,
body.single-post .entry-meta,
body.single-post .post-navigation,
body.single-post .w-blog-post-preview,
body.single-post .l-section.for_post_related,
body.single-post .w-comments,
body.single-post .comments-area,
body.single-post #comments{display:none!important}

/* ---------- smallere schermen ---------- */
@media (max-width:1100px){
  .sk-yazi .ygrid{grid-template-columns:minmax(0,1fr) 210px!important;column-gap:44px!important}
}
@media (max-width:900px){
  .sk-blog .raster{grid-template-columns:repeat(2,1fr)!important}
  .sk-blog .uit{grid-template-columns:1fr!important}
  .sk-blog .uit .beeld{min-height:0!important;aspect-ratio:16/9!important}
  .sk-blog .uit .tekst{padding:28px 26px 30px!important}
  .sk-yazi .ygrid{grid-template-columns:minmax(0,1fr)!important;column-gap:0!important}
  .sk-yazi .ymeta,.sk-yazi .yfoto,.sk-yazi .toc,.sk-yazi .ybody{
    grid-column:1!important;grid-row:auto!important}
  .sk-yazi .toc{position:static!important;margin:0 0 34px!important}
  .sk-yazi .toch{border-left:0!important;border:1px solid var(--line)!important;border-radius:14px!important;
    padding:20px 22px!important;background:var(--bg2)!important}
}
@media (max-width:620px){
  .sk-blog .raster{grid-template-columns:1fr!important}
  .sk-blog .cta{padding:24px 22px!important}
  .sk-blog .ctabtn{width:100%!important;justify-content:center!important}
  .sk-yazi .ybody{font-size:17px!important}
  .sk-yazi .ybody h2{font-size:23px!important}
  .sk-yazi .yfoto img{aspect-ratio:16/10!important}
}