/* ==========================================================
   vraagstukgerichtwerken.com — Extra CSS (Aanpassen > Extra CSS)
   Eén keer plakken. Alle pagina's gebruiken deze klassen.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400;1,7..72,500&family=Work+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --vg-ink:#16302e;
  --vg-teal:#31817a;
  --vg-teal-deep:#1f3f3d;
  --vg-gold:#e09c35;
  --vg-paper:#ffffff;
  --vg-mist:#eef3f1;
  --vg-pencil:#5d6b68;
  --vg-rule:#cfdad6;
  --vg-serif:'Literata', Georgia, 'Times New Roman', serif;
  --vg-sans:'Work Sans', 'Segoe UI', Arial, sans-serif;
  --vg-measure:66ch;
}

/* ---------- basis ---------- */
.vg{ font-family:var(--vg-sans); color:var(--vg-ink); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.vg *{ box-sizing:border-box; }
.vg p{ margin:0 0 1.1em; max-width:var(--vg-measure); }
.vg a{ color:var(--vg-teal); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.vg a:hover{ color:var(--vg-teal-deep); }
.vg a:focus-visible, .vg button:focus-visible, .vg input:focus-visible, .vg select:focus-visible, .vg textarea:focus-visible{ outline:3px solid var(--vg-gold); outline-offset:2px; }
.vg strong{ font-weight:600; }
.vg h1,.vg h2,.vg h3{ font-family:var(--vg-serif); font-weight:500; color:var(--vg-ink); margin:0; letter-spacing:-0.01em; }
.vg h1{ font-size:clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height:1.12; max-width:20ch; font-variation-settings:'opsz' 72; }
.vg h2{ font-size:clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem); line-height:1.2; max-width:26ch; margin-bottom:.6em; }
.vg h3{ font-size:1.25rem; line-height:1.3; margin-bottom:.4em; }
.vg ul,.vg ol{ max-width:var(--vg-measure); padding-left:1.2em; margin:0 0 1.1em; }
.vg li{ margin-bottom:.35em; }
.vg .lead{ font-size:1.2rem; line-height:1.5; max-width:58ch; color:var(--vg-ink); }
.vg .mute{ color:var(--vg-pencil); }
.vg .small{ font-size:.92rem; color:var(--vg-pencil); }
.vg em{ font-style:italic; }
.vg .boek{ font-family:var(--vg-serif); font-style:italic; } /* titel van boek of werkboek */

/* ---------- secties en banden ---------- */
.vg-sec{ padding:56px 0 24px; }
.vg-sec + .vg-sec{ border-top:1px solid var(--vg-rule); }
.vg-band{ width:100vw; margin-left:calc(50% - 50vw); background:var(--vg-mist); padding:64px 0; margin-top:48px; margin-bottom:8px; }
.vg-band > .vg-in{ max-width:1100px; margin:0 auto; padding:0 24px; }
.vg-band + .vg-sec{ border-top:0; }
.vg-ink{ width:100vw; margin-left:calc(50% - 50vw); background:var(--vg-ink); color:#fff; padding:64px 0; margin-top:48px; }
.vg-ink > .vg-in{ max-width:1100px; margin:0 auto; padding:0 24px; }
.vg-ink h2,.vg-ink h3,.vg-ink p{ color:#fff; }
.vg-ink a{ color:#fff; }
.vg-ink .vg-btn{ background:#fff; color:var(--vg-ink) !important; border-color:#fff; }
.vg-ink .vg-btn-line{ color:#fff !important; border-color:#fff; }
.vg-ink .vg-btn-line:hover{ background:rgba(255,255,255,.12); }

/* twee kolommen: tekst links, iets rechts */
.vg-cols{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:start; }
.vg-cols-even{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.vg-cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:start; }
@media (max-width:860px){ .vg-cols,.vg-cols-even,.vg-cols-3{ grid-template-columns:1fr; gap:28px; } }

/* kantlijnnoot, zoals "In het boek: hoofdstuk 3" in het werkboek */
.vg-ref{ font-family:var(--vg-serif); font-style:italic; font-size:.95rem; color:var(--vg-pencil); margin:-.2em 0 1.2em; }

/* ---------- hero ---------- */
.vg-hero{ padding:40px 0 24px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:center; }
.vg-hero .lead{ margin-top:1.2em; }
@media (max-width:860px){ .vg-hero{ grid-template-columns:1fr; gap:32px; } }

/* ---------- de acht stappen als rail (het beeldmerk van de site) ---------- */
.vg-rail{ list-style:none; margin:0; padding:0 0 0 0; position:relative; max-width:420px; }
.vg-rail li{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; margin:0; padding:9px 0 9px; position:relative; }
.vg-rail li::before{ content:''; position:absolute; left:21px; top:0; bottom:0; width:2px; background:var(--vg-rule); }
.vg-rail li:first-child::before{ top:50%; }
.vg-rail li:last-child::before{ bottom:50%; }
.vg-rail .n{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; background:var(--vg-paper); border:2px solid var(--vg-teal); color:var(--vg-teal-deep); font-family:var(--vg-serif); font-weight:500; font-size:1.05rem; display:flex; align-items:center; justify-content:center; }
.vg-rail .t{ font-weight:600; font-size:1.02rem; padding-top:9px; }
.vg-rail .t small{ display:block; font-weight:400; font-size:.9rem; color:var(--vg-pencil); line-height:1.35; margin-top:2px; }
.vg-rail li.bmob .n{ background:var(--vg-teal-deep); border-color:var(--vg-teal-deep); color:#fff; }
.vg-rail li.bmob::after{ content:''; position:absolute; left:-14px; top:4px; bottom:4px; width:3px; background:var(--vg-gold); border-radius:2px; }
.vg-rail-note{ font-family:var(--vg-serif); font-style:italic; color:var(--vg-pencil); font-size:.95rem; margin-top:14px; padding-left:12px; border-left:3px solid var(--vg-gold); max-width:420px; }
.vg-ink .vg-rail .n{ background:var(--vg-ink); border-color:#8fc1bb; color:#fff; }
.vg-ink .vg-rail li.bmob .n{ background:#8fc1bb; border-color:#8fc1bb; color:var(--vg-ink); }
.vg-ink .vg-rail li::before{ background:rgba(255,255,255,.25); }
.vg-ink .vg-rail .t small{ color:#c9d8d5; }

/* horizontale compacte rail (op De methode boven de tabel) */
.vg-rail-h{ display:grid; grid-template-columns:repeat(8,1fr); gap:0; list-style:none; margin:16px 0 8px; padding:0; max-width:none; }
.vg-rail-h li{ text-align:center; font-size:.86rem; line-height:1.3; padding:0 4px; position:relative; margin:0; }
.vg-rail-h li .n{ width:36px; height:36px; border-radius:50%; border:2px solid var(--vg-teal); background:#fff; color:var(--vg-teal-deep); font-family:var(--vg-serif); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; position:relative; z-index:1; }
.vg-rail-h li::before{ content:''; position:absolute; left:0; right:0; top:17px; height:2px; background:var(--vg-rule); }
.vg-rail-h li:first-child::before{ left:50%; } .vg-rail-h li:last-child::before{ right:50%; }
.vg-rail-h li.bmob .n{ background:var(--vg-teal-deep); border-color:var(--vg-teal-deep); color:#fff; }
.vg-rail-h li.bmob{ box-shadow:inset 0 -3px 0 var(--vg-gold); padding-bottom:8px; }
@media (max-width:700px){ .vg-rail-h{ grid-template-columns:repeat(4,1fr); row-gap:18px; } .vg-rail-h li:nth-child(4)::before{ right:50%; } .vg-rail-h li:nth-child(5)::before{ left:50%; } }

/* ---------- routes (wie ben je, waar wil je heen) ---------- */
.vg-routes{ list-style:none; padding:0; margin:8px 0 0; max-width:none; border-top:1px solid var(--vg-rule); }
.vg-routes li{ margin:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:18px 0; border-bottom:1px solid var(--vg-rule); }
.vg-routes .q{ font-family:var(--vg-serif); font-size:1.2rem; font-weight:500; line-height:1.3; }
.vg-routes .q small{ display:block; font-family:var(--vg-sans); font-size:.95rem; font-weight:400; color:var(--vg-pencil); margin-top:4px; }
@media (max-width:600px){ .vg-routes li{ grid-template-columns:1fr; gap:10px; } }

/* ---------- knoppen ---------- */
.vg-btn{ display:inline-block; background:var(--vg-ink); color:#fff !important; text-decoration:none !important; font-weight:600; font-size:1rem; padding:13px 22px; border-radius:4px; border:2px solid var(--vg-ink); line-height:1.2; }
.vg-btn:hover{ background:var(--vg-teal-deep); border-color:var(--vg-teal-deep); }
.vg-btn-line{ display:inline-block; background:transparent; color:var(--vg-ink) !important; text-decoration:none !important; font-weight:600; font-size:1rem; padding:13px 22px; border-radius:4px; border:2px solid var(--vg-ink); line-height:1.2; }
.vg-btn-line:hover{ background:var(--vg-mist); }
.vg-btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 12px; }

/* ---------- tabellen ---------- */
.vg-table{ width:100%; border-collapse:collapse; margin:8px 0 20px; font-size:.98rem; }
.vg-table th{ text-align:left; font-weight:600; padding:10px 12px 10px 0; border-bottom:2px solid var(--vg-ink); vertical-align:bottom; }
.vg-table td{ padding:12px 12px 12px 0; border-bottom:1px solid var(--vg-rule); vertical-align:top; }
.vg-table td:first-child{ font-weight:600; white-space:nowrap; }
.vg-table.steps td:first-child{ font-family:var(--vg-serif); font-weight:500; font-size:1.05rem; width:11rem; white-space:normal; }
.vg-table .ik{ display:inline-block; font-size:.78rem; font-weight:600; color:var(--vg-teal-deep); background:var(--vg-mist); padding:2px 8px; border-radius:3px; margin-left:6px; vertical-align:middle; }
@media (max-width:600px){ .vg-table td:first-child{ white-space:normal; } .vg-table.steps td:first-child{ width:auto; } }

/* ---------- naslag (gouden rand, zoals de naslag in het werkboek) ---------- */
.vg-naslag{ border-left:4px solid var(--vg-gold); padding:6px 0 6px 20px; margin:20px 0 24px; max-width:var(--vg-measure); }
.vg-naslag p:last-child{ margin-bottom:0; }
.vg-quote{ font-family:var(--vg-serif); font-size:1.25rem; line-height:1.45; font-style:italic; max-width:52ch; margin:20px 0 20px; padding-left:20px; border-left:4px solid var(--vg-gold); }
.vg-quote cite{ display:block; font-style:normal; font-family:var(--vg-sans); font-size:.9rem; color:var(--vg-pencil); margin-top:8px; }

/* ---------- lijst met definities (vier grenzen, wat je mag verwachten) ---------- */
.vg-dl{ list-style:none; padding:0; margin:12px 0 20px; max-width:var(--vg-measure); counter-reset:dl; }
.vg-dl li{ margin:0 0 16px; padding-left:0; }
.vg-dl li b{ display:block; font-weight:600; margin-bottom:2px; }
.vg-dl.num li{ padding-left:2.4rem; position:relative; }
.vg-dl.num li::before{ counter-increment:dl; content:counter(dl); position:absolute; left:0; top:0; width:1.7rem; height:1.7rem; border-radius:50%; border:2px solid var(--vg-teal); color:var(--vg-teal-deep); font-family:var(--vg-serif); font-size:.95rem; display:flex; align-items:center; justify-content:center; }
.vg-check{ list-style:none; padding:0; margin:12px 0 20px; max-width:var(--vg-measure); }
.vg-check li{ padding-left:30px; position:relative; margin-bottom:10px; }
.vg-check li::before{ content:''; position:absolute; left:0; top:.45em; width:14px; height:8px; border-left:2.5px solid var(--vg-teal); border-bottom:2.5px solid var(--vg-teal); transform:rotate(-45deg); }

/* ---------- drie rollen van Metis ---------- */
.vg-rol{ display:grid; grid-template-columns:72px 1fr; gap:18px; align-items:start; padding:20px 0; border-top:1px solid var(--vg-rule); }
.vg-rol:last-child{ border-bottom:1px solid var(--vg-rule); }
.vg-rol img{ width:72px; height:72px; }
.vg-rol h3{ margin-bottom:.2em; }
.vg-rol p{ margin-bottom:.5em; }
.vg-rol ul{ margin:.4em 0 0; font-size:.95rem; }

/* ---------- partners ---------- */
.vg-partner{ display:grid; grid-template-columns:1fr auto; gap:20px; padding:18px 0; border-top:1px solid var(--vg-rule); align-items:center; }
.vg-partner:last-of-type{ border-bottom:1px solid var(--vg-rule); }
.vg-partner b{ font-family:var(--vg-serif); font-size:1.15rem; font-weight:500; display:block; }
.vg-partner .small{ margin:2px 0 0; }
@media (max-width:600px){ .vg-partner{ grid-template-columns:1fr; gap:6px; } }

/* ---------- formulieren ---------- */
.vg-form{ max-width:560px; margin:12px 0 24px; }
.vg-form label{ display:block; font-weight:600; font-size:.95rem; margin:14px 0 6px; }
.vg-form input[type=text],.vg-form input[type=email],.vg-form input[type=tel],.vg-form select,.vg-form textarea{ width:100%; font:inherit; font-size:1rem; padding:11px 12px; border:1.5px solid var(--vg-rule); border-radius:4px; background:#fff; color:var(--vg-ink); }
.vg-form textarea{ min-height:120px; resize:vertical; }
.vg-form input:focus,.vg-form select:focus,.vg-form textarea:focus{ border-color:var(--vg-teal); outline:none; box-shadow:0 0 0 3px rgba(49,129,122,.18); }
.vg-form .chk{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; font-size:.95rem; }
.vg-form .chk input{ margin-top:4px; }
.vg-form button{ margin-top:18px; font:inherit; cursor:pointer; }
.vg-form .privacy{ font-size:.85rem; color:var(--vg-pencil); margin-top:12px; }
.vg-err{ display:none; color:#9b2c2c; font-size:.95rem; margin-top:10px; }
.vg-ok{ display:none; border-left:4px solid var(--vg-teal); padding:8px 0 8px 20px; margin:12px 0 24px; max-width:560px; }
.vg-ok h3{ margin-bottom:.3em; }
.vg-ok ul{ padding-left:1.2em; }

/* ---------- tools-overzicht ---------- */
.vg-tools{ list-style:none; padding:0; margin:12px 0 20px; max-width:none; border-top:1px solid var(--vg-rule); }
.vg-tools li{ margin:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--vg-rule); }
.vg-tools .q{ font-family:var(--vg-serif); font-size:1.12rem; font-weight:500; }
.vg-tools .q small{ display:block; font-family:var(--vg-sans); font-size:.9rem; font-weight:400; color:var(--vg-pencil); margin-top:2px; }
@media (max-width:600px){ .vg-tools li{ grid-template-columns:1fr; gap:8px; } }

/* ---------- faq ---------- */
.vg-faq details{ border-top:1px solid var(--vg-rule); padding:14px 0; max-width:var(--vg-measure); }
.vg-faq details:last-child{ border-bottom:1px solid var(--vg-rule); }
.vg-faq summary{ cursor:pointer; font-family:var(--vg-serif); font-size:1.12rem; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.vg-faq summary::-webkit-details-marker{ display:none; }
.vg-faq summary::after{ content:'+'; color:var(--vg-teal); font-size:1.4rem; line-height:1; flex:none; }
.vg-faq details[open] summary::after{ content:'–'; }
.vg-faq details p{ margin-top:10px; }

/* ---------- cijfers / feiten in één rij ---------- */
.vg-feiten{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:8px 0 8px; }
.vg-feiten div{ border-top:2px solid var(--vg-ink); padding-top:10px; }
.vg-feiten b{ font-family:var(--vg-serif); font-weight:500; font-size:1.6rem; display:block; line-height:1.1; }
.vg-feiten span{ font-size:.95rem; color:var(--vg-pencil); }
@media (max-width:600px){ .vg-feiten{ grid-template-columns:1fr; } }

/* ---------- afbeeldingen ---------- */
.vg img.fig{ width:100%; height:auto; display:block; }
.vg .figcap{ font-size:.9rem; color:var(--vg-pencil); margin-top:8px; }

@media (prefers-reduced-motion:reduce){ .vg *{ transition:none !important; animation:none !important; } }

/* ---------- VGW-eigen: statements uit de Teampeiling (hero) ---------- */
.vg-statements{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-self:center; }
.vg-statements div{ background:#fff; border:1px solid var(--vg-rule); border-top:3px solid var(--vg-teal); padding:14px 16px; font-family:var(--vg-serif); font-size:1.02rem; line-height:1.35; color:var(--vg-ink); transform:rotate(-1deg); }
.vg-statements div:nth-child(2n){ transform:rotate(1.2deg); border-top-color:var(--vg-gold); }
.vg-statements div:nth-child(3){ transform:rotate(.6deg); }
.vg-statements div:nth-child(4){ transform:rotate(-1.4deg); }
.vg-statements div.vg-statements-cap{ grid-column:1/-1; font-family:var(--vg-sans); font-size:.88rem; color:var(--vg-pencil); border:0 !important; padding:0; transform:none !important; background:transparent; }
@media (max-width:860px){ .vg-statements{ max-width:480px; } }

/* ---------- VGW-eigen: citaten van klanten ---------- */
.vg-stemmen{ display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; margin:8px 0 8px; }
.vg-stemmen blockquote{ margin:0; font-family:var(--vg-serif); font-size:1.08rem; line-height:1.45; border-left:3px solid var(--vg-gold); padding-left:16px; }
.vg-stemmen cite{ display:block; font-style:normal; font-family:var(--vg-sans); font-size:.88rem; color:var(--vg-pencil); margin-top:8px; }
@media (max-width:700px){ .vg-stemmen{ grid-template-columns:1fr; } }

/* ---------- VGW-eigen: persoonlijke noot in ik-vorm ---------- */
.vg-noot{ max-width:var(--vg-measure); font-family:var(--vg-serif); font-size:1.15rem; line-height:1.5; font-style:italic; }
.vg-noot span{ display:block; font-style:normal; font-family:var(--vg-sans); font-size:.9rem; color:var(--vg-pencil); margin-top:6px; }

/* ---------- VGW-eigen: sector-markering ---------- */
.vg-sector{ display:inline-block; font-size:.9rem; color:var(--vg-teal-deep); border:1px solid var(--vg-rule); border-radius:999px; padding:4px 12px; margin:0 6px 8px 0; background:#fff; }

/* ---------- oude boekmateriaal/boekfeedback-klassen blijven werken ---------- */
.bm-form{ max-width:560px; margin:12px 0 24px; }
.bm-form label{ display:block; font-weight:600; font-size:.95rem; margin:14px 0 6px; }
.bm-form input[type=text],.bm-form input[type=email],.bm-form input[type=tel],.bm-form textarea{ width:100%; font:inherit; font-size:1rem; padding:11px 12px; border:1.5px solid var(--vg-rule); border-radius:4px; background:#fff; }
.bm-form textarea{ min-height:110px; }
.bm-submit{ display:inline-block; background:var(--vg-ink); color:#fff; font:inherit; font-weight:600; padding:13px 22px; border-radius:4px; border:2px solid var(--vg-ink); cursor:pointer; margin-top:16px; }
.bm-privacy{ font-size:.85rem; color:var(--vg-pencil); margin-top:12px; }
.bm-error{ display:none; color:#9b2c2c; margin-top:10px; }
.bm-success{ display:none; border-left:4px solid var(--vg-teal); padding:8px 0 8px 20px; margin:12px 0 24px; max-width:560px; }
.bm-checkbox{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; font-size:.95rem; }
.bm-download-list{ padding-left:1.2em; }

/* sterren op de boekfeedback-pagina */
.bm-stars{display:flex;gap:6px;margin-top:4px}
.bm-stars input{display:none}
.bm-stars label{margin:0;font-size:30px;line-height:1;cursor:pointer;color:var(--vg-rule);transition:color .1s}
.bm-stars input:checked ~ label,.bm-stars label:hover,.bm-stars label:hover ~ label{color:var(--vg-gold)}
.bm-stars{flex-direction:row-reverse;justify-content:flex-end}