/* kivoco-site. Layout: zoals de voedingsapp – lichte groengrijze ondergrond, één groen accent, kaarten enkel waar ze iets afbakenen; KI/VO/CO elk een eigen kleur */
:root{
 --bg:#F4F5F0; --surface:#FFFFFF; --fg:#18211C; --muted:#4A534E; --line:#DDE1D8;
 --vo:#1F6B4F; --vo-dark:#174F3A; --vo-soft:#E3EFE8;
 --ki:#1F5F7A; --ki-soft:#E2EEF3; --co:#C2410C; --co-soft:#FBE9DF;
 --on-vo:#FFFFFF;
 --head:"Sora",system-ui,sans-serif; --body:"Manrope",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
 --bg:#111613; --surface:#18201B; --fg:#E7EDE9; --muted:#A3B0A8; --line:#2A352F;
 --vo:#5FC497; --vo-dark:#7FD6AE; --vo-soft:#183A2B; --ki:#6BB8D6; --ki-soft:#173440; --co:#FF8E5E; --co-soft:#3D2418; --on-vo:#0E1A14; color-scheme:dark}}
:root[data-theme="dark"]{
 --bg:#111613; --surface:#18201B; --fg:#E7EDE9; --muted:#A3B0A8; --line:#2A352F;
 --vo:#5FC497; --vo-dark:#7FD6AE; --vo-soft:#183A2B; --ki:#6BB8D6; --ki-soft:#173440; --co:#FF8E5E; --co-soft:#3D2418; --on-vo:#0E1A14; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6}
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:var(--vo)}
a:focus-visible,button:focus-visible{outline:3px solid var(--co);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:12px}
.logo{font-family:var(--head);font-weight:700;font-size:1.55rem;letter-spacing:-.03em;text-decoration:none;line-height:1}
.logo .k{color:var(--ki)}.logo .v{color:var(--vo)}.logo .c{color:var(--co)}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--surface);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
nav a{display:block;padding:8px 12px;border-radius:999px;color:var(--fg);text-decoration:none;font-weight:600;font-size:.95rem}
nav a:hover{background:var(--vo-soft)}
.right{display:flex;align-items:center;gap:10px}
.lang{display:flex;gap:2px;font-size:.8rem;font-weight:700}
.lang span{padding:4px 7px;border-radius:6px;color:var(--muted)}
.lang .on{background:var(--fg);color:var(--bg)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:700;text-decoration:none;font-family:var(--body);font-size:1rem;border:0;cursor:pointer}
.btn-primary{background:var(--vo);color:var(--on-vo)}
.btn-primary:hover{background:var(--vo-dark)}
.btn-ghost{background:transparent;color:var(--fg);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--vo)}
.btn-small{padding:8px 14px;font-size:.9rem}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-block:56px 40px}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:32px 24px}}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);font-weight:700}
.hero h1 .k{color:var(--ki)}.hero h1 .v{color:var(--vo)}.hero h1 .c{color:var(--co)}
.hero .lead{font-size:1.15rem;color:var(--muted);margin-top:18px;max-width:52ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.portrait{position:relative;max-width:420px;justify-self:end;width:100%}
@media (max-width:820px){.portrait{justify-self:start;max-width:340px}}
.portrait img{display:block;width:100%;height:auto;border-radius:28px;aspect-ratio:720/926;object-fit:cover;background:var(--line)}
.badge{position:absolute;left:-16px;bottom:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 30px -14px rgba(0,0,0,.25);max-width:240px}
@media (max-width:820px){.badge{left:12px}}
.badge b{font-family:var(--head);font-size:.95rem}
.badge span{font-size:.82rem;color:var(--muted)}

/* pijlers */
section{padding-block:40px}
.sec-head{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;max-width:60ch}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.sec-head p{color:var(--muted)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:860px){.pillars{grid-template-columns:minmax(0,1fr)}}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;border-top:6px solid var(--c)}
.pillar .tag{font-family:var(--head);font-weight:700;font-size:2.4rem;line-height:1;color:var(--c);letter-spacing:-.03em}
.pillar h3{font-size:1.3rem}
.pillar p{color:var(--muted)}
.pillar ul{margin:0;padding-left:18px;color:var(--fg);display:flex;flex-direction:column;gap:4px;font-size:.95rem}
.pillar .more{margin-top:auto;font-weight:700;text-decoration:none;color:var(--c)}
.pillar .more:hover{text-decoration:underline}
.cert{display:inline-flex;align-items:center;gap:6px;background:var(--vo-soft);color:var(--vo);font-weight:700;font-size:.82rem;padding:4px 10px;border-radius:999px;align-self:flex-start}

/* boeken */
.book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:720px){.book{grid-template-columns:minmax(0,1fr)}}
.place{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px}
.place h3{font-size:1.15rem}
.place address{font-style:normal;color:var(--muted)}
.place .days{font-size:.9rem;color:var(--muted)}
.place .btn{align-self:flex-start;margin-top:6px}
.note{font-size:.9rem;color:var(--muted);margin-top:14px;max-width:70ch}

/* groepstraining */
.group{background:var(--ki-soft);border-radius:24px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
@media (max-width:720px){.group{grid-template-columns:minmax(0,1fr)}}
.group h2{font-size:1.6rem;color:var(--fg)}
.group p{color:var(--fg);margin-top:8px;max-width:60ch}
.group dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:14px 0 0;font-size:.95rem}
.group dt{font-weight:700}
.group dd{margin:0}
.soon{font-size:.85rem;font-weight:700;color:var(--ki)}

/* tri for kids */
.tfk{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center}
@media (max-width:820px){.tfk{grid-template-columns:minmax(0,1fr)}}
.tfk img{width:100%;height:auto;border-radius:24px;display:block;aspect-ratio:760/710;object-fit:cover;background:var(--line)}
.tfk h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.tfk p{color:var(--muted);margin-top:12px}
.lanes{height:6px;width:180px;border-radius:3px;margin-bottom:16px;background:repeating-linear-gradient(90deg,var(--co) 0 10px,transparent 10px 20px,var(--ki) 20px 30px,transparent 30px 40px)}

/* over mij */
.about{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px}
@media (max-width:720px){.about{grid-template-columns:minmax(0,1fr)}}
.about img{width:180px;height:220px;object-fit:cover;border-radius:18px;display:block}
.about h2{font-size:1.6rem}
.about p{margin-top:10px;max-width:62ch}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.facts span{font-size:.85rem;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}

/* footer */
footer{margin-top:48px;background:var(--surface);border-top:1px solid var(--line);padding-block:36px calc(36px + env(safe-area-inset-bottom,0px))}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;font-size:.92rem}
@media (max-width:820px){.fgrid{grid-template-columns:minmax(0,1fr)}}
footer h2{font-size:1rem;margin-bottom:8px}
footer p,footer li{color:var(--muted)}
.prices{margin-top:28px;overflow-x:auto}
.prices table{border-collapse:collapse;width:100%;min-width:460px;font-size:.92rem;font-variant-numeric:tabular-nums}
.prices th,.prices td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.prices thead th{color:var(--muted);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.prices tbody th{font-weight:600}
.kaarten{margin-top:16px;background:var(--surface);border-radius:14px;padding:12px 16px}
.kaarten summary{cursor:pointer;font-weight:700}
.kaarten p{font-size:.92rem;margin-top:8px}
.kaarten table{border-collapse:collapse;width:100%;margin-top:10px;font-size:.92rem;font-variant-numeric:tabular-nums}
.kaarten th,.kaarten td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.kaarten thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kaarten tr.nu td{font-weight:700;background:var(--vo-soft)}
.kaart-nb{color:var(--muted)}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.legal{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.draft{background:var(--co-soft);color:var(--fg);font-size:.85rem;text-align:center;padding:6px 16px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body{margin:0}
nav a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.lang a{padding:4px 7px;border-radius:6px;color:var(--muted);text-decoration:none}
.lang a.on{background:var(--fg);color:var(--bg)}
/* paginakop */
.page-head{padding-block:48px 8px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
@media (max-width:820px){.page-head{grid-template-columns:minmax(0,1fr);padding-block:28px 0;gap:20px}}
.page-head h1{font-size:clamp(2rem,4.6vw,3rem)}
.page-head .lead{font-size:1.12rem;color:var(--muted);margin-top:16px;max-width:56ch}
.page-head img{width:100%;max-width:380px;justify-self:end;border-radius:24px;display:block;object-fit:cover}
@media (max-width:820px){.page-head img{justify-self:start;max-width:300px}}
.tagline{display:inline-block;font-family:var(--head);font-weight:700;font-size:.9rem;color:var(--c,var(--vo));background:var(--cs,var(--vo-soft));padding:5px 12px;border-radius:999px;margin-bottom:14px}
/* raster van kaarten */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:860px){.grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.grid2{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:1.15rem}
.card p,.card li{color:var(--muted)}
.card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.card .btn{align-self:flex-start;margin-top:auto}
.card.accent{border-top:6px solid var(--c,var(--vo))}
/* stappen */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;counter-increment:s;display:flex;flex-direction:column;gap:6px}
.steps li::before{content:counter(s);font-family:var(--head);font-weight:700;font-size:1.6rem;color:var(--c,var(--vo));line-height:1}
.steps b{font-family:var(--head)}
.steps span{color:var(--muted);font-size:.95rem}
/* prijzen in kaarten */
.price{font-family:var(--head);font-weight:700;font-size:1.9rem;color:var(--fg);line-height:1.1}
.price small{font-size:.95rem;color:var(--muted);font-weight:600}
.incl{font-size:.9rem;color:var(--muted)}
/* animatie */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.demo iframe{display:block;width:100%;height:860px;border:0;background:var(--bg)}
.demo .demo-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.demo .demo-bar span{color:var(--muted);font-size:.9rem}
.demo-mobile{display:none}
@media (max-width:900px){.demo{display:none}.demo-mobile{display:flex}}
.callout{background:var(--cs,var(--vo-soft));border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px}
.callout p{color:var(--fg)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
@media (max-width:820px){.two{grid-template-columns:minmax(0,1fr)}}
.two img{width:100%;border-radius:24px;display:block;object-fit:cover}
.check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.check li{padding-left:28px;position:relative}
.check li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:7px;border-left:3px solid var(--c,var(--vo));border-bottom:3px solid var(--c,var(--vo));transform:rotate(-45deg)}
.prices h3{font-size:.95rem;margin:18px 0 6px}
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
@media (max-width:720px){.band{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){nav a{padding:6px 9px;font-size:.9rem}}
/* inlogmenu */
.login{position:relative}
.login summary{list-style:none;cursor:pointer;font-weight:700;font-size:.9rem;padding:8px 14px;border-radius:999px;border:2px solid var(--line)}
.login summary::-webkit-details-marker{display:none}
.login[open] summary{border-color:var(--vo)}
.login ul{position:absolute;right:0;top:calc(100% + 6px);z-index:20;list-style:none;margin:0;padding:6px;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.3)}
.login li a,.login li span{display:block;padding:10px 12px;border-radius:10px;color:var(--fg);text-decoration:none;font-weight:600}
.login li a:hover{background:var(--vo-soft)}
.login li span{color:var(--muted)}
.login small{font-weight:600}
/* feitjes (hydrotherapie) */
.feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-self:center}
.feiten span{background:var(--ki-soft);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:2px;color:var(--muted);font-size:.9rem}
.feiten b{font-family:var(--head);font-size:1.5rem;color:var(--fg)}
@media (max-width:820px){.feiten{grid-template-columns:repeat(3,minmax(0,1fr))}.feiten b{font-size:1.2rem}}
/* animatie: ook op gsm in de pagina */
@media (max-width:900px){.demo{display:block}.demo iframe{height:760px}}
/* foto's */
.page-head img{max-width:340px;aspect-ratio:3/4;height:auto;object-fit:cover}
@media (max-width:820px){.page-head img{max-width:260px}}
.page-head .feiten{margin-top:22px}
.fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fotos img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:20px;display:block;background:var(--line)}
.band{grid-template-columns:auto minmax(0,1fr) auto}
.band img{width:130px;aspect-ratio:3/4;object-fit:cover;border-radius:16px;display:block}
@media (max-width:720px){.band{grid-template-columns:minmax(0,1fr)}.band img{width:100%;max-width:none;aspect-ratio:16/10}}
/* hydro-band: Lars klein, ook op gsm */
@media (max-width:720px){.band{grid-template-columns:72px minmax(0,1fr);gap:14px}.band img{width:72px;aspect-ratio:3/4}.band>div:last-child{grid-column:1/-1}}
.pillar ul.sub>li{margin-bottom:6px}.pillar ul.sub ul{margin:4px 0 0;padding-left:18px;font-size:.95em}
/* één foto: zelfde grootte als vroeger in het duo */
.fotos img:only-child{grid-column:1}
/* hydro-band: foto niet uitrekken tot 1200px hoog */
.band img{height:auto;align-self:center;max-height:180px}
@media (max-width:720px){.band img{max-height:96px}}
/* sub-knoppen onder Kiné en Coaching */
.subnav{display:flex;gap:8px;flex-wrap:wrap;padding-top:18px}
.subnav a{padding:9px 16px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;font-weight:700;font-size:.95rem}
.subnav a:hover{border-color:var(--fg)}
.subnav a[aria-current="page"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
/* homepage: groepstraining, hydrotherapie en Tri for Kids naast elkaar in de blauwe kader */
.trio-wrap{background:var(--ki-soft);border-radius:24px;padding:22px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:860px){.trio{grid-template-columns:minmax(0,1fr)}}
.trio-card{background:var(--surface);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px}
.trio-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:var(--line)}
.trio-card h3{font-size:1.2rem}
.trio-card p{color:var(--muted);font-size:.95rem}
.trio-card .more{margin-top:auto;font-weight:700;text-decoration:none;color:var(--ki)}
.trio-card .more:hover{text-decoration:underline}
/* feiten: niet breder dan een smal scherm */
.feiten span{min-width:0;overflow-wrap:anywhere}
.feiten span:only-child{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:8px}
@media (max-width:420px){.feiten{gap:8px}.feiten span{padding:12px 10px;font-size:.85rem}.feiten b{font-size:1.05rem}}
/* blog */
.blog-teaser .bt-kaart,.blog-lijst .bt-kaart{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px;text-decoration:none;color:inherit;border-top:6px solid var(--co)}
.bt-kaart:hover{border-color:var(--co)}
.bt-kaart img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;background:var(--line)}
.bt-kaart h2{font-size:1.35rem;margin-top:4px}
.bt-kaart p{color:var(--muted);margin-top:6px}
.bt-kaart .more{display:inline-block;margin-top:8px;font-weight:700;color:var(--co)}
.bt-kaart .soon{color:var(--co)}
@media (max-width:640px){.blog-teaser .bt-kaart,.blog-lijst .bt-kaart{grid-template-columns:minmax(0,1fr)}}
.blog-lijst{display:flex;flex-direction:column;gap:18px}
.artikel{max-width:760px}
.artikel .terug{margin:0 0 14px}
.artikel .terug a{color:var(--muted);font-weight:700;text-decoration:none}
.artikel h1{font-size:clamp(1.8rem,4.4vw,2.6rem);margin-top:8px}
.artikel .lead{margin-top:12px;color:var(--muted);font-size:1.1rem}
.artikel img.kop{width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:20px;margin:22px 0 6px;display:block}
.artikel .tekst h2{font-size:1.5rem;margin-top:30px}
.artikel .tekst h3{font-size:1.15rem;margin-top:22px}
.artikel .tekst p,.artikel .tekst ul{margin-top:10px}
.artikel .tekst li{margin-top:6px}
.artikel .tip{background:var(--ki-soft);border-radius:14px;padding:12px 16px}
.artikel .tip b{margin-right:6px}
.artikel .oefening{border-left:6px solid var(--co);background:var(--co-soft);border-radius:14px;padding:14px 18px;margin-top:18px}
.artikel .oefening p{margin-top:6px}
.artikel .auteur{margin-top:26px;color:var(--muted);font-size:.95rem}
.artikel .reeks{margin-top:22px}
.artikel .reeks ul{margin:6px 0 0;padding-left:18px}
/* v2026-10-20b */