/* Antwoordpagina's, situatiepagina's en vergelijkingen.
   Bouwt verder op styles.css en folio.css; enkel wat daar ontbreekt staat hier. */

.antwoord{max-width:62ch;margin-top:22px;padding:20px 22px;background:var(--surface);border:2px solid var(--line);border-left:8px solid var(--c,var(--leden-c));border-radius:var(--r-m);font-size:1.12rem;line-height:1.6;color:var(--ink)}
.antwoord b{font-weight:900}

.artikel{max-width:68ch}
.artikel h2{margin-top:44px;margin-bottom:12px}
.artikel h2:first-child{margin-top:0}
.artikel h3{margin-top:22px;margin-bottom:6px;font-size:1.12rem}
.artikel p{margin-top:12px;line-height:1.65}
.artikel ul,.artikel ol{margin-top:12px;padding-left:1.3em;display:flex;flex-direction:column;gap:10px;line-height:1.6}
.artikel ul{list-style:disc}
.artikel ol{list-style:decimal}
.artikel li::marker{font-weight:800;color:var(--d,var(--leden-d))}
.artikel a{text-decoration:underline;text-underline-offset:3px}

.stappen{counter-reset:stap;list-style:none !important;padding-left:0 !important;gap:14px !important}
.stappen li{counter-increment:stap;position:relative;padding:16px 18px 16px 62px;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-m)}
.stappen li::before{content:counter(stap);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--t,var(--leden-t));color:var(--d,var(--leden-d))}
.stappen b{display:block;margin-bottom:2px}

.bronnen{font-size:.96rem;color:var(--muted)}
.bronnen li{line-height:1.5}
.nagekeken{margin-top:18px;font-size:.92rem;color:var(--muted)}

.zachte-link{margin-top:40px;padding:22px 24px;border-radius:var(--r-l);background:var(--t,var(--leden-t))}
.zachte-link p{margin-top:0}
.zachte-link p + p{margin-top:10px}

.verwant{display:flex;flex-direction:column;gap:10px;max-width:68ch}
.verwant a{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border:2px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.verwant a:hover{border-color:var(--c,var(--leden-c))}
.verwant b{font-weight:800}
.verwant span{color:var(--muted);font-size:.95rem}

.deels{font-size:.85rem;font-weight:800;color:var(--muted)}
.cmp td.wij{background:var(--t,var(--leden-t))}

@media (max-width:560px){
  .antwoord{font-size:1.04rem;padding:16px 16px}
  .stappen li{padding:14px 14px 14px 56px}
}