:root{--bg:#170d13;--paneel:#231520;--rand:#4a2a3f;--tekst:#fff3e0;--zacht:#cfae98;--goud:#ff8a3d;--blauw:#d9577c;--rood:#ef6b6b;--groen:#5ccf8a;--oranje:#ffc24a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tekst);font:14px/1.45 system-ui,"Segoe UI",sans-serif}
a{color:var(--goud)}
header{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#d9577c,#ff8a3d,#ffc24a) 1;display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--paneel);border-bottom:1px solid var(--rand);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.merk{font-weight:700;letter-spacing:.04em;color:var(--goud)}
nav{display:flex;gap:.25rem;flex-wrap:wrap;flex:1}
nav button{background:none;border:1px solid transparent;color:var(--zacht);padding:.35rem .7rem;border-radius:8px;cursor:pointer;font:inherit}
nav button:hover{color:var(--tekst)}
nav button.actief{background:#3a1f33;color:var(--tekst);border-color:var(--rand)}
.wie{color:var(--zacht);font-size:.85rem;display:flex;gap:.6rem;align-items:center}
main{padding:1rem;max-width:1500px;margin:0 auto}
h2{font-size:1.1rem;margin:.2rem 0 .8rem}
h3{font-size:.95rem;margin:1.2rem 0 .5rem;color:var(--goud)}
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem;margin-bottom:1rem}
.kaart{background:var(--paneel);border:1px solid var(--rand);border-radius:10px;padding:.7rem .9rem}
.kaart .k{color:var(--zacht);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.kaart .w{font-size:1.5rem;font-weight:600;margin-top:.15rem;word-break:break-all}
.kaart .w.klein{font-size:.95rem;font-weight:500}
.paneel{background:var(--paneel);border:1px solid var(--rand);border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem}
.rij{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.6rem}
input[type=text],select{background:#1a0f17;color:var(--tekst);border:1px solid var(--rand);border-radius:8px;padding:.5rem .7rem;font:inherit;min-width:0}
input[type=text]{flex:1;min-width:14rem}
button.knop{background:var(--goud);color:#1b0f00;border:0;border-radius:8px;padding:.5rem .9rem;font:inherit;font-weight:600;cursor:pointer}
button.knop.stil{background:#3a1f33;color:var(--tekst);border:1px solid var(--rand);font-weight:500}
button.knop:disabled{opacity:.5;cursor:default}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .6rem}
.chip{background:#2e1a2b;border:1px solid var(--rand);color:var(--zacht);border-radius:99px;padding:.15rem .65rem;font-size:.8rem;cursor:pointer}
.chip:hover{color:var(--tekst)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{background:var(--paneel);text-align:left;color:var(--zacht);font-weight:500;padding:.35rem .5rem;border-bottom:1px solid var(--rand);white-space:nowrap}
td{padding:.3rem .5rem;border-bottom:1px solid #36202f;vertical-align:top}
tr.klik{cursor:pointer}
tr.klik:hover td{background:#2e1a2b}
td.tijd{white-space:nowrap;color:var(--zacht)}
td.detail{max-width:34rem;word-break:break-word;color:var(--zacht);font-family:ui-monospace,Consolas,monospace;font-size:.78rem}
.tag{display:inline-block;padding:0 .45rem;border-radius:5px;background:#3a2038;color:#f3c9d6;font-size:.78rem}
.ernst1{color:var(--blauw)}.ernst2{color:var(--oranje)}.ernst3,.ernst4{color:var(--rood);font-weight:600}
.ok{color:var(--groen)}.fout{color:var(--rood)}.let{color:var(--oranje)}
.zacht{color:var(--zacht)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;word-break:break-all}
.balk{display:flex;align-items:center;gap:.5rem;margin:.15rem 0}
.balk .naam{width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.balk .vul{height:.7rem;background:linear-gradient(90deg,var(--blauw),var(--goud));border-radius:4px;min-width:2px}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:start center;padding:3rem 1rem;overflow:auto;z-index:10}
.modal>div{background:var(--paneel);border:1px solid var(--rand);border-radius:12px;max-width:62rem;width:100%;padding:1rem 1.2rem}
.modal pre{background:#1a0f17;border:1px solid var(--rand);border-radius:8px;padding:.7rem;overflow:auto;max-height:22rem;font-size:.78rem}
dl{display:grid;grid-template-columns:9rem 1fr;gap:.2rem .8rem;margin:0}
dt{color:var(--zacht)}dd{margin:0;word-break:break-word}
.centraal{min-height:80vh;display:grid;place-items:center;text-align:center}
.centraal .doos{background:var(--paneel);border:1px solid var(--rand);border-radius:14px;padding:2rem 2.4rem;max-width:26rem}
.centraal h1{margin:0 0 .4rem;color:var(--goud);font-size:1.4rem}
.leeg{padding:1.2rem;text-align:center;color:var(--zacht)}
@media(max-width:700px){dl{grid-template-columns:1fr}td.detail{max-width:14rem}}

/* ---- v2 ---- */
.tabelwrap{overflow-x:auto;max-width:100%}
.tabelwrap.hoog{max-height:70vh;overflow:auto}
a.knop{display:inline-block;text-decoration:none;background:var(--goud);color:#1b0f00;border-radius:8px;padding:.5rem .9rem;font-weight:600}
table.regels td.zin{min-width:22rem;max-width:46rem;word-break:break-word}
table.regels tr.nieuw td{animation:flits 2.5s ease-out}
tr.gekozen td{background:#4a2441}
@keyframes flits{from{background:#5a2b48}to{background:transparent}}
.twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:.9rem}
.uren{display:flex;align-items:flex-end;gap:2px;height:110px}
.uren .uur{flex:1;height:100%;display:flex;align-items:flex-end;min-width:3px}
.uren .stapel{width:100%;display:flex;flex-direction:column-reverse;border-radius:2px 2px 0 0;overflow:hidden}
.uren .stapel i{display:block;min-height:1px}
.legenda{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem;color:var(--zacht);font-size:.78rem}
.legenda i{display:inline-block;width:.7rem;height:.7rem;border-radius:2px;margin-right:.3rem;vertical-align:-1px}
.balk.klik{cursor:pointer}.balk.klik:hover .naam{color:var(--goud)}
.subtabs{display:flex;gap:.25rem;flex-wrap:wrap;margin:.2rem 0 .9rem;border-bottom:1px solid var(--rand);padding-bottom:.4rem}
.subtabs button{background:none;border:1px solid transparent;color:var(--zacht);padding:.3rem .7rem;border-radius:8px;cursor:pointer;font:inherit}
.subtabs button:hover{color:var(--tekst)}.subtabs button.actief{background:#3a1f33;color:var(--tekst);border-color:var(--rand)}
.zoekgrid{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1rem;align-items:start}
.facetten{position:sticky;top:3.6rem;background:var(--paneel);border:1px solid var(--rand);border-radius:10px;padding:.6rem .8rem;max-height:80vh;overflow:auto}
.facet h4{margin:.7rem 0 .25rem;color:var(--goud);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.facet:first-child h4{margin-top:0}
.facet .f{display:flex;justify-content:space-between;gap:.5rem;padding:.12rem .3rem;border-radius:5px;cursor:pointer;font-size:.82rem}.facet .f:hover{background:#2e1a2b}
.chips .chip.actief{background:#5a2b48;color:var(--tekst)}.chip .x{color:var(--rood);cursor:pointer}
details.hulp{margin:.2rem 0 .6rem}details.hulp summary{cursor:pointer;color:var(--zacht)}
.kaartcanvas{width:100%;max-width:1100px;height:auto;aspect-ratio:11/7;border:1px solid var(--rand);border-radius:10px;background:#140a10}
.klein{font-size:1rem}
@media(max-width:900px){.zoekgrid{grid-template-columns:1fr}.facetten{position:static;max-height:none}}

.tabelwrap.hoog th{position:sticky;top:0;z-index:1}

/* ---- huisstijl ---- */
:root{--framboos:#d9577c;--zon:#ffc24a;--crème:#fff3e0;--verloop:linear-gradient(90deg,#d9577c,#ff8a3d)}
body{background:radial-gradient(1200px 500px at 85% -10%,rgba(217,87,124,.16),transparent 60%),radial-gradient(900px 400px at 0% 0%,rgba(255,138,61,.10),transparent 55%),var(--bg);background-attachment:fixed;font-family:'Poppins','Montserrat','Segoe UI',system-ui,Arial,sans-serif}
.merk{font-weight:800;letter-spacing:.12em;background:var(--verloop);-webkit-background-clip:text;background-clip:text;color:transparent}
.merk small{font-weight:500;letter-spacing:.08em;color:var(--zacht);-webkit-text-fill-color:var(--zacht);margin-left:.4rem}
button.knop,a.knop{background:var(--verloop);color:#1b0f00}
button.knop.stil{background:#3a1f33;color:var(--tekst)}
.kaart{border-top:2px solid var(--framboos)}
.centraal{background:radial-gradient(900px 500px at 50% 0%,rgba(217,87,124,.22),transparent 65%)}
.centraal .doos{padding:0;overflow:hidden;max-width:30rem;box-shadow:0 20px 60px #0008}
.centraal .doos .tekst{padding:1.4rem 2rem 1.8rem}
.centraal .banner{display:block;width:100%;height:auto;border-bottom:3px solid var(--framboos)}
.centraal h1{background:var(--verloop);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.14em}
.balk .vul{background:linear-gradient(90deg,#d9577c,#ff8a3d)}
::selection{background:#d9577c;color:#fff}
html{scrollbar-color:#4a2a3f #170d13}

/* ---- v3 ---- */
textarea,input[type=text],select{font:inherit}
textarea{background:#1a0f17;color:var(--tekst);border:1px solid var(--rand);border-radius:8px;padding:.5rem .7rem;resize:vertical}
.notitie{border-left:3px solid var(--rand);padding:.4rem .8rem;margin:.5rem 0;background:#1d1119;border-radius:0 8px 8px 0}
.notitie.let{border-left-color:#ef4444;background:#2a1217}.notitie.plus{border-left-color:#5ccf8a}
input.kies{accent-color:#ff8a3d;width:1rem;height:1rem}
.f{display:flex;justify-content:space-between}
pre{white-space:pre-wrap;word-break:break-word}

/* ---- uitleg: vraagtekentjes, uitlegkaders, "wat wil je doen"-kaarten (03-11) ---- */
button.vraag{display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;margin-left:.45rem;padding:0;border-radius:50%;border:1px solid var(--rand);background:#2a1a26;color:var(--zacht);font:600 .72rem/1 system-ui;text-transform:none;letter-spacing:0;vertical-align:middle;cursor:pointer}
button.vraag:hover,button.vraag.open{border-color:var(--goud);color:var(--goud);background:#3a1f33}
.uitleg{background:#1a0f17;border:1px solid var(--rand);border-left:3px solid var(--goud);border-radius:8px;padding:.55rem .9rem;margin:.5rem 0 .8rem;font-size:.86rem;line-height:1.5;color:var(--tekst);text-transform:none;letter-spacing:0;font-weight:400}
.uitleg[hidden]{display:none}
.uitleg p{margin:.3rem 0}.uitleg ul{margin:.3rem 0 .3rem 1.1rem;padding:0}.uitleg li{margin:.15rem 0}
.kaart .uitleg{font-size:.78rem;padding:.4rem .6rem;margin:.5rem 0 0}
p.kort{margin:.25rem 0 .7rem}
.snel{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem}
.snel button{all:unset;box-sizing:border-box;cursor:pointer;display:block;background:#1a0f17;border:1px solid var(--rand);border-radius:10px;padding:.6rem .8rem}
.snel button:hover,.snel button:focus-visible{border-color:var(--goud)}
.snel b{display:block;color:var(--tekst)}.snel span{display:block;color:var(--zacht);font-size:.8rem;margin-top:.15rem;line-height:1.35}
.uuras{display:flex;gap:2px;margin-top:.25rem;color:var(--zacht);font-size:.66rem}
.uuras span{flex:1;min-width:3px;text-align:center;white-space:nowrap;overflow:visible}
.helppagina h3{margin-top:1.4rem}.helppagina dt{font-weight:600;margin-top:.7rem}.helppagina dd{margin:.15rem 0 0 0;color:var(--zacht)}
.helppagina ol,.helppagina ul{line-height:1.6}
.paneel.goed{border-color:var(--groen)}
.paneel.fout{border-color:var(--rood)}
.ruisrij input{max-width:none}