/* ==================================================================
   De testengine van coachjan.be: vormgeving
   Gebruikt de kleuren van de pagina (--accent, --marine, ...) en valt
   terug op de merkkleuren als die er niet zijn. Mobiel eerst.
   ================================================================== */
.cjt{
  --cjt-accent:var(--accent,#C17F3A);
  --cjt-inkt:var(--inkt,#0E1F2E);
  --cjt-marine:var(--marine,#0E1F2E);
  --cjt-pagina:var(--pagina,#F7F3EE);
  --cjt-linnen:var(--licht,#EDE5D8);
  --cjt-bij:var(--bijtekst,#4A5A69);
  --cjt-bij-dk:var(--bijtekst-dk,#A8B3BE);
  --cjt-rand:var(--randje,#E0D7C9);
  --cjt-accent-tekst:var(--accent-diep,#87521C);
  --cjt-accent-dk:var(--accent-licht,#D9A066);
  /* De typekleur. De engine zet ze per type; zonder type is het de
     roestamber van de site. Ze is subtiel op de startpagina en duidelijker
     op de uitslagpagina, maar ze wordt nooit een vierde grond. */
  --cjt-type:var(--accent,#C17F3A);
  --cjt-type-licht:var(--licht,#EDE5D8);
}
/* De houder loopt van rand tot rand, zodat de stroken van de uitslag hun
   eigen grond kunnen dragen. De tekst zelf staat altijd in een wrap. */
.cjt{max-width:none;margin:0;padding:0}
.cjt-wrap{max-width:1000px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.cjt-wrap{padding:0 28px}}
/* De vraag blijft één smalle kolom: een antwoordknop van duizend pixels
   breed leest niet. De startpagina bestaat nu uit stroken, net als de
   uitslag, maar de tekst erin blijft smal. */
.cjt-vraag .cjt-wrap{max-width:760px}
.cjt-wrap--smal{max-width:820px}
.cjt-vraag,.cjt-poort{padding:28px 0 56px}
/* een kolom tussen twee stroken krijgt zijn eigen lucht */
.cjt-uitslag > .cjt-wrap{padding-top:clamp(34px,4.4vw,64px)}
.cjt-uitslag > .cjt-wrap:last-child{padding-bottom:56px}
@media (min-width:700px){
  .cjt-vraag,.cjt-poort{padding:56px 0 88px}
  .cjt-uitslag > .cjt-wrap:last-child{padding-bottom:88px}
}

.cjt-scherm{animation:cjt-in .25s ease both}
@keyframes cjt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cjt-scherm{animation:none}.cjt-antwoord{transition:none}}

/* Bij elke schermwissel krijgt de kop focus, zodat een schermlezer het nieuwe
   scherm voorleest. Die focus moet blijven, maar de zichtbare rand hoort er
   niet bij: die is voor wie met de tab-toets langs knoppen en velden gaat, en
   een kop is geen bedieningselement. De regel hieronder moet specifieker zijn
   dan `.cjt :focus-visible` verderop, anders wint die alsnog. */
.cjt h1,.cjt h2{outline:none}
.cjt h1[tabindex]:focus,.cjt h2[tabindex]:focus,
.cjt h1[tabindex]:focus-visible,.cjt h2[tabindex]:focus-visible{outline:none;box-shadow:none}
.cjt .label{margin-bottom:14px}
.cjt-titel{font-size:clamp(30px,7vw,46px);line-height:1.12;margin:0 0 .45em}
.cjt-intro{font-size:18.5px;max-width:34em}
.cjt-fijn{font-size:14.5px;color:var(--cjt-bij);max-width:36em;margin-top:1.4em}
.cjt-proef{display:inline-block;font-size:13px;background:#FFE9A8;border:1px dashed #C9A227;border-radius:6px;padding:4px 10px;margin-top:1em}

/* knoppen die eruitzien als een link */
.cjt-link{background:none;border:0;padding:0 0 1px;margin:0;font:inherit;color:var(--cjt-bij);cursor:pointer;
  border-bottom:1.5px solid var(--cjt-accent);text-align:left}
.cjt-link:hover{color:var(--cjt-inkt)}
.cjt .knop[disabled]{opacity:.65;cursor:progress;transform:none}
.cjt :focus-visible{outline:2.5px solid var(--cjt-accent);outline-offset:3px}

/* ---- start ---- */
.cjt-startactie{margin:26px 0 8px}
.cjt-eerder{margin-top:18px;color:var(--cjt-bij)}

/* ---- vraag ---- */
.cjt-voortgang{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;color:var(--cjt-bij);min-height:44px}
.cjt-terug{background:none;border:0;font:inherit;color:var(--cjt-bij);cursor:pointer;padding:10px 10px 10px 0;min-height:44px}
.cjt-terug:hover{color:var(--cjt-inkt)}
.cjt-teller{font-variant-numeric:tabular-nums}
.cjt-balk{height:3px;background:var(--cjt-rand);border-radius:3px;overflow:hidden;margin:4px 0 30px}
.cjt-balk span{display:block;height:100%;background:var(--cjt-accent);transition:width .3s ease}
.cjt-vraagtekst{font-size:clamp(23px,5.4vw,32px);line-height:1.25;font-weight:500;margin:0 0 24px}
.cjt-antwoorden{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cjt-antwoord{display:block;width:100%;text-align:left;font:inherit;font-size:17px;line-height:1.45;color:var(--cjt-inkt);
  background:#fff;border:1.5px solid var(--cjt-rand);border-radius:14px;padding:17px 20px;min-height:64px;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.cjt-antwoord:hover{border-color:var(--cjt-accent)}}
.cjt-antwoord:active{transform:scale(.99)}
.cjt-antwoord.is-gekozen{border-color:var(--cjt-accent);background:#FBF1E4;box-shadow:inset 4px 0 0 var(--cjt-accent)}

/* ---- uitslag ---- */
.cjt-uitslagkop{margin-bottom:34px}
.cjt-gedachte{margin:0 0 18px;padding:0}
.cjt-gedachte p{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:clamp(22px,5vw,28px);line-height:1.35;color:var(--cjt-accent-tekst);margin:0}
.cjt-tweede{font-weight:400;border-left:2px solid var(--cjt-accent);padding-left:14px}

.cjt-mail{background:var(--cjt-linnen);border-radius:18px;padding:24px 20px;margin:0 0 44px}
@media (min-width:700px){.cjt-mail{padding:32px 34px}}
.cjt-mailtitel{font-size:22px;margin-bottom:.4em}
.cjt-mail.is-klaar{background:transparent;border:1.5px solid var(--cjt-rand)}
.cjt-mail .cjt-fijn{color:#4A5A69;margin-top:1em}
.cjt-mail .cjt-link{color:#3F4E5C}
.cjt-form{display:grid;gap:14px;margin-top:8px}
@media (min-width:700px){.cjt-form{grid-template-columns:1fr 1fr}.cjt-form .knop,.cjt-form .cjt-fout,.cjt-form .cjt-fijn{grid-column:1/-1;justify-self:start}}
.cjt-veld label{display:block;font-size:14.5px;font-weight:400;margin-bottom:4px}
.cjt-veld input{width:100%;font:inherit;font-size:17px;color:var(--cjt-inkt);background:#fff;border:1.5px solid var(--cjt-rand);border-radius:10px;padding:12px 14px;min-height:50px}
.cjt-veld input:focus{border-color:var(--cjt-accent);outline:none;box-shadow:0 0 0 3px rgba(193,127,58,.25)}
.cjt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cjt-fout{color:#8A2E1C;font-weight:400;margin:0;min-height:0}
.cjt-fout:empty{display:none}

.cjt-profiel{margin-bottom:34px}
.cjt-profiel p{max-width:34em}
.cjt-blokken{display:grid;gap:18px;margin-bottom:44px}
@media (min-width:700px){.cjt-blokken{grid-template-columns:1fr 1fr}.cjt-blok--breed,.cjt-blok--donker{grid-column:1/-1}}
.cjt-blok{background:#fff;border:1px solid var(--cjt-rand);border-radius:16px;padding:22px 20px}
.cjt-blok p{margin-bottom:.7em}
.cjt-blokkop{font-size:19px;margin-bottom:.55em;padding-bottom:.45em;border-bottom:2px solid var(--cjt-accent);display:inline-block}
.cjt-lijst{margin:0;padding:0;list-style:none}
.cjt-lijst li{position:relative;padding-left:20px;margin:0 0 .35em}
.cjt-lijst li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--cjt-accent)}
.cjt-blok--donker{background:var(--cjt-marine);border-color:var(--cjt-marine);color:#fff}
.cjt-blok--donker .cjt-blokkop{border-color:var(--cjt-accent)}
.cjt-blok--donker p{color:#E6EAEE}

.cjt-cta{background:var(--cjt-linnen);border-radius:18px;padding:26px 20px;margin-bottom:40px}
@media (min-width:700px){.cjt-cta{padding:34px}}
.cjt-ctatitel{font-size:24px}
.cjt-ctaactie{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.cjt-cta .cjt-fijn{color:#4A5A69;margin-top:1em}
.cjt-cta .label{color:#4A5A69}

.cjt-andere{border-top:1px solid var(--cjt-rand);padding-top:24px;margin-bottom:22px}
.cjt-anderetitel{font-weight:400;margin-bottom:.5em}
.cjt-andere ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.cjt-andere .cjt-link{padding:8px 0 1px}
.cjt-slot{padding-top:6px}

/* De verdeling staat verderop, in de cijfervorm van de home. */

/* de zin die de kerngedachte inleidt, boven het citaat */
.cjt-gedachte-in{margin-bottom:.35em;color:var(--cjt-bij)}

/* ---- de rubrieken van een profiel ----
   De eerste rubriek staat in de kop, de rest eronder. */
.cjt-reflex{margin-top:26px;padding-left:16px;border-left:3px solid var(--cjt-accent)}
@media (min-width:700px){.cjt-reflex{padding-left:22px}}
.cjt-reflexkop{font-size:19px;line-height:1.3;margin:0 0 .4em}
.cjt-reflextekst{max-width:34em;margin-bottom:.7em}
.cjt-reflex .cjt-gedachte{margin-bottom:0}

/* ---- de stroken ----
   Elke rubriek (of een paar rubrieken naast elkaar) is een strook over de
   volle breedte met een eigen grond. Dat geeft de pagina ritme zonder dat ze
   als een opsomming van kaartjes leest. */
.cjt-strook{padding:clamp(40px,6vw,72px) 0}
.cjt-strook--pagina{background:var(--cjt-pagina)}
.cjt-strook--linnen{background:var(--cjt-linnen)}
.cjt-strook--marine{background:var(--cjt-marine);color:#fff}
.cjt-strook--marine p{color:#E6EAEE}
.cjt-strook--marine .cjt-sectiekop{color:#fff;border-top-color:var(--cjt-accent-dk)}
.cjt-strook--marine .cjt-hoofdstuktitel{color:#fff}
.cjt-strook--marine .cjt-nadruk{color:var(--cjt-accent-dk);border-left-color:var(--cjt-accent-dk)}
.cjt-strook--marine .cjt-punten li::before{background:var(--cjt-accent-dk)}

/* ---- twee rubrieken naast elkaar ----
   Waar de inhoud een paar vormt, zet dat de twee koppen tegenover elkaar in
   plaats van achter elkaar. Op de telefoon blijven ze onder elkaar. */
.cjt-rij{display:grid;gap:clamp(26px,4vw,44px)}
.cjt-rij > *{min-width:0}
@media (min-width:860px){
  .cjt-rij--duo{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(30px,4vw,60px)}
  .cjt-rij--duo .cjt-sectie:nth-child(2) .cjt-sectiekop{border-top-color:var(--cjt-marine)}
  .cjt-strook--marine .cjt-rij--duo .cjt-sectie:nth-child(2) .cjt-sectiekop{border-top-color:var(--cjt-accent-dk)}
}
.cjt-sectie{background:none;border:0;border-radius:0;padding:0}
/* Een losse rubriekkop is gewoon een kop met de punt erachter, zoals overal op
   de site. De streep erboven hoort bij twee kolommen naast elkaar: dat is de
   vorm van de drie stappen op de home. */
.cjt-sectiekop{margin:0 0 .6em;font-size:clamp(21px,2.5vw,27px);line-height:1.2;max-width:none}
@media (min-width:860px){
  .cjt-rij--duo .cjt-sectiekop{border-top:2px solid var(--cjt-accent);padding-top:18px}
}
.cjt-sectie p{max-width:34em;margin-bottom:.8em}
.cjt-sectie p:last-child{margin-bottom:0}

/* ---- de hoofdstukopening ----
   Zeven rubrieken met hetzelfde gewicht lezen als een trap zonder overlopen.
   Vandaar een opening per deel, op dezelfde grond als de eerste strook zodat
   er geen streep bijkomt. Genummerd zoals de site het doet: 01, klein, met
   letterafstand, in de accentkleur. Geen groot cijfer, dat is de taal van
   sterkernadeval.be. */
.cjt-hoofdstuk{margin:0 0 clamp(26px,3.2vw,40px);
  border-top:2px solid var(--cjt-accent);padding-top:18px}
.cjt-hoofdstuknr{font-size:14px;font-weight:500;letter-spacing:2.6px;
  color:var(--cjt-accent-tekst);margin:0 0 8px}
.cjt-hoofdstuktitel{margin:0;max-width:none;font-weight:600;color:var(--cjt-inkt);
  font-size:clamp(26px,3.2vw,40px);line-height:1.14;letter-spacing:-.3px}
.cjt-strook--marine .cjt-hoofdstuknr{color:var(--cjt-accent-dk)}

/* ---- de zin die uit de tekst springt ----
   Doet in een rubriek zonder beeld hetzelfde werk als een plaatje: groter dan
   de lopende tekst, buiten de leeskolom, met een streep in de accentkleur. */
.cjt-nadruk{margin:clamp(22px,2.6vw,32px) 0;padding-left:clamp(16px,2vw,24px);
  border-left:3px solid var(--cjt-accent);font-size:clamp(19px,2.1vw,24px);line-height:1.42;
  color:var(--cjt-inkt);max-width:24em;font-weight:400}

.cjt-punten{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cjt-punten li{position:relative;padding-left:20px;max-width:34em}
.cjt-punten li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--cjt-accent)}
.cjt-puntkop{font-weight:500}

/* De grond van de strook doet het werk dat stijl 'donker' vroeger deed. */
.cjt-sectie--proberen .cjt-gedachte--klein{margin:.2em 0 .9em}
.cjt-gedachte--klein p{font-size:clamp(19px,3.8vw,23px)}

/* ---- de eerste strook: de kop naast de tekening ----
   Zoals de kop van de home: tekst links, beeld rechts, en onder elkaar op
   een telefoon. De vier tekeningen zijn niet even hoog van vorm (de Rebel is
   breed en laag, de Doordenker bijna vierkant), dus er staat ook een
   hoogtelimiet op. De verhouding komt als --tek-ratio uit de engine. */
.cjt-hero{padding:clamp(26px,3.6vw,52px) 0 clamp(18px,2.6vw,36px)}
.cjt-hero-duo{display:grid;gap:clamp(18px,3vw,44px);align-items:center}
@media (min-width:900px){.cjt-hero-duo{grid-template-columns:1fr 1.18fr}}
.cjt-hero-duo > *{min-width:0}
.cjt-hero .cjt-uitslagkop{margin-bottom:0}
.cjt-tekening{--tek-hoog:340px;margin:0}
@media (max-width:900px){.cjt-tekening{--tek-hoog:260px;margin-top:6px}}
.cjt-tekening img{display:block;margin:0 auto;height:auto;width:100%;
  max-width:calc(var(--tek-ratio,2.4) * var(--tek-hoog))}

/* ---- de citaten: wat anderen zeggen ----
   De vorm van de zinnen op de home: linnen kaart, geen rand, het citaat in
   Playfair cursief en eronder één regel in bijtekst. */
.cjt-zinnen{display:grid;gap:16px;margin:4px 0 clamp(22px,2.6vw,32px)}
@media (min-width:700px){.cjt-zinnen{grid-template-columns:1fr 1fr;gap:18px}}
.cjt-zin{margin:0;background:var(--cjt-linnen);border-radius:20px;
  padding:24px 24px 20px;display:flex;flex-direction:column;gap:12px}
.cjt-zin blockquote{margin:0;font-family:"Playfair Display",Georgia,serif;font-style:italic;
  font-weight:400;font-size:clamp(20px,2vw,25px);line-height:1.28;color:var(--cjt-inkt)}
.cjt-zin figcaption{font-size:15px;line-height:1.45;color:var(--cjt-bij);margin-top:auto}
.cjt-strook--linnen .cjt-zin{background:var(--cjt-pagina)}
.cjt-strook--marine .cjt-zin{background:rgba(255,255,255,.07)}
.cjt-strook--marine .cjt-zin blockquote{color:#fff}
.cjt-strook--marine .cjt-zin figcaption{color:var(--cjt-bij-dk)}

/* ---- de vier kaarten, zoals het aanbod op de home ---- */
.cjt-kaarten{display:grid;gap:18px;margin-top:6px}
@media (min-width:760px){.cjt-kaarten{grid-template-columns:repeat(3,1fr)}}
.cjt-kaart{background:var(--cjt-pagina);border:1px solid var(--cjt-rand);border-radius:20px;padding:26px 24px}
.cjt-kaart h3{font-size:20px;margin:0 0 10px;line-height:1.25}
.cjt-kaart p{font-size:16px;max-width:none;margin:0}
.cjt-strook--pagina .cjt-kaart{background:#fff}
.cjt-strook--marine .cjt-kaart{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}

/* ---- de vier scores, in de cijfervorm van de home. Aantallen, geen procenten. ---- */
.cjt-cijfers{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 26px;margin-top:4px}
@media (min-width:700px){.cjt-cijfers{grid-template-columns:repeat(4,1fr)}}
.cjt-cijfer{border-left:2px solid var(--cjt-rand);padding-left:18px}
.cjt-cijfer.is-jouw{border-left-color:var(--cjt-accent)}
.cjt-cijfer b{display:block;font-size:clamp(30px,3.4vw,42px);font-weight:600;line-height:1.1;
  color:var(--cjt-bij);font-variant-numeric:tabular-nums}
.cjt-cijfer.is-jouw b{color:var(--cjt-inkt)}
.cjt-cijfer span{font-size:15.5px;color:var(--cjt-bij)}
.cjt-cijfer.is-jouw span{color:var(--cjt-inkt)}
.cjt-verdeling .cjt-fijn{margin-top:1.6em}

/* ---- de uitnodiging op een los profiel ----
   Wie hier binnenkomt via een doorgestuurde link, heeft de test niet gedaan. */
.cjt-uitnodiging .cjt-startactie{margin:18px 0 0}
.cjt-uitnodigingkop{font-size:clamp(23px,2.8vw,31px);margin:0 0 .45em}
.cjt-loseigen{margin-top:1.2em;color:var(--cjt-bij)}

/* ---- de doorstuurstrook ----
   Links waarom, rechts de kaart met de zin er zichtbaar in. */
.cjt-deel-duo{display:grid;gap:clamp(22px,3vw,44px);align-items:center}
@media (min-width:860px){.cjt-deel-duo{grid-template-columns:1fr 1fr}}
.cjt-deeltitel{font-size:clamp(22px,2.6vw,29px);margin:0 0 .45em}
.cjt-deelkaart{background:var(--cjt-pagina);border:1px solid var(--cjt-rand);
  border-radius:20px;padding:24px 22px}
@media (min-width:700px){.cjt-deelkaart{padding:28px 28px 24px}}
.cjt-deelzin{margin:0 0 8px;font-size:18px;line-height:1.6;color:var(--cjt-inkt);max-width:none}
.cjt-deeladres{margin:0 0 20px;font-size:15px;color:var(--cjt-bij);max-width:none;word-break:break-word}
.cjt-deelrij{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cjt-deelknop{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:15.5px;
  color:var(--cjt-inkt);background:#fff;border:1.5px solid var(--cjt-rand);border-radius:10px;
  padding:11px 16px;min-height:44px;cursor:pointer;text-decoration:none;
  transition:border-color .15s ease}
.cjt-deelknop:hover{border-color:var(--cjt-accent)}
.cjt-deelknop--stil{background:transparent;color:var(--cjt-bij)}
.cjt-deelmeer{margin:1.1em 0 0;display:flex;flex-wrap:wrap;gap:8px 22px}
.cjt-deel .cjt-fijn{margin-top:.7em}

/* ---- Jan naast het formulier ---- */
.cjt-afzender{display:flex;gap:18px;align-items:center;margin:clamp(24px,3vw,32px) 0 0;
  padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--cjt-rand)}
.cjt-afzenderfoto{flex:none;width:86px;height:86px;border-radius:50%;object-fit:cover}
.cjt-afzender p{margin:0;font-size:16px;line-height:1.6;max-width:26em;color:var(--cjt-bij)}

/* ---- de wegwijzer, onderaan de kop ---- */
.cjt-wegwijzer{margin:clamp(24px,3vw,32px) 0 0;padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--cjt-rand);font-size:16px;line-height:1.65;
  color:var(--cjt-bij);max-width:36em}

/* ==================================================================
   De herwerkte doorloop, 18 september 2026
   START verleiden  ->  TEST rust  ->  POORT keuze  ->  ONTHULLING
   ================================================================== */

/* ---- de startpagina ----
   Drie stroken: de hero met de belofte, de vier types op linnen, en de
   glimp van de uitslag. Daaronder het stille slot. */
.cjt-starthero{padding:clamp(30px,4.4vw,64px) 0 clamp(32px,4.4vw,60px)}
.cjt-start .cjt-titel{margin-bottom:.34em}
.cjt-lead{font-size:clamp(20px,2.6vw,26px);line-height:1.34;font-weight:400;
  color:var(--cjt-inkt);max-width:19em;margin-bottom:.45em}
.cjt-startvraag{font-family:"Playfair Display",Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.2vw,24px);line-height:1.34;color:var(--cjt-accent-tekst);
  max-width:22em;margin-bottom:1.1em}
.cjt-startactie{margin:26px 0 8px}
.cjt-startfijn{font-size:15px;color:var(--cjt-bij);margin:16px 0 0;max-width:none}
.cjt-pijl{white-space:nowrap}

/* ---- de vier types ----
   Namen en tekeningen, geen uitleg. De typekleur zit in de stip en in de
   lichte schijf achter de tekening, meer niet. */
.cjt-types{padding:clamp(34px,4.4vw,58px) 0}
.cjt-typelijst{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,34px)}
@media (min-width:780px){.cjt-typelijst{grid-template-columns:repeat(4,1fr)}}
.cjt-typekaart{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.cjt-typebeeld{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100px}
@media (min-width:780px){.cjt-typebeeld{height:126px}}
/* Geen gekleurde schijf achter de tekening: elke tekening dráágt al een
   zandkleurige cirkel, en een tweede cirkel ernaast leest als een fout.
   Op de startpagina is de stip naast de naam de hele kleur. */
.cjt-typebeeld img{position:relative;width:100%;height:auto;max-height:100%;object-fit:contain}
.cjt-typenaam{margin:0;max-width:none;font-size:16.5px;font-weight:500;color:var(--cjt-inkt);
  display:flex;align-items:center;justify-content:center;gap:8px}
@media (min-width:780px){.cjt-typenaam{font-size:18px}}
.cjt-typestip{flex:none;width:9px;height:9px;border-radius:50%;background:var(--cjt-type)}

/* ---- de glimp van de uitslag ----
   Dezelfde kaartjes als bij "wat anderen soms lastig aan jou vinden". Sinds
   23 september alle drie volledig zichtbaar: het afgekapte derde kaartje
   las op desktop als een fout. */
.cjt-teaserstrook{padding:clamp(34px,4.6vw,62px) 0 clamp(18px,2.4vw,30px)}
.cjt-teasertitel{font-size:clamp(21px,2.6vw,29px);margin:0 0 .7em}
.cjt-teasers{display:grid;gap:16px;grid-template-columns:1fr;margin-top:4px}
@media (min-width:760px){.cjt-teasers{grid-template-columns:repeat(3,1fr);gap:18px}}
.cjt-teaser{min-width:0}
.cjt-teaserstrook .cjt-fijn{margin-top:1.4em}

/* ---- het stille slot van de startpagina ----
   "Je deed deze test al" en de disclaimer horen niet in de conversiezone. */
.cjt-startslot{padding:clamp(24px,3vw,36px) 0 clamp(44px,5.4vw,78px)}
.cjt-eerder--stil{margin:0 0 .9em;font-size:15.5px}
.cjt-eerder--stil .cjt-link{font-size:15.5px}
.cjt-startslot .cjt-fijn{margin-top:0}

/* ---- de test zelf: meer lucht, geen sturing ---- */
.cjt-vraagintro{font-size:15.5px;line-height:1.6;color:var(--cjt-bij);max-width:34em;margin:0 0 24px}
.cjt-antwoorden{gap:13px}
.cjt-antwoord{padding:19px 22px;min-height:68px}

/* ---- de poort ----
   Het spannende moment, en tegelijk een eerlijke keuze. De uitweg staat
   in gewone lettergrootte onder de knop, met een streepje erboven. */
.cjt-poorttitel{font-size:clamp(29px,6.4vw,42px)}
.cjt-mail--poort{margin:22px 0 0}
.cjt-vinkjes{list-style:none;margin:18px 0 6px;padding:0;display:grid;gap:9px}
.cjt-vinkjes li{display:flex;align-items:flex-start;gap:11px;font-size:16.5px;
  line-height:1.5;color:var(--cjt-inkt)}
.cjt-vink{flex:none;color:var(--cjt-accent-tekst);font-weight:600}
.cjt-overslaan{margin:20px 0 0;padding-top:17px;border-top:1px solid var(--cjt-rand)}
.cjt-overslaanknop{font-size:16.5px;line-height:1.5;color:var(--cjt-bij)}
.cjt-overslaanknop:hover{color:var(--cjt-inkt)}
.cjt-mail--poort .cjt-afzender{border-top-color:rgba(14,31,46,.14)}

/* ---- de tweede kans onderaan de basisuitslag ----
   Dezelfde vraag als op de poort, nu met de namen van de rubrieken die
   nog te lezen vallen. De strook draagt de linnen grond, dus het blok
   zelf blijft vlak. */
.cjt-verdieping .cjt-mail{margin:0}
.cjt-mail--verdieping .cjt-mailtitel{font-size:clamp(22px,2.7vw,30px)}
.cjt-mail--verdieping .label{margin-bottom:12px}

/* ---- de regel na het doorgeven ---- */
.cjt-melding{padding:clamp(20px,2.6vw,30px) 0}
.cjt-meldingkop{font-size:20px;margin:0 0 .3em}
.cjt-melding p{margin:0;color:var(--cjt-bij);max-width:40em}

/* ---- de onthulling ----
   Label, tekening, naam, eerste reflex. Gecentreerd, want dit is het
   moment waarvoor iemand twaalf vragen beantwoord heeft. Daarna gaat de
   pagina terug naar links uitgelijnd. */
.cjt-onthul{padding:clamp(30px,4.4vw,62px) 0 clamp(26px,3.4vw,48px);text-align:center}
.cjt-onthulwrap{max-width:840px}
.cjt-onthul p{margin-left:auto;margin-right:auto}
/* Het labeltje van de site is een streepje plus tekst in een flexrij; in
   een gecentreerde strook moet die rij dus ook gecentreerd staan. */
.cjt-onthullabel{color:var(--cjt-type);margin-bottom:16px;justify-content:center}
.cjt-onthullabel::before{background:var(--cjt-type)}
.cjt-tekening--groot{--tek-hoog:210px;position:relative;margin:0 auto 4px}
@media (min-width:700px){.cjt-tekening--groot{--tek-hoog:290px}}
/* Een brede, zachte wolk in de typekleur achter de hele tekening. Ze ligt
   ruimer dan de zandkleurige cirkel van de tekening zelf, dus de twee
   botsen niet: de ene is de tekening, de andere is de kleur van je type. */
.cjt-tekening--groot::before{content:"";position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);width:min(620px,86vw);height:min(300px,52vw);
  border-radius:50%;background:var(--cjt-type-licht);opacity:.85;z-index:0;
  filter:blur(22px)}
.cjt-tekening--groot img{position:relative;z-index:1}
.cjt-onthulnaam{font-size:clamp(36px,8.4vw,58px);line-height:1.06;margin:0 0 .28em}
.cjt-reflex--midden{position:relative;border:0;margin:24px auto 0;padding:22px 0 0;
  max-width:32em;text-align:center}
.cjt-reflex--midden::before{content:"";position:absolute;left:50%;top:0;
  transform:translateX(-50%);width:58px;height:3px;border-radius:2px;background:var(--cjt-type)}
.cjt-onthul .cjt-reflexkop{font-size:clamp(17.5px,2vw,20px);font-weight:500;
  color:var(--cjt-bij);margin:0 0 .55em}
.cjt-onthul .cjt-gedachte{margin-bottom:0}
.cjt-onthul .cjt-gedachte p{font-size:clamp(24px,5.4vw,33px);max-width:none}
.cjt-onthul .cjt-reflextekst{margin:.9em auto 0;font-size:16.5px;color:var(--cjt-bij);max-width:30em}
.cjt-onthul .cjt-tweede{margin:26px auto 0;border-left:0;padding-left:0;
  font-size:16px;color:var(--cjt-bij);max-width:34em}

/* ---- de typekleur op de uitslagpagina ----
   Duidelijker dan op de startpagina, maar de drie gronden van de site
   blijven de drie gronden en de punt achter een kop blijft roestamber. */
.cjt-uitslag .cjt-cijfer.is-jouw{border-left-color:var(--cjt-type)}
.cjt-uitslag .cjt-zin{border-top:3px solid var(--cjt-type);padding-top:22px}
.cjt-uitslag .cjt-zin blockquote{font-size:clamp(21px,2.2vw,27px)}

/* het hoofdstuknummer op een linnen strook: sinds 20 september is er één tekstamber
   (#87521C, 5,16 op linnen), dus de uitzondering voor linnen is weg. */

/* ==================================================================
   Verfijning van de doorloop, 23 september 2026
   Tweede startknop, focusmodus, antwoorden, en een compactere uitslag.
   ================================================================== */

/* Alleen voor een schermlezer. */
.cjt-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- de tweede startknop, onderaan de startpagina ----
   Een open afsluiting na de zinnen, geen kaart. Dezelfde knop als boven. */
.cjt-startonder{padding:clamp(22px,3vw,34px) 0 clamp(30px,4vw,48px)}
.cjt-startonder .cjt-wrap > *{max-width:40em}
.cjt-startonder .cjt-wrap::before{content:"";display:block;border-top:1px solid var(--cjt-rand);margin-bottom:clamp(24px,3vw,34px)}
.cjt-startondertitel{font-size:clamp(21px,2.5vw,27px);line-height:1.25;margin:0 0 .35em}
.cjt-startondertekst{margin:0;color:var(--cjt-bij)}
.cjt-startonder .cjt-startactie{margin:18px 0 0}
.cjt-startslot{padding-top:0}
@media (max-width:640px){
  /* op een telefoon mag de knop de breedte nemen (per component, niet globaal) */
  .cjt-startonder .cjt-startknop{display:block;width:100%;text-align:center}
}

/* ---- focusmodus tijdens de twaalf vragen ----
   Het logo blijft, de rest van de balk en de voet vallen weg. Wie op het
   logo klikt, gaat gewoon naar de home; de voortgang blijft bewaard. */
html.cjt-focus #nav .nav-links,
html.cjt-focus #nav .nav-actie,
html.cjt-focus .voet{display:none}
html.cjt-focus .testblad{min-height:calc(100vh - 80px)}

/* ---- de antwoorden ----
   Een rondje links dat een vinkje wordt: gekozen herken je aan vorm én
   kleur. De hele kaart is de knop. */
.cjt-antwoord{display:flex;align-items:flex-start;gap:14px}
.cjt-keuzeteken{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  border:1.5px solid #9AA6B1;background:#fff;position:relative}
.cjt-antwoord.is-gekozen .cjt-keuzeteken{background:var(--cjt-accent);border-color:var(--cjt-accent)}
.cjt-antwoord.is-gekozen .cjt-keuzeteken::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid var(--cjt-marine);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cjt-antwoord.is-gekozen{border-width:2px;padding:18px 21px}
.cjt-antwoordtekst{flex:1;min-width:0}
.cjt-antwoord:focus-visible{outline:2.5px solid var(--cjt-marine);outline-offset:3px}
.cjt-verder{margin:20px 0 0}
@media (prefers-reduced-motion:reduce){
  .cjt-balk span{transition:none}
  .cjt-antwoord:active{transform:none}
}

/* ---- het tweede profiel: ondersteunend, niet overnemend ---- */
.cjt-onthul .cjt-tweede{font-size:15.5px;line-height:1.55}
.cjt-tweede .tekstlink{white-space:nowrap}

/* ---- de uitslag: compacter, dezelfde inhoud ---- */
.cjt-uitslag .cjt-strook{padding:clamp(30px,4.4vw,56px) 0}
.cjt-uitslag .cjt-hoofdstuk{margin-bottom:clamp(20px,2.6vw,32px)}
.cjt-uitslag .cjt-sectie p{margin-bottom:.7em}
.cjt-uitslag .cjt-verdeling{padding:clamp(24px,3.2vw,40px) 0}
.cjt-uitslag .cjt-verdeling .cjt-fijn{margin-top:1.1em}
@media (max-width:640px){
  .cjt-uitslag .cjt-strook{padding:28px 0}
  .cjt-onthul{padding-top:22px}
  .cjt-uitslag .cjt-cijfers{gap:16px 20px}
  .cjt-uitslag .cjt-cijfer b{font-size:28px}
}

/* de citaten iets compacter */
.cjt-uitslag .cjt-zin{padding:18px 20px 16px;gap:8px;border-radius:16px}
.cjt-uitslag .cjt-zin blockquote{font-size:clamp(19px,2vw,23px)}
.cjt-uitslag .cjt-zin figcaption{font-size:14.5px}
.cjt-zinnen{gap:12px}

/* ---- de sterke punten als open kolommen ----
   Geen kaarten meer: een kort streepje in de accentkleur, de aanzet, de zin. */
.cjt-kolommen{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:20px}
@media (min-width:760px){.cjt-kolommen{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,44px)}}
.cjt-kolom{padding-top:14px;border-top:2px solid var(--cjt-accent);min-width:0}
.cjt-kolom h3{font-size:18.5px;line-height:1.3;margin:0 0 6px}
.cjt-kolom p{font-size:16px;margin:0;max-width:none}

/* ---- de tweede kans: compact ---- */
.cjt-verdieping{padding:clamp(26px,3.4vw,44px) 0}
.cjt-mail--verdieping{padding:22px 20px;border-radius:16px}
@media (min-width:700px){.cjt-mail--verdieping{padding:26px 30px}}
.cjt-mail--verdieping .cjt-mailtitel{font-size:clamp(21px,2.3vw,25px);margin-bottom:.25em}
.cjt-mail--verdieping > p{margin-bottom:.6em}
.cjt-mail--verdieping .cjt-fijn{margin-top:.6em;font-size:14px}

/* ---- de volgende stap: een lichter blok ----
   Geen linnen kaart meer, een lijn in de accentkleur links. */
.cjt-uitslag .cjt-cta{background:none;border-radius:0;padding:4px 0 4px 20px;
  border-left:3px solid var(--cjt-accent);margin:0 0 34px;max-width:44em}
.cjt-uitslag .cjt-cta .cjt-ctatitel{font-size:clamp(20px,2.3vw,24px);margin-bottom:.35em}
.cjt-uitslag .cjt-cta p{margin-bottom:.7em}
.cjt-uitslag .cjt-cta .label{margin-bottom:8px}

/* ---- doorsturen: compact ---- */
.cjt-uitslag .cjt-deel{padding:clamp(26px,3.4vw,44px) 0}
.cjt-deeltitel{font-size:clamp(20px,2.3vw,25px);margin:0 0 .3em}
.cjt-deelkaart{padding:18px 18px 16px;border-radius:16px}
@media (min-width:700px){.cjt-deelkaart{padding:22px 24px 18px}}
.cjt-deelzin{font-size:17px;line-height:1.5;margin:0 0 4px}
.cjt-deeladres{margin:0 0 14px;font-size:14px}
.cjt-deelknop{padding:9px 14px;font-size:15px}
.cjt-deelmeer{margin:.6em 0 0;gap:6px 18px;font-size:15px;align-items:baseline}
.cjt-deelnoot{font-size:13.5px;color:var(--cjt-bij)}
.cjt-deelstatus{flex-basis:100%;font-size:14.5px;color:var(--cjt-inkt);min-height:0}
.cjt-deelstatus:empty{display:none}

/* ---- de andere profielen: één regel ---- */
.cjt-andere{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding-top:18px;margin-bottom:14px;font-size:15.5px}
.cjt-anderetitel{margin:0;color:var(--cjt-bij)}
.cjt-andere ul{gap:4px 18px}
.cjt-andere .cjt-link,.cjt-andere .tekstlink{padding:6px 0 1px}
.cjt-slot .cjt-fijn{margin-top:.9em}

/* ---- geen uitslag gevonden: een melding boven de startpagina ---- */
.cjt-start .cjt-melding .cjt-meldingkop{font-weight:600;color:var(--cjt-inkt);margin:0 0 .2em}

/* ruimte tussen een strook en de kolom eronder: iets minder dan vroeger */
.cjt-uitslag > .cjt-wrap{padding-top:clamp(26px,3.4vw,44px)}
.cjt-deelrechts{min-width:0}
.cjt-deelrechts .cjt-deelmeer{margin-top:.8em}