/* Koppelingen laten maken: navy hero (glaspaneel met drie koppelingen en een melding) → wit (wat is een
   API-koppeling) → licht (standaard of maatwerk) → wit (welke systemen) → nacht (de case uit Ede)
   → licht (zo gaat het, met prijzen bij de stappen) → wit (prijs, #prijs) → licht (vragen) → blauwe CTA.
   De glimlach is hier de koppeling tussen twee systemen. */

/* ---- hero: de kop past in de tekstkolom; langste woord 'KOPPELINGEN' ---- */
.pagina-koppelingen .hero__tekst{min-width:0;}
.pagina-koppelingen .hero h1{font-size:clamp(38px,4.6vw,66px);padding-bottom:.55em;}
.pagina-koppelingen .hero__tekst .hero__lead{margin-top:26px;}
@media (max-width:900px){
  .pagina-koppelingen .hero h1{font-size:clamp(36px,7.6vw,62px);}
  .pagina-koppelingen .hero__beeld{max-width:460px;}
}
@media (max-width:440px){.pagina-koppelingen .hero h1{font-size:min(calc(10.4vw - 2px),40px);}}

/* glaspaneel: drie rijen 'systeem — glimlach — systeem' en een melding eronder */
.pagina-koppelingen .kp-paneel{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);}
.pagina-koppelingen .kp-paneel .glas__kop{border-bottom-color:rgba(255,255,255,.14);}
.pagina-koppelingen .kp-rijen{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.pagina-koppelingen .kp-rij{display:grid;grid-template-columns:minmax(0,1fr) clamp(44px,5vw,76px) minmax(0,1fr);align-items:center;gap:8px;animation:plop .45s var(--ease) both;animation-delay:calc(700ms + var(--k,0) * 120ms);}
.pagina-koppelingen .kp-rij:nth-child(2){--k:1}.pagina-koppelingen .kp-rij:nth-child(3){--k:2}
.pagina-koppelingen .kp-sys{display:block;padding:11px 8px;border-radius:12px;background:var(--wit);color:var(--navy);font:600 15px/1.2 var(--f-tekst);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 14px 30px -18px rgba(7,20,42,.6);}
.pagina-koppelingen .kp-lijn{position:relative;display:grid;place-items:center;height:30px;}
.pagina-koppelingen .kp-lijn::before{content:"";position:absolute;left:0;right:0;top:9px;border-top:2px dashed rgba(126,166,247,.55);}
.pagina-koppelingen .kp-glimlach{position:relative;width:34px;height:27px;color:var(--lucht);}
.pagina-koppelingen .kp-toast{margin-top:20px;--k:3;}
@media (max-width:400px){
  .pagina-koppelingen .kp-rij{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:4px;}
  .pagina-koppelingen .kp-sys{padding:10px 6px;font-size:13.5px;}
  .pagina-koppelingen .kp-glimlach{width:26px;height:21px;}
  .pagina-koppelingen .kp-toast{min-width:0;}
}

/* ---- wat is een API-koppeling ---- */
.pagina-koppelingen .kp-uitleg > p{font-size:17.5px;color:var(--tekst-zacht);max-width:62ch;}
.pagina-koppelingen .kp-uitleg > p + p{margin-top:18px;}
.pagina-koppelingen .kp-herken{margin-top:32px;gap:0;padding:clamp(24px,3.4vw,36px);}
.pagina-koppelingen .kp-herken h3{font-size:20px;}
.pagina-koppelingen .kp-herken .vink{margin-top:20px;color:var(--tekst);}
.pagina-koppelingen .kp-herken p{margin-top:24px;padding-top:20px;border-top:1px solid var(--lijn);}

/* ---- standaard of maatwerk ---- */
.pagina-koppelingen .kp-lijst{margin-top:8px;color:var(--tekst);font-size:16.5px;}
.pagina-koppelingen .kp-provisie{display:flex;align-items:flex-start;gap:16px;margin-top:36px;padding-top:28px;border-top:1px solid var(--grijs);max-width:60ch;}
.pagina-koppelingen .kp-provisie .chip{background:var(--wit);border:1px solid var(--grijs);}
.pagina-koppelingen .kp-provisie h3{font-size:18px;}
.pagina-koppelingen .kp-provisie p{margin-top:6px;font-size:16px;color:var(--tekst-zacht);}

/* ---- systemen ---- */
.pagina-koppelingen .kp-noot{margin-top:32px;max-width:70ch;font-size:16px;color:var(--tekst-zacht);}
@media (max-width:640px){
  .pagina-koppelingen .kp-systemen{gap:14px;}
  .pagina-koppelingen .kp-systemen .kaart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:start;padding:20px;}
  .pagina-koppelingen .kp-systemen .chip{grid-row:span 2;margin:0;}
  .pagina-koppelingen .kp-systemen h3{font-size:18px;}
  .pagina-koppelingen .kp-systemen p{font-size:15.5px;}
}

/* ---- case ---- */
.pagina-koppelingen .kp-case-knop{margin-top:32px;}

/* ---- zo gaat het: prijs onder een stap ---- */
.pagina-koppelingen .kp-stappen .kaart__voet{margin-top:20px;max-width:none;}
.pagina-koppelingen .kp-stappen .prijs{display:inline-flex;align-items:baseline;gap:8px;font-size:24px;}
.pagina-koppelingen .kp-stappen .prijs small{font:600 14px/1 var(--f-tekst);color:var(--tekst-zacht);}
.pagina-koppelingen .kp-stappen .stap:nth-child(5),.pagina-koppelingen .kp-stappen .stap:nth-child(5)::after{transition-delay:480ms;}
@media (max-width:640px){.pagina-koppelingen .kp-stappen .kaart__voet{flex-direction:column;align-items:flex-start;gap:4px;}}

/* ---- prijs ---- */
.pagina-koppelingen #prijs{scroll-margin-top:72px;}
.pagina-koppelingen .kp-afhankelijk{margin-top:32px;padding-top:28px;border-top:1px solid var(--grijs);}
.pagina-koppelingen .kp-afhankelijk h3{font-size:18px;}
.pagina-koppelingen .kp-afhankelijk .vink{margin-top:16px;font-size:16.5px;color:var(--tekst);}
.pagina-koppelingen .kp-afhankelijk p{margin-top:18px;font-size:16px;color:var(--tekst-zacht);}
.pagina-koppelingen .kp-prijskolom{min-width:0;}
.pagina-koppelingen .kp-prijskaart{gap:0;padding:clamp(28px,4vw,40px);}
.pagina-koppelingen .kp-koppel{display:flex;align-items:flex-start;justify-content:center;padding:6px 0 30px;margin-bottom:28px;border-bottom:1px solid var(--lijn);}
.pagina-koppelingen .kp-systeem{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:var(--r-pil);background:var(--wolk);border:1px solid var(--grijs);font:600 15px/1.2 var(--f-tekst);color:var(--navy);white-space:nowrap;}
.pagina-koppelingen .kp-systeem .chip{margin:0;box-shadow:none;}
.pagina-koppelingen .kp-boog{flex:none;width:132px;height:auto;margin:17px -2px 0;color:var(--blauw);overflow:visible;}
.pagina-koppelingen .kp-boog__lijn{fill:none;stroke:var(--blauw);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 6;stroke-dashoffset:0;opacity:.55;}
.pagina-koppelingen .kp-prijs{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font:900 56px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--navy);}
.pagina-koppelingen .kp-prijs small{font:600 16px/1 var(--f-tekst);letter-spacing:0;color:var(--tekst-zacht);}
.pagina-koppelingen .kp-duur{margin-top:12px;font-size:15px;color:var(--tekst-zacht);}
.pagina-koppelingen .kp-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.pagina-koppelingen .kp-onderhoud{display:flex;align-items:flex-start;gap:16px;margin-top:28px;padding:22px 24px;border-radius:var(--r-m);background:var(--wolk);border:1px solid var(--grijs);}
.pagina-koppelingen .kp-onderhoud .chip{background:var(--wit);border:1px solid var(--grijs);}
.pagina-koppelingen .kp-onderhoud h3{font-size:18px;}
.pagina-koppelingen .kp-onderhoud p{margin-top:6px;font-size:16px;color:var(--tekst-zacht);}
.pagina-koppelingen .kp-prijskolom > .review{margin-top:28px;}
@media (max-width:640px){
  .pagina-koppelingen .kp-prijs{font-size:46px;}
  .pagina-koppelingen .kp-systeem{padding:0 14px;min-height:40px;font-size:14px;}
  .pagina-koppelingen .kp-systeem .chip{display:none;}
  .pagina-koppelingen .kp-boog{width:96px;margin-top:15px;}
  .pagina-koppelingen .kp-acties{flex-direction:column;align-items:stretch;}
}
/* 320px / 400% zoom (WCAG 1.4.10): 'Systeem A — glimlach — Systeem B' krimpt mee. */
@media (max-width:400px){
  .pagina-koppelingen .kp-systeem{padding:0 10px;font-size:13px;}
  .pagina-koppelingen .kp-boog{width:56px;margin-inline:-4px;}
}
@media (prefers-reduced-motion:reduce){.pagina-koppelingen .kp-rij{animation:none;}}
.pagina-koppelingen .kp-prijssplit{align-items:start;}