/*
* Optimaïs huisstijl voor Divi 5.
* Kleuren, lettertypes en maten staan ook als Design Variables in Divi; deze waarden
* zijn dezelfde, voor de paar onderdelen die Divi niet zelf kan opmaken.
*/
/* Lettertypes lokaal (AVG): niet via Google laden. Beide zijn variabele fonts, latin-subset. */
@font-face {
font-family: "Bricolage Grotesque";
src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
:root {
--opt-bos: #1E3A2A; /* bosgroen, banden en knoppen */
--opt-diep: #14301F; /* footer en slot-CTA */
--opt-band: #24432F; /* kaarten op bosgroen */
--opt-blad: #2F6B3F; /* links, labels */
--opt-mint: #A9D9B4; /* tekst-accent op groen */
--opt-zacht: #CFDACB; /* lopende tekst op groen */
--opt-mais: #F2B824; /* hoofdactie */
--opt-pit: #D9971A; /* hover van de hoofdactie */
--opt-licht-geel: #FDF3D3;
--opt-papier: #F5F7F0; /* pagina-achtergrond */
--opt-tint: #EAF0E3;
--opt-wit: #FFFFFF;
--opt-inkt: #15201A; /* tekst */
--opt-grijs: #56635A; /* bijschriften */
--opt-lijn: #D7DFD0;
--opt-verlies: #A33A2A; /* negatieve cijfers */
--opt-kop: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
--opt-tekst: "Plus Jakarta Sans", system-ui, sans-serif;
}
/* Markeerstift achter een stuk kop: Per product aantoonbaar. */
.opt-mark {
background: linear-gradient(transparent 62%, var(--opt-mais) 62%, var(--opt-mais) 92%, transparent 92%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 .06em;
}
/* Actieve pagina in het menu: class "opt-menu" op de Menu-module in de header */
.opt-menu .menu-item-object-page.current-menu-item > a,
.opt-menu .menu-item-object-page.current-menu-ancestor > a { box-shadow: inset 0 -3px 0 var(--opt-mais); }
/* Cijfers die onder elkaar staan */
.opt-cijfer { font-variant-numeric: tabular-nums; }
/* Lijst met gele vinkjes: zet class "opt-vinkjes" op de Text-module of de */
.opt-vinkjes ul, ul.opt-vinkjes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.opt-vinkjes li { display: flex; gap: 10px; align-items: flex-start; padding: 0; }
.opt-vinkjes li::before {
content: "✓";
flex: none;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; margin-top: .15em;
border-radius: 50%;
background: var(--opt-mais); color: var(--opt-inkt);
font: 800 12px/1 var(--opt-tekst);
}
.opt-vinkjes.is-donker li::before { background: var(--opt-inkt); color: var(--opt-mais); }
/* Losse korrel als icoon, bv. boven een Blurb-titel: */
.opt-korrel {
display: inline-block; width: 14px; height: 18px; border-radius: 50%;
background: radial-gradient(circle at 36% 30%, #FAD872 0, var(--opt-mais) 45%, var(--opt-pit) 100%);
}
/* Duotoon-foto (Over mij-blok): class "opt-duotoon" op de Image-module */
.opt-duotoon { background: var(--opt-mint); }
.opt-duotoon img { filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
/* Rankinggrafiek, zie snippets/rankinggrafiek.html */
.opt-grafiek { display: grid; gap: 12px; font-family: var(--opt-tekst); }
.opt-grafiek-kop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--opt-grijs); }
.opt-grafiek-kop span:last-child { color: var(--opt-blad); }
.opt-grafiek-balken { display: flex; align-items: flex-end; gap: 10px; height: 340px; border-bottom: 2px solid var(--opt-inkt); margin: 0; padding: 0; list-style: none; }
.opt-grafiek-balken li { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.opt-grafiek-balken b { font-size: 13px; color: var(--opt-grijs); white-space: nowrap; }
.opt-grafiek-balken i { display: block; width: 100%; height: var(--h); background: var(--opt-zacht); border-radius: 14px 14px 4px 4px; }
.opt-grafiek-balken .is-top20 i { background: #3E8A50; }
.opt-grafiek-balken .is-top10 i { background: var(--opt-mais); }
.opt-grafiek-balken .is-top10 b { color: var(--opt-inkt); }
.opt-grafiek-weken { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--opt-grijs); }
.opt-grafiek-weken li { flex: 1; text-align: center; min-width: 0; }
/* Vergelijkingstabel, zie snippets/vergelijk.html. Actieve kolom: is-optimalisatie, is-merkbeheer of is-ads */
.opt-vergelijk-wrap { overflow-x: auto; background: var(--opt-wit); border: 1px solid #E1E8DC; border-radius: 32px; }
.opt-vergelijk { width: 100%; min-width: 760px; border-collapse: collapse; font: 16px/1.5 var(--opt-tekst); color: var(--opt-inkt); }
.opt-vergelijk th, .opt-vergelijk td { padding: 16px 24px; text-align: left; border-bottom: 1px solid #EEF2EA; vertical-align: middle; }
.opt-vergelijk thead th { padding-top: 32px; padding-bottom: 24px; border-bottom-color: #E1E8DC; vertical-align: bottom; }
.opt-vergelijk thead th:first-child { font-size: 14px; font-weight: 600; color: var(--opt-grijs); }
.opt-vergelijk tbody th { font-weight: 600; padding-left: 28px; }
.opt-vergelijk .opt-pakket { display: block; font: 800 24px/1.05 var(--opt-kop); letter-spacing: -.03em; color: var(--opt-inkt); text-decoration: none; }
.opt-vergelijk .opt-prijs { display: block; font: 800 34px/1 var(--opt-kop); letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.opt-ja { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--opt-mais); color: var(--opt-inkt); font-size: 13px; font-weight: 800; }
.opt-nee { color: #A6B2A9; font-weight: 700; }
.opt-vergelijk.is-optimalisatie :is(th, td):nth-child(2),
.opt-vergelijk.is-merkbeheer :is(th, td):nth-child(3),
.opt-vergelijk.is-ads :is(th, td):nth-child(4) { background: var(--opt-licht-geel); }
/*
* Blogartikel met meetlat: class "opt-artikel" op de Post Content-module in het
* Theme Builder-template. Elke H2 in het artikel krijgt vanzelf een gele tab "DEEL 1, 2, 3".
*/
.opt-artikel { position: relative; padding-left: 168px; counter-reset: deel; }
.opt-artikel::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 112px;
border-right: 2px solid var(--opt-bos);
background-image:
repeating-linear-gradient(to bottom, var(--opt-bos) 0 1px, transparent 1px 10px),
repeating-linear-gradient(to bottom, var(--opt-bos) 0 2px, transparent 2px 50px);
background-size: 14px 100%, 30px 100%;
background-repeat: repeat-y;
background-position: right top, right top;
}
.opt-artikel h2 { position: relative; counter-increment: deel; margin-top: 72px; }
.opt-artikel h2::before {
content: counter(deel);
position: absolute; right: calc(100% + 56px); top: -.1em;
min-width: 44px; padding: 20px 14px 8px 10px;
background: var(--opt-mais); color: var(--opt-inkt);
border-radius: 12px 0 0 12px;
font: 800 30px/1 var(--opt-kop); text-align: right; letter-spacing: 0;
}
.opt-artikel h2::after {
content: "DEEL";
position: absolute; right: calc(100% + 70px); top: .35em;
font: 700 10px/1 var(--opt-tekst); letter-spacing: .12em; color: var(--opt-inkt);
}
.opt-artikel p, .opt-artikel li { font-size: 19px; line-height: 1.7; }
.et_pb_section .opt-artikel h2 { font-size: clamp(32px, 3.6vw, 48px); }
.et_pb_column > .et_pb_text.opt-kaart-bos:only-child { height: auto; }
@media (max-width: 980px) {
.opt-artikel { padding-left: 64px; }
.opt-artikel::before { width: 40px; }
.opt-artikel h2::before { right: calc(100% + 24px); font-size: 20px; padding: 6px 6px 6px 4px; min-width: 0; }
.opt-artikel h2::after { display: none; }
}
/* Cal.com agenda ([optimais_agenda]) */
.opt-agenda { min-height: 560px; }
/* Winkelscan: intro links, verloop-kaart rechts (verticaal gecentreerd), agenda op volle breedte eronder */
@media (min-width: 981px) {
.opt-scan-intro { display: flex; align-items: center; }
.opt-scan-intro::after { display: none; }
}
.et_pb_text.opt-kaart p.opt-scan-label { font-family: var(--opt-kop, inherit); font-weight: 800; font-size: 22px; color: var(--opt-bos); margin: 0 0 22px; }
.et_pb_text.opt-kaart ol.opt-scan-stappen { list-style: none; counter-reset: scan; margin: 0; padding: 0; }
.opt-scan-stappen li { counter-increment: scan; position: relative; padding: 0 0 24px 58px; color: var(--opt-grijs); font-size: 16px; line-height: 1.55; }
.opt-scan-stappen li::before { content: counter(scan); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--opt-mais); color: var(--opt-inkt); font-weight: 800; font-size: 17px; display: grid; place-items: center; box-shadow: inset 0 -3px 0 var(--opt-pit); }
.opt-scan-stappen li::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; border-left: 2px dashed var(--opt-lijn); }
.opt-scan-stappen li:last-child { padding-bottom: 0; }
.opt-scan-stappen li:last-child::after { display: none; }
.opt-scan-stappen li b { display: block; color: var(--opt-inkt); font-size: 17px; margin-bottom: 2px; }
.et_pb_text.opt-kaart p.opt-scan-mail { border-top: 1px solid var(--opt-lijn); margin: 26px 0 0; padding-top: 18px; font-size: 15px; }
.opt-agenda-kop { text-align: center; margin: 8px auto 22px; max-width: 560px; }
.et_pb_text.opt-kaart .opt-agenda-kop h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 6px; padding: 0; }
.et_pb_text.opt-kaart .opt-agenda-kop p { margin: 0; }
@media (max-width: 767px) {
/* Cal.com heeft op de telefoon elke pixel breedte nodig */
.et_pb_text.opt-kaart.opt-scan-kaart { padding: 24px 22px; }
.opt-scan-stappen li { padding-left: 52px; }
.et_pb_text.opt-kaart.opt-agenda-kaart { padding: 14px 4px; border-radius: 20px; }
}
.opt-agenda-fallback { margin-top: 10px; font-size: 14px; text-align: center; color: var(--opt-grijs); }
/* Fluent Forms in de huisstijl (aanvraagformulier, download, nieuwsbrief) */
.fluentform { font-family: var(--opt-tekst); color: var(--opt-inkt); }
.fluentform .ff-el-input--label label { font-size: 14px; font-weight: 600; }
.fluentform .ff-el-form-control {
min-height: 50px; padding: 0 14px;
border: 1.5px solid var(--opt-lijn); border-radius: 12px;
background: #F9FBF7; font: 16px var(--opt-tekst); color: var(--opt-inkt);
}
.fluentform textarea.ff-el-form-control { padding: 12px 14px; }
.fluentform .ff-el-form-control:focus { border-color: var(--opt-bos); box-shadow: 0 0 0 3px rgba(242, 184, 36, .45); outline: 0; }
.fluentform .ff-btn-submit {
min-height: 56px; padding: 0 30px !important;
border: 0 !important; border-radius: 999px !important;
background: var(--opt-mais) !important; color: var(--opt-inkt) !important;
font: 700 17px var(--opt-tekst) !important;
}
.fluentform .ff-btn-submit:hover { background: var(--opt-pit) !important; }
.fluentform input[type="radio"], .fluentform input[type="checkbox"] { accent-color: var(--opt-bos); width: 18px; height: 18px; vertical-align: -3px; }
.fluentform .ff-el-form-check { display: inline-flex; margin: 0 18px 8px 0; }
.fluentform .ff-el-form-check label { font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.fluentform .ff-el-section-break .ff-el-section-title { font: 800 24px/1.1 var(--opt-kop); letter-spacing: -.02em; color: var(--opt-bos); }
.opt-knop .et_pb_button, .opt-knop.et_pb_button { white-space: nowrap; }
/* Toetsenbordfocus overal zichtbaar */
a:focus-visible, button:focus-visible { outline: 3px solid var(--opt-mais); outline-offset: 2px; }
/* ================= Divi-pagina's ================= */
body, #main-content { background: var(--opt-papier); }
.et_pb_row { width: calc(100% - 48px); max-width: 1280px; padding: 28px 0; }
.et_pb_section { font-family: var(--opt-tekst); }
.et_pb_section h1, .et_pb_section h2, .et_pb_section h3 {
font-family: var(--opt-kop); font-weight: 800; letter-spacing: -.035em; line-height: .95;
text-wrap: balance; padding-bottom: 0; margin: 0 0 .35em; color: var(--opt-bos);
overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.opt-menu .et-menu { flex-wrap: nowrap; white-space: nowrap; }
.et_pb_section h1 { font-size: clamp(52px, 6.6vw, 100px); }
.et_pb_section h2 { font-size: clamp(44px, 5.4vw, 80px); }
.et_pb_section h3 { font-size: 28px; letter-spacing: -.025em; line-height: 1.05; }
.et_pb_section p, .et_pb_section li { font-size: 17px; line-height: 1.6; }
.et_pb_section p { padding-bottom: 0; margin: 0 0 1em; }
.et_pb_section p:last-child { margin-bottom: 0; }
.opt-intro, .opt-intro p { font-size: 19px !important; color: #3A4A40; max-width: 46ch; }
.opt-muted, .opt-muted p { color: var(--opt-grijs); }
.opt-groot { font-family: var(--opt-kop); font-weight: 800; letter-spacing: -.035em; line-height: .95; }
/* Kleurwerelden: class op de sectie */
.opt-groen, .opt-groen p, .opt-groen li { color: var(--opt-zacht); }
.opt-groen h1, .opt-groen h2, .opt-groen h3, .opt-groen b, .opt-groen strong { color: var(--opt-papier); }
.opt-maiswereld h1, .opt-maiswereld h2, .opt-maiswereld h3, .opt-maiswereld p { color: var(--opt-inkt); }
.opt-geel, .opt-groen .opt-geel { color: var(--opt-mais); }
.opt-groen p a:not(.opt-link) { color: var(--opt-mint); }
.opt-groen .opt-prijs-groot { color: var(--opt-papier); }
/* Pil-label */
.opt-pil { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--opt-tekst); padding: 9px 16px; border-radius: 999px; background: #E3ECDD; color: var(--opt-blad); margin-bottom: 18px; letter-spacing: 0; }
.opt-groen .opt-pil { background: rgba(242, 184, 36, .14); color: var(--opt-mais); }
.opt-pil.is-donker { background: var(--opt-inkt); color: var(--opt-mais); }
.opt-pil.is-wit { background: var(--opt-wit); color: var(--opt-blad); }
/* Knoppen: class op de Button-module */
:is(.opt-knop.et_pb_button, .opt-knop .et_pb_button) {
display: inline-flex !important; align-items: center; min-height: 54px; padding: 0 28px !important;
border: 2px solid transparent !important; border-radius: 999px !important;
font: 700 16px/1 var(--opt-tekst) !important; letter-spacing: 0 !important;
background: var(--opt-mais) !important; color: var(--opt-inkt) !important;
}
:is(.opt-knop.et_pb_button, .opt-knop .et_pb_button)::after { display: none !important; }
:is(.opt-knop.et_pb_button, .opt-knop .et_pb_button):hover { background: var(--opt-pit) !important; }
:is(.opt-knop.is-bos.et_pb_button, .opt-knop.is-bos .et_pb_button) { background: var(--opt-bos) !important; color: var(--opt-papier) !important; }
:is(.opt-knop.is-bos.et_pb_button, .opt-knop.is-bos .et_pb_button):hover { background: var(--opt-diep) !important; }
:is(.opt-knop.is-omlijnd.et_pb_button, .opt-knop.is-omlijnd .et_pb_button) { background: transparent !important; border-color: var(--opt-inkt) !important; color: var(--opt-inkt) !important; }
:is(.opt-knop.is-omlijnd.et_pb_button, .opt-knop.is-omlijnd .et_pb_button):hover { background: var(--opt-inkt) !important; color: var(--opt-papier) !important; }
:is(.opt-knop.is-licht.et_pb_button, .opt-knop.is-licht .et_pb_button) { background: transparent !important; border-color: rgba(245, 247, 240, .6) !important; color: var(--opt-papier) !important; }
.opt-link { font-weight: 700; color: var(--opt-bos); text-decoration: underline; text-underline-offset: 6px; }
/* Kaarten en tegels (Text-module met class) */
.et_pb_text.opt-kaart { background: var(--opt-wit); border-radius: 28px; padding: 32px; }
.et_pb_text.opt-kaart .opt-korrel { margin-bottom: 14px; }
.et_pb_text.opt-kaart p { color: var(--opt-grijs); font-size: 16px; }
.opt-groen .et_pb_text.opt-kaart { background: var(--opt-band); }
.opt-groen .et_pb_text.opt-kaart p { color: var(--opt-zacht); }
.opt-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.opt-tegel { background: var(--opt-band); border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.opt-tegel b { font: 800 42px/1 var(--opt-kop); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.opt-tegel span { font-size: 14px; color: var(--opt-zacht); }
.opt-cijfers3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.opt-cijfers3 div { background: var(--opt-wit); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 2px; }
.opt-cijfers3 span { font-size: 13px; color: var(--opt-grijs); }
.opt-cijfers3 b { font: 800 30px/1.05 var(--opt-kop); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.opt-cijfers3 .is-donker { background: var(--opt-bos); }
.opt-cijfers3 .is-donker span { color: var(--opt-mint); }
.opt-cijfers3 .is-donker b { color: var(--opt-mais); }
/* Stappen (werkwijze) */
ol.opt-stappen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.opt-stappen li { background: var(--opt-band); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.opt-stappen .nr { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--opt-papier); color: var(--opt-inkt); font: 800 22px/1 var(--opt-kop); }
.opt-stappen li:first-child .nr { background: var(--opt-mais); }
.opt-stappen small { font-size: 14px; font-weight: 600; color: var(--opt-mint); }
.opt-stappen h3 { margin: 0; }
.opt-stappen p { font-size: 16px; }
/* Prijskaarten: class op de kolom */
.et_pb_column.opt-prijskaart { border-radius: 32px; padding: 36px !important; }
.opt-prijs-groot { display: block; font: 800 64px/1 var(--opt-kop); letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin: 8px 0 16px; }
.opt-prijs-groot small { font: 600 16px var(--opt-tekst); letter-spacing: 0; opacity: .75; }
.opt-prijskaart.is-bos, .opt-prijskaart.is-bos p, .opt-prijskaart.is-bos li { color: var(--opt-zacht); }
.opt-prijskaart.is-bos h3, .opt-prijskaart.is-bos .opt-prijs-groot { color: var(--opt-papier); }
.opt-prijskaart.is-mais h3, .opt-prijskaart.is-mais p, .opt-prijskaart.is-mais li { color: var(--opt-inkt); }
/* Hero met foto en zwevende kaarten */
.et_pb_column.opt-hero-foto { position: relative; }
.opt-hero-foto .et_pb_image img { border-radius: 32px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 35% 22%; width: 100%; }
.et_pb_text.opt-zwevend { position: absolute; z-index: 2; background: var(--opt-wit); border-radius: 22px; padding: 18px 22px; box-shadow: 0 30px 60px -28px rgba(30, 58, 42, .45); margin: 0 !important; }
.et_pb_text.opt-zwevend.is-rechts { right: -28px; top: 120px; }
.et_pb_text.opt-zwevend.is-links { left: -36px; bottom: -28px; max-width: 300px; }
.et_pb_text.opt-zwevend.is-label { top: 20px; left: 20px; padding: 8px 16px; border-radius: 999px; background: rgba(20, 48, 31, .88); color: var(--opt-papier); font-weight: 600; font-size: 14px; box-shadow: none; }
.opt-zwevend .opt-groot { font-size: 32px; color: var(--opt-bos); display: block; }
.opt-zwevend small { font-size: 13px; color: var(--opt-grijs); }
/* "In het kort"-kaart */
.opt-kort { background: var(--opt-wit); border-radius: 32px; padding: 32px; box-shadow: 0 30px 60px -36px rgba(30, 58, 42, .4); }
.opt-kort h3 { color: var(--opt-inkt) !important; }
.opt-kort dl { margin: 0; }
.opt-kort dl div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #EEF2EA; font-size: 15px; }
.opt-kort dl div:last-child { border-bottom: 0; }
.opt-kort dt { color: var(--opt-grijs); }
.opt-kort dd { margin: 0; font-weight: 700; text-align: right; color: var(--opt-inkt); }
/* FAQ: class op de Toggle-modules */
.et_pb_toggle.opt-faq { background: var(--opt-wit) !important; border: 0 !important; border-radius: 20px; padding: 22px 26px !important; margin-bottom: 10px !important; }
.opt-faq .et_pb_toggle_title { font: 700 18px/1.35 var(--opt-tekst) !important; color: var(--opt-inkt) !important; padding-right: 48px; }
.opt-faq .et_pb_toggle_content { color: var(--opt-grijs); padding-top: 12px; font-size: 16px; }
/* Kolf, Over mij-blok */
.opt-kolf img { width: 340px; max-width: 100%; display: block; margin: 0 auto; }
.et_pb_row.opt-over { background: var(--opt-bos); border-radius: 40px; overflow: hidden; padding: 0; }
.opt-over .et_pb_column { margin-bottom: 0; }
.opt-over .opt-duotoon img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: 30% 20%; display: block; }
.opt-over .et_pb_column:last-child { padding: 64px 56px 64px 0; }
.opt-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.opt-chips span { padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(169, 217, 180, .5); font-size: 14px; font-weight: 600; color: var(--opt-mint); }
/* Voor en na */
.opt-vn { border-radius: 32px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.opt-vn.is-voor { background: var(--opt-band); }
.opt-vn.is-na { background: var(--opt-mais); }
.opt-vn > small { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--opt-mint); }
.opt-vn.is-na > small { color: var(--opt-inkt); }
.opt-vn-kaart { background: var(--opt-wit); color: var(--opt-inkt); border-radius: 22px; padding: 22px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
.opt-vn-kaart .beeld { background: #EEF2EA; border-radius: 14px; height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.opt-vn-kaart .fles { width: 32px; height: 104px; border-radius: 12px 12px 8px 8px; background: #9AA59C; }
.opt-vn-kaart .fles.is-zwart { background: var(--opt-inkt); }
.opt-vn-kaart .fles.is-groen { background: var(--opt-blad); }
.opt-vn-kaart .tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; color: var(--opt-grijs); }
.opt-groen .opt-vn-kaart .titel, .opt-vn-kaart .titel { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--opt-inkt); }
.opt-vn-labels { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-vn-labels span { font-size: 14px; font-weight: 700; padding: 7px 14px; border-radius: 999px; }
.is-voor .opt-vn-labels span { background: rgba(230, 139, 121, .16); color: #F0A595; }
.is-na .opt-vn-labels span { background: var(--opt-inkt); color: var(--opt-mais); }
/* Knoppen naast elkaar, gecentreerde CTA */
.et_pb_button_module_wrapper { display: inline-block; margin: 0 12px 12px 0 !important; }
.opt-midden .et_pb_column { text-align: center; }
.opt-midden .et_pb_button_module_wrapper { margin: 0 !important; }
/* Kaartvarianten */
.et_pb_text.opt-kaart.opt-kaart-mais, .opt-groen .et_pb_text.opt-kaart.opt-kaart-mais { background: var(--opt-mais); }
.opt-groen .opt-kaart-mais p, .opt-groen .opt-kaart-mais li { color: var(--opt-inkt); }
.et_pb_text.opt-kaart.opt-kaart-bos { background: var(--opt-bos); }
.opt-kaart-bos h3 { color: var(--opt-papier) !important; }
.opt-kaart-bos p { color: var(--opt-zacht) !important; }
.et_pb_row.opt-rij-kaart { background: var(--opt-wit); border-radius: 32px; padding: 48px; }
.opt-leestekst { max-width: 760px; }
.opt-leestekst h1 { margin-bottom: .5em; }
.opt-leestekst h2 { font-size: 32px; margin-top: 1.4em; }
/* Header en footer (Theme Builder) */
.et_pb_section.opt-header { border-bottom: 1px solid #E1E8DC; }
.opt-header .et_pb_row { padding: 12px 0; display: flex; align-items: center; }
.opt-header .et_pb_column { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.opt-header .et_pb_menu { flex: 1; margin: 0 !important; background: transparent !important; }
.opt-menu .et_pb_menu__logo img { max-height: 34px; width: auto; }
.opt-menu .et-menu > li > a { font: 600 15px var(--opt-tekst) !important; color: #3A4A40 !important; padding: 6px 0 !important; }
.opt-menu .et-menu > li { padding: 0 14px; }
.opt-header-knop .et_pb_button, .opt-header-knop.et_pb_button { min-height: 46px !important; font-size: 15px !important; }
.opt-footer a { color: var(--opt-zacht); text-decoration: none; }
.opt-footer a:hover { color: var(--opt-mais); }
.opt-footer p { font-size: 15px; }
.opt-footer :is(.opt-knop.et_pb_button, .opt-knop .et_pb_button) { white-space: normal; text-align: center; line-height: 1.2 !important; padding: 12px 22px !important; }
.opt-footer .et_pb_button_module_wrapper { max-width: 100%; }
.opt-footer-onder { border-top: 1px solid rgba(245, 247, 240, .12); padding-top: 20px !important; font-size: 13px !important; color: #8FA596 !important; }
/* Blogtemplate */
.opt-artikel-titel .entry-title { font: 800 clamp(44px, 6vw, 88px)/.95 var(--opt-kop); letter-spacing: -.035em; color: var(--opt-bos); max-width: 18ch; }
.opt-artikel-titel .et_pb_title_meta_container { color: var(--opt-grijs); font-size: 15px; margin-top: 18px; }
.opt-blog .et_pb_post { background: var(--opt-wit); border: 0 !important; border-radius: 28px; padding: 26px !important; }
.opt-blog .entry-title { font: 800 24px/1.05 var(--opt-kop) !important; letter-spacing: -.02em; }
/* Correcties na de eerste render */
#page-container .et_pb_section .et_pb_row { width: calc(100% - 48px) !important; max-width: 1280px !important; }
.opt-grafiek ol, ol.opt-stappen, ol.opt-vinkjes { list-style: none !important; padding-left: 0 !important; }
.opt-grafiek ol li::marker { content: none; }
.opt-cijfers3 b { font-size: 26px; white-space: nowrap; }
.opt-prijs-groot { font-size: 56px; white-space: nowrap; }
@media (min-width: 981px) {
.et_pb_row:has(> .et_pb_column > .opt-kaart:only-child), .et_pb_row:has(> .opt-prijskaart), .et_pb_row.opt-over { display: flex; align-items: stretch; }
.et_pb_column > .et_pb_text.opt-kaart:only-child { height: 100%; box-sizing: border-box; }
.opt-over .et_pb_column:first-child { position: relative; min-height: 460px; }
.opt-over .et_pb_image.opt-duotoon { position: absolute; inset: 0; margin: 0 !important; }
.opt-over .opt-duotoon .et_pb_image_wrap, .opt-over .opt-duotoon img { width: 100%; height: 100%; }
}
@media (max-width: 980px) {
.opt-header .et_pb_column { flex-wrap: wrap; }
.et_pb_text.opt-zwevend.is-rechts { right: 12px; }
.et_pb_text.opt-zwevend.is-links { left: 12px; }
.opt-over .et_pb_column:last-child { padding: 40px 28px; }
.opt-tegels, .opt-cijfers3 { grid-template-columns: minmax(0, 1fr); }
.opt-grafiek { overflow-x: auto; }
.opt-grafiek-balken, .opt-grafiek-weken { gap: 4px; }
.opt-grafiek-balken { height: 240px; }
.opt-grafiek-balken b { font-size: 10px; white-space: normal; text-align: center; line-height: 1.1; }
.opt-grafiek-weken { font-size: 10px; }
.opt-header .et_pb_button_module_wrapper { display: none; }
}
/* ================= Afwerking: beweging, menu, header ================= */
:root { --opt-ease: cubic-bezier(.2, .7, .2, 1); }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
::selection { background: var(--opt-mais); color: var(--opt-inkt); }
/* Sticky header met schaduw na scrollen */
header.et-l--header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 9990; transition: box-shadow .3s var(--opt-ease); }
header.et-l--header.is-scrolled { box-shadow: 0 12px 32px -18px rgba(20, 48, 31, .35); }
#page-container { overflow: visible !important; }
/* Hoofdmenu: onderstreping groeit, geen Divi-opacity */
.opt-menu .et-menu > li > a {
opacity: 1 !important; box-shadow: none !important;
background: linear-gradient(var(--opt-mais), var(--opt-mais)) no-repeat left calc(100% - 2px) / 0 3px;
transition: background-size .3s var(--opt-ease), color .2s;
}
.opt-menu .et-menu > li > a:hover { color: var(--opt-inkt) !important; background-size: 100% 3px; }
.opt-menu .et-menu > li.menu-item-object-page.current-menu-item > a,
.opt-menu .et-menu > li.current-menu-ancestor > a,
.opt-menu .et-menu > li.current-page-ancestor > a { color: var(--opt-inkt) !important; background-size: 100% 3px; }
/* Pijltje bij Pakketten */
.opt-menu .et-menu .menu-item-has-children > a { padding-right: 18px !important; }
.opt-menu .et-menu .menu-item-has-children > a::after {
content: "" !important; font-family: inherit !important;
width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
transform: rotate(45deg); top: 50% !important; margin-top: -6px; right: 2px !important;
transition: transform .25s var(--opt-ease), margin-top .25s var(--opt-ease);
}
.opt-menu .et-menu .menu-item-has-children:hover > a::after { transform: rotate(225deg); margin-top: -2px; }
/* Uitklapmenu */
.opt-menu .nav li ul.sub-menu {
width: 280px; padding: 10px; border: 0 !important; border-radius: 20px; background: var(--opt-wit);
box-shadow: 0 0 0 1px #E1E8DC, 0 28px 56px -24px rgba(20, 48, 31, .4);
margin-top: 6px;
}
.opt-menu .nav li ul.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.opt-menu .nav li ul.sub-menu li { padding: 0; width: 100%; display: block; }
.opt-menu .nav li ul.sub-menu { white-space: normal; }
.opt-menu .nav li ul.sub-menu a {
width: 100%; padding: 12px 14px; border-radius: 12px; box-sizing: border-box;
font: 600 15px/1.3 var(--opt-tekst) !important; color: var(--opt-inkt) !important; opacity: 1 !important;
transition: background .2s, padding-left .25s var(--opt-ease);
}
.opt-menu .nav li ul.sub-menu a:hover { background: var(--opt-tint); padding-left: 20px; }
.opt-menu .nav li ul.sub-menu .current-menu-item > a { background: var(--opt-licht-geel); }
/* Mobiel menu */
.opt-menu .mobile_nav .mobile_menu_bar::before { color: var(--opt-bos) !important; font-size: 34px; transition: transform .25s var(--opt-ease); }
.opt-menu .mobile_nav.opened .mobile_menu_bar::before { content: "\4d"; transform: rotate(90deg); }
.opt-menu .et_mobile_menu {
border: 0 !important; border-radius: 0 0 28px 28px; background: var(--opt-papier) !important;
padding: 12px 24px 28px !important; box-shadow: 0 40px 60px -30px rgba(20, 48, 31, .45);
width: 100vw; left: auto; right: -24px; top: calc(100% + 13px);
}
.opt-menu .et_mobile_menu li a {
padding: 16px 0 !important; border-bottom: 1px solid #E1E8DC !important; opacity: 1 !important;
font: 800 22px/1.1 var(--opt-kop) !important; letter-spacing: -.02em; color: var(--opt-inkt) !important; background: none !important;
}
.opt-menu .et_mobile_menu .sub-menu { padding: 0 !important; }
.opt-menu .et_mobile_menu .sub-menu a { padding-left: 18px !important; font: 600 16px var(--opt-tekst) !important; letter-spacing: 0; color: #3A4A40 !important; }
.opt-menu .et_mobile_menu .menu-item-has-children > a { background: none; }
.opt-menu .et_mobile_menu li.opt-menu-cta { margin-top: 20px; }
.opt-menu .et_mobile_menu li.opt-menu-cta > a {
border: 0 !important; border-radius: 999px; background: var(--opt-mais) !important; text-align: center;
font: 700 17px var(--opt-tekst) !important; letter-spacing: 0; padding: 18px !important;
}
.opt-menu .et-menu li.opt-menu-cta { display: none; }
/* Knoppen: optillen bij hover, indrukken bij klik */
:is(.opt-knop.et_pb_button, .opt-knop .et_pb_button) {
transition: transform .2s var(--opt-ease), box-shadow .2s var(--opt-ease), background-color .2s, color .2s, border-color .2s !important;
}
:is(.opt-knop.et_pb_button, .opt-knop .et_pb_button):hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(20, 48, 31, .55); }
:is(.opt-knop.et_pb_button, .opt-knop .et_pb_button):active { transform: translateY(0); box-shadow: none; }
.fluentform .ff-btn-submit { transition: transform .2s var(--opt-ease), box-shadow .2s, background-color .2s !important; }
.fluentform .ff-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(20, 48, 31, .55); }
/* Tekstlinks: onderstreping schuift */
.opt-link { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat left 100% / 100% 2px; padding-bottom: 2px; transition: background-size .3s var(--opt-ease), color .2s; }
.opt-link:hover { background-size: 0 2px; background-position: right 100%; }
.opt-footer a, .opt-leestekst a, .opt-artikel a:not(.et_pb_button) { transition: color .2s; }
/* Kaarten die je kunt aanklikken of die een knop dragen: optillen */
.et_pb_column.opt-prijskaart, .opt-blog .et_pb_post, .et_pb_toggle.opt-faq { transition: transform .35s var(--opt-ease), box-shadow .35s var(--opt-ease); }
.et_pb_column.opt-prijskaart:hover, .opt-blog .et_pb_post:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(20, 48, 31, .45); }
.et_pb_toggle.opt-faq:hover { box-shadow: 0 0 0 1px #D7DFD0; }
.opt-zwevend { transition: transform .4s var(--opt-ease); }
.opt-hero-foto:hover .opt-zwevend.is-rechts { transform: translateY(-6px); }
.opt-hero-foto:hover .opt-zwevend.is-links { transform: translateY(6px); }
/* FAQ-icoon: plus wordt min */
.opt-faq .et_pb_toggle_title::before { color: var(--opt-inkt) !important; transition: transform .3s var(--opt-ease); }
.opt-faq.et_pb_toggle_open .et_pb_toggle_title::before { transform: rotate(180deg); }
/* Binnenkomen bij scrollen (alleen als JS draait) */
.opt-js .opt-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--opt-ease), transform .8s var(--opt-ease); }
.opt-js .opt-reveal.is-in { opacity: 1; transform: none; }
.opt-js .et_pb_row.opt-reveal > .et_pb_column:nth-child(2) { transition-delay: .08s; }
.opt-js .et_pb_row.opt-reveal > .et_pb_column:nth-child(3) { transition-delay: .16s; }
.opt-js .et_pb_row.opt-reveal > .et_pb_column:nth-child(4) { transition-delay: .24s; }
.opt-js .et_pb_row.opt-reveal > .et_pb_column { transition: opacity .8s var(--opt-ease), transform .8s var(--opt-ease); }
.opt-js .et_pb_row.opt-reveal:not(.is-in) > .et_pb_column { opacity: 0; transform: translateY(20px); }
.opt-js .et_pb_row.opt-reveal { opacity: 1; transform: none; }
/* Markeerstift tekent zich */
.opt-js .opt-mark.opt-reveal { opacity: 1; transform: none; }
.opt-js .opt-mark { background-size: 0 100%; background-repeat: no-repeat; transition: background-size 1.1s var(--opt-ease) .35s; }
.opt-js .opt-mark.is-in { background-size: 100% 100%; }
/* Grafiekbalken groeien */
.opt-js .opt-grafiek .opt-grafiek-balken i { transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--opt-ease); }
.opt-js .opt-grafiek.is-in .opt-grafiek-balken i { transform: scaleY(1); }
.opt-js .opt-grafiek .opt-grafiek-balken li:nth-child(2) i { transition-delay: .06s; }
.opt-js .opt-grafiek .opt-grafiek-balken li:nth-child(3) i { transition-delay: .12s; }
.opt-js .opt-grafiek .opt-grafiek-balken li:nth-child(4) i { transition-delay: .18s; }
.opt-js .opt-grafiek .opt-grafiek-balken li:nth-child(5) i { transition-delay: .24s; }
.opt-js .opt-grafiek .opt-grafiek-balken li:nth-child(6) i { transition-delay: .30s; }
.opt-js .opt-grafiek .opt-grafiek-balken li:nth-child(7) i { transition-delay: .36s; }
.opt-js .opt-grafiek .opt-grafiek-balken li:nth-child(8) i { transition-delay: .42s; }
/* Kolf groeit uit de bladeren */
.opt-js .opt-kolf img { transform: translateY(24px) scale(.96); opacity: 0; transition: transform 1s var(--opt-ease) .15s, opacity 1s var(--opt-ease) .15s; }
.opt-js .opt-kolf.is-in img { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ================= Kennisbank, archief, zoeken, 404 ================= */
.opt-blog .et_pb_post { background: var(--opt-wit); border: 0 !important; border-radius: 28px; padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.opt-blog .et_pb_post::before { content: ""; display: block; height: 10px; background: var(--opt-mais); order: -2; }
.opt-blog .more-link { text-transform: none; }
.opt-blog .more-link::first-letter { text-transform: uppercase; }
.opt-blog .et_pb_post:nth-child(3n+2)::before { background: var(--opt-bos); }
.opt-blog .et_pb_post:nth-child(3n)::before { background: var(--opt-mint); }
.opt-blog .et_pb_post > * { padding-left: 28px; padding-right: 28px; }
.opt-blog .post-meta { order: -1; padding-top: 26px; font-size: 13px !important; font-weight: 700; color: var(--opt-blad) !important; }
.opt-blog .post-meta a { color: var(--opt-blad) !important; }
.opt-blog .entry-title { padding-top: 10px; padding-bottom: 8px; }
.opt-blog .entry-title a { color: var(--opt-inkt) !important; }
.opt-blog .post-content { padding-bottom: 28px; color: var(--opt-grijs); font-size: 15px; }
.opt-blog .post-content:empty, .opt-blog .post-content-inner:empty { display: none; }
.opt-blog .more-link { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--opt-bos) !important; }
.opt-blog .pagination a { font-weight: 700; color: var(--opt-bos) !important; }
.opt-blog > .et_pb_ajax_pagination_container > *:last-child, .opt-blog .et_pb_post:last-child { margin-bottom: 0; }
.opt-blog .et_pb_post { margin-bottom: 0 !important; }
.opt-blog .et_pb_salvattore_content, .opt-blog .et_pb_blog_grid > div { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.opt-blog .et_pb_salvattore_content > .column { display: contents; }
.opt-categorieen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.opt-categorieen a {
padding: 10px 18px; border-radius: 999px; background: var(--opt-wit); color: var(--opt-inkt);
font: 600 15px var(--opt-tekst); box-shadow: 0 0 0 1px #E1E8DC; transition: background .2s, box-shadow .2s, transform .2s var(--opt-ease);
}
.opt-categorieen a:hover { background: var(--opt-licht-geel); box-shadow: 0 0 0 1px var(--opt-mais); transform: translateY(-2px); }
.opt-categorieen a.is-actief { background: var(--opt-bos); color: var(--opt-papier); box-shadow: none; }
.opt-archief-titel .entry-title, .opt-archief-titel h1 { font: 800 clamp(48px, 6vw, 88px)/.95 var(--opt-kop) !important; letter-spacing: -.035em; color: var(--opt-bos); }
.opt-404 { text-align: center; }
.opt-404 .opt-groot { font-size: clamp(120px, 22vw, 260px); color: var(--opt-mais); line-height: .8; }
.opt-zoek input[type="search"], .opt-zoek .et_pb_s { min-height: 54px; border-radius: 999px !important; border: 1.5px solid var(--opt-lijn) !important; padding: 0 22px !important; font: 16px var(--opt-tekst); background: var(--opt-wit) !important; }
/* Tablet (768–980): twee kolommen waar het past */
@media (min-width: 768px) and (max-width: 980px) {
.et_pb_row:has(> .et_pb_column > .opt-kaart:only-child) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.et_pb_row:has(> .et_pb_column > .opt-kaart:only-child) .opt-kaart { padding: 24px; }
.opt-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.opt-kolf img { width: 260px; }
.et_pb_row:has(> .et_pb_column > .opt-kaart:only-child) > .et_pb_column { width: auto !important; margin: 0 !important; }
.et_pb_column > .et_pb_text.opt-kaart:only-child { height: 100%; box-sizing: border-box; }
.et_pb_row:has(> .opt-prijskaart) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.et_pb_row:has(> .opt-prijskaart) > .et_pb_column { width: auto !important; margin: 0 !important; }
/* Divi's clearfix (::after) zou anders een lege gridkolom worden */
.et_pb_row:has(> .et_pb_column > .opt-kaart:only-child)::after, .et_pb_row:has(> .opt-prijskaart)::after { display: none; }
ol.opt-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.et_pb_text.opt-zwevend.is-links { left: 16px; bottom: 16px; }
.opt-hero-foto .et_pb_image img { aspect-ratio: 16 / 11; }
}
@media (max-width: 767px) {
.opt-kolf img { width: 220px; }
.et_pb_section h1 { font-size: clamp(44px, 12vw, 64px); }
.et_pb_section h2 { font-size: clamp(38px, 10vw, 52px); }
.opt-prijs-groot { font-size: 48px; }
.et_pb_column.opt-prijskaart { padding: 28px !important; }
.et_pb_row.opt-rij-kaart { padding: 28px; }
.opt-hero-foto { margin-top: 12px; }
.et_pb_text.opt-zwevend.is-rechts { top: auto; bottom: 96px; right: 12px; }
.et_pb_text.opt-zwevend.is-links { position: relative; left: 0; bottom: 0; margin-top: -40px !important; max-width: none; margin-left: 12px !important; margin-right: 12px !important; }
.opt-over .et_pb_column:first-child { min-height: 320px; position: relative; }
.opt-over .et_pb_image.opt-duotoon { position: absolute; inset: 0; margin: 0 !important; }
.opt-over .opt-duotoon img, .opt-over .opt-duotoon .et_pb_image_wrap { width: 100%; min-height: 320px; height: 320px; object-fit: cover; display: block; }
.opt-over .et_pb_column:first-child { width: 100% !important; }
.opt-kort { padding: 24px; }
.opt-kort dl div { flex-direction: column; gap: 2px; }
.opt-kort dd { text-align: left; }
.opt-vn-kaart { grid-template-columns: 84px minmax(0, 1fr); padding: 16px; gap: 14px; }
.opt-vn-kaart .beeld { height: 110px; }
.opt-artikel-titel .entry-title { font-size: 40px; }
}
/* ================= Ronde 2: iconen, formulier, CTA, stappen, patronen ================= */
/* Icoon in een korrelvormig badge */
.opt-icoon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 64px; margin-bottom: 18px;
border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
background: radial-gradient(circle at 34% 26%, #FBDD84 0, var(--opt-mais) 48%, var(--opt-pit) 100%);
color: var(--opt-inkt); box-shadow: inset 0 -5px 0 rgba(120, 70, 0, .12), 0 10px 20px -12px rgba(150, 95, 0, .55);
transition: transform .4s var(--opt-ease);
}
.opt-icoon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.et_pb_text.opt-kaart { transition: transform .35s var(--opt-ease), box-shadow .35s var(--opt-ease); }
.et_pb_text.opt-kaart:not(.opt-agenda-kaart):not(:has(.fluentform)):hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(20, 48, 31, .4); }
.et_pb_text.opt-kaart:hover .opt-icoon { transform: rotate(-10deg) scale(1.06); }
/* Dropdowns: eigen pijltje met ruimte */
.fluentform select.ff-el-form-control {
-webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 50px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231E3A2A%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 18px center; background-size: 18px;
}
.fluentform input[type="date"]::-webkit-calendar-picker-indicator { margin-right: 4px; opacity: .55; cursor: pointer; }
.fluentform .opt-fout .ff-el-form-control { border-color: var(--opt-verlies); background-color: #FDF1EF; }
.fluentform .opt-fout::after { content: "Vul dit veld in"; display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--opt-verlies); }
.fluentform .ff-el-group { margin-bottom: 18px; }
.fluentform .ff_submit_btn_wrapper { margin-bottom: 0; }
.opt-vergelijk tbody tr:last-child :is(th, td) { border-bottom: 0; padding-bottom: 24px; }
.opt-vergelijk-wrap .opt-vergelijk { margin: 0 !important; }
/* "Alles uit Optimalisatie": titel links, inbegrepen punten in een strak raster */
.opt-basis { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px 40px; align-items: start; }
.opt-basis p.opt-basis-titel { margin: 0 !important; font: 800 22px/1.15 var(--opt-kop); letter-spacing: -.02em; color: var(--opt-bos); }
.opt-basis-titel span { display: block; margin-top: 6px; font: 600 14px var(--opt-tekst); letter-spacing: 0; color: var(--opt-grijs); }
.opt-basis-lijst { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px 28px !important; }
.opt-basis-lijst li { font-size: 15px; line-height: 1.4; color: #3A4A40; }
@media (max-width: 767px) { .opt-basis { grid-template-columns: minmax(0, 1fr); } }
/* Aanvraagformulier in stappen */
.opt-stappen-kop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.opt-stappen-kop li { display: flex; align-items: center; gap: 10px; font: 600 14px var(--opt-tekst); color: var(--opt-grijs); min-width: 0; }
.opt-stappen-kop li span {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px;
border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; background: #EEF2EA; color: var(--opt-grijs);
font: 800 15px var(--opt-kop); transition: background .35s, color .35s, transform .35s var(--opt-ease);
}
.opt-stappen-kop li.is-actief { color: var(--opt-inkt); }
.opt-stappen-kop li.is-actief span { background: var(--opt-mais); color: var(--opt-inkt); transform: scale(1.08); }
.opt-stappen-kop li.is-klaar span { background: var(--opt-bos); color: var(--opt-mais); }
.opt-voortgang { height: 4px; border-radius: 4px; background: #EEF2EA; margin: 0 0 28px; overflow: hidden; }
.opt-voortgang i { display: block; height: 100%; width: 25%; background: var(--opt-mais); border-radius: 4px; transition: width .5s var(--opt-ease); }
.opt-stap-verborgen { display: none !important; }
.opt-stap-in { animation: opt-stap-in .45s var(--opt-ease); }
@keyframes opt-stap-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.opt-stap-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 18px; }
.opt-stap-terug, .opt-stap-verder {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 16px var(--opt-tekst); cursor: pointer; white-space: nowrap;
transition: transform .2s var(--opt-ease), box-shadow .2s, background .2s, border-color .2s;
}
.opt-stap-terug::before { content: "←"; }
.opt-stap-verder::after { content: "→"; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: -12px; border-radius: 50%; background: var(--opt-mais); color: var(--opt-inkt); transition: transform .3s var(--opt-ease); }
.opt-stap-verder:hover::after { transform: translateX(3px); }
/* Stappen: titel en uitleg per stap */
.opt-stap-titel { margin: 0 0 22px; }
.opt-stap-titel h4 { margin: 0 0 4px !important; padding: 0; font: 800 24px/1.1 var(--opt-kop); letter-spacing: -.02em; color: var(--opt-bos); }
.opt-stap-titel p { margin: 0 !important; font-size: 15px !important; color: var(--opt-grijs); }
.opt-stappen-actief .ff-el-section-break { display: none !important; }
/* Nummervelden zonder pijltjes */
.fluentform input[type="number"] { -moz-appearance: textfield; }
.fluentform input[type="number"]::-webkit-inner-spin-button, .fluentform input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fluentform textarea.ff-el-form-control { min-height: 120px; }
.fluentform ::placeholder { color: #A3AEA6; }
/* Keuzes (MarktMentor/Rylee) als selecteerbare chips */
.fluentform .ff-el-form-check:not(.ff-el-tc) { display: inline-flex !important; margin: 0 10px 10px 0 !important; padding: 0 !important; }
.fluentform .ff-el-form-check:not(.ff-el-tc) label {
display: inline-flex !important; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px !important;
border: 1.5px solid var(--opt-lijn); border-radius: 999px; background: var(--opt-wit); cursor: pointer;
font-size: 15px !important; font-weight: 600 !important; color: var(--opt-inkt);
transition: border-color .2s, background .2s, transform .2s var(--opt-ease);
}
.fluentform .ff-el-form-check:not(.ff-el-tc) label:hover { border-color: var(--opt-bos); transform: translateY(-1px); }
.fluentform .ff-el-form-check:not(.ff-el-tc):has(input:checked) label { border-color: var(--opt-bos); background: var(--opt-tint); }
.fluentform input[type="radio"] {
-webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0 !important; flex: none; cursor: pointer;
border: 2px solid var(--opt-lijn); border-radius: 50%; background: var(--opt-wit); transition: border-color .2s, box-shadow .2s;
}
.fluentform input[type="radio"]:checked { border-color: var(--opt-bos); box-shadow: inset 0 0 0 4px var(--opt-wit), inset 0 0 0 10px var(--opt-bos); }
/* Akkoord-checkbox: eigen vakje in een rustig kader */
.fluentform .ff-el-tc { display: block !important; background: var(--opt-papier); border-radius: 16px; padding: 16px 18px !important; margin: 0 !important; }
.fluentform .ff-el-tc label { display: grid !important; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 14px !important; line-height: 1.55; color: #3A4A40; cursor: pointer; }
.fluentform .ff-el-tc .ff_t_c, .fluentform .ff-el-tc .ff_t_c p { margin: 0 !important; font-size: 14px !important; }
.fluentform input[type="checkbox"] {
-webkit-appearance: none; appearance: none; width: 24px !important; height: 24px !important; margin: 0 !important; flex: none; cursor: pointer;
display: inline-grid; place-content: center; border: 2px solid var(--opt-lijn); border-radius: 8px; background: var(--opt-wit);
transition: background .2s, border-color .2s;
}
.fluentform input[type="checkbox"]::after {
content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid var(--opt-mais); border-width: 0 3px 3px 0;
transform: rotate(45deg) scale(0); transition: transform .25s var(--opt-ease);
}
.fluentform input[type="checkbox"]:checked { background: var(--opt-bos); border-color: var(--opt-bos); }
.fluentform input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.fluentform input:focus-visible { outline: 3px solid var(--opt-mais); outline-offset: 2px; }
.fluentform .opt-fout .ff-el-tc { box-shadow: inset 0 0 0 1.5px var(--opt-verlies); }
/* Laatste stap: Vorige links, versturen rechts */
.fluentform .ff_submit_btn_wrapper:has(.opt-stap-terug) { margin-top: 22px !important; }
.fluentform .ff_submit_btn_wrapper .ff-btn-submit { margin-left: auto; }
@media (max-width: 600px) {
.fluentform .ff_submit_btn_wrapper:has(.opt-stap-terug) { flex-direction: column-reverse; align-items: stretch; }
.fluentform .ff_submit_btn_wrapper .ff-btn-submit, .fluentform .ff_submit_btn_wrapper .opt-stap-terug { width: 100%; margin-left: 0; }
}
.opt-stap-terug { background: transparent; border: 2px solid var(--opt-lijn); color: var(--opt-inkt); }
.opt-stap-terug:hover { border-color: var(--opt-inkt); }
.opt-stap-verder { margin-left: auto; background: var(--opt-bos); border: 0; color: var(--opt-papier); }
.opt-stap-verder:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(20, 48, 31, .55); }
.fluentform .ff_submit_btn_wrapper:has(.opt-stap-terug) { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.opt-samenvatting { background: var(--opt-licht-geel); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; font-size: 15px; }
.opt-stap-nav button { white-space: nowrap; }
@media (max-width: 767px) {
.et_pb_section:not(.opt-header):not(.opt-footer) { padding-top: 44px !important; padding-bottom: 44px !important; }
.et_pb_section:not(.opt-header) .et_pb_row { padding: 14px 0; }
.et_pb_text.opt-kaart:has(.fluentform) { padding: 22px; }
.opt-stap-nav button { padding: 0 20px; }
}
@media (max-width: 600px) {
.opt-stappen-kop li { font-size: 0; gap: 0; justify-content: center; }
.opt-stappen-kop li.is-actief { font-size: 13px; gap: 8px; }
}
/* CTA-knop met pijl (header, hero, CTA-banden) */
:is(.opt-pijl.et_pb_button, .opt-pijl .et_pb_button) { padding: 0 8px 0 26px !important; }
:is(.opt-pijl.et_pb_button, .opt-pijl .et_pb_button)::after {
content: "→" !important; display: inline-flex !important; align-items: center; justify-content: center;
position: static !important; opacity: 1 !important; margin: 0 0 0 14px !important;
width: 38px; height: 38px; border-radius: 50%; background: var(--opt-inkt); color: var(--opt-mais);
font: 700 18px/1 var(--opt-tekst) !important; transition: transform .35s var(--opt-ease);
top: auto !important; right: auto !important; left: auto !important; transform: none !important; flex: none;
}
:is(.opt-pijl.et_pb_button, .opt-pijl .et_pb_button):hover::after { transform: translateX(4px) !important; }
.opt-header-knop .et_pb_button { position: relative; overflow: hidden; min-height: 50px !important; }
.opt-header-knop .et_pb_button::before {
content: "" !important; display: block !important; position: absolute !important; inset: 0; opacity: 1 !important; margin: 0 !important;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
transform: translateX(-120%); animation: opt-glans 7s 2.5s infinite; pointer-events: none;
}
@keyframes opt-glans { 0% { transform: translateX(-120%); } 14%, 100% { transform: translateX(120%); } }
/* Werkwijze: korrels lichten op en een gele lijn loopt van 1 naar 4 */
.opt-stappen .nr { border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; height: 52px; width: 46px; transition: background .5s, transform .5s var(--opt-ease); }
.opt-js .is-in .opt-stappen li .nr { background: var(--opt-mais); }
.opt-js .is-in .opt-stappen li:nth-child(2) .nr { transition-delay: .55s; }
.opt-js .is-in .opt-stappen li:nth-child(3) .nr { transition-delay: 1.1s; }
.opt-js .is-in .opt-stappen li:nth-child(4) .nr { transition-delay: 1.65s; }
@media (min-width: 981px) {
.opt-stappen li { position: relative; }
.opt-stappen li:not(:last-child)::after {
content: ""; position: absolute; z-index: 3; top: 55px; left: 84px; width: calc(100% - 46px); height: 3px;
background: var(--opt-mais); transform-origin: left; transform: scaleX(1); border-radius: 3px;
}
.opt-stappen li:not(:last-child)::before {
content: ""; position: absolute; z-index: 3; top: 50px; left: calc(100% + 30px); width: 10px; height: 10px;
border: solid var(--opt-mais); border-width: 3px 3px 0 0; transform: rotate(45deg);
}
.opt-js .opt-stappen li:not(:last-child)::after { transform: scaleX(0); transition: transform .5s var(--opt-ease); }
.opt-js .opt-stappen li:not(:last-child)::before { opacity: 0; transition: opacity .2s; }
.opt-js .is-in .opt-stappen li:not(:last-child)::after { transform: scaleX(1); }
.opt-js .is-in .opt-stappen li:not(:last-child)::before { opacity: 1; }
.opt-js .is-in .opt-stappen li:nth-child(1)::after { transition-delay: .1s; }
.opt-js .is-in .opt-stappen li:nth-child(1)::before { transition-delay: .55s; }
.opt-js .is-in .opt-stappen li:nth-child(2)::after { transition-delay: .65s; }
.opt-js .is-in .opt-stappen li:nth-child(2)::before { transition-delay: 1.1s; }
.opt-js .is-in .opt-stappen li:nth-child(3)::after { transition-delay: 1.2s; }
.opt-js .is-in .opt-stappen li:nth-child(3)::before { transition-delay: 1.65s; }
}
/* Achtergrondpatronen: korrelraster en het blad uit het logo */
.et_pb_section.opt-patroon { position: relative; isolation: isolate; overflow: hidden; }
.et_pb_section.opt-patroon::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(rgba(169, 217, 180, .13) 1.5px, transparent 1.7px); background-size: 26px 26px;
-webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 95%); mask-image: linear-gradient(120deg, transparent 30%, #000 95%);
}
.et_pb_section.opt-patroon::after {
content: ""; position: absolute; z-index: -1; pointer-events: none; right: -140px; bottom: -180px; width: 620px; height: 620px;
background: url("img/blad.svg") no-repeat center / contain;
}
.et_pb_section.opt-patroon.is-mais::before { background-image: radial-gradient(rgba(140, 90, 0, .16) 1.5px, transparent 1.7px); }
.et_pb_section.opt-patroon.is-mais::after { display: none; }
@media (max-width: 767px) { .et_pb_section.opt-patroon::after { width: 360px; height: 360px; right: -120px; bottom: -120px; } }
/* Interactieve maïskolf ([optimais_kolf]) */
.opt-kolf3d { display: grid; gap: 20px; }
.opt-kolf3d-podium { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 340 / 470; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.opt-kolf3d-podium:active { cursor: grabbing; }
.opt-kolf3d-fallback { width: 100%; display: block; }
.opt-kolf3d.is-actief .opt-kolf3d-fallback { display: none; }
.opt-kolf3d-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.opt-kolf3d-svg ellipse { cursor: pointer; }
.opt-kolf3d-blad { pointer-events: none; }
.opt-goud {
position: absolute; left: 0; top: 0; z-index: 2; width: 42px; height: 48px; padding: 0; border: 0; cursor: pointer;
border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
background: radial-gradient(circle at 34% 26%, #FFEAA6 0, var(--opt-mais) 50%, #C98A12 100%);
color: var(--opt-inkt); font: 800 18px/1 var(--opt-kop);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 10px 20px -8px rgba(0, 0, 0, .55);
transition: opacity .25s, box-shadow .2s;
}
.opt-goud:hover { box-shadow: 0 0 0 4px #fff, 0 12px 24px -8px rgba(0, 0, 0, .6); }
.opt-goud:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.opt-goud.is-volgende::before { content: ""; position: absolute; inset: -9px; border-radius: inherit; border: 2px solid var(--opt-mais); animation: opt-puls 1.6s ease-out infinite; }
@keyframes opt-puls { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.opt-goud.is-gepopt { background: #FFF6DE; box-shadow: 0 0 0 3px var(--opt-mais), 0 10px 20px -8px rgba(0, 0, 0, .55); }
.opt-goud.is-gepopt span { display: none; }
.opt-goud.is-gepopt::after { content: "✓"; color: var(--opt-bos); font-size: 20px; }
.opt-burst { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.opt-burst i { position: absolute; left: 0; top: 0; width: 12px; height: 10px; margin: -5px 0 0 -6px; border-radius: 50% 50% 45% 45%; background: #FFF4D6; opacity: 0; animation: opt-vonk .75s ease-out forwards; }
.opt-kolf3d-kaart { background: var(--opt-band); border-radius: 24px; padding: 24px 24px 22px; }
.opt-kolf3d-kaart.is-wissel { animation: opt-stap-in .45s var(--opt-ease); }
.opt-kk-label { display: block; font: 700 13px var(--opt-tekst); letter-spacing: .02em; color: var(--opt-mais); }
.opt-groen .opt-kolf3d-kaart h3 { margin: 6px 0 8px !important; font-size: 26px; }
.opt-kolf3d-kaart p { font-size: 15px !important; margin: 0 0 4px !important; }
.opt-kk-tip { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(242, 184, 36, .12); color: var(--opt-papier); font-size: 15px; line-height: 1.5; }
.opt-kk-tip b, .opt-kk-weetje b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--opt-mais) !important; }
.opt-kk-nav { display: flex; gap: 8px; margin-top: 16px; }
.opt-kk-nav button {
width: 40px; height: 46px; padding: 0; border: 0; cursor: pointer; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
background: rgba(245, 247, 240, .12); color: var(--opt-papier); font: 800 16px var(--opt-kop);
transition: background .3s, color .3s, transform .2s var(--opt-ease);
}
.opt-kk-nav button:hover { transform: translateY(-2px); background: rgba(245, 247, 240, .22); }
.opt-kk-nav button.is-gepopt { background: var(--opt-mais); color: var(--opt-inkt); }
.opt-kk-nav button.is-nu { box-shadow: 0 0 0 2px var(--opt-papier); }
.opt-kk-hint { margin-top: 12px !important; font-size: 13px !important; color: var(--opt-mint) !important; }
.opt-kk-weetje { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid rgba(245, 247, 240, .14); }
.opt-kk-groot { display: block; margin-top: 6px; font: 800 72px/1 var(--opt-kop); letter-spacing: -.04em; color: var(--opt-mais); }
.opt-kk-cta {
display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 52px; padding: 0 8px 0 24px; border-radius: 999px;
background: var(--opt-mais); color: var(--opt-inkt) !important; font: 700 16px var(--opt-tekst); text-decoration: none;
transition: transform .2s var(--opt-ease), box-shadow .2s;
}
.opt-kk-cta::after { content: "→"; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--opt-inkt); color: var(--opt-mais); }
.opt-kk-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); }
.opt-kk-opnieuw { display: block; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--opt-mint); font: 600 14px var(--opt-tekst); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (max-width: 980px) { .opt-kolf3d-podium { max-width: 280px; } }
/* Bedankt: een maïskorrel popt tot popcorn */
.opt-bedankt { text-align: center; padding: 24px 8px 8px; }
.opt-bedankt h3 { margin: 8px 0 .4em !important; }
.opt-bedankt p { color: var(--opt-grijs); max-width: 44ch; margin: 0 auto 1em !important; }
.opt-bedankt .opt-vinkjes { display: inline-grid; text-align: left; margin-top: 8px; }
.opt-pop { position: relative; width: 140px; height: 130px; margin: 0 auto; }
.opt-pop svg { position: absolute; left: 50%; top: 50%; }
.opt-pop .korrel { width: 44px; height: 52px; margin: -26px 0 0 -22px; animation: opt-sissen .9s ease-in-out both, opt-weg .15s .9s forwards; }
.opt-pop .popcorn { width: 132px; height: 120px; margin: -60px 0 0 -66px; transform: scale(0); animation: opt-pop .6s .9s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.opt-pop i { position: absolute; left: 50%; top: 50%; width: 14px; height: 12px; margin: -6px 0 0 -7px; border-radius: 50% 50% 45% 45%; background: #FFF4D6; box-shadow: inset 0 -2px 0 #E9D9A8; opacity: 0; animation: opt-vonk .8s .92s ease-out forwards; }
.opt-pop i:nth-of-type(1) { --x: -70px; --y: -40px; }
.opt-pop i:nth-of-type(2) { --x: 72px; --y: -34px; }
.opt-pop i:nth-of-type(3) { --x: -56px; --y: 42px; }
.opt-pop i:nth-of-type(4) { --x: 60px; --y: 46px; }
.opt-pop i:nth-of-type(5) { --x: 4px; --y: -72px; background: var(--opt-mais); box-shadow: none; }
.opt-pop i:nth-of-type(6) { --x: -88px; --y: 4px; background: var(--opt-mais); box-shadow: none; }
@keyframes opt-sissen {
0% { transform: rotate(0) scale(1); } 20% { transform: rotate(-9deg) scale(1.04); } 40% { transform: rotate(8deg) scale(1.08); }
60% { transform: rotate(-7deg) scale(1.12); } 80% { transform: rotate(6deg) scale(1.2); } 100% { transform: rotate(0) scale(1.28); }
}
@keyframes opt-weg { to { opacity: 0; transform: scale(.2); } }
@keyframes opt-pop { to { transform: scale(1); } }
@keyframes opt-vonk { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(160deg); } }
@media (prefers-reduced-motion: reduce) {
.opt-pop .korrel, .opt-pop i { display: none; }
.opt-pop .popcorn { transform: none; animation: none; }
}