/* Nepagent.nl, ronde 2: onderdelen bovenop stijl.css. */
[hidden]{display:none!important}
.nw{white-space:nowrap}
.merk-nl{color:var(--zacht);font-weight:400}
button.knop{font:inherit;font-weight:700;font-size:1.1rem;cursor:pointer}
.knop[aria-pressed="true"]{background:var(--inkt);border-color:var(--inkt);color:#fff}
.knop:disabled{cursor:default}
.knop:disabled:not([aria-pressed]){opacity:.4}

/* Labels (pillen) */
.pil{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem 1rem;border:1px solid var(--lijn);border-radius:999px;background:#fff;font-size:1.02rem;line-height:1.3;color:var(--inkt)}
.pil::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--blauw);flex:none}
.pil.nep::before{background:var(--nep)}
.pillen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}

/* Blok 1: held met de echte agent */
.held{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(1.6rem,4vw,3rem)}
.held-tekst{display:grid;gap:1.2rem;align-content:start}
.paneel{position:relative;background:var(--blauw-licht);border-radius:1.5rem;height:clamp(24rem,42vw,34rem);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.paneel img{display:block;height:94%;width:auto;max-width:none}
.paneel.wit{background:#fff;box-shadow:0 0 0 1px var(--lijn)}
.paneel .pil{position:absolute;left:1rem;top:1rem;box-shadow:0 2px 8px rgba(12,35,64,.08)}
@media (max-width:760px){.held{grid-template-columns:1fr}.paneel{height:22rem}}

/* Blok 1: knoppen onder elkaar, even breed */
.held .knoppen{flex-direction:column;align-items:stretch;max-width:23rem}
.held .knop{justify-content:center}

/* Blok 2: herken je hem? */
.herken{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:760px){.herken{grid-template-columns:1fr}}
.herken-tekst{display:grid;gap:1.1rem;align-content:start}
.draai{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.1rem;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:1rem;padding:1rem 1.2rem}
.draai img{width:100%;height:7.5rem;object-fit:contain;display:block;background:var(--blauw-licht);border-radius:.6rem;padding:.4rem 0}
.draai p{font-size:1.05rem}
.draai b{display:block;font-family:var(--kop);font-size:1.2rem;color:var(--inkt);margin-bottom:.2rem}

.herken-tekst .draai+.draai{margin-top:-.3rem}

/* Blok 3: brede verwijzing naar de test (en blok 5 in dezelfde vorm, zonder link) */
.cta-balk{display:flex;align-items:center;gap:1.4rem;padding:1.5rem clamp(1.2rem,3vw,2.2rem);background:var(--blauw);color:#fff;border-radius:1rem;text-decoration:none;transition:background .15s,box-shadow .15s,transform .15s}
.cta-balk:hover{background:var(--blauw-donker);color:#fff;box-shadow:0 .5rem 1.4rem rgba(10,111,194,.25);transform:translateY(-2px)}
.cta-balk .pijl{transition:transform .15s}
.cta-balk:hover .pijl{transform:translateX(4px)}
.cta-balk svg{flex:none;width:2.6rem;height:2.6rem}
.cta-balk span{display:grid;gap:.15rem;flex:1}
.cta-balk strong{font-family:var(--kop);font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.2}
.cta-balk small{font-size:1.05rem;opacity:.9}
.cta-balk .pijl{width:1.8rem;height:1.8rem}

/* Blok 4: het draaiboek als vier kaarten */
.akte-kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
@media (max-width:760px){.akte-kaarten{grid-template-columns:1fr}}
.akte-kaart{background:#fff;border:1px solid var(--lijn);border-radius:1rem;padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.9rem}
.akte-kaart h3{display:flex;align-items:center;gap:.7rem;font-size:1.3rem}
.akte-nr{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--blauw);color:#fff;display:grid;place-items:center;font-size:1rem}
.bubbel{background:var(--vlak);border-radius:.3rem 1rem 1rem 1rem;padding:.9rem 1.1rem;font-size:1.3rem;line-height:1.45;color:var(--inkt)}
.truc{font-size:1.05rem;color:var(--zacht)}
.truc b{color:var(--tekst)}
.jij{margin-top:auto;background:var(--blauw-licht);border-radius:.6rem;padding:.75rem 1rem;font-size:1.08rem}

/* Vragen en antwoorden (uitklappen), zoals KLM */
.faq{display:grid;gap:.8rem;max-width:52rem}
.faq-item{background:#fff;border-radius:1rem;box-shadow:0 1px 3px rgba(12,35,64,.06)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.6rem;font-family:var(--kop);font-weight:700;font-size:1.2rem;line-height:1.3;color:var(--inkt)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blauw)}
.faq-item summary svg{flex:none;width:1.4rem;height:1.4rem;transition:transform .2s}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-antwoord{padding:0 1.6rem 1.4rem;display:grid;gap:.7rem;font-size:1.15rem}
.faq-antwoord ul{margin:0;padding-left:1.3rem;display:grid;gap:.4rem}

/* Blok 6: kaart voor bij de telefoon */
.kaart-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.kaart-blok{grid-template-columns:1fr}}
.mini-stappen{list-style:none;margin:0;padding:0;counter-reset:m;display:grid;gap:.7rem}
.mini-stappen li{counter-increment:m;display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:.8rem;align-items:baseline}
.mini-stappen li::before{content:counter(m);grid-row:span 2;width:2rem;height:2rem;border-radius:50%;background:#fff;border:1px solid var(--lijn);color:var(--blauw);font-weight:700;display:grid;place-items:center;font-size:1rem;align-self:start}
.mini-stappen b{color:var(--inkt)}
.mini-stappen span{font-size:1.05rem;color:var(--zacht)}

/* De test (eigen pagina) */
.test{background:#fff;border:1px solid var(--lijn);border-radius:1rem;padding:clamp(1.2rem,3.5vw,2.4rem);max-width:52rem;box-shadow:0 2px 12px rgba(12,35,64,.06)}
.voortgang{height:.45rem;background:var(--blauw-licht);border-radius:1rem;overflow:hidden;margin-bottom:1.4rem}
.voortgang span{display:block;height:100%;width:0;background:var(--blauw);border-radius:1rem;transition:width .3s}
.test:not(.actief) .voortgang{display:none}
.gesprekken{list-style:none;margin:0;padding:0;display:grid;gap:2.6rem}
.gesprek{display:grid;gap:1.1rem}
.gesprek-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;font-size:1rem;color:var(--zacht)}
.gesprek-meta b{color:var(--inkt)}
.gesprek-nr{font-family:var(--kop);font-weight:700;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blauw);width:100%}
.gesprek-soort{background:var(--blauw-licht);color:var(--inkt);font-weight:700;font-size:.9rem;padding:.15rem .7rem;border-radius:1rem}
.gesprek-tekst{margin:0;padding:1.2rem 1.4rem;background:var(--vlak);border-radius:.3rem 1.2rem 1.2rem 1.2rem;font-size:1.4rem;line-height:1.5;color:var(--inkt)}
mark{background:none;color:inherit}
.gesprek.klaar mark,.gesprek:has(details[open]) mark,.draaiboek mark,.bubbel mark{background:var(--nep-licht);border-bottom:2px solid var(--nep);padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gesprek-keuze .knop{min-width:10rem;justify-content:center;font-size:1.2rem;padding:1rem 1.4rem}
.gesprek-uitleg summary{cursor:pointer;font-weight:700;color:var(--blauw)}
.test.actief .gesprek-uitleg summary{display:none}
.uitleg{display:grid;gap:.6rem;border-left:4px solid var(--blauw);padding:.2rem 0 .2rem 1.1rem;margin-top:.6rem}
.test.actief .uitleg{margin-top:0}
.oordeel{justify-self:start;background:var(--nep);color:#fff;font-weight:700;padding:.15rem .8rem;border-radius:1rem;font-size:1rem}
.oordeel.raak{background:var(--blauw)}
.oordeel:empty{display:none}
.uitleg-kop{font-family:var(--kop);font-weight:700;font-size:1.6rem;line-height:1.15;color:var(--inkt)}
.uitleg[data-antwoord="nep"] .uitleg-kop{color:var(--nep)}
.actie{background:var(--blauw-licht);padding:.75rem 1rem;border-radius:.5rem}
.volgende{justify-self:start}
.test-eind{display:grid;gap:1.1rem}
.score{font-family:var(--kop);font-weight:700;font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.1;color:var(--inkt)}
.score b{font-size:1.7em;color:var(--blauw)}

/* Het draaiboek */
.draaiboek{list-style:none;margin:0;padding:0;border-top:2px solid var(--inkt)}
.draaiboek li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem 2.5rem;padding-block:1.6rem;border-bottom:1px solid var(--lijn)}
@media (max-width:760px){.draaiboek li{grid-template-columns:1fr}}
.akte{font-family:var(--kop);font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blauw)}
.regel{font-size:1.45rem;line-height:1.45;color:var(--inkt);margin-top:.4rem}
.regel.klein-regel{font-size:1.15rem;color:var(--zacht)}
.akte-truc{display:grid;gap:.5rem;align-content:start;font-size:1.1rem}
.akte-truc p:last-child{background:var(--blauw-licht);padding:.6rem .8rem;border-radius:.5rem}

/* Kaart voor bij de telefoon. Maten in em, de kaart schaalt mee met zijn houder (cqi). */
.kaart-klein,.kaart-voorbeeld{container-type:inline-size;width:100%}
.kaart-klein{max-width:28rem;justify-self:center;align-self:center}
.belkaart{aspect-ratio:210/148;background:#fff;color:var(--inkt);font-family:var(--romp);font-size:3.6cqi;line-height:1.25;display:flex;flex-direction:column;overflow:hidden;border-radius:.6rem;box-shadow:0 0 0 1px var(--lijn),0 .6rem 1.4rem rgba(12,35,64,.1)}
.belkaart-band{background:var(--blauw);color:#fff;font-family:var(--kop);font-weight:700;font-size:1.35em;line-height:1.1;padding:.6em .7em}
.belkaart-midden{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1em;padding:.8em .9em .4em;flex:1}
.belkaart-stappen{list-style:none;margin:0;padding:.8em .9em .4em;counter-reset:s;display:grid;gap:.4em;align-content:start;font-family:var(--kop);font-weight:700;font-size:1.25em;line-height:1.15}
.belkaart-midden .belkaart-stappen{padding:0;font-size:1.2em;gap:.55em}
.belkaart-stappen li{counter-increment:s;display:flex;gap:.45em;align-items:center}
.belkaart-stappen li::before{content:counter(s);flex:none;width:1.4em;height:1.4em;border-radius:50%;background:var(--blauw);color:#fff;display:grid;place-items:center;font-size:.8em}
.belkaart-stappen b{white-space:nowrap}
.belkaart-nooit{list-style:none;margin:0;padding:0 0 0 .8em;border-left:.2em solid var(--blauw);display:grid;gap:.45em;align-content:start;font-size:.92em}
.belkaart-bel{padding:.4em .9em;font-weight:700;display:flex;flex-wrap:wrap;gap:.3em .6em;align-items:baseline;margin-top:auto}
.belkaart-bel span:not([class]){font-weight:400;color:var(--zacht)}
.belkaart-invul{flex:1 1 6em;border-bottom:.08em solid var(--inkt);min-height:1.6em;font-size:1.15em}
.belkaart-invul.nummer{flex:1 1 7em;white-space:nowrap}
.belkaart-voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2em 1em;padding:.45em .9em .6em;margin-top:.3em;border-top:1px solid var(--lijn);font-size:.7em;color:var(--zacht)}
.printvel{display:none}

/* Invulvelden */
.velden{display:grid;gap:.4rem;max-width:26rem}
.velden label{font-weight:700;margin-top:.5rem}
.velden input[type=text],.velden input[type=tel],.bericht-blok textarea{font:inherit;font-size:1.15rem;color:var(--inkt);background:#fff;padding:.7rem .9rem;border:1px solid #b9c4d0;border-radius:.5rem;width:100%}
.velden input:focus,.bericht-blok textarea:focus{border-color:var(--blauw);outline:2px solid var(--blauw-licht)}
.bericht-blok textarea{font-size:1.05rem;line-height:1.45;resize:vertical}
.keuze-rij{border:0;margin:0;padding:0;display:grid;gap:.35rem}
.keuze-rij legend{font-weight:700;padding:0;margin-bottom:.3rem}
.velden .keuze-rij label{font-weight:400;margin:0;display:flex;gap:.6rem;align-items:center}
.keuze-rij input{width:1.3rem;height:1.3rem;accent-color:var(--blauw);margin:0}
.bericht-blok{display:grid;gap:.8rem;align-content:start}
.klein-kader{margin-top:.6rem;font-size:1.05rem}

/* Momentje-blok */
.deur-blok .set-beeld{height:auto;padding:2rem}
.deur-blok .ring{width:min(15rem,100%)}

/* Gezien of gebeld */
.routes h2.route-kop{font-size:1.15rem;line-height:1.25}
.route-nummer{font-family:var(--kop);font-weight:700;font-size:1.7rem;line-height:1.1;color:var(--blauw)}

/* Vacature */
.flyer{max-width:40rem;margin:0 auto;background:#fff;border:1px solid var(--lijn);border-radius:.4rem;padding:clamp(1.4rem,4vw,2.4rem) clamp(1.2rem,4vw,2.4rem) 0;display:grid;gap:1rem;transform:rotate(-1deg);box-shadow:.5rem .5rem 0 var(--blauw-licht)}
.flyer h1{font-size:clamp(2.4rem,8vw,3.6rem)}
.flyer-label{justify-self:start;background:var(--inkt);color:#fff;font-family:var(--kop);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem;padding:.2rem .7rem;border-radius:.3rem}
.flyer-sub{font-size:1.3rem}
.flyer-lessen{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:1.15rem}
.strookjes{list-style:none;margin:1rem calc(-1 * clamp(1.2rem,4vw,2.4rem)) 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px dashed var(--zacht)}
.strookjes li{writing-mode:vertical-rl;transform:rotate(180deg);height:10rem;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;white-space:nowrap;border-right:1px dashed var(--zacht)}
.strookjes li:first-child{border-right:0}
.betrapt{background:var(--inkt);color:#fff;padding-block:clamp(2.6rem,7vw,5rem)}
.betrapt h2{color:#9fd0ff;font-size:clamp(2.6rem,9vw,4.6rem)}
.betrapt .inleiding{color:#fff}
.tegengif>div{border-top:3px solid var(--blauw);padding-top:.8rem}

/* Printen van de kaart: alleen het vel met twee kaarten, op A4 */
@page kaart{size:A4 portrait;margin:0}
@media print{
  body:has(.printvel)>:not(main),body:has(.printvel) main>:not(.printvel){display:none!important}
  .printvel{display:block;page:kaart;width:210mm;container-type:inline-size}
  .printvel .belkaart{height:148.4mm;aspect-ratio:auto;border-radius:0;box-shadow:none;break-inside:avoid}
  .printvel .belkaart+.belkaart{border-top:.3mm dashed #888}
  .belkaart-band,.belkaart-stappen li::before,.belkaart-nooit{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}