/* ==========================================================================
   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(44px, 6.6vw, 92px);
  --h2: clamp(34px, 4.4vw, 60px);
  --h3: clamp(22px, 2vw, 28px);
  /* 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: 13.5px; }
.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: 13px; 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(18px, 1.6vw, 21px); line-height: 1.6; color: var(--tekst-2); max-width: 600px; }
.donker .lead { color: #CDE7E4; }
.tekst { margin: 0; font-size: 17px; 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: 13px; font-weight: 800; line-height: 1.4; max-width: 300px; }
.foto.paneel .paneel-label b { display: block; color: var(--zon); font-size: 11px; 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: 15px; font-weight: 900; color: var(--petrol-800); }
.zweef small { display: block; font-size: 13px; 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: 15px; 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: 17px; 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: 15px; 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(28px, 3.4vw, 46px); 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: 13px; font-weight: 900; letter-spacing: .14em; color: var(--tekst-3); }
.pijler h3 { margin: 0; font-size: clamp(28px, 2.6vw, 36px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; color: var(--petrol-800); }
.pijler p { margin: 0; font-size: 17px; 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: 14px; 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: 16px; 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: 64px; 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: 26px; font-weight: 900; color: var(--petrol-800); }
.calc p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--tekst-2); }
.calc .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.calc .meta span { font-size: 13px; 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: 16px; 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(30px, 3.6vw, 50px); 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: 18px; font-weight: 900; color: var(--petrol-800); margin-bottom: 4px; }
.belofte span { font-size: 15.5px; 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: 13px; font-weight: 900; letter-spacing: .14em; color: var(--petrol); }
.stap h3 { margin: 0; font-size: 23px; font-weight: 900; color: var(--petrol-800); }
.stap p { margin: 0; font-size: 16px; 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: 18px; font-weight: 900; color: #FFFFFF; }
.sector span { font-size: 15px; 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 figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(255, 255, 255, .92); color: var(--petrol-800); font-size: 13px; font-weight: 900; padding: 8px 12px; border-radius: 999px; }
.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: 22px; font-weight: 900; color: var(--petrol-800); }
.reviews span { font-size: 16px; 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: 14px; color: #CDE7E4; font-weight: 700; }
.contactregel strong { display: block; font-size: 22px; 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: 22px; }
.pkop .kop-beeld .preview .keuze { padding: 12px 14px; }
.pkop h1 { margin: 0; font-size: clamp(40px, 5.4vw, 74px); 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: 21px; font-weight: 900; line-height: 1.25; color: var(--petrol-800); }
.kaart-i p { margin: 0; font-size: 16px; 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: 17px; 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: 18px; 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: 23px; font-weight: 900; color: var(--petrol-800); }
.dienst p { margin: 0; font-size: 16px; 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: 12px; 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(28px, 3.4vw, 46px); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; color: #FFFFFF; max-width: 640px; }
.slotband p { margin: 10px 0 0; font-size: 17px; 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(38px, 5vw, 66px); 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: 22px; font-weight: 900; color: var(--petrol-800); }
.waarde p { margin: 0; font-size: 16px; 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: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3); }
.contactkaart strong { font-size: 20px; font-weight: 900; color: var(--petrol-800); }
.contactkaart span { font-size: 15px; 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(30px, 3.6vw, 50px); 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: 17px; 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; }
  .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: 13.5px; }
  .zweef small { font-size: 12px; }
  .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: 14px; }
  .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; }
  .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(46px, 6.2vw, 92px); 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: 16px; 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: 13.5px; }
}
.hero-titel { font-size: clamp(40px, 5.3vw, 80px); 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(34px, 10.4vw, 44px); } }

/* Juridische pagina's */
.juridisch { max-width: 820px; }
.juridisch h2 { margin: 44px 0 14px; font-size: 26px; font-weight: 900; letter-spacing: -0.01em; color: var(--petrol-800); }
.juridisch h2:first-child { margin-top: 0; }
.juridisch p, .juridisch li { font-size: 17px; 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: 14px; font-weight: 700; color: var(--tekst-3); }

/* ===== 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: 20px; 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: 18px; font-weight: 900; line-height: 1.2; }
.kiezer .kies small { display: block; font-size: 13.5px; 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: 17px; 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(22px, 2.6vw, 36px); 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: 14.5px; }
.hoofdmenu > a:not(.menu-cta), .hoofdmenu .menu-knop { padding: 8px 10px; }
.hoofdmenu .menu-cta { padding: 12px 18px; }
.hoofdmenu { font-size: 14px; }
.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(24px, 2.6vw, 32px); font-weight: 900; color: var(--petrol-800); }
.poort-kop p { margin: 0; font-size: 17px; 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: 24px; 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: 20px; } }