/* ============ basis ============ */
*{box-sizing:border-box}
/* Het hidden-attribuut wint altijd — ook van display:flex/inline op dezelfde
   elementen (welkomsttour-knoppen stapelden anders op elkaar). */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;min-height:100vh;
  /* clip i.p.v. hidden: geen scrollcontainer, dus position:sticky blijft werken */
  overflow-x:clip}
/* Brede inhoud (tabellen, spinnenweb) scrollt in z'n eigen bakje; de pagina
   zelf mag nooit horizontaal scrollen. */
.tabelscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.wrap{max-width:880px;margin:0 auto;padding:0 20px 60px;position:relative;z-index:1}
a{color:inherit}
/* Alleen voor schermlezers: uit beeld, maar wel voorgelezen en focusbaar. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Sla de vaste kop over; onzichtbaar tot hij focus krijgt (WCAG 2.4.1). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--card);color:var(--ink);border:2px solid var(--accent);
  border-radius:0 0 var(--r-small) 0;padding:12px 18px;text-decoration:none;
  font-size:15px}
.skip-link:focus{left:0}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],textarea,select{font:inherit;font-size:15px;padding:10px 13px;
  border:1px solid var(--rule);background:var(--field);color:var(--ink);border-radius:var(--r-small);width:100%}
textarea{resize:vertical;line-height:1.5}
/* Meegroeiend tekstvak: de tekst blijft altijd in zijn geheel leesbaar —
   het vak wordt hoger in plaats van dat de zin wegscrolt. De hoogte zelf
   zet het script (base.html); deze regels zorgen dat er nooit een
   scrollbalk of afgeknipte regel verschijnt. */
textarea.groeit{resize:none;overflow:hidden;min-height:44px}

/* Denk-mee-blok onder de vraag: zichtbaar en uitnodigend, maar rustig
   genoeg om de vraag zelf niet te overstemmen. */
.denkmee{margin:18px auto 0;max-width:46ch;text-align:center;padding:14px 16px;
  border:1.5px dashed var(--accent);border-radius:var(--r);background:var(--field)}
.denkmee-kop{margin:0;font-weight:700;font-size:15px;color:var(--ink)}
.denkmee-tekst{margin:6px 0 10px;font-size:13.5px;color:var(--soft);line-height:1.5}
@media (max-width:700px){.denkmee{margin-top:14px;padding:12px}}

/* Werkt JavaScript, dan toont de tour één kaart tegelijk; zonder JS staan
   ze allemaal onder elkaar en zijn de stapknoppen weg (de submit-knoppen
   blijven, zodat niemand vastloopt). */
html.js .tour-kaart:not(.tour-actief){display:none}
html:not(.js) .alleen-js{display:none!important}
input:focus-visible,button:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
/* Elementen die géén knop of link zijn maar zich wel zo gedragen (de
   omdraaibare praatkaart is een div met role="button") vielen buiten de regel
   hierboven en hadden dus geen zichtbare focus (review 07-08, WCAG 2.4.7). */
[tabindex="0"]:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
/* Placeholder-kleur expliciet vastleggen in plaats van aan de browser
   overlaten: --soft haalt in alle drie de thema's ruim 4,5:1 op --field. */
input::placeholder,textarea::placeholder{color:var(--soft);opacity:1}
button{font:inherit;cursor:pointer}

header.site{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:22px 0 16px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.brand{font-family:var(--display);font-size:20px;text-decoration:none;color:var(--ink);letter-spacing:.01em}
header.site nav{display:flex;gap:16px;align-items:center;font-size:13.5px;color:var(--soft)}
header.site nav a{color:var(--soft);text-decoration:none;white-space:nowrap}
header.site nav a:hover{color:var(--ink)}
.taalopties{display:inline-flex;align-items:center;gap:2px}
.taalmenu .navknop,.brand{white-space:nowrap}
/* De 🌐-knop klapt het taalmenu open op smalle schermen. Op breed scherm is
   de lijst altijd zichtbaar en is de knop overbodig, dus verborgen. */
.taalbol{background:none;border:0;padding:4px;font:inherit;font-size:15px;
  line-height:1;cursor:pointer;color:var(--soft);display:none}
.taalbol:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:var(--r-small)}
/* Uitloggen is een POST: het mini-formulier in de nav oogt als de links ernaast. */
header.site nav form.navform{display:inline;margin:0}
header.site nav button.navknop{background:none;border:0;padding:0;font:inherit;
  color:var(--soft);cursor:pointer}
header.site nav button.navknop:hover{color:var(--ink)}
/* Knop die eruitziet als een gewone tekstlink (voor POST-acties in lopende tekst). */
form.inlineform{display:inline;margin:0}
button.linkknop{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;cursor:pointer}
.me{font-weight:600;color:var(--ink)}
footer.site{margin-top:48px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--soft)}
footer.site a{color:var(--soft)}

/* ============ thema: vrouw ============ */
.theme-v{
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --bg1:#FFF6F7;--bg2:#FBEDF3;--card:#FFFFFF;--field:#FFFDFD;
  /* Contrast (review 05-08): --soft, --accent en --stop waren te licht voor
     WCAG AA op wit (4,27 / 3,38 / 3,91:1). Verdiept zonder de warme
     kleurindruk te verliezen: nu 4,6-4,9:1 voor secundaire tekst, knoppen
     en foutmeldingen. --accent-2/--glow blijven licht (vlakken, geen tekst). */
  --ink:#4A2E39;--soft:#875A6B;--rule:#F0D9E1;
  /* Interactieve randen (antwoordknoppen, keuzepillen) moeten 3:1
     halen tegen het veldvlak; --rule alleen is daarvoor te licht.
     Zie review 06-08 (WCAG 1.4.11). */
  --rule-sterk:color-mix(in srgb,var(--ink) 52%,var(--rule));
  --accent:#B94A70;--accent-2:#F5CBD9;--glow:#F9E3EB;
  --sage:#7FA88B;--amber:#CE9B5C;--lav:#A98BC9;--stop:#A94A52;--gray:#A79098;
  --r:22px;--r-small:14px;--shadow:0 10px 30px rgba(217,102,138,.10);
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#F7EAF2);
  background-attachment:fixed;color:var(--ink)}
.theme-v .card{border:1px solid var(--rule)}

/* ============ thema: man ============ */
/* Harder gemaakt (besluit Jeroen 05-08): staalblauw accent in plaats van
   mauve, koelere grijzen, koperen highlights — strak en nuchter. */
.theme-m{
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --bg1:#E3E6E8;--card:#F4F5F6;--field:#FFFFFF;
  --ink:#131E28;--soft:#43535E;--rule:#C2C9CE;
  --rule-sterk:color-mix(in srgb,var(--ink) 52%,var(--rule));
  --accent:#3A607A;--accent-2:#C3D3DE;--glow:#DFE9F0;
  --sage:#5F7A64;--amber:#A9743B;--lav:#6C6288;--stop:#8C3A3A;--gray:#727C84;
  --r:6px;--r-small:3px;--shadow:0 4px 14px rgba(19,30,40,.10);
  background:var(--bg1);color:var(--ink)}

/* ============ thema: neutraal (bezoekers, nog niet ingelogd) ============ */
/* Warm ivoor met diepgroen accent: uitnodigend zonder naar één kant te
   kleuren — de start- en loginpagina schrikken zo niemand af. */
.theme-n{
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --bg1:#F7F5F0;--bg2:#EFEAE2;--card:#FFFFFF;--field:#FFFEFC;
  /* Zelfde contrastronde: --soft haalde 4,38:1 op de ivoren achtergrond en
     --accent had nauwelijks marge; beide een tint dieper. */
  --ink:#2E3230;--soft:#5F6B65;--rule:#DDD8CE;
  --rule-sterk:color-mix(in srgb,var(--ink) 52%,var(--rule));
  --accent:#3F6C5A;--accent-2:#CBDDD4;--glow:#E4EEE9;
  --sage:#7FA88B;--amber:#C08A4A;--lav:#8D82A8;--stop:#B05050;--gray:#8A8F8A;
  --r:16px;--r-small:10px;--shadow:0 8px 24px rgba(46,50,48,.08);
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  background-attachment:fixed;color:var(--ink)}

/* ============ thema: admin ============ */
.theme-admin{
  --display:ui-sans-serif,system-ui,sans-serif;
  --bg1:#F4F5F7;--card:#FFFFFF;--field:#FFFFFF;
  --ink:#1D2530;--soft:#5D6B7A;--rule:#DDE2E8;
  --rule-sterk:color-mix(in srgb,var(--ink) 52%,var(--rule));
  --accent:#3D5A80;--accent-2:#C6D3E3;--glow:#E8EDF4;
  --sage:#4C8055;--amber:#A8752E;--lav:#6B5E96;--stop:#A03D3D;--gray:#7C858C;
  --r:10px;--r-small:6px;--shadow:0 2px 10px rgba(29,37,48,.06);
  background:var(--bg1);color:var(--ink)}

/* ============ zwevende hartjes ============ */
.hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hearts span{position:absolute;bottom:-40px;font-size:22px;
  color:var(--accent-2);opacity:0;
  animation:floatup linear infinite}
@keyframes floatup{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  12%{opacity:.35}
  85%{opacity:.18}
  100%{transform:translateY(-110vh) rotate(28deg);opacity:0}}
/* ============ telefoon ============ */
/* Zelfde pagina, andere maat: op een smal scherm moet de vraag mét knoppen in
   één oogopslag passen. Alles wat daarboven ruimte vrat wordt compact. */
@media (max-width:700px){
  .wrap{padding:0 12px 48px}
  header.site{padding:10px 0 8px;margin-bottom:10px}
  /* Kop op één regel: merknaam kleiner en nooit gebroken; de navitems wrappen
     niet maar scrollen zijwaarts binnen de nav zelf. Het taalmenu is op
     telefoon alleen het 🌐-icoon; een tik erop (focus) toont de talen —
     inclusief 中文, dat nergens verticaal mag breken. */
  .brand{font-size:15px;white-space:nowrap;flex:0 0 auto}
  /* Scrollbare nav met een zichtbare hint: zonder de vervaging rechts
     leek de balk compleet terwijl 'uitloggen' en het taalmenu buiten
     beeld stonden (review 05-08). */
  header.site nav{gap:10px;font-size:12px;flex-wrap:nowrap;overflow-x:auto;
    min-width:0;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);
    mask-image:linear-gradient(90deg,#000 85%,transparent)}
  header.site nav::-webkit-scrollbar{display:none}
  header.site nav a,header.site nav .me{white-space:nowrap;flex:0 0 auto}
  /* Ingeklapt achter de 🌐-knop. Eerder stond hier alleen :focus-within,
     maar niets in een display:none-tak kan focus krijgen — het menu ging
     dus voor niemand open (review 06-08). Nu doet een echte knop het werk;
     :focus-within blijft als vangnet staan. Zonder JS (html zonder .js)
     blijft de lijst uitgeklapt: taalwissel hangt nooit van JS af. */
  .taalbol{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px}
  .js .taalopties{display:none}
  /* Alleen .open, geen :focus-within: die hield het menu open zodra
     Escape de focus terugzette op de knop, waardoor sluiten niet
     werkte (review 06-08 avond). Zonder JS is de regel overbodig,
     want dan geldt .taalopties{display:inline-flex} gewoon. */
  .js .taalopties.open{display:inline-flex}
  .progress{padding:7px 12px;margin-bottom:10px;font-size:12px}
  /* Meta-chips samengevouwen tot één regel: zijwaarts scrollbaar, nooit een
     stapel die de vraag onder de vouw duwt. */
  .spel{gap:6px;margin-bottom:8px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none}
  .spel::-webkit-scrollbar{display:none}
  .chip{padding:4px 10px;font-size:11.5px;flex:0 0 auto;white-space:nowrap}
  .banner{padding:9px 12px;font-size:13px;margin-bottom:10px}
  /* Hier stond `border-radius:14px`, en de review van 07-08 meldde dat het
     bewust harde man-thema (--r 6px) daardoor op de telefoon dezelfde zachte
     hoek zou krijgen als het vrouw-thema. In de browser nagemeten: dat
     gebeurde niet. Deze regel staat vóór de basisregel `.card` (regel ~233)
     en heeft dezelfde specificiteit, dus de latere `border-radius:var(--r)`
     won altijd. De declaratie deed dus niets en is weggehaald in plaats van
     "hersteld" — gemeten op 375px: v 22px, m 6px, n 16px, precies de
     themawaarden. */
  .card{padding:16px 16px;margin-bottom:12px}
  .illu{margin:0 0 8px}
  .illu svg{height:min(var(--illu-h,110px), 66px)}
  /* Bij meer dan vijf antwoordopties wint de vraag het van de tekening. */
  .veel-opties .illu svg{height:min(var(--illu-h,110px), 48px)}
  .illu-bij{font-size:12px;margin-top:2px}
  .scene{font-size:14.5px;margin-bottom:10px;padding-left:12px}
  .qtext{font-size:19px}
  .opts{gap:6px;margin:10px 0 4px;grid-template-columns:1fr 1fr}
  .opt{padding:8px 10px;font-size:12.5px;text-align:center}
  .opt[data-v=prive]{grid-column:1 / -1}
  .care{font-size:12.5px;padding:8px 11px;margin:8px 0 2px}
  .notefield label{font-size:12px}
  .qfoot{font-size:12px;margin-top:10px}
  .aanmoediging{font-size:13.5px;margin-bottom:8px}
  .panel{padding:14px 16px}
  .statrow{gap:8px}
  .stat{padding:9px 12px;flex-basis:110px}
  .stat .n{font-size:20px}
  h1{font-size:24px}
  h2{font-size:19px}
  .hearts span{font-size:16px}
  table{font-size:12px}
  th,td{padding:6px 6px}
}
@media (prefers-reduced-motion:reduce){
  .hearts span{animation:none;display:none}
  *{transition:none!important;animation:none!important}}

/* ============ kaarten en koppen ============ */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:30px 32px;margin-bottom:22px;animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
/* h3 hoorde hier niet bij en viel daardoor buiten het profielpaneel terug
   op de kale browserstijl: vet systeemfont tussen de serif-koppen
   (review 06-08). Nu één regel voor alle drie de niveaus. */
h1,h2,h3{font-family:var(--display);font-weight:500;margin:8px 0 6px;line-height:1.15}
h1{font-size:clamp(26px,5.5vw,38px)}
h2{font-size:24px}
h3{font-size:20px}
.lede,.note-text{color:var(--soft);font-size:15px;max-width:60ch}

/* ============ voortgang ============ */
.progress{position:sticky;top:0;z-index:5;background:var(--card);border-radius:0 0 var(--r-small) var(--r-small);
  box-shadow:var(--shadow);padding:10px 18px;display:flex;align-items:center;gap:14px;
  font-size:13px;color:var(--soft);margin-bottom:20px}
/* De balk is een UI-component en heeft dus 3:1 nodig (WCAG 1.4.11). Het lege
   vlak haalde 1,22:1 tegen de kaart en het begin van de vulling 1,19:1 tegen
   dat vlak — nagerekend in alle drie de thema's (review 07-08). Bij .dtrack
   staat er geen cijfer naast, dus daar is de balk het énige signaal.
   Een rand van 1px maakt het vlak zichtbaar, en de vulling begint niet meer
   op de lichtste tint. Nagerekend na de wijziging: 3,61 / 4,62 / 3,88 voor
   de rand en 3,11 / 3,86 / 3,60 voor de vulling (v / m / n). */
.track{flex:1;height:8px;background:var(--glow);border-radius:99px;position:relative;
  border:1px solid var(--rule-sterk);box-sizing:border-box}
.track .bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 80%,var(--accent-2)),var(--accent));
  transition:width .7s cubic-bezier(.2,.8,.3,1)}
.track .pin{position:absolute;top:50%;translate:-50% -54%;font-size:15px;
  transition:left .7s cubic-bezier(.2,.8,.3,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.theme-v .track .pin{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{scale:1}50%{scale:1.25}}
.pct{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}

/* ============ illustraties ============ */
.illu{display:flex;justify-content:center;margin:2px 0 16px;color:var(--accent);opacity:.9}
.illu svg{height:var(--illu-h,110px);width:auto;max-width:100%;overflow:visible}
.illu .d{stroke-dasharray:400;stroke-dashoffset:400;
  animation:trek 1.1s cubic-bezier(.3,.7,.3,1) forwards;
  animation-delay:calc(var(--i,0) * .11s)}
@keyframes trek{to{stroke-dashoffset:0}}
.illu .beat{transform-origin:center;transform-box:fill-box;
  animation:kloppen 1.9s ease-in-out infinite}
@keyframes kloppen{0%,100%{scale:1;opacity:.75}50%{scale:1.22;opacity:1}}
.illu .twinkle{animation:fonkel 2.6s ease-in-out infinite}
@keyframes fonkel{0%,100%{opacity:.25}50%{opacity:1}}
.illu .flicker{transform-origin:bottom;transform-box:fill-box;
  animation:flakker 1.5s ease-in-out infinite}
@keyframes flakker{0%,100%{scale:1 1;opacity:.85}35%{scale:.94 1.08;opacity:1}70%{scale:1.05 .96;opacity:.9}}
.illu .steam{stroke-dasharray:26;animation:damp 3.2s linear infinite;opacity:.5}
@keyframes damp{0%{stroke-dashoffset:26;opacity:0}30%{opacity:.55}100%{stroke-dashoffset:-26;opacity:0}}
.illu .rain{stroke-dasharray:6 10;animation:druppel 1.4s linear infinite}
@keyframes druppel{to{stroke-dashoffset:-16}}
.theme-v .illu{color:var(--accent)}
.theme-m .illu{color:var(--soft);opacity:.75}
.illu-bij{font-family:var(--display);font-style:italic;font-size:13.5px;color:var(--soft);
  text-align:center;margin:6px 0 0;max-width:46ch;animation:rise .6s .5s ease both}

/* bewegingen voor de tekeningen van deel drie */
.illu .zwaai{animation:zwaai 3.4s ease-in-out infinite}
@keyframes zwaai{0%,100%{rotate:-4deg}50%{rotate:4deg}}
.illu .knipper{animation:knipper 2.1s ease-in-out infinite}
@keyframes knipper{0%,100%{opacity:.18}45%{opacity:1}}
.illu .drup{animation:drup 2.4s ease-in infinite;transform-box:fill-box}
@keyframes drup{0%{translate:0 -14px;opacity:0}25%{opacity:.8}100%{translate:0 12px;opacity:0}}
.illu .zand{animation:zand 4s ease-in-out infinite;transform-origin:top;transform-box:fill-box}
@keyframes zand{0%{scale:1 1}100%{scale:1 .25}}
.illu .golfje{stroke-dasharray:30;animation:golfje 1.8s linear infinite;opacity:.5}
@keyframes golfje{0%{stroke-dashoffset:30;opacity:0}40%{opacity:.6}100%{stroke-dashoffset:-30;opacity:0}}
.illu .glans{stroke-dasharray:40;stroke-dashoffset:40;animation:glans 3.6s ease-in-out infinite}
@keyframes glans{0%,70%{stroke-dashoffset:40}85%{stroke-dashoffset:0}100%{stroke-dashoffset:-40}}
.illu .knipoog{animation:knipoog 4.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes knipoog{0%,92%,100%{scale:1 1}96%{scale:1 .12}}
.illu .vlieg{animation:vlieg 3.2s ease-out infinite}
@keyframes vlieg{0%{translate:0 0;opacity:0}15%{opacity:.9}100%{translate:34px -30px;opacity:0}}

/* ============ spinnenweb ============ */
.radar{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 4px}
.radar svg{height:var(--radar-h,340px);max-width:100%;color:var(--ink);overflow:visible}
.radar .aslabel{font-size:9.5px;fill:var(--soft);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.radar .vorm{fill:var(--kleur);fill-opacity:.16;stroke:var(--kleur);stroke-width:2;
  stroke-linejoin:round;transform-origin:150px 150px;
  animation:groei .9s cubic-bezier(.25,.9,.3,1) both;animation-delay:calc(var(--i) * .18s)}
@keyframes groei{from{scale:.15;opacity:0}to{scale:1;opacity:1}}
.radar .knoop{opacity:0;animation:opkomen .4s ease forwards;
  animation-delay:calc(.5s + var(--i) * .04s)}
@keyframes opkomen{to{opacity:1}}
.radar .knoop:hover{r:5.5}
.radar-legenda{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  font-size:13px;color:var(--soft)}
.radar-legenda span{display:flex;align-items:center;gap:7px}
.radar-legenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ============ spelelementen ============ */
.spel{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;
  background:var(--card);box-shadow:var(--shadow);font-size:13px;color:var(--soft)}
.chip b{color:var(--ink);font-variant-numeric:tabular-nums}
/* Amber is als tekstkleur te licht (2,5:1); de vlam blijft amber via het
   icoon, de tekst zelf leest in de inktkleur (review 05-08). */
.chip.vlam{color:var(--ink)}
.chip.vlam .em{color:var(--amber)}
.chip.zondag{font-size:14.5px;padding:9px 16px;
  border:1.5px solid color-mix(in srgb,var(--ink) 52%,var(--accent-2));
  background:linear-gradient(90deg,var(--glow),var(--card));color:var(--ink)}
.chip.nieuw{animation:pop .55s cubic-bezier(.2,1.5,.4,1) both}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;
  background:linear-gradient(90deg,var(--glow),var(--card));
  /* Componentgrens: was 1,40-1,46:1 tegen de kaart, nu 3,81/4,34/3,87.
     Zelfde 52%-recept als --rule-sterk (review 07-08, WCAG 1.4.11). */
  border:1.5px solid color-mix(in srgb,var(--ink) 52%,var(--accent-2));
  font-size:13.5px;font-weight:600;color:var(--ink);animation:pop .6s cubic-bezier(.2,1.5,.4,1) both}
.badge .em{font-size:17px}
.aanmoediging{font-family:var(--display);font-style:italic;font-size:15.5px;color:var(--soft);
  text-align:center;margin:0 0 14px}

/* ============ meldingen ============ */
.banner{border-radius:var(--r-small);padding:12px 16px;margin-bottom:16px;font-size:14.5px;
  background:var(--glow);color:var(--ink);border:1px solid var(--rule);animation:rise .4s ease both}
.banner.milestone{background:linear-gradient(90deg,var(--glow),var(--card));
  border-color:var(--accent-2);font-weight:600}
.wink{display:flex;gap:10px;align-items:flex-start;background:var(--glow);
  border-radius:var(--r);border-bottom-left-radius:4px;padding:13px 17px;margin-bottom:16px;
  font-size:14.5px;color:var(--ink);animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}}
.wink .who{font-size:18px}

/* ============ de vraag ============ */
.scene{font-family:var(--display);font-style:italic;font-size:16.5px;color:var(--soft);
  border-left:3px solid var(--accent-2);padding:2px 0 2px 16px;margin:0 0 18px}
/* font-weight expliciet: .qtext is op de vraagpagina nu een h1, en de
   h1,h2-regel zou hem anders zwaarder zetten dan de <p>-varianten
   elders. Zo blijft het beeld overal exact gelijk. */
.qtext{font-size:clamp(19px,3.6vw,25px);font-family:var(--display);margin:0 0 4px;line-height:1.3;font-weight:400}
.care{display:flex;gap:9px;margin:12px 0 4px;padding:11px 14px;border-radius:var(--r-small);
  background:var(--glow);font-size:13.5px;color:var(--soft)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:20px 0 6px}
/* De rand in rusttoestand is het enige signaal waar deze knop begint en
   eindigt; die moet 3:1 halen tegen het veldvlak (WCAG 1.4.11). Met --rule
   alleen was dat 1,30-1,67:1 in de vier thema's (review 06-08). */
.opt{padding:13px 16px;border:1.5px solid var(--rule-sterk);border-radius:var(--r-small);
  background:var(--field);color:var(--ink);font-size:14.5px;text-align:left;
  min-height:44px;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.opt:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
.opt:active{transform:scale(.97)}
/* De rand van de gekozen knop is een UI-component: die moet 3:1 halen
   tegen het veldvlak (WCAG 1.4.11). De kleurfamilie blijft, maar de rand
   wordt gemengd met de inktkleur zodat hij ook echt te zien is; de dikkere
   rand plus vet lettertype maken de keuze bovendien niet-kleurafhankelijk. */
.opt.sel{border-width:3px;font-weight:700}
.opt[data-v=ja].sel{border-color:color-mix(in srgb,var(--sage) 65%,var(--ink));background:color-mix(in srgb,var(--sage) 12%,var(--field))}
.opt[data-v=proberen].sel{border-color:color-mix(in srgb,var(--amber) 60%,var(--ink));background:color-mix(in srgb,var(--amber) 12%,var(--field))}
.opt[data-v=voorjou].sel{border-color:color-mix(in srgb,var(--lav) 65%,var(--ink));background:color-mix(in srgb,var(--lav) 12%,var(--field))}
.opt[data-v=lieverniet].sel{border-color:color-mix(in srgb,var(--gray) 60%,var(--ink));background:color-mix(in srgb,var(--gray) 12%,var(--field))}
.opt[data-v=grens].sel{border-color:var(--stop);background:color-mix(in srgb,var(--stop) 10%,var(--field))}
.opt[data-v=geenidee].sel,.opt[data-v=prive].sel{border-color:var(--ink)}
.opt[data-v=prive]{border-style:dashed;color:var(--soft)}
.notefield{margin-top:14px}
.notefield label{display:block;font-size:13px;color:var(--soft);margin-bottom:5px}
.qfoot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;
  font-size:13.5px;color:var(--soft);gap:10px;flex-wrap:wrap}
.qfoot a{color:var(--soft)}
.opzij{font:inherit;font-size:13px;background:transparent;border:1px dashed var(--rule-sterk);
  border-radius:99px;padding:6px 13px;color:var(--soft);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center}
.opzij:hover{border-color:var(--accent);color:var(--accent)}

/* ============ profielpaneel ============ */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}
@media (max-width:820px){.layout{grid-template-columns:1fr}}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 22px;position:sticky;top:64px;animation:rise .5s .1s ease both}
@media (max-width:820px){.panel{position:static}}
.panel h2,.panel h3{margin:0 0 4px;font-family:var(--display);font-size:17px;font-weight:600}
.panel .sub{font-size:12.5px;color:var(--soft);margin:0 0 14px}
.axis{margin:10px 0}
.axis .lab{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px;color:var(--soft)}
.axis .lab b{color:var(--ink);font-weight:600}
/* Zie de toelichting bij .track hierboven: hier telt het zwaarder, want naast
   een .dtrack staat geen percentage — de lengte van de balk is alles. */
.dtrack{height:9px;background:var(--glow);border-radius:99px;position:relative;
  overflow:hidden;border:1px solid var(--rule-sterk);box-sizing:border-box}
.dtrack .bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 80%,var(--accent-2)),var(--accent));
  transition:width .8s cubic-bezier(.2,.8,.3,1)}
/* Middenstreep: was 1,10–1,36:1, nu 3,16 / 4,41 / 3,50. */
.dtrack .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
  background:color-mix(in srgb,var(--ink) 55%,var(--rule))}
.profline{font-size:13.5px;margin:10px 0;padding-left:12px;border-left:2.5px solid var(--accent-2)}
/* Op de feest-kaart staat dit label op de --glow-kant van de gradiënt,
   en daar haalde kaal --accent maar 4,03:1 in theme-v (eis 4,5). Zelfde
   ink-mix als .briefje .wie; in de andere thema's neemt de marge alleen
   toe (review 06-08 avond). */
.profline b{display:block;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 20%,var(--accent))}
.empty-profile{font-size:13px;color:var(--soft);font-style:italic}

/* ============ tussenstand / confetti ============ */
.confetti{position:relative;height:0}
.confetti i{position:absolute;top:-10px;font-style:normal;font-size:16px;opacity:0;
  animation:fall 2.6s ease-in forwards}
@keyframes fall{
  0%{transform:translateY(-10px) rotate(0deg);opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(46vh) rotate(320deg);opacity:0}}
.choices3{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.choices3 .opt{flex:1 1 140px;text-align:center}

/* ============ brief ============ */
.brief{font-family:var(--display);font-size:17px;line-height:1.75;margin-top:14px;
  white-space:pre-line;border-left:3px solid var(--accent-2);padding-left:18px}

/* ============ schrijfhulp ============ */
.btnrij{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
/* Tikdoel minstens 44px hoog: dit is onder meer de 'Volgende'-knop op de
   vraagpagina, de meest aangeraakte knop van de site (review 06-08). */
.btn.klein{padding:8px 16px;font-size:13.5px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.verzinstatus{font-size:12.5px;color:var(--soft);font-style:italic}

.veldlabel{display:block;font-size:13px;color:var(--soft);margin:13px 0 5px}

/* ============ mobiel: vraag past op één scherm ============ */
@media (max-width: 480px){
  header.site{padding:10px 0}
  .wrap{padding-left:12px;padding-right:12px}
  .card{padding:16px 14px}
  .progress{padding:6px 0}
  .spel{margin-bottom:8px}
  .chip{padding:5px 10px;font-size:12px}
  .illu{margin:0 0 8px}
  .illu svg{height:min(var(--illu-h,104px), 62px)}
  .illu-bij{font-size:12px;margin-top:3px}
  .kicker{font-size:10.5px}
  .qtext{font-size:17px;margin:6px 0 10px}
  .scene{font-size:13.5px;margin:4px 0 8px}
  .opts .opt{padding:8px 10px;font-size:12.5px}
  .aanmoediging{font-size:13.5px;margin-bottom:8px}
  .panel{margin-top:14px}
}

/* ============ blokfeest ============ */
.card.feest{text-align:center;background:linear-gradient(170deg,var(--card),var(--glow))}
.badge.groot{font-size:16px;padding:12px 22px;margin:6px 0 10px;
  animation:pop .7s cubic-bezier(.2,1.6,.4,1) both}
.badge.groot .em{font-size:22px}
.confetti.groot i{animation-duration:3.4s}

/* ============ beheertabs ============ */
.tabbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabbar button{font:inherit;font-size:14px;padding:9px 18px;border-radius:99px;
  border:1.5px solid var(--rule);background:var(--card);color:var(--soft);cursor:pointer}
.tabbar button.actief{border-color:var(--accent);color:var(--ink);font-weight:600}
[data-tab]{display:none}
[data-tab].actief{display:block}

/* ============ knoppen ============ */
.btn{display:inline-block;padding:12px 24px;border-radius:99px;border:1.5px solid var(--accent);
  background:var(--accent);color:#fff;font-size:15px;font-weight:600;text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--accent)}
.theme-m .btn,.theme-admin .btn{border-radius:var(--r-small)}

/* ============ login ============ */
.login-hero{max-width:430px;margin:6vh auto 0;text-align:center}
.login-hero .big{font-size:46px;margin-bottom:6px;animation:pulse 2.4s ease-in-out infinite;display:inline-block}
.login-card{max-width:430px;margin:18px auto 0;text-align:left}
.login-card label{display:block;font-size:13px;color:var(--soft);margin:12px 0 5px}
.login-card .btn{width:100%;margin-top:18px;text-align:center}
.error{background:color-mix(in srgb,var(--stop) 10%,var(--card));border:1px solid var(--stop);
  color:var(--stop);border-radius:var(--r-small);padding:10px 14px;font-size:14px;margin-top:14px}

/* ============ tabellen (beheer) ============ */
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
tr:hover td{background:var(--glow)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;
  background:var(--glow);color:var(--ink)}
.tag.ja{background:color-mix(in srgb,var(--sage) 18%,var(--card))}
.tag.grens{background:color-mix(in srgb,var(--stop) 16%,var(--card))}
.tag.lieverniet{background:color-mix(in srgb,var(--gray) 18%,var(--card))}
.tag.proberen{background:color-mix(in srgb,var(--amber) 18%,var(--card))}
.tag.voorjou{background:color-mix(in srgb,var(--lav) 18%,var(--card))}
.tag.prive{border:1px dashed var(--gray);background:transparent;color:var(--soft)}
details{margin:10px 0}
details summary{cursor:pointer;font-weight:600;padding:8px 0;
  min-height:44px;display:flex;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
/* Onder 480px is er binnen een kaart maar ~268px over, minder dan de
   minmax-ondergrens van 280px. Een grid-track krimpt niet onder die grens,
   dus stak de inhoud buiten de kaart — en body{overflow-x:clip} knipte dat
   weg in plaats van het scrollbaar te maken (review 06-08; dezelfde val als
   eerder bij het voortgangsbalkje). Op smal scherm dus één kolom. */
@media (max-width:480px){.grid2{grid-template-columns:1fr;gap:14px}}
.statrow{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 4px}
.stat{flex:1 1 130px;background:var(--glow);border-radius:var(--r-small);padding:12px 16px}
.stat .n{font-family:var(--display);font-size:26px;line-height:1.1}
.stat .l{font-size:12px;color:var(--soft)}
.warn{color:var(--stop);font-weight:600}

/* ============ spellen en extra's ============ */
.badgegrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.optkeuze{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.optkeuze input{position:absolute;opacity:0;pointer-events:none}
.optkeuze label{padding:8px 15px;border:1.5px solid var(--rule-sterk);border-radius:99px;
  background:var(--field);color:var(--ink);font-size:13.5px;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;
  transition:border-color .15s,background .15s}
.optkeuze label:hover{border-color:var(--accent)}
.optkeuze input:checked+label{border-color:var(--accent);background:var(--glow);font-weight:700}
.optkeuze input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.okmsg{background:color-mix(in srgb,var(--sage) 12%,var(--card));border:1px solid var(--sage);
  border-radius:var(--r-small);padding:10px 14px;font-size:14px;margin-bottom:14px}

/* ============ feedbackkanaal ============ */
/* Zwevende denk-mee-knop: een pil mét label in de accentkleur, zodat hij
   uitnodigt in plaats van wegvalt in de hoek (melding Jeroen 05-08). */
.feedback-knop{position:fixed;right:18px;bottom:18px;z-index:20;
  display:flex;align-items:center;gap:8px;padding:12px 18px;
  border-radius:999px;background:var(--accent);color:#fff;
  border:1.5px solid var(--accent);box-shadow:var(--shadow);
  font-size:17px;font-weight:600;text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.feedback-knop:hover{transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.18)}
.feedback-knop .fb-label{line-height:1}
.feedback-knop .dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;
  border-radius:50%;background:var(--amber, #d99a2b);border:2px solid var(--card)}
@media (max-width:700px){.feedback-knop{padding:10px 14px;font-size:15px;
  right:12px;bottom:12px}}
/* Globale weg terug, bovenaan elke subpagina. */
.terug-glob{display:inline-block;margin:2px 0 10px;color:var(--soft);
  text-decoration:none;font-size:15px}
.terug-glob:hover{color:var(--accent)}
/* Ontdekkingskaart: regels mogen wrappen (anders werd het voortgangsbalkje
   met 'werk eraan'-link op mobiel afgeknipt door body{overflow-x:clip}). */
.ontdekking .axis{flex-wrap:wrap}
.dtrack.mini{width:96px;display:inline-block;margin:0;max-width:40vw}
/* Aanraakvlakken (review 05-08): navigatie- en antwoordlinks waren 19-39px
   hoog. De letters blijven even groot; alleen het klikbare vlak groeit. */
/* Specificiteit moet die van `header.site nav button.navknop{padding:0}`
   overtreffen, anders bleef de uitlog-knop 19px hoog (verificatie 05-08).
   14px boven+onder + 19px regelhoogte ≈ 47px aanraakvlak. */
/* :not(.taalbol) — anders wint deze regel (0,2,3) van
   .taalbol{display:none} (0,1,0) en staat de taalknop ook op breed
   scherm zichtbaar, terwijl de lijst daar al uitgeklapt is
   (review 06-08 avond). */
header.site nav a,
header.site nav button.navknop,
header.site nav form.navform button:not(.taalbol){display:inline-block;padding:14px 2px}
@media (max-width:700px){
  .tabelscroll td a{display:inline-block;min-height:44px;padding:11px 0}
}
.navsamen{position:relative;white-space:nowrap}
.navdot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-left:4px;vertical-align:super}

/* ============ praatkaarten (hoofdstuk 2) ============ */
/* Zeven soorten, elk een kleurfamilie uit het thema. --pk kleurt rand, gloed,
   embleem en miniaturen; de rest van de kaart blijft in de kaartkleur. */
.soort-gunst{--pk:var(--amber)}
.soort-ontdek{--pk:var(--lav)}
.soort-verschil{--pk:var(--sage)}
.soort-parel{--pk:var(--accent)}
/* vraag-terug: verwant aan 'ontdek' maar warmer — lavendel richting amber.
   Oudere browsers zonder color-mix vallen terug op lavendel. */
.soort-vraagterug{--pk:var(--lav)}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .soort-vraagterug{--pk:color-mix(in srgb, var(--lav) 55%, var(--amber))}
}
/* trioverschil: verwant aan 'zacht verschil' maar iets warmer — salie
   richting amber. Oudere browsers zonder color-mix vallen terug op salie. */
.soort-trioverschil{--pk:var(--sage)}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .soort-trioverschil{--pk:color-mix(in srgb, var(--sage) 60%, var(--amber))}
}
.soort-seizoen{--pk:var(--gray)}
/* --accent-2 is een licht vlakkleur; als 45%-tekstmix haalde deze badge
   maar 4,07:1 (theme-v) en 4,15:1 (theme-n). Minder vlakkleur, meer inkt:
   5,11-6,19:1 in alle thema's (review 06-08). */
.soort-onbekend{--pk:var(--accent-2)}
.soort-onbekend .pk-soortnaam,.soort-onbekend .pk-mini-kop{
  color:color-mix(in srgb,var(--accent-2) 35%,var(--ink))}

/* ============ welkomsttour ============ */
.tour-dot{opacity:.3;font-size:11px}
.tour-dot.actief{opacity:1;color:var(--accent)}

.pk-toneel{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:22px}
.pk-scene{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.pk-scene.pk-weg{display:none}
.pk-scene.pk-uit .pk-kaart{animation:pk-strooi-uit .28s ease-in both}
.pk-scene.pk-in .pk-kaart{animation:pk-strooi-in .5s cubic-bezier(.2,1.2,.35,1) both}
@keyframes pk-strooi-uit{to{opacity:0;transform:translate(26px,12px) rotate(6deg)}}
@keyframes pk-strooi-in{from{opacity:0;transform:translate(-14px,-20px) rotate(-5deg) scale(.96)}
  to{opacity:1;transform:none}}

/* De kaart zelf: echte speelkaartverhouding 5:7, 3D-flip om de y-as. */
.pk-kaart{width:min(100%,340px);aspect-ratio:5/7;perspective:1400px;cursor:pointer;
  outline-offset:4px;border-radius:calc(var(--r-small) + 6px)}
.pk-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.35,.1,.25,1)}
.pk-kaart.is-om .pk-inner{transform:rotateY(180deg)}
.pk-kaart.pk-direct .pk-inner{transition:none}
.pk-vlak{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:calc(var(--r-small) + 6px);
  /* Mengen met --ink in plaats van --rule: 1,75 -> 4,78 (amber) en
     1,86 -> 5,36 (gray). De mini-kaartjes staan dicht op elkaar en de
     rand is het enige dat ze scheidt (review 07-08). */
  border:1.5px solid color-mix(in srgb,var(--pk,var(--accent)) 55%,var(--ink));
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;
  padding:18px 18px 14px;overflow:hidden}
.pk-front{transform:rotateY(180deg);text-align:center;justify-content:flex-start;
  gap:6px;overflow-y:auto;
  background:
    radial-gradient(120% 90% at 50% -20%,color-mix(in srgb,var(--pk,var(--accent)) 14%,transparent),transparent 60%),
    radial-gradient(140% 100% at 50% 120%,color-mix(in srgb,var(--pk,var(--accent)) 9%,transparent),transparent 55%),
    var(--card)}
.pk-front .illu{margin:2px 0 4px;color:color-mix(in srgb,var(--pk,var(--accent)) 75%,var(--ink));flex:0 0 auto}
.pk-soortnaam{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  /* 45% i.p.v. 70%: bij een lichte --pk (accent-2, amber) haalde het
     label anders geen 4,5:1 op de kaart (review 05-08). */
  color:color-mix(in srgb,var(--pk,var(--accent)) 45%,var(--ink))}
.pk-vraag{font-family:var(--display);font-size:clamp(16.5px,2.6vw,20px);line-height:1.42;
  margin:2px 0 auto;max-width:34ch}
.pk-voet{font-size:12.5px;color:var(--soft);margin:10px 0 0;font-variant-numeric:tabular-nums}
.pk-hoek{position:absolute;font-size:13px;opacity:.55;pointer-events:none}
.pk-hoek-lb{left:10px;top:8px}
.pk-hoek-ro{right:10px;bottom:8px;transform:rotate(180deg)}
.pk-beiden{margin-top:6px}

/* De rug: hartlijn-patroon in zuivere CSS plus het monogram. */
.pk-rug{justify-content:center;
  background:
    repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 9%,transparent) 0 2px,transparent 2px 14px),
    repeating-linear-gradient(-45deg,color-mix(in srgb,var(--accent) 9%,transparent) 0 2px,transparent 2px 14px),
    linear-gradient(160deg,var(--glow),var(--card) 70%)}
.pk-rug-kader{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;width:78%;height:84%;border:1.5px solid color-mix(in srgb,var(--accent) 40%,var(--rule));
  border-radius:var(--r-small);outline:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  outline-offset:5px;background:color-mix(in srgb,var(--card) 82%,transparent)}
.pk-monogram{font-family:var(--display);font-size:44px;color:var(--accent);letter-spacing:.04em}
.pk-hartlijn{width:64%;height:14px;
  background:radial-gradient(circle at 6px 5px,var(--accent-2) 3px,transparent 3.5px) 0 0/16px 14px repeat-x;
  -webkit-mask:linear-gradient(90deg,transparent,#000 20% 80%,transparent);
  mask:linear-gradient(90deg,transparent,#000 20% 80%,transparent)}
.pk-rug-sub{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}

/* Zonder JavaScript geen flip: de voorkant ligt dan gewoon open (de rug is
   pas zichtbaar als het script de pk-js-klasse zet). */
html:not(.pk-js) .pk-rug{display:none}
html:not(.pk-js) .pk-front{transform:none}
html:not(.pk-js) .pk-scene.pk-weg{display:flex}

.pk-acties{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.pk-voortgang,.pk-toets{margin:0;text-align:center}
.pk-toets{font-size:11.5px;opacity:.75}
.pk-slot{margin:0;text-align:center}

/* Planken: miniaturen in de soortkleur, klikbaar voor groot. */
.pk-plank{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin-top:12px}
.pk-mini{font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;
  gap:5px;padding:10px 12px;border-radius:var(--r-small);color:var(--ink);
  border:1.5px solid color-mix(in srgb,var(--pk,var(--accent)) 55%,var(--ink));
  background:linear-gradient(165deg,color-mix(in srgb,var(--pk,var(--accent)) 10%,var(--card)),var(--card) 75%);
  transition:transform .15s,box-shadow .15s}
.pk-mini:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pk-mini-kop{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  /* 45% i.p.v. 70%: bij een lichte --pk (accent-2, amber) haalde het
     label anders geen 4,5:1 op de kaart (review 05-08). */
  color:color-mix(in srgb,var(--pk,var(--accent)) 45%,var(--ink))}
.pk-mini-kop i{font-style:normal}
.pk-mini-tekst{font-size:12.5px;line-height:1.4;display:-webkit-box;
  -webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pk-mini-voet{font-size:11px;color:var(--soft);margin-top:auto}
.pk-mini-beiden{box-shadow:0 0 0 2px color-mix(in srgb,var(--pk,var(--accent)) 30%,transparent)}
.pk-leeg{font-size:13.5px;color:var(--soft);font-style:italic;margin:10px 0 0}

/* Miniatuur groot: dezelfde kaartstijl in een dialoog. */
.pk-dialoog{border:0;padding:0;background:transparent;max-width:min(92vw,380px);width:100%}
.pk-dialoog::backdrop{background:rgba(30,15,25,.45);backdrop-filter:blur(2px)}
.pk-dialoog-kaart{position:static;aspect-ratio:auto;min-height:0;text-align:center;
  gap:10px;padding:26px 22px 18px;overflow:visible}
.pk-dialoog-kaart .pk-vraag{margin:4px 0 6px}

/* Telefoon (≤700px). Aannames, narekenbaar: de wrap laat 12px per zijde
   (zie boven), dus de kaart krijgt hoogstens 100vw−24px breedte. Op het
   smalste gangbare scherm (320px) is dat 296px; verhouding 5:7 geeft dan
   ±414px hoogte. Compacte kop (±48px), knoppenrij (±44px), voortgang (±22px)
   en marges (±40px) samen ±154px: totaal ±568px, en dat past op elke
   viewport vanaf 568px logische hoogte (iPhone SE 1e gen. en alles daarna).
   Op bredere telefoons begrenst 320px kaartbreedte de hoogte tot 448px. */
@media (max-width:700px){
  .pk-intro{padding:12px 14px}
  .pk-intro .lede{font-size:13.5px}
  .pk-intro h1{margin:4px 0 2px}
  .pk-kaart{width:min(100%,320px)}
  .pk-vlak{padding:14px 14px 10px}
  .pk-vraag{font-size:16px;max-width:none}
  .pk-monogram{font-size:36px}
  .pk-toets{display:none} /* geen toetsenbord op een telefoon */
  .pk-plank{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}

/* Minder beweging gevraagd: geen 3D-draai en geen strooi, maar een directe
   wissel (de globale reduced-motion-regel hierboven zet alle animaties en
   transities al uit; dit haalt ook de transform-flip zelf weg). */
@media (prefers-reduced-motion:reduce){
  .pk-inner{transform-style:flat}
  .pk-kaart.is-om .pk-inner{transform:none}
  .pk-vlak{backface-visibility:visible;-webkit-backface-visibility:visible}
  .pk-front{transform:none;opacity:0;pointer-events:none}
  .pk-kaart.is-om .pk-front{opacity:1;pointer-events:auto}
  .pk-kaart.is-om .pk-rug{opacity:0}
  /* zonder JavaScript is er geen flip: voorkant altijd tonen */
  html:not(.pk-js) .pk-front{opacity:1;pointer-events:auto}
}

/* ============ briefjes ============ */
.briefjes{display:flex;flex-direction:column;gap:8px;margin-top:12px;
  max-height:340px;overflow-y:auto;padding-right:4px}
.briefje{display:flex;flex-direction:column;max-width:78%;padding:8px 13px;
  border-radius:var(--r-small);font-size:14px;background:var(--glow)}
.briefje.van-mij{align-self:flex-end;border:1px solid var(--accent-2);
  background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.briefje.van-ander{align-self:flex-start;border:1px solid var(--rule)}
/* 11px vet haalde als kaal --accent maar 4,03:1 op --glow in theme-v (eis
   4,5:1). Een vleugje inkt erdoor tilt alle vier de thema's over de grens
   (v 4,73 / m 6,51 / n 5,78 / admin 6,99) zonder kleurindruk te verliezen. */
.briefje .wie{font-size:11px;font-weight:700;
  color:color-mix(in srgb,var(--ink) 18%,var(--accent))}
.briefje .tekst{white-space:pre-line}
.briefje .tijd{font-size:11px;color:var(--soft);margin-top:2px}

/* ============ waar sta ik ============ */
/* Eén groot getal als anker van de pagina: wat je hebt opgebouwd, niet wat
   er nog moet. De teller loopt op vanaf nul (script in de template). */
.wsi-groot{text-align:center;margin:22px 0 6px}
.wsi-getal{display:block;font-family:var(--display);
  font-size:clamp(48px,14vw,88px);line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
.wsi-bij{display:block;font-size:15px;color:var(--soft);margin-top:4px}

/* ============ ons gesprek ============ */
/* De vraag staat voorop; de antwoorden zitten achter een openklapper, zodat
   de kaart niet als scorekaart leest maar als gespreksonderwerp. */
.og-kaart{border-left:3px solid var(--accent-2)}
/* Tikdoel: als samenvouwknop moet dit 44px halen (gemeten 37px,
   review 06-08 avond). */
.og-open summary{font-size:13.5px;color:var(--soft);font-weight:600;
  min-height:44px;display:flex;align-items:center}
.og-open[open] summary{margin-bottom:2px}

/* ============ dichtheidsmeter matchpool ============ */
.dichtheid{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--r-small);background:var(--glow);
  margin:12px 0}
.dichtheid .n{font-family:var(--display);font-size:26px;line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums}
.dichtheid .l{font-size:13.5px;color:var(--soft)}

/* ============ deelkiezer op het antwoordenoverzicht ============ */
/* De hele lijst ineens was 180 KB HTML; nu één deel tegelijk. Gewone links,
   dus ook bruikbaar zonder JavaScript. */
.deelkiezer{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.deelknop{display:inline-flex;flex-direction:column;align-items:center;
  min-height:44px;justify-content:center;padding:8px 16px;border-radius:99px;
  border:1.5px solid var(--rule-sterk);background:var(--field);
  color:var(--ink);text-decoration:none;font-size:13.5px;line-height:1.2}
.deelknop small{color:var(--soft);font-size:11.5px;font-variant-numeric:tabular-nums}
.deelknop:hover{border-color:var(--accent)}
.deelknop.actief{border-color:var(--accent);border-width:3px;font-weight:700;
  background:var(--glow)}
/* Telcijfer op een actief tabblad: 4,03:1 in theme-v, eis 4,5. Zelfde
   recept als de eerder herstelde .profline b -> 4,81:1 (review 07-08). */
.deelknop.actief small{color:color-mix(in srgb,var(--ink) 20%,var(--accent))}

/* Aangekondigd onderhoud: opvallend genoeg om te lezen, rustig genoeg om
   niet te verontrusten. */
.banner.onderhoud{display:flex;gap:10px;align-items:baseline;
  background:color-mix(in srgb,var(--amber) 18%,var(--card));
  border:1px solid color-mix(in srgb,var(--amber) 45%,var(--card))}

/* ============ spelgevoel ============ */
/* Ingetogen bevestiging, geen kermis: het product is warm en rustig, dus de
   interactie mag de vraag nooit overstemmen. Alles hieronder valt vanzelf
   stil bij prefers-reduced-motion (de globale regel hierboven zet elke
   animatie en transitie uit). */

/* De gekozen knop bevestigt zichzelf met één korte klop. */
.opt.net-gekozen{animation:klop .32s ease-out}
@keyframes klop{
  0%{transform:scale(1)}
  45%{transform:scale(1.035)}
  100%{transform:scale(1)}}

/* Bijna aan het eind van een blok: de balk krijgt een warme gloed. Dat is
   precies het moment waarop doorgaan het meest oplevert. */
.progress.bijna .track{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.progress.bijna .track .bar-fill{animation:gloed 2.4s ease-in-out infinite}
@keyframes gloed{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}}

/* Het antwoord van de ander vouwt open in plaats van er ineens te staan. */
.ruil-open{animation:ontvouw .5s ease both}
@keyframes ontvouw{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}

/* Verzamelde badges reageren op aanraking: klein, maar het maakt de
   verzameling voelbaar. */
.badge{transition:transform .15s ease,box-shadow .15s ease}
.badge:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* De statblokken op 'waar sta ik' idem. */
.stat{transition:transform .15s ease}
.stat:hover{transform:translateY(-2px)}