/* ==========================================================================
   Groen Vlaanderen · merklaag (versie 2)
   Komt na site.css. Bevat het lettertype, de tokens en alle merkcomponenten.
   Kleuren: enkel petrol #00756F, zonnegeel #FFD23F, mint #E6F6F4 en hun tinten.
   ========================================================================== */

/* Nunito, zelf gehost (variabel lettertype, gewicht 200 tot 1000) */
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url('../fonts/nunito-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url('../fonts/nunito-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Merkkleuren */
  --petrol: #00756F;
  --zon: #FFD23F;
  --mint: #E6F6F4;
  /* Tinten van petrol */
  --petrol-600: #00655F;
  --petrol-700: #00524E;
  --petrol-800: #003F3C;
  --petrol-900: #002E2C;
  --petrol-300: #7FBAB7;
  --petrol-100: #CCE6E4;
  --mint-2: #D3EEEA;
  /* Tint van zonnegeel, enkel voor kleine lichte vlakken */
  --zon-50: #FFF8DE;
  --zon-600: #F2C21C;
  /* Tekst */
  --tekst: #10302E;
  --tekst-2: #2E4B49;
  --tekst-3: #4E6866;
  --lijn: #DDEDEA;
  /* Typografie */
  --font: 'Nunito', ui-rounded, system-ui, sans-serif;
  --fw-titel: 900;
  --fw-tussen: 800;
  --fw-label: 800;
  --fw-tekst: 500;
  --h1: clamp(2.75rem, 6.6vw, 5.75rem);
  --h2: clamp(2.125rem, 4.4vw, 3.75rem);
  --h3: clamp(1.375rem, 2vw, 1.75rem);
  /* Vorm */
  --r-s: 14px; --r-m: 22px; --r-l: 32px; --r-xl: 44px;
  --boog: 999px 999px var(--r-l) var(--r-l);
  --schaduw-1: 0 1px 2px rgba(0, 46, 44, .06), 0 8px 24px rgba(0, 46, 44, .08);
  --schaduw-2: 0 2px 6px rgba(0, 46, 44, .08), 0 24px 60px rgba(0, 46, 44, .16);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); font-weight: var(--fw-tekst); color: var(--tekst); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--font); }
img { max-width: 100%; display: block; }
::selection { background: var(--zon); color: var(--petrol-900); }

/* ---------- Header ---------- */
.topbar { background: var(--petrol-900); }
.topbar .wrap { font-size: 0.8438rem; }
.topbar .zonnetje { display: inline-flex; align-items: center; gap: 8px; }
.topbar .zonnetje img { width: 16px; height: 16px; }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-header.is-gescrold { border-bottom-color: var(--lijn); box-shadow: 0 6px 24px rgba(0, 46, 44, .06); }
.site-header .wrap { padding-top: 14px; padding-bottom: 14px; }
.merk { display: inline-flex; align-items: center; line-height: 0; }
.merk img { height: 34px; width: auto; }
.hoofdmenu { font-weight: 800; }
.hoofdmenu > a, .menu-knop { position: relative; }
.hoofdmenu > a:not(.menu-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--zon); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.hoofdmenu > a:not(.menu-cta):hover::after { transform: scaleX(1); }
.hoofdmenu > a[aria-current="page"] { box-shadow: none; }
.hoofdmenu > a[aria-current="page"]::after { transform: scaleX(1); }
.menu-cta { box-shadow: 0 6px 18px rgba(255, 210, 63, .45); transition: transform .2s var(--ease), box-shadow .2s; }
.menu-cta:hover { transform: translateY(-1px); background: var(--zon-600) !important; }

/* ---------- Bouwstenen ---------- */
.wrap { max-width: 1280px; }
.oog { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); }
.oog::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--zon); box-shadow: 0 0 0 4px rgba(255, 210, 63, .28); }
.donker .oog { color: var(--zon); }
.titel-1 { margin: 0; font-size: var(--h1); font-weight: var(--fw-titel); line-height: .98; letter-spacing: -0.035em; color: var(--petrol-800); text-wrap: balance; }
.titel-2 { margin: 0; font-size: var(--h2); font-weight: var(--fw-titel); line-height: 1.02; letter-spacing: -0.03em; color: var(--petrol-800); text-wrap: balance; }
.titel-3 { margin: 0; font-size: var(--h3); font-weight: var(--fw-titel); line-height: 1.15; letter-spacing: -0.01em; color: var(--petrol-800); }
.donker .titel-1, .donker .titel-2, .donker .titel-3 { color: #FFFFFF; }
.lead { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.6; color: var(--tekst-2); max-width: 600px; }
.donker .lead { color: #CDE7E4; }
.tekst { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--tekst-2); }
.donker .tekst { color: #CDE7E4; }
.donker { color: #FFFFFF; }

/* De lach als onderstreping: het merkmotief onder een kernwoord */
.lach { position: relative; white-space: nowrap; display: inline-block; z-index: 0; }
.lach::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.16em; height: .34em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M6 8 Q100 40 194 6' fill='none' stroke='%23FFD23F' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left; animation: lachTeken 1s .45s var(--ease) both; }
@keyframes lachTeken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.markeer { background: linear-gradient(transparent 58%, rgba(255, 210, 63, .7) 58%, rgba(255, 210, 63, .7) 92%, transparent 92%); padding: 0 .08em; }
.donker .markeer { background: none; color: var(--zon); }

.knop { font-weight: 900; padding: 18px 30px; letter-spacing: .005em; transition: background .2s, transform .2s var(--ease), box-shadow .2s; }
.knop:hover { transform: translateY(-2px); }
.knop .pijl { transition: transform .2s var(--ease); }
.knop:hover .pijl { transform: translateX(4px); }
.knop.geel { box-shadow: 0 10px 26px rgba(255, 210, 63, .42); }
.knop.wit { background: #FFFFFF; border-color: #FFFFFF; color: var(--petrol-800); }
.knop.wit:hover { background: var(--mint); border-color: var(--mint); color: var(--petrol-900); }
.knop.lijn-wit { background: transparent; border-color: rgba(255, 255, 255, .5); color: #FFFFFF; }
.knop.lijn-wit:hover { background: rgba(255, 255, 255, .1); border-color: #FFFFFF; color: #FFFFFF; }
.acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.vlak { position: relative; overflow: hidden; }
.vlak.mint { background: var(--mint); }
.vlak.petrol { background: var(--petrol); }
.vlak.diep { background: var(--petrol-800); }
.vlak.nacht { background: var(--petrol-900); }
.ruimte { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
.kop-blok { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.kop-rij { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* Plaatshouder voor nog aan te vullen gegevens (enkel zichtbaar in de preview) */
.aanvullen { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--zon-50); color: var(--petrol-700); border: 1px dashed var(--zon-600); font-size: .82em; font-weight: 800; white-space: nowrap; vertical-align: middle; }
.donker .aanvullen { background: rgba(255, 210, 63, .14); color: var(--zon); border-color: rgba(255, 210, 63, .6); }

/* ---------- Foto's ---------- */
.foto { position: relative; overflow: hidden; background: var(--petrol-100); isolation: isolate; }
.foto picture, .foto img { width: 100%; height: 100%; object-fit: cover; }
.foto.boog { border-radius: var(--boog); }
.foto.rond { border-radius: var(--r-l); }
.foto.cirkel { border-radius: 50%; aspect-ratio: 1; }
/* Merkpaneel wanneer een foto nog ontbreekt */
.foto.paneel { background: radial-gradient(120% 90% at 80% 10%, var(--petrol) 0%, var(--petrol-700) 45%, var(--petrol-900) 100%); display: flex; align-items: flex-end; }
.foto.paneel .paneel-zon { position: absolute; width: 68%; max-width: 420px; right: -14%; top: -12%; opacity: .95; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .25)); }
.foto.paneel .paneel-lijnen { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .05) 0 1px, transparent 1px 34px); }
.foto.paneel .paneel-label { position: relative; margin: 20px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 46, 44, .55); backdrop-filter: blur(6px); color: #FFFFFF; font-size: 0.8125rem; font-weight: 800; line-height: 1.4; max-width: 300px; }
.foto.paneel .paneel-label b { display: block; color: var(--zon); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }

/* ---------- Hero homepage ---------- */
.hero { background: var(--mint); overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .7), transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero-tekst { display: flex; flex-direction: column; gap: 28px; position: relative; z-index: 2; }
.hero-beeld { position: relative; z-index: 1; aspect-ratio: 4 / 4.6; }
.hero-zon { position: absolute; width: 112%; right: -38%; top: -26%; z-index: 0; animation: zonOp 1.6s .1s var(--ease) both; will-change: transform; }
.hero-zon img { width: 100%; height: auto; }
@keyframes zonOp { from { transform: translateY(40%) scale(.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.hero-beeld .foto { position: absolute; inset: 0; z-index: 1; box-shadow: var(--schaduw-2); }
.zweef { position: absolute; z-index: 3; background: #FFFFFF; border-radius: 20px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--schaduw-2); animation: zweef 6s ease-in-out infinite; }
.zweef img { width: 40px; height: 40px; flex: none; }
.zweef strong { display: block; font-size: 0.9375rem; font-weight: 900; color: var(--petrol-800); }
.zweef small { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--tekst-3); }
.zweef.links { left: -8%; bottom: 12%; }
.zweef.rechts { right: -4%; top: 14%; animation-delay: -3s; }
@keyframes zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-bewijs { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.9375rem; font-weight: 800; color: var(--tekst-2); }
.hero-bewijs span { display: inline-flex; align-items: center; gap: 8px; }
.hero-bewijs svg { flex: none; }

/* Zoekbalk onder de hero */
.kiezer { position: relative; z-index: 4; margin-top: -40px; }
.kiezer .binnen { background: #FFFFFF; border-radius: var(--r-l); padding: 18px; box-shadow: var(--schaduw-2); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kiezer .vraag { font-size: 1.0625rem; font-weight: 900; color: var(--petrol-800); padding: 0 14px 0 8px; }
.kiezer a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 800; color: var(--petrol-800); background: var(--mint); padding: 11px 16px; border-radius: 999px; transition: background .2s, transform .2s var(--ease); }
.kiezer a:hover { background: var(--zon); transform: translateY(-2px); color: var(--petrol-900); }
.kiezer a.zakelijk { background: var(--petrol-800); color: #FFFFFF; margin-left: auto; }
.kiezer a.zakelijk:hover { background: var(--petrol-900); color: var(--zon); }

/* ---------- Lichtkrant ---------- */
.lichtkrant { background: var(--petrol); color: #FFFFFF; overflow: hidden; padding: 26px 0; }
.lichtkrant .band { display: flex; width: max-content; animation: krant 38s linear infinite; }
.lichtkrant .reeks { display: flex; align-items: center; gap: 36px; padding-right: 36px; font-size: clamp(1.75rem, 3.4vw, 2.875rem); font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.lichtkrant img { width: .9em; height: .9em; }
.lichtkrant .slogan { color: var(--zon); }
@keyframes krant { to { transform: translateX(-50%); } }

/* ---------- Pijlers ---------- */
.pijlers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pijler { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; text-decoration: none; color: inherit; background: var(--mint); transition: transform .35s var(--ease), box-shadow .35s; }
.pijler:hover { transform: translateY(-6px); box-shadow: var(--schaduw-2); }
.pijler .foto { aspect-ratio: 4 / 3.3; border-radius: 0; }
.pijler .foto img { transition: transform .8s var(--ease); }
.pijler:hover .foto img { transform: scale(1.05); }
.pijler .inhoud { padding: 30px 30px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pijler .nummer { font-size: 0.8125rem; font-weight: 900; letter-spacing: .14em; color: var(--tekst-3); }
.pijler h3 { margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; color: var(--petrol-800); }
.pijler p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--tekst-2); }
.pijler ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pijler li { font-size: 0.875rem; font-weight: 800; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--petrol-800); }
.pijler .verder { margin-top: auto; padding-top: 10px; font-size: 1rem; font-weight: 900; color: var(--petrol); display: inline-flex; align-items: center; gap: 8px; }
.pijler .badge-zon { position: absolute; top: 18px; left: 18px; z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: var(--schaduw-1); }
.pijler.geel { background: var(--zon-50); }
.pijler.diep { background: var(--petrol-800); }
.pijler.diep h3 { color: #FFFFFF; }
.pijler.diep p { color: #CDE7E4; }
.pijler.diep .nummer { color: var(--petrol-300); }
.pijler.diep li { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.pijler.diep .verder { color: var(--zon); }

/* ---------- Calculators ---------- */
.rekenen .grote-zon { position: absolute; width: min(720px, 80vw); left: -16%; bottom: -46%; opacity: .1; pointer-events: none; }
.calcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.calc { position: relative; background: #FFFFFF; border-radius: var(--r-l); padding: 34px; display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; transition: transform .35s var(--ease), box-shadow .35s; overflow: hidden; }
.calc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.calc .index { font-size: 4rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--zon); -webkit-text-stroke: 0; }
.calc .ico { width: 60px; height: 60px; border-radius: 20px; background: var(--mint); display: flex; align-items: center; justify-content: center; position: absolute; right: 30px; top: 30px; transition: transform .4s var(--ease), background .3s; }
.calc:hover .ico { transform: rotate(-8deg) scale(1.06); background: var(--zon); }
.calc h3 { margin: 0; font-size: 1.625rem; font-weight: 900; color: var(--petrol-800); }
.calc p { margin: 0; font-size: 1.0313rem; line-height: 1.6; color: var(--tekst-2); }
.calc .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.calc .meta span { font-size: 0.8125rem; font-weight: 800; color: var(--petrol-700); background: var(--mint); padding: 6px 11px; border-radius: 999px; }
.calc .doe { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 900; color: var(--petrol); }
.calc .doe .cirkel { width: 40px; height: 40px; border-radius: 50%; background: var(--petrol); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .3s var(--ease); }
.calc:hover .doe .cirkel { background: var(--zon); transform: translateX(4px); }
.calc:hover .doe .cirkel svg { stroke: var(--petrol-900); }

/* ---------- Overtuiging ---------- */
.geloof { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.geloof .foto { aspect-ratio: 4 / 5; }
.geloof .stelling { margin: 0; font-size: clamp(1.875rem, 3.6vw, 3.125rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.025em; color: var(--petrol-800); text-wrap: pretty; }
.geloof .stelling .zacht { color: var(--petrol-300); }
.beloftes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; margin-top: 8px; }
.belofte { display: flex; gap: 16px; align-items: flex-start; }
.belofte .bol { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--zon); display: flex; align-items: center; justify-content: center; }
.belofte strong { display: block; font-size: 1.125rem; font-weight: 900; color: var(--petrol-800); margin-bottom: 4px; }
.belofte span { font-size: 0.9688rem; line-height: 1.55; color: var(--tekst-2); }
.geloof-beeld { position: relative; }
.geloof-beeld .stempel { position: absolute; right: -28px; bottom: 40px; width: 132px; height: 132px; border-radius: 50%; background: var(--petrol-800); display: flex; align-items: center; justify-content: center; box-shadow: var(--schaduw-2); }
.geloof-beeld .stempel svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: draai 24s linear infinite; }
.geloof-beeld .stempel img { width: 52px; height: 52px; }
@keyframes draai { to { transform: rotate(360deg); } }

/* ---------- Zonsopgang: zo werken we ---------- */
.opgang { position: relative; }
.opgang-boog { position: absolute; left: 4%; right: 4%; top: 0; height: 150px; pointer-events: none; }
.opgang-stappen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.stap { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: var(--hoogte, 120px); }
.stap .zonbol { position: absolute; top: calc(var(--hoogte, 120px) - 82px); left: 0; width: var(--maat, 44px); height: var(--maat, 44px); }
.stap .zonbol img { width: 100%; height: 100%; }
.stap .nr { font-size: 0.8125rem; font-weight: 900; letter-spacing: .14em; color: var(--petrol); }
.stap h3 { margin: 0; font-size: 1.4375rem; font-weight: 900; color: var(--petrol-800); }
.stap p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tekst-2); }
.stap .kaart { background: #FFFFFF; border-radius: var(--r-m); padding: 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--schaduw-1); }
.stap:nth-child(1) { --hoogte: 150px; --maat: 40px; }
.stap:nth-child(2) { --hoogte: 112px; --maat: 50px; }
.stap:nth-child(3) { --hoogte: 84px; --maat: 60px; }
.stap:nth-child(4) { --hoogte: 64px; --maat: 72px; }
.stap:nth-child(4) .zonbol { top: calc(var(--hoogte) - 96px); }

/* ---------- Zakelijk ---------- */
.zakelijk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.zakelijk-grid .foto { aspect-ratio: 5 / 4.4; }
.sectoren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sector { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-m); padding: 20px; display: flex; flex-direction: column; gap: 6px; transition: background .25s, border-color .25s; }
.sector:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 210, 63, .5); }
.sector strong { font-size: 1.125rem; font-weight: 900; color: #FFFFFF; }
.sector span { font-size: 0.9375rem; color: #CDE7E4; line-height: 1.5; }

/* ---------- Werf / realisaties ---------- */
.werf { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 16px; }
.werf figure:first-child { grid-row: span 2; }
.werf .foto { border-radius: var(--r-l); height: 100%; }
.werf figure:last-child { grid-column: span 2; }
.werf figure { margin: 0; position: relative; }
.werf-noot { margin: -16px 0 0; font-size: 0.875rem; color: var(--tekst-3, #4E6866); }
.werf figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(255, 255, 255, .92); color: var(--petrol-800); font-size: 0.8125rem; font-weight: 900; padding: 8px 12px; border-radius: 999px; }
.werf.spiegel { grid-template-columns: 1fr 1fr 1fr 1.3fr; }
.werf.spiegel figure:first-child { grid-column: 4; grid-row: 1 / span 2; }
.reviews { margin-top: 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; background: var(--zon-50); border-radius: var(--r-l); padding: 28px 32px; }
.reviews .sterren { display: flex; gap: 4px; }
.reviews strong { display: block; font-size: 1.375rem; font-weight: 900; color: var(--petrol-800); }
.reviews span { font-size: 1rem; color: var(--tekst-2); }

/* ---------- Offerte ---------- */
.offerte-vlak { background: var(--petrol); position: relative; overflow: hidden; }
.offerte-vlak .opkomende-zon { position: absolute; width: min(900px, 110vw); left: -18%; bottom: -62%; opacity: 1; pointer-events: none; }
.offerte-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contactregel { display: flex; align-items: center; gap: 14px; }
.contactregel .bol { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; flex: none; }
.contactregel small { display: block; font-size: 0.875rem; color: #CDE7E4; font-weight: 700; }
.contactregel strong { display: block; font-size: 1.375rem; font-weight: 900; color: #FFFFFF; }
.offerte-vlak [data-algemeen-formulier] > * { box-shadow: 0 40px 80px rgba(0, 0, 0, .25); }

/* ---------- Paginakop (dienst- en domeinpagina's) ---------- */
.pkop { background: var(--mint); position: relative; overflow: hidden; }
.pkop .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(56px, 6vw, 96px); }
.pkop .kop-tekst { display: flex; flex-direction: column; gap: 22px; z-index: 2; }
.pkop .kop-beeld { position: relative; aspect-ratio: 1 / 1.02; }
.pkop .kop-beeld .foto { position: absolute; inset: 0; box-shadow: var(--schaduw-2); z-index: 1; }
.pkop .kop-zon { position: absolute; width: 74%; right: -22%; top: -18%; z-index: 0; animation: zonOp 1.4s var(--ease) both; }
.pkop .kop-beeld .preview { position: absolute; left: -12%; bottom: -8%; width: min(400px, 84%); z-index: 3; padding: 26px; gap: 14px; border-radius: 26px; box-shadow: var(--schaduw-2); }
.pkop .kop-beeld .preview h2 { font-size: 1.375rem; }
.pkop .kop-beeld .preview .keuze { padding: 12px 14px; }
.pkop h1 { margin: 0; font-size: clamp(2.5rem, 5.4vw, 4.625rem); font-weight: 900; line-height: 1; letter-spacing: -0.035em; color: var(--petrol-800); text-wrap: balance; }
.pkop.diep { background: var(--petrol-800); }
.pkop.diep h1 { color: #FFFFFF; }
.pkop.diep .lead { color: #CDE7E4; }
.pkop.diep .kruimel, .pkop.diep .kruimel a { color: #CDE7E4; }
.pkop.simpel .wrap { grid-template-columns: 1fr; }
.kruimel a { color: var(--tekst-3); text-decoration: none; }
.kruimel a:hover { color: var(--petrol); text-decoration: underline; }

/* Kaarten met icoon */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.kaart-i { background: #FFFFFF; border: 1px solid var(--lijn); border-radius: var(--r-l); padding: 30px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.kaart-i:hover { transform: translateY(-4px); box-shadow: var(--schaduw-1); border-color: transparent; }
.kaart-i .bol { width: 52px; height: 52px; border-radius: 16px; background: var(--mint); display: flex; align-items: center; justify-content: center; }
.kaart-i:nth-child(2) .bol { background: var(--zon-50); }
.kaart-i:nth-child(3) .bol { background: var(--petrol-100); }
.kaart-i h3 { margin: 0; font-size: 1.3125rem; font-weight: 900; line-height: 1.25; color: var(--petrol-800); }
.kaart-i p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tekst-2); }
.mint .kaart-i { border-color: transparent; }

/* Vakmanschap: foto + checklist */
.vak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.vak .foto { aspect-ratio: 4 / 4.4; }
.vak.omgekeerd .vak-beeld { order: 2; }
.checklijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklijst li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--lijn); font-size: 1.0625rem; line-height: 1.5; color: var(--tekst-2); }
.checklijst li:last-child { border-bottom: 0; }
.checklijst li strong { display: block; color: var(--petrol-800); font-weight: 900; font-size: 1.125rem; margin-bottom: 2px; }
.checklijst .v { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--zon); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.donker .checklijst li { border-color: rgba(255, 255, 255, .12); color: #CDE7E4; }
.donker .checklijst li strong { color: #FFFFFF; }

/* Diensten-tegels op domeinpagina's */
.diensten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.dienst { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: var(--r-l); overflow: hidden; background: #FFFFFF; box-shadow: var(--schaduw-1); transition: transform .35s var(--ease), box-shadow .35s; }
.dienst:hover { transform: translateY(-6px); box-shadow: var(--schaduw-2); }
.dienst .foto { aspect-ratio: 16 / 11; }
.dienst .foto img { transition: transform .8s var(--ease); }
.dienst:hover .foto img { transform: scale(1.05); }
.dienst .inhoud { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dienst h3 { margin: 0; font-size: 1.4375rem; font-weight: 900; color: var(--petrol-800); }
.dienst p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--tekst-2); }
.dienst .verder { margin-top: auto; padding-top: 6px; font-weight: 900; color: var(--petrol); display: inline-flex; align-items: center; gap: 8px; }
.dienst .calc-tag { align-self: flex-start; font-size: 0.75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: var(--zon); color: var(--petrol-900); padding: 5px 10px; border-radius: 999px; }

/* Afsluitende band */
.slotband { position: relative; overflow: hidden; background: var(--petrol-800); border-radius: var(--r-xl); padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.slotband .slot-zon { position: absolute; width: 360px; right: -80px; top: -120px; opacity: .95; }
.slotband > * { position: relative; }
.slotband h2 { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.875rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; color: #FFFFFF; max-width: 640px; }
.slotband p { margin: 10px 0 0; font-size: 1.0625rem; color: #CDE7E4; max-width: 560px; line-height: 1.6; }

/* FAQ */
.faq details { border-radius: var(--r-m); border-color: var(--lijn); transition: box-shadow .25s, border-color .25s; }
.faq details[open] { box-shadow: var(--schaduw-1); border-color: transparent; }
.faq summary { color: var(--petrol-800); }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300756F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease), background-color .3s; }
.faq details[open] summary::after { content: ""; transform: rotate(45deg); background-color: var(--zon); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

/* Calculatorpagina's */
.paginakop { background: var(--mint); position: relative; overflow: hidden; }
.paginakop h1 { font-size: clamp(2.375rem, 5vw, 4.125rem); letter-spacing: -0.035em; line-height: 1.02; color: var(--petrol-800); }
.paginakop .pk-zon { position: absolute; width: 420px; right: -110px; top: -150px; opacity: .9; pointer-events: none; }
.calc-zone { background: linear-gradient(var(--mint) 0 120px, #FFFFFF 120px); }
.uitlegkaart { border-radius: var(--r-m); }
.terug { background: var(--zon-50); border-radius: var(--r-l); }

/* Team en waarden */
.waarden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.waarde { border-radius: var(--r-l); padding: 30px; background: var(--mint); display: flex; flex-direction: column; gap: 10px; }
.waarde:nth-child(2) { background: var(--zon-50); }
.waarde:nth-child(3) { background: var(--petrol-800); }
.waarde:nth-child(3) h3 { color: #FFFFFF; }
.waarde:nth-child(3) p { color: #CDE7E4; }
.waarde h3 { margin: 0; font-size: 1.375rem; font-weight: 900; color: var(--petrol-800); }
.waarde p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tekst-2); }

/* Contactpagina */
.contactkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.contactkaart { background: #FFFFFF; border-radius: var(--r-m); padding: 24px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--schaduw-1); text-decoration: none; }
.contactkaart small { font-size: 0.8125rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3); }
.contactkaart strong { font-size: 1.25rem; font-weight: 900; color: var(--petrol-800); }
.contactkaart span { font-size: 0.9375rem; color: var(--tekst-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--petrol-900); position: relative; overflow: hidden; }
.site-footer .voet-zon { position: absolute; width: 560px; right: -160px; bottom: -220px; opacity: .07; pointer-events: none; }
.site-footer .voet-cta { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer .voet-cta .wrap { padding-top: 64px; padding-bottom: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer .voet-cta h2 { margin: 0; font-size: clamp(1.875rem, 3.6vw, 3.125rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; color: #FFFFFF; }
.site-footer .voet-cta h2 span { color: var(--zon); }
.site-footer .kolommen { position: relative; }
.site-footer .voet-logo { height: 76px; width: auto; }
.site-footer .slogan { font-size: 1.0625rem; font-weight: 900; color: var(--zon); }
.site-footer .kop { color: #FFFFFF; font-weight: 900; }
.site-footer a { transition: color .2s; }
.site-footer a:hover { color: var(--zon); }

/* ---------- Scrolleffecten ---------- */
.js .opkomst { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--vertraging, 0s); }
.js .opkomst.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .opkomst { opacity: 1; transform: none; }
  .lichtkrant .band { animation: none; }
}

/* ---------- Responsief ---------- */
@media (max-width: 1100px) {
  .hero .wrap, .pkop .wrap { grid-template-columns: 1fr; }
  .hero-beeld { max-width: 560px; width: 100%; margin: 24px auto 0; }
  .pkop .kop-beeld { max-width: 560px; width: 100%; margin: 12px auto 40px; }
  .pkop .kop-beeld .preview { left: 50%; transform: translateX(-50%); bottom: -40px; width: min(400px, 94%); }
  .pijlers, .calcs { grid-template-columns: 1fr; }
  .pijler { display: grid; grid-template-columns: 42% 1fr; }
  .pijler .foto { aspect-ratio: auto; height: 100%; min-height: 260px; }
  .geloof, .zakelijk-grid, .vak, .offerte-grid, .faq-grid { grid-template-columns: 1fr; }
  .vak.omgekeerd .vak-beeld { order: 0; }
  .geloof .foto { aspect-ratio: 4 / 3.4; }
  .opgang-boog { display: none; }
  .opgang-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stap { padding-top: 0; }
  .stap .zonbol { position: static; width: 48px; height: 48px; }
  .werf { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 200px 200px 220px; }
  .werf figure:first-child { grid-row: auto; grid-column: span 2; } .werf figure:last-child { grid-column: span 2; }
  .werf.spiegel { grid-template-columns: 1fr 1fr; } .werf.spiegel figure:first-child { grid-column: span 2; grid-row: auto; }
  .kiezer a.zakelijk { margin-left: 0; }
  .merk img { height: 30px; }
}
@media (max-width: 680px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hero .wrap { padding-top: 32px; gap: 8px; }
  .hero-tekst { gap: 22px; }
  .hero-zon { width: 100%; right: -30%; top: -18%; }
  .zweef { padding: 10px 12px; border-radius: 16px; }
  .zweef img { width: 30px; height: 30px; }
  .zweef strong { font-size: 0.8438rem; }
  .zweef small { font-size: 0.75rem; }
  .zweef.links { left: -2%; bottom: 6%; }
  .zweef.rechts { right: -2%; top: 8%; }
  .kiezer { margin-top: -28px; }
  .kiezer .binnen { padding: 14px; border-radius: 24px; gap: 8px; }
  .kiezer .vraag { width: 100%; padding: 4px 6px 6px; }
  .kiezer a { padding: 9px 13px; font-size: 0.875rem; }
  .pijler { display: flex; }
  .pijler .foto { aspect-ratio: 4 / 3; min-height: 0; }
  .pijler .inhoud { padding: 24px; }
  .beloftes { grid-template-columns: 1fr; }
  .geloof-beeld .stempel { right: 12px; bottom: -36px; width: 108px; height: 108px; }
  .opgang-stappen { grid-template-columns: 1fr; }
  .werf { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
  .werf figure:first-child, .werf figure:last-child { grid-column: auto; }
  .werf.spiegel { grid-template-columns: 1fr; } .werf.spiegel figure:first-child { grid-column: auto; }
  .reviews { grid-template-columns: 1fr; padding: 24px; }
  .slotband { grid-template-columns: 1fr; border-radius: var(--r-l); }
  .slotband .slot-zon { width: 220px; right: -70px; top: -80px; }
  .sectoren { grid-template-columns: 1fr; }
  .calc { padding: 28px; }
  .lichtkrant { padding: 18px 0; }
  .pkop .kop-beeld .preview { position: relative; left: auto; transform: none; bottom: auto; width: 100%; margin-top: -60px; }
  .pkop .kop-beeld { aspect-ratio: auto; }
  .pkop .kop-beeld .foto { position: relative; inset: auto; aspect-ratio: 1 / .9; }
  .site-footer .voet-logo { height: 64px; }
  .knop { padding: 16px 24px; }
  .acties .knop { flex: 1 1 auto; }
}

/* ---------- Held: aanspreekpunt in de zon ---------- */
.held { aspect-ratio: auto !important; height: clamp(460px, 46vw, 660px); align-self: end; margin-bottom: calc(-1 * clamp(56px, 7vw, 104px)); }
.pkop .held { height: clamp(420px, 40vw, 580px); margin-bottom: calc(-1 * clamp(56px, 6vw, 96px)); }
.held-zon { position: absolute; left: 50%; bottom: 7%; width: min(84%, 540px); aspect-ratio: 1; transform: translateX(-50%); z-index: 0; }
.held-zon .schijf { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFD23F 0 58%, #F2C21C 100%); box-shadow: 0 40px 90px rgba(242, 194, 28, .38); animation: zonOp 1.5s .05s var(--ease) both; }
.held-zon .ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(0, 117, 111, .28); animation: draai 90s linear infinite; }
.held-zon .r1 { inset: -9%; }
.held-zon .r2 { inset: -21%; border-style: solid; border-color: rgba(0, 117, 111, .12); }
.held-zon .r3 { inset: -34%; border-color: rgba(0, 117, 111, .14); animation-direction: reverse; animation-duration: 140s; }
.held-persoon { position: absolute; left: 50%; bottom: 0; width: min(104%, 600px); transform: translateX(-50%); z-index: 2; animation: persoonIn 1.2s .25s var(--ease) both; }
.held-persoon img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 46, 44, .18)); }
@keyframes persoonIn { from { opacity: 0; transform: translate(-50%, 6%); } to { opacity: 1; transform: translate(-50%, 0); } }
.held .zweef { z-index: 3; }
.held .zweef.rechts { top: 18%; right: -2%; }
.held .zweef.links { bottom: 22%; left: -6%; }
.zweef-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--mint); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hero .hero-tekst { padding-bottom: 24px; }
.kiezer { margin-top: -44px; }

@media (max-width: 1100px) {
  .held { height: clamp(380px, 92vw, 560px); width: 100%; max-width: 560px; margin: 8px auto calc(-1 * clamp(56px, 7vw, 104px)); }
  .pkop .held { margin: 8px auto calc(-1 * clamp(56px, 6vw, 96px)); }
  .held .zweef.links { left: 0; bottom: 16%; }
  .held .zweef.rechts { right: 0; top: 10%; }
}
@media (max-width: 680px) {
  .held { height: 400px; }
  .held-zon { width: 82%; bottom: 10%; }
  .held .zweef.links { bottom: 20%; }
}
/* Hero met foto (versie 2b) */
@media (min-width: 1101px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
.hero-beeld { aspect-ratio: 1.12 / 1; }
.hero-beeld .foto.boog { border-radius: 400px 400px var(--r-l) var(--r-l); }
.hero-zon { width: 62%; right: -16%; top: -20%; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px #FFD23F; }
.pkop .zweef.links { left: -6%; bottom: 10%; }
.pkop .zweef.rechts { right: -4%; top: 12%; }
@media (max-width: 1100px) { .hero-beeld { max-width: 680px; } .pkop .zweef.links { left: 2%; } .pkop .zweef.rechts { right: 2%; } }
@media (max-width: 680px) { .hero-beeld .foto.boog { border-radius: 220px 220px var(--r-l) var(--r-l); } .avatar { width: 36px; height: 36px; } }
/* Zon onderaan rechts, zodat de lach zichtbaar blijft */
.hero-zon { top: auto; bottom: -12%; right: -12%; width: 46%; }
.pkop .kop-zon { top: auto; bottom: -10%; right: -12%; width: 50%; }
@media (max-width: 680px) { .hero-zon, .pkop .kop-zon { width: 44%; right: -6%; bottom: -8%; } }
/* Zon als merkstempel vóór de foto */
.hero-zon, .pkop .kop-zon { z-index: 2; width: 30%; max-width: 190px; bottom: -7%; right: -5%; filter: drop-shadow(0 18px 30px rgba(0, 46, 44, .25)); }
.pkop .kop-beeld .preview { z-index: 4; }
@media (max-width: 680px) { .hero-zon, .pkop .kop-zon { width: 28%; right: -2%; bottom: -6%; } .hero-beeld { margin-top: 36px; } }

/* ---------- Hero versie 3: Slimme plannen. Groen geregeld. ---------- */
.hero-titel { font-size: clamp(2.875rem, 6.2vw, 5.75rem); line-height: 1; }
.hero-titel .lach::after { bottom: -0.12em; }
.hero-v3 { position: relative; aspect-ratio: 1.3 / 1; }
.hero-v3 .foto.hero-kader { position: absolute; inset: 0; border-radius: 140px 28px 28px 28px; box-shadow: var(--schaduw-2); z-index: 1; }
.hero-v3 .foto.hero-kader img { transform: scale(1.03); }
.hero-zon-groot { position: absolute; z-index: 3; width: 34%; max-width: 230px; height: auto; right: -7%; bottom: -12%; filter: drop-shadow(0 20px 34px rgba(0, 46, 44, .28)); animation: zonOp 1.4s .2s var(--ease) both; }
.vertrouw { position: absolute; z-index: 3; left: -6%; bottom: -9%; display: flex; align-items: center; gap: 14px; background: #FFFFFF; border-radius: 22px; padding: 16px 22px 16px 16px; box-shadow: var(--schaduw-2); }
.vertrouw img { width: 44px; height: 44px; flex: none; }
.vertrouw p { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 600; color: var(--petrol-800); }
.vertrouw strong { font-weight: 900; }
.hero .wrap { padding-bottom: clamp(80px, 9vw, 128px); }
@media (max-width: 1100px) {
  .hero-v3 { max-width: 680px; width: 100%; margin: 20px auto 40px; }
  .vertrouw { left: 3%; }
  .hero-zon-groot { right: -2%; }
}
@media (max-width: 680px) {
  .hero-v3 .foto.hero-kader { border-radius: 72px 20px 20px 20px; }
  .hero-zon-groot { width: 30%; right: -1%; bottom: -10%; }
  .vertrouw { left: 2%; bottom: -12%; padding: 10px 14px 10px 10px; gap: 10px; border-radius: 16px; }
  .vertrouw img { width: 32px; height: 32px; }
  .vertrouw p { font-size: 0.8438rem; }
}
.hero-titel { font-size: clamp(2.5rem, 5.3vw, 5rem); white-space: nowrap; }
@media (min-width: 1101px) { .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
@media (max-width: 420px) { .hero-titel { font-size: clamp(2.125rem, 10.4vw, 2.75rem); } }

/* Juridische pagina's */
.juridisch { max-width: 820px; }
.juridisch h2 { margin: 44px 0 14px; font-size: 1.625rem; font-weight: 900; letter-spacing: -0.01em; color: var(--petrol-800); }
.juridisch h2:first-child { margin-top: 0; }
.juridisch p, .juridisch li { font-size: 1.0625rem; line-height: 1.7; color: var(--tekst-2); }
.juridisch p { margin: 0 0 14px; }
.juridisch ul { margin: 0 0 14px; padding-left: 22px; }
.juridisch li { margin-bottom: 8px; }
.juridisch li::marker { color: var(--zon-600); }
.juridisch .adresblok { background: var(--mint); border-radius: var(--r-m); padding: 20px 24px; }
.juridisch .bijgewerkt { margin-top: 40px; font-size: 0.875rem; font-weight: 700; color: var(--tekst-3); }
/* Juridische pagina's v2 (9 okt 2026): volledige teksten, tabellen, inhoudstafel, conceptmelding */
.juridisch { max-width: 880px; }
.juridisch h2 { scroll-margin-top: 120px; }
.juridisch h3 { margin: 28px 0 12px; font-size: 1.25rem; font-weight: 900; color: var(--petrol-800); scroll-margin-top: 120px; }
.juridisch ol { margin: 0 0 14px; padding-left: 24px; }
.juridisch strong { color: var(--petrol-800); font-weight: 800; }
.juridisch a { font-weight: 700; }
.pkop .versielijn { margin: 4px 0 0; font-size: 0.875rem; font-weight: 800; letter-spacing: .02em; color: var(--petrol-700); }
.conceptmelding { display: flex; flex-direction: column; gap: 4px; margin: 0 0 32px; padding: 16px 20px; border-radius: 18px; background: var(--zon-50); border: 1px dashed var(--zon-600); color: var(--petrol-800); font-size: 0.9375rem; line-height: 1.55; }
.conceptmelding strong { font-weight: 900; }
.inhoudstafel { margin: 0 0 40px; padding: 22px 26px; border-radius: 22px; background: var(--mint); }
.inhoudstafel .inhoud-titel { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--petrol-700); }
.inhoudstafel ol { columns: 2; column-gap: 32px; margin: 0; padding-left: 22px; }
.inhoudstafel li { margin: 0 0 6px; break-inside: avoid; font-size: 0.9375rem; line-height: 1.45; }
.inhoudstafel li::marker { color: var(--petrol-700); font-weight: 800; }
.inhoudstafel a { text-decoration: none; color: var(--petrol-800); font-weight: 700; }
.inhoudstafel a:hover { text-decoration: underline; color: var(--petrol); }
.juridisch .tabel-scroll { margin: 0 0 20px; overflow-x: auto; border-radius: 18px; border: 1px solid var(--lijn); }
.juridisch table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.juridisch th { text-align: left; padding: 12px 14px; background: var(--petrol-800); color: #FFFFFF; font-weight: 800; font-size: 0.875rem; vertical-align: bottom; }
.juridisch td { padding: 12px 14px; border-top: 1px solid var(--lijn); color: var(--tekst-2); vertical-align: top; }
.juridisch tbody tr:nth-child(even) td { background: #F6FBFA; }
.juridisch td:first-child { font-weight: 800; color: var(--petrol-800); }
.dienststatus { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #EEF1F0; color: var(--tekst-3); font-size: 0.8125rem; font-weight: 800; white-space: nowrap; }
.dienststatus.aan { background: var(--mint-2); color: var(--petrol-800); }
.juridisch .formulierblok { margin: 0 0 20px; padding: 22px 26px; border-radius: 18px; border: 2px solid var(--petrol-100); background: #FFFFFF; }
.juridisch .formulierblok p { margin: 0 0 10px; }
.juridisch .formulierblok .invul { letter-spacing: .02em; color: var(--tekst-3); }
.juridisch .klein { font-size: 0.875rem; color: var(--tekst-3); }
.juridisch .keuzeblok { margin: 0 0 12px; padding: 22px 26px; border-radius: 22px; background: var(--mint); }
.juridisch .keuzeblok p:last-child { margin-bottom: 0; }
.juridisch [data-cookie-status] { font-weight: 800; color: var(--petrol-800); }
.juridisch .juridisch-verder { font-size: 0.9375rem; font-weight: 700; }
.juridisch .aanvullen { white-space: normal; }
@media (max-width: 700px) {
  .inhoudstafel { padding: 18px 20px; }
  .inhoudstafel ol { columns: 1; }
  .juridisch p, .juridisch li { font-size: 1rem; }
  .juridisch .tabel-scroll { overflow: visible; border: 0; border-radius: 0; }
  .juridisch table, .juridisch tbody, .juridisch tr, .juridisch td { display: block; width: 100%; }
  .juridisch thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .juridisch tr { margin: 0 0 12px; border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; }
  .juridisch tbody tr:nth-child(even) td { background: transparent; }
  .juridisch td { border-top: 1px solid var(--lijn); padding: 10px 14px; }
  .juridisch td:first-child { border-top: 0; background: var(--mint) !important; }
  .juridisch td:not(:first-child)::before { content: attr(data-kop); display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--petrol-700); margin-bottom: 2px; }
  .juridisch .formulierblok, .juridisch .keuzeblok { padding: 18px; }
}

/* ===== Versie 4 ===== */
/* Lijnen: header, inhoud en footer op exact dezelfde breedte */
.topbar .wrap, .site-header .wrap { max-width: 1280px; }

/* Menu met gele arcering */
.hoofdmenu { gap: 4px; }
.hoofdmenu > a:not(.menu-cta), .hoofdmenu .menu-knop { padding: 9px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.hoofdmenu > a:not(.menu-cta)::after { display: none; }
.hoofdmenu > a:not(.menu-cta):hover, .hoofdmenu .menu-knop:hover, .hoofdmenu .menu-knop[aria-expanded="true"] { background: var(--zon-50); color: var(--petrol-800); }
.hoofdmenu > a[aria-current="page"], .hoofdmenu .menu-knop[data-actief] { background: var(--zon); color: var(--petrol-900); box-shadow: none; }
.hoofdmenu .menu-cta { margin-left: 8px; }
.dropdown-paneel { width: 300px; }
@media (max-width: 1379px) { .hoofdmenu { display: none; } }

/* Hero: geen bovenlijn meer, foto iets kleiner, alles verticaal gecentreerd */
.hero .wrap { align-items: center; padding-top: clamp(40px, 5vw, 72px); }
@media (min-width: 1101px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero-v3 { width: 100%; max-width: 540px; justify-self: end; }
}

/* Kiezer in twee stappen */
.kiezer-2 { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px; }
.kiezer-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.kiezer-2 .vraag { font-size: 1.25rem; padding: 0 0 0 6px; }
.kiezer-keus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 1 1 520px; max-width: 680px; }
.kiezer .kies { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: 22px; background: var(--mint); color: var(--petrol-800); transition: background .2s, transform .2s var(--ease), box-shadow .2s; text-decoration: none; }
.kiezer .kies strong { display: block; font-size: 1.125rem; font-weight: 900; line-height: 1.2; }
.kiezer .kies small { display: block; font-size: 0.8438rem; font-weight: 700; opacity: .75; }
.kiezer .kies:hover { transform: translateY(-2px); background: var(--zon); color: var(--petrol-900); }
.kiezer .kies[aria-expanded="true"] { background: var(--zon); color: var(--petrol-900); box-shadow: 0 10px 24px rgba(255, 210, 63, .4); }
.kiezer .kies.zakelijk { background: var(--petrol-800); color: #FFFFFF; margin: 0; }
.kiezer .kies.zakelijk:hover { background: var(--petrol-900); color: var(--zon); }
.kiezer .kies:focus-visible { outline: 3px solid var(--zon); outline-offset: 3px; }
.kiezer-stap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--lijn); padding-top: 16px; animation: verschijn .25s ease-out; }
.kiezer-stap[hidden] { display: none; }
.kiezer-groep { background: var(--mint); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.kiezer .groep-kop { background: none; padding: 2px 4px; font-size: 1.0625rem; font-weight: 900; color: var(--petrol-800); }
.kiezer .groep-kop:hover { background: none; color: var(--petrol); transform: none; text-decoration: underline; }
.groep-items { display: flex; flex-wrap: wrap; gap: 8px; }
.kiezer .groep-items a { background: #FFFFFF; }
@keyframes verschijn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Gecentreerde sectiekop */
.kop-midden { margin: 0 auto; text-align: center; align-items: center; max-width: 900px; }

/* Lichtkrant iets smaller */
.lichtkrant { padding: 18px 0; }
.lichtkrant .reeks { font-size: clamp(1.375rem, 2.6vw, 2.25rem); gap: 28px; padding-right: 28px; }
.lichtkrant img { width: .85em; height: .85em; }

/* Footer: logo strak uitgelijnd met de tekst */
.site-footer .kol { align-items: flex-start; }
.site-footer .voet-logo { display: block; margin: 0 0 6px; }

@media (max-width: 1100px) {
  .kiezer-stap { grid-template-columns: 1fr; }
  .kiezer-keus { max-width: none; flex-basis: 100%; }
}
@media (max-width: 680px) {
  .kiezer-2 { padding: 16px; }
  .kiezer-keus { grid-template-columns: 1fr; }
  .kiezer .kies { padding: 14px 16px; }
  .lichtkrant { padding: 14px 0; }
  .site-footer .kolommen { gap: 28px; }
}
.merk img { height: 28px; width: auto; }
.site-footer .voet-logo { height: 56px; width: auto; }
@media (max-width: 1100px) { .merk img { height: 24px; } }
@media (max-width: 680px) { .site-footer .voet-logo { height: 48px; } }
.merk { flex: none; }
.hoofdmenu { gap: 2px; font-size: 0.9063rem; }
.hoofdmenu > a:not(.menu-cta), .hoofdmenu .menu-knop { padding: 8px 10px; }
.hoofdmenu .menu-cta { padding: 12px 18px; }
.hoofdmenu { font-size: 0.875rem; }
.hoofdmenu > a:not(.menu-cta), .hoofdmenu .menu-knop { padding: 8px 9px; }
.hoofdmenu .menu-knop svg { width: 10px; height: 10px; }
.site-header .wrap { gap: 16px; }
@media (max-width: 1100px) { .geloof-beeld .stempel { right: 12px; } }
html, body { overflow-x: clip; }

/* Kiezer: vraag boven, knoppen eronder over de volle breedte (ook op desktop) */
.kiezer-kop { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; }
.kiezer-2 .vraag { padding: 0 0 0 4px; }
.kiezer-keus { max-width: none; flex: none; width: 100%; }
@media (max-width: 680px) { .kiezer-keus { grid-template-columns: 1fr; } }
.kiezer .binnen.kiezer-2 { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.kiezer .binnen.kiezer-2 .vraag { width: auto; }
.kiezer .kiezer-keus .kies { width: 100%; }

/* Poort voor het calculatorresultaat */
.poort { display: flex; flex-direction: column; gap: 22px; }
.poort-kop { display: flex; gap: 18px; align-items: flex-start; background: var(--mint); border-radius: var(--r-l); padding: 26px 28px; }
.poort-kop h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; color: var(--petrol-800); }
.poort-kop p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--tekst-2); max-width: 640px; }
.poort-vink { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--zon); color: var(--petrol-900); font-size: 1.5rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.poort .knop.tekst { align-self: flex-start; }
@media (max-width: 680px) { .poort-kop { padding: 20px; gap: 14px; } .poort-vink { width: 40px; height: 40px; font-size: 1.25rem; } }

/* ==========================================================================
   Versie 6 · zijmenu, ritme volgens de gulden snede, nieuwe formulieren
   Ritme: elke stap is de vorige maal 1,618 (φ). Lettergroottes in rem.
   ========================================================================== */
:root {
  --phi: 1.618;
  --r0: .382rem;   /*  6px */
  --r1: .618rem;   /* 10px */
  --r2: 1rem;      /* 16px */
  --r3: 1.618rem;  /* 26px */
  --r4: 2.618rem;  /* 42px */
  --r5: 4.236rem;  /* 68px */
  --r6: 6.854rem;  /* 110px */
  --lijn-2: #CFE0DD;
}
html { font-size: 100%; }
body { font-size: 1rem; line-height: 1.618; }
.lead, .tekst { line-height: 1.618; }
.ruimte { padding-top: clamp(var(--r5), 8vw, var(--r6)); padding-bottom: clamp(var(--r5), 8vw, var(--r6)); }
.kop-blok { gap: var(--r2); }
.kop-rij { gap: var(--r3); }
.offerte-grid { gap: clamp(var(--r4), 5vw, var(--r5)); }
.geloof { gap: clamp(var(--r4), 6vw, var(--r6)); }

/* ---------- Header met zijmenu ---------- */
.site-header .wrap { justify-content: space-between; }
.kop-acties { display: flex; align-items: center; gap: var(--r1); }
.kop-acties .menu-cta { padding: .8rem 1.35rem; font-size: .9375rem; font-weight: 900; }
.hamburger { display: inline-flex !important; align-items: center; gap: var(--r1); width: auto; height: 3rem; padding: 0 1.15rem 0 1rem; border: 0; border-radius: 999px; background: var(--mint); color: var(--petrol-800); font: inherit; font-size: .9375rem; font-weight: 900; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.hamburger:hover { background: var(--zon); transform: translateY(-1px); }
.hamburger:focus-visible { outline: 3px solid var(--zon); outline-offset: 3px; }
.ham { position: relative; display: inline-block; width: 22px; height: 16px; flex: none; }
.ham i { position: absolute; left: 0; width: 100%; height: 2.6px; border-radius: 3px; background: currentColor; transition: transform .5s var(--ease), opacity .25s, width .35s var(--ease), top .45s var(--ease); }
.ham i:nth-child(1) { top: 0; }
.ham i:nth-child(2) { top: 6.7px; }
.ham i:nth-child(3) { top: 13.4px; width: 62%; }
.hamburger:hover .ham i:nth-child(3) { width: 100%; }
.ham.open i:nth-child(1), .zijmenu[data-open] .zm-sluit .ham i:nth-child(1) { top: 6.7px; transform: rotate(45deg); }
.ham.open i:nth-child(2), .zijmenu[data-open] .zm-sluit .ham i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.ham.open i:nth-child(3), .zijmenu[data-open] .zm-sluit .ham i:nth-child(3) { top: 6.7px; width: 100%; transform: rotate(-45deg); }
.zijmenu[data-open] .zm-sluit .ham i { transition-delay: .25s; }

.zm-sluier { position: fixed; inset: 0; z-index: 90; background: rgba(0, 46, 44, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.zm-sluier[data-open] { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.zijmenu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(27rem, 100vw); background: #FFFFFF; display: flex; flex-direction: column; border-radius: var(--r3) 0 0 var(--r3); box-shadow: -24px 0 60px rgba(0, 46, 44, .2); overflow: hidden; transform: translateX(104%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s; }
.zijmenu[data-open] { transform: none; visibility: visible; transition: transform .6s var(--ease); }
.zm-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); padding: var(--r2) var(--r3); border-bottom: 1px solid var(--lijn); }
.zm-merk { line-height: 0; }
.zm-merk img { height: 24px; width: auto; }
.zm-sluit { width: 3rem; height: 3rem; flex: none; border: 0; border-radius: 50%; background: var(--mint); color: var(--petrol-800); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; }
.zm-sluit:hover { background: var(--zon); }
.zm-sluit:focus-visible { outline: 3px solid var(--zon); outline-offset: 3px; }
.zm-inhoud { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--r2) var(--r3); }
.zm-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--r0); }
.zm-groep, .zm-link { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: var(--r2); padding: .7rem var(--r1); border-radius: var(--r2); cursor: pointer; font-family: var(--font); font-size: 1.1875rem; font-weight: 900; line-height: 1.2; color: var(--petrol-800); text-decoration: none; transition: background .2s; }
.zm-groep:hover, .zm-link:hover { background: var(--mint); color: var(--petrol-900); }
.zm-groep:focus-visible, .zm-link:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }
.zm-groep[aria-expanded="true"] { background: var(--zon-50); }
.zm-groep > svg:last-child { flex: none; width: 14px; height: 14px; transition: transform .35s var(--ease); }
.zm-groep[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.zm-ico { width: var(--r4); height: var(--r4); flex: none; border-radius: .875rem; background: var(--mint); display: flex; align-items: center; justify-content: center; }
.zm-naam { flex: 1; }
.zm-link[aria-current="page"] { background: var(--zon-50); }
.zm-link[aria-current="page"] .zm-ico, .zm-link.storing .zm-ico { background: var(--zon); }
.zm-sub { overflow: hidden; display: flex; flex-direction: column; padding: var(--r0) 0 var(--r1) calc(var(--r4) + var(--r2) + var(--r1)); }
.zm-sub[hidden] { display: none; }
.zm-sub a { display: flex; flex-direction: column; padding: .5rem var(--r1); border-radius: .75rem; font-size: 1rem; font-weight: 800; color: var(--tekst-2); text-decoration: none; line-height: 1.3; }
.zm-sub a small { font-size: .8125rem; font-weight: 700; color: var(--tekst-3); }
.zm-sub a:hover, .zm-sub a:focus-visible { background: var(--mint); color: var(--petrol-800); }
.zm-sub .zm-alles { flex-direction: row; align-items: center; gap: .5rem; color: var(--petrol); font-weight: 900; }
.zm-voet { padding: var(--r3); border-top: 1px solid var(--lijn); background: var(--mint); display: grid; gap: var(--r1); }
.zm-voet .knop { width: 100%; padding: 1rem 1.4rem; }
.zm-contact { margin: var(--r0) 0 0; text-align: center; font-size: .9375rem; font-weight: 800; }
.zm-contact a { color: var(--petrol); }
.zm-slogan { margin: 0; text-align: center; font-size: .9375rem; font-weight: 900; color: var(--petrol-800); }
.zm-slogan span { background: linear-gradient(transparent 58%, rgba(255, 210, 63, .8) 58%, rgba(255, 210, 63, .8) 92%, transparent 92%); }
.zijmenu .zm-item { opacity: 0; transform: translateX(28px); }
.zijmenu[data-open] .zm-item { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .65s var(--ease); transition-delay: calc(.14s + var(--i, 0) * .045s); }
html.zm-open, html.sv-open { overflow: hidden; }
@media (max-width: 680px) {
  .kop-acties .menu-cta { display: none; }
  .hamburger { height: 2.75rem; padding: 0 1rem 0 .875rem; }
  .zijmenu { border-radius: 0; }
  .zm-kop, .zm-inhoud { padding-left: var(--r2); padding-right: var(--r2); }
  .zm-voet { padding: var(--r2); }
}

/* ---------- Hero ---------- */
.hero .wrap { gap: clamp(var(--r4), 5vw, var(--r5)); padding-top: clamp(var(--r4), 5vw, var(--r5)); padding-bottom: clamp(var(--r5), 8vw, var(--r6)); }
.hero-tekst { gap: var(--r3); }
.hero-tekst .acties { margin-top: var(--r1); }
.hero-bewijs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--r1) var(--r3); font-size: .9375rem; font-weight: 800; color: var(--tekst-2); }
.hero-bewijs li { display: inline-flex; align-items: center; gap: .5rem; }
@media (min-width: 1101px) { .hero-v3 { max-width: 500px; margin-right: 4.5rem; } }
.zon-knop { position: absolute; z-index: 4; right: -13%; bottom: 10%; width: 27%; max-width: 150px; aspect-ratio: 1; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 18px 30px rgba(0, 46, 44, .28)); animation: zonOp 1.4s .2s var(--ease) both; transition: transform .35s var(--ease); }
.zon-knop img { width: 100%; height: 100%; animation: zonWiebel 6s 2.4s ease-in-out infinite; }
.zon-knop:hover { transform: scale(1.07) rotate(-6deg); }
.zon-knop:focus-visible { outline: 3px solid var(--petrol); outline-offset: 5px; }
.zon-label { position: absolute; left: 50%; top: -.5rem; transform: translate(-50%, -100%); white-space: nowrap; background: var(--petrol-800); color: #FFFFFF; font-size: .875rem; font-weight: 900; line-height: 1; padding: .55rem .9rem; border-radius: 999px; box-shadow: var(--schaduw-1); transition: background .2s, color .2s; }
.zon-label::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.zon-knop:hover .zon-label { background: var(--zon); color: var(--petrol-900); }
@keyframes zonWiebel { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-10deg); } 92% { transform: rotate(8deg); } 96% { transform: rotate(-3deg); } }
@media (max-width: 1100px) { .zon-knop { right: -2%; bottom: -10%; width: 24%; } }
@media (max-width: 680px) { .zon-knop { width: 26%; right: -1%; bottom: -12%; } .zon-label { font-size: .8125rem; padding: .45rem .7rem; } }

/* ---------- Stelling die inkleurt tijdens het lezen ---------- */
.vul-tekst.vul-klaar .vw { color: #A6D2CE; transition: color .5s var(--ease); }
.vul-tekst.vul-klaar .vw.aan { color: var(--petrol-800); }

/* ---------- Zo werken we ---------- */
.werkwijze-wrap { display: flex; flex-direction: column; gap: var(--r4); }
.ww-intro { max-width: 26rem; }
.werkwijze { position: relative; background: #FFFFFF; border-radius: var(--r-xl); box-shadow: var(--schaduw-1); padding: clamp(var(--r3), 4vw, var(--r4)); display: flex; flex-direction: column; gap: var(--r4); }
.ww-spoor { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--r2); }
.ww-lijn { position: absolute; left: calc(50% / var(--n, 4)); right: calc(50% / var(--n, 4)); top: calc(1.618rem - 3px); height: 6px; border-radius: 6px; background: var(--mint); overflow: hidden; }
.ww-vul { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--petrol) 0%, #3FA39C 60%, var(--zon) 100%); transform-origin: left center; transform: scaleX(0); }
.ww-stap { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--r0); text-align: center; cursor: pointer; padding: 0 var(--r0); font-family: var(--font); }
.ww-bol { position: relative; z-index: 1; width: 3.236rem; height: 3.236rem; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--mint-2); color: var(--petrol); display: flex; align-items: center; justify-content: center; transition: background .45s var(--ease), border-color .45s, color .45s, transform .45s var(--ease), box-shadow .45s; }
.ww-stap.klaar .ww-bol { background: var(--petrol); border-color: var(--petrol); color: #FFFFFF; }
.ww-stap.actief .ww-bol { background: var(--zon); border-color: var(--zon); color: var(--petrol-900); transform: scale(1.12); box-shadow: 0 0 0 8px rgba(255, 210, 63, .28); }
.ww-stap:hover .ww-bol { border-color: var(--petrol); }
.ww-stap:focus-visible .ww-bol { outline: 3px solid var(--petrol); outline-offset: 4px; }
.ww-nr { margin-top: var(--r0); font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-3); }
.ww-titel { font-size: 1.0625rem; font-weight: 900; line-height: 1.25; color: var(--tekst-3); transition: color .3s; }
.ww-stap.actief .ww-titel, .ww-stap.klaar .ww-titel { color: var(--petrol-800); }
.ww-panelen { position: relative; }
.ww-paneel { display: grid; grid-template-columns: minmax(0, .382fr) minmax(0, .618fr); gap: clamp(var(--r3), 4vw, var(--r5)); align-items: center; }
.ww-paneel + .ww-paneel { margin-top: var(--r4); }
.ww-js .ww-paneel + .ww-paneel { margin-top: 0; }
.ww-js .ww-paneel:not(.actief) { display: none; }
.ww-js .ww-paneel.actief { animation: wwIn .7s var(--ease) both; }
@keyframes wwIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ww-hemel { position: relative; aspect-ratio: 1.618 / 1; border-radius: var(--r-l); overflow: hidden; background: linear-gradient(180deg, var(--mint) 0%, var(--zon-50) 100%); }
.ww-zon { position: absolute; left: 50%; width: 36%; height: auto; bottom: calc(-6% + var(--stand, 0) * 46%); transform: translateX(-50%); filter: drop-shadow(0 14px 24px rgba(0, 46, 44, .2)); }
.ww-js .ww-paneel.actief .ww-zon { animation: wwZon 1.4s var(--ease) both; }
@keyframes wwZon { from { transform: translate(-50%, 34%); opacity: .4; } to { transform: translateX(-50%); opacity: 1; } }
.ww-horizon { position: absolute; left: -10%; right: -10%; bottom: -1px; height: 30%; background: var(--petrol-800); border-radius: 50% 50% 0 0 / 34% 34% 0 0; }
.ww-tekst { display: flex; flex-direction: column; gap: var(--r2); }
.ww-label { font-size: .8125rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); }
.ww-tekst h3 { margin: 0; font-size: clamp(1.618rem, 2.6vw, 2.618rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--petrol-800); }
.ww-tekst p { margin: 0; max-width: 32rem; font-size: 1.125rem; line-height: 1.618; color: var(--tekst-2); }
.ww-tekst .knop { align-self: flex-start; margin-top: var(--r1); }
.ww-pauze { position: absolute; right: var(--r3); bottom: var(--r3); display: inline-flex; align-items: center; gap: .5rem; border: 0; background: var(--mint); color: var(--petrol-800); font: inherit; font-size: .8125rem; font-weight: 900; padding: .5rem .85rem; border-radius: 999px; cursor: pointer; }
.ww-pauze:hover { background: var(--zon); }
.ww-pauze:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.ww-pauze-ico { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.ww-pauze:not(.speelt) .ww-pauze-ico { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ww-pauze[hidden] { display: none; }
@media (max-width: 860px) {
  .ww-paneel { grid-template-columns: 1fr; }
  .ww-hemel { aspect-ratio: 2.618 / 1; }
  .ww-zon { width: 22%; }
  .ww-pauze { position: static; align-self: flex-end; }
}
@media (max-width: 560px) {
  .ww-spoor { gap: var(--r0); }
  .ww-titel { font-size: .8125rem; }
  .ww-nr { display: none; }
  .ww-bol { width: 2.618rem; height: 2.618rem; }
  .ww-bol svg { width: 18px; height: 18px; }
  .ww-lijn { top: calc(1.309rem - 3px); }
  .werkwijze { border-radius: var(--r-l); gap: var(--r3); }
}

/* ---------- Offerte: zon komt op bij verzenden ---------- */
.offerte-vlak .opkomende-zon { left: auto; right: -12%; bottom: -66%; width: min(760px, 92vw); opacity: 0; transform: translateY(26%); transition: opacity 1.3s var(--ease), transform 1.8s var(--ease); }
.offerte-vlak.zon-op .opkomende-zon { opacity: 1; transform: none; }
.formkaart > .offerte { margin-top: 0; border: 0; box-shadow: 0 40px 80px rgba(0, 0, 0, .25); }
.offerte-intro { margin: 0; line-height: 1.618; }

/* Bevestiging: goed leesbaar op elke achtergrond */
.bevestiging { color: var(--tekst-2); }
.bevestiging p { color: var(--tekst-2); }
.bevestiging.groot { position: relative; background: #FFFFFF; border-radius: var(--r-l); padding: clamp(var(--r3), 4vw, var(--r4)); gap: var(--r2); align-items: flex-start; box-shadow: 0 40px 80px rgba(0, 0, 0, .25); animation: stapIn .55s var(--ease) both; outline: none; }
.bevestiging.groot h3 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.015em; color: var(--petrol-800); }
.bevestiging.groot p { margin: 0; font-size: 1.125rem; line-height: 1.618; font-weight: 600; color: var(--tekst-2); }
.bevestiging .bv-mail { display: inline-flex; align-items: center; gap: .5rem; background: var(--mint); color: var(--petrol-800); border-radius: 999px; padding: .5rem 1rem; font-size: .9375rem !important; font-weight: 800 !important; }
.bevestiging .bv-mail::before { content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300756F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.bevestiging .bv-klein { font-size: 1rem !important; }
.bevestiging .bv-klein strong { color: var(--petrol-800); }
.bv-zon { width: 76px; height: 76px; animation: cadeauZon 1s var(--ease) both; }
.bevestiging .acties { margin-top: var(--r1); }

/* ---------- Keuzekaarten en chips (werken ook zonder JavaScript) ---------- */
fieldset.veld { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.veld > legend { padding: 0; margin-bottom: var(--r1); }
.veldlabel { font-size: .9375rem; font-weight: 900; color: var(--tekst); }
.veldlabel small { margin-left: var(--r0); font-size: .8125rem; font-weight: 700; color: var(--tekst-3); }
.kaartkeuzes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: var(--r1); }
.kaartkeuzes.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaartkeus { position: relative; display: block; cursor: pointer; }
.kaartkeus input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kk-inhoud { display: flex; align-items: center; gap: var(--r1); height: 100%; padding: .75rem .875rem; border: 2px solid var(--lijn-2); border-radius: var(--r2); background: #FFFFFF; transition: border-color .15s, background .15s, box-shadow .15s; }
.kaartkeus:hover .kk-inhoud { border-color: var(--petrol); background: #F6FBFA; }
.kaartkeus input:checked + .kk-inhoud { border-color: var(--petrol); background: var(--mint); box-shadow: inset 0 0 0 1px var(--petrol); }
.kaartkeus input:focus-visible + .kk-inhoud { outline: 3px solid var(--zon); outline-offset: 2px; }
.kk-ico { width: 2.25rem; height: 2.25rem; flex: none; border-radius: .75rem; background: var(--mint); display: flex; align-items: center; justify-content: center; }
.kaartkeus input:checked + .kk-inhoud .kk-ico { background: #FFFFFF; }
.kk-tekst strong { display: block; font-size: .9375rem; font-weight: 900; line-height: 1.25; color: var(--petrol-800); }
.kk-tekst small { display: block; font-size: .8125rem; font-weight: 700; color: var(--tekst-3); }
.veld.fout .kk-inhoud { border-color: var(--fout); }
.chip-keus { position: relative; display: inline-flex; }
.chip-keus input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-keus span { display: inline-flex; align-items: center; gap: .375rem; padding: .55rem .9rem; border-radius: 999px; border: 2px solid transparent; background: var(--mint); color: var(--petrol-800); font-size: .875rem; font-weight: 800; line-height: 1.2; transition: background .15s, border-color .15s; }
.chip-keus:hover span { background: var(--mint-2); }
.chip-keus input:checked + span { background: var(--zon); border-color: var(--zon-600); color: var(--petrol-900); }
.chip-keus input:checked + span::before { content: "✓"; font-weight: 900; }
.chip-keus input:focus-visible + span { outline: 3px solid var(--petrol); outline-offset: 2px; }
.veld.fout .chip-keus span { border-color: rgba(179, 38, 30, .35); }
.chip[aria-pressed="true"] { background: var(--zon); color: var(--petrol-900); }
.chip-meer { background: #FFFFFF; border: 2px dashed var(--petrol-300); }
.chip-meer[aria-pressed="true"] { border-style: solid; border-color: var(--zon-600); }
.meer-noot { margin: 0; max-width: 30rem; padding: .55rem .8rem; border-radius: .75rem; background: var(--zon-50); color: var(--petrol-700); font-size: .875rem; font-weight: 700; line-height: 1.5; }
.honing { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.klanttype { display: flex; flex-direction: column; gap: var(--r1); }
.bedrijfsveld[hidden] { display: none; }
.stapveld { padding-top: var(--r3) !important; border-top: 1px solid var(--lijn) !important; display: flex; flex-direction: column; gap: var(--r2); }
.storing-form h3 + .stapveld { padding-top: var(--r1) !important; border-top: 0 !important; }
.stapnr { display: inline-flex; align-items: center; justify-content: center; width: 1.618rem; height: 1.618rem; margin-right: var(--r1); border-radius: 50%; background: var(--zon); color: var(--petrol-900); font-size: .875rem; font-weight: 900; vertical-align: 1px; }
.foto-kiezer { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border: 2px dashed var(--lijn-2); border-radius: var(--r2); background: #FFFFFF; cursor: pointer; transition: border-color .15s, background .15s; }
.foto-kiezer:hover { border-color: var(--petrol); background: #F6FBFA; }
.fotoveld { position: relative; }
.fotoveld:focus-within .foto-kiezer { outline: 3px solid var(--zon); outline-offset: 2px; }
.foto-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fk-ico { width: 2.25rem; height: 2.25rem; flex: none; border-radius: .75rem; background: var(--mint); display: flex; align-items: center; justify-content: center; }
.fk-tekst strong { display: block; font-size: .9375rem; font-weight: 900; color: var(--petrol-800); }
.fk-tekst small { display: block; font-size: .8125rem; font-weight: 700; color: var(--tekst-3); }
.foto-voorbeeld { display: flex; align-items: center; gap: .875rem; padding: var(--r1); border-radius: var(--r2); background: var(--mint); }
.foto-voorbeeld[hidden] { display: none; }
.foto-voorbeeld img { width: 64px; height: 64px; object-fit: cover; border-radius: .75rem; }
.foto-voorbeeld span { flex: 1; font-size: .875rem; font-weight: 800; color: var(--petrol-800); word-break: break-all; }
.foto-voorbeeld small { display: block; color: var(--tekst-3); font-weight: 700; }
.storing-uitleg { display: flex; flex-direction: column; gap: var(--r3); }
.storing-kop .kop-tekst { gap: var(--r3); }
.storing-kop .contactkaarten { margin-top: var(--r1); }
.storing-form, .afspraak-form { gap: var(--r3); }

/* ---------- Vensters: snelle vraag en mailkiezer ---------- */
dialog.snelvenster, dialog.mailkiezer { width: 100%; max-width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; background: transparent; color: var(--tekst); overflow: visible; }
dialog.mailkiezer { max-width: min(28rem, calc(100vw - 2rem)); }
dialog.snelvenster::backdrop, dialog.mailkiezer::backdrop { background: rgba(0, 46, 44, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sv-binnen, .mk-binnen { position: relative; display: flex; flex-direction: column; gap: var(--r3); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: clamp(var(--r3), 4vw, var(--r4)); border-radius: var(--r-l); background: #FFFFFF; box-shadow: var(--schaduw-2); }
dialog[open] .sv-binnen, dialog[open] .mk-binnen { animation: dlgIn .45s var(--ease) both; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.sv-sluit { position: absolute; top: var(--r2); right: var(--r2); width: var(--r4); height: var(--r4); border: 0; border-radius: 50%; background: var(--mint); color: var(--petrol-800); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.sv-sluit:hover { background: var(--zon); }
.sv-sluit:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }
.sv-kop { display: flex; align-items: center; gap: var(--r2); padding-right: var(--r4); }
.sv-kop img { width: 4rem; height: 4rem; flex: none; }
.sv-kop h2 { margin: 0 0 .25rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; line-height: 1.1; color: var(--petrol-800); }
.sv-kop p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tekst-2); }
.sv-form { display: flex; flex-direction: column; gap: var(--r2); }
.sv-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: .875rem; }
.sv-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r2); }
.sv-link { font-size: .9375rem; font-weight: 800; }
.sv-klaar { box-shadow: none !important; padding: var(--r2) 0 0 !important; }
.sv-klaar .acties { display: flex; flex-wrap: wrap; gap: var(--r1); }
.mk-binnen h2 { margin: 0; padding-right: var(--r4); font-size: 1.618rem; font-weight: 900; color: var(--petrol-800); }
.mk-adres { margin: calc(-1 * var(--r1)) 0 0; font-size: 1.0625rem; font-weight: 800; color: var(--petrol); user-select: all; }
.mk-opties { display: flex; flex-direction: column; gap: .5rem; }
.mk-opties a, .mk-kopieer { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--r2); padding: .875rem 1rem; border: 2px solid var(--lijn); border-radius: var(--r2); cursor: pointer; font-family: var(--font); transition: border-color .15s, background .15s; }
.mk-opties a:hover, .mk-kopieer:hover { border-color: var(--petrol); background: var(--mint); }
.mk-opties a:focus-visible, .mk-kopieer:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }
.mk-opties strong { display: block; font-size: 1rem; font-weight: 900; color: var(--petrol-800); }
.mk-opties small { display: block; font-size: .8125rem; font-weight: 700; color: var(--tekst-3); }
.mk-pijl { font-size: 1.4rem; font-weight: 900; color: var(--petrol); }
@media (max-width: 680px) {
  dialog.snelvenster, dialog.mailkiezer { max-width: 100vw; margin: auto 0 0; max-height: 94dvh; }
  .sv-binnen, .mk-binnen { border-radius: var(--r-l) var(--r-l) 0 0; max-height: 94dvh; padding-bottom: calc(var(--r3) + env(safe-area-inset-bottom)); }
  .sv-kop img { width: 3rem; height: 3rem; }
}

/* ---------- Calculator: bedanking met een cadeautje ---------- */
.cadeau { display: flex; flex-direction: column; align-items: center; gap: var(--r2); padding: var(--r3) 0 var(--r2); text-align: center; }
.cadeau-beeld { position: relative; width: 132px; height: 132px; margin-bottom: var(--r1); }
.cadeau-beeld img { position: relative; z-index: 1; width: 100%; height: 100%; animation: cadeauZon 1.1s var(--ease) both, zonWiebel 6s 2s ease-in-out infinite; }
.cadeau-gloed { position: absolute; inset: -32%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 63, .5), transparent 66%); animation: gloed 2.6s ease-in-out infinite; }
.cadeau-beeld i { --hoek: calc(var(--k) * 25.7deg); position: absolute; left: 50%; top: 50%; width: 9px; height: 15px; border-radius: 3px; background: var(--zon); opacity: 0; animation: confetti 1.5s calc(.3s + var(--k) * .03s) var(--ease) both; }
.cadeau-beeld i:nth-of-type(odd) { width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); }
.cadeau-beeld i:nth-of-type(3n) { background: #7FC4BC; }
@keyframes confetti { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--hoek)) translateY(-30px); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--hoek)) translateY(-130px) rotate(220deg); } }
@keyframes cadeauZon { from { transform: scale(.4) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.08) rotate(6deg); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes gloed { 50% { transform: scale(1.1); opacity: .7; } }
.cadeau h2 { margin: 0; font-size: clamp(2rem, 4vw, 2.618rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--petrol-800); outline: none; }
.cadeau-lead { margin: 0; max-width: 30rem; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.4; color: var(--petrol); }
.cadeau-tekst { margin: 0; max-width: 34rem; font-size: 1rem; line-height: 1.618; color: var(--tekst-2); }
.cadeau-tekst strong { color: var(--petrol-800); overflow-wrap: anywhere; }
.cadeau .acties { justify-content: center; margin-top: var(--r1); }
/* Herofoto zonder ingebakken zon: iets breder kader (verhouding 3:2) */
.hero-v3 { aspect-ratio: 1.5 / 1; }
@media (min-width: 1101px) { .hero-v3 { margin-right: 5rem; } .zon-knop { right: -21%; bottom: 8%; } }
@media (max-width: 680px) { .zon-knop { width: 23%; right: -2%; bottom: -13%; } }
/* Ankers en velden niet onder de vaste header laten verdwijnen */
[id] { scroll-margin-top: 5.5rem; }
input, textarea, select, button, .kk-inhoud { scroll-margin-top: 7rem; scroll-margin-bottom: 6rem; }
.kaartkeuzes { grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 100%), 1fr)); }
.kk-tekst { min-width: 0; overflow-wrap: anywhere; }
.foto-voorbeeld .knop.tekst { color: var(--petrol-800); padding: .5rem .75rem; }
@media (max-height: 760px), (max-width: 680px) { .zm-voet { gap: var(--r0); padding-top: var(--r2); padding-bottom: var(--r2); } .zm-voet .knop.lijn, .zm-slogan { display: none; } }
/* Enkel in de voorbeeldversie (GV_CONFIG.voorbeeld) */
.voorbeeld-balk { position: relative; z-index: 60; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .5rem; padding: .5rem 1rem; background: var(--zon); color: var(--petrol-900); font-size: .8125rem; font-weight: 700; text-align: center; }
.voorbeeld-balk strong { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.bevestiging .bv-voorbeeld, .cadeau .bv-voorbeeld { margin: 0; padding: .35rem .8rem; border-radius: 999px; background: var(--zon-50); color: #5A4600; font-size: .8125rem !important; font-weight: 800 !important; }

/* ============================================================
   v7 · aanvullingen (basis v6e)
   ============================================================ */
/* Vier calculators: vier naast elkaar op brede schermen, twee per rij op tablet, één op gsm */
.calcs.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.calcs.vier .calc { padding: 28px 24px; }
.calcs.vier .calc .index { font-size: 3.25rem; }
.calcs.vier .calc .ico { width: 52px; height: 52px; right: 22px; top: 24px; border-radius: 18px; }
.calcs.vier .calc h3 { font-size: 1.375rem; line-height: 1.2; }
.calcs.vier .calc p { font-size: 0.9688rem; }
@media (max-width: 1240px) { .calcs.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .calcs.vier { grid-template-columns: 1fr; } }

/* Rustige link naar de prijsindicatie */
.prijs-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.9688rem; font-weight: 700; color: var(--tekst-2); text-decoration: none; }
.prijs-link strong { color: var(--petrol); font-weight: 900; text-decoration: underline; text-decoration-color: var(--zon); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.prijs-link .pijl { width: 16px; height: 16px; color: var(--petrol); transition: transform .25s var(--ease); }
.prijs-link:hover .pijl { transform: translateX(3px); }
.pkop.diep .prijs-link, .donker .prijs-link { color: #CCE6E4; }
.zm-prijs { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.9375rem; font-weight: 800; color: var(--petrol); text-decoration: none; padding: 6px 0; }
.zm-prijs .pijl { width: 16px; height: 16px; }

/* Prijsindicatie: tabel in de bevestiging */
.prijs-tabel { width: 100%; border-collapse: collapse; margin: 6px 0 4px; text-align: left; }
.prijs-tabel th, .prijs-tabel td { padding: 12px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.prijs-tabel th { font-weight: 900; color: var(--petrol-800); font-size: 1rem; }
.prijs-tabel th small { display: block; font-weight: 600; color: var(--tekst-3); font-size: 0.8125rem; margin-top: 2px; }
.prijs-tabel td { text-align: right; white-space: nowrap; font-weight: 900; color: var(--petrol); padding-left: 12px; }
.bv-voorstel { margin: 8px 0 0; display: inline-block; background: var(--zon); color: var(--petrol-900); font-size: 0.8125rem; font-weight: 900; padding: 6px 12px; border-radius: 999px; }
.bv-mailvoorbeeld { margin-top: 14px; padding: 16px 18px; border: 1px dashed var(--lijn); border-radius: 16px; text-align: left; }
.bv-mailvoorbeeld > strong { display: block; font-size: 0.875rem; color: var(--tekst-3); margin-bottom: 4px; }
.formnoot { margin: 4px 0 0; font-size: 0.9375rem; color: var(--tekst-3); }
.formnoot a { color: var(--petrol); font-weight: 800; }
.prijs-form .kaartkeuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .prijs-form .kaartkeuzes { grid-template-columns: 1fr; } }

/* Echte klantenreviews: rustig blok, enkel zichtbaar als er reviews zijn */
.reviews-echt { margin-top: 28px; display: flex; flex-direction: column; gap: 24px; background: var(--zon-50); border-radius: var(--r-l); padding: clamp(24px, 4vw, 42px); }
.reviews-echt .re-kop { display: flex; flex-direction: column; gap: 10px; }
.reviews-echt .re-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reviews-echt .re-kaart { margin: 0; background: #FFFFFF; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.reviews-echt .re-sterren { display: flex; gap: 2px; }
.reviews-echt blockquote { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tekst); }
.reviews-echt figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; color: var(--tekst-3); }
.reviews-echt figcaption strong { color: var(--petrol-800); font-size: 0.9688rem; }
.reviews-echt figcaption a { color: var(--petrol); font-weight: 800; }
@media (max-width: 1100px) { .reviews-echt .re-lijst { grid-template-columns: 1fr; } }
.calcs.vier .calc .doe { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* Pijlknoppen onder de calculatorkaarten: overal dezelfde ronde cirkel (niet laten krimpen als de knoptekst over twee regels loopt).
   In de rij van vier (enkel daar loopt de tekst over twee regels) staat de cirkel telkens op de laatste tekstregel, zodat de vier
   pijlen op dezelfde hoogte staan. Kleinere schermen blijven zoals ze waren. */
.calc .doe .cirkel { flex: 0 0 40px; }
@media (min-width: 1241px) {
  .calcs.vier .calc .doe { align-items: flex-end; }
  .calcs.vier .calc .doe .cirkel { position: relative; top: 7px; top: calc((40px - 1lh) / 2); }
}
.bevestiging p.bv-voorstel { font-size: 0.8125rem; line-height: 1.4; display: inline-block; margin-top: 10px; }
.bevestiging .prijs-tabel th { font-size: 0.9688rem; }
.bevestiging p.bv-klein { font-size: 0.875rem; line-height: 1.5; }