/* kg-pagina-duurzaam-bouwadvies
   Gegenereerd door tools/genereer_css.py — niet met de hand bewerken.
   Gescopet onder .kg */

.kg .opgave {
  background:var(--kg-papier);
  padding:100px 0;
}
.kg .opgave-intro {
  max-width:52ch;
  margin:14px 0 30px;
  color:var(--kg-tekst);
}
.kg .opgave-pills {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.kg .op-pill {
  font-family:var(--kg-kop);
  font-weight:600;
  font-size:14.5px;
  padding:11px 20px;
  border-radius:999px;
  border:1.5px solid var(--kg-lijn);
  background:var(--kg-wit);
  color:var(--kg-donker);
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.kg .op-pill:hover {
  border-color:var(--kg-jub-goud);
  transform:translateY(-1px);
}
.kg .op-pill:focus-visible {
  outline:2px solid var(--kg-groen-donker);
  outline-offset:2px;
}
.kg .op-pill.actief {
  background:#0D1F12;
  border-color:#0D1F12;
  color:#fff;
}
.kg .opgave-paneel {
  background:var(--kg-wit);
  border:1px solid var(--kg-lijn);
  border-left:3px solid var(--kg-jub-goud);
  border-radius:var(--kg-radius);
  padding:38px 42px;
  min-height:290px;
}
.kg .op-inhoud {
  display:none;
}
.kg .op-inhoud.actief {
  display:block;
  animation:opfade .35s ease;
}
.kg .op-inhoud h3 {
  font-family:var(--kg-kop);
  font-size:22px !important;
  color:var(--kg-donker);
  margin-bottom:12px;
}
.kg .op-inhoud p {
  max-width:62ch;
  margin-bottom:16px;
}
.kg .op-inhoud ul {
  margin:0 0 22px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kg .op-inhoud li {
  position:relative;
  padding-left:22px;
  font-size:15.5px;
}
.kg .op-inhoud li::before {
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:9px;
  height:9px;
  border-radius:50%;
  border:2px solid var(--kg-jub-goud);
}
.kg .op-cta {
  margin-top:4px;
}
.kg .kennis-band {
  background:linear-gradient(160deg,#0D1F12 0%,#122a18 100%);
  padding:76px 0;
}
.kg .kb-in {
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.kg .kb-in h2 {
  color:#fff;
  font-family:var(--kg-kop);
  font-size:clamp(24px,3vw,32px) !important;
  margin:14px 0 12px;
}
.kg .kb-in p {
  margin:0 auto 26px;
  color:rgba(255,255,255,.78);
  max-width:52ch;
}
.kg .kb-in p a {
  color:var(--kg-jub-goud);
  text-decoration:underline;
  text-underline-offset:3px;
}
.kg .kb-in p a:hover {
  color:#e3cf9a;
}
.kg .kb-knop {
  border-color:var(--kg-jub-goud);
  color:var(--kg-jub-goud);
  background:transparent;
}
.kg .kb-knop:hover {
  background:rgba(201,169,98,.14);
  border-color:#e3cf9a;
  color:#e3cf9a;
}

@media(max-width:980px) {
  .kg .opgave {
    padding:72px 0;
  }
  .kg .opgave-paneel {
    padding:26px 22px;
    min-height:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  .kg .op-inhoud.actief {
    animation:none;
  }
}