/* Pagina 'Wat is wat': tekeningen in potloodstijl die zichzelf tekenen */

.uitleg-pagina { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.intro p { margin: 0; max-width: 42rem; }

.scene { margin: 1.5rem 0 0; padding: 1rem; background: var(--card); border: 1px solid var(--lijn); border-radius: var(--radius); }
.scene svg { display: block; width: 100%; height: auto; }
.scene figcaption { margin-top: 0.5rem; font-size: var(--klein); color: var(--tekst2); }

.schets .lijnen { filter: url(#potlood); }
.schets .lijnen * { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.schets text { font-family: var(--font-sans); font-weight: 600; font-size: 15px; fill: var(--ink); }
.schets text.klein { font-size: 14px; fill: var(--tekst2); }
.schets text.euro { font-size: 20px; font-weight: 700; }
.schets text.groot { font-size: 26px; font-weight: 700; }
.schets text.groen { fill: var(--eerlijk); }

/* kleuren gelijk aan de kostenposten in de vergelijking */
.schets .lijnen .vul-gas { fill: color-mix(in srgb, var(--gas) 25%, transparent); }
.schets .lijnen .vul-blauw { fill: color-mix(in srgb, var(--stroom) 30%, transparent); }
.schets .lijnen .vul-paars { fill: color-mix(in srgb, var(--brand) 15%, transparent); }
.schets .lijnen .vul-huis { fill: color-mix(in srgb, var(--muted) 18%, transparent); }
.schets .lijnen .vul-grijs { fill: color-mix(in srgb, var(--muted) 25%, transparent); }
.schets .lijnen .vul-grijs-licht { fill: var(--surface); }
.schets .lijnen .vul-groen { fill: color-mix(in srgb, var(--eerlijk) 15%, transparent); stroke: var(--eerlijk); }
.schets .lijnen .pijl { marker-end: url(#pijl); stroke-dasharray: none; }
.schets .lijnen .pijl-groen { stroke: var(--eerlijk); marker-end: url(#pijl-groen); }

.posten { display: grid; gap: 1rem; margin-top: 1.5rem; }
.post {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.25rem; align-items: start;
  padding: 1.1rem 1.25rem; background: var(--card); border: 1px solid var(--lijn); border-radius: var(--radius); scroll-margin-top: 1rem;
}
.post svg { width: 100%; height: auto; }
.post h2 { margin: 0.2rem 0 0.4rem; }
.post p { margin: 0; }
.post .label.verschilt { color: var(--accent); }
.post:target { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent); }

.terug { margin: 2rem 0 0; }

/* jouw situatie en voorbeelden */
.jouw-situatie { margin-top: 1.5rem; padding: 0.9rem 1.1rem; background: var(--tint-brand); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.jouw-situatie h2 { margin: 0 0 0.25rem; font-size: 19px; line-height: 26px; }
.jouw-situatie p { margin: 0; }
.voorbeelden:not(:empty) { margin-top: 0.75rem; padding: 0.75rem 0.85rem; background: var(--vlak); border-radius: 8px; font-size: 0.875rem; }
.voorbeelden p { margin: 0 0 0.5rem; }
.voorbeelden p:last-child { margin-bottom: 0; }
.vb-wrap { overflow-x: auto; margin: 0.5rem 0; }
.vb-tabel { width: 100%; border-collapse: collapse; background: var(--card); font-size: var(--klein); font-variant-numeric: tabular-nums; }
.vb-tabel th, .vb-tabel td { padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--lijn); text-align: right; vertical-align: top; white-space: nowrap; }
.vb-tabel thead th { border-bottom: 2px solid var(--inkt); white-space: normal; }
.vb-tabel th:first-child { text-align: left; white-space: normal; }
.vb-tabel tbody th { font-weight: 600; }
.vb-tabel small { display: block; font-weight: 400; color: var(--tekst2); font-size: var(--klein); white-space: normal; }
.vb-tabel tr.jij th, .vb-tabel tr.jij td { background: var(--tint-stroom); }
.vb-tabel td.jij-cel { background: var(--stroom-lijn) !important; font-weight: 800; outline: 2px solid var(--stroom-ink); outline-offset: -2px; }
.post:target .voorbeelden { outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); }

@media (max-width: 40rem) {
  .post { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .post svg { max-width: 12rem; }
  .scene { padding: 0.5rem; overflow-x: auto; }
  .scene svg { min-width: 38rem; }
  .scene figcaption::before { content: "Schuif de tekening opzij om alles te zien. "; font-weight: 600; }
  }

/* tekenanimatie: lijnen worden getekend als de tekening in beeld komt (uitleg.js zet pathLength=1) */
.anim .lijnen * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease-in-out, fill-opacity 0.6s ease 0.9s; fill-opacity: 0; }
.anim .labels { opacity: 0; transition: opacity 0.6s ease 1s; }
.anim.getekend .lijnen * { stroke-dashoffset: 0; fill-opacity: 1; }
.anim.getekend .labels { opacity: 1; }
/* pijlpunten pas tonen als de lijn klaar is */
.anim .lijnen .pijl, .anim .lijnen .pijl-groen { marker-end: none; }
.anim.klaar .lijnen .pijl { marker-end: url(#pijl); }
.anim.klaar .lijnen .pijl-groen { marker-end: url(#pijl-groen); }

@media (prefers-reduced-motion: reduce) {
  .anim .lijnen *, .anim .labels { transition: none; }
}
.geen-eigen { padding: 0.5rem 0.65rem; background: var(--tint-stroom); border-left: 3px solid var(--stroom); border-radius: var(--radius-sm); }

.begrippen { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; margin: 0.75rem 0 0; font-size: 0.875rem; }
.begrippen dt { font-weight: 700; }
.begrippen dd { margin: 0; }
@media (max-width: 40rem) { .begrippen { grid-template-columns: 1fr; } .begrippen dd { margin-bottom: 0.4rem; } }
.svg-defs { position: absolute; }

/* de 50%-regel bij zonnepanelen */
.regel-50 { margin: 1rem 0; padding: 0.85rem 1rem; background: var(--tint-stroom); border: 1px solid var(--stroom-lijn); border-radius: var(--radius-sm); }
.regel-50 h3 { margin: 0 0 0.5rem; }
.regel-50 svg { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0.25rem 0 0.5rem; }
.regel-50 ol, .regel-50 ul { margin: 0.4rem 0; padding-left: 1.25rem; }
.regel-50 li { margin: 0.25rem 0; }
.schets .lijnen .vul-geel, .regel-50 .vul-geel { fill: var(--stroom-lijn); }
.regel-50 .stippel { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.regel-50 text.klein { font-size: 14px; fill: var(--tekst2); }