/* Tijdcheck "Waar verlies jij tijd?" (/tijdcheck): navy hero met één rechte glazen kaart (Bart + de drie
   stappen), daarna op wolk links de uitleg met de korte review en rechts de check zelf, en op wit de vragen.
   Zonder JavaScript staan de vijf vragen en de gegevens onder elkaar en verstuurt de browser het formulier zelf.
   Met JavaScript (uniek.js zet .is-stappen op het formulier): één vraag per keer met een voortgangsbalk. */

.pagina-tijdcheck [hidden]{display:none!important;}

/* ---- hero ---- */
.pagina-tijdcheck .hero__tekst h1{font-size:clamp(40px,6vw,80px);padding-bottom:.5em;}
.pagina-tijdcheck .tijdcheck-beeld{max-width:440px;width:100%;justify-self:end;}
.pagina-tijdcheck .tijdcheck-kaart{width:100%;padding:28px;background:linear-gradient(165deg,rgba(126,166,247,.24),rgba(37,99,235,.16) 55%,rgba(37,99,235,.10));border-color:rgba(186,209,252,.34);}
.pagina-tijdcheck .hero__beeld .glas{transform:none;} /* een echte kaart, geen voorbeeld: recht */
.pagina-tijdcheck .tijdcheck-kaart .persoon{margin-top:0;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.2);}
.pagina-tijdcheck .tijdcheck-kaart .persoon__foto img{width:64px;height:64px;}
.pagina-tijdcheck .tijdcheck-kaart .persoon b{font:800 clamp(17px,1.4vw,20px)/1.15 var(--f-display);letter-spacing:-.01em;}
.pagina-tijdcheck .tijdcheck-kaart .persoon span{font-size:15px;opacity:1;color:rgba(255,255,255,.88);}
.tijdcheck-zo{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;}
.tijdcheck-zo li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);}
.tijdcheck-zo li > span:last-child{display:flex;flex-direction:column;line-height:1.3;font-weight:600;color:var(--wit);}
.tijdcheck-zo small{font-size:13.5px;font-weight:400;color:rgba(255,255,255,.8);}
@media (min-width:901px){.pagina-tijdcheck .hero--pagina{background:var(--korrel),radial-gradient(45% 60% at 76% 58%,rgba(37,99,235,.5),transparent 70%),var(--nacht);}}
@media (max-width:900px){.pagina-tijdcheck .tijdcheck-beeld{justify-self:stretch;max-width:520px;margin-inline:auto;}}
/* telefoon: de uitleg staat al in de lead; de kaart houdt alleen Bart, zodat de check snel in beeld komt */
@media (max-width:640px){
  .pagina-tijdcheck .hero__tekst h1{font-size:clamp(38px,11vw,60px);}
  .pagina-tijdcheck .tijdcheck-kaart{padding:18px;}
  .pagina-tijdcheck .tijdcheck-kaart .persoon{padding-bottom:0;border-bottom:0;}
  .pagina-tijdcheck .tijdcheck-kaart .persoon__foto img{width:56px;height:56px;}
  .tijdcheck-zo{display:none;}
}

/* ---- de check: links uitleg (plakt mee), rechts het formulier ---- */
/* telefoon: uitleg, dan meteen de check, de review eronder. Breed: uitleg met de review eronder links,
   de check rechts over beide rijen. */
.pagina-tijdcheck .tijdcheck-zij{position:static;}
.pagina-tijdcheck .tijdcheck-review .review{margin-top:0;}
@media (min-width:901px){
  .pagina-tijdcheck .tijdcheck-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;row-gap:32px;}
  .pagina-tijdcheck .tijdcheck-zij{grid-column:1;grid-row:1;}
  .pagina-tijdcheck .tijdcheck{grid-column:2;grid-row:1 / span 2;}
  .pagina-tijdcheck .tijdcheck-review{grid-column:1;grid-row:2;}
}
.pagina-tijdcheck .tijdcheck form{margin-top:0;gap:24px;}

/* voortgang: een rustige balk, de vraag zelf zegt welke stap het is */
.tijdcheck__voortgang{display:block;}
.tijdcheck__balk{position:relative;height:6px;border-radius:var(--r-pil);background:var(--wolk);overflow:hidden;}
.tijdcheck__balk span{position:absolute;inset:0 auto 0 0;width:calc(var(--v,.1667) * 100%);border-radius:inherit;background:var(--blauw);transition:width var(--t-ui) var(--ease);}

/* een vraag */
.tijdcheck__stap{display:grid;gap:16px;min-width:0;margin:0;padding:0;border:0;}
.tijdcheck__stap:focus{outline:none;}
.tijdcheck__vraag{display:block;float:left;width:100%;margin:0 0 4px;padding:0;font:800 clamp(22px,2.2vw,28px)/1.15 var(--f-display);letter-spacing:-.01em;color:var(--navy);text-wrap:balance;}
.tijdcheck__vraag + *{clear:both;}
.tijdcheck__nr{display:block;margin-bottom:10px;font:700 12.5px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--blauw);}
.tijdcheck__hint{margin-top:-6px;font-size:15.5px;color:var(--tekst-zacht);}
.tijdcheck__optie{font-weight:400;color:var(--tekst-zacht);}
.is-stappen .tijdcheck__stap{animation:opdoemen .4s var(--ease) both;}

/* keuzes: hele tegel is het label; het vakje of rondje blijft zichtbaar (geen verstopte invoer) */
.keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media (max-width:520px){.keuzes{grid-template-columns:minmax(0,1fr);gap:8px;}.keuzes--kort{grid-template-columns:repeat(2,minmax(0,1fr));}}
.keuze{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border-radius:14px;border:1.5px solid rgba(11,28,61,.22);background:var(--wit);color:var(--navy);font:500 16px/1.3 var(--f-tekst);cursor:pointer;
  transition:border-color var(--t-snel),background-color var(--t-snel),box-shadow var(--t-snel);}
.keuze:hover{border-color:rgba(11,28,61,.5);}
.keuze:has(:checked){border-color:var(--blauw);background:rgba(37,99,235,.06);box-shadow:0 0 0 1px var(--blauw);}
.keuze:has(:focus-visible){outline:3px solid var(--blauw);outline-offset:2px;}
.keuze:has([aria-invalid="true"]){border-color:var(--fout);}
.keuze input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:22px;height:22px;margin:0;border:1.5px solid rgba(11,28,61,.55);border-radius:7px;background:var(--wit);cursor:pointer;
  transition:background-color var(--t-snel),border-color var(--t-snel),box-shadow var(--t-snel);}
.keuze input[type="radio"]{border-radius:50%;}
.keuze input:focus-visible{outline:none;}
.keuze input:checked{border-color:var(--blauw);background:var(--blauw);}
.keuze input[type="checkbox"]:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat,var(--blauw);}
.keuze input[type="radio"]:checked{box-shadow:inset 0 0 0 4.5px var(--wit);}
@media (forced-colors:active){.keuze input{appearance:auto;-webkit-appearance:auto;}}

.tijdcheck__anders{margin-top:-4px;}
.tijdcheck__stap .veld textarea{min-height:150px;}
.tijdcheck__privacy{font-size:14.5px;color:var(--tekst-zacht);}

/* knoppen: terug links, verder en versturen rechts */
.tijdcheck__knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--lijn);}
.tijdcheck__knoppen [data-tc="verder"],.tijdcheck__knoppen [data-tc="verstuur"]{margin-left:auto;}
@media (max-width:480px){
  .tijdcheck__knoppen .knop{flex:1 1 auto;}
  .tijdcheck__knoppen [data-tc="terug"]{flex:0 0 auto;padding:0 18px;}
}
.pagina-tijdcheck .tijdcheck .melding--goed,.pagina-tijdcheck .tijdcheck .melding--fout{margin-top:0;}
.pagina-tijdcheck .melding a{color:var(--blauw);font-weight:600;}

/* zonder JavaScript: alle vragen onder elkaar, met een lijn ertussen */
.tijdcheck__form:not(.is-stappen) .tijdcheck__stap + .tijdcheck__stap{padding-top:28px;border-top:1px solid var(--lijn);}

/* na het versturen: de eigen bedanktekst op de plek van het formulier */
.tijdcheck__klaar{display:grid;justify-items:start;gap:14px;padding:clamp(8px,2vw,16px) 0;}
.tijdcheck__klaar:focus{outline:none;}
.tijdcheck__klaar::before{content:"";width:56px;height:42px;background:var(--blauw);mask:var(--glimlach) center/contain no-repeat;animation:melden .7s var(--ease) both;}
.tijdcheck__klaar h3{font-size:clamp(24px,2.4vw,30px);line-height:1.15;color:var(--navy);}
.tijdcheck__klaar p{max-width:52ch;color:var(--tekst-zacht);}
.tijdcheck__klaar b{color:var(--navy);font-weight:600;overflow-wrap:anywhere;}
.tijdcheck__naar{display:inline;}