/* fonts.css */
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/baloo-2-500.woff2') format('woff2');
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/baloo-2-600.woff2') format('woff2');
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/baloo-2-700.woff2') format('woff2');
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/assets/fonts/baloo-2-800.woff2') format('woff2');
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/work-sans-400.woff2') format('woff2');
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/work-sans-500.woff2') format('woff2');
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/work-sans-600.woff2') format('woff2');
}
/* tokens.css */
:root{
--kideo-cream:#FBF6EC;
--kideo-header-bg:#f4f1e8;
--kideo-topbar-bg:#ffffff;
--kideo-ink:#1F3B3A;
--kideo-teal:#1B4B4A;
--kideo-muted:#4b6362;
--kideo-accent:#9B2E77;
--kideo-accent-dark:#7a2560;
--kideo-coral:#FF6F59;
--kideo-mustard:#F4B942;
--kideo-mint:#8FC7B8;
--kideo-line:#E4DAC6;
--kideo-line-soft:#eeeae0;
--kideo-line-header:#e2ddce;
--kideo-line-mobile:#e5e0d1;
--font-heading:'Baloo 2', system-ui, sans-serif;
--font-body:'Work Sans', system-ui, sans-serif;
--container:1200px;
--radius:10px;
--radius-lg:14px;
--shadow-dropdown:0 10px 18px rgba(31,59,58,.12);
}
/* base.css */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){
html{scroll-behavior:smooth}
}
body{
font-family:var(--font-body);
color:var(--kideo-ink);
background:var(--kideo-cream);
line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--kideo-accent);outline-offset:2px}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.swiper{
position:relative;
max-width:1160px;margin:0 auto;
}
.swiper__pijl{
position:absolute;top:50%;z-index:3;
transform:translateY(-50%);
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;
background:var(--kideo-accent);color:#fff;
border:none;cursor:pointer;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
box-shadow:0 8px 18px rgba(31,59,58,.22);
transition:background-color .15s ease,opacity .15s ease,transform .15s ease;
}
.swiper__pijl svg{width:18px;height:18px}
.swiper__pijl--links{left:-10px}
.swiper__pijl--rechts{right:-10px}
.swiper__pijl:hover:not(:disabled),
.swiper__pijl:focus:not(:disabled){
background:var(--kideo-accent-dark);
transform:translateY(-50%) scale(1.07);
}
.swiper__pijl:disabled{
opacity:.3;cursor:default;
}
@media(max-width:600px){
.swiper__pijl{width:38px;height:38px}
.swiper__pijl--links{left:-4px}
.swiper__pijl--rechts{right:-4px}
}
.golf-scheiding{
display:block;
width:100%;height:clamp(48px,7vw,110px);
color:var(--kideo-cream);
pointer-events:none;
margin-bottom:-1px;
}
.golf-scheiding--wit{
color:#fff;
margin-top:-1px;margin-bottom:0;
}
/* header.css */
.custom-top-bar{background:var(--kideo-topbar-bg);font-size:15px;padding:10px 0;border-bottom:1px solid var(--kideo-line-soft);color:var(--kideo-muted)}
.custom-top-bar__content{max-width:var(--container);margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.custom-top-bar a{text-decoration:none;color:inherit}
.custom-top-bar a:hover{text-decoration:underline}
.custom-top-bar__left,.custom-top-bar__right{display:flex;align-items:center;flex-wrap:wrap}
.topbar-ticker{display:none}
@media(max-width:720px){
.custom-top-bar__left,.custom-top-bar__right{display:none}
.custom-top-bar__content{justify-content:center}
.topbar-ticker{
position:relative;display:block;
width:100%;height:1.5em;overflow:hidden;
text-align:center;
}
.topbar-ticker a{
position:absolute;left:0;right:0;top:0;
display:flex;align-items:center;justify-content:center;gap:6px;
color:inherit;text-decoration:none;
opacity:0;transform:translateY(8px);
transition:opacity .35s ease,transform .35s ease;
pointer-events:none;
}
.topbar-ticker a svg{
width:14px;height:14px;flex:0 0 auto;
}
.topbar-ticker a.actief{
opacity:1;transform:none;
pointer-events:auto;
}
}
.site-header__outer-wrapper{position:sticky;top:0;z-index:900}
.site-header{
--desktop-logo-width:175px;
--mobile-logo-width:140px;
padding:.75rem 0;background-color:var(--kideo-header-bg);
border-bottom:1px solid transparent;
transition:background-color .2s ease,color .2s ease;
position:relative;
}
@media(min-width:900px){.site-header{padding:0}}
.site-header__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
display:flex;align-items:center;justify-content:flex-start;
}
.site-header__logo{position:relative;display:block;width:var(--mobile-logo-width);text-align:left}
@media(min-width:900px){.site-header__logo{width:var(--desktop-logo-width);margin:1rem 0}}
.site-header__logo img{display:block;width:100%;height:auto}
.main-nav{display:none}
@media(min-width:900px){.main-nav{display:flex;align-self:stretch;margin-left:2rem}}
.main-nav__tier-1{display:flex;align-items:stretch;list-style:none}
.main-nav__tier-1-item{position:relative;display:flex;align-items:center}
.main-nav__tier-1-link{
display:flex;align-items:center;padding:.75rem 1rem;
color:var(--kideo-teal);text-decoration:none;white-space:nowrap;
font-family:var(--font-heading);font-weight:600;font-size:1.1rem;
background:none;border:none;cursor:pointer;
}
.main-nav__tier-1-link:visited{color:var(--kideo-teal)}
.main-nav__tier-1-link:hover,.main-nav__tier-1-link:focus{color:var(--kideo-accent);text-decoration:none}
.main-nav__tier-1-link .caret{width:10px;height:10px;margin-left:6px;transition:transform .2s ease}
.main-nav__tier-1-item.open .caret{transform:rotate(180deg)}
@keyframes menu-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.main-nav__tier-2{
position:absolute;left:0;top:100%;z-index:901;display:none;
padding:1rem 1.25rem;background-color:var(--kideo-header-bg);border-radius:var(--radius-lg);
box-shadow:var(--shadow-dropdown);border:1px solid var(--kideo-line-header);
min-width:250px;list-style:none;
}
.main-nav__tier-2::before{
content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
}
.main-nav__tier-1-item.open > .main-nav__tier-2,
.main-nav__tier-1-item:hover > .main-nav__tier-2,
.main-nav__tier-1-item:focus-within > .main-nav__tier-2{
display:block;animation:menu-fade-in .2s ease forwards;
}
.main-nav__tier-2-link{display:flex;align-items:center;padding:.45rem .25rem;color:var(--kideo-teal);text-decoration:none;white-space:nowrap;font-family:var(--font-heading);font-weight:500;font-size:1.05rem}
.main-nav__tier-2-link:hover,.main-nav__tier-2-link:focus{color:var(--kideo-accent)}
.main-nav__tier-1-item--static{position:static}
.main-nav__tier-2--full{
left:0;right:0;top:100%;min-width:0;
border-radius:0 0 var(--radius-lg) var(--radius-lg);
padding:1.25rem 0;
}
.main-nav__tier-2--full .main-nav__tier-2-inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;
}
.main-nav__tier-2--full .main-nav__tier-2-link{padding:.25rem 0}
.header-cta{display:none}
@media(min-width:900px){.header-cta{display:flex;align-items:center;gap:.6rem;margin-left:auto}}
.header-cta__btn{
font-family:var(--font-heading);font-weight:600;font-size:1rem;
text-decoration:none;white-space:nowrap;
padding:.55em 1.3em;border-radius:var(--radius);
transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.header-cta__btn--primary{background:var(--kideo-accent);color:#ffffff;border:2px solid var(--kideo-accent)}
.header-cta__btn--primary:hover,.header-cta__btn--primary:focus{background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);color:#ffffff}
.header-cta__btn--secondary{background:transparent;color:var(--kideo-teal);border:2px solid var(--kideo-teal)}
.header-cta__btn--secondary:hover,.header-cta__btn--secondary:focus{background:var(--kideo-teal);color:#ffffff}
.mobile-nav__cta{display:flex;flex-direction:column;gap:.6rem;padding:1rem 0 .25rem}
.mobile-nav__cta .header-cta__btn{display:block;text-align:center}
.mobile-menu-toggle{display:block;background:none;border:none;padding:.5rem;cursor:pointer;color:var(--kideo-teal);margin-left:auto}
.mobile-menu-toggle svg{display:block;width:26px;height:26px}
.mobile-menu-toggle .icon-close{display:none}
.mobile-menu-toggle[aria-expanded="true"] .icon-open{display:none}
.mobile-menu-toggle[aria-expanded="true"] .icon-close{display:block}
@media(min-width:900px){.mobile-menu-toggle{display:none}}
.mobile-nav{
display:none;background:var(--kideo-header-bg);border-top:1px solid var(--kideo-line-header);
padding:.5rem 20px 1.25rem;
max-height:calc(100vh - 80px);overflow-y:auto;
}
.mobile-nav.open{display:block}
@media(min-width:900px){.mobile-nav{display:none!important}}
.mobile-nav ul{list-style:none}
.mobile-nav ul a{display:block;padding:.7rem 0;color:var(--kideo-teal);text-decoration:none;font-family:var(--font-heading);font-weight:500;font-size:1.1rem;border-bottom:1px solid var(--kideo-line-mobile)}
.mobile-nav ul a:hover{color:var(--kideo-accent)}
.mobile-nav__toggle{
display:flex;align-items:center;justify-content:space-between;width:100%;
background:none;border:none;border-bottom:1px solid var(--kideo-line-mobile);
font-family:var(--font-heading);font-weight:500;font-size:1.1rem;color:var(--kideo-teal);padding:.7rem 0;cursor:pointer;text-align:left;
}
.mobile-nav__toggle .caret{width:12px;height:12px;transition:transform .2s ease}
.mobile-nav__toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.mobile-nav__sub{display:none;padding-left:1rem}
.mobile-nav__sub.open{display:block}
.mobile-nav .mobile-nav__sub a{font-size:.95rem;padding:.55rem 0}
.mobile-nav .mobile-nav__secundair{
margin-top:16px;
padding:10px 0 0;
border-top:1px solid var(--kideo-line-mobile);
}
.mobile-nav .mobile-nav__secundair a{
display:inline-block;padding:.4rem 0;
font-family:var(--font-body);
font-size:14px;font-weight:400;
color:var(--kideo-muted);
border-bottom:none;
}
.mobile-nav .mobile-nav__secundair a:hover{color:var(--kideo-accent)}
.mobile-nav .mobile-nav__secundair--media{
margin-top:14px;
padding-top:0;
border-top:none;
}
div[data-include="header"]{min-height:108px}
@media(min-width:900px){div[data-include="header"]{min-height:130px}}
/* kruimelpad.css */
.kruimelpad{
background:var(--kideo-cream);
}
.kruimelpad__lijst{
max-width:var(--container);margin:0 auto;
padding:10px 20px;
list-style:none;
display:flex;align-items:center;flex-wrap:wrap;
gap:4px 8px;
font-family:var(--font-body);
font-size:13.5px;
color:var(--kideo-muted);
}
.kruimelpad__lijst li{
display:flex;align-items:center;gap:8px;
}
.kruimelpad__lijst li:not(:last-child)::after{
content:"\203A";
color:var(--kideo-muted);
opacity:.55;
}
.kruimelpad a{
display:inline-flex;align-items:center;gap:5px;
color:var(--kideo-muted);
text-decoration:none;
}
.kruimelpad a:hover,.kruimelpad a:focus{
color:var(--kideo-accent);
text-decoration:underline;text-underline-offset:3px;
}
.kruimelpad a svg{width:13px;height:13px;flex:0 0 auto}
.kruimelpad [aria-current="page"]{
color:var(--kideo-teal);
font-weight:600;
}
/* banner.css */
.hero-banner{
position:relative;
display:flex;flex-direction:column;justify-content:flex-end;
min-height:clamp(520px,52vw,720px);
padding:48px 0 clamp(112px,13vw,176px);
}
.hero-banner__media{
position:absolute;inset:0;z-index:0;
width:100%;height:100%;
object-fit:cover;
}
.hero-banner__wave{
position:absolute;left:0;right:0;bottom:-1px;z-index:1;
display:block;
width:100%;height:clamp(64px,10vw,140px);
color:var(--kideo-cream);
pointer-events:none;
}
.hero-banner__inner{
position:relative;z-index:2;
width:100%;max-width:var(--container);
margin:0 auto;padding:0 20px;
}
.hero-banner__kicker{
margin:0 0 8px;
font-family:var(--font-body);
font-size:15px;font-weight:400;
color:#fff;
}
.hero-banner__title{
margin:0 0 10px;
max-width:700px;
font-family:var(--font-heading);
font-size:clamp(34px,4.5vw,50px);font-weight:800;
line-height:1.08;
color:#fff;
}
.hero-banner__subtitle{
margin:0;
max-width:560px;
font-family:var(--font-body);
font-size:17px;line-height:1.55;
color:#fff;
}
.hero-banner__actions{
display:flex;flex-wrap:wrap;
gap:12px;
margin-top:24px;
}
@media(max-width:520px){
.hero-banner__actions{flex-direction:column;align-items:stretch}
}
.hero-banner__btn{
display:inline-flex;align-items:center;justify-content:center;
padding:.6em 1.5em;
border-radius:var(--radius);
font-family:var(--font-heading);
font-size:1.05rem;font-weight:600;
text-decoration:none;text-align:center;
transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.hero-banner__btn--primary{
background:var(--kideo-accent);color:#fff;
border:2px solid var(--kideo-accent);
}
.hero-banner__btn--primary:hover,.hero-banner__btn--primary:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);color:#fff;
}
.hero-banner__btn--secondary{
background:transparent;color:#fff;
border:2px solid #fff;
}
.hero-banner__btn--secondary:hover,.hero-banner__btn--secondary:focus{
background:#fff;color:var(--kideo-teal);
}
.hero-banner--subpagina{
min-height:clamp(360px,34vw,480px);
padding:48px 0 clamp(96px,11vw,150px);
}
.hero-banner--subpagina .hero-banner__media{
object-position:center 58%;
}
@media(max-width:900px){
.hero-banner{
min-height:520px;
padding:32px 0 100px;
}
.hero-banner--subpagina{
min-height:400px;
padding:32px 0 88px;
}
.hero-banner__title{font-size:clamp(30px,7vw,38px)}
}
/* pagina-banner.css */
.pagina-banner{
position:relative;
background:var(--kideo-cream);
overflow:hidden;
}
.pagina-banner__inner{
position:relative;z-index:2;
max-width:var(--container);margin:0 auto;
padding:44px 20px 36px;
text-align:center;
animation:pb-verschijn .5s ease both;
}
.pagina-banner__titel{
margin:0 0 8px;
font-family:var(--font-heading);
font-size:clamp(28px,3.6vw,42px);font-weight:800;
line-height:1.1;
color:var(--kideo-teal);
}
.pagina-banner__sub{
margin:0 auto;
max-width:560px;
font-family:var(--font-body);
font-size:16px;line-height:1.55;
color:var(--kideo-muted);
}
.pagina-banner__deco{
position:absolute;inset:0;z-index:1;
pointer-events:none;
}
.pb-blob{
position:absolute;
display:flex;align-items:center;justify-content:center;
animation:pb-zweef 6s ease-in-out infinite;
}
.pb-blob svg{width:50%;height:50%}
.pb-blob--1{
width:56px;height:56px;left:8%;top:22%;
background:var(--kideo-accent);color:#fff;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
font-size:24px;
}
.pb-blob--2{
width:42px;height:42px;left:20%;bottom:18%;
background:var(--kideo-accent);color:#fff;
border-radius:45% 55% 48% 52% / 55% 44% 56% 45%;
animation-duration:7s;animation-delay:.8s;
}
.pb-blob--3{
width:48px;height:48px;right:9%;top:18%;
background:var(--kideo-accent);color:#fff;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
font-size:20px;
animation-duration:5.5s;animation-delay:.4s;
}
.pb-blob--4{
width:40px;height:40px;right:22%;bottom:24%;
background:var(--kideo-accent);color:#fff;
border-radius:48% 52% 56% 44% / 52% 46% 54% 48%;
animation-duration:8s;animation-delay:1.4s;
}
.pb-blob--5{
width:120px;height:120px;left:-30px;top:-40px;
background:var(--kideo-accent);opacity:.07;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
animation-duration:10s;
}
.pb-blob--6{
width:90px;height:90px;right:-24px;bottom:-30px;
background:var(--kideo-accent);opacity:.07;
border-radius:45% 55% 48% 52% / 55% 44% 56% 45%;
animation-duration:9s;animation-delay:.6s;
}
@keyframes pb-zweef{
0%,100%{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(-12px) rotate(4deg)}
}
@keyframes pb-verschijn{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}
}
.pagina-banner--zonder-iconen .pb-blob--2,
.pagina-banner--zonder-iconen .pb-blob--4{opacity:.25}
.pagina-banner--zonder-iconen .pb-blob--1{width:44px;height:44px}
.pagina-banner--zonder-iconen .pb-blob--3{width:38px;height:38px;opacity:.6}
@media(prefers-reduced-motion:reduce){
.pb-blob,.pagina-banner__inner{animation:none}
}
@media(max-width:720px){
.pagina-banner__inner{padding:32px 20px 20px}
.pb-blob--1{width:42px;height:42px;font-size:18px;left:4%}
.pb-blob--3{width:38px;height:38px;font-size:16px;right:5%}
.pb-blob--2{left:12%}
.pb-blob--4{right:14%}
}
/* locator.css */
.locator{
margin-top:24px;
max-width:560px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-dropdown);
padding:18px 18px 14px;
}
.locator__label{
display:block;
margin:0 0 10px;
font-family:var(--font-heading);
font-size:1.05rem;font-weight:600;
color:var(--kideo-teal);
}
.locator__type{
display:flex;gap:8px;
margin:0 0 12px;
}
.locator__type label{position:relative;cursor:pointer}
.locator__type input{
position:absolute;opacity:0;pointer-events:none;
}
.locator__type span{
display:inline-flex;align-items:center;gap:6px;
padding:6px 14px;
background:#fff;
border:1.5px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:14px;font-weight:600;
color:var(--kideo-teal);
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.locator__type span small{
font-family:var(--font-body);
font-size:12px;font-weight:400;
color:var(--kideo-muted);
}
.locator__type input:checked + span{
background:var(--kideo-accent);
border-color:var(--kideo-accent);
color:#fff;
}
.locator__type input:checked + span small{color:rgba(255,255,255,.85)}
.locator__type input:focus-visible + span{
outline:2px solid var(--kideo-accent);outline-offset:2px;
}
.locator__form{
display:flex;gap:10px;
}
.locator__field{
position:relative;
flex:1;
display:flex;align-items:center;
}
.locator__field svg{
position:absolute;left:12px;
width:16px;height:16px;
color:var(--kideo-muted);
pointer-events:none;
}
.locator__input{
width:100%;
padding:10px 12px 10px 36px;
border:1px solid var(--kideo-line);
border-radius:var(--radius);
font-family:var(--font-body);
font-size:15px;color:var(--kideo-ink);
background:#fff;
}
.locator__input::placeholder{color:#9aa8a7}
.locator__input:focus{
outline:2px solid var(--kideo-accent);outline-offset:1px;
border-color:var(--kideo-accent);
}
.locator__btn{
padding:10px 22px;
border:2px solid var(--kideo-accent);
border-radius:var(--radius);
background:var(--kideo-accent);color:#fff;
font-family:var(--font-heading);
font-size:1rem;font-weight:600;
cursor:pointer;white-space:nowrap;
transition:background-color .15s ease,border-color .15s ease;
}
.locator__btn:hover,.locator__btn:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);
}
.locator__geo{
display:inline-flex;align-items:center;gap:6px;
margin-top:10px;padding:0;
border:none;background:none;cursor:pointer;
font-family:var(--font-body);
font-size:14px;color:var(--kideo-muted);
text-decoration:underline;text-underline-offset:3px;
}
.locator__geo:hover,.locator__geo:focus{color:var(--kideo-accent)}
.locator__geo svg{width:14px;height:14px}
.locator__geo:disabled{opacity:.6;cursor:wait;text-decoration:none}
.locator__result{
margin:12px 0 0;
padding-top:12px;
border-top:1px solid var(--kideo-line);
font-family:var(--font-body);
font-size:15px;line-height:1.5;
color:var(--kideo-ink);
}
.locator__result a{color:var(--kideo-accent);font-weight:600;text-decoration:none}
.locator__result a:hover{text-decoration:underline}
.locator__result--fout{color:var(--kideo-muted)}
@media(max-width:520px){
.locator{padding:14px 14px 12px}
.locator__form{flex-direction:column}
.locator__btn{width:100%}
}
/* intro.css */
.intro{
padding:8px 0 64px;
position:relative;z-index:2;
}
@media(min-width:901px){
.intro{margin-top:-20px}
}
.intro__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.intro__title{
margin:0 0 16px;
font-family:var(--font-heading);
font-size:clamp(26px,3.2vw,36px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.intro__text{
max-width:960px;
margin:0 auto;
}
.intro__text p{
margin:0 0 1em;
font-family:var(--font-body);
font-size:17px;line-height:1.65;
color:var(--kideo-ink);
}
.intro__text p:last-child{margin-bottom:0}
.intro__text a{
color:var(--kideo-accent);
font-weight:600;
text-decoration:none;
}
.intro__text a:hover,.intro__text a:focus{text-decoration:underline}
.intro__vestigingen{
display:flex;flex-wrap:wrap;justify-content:center;
gap:12px;
margin-top:20px;
}
.intro__vestiging{
display:inline-flex;align-items:center;gap:8px;
padding:9px 18px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:999px;
box-shadow:0 4px 10px rgba(31,59,58,.06);
font-family:var(--font-heading);
font-size:16px;font-weight:600;
color:var(--kideo-teal);
text-decoration:none;
transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.intro__vestiging svg{
width:16px;height:16px;
color:var(--kideo-accent);
}
.intro__vestiging:hover,.intro__vestiging:focus{
background:var(--kideo-accent);
border-color:var(--kideo-accent);
color:#fff;
transform:translateY(-1px);
}
.intro__vestiging:hover svg,.intro__vestiging:focus svg{color:#fff}
@media(max-width:900px){
.intro{padding:8px 0 48px}
}
/* pijlers.css */
.pijlers{
background:#fff;
padding:64px 0 48px;
}
.pijlers__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
display:grid;grid-template-columns:5fr 7fr;
align-items:stretch;gap:56px;
}
.pijlers__media{
position:relative;
border-radius:20px;
overflow:hidden;
box-shadow:0 18px 40px rgba(31,59,58,.14);
}
.pijlers__media img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
}
.pijlers__title{
margin:0 0 16px;
font-family:var(--font-heading);
font-size:clamp(26px,3.2vw,36px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.pijlers__text{
margin:0 0 12px;
max-width:640px;
font-family:var(--font-body);
font-size:17px;line-height:1.65;
color:var(--kideo-ink);
}
.pijlers__lead{
margin:0 0 22px;
font-family:var(--font-heading);
font-size:18px;font-weight:600;
color:var(--kideo-teal);
}
.pijlers__lijst{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:20px;
}
.pijler{
display:flex;align-items:center;gap:16px;
}
.pijler__icoon{
flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
width:42px;height:42px;
background:var(--kideo-accent);
color:#fff;
border-radius:55% 45% 50% 50% / 45% 55% 45% 55%;
transition:transform .2s ease;
}
.pijler:nth-child(1) .pijler__icoon{border-radius:58% 42% 55% 45% / 48% 55% 45% 52%}
.pijler:nth-child(2) .pijler__icoon{border-radius:45% 55% 48% 52% / 55% 44% 56% 45%}
.pijler:nth-child(3) .pijler__icoon{border-radius:52% 48% 42% 58% / 45% 52% 48% 55%}
.pijler:nth-child(4) .pijler__icoon{border-radius:48% 52% 56% 44% / 52% 46% 54% 48%}
.pijler:hover .pijler__icoon{transform:rotate(-6deg) scale(1.08)}
.pijler__icoon svg{width:20px;height:20px}
.pijlers--compact .pijler__icoon{width:34px;height:34px}
.pijlers--compact .pijler__icoon svg{width:16px;height:16px}
.pijlers--compact .pijler__tekst{font-size:16px}
.pijler__tekst{
margin:0;
font-family:var(--font-body);
font-size:17px;line-height:1.5;font-weight:500;
color:var(--kideo-ink);
}
@media(max-width:900px){
.pijlers{padding:40px 0 36px}
.pijlers__inner{
grid-template-columns:1fr;
gap:32px;
}
.pijlers__media{order:2;aspect-ratio:4/3;width:100%}
.pijlers__content{order:1}
}
/* waarom.css */
.waarom{
background:var(--kideo-cream);
padding:0 0 80px;
}
.waarom__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
}
.waarom__title{
margin:12px 0 32px;
text-align:center;
font-family:var(--font-heading);
font-size:clamp(26px,3.2vw,36px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.waarom__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:24px;
}
@media(min-width:1000px){
.waarom__grid{grid-template-columns:repeat(6,1fr)}
.waarom-kaart{grid-column:span 2}
.waarom-kaart:nth-child(4):nth-last-child(2){grid-column:2 / span 2}
.waarom-kaart:nth-child(1){z-index:3}
.waarom-kaart:nth-child(2){z-index:2}
.waarom-kaart:nth-child(4){z-index:2}
.waarom-kaart:nth-child(1)::after,
.waarom-kaart:nth-child(2)::after,
.waarom-kaart:nth-child(4)::after{
content:"+";
position:absolute;top:50%;right:-30px;
transform:translateY(-50%);
z-index:2;
display:flex;align-items:center;justify-content:center;
width:36px;height:36px;
background:var(--kideo-accent);color:#fff;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
font-family:var(--font-heading);font-weight:700;font-size:22px;line-height:1;
box-shadow:0 6px 14px rgba(31,59,58,.18);
}
.waarom-kaart:nth-child(2)::after{border-radius:45% 55% 48% 52% / 55% 44% 56% 45%}
.waarom-kaart:nth-child(4)::after{border-radius:58% 42% 55% 45% / 48% 55% 45% 52%}
.waarom--zonder-plus .waarom-kaart::after{display:none}
}
.waarom-kaart{
position:relative;
display:flex;flex-direction:column;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
transition:transform .15s ease,box-shadow .15s ease;
}
.waarom-kaart:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(31,59,58,.11);
}
.waarom-kaart__media{
aspect-ratio:16/10;
overflow:hidden;
border-radius:19px 19px 0 0;
}
.waarom-kaart__media img{
width:100%;height:100%;
object-fit:cover;
}
.waarom-kaart__body{
padding:20px 22px 24px;
text-align:center;
}
.waarom-kaart__kop{
margin:0 0 8px;
font-family:var(--font-heading);
font-size:20px;font-weight:700;
color:var(--kideo-teal);
}
.waarom-kaart__tekst{
margin:0;
font-family:var(--font-body);
font-size:15.5px;line-height:1.6;
color:var(--kideo-ink);
}
@media(max-width:900px){
.waarom{padding:0 0 56px}
.waarom__title{margin-bottom:24px}
}
/* werkwijze.css */
.ww-visie{
background:var(--kideo-cream);
padding:0 0 72px;
}
.ww-visie__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.ww-visie__titel{
margin:16px 0 14px;
font-family:var(--font-heading);
font-size:clamp(26px,3.2vw,36px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.ww-visie__tekst{
max-width:760px;margin:0 auto 10px;
font-family:var(--font-body);
font-size:17px;line-height:1.65;
color:var(--kideo-ink);
}
.ww-visie__lead{
margin:0 auto 26px;
font-family:var(--font-heading);
font-size:18px;font-weight:600;
color:var(--kideo-teal);
}
.ww-visie .pijlers__lijst{
max-width:760px;margin:0 auto;
text-align:left;
}
.ww-visie .pijler__tekst strong{
color:var(--kideo-teal);font-weight:600;
}
.ww-stromingen__titel{
margin:56px 0 14px;
font-family:var(--font-heading);
font-size:clamp(22px,2.6vw,30px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.ww-stromingen__grid{
display:grid;grid-template-columns:1fr 1fr;
gap:18px;
max-width:960px;margin:26px auto 0;
text-align:left;
}
.ww-stroming{
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
padding:20px 22px;
}
.ww-stroming strong{
display:block;margin-bottom:6px;
font-family:var(--font-heading);
font-size:17px;font-weight:700;
color:var(--kideo-teal);
}
.ww-stroming p{
margin:0;
font-family:var(--font-body);
font-size:15px;line-height:1.6;
color:var(--kideo-ink);
}
.ww-groep__titel{
margin:52px 0 20px;
font-family:var(--font-heading);
font-size:clamp(20px,2.2vw,26px);font-weight:700;
color:var(--kideo-teal);
}
.ww-groep__lijst{
list-style:none;margin:0 auto;padding:0;
max-width:640px;
display:flex;flex-direction:column;gap:14px;
text-align:left;
}
.ww-groep__lijst li{
display:flex;align-items:flex-start;gap:12px;
font-family:var(--font-body);
font-size:16px;line-height:1.5;
color:var(--kideo-ink);
}
.ww-vink{
flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
width:26px;height:26px;margin-top:1px;
background:var(--kideo-accent);color:#fff;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
}
.ww-vink svg{width:13px;height:13px}
.ww-slot{
margin:56px auto 0;
max-width:640px;
}
.ww-slot__quote{
margin:0 0 14px;
font-family:var(--font-heading);
font-size:clamp(19px,2.2vw,24px);font-weight:600;
line-height:1.4;
color:var(--kideo-teal);
}
.ww-slot__tekst{
margin:0 0 22px;
font-family:var(--font-body);
font-size:16px;
color:var(--kideo-muted);
}
.ww-slot__btn{
display:inline-flex;align-items:center;justify-content:center;
padding:.6em 1.6em;
background:var(--kideo-accent);color:#fff;
border:2px solid var(--kideo-accent);
border-radius:var(--radius);
font-family:var(--font-heading);
font-size:1.05rem;font-weight:600;
text-decoration:none;
transition:background-color .15s ease,border-color .15s ease;
}
.ww-slot__btn:hover,.ww-slot__btn:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);color:#fff;
}
.ww-slot__knoppen{
display:flex;flex-wrap:wrap;justify-content:center;
gap:12px;
}
@media(max-width:520px){
.ww-slot__knoppen{flex-direction:column;align-items:stretch}
}
@media(max-width:900px){
.ww-stromingen__grid{grid-template-columns:1fr}
.ww-visie{padding-bottom:56px}
}
/* groepen.css */
.lg-leeftijden{
display:flex;flex-wrap:wrap;justify-content:center;
gap:12px;
margin-top:20px;
}
.lg-chip{
display:inline-flex;align-items:center;gap:8px;
padding:9px 18px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:999px;
box-shadow:0 4px 10px rgba(31,59,58,.06);
font-family:var(--font-heading);
font-size:16px;font-weight:600;
color:var(--kideo-teal);
}
.lg-chip small{
font-family:var(--font-body);
font-size:13px;font-weight:400;
color:var(--kideo-muted);
}
.lg-watzijn{
background:#fff;
padding:56px 0;
}
.lg-watzijn__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.lg-groepen{
background:var(--kideo-cream);
padding:0 0 72px;
}
.lg-groepen__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.lg-groepen__grid{
display:grid;grid-template-columns:1fr 1fr;
gap:22px;
max-width:1000px;margin:28px auto 0;
text-align:left;
}
.lg-groep{
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
padding:24px 26px;
transition:transform .15s ease,box-shadow .15s ease;
}
.lg-groep:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(31,59,58,.11);
}
.lg-groep__kop{
display:flex;align-items:center;gap:14px;
margin:0 0 12px;
}
.lg-groep__leeftijd{
flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
width:52px;height:52px;
background:var(--kideo-accent);color:#fff;
font-family:var(--font-heading);
font-size:15px;font-weight:700;line-height:1;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
}
.lg-groep:nth-child(2) .lg-groep__leeftijd{border-radius:45% 55% 48% 52% / 55% 44% 56% 45%}
.lg-groep:nth-child(3) .lg-groep__leeftijd{border-radius:52% 48% 42% 58% / 45% 52% 48% 55%}
.lg-groep:nth-child(4) .lg-groep__leeftijd{border-radius:48% 52% 56% 44% / 52% 46% 54% 48%}
.lg-groep__titel{
margin:0;
font-family:var(--font-heading);
font-size:20px;font-weight:700;
color:var(--kideo-teal);
}
.lg-groep p{
margin:0 0 .9em;
font-family:var(--font-body);
font-size:15px;line-height:1.6;
color:var(--kideo-ink);
}
.lg-groep p:last-child{margin-bottom:0}
.lg-voordelen{
background:var(--kideo-cream);
padding:8px 0 72px;
}
.lg-voordelen__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
display:grid;grid-template-columns:5fr 7fr;
align-items:stretch;gap:56px;
}
.lg-voordelen__media{
position:relative;
border-radius:20px;overflow:hidden;
box-shadow:0 18px 40px rgba(31,59,58,.14);
}
.lg-voordelen__media img{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
}
.lg-voordelen .pijler__icoon{
font-family:var(--font-heading);
font-size:19px;font-weight:800;
}
@media(max-width:900px){
.lg-watzijn{padding:44px 0}
.lg-groepen__grid{grid-template-columns:1fr}
.lg-voordelen__inner{grid-template-columns:1fr;gap:32px}
.lg-voordelen__media{order:2;aspect-ratio:4/3;width:100%}
.lg-voordelen__content{order:1}
}
/* plaatsing.css */
.ps-stappen{
background:#fff;
padding:56px 0 64px;
}
.ps-stappen__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
}
.ps-stappen__titel{
margin:0 0 36px;
text-align:center;
font-family:var(--font-heading);
font-size:clamp(26px,3.2vw,36px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.ps-lijst{
list-style:none;margin:0 auto;padding:0;
max-width:760px;
}
.ps-stap{
position:relative;
display:grid;grid-template-columns:52px 1fr;
gap:20px;
padding-bottom:38px;
}
.ps-stap:last-child{padding-bottom:0}
.ps-stap:not(:last-child)::before{
content:"";
position:absolute;left:25px;top:58px;bottom:8px;
width:2px;
background:var(--kideo-line);
}
.ps-stap__nr{
display:flex;align-items:center;justify-content:center;
width:52px;height:52px;
background:var(--kideo-accent);color:#fff;
font-family:var(--font-heading);
font-size:20px;font-weight:800;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
}
.ps-stap:nth-child(2) .ps-stap__nr{border-radius:45% 55% 48% 52% / 55% 44% 56% 45%}
.ps-stap:nth-child(3) .ps-stap__nr{border-radius:52% 48% 42% 58% / 45% 52% 48% 55%}
.ps-stap:nth-child(4) .ps-stap__nr{border-radius:48% 52% 56% 44% / 52% 46% 54% 48%}
.ps-stap:nth-child(5) .ps-stap__nr{border-radius:55% 45% 50% 50% / 45% 55% 45% 55%}
.ps-stap:nth-child(6) .ps-stap__nr{border-radius:45% 55% 52% 48% / 55% 45% 55% 45%}
.ps-stap__titel{
margin:10px 0 8px;
font-family:var(--font-heading);
font-size:21px;font-weight:700;
color:var(--kideo-teal);
}
.ps-stap__body p{
margin:0 0 .9em;
font-family:var(--font-body);
font-size:16px;line-height:1.6;
color:var(--kideo-ink);
}
.ps-stap__body p:last-child{margin-bottom:0}
.ps-stap__body a{color:var(--kideo-accent);font-weight:600;text-decoration:none}
.ps-stap__body a:hover,.ps-stap__body a:focus{text-decoration:underline}
.ps-gegevens{
list-style:none;margin:10px 0 0;padding:0;
display:flex;flex-direction:column;gap:8px;
}
.ps-gegevens li{
display:flex;align-items:center;gap:10px;
font-family:var(--font-body);
font-size:15px;color:var(--kideo-ink);
}
.ps-gegevens .ww-vink{width:22px;height:22px}
.ps-gegevens .ww-vink svg{width:11px;height:11px}
.ps-notitie{
margin-top:14px;
padding:14px 18px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-left:4px solid var(--kideo-accent);
border-radius:var(--radius);
font-family:var(--font-body);
font-size:15px;line-height:1.55;
color:var(--kideo-ink);
}
.ps-notitie strong{color:var(--kideo-teal)}
.ps-downloads{
background:var(--kideo-cream);
padding:0 0 72px;
}
.ps-downloads__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.ps-downloads__grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:18px;
max-width:900px;margin:28px auto 0;
}
.ps-download{
display:flex;flex-direction:column;align-items:center;gap:12px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
padding:26px 20px 22px;
text-decoration:none;
transition:transform .15s ease,box-shadow .15s ease;
}
.ps-download:hover,.ps-download:focus{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(31,59,58,.11);
}
.ps-download__icoon{
display:flex;align-items:center;justify-content:center;
width:46px;height:46px;
background:var(--kideo-accent);color:#fff;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
}
.ps-download__icoon svg{width:20px;height:20px}
.ps-download__naam{
font-family:var(--font-heading);
font-size:17px;font-weight:700;
color:var(--kideo-teal);
}
.ps-download__hint{
font-family:var(--font-body);
font-size:13px;
color:var(--kideo-muted);
}
@media(max-width:900px){
.ps-stappen{padding:44px 0 52px}
.ps-downloads__grid{grid-template-columns:1fr;max-width:420px}
}
@media(max-width:520px){
.ps-stap{grid-template-columns:44px 1fr;gap:14px}
.ps-stap__nr{width:44px;height:44px;font-size:17px}
.ps-stap:not(:last-child)::before{left:21px;top:50px}
}
/* voeding.css */
.vd-uitleg{
background:#fff;
padding:56px 0 64px;
}
.vd-uitleg__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
display:grid;grid-template-columns:5fr 7fr;
align-items:stretch;gap:56px;
}
.vd-uitleg__media{
position:relative;
border-radius:20px;overflow:hidden;
box-shadow:0 18px 40px rgba(31,59,58,.14);
}
.vd-uitleg__media img{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
}
.vd-uitleg__content h2{
margin:0 0 12px;
font-family:var(--font-heading);
font-size:clamp(22px,2.6vw,30px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.vd-uitleg__content h3{
margin:26px 0 10px;
font-family:var(--font-heading);
font-size:20px;font-weight:700;
color:var(--kideo-teal);
}
.vd-uitleg__content p{
margin:0 0 1em;
font-family:var(--font-body);
font-size:16px;line-height:1.65;
color:var(--kideo-ink);
}
.vd-uitleg__content p:last-child{margin-bottom:0}
.vd-menu{
background:var(--kideo-cream);
padding:0 0 64px;
}
.vd-menu__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.vd-menu__grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:18px;
max-width:960px;margin:28px auto 0;
}
.vd-kaart{
display:flex;flex-direction:column;align-items:center;gap:12px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
padding:26px 22px;
transition:transform .15s ease,box-shadow .15s ease;
}
.vd-kaart:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(31,59,58,.11);
}
.vd-kaart__icoon{
display:flex;align-items:center;justify-content:center;
width:52px;height:52px;
background:var(--kideo-accent);color:#fff;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
}
.vd-kaart:nth-child(2) .vd-kaart__icoon{border-radius:45% 55% 48% 52% / 55% 44% 56% 45%}
.vd-kaart:nth-child(3) .vd-kaart__icoon{border-radius:52% 48% 42% 58% / 45% 52% 48% 55%}
.vd-kaart__icoon svg{width:24px;height:24px}
.vd-kaart__naam{
margin:0;
font-family:var(--font-heading);
font-size:18px;font-weight:700;
color:var(--kideo-teal);
}
.vd-kaart__tekst{
margin:0;
font-family:var(--font-body);
font-size:15px;line-height:1.55;
color:var(--kideo-ink);
}
.vd-menu__noot{
max-width:640px;margin:24px auto 0;
font-family:var(--font-body);
font-size:15px;
color:var(--kideo-muted);
}
.vd-methode{
background:#fff;
padding:56px 0;
}
.vd-methode__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.vd-callout{
max-width:720px;
margin:56px auto 0;
padding:28px 30px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
}
.vd-callout__kop{
display:flex;align-items:center;justify-content:center;gap:12px;
margin:0 0 10px;
font-family:var(--font-heading);
font-size:clamp(19px,2.2vw,24px);font-weight:800;
color:var(--kideo-teal);
}
.vd-callout__kop .ww-vink{width:30px;height:30px}
.vd-callout__kop .ww-vink svg{width:15px;height:15px}
.vd-callout p{
margin:0;
font-family:var(--font-body);
font-size:16px;line-height:1.6;
color:var(--kideo-ink);
}
.vd-madaga{
max-width:720px;
margin:22px auto 0;
padding:24px 30px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-left:4px solid var(--kideo-accent);
border-radius:var(--radius);
text-align:left;
}
.vd-madaga h3{
margin:0 0 8px;
font-family:var(--font-heading);
font-size:19px;font-weight:700;
color:var(--kideo-teal);
}
.vd-madaga p{
margin:0 0 .7em;
font-family:var(--font-body);
font-size:15px;line-height:1.6;
color:var(--kideo-ink);
}
.vd-madaga p:last-child{margin-bottom:0}
.vd-madaga strong{color:var(--kideo-teal)}
@media(max-width:900px){
.vd-uitleg{padding:44px 0 52px}
.vd-uitleg__inner{grid-template-columns:1fr;gap:28px}
.vd-uitleg__media{aspect-ratio:4/3}
.vd-menu__grid{grid-template-columns:1fr;max-width:420px}
.vd-callout{margin-top:44px}
}
/* tarieven.css */
.tp-pakketten{
background:#fff;
padding:56px 0 64px;
}
.tp-pakketten__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.tp-pakketten__grid{
display:grid;grid-template-columns:1fr 1fr;
gap:24px;
max-width:1060px;margin:30px auto 0;
text-align:left;
}
.tp-pakketten--creme{background:var(--kideo-cream);padding-top:0}
.tp-pakketten__grid--een{grid-template-columns:minmax(0,560px);justify-content:center}
.tp-pakketten__grid--drie{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:18px;
max-width:1160px;
padding:6px 6px 16px;
scrollbar-width:thin;
scrollbar-color:var(--kideo-accent) transparent;
}
.tp-pakketten__grid--drie::-webkit-scrollbar{height:8px}
.tp-pakketten__grid--drie::-webkit-scrollbar-track{background:rgba(31,59,58,.08);border-radius:999px}
.tp-pakketten__grid--drie::-webkit-scrollbar-thumb{background:var(--kideo-accent);border-radius:999px}
.tp-pakketten__grid--drie .tp-pakket{
flex:0 0 min(480px,86%);
min-width:0;
scroll-snap-align:center;
padding:22px 24px;
}
.swiper .tp-pakketten__grid--drie{margin-top:30px}
.tp-pakket{
display:flex;flex-direction:column;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
padding:26px 28px;
}
.tp-pakket__kop{
display:flex;align-items:center;gap:14px;
margin:0 0 14px;
}
.tp-pakket__icoon{
flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
width:46px;height:46px;
background:var(--kideo-accent);color:#fff;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
}
.tp-pakket:nth-child(2) .tp-pakket__icoon{border-radius:45% 55% 48% 52% / 55% 44% 56% 45%}
.tp-pakket__icoon svg{width:22px;height:22px}
.tp-pakket__titel{
margin:0;
font-family:var(--font-heading);
font-size:21px;font-weight:700;
color:var(--kideo-teal);
}
.tp-specs{
display:flex;flex-wrap:wrap;gap:8px;
margin:0 0 14px;
}
.tp-spec{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-body);
font-size:13.5px;
color:var(--kideo-ink);
}
.tp-spec strong{color:var(--kideo-teal);font-weight:600}
.tp-pakket__tekst{
margin:0 0 18px;
font-family:var(--font-body);
font-size:15px;line-height:1.6;
color:var(--kideo-ink);
}
.tp-tabel{
width:100%;
border-collapse:collapse;
font-family:var(--font-body);
font-size:15px;
margin-top:auto;
}
.tp-tabel caption{
text-align:left;
font-family:var(--font-heading);
font-size:15px;font-weight:600;
color:var(--kideo-teal);
padding-bottom:8px;
}
.tp-tabel th{
text-align:left;
font-weight:600;font-size:13px;
text-transform:uppercase;letter-spacing:.04em;
color:var(--kideo-muted);
padding:6px 8px;
border-bottom:2px solid var(--kideo-line);
}
.tp-tabel td{
padding:9px 8px;
border-bottom:1px solid var(--kideo-line);
color:var(--kideo-ink);
}
.tp-tabel tr:last-child td{border-bottom:none}
.tp-tabel th:last-child,.tp-tabel td:last-child{text-align:right}
.tp-tabel td:last-child{
font-family:var(--font-heading);
font-weight:600;
color:var(--kideo-teal);
white-space:nowrap;
}
.tp-extra{
display:flex;justify-content:space-between;align-items:baseline;
flex-wrap:wrap;gap:4px 12px;
margin-top:14px;padding-top:12px;
border-top:2px solid var(--kideo-line);
font-family:var(--font-body);
font-size:14.5px;
color:var(--kideo-ink);
}
.tp-extra__label{font-weight:600;color:var(--kideo-teal)}
.tp-extra__label small{font-weight:400;font-size:13px;color:var(--kideo-muted)}
.tp-extra strong{
font-family:var(--font-heading);
font-size:16px;font-weight:700;
color:var(--kideo-teal);
}
.ed-sectie{
background:var(--kideo-cream);
padding:0 0 64px;
}
.ed-sectie .golf-scheiding{margin-bottom:0}
.ed-sectie__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.tp-info{padding-top:16px}
.ed-tool{
max-width:640px;
margin:26px auto 0;
padding:24px 26px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 10px 24px rgba(31,59,58,.09);
text-align:left;
}
.ed-tool__titel{
margin:0 0 4px;
font-family:var(--font-heading);
font-size:20px;font-weight:700;
color:var(--kideo-teal);
}
.ed-tool__sub{
margin:0 0 16px;
font-family:var(--font-body);
font-size:14px;
color:var(--kideo-muted);
}
.ed-tool__velden{
display:grid;grid-template-columns:1fr 1fr;
gap:12px 16px;
}
.ed-veld{
display:flex;flex-direction:column;gap:6px;
font-family:var(--font-body);
font-size:13.5px;font-weight:500;
color:var(--kideo-teal);
border:none;margin:0;padding:0;
}
.ed-veld select{
padding:9px 12px;
border:1px solid var(--kideo-line);
border-radius:var(--radius);
font-family:var(--font-body);
font-size:15px;color:var(--kideo-ink);
background:#fff;
}
.ed-veld select:focus{
outline:2px solid var(--kideo-accent);outline-offset:1px;
border-color:var(--kideo-accent);
}
.ed-veld--radio{grid-column:1 / -1}
.ed-veld--radio legend{padding:0 0 6px;font-size:13.5px}
.ed-veld--radio label{
display:inline-flex;align-items:center;gap:6px;
margin-right:18px;
font-weight:400;font-size:14.5px;color:var(--kideo-ink);
}
.ed-veld--radio input{accent-color:var(--kideo-accent)}
.ed-resultaat{
margin-top:16px;
padding-top:14px;
border-top:2px solid var(--kideo-line);
}
.ed-regel{
display:flex;justify-content:space-between;gap:12px;
padding:4px 0;
font-family:var(--font-body);
font-size:14.5px;color:var(--kideo-ink);
}
.ed-regel--netto{
margin-top:6px;padding-top:10px;
border-top:1px solid var(--kideo-line);
font-family:var(--font-heading);
font-size:17px;font-weight:700;
color:var(--kideo-teal);
}
.ed-noot{
margin:12px 0 0;
font-family:var(--font-body);
font-size:12.5px;line-height:1.5;
color:var(--kideo-muted);
}
@media(max-width:560px){
.ed-tool__velden{grid-template-columns:1fr}
}
.tp-toeslag{
max-width:760px;
margin:22px auto 0;
padding:16px 20px;
background:#fff;
border:1px solid var(--kideo-line);
border-left:4px solid var(--kideo-accent);
border-radius:var(--radius);
font-family:var(--font-body);
font-size:15px;line-height:1.6;
color:var(--kideo-ink);
text-align:left;
}
.tp-toeslag strong{color:var(--kideo-teal)}
.tp-cta{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
margin-top:22px;
padding:.6em 1.6em;
background:var(--kideo-accent);color:#fff;
border:2px solid var(--kideo-accent);
border-radius:var(--radius);
font-family:var(--font-heading);
font-size:1.05rem;font-weight:600;
text-decoration:none;
transition:background-color .15s ease,border-color .15s ease;
}
.tp-cta:hover,.tp-cta:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);color:#fff;
}
.tp-cta svg{width:18px;height:18px}
.tp-feestdagen{
list-style:none;margin:8px 0 10px;padding:0;
display:flex;flex-direction:column;gap:5px;
font-size:14.5px;
}
.tp-feestdagen li{display:flex;align-items:center;gap:8px}
.tp-feestdagen li::before{
content:"";flex:0 0 auto;
width:7px;height:7px;
background:var(--kideo-accent);
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
}
@media(max-width:900px){
.tp-pakketten{padding:44px 0 52px}
.tp-pakketten--creme{padding-top:0}
.tp-pakketten__grid{grid-template-columns:1fr;max-width:560px}
.tp-pakketten__grid--drie{max-width:1160px}
.tp-pakketten__grid--drie .tp-pakket{flex-basis:86%}
}
@media(max-width:420px){
.tp-tabel{font-size:13.5px}
.tp-tabel td,.tp-tabel th{padding:8px 5px}
}
/* rekentool.css */
.rekentool-sectie{
padding:12px 0 72px;
}
:root{
--cream:#FBF6EC;
--ink:#1F3B3A;
--teal:#1B4B4A;
--coral:#FF6F59;
--mustard:#F4B942;
--mint:#8FC7B8;
--line:#E4DAC6;
}
*{box-sizing:border-box;}
.hidden{display:none !important;}
.wrap{max-width:920px;margin:0 auto;}
h1{
font-family:'Baloo 2',sans-serif;
font-weight:800;
font-size:clamp(28px,4vw,40px);
margin:0 0 6px;
color:var(--teal);
}
.sub{
font-size:15px;
color:#4b6362;
margin:0 0 28px;
max-width:560px;
line-height:1.5;
}
.grid{
display:flex;
flex-direction:column;
gap:28px;
}
#stepSituatie h2{
cursor:pointer;
user-select:none;
display:flex;
align-items:center;
}
#stepSituatie h2 .step-chevron{
margin-left:auto;
font-size:15px;
color:#9B2E77;
transition:transform .15s ease;
}
#stepSituatie.collapsed h2{margin-bottom:0;}
#stepSituatie.collapsed h2 .step-chevron{transform:rotate(-90deg);}
#stepSituatie.collapsed > *:not(h2){display:none;}
.right-col{
display:flex;
flex-direction:row;
gap:28px;
align-items:stretch;
}
.right-col > *{flex:1 1 0; min-width:0;}
.right-col .result-card,
.right-col .contact-card{
height:100%;
display:flex;
flex-direction:column;
}
.right-col #resultZone{display:flex;}
.right-col #resultZone > *{flex:1; min-width:0;}
.contact-card .contact-btn{margin-top:auto;}
@media (max-width:760px){
.right-col{flex-direction:column;}
}
.back-btn{
display:inline-flex;
align-items:center;
gap:6px;
background:none;
border:none;
color:var(--teal);
font-family:'Work Sans',sans-serif;
font-size:13px;
font-weight:600;
cursor:pointer;
padding:4px 0;
margin-bottom:12px;
}
.back-btn:hover{color:#9B2E77;}
.card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:24px;
}
.card h2{
font-family:'Baloo 2',sans-serif;
font-size:19px;
margin:0 0 16px;
color:var(--teal);
}
.step-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
border-radius:50%;
background:#9B2E77;
color:#fff;
font-family:'Baloo 2',sans-serif;
font-size:14px;
font-weight:700;
margin-right:9px;
vertical-align:middle;
flex:none;
}
.field{margin-bottom:16px;}
.field label{
display:block;
font-size:13px;
font-weight:600;
color:var(--teal);
margin-bottom:6px;
}
.field .hint{font-weight:400;color:#7a8f8d;font-size:12px;}
select, input[type=number], input[type=text], input[type=email], input[type=tel], input[type=date]{
width:100%;
padding:10px 12px;
border:1.5px solid var(--line);
border-radius:10px;
font-size:15px;
font-family:'Work Sans',sans-serif;
background:#fff;
color:var(--ink);
}
select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
padding-right:38px;
color:var(--teal);
cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239B2E77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:16px;
}
select option{
color:var(--ink);
background:#fff;
padding:10px;
font-family:'Work Sans',sans-serif;
}
select:hover{border-color:#9B2E77;}
select:focus, input:focus{outline:none; border-color:#9B2E77;}
.custom-select-wrapper{position:relative;}
.native-hidden-select{
position:absolute;
opacity:0;
width:1px;
height:1px;
pointer-events:none;
}
.custom-select-trigger{
width:100%;
padding:10px 38px 10px 12px;
border:1.5px solid var(--line);
border-radius:10px;
font-size:15px;
font-family:'Work Sans',sans-serif;
background-color:#fff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239B2E77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:16px;
color:var(--teal);
cursor:pointer;
user-select:none;
transition:border-color .1s ease;
}
.custom-select-wrapper.open .custom-select-trigger{
border-color:#9B2E77;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 12.5L10 7.5L15 12.5' stroke='%239B2E77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.custom-select-trigger:hover{border-color:#9B2E77;}
.custom-select-trigger.is-placeholder{color:#8a9c9a;}
.veld-fout{
border-color:#d9534f !important;
box-shadow:0 0 0 2px rgba(217,83,79,0.15);
border-radius:10px;
}
.custom-select-panel{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
border:1.5px solid #9B2E77;
border-top:none;
border-radius:0 0 10px 10px;
max-height:220px;
overflow-y:auto;
z-index:30;
box-shadow:0 10px 18px rgba(31,59,58,0.12);
}
.custom-select-wrapper.open .custom-select-panel{display:block;}
.custom-select-option{
padding:9px 12px;
font-size:14px;
color:var(--ink);
cursor:pointer;
}
.custom-select-option:hover{background:var(--cream); color:var(--teal);}
.custom-select-option.selected{background:var(--cream); color:var(--teal); font-weight:600;}
.opt-sub{
font-size:11.5px;
font-weight:400;
color:#7a8f8d;
margin-top:2px;
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.child-block{
border-top:1px dashed var(--line);
padding-top:14px;
margin-top:6px;
}
.child-title{
font-weight:700;
font-size:13px;
color:var(--coral);
margin-bottom:10px;
display:flex;
align-items:center;
gap:8px;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--coral);display:inline-block;}
.child-title{cursor:pointer; user-select:none;}
.chevron{
font-size:13px;
color:#9B2E77;
transition:transform .15s ease;
display:inline-block;
}
.child-block.collapsed .chevron{transform:rotate(-90deg);}
.child-block.collapsed .child-body{display:none;}
.child-naam-preview{
font-weight:600;
color:var(--teal);
}
.dagen-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:8px;
}
.dag-kolom{display:flex;flex-direction:column;gap:6px;}
.dag-naam{
font-size:12px;
font-weight:700;
color:var(--teal);
text-align:center;
}
.dag-chip input{display:none;}
.dag-chip span{
display:block;
text-align:center;
padding:8px 2px;
border:1.5px solid var(--line);
border-radius:8px;
font-size:11.5px;
font-weight:600;
color:#6f8482;
cursor:pointer;
user-select:none;
transition:all .1s ease;
}
.dag-chip span:hover{border-color:#9B2E77; color:#9B2E77;}
.dag-chip input:checked + span{
background:#9B2E77;
border-color:#9B2E77;
color:#fff;
}
.dag-vink span::before{content:'\00a0';}
.dag-vink input:checked + span::before{content:'\2713';}
.remove-child{
margin-left:auto;
background:none;
border:none;
color:#a75d8f;
font-family:'Work Sans',sans-serif;
font-size:12px;
font-weight:600;
cursor:pointer;
padding:2px 6px;
border-radius:6px;
}
.remove-child:hover{background:#f7e6f0; color:#9B2E77;}
.income-block{
background:var(--cream);
border-radius:14px;
padding:16px 16px 4px;
margin-top:20px;
}
.income-title{
font-weight:700;
font-size:13px;
color:var(--teal);
text-transform:uppercase;
letter-spacing:.04em;
margin-bottom:10px;
}
.income-block .custom-select-trigger{background-color:#fff;}
.toggle-second{
background:none;
border:1.5px dashed var(--mint);
color:var(--teal);
border-radius:10px;
padding:8px 12px;
font-size:13px;
font-weight:600;
cursor:pointer;
width:100%;
margin-top:4px;
}
.toggle-second:hover{background:#f2faf7;}
button.calc{
width:100%;
margin-top:6px;
background:#9B2E77;
color:#fff;
border:none;
padding:14px;
border-radius:12px;
font-family:'Baloo 2',sans-serif;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:transform .15s ease, background .15s ease;
}
button.calc:hover{background:#7a2560; transform:translateY(-1px);}
.result-card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:24px;
}
.result-card h2{
font-family:'Baloo 2',sans-serif;
font-size:19px;
margin:0 0 16px;
color:var(--teal);
}
.result-main{
background:#9B2E77;
color:#fff;
border-radius:14px;
padding:18px 20px;
text-align:center;
margin-bottom:14px;
}
.result-row{
background:var(--cream);
border-radius:14px;
padding:14px 20px;
text-align:center;
color:var(--teal);
margin-bottom:12px;
}
.result-row:last-child{margin-bottom:0;}
.result-card .label{
font-size:12.5px;
font-weight:600;
letter-spacing:.02em;
opacity:.9;
margin-bottom:4px;
}
.result-card .value{
font-family:'Baloo 2',sans-serif;
font-size:26px;
font-weight:800;
}
.result-card .note{font-size:11.5px;opacity:.85;margin-top:4px;}
.no-toeslag-melding{
background:#fdf0ec;
border:1px solid #f0c9bd;
color:#8a3b26;
border-radius:12px;
padding:12px 16px;
font-size:13px;
line-height:1.5;
margin-bottom:14px;
}
.result-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
padding-top:14px;
border-top:1px solid var(--line);
}
.result-action{
flex:1 1 auto;
background:none;
border:1.5px solid var(--line);
border-radius:10px;
padding:9px 12px;
font-family:'Work Sans',sans-serif;
font-size:13px;
font-weight:600;
color:var(--teal);
cursor:pointer;
white-space:nowrap;
}
.result-action:hover{border-color:#9B2E77; color:#9B2E77;}
@media print{
.card, .toggle-second, button.calc, .sub, .result-actions, .contact-card{display:none !important;}
body{background:#fff; padding:0;}
.grid{grid-template-columns:1fr;}
.result-card{border:none; padding:0;}
}
.placeholder{
border:2px dashed var(--line);
border-radius:20px;
padding:40px 20px;
text-align:center;
color:#8a9c9a;
font-size:14px;
}
.contact-card{
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:24px;
}
.contact-card h2{
font-family:'Baloo 2',sans-serif;
font-size:19px;
margin:0 0 10px;
color:var(--teal);
}
.contact-card p{
margin:0 0 16px;
font-size:14px;
line-height:1.6;
color:#4b6362;
}
.contact-btn{
display:block;
width:100%;
text-align:center;
background:#9B2E77;
color:#fff;
text-decoration:none;
border:none;
cursor:pointer;
padding:12px;
border-radius:12px;
font-family:'Baloo 2',sans-serif;
font-size:15px;
font-weight:700;
transition:background .15s ease, transform .15s ease;
}
.contact-btn:hover{background:#7a2560; transform:translateY(-1px);}
.contact-melding{
margin-top:12px;
font-size:13px;
color:var(--teal);
background:#f2faf7;
border:1px solid var(--mint);
border-radius:10px;
padding:10px 12px;
}
.disclaimer{
margin-top:24px;
font-size:12px;
line-height:1.6;
color:#6f8482;
border-top:1px solid var(--line);
padding-top:14px;
}
.disclaimer a{color:var(--teal);}
.contact-card--klaar > :not(.contact-succes){display:none !important;}
.contact-succes{
display:flex;flex-direction:column;align-items:center;
text-align:center;
padding:18px 6px 8px;
}
.contact-succes__blob{
display:flex;align-items:center;justify-content:center;
width:58px;height:58px;margin-bottom:16px;
background:var(--kideo-accent, #9B2E77);color:#fff;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
}
.contact-succes__blob svg{width:26px;height:26px}
.contact-succes h3{
margin:0 0 8px;
font-size:20px;font-weight:700;
color:var(--kideo-teal, #1B4B4A);
}
.contact-succes p{
margin:0 0 6px;
font-size:15px;line-height:1.55;
color:#4b6362;
}
.contact-succes__ref{
margin-top:10px !important;
}
.contact-succes__ref strong{
font-size:18px;letter-spacing:.5px;
color:var(--kideo-teal, #1B4B4A);
}
.contact-succes__terug{
display:inline-flex;align-items:center;gap:9px;
margin-top:20px;
padding:10px 20px;
background:#FBF6EC;
border:1px solid #E4DAC6;
border-radius:999px;
font-family:inherit;
font-size:15px;font-weight:700;
color:var(--kideo-teal, #1B4B4A);
cursor:pointer;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.contact-succes__terug svg{width:14px;height:14px}
.contact-succes__terug:hover,.contact-succes__terug:focus{
background:var(--kideo-accent, #9B2E77);
border-color:var(--kideo-accent, #9B2E77);
color:#fff;
}
.geb-keuze{display:flex;gap:8px;}
.geb-keuze select{flex:1;min-width:0;}
.geb-keuze .f-geb-dag{flex:0.7;}
.geb-keuze .f-geb-maand{flex:1.4;}
/* vestigingen.css */
.vg-vestigingen{
background:#fff;
padding:56px 0 72px;
}
.vg-vestigingen__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.vg-weergave{
display:flex;justify-content:center;gap:8px;
margin-top:22px;
}
.vg-weergave__knop{
display:inline-flex;align-items:center;gap:7px;
padding:8px 16px;
background:#fff;
border:1.5px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:14.5px;font-weight:600;
color:var(--kideo-teal);
cursor:pointer;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.vg-weergave__knop svg{width:15px;height:15px}
.vg-weergave__knop:hover{border-color:var(--kideo-accent);color:var(--kideo-accent)}
.vg-weergave__knop.actief{
background:var(--kideo-accent);
border-color:var(--kideo-accent);
color:#fff;
}
.vg-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:24px;
max-width:1000px;margin:30px auto 0;
text-align:left;
}
.vg-grid[hidden]{display:none}
.vg-grid--lijst{
grid-template-columns:1fr;
max-width:820px;
}
.vg-grid--lijst .vg-kaart{flex-direction:row}
.vg-grid--lijst .vg-kaart__media{
flex:0 0 230px;
aspect-ratio:auto;
}
.vg-grid--lijst .vg-kaart__body{padding:18px 22px}
.vg-kaartweergave{
max-width:1000px;margin:30px auto 0;
height:480px;
border-radius:20px;
overflow:hidden;
border:1px solid var(--kideo-line);
box-shadow:0 8px 20px rgba(31,59,58,.07);
}
.vg-kaartweergave[hidden]{display:none}
.vg-pin span{
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;
background:var(--kideo-accent);color:#fff;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
box-shadow:0 6px 14px rgba(31,59,58,.3);
}
.vg-pin svg{width:20px;height:20px}
.leaflet-popup-content{
font-family:var(--font-body);
font-size:14px;line-height:1.5;
color:var(--kideo-ink);
}
.leaflet-popup-content strong{
font-family:var(--font-heading);
color:var(--kideo-teal);
}
.leaflet-popup-content a{color:var(--kideo-accent);font-weight:600;text-decoration:none}
.leaflet-popup-content a:hover{text-decoration:underline}
.vg-kaart[hidden]{display:none}
.vg-kaart{
display:flex;flex-direction:column;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
overflow:hidden;
transition:transform .15s ease,box-shadow .15s ease;
}
.vg-kaart:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(31,59,58,.11);
}
.vg-kaart__media{
aspect-ratio:16/9;
overflow:hidden;
}
.vg-kaart__media img{
width:100%;height:100%;object-fit:cover;
}
.vg-kaart__body{
display:flex;flex-direction:column;flex:1;
padding:20px 22px 22px;
}
.vg-kaart__titel{
margin:0 0 8px;
font-family:var(--font-heading);
font-size:20px;font-weight:700;
color:var(--kideo-teal);
}
.vg-kaart__adres{
display:flex;align-items:flex-start;gap:8px;
margin:0 0 16px;
font-family:var(--font-body);
font-size:15px;line-height:1.5;
color:var(--kideo-ink);
font-style:normal;
}
.vg-kaart__adres svg{
flex:0 0 auto;width:15px;height:15px;
margin-top:3px;
color:var(--kideo-accent);
}
.vg-kaart__links{
display:flex;flex-wrap:wrap;gap:10px;
margin-top:auto;
}
.vg-link{
display:inline-flex;align-items:center;gap:6px;
padding:7px 15px;
background:transparent;
border:2px solid var(--kideo-teal);
border-radius:999px;
font-family:var(--font-heading);
font-size:14.5px;font-weight:600;
color:var(--kideo-teal);
text-decoration:none;
transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.vg-link:hover,.vg-link:focus{
background:var(--kideo-teal);color:#fff;
}
.vg-link--primair{
background:var(--kideo-accent);
border-color:var(--kideo-accent);
color:#fff;
}
.vg-link--primair:hover,.vg-link--primair:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);color:#fff;
}
@media(max-width:820px){
.vg-vestigingen{padding:44px 0 56px}
.vg-grid{grid-template-columns:1fr;max-width:520px}
.vg-grid--lijst .vg-kaart{flex-direction:column}
.vg-grid--lijst .vg-kaart__media{flex:none;aspect-ratio:16/9}
.vg-kaartweergave{height:400px}
}
/* vestiging.css */
.vp-blokken{
background:#fff;
padding:56px 0;
}
.vp-blokken__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
display:flex;flex-direction:column;gap:56px;
}
.vp-blok{
display:grid;grid-template-columns:5fr 7fr;
align-items:center;gap:56px;
}
.vp-blok--gespiegeld{grid-template-columns:7fr 5fr}
.vp-blok--gespiegeld .vp-blok__media{order:2}
.vp-blok--gespiegeld .vp-blok__content{order:1}
.vp-blok__media img{
width:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:20px;
box-shadow:0 14px 32px rgba(31,59,58,.12);
}
.vp-blok__content h2{
margin:0 0 12px;
font-family:var(--font-heading);
font-size:clamp(22px,2.6vw,30px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.vp-blok__content p{
margin:0 0 1em;
font-family:var(--font-body);
font-size:16px;line-height:1.65;
color:var(--kideo-ink);
}
.vp-blok__content p:last-child{margin-bottom:0}
.vp-duo{
background:var(--kideo-cream);
padding:0 0 56px;
}
.vp-duo__inner{
max-width:1000px;margin:0 auto;padding:0 20px;
display:grid;grid-template-columns:1fr 1fr;
gap:24px;
}
.vp-kaart{
display:flex;flex-direction:column;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
overflow:hidden;
box-shadow:0 8px 20px rgba(31,59,58,.07);
}
.vp-kaart__media{aspect-ratio:16/10;overflow:hidden}
.vp-kaart__media img{width:100%;height:100%;object-fit:cover}
.vp-kaart__body{padding:22px 24px 26px}
.vp-kaart__body h2{
margin:0 0 10px;
font-family:var(--font-heading);
font-size:21px;font-weight:700;
color:var(--kideo-teal);
}
.vp-kaart__body p{
margin:0 0 .9em;
font-family:var(--font-body);
font-size:15px;line-height:1.6;
color:var(--kideo-ink);
}
.vp-kaart__body p:last-child{margin-bottom:0}
@media(max-width:820px){
.vp-duo__inner{grid-template-columns:1fr;max-width:520px}
}
.vp-galerij{margin-top:36px}
.vp-galerij__rij{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:16px;
padding:6px 6px 14px;
scrollbar-width:thin;
scrollbar-color:var(--kideo-accent) transparent;
}
.vp-galerij__rij::-webkit-scrollbar{height:8px}
.vp-galerij__rij::-webkit-scrollbar-track{background:rgba(31,59,58,.08);border-radius:999px}
.vp-galerij__rij::-webkit-scrollbar-thumb{background:var(--kideo-accent);border-radius:999px}
.vp-galerij__rij img{
flex:0 0 min(288px,72%);
width:min(288px,72%);min-width:0;
aspect-ratio:4/3;object-fit:cover;
border-radius:14px;
scroll-snap-align:start;
box-shadow:0 8px 18px rgba(31,59,58,.1);
cursor:zoom-in;
transition:transform .15s ease;
}
.vp-galerij__rij img:hover{transform:scale(1.04)}
.lichtbak{
position:fixed;inset:0;z-index:2000;
display:flex;align-items:center;justify-content:center;
background:rgba(31,59,58,.88);
padding:24px;
}
.lichtbak[hidden]{display:none}
.lichtbak__foto{
max-width:min(1100px,92vw);
max-height:85vh;
border-radius:14px;
box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.lichtbak__sluit,
.lichtbak__pijl{
position:absolute;z-index:1;
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;
background:var(--kideo-accent);color:#fff;
border:none;cursor:pointer;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
box-shadow:0 8px 18px rgba(0,0,0,.3);
transition:background-color .15s ease,transform .15s ease;
}
.lichtbak__sluit svg,.lichtbak__pijl svg{width:18px;height:18px}
.lichtbak__sluit{top:18px;right:18px}
.lichtbak__pijl--links{left:14px;top:50%;transform:translateY(-50%)}
.lichtbak__pijl--rechts{right:14px;top:50%;transform:translateY(-50%)}
.lichtbak__sluit:hover{background:var(--kideo-accent-dark);transform:scale(1.07)}
.lichtbak__pijl:hover{background:var(--kideo-accent-dark);transform:translateY(-50%) scale(1.07)}
.vp-team{
background:var(--kideo-cream);
padding:0 0 64px;
}
.vp-team__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.vp-team__rij{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:16px;
margin-top:28px;
padding:6px 6px 14px;
scrollbar-width:thin;
scrollbar-color:var(--kideo-accent) transparent;
}
.vp-team__rij::-webkit-scrollbar{height:8px}
.vp-team__rij::-webkit-scrollbar-track{background:rgba(31,59,58,.08);border-radius:999px}
.vp-team__rij::-webkit-scrollbar-thumb{background:var(--kideo-accent);border-radius:999px}
.vp-teamlid{
flex:0 0 156px;
width:156px;min-width:0;
margin:0;
scroll-snap-align:start;
}
.vp-teamlid img{
width:100%;aspect-ratio:1/1;object-fit:cover;
border-radius:20px;
box-shadow:0 8px 18px rgba(31,59,58,.1);
}
.vp-teamlid p{
margin:10px 0 0;
font-family:var(--font-heading);
font-size:15.5px;font-weight:600;
color:var(--kideo-teal);
}
.vp-portaal{
max-width:720px;
margin:48px auto 0;
padding:24px 30px;
background:#fff;
border:1px solid var(--kideo-line);
border-left:4px solid var(--kideo-accent);
border-radius:var(--radius);
text-align:left;
}
.vp-portaal h3{
margin:0 0 8px;
font-family:var(--font-heading);
font-size:19px;font-weight:700;
color:var(--kideo-teal);
}
.vp-portaal p{
margin:0 0 14px;
font-family:var(--font-body);
font-size:15px;line-height:1.6;
color:var(--kideo-ink);
}
.vp-portaal a{
display:inline-flex;align-items:center;
padding:.5em 1.3em;
background:var(--kideo-accent);color:#fff;
border:2px solid var(--kideo-accent);
border-radius:var(--radius);
font-family:var(--font-heading);
font-size:.95rem;font-weight:600;
text-decoration:none;
transition:background-color .15s ease,border-color .15s ease;
}
.vp-portaal a:hover,.vp-portaal a:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);
}
.vp-informatie .vp-portaal{background:var(--kideo-cream);margin-top:48px}
.vp-informatie{
background:#fff;
padding:56px 0 64px;
}
.vp-informatie__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.vp-accordeons{
max-width:820px;margin:26px auto 0;
display:flex;flex-direction:column;gap:12px;
text-align:left;
}
.vp-accordeons details{
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-radius:14px;
}
.vp-accordeons summary{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 20px;
cursor:pointer;
font-family:var(--font-heading);
font-size:17px;font-weight:600;
color:var(--kideo-teal);
list-style:none;
}
.vp-accordeons summary::-webkit-details-marker{display:none}
.vp-accordeons summary::after{
content:"\25BE";
flex:0 0 auto;
font-size:15px;
transition:transform .2s ease;
}
.vp-accordeons details[open] summary::after{transform:rotate(180deg)}
.vp-accordeons__body{
padding:0 20px 18px;
}
.vp-accordeons__body h4{
margin:14px 0 6px;
font-family:var(--font-heading);
font-size:15.5px;font-weight:700;
color:var(--kideo-teal);
}
.vp-accordeons__body p{
margin:0 0 .9em;
font-family:var(--font-body);
font-size:15px;line-height:1.6;
color:var(--kideo-ink);
}
.vp-accordeons__body p:last-child{margin-bottom:0}
.vp-accordeons__body ul{
margin:0 0 .9em;padding-left:20px;
font-family:var(--font-body);
font-size:15px;line-height:1.7;
color:var(--kideo-ink);
}
.vp-accordeons__body a{color:var(--kideo-accent);font-weight:600;text-decoration:none}
.vp-accordeons__body a:hover{text-decoration:underline}
.vp-info{
display:grid;grid-template-columns:repeat(3,1fr);
gap:18px;
max-width:1060px;margin:26px auto 0;
text-align:left;
}
.vp-infokaart{
background:#fff;
border:1px solid var(--kideo-line);
border-radius:20px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
padding:22px 24px;
}
.vp-infokaart h3{
display:flex;align-items:center;gap:10px;
margin:0 0 14px;
font-family:var(--font-heading);
font-size:17px;font-weight:700;
color:var(--kideo-teal);
}
.vp-infokaart h3 .ww-vink{width:30px;height:30px}
.vp-infokaart h3 .ww-vink svg{width:15px;height:15px}
.vp-infokaart p,.vp-infokaart address{
margin:0 0 .5em;
font-family:var(--font-body);
font-size:14.5px;line-height:1.55;
color:var(--kideo-ink);
font-style:normal;
}
.vp-infokaart a{color:var(--kideo-accent);font-weight:600;text-decoration:none}
.vp-infokaart a:hover{text-decoration:underline}
.vp-infokaart small{color:var(--kideo-muted)}
.vp-tijden{list-style:none;margin:0;padding:0}
.vp-tijden li{
display:flex;justify-content:space-between;gap:12px;
padding:5px 0;
border-bottom:1px solid var(--kideo-line);
font-family:var(--font-body);
font-size:14.5px;
color:var(--kideo-ink);
}
.vp-tijden li:last-child{border-bottom:none}
.vp-tijden strong{font-weight:600;color:var(--kideo-teal)}
.vp-rapporten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vp-rapporten a{
display:flex;align-items:flex-start;gap:8px;
font-size:14.5px;line-height:1.4;
}
.vp-rapporten svg{flex:0 0 auto;width:15px;height:15px;margin-top:2px}
.vp-kaartje{
max-width:1060px;margin:22px auto 0;
height:340px;
border-radius:20px;
overflow:hidden;
border:1px solid var(--kideo-line);
box-shadow:0 8px 20px rgba(31,59,58,.07);
}
.vp-route{
display:inline-flex;align-items:center;gap:8px;
margin-top:16px;
padding:.55em 1.4em;
background:transparent;color:var(--kideo-teal);
border:2px solid var(--kideo-teal);
border-radius:var(--radius);
font-family:var(--font-heading);
font-size:.95rem;font-weight:600;
text-decoration:none;
transition:background-color .15s ease,color .15s ease;
}
.vp-route svg{width:16px;height:16px}
.vp-route:hover,.vp-route:focus{background:var(--kideo-teal);color:#fff}
@media(max-width:900px){
.vp-blokken{padding:44px 0}
.vp-blokken__inner{gap:40px}
.vp-blok,
.vp-blok--gespiegeld{grid-template-columns:1fr;gap:20px}
.vp-blok--gespiegeld .vp-blok__media{order:1}
.vp-blok--gespiegeld .vp-blok__content{order:2}
.vp-info{grid-template-columns:1fr;max-width:460px}
.vp-teamlid{flex-basis:136px}
}
.vp-teamlid small{
display:block;
font-family:var(--font-body);
font-size:12.5px;font-weight:400;
color:var(--kideo-muted);
}
.vp-kaartje a[href^="tel:"],
.vp-kaartje a[href^="mailto:"],
.vp-info a[href^="tel:"],
.vp-info a[href^="mailto:"]{
display:inline-block;
padding:5px 0;
}
/* faq.css */
.faq-top{
padding:0 0 56px;
position:relative;z-index:2;
}
.faq-top__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
@media (max-width:720px){
.faq-top{padding-bottom:44px}
}
.faq-zoek{
position:relative;
max-width:560px;
margin:0 auto;
}
.faq-zoek svg{
position:absolute;left:16px;top:50%;
transform:translateY(-50%);
width:18px;height:18px;
color:var(--kideo-muted);
pointer-events:none;
}
.faq-zoek input{
width:100%;
padding:13px 18px 13px 46px;
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-body);
font-size:16px;color:var(--kideo-ink);
background:#fff;
box-shadow:0 6px 16px rgba(31,59,58,.07);
}
.faq-zoek input::placeholder{color:#9aa8a7}
.faq-zoek input:focus{
outline:2px solid var(--kideo-accent);outline-offset:1px;
border-color:var(--kideo-accent);
}
.faq-cats{
display:flex;flex-wrap:wrap;justify-content:center;
gap:10px;
margin-top:18px;
}
.faq-cats a{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:999px;
box-shadow:0 4px 10px rgba(31,59,58,.06);
font-family:var(--font-heading);
font-size:15px;font-weight:600;
color:var(--kideo-teal);
text-decoration:none;
transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.faq-cats a::before{
content:"";
width:8px;height:8px;
background:var(--kideo-accent);
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
transition:background-color .15s ease;
}
.faq-cats a:hover,.faq-cats a:focus{
background:var(--kideo-accent);border-color:var(--kideo-accent);
color:#fff;
transform:translateY(-1px);
}
.faq-cats a:hover::before,.faq-cats a:focus::before{background:#fff}
.faq-contact{
display:flex;flex-wrap:wrap;justify-content:center;
gap:12px;
margin:0 0 18px;
}
.faq-contact a{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:14.5px;font-weight:600;
color:var(--kideo-teal);
text-decoration:none;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.faq-contact a svg{width:15px;height:15px;color:var(--kideo-accent)}
.faq-contact a:hover,.faq-contact a:focus{
background:var(--kideo-accent);border-color:var(--kideo-accent);color:#fff;
}
.faq-contact a:hover svg,.faq-contact a:focus svg{color:#fff}
.faq-inhoud{
background:#fff;
padding:48px 0 64px;
}
.faq-inhoud__inner{
max-width:820px;margin:0 auto;padding:0 20px;
}
.faq-groep{
margin:0 0 34px;
scroll-margin-top:104px;
}
.faq-groep:last-child{margin-bottom:0}
.faq-groep__titel{
display:flex;align-items:center;gap:12px;
margin:0 0 14px;
font-family:var(--font-heading);
font-size:21px;font-weight:700;
color:var(--kideo-teal);
}
.faq-groep__titel span{
flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
width:36px;height:36px;
background:var(--kideo-accent);color:#fff;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
}
.faq-groep__titel span svg{width:17px;height:17px}
.faq-leeg{
margin:20px 0 0;
text-align:center;
font-family:var(--font-body);
font-size:16px;
color:var(--kideo-muted);
}
/* contact.css */
.ct-kanalen{
padding:0 0 64px;
position:relative;z-index:2;
}
.ct-kanalen__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
}
.ct-kanalen__grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
max-width:1080px;margin:0 auto;
}
.ct-kaart{
display:flex;flex-direction:column;gap:12px;
padding:26px 26px 24px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:22px;
box-shadow:0 10px 24px rgba(31,59,58,.08);
}
.ct-kaart__icoon{
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;
background:var(--kideo-accent);color:#fff;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
}
.ct-kaart:nth-child(2) .ct-kaart__icoon{border-radius:45% 55% 48% 52% / 55% 44% 56% 45%}
.ct-kaart:nth-child(3) .ct-kaart__icoon{border-radius:52% 48% 42% 58% / 45% 52% 48% 55%}
.ct-kaart__icoon svg{width:20px;height:20px}
.ct-kaart__titel{
margin:0;
font-family:var(--font-heading);
font-size:20px;font-weight:700;
color:var(--kideo-teal);
}
.ct-kaart__tekst{
margin:0;
font-family:var(--font-body);
font-size:15.5px;line-height:1.55;
color:var(--kideo-muted);
}
.ct-kaart__regels{
margin-top:auto;
display:flex;flex-direction:column;gap:8px;
padding-top:6px;
}
.ct-regel{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--font-heading);
font-size:15.5px;font-weight:600;
color:var(--kideo-teal);
text-decoration:none;
}
.ct-regel svg{
flex:0 0 auto;
width:15px;height:15px;color:var(--kideo-accent);
}
.ct-regel:hover,.ct-regel:focus{color:var(--kideo-accent)}
.ct-regel--adres{color:var(--kideo-muted);font-family:var(--font-body);font-weight:400}
.ct-vestigingen{
padding:56px 0 64px;
}
.ct-vestigingen__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
}
.ct-vestigingen__titel{
margin:0 0 6px;
font-family:var(--font-heading);
font-size:clamp(24px,3vw,30px);font-weight:700;
color:var(--kideo-teal);
text-align:center;
}
.ct-vestigingen__sub{
margin:0 auto 28px;max-width:640px;
font-family:var(--font-body);
font-size:16.5px;color:var(--kideo-muted);
text-align:center;
}
.ct-vestigingen__grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:16px;
}
.ct-vestiging{
display:flex;flex-direction:column;gap:6px;
padding:20px 22px 18px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:18px;
box-shadow:0 8px 20px rgba(31,59,58,.07);
text-decoration:none;color:inherit;
transition:transform .15s ease,box-shadow .15s ease;
}
.ct-vestiging:hover,.ct-vestiging:focus{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(31,59,58,.1);
}
.ct-vestiging strong{
font-family:var(--font-heading);
font-size:17px;font-weight:700;
color:var(--kideo-teal);
}
.ct-vestiging span{
font-family:var(--font-body);
font-size:14.5px;color:var(--kideo-muted);
}
.ct-vestiging__link{
margin-top:8px;
display:inline-flex;align-items:center;gap:7px;
font-family:var(--font-heading);
font-size:14.5px;font-weight:700;
color:var(--kideo-accent);
}
.ct-vestiging__link svg{
width:13px;height:13px;
transition:transform .15s ease;
}
.ct-vestiging:hover .ct-vestiging__link svg{transform:translateX(3px)}
/* vacatures.css */
.vac-sectie,.ps-stappen{scroll-margin-top:96px}
.vac-sectie{
padding:0 0 64px;
position:relative;z-index:2;
}
.vac-sectie__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
}
.vac-sectie__titel{
margin:0 0 6px;
font-family:var(--font-heading);
font-size:clamp(24px,3vw,30px);font-weight:700;
color:var(--kideo-teal);
text-align:center;
}
.vac-sectie__sub{
margin:0 auto 28px;max-width:640px;
font-family:var(--font-body);
font-size:16.5px;color:var(--kideo-muted);
text-align:center;
}
.vac-lijst{
display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:20px;
max-width:880px;margin:0 auto;
}
.vac-kaart{
display:flex;flex-direction:column;gap:14px;
padding:26px 26px 24px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:22px;
box-shadow:0 10px 24px rgba(31,59,58,.08);
text-decoration:none;color:inherit;
transition:transform .15s ease,box-shadow .15s ease;
}
.vac-kaart:hover,.vac-kaart:focus{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(31,59,58,.12);
}
.vac-kaart__icoon{
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;
background:var(--kideo-accent);color:#fff;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
}
.vac-kaart__icoon svg{width:20px;height:20px}
.vac-kaart__titel{
margin:0;
font-family:var(--font-heading);
font-size:20px;font-weight:700;
color:var(--kideo-teal);
}
.vac-kaart__meta{
display:flex;flex-wrap:wrap;gap:8px;
}
.vac-kaart__chip{
display:inline-flex;align-items:center;gap:6px;
padding:5px 12px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:13.5px;font-weight:600;
color:var(--kideo-teal);
}
.vac-kaart__chip svg{width:13px;height:13px;color:var(--kideo-accent)}
.vac-kaart__tekst{
margin:0;
font-family:var(--font-body);
font-size:15.5px;line-height:1.55;
color:var(--kideo-muted);
}
.vac-kaart__link{
margin-top:auto;
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-heading);
font-size:15.5px;font-weight:700;
color:var(--kideo-accent);
}
.vac-kaart__link svg{
width:15px;height:15px;
transition:transform .15s ease;
}
.vac-kaart:hover .vac-kaart__link svg{transform:translateX(3px)}
.vac-kaart--open{
border-style:dashed;border-color:#d8cfc0;
background:transparent;
box-shadow:none;
}
.vac-kaart--open:hover,.vac-kaart--open:focus{
box-shadow:0 10px 24px rgba(31,59,58,.08);
background:#fff;
}
.hero-banner__inner .vac-kaart__meta{
justify-content:flex-start;
margin-top:14px;
}
.hero-banner__inner .vac-kaart__chip{
box-shadow:0 4px 10px rgba(31,59,58,.15);
}
.vac-duo{
padding:56px 0 64px;
}
.vac-duo__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
display:grid;grid-template-columns:1fr 1fr;
gap:20px;
}
@media (max-width:820px){
.vac-duo__inner{grid-template-columns:1fr}
}
.vac-duo__kaart{
padding:28px 28px 26px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:22px;
box-shadow:0 10px 24px rgba(31,59,58,.08);
}
.vac-duo__kaart .ww-groep__titel{margin-top:0}
.vac-duo__kaart .ww-groep__lijst{max-width:none;margin-left:0;margin-right:0}
.vac-eisen{
background:#fff;
padding:56px 0 8px;
}
.vac-eisen__inner{
max-width:820px;margin:0 auto;padding:0 20px;
}
.vac-eisen .ww-groep__titel{margin-top:0;text-align:center}
/* formulier.css */
.sol-sectie{scroll-margin-top:96px}
.sol-sectie{
background:#fff;
padding:56px 0 72px;
}
.sol-sectie__inner{
max-width:660px;margin:0 auto;padding:0 20px;
}
.sol-sectie__titel{
margin:0 0 6px;
font-family:var(--font-heading);
font-size:clamp(24px,3vw,30px);font-weight:700;
color:var(--kideo-teal);
text-align:center;
}
.sol-sectie__sub{
margin:0 0 30px;
font-family:var(--font-body);
font-size:16.5px;color:var(--kideo-muted);
text-align:center;
}
.sol-vacature{
display:flex;align-items:center;justify-content:center;gap:9px;
width:fit-content;
margin:0 auto 26px;
padding:9px 18px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-body);
font-size:15px;color:var(--kideo-muted);
}
.sol-vacature svg{
flex:0 0 auto;
width:16px;height:16px;color:var(--kideo-accent);
}
.sol-vacature strong{
font-family:var(--font-heading);
font-weight:700;color:var(--kideo-teal);
}
.sol-form{
display:grid;grid-template-columns:1fr 1fr;
gap:16px 14px;
text-align:left;
}
.sol-form[hidden]{display:none}
.sol-veld{display:flex;flex-direction:column;gap:6px}
.sol-veld[hidden]{display:none}
.sol-veld--breed{grid-column:1 / -1}
@media (max-width:560px){
.sol-form{grid-template-columns:1fr}
.sol-veld{grid-column:auto}
}
.sol-veld label,.sol-veld legend{
font-family:var(--font-heading);
font-size:14.5px;font-weight:600;
color:var(--kideo-teal);
}
.sol-veld label abbr,.sol-veld legend abbr{
color:var(--kideo-accent);
text-decoration:none;
}
.sol-veld fieldset{
border:0;margin:0;padding:0;
display:flex;flex-direction:column;gap:8px;
}
.sol-veld input[type="text"],
.sol-veld input[type="email"],
.sol-veld input[type="tel"],
.sol-veld input[type="date"],
.sol-veld textarea{
width:100%;
padding:11px 16px;
border:1px solid var(--kideo-line);
border-radius:14px;
font-family:var(--font-body);
font-size:16px;color:var(--kideo-ink);
background:#fff;
}
.sol-veld textarea{min-height:130px;resize:vertical}
.sol-veld select{
width:100%;
padding:11px 42px 11px 16px;
border:1px solid var(--kideo-line);
border-radius:14px;
font-family:var(--font-body);
font-size:16px;color:var(--kideo-ink);
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231B4B4A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px;
appearance:none;-webkit-appearance:none;
cursor:pointer;
}
.sol-veld select:invalid{color:#9aa8a7}
.sol-veld input:focus,.sol-veld textarea:focus,.sol-veld select:focus{
outline:2px solid var(--kideo-accent);outline-offset:1px;
border-color:var(--kideo-accent);
}
.sol-veld input::placeholder,.sol-veld textarea::placeholder{color:#9aa8a7}
.sol-keuzes{
display:flex;flex-wrap:wrap;gap:8px;
}
.sol-keuze{position:relative;cursor:pointer}
.sol-keuze input{
position:absolute;opacity:0;width:1px;height:1px;
}
.sol-keuze span{
display:inline-flex;align-items:center;
padding:8px 15px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:14.5px;font-weight:600;
color:var(--kideo-teal);
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.sol-keuze:hover span{border-color:var(--kideo-accent)}
.sol-keuze input:checked + span{
background:var(--kideo-accent);border-color:var(--kideo-accent);color:#fff;
}
.sol-keuze input:focus-visible + span{
outline:2px solid var(--kideo-accent);outline-offset:1px;
}
.sol-upload input[type="file"]{
position:absolute;width:1px;height:1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.sol-upload__knop{
display:flex;align-items:center;gap:10px;
padding:13px 16px;
border:1.5px dashed #d8cfc0;
border-radius:14px;
background:var(--kideo-cream);
font-family:var(--font-body);
font-size:15.5px;color:var(--kideo-muted);
cursor:pointer;
transition:border-color .15s ease,background-color .15s ease;
}
.sol-upload__knop svg{
flex:0 0 auto;
width:18px;height:18px;color:var(--kideo-accent);
}
.sol-upload__knop:hover{border-color:var(--kideo-accent)}
.sol-upload input:focus-visible + .sol-upload__knop{
outline:2px solid var(--kideo-accent);outline-offset:1px;
}
.sol-upload__knop span{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sol-upload--gekozen .sol-upload__knop{
border-style:solid;border-color:var(--kideo-accent);
color:var(--kideo-ink);
padding-right:52px;
}
.sol-upload{position:relative}
.sol-upload__wis{
position:absolute;
right:9px;bottom:9px;
display:none;
align-items:center;justify-content:center;
width:31px;height:31px;
padding:0;border:none;
border-radius:52% 48% 42% 58% / 45% 52% 48% 55%;
background:rgba(27,75,74,.1);
color:var(--kideo-teal);
cursor:pointer;
transition:background-color .15s ease,color .15s ease;
}
.sol-upload__wis svg{width:13px;height:13px}
.sol-upload__wis:hover,.sol-upload__wis:focus{
background:var(--kideo-accent);color:#fff;
}
.sol-upload--gekozen .sol-upload__wis{display:flex}
.sol-verstuur{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:.7em 2em;
background:var(--kideo-accent);color:#fff;
border:2px solid var(--kideo-accent);
border-radius:999px;
font-family:var(--font-heading);
font-size:17px;font-weight:700;
cursor:pointer;
transition:background-color .15s ease,border-color .15s ease;
}
.sol-verstuur:hover,.sol-verstuur:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);
}
.sol-verstuur[disabled]{opacity:.6;cursor:wait}
.sol-form__acties{
grid-column:1 / -1;
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
margin-top:6px;
}
.sol-form__acties a{
font-family:var(--font-body);
font-size:14.5px;color:var(--kideo-muted);
}
.sol-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sol-melding{
grid-column:1 / -1;
display:none;
padding:14px 18px;
border-radius:14px;
font-family:var(--font-body);font-size:15.5px;
}
.sol-melding--fout{
display:block;
background:#fdf1f7;
border:1px solid var(--kideo-accent);
color:var(--kideo-accent-dark);
}
.sol-melding a{color:var(--kideo-accent-dark);font-weight:600}
.sol-succes{
display:none;
text-align:center;
padding:26px 20px 6px;
}
.sol-succes--zichtbaar{display:block}
.sol-succes__blob{
display:flex;align-items:center;justify-content:center;
width:58px;height:58px;margin:0 auto 16px;
background:var(--kideo-accent);color:#fff;
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
}
.sol-succes__blob svg{width:26px;height:26px}
.sol-succes__titel{
margin:0 0 8px;
font-family:var(--font-heading);
font-size:22px;font-weight:700;color:var(--kideo-teal);
}
.sol-succes p{
margin:0;
font-family:var(--font-body);
font-size:16px;color:var(--kideo-muted);
}
.sol-succes__ref{
margin-top:16px !important;
}
.sol-succes__ref strong{
font-family:var(--font-heading);
font-size:19px;font-weight:700;
color:var(--kideo-teal);
letter-spacing:.5px;
}
.sol-succes__ref span{
font-size:14px;color:var(--kideo-muted);
}
.sol-succes__terug{
display:inline-flex;align-items:center;gap:9px;
margin-top:22px;
padding:10px 20px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:15px;font-weight:700;
color:var(--kideo-teal);
cursor:pointer;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.sol-succes__terug svg{width:14px;height:14px}
.sol-succes__terug:hover,.sol-succes__terug:focus{
background:var(--kideo-accent);border-color:var(--kideo-accent);color:#fff;
}
/* zoeken.css */
.zk-kop{
padding:28px 0 40px;
text-align:center;
}
.zk-kop__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
}
.zk-kop__titel{
margin:0 0 18px;
font-family:var(--font-heading);
font-size:clamp(28px,4vw,40px);font-weight:700;
color:var(--kideo-teal);
}
.zk-zoek{
position:relative;
max-width:560px;
margin:0 auto;
}
.zk-zoek svg{
position:absolute;left:16px;top:50%;
transform:translateY(-50%);
width:18px;height:18px;
color:var(--kideo-muted);
pointer-events:none;
}
.zk-zoek input{
width:100%;
padding:13px 18px 13px 46px;
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-body);
font-size:16px;color:var(--kideo-ink);
background:#fff;
box-shadow:0 6px 16px rgba(31,59,58,.07);
}
.zk-zoek input::placeholder{color:#9aa8a7}
.zk-zoek input:focus{
outline:2px solid var(--kideo-accent);outline-offset:1px;
border-color:var(--kideo-accent);
}
.zk-lijst{
background:#fff;
padding:36px 0 72px;
min-height:340px;
}
.zk-lijst__inner{
max-width:720px;margin:0 auto;padding:0 20px;
}
.zk-status{
margin:0 0 20px;
font-family:var(--font-heading);
font-size:15.5px;font-weight:600;
color:var(--kideo-muted);
}
.zk-resultaat{
display:block;
padding:16px 0 18px;
border-bottom:1px solid var(--kideo-line);
text-decoration:none;color:inherit;
}
.zk-resultaat:first-of-type{padding-top:2px}
.zk-resultaat strong{
display:block;
font-family:var(--font-heading);
font-size:19px;font-weight:700;
color:var(--kideo-teal);
transition:color .15s ease;
}
.zk-resultaat:hover strong,.zk-resultaat:focus strong{color:var(--kideo-accent)}
.zk-resultaat__url{
display:block;margin-top:2px;
font-family:var(--font-body);
font-size:13.5px;color:#9aa8a7;
}
.zk-resultaat__tekst{
display:block;margin-top:6px;
font-family:var(--font-body);
font-size:15.5px;line-height:1.55;
color:var(--kideo-muted);
}
.zk-lijst mark{
background:#f6e2ef;
color:inherit;
border-radius:4px;
padding:0 2px;
}
.zk-start p{
margin:0 0 14px;
font-family:var(--font-heading);
font-size:15.5px;font-weight:600;
color:var(--kideo-muted);
}
.zk-start__links{
display:flex;flex-wrap:wrap;gap:10px;
}
.zk-start__links a{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:15px;font-weight:600;
color:var(--kideo-teal);
text-decoration:none;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.zk-start__links a::before{
content:"";
width:8px;height:8px;
background:var(--kideo-accent);
border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;
transition:background-color .15s ease;
}
.zk-start__links a:hover,.zk-start__links a:focus{
background:var(--kideo-accent);border-color:var(--kideo-accent);color:#fff;
}
.zk-start__links a:hover::before,.zk-start__links a:focus::before{background:#fff}
/* blog.css */
.bl-raster{
padding:0 0 72px;
position:relative;z-index:2;
}
.bl-raster__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
}
.bl-raster__grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:22px;
}
.bl-kaart{
display:flex;flex-direction:column;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:22px;
box-shadow:0 10px 24px rgba(31,59,58,.08);
overflow:hidden;
text-decoration:none;color:inherit;
transition:transform .15s ease,box-shadow .15s ease;
}
.bl-kaart:hover,.bl-kaart:focus{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(31,59,58,.12);
}
.bl-kaart__media{
aspect-ratio:16/9;
background:var(--kideo-cream);
}
.bl-kaart__media img{
width:100%;height:100%;
object-fit:cover;
}
.bl-kaart__body{
display:flex;flex-direction:column;gap:8px;
flex:1;
padding:20px 22px 22px;
}
.bl-kaart__datum{
font-family:var(--font-heading);
font-size:13.5px;font-weight:600;
color:var(--kideo-muted);
}
.bl-kaart__titel{
margin:0;
font-family:var(--font-heading);
font-size:20px;font-weight:700;line-height:1.25;
color:var(--kideo-teal);
}
.bl-kaart__tekst{
margin:0;
font-family:var(--font-body);
font-size:15px;line-height:1.55;
color:var(--kideo-muted);
}
.bl-kaart__link{
margin-top:auto;padding-top:8px;
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-heading);
font-size:15px;font-weight:700;
color:var(--kideo-accent);
}
.bl-kaart__link svg{
width:14px;height:14px;
transition:transform .15s ease;
}
.bl-kaart:hover .bl-kaart__link svg{transform:translateX(3px)}
.bl-artikel{
background:#fff;
padding:48px 0 72px;
}
.bl-artikel__inner{
max-width:720px;margin:0 auto;padding:0 20px;
}
.bl-artikel__inner p{
margin:0 0 1.1em;
font-family:var(--font-body);
font-size:17px;line-height:1.65;
color:var(--kideo-ink);
}
.bl-artikel__inner h2,
.bl-artikel__inner h3{
margin:1.6em 0 .5em;
font-family:var(--font-heading);
font-size:clamp(20px,2.4vw,24px);font-weight:700;
color:var(--kideo-teal);
}
.bl-artikel__inner ul,
.bl-artikel__inner ol{
margin:0 0 1.1em;padding-left:1.3em;
font-family:var(--font-body);
font-size:17px;line-height:1.65;
color:var(--kideo-ink);
}
.bl-artikel__inner li{margin-bottom:.35em}
.bl-artikel__inner a{
color:var(--kideo-accent);
font-weight:600;
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
.bl-artikel__inner a:hover{color:var(--kideo-accent-dark)}
.bl-artikel__inner img{
width:100%;height:auto;
margin:10px 0 22px;
border-radius:18px;
}
.bl-artikel__inner iframe{
width:100%;
margin:10px 0 22px;
border:0;border-radius:18px;
}
.bl-artikel__inner em{font-style:italic}
.bl-terug{
display:inline-flex;align-items:center;gap:9px;
margin-top:34px;
padding:10px 20px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:15.5px;font-weight:700;
color:var(--kideo-teal);
text-decoration:none;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.bl-terug svg{width:15px;height:15px}
.bl-terug:hover,.bl-terug:focus{
background:var(--kideo-accent);border-color:var(--kideo-accent);color:#fff;
}
.bl-meta{
display:flex;flex-wrap:wrap;gap:8px;
margin:0 0 26px;
}
.bl-meta__chip{
display:inline-flex;align-items:center;gap:7px;
padding:6px 14px;
background:var(--kideo-cream);
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:13.5px;font-weight:600;
color:var(--kideo-teal);
}
.bl-meta__chip svg{width:14px;height:14px;color:var(--kideo-accent)}
.bl-artikel__inner .bl-meta + p{
font-size:19px;line-height:1.6;
color:var(--kideo-muted);
}
.bl-deel{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin-top:40px;padding-top:24px;
border-top:1px solid var(--kideo-line);
}
.bl-deel__label{
font-family:var(--font-heading);
font-size:14.5px;font-weight:600;
color:var(--kideo-muted);
}
.bl-deel button{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;
background:#fff;
border:1px solid var(--kideo-line);
border-radius:999px;
font-family:var(--font-heading);
font-size:14.5px;font-weight:600;
color:var(--kideo-teal);
cursor:pointer;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.bl-deel button svg{width:15px;height:15px;color:var(--kideo-accent)}
.bl-deel button:hover,.bl-deel button:focus{
background:var(--kideo-accent);border-color:var(--kideo-accent);color:#fff;
}
.bl-deel button:hover svg,.bl-deel button:focus svg{color:#fff}
.bl-deel--gelukt{
background:var(--kideo-teal) !important;
border-color:var(--kideo-teal) !important;
color:#fff !important;
}
.bl-deel--gelukt svg{color:#fff !important}
.bl-leesook{
padding:52px 0 64px;
}
.bl-leesook__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
}
.bl-leesook__titel{
margin:0 0 22px;
font-family:var(--font-heading);
font-size:clamp(22px,2.6vw,28px);font-weight:700;
color:var(--kideo-teal);
text-align:center;
}
.bl-leesook__grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:22px;
max-width:760px;margin:0 auto;
}
.bl-leesook__alles{
margin:30px 0 0;
text-align:center;
}
.bl-leesook .bl-terug{margin-top:0}
/* instagram.css */
.instagram{
background:#fff;
padding:64px 0 72px;
}
.instagram__inner{
max-width:var(--container);margin:0 auto;padding:0 20px;
text-align:center;
}
.instagram__title{
margin:0 0 6px;
font-family:var(--font-heading);
font-size:clamp(26px,3.2vw,36px);font-weight:800;
line-height:1.15;
color:var(--kideo-teal);
}
.instagram__subrij{
display:flex;align-items:center;justify-content:center;
flex-wrap:wrap;gap:8px 16px;
margin:0 0 28px;
}
.instagram__sub{
margin:0;
font-family:var(--font-body);
font-size:16px;
color:var(--kideo-muted);
}
.instagram__grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:14px;
}
.instagram__tegel{
position:relative;
display:block;
aspect-ratio:1/1;
border-radius:16px;
overflow:hidden;
box-shadow:0 6px 14px rgba(31,59,58,.08);
}
.instagram__tegel img{
width:100%;height:100%;
object-fit:cover;
transition:transform .25s ease;
}
.instagram__tegel:hover img,
.instagram__tegel:focus img{transform:scale(1.05)}
.instagram__overlay{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
background:rgba(155,46,119,.55);
color:#fff;
opacity:0;
transition:opacity .2s ease;
}
.instagram__overlay svg{width:34px;height:34px}
.instagram__tegel:hover .instagram__overlay,
.instagram__tegel:focus .instagram__overlay{opacity:1}
.instagram__volg{
display:inline-flex;align-items:center;gap:7px;
margin:0;
padding:.35em 1em;
background:var(--kideo-accent);color:#fff;
border:2px solid var(--kideo-accent);
border-radius:999px;
font-family:var(--font-heading);
font-size:.85rem;font-weight:600;
text-decoration:none;
transition:background-color .15s ease,border-color .15s ease;
}
.instagram__volg svg{width:14px;height:14px}
.instagram__volg:hover,.instagram__volg:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);color:#fff;
}
@media(max-width:900px){
.instagram{padding:48px 0 56px}
.instagram__grid{grid-template-columns:repeat(3,1fr);gap:10px}
}
@media(max-width:560px){
.instagram__grid{grid-template-columns:repeat(2,1fr)}
}
/* footer.css */
.site-footer{
background:var(--kideo-cream);
color:var(--kideo-ink);
}
.site-footer__golf{
display:block;
width:100%;height:clamp(48px,7vw,110px);
margin-top:-1px;
pointer-events:none;
}
.site-footer__inner{
max-width:var(--container);margin:0 auto;padding:32px 20px 48px;
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:40px;
}
.site-footer__logo{
display:block;
width:160px;
margin:0 0 16px;
}
.site-footer__logo img{display:block;width:100%;height:auto}
.site-footer__missie{
margin:0 0 18px;
font-family:var(--font-body);
font-size:15px;line-height:1.6;
max-width:300px;
color:var(--kideo-ink);
}
.site-footer__social{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-heading);
font-size:15px;font-weight:600;
color:var(--kideo-teal);text-decoration:none;
}
.site-footer__social svg{width:18px;height:18px}
.site-footer__social:hover,.site-footer__social:focus{color:var(--kideo-accent)}
.site-footer__kop{
margin:6px 0 14px;
font-family:var(--font-heading);
font-size:18px;font-weight:700;
color:var(--kideo-teal);
}
.site-footer__kop-toggle{
display:flex;align-items:center;justify-content:space-between;gap:10px;
width:100%;padding:0;
background:none;border:none;text-align:left;
font:inherit;color:inherit;
pointer-events:none;
}
.site-footer__kop-toggle .caret{
display:none;
width:12px;height:12px;flex:0 0 auto;
transition:transform .2s ease;
}
.site-footer__kop-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.site-footer__kolom ul{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:10px;
}
.site-footer__kolom ul a{
font-family:var(--font-body);
font-size:15px;
color:var(--kideo-ink);
text-decoration:none;
}
.site-footer__kolom ul a:hover,.site-footer__kolom ul a:focus{
color:var(--kideo-accent);
text-decoration:underline;text-underline-offset:3px;
}
.site-footer__cta{
display:flex;flex-direction:column;align-items:flex-start;
gap:10px;
}
.site-footer__btn{
display:inline-flex;align-items:center;justify-content:center;
padding:.55em 1.3em;
border-radius:var(--radius);
font-family:var(--font-heading);
font-size:1rem;font-weight:600;
text-decoration:none;white-space:nowrap;
transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.site-footer__btn--primary{
background:var(--kideo-accent);color:#fff;
border:2px solid var(--kideo-accent);
}
.site-footer__btn--primary:hover,.site-footer__btn--primary:focus{
background:var(--kideo-accent-dark);border-color:var(--kideo-accent-dark);color:#fff;
}
.site-footer__btn--secondary{
background:transparent;color:var(--kideo-teal);
border:2px solid var(--kideo-teal);
}
.site-footer__btn--secondary:hover,.site-footer__btn--secondary:focus{
background:var(--kideo-teal);color:#fff;
}
.site-footer__onderbalk{
border-top:1px solid var(--kideo-line);
}
.site-footer__onderbalk-inner{
max-width:var(--container);margin:0 auto;padding:16px 20px;
display:flex;justify-content:center;align-items:center;
flex-wrap:wrap;gap:6px 22px;
}
.site-footer__cookies{
display:inline-flex;align-items:center;gap:7px;
}
.site-footer__cookies svg{
width:14px;height:14px;
color:var(--kideo-accent);
flex:0 0 auto;
}
.site-footer__onderbalk p{
margin:0;
font-family:var(--font-body);
font-size:13px;
color:var(--kideo-muted);
}
@media(max-width:900px){
.site-footer__inner{
grid-template-columns:1fr 1fr;
gap:32px;
padding:24px 20px 40px;
}
.site-footer__merk{grid-column:1 / -1}
}
@media(max-width:700px){
.site-footer__inner{grid-template-columns:1fr;gap:0}
.site-footer__merk{margin-bottom:20px;text-align:center}
.site-footer__merk .site-footer__logo{margin:0 auto 16px}
.site-footer__merk .site-footer__missie{margin:0 auto 18px}
.site-footer__kolom{border-top:1px solid var(--kideo-line)}
.site-footer__kop{margin:0}
.site-footer__kop-toggle{
pointer-events:auto;cursor:pointer;
padding:14px 0;
}
.site-footer__kop-toggle .caret{display:block}
.site-footer__kolom ul{
display:none;
padding:0 0 16px;
}
.site-footer__kolom ul.open{display:flex}
.site-footer__kolom--cta .site-footer__kop{margin:14px 0 12px}
.site-footer__cta{align-items:stretch;padding-bottom:18px}
.site-footer__btn{white-space:normal;text-align:center}
}