/* ========================================================================== Autorespond ontwerp Dit is de complete opmaak. Kleuren staan bovenaan als variabelen, dus een kleurwijziging hoeft maar op een plek. Donker is standaard, .licht op de body maakt de site licht. Let op: dit bestand wordt na de stylesheet van Astra ingeladen, daarom winnen deze regels van Astra bij gelijke specificiteit. ========================================================================== */ /* ========================================================================== Alle stijlen staan hieronder. Kleuren zitten in CSS-variabelen bovenaan, dus een kleurwijziging hoeft maar op 1 plek. Donker is de standaard, .licht op de body maakt de site licht. ========================================================================== */ /* ================= THEMA ================= */ :root{ --accent:#3A7DFF; --accent-h:#5B93FF; --groen:#5FD08A; --groen-bg:rgba(95,208,138,.12); --amber:#E8B45C; --amber-bg:rgba(232,180,92,.12); --bg:#0A101F; --bg2:#0E1729; --paneel:#121C31; --paneel2:#16213A; --rand:rgba(255,255,255,.09); --rand2:rgba(255,255,255,.16); --tekst:#E9EEF7; --zacht:#93A2BA; --zachter:#6C7C97; --glow:rgba(58,125,255,.20); --schaduw:0 30px 70px -34px rgba(0,0,0,.8); --r:12px; --rl:18px; } body.licht{ --accent:#046bd2; --accent-h:#0a7ae8; --groen:#177245; --groen-bg:#EDF7F1; --amber:#8A5A00; --amber-bg:#FDF4E5; --bg:#FFFFFF; --bg2:#F6F8FB; --paneel:#FFFFFF; --paneel2:#F6F8FB; --rand:#E8ECF2; --rand2:#D8E0EA; --tekst:#12203A; --zacht:#5F6E85; --zachter:#8B98AB; --glow:rgba(4,107,210,.10); --schaduw:0 30px 70px -36px rgba(14,26,51,.3); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tekst);line-height:1.65;font-size:16px; -webkit-font-smoothing:antialiased;transition:background .3s,color .3s} h1,h2,h3,h4{font-family:'Archivo',sans-serif;font-stretch:84%;font-weight:700;letter-spacing:-0.012em;line-height:1.06;color:var(--tekst)} a{text-decoration:none;color:inherit} img{display:block;max-width:100%} .wrap{max-width:1180px;margin:0 auto;padding:0 40px} .sec{padding:120px 0} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Archivo';font-stretch:92%;font-weight:600; font-size:14.5px;padding:13px 26px;border-radius:999px;transition:.18s;border:1px solid transparent;cursor:pointer} .btn-p{background:var(--accent);color:#fff} .btn-p:hover{background:var(--accent-h)} .btn-s{background:transparent;color:var(--tekst);border-color:var(--rand2)} .btn-s:hover{border-color:var(--tekst)} .btn-v{background:var(--paneel2);color:var(--tekst);border-color:var(--rand)} .btn-v:hover{border-color:var(--rand2)} .ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .kicker{display:block;font-family:'Archivo';font-stretch:100%;font-size:11.5px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--zachter);margin-bottom:20px} .head{max-width:640px;margin:0 auto 56px;text-align:center} .head h2{font-size:clamp(30px,4.2vw,50px);margin-bottom:16px} .head p{color:var(--zacht);font-size:16.5px;max-width:520px;margin:0 auto} .head.links{margin-left:0;text-align:left} .head.links p{margin-left:0} /* ================= NAV ================= */ nav{position:fixed;top:0;left:0;right:0;z-index:90;background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(18px);border-bottom:1px solid var(--rand)} .navin{max-width:1180px;margin:0 auto;padding:13px 40px;display:flex;align-items:center;gap:30px;position:relative} nav img.logo{height:21px;width:auto} body:not(.licht) nav img.logo{filter:brightness(0) invert(1)} .navlinks{display:flex;gap:26px;margin-left:auto;font-family:'Archivo';font-stretch:100%;font-size:12.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--zacht);align-items:center} .navlinks>div{position:relative} .navlinks a,.navlinks .top{display:inline-flex;align-items:center;gap:6px;padding:22px 0;cursor:pointer} .navlinks a:hover,.navlinks .top:hover{color:var(--tekst)} .caret{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:.2s} .drop{position:absolute;top:100%;left:-18px;background:var(--paneel);border:1px solid var(--rand);border-radius:14px;padding:9px; min-width:296px;box-shadow:var(--schaduw);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;text-transform:none;letter-spacing:0} .navlinks>div:hover .drop{opacity:1;visibility:visible;transform:none} .navlinks>div:hover .caret{transform:rotate(180deg)} .drop a{display:flex;gap:12px;padding:10px 11px;border-radius:9px;align-items:flex-start} .drop a:hover{background:var(--paneel2)} .drop b{font-family:'Archivo';font-stretch:92%;font-size:14px;font-weight:600;color:var(--tekst);display:block;line-height:1.35} .drop span{font-family:'Inter';font-size:12.5px;font-weight:400;color:var(--zachter);display:block;line-height:1.4;text-transform:none} .drop .di{width:30px;height:30px;border-radius:8px;background:var(--paneel2);border:1px solid var(--rand);display:flex; align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);margin-top:1px} .drop .di .ico{width:15px;height:15px} nav .btn{padding:9px 18px;font-size:13px} .thema{background:none;border:1px solid var(--rand);border-radius:999px;width:34px;height:34px;display:flex;align-items:center; justify-content:center;cursor:pointer;color:var(--zacht);flex-shrink:0} .thema:hover{color:var(--tekst);border-color:var(--rand2)} .thema .zon{display:none} body.licht .thema .zon{display:block} body.licht .thema .maan{display:none} .menu-btn{display:none;background:none;border:0;padding:4px;cursor:pointer;color:var(--tekst)} .menu-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round} /* ================= HERO ================= */ .hero{position:relative;padding:152px 0 0;text-align:center;overflow:hidden} .hero::before{content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:1100px;height:620px; background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none} .tegels{position:absolute;inset:0;pointer-events:none} .tg{position:absolute;width:52px;height:52px;border-radius:13px;background:var(--paneel);border:1px solid var(--rand); display:flex;align-items:center;justify-content:center;color:var(--zacht);animation:zweef 7s ease-in-out infinite} .tg .ico{width:20px;height:20px;stroke-width:1.4} .tg.groot{width:60px;height:60px;border-radius:15px} .tg.aan{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, transparent)} @keyframes zweef{50%{transform:translateY(-11px)}} .l1{left:3%;top:98px;opacity:.30} .l2{left:11%;top:172px;opacity:.55;animation-delay:-1.4s} .l3{left:1.5%;top:246px;opacity:.42;animation-delay:-2.8s} .l4{left:9%;top:322px;opacity:.72;animation-delay:-4.2s} .l5{left:2.5%;top:404px;opacity:.34;animation-delay:-5.6s} .l6{left:13.5%;top:472px;opacity:.5;animation-delay:-3.1s} .r1{right:3%;top:98px;opacity:.30;animation-delay:-.7s} .r2{right:11%;top:172px;opacity:.55;animation-delay:-2.1s} .r3{right:1.5%;top:246px;opacity:.42;animation-delay:-3.5s} .r4{right:9%;top:322px;opacity:.72;animation-delay:-4.9s} .r5{right:2.5%;top:404px;opacity:.34;animation-delay:-6.3s} .r6{right:13.5%;top:472px;opacity:.5;animation-delay:-1.9s} .heroin{position:relative;max-width:720px;margin:0 auto} .merkje{font-family:'Archivo';font-stretch:100%;font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase; color:var(--zachter);margin-bottom:22px;display:block} .hero h1{font-size:clamp(40px,6.6vw,84px);line-height:1.02;letter-spacing:-0.02em;margin-bottom:22px} .hero h1 span{color:var(--accent)} .hero .lead{font-size:clamp(15.5px,1.6vw,18px);color:var(--zacht);max-width:520px;margin:0 auto 22px} .gerust{display:inline-flex;align-items:center;gap:9px;background:var(--groen-bg);color:var(--groen);border-radius:999px; padding:8px 16px;font-size:13px;font-weight:500;margin-bottom:30px;font-family:'Archivo';font-stretch:96%} .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px} .klanten{display:flex;align-items:center;justify-content:center;gap:13px;font-size:13.5px;color:var(--zacht);flex-wrap:wrap} .faces{display:flex} .faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);margin-left:-9px} .faces img:first-child{margin-left:0} .klanten b{color:#E8A11C;letter-spacing:1.5px} .shot{padding:66px 0 0;position:relative} .frame{max-width:1000px;margin:0 auto;border:1px solid var(--rand);border-radius:var(--rl);overflow:hidden;background:var(--paneel); box-shadow:var(--schaduw);opacity:0;transform:translateY(26px) scale(.985); transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)} .frame.inview{opacity:1;transform:none} .fbar{background:var(--paneel2);border-bottom:1px solid var(--rand);padding:10px 16px;display:flex;gap:7px;align-items:center} .fdot{width:9px;height:9px;border-radius:50%;background:var(--rand2)} .furl{margin-left:10px;background:var(--bg2);border:1px solid var(--rand);border-radius:6px;font-size:12px;color:var(--zachter);padding:4px 14px} .furl b{color:var(--tekst);font-weight:500} /* ================= GROEIPAD ================= */ .pad{background:var(--bg2);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)} .stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .stap{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);padding:30px;display:flex;flex-direction:column;transition:.22s} .stap:hover{transform:translateY(-3px);box-shadow:var(--schaduw)} .stap.kern{border-top:2px solid var(--groen)} .stap.uit{border-top:2px solid var(--accent)} .stap.alles{border-top:2px solid var(--tekst);background:var(--paneel2)} .num{font-family:'Archivo';font-stretch:100%;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--zachter);margin-bottom:14px;display:block} .stap h3{font-size:22px;margin-bottom:9px} .stap>p{font-size:14.5px;color:var(--zacht);margin-bottom:20px} .stap ul{list-style:none;font-size:14.5px;color:var(--zacht);margin-bottom:24px;flex:1} .stap li{padding:5px 0 5px 26px;position:relative} .stap li svg{position:absolute;left:0;top:11px;width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .stap.kern li svg{stroke:var(--groen)} .stap .tarief{font-family:'Archivo';font-stretch:92%;font-size:15px;font-weight:600;color:var(--tekst);margin-bottom:18px} .stap .tarief span{color:var(--zachter);font-weight:400} .label{display:inline-flex;align-items:center;gap:7px;font-family:'Archivo';font-stretch:96%;font-size:11px;font-weight:600; border-radius:6px;padding:4px 9px;width:fit-content;margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase} .label.basis{background:var(--groen-bg);color:var(--groen)} .label.aanrader{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent)} .label.compleet{background:var(--paneel);color:var(--zacht);border:1px solid var(--rand)} .label.module{background:var(--paneel2);color:var(--zacht);border:1px solid var(--rand)} .label.tijd{background:var(--amber-bg);color:var(--amber)} .stip{width:6px;height:6px;border-radius:50%;background:currentColor} .klein{color:var(--zachter);font-size:13.5px;margin-top:28px;text-align:center} .klein a{color:var(--accent);text-decoration:underline} /* ================= LOGOSTRIP ================= */ .strip{padding:76px 0} .strip p{text-align:center;font-size:12.5px;color:var(--zachter);margin-bottom:34px;letter-spacing:.04em} .lgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:32px 24px;align-items:center} .lgrid img{height:19px;width:auto;margin:0 auto;opacity:.4;transition:.2s;filter:grayscale(1)} body:not(.licht) .lgrid img{filter:grayscale(1) brightness(0) invert(1);opacity:.34} .lgrid img:hover{opacity:.9} .waarde{text-align:center;font-size:13.5px;color:var(--zacht);margin-top:36px} .waarde b{color:var(--tekst);font-weight:500} /* ================= VERHAAL ================= */ .story{border-top:1px solid var(--rand)} .chap{display:grid;grid-template-columns:.9fr 1.1fr;gap:74px;max-width:1180px;margin:0 auto;padding:0 40px} .chap+.chap{border-top:1px solid var(--rand)} .chap .stick{position:sticky;top:100px;align-self:start;padding:108px 0} .nummer{font-family:'Archivo';font-stretch:100%;font-size:11.5px;font-weight:600;color:var(--accent);letter-spacing:.2em; text-transform:uppercase;margin-bottom:20px;display:block} .chap h2{font-size:clamp(28px,3.8vw,46px);margin-bottom:18px} .chap .stick p{font-size:16px;color:var(--zacht);max-width:410px;margin-bottom:24px} .lijst{list-style:none;font-size:15px;margin-bottom:28px} .lijst li{padding:7px 0 7px 30px;position:relative;color:var(--tekst)} .lijst li svg{position:absolute;left:0;top:12px;width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .panels{padding:108px 0;display:flex;flex-direction:column;gap:20px} .pshot{border:1px solid var(--rand);border-radius:var(--rl);overflow:hidden;background:var(--paneel); opacity:0;transform:translateY(32px);transition:opacity .7s,transform .7s} .pshot.inview{opacity:1;transform:none} .pshot img{width:100%} .pshot .cap{padding:15px 20px;border-top:1px solid var(--rand);display:flex;justify-content:space-between;align-items:center;gap:14px} .pshot .cap b{font-family:'Archivo';font-stretch:92%;font-size:14.5px;font-weight:600;color:var(--tekst)} .pshot .label{margin-bottom:0} /* ================= BASIS + MODULES ================= */ .split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start} .kaart{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);padding:32px} .kaart.basis{border-top:2px solid var(--groen)} .kaart.mod{border-top:2px solid var(--accent)} .kaart .kop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px;flex-wrap:wrap} .kaart h3{font-size:23px} .kaart>p{font-size:14.5px;color:var(--zacht);margin-bottom:24px} .rijen{display:flex;flex-direction:column} .rij{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--rand)} .rij:first-child{border-top:0;padding-top:0} .rij .rico{width:32px;height:32px;border-radius:8px;background:var(--paneel2);border:1px solid var(--rand);display:flex; align-items:center;justify-content:center;flex-shrink:0;color:var(--zacht)} .rij .rico .ico{width:15px;height:15px} .rij b{font-family:'Archivo';font-stretch:92%;font-size:15px;font-weight:600;color:var(--tekst);display:block;margin-bottom:2px} .rij span{font-size:13.5px;color:var(--zacht);display:block} .rij.tijd .rico{background:var(--amber-bg);border-color:color-mix(in srgb, var(--amber) 32%, transparent);color:var(--amber)} .mini{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--amber);background:var(--amber-bg); border-radius:5px;padding:3px 8px;margin-top:7px;font-family:'Archivo';font-stretch:96%;text-transform:uppercase;letter-spacing:.04em} .kaart.mod .rij .rico{background:color-mix(in srgb, var(--accent) 12%, transparent);border-color:color-mix(in srgb, var(--accent) 30%, transparent);color:var(--accent)} .kaart .voet{margin-top:24px;padding-top:22px;border-top:1px solid var(--rand)} .kaart .voet .btn{width:100%} .legenda{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--zacht);margin-top:28px;justify-content:center} .legenda span{display:inline-flex;align-items:center;gap:8px} .vk{width:9px;height:9px;border-radius:3px} .vk.g{background:var(--groen)}.vk.a{background:var(--amber)}.vk.b{background:var(--accent)} .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px} .mtegel{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);overflow:hidden;transition:.22s} .mtegel:hover{transform:translateY(-3px);box-shadow:var(--schaduw)} .mtegel img{width:100%;border-bottom:1px solid var(--rand)} .mtegel .body{padding:22px} .mtegel h4{font-size:17px;margin-bottom:5px} .mtegel p{font-size:13.5px;color:var(--zacht)} /* ================= ESSENTIALS ================= */ .egrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rand);border-left:1px solid var(--rand)} .ecel{padding:30px;border-right:1px solid var(--rand);border-bottom:1px solid var(--rand);transition:.2s} .ecel:hover{background:var(--paneel)} .ecel .eico{width:38px;height:38px;border-radius:9px;background:var(--paneel2);border:1px solid var(--rand);display:flex; align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent)} .ecel h4{font-size:16.5px;margin-bottom:6px} .ecel p{font-size:13.5px;color:var(--zacht)} /* ================= BAND ================= */ .band{border:1px solid var(--rand);border-radius:var(--rl);padding:54px;display:grid;grid-template-columns:1fr 1fr;gap:48px; align-items:center;background:var(--paneel);position:relative;overflow:hidden} .band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--glow);filter:blur(120px);right:-160px;top:-180px} .band>*{position:relative} .band h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px} .band p{color:var(--zacht);font-size:16px;margin-bottom:26px} .band .beeld{border-radius:12px;overflow:hidden;border:1px solid var(--rand)} .knoppen{display:flex;gap:12px;flex-wrap:wrap} .knoppen.mid{justify-content:center} /* ================= VIDEO ================= */ .video{background:var(--bg2);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)} .vwrap{max-width:900px;margin:0 auto;border-radius:var(--rl);overflow:hidden;aspect-ratio:16/9;position:relative; border:1px solid var(--rand);background:#000;box-shadow:var(--schaduw)} .vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ================= REVIEWS ================= */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .tcard{border:1px solid var(--rand);border-radius:var(--rl);padding:28px;display:flex;flex-direction:column;background:var(--paneel)} .tster{color:#E8A11C;letter-spacing:2px;margin-bottom:14px;font-size:13.5px} .tcard h4{font-size:16.5px;margin-bottom:9px} .tcard p{font-size:14.5px;color:var(--zacht);flex:1;margin-bottom:22px} .twie{display:flex;gap:12px;align-items:center;padding-top:20px;border-top:1px solid var(--rand)} .twie img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid var(--rand);background:#fff} .twie b{font-family:'Archivo';font-stretch:92%;font-size:14px;font-weight:600;color:var(--tekst);display:block;line-height:1.3} .twie span{font-size:12.5px;color:var(--zachter)} /* ================= PRIJZEN ================= */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start} .plan{border:1px solid var(--rand);border-radius:var(--rl);padding:32px 28px;background:var(--paneel);display:flex;flex-direction:column;position:relative} .plan.hi{border-color:var(--accent);box-shadow:0 26px 60px -34px var(--glow)} .plan .best{position:absolute;top:-11px;left:28px;background:var(--accent);color:#fff;font-family:'Archivo';font-stretch:96%; font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:6px} .plan h3{font-size:17.5px;margin-bottom:16px} .plan .p{font-family:'Archivo';font-stretch:88%;font-size:42px;font-weight:700;color:var(--tekst);line-height:1} .plan .per{font-size:13px;color:var(--zachter);margin-top:7px} .bes{display:inline-flex;align-items:center;gap:7px;background:var(--groen-bg);color:var(--groen);font-size:12px;font-weight:600; border-radius:6px;padding:4px 10px;margin:16px 0 22px;font-family:'Archivo';font-stretch:96%} .plan ul{list-style:none;font-size:14.5px;color:var(--zacht);margin-bottom:26px;flex:1} .plan li{padding:6px 0 6px 26px;position:relative} .plan li svg{position:absolute;left:0;top:11px;width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .plan li.sterk{color:var(--tekst)} .plan .btn{width:100%} /* ================= CTA ================= */ .ctaband{border:1px solid var(--rand);border-radius:var(--rl);padding:60px;text-align:center;background:var(--paneel);position:relative;overflow:hidden} .ctaband::before{content:"";position:absolute;width:600px;height:400px;left:50%;top:-200px;transform:translateX(-50%); background:radial-gradient(closest-side,var(--glow),transparent 70%)} .ctaband>*{position:relative} .ctaband h2{font-size:clamp(27px,3.6vw,44px);margin-bottom:14px} .ctaband p{color:var(--zacht);max-width:520px;margin:0 auto 28px;font-size:16px} /* ================= FORMULIER ================= */ .rf{background:var(--bg2);border-top:1px solid var(--rand)} .rfwrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start} .rfkop{font-size:clamp(28px,3.6vw,42px);margin-bottom:12px} .rfsub{color:var(--zacht);font-size:16px;margin-bottom:22px} .rfpak{display:flex;gap:13px;border:1px solid var(--rand);border-radius:11px;padding:15px;margin-bottom:10px;cursor:pointer; background:var(--paneel);transition:.18s} .rfpak:hover{border-color:var(--rand2)} .rfpak:has(input:checked){border-color:var(--accent)} .rfpak input{margin-top:4px;accent-color:var(--accent)} .rfpak b{font-family:'Archivo';font-stretch:92%;font-size:14.5px;font-weight:600;color:var(--tekst);display:block} .rfpak span{font-size:13.5px;color:var(--zacht)} .rfpak i{color:var(--groen);font-style:normal;font-weight:500} .rfincl{list-style:none;margin:22px 0 16px;font-size:14.5px} .rfincl li{padding:6px 0 6px 28px;position:relative;color:var(--zacht)} .rfincl li svg{position:absolute;left:0;top:11px;width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .rfnote{font-size:13px;color:var(--zachter)} .rfnote a{color:var(--accent);text-decoration:underline} .rfform{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);padding:34px} .rfform h3{font-size:22px;margin-bottom:6px} .rfformsub{font-family:'Archivo';font-stretch:100%;font-size:11.5px;font-weight:600;color:var(--zachter);margin-bottom:26px; text-transform:uppercase;letter-spacing:.16em} .rfform>label,.rfrow label{display:block;font-size:13.5px;font-weight:500;color:var(--tekst);margin-bottom:15px} .rfform input[type=text],.rfform input[type=email],.rfform input[type=url],.rfform select,.rfform textarea{ width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--rand2);border-radius:9px;font:inherit;font-size:14.5px; background:var(--bg2);color:var(--tekst)} .rfform input:focus,.rfform select:focus,.rfform textarea:focus{outline:0;border-color:var(--accent)} .rfform option{background:var(--paneel);color:var(--tekst)} .rfrow{display:grid;grid-template-columns:1fr 1fr;gap:14px} .rflabel{display:block;font-size:13.5px;font-weight:500;color:var(--tekst);margin-bottom:10px} .rfhint{font-weight:400;font-style:normal;color:var(--zachter)} .rfmods{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:0 0 18px} .rfmods label{display:flex;align-items:center;gap:9px;font-weight:400;margin:0;font-size:13.5px;cursor:pointer;color:var(--zacht)} .rfmods input{accent-color:var(--accent);flex-shrink:0} .rfok{display:flex !important;gap:11px;font-weight:400 !important;font-size:12.5px !important;color:var(--zacht) !important; align-items:flex-start;line-height:1.55} .rfok input{margin-top:3px;accent-color:var(--accent);flex-shrink:0} .rfok a{color:var(--accent);text-decoration:underline} .rfna{font-size:12.5px;color:var(--zachter);margin-top:18px;text-align:center;line-height:1.55} /* ================= FOOTER ================= */ footer{background:var(--bg2);border-top:1px solid var(--rand);color:var(--zacht);padding:70px 0 0;font-size:14px} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px} footer img.flogo{height:22px;width:auto;margin-bottom:18px} body:not(.licht) footer img.flogo{filter:brightness(0) invert(1);opacity:.9} footer p{max-width:280px;line-height:1.65;color:var(--zachter)} footer h5{font-family:'Archivo';font-stretch:100%;font-size:11.5px;font-weight:600;color:var(--tekst);letter-spacing:.16em; text-transform:uppercase;margin-bottom:16px} footer ul{list-style:none;display:flex;flex-direction:column;gap:9px} footer a:hover{color:var(--tekst)} .fbot{border-top:1px solid var(--rand);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:13px;color:var(--zachter)} .ctabar{display:none} @media(max-width:1040px){ .wrap,.navin,.chap{padding-left:22px;padding-right:22px} .sec{padding:70px 0} .head{margin-bottom:36px} .menu-btn{display:block} nav .btn-s{display:none} .navlinks{display:none} .navlinks.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--rand); flex-direction:column;align-items:stretch;padding:14px 22px 24px;gap:0;font-size:13px;max-height:78vh;overflow-y:auto} .navlinks.open a,.navlinks.open .top{padding:13px 0} .navlinks.open .caret{display:none} .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:1px solid var(--rand); border-radius:0;padding:0 0 6px 14px;min-width:0;margin-bottom:8px;background:none} .drop a{padding:9px 0} .hero{padding:100px 0 0} .tegels{display:none} .hero h1{font-size:clamp(33px,9.6vw,48px)} .hero-cta{flex-direction:column} .hero-cta .btn{width:100%} .shot{padding:40px 0 0} .strip{padding:52px 0} .lgrid{grid-template-columns:repeat(3,1fr);gap:26px 16px} .stappen,.mgrid,.tgrid,.plans,.egrid{grid-template-columns:1fr} .egrid{border-left:0} .ecel{border-right:0;padding:24px 0} .chap{grid-template-columns:1fr;gap:0} .chap .stick{position:static;padding:62px 0 4px} .chap h2{font-size:28px} .panels{padding:18px 0 62px} .split{grid-template-columns:1fr} .kaart{padding:24px} .band{padding:30px;grid-template-columns:1fr;gap:26px} .ctaband{padding:34px 22px} .knoppen .btn{width:100%} .rfwrap{grid-template-columns:1fr;gap:34px} .rfform{padding:22px} .rfmods{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr;gap:30px} body{padding-bottom:70px} .ctabar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:95;background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(16px);border-top:1px solid var(--rand);padding:11px 16px;align-items:center;gap:14px;justify-content:space-between} .ctabar b{font-family:'Archivo';font-stretch:92%;font-size:13.5px;font-weight:600;color:var(--tekst);display:block;line-height:1.25} .ctabar small{font-size:12px;color:var(--zachter)} .ctabar .btn{padding:11px 18px;font-size:13.5px;flex-shrink:0} } @media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} .frame,.pshot{opacity:1 !important;transform:none !important} } /* ========================================================================== Aanvullingen voor WordPress ========================================================================== */ /* De footermenu's komen uit wp_nav_menu als