:root { --groen-donker: #012F1D; --groen-werk: #1B4D3E; --goud: #DBAC65; --goud-donker: #A97B34; --inkt: #101A16; --grijs: #5C6B64; --lijn: #D9E0DC; --lijn-licht: #EEF2F0; --vlak: #F4F7F5; --signaal: #8C2F26; } * { box-sizing: border-box; } body { margin: 0; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; color: var(--inkt); background: #fff; -webkit-font-smoothing: antialiased; } a { color: var(--groen-werk); } a:hover { color: var(--groen-donker); } h1, h2, h3 { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-weight: 700; margin: 0; text-wrap: pretty; } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; } .topbalk { background: var(--groen-donker); color: #C5D3CC; font-size: 13px; } .topbalk .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; } .topbalk a { color: #C5D3CC; text-decoration: none; } .topbalk a:hover { color: #fff; } .topbalk .talen { display: flex; gap: 22px; } .topbalk .talen a.actief { color: #fff; font-weight: 500; } .nav { border-bottom: 1px solid var(--lijn); background: #fff; position: sticky; top: 0; z-index: 50; } .nav .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; padding-bottom: 16px; gap: 24px; } .logo img { height: 44px; width: auto; display: block; } .menu { display: flex; align-items: center; gap: 30px; } .menu a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--inkt); padding: 6px 0; border-bottom: 2px solid transparent; } .menu a:hover { color: var(--groen-werk); } .menu a.actief { color: var(--groen-werk); border-bottom-color: var(--goud); } .knop { display: inline-block; background: var(--groen-werk); color: #fff; border: none; padding: 14px 52px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; text-align: center; } .knop:hover { background: var(--groen-donker); color: #fff; } .knop-goud { background: var(--goud); color: var(--groen-donker); } .knop-goud:hover { background: #c99a55; color: var(--groen-donker); } .knop-rand { background: #fff; color: var(--groen-werk); border: 1.5px solid var(--groen-werk); padding: 12.5px 50.5px; } .knop-rand:hover { background: var(--vlak); color: var(--groen-donker); } .hero { background: var(--groen-donker); color: #fff; } .hero .wrap { padding-top: 76px; padding-bottom: 68px; } .hero .eyebrow { font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase; color: #9FC4B3; font-weight: 600; margin-bottom: 22px; } .hero h1 { font-size: clamp(30px, 5vw, 54px); line-height: 1.12; letter-spacing: -.015em; margin-bottom: 24px; max-width: 17ch; } .hero .lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: #C5D3CC; max-width: 68ch; margin: 0 0 14px; } .hero .sub { font-size: 15px; line-height: 1.6; color: #9FC4B3; max-width: 62ch; margin: 0 0 36px; } .hero .acties { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .hero .acties .note { font-size: 13.5px; color: #9FC4B3; } .teaser { background: var(--vlak); border-bottom: 1px solid var(--lijn); } .teaser .wrap { padding-top: 58px; padding-bottom: 54px; } .teaser-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; } .teaser-kop h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; } .teaser-kop .meta { font-size: 14px; color: var(--grijs); } .teaser-kop .rechts { font-size: 13px; color: var(--grijs); text-align: right; line-height: 1.55; } .tabel { background: #fff; border: 1px solid var(--lijn); } .tabel .rij { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.2fr; padding: 16px 26px; border-bottom: 1px solid var(--lijn-licht); align-items: center; font-size: 15px; } .tabel .rij:last-child { border-bottom: 0; } .tabel .kop { border-bottom: 1px solid var(--lijn); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--grijs); font-weight: 600; padding: 13px 26px; } .tabel .num { text-align: right; font-variant-numeric: tabular-nums; } .tabel .nieuw { color: var(--goud-donker); font-weight: 600; } .tabel .prijs { font-weight: 600; } .tabel .naam { font-weight: 500; } .voetnoot { font-size: 12.5px; color: var(--grijs); margin-top: 14px; } section .wrap { padding-top: 60px; padding-bottom: 60px; } .sectiekop { font-size: clamp(22px, 3vw, 30px); margin-bottom: 14px; } .sectielead { font-size: 16.5px; line-height: 1.65; color: #2C3A34; max-width: 72ch; margin: 0 0 34px; } .drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } .drie h3 { font-size: 21px; margin-bottom: 12px; } .drie p { font-size: 15px; line-height: 1.65; color: #2C3A34; margin: 0; } .streep { width: 40px; height: 2px; background: var(--goud); margin-bottom: 20px; } .stappen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } .stap { border-top: 3px solid var(--groen-werk); padding-top: 22px; } .stap.laatste { border-top-color: var(--goud); } .stap .nr { font-family: 'Source Serif 4', Georgia, serif; font-size: 38px; font-weight: 700; color: var(--groen-werk); line-height: 1; margin-bottom: 14px; } .stap.laatste .nr { color: var(--goud-donker); } .stap h3 { font-size: 17px; font-family: inherit; font-weight: 600; margin-bottom: 10px; } .stap p { font-size: 13.5px; line-height: 1.6; color: #2C3A34; margin: 0 0 12px; } .stap .duur { font-size: 12px; color: var(--grijs); border-top: 1px solid var(--lijn-licht); padding-top: 10px; } .vergelijk { border: 1px solid var(--lijn); } .vergelijk .titel { background: var(--vlak); padding: 20px 30px; border-bottom: 1px solid var(--lijn); } .vergelijk .titel h2 { font-size: 22px; } .vergelijk .rij { display: grid; grid-template-columns: 1.3fr 1fr 1fr; font-size: 14.5px; } .vergelijk .rij > div { padding: 15px 24px; border-bottom: 1px solid var(--lijn-licht); } .vergelijk .rij:last-child > div { border-bottom: 0; } .vergelijk .rij > div:nth-child(2), .vergelijk .rij > div:nth-child(3) { border-left: 1px solid var(--lijn-licht); } .vergelijk .rij > div:nth-child(3) { background: #FBFCFB; } .vergelijk .rij.koprij > div { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--grijs); font-weight: 600; } .vergelijk .rij.koprij > div:nth-child(3) { color: var(--groen-werk); } .vergelijk .label { font-weight: 500; padding-left: 30px !important; } .vergelijk .oud { color: var(--grijs); } .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; } .tier { border: 1px solid var(--lijn); display: flex; flex-direction: column; height: 100%; } .tier.uitgelicht { border: 2px solid var(--groen-werk); } .tier .vaan { background: var(--groen-werk); color: #fff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 8px 30px; } .tier .kop { padding: 28px 30px 24px; border-bottom: 1px solid var(--lijn); } .tier .naam { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); font-weight: 600; margin-bottom: 16px; } .tier .prijs { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .tier .prijs b { font-family: 'Source Serif 4', Georgia, serif; font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .tier .prijs span { font-size: 15px; color: var(--grijs); } .tier .kop p { font-size: 13.5px; line-height: 1.55; color: var(--grijs); margin: 0; } .tier .fees { padding: 22px 30px; border-bottom: 1px solid var(--lijn-licht); } .tier .fees .titel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); font-weight: 600; margin-bottom: 12px; } .tier .fees .regel { display: flex; justify-content: space-between; font-size: 14.5px; padding: 7px 0; } .tier .fees .regel b { font-variant-numeric: tabular-nums; } .tier .lijst { padding: 22px 30px; flex-grow: 1; display: flex; flex-direction: column; gap: 11px; } .tier .lijst div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; } .tier .lijst .uit { color: #A3B0AA; } .tier .actie { padding: 0 30px 30px; } .tier .actie .knop, .tier .actie .knop-rand { width: 100%; } .vink { flex-shrink: 0; margin-top: 3px; } .form-vlak { background: var(--vlak); } .form-grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; } .kaart { background: #fff; border: 1px solid var(--lijn); } .kaart-kop { padding: 32px 40px 26px; border-bottom: 1px solid var(--lijn); } .kaart-kop h1 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 12px; line-height: 1.16; } .kaart-kop p { font-size: 15px; line-height: 1.6; color: #2C3A34; margin: 0; } .stapblok { padding: 28px 40px 24px; border-bottom: 1px solid var(--lijn-licht); } .stapblok:last-of-type { border-bottom: 0; } .stapnr { background: var(--groen-werk); color: #fff; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .staptitel { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .staptitel span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); font-weight: 600; } label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; } label .opt { color: var(--grijs); font-weight: 400; } .req { color: var(--signaal); } input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea { width: 100%; border: 1px solid #C8D2CD; background: #fff; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--inkt); border-radius: 0; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--groen-werk); outline-offset: -1px; } .veld { margin-bottom: 18px; } .velden-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .velden-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; width: 0; height: 0; } .chip span { display: block; border: 1px solid #C8D2CD; background: #fff; padding: 10px 15px; font-size: 13.5px; cursor: pointer; user-select: none; } .chip input:checked + span { border: 1.5px solid var(--groen-werk); background: var(--groen-werk); color: #fff; font-weight: 500; } .chip input:focus-visible + span { outline: 2px solid var(--goud-donker); outline-offset: 2px; } .akkoord { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px; } .akkoord input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--groen-werk); flex-shrink: 0; } .akkoord label { font-size: 13.5px; line-height: 1.55; color: #2C3A34; font-weight: 400; margin: 0; } .zij { display: flex; flex-direction: column; gap: 20px; } .zij-donker { background: var(--groen-donker); color: #fff; padding: 26px 28px; } .zij-donker .titel { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: #9FC4B3; font-weight: 600; margin-bottom: 16px; } .zij-donker .items div { font-size: 14px; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.12); } .zij-donker .items div:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .zij-donker p { font-size: 13px; line-height: 1.6; color: #9FC4B3; margin: 16px 0 0; } .zij-kaart { background: #fff; border: 1px solid var(--lijn); padding: 24px 28px; } .zij-kaart .titel { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--grijs); font-weight: 600; margin-bottom: 16px; } .zij-kaart p { font-size: 13.5px; line-height: 1.65; color: #2C3A34; margin: 0; } .slot { background: var(--groen-donker); color: #fff; } .slot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 44px; padding-top: 52px; padding-bottom: 52px; flex-wrap: wrap; } .slot h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 12px; } .slot p { font-size: 15px; line-height: 1.6; color: #C5D3CC; margin: 0; max-width: 62ch; } .voet { background: var(--inkt); color: #8FA39A; font-size: 12.5px; } .voet .wrap { padding-top: 34px; padding-bottom: 34px; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .voet a { color: #8FA39A; text-decoration: none; } .voet a:hover { color: #fff; } .voet .links { display: flex; gap: 24px; flex-wrap: wrap; } .voet .adres { line-height: 1.75; } .voet img { height: 34px; width: auto; display: block; margin-bottom: 14px; } .inlog { min-height: 62vh; display: flex; align-items: center; justify-content: center; background: var(--vlak); } .inlog .kaart { width: 100%; max-width: 420px; padding: 40px; } .inlog h1 { font-size: 27px; margin-bottom: 10px; } .inlog p.uitleg { font-size: 14.5px; line-height: 1.6; color: var(--grijs); margin: 0 0 26px; } .melding { background: #FBF6EE; border: 1px solid var(--goud); padding: 16px 18px; font-size: 13.5px; line-height: 1.6; color: #2C3A34; margin-bottom: 22px; } @media (max-width: 980px) { .drie, .stappen, .tiers, .form-grid, .velden-3, .velden-2 { grid-template-columns: 1fr; } .stappen { gap: 28px; } .drie { gap: 34px; } .form-grid { gap: 28px; } .menu { display: none; } .nav .wrap { padding-top: 12px; padding-bottom: 12px; } .logo img { height: 38px; } .teaser-kop .rechts { text-align: left; } .vergelijk .rij { grid-template-columns: 1fr; } .vergelijk .rij > div:nth-child(2), .vergelijk .rij > div:nth-child(3) { border-left: 0; } .vergelijk .rij.koprij { display: none; } .vergelijk .label { padding-left: 24px !important; background: var(--vlak); } .slot .wrap { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .wrap { padding: 0 20px; } .tabel .rij { grid-template-columns: 1.6fr 1fr 1fr; font-size: 14px; padding: 14px 18px; } .tabel .rij .verberg-mob { display: none; } .tabel .kop { padding: 12px 18px; } .hero .wrap { padding-top: 52px; padding-bottom: 48px; } section .wrap { padding-top: 44px; padding-bottom: 44px; } .kaart-kop, .stapblok { padding-left: 24px; padding-right: 24px; } .inlog .kaart { padding: 28px 24px; } } .overslaan { position: absolute; left: -9999px; top: 0; background: var(--goud); color: var(--groen-donker); padding: 12px 20px; z-index: 100; font-weight: 600; } .overslaan:focus { left: 0; } .toets-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .kosten-tabel .rij { grid-template-columns: 2.4fr 1fr 2.2fr; } @media (max-width: 980px) { .toets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .klasse-grid { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { .toets-grid { grid-template-columns: 1fr; } .kosten-tabel .rij { grid-template-columns: 1.7fr 1fr !important; } .kosten-tabel .rij > div:nth-child(3) { display: none; } } .topbalk .talen { display: flex; gap: 18px; align-items: center; } .taalkies { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 400; color: #C5D3CC; } .taalkies:hover { color: #fff; } .taalkies .globe { flex-shrink: 0; opacity: .85; } .taalkies select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C5D3CC' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 0 center / 9px 5px; border: 0; color: #fff; font-family: inherit; font-size: 13px; font-weight: 500; padding: 2px 15px 2px 0; cursor: pointer; outline: 0; max-width: 190px; } .taalkies select:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; } .taalkies select option, .taalkies select optgroup { background: #fff; color: var(--inkt); } .taalkies select optgroup { font-weight: 600; } .topbalk .inlogje { font-size: 13px; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 640px) { .taalkies select { max-width: 128px; } }
 .keuze { background: var(--vlak); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); } .keuze-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .keuze-kaart { background: #fff; border: 1px solid var(--lijn); padding: 32px 34px 34px; display: flex; flex-direction: column; } .keuze-kaart:hover { border-color: var(--groen-werk); } .keuze-kaart .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-donker); font-weight: 600; margin-bottom: 14px; } .keuze-kaart h3 { font-size: 24px; margin-bottom: 12px; } .keuze-kaart p { font-size: 14.5px; line-height: 1.65; color: #2C3A34; margin: 0 0 22px; flex-grow: 1; } .keuze-kaart .knop, .keuze-kaart .knop-rand { align-self: flex-start; } .rol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .rol .kop { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--goud-donker); font-weight: 600; margin-bottom: 12px; } .rol h3 { font-size: 20px; margin-bottom: 12px; } .rol p { font-size: 14.5px; line-height: 1.65; color: #2C3A34; margin: 0; } .punten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 44px; } .punt h3 { font-size: 18px; font-family: inherit; font-weight: 600; margin-bottom: 10px; } .punt p { font-size: 14.5px; line-height: 1.65; color: #2C3A34; margin: 0; } .punt .streep { width: 32px; height: 2px; background: var(--goud); margin-bottom: 16px; } .trap { border-left: 2px solid var(--lijn); padding-left: 0; } .trap .stapje { position: relative; padding: 0 0 28px 30px; } .trap .stapje:last-child { padding-bottom: 0; } .trap .stapje::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; background: var(--goud); border: 2px solid #fff; } .trap .stapje h3 { font-size: 17px; font-family: inherit; font-weight: 600; margin-bottom: 8px; } .trap .stapje p { font-size: 14.5px; line-height: 1.65; color: #2C3A34; margin: 0; } @media (max-width: 980px) { .keuze-grid, .rol, .punten { grid-template-columns: 1fr; } .rol { gap: 30px; } .punten { gap: 28px; } } .hero .acties { gap: 18px; } .hero .acties .knop { min-width: 260px; } .menu a.knop { padding: 14px 52px; border-bottom: none; } .menu a.knop-goud { color: var(--groen-donker); } .menu a.knop-rand { padding: 12.5px 50.5px; border-bottom: 1.5px solid var(--groen-werk); } .nav .wrap { gap: 20px; } .menu { gap: 26px; }

/* ---- Lidmaatschapsniveaus (4 kolommen) ---- */
.niveaus { border: 1px solid var(--lijn); }
.niveaus .titel { background: var(--vlak); padding: 20px 30px; border-bottom: 1px solid var(--lijn); }
.niveaus .titel h2 { font-size: 22px; margin: 0 0 6px; }
.niveaus .titel p { font-size: 14.5px; color: var(--grijs); margin: 0; max-width: 70ch; }
.niveaus .rij { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr 1.25fr; font-size: 14.5px; }
.niveaus .rij > div { padding: 14px 20px; border-bottom: 1px solid var(--lijn-licht); }
.niveaus .rij:last-child > div { border-bottom: 0; }
.niveaus .rij > div:nth-child(2), .niveaus .rij > div:nth-child(3), .niveaus .rij > div:nth-child(4) { border-left: 1px solid var(--lijn-licht); }
.niveaus .rij > div.top { background: #FBFCFB; }
.niveaus .rij.koprij > div { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--grijs); font-weight: 600; background: var(--vlak); }
.niveaus .rij.koprij > div.top { color: var(--groen-werk); }
.niveaus .rij.prijsrij > div { font-weight: 600; font-size: 17px; }
.niveaus .label { font-weight: 500; padding-left: 30px !important; }
@media (max-width: 860px) {
  .niveaus .rij { grid-template-columns: 1fr; }
  .niveaus .rij > div { border-left: 0 !important; padding: 9px 20px; }
  .niveaus .rij > div:first-child { padding-top: 16px; font-weight: 600; background: var(--vlak); }
  .niveaus .rij.koprij { display: none; }
  .niveaus .rij > div[data-n]::before { content: attr(data-n) ": "; color: var(--grijs); font-weight: 500; }
}