/* meebouwen.taqqle.com · eigen stijlen bovenop tokens, basis en paginas (kopieën van taqqle.com). Alleen tokens, geen losse kleuren. */

/* Kop: de kernregel onder de lead, als drie korte feiten */
.kern { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-24); padding: 0; list-style: none; }
.kern li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--pil); background: var(--mint-50); color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 600; }

/* De ruil: twee bladen even groot naast elkaar, op de telefoon onder elkaar */
.ruil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); margin-top: var(--kop-ruimte); }
.ruil .blad { box-shadow: var(--s-1, 0 0 0 1px var(--lijn)); }
.ruil h3 { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: -0.02em; }
.ruil ul { display: grid; gap: var(--sp-12); margin-top: var(--sp-16); padding: 0; list-style: none; }
.ruil li { position: relative; padding-left: 28px; color: var(--tekst); font-size: var(--fs-tekst); line-height: var(--lh-tekst); }
.ruil li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 8px; border-left: 2px solid var(--mint-700); border-bottom: 2px solid var(--mint-700); transform: rotate(-45deg); }
.ruil__geld { margin-top: var(--sp-24); max-width: 44em; color: var(--tekst); font-size: var(--fs-tekst); line-height: var(--lh-tekst); }

/* Twee dingen bouwen: twee korte blokken */
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32); margin-top: var(--kop-ruimte); }
.twee h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.twee p { margin-top: var(--sp-8); }

/* Voor wie: korte lijst */
.wie-lijst { display: grid; gap: var(--sp-12); margin-top: var(--sp-24); padding: 0; list-style: none; }
.wie-lijst li { padding: 14px 16px; border-radius: var(--r-12); background: var(--vlak); color: var(--ink); font-size: 17px; line-height: 24px; font-weight: 500; }

/* Zo gaat het: vier stappen */
.stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-24); margin-top: var(--kop-ruimte); padding: 0; list-style: none; counter-reset: stap; }
.stappen li { counter-increment: stap; padding-top: var(--sp-16); border-top: 2px solid var(--ink); }
.stappen li::before { content: counter(stap); display: block; color: var(--mint-700); font-size: 15px; line-height: 22px; font-weight: 700; }
.stappen h3 { margin-top: var(--sp-4); font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.stappen p { margin-top: var(--sp-8); }

/* Na de lijst van wie we zoeken: de eerlijke zin */
.wie-na { margin-top: var(--sp-24); }

/* Aanmelden: kop links, formulier rechts; de kop loopt mee op desktop */
.aanmelden__kop .tekst { margin-top: var(--sp-16); }
#aanmelden, #ruil { scroll-margin-top: calc(var(--balk) + var(--sp-16)); }
#aanmelden:focus { outline: none; }

@media (min-width: 1041px) {
  .aanmelden__kop { position: sticky; top: 96px; align-self: start; }
}
@media (max-width: 1040px) {
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aanmelden .blad--formulier { margin-top: var(--sp-32); }
}
@media (max-width: 760px) {
  .ruil, .twee, .stappen { grid-template-columns: minmax(0, 1fr); }
}