/* =========================================================================
   FITS-LIST | landingspagina voor leads uit de ads (start.html)
   Bouwt voort op style.css en varianten.css, en in variant B op variant-b.css.
   Alles wat B anders wil staat onderaan onder .variant-b.
   ========================================================================= */

/* ---------- smalle kop zonder menu ---------- */
.top--landing .top-in{height:72px;gap:16px}
.top--landing .top-logo img{height:34px}
.ld-top-acties{margin-left:auto;display:flex;align-items:center;gap:22px}
.ld-top-acties .btn{padding:11px 18px;font-size:.88rem}
.ld-top-tel{
  display:none;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--font-h);font-weight:600;font-size:.92rem;color:rgba(255,255,255,.82);
}
.ld-top-tel .ico{width:17px;height:17px;color:var(--goud)}
.ld-top-tel:hover{color:#fff}
@media (min-width:760px){ .ld-top-tel{display:inline-flex} }
@media (max-width:380px){ .ld-top-acties .btn{padding:10px 12px;font-size:.8rem} }

/* ---------- hero ---------- */
.ld-hero .hero-grid{align-items:center}
.ld-hero h1{max-width:13ch}
.ld-hero-fonen{flex-wrap:nowrap}
.ld-hero-fonen .foonhouder:nth-child(2){margin-top:14%}
@media (max-width:979px){ .ld-hero-fonen{justify-content:center} }
.ld-feiten{
  list-style:none;margin:clamp(44px,6vw,72px) 0 0;padding:26px 0 0;
  display:grid;gap:16px;border-top:1px solid var(--hairline-donker);
}
@media (min-width:860px){ .ld-feiten{grid-template-columns:repeat(3,1fr);gap:30px} }
.ld-feiten li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-sm);color:rgba(255,255,255,.78);line-height:1.5}
.ld-feiten .ico{width:20px;height:20px;color:var(--goud);margin-top:1px}

/* ---------- branche-index ---------- */
.ld-index-kop{display:grid;gap:18px;align-items:end}
@media (min-width:920px){ .ld-index-kop{grid-template-columns:1fr 1fr;gap:60px} }
.ld-index-kop .lead{max-width:48ch}
.ld-groepen{
  margin-top:clamp(36px,5vw,56px);display:grid;gap:34px 44px;
}
@media (min-width:700px){ .ld-groepen{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1040px){ .ld-groepen{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ld-groep h3{
  display:flex;align-items:center;gap:10px;font-size:var(--fs-cap);letter-spacing:.18em;
  text-transform:uppercase;color:var(--goud-donker);font-weight:600;padding-bottom:12px;
  border-bottom:1px solid var(--ink);
}
.ld-groep h3 .ico{width:18px;height:18px}
.ld-groep ul{list-style:none;margin:0;padding:0}
.ld-branche{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:0;border-bottom:1px solid var(--hairline);cursor:pointer;
  padding:11px 0;text-align:left;color:var(--ink);
  font-family:var(--font-h);font-weight:500;font-size:1.05rem;line-height:1.3;
  transition:color .18s ease,padding .18s ease;
}
.ld-branche::after{
  content:"Kies";font-family:var(--font);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:var(--goud-donker);opacity:0;transition:opacity .18s ease;
}
.ld-branche:hover,.ld-branche:focus-visible{color:var(--goud-donker);padding-left:6px}
.ld-branche:hover::after,.ld-branche:focus-visible::after{opacity:1}
.ld-branche.is-gekozen{color:var(--goud-donker)}
.ld-branche.is-gekozen::after{content:"Gekozen";opacity:1}
.ld-branche:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.ld-index-onder{margin-top:30px;font-size:var(--fs-sm)}
@media (max-width:699px){
  .ld-groep ul{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .ld-branche{font-size:.98rem;padding:10px 0}
  .ld-branche::after{display:none}
  .ld-branche.is-gekozen{font-weight:700}
}

/* ---------- zo werkt het: stappen met een wisselend scherm ---------- */
.ld-werkt-grid{
  margin-top:clamp(34px,5vw,56px);display:grid;gap:clamp(34px,5vw,70px);align-items:center;
}
@media (min-width:920px){ .ld-werkt-grid{grid-template-columns:1.1fr .9fr} }
.ld-stappen{display:grid}
.ld-stap{
  display:flex;align-items:flex-start;gap:18px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-top:1px solid var(--hairline-donker);color:inherit;
  padding:22px 0 22px;font:inherit;transition:padding .25s ease;
}
.ld-stap:last-child{border-bottom:1px solid var(--hairline-donker)}
.ld-stap-nr{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hairline-donker);color:var(--goud);
  font-family:var(--font-h);font-weight:600;font-size:.95rem;transition:background .25s,color .25s,border-color .25s;
}
.ld-stap-tekst{display:flex;flex-direction:column;gap:6px}
.ld-stap-tekst b{font-family:var(--font-h);font-weight:600;font-size:var(--fs-h3);color:rgba(255,255,255,.62);transition:color .25s}
.ld-stap-tekst span{font-size:var(--fs-sm);color:rgba(255,255,255,.62);line-height:1.55;max-width:46ch}
.ld-stap:hover .ld-stap-tekst b{color:#fff}
.ld-stap.is-actief{padding-left:8px}
.ld-stap.is-actief .ld-stap-nr{background:var(--goud);border-color:var(--goud);color:#12100E}
.ld-stap.is-actief .ld-stap-tekst b{color:#fff}
.ld-stap.is-actief .ld-stap-tekst span{color:rgba(255,255,255,.8)}
.ld-stap:focus-visible{outline:2px solid var(--goud);outline-offset:4px}
.ld-werkt-foon{flex-direction:column;gap:18px}
@media (max-width:919px){ .ld-werkt-foon{order:-1} }
.ld-bron{font-size:.8rem;letter-spacing:.06em;color:rgba(255,255,255,.62);text-align:center}

/* ---------- wat het oplevert ---------- */
.ld-vink li{font-size:1rem;gap:14px}
.ld-vink li b{color:var(--ink);font-family:var(--font-h);font-weight:600}

/* ---------- ervaringen ---------- */
.ld-bewijs-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.ld-teller{display:flex;align-items:baseline;gap:12px}
.ld-teller b{font-family:var(--font-h);font-weight:600;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--goud-donker);letter-spacing:-.03em;line-height:1}
.ld-teller span{color:var(--grijs);font-size:var(--fs-sm)}
.ld-bewijs-grid{margin-top:clamp(30px,4vw,48px);display:grid;gap:16px}
@media (min-width:860px){ .ld-bewijs-grid{grid-template-columns:1fr 1fr} }
.ld-review{
  margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  border:1px solid rgba(160,120,60,.28);border-radius:var(--r-md);padding:clamp(22px,2.6vw,32px);
  background:var(--goud-zacht);min-height:230px;
}
.ld-review blockquote{font-family:var(--font-h);font-size:1.12rem;line-height:1.45;color:var(--grijs)}
.ld-review figcaption{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm)}
.ld-review figcaption b{font-family:var(--font-h)}
.ld-review figcaption span{color:var(--muted)}
.ld-case{margin:0;position:relative;overflow:hidden;border-radius:var(--r-md);min-height:300px;background:#000}
.ld-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.ld-case figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:6px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 60%,transparent 100%);
}
.ld-case figcaption b{font-family:var(--font-h);font-size:1.15rem;line-height:1.3}
.ld-case figcaption span{font-size:var(--fs-sm);color:rgba(255,255,255,.8)}
.ld-case-label{
  font-family:var(--font-h);font-weight:600;font-size:var(--fs-cap) !important;letter-spacing:.18em;
  text-transform:uppercase;color:var(--goud) !important;
}
.ld-logos{margin-top:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:699px){ .ld-logo:nth-child(n+7){display:none} }
@media (min-width:700px){ .ld-logos{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1040px){ .ld-logos{grid-template-columns:repeat(8,1fr)} }
.ld-logo{
  height:64px;display:grid;place-items:center;border:1px dashed var(--hairline);border-radius:var(--r-sm);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

/* ---------- aanvraag ---------- */
.ld-aanvraag::before{display:none}            /* geen iconenpatroon achter het formulier */
.ld-aanvraag-grid{display:grid;gap:clamp(34px,5vw,64px);align-items:start}
@media (min-width:980px){ .ld-aanvraag-grid{grid-template-columns:.85fr 1.15fr} }
.ld-aanvraag-tekst .vinklijst li{font-size:1rem}
.ld-bel{
  margin-top:30px;display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  font-size:var(--fs-sm);
}
.ld-bel .ico{width:20px;height:20px;color:var(--goud-donker)}
.ld-bel b{font-family:var(--font-h);font-size:1.1rem;margin-left:4px;white-space:nowrap}
.ld-bel:hover b{color:var(--goud-donker)}
.ld-form{
  background:var(--wit);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:clamp(20px,3vw,34px);box-shadow:0 24px 60px rgba(60,40,10,.08);
  scroll-margin-top:96px;
}
.ld-form [hidden]{display:none !important}
.ld-modus{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.ld-modus label{position:relative;cursor:pointer}
.ld-modus input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ld-modus span{
  display:flex;align-items:center;justify-content:center;gap:9px;height:100%;text-align:center;
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:13px 10px;
  font-family:var(--font-h);font-weight:600;font-size:.92rem;line-height:1.25;
  transition:background .2s,color .2s,border-color .2s;
}
.ld-modus span .ico{width:18px;height:18px;color:var(--goud-donker)}
.ld-modus label:hover span{border-color:var(--goud-diep)}
.ld-modus input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.ld-modus input:checked + span .ico{color:var(--goud)}
.ld-modus input:focus-visible + span{outline:2px solid var(--goud);outline-offset:2px}
.ld-velden{display:grid;gap:16px}
.ld-velden .rij2{display:grid;gap:16px}
@media (min-width:600px){ .ld-velden .rij2{grid-template-columns:1fr 1fr} .ld-velden .rij2:has(> .veld[hidden]){grid-template-columns:1fr} }
.ld-fout{color:#8A1F11;font-size:var(--fs-sm);font-weight:600}
.ld-verstuur{width:100%;justify-content:center;border:0;cursor:pointer;line-height:inherit;margin-top:4px}
.ld-klaar:focus{outline:none}
.ld-klaar-kop{display:block;font-family:var(--font-h);font-size:1.35rem;margin-bottom:12px}
.ld-klaar p{color:var(--grijs)}
.ld-preview{
  margin-top:18px;font-size:var(--fs-sm);color:var(--grijs) !important;
  border-left:3px solid var(--goud-diep);padding:4px 0 4px 12px;
}
.ld-terug{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;margin-top:18px;padding:0;font-size:.95rem}

/* ---------- footer ---------- */
.ld-voet{display:grid;gap:16px;padding-bottom:10px}
@media (min-width:860px){ .ld-voet{grid-template-columns:auto 1fr auto;align-items:center;gap:40px} }
.ld-voet .merk{margin-bottom:0 !important}
.ld-voet p{max-width:48ch}
.ld-voet ul{flex-direction:row !important;flex-wrap:wrap;gap:8px 22px !important}
.actiebalk--landing .btn{flex:1}
.nw{white-space:nowrap}

/* =========================================================================
   Variant B: wit, zwart, goud uit het brandboek, strakke hoeken, lichte koppen
   ========================================================================= */
.variant-b .ld-top-tel{color:#000;font-weight:500}
.variant-b .ld-top-tel .ico{color:var(--goud-donker)}
.variant-b .ld-top-tel:hover{color:var(--goud-donker)}
.variant-b .ld-top-acties .btn{font-size:.72rem}
.variant-b .ld-feiten{border-top-color:var(--hairline)}
.variant-b .ld-feiten li{color:var(--grijs)}
.variant-b .ld-feiten .ico{color:var(--goud-donker)}
.variant-b .ld-groep h3{font-weight:500;letter-spacing:.12em;border-bottom-color:#000}
.variant-b .ld-branche{font-weight:300;font-size:1.12rem}
.variant-b .ld-stap-nr{border-radius:0}
.variant-b .ld-stap.is-actief .ld-stap-nr{color:#000}
.variant-b .ld-stap-tekst b{font-weight:300}
.variant-b .ld-vink li b{font-weight:500}
.variant-b .ld-teller b{font-weight:300}
.variant-b .ld-review,.variant-b .ld-case,.variant-b .ld-logo,.variant-b .ld-form,.variant-b .ld-modus span{border-radius:0}
.variant-b .ld-review blockquote{font-weight:300}
.variant-b .ld-form{box-shadow:none;border-color:#000}
.variant-b .ld-modus span{font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.variant-b .ld-modus input:checked + span{background:#000;border-color:#000}
.variant-b .ld-klaar-kop{font-weight:300}

/* spamval: alleen bots vullen dit veld in (api/aanvraag.js negeert ze dan) */
.ld-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Zo werkt het: twee echte schermen naast elkaar (David 5 nov); iets kleiner dan in de hero,
   anders passen ze precies op de pixel in de kolom van 464 px en klappen ze om */
.ld-werkt .fonen--hero .toestel{--fs:clamp(3.2px,1.05vw,5.2px)}