/* ════════════════════════════════════════════════════════════════
   Publieke pagina's (landing, voorwaarden, privacy, contact, inloggen,
   registreren, wachtwoord) — oktober 2026, "Kantlijn".
   Gedeeld door index.html en publiek_base.html, zodat de pagina's niet uit
   elkaar groeien. Puur zwart (het dashboard is bewust donkergrijs, zie
   style.css); kleur alleen voor winst en verlies; Geist in drie gewichten.
   ════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;
  --bg:#000;--vlak:#0f1011;
  --t1:#f6f6f4;--t2:#9ca1aa;--t3:#80858e;
  --bd:rgba(255,255,255,.10);--bd-z:rgba(255,255,255,.07);--bd-s:rgba(255,255,255,.35);
  --pos:#2f9e5f;--neg:#d84158;
  --ff:'Geist','Helvetica Neue',sans-serif;
  --gut:48px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f8f9;--vlak:#ffffff;
  --t1:#101113;--t2:#5c616b;--t3:#6d727b;
  --bd:rgba(0,0,0,.11);--bd-z:rgba(0,0,0,.08);--bd-s:rgba(0,0,0,.35);
  --pos:#0f7a45;--neg:#b3202f;
}
html[data-theme="light"] .only-dark{display:none}
html:not([data-theme="light"]) .only-light{display:none}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:clip}
body{background:var(--bg);color:var(--t1);font-family:var(--ff);font-size:14px;line-height:1.6;
     -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--t1);color:var(--bg)}
:focus-visible{outline:1px solid var(--t2);outline-offset:4px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.up{color:var(--pos)}.dn{color:var(--neg)}
.t2{color:var(--t2)}.t3{color:var(--t3)}
.cap{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.lnk{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding-bottom:3px;border-bottom:1px solid var(--bd-s);transition:border-color .2s}
.lnk:hover{border-bottom-color:var(--t1)}
.lnk2{font-size:14px;color:var(--t2);transition:color .2s}
.lnk2:hover{color:var(--t1)}
.kick{display:inline-block;margin-bottom:28px;font-size:12px;color:var(--t1);border-bottom:1px solid var(--bd-s);padding-bottom:3px}

/* ── Navigatie ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
     -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.nav-l{display:flex;align-items:center;gap:44px}
.brand img{height:16px;width:auto}
.nav-links{display:flex;gap:28px}
.nav-links a,.nav-r .lnk2{font-size:13px}
.nav-r{display:flex;align-items:center;gap:26px}
.nav-r .cta{font-size:13px;font-weight:500}
.nav-theme{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:color .2s}
.nav-theme:hover{color:var(--t1)}
.nav-theme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
html[data-theme="light"] .ic-zon{display:none}
html:not([data-theme="light"]) .ic-maan{display:none}

/* ── Kantlijnsecties ───────────────────────────────────────── */
.sec{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 48px;padding:56px 0 96px;border-top:1px solid var(--bd)}
.kant h2{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.kant h2 i{font-style:normal;font-weight:500;color:var(--t3);margin-right:10px}
.kant p{margin-top:12px;font-size:13px;line-height:1.6;color:var(--t3);max-width:26ch}
.kop{font-size:clamp(18px,1.55vw,21px);line-height:1.3;font-weight:600;letter-spacing:-.025em;max-width:30ch}
.kop span{color:var(--t3)}
.mod b{display:block;font-size:14px;font-weight:500}
.mod b i{font-style:normal;font-size:11px;font-weight:500;color:var(--t3);margin-right:10px}
.mod span{display:block;margin-top:4px;font-size:13px;color:var(--t3);line-height:1.5}
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}

footer{border-top:1px solid var(--bd)}
.voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:40px;font-size:12px;color:var(--t3)}
.voet nav{display:flex;gap:24px}
.voet-l{display:flex;align-items:center;gap:20px}
.voet .brand img{height:13px;width:auto}
.voet a:hover{color:var(--t1)}

/* ── Inkomen bij scrollen; nooit bepalend voor óf iets zichtbaar is ── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ── Paginakop van een tekst- of formulierpagina ───────────── */
.pkop{padding:80px 0 48px;border-top:1px solid var(--bd)}
.pkop h1{font-size:clamp(26px,2.6vw,36px);line-height:1.1;font-weight:600;letter-spacing:-.035em;max-width:20ch;text-wrap:balance}
.pkop h1 span{color:var(--t3)}
.pkop p{margin-top:16px;max-width:60ch;font-size:15px;line-height:1.6;color:var(--t2)}
.pkop .cap{display:block;margin-bottom:18px}
.pkop .bijgewerkt{margin-top:18px;font-size:12px;color:var(--t3)}

/* ── Lopende tekst in een kantlijnsectie ───────────────────── */
.tekst{max-width:70ch}
.tekst p{font-size:14px;line-height:1.75;color:var(--t2)}
.tekst p+p,.tekst ul+p,.tekst p+ul,.tekst .callout+p,.tekst p+.callout{margin-top:14px}
.tekst ul{list-style:none}
.tekst li{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--bd-z);font-size:14px;line-height:1.65;color:var(--t2)}
.tekst li:last-child{border-bottom:1px solid var(--bd-z)}
.tekst li::before{content:"—";position:absolute;left:0;color:var(--t3)}
.tekst strong{font-weight:500;color:var(--t1)}
.tekst a{color:var(--t1);border-bottom:1px solid var(--bd-s)}
.tekst a:hover{border-bottom-color:var(--t1)}
.callout{padding:18px 0;border-top:1px solid var(--t1);border-bottom:1px solid var(--bd);font-size:14px;line-height:1.7;color:var(--t2)}
.callout strong{display:block;margin-bottom:4px}

/* ── Formulieren (inloggen, registreren, wachtwoord) ───────── */
.auth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 96px;padding:80px 0 104px;border-top:1px solid var(--bd)}
.auth h1{font-size:clamp(26px,2.6vw,36px);line-height:1.1;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.auth h1 span{color:var(--t3)}
.auth-sub{margin-top:16px;max-width:42ch;font-size:15px;line-height:1.6;color:var(--t2)}
.auth-lijst{list-style:none;margin-top:40px;max-width:42ch}
.auth-lijst li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--bd-z);font-size:13px;color:var(--t2)}
.auth-lijst li:last-child{border-bottom:1px solid var(--bd-z)}
.auth-lijst li::before{content:"—";color:var(--t3)}
.formulier{max-width:360px;width:100%}
.melding{padding:12px 0;margin-bottom:18px;border-top:1px solid var(--t1);border-bottom:1px solid var(--bd);font-size:13px;line-height:1.6;color:var(--t1)}
.melding.zacht{border-top-color:var(--bd-s);color:var(--t2)}
.melding a{border-bottom:1px solid var(--bd-s)}
.google{display:flex;align-items:center;justify-content:center;gap:12px;height:38px;border:1px solid var(--bd-s);font-size:13px;font-weight:500;transition:border-color .2s,background .2s}
.google:hover{border-color:var(--t1)}
.google svg{width:14px;height:14px}
.scheiding{display:flex;align-items:center;gap:14px;margin:22px 0 4px;font-size:11px;color:var(--t3)}
.scheiding::before,.scheiding::after{content:"";flex:1;height:1px;background:var(--bd)}
.veld{display:block;margin-top:16px}
.veld label{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.veld label a{font-size:11.5px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--t2)}
.veld label a:hover{color:var(--t1)}
.veld input{display:block;width:100%;height:34px;margin-top:2px;background:none;border:0;border-bottom:1px solid var(--bd-s);border-radius:0;outline:0;
  font:inherit;font-size:14px;color:var(--t1);transition:border-color .2s}
.veld input:focus{border-bottom-color:var(--t1)}
.veld input::placeholder{color:var(--t3)}
.veld .hint{margin-top:6px;font-size:11px;color:var(--t3)}
.twee-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.vinkje{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:12px;line-height:1.5;color:var(--t2);cursor:pointer}
.vinkje input{margin-top:2px;width:12px;height:12px;accent-color:var(--t1)}
.knop{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:38px;margin-top:24px;background:var(--t1);color:var(--bg);
  font-size:13px;font-weight:500;transition:opacity .2s}
.knop:hover{opacity:.88}
.knop:disabled{opacity:.5;cursor:default}
.wissel{margin-top:18px;font-size:12px;color:var(--t3)}
.wissel a{color:var(--t1);border-bottom:1px solid var(--bd-s)}
.wissel a:hover{border-bottom-color:var(--t1)}

/* ── Telefoon en tablet ────────────────────────────────────── */
@media (max-width:980px){
  :root{--gut:28px}
  .sec,.auth{grid-template-columns:minmax(0,1fr)}
  .auth{gap:48px 0}
  .kant{margin-bottom:28px}
  .kant p{max-width:none}
  .vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{display:none}
}
@media (hover:none) and (pointer:coarse){
  .veld input{font-size:16px}
}
@media (max-width:640px){
  :root{--gut:20px}
  .nav-in{height:56px}
  .nav-r{gap:16px}
  .nav-r .lnk2,.nav-r .cta{font-size:12.5px}
  .nav-theme{width:22px}
  .sec{padding:44px 0 64px}
  .drie,.vier{grid-template-columns:minmax(0,1fr)}
  .pkop,.auth{padding:56px 0 72px}
  .auth{gap:36px 0}
  .auth-lijst{display:none}
}