/* =========================================================================
   FITS-LIST | gedeelde aanvullingen voor variant A en B (mijlpaal 9 okt 2026)
   Drie routes op de homepage, de leadfunnel voor bedrijven, en geen
   klik-signalen meer op blokken die geen link zijn.
   ========================================================================= */

/* ---------- geen nep-knoppen: alleen echte links bewegen ---------- */
.glas:hover,.glas--licht:hover{transform:none;box-shadow:none;border-color:inherit}
.glas:hover::before{opacity:0}
.driekaart:hover img,.tegel:hover img,.catkaart:hover img{transform:none}
.case:not(a):hover .case-beeld img{transform:none}

/* ---------- drie routes ---------- */
.drieroutes{display:grid;gap:18px;margin-top:38px}
@media (min-width:900px){ .drieroutes{grid-template-columns:repeat(3,1fr);gap:20px} }
/* sinds 27 okt twee routes (geen Ambassador): creators en bedrijven */
@media (min-width:760px){ .drieroutes--twee{grid-template-columns:repeat(2,1fr);gap:20px} }
.drieroute{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:var(--wit);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .3s ease;
}
.drieroute:hover{border-color:var(--goud-diep)}
.drieroute:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.drieroute-beeld{display:block;aspect-ratio:4/3;overflow:hidden;background:#16120d}
.drieroute-beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.15,0,.25,1)}
.drieroute:hover .drieroute-beeld img{transform:scale(1.04)}
.drieroute-in{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,30px);flex:1}
.drieroute-voor{font-family:var(--font-h);font-weight:600;font-size:var(--fs-sm);color:var(--goud-donker)}
.drieroute-kop{font-family:var(--font-h);font-weight:600;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.02em}
.drieroute-tekst{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.drieroute .tekstlink{margin-top:auto;padding-top:10px;white-space:normal}

/* ---------- leadfunnel ---------- */
.hero--funnel{padding-block:clamp(48px,6vw,80px)}
.hero--funnel h1{max-width:none}
.funnel-grid{display:grid;gap:clamp(34px,5vw,64px);align-items:start}
@media (min-width:980px){ .funnel-grid{grid-template-columns:1.45fr .8fr} }
.funnel{display:grid;gap:22px;min-width:0}
.funnel fieldset{border:0;padding:0;margin:0;min-width:0}
.funnel legend{font-family:var(--font-h);font-weight:600;font-size:var(--fs-h3);letter-spacing:-.02em;margin-bottom:18px;outline:0}
.funnel-stappen{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:st;
  margin:0 0 6px;padding:0;
}
.funnel-stappen li{
  counter-increment:st;font-size:.8rem;color:var(--muted);padding-top:12px;
  border-top:3px solid var(--hairline);line-height:1.3;
}
.funnel-stappen li::before{content:counter(st) ". "}
.funnel-stappen li.is-klaar{border-color:var(--goud-diep);color:var(--grijs)}
.funnel-stappen li.is-nu{border-color:var(--ink);color:var(--ink);font-weight:600}
@media (max-width:520px){ .funnel-stappen li{font-size:0;color:transparent} .funnel-stappen li::before{font-size:.8rem;color:var(--muted)} .funnel-stappen li.is-nu::before{color:var(--ink)} }

.kz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){ .kz-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.kz-lijst{display:grid;gap:10px}
.kz{position:relative;display:block;cursor:pointer}
.kz input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kz-in{
  display:flex;flex-direction:column;gap:6px;height:100%;
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:14px 16px;background:var(--wit);
  transition:border-color .2s ease,background .2s ease;
}
.kz-in .ico{width:20px;height:20px;color:var(--goud-donker)}
.kz-in b{font-family:var(--font-h);font-weight:600;font-size:.95rem;line-height:1.25}
.kz-in small{font-size:.85rem;color:var(--muted);line-height:1.45}
.kz:hover .kz-in{border-color:var(--goud-diep)}
.kz input:checked + .kz-in{border-color:var(--ink);background:var(--goud-zacht);box-shadow:inset 0 0 0 1px var(--ink)}
.kz input:focus-visible + .kz-in{outline:2px solid var(--goud);outline-offset:2px}

.funnel .rij2{display:grid;gap:16px}
@media (min-width:700px){ .funnel .rij2{grid-template-columns:1fr 1fr} }
.funnel .rij2 + .veld,.funnel .rij2 + .rij2{margin-top:16px}
.funnel .veld label{min-height:1.4em}
.funnel textarea{min-height:96px}
.funnel-fout{color:#8A1F11;font-size:var(--fs-sm);font-weight:600}
.funnel-knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.funnel-knoppen [data-verder]{margin-left:auto}
.funnel-knoppen button{cursor:pointer;border:0;line-height:inherit}
.funnel-knoppen [hidden],.funnel-stap[hidden],.funnel-fout[hidden]{display:none !important}
.funnel-knoppen .btn{font-family:var(--font-h);font-weight:600}
.funnel-knoppen .btn--lijn-donker{background:none;border:1px solid var(--hairline)}

.agenda-plek{
  border:1px dashed var(--goud-diep);border-radius:var(--r-sm);padding:clamp(22px,3vw,34px);
  background:var(--goud-zacht);
}
.agenda-plek b{font-family:var(--font-h);font-size:1.1rem;display:block;margin-bottom:8px}
.agenda-plek p{color:var(--grijs);font-size:var(--fs-sm);max-width:56ch}
.agenda-frame{width:100%;min-height:700px;border:0;display:block}
/* zodra de Calendly-agenda er staat: geen lege-plek-kader meer eromheen */
.agenda-plek:has(.agenda-frame){padding:0;border:0;background:none}
.funnel-samenvatting{margin-top:18px;display:grid;gap:6px;font-size:var(--fs-sm)}
.funnel-samenvatting > b{font-family:var(--font-h);margin-bottom:4px}
.funnel-samenvatting div{display:grid;grid-template-columns:90px 1fr;gap:12px;border-top:1px solid var(--hairline);padding-top:6px}
.funnel-samenvatting div span:first-child{color:var(--muted)}

.funnel-zij{border-top:1px solid var(--hairline);padding-top:24px}
@media (min-width:980px){ .funnel-zij{border-top:0;border-left:1px solid var(--hairline);padding:4px 0 0 clamp(26px,3vw,40px);position:sticky;top:110px} }
.funnel-zij h2{font-size:var(--fs-h3);margin-bottom:18px}
.funnel-zij .sub{margin-top:24px;font-size:var(--fs-sm)}
.funnel-zij .tekstlink{margin-top:10px;white-space:normal}

/* ---------- koppen: de concept-CSS had geen basismaat voor h1 en h2 ---------- */
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
.hero h1{font-size:var(--fs-display)}
.funnel-zij h2{font-size:var(--fs-h3)}

/* ---------- variant A: labels op de lichte goudtint net te licht (4,36:1) ---------- */
.variant-a .label{color:#76592A}
.variant-a .s-donker .label,.variant-a .strook .label,.variant-a .hero .label{color:var(--goud)}
.variant-a .pak-merk{color:#76592A}
.variant-a .pak-prijs small,.variant-a .vinklijst--niveau li{color:var(--muted)}
.variant-a{--muted-licht:#6B635A;--goud-diep:#8A6930}
.case-volgt{margin-top:16px;font-size:var(--fs-sm);color:var(--muted);border-top:1px solid var(--hairline);padding-top:12px}
.funnel-sectie ~ .actiebalk{display:none}

/* ---------- echte app-schermen in het CSS-toestel ---------- */
.scherm--echt{background:#000}
.toestel--echt .scherm{z-index:3}            /* boven de framerand van ::before */
.scherm--echt::after{display:none}           /* het screenshot heeft zijn eigen home-streepje */
.scherm--echt img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .55s ease;
}
.scherm--echt img.is-actief{opacity:1}
/* echte schermen als paneel in een getekend toestel (appkiezer, cyclus) */
.app-echt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:4;background:#000}
.scherm:has(.app-scherm.is-actief .app-echt)::after{display:none}

/* ---------- routekiezer met drie pakketten (Listed, Boosted, Campaign; Ambassador weg sinds 27 okt) ---------- */
.routes--drie .route-knoppen{grid-template-columns:repeat(3,1fr)}
.routes--drie .route-knop,.routes--drie .route-knop:nth-child(2n){border-right:1px solid var(--hairline)}
.routes--drie .route-knop:last-child{border-right:0}
@media (max-width:759px){ .routes--drie .route-knop{padding:18px 12px} .routes--drie .route-knop b{font-size:1rem} .routes--drie .route-knop small{font-size:.74rem} }
.routes--drie .route-schaal-tekst{grid-template-columns:repeat(3,1fr)}
.routes--drie[data-actief="listed"] .route-lijn{--vul:16.667%}
.routes--drie[data-actief="boosted"] .route-lijn{--vul:50%}
.routes--drie[data-actief="campaign"] .route-lijn{--vul:83.333%}

/* app-sectie homepage: twee toestellen sinds 5 nov (Tabitha), dus ruimte om ze groter te tonen,
   zodat de letters in de echte schermen leesbaar blijven */
.fonen--groot .toestel{--fs:clamp(3.6px,1.2vmin,6.8px)}
.fonen--groot .foonhouder{will-change:auto}
/* hero: zo groot als de kolom (489 px) toelaat met twee toestellen naast elkaar */
.fonen--hero .toestel{--fs:clamp(3.2px,1.05vw,5.6px)}

/* Echte app-schermen moeten haarscherp blijven (David 5 nov: "alles is onscherp").
   De 3D-kanteling met de muis, de schuine stand en will-change laten Chrome het toestel als
   plaatje opnieuw bemonsteren, en dan worden de kleine letters in de app wazig. Dus voor
   groepen met een echt scherm: plat, recht en zonder transform zodra het toestel in beeld is. */
.fonen:has(.toestel--echt, .app-echt){perspective:none}
.fonen:has(.toestel--echt, .app-echt) .foonhouder{transform:none !important;transform-style:flat;will-change:auto}
.fonen:has(.toestel--echt, .app-echt) .toestel{--draai:0deg}
.in .toestel--echt, .toestel--echt.in, .in .toestel:has(.app-echt), .toestel.in:has(.app-echt){transform:none}
/* downloadblok: daar staan de toestellen schuin (style.css), maar gedraaid wordt een echt
   scherm altijd wat zacht. Recht zetten; de hoogteverspringing blijft. */
.download .fonen:has(.toestel--echt, .app-echt) .foonhouder .toestel{--draai:0deg}