/* cryptofondsenvergelijken.nl

   Uitgangspunt: dit is een uitgave, geen bedieningspaneel. Een document op een
   bureau. De grond is dossiergrijs, het blad ligt erop, en de tabel is het stuk
   waar je voor kwam.

   Eén ding mag opvallen: de kostenmotor. Percentages verbergen geld, dus reken
   je ze om naar euro's en laat je zien wat een fonds je over jaren kost. Al het
   andere houdt zijn mond: haarlijnen, geen schaduwen, geen kaarten met ronde
   hoeken, geen kleur die niets betekent.

   Kleur draagt betekenis of hij staat er niet: groen is een Nederlandse
   vergunning, blauw een Europees paspoort, violet is de stempel die zegt hoe
   hard een getal is. */

:root{
  --grond:#E6E8E3; --blad:#FCFCFA; --blad-2:#F1F2ED; --band:#DCDFD8;
  --lijn:#C9CDC4; --lijn-fijn:#E3E6DF;
  --inkt:#14181A; --inkt-2:#5A6369; --inkt-3:#8B9299;
  --stempel:#4A3A8C; --stempel-vlak:#E7E3F5;
  --nl:#1D6A4A; --nl-vlak:#DCEDE4;
  --eu:#2C5C9E; --eu-vlak:#DEE8F5;
  --let-op:#A4392A; --let-op-vlak:#F6E2DE;
  --duur:.42s; --soepel:cubic-bezier(.2,.7,.3,1);
  --maat:min(1240px,100%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-thema="licht"]){
    --grond:#101315; --blad:#191E21; --blad-2:#20262A; --band:#151A1D;
    --lijn:#2F383E; --lijn-fijn:#242B30;
    --inkt:#E9ECE7; --inkt-2:#9BA5AC; --inkt-3:#6E7981;
    --stempel:#AC9DF0; --stempel-vlak:#241E3D;
    --nl:#54C494; --nl-vlak:#102C22;
    --eu:#74ABE2; --eu-vlak:#122333;
    --let-op:#E4826F; --let-op-vlak:#331914;
  }
}
:root[data-thema="donker"]{
  --grond:#101315; --blad:#191E21; --blad-2:#20262A; --band:#151A1D;
  --lijn:#2F383E; --lijn-fijn:#242B30;
  --inkt:#E9ECE7; --inkt-2:#9BA5AC; --inkt-3:#6E7981;
  --stempel:#AC9DF0; --stempel-vlak:#241E3D;
  --nl:#54C494; --nl-vlak:#102C22;
  --eu:#74ABE2; --eu-vlak:#122333;
  --let-op:#E4826F; --let-op-vlak:#331914;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--grond);color:var(--inkt);
  font-family:"Newsreader",Georgia,serif;
  font-size:19px;line-height:1.55;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--stempel);outline-offset:3px}
::selection{background:var(--stempel);color:var(--blad)}

.wrap{width:var(--maat);margin:0 auto;padding:0 18px}
@media (min-width:900px){.wrap{padding:0 32px}}

/* ---------------------------------------------------------- naamplaat ---- */
.balk{position:sticky;top:0;z-index:60;background:var(--band);border-bottom:1px solid var(--lijn)}
.balk .wrap{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}
.merk{
  display:flex;align-items:center;gap:9px;
  color:var(--inkt);text-decoration:none;margin-right:auto;white-space:nowrap;
}
.merk .woord{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:800;font-stretch:82%;font-size:19px;letter-spacing:-.025em;
}
.merk .woord b{color:var(--stempel);font-weight:800}
/* Het merkteken erft de inktkleur, dus het klopt in beide thema's. Alleen het
   meerdere houdt zijn eigen kleur: dat is het getal waar de site om draait. */
.merkteken{width:21px;height:21px;flex:0 0 auto;fill:currentColor;color:var(--inkt-2)}
.merkteken .meer{fill:var(--stempel)}
.merk:hover .merkteken .meer{fill:var(--stempel)}
.merk:hover .woord{color:var(--inkt)}
nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:-8px}
nav a{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--inkt-2);text-decoration:none;padding:9px 11px;
  min-height:40px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
nav a:hover{color:var(--inkt)}
nav a[aria-current=page]{color:var(--stempel);border-bottom-color:var(--stempel)}

/* ------------------------------------------------------------- het blad -- */
main{padding:0 0 8px}
.blad{
  background:var(--blad);border:1px solid var(--lijn);
  padding:34px 20px;margin:0 0 22px;
}
@media (min-width:900px){.blad{padding:52px 56px}}
.blad.breed{padding-left:0;padding-right:0}
.blad.breed>*{padding-left:20px;padding-right:20px}
@media (min-width:900px){.blad.breed>*{padding-left:56px;padding-right:56px}}
.blad.breed>.tabelhoes{padding:0}

/* ---------------------------------------------------------- typografie --- */
h1{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:800;font-stretch:88%;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(34px,6.4vw,62px);margin:0 0 18px;text-wrap:balance;
}
h2{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-stretch:90%;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(23px,3.2vw,31px);margin:52px 0 14px;text-wrap:balance;
}
h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:17px;margin:0 0 7px}
.lead{font-size:clamp(20px,2.3vw,24px);line-height:1.45;color:var(--inkt-2);max-width:44ch;margin:0 0 30px}
p{max-width:64ch;margin:0 0 17px}
b,strong{font-weight:600;color:var(--inkt)}
a{color:var(--stempel);text-decoration-thickness:1px;text-underline-offset:3px}
code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.84em;background:var(--blad-2);padding:1px 5px;border:1px solid var(--lijn-fijn)}

/* de dateline: waar het vandaan komt en van wanneer */
.dateline{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-3);
  border-top:2px solid var(--inkt);padding-top:9px;margin:0 0 22px;
  display:flex;gap:16px;flex-wrap:wrap;max-width:none;
}
.dateline b{color:var(--inkt-2);font-weight:500}

/* ------------------------------------------------------- de kostenmotor -- */
/* Het enige onderdeel dat mag schreeuwen. De rest van de pagina is stil. */
.motor{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);background:var(--blad-2);margin:34px 0 0}
.motor-in{padding:26px 20px}
@media (min-width:900px){.motor-in{padding:32px 56px}}
.motor h2{margin:0 0 4px;font-size:clamp(20px,2.4vw,26px)}
.motor .uitleg{font-size:15px;color:var(--inkt-2);max-width:52ch;margin:0 0 22px}

.knoppen{display:grid;gap:20px;grid-template-columns:1fr;margin:0 0 26px}
@media (min-width:760px){.knoppen{grid-template-columns:repeat(3,1fr);gap:28px}}
.knop label{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-3);
  margin:0 0 6px;
}
.knop output{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--inkt);
  font-variant-numeric:tabular-nums;text-transform:none;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;cursor:ew-resize;display:block;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--lijn)}
input[type=range]::-moz-range-track{height:2px;background:var(--lijn)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:-7px;
  background:var(--stempel);border:0;border-radius:0;transform:rotate(45deg);
  transition:transform .18s var(--soepel);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;background:var(--stempel);border:0;border-radius:0;
}
input[type=range]:hover::-webkit-slider-thumb{transform:rotate(45deg) scale(1.25)}
input[type=range]:active::-webkit-slider-thumb{transform:rotate(45deg) scale(1.4)}

/* de uitkomst: het getal waar het om gaat */
.uitkomst{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:760px){.uitkomst{grid-template-columns:auto 1fr;gap:34px;align-items:center}}
.bedrag{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:800;font-stretch:84%;letter-spacing:-.045em;line-height:.92;
  font-size:clamp(46px,9vw,84px);color:var(--stempel);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bedrag-bij{font-size:15px;color:var(--inkt-2);max-width:40ch;margin:0}
.bedrag-bij b{color:var(--inkt)}

/* --------------------------------------------------------- het register -- */
.tabelhoes{overflow-x:auto;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin:0}
table.reg{width:100%;border-collapse:collapse;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px}
table.reg th{
  position:sticky;top:60px;z-index:20;background:var(--blad);
  text-align:left;font-weight:500;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--inkt-3);
  padding:13px 14px;border-bottom:1px solid var(--inkt);white-space:nowrap;
}
table.reg th[data-sorteer]{cursor:pointer;user-select:none;transition:color .15s}
table.reg th[data-sorteer]:hover{color:var(--inkt)}
table.reg th[aria-sort]{color:var(--stempel)}
table.reg th[data-sorteer]::after{content:"↕";opacity:.3;margin-left:6px;font-size:11px}
table.reg th[aria-sort=ascending]::after{content:"↑";opacity:1}
table.reg th[aria-sort=descending]::after{content:"↓";opacity:1}
table.reg td{padding:13px 14px;border-bottom:1px solid var(--lijn-fijn);vertical-align:baseline;font-variant-numeric:tabular-nums}
table.reg tbody tr{transition:background .16s}
table.reg tbody tr:hover{background:var(--blad-2)}
table.reg tbody tr td:first-child{box-shadow:inset 3px 0 0 transparent;transition:box-shadow .16s}
table.reg tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--stempel)}
.naam{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
  font-size:15px;letter-spacing:-.015em;display:block;color:var(--inkt);
}
.sub{font-size:10.5px;color:var(--inkt-3);display:block;margin-top:1px;letter-spacing:.02em}
.leeg{color:var(--inkt-3)}
.kosten-cel{font-weight:700;font-size:14px;color:var(--stempel)}

/* de stempel: hoe hard is dit getal */
.stempel{
  display:inline-block;width:6px;height:6px;margin-left:5px;vertical-align:2px;
  border:1px solid var(--stempel);
}
.stempel.hard{background:var(--stempel)}

/* vergunningsherkomst */
.vlag{
  display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;white-space:nowrap;
}
.vlag.nl{background:var(--nl-vlak);color:var(--nl)}
.vlag.eu{background:var(--eu-vlak);color:var(--eu)}
.vlag.uit{background:var(--let-op-vlak);color:var(--let-op)}

/* -------------------------------------------------------------- bediening */
.bedien{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:18px 20px}
@media (min-width:900px){.bedien{padding:18px 56px}}
input[type=search]{
  flex:1 1 240px;min-width:0;background:var(--blad);border:1px solid var(--lijn);
  color:var(--inkt);padding:11px 13px;font-size:15px;border-radius:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
}
input[type=search]:focus{border-color:var(--stempel);outline:none}
.filter{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;background:transparent;border:1px solid var(--lijn);
  color:var(--inkt-2);padding:10px 13px;cursor:pointer;transition:all .16s;
}
.filter:hover{border-color:var(--inkt-3);color:var(--inkt)}
.filter[aria-pressed=true]{background:var(--stempel);border-color:var(--stempel);color:var(--blad)}
.telling{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--inkt-3);margin-left:auto}

/* ----------------------------------------------------------------- kader */
.kader{border-left:3px solid var(--stempel);background:var(--blad-2);padding:18px 20px;margin:26px 0}
.kader h3{margin:0 0 6px}
.kader p{font-size:15.5px;color:var(--inkt-2);margin:0 0 8px}
.kader p:last-child{margin:0}

/* ---------------------------------------------------------------- voet -- */
footer{border-top:1px solid var(--lijn);padding:44px 0 60px;font-size:15px;color:var(--inkt-2)}
.colofon{
  font-family:"JetBrains Mono",monospace;font-size:11.5px;line-height:1.75;
  color:var(--inkt-2);border-left:2px solid var(--stempel);padding-left:16px;
  margin:0 0 34px;max-width:76ch;
}
.voetkolommen{display:grid;gap:26px;grid-template-columns:1fr;margin:0 0 30px}
@media (min-width:700px){.voetkolommen{grid-template-columns:repeat(3,1fr)}}
footer h3{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--inkt-3);font-weight:400;margin:0 0 10px;
}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 6px}
footer a{color:var(--inkt-2);text-decoration:none;border-bottom:1px solid var(--lijn)}
footer a:hover{color:var(--stempel);border-color:var(--stempel)}
.klein{font-size:13px;color:var(--inkt-3);max-width:70ch}

/* -------------------------------------------------------------- beweging */
/* Terughoudend: één opkomst bij het laden, en de tabel die van volgorde
   verandert. Alles hieronder valt weg zodra het systeem daarom vraagt. */
@keyframes op{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.op{animation:op var(--duur) var(--soepel) both}
.op:nth-child(2){animation-delay:.05s}
.op:nth-child(3){animation-delay:.1s}
.op:nth-child(4){animation-delay:.15s}
.bedrag{transition:color .25s}
.bedrag.rekent{color:var(--inkt-3)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------- tabel wordt kaart op klein */
@media (max-width:820px){
  .tabelhoes{overflow-x:visible}
  table.reg thead{display:none}
  table.reg,table.reg tbody,table.reg tr,table.reg td{display:block;width:100%}
  table.reg tr{border-bottom:1px solid var(--lijn);padding:16px 20px;position:relative}
  table.reg tr:hover td:first-child{box-shadow:none}
  table.reg td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
  table.reg td:first-child{display:block;margin-bottom:9px}
  table.reg td::before{
    content:attr(data-kop);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--inkt-3);flex:0 0 auto;
  }
  table.reg td:first-child::before{content:none}
  table.reg td:empty{display:none}
}

/* ------------------------------------------ overige pagina's in dit systeem */
/* De MiCAR-pagina, de artikelen en de juridische pagina's delen deze klassen.
   De cijferreeks is bewust geen rij gekleurde kaarten meer: dat leest als een
   dashboard en dit is een uitgave. Nu een strook met haarlijnen, cijfers in
   dezelfde kop-letter als de titel, en geen kleur die niets betekent. */
.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-3);
  border-top:2px solid var(--inkt);padding-top:9px;margin:0 0 22px;max-width:none;
}
.cijfers{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:30px 0 34px;
  border-top:1px solid var(--inkt);
}
@media (min-width:760px){.cijfers{grid-template-columns:repeat(4,1fr)}}
.cijfer{padding:16px 18px 18px 0;border-bottom:1px solid var(--lijn-fijn)}
@media (min-width:760px){.cijfer{border-bottom:0}}
.cijfer .n{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:800;font-stretch:86%;letter-spacing:-.04em;line-height:1;
  font-size:clamp(30px,4.6vw,44px);font-variant-numeric:tabular-nums;color:var(--inkt);
}
.cijfer .l{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;line-height:1.45;letter-spacing:.03em;color:var(--inkt-3);
  margin-top:7px;max-width:22ch;
}
.cijfer.a .n{color:var(--nl)}
.cijfer.b .n{color:var(--eu)}
.cijfer.c .n{color:var(--stempel)}

.chip{
  display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;margin:0 4px 3px 0;
  white-space:nowrap;background:var(--blad-2);color:var(--inkt-2);
}
.chip.nl{background:var(--nl-vlak);color:var(--nl)}
.chip.eu{background:var(--eu-vlak);color:var(--eu)}
.chip.part{background:var(--stempel-vlak);color:var(--stempel)}
.chip.weg{background:var(--let-op-vlak);color:var(--let-op)}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.86em;font-variant-numeric:tabular-nums}
.onbekend{color:var(--inkt-3)}
.tabelbox{overflow-x:auto;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin:22px 0}
.tabelbox table{width:100%;border-collapse:collapse;font-family:"JetBrains Mono",monospace;font-size:12.5px}
.tabelbox th{
  position:sticky;top:60px;z-index:20;background:var(--blad);text-align:left;
  font-weight:500;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--inkt-3);padding:13px 14px;border-bottom:1px solid var(--inkt);white-space:nowrap;
}
.tabelbox td{padding:12px 14px;border-bottom:1px solid var(--lijn-fijn);vertical-align:baseline}
.tabelbox tbody tr:hover{background:var(--blad-2)}

/* artikelen */
.artikelen{list-style:none;margin:26px 0 0;padding:0}
.artikel{border-top:1px solid var(--lijn);padding:22px 0}
.artikel h3{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;margin:0 0 6px}
.artikel h3 a{color:var(--inkt);text-decoration:none}
.artikel h3 a:hover{color:var(--stempel)}
.artikel p{color:var(--inkt-2);margin:0 0 8px;font-size:17px}
.datum,.bijgewerkt{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--inkt-3);
}
.bronnen{border-left:3px solid var(--lijn);padding-left:18px;margin:30px 0 0;font-size:15.5px;color:var(--inkt-2)}
.bronnen h3{color:var(--inkt)}
.bronnen ul{margin:0;padding-left:18px}
.bronnen li{margin:0 0 5px}

/* methodologie: de rekenregel uitgeschreven */
.formule{
  font-family:"JetBrains Mono",monospace;font-size:13px;line-height:1.8;
  background:var(--blad-2);border-left:3px solid var(--stempel);
  padding:16px 18px;margin:20px 0;overflow-x:auto;white-space:pre-wrap;
}
.meth,.juridisch{max-width:70ch}
.meth ol,.juridisch ol,.meth ul,.juridisch ul{padding-left:22px}
.meth li,.juridisch li{margin:0 0 8px}

/* ------------------------------------------------------- aanmeldformulier -- */
.tweeluik{display:grid;gap:0 26px;grid-template-columns:1fr}
@media (min-width:640px){.tweeluik{grid-template-columns:1fr 1fr}}
.veld{margin:0 0 20px;display:flex;flex-direction:column}
.veld label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--inkt-3);margin:0 0 6px;
}
.veld input,.veld textarea,.veld select{
  font-family:"Newsreader",Georgia,serif;font-size:17px;color:var(--inkt);
  background:var(--blad);border:0;border-bottom:1px solid var(--lijn);
  padding:9px 2px;border-radius:0;width:100%;transition:border-color .18s;
}
.veld textarea{min-height:110px;resize:vertical;line-height:1.5}
.veld input:focus,.veld textarea:focus{outline:none;border-bottom-color:var(--stempel);border-bottom-width:2px;padding-bottom:8px}
.veld input::placeholder,.veld textarea::placeholder{color:var(--inkt-3);opacity:.8}
.ster{color:var(--stempel);margin-left:2px}
.hint{font-size:14.5px;color:var(--inkt-3);max-width:56ch;margin:-6px 0 22px}

/* de honingpot ziet een mens niet; wegstoppen zonder display:none, want dat
   ruikt een bot van een kilometer afstand */
.veld.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.verzend{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:16px;letter-spacing:-.01em;
  background:var(--stempel);color:var(--blad);border:1px solid var(--stempel);
  padding:13px 26px;cursor:pointer;border-radius:0;
  transition:transform .16s var(--soepel),opacity .16s;
}
.verzend:hover{transform:translateY(-1px)}
.verzend:active{transform:none}
.verzend[disabled]{opacity:.5;cursor:wait;transform:none}

.uitslag{
  font-family:"JetBrains Mono",monospace;font-size:13px;line-height:1.6;
  margin:18px 0 0;padding:12px 14px;max-width:60ch;
}
.uitslag:empty{display:none}
.uitslag.ok{background:var(--nl-vlak);color:var(--nl)}
.uitslag.fout{background:var(--let-op-vlak);color:var(--let-op)}

/* De MiCAR-tabel verbergt rijen via een klasse, het beheerdersoverzicht via
   het hidden-attribuut. Allebei laten staan: ze horen bij hun eigen pagina. */
tr.uit{display:none}
tr[hidden]{display:none}