/* Mijndomein Startersgidsen · style-gids.css · gebouwd uit de bron, hier niet bewerken */
@font-face{font-family:"Inter";src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-display:block}
@layer base {


:root{
  --purple:#6a29ae; --purple-deep:#4b1b84; --purple-mid:#8a52c6;
  --ink:#1d1726; --text:#3b3547; --muted:#7d7689;
  --lilac:#f4eefb; --lilac-2:#e7daf6; --line:#e8e3ef; --grey:#f7f6f9;
  --yellow:#ffc700; --yellow-soft:#fff5d1; --yellow-ink:#6b5200;
  --green:#1f9d63; --red:#d64545;
}
@page{size:210mm 297mm;margin:0}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff}
body{font-family:"Inter",system-ui,sans-serif;font-size:10.2pt;line-height:1.56;color:var(--text);
  font-feature-settings:"ss01","cv11";-webkit-print-color-adjust:exact;print-color-adjust:exact}
a{color:inherit;text-decoration:none}

/* ---------- page frame ---------- */
.page{width:210mm;height:297mm;position:relative;overflow:hidden;break-after:page;background:#fff}
.pg{position:absolute;left:20mm;right:20mm;top:25mm;height:249mm}
.run-head{position:absolute;left:20mm;right:20mm;top:11.5mm;display:flex;justify-content:space-between;
  font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.run-head b{color:var(--purple);font-weight:650}
.run-foot{position:absolute;left:20mm;right:20mm;bottom:10mm;display:flex;justify-content:space-between;align-items:center;
  font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.run-foot img{height:3.6mm;opacity:.9}
.run-foot .no{font-size:8.6pt;font-weight:700;color:var(--purple);letter-spacing:0}

/* ---------- type ---------- */
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0;padding:0}
h1,h2{text-wrap:balance}
h1{font-size:26pt;line-height:1.1;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
h2{font-size:13pt;line-height:1.25;letter-spacing:-.01em;font-weight:700;color:var(--ink);margin:7mm 0 2.2mm}
h3{font-size:10.2pt;line-height:1.3;font-weight:700;color:var(--ink);margin:4mm 0 1mm}
p{margin:0 0 2.6mm}
p:last-child{margin-bottom:0}
strong,b{color:var(--ink);font-weight:650}
.lead{font-size:12pt;line-height:1.5;color:var(--ink);letter-spacing:-.01em;margin-bottom:4mm}
.eyebrow{font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.small{font-size:8.6pt;line-height:1.5;color:var(--muted)}
code,.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.9em;background:var(--lilac);color:var(--purple-deep);
  padding:.25mm 1.4mm;border-radius:1.5mm;white-space:nowrap}
.link{color:var(--purple);font-weight:650;border-bottom:.25mm solid var(--lilac-2)}

/* ---------- chapter head ---------- */
.ch{display:flex;align-items:flex-end;gap:6mm;margin-bottom:6mm;padding-bottom:6mm;border-bottom:.3mm solid var(--line)}
.ch .num{font-size:58pt;line-height:.8;font-weight:250;letter-spacing:-.05em;color:var(--purple);min-width:22mm}
.ch .eyebrow{display:block;margin-bottom:1.6mm}
.ch h1{max-width:140mm}

/* ---------- lists ---------- */
ul.dots{list-style:none;margin:0 0 3mm}
ul.dots li{position:relative;padding-left:4.6mm;margin-bottom:.9mm}
ul.dots li::before{content:"";position:absolute;left:.6mm;top:.62em;width:1.5mm;height:1.5mm;border-radius:50%;background:var(--purple)}
ul.dots.c2{columns:2;column-gap:8mm}
ul.dots.c3{columns:3;column-gap:6mm}
ul.dots li{break-inside:avoid}
ul.checks{list-style:none;margin:0 0 3mm}
ul.checks li{position:relative;padding-left:6.4mm;margin-bottom:1.3mm}
ul.checks li::before{content:"";position:absolute;left:0;top:.2em;width:3.6mm;height:3.6mm;border-radius:50%;background:var(--lilac-2)}
ul.checks li::after{content:"";position:absolute;left:1.15mm;top:.47em;width:1.5mm;height:.8mm;border-left:.45mm solid var(--purple);border-bottom:.45mm solid var(--purple);transform:rotate(-45deg)}

/* numbered steps */
ol.steps{list-style:none;counter-reset:s;margin:3mm 0}
ol.steps>li{counter-increment:s;position:relative;padding:0 0 3.4mm 11mm}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:-.3mm;width:7mm;height:7mm;border-radius:50%;
  background:var(--purple);color:#fff;font-weight:700;font-size:8.6pt;display:flex;align-items:center;justify-content:center}
ol.steps>li::after{content:"";position:absolute;left:3.35mm;top:8mm;bottom:.6mm;width:.3mm;background:var(--lilac-2)}
ol.steps>li:last-child{padding-bottom:0}
ol.steps>li:last-child::after{display:none}
ol.steps b.t{display:block;color:var(--ink);font-weight:700;margin-bottom:.4mm}
ol.steps.tight>li{padding-bottom:2.2mm}
ol.steps ul.dots{margin:1mm 0 0}

/* click path */
.path{display:flex;flex-wrap:wrap;align-items:center;gap:1.2mm 0;margin:2mm 0 3.4mm;font-size:8.6pt;font-weight:650;color:var(--ink)}
.path span{background:#fff;border:.3mm solid var(--lilac-2);border-radius:1.5mm;padding:.9mm 2.6mm;line-height:1.3}
.path span.app{background:var(--purple);border-color:var(--purple);color:#fff}
.path i{width:5mm;height:2mm;display:inline-block;position:relative}
.path i::before{content:"";position:absolute;left:1.6mm;top:.2mm;width:1.5mm;height:1.5mm;border-top:.4mm solid var(--purple-mid);border-right:.4mm solid var(--purple-mid);transform:rotate(45deg)}

/* ---------- notes ---------- */
.note{border-radius:3mm;padding:4.4mm 5.2mm;margin:4mm 0;background:var(--lilac);break-inside:avoid}
.note .lab{display:flex;align-items:center;gap:2mm;font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--purple);margin-bottom:1.6mm}
.note .lab svg{width:4.2mm;height:4.2mm;flex:none}
.note.warn{background:var(--yellow-soft)}
.note.warn .lab{color:var(--yellow-ink)}
.note.dark{background:var(--ink);color:#e9e4f0}
.note.dark .lab{color:var(--yellow)}
.note.dark strong,.note.dark b{color:#fff}
.note.dark .big{font-size:13pt;line-height:1.35;color:#fff;font-weight:650;letter-spacing:-.01em}
.note.purple{background:var(--purple);color:#efe6fa}
.note.purple .lab{color:var(--yellow)}
.note.purple strong,.note.purple b{color:#fff}
.note.plain{background:var(--grey)}
.note p{margin-bottom:1.6mm}
.note p:last-child{margin-bottom:0}

/* ---------- screenshots ---------- */
figure.shot{margin:4mm 0;break-inside:avoid}
.shot .win{border-radius:3mm;overflow:hidden;border:.35mm solid #d3c8e2;background:#fff}
.shot .bar{height:5.4mm;background:var(--lilac);display:flex;align-items:center;gap:1.1mm;padding:0 2.4mm;border-bottom:.3mm solid #e0d9ea}
.shot .bar u{width:1.7mm;height:1.7mm;border-radius:50%;background:#cfc5dd;display:block;text-decoration:none}
.shot .bar em{flex:1;margin-left:2.4mm;height:3mm;border-radius:1.5mm;background:#fff;font-style:normal;font-size:5.6pt;color:var(--muted);padding-left:2mm;line-height:3mm;letter-spacing:.02em;max-width:70mm}
.shot img{display:block;width:100%}
.shot figcaption{font-size:8.6pt;line-height:1.45;color:var(--muted);margin-top:2.4mm;padding:0 1mm}
.shot figcaption b{color:var(--ink)}
.shot.crop .win{max-height:var(--h,70mm)}
.shot.crop img{object-fit:cover;object-position:top left;height:var(--h,70mm)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6mm;align-items:start}
.duo.a{grid-template-columns:1.25fr 1fr}
.duo.b{grid-template-columns:1fr 1.25fr}
.duo.c{grid-template-columns:1.6fr 1fr}
.duo figure.shot{margin:0}
.mk{display:inline-flex;width:3.9mm;height:3.9mm;border-radius:50%;background:#e8402a;color:#fff;font-weight:700;font-size:6.8pt;align-items:center;justify-content:center;vertical-align:.05em;margin-right:.6mm}

/* ---------- cards / grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4.4mm}
.card{background:var(--grey);border-radius:3mm;padding:4.6mm 4.8mm}
.card.li{background:var(--lilac)}
.card.out{background:#fff;border:.3mm solid var(--line)}
.card.pu{background:var(--purple);color:#efe6fa}
.card.pu h3,.card.pu strong{color:#fff}
.card h3{margin-top:0}
.card .eyebrow{display:block;margin-bottom:1.4mm}
.card .ico{width:10mm;height:10mm;border-radius:3mm;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:3mm}
.card.out .ico,.card.li .ico{background:var(--purple)}
.card .ico svg{width:5.6mm;height:5.6mm}
.card p{font-size:9.4pt;line-height:1.5}
.card ul.dots{font-size:9.4pt;margin-bottom:0}

/* help links */
.help{margin-top:5mm;border-top:.3mm solid var(--line);padding-top:3.2mm;display:flex;gap:4mm;align-items:baseline}
.help .eyebrow{flex:none;white-space:nowrap}
.help div{display:flex;flex-wrap:wrap;gap:1.4mm 1.6mm}
.help a{font-size:8.6pt;font-weight:650;color:var(--purple);background:var(--lilac);border-radius:5mm;padding:.9mm 3mm;line-height:1.35}
.help a::after{content:" ↗";font-weight:500;opacity:.7}
.bottom{position:absolute;left:0;right:0;bottom:0}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%}
table.cmp{margin:4mm 0;font-size:9.4pt}
table.cmp th,table.cmp td{padding:2.5mm 3mm;text-align:left;border-bottom:.3mm solid var(--line);vertical-align:middle;line-height:1.35}
table.cmp thead th{border-bottom:0;padding:4mm 3mm 3.4mm;font-size:10.2pt;color:var(--ink);font-weight:700;vertical-align:bottom}
table.cmp thead th small{display:block;font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);font-weight:700;margin-bottom:1mm}
table.cmp tbody th{font-weight:650;color:var(--ink);width:38mm}
table.cmp col.hl{background:var(--lilac)}
table.cmp .y{display:inline-block;width:4.4mm;height:4.4mm;border-radius:50%;background:var(--purple);position:relative;vertical-align:middle}
table.cmp .y::after{content:"";position:absolute;left:1.3mm;top:1.25mm;width:1.7mm;height:.9mm;border-left:.45mm solid #fff;border-bottom:.45mm solid #fff;transform:rotate(-45deg)}
table.cmp .n{color:#bdb6c9;font-weight:650}
table.where{font-size:9.4pt}
table.where td{padding:2.3mm 0;border-bottom:.3mm solid var(--line);vertical-align:middle}
table.where td:first-child{width:62mm;color:var(--ink);font-weight:650;padding-right:4mm}
table.where .path{margin:0;font-size:8.6pt}
table.where .path span{padding:.6mm 2.2mm}
table.where tr.grp td{border-bottom:0;padding:5mm 0 1mm}

/* ---------- special pages ---------- */
.page.cover,.page.divider,.page.back{background:var(--purple);color:#fff}
.page.cover svg.art,.page.divider svg.art,.page.back svg.art{position:absolute;inset:0;width:100%;height:100%}
.cover .logo{position:absolute;left:20mm;top:20mm;height:8.4mm}
.cover .tag{position:absolute;right:20mm;top:22.5mm;font-size:6.8pt;letter-spacing:.2em;text-transform:uppercase;font-weight:650;color:#e3d2f7}
.cover .txt{position:absolute;left:20mm;bottom:27mm;width:120mm}
.cover .bar{width:17mm;height:1.6mm;background:var(--yellow);border-radius:1.5mm;margin-bottom:6mm}
.cover .kick{font-size:7.6pt;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#e3d2f7;margin-bottom:3.4mm}
.cover h1{color:#fff;font-size:44pt;line-height:1.02;letter-spacing:-.035em;font-weight:780}
.cover .sub{font-size:13pt;line-height:1.45;color:#eadcf9;margin-top:6mm;max-width:105mm;font-weight:400}
.cover .url{position:absolute;right:20mm;bottom:12mm;font-size:6.8pt;letter-spacing:.2em;text-transform:uppercase;font-weight:650;color:#e3d2f7}

.divider .in{position:absolute;left:20mm;right:20mm;top:0;bottom:0}
.divider .dno{position:absolute;top:30mm;left:0;font-size:150pt;line-height:.8;font-weight:250;letter-spacing:-.05em;color:#fff;opacity:.95}
.divider .dlab{position:absolute;top:22mm;left:0;font-size:7.6pt;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--yellow)}
.divider h1{position:absolute;left:0;top:100mm;color:#fff;font-size:40pt;letter-spacing:-.035em;line-height:1.04;max-width:150mm}
.divider .dsub{position:absolute;left:0;top:137mm;font-size:13pt;line-height:1.5;color:#eadcf9;max-width:112mm}
.divider ol{position:absolute;left:0;bottom:24mm;width:102mm;list-style:none;margin:0;padding:0}
.divider ol li{display:flex;align-items:baseline;gap:4mm;padding:2.6mm 0;border-top:.3mm solid rgba(255,255,255,.22);font-size:11pt;font-weight:650;color:#fff}
.divider ol li:last-child{border-bottom:.3mm solid rgba(255,255,255,.22)}
.divider ol li i{font-style:normal;font-weight:400;color:var(--yellow);width:7mm;font-size:9.4pt}
.divider ol li a{flex:1}
.divider ol li span{font-weight:500;color:#d9c5f2;font-size:9.4pt}

/* toc */
.toc{display:grid;grid-template-columns:1fr 1fr;gap:0 10mm;margin-top:2mm}
.toc .tpart{margin-bottom:5.4mm;break-inside:avoid}
.toc .tpart>.eyebrow{display:flex;justify-content:space-between;padding-bottom:1.8mm;border-bottom:.5mm solid var(--purple);margin-bottom:.6mm}
.toc a.row{display:flex;align-items:baseline;gap:3mm;padding:1.75mm 0;border-bottom:.3mm solid var(--line);font-size:9.4pt;color:var(--ink);font-weight:500;line-height:1.3}
.toc a.row i{font-style:normal;color:var(--purple);font-weight:700;width:5.4mm;font-size:8.6pt;flex:none}
.toc a.row span.t{flex:1}
.toc a.row span.p{color:var(--muted);font-weight:500;font-size:8.6pt}

/* welcome */
.hero-lead{font-size:21pt;line-height:1.22;letter-spacing:-.02em;font-weight:700;color:var(--ink);max-width:150mm}
.hero-lead em{font-style:normal;color:var(--purple)}

/* glossary */
dl.gloss{columns:2;column-gap:9mm;font-size:9.4pt;line-height:1.48}
dl.gloss div{break-inside:avoid;padding:2.1mm 0;border-bottom:.3mm solid var(--line)}
dl.gloss dt{font-weight:700;color:var(--purple);font-size:9.4pt}

/* checklist boxes */
ul.boxes{list-style:none;margin:0}
ul.boxes li{position:relative;padding:2.1mm 0 2.1mm 8mm;border-bottom:.3mm solid var(--line);font-size:9.4pt;line-height:1.4;color:var(--ink)}
ul.boxes li::before{content:"";position:absolute;left:0;top:2.2mm;width:4.1mm;height:4.1mm;border:.45mm solid var(--purple);border-radius:1.5mm;background:#fff}
.cl h3{font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--purple);margin:0 0 1mm}

/* big number list */
.five{counter-reset:f}
.five .it{counter-increment:f;display:grid;grid-template-columns:22mm 1fr;align-items:center;padding:5.6mm 0;border-bottom:.3mm solid var(--line)}
.five .it::before{content:counter(f);font-size:40pt;line-height:1;font-weight:250;color:var(--purple);letter-spacing:-.035em}
.five .it b{display:block;font-size:13pt;letter-spacing:-.01em;margin-bottom:.8mm}

/* error cards */
.err{border:.3mm solid var(--line);border-radius:3mm;margin-bottom:4mm;overflow:hidden;break-inside:avoid}
.err .eh{display:flex;align-items:center;gap:3mm;padding:3mm 4.6mm;background:var(--grey);border-bottom:.3mm solid var(--line)}
.err .eh .code{font-family:ui-monospace,Menlo,monospace;font-size:7.6pt;font-weight:700;background:var(--ink);color:#fff;border-radius:1.5mm;padding:.7mm 2.2mm;white-space:nowrap}
.err.red .eh .code{background:var(--red)}
.err .eh b{font-size:10.2pt}
.err .eb{padding:3.6mm 4.6mm;font-size:9.4pt;line-height:1.5}
.err .eb ul.dots{margin-bottom:1.4mm}

/* misc */
.rule{height:.3mm;background:var(--line);margin:5mm 0}
.center{text-align:center}
.mt0{margin-top:0}.mt2{margin-top:2mm}.mt4{margin-top:4mm}.mt6{margin-top:6mm}.mt8{margin-top:8mm}.mb0{margin-bottom:0}
.illu{display:block;width:100%;margin:4mm 0}
.pill{display:inline-block;font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border-radius:5mm;padding:.7mm 2.6mm;background:var(--lilac-2);color:var(--purple-deep)}
.pill.y{background:var(--yellow);color:#3d2f00}
.pill.d{background:var(--ink);color:#fff}
.kv{display:grid;grid-template-columns:38mm 1fr;font-size:9.4pt}
.kv>*{padding:2.1mm 0;border-bottom:.3mm solid var(--line)}
.kv dt,.kv .k{font-weight:650;color:var(--ink)}

/* overflow debug */
.page.over{outline:2mm solid red;outline-offset:-2mm}

/* stappen met paginaverwijzing */
.pp{float:right;margin-left:4mm;font-size:7.6pt;font-weight:650;color:var(--purple);background:var(--lilac);border-radius:5mm;padding:.7mm 2.8mm;white-space:nowrap}
ol.steps.big>li{padding-bottom:4.6mm}
ol.steps.big b.t{font-size:11pt}
.route{display:grid;grid-template-columns:14mm 1fr;gap:5mm;padding:5mm 0;border-bottom:.3mm solid var(--line)}
.route .rn{width:14mm;height:14mm;border-radius:3mm;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center}
.route .rn svg{width:7mm;height:7mm}
.route h3{margin:0 0 .6mm;font-size:12pt}
.route .eyebrow{display:block;margin-bottom:.6mm}
.card.pu ul.dots li::before,.note.purple ul.dots li::before,.note.dark ul.dots li::before{background:var(--yellow)}
a.card{display:block}
table.where td{font-size:9.4pt;line-height:1.45}
table.where.tight td{padding:1.5mm 0}
table.where.tight tr.grp td{padding:3.6mm 0 .6mm}
.err{margin-bottom:3.2mm}
.five .it{padding:8.6mm 0}
.cl ul.boxes li{padding-top:2.9mm;padding-bottom:2.9mm}
.cl ul.boxes li::before{top:3mm}
.toc a.row{padding:2.3mm 0}
.toc .tpart{margin-bottom:7mm}
.card.li .ico,.card.out .ico{color:#fff}
.card.pu b,.card.pu strong,.card.pu h3{color:#fff}
table.cmp{table-layout:fixed}
table.cmp thead th{vertical-align:top;white-space:nowrap}
table.cmp thead th:first-child{width:38mm}

/* aanklikbare paginaverwijzingen */
a.pref{color:inherit}
p a.pref,li a.pref,td a.pref,figcaption a.pref{color:var(--purple);font-weight:650;border-bottom:.25mm solid var(--lilac-2)}
.pp a.pref{border:0;font-weight:650}
.note.dark a.pref,.note.purple a.pref,.card.pu a.pref{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.divider a.pref,.toc a.pref{color:inherit;font-weight:inherit;border:0}

/* E-mailassistent: in de PDF de tabel, online het interactieve hulpje */
.ea-app,.ea-intro-web{display:none}
table.ea-table td:first-child{width:38mm}
table.ea-table tr.grp td{font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--purple);padding:4mm 0 1.6mm;border-bottom:.5mm solid var(--purple)}
.ea-links{display:flex;flex-wrap:wrap;gap:1.4mm 1.6mm}
.ea-links a{font-size:8.6pt;font-weight:650;color:var(--purple);background:var(--lilac);border-radius:5mm;padding:1mm 3.2mm;line-height:1.35}
.ea-full{display:none}
.divider ol li a.pref{flex:none}
.web-only{display:none}
table.cmp code{font-size:.92em}
table.cmp.mailrec td,table.cmp.mailrec th{padding-top:1.7mm;padding-bottom:1.7mm}
table.cmp.mailrec code{white-space:normal;word-break:break-all}

}