/* bavds.nl - statische versie. Huisstijl van de Avada-site (kleuren, Inter, opbouw), strakker uitgewerkt:
   scherpe hoeken, kaarten als vlak zonder rand of schaduw, geen decoratieve lijnen, rustigere typografie. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); }

:root {
  /* Zelfde lichte afronding als de balk in het logo. */
  --hoek: 3px;
  --blauw: #007ac2;
  --blauw-donker: #00659f;
  --donker: #023a51;
  --kop: #1f2a37;
  --tekst: #56637a;
  --groen: #2cbc63;
  --rood: #ff0000;
  --rood-donker: #db0000;
  --oranje: #e36125;
  --grijs: #f3f5f7;
  --grijs-2: #e9edf1;
  --licht: #f9fafb;
  --rand: #dfe4ea;
  --voet: #1d1d1b;
  --voet-onder: #151514;
  --breedte: 1280px;
  --zij: 32px;
  --leesbreedte: 780px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font-family: Inter, Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.65; color: var(--tekst); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blauw); text-decoration: none; }
a:hover { color: var(--blauw-donker); }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 1.2em; }
h1, h2, h3, h4, h5, h6 { font-family: Inter, Arial, Helvetica, sans-serif; font-weight: 700; color: var(--blauw); margin: 0 0 18px; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: 56px; line-height: 1.08; }
h2 { font-size: 44px; line-height: 1.12; }
h3 { font-size: 32px; line-height: 1.2; }
h4 { font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
h5 { font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
h6 { font-size: 17px; line-height: 1.4; letter-spacing: 0; }
h1 a, h2 a, h3 a, h4 a { color: inherit; }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { max-width: calc(var(--breedte) + 2 * var(--zij)); margin: 0 auto; padding: 0 var(--zij); }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }

/* Knoppen: scherp, vlak, duidelijke hover */
.knoppen { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 8px 0 18px; }
.t-center + .knoppen, .midden .knoppen { justify-content: center; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--rood); color: #fff; font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: 0; padding: 17px 30px; border: 0; border-radius: var(--hoek); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.knop:hover { background: var(--rood-donker); color: #fff; }
.knop-oranje { background: var(--oranje); }
.knop-oranje:hover { background: #c9521b; }
.knop-wit { background: #fff; color: var(--donker); }
.knop-wit:hover { background: var(--licht); color: var(--blauw); }
.knop-vol { width: 100%; }
.linkknop { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }

/* Kop: witte balk met logo en contact, blauwe menubalk die blijft staan bij scrollen */
.kop { position: sticky; top: -84px; z-index: 30; }
.kop-boven { background: #fff; }
.kop-boven .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 20px; }
.logo img { width: 280px; height: auto; }
.kop-contact { display: flex; gap: 22px; align-items: center; font-size: 15px; font-weight: 600; }
.kop-contact a { color: var(--kop); }
.kop-contact a:hover { color: var(--blauw); }
.kop-contact span { display: none; }
.menu-knop { display: none; background: none; border: 0; padding: 8px; color: var(--kop); cursor: pointer; }
.menu-knop .ico-svg { width: 28px; height: 28px; }
.menu-knop .sluit { display: none; }
.kop-nav { background: var(--blauw); }
.kop-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 24px; }
.kop-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-left: -14px; }
.kop-nav ul a { color: #fff; display: block; padding: 8px 14px; font-size: 15px; font-weight: 500; border-radius: var(--hoek); }
.kop-nav ul a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.kop-nav ul a[aria-current="page"] { background: rgba(255, 255, 255, .18); color: #fff; }
.kop-nav .knop { padding: 12px 22px; font-size: 15px; }
.menu-extra { display: none; }

/* Hero: foto met een donkerblauw verloop voor leesbaarheid */
.hero { position: relative; background: var(--donker) var(--beeld) center / cover no-repeat; color: #fff; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 30, 45, .78) 0%, rgba(2, 30, 45, .45) 55%, rgba(2, 30, 45, .15) 100%); }
.hero-home::before { background: linear-gradient(180deg, rgba(2, 30, 45, .45), rgba(2, 30, 45, .62)); }
.hero-in { position: relative; max-width: calc(var(--breedte) + 2 * var(--zij)); margin: 0 auto; padding: 96px var(--zij); min-height: 440px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-titel { color: #fff; font-size: 58px; line-height: 1.05; margin: 0 0 18px; max-width: 16ch; }
.hero-tekst { font-size: 20px; line-height: 1.55; color: rgba(255, 255, 255, .92); max-width: 36em; }
.hero-tekst p { margin: 0 0 22px; }
.hero-tekst a, .hero-tekst span { color: #fff !important; }
.hero .knoppen { margin-top: 12px; }
.hero-home .hero-in { align-items: center; text-align: center; }
.hero-home .hero-titel { max-width: none; }
.hero-home .knoppen { justify-content: center; }

/* Secties, rijen en kolommen (vertaling van de Avada-opbouw) */
.sectie { background: var(--bg, transparent) var(--beeld, none) center / cover no-repeat; padding: var(--pt, 0) 0 var(--pb, 0); }
.sectie[style*="--bg:#f4f4f4"] { background-color: var(--grijs); }
.rij { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: calc(var(--breedte) + 2 * var(--zij)); margin: 0 auto; padding: 0 calc(var(--zij) - 14px); }
.sectie.vol > .rij { max-width: none; padding: 0; align-items: stretch; }
.rij.genest { padding: 0; margin: 0 -14px; max-width: none; }
.kol { flex: 0 0 var(--w); max-width: var(--w); padding: 0 14px; margin: 16px 0; background: var(--bg, transparent); }
.sectie.vol > .rij > .kol { margin: 0; padding: 0; }
.kol-in { padding: var(--pad, 0); height: 100%; }
.kol.midden > .kol-in { display: flex; flex-direction: column; justify-content: center; }
.kol.kaart { background: none; position: relative; }
.kol.kaart > .kol-in { background: var(--grijs); border: 0; border-radius: var(--hoek); box-shadow: none; transition: background .2s; }
.kol.kaart:hover > .kol-in { background: var(--grijs-2); }
.kol.leeg { margin: 0; }
.kol-link { position: absolute; inset: 16px 14px; z-index: 1; }
.kol .kol-in > *:last-child { margin-bottom: 0; }
.sectie.vol .kol-in { padding: var(--pad, 0); }
.sectie.vol .kol[style*="--bg"] .kol-in { padding: var(--pad, 64px 56px); }

/* Leesbaarheid: lange tekst in een brede kolom op een prettige regellengte */
.kol[style*="--w:100%"] > .kol-in > .tekst:not(.t-center) { max-width: var(--leesbreedte); }
.kol[style*="--w:100%"] > .kol-in > .tekst.t-center, .kol[style*="--w:100%"] > .kol-in > .titel.t-center { max-width: 900px; margin-left: auto; margin-right: auto; }

.titel.t-center { text-align: center; }
.titel.t-right { text-align: right; }
.tekst.t-center { text-align: center; }
.tekst ul { list-style: none; padding-left: 0; }
.tekst ul li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.tekst ul li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--groen); }
.tekst a { color: var(--blauw); font-weight: 600; }
.tekst a:hover { color: var(--blauw-donker); text-decoration: underline; }
.tekst strong { color: var(--kop); font-weight: 600; }
.sectie[style*="--bg:#007ac2"] .tekst strong, .kol[style*="--bg:#007ac2"] .tekst strong, .kol[style*="--bg:#ff0000"] .tekst strong { color: #fff; }
.kol[style*="--bg:#007ac2"] .tekst ul li::before, .kol[style*="--bg:#ff0000"] .tekst ul li::before, .sectie[style*="--bg:#007ac2"] .tekst ul li::before { background: #fff; }
.tekst table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.tekst td, .tekst th { vertical-align: top; padding: 0 12px 0 0; }
.tekst td ul { margin-bottom: 0; }
.beeld { margin: 0 0 18px; }
.beeld picture { display: block; }
.beeld img { max-width: 100%; height: auto; }
.beeld.b-center { text-align: center; }
.beeld.b-center img { margin: 0 auto; }
.beeld.b-right img { margin-left: auto; }
.sectie.vol .beeld { margin: 0; height: 100%; }
.sectie.vol .beeld img, .sectie.vol .beeld picture { width: 100%; height: 100%; object-fit: cover; }
.video { margin: 0 0 18px; }
.video video { width: 100%; background: #000; }
.embed { position: relative; padding-top: 56.25%; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.scheiding { border: 0; height: 24px; margin: 0; }

/* Iconen */
.ico { display: inline-flex; margin-bottom: 14px; }
.ico .ico-svg { width: 34px; height: 34px; }
.ico-rond { width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; }
.ico-rond .ico-svg { width: 48%; height: 48%; }
.ico-rond > span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }

/* Vinklijst (USP-balk) */
.vinklijst { list-style: none; padding: 0; margin: 0; }
.vinklijst li { display: flex; align-items: center; gap: 12px; padding: .3em 0; font-size: 16px; font-weight: 600; color: var(--donker); }
.vinklijst .vink { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.vinklijst .vink svg { width: 14px; height: 14px; }
.vinklijst p { margin: 0; }

/* Icoonkaartjes (content boxes) */
.kaartjes { display: grid; gap: 28px 36px; margin: 0 0 18px; }
.kaartjes.k1 { grid-template-columns: 1fr; }
.kaartjes.k2, .kaartjes.k4 { grid-template-columns: repeat(2, 1fr); }
.kaartjes.k3 { grid-template-columns: repeat(3, 1fr); }
.kaartje { display: flex; gap: 18px; align-items: flex-start; }
.kaartje-ico { flex: 0 0 auto; color: var(--rood); padding-top: 2px; }
.kaartje-ico .ico-svg { width: 28px; height: 28px; }
.kaartje-titel { font-size: 18px; line-height: 1.35; color: var(--donker); margin: 0 0 6px; letter-spacing: -.01em; }
.kaartje .tekst { font-size: 15.5px; }
.kaartje .tekst p { margin-bottom: 8px; }

/* Contactblok: iconen in vlakjes op blauw */
.kol[style*="--bg:#007ac2"] .kaartje, .sectie[style*="--bg:#007ac2"] .kaartje { align-items: center; }
.kol[style*="--bg:#007ac2"] .kaartje-ico { width: 52px; height: 52px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.kol[style*="--bg:#007ac2"] .kaartje-ico .ico-svg { width: 24px; height: 24px; }
.kol[style*="--bg:#007ac2"] .kaartje-titel, .kol[style*="--bg:#007ac2"] .kaartje .tekst { color: #fff; }
.kol[style*="--bg:#007ac2"] .kaartje .tekst a { color: #fff; font-weight: 700; }

/* Veelgestelde vragen: losse vlakken, geen lijnen */
.vragen { margin: 0 0 18px; display: grid; gap: 8px; }
.vraag { background: var(--grijs); border-radius: var(--hoek); }
.vraag summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 600; color: var(--donker); font-size: 16px; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--blauw); }
.vraag summary .plus { flex: 0 0 auto; width: 28px; height: 28px; padding: 6px; background: var(--blauw); color: #fff; border-radius: var(--hoek); transition: transform .2s; }
.vraag[open] summary .plus { transform: rotate(45deg); }
.vraag .tekst { padding: 0 20px 18px; }

/* Formulieren */
.formulier { display: grid; gap: 16px; background: #fff; }
.formulier label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--kop); }
.formulier input[type="text"], .formulier input[type="tel"], .formulier input[type="email"], .formulier select, .formulier textarea {
  width: 100%; min-height: 52px; padding: 0 16px; font: inherit; font-size: 16px; font-weight: 400; color: var(--kop); background: #fff; border: 1px solid var(--rand); border-radius: var(--hoek); }
.formulier textarea { padding: 14px 16px; min-height: 120px; resize: vertical; }
.formulier ::placeholder { color: #9aa4b2; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(0, 122, 194, .14); }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulier .akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; color: var(--tekst); }
.formulier .akkoord input { margin-top: 4px; accent-color: var(--blauw); }
.verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Logo's van partners */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 48px; align-items: center; justify-items: center; margin: 0 0 18px; }
.logos img { max-height: 80px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.logos img:hover { filter: none; opacity: 1; }

/* Tekstpagina's */
.tekstpagina { max-width: var(--leesbreedte); }
.tekstpagina h2 { font-size: 26px; margin-top: 40px; }
.tekstpagina h2:first-child { margin-top: 0; }
.tekstpagina .linkknop { color: var(--blauw); font-weight: 600; text-decoration: none; }

/* Voet */
.voet { background: var(--voet); color: #aeb5c0; margin-top: 72px; }
.voet h2 { color: #fff; font-size: 17px; letter-spacing: 0; margin: 0 0 18px; }
.voet h2 a { color: #fff; }
.voet a { color: #d3d8df; }
.voet a:hover { color: #fff; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: 9px; font-size: 15px; line-height: 1.4; }
.voet-boven { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr; gap: 56px; padding-top: 72px; padding-bottom: 56px; }
.voet-over h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.voet-over p { font-size: 15.5px; max-width: 36em; }
.voet-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.voet-kolommen.vier { grid-template-columns: repeat(4, 1fr); }
.voet-knop { display: inline-flex; align-items: center; gap: 10px; background: var(--rood); color: #fff !important; font-weight: 600; font-size: 15px; padding: 11px 18px; margin: 0 0 10px; }
.voet-knop:hover { background: var(--rood-donker); }
.voet-knop .ico-svg { width: 18px; height: 18px; }
.voet-contact { display: flex; flex-direction: column; align-items: flex-start; }
.voet-sitemap { padding-top: 8px; padding-bottom: 56px; }
.voet-sitemap h2 { color: #fff; }
.voet-sitemap li { font-size: 14px; }
.voet-onder { background: var(--voet-onder); font-size: 13px; }
.voet-onder .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }

/* WhatsApp */
.whatsapp { position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); z-index: 40; transition: transform .15s; }
.whatsapp svg { width: 30px; height: 30px; }
.whatsapp:hover { color: #fff; transform: scale(1.06); }

/* Cookiemelding */
.cookiemelding { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 540px; background: #fff; color: var(--tekst); box-shadow: 0 16px 48px rgba(2, 30, 45, .22); padding: 22px 24px; z-index: 50; font-size: 15px; border-radius: var(--hoek); }
.cookiemelding p { margin: 0 0 14px; }
.cookiemelding .knoppen { margin: 0; gap: 10px; }
.cookiemelding .knop { padding: 12px 22px; }
.cookiemelding .knop-wit { background: var(--grijs); }

/* Zichtbaarheid per schermbreedte (Avada: small = 640px) */
.alleen-mobiel { display: none; }

/* Tablet */
@media (max-width: 1200px) {
  h1, .hero-titel { font-size: 50px; }
  h2 { font-size: 40px; }
  .kop-nav ul a { padding: 8px 10px; }
}
@media (max-width: 1024px) {
  .kop { top: 0; }
  .menu-knop { display: inline-flex; }
  .kop-contact { display: none; }
  .kop-boven .wrap { height: 72px; }
  .logo img { width: 220px; }
  .kop-nav { display: none; }
  .kop.open .kop-nav { display: block; max-height: calc(100vh - 72px); overflow-y: auto; }
  .kop.open .menu-knop .ico-svg:first-child { display: none; }
  .kop.open .menu-knop .sluit { display: block; }
  .kop-nav .wrap { flex-direction: column; align-items: stretch; height: auto; padding-top: 10px; padding-bottom: 20px; }
  .kop-nav ul { flex-direction: column; gap: 2px; margin-left: 0; }
  .kop-nav ul a { padding: 14px 12px; font-size: 16px; }
  .menu-extra { display: block; }
  .kol[style*="--w:33"], .kol[style*="--w:25%"] { flex-basis: 50%; max-width: 50%; }
  .voet-boven { grid-template-columns: 1fr 1fr; }
  .voet-kolommen.vier { grid-template-columns: repeat(2, 1fr); }
  h1, .hero-titel { font-size: 44px; }
  h2 { font-size: 36px; }
  h3 { font-size: 28px; }
}
/* Mobiel */
@media (max-width: 800px) {
  :root { --zij: 20px; }
  body { font-size: 16px; }
  .kol, .kol[style*="--w:33"], .kol[style*="--w:25%"] { flex-basis: 100%; max-width: 100%; }
  .kol.leeg { display: none; }
  .sectie { padding-top: min(var(--pt, 0px), 48px); padding-bottom: min(var(--pb, 0px), 48px); }
  .sectie.vol .kol[style*="--bg"] .kol-in { padding: 40px 22px; }
  .kol-in { padding: var(--padm, 0); }
  .kol.kaart > .kol-in { padding: 26px 22px 12px; }
  .hero-in { padding: 56px var(--zij) 60px; min-height: 0; }
  .hero::before { background: linear-gradient(180deg, rgba(2, 30, 45, .55), rgba(2, 30, 45, .72)); }
  .hero-tekst { font-size: 17px; }
  .veld-rij { grid-template-columns: 1fr; }
  .kaartjes.k2, .kaartjes.k3, .kaartjes.k4 { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .voet-boven, .voet-kolommen.vier { grid-template-columns: 1fr; }
  .voet-boven { gap: 36px; padding-top: 56px; }
  .voet-kolommen { grid-template-columns: 1fr 1fr; }
  h1, .hero-titel { font-size: 34px; }
  h2 { font-size: 29px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
  .titel { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .knop { padding: 15px 24px; }
  .knoppen .knop { width: 100%; }
}
@media (max-width: 640px) {
  .tekst table, .tekst tbody, .tekst tr, .tekst td, .tekst th { display: block; width: 100%; padding: 0; }
  .niet-mobiel { display: none !important; }
  .alleen-mobiel { display: block; }
  .rij > .alleen-mobiel { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}