/* ══════════════════════════════════════════════════════════════
   QiCheckup (qicheckup.nl / qicheckup.com), nov. 2026
   Kleuren uit het logo (drie groentinten) plus warm goud voor knoppen.
   Lettertypen staan op de eigen server (geen Google Fonts).
══════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Lora'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/lora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/lora-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/lora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/lora-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 200; font-style: normal; font-display: swap; src: url('../fonts/jost-latin-200-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/jost-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/jost-latin-600-normal.woff2') format('woff2'); }

:root {
  --mist: #dce9df;        /* buitenste ring */
  --salie: #8faf9b;       /* middelste ring */
  --groen: #456b57;       /* kern */
  --woud: #2c4a3b;        /* koppen */
  --tekst: #26322b;
  --zacht: #56645b;       /* bijtekst (contrast 5,9:1 op papier) */
  --papier: #f8f7f2;
  --wit: #ffffff;
  --goud: #c9973a;        /* knoppen, met donkere tekst (contrast 5:1) */
  --goud-licht: #d8ab55;
  --goud-tekst: #1e3428;
  --lijn: #dfe3da;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --breed: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tekst); font: 400 1.0625rem/1.75 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--groen); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--woud); }
:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; border-radius: 2px; }
.skiplink { position: absolute; left: -999px; top: 8px; background: var(--wit); padding: 8px 14px; z-index: 50; }
.skiplink:focus { left: 16px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--woud); line-height: 1.25; margin: 0 0 .5em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.05rem); }
h3 { font-size: 1.15rem; font-weight: 500; }
p { margin: 0 0 1.1em; }
.label { display: block; font: 600 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--groen); margin-bottom: 14px; }

/* ── Kop ── */
/* Menubalk: vast bovenaan, iets groenere tint, met voortgangsbalkje (zoals CW en MV) */
.kop { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px max(24px, calc((100% - var(--breed)) / 2 + 24px));
  background: rgba(242,241,234,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(38,50,43,.08); }
@keyframes scroll-voortgang { to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  .kop::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--goud);
    transform: scaleX(0); transform-origin: left; animation: scroll-voortgang linear both;
    animation-timeline: scroll(root block); pointer-events: none; }
}
.kop-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--woud); }
.kop-naam { font: 500 1.3rem/1 var(--sans); letter-spacing: .01em; }
.kop-naam span { display: block; font: 400 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--zacht); margin-top: 6px; }
.kop-nav { display: flex; align-items: center; gap: 26px; font-size: .9rem; letter-spacing: .06em; }
.kop-nav > a { color: var(--tekst); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.kop-nav > a:hover, .kop-nav > a[aria-current] { border-color: var(--salie); color: var(--woud); }
.taal { display: flex; gap: 2px; font-size: .78rem; letter-spacing: .12em; border: 1px solid var(--lijn); border-radius: 99px; padding: 3px; }
.taal > * { padding: 3px 10px; border-radius: 99px; text-decoration: none; color: var(--zacht); }
.taal [aria-current] { background: var(--groen); color: var(--wit); }
.taal a:hover { color: var(--woud); background: var(--mist); }

/* ── Hero ── */
.hero { position: relative; text-align: center; padding: 40px 24px 96px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1;
  background: radial-gradient(closest-side, rgba(220,233,223,.95), rgba(220,233,223,0) 70%) center 30% / 900px 900px no-repeat; }
.ringen { width: clamp(150px, 26vw, 210px); height: auto; margin: 10px auto 30px; display: block; }
.ringen { overflow: visible; }
.ringen circle { transform-origin: 50% 50%; transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .ringen .r1 { animation: adem 9s ease-in-out infinite; }
  .ringen .r2 { animation: adem 9s ease-in-out .6s infinite; }
  .ringen .r3 { animation: adem 9s ease-in-out 1.2s infinite; }
  @keyframes adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
}
.hero h1 { font-family: var(--sans); font-size: clamp(2.4rem, 7vw, 3.8rem); font-weight: 400; letter-spacing: .01em; line-height: 1.05; margin: 0; }
.hero .onder { font: 400 clamp(.82rem, 1.6vw, .98rem)/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--zacht); margin: 16px 0 28px; }
.status { display: inline-flex; align-items: center; gap: 10px; font: 600 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--woud); background: var(--wit); border: 1px solid var(--lijn); border-radius: 99px; padding: 10px 18px; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--goud); box-shadow: 0 0 0 4px rgba(201,151,58,.18); }
.hero .intro { max-width: 600px; margin: 28px auto 34px; font-size: 1.1rem; }
.acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px; }

/* Knoppen: één opvallende knop per blok, tweede actie als tekstlink */
.knop { display: inline-flex; align-items: center; gap: 10px; background: var(--goud); color: var(--goud-tekst);
  font: 600 .82rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 17px 28px; border-radius: 99px; border: 0; cursor: pointer; box-shadow: 0 8px 22px rgba(201,151,58,.28);
  transition: background .2s, transform .2s, box-shadow .2s; }
.knop:hover, .knop:focus-visible { background: var(--goud-licht); color: var(--goud-tekst); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(201,151,58,.34); }
.knop svg { transition: transform .2s; }
.knop:hover svg { transform: translateX(3px); }
.tekstlink { font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--groen);
  text-decoration: none; border-bottom: 1px solid rgba(69,107,87,.35); padding-bottom: 4px; }
.tekstlink:hover { color: var(--woud); border-color: var(--woud); }

/* ── Secties ── */
.sectie { padding: 88px 24px; }
.sectie-mist { background: linear-gradient(180deg, #edf3ee, #e3ede6); }
.smal { max-width: 660px; margin: 0 auto; }
.breed { max-width: var(--breed); margin: 0 auto; }
.midden { text-align: center; }

.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; counter-reset: stap; }
.stap { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 30px 28px 26px; position: relative; }
.stap::before { counter-increment: stap; content: counter(stap); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mist); color: var(--woud); font: 500 1.1rem/1 var(--serif); margin: 0 auto 18px; box-shadow: inset 0 0 0 7px #eaf2ec; }
.stap h3 { margin-bottom: .35em; }
.stap p { margin: 0; color: var(--zacht); font-size: 1rem; }

.citaat { font: italic 400 clamp(1.15rem, 2.4vw, 1.4rem)/1.5 var(--serif); color: var(--groen); text-align: center; margin: 34px auto 0; max-width: 560px; }

.over { display: grid; grid-template-columns: 180px 1fr; gap: 48px; align-items: center; max-width: 760px; margin: 0 auto; }
.over-foto { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px var(--mist), 0 14px 34px rgba(44,74,59,.18); }
.over-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.over p:last-child { margin-bottom: 0; }

.goed-om-te-weten { max-width: 660px; margin: 0 auto; background: var(--wit); border: 1px solid var(--lijn); border-left: 4px solid var(--salie);
  border-radius: 6px 14px 14px 6px; padding: 26px 30px; font-size: .98rem; }
.goed-om-te-weten h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: .4em; }
.goed-om-te-weten p:last-child { margin-bottom: 0; }

.slot { text-align: center; }
.slot .acties { margin-top: 30px; }
.acties.ruim { margin-top: 34px; }
.hero { isolation: isolate; }

/* ── Contact ── */
.pagina-kop { text-align: center; padding: 30px 24px 10px; }
.pagina-kop h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); font-weight: 400; }
.pagina-kop p { max-width: 600px; margin: 0 auto; }
.formulier-blok { max-width: 640px; margin: 0 auto; padding: 36px 24px 96px; }
.formulier { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: 34px 32px; }
.veld { margin-bottom: 20px; }
.veld label { display: block; font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--woud); margin-bottom: 9px; }
.veld input, .veld textarea { width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--tekst); background: var(--papier);
  border: 1px solid #cfd8d0; border-radius: 10px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.veld textarea { min-height: 170px; resize: vertical; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--groen); box-shadow: 0 0 0 3px rgba(69,107,87,.15); background: var(--wit); }
.veld .hulp { font-size: .86rem; color: var(--zacht); margin: 7px 0 0; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.verstuur-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.verstuur-rij small { color: var(--zacht); font-size: .9rem; }
.h-captcha { min-height: 78px; }
.melding { max-width: 640px; margin: 18px auto 0; padding: 14px 18px; border-radius: 10px; background: #fbeee6; border: 1px solid #ecc9b5; color: #6d3418; font-size: .95rem; }
.captcha-hint { color: #8a3a12; font-size: .9rem; margin: 8px 0 0; }
.email-fout { color: #8a3a12; font-size: .88rem; margin: 6px 0 0; }
.email-fout button { font: inherit; color: var(--groen); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.samenvatting { background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 22px 26px; margin-top: 26px; font-size: .97rem; }
.samenvatting dt { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); margin-top: 14px; }
.samenvatting dt:first-child { margin-top: 0; }
.samenvatting dd { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Privacy ── */
.tekstpagina { max-width: 700px; margin: 0 auto; padding: 20px 24px 90px; }
.tekstpagina h2 { font-size: 1.35rem; font-weight: 500; margin-top: 1.6em; }
.tekstpagina .klein { color: var(--zacht); font-size: .9rem; }

/* ── Voet ── */
.voet { text-align: center; padding: 56px 24px 46px; border-top: 1px solid var(--lijn); background: var(--wit); font-size: .9rem; color: var(--zacht); }
.voet-naam { font: 400 1.2rem/1 var(--sans); letter-spacing: .02em; color: var(--woud); margin: 10px 0 14px; }
.voet-links, .voet-copy { margin: 0 0 8px; }
.voet span { margin: 0 9px; color: var(--salie); }
.voet a { color: var(--zacht); text-decoration: none; }
.voet a:hover { color: var(--woud); text-decoration: underline; }

/* ── Mobiel ── */
@media (max-width: 760px) {
  .stappen { grid-template-columns: 1fr; gap: 16px; }
  .over { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .over-foto { margin: 0 auto; width: 150px; height: 150px; }
  .sectie { padding: 66px 20px; }
}
@media (max-width: 560px) {
  .kop { padding: 12px 16px; gap: 10px; }
  .kop-naam { font-size: 1.15rem; }
  .kop-naam span { display: none; }
  .kop-nav { gap: 14px; font-size: .84rem; }
  .kop-nav > a[href$="/"]:first-child { display: none; }
  .hero { padding: 14px 16px 70px; }
  .ringen { width: 124px; margin: 4px auto 18px; }
  .hero h1 { font-size: 2.3rem; }
  .hero .onder { margin-bottom: 18px; }
  .hero .intro { margin: 20px auto 26px; font-size: 1.02rem; }
  .status { font-size: .66rem; letter-spacing: .14em; padding: 9px 14px; }
  .acties { flex-direction: column; gap: 22px; }
  .knop { width: 100%; justify-content: center; }
  .formulier { padding: 26px 20px; border-radius: 16px; }
  .formulier-blok { padding: 26px 16px 70px; }
  .goed-om-te-weten { padding: 22px 20px; }
}

/* ── FAQ en onderzoek ── */
.faq details { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; position: relative;
  font: 500 1.05rem/1.4 var(--serif); color: var(--woud); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--mist); color: var(--woud);
  display: grid; place-items: center; font: 400 1.2rem/1 var(--sans); transition: transform .2s; }
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--groen); }
.faq details > *:not(summary) { margin: 0 22px 16px; }
.faq details > *:last-child { margin-bottom: 22px; }
.tabel-wrap { overflow-x: auto; margin: 0 0 1.2em; -webkit-overflow-scrolling: touch; }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.55; background: var(--wit); }
.tabel th { text-align: left; font: 600 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--woud);
  background: var(--mist); padding: 10px 12px; }
.tabel td { vertical-align: top; padding: 12px; border-top: 1px solid var(--lijn); }
.tabel td:first-child { min-width: 150px; }
.tabel td:last-child { min-width: 220px; }
.tekstpagina ul { padding-left: 1.2em; }
.tekstpagina ul li { margin-bottom: .45em; }
.bronnen { font-size: .9rem; color: var(--zacht); }
@media (max-width: 560px) { .kop-nav { gap: 12px; } .faq summary { font-size: 1rem; padding: 16px 50px 16px 18px; } }
/* tabel als kaarten op mobiel */
@media (max-width: 640px) {
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel thead { display: none; }
  .tabel { background: none; }
  .tabel tr { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 6px 14px; margin-bottom: 12px; }
  .tabel td { border: 0; padding: 8px 0; min-width: 0 !important; }
  .tabel td + td { border-top: 1px solid var(--lijn); }
  .tabel td::before { content: attr(data-label); display: block; font: 600 .66rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); margin-bottom: 3px; }
}

/* ── Vinkje in het logo: wordt bij het openen van de pagina 'gezet' ── */
.ringen .vink { stroke-dasharray: 1; stroke-dashoffset: 0; transform-origin: 50% 50%; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .ringen .vink { animation: vink-zet .9s cubic-bezier(.65,0,.35,1) .6s both, adem 9s ease-in-out 1.2s infinite; }
  @keyframes vink-zet { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}

/* ── Hero beeldvullend, met een iets groenere tint dan de rest ── */
.hero { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-top: 32px; padding-bottom: 56px; background: linear-gradient(180deg, #f3f6f1 0%, #e8f0ea 100%);
  border-bottom: 1px solid rgba(69,107,87,.08); }
.hero > * { flex: none; }
@media (max-width: 560px) { .hero { min-height: calc(100svh - 60px); padding-top: 14px; padding-bottom: 36px; } .hero .acties { align-self: stretch; } }

/* ── Scrollpijltje onder in de hero (zelfde animatie als chinesewijsheid.nl) ── */
.hero { padding-bottom: 104px; }
.scroll-hint { position: absolute; bottom: 26px; left: calc(50% - 26px); width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center; text-decoration: none; }
.scroll-ring { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: rgba(143,175,155,.22); }
.scroll-dot { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(69,107,87,.18);
  display: flex; align-items: center; justify-content: center; }
.scroll-dot::before { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: rgba(69,107,87,.62); }
.scroll-dot svg { position: relative; z-index: 1; }
.scroll-hint:focus-visible { outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint { opacity: 0; animation: scroll-in 1s ease 1.6s forwards, scroll-bob 2.2s ease-in-out 2.6s infinite; }
  .scroll-ring { animation: scroll-puls 2.2s ease-in-out infinite; }
  @keyframes scroll-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  @keyframes scroll-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
  @keyframes scroll-puls { 0% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
}
@media (min-width: 561px) and (max-height: 860px) { .hero { padding-top: 18px; padding-bottom: 92px; } .ringen { width: 140px; margin: 0 auto 18px; }
  .hero .onder { margin: 10px 0 18px; } .hero .intro { margin: 18px auto 22px; } .scroll-hint { bottom: 18px; } }
@media (max-width: 560px), (max-height: 680px) { .scroll-hint { display: none; } .hero { padding-bottom: 36px; } }

/* ── Hero: naam en ondertitel even breed, als één logo (zoals in de menubalk) ── */
.hero { --t: clamp(2.4rem, 7vw, 3.8rem); }
.hero h1 { font-size: var(--t); }
.hero .onder { font-size: calc(var(--t) * .311); letter-spacing: .45em; padding-left: .45em; margin-top: 12px; }
html[lang="en"] .hero .onder { font-size: calc(var(--t) * .276); }
@media (max-width: 560px) { .hero { --t: 2.3rem; } }

/* ── Hero zoals op Chinese Wijsheid: kleine bovenregel, slogan in Lora ── */
.hero .eyebrow { font: 400 clamp(.8rem, 1.5vw, .92rem)/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--zacht); margin: 0 0 16px; }
.hero h1.slogan { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 2.9rem); line-height: 1.3; letter-spacing: .01em; color: var(--woud); margin: 0 0 26px; }
.hero h1.slogan span { display: block; font-size: .8em; }
@media (max-width: 560px) { .hero h1.slogan { font-size: min(1.95rem, 6.6vw); margin-bottom: 20px; } }
@media (max-width: 400px) {
  .kop-naam { white-space: nowrap; font-size: 1.08rem; }
  .kop-logo { gap: 8px; }
  .kop-nav { gap: 10px; }
  .taal > * { padding: 3px 8px; }
  .status { letter-spacing: .1em; padding: 10px 14px; }
}
@media (max-width: 345px) { .kop-naam { white-space: normal; } }
/* Voet: regel mag op smalle schermen afbreken naast de puntjes */
.voet-copy > span::after, .voet-links > span::after { content: ' '; }

/* ── Natuurlijker (nov. 2026): warme achtergrond, bergen in de mist, penseelvinkje ── */
.hero { background: linear-gradient(180deg, #f8f7f1 0%, #f1f3eb 55%, #e9efe6 100%); }
.hero::before { background: radial-gradient(closest-side, rgba(220,233,223,.75), rgba(220,233,223,0) 70%) center 30% / 900px 900px no-repeat; }
.hero-natuur { position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; max-width: none; height: min(36%, 340px);
  object-fit: cover; object-position: center bottom; pointer-events: none; user-select: none; opacity: .5; }
.hero > :not(.hero-natuur):not(.scroll-hint):not(.lucht) { position: relative; z-index: 1; }
.hero .scroll-hint { z-index: 1; }
@media (max-width: 700px) { .hero-natuur { width: 160%; left: -30%; height: min(30%, 220px); } }
.ringen .penseel { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-natuur { opacity: 0; animation: natuur-in 2.4s ease .4s forwards; }
  @keyframes natuur-in { to { opacity: .5; } }
  .penseel-veeg { stroke-dasharray: 1; stroke-dashoffset: 1; animation: penseel-veeg 1.1s cubic-bezier(.6,0,.3,1) .7s forwards; }
  @keyframes penseel-veeg { to { stroke-dashoffset: 0; } }
  .ringen .penseel { animation: adem 9s ease-in-out 1.2s infinite; }
}

/* ── Wolkjes (nov. 2026): twee zachte wolkjes die heel langzaam door de lucht van de hero drijven ── */
.lucht { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wolk { position: absolute; left: 0; width: 340px; height: 90px; opacity: 0; filter: blur(2px);
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)) 0 30px / 170px 60px no-repeat,
              radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)) 90px 0 / 170px 80px no-repeat,
              radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)) 170px 24px / 170px 62px no-repeat; }
.wolk-1 { top: 12%; }
.wolk-2 { top: 24%; width: 240px; height: 64px; background-size: 120px 44px, 120px 58px, 120px 44px; background-position: 0 20px, 64px 0, 120px 18px; }
@media (prefers-reduced-motion: no-preference) {
  .wolk-1 { animation: wolk-drijf 140s linear -30s infinite; }
  .wolk-2 { animation: wolk-drijf 190s linear -120s infinite; }
  @keyframes wolk-drijf { 0% { transform: translateX(105vw); opacity: 0; } 6% { opacity: .7; } 94% { opacity: .7; } 100% { transform: translateX(-110%); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .lucht { display: none; } }

/* ── Menubalk zoals op Chinese Wijsheid (nov. 2026): over de volle breedte, alleen de naam, rustige links ── */
.kop-nav > a { color: #4a5a50; border-bottom: 0; padding: 4px 0; transition: color .2s; }
.kop-nav > a:hover { color: var(--woud); }
.kop-nav > a[aria-current] { color: var(--groen); -webkit-text-stroke: .45px currentColor; }
.kop::after { height: 5px; }
@media (min-width: 561px) {
  .kop { padding: 14px clamp(24px, 3.4vw, 48px); }
  .kop-nav { gap: 36px; font-size: .92rem; letter-spacing: .05em; }
  .kop-nav .taal { margin-left: 0; }
}
@media (max-width: 400px) { .kop-logo svg { width: 32px; height: 32px; } }

/* ── Ervaringen van cliënten (nov. 2026) ── */
.ervaringen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; text-align: left; }
.ervaring { margin: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 30px 28px 24px; display: flex; flex-direction: column; }
.ervaring blockquote { margin: 0 0 18px; flex: 1; }
.ervaring blockquote p { margin: 0; font: italic 400 1.02rem/1.75 var(--serif); color: var(--tekst); }
.ervaring blockquote p::before { content: '“'; display: block; font: 400 2.6rem/1 var(--serif); color: var(--salie); margin-bottom: 4px; }
.ervaring figcaption { font: 500 .78rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--groen); }
.ervaringen-noot { max-width: 620px; margin: 26px auto 0; font-size: .92rem; color: var(--zacht); }
@media (max-width: 860px) { .ervaringen { grid-template-columns: 1fr; gap: 16px; } }

/* ── 'Goed om te weten' sluit aan op de ervaringen (nov. 2026) ── */
#ervaringen { padding-bottom: 40px; }
#ervaringen + .sectie { padding-top: 0; }
.goed-om-te-weten { max-width: var(--breed); background: #eef3ee; border: 0; border-radius: 18px; padding: 28px 34px;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; }
.goed-om-te-weten::before { content: 'i'; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--wit);
  color: var(--groen); font: italic 500 1.15rem/34px var(--serif); text-align: center; border: 1px solid var(--lijn); }
.goed-om-te-weten h2 { font-size: 1.15rem; margin: 4px 0 .2em; }
.goed-om-te-weten p { color: var(--zacht); font-size: .98rem; }
@media (max-width: 560px) { .goed-om-te-weten { grid-template-columns: 1fr; padding: 24px 22px; } .goed-om-te-weten::before { grid-row: auto; } }

/* ── Footer: 'Kijk ook eens op' met de andere sites (nov. 2026) ── */
.voet .footer-sites { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 18px auto 14px; padding-top: 22px;
  border-top: 1px solid var(--lijn); width: min(100%, 560px); }
.voet .footer-sites-label { font: 400 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--zacht); }
.voet .footer-sites ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.voet .footer-sites a { display: flex; align-items: center; gap: 12px; text-decoration: none; text-align: left; }
.voet .footer-sites img { width: 36px; height: 36px; flex-shrink: 0; transition: transform .3s; }
.voet .footer-sites b { display: block; font: 500 .95rem/1.3 var(--sans); color: var(--woud); transition: color .2s; }
.voet .footer-sites small { display: block; margin-top: 2px; font: 400 .64rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.voet .footer-sites a:hover b, .voet .footer-sites a:focus-visible b { color: var(--groen); }
.voet .footer-sites a:hover img { transform: scale(1.05); }
@media (max-width: 600px) { .voet .footer-sites ul { flex-direction: column; align-items: flex-start; } }

/* ── 'Kijk ook eens op': aparte sectie boven de footer (nov. 2026) ── */
.andere-sites { position: relative; z-index: 1; padding: 56px 24px 64px; text-align: center; background: var(--papier); border-top: 1px solid var(--lijn); }
.andere-sites-label { margin: 0 0 22px; font-family: 'Jost', system-ui, sans-serif; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--zacht); }
.andere-sites-lijst { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.andere-sites-lijst a { display: flex; align-items: center; gap: 14px; min-width: 270px; padding: 16px 28px 16px 18px; text-align: left; text-decoration: none;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; transition: transform .25s, box-shadow .25s; }
.andere-sites-lijst img { width: 44px; height: 44px; flex-shrink: 0; }
.andere-sites-lijst b { display: block; font-family: 'Jost', system-ui, sans-serif; font-weight: 500; font-size: 1rem; letter-spacing: .01em; color: var(--woud); transition: color .2s; }
.andere-sites-lijst small { display: block; margin-top: 3px; font-family: 'Jost', system-ui, sans-serif; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.andere-sites-lijst a:hover, .andere-sites-lijst a:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.andere-sites-lijst a:hover b, .andere-sites-lijst a:focus-visible b { color: var(--groen); }
@media (max-width: 600px) { .andere-sites { padding: 44px 16px 52px; } .andere-sites-lijst { flex-direction: column; align-items: stretch; max-width: 360px; } .andere-sites-lijst a { min-width: 0; } }

/* Ankers (zoals het scrollpijltje) eindigen precies onder de menubalk */
html { scroll-padding-top: 67px; }
@media (max-width: 560px) { html { scroll-padding-top: 61px; } }
@media (max-width: 345px) { html { scroll-padding-top: 77px; } }

/* ── Stappen met icoontjes; het nummer staat als klein goud bolletje bij het icoon (nov. 2026) ── */
.stappen .stap { counter-increment: stap; }
.stap::before { display: none; }
.stap-icoon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--mist); color: var(--groen); box-shadow: inset 0 0 0 8px #eaf2ec; }
.stap-icoon::after { content: counter(stap); position: absolute; top: -2px; right: -4px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--goud); color: var(--goud-tekst); font: 600 .72rem/1 var(--sans); box-shadow: 0 0 0 3px var(--wit); }