/* Opmaak per soort sectie: homepage, paginakoppen, aanbod, programmapagina's en tekstblokken.
   Elke pagina laadt tokens.css, basis.css en dit bestand. */

.sectie { padding-block: var(--r-6); }
.sectie--ruim { padding-block: var(--r-7); }
.sectie--vlak { background: var(--kleur-vlak); }
.sectie + .sectie:not(.sectie--vlak):not(.op-donker) { border-top: 1px solid var(--kleur-lijn); }
.sectie__kop { display: grid; gap: var(--r-3); max-width: 48rem; margin-bottom: var(--r-5); }

/* ── Homepage: eerste scherm met de vijver ───────────────────────── */
.held { position: relative; overflow-x: clip; padding-block: var(--r-5) var(--r-7); }
.held .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--r-5); align-items: center; }
.held__wat { font: 600 var(--kop-4)/1.3 var(--font-kop); color: var(--jtro-blauw); margin-bottom: var(--r-3); letter-spacing: -.005em; }
.held h1 { max-width: 12ch; }
.held .lead { margin-top: var(--r-4); max-width: 32rem; }
.vijver { position: relative; aspect-ratio: 1; }
.vijver .kringen { inset: -26%; width: 152%; height: 152%; max-width: none; }
.vijver .kringen circle { transform-origin: center; transform-box: view-box; animation: kring 2.4s cubic-bezier(.16, 1, .3, 1) both; }
.vijver .kringen circle:nth-child(2) { animation-delay: .12s; }
.vijver .kringen circle:nth-child(3) { animation-delay: .24s; }
.vijver .kringen circle:nth-child(4) { animation-delay: .36s; }
.vijver .kringen circle:nth-child(5) { animation-delay: .48s; }
@keyframes kring { from { transform: scale(.82); opacity: .2; } }
.vijver .foto { position: absolute; inset: 14%; width: auto; border-radius: 50%; border: 0; }
.vijver__steen { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--jtro-groen); top: 17%; right: 17%; box-shadow: 0 0 0 6px var(--kleur-achtergrond); }

/* ── Kring 1, 2, 3: hoe ver de spetters reiken ───────────────────── */
.bereik ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-5); }
.bereik li { display: grid; gap: var(--r-2); align-content: start; grid-template-rows: auto auto auto 1fr auto; }
.bereik li > svg { width: 76px; height: 76px; }
.bereik li > svg circle { fill: none; stroke: var(--jtro-blauw); stroke-width: 1.25; }
.bereik li > svg .steen { fill: var(--jtro-groen); stroke: none; }
.bereik__wie { font: 600 .875rem/1.3 var(--font-kop); color: var(--jtro-groen); }
.bereik li .link-pijl { justify-self: start; margin-top: var(--r-1); }

/* ── Twee kolommen: tekst naast beeld ────────────────────────────── */
.duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--r-5); align-items: center; }
.duo--om { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.duo--om > :first-child { order: 2; }
.duo > .f-4x5 { max-width: 400px; justify-self: center; }
.duo h2 { margin-bottom: var(--r-3); }

/* ── Stemmen van klanten ─────────────────────────────────────────── */
.stemmen { position: relative; overflow: hidden; }
.stemmen > .kringen { left: -260px; top: -260px; width: 760px; height: 760px; }
.stemmen > .kringen circle { opacity: .22; }
.stemmen .wrap { position: relative; }
.stem-groot { margin: 0 0 0 auto; max-width: 48rem; }
.stem-groot p { font: 500 clamp(1.25rem, 1rem + 1.1vw, 1.875rem)/1.42 var(--font-kop); color: #fff; letter-spacing: -.01em; }
.stem-groot p::before { content: "“"; display: block; font: 700 4.5rem/.6 var(--font-kop); color: var(--jtro-lucht); margin-bottom: var(--r-2); }
.stem footer, .stem-groot footer { margin-top: var(--r-3); font-size: .9375rem; color: var(--kleur-op-donker-zacht); }
.stem footer strong, .stem-groot footer strong { display: block; font: 600 1rem/1.3 var(--font-kop); }
.stemmen__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--r-4) var(--r-5); margin-top: var(--r-6); }
.stem { margin: 0; padding-top: var(--r-3); border-top: 1px solid var(--kleur-lijn-donker); }
.stem p { font-size: 1rem; }
/* Stemmen op een lichte achtergrond (programmapagina's) */
.licht .stem { border-top-color: var(--kleur-lijn); }
.licht .stem p { color: var(--kleur-tekst); }
.licht .stem footer { color: var(--kleur-tekst-zacht); }

/* ── Klanten als rustige tekstregel ──────────────────────────────── */
.klanten { font: 500 clamp(1.0625rem, 1rem + .4vw, 1.3rem)/1.8 var(--font-kop); color: var(--kleur-kop); letter-spacing: -.005em; }
.klanten span:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .7em .15em; border: 1px solid var(--jtro-blauw); border-radius: 50%; }

/* ── Paginakop van de andere pagina's ────────────────────────────── */
.paginakop { position: relative; overflow: hidden; padding-block: var(--r-5) var(--r-6); }
.paginakop > .kringen { right: -140px; top: -170px; width: 560px; height: 560px; }
.paginakop .wrap { position: relative; }
.paginakop h1 { max-width: 16ch; }
.paginakop .lead { margin-top: var(--r-3); max-width: 38rem; }
.terug { display: inline-flex; gap: .4rem; align-items: center; margin-bottom: var(--r-3); font: 500 .9375rem/1.3 var(--font-kop); text-decoration: none; }
.terug svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  .paginakop > .kringen { right: -190px; top: -200px; width: 420px; height: 420px; }
}

/* ── Aanbod: programma's als lijst, niet als kaartjes ────────────── */
.aanbod { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--kleur-lijn); }
.aanbod li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: var(--r-2) var(--r-5); align-items: start; padding-block: var(--r-4); border-top: 1px solid var(--kleur-lijn); }
.aanbod h3 a { color: inherit; text-decoration: none; }
.aanbod h3 a:hover { color: var(--jtro-blauw); }
.aanbod__kort { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: var(--r-2); font-size: .875rem; color: var(--kleur-tekst-zacht); }
.aanbod .link-pijl { white-space: nowrap; margin-top: .3rem; }

/* ── Lijsten met kringen als opsommingsteken ─────────────────────── */
.kringlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kringlijst li { position: relative; padding-left: 1.75rem; }
.kringlijst li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--jtro-blauw);
  box-shadow: 0 0 0 3px var(--kleur-achtergrond), 0 0 0 4px rgba(0, 91, 130, .25);
}
.sectie--vlak .kringlijst li::before { box-shadow: 0 0 0 3px var(--kleur-vlak), 0 0 0 4px rgba(0, 91, 130, .25); }
.kringlijst--twee { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .9rem var(--r-5); }

/* ── Stappen: volgorde telt, dus genummerd in een kring ──────────── */
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; gap: var(--r-3); }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--r-3); align-items: start; }
.stappen li::before {
  content: counter(stap);
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--jtro-blauw);
  box-shadow: 0 0 0 5px var(--kleur-achtergrond), 0 0 0 6px rgba(0, 91, 130, .22);
  font: 600 1rem/1 var(--font-kop); color: var(--jtro-blauw);
  font-variant-numeric: tabular-nums;
}
.stappen li > * { padding-top: .45rem; }
.sectie--vlak .stappen li::before { box-shadow: 0 0 0 5px var(--kleur-vlak), 0 0 0 6px rgba(0, 91, 130, .22); }

/* ── Programmapagina: tekst links, "in het kort" rechts ──────────── */
.programma { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--r-5) var(--r-6); align-items: start; }
.programma__tekst { display: grid; gap: var(--r-5); }
.programma__tekst h2 { font-size: var(--kop-3); font-weight: 700; margin-bottom: var(--r-2); }
.kort { position: sticky; top: var(--r-3); padding: var(--r-4); background: var(--kleur-vlak); border-top: 2px solid var(--jtro-blauw); }
.kort h2 { font: 600 .9375rem/1.3 var(--font-kop); letter-spacing: .02em; margin-bottom: var(--r-2); }
.kort ul { list-style: none; margin: 0; padding: 0; }
.kort li { padding-block: .6rem; border-top: 1px solid var(--kleur-lijn); font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.kort li:first-child { border-top: 0; padding-top: 0; }
.kort .knop { width: 100%; justify-content: center; margin-top: var(--r-3); }
.kort .link-pijl { margin-top: var(--r-2); font-size: .9375rem; }

/* ── Verhaal: paradoxen en waarden ───────────────────────────────── */
.paradoxen { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--kleur-lijn); }
.paradoxen li { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--r-3); align-items: baseline; padding-block: .95rem; border-top: 1px solid var(--kleur-lijn); font: 500 var(--kop-4)/1.35 var(--font-kop); color: var(--kleur-kop); }
.paradoxen li > span:first-child { text-align: right; }
.paradoxen li > span:last-child { color: var(--jtro-blauw); }
.paradoxen .en { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid var(--jtro-water); border-radius: 50%; font-size: .875rem; color: var(--jtro-groen); font-weight: 700; }
.waarden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--r-4); margin: 0; }
.waarden div { padding-top: var(--r-2); border-top: 1px solid var(--jtro-blauw); }
.waarden dt { font: 700 var(--kop-4)/1.3 var(--font-kop); color: var(--kleur-kop); margin-bottom: .4rem; }
.waarden dd { margin: 0; font-size: .9375rem; }

/* ── Contactpagina ───────────────────────────────────────────────── */
.wegen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-4); }
.wegen div { padding-top: var(--r-2); border-top: 1px solid var(--jtro-blauw); display: grid; gap: .3rem; }
.wegen a { font: 600 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.25 var(--font-kop); text-decoration: none; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wegen a:hover { text-decoration: underline; }
.adressen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-3); margin-top: var(--r-4); }
.adressen address { font-style: normal; font: 600 1.0625rem/1.4 var(--font-kop); color: var(--kleur-kop); }
.adressen span { display: block; font: 400 .875rem/1.4 var(--font-tekst); color: var(--kleur-tekst-zacht); }

@media (max-width: 860px) {
  .held .wrap, .duo, .duo--om, .bereik ol, .programma, .wegen { grid-template-columns: 1fr; }
  .duo--om > :first-child { order: 0; }
  .vijver { width: min(100%, 320px); margin: var(--r-2) auto 0; }
  .aanbod li { grid-template-columns: 1fr; }
  .kort { position: static; order: -1; } /* praktische gegevens eerst op de telefoon */
  .stemmen > .kringen { left: -420px; top: -420px; }
  .paradoxen li { grid-template-columns: 1fr; gap: .35rem; text-align: left; }
  .paradoxen li > span:first-child { text-align: left; }
  .paradoxen .en { width: 1.9rem; height: 1.9rem; }
}
@media (max-width: 520px) {
  .adressen { grid-template-columns: 1fr; }
}

/* Kop boven een leesblok krijgt lucht, en stemmen onder een kop sluiten aan */
.lees > h2 { margin-bottom: var(--r-3); }
.licht .stemmen__rij { margin-top: var(--r-3); }
.kort p { margin-top: var(--r-1); }

/* ── Handleiding: voorbeelden van code ───────────────────────────── */
.code { margin: var(--r-1) 0 var(--r-3); padding: var(--r-2); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--jtro-diep); color: var(--kleur-op-donker); border-radius: var(--hoek); font: 400 .875rem/1.6 ui-monospace, Consolas, monospace; }
:not(pre) > code { font: 500 .9em/1 ui-monospace, Consolas, monospace; background: var(--kleur-vlak); padding: .1em .3em; border-radius: var(--hoek); }