/* Danny's Autorijschool, Brevias-stijl. Licht/donker via [data-thema] op <html>. */
:root {
  --navy: #0B314D;
  --kop: #0B314D;
  --accent: #015A9D;
  --accent-hover: #0B314D;
  --accent-tekst: #015A9D;
  --ijs: #E6F2FF;
  --ijs-tekst: #0B314D;
  --ijs-hover-bg: #0B314D;
  --tekst: #1C1C1C;
  --muted: #5A6B7B;
  --bg: #FFFFFF;
  --bg-alt: #F3F8FD;
  --kaart: #FFFFFF;
  --rand: #DCE6EF;
  --grad: linear-gradient(135deg, #104165 0%, #002846 100%);
  --grad-top: linear-gradient(180deg, #104165 90%, #002846 100%);
  --wa: #25D366;
  --ster: #F5A623;
  --schaduw: 0 0 20px rgba(11, 49, 77, .06);
  --schaduw-hover: 0 4px 28px rgba(11, 49, 77, .10);
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Aptos als het apparaat het heeft (Office/Windows 11), anders Inter (lijkt erop, gratis webfont) */
  --serif: "Aptos Display", "Aptos", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Aptos", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad-y: 100px;
  --pad-x: 100px;
  color-scheme: light;
}
:root[data-thema="donker"] {
  --navy: #0B314D;
  --kop: #F2F6FA;
  --accent: #3A95E0;
  --accent-hover: #6BB3F0;
  --accent-tekst: #6BB3F0;
  --ijs: #12395A;
  --ijs-tekst: #DCEBFA;
  --ijs-hover-bg: #3A95E0;
  --tekst: #C9D6E2;
  --muted: #8FA6BA;
  --bg: #061826;
  --bg-alt: #0A2134;
  --kaart: #0C2538;
  --rand: #1A3A54;
  --grad: linear-gradient(135deg, #0A2A44 0%, #01111F 100%);
  --grad-top: linear-gradient(180deg, #0A2A44 90%, #01111F 100%);
  --schaduw: 0 0 0 1px #1A3A54;
  --schaduw-hover: 0 0 0 1px #2B5778, 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 400 16px/1.8 var(--sans); overflow-x: hidden;
  transition: background-color .3s, color .3s;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; color: var(--kop); margin: 0; }
h1 { font-size: 55px; line-height: 1.15; }
h2 { font-size: 45px; line-height: 1.15; }
h3 { font-size: 25px; line-height: 38px; }
h1 em, h2 em, h3 em, .cta-kop em { font-style: normal; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 5px; }
.skip:focus { top: 12px; }
.binnen { max-width: 1275px; margin: 0 auto; }
.eyebrow { font-size: 16px; line-height: 1; color: var(--accent-tekst); margin-bottom: 10px; }
.klein { font-size: 14px; color: var(--muted); }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff; text-decoration: none;
  font: 400 15px/22px var(--sans); padding: 15px 22px; border: 0; border-radius: 999px;
  cursor: pointer; transition: background-color .3s ease, color .3s ease;
  white-space: nowrap;
}
.knop:hover, .knop:focus-visible { background: var(--accent-hover); color: #fff; }
:root[data-thema="donker"] .knop:hover { color: #061826; }
.knop .pijl { width: 18px; height: 18px; transition: transform .3s ease; }
.knop:hover .pijl { transform: translateX(3px); }
.knop-ijs { background: var(--ijs); color: var(--ijs-tekst); }
.knop-ijs:hover, .knop-ijs:focus-visible { background: var(--ijs-hover-bg); color: #fff; }
.knop-op-navy:hover, .knop-op-navy:focus-visible { background: #fff; color: #0B314D; }
:root[data-thema="donker"] .knop-op-navy:hover { color: #0B314D; }
.knoprij { display: flex; flex-wrap: wrap; gap: 10px; }
.alleen-smal { display: none; align-self: flex-start; }

/* Vinklijst */
.vinklijst li { display: flex; gap: 7px; align-items: flex-start; }
.vinklijst li + li { margin-top: 5px; }
.vinklijst .ic { margin-top: 3.5px; color: var(--kop); }
:root[data-thema="donker"] .vinklijst .ic { color: var(--accent); }

/* Topbalk */
.topbalk { background: var(--grad-top); color: #fff; font-size: 14px; }
.topbalk-in { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--pad-x); min-height: 42px; gap: 20px; max-width: none; }
.topbalk .ic { width: 17px; height: 17px; }
.topbalk-plek { display: flex; align-items: center; gap: 6px; }
.topbalk-rechts { display: flex; align-items: center; gap: 8px; }
.topbalk a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 6px 8px; border-bottom: 2px solid transparent; transition: background-color .3s, border-color .3s; }
.topbalk a:hover { background: #0B314D; border-bottom-color: #015A9D; }
.topbalk-wa .ic { color: var(--wa); }

/* Navigatie */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: box-shadow .3s, background-color .3s; }
.nav.vast { box-shadow: 0 2px 20px rgba(0, 0, 0, .06); }
:root[data-thema="donker"] .nav.vast { box-shadow: 0 1px 0 var(--rand); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--pad-x); max-width: none; }
.logo { display: block; transition: transform .3s; padding: 14px 0; }
.logo:hover { transform: scale(1.04); }
.logo img { width: 200px; }
.logo-donker { display: none !important; }
:root[data-thema="donker"] .logo-licht { display: none !important; }
:root[data-thema="donker"] .logo-donker { display: block !important; }
.menu { display: flex; }
.menu a { position: relative; display: block; white-space: nowrap; padding: 35px 11px; font-size: 15px; line-height: 22px; text-decoration: none; color: var(--kop); }
.menu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 26px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.nav-acties { display: flex; align-items: center; gap: 10px; }
.themaknop, .hamburger { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rand); background: transparent; color: var(--kop); cursor: pointer; transition: background-color .3s, border-color .3s; }
.themaknop:hover, .hamburger:hover { background: var(--ijs); }
.ic-maan { display: none; }
:root[data-thema="donker"] .ic-zon { display: none; }
:root[data-thema="donker"] .ic-maan { display: block; }
.hamburger { display: none; }

/* Mobiel menu */
.mobielmenu { position: fixed; inset: 0; z-index: 90; background: var(--bg); padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 30px; opacity: 0; transform: translateY(-12px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mobielmenu[hidden] { display: none; }
.mobielmenu.open { opacity: 1; transform: none; }
.mobielmenu-kop { display: flex; justify-content: space-between; align-items: center; }
.mobielmenu-kop img { width: 150px; }
.sluit { width: 44px; height: 44px; border: 1px solid var(--rand); border-radius: 50%; background: none; color: var(--kop); display: grid; place-items: center; cursor: pointer; }
.mobielmenu ul a { display: block; font: 24px/1.4 var(--serif); color: var(--kop); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.mobielmenu-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
body.menu-open { overflow: hidden; }

/* Held */
.held { display: flex; min-height: min(80vh, 860px); }
.held-tekst { width: 58%; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 35px; padding: 100px 100px 100px max(calc((100vw - 1400px) / 2), 100px); }
.held-foto { width: 42%; flex: none; position: relative; overflow: hidden; }
.held-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.googlescore { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); text-decoration: none; }
.googlescore strong { color: var(--kop); font-weight: 500; }
.googlescore:hover { color: var(--accent-tekst); }
.sterren { display: inline-flex; gap: 2px; }
.sterren svg { width: 16px; height: 16px; fill: var(--ster); }

/* Pakketten */
.pakketten { background: var(--grad); padding: var(--pad-y) var(--pad-x) 350px; color: #fff; }
.sectiekop { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 35px; }
.sectiekop.onder { align-items: flex-end; }
h2.licht { color: #fff; }
.pakket-carousel { position: relative; }
.pakket-carousel .swiper { overflow: hidden; overflow-x: clip; padding: 10px 0 14px; margin: -10px 0 -14px; }
.pakket-carousel .swiper-slide { height: auto; }
.pakketkaart { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; padding: 40px; background: var(--kaart); border-radius: 5px; box-shadow: var(--schaduw); text-decoration: none; color: var(--tekst); transition: transform .3s ease, box-shadow .3s ease; }
.pakketkaart:hover { transform: translateY(-5px); box-shadow: var(--schaduw-hover); }
.pakket-ic { width: 28px; height: 28px; color: var(--accent); margin-bottom: 15px; }
.pakketkaart h3 { margin-bottom: 4px; }
.prijs { font-size: 15px; line-height: 22px; color: var(--muted); }
.kaartlink { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--accent-tekst); }
.kaartlink .ic { width: 15px; height: 15px; transition: transform .3s; }
.pakketkaart:hover .kaartlink .ic { transform: translateX(3px); }
.carouselpijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .3s; }
.carouselpijl:hover { background: #0B314D; }
.carouselpijl.vorige { left: -25px; }
.carouselpijl.vorige .ic { transform: rotate(180deg); }
.carouselpijl.volgende { right: -25px; }
.pakketten .swiper-pagination { display: none; position: static; margin-top: 20px; }
.swiper-pagination-bullet { background: #fff; opacity: .4; }
.swiper-pagination-bullet-active { opacity: 1; }

/* CBR overlap */
.cbr { display: flex; flex-direction: column; margin-top: -200px; padding: 0 var(--pad-x); max-width: calc(1275px + 2 * var(--pad-x)); margin-left: auto; margin-right: auto; position: relative; z-index: 2; }
.cbr-foto { width: 55%; min-height: 450px; border-radius: 5px; overflow: hidden; box-shadow: var(--schaduw); position: relative; }
.cbr-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cbr-kaart { width: 55%; align-self: flex-end; margin-top: -400px; background: var(--kaart); border-radius: 5px; box-shadow: var(--schaduw); padding: 50px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.cbr-kaart .eyebrow { margin-bottom: -10px; }
.cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.cijfer { background: var(--bg-alt); border-radius: 5px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.cijfer .getal { font: 45px/1 var(--serif); color: var(--kop); }
.cijfer.hoofd { background: var(--accent); color: rgba(255, 255, 255, .85); }
.cijfer.hoofd .getal { color: #fff; }
.cijfer.ref .getal { color: var(--muted); }
.bron { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Danny */
.danny { padding: var(--pad-y) var(--pad-x); }
.danny-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: center; }
.portret { margin: 0; position: relative; height: 520px; border-radius: 5px; overflow: hidden; box-shadow: var(--schaduw); }
.portret img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.portret::before { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 20, 40, .45)); }
.portret figcaption { position: absolute; left: 0; bottom: 20px; background: #fff; color: #0B314D; padding: 2px 15px 2px 12px; border-radius: 0 5px 5px 0; }
.danny-tekst { display: flex; flex-direction: column; gap: 20px; }
.danny-tekst .intro { font: 22px/1.6 var(--serif); color: var(--kop); }
.vinklijst.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.vinklijst.twee li + li { margin-top: 0; }

/* Reviews */
.reviews { padding: 0 0 calc(var(--pad-y) + 0px); }
.reviews .binnen { padding: 0 var(--pad-x); max-width: calc(1275px + 2 * var(--pad-x)); }
.review-carousel .swiper { padding: 0 0 10px; }
.reviewkaart { margin: 0; height: auto; min-height: 300px; display: flex; flex-direction: column; gap: 18px; padding: 35px; background: var(--ijs); border-radius: 5px; }
:root[data-thema="donker"] .reviewkaart { background: var(--kaart); box-shadow: var(--schaduw); }
.reviewkaart blockquote { margin: 0; flex: 1; font: 19px/1.6 var(--serif); color: var(--kop); }
.reviewkaart figcaption { font-weight: 500; color: var(--kop); }
.reviewkaart figcaption span { font-weight: 400; color: var(--muted); }

/* Contact + footer overlap */
.contact { padding: 0 var(--pad-x); position: relative; z-index: 2; margin-bottom: -300px; }
.contactkaart { display: grid; grid-template-columns: 5fr 7fr; background: var(--kaart); border-radius: 5px; box-shadow: 0 0 40px rgba(0, 0, 0, .08); overflow: hidden; }
:root[data-thema="donker"] .contactkaart { box-shadow: 0 0 0 1px var(--rand), 0 20px 50px rgba(0, 0, 0, .4); }
.kaart-map { min-height: 420px; position: relative; }
.kaart-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
:root[data-thema="donker"] .kaart-map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.6); }
.kaart-info { padding: 60px; display: flex; flex-direction: column; gap: 35px; }
.info-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.info-rij h3, .terugbel h3 { font-size: 22px; line-height: 1.4; margin-bottom: 10px; }
.infolijst li { display: flex; gap: 10px; align-items: flex-start; }
.infolijst li + li { margin-top: 8px; }
.infolijst .ic { margin-top: 4px; color: var(--accent); width: 18px; height: 18px; }
.infolijst .ic.wa { color: var(--wa); }
.infolijst a { text-decoration: none; transition: color .3s; word-break: break-word; }
.infolijst a:hover { color: var(--accent-tekst); text-decoration: underline; }
.terugbel { border-top: 1px solid var(--rand); padding-top: 30px; }
.terugbel .klein { margin-bottom: 18px; }
.velden { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.velden label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.velden .breed { grid-column: 1 / -1; }
.velden input, .velden select, .velden textarea { font: 15px/1.5 var(--sans); color: var(--tekst); background: var(--bg); border: 1px solid var(--rand); border-radius: 5px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; width: 100%; }
.velden input:focus, .velden select:focus, .velden textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1, 90, 157, .2); }
.velden .pot { position: absolute; left: -9999px; }
.form-voet { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }

.voet { background: var(--grad); color: #fff; padding: 375px var(--pad-x) 0; }
.voet-rij { display: flex; flex-wrap: wrap; gap: 50px; justify-content: space-between; }
.voet-merk { max-width: 280px; display: flex; flex-direction: column; gap: 18px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.voet-merk img { width: 190px; }
.voet-titel { font: 22px/1.4 var(--serif); margin-bottom: 12px; }
.voet-kol a { color: rgba(255, 255, 255, .75); text-decoration: none; font-size: 15px; transition: color .3s; }
.voet-kol a:hover { color: #fff; text-decoration: underline; }
.voet-kol li + li { margin-top: 4px; }
.voet-cta { background: #015A9D; border-radius: 5px; padding: 30px; max-width: 380px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
:root[data-thema="donker"] .voet-cta { background: #0C3A62; }
.cta-kop { font: 25px/38px var(--serif); }
.voet-cta .knop-ijs { background: #E6F2FF; color: #0B314D; margin-top: 10px; }
.voet-cta .knop-ijs:hover { background: #0B314D; color: #fff; }
.voet-cta .knop-ijs .ic { color: #128C4A; }
.voet-cta .knop-ijs:hover .ic { color: var(--wa); }
.voet-onder { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 100px; padding: 25px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: rgba(255, 255, 255, .7); }
.voet-onder a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.voet-onder a:hover { color: #fff; text-decoration: underline; }

/* Reveal (alleen met JS) */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal="rechts"] { transform: translateX(60px); transition-duration: 1.4s; }
.js [data-reveal].zichtbaar { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }

/* Tablet */
@media (max-width: 1260px) {
  :root { --pad-y: 75px; --pad-x: 30px; }
  h1 { font-size: 45px; } h2 { font-size: 38px; } h3 { font-size: 24px; }
  .menu, .nav-bel { display: none; }
  .hamburger { display: grid; }
  .logo img { width: 170px; }
  .held { flex-direction: column; min-height: 0; }
  .held-tekst, .held-foto { width: 100%; }
  .held-tekst { padding: 75px 30px; }
  .held-foto { min-height: 420px; }
  .pakketten { padding-bottom: 275px; }
  .cbr-foto, .cbr-kaart { width: 80%; }
  .cbr-kaart { margin-top: -200px; padding: 40px; }
  .danny-grid { gap: 40px; }
  .contactkaart { grid-template-columns: 1fr; }
  .kaart-map { min-height: 300px; order: 2; }
  .kaart-info { padding: 50px; }
  .voet { padding-top: 375px; }
  .voet-onder { margin-top: 75px; }
}

/* Mobiel */
@media (max-width: 767px) {
  :root { --pad-y: 50px; --pad-x: 20px; }
  body { font-size: 15px; }
  h1 { font-size: 34px; } h2 { font-size: 30px; } h3 { font-size: 23px; }
  .knop { font-size: 14px; padding: 14px 20px; }
  .topbalk-plek, .topbalk-wa { display: none; }
  .topbalk-in { justify-content: center; }
  .nav-proef { display: none; }
  .logo img { width: 150px; }
  .held-tekst { padding: 40px 20px 50px; gap: 25px; }
  .held-foto { min-height: 300px; }
  .vinklijst .ic { width: 18px; height: 18px; margin-top: 4px; }
  .knoprij { gap: 6px; }
  .pakketten { padding-bottom: 250px; }
  .sectiekop { margin-bottom: 20px; }
  .alleen-breed, .carouselpijl { display: none; }
  .alleen-smal { display: inline-flex; }
  .pakketten .alleen-smal { margin: 25px auto 0; display: flex; width: fit-content; }
  .pakketten .swiper-pagination { display: block; }
  .pakketkaart { padding: 35px 25px; gap: 20px; }
  .cbr { margin-top: -180px; }
  .cbr-foto { width: 100%; min-height: 240px; }
  .cbr-kaart { width: 100%; margin-top: -60px; padding: 40px 20px; }
  .cijfer .getal { font-size: 36px; }
  .danny-grid { grid-template-columns: 1fr; }
  .portret { height: 420px; }
  .danny-tekst .intro { font-size: 19px; }
  .vinklijst.twee { grid-template-columns: 1fr; }
  .reviewkaart { padding: 28px 24px; min-height: 260px; }
  .contact { margin-bottom: 0; padding: 0; }
  .contactkaart { border-radius: 0; }
  .kaart-info { padding: 50px 20px; }
  .info-rij, .velden { grid-template-columns: 1fr; }
  .voet { padding-top: 50px; }
  .voet-rij { gap: 35px; }
  .voet-onder { margin-top: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

/* ===================== Subpagina's ===================== */
.sub .voet-kort { padding-top: var(--pad-y); }
.kruimel { font-size: 13px; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.kruimel a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.kruimel a:hover { color: #fff; text-decoration: underline; }
.kruimel span { color: #fff; }

/* Paginakop: navy band, foto rechts die naar de volgende sectie overloopt */
.paginakop { background: var(--grad); color: rgba(255, 255, 255, .85); padding: 80px var(--pad-x) 90px; }
.paginakop.met-foto { padding-bottom: 0; }
.paginakop-in { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: end; }
.paginakop.met-foto .paginakop-in { grid-template-columns: 7fr 5fr; }
.paginakop-tekst { padding-bottom: 0; }
.paginakop.met-foto .paginakop-tekst { padding-bottom: 90px; }
.paginakop .eyebrow { color: #8CC4F2; }
.paginakop h1 { color: #fff; max-width: 15ch; }
.paginakop.met-foto h1 { max-width: none; }
.paginakop-intro { margin-top: 22px; max-width: 640px; font-size: 17px; display: flex; flex-direction: column; gap: 14px; }
.paginakop-intro a:not(.knop) { color: #fff; }
.paginakop-intro .knoprij { margin-top: 10px; }
.paginakop-foto { margin: 0 0 -60px; border-radius: 5px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .18); aspect-ratio: 4 / 3; position: relative; z-index: 2; }
.paginakop-foto img { width: 100%; height: 100%; object-fit: cover; }
.paginakop + .blok, .paginakop + section { padding-top: calc(var(--pad-y) + 30px); }

/* Inhoudsblokken */
.blok { padding: var(--pad-y) var(--pad-x); }
.blok.alt { background: var(--bg-alt); }
.blok .binnen > .prose, .sectie-intro { max-width: 820px; }
.sectie-intro { margin-bottom: 35px; display: flex; flex-direction: column; gap: 14px; }
.sectie-intro:empty { display: none; }
.prose { display: flex; flex-direction: column; gap: 16px; }
.prose h2, .sectie-intro h2 { margin-bottom: 4px; }
.prose h2:not(:first-child) { margin-top: 30px; }
.prose h3 { margin-top: 14px; }
.prose h4 { font: 500 17px/1.5 var(--sans); color: var(--kop); margin: 10px 0 0; }
.prose ul, .prose ol, .infokaart ul { display: flex; flex-direction: column; gap: 6px; }
.prose ul li, .infokaart ul li { position: relative; padding-left: 26px; }
.prose ul li::before, .infokaart ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose ol li { padding-left: 4px; }
.prose a:not(.knop), .sectie-intro a:not(.knop), .infokaart a:not(.knop) { color: var(--accent-tekst); text-underline-offset: 3px; }
.prose a:not(.knop):hover { color: var(--kop); }
.prose blockquote { margin: 10px 0; padding: 24px 28px; background: var(--ijs); border-left: 3px solid var(--accent); border-radius: 0 5px 5px 0; font: 19px/1.6 var(--serif); color: var(--kop); }
:root[data-thema="donker"] .prose blockquote { background: var(--kaart); }
.prose img { border-radius: 5px; box-shadow: var(--schaduw); }
.prose strong, .prose b { color: var(--kop); font-weight: 500; }
.prose .knoprij, .sectie-intro .knoprij { margin-top: 10px; }
.prose p.rij, .sectie-intro p.rij { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.prose p.rij .deel:last-child, .prose p.rij > :last-child { color: var(--kop); font-weight: 500; text-align: right; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rand); }

/* Kaartgrid (h3-groepen) */
.kaartgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.infokaart { background: var(--kaart); border-radius: 5px; box-shadow: var(--schaduw); padding: 35px; display: flex; flex-direction: column; gap: 12px; color: var(--tekst); text-decoration: none; }
.blok:not(.alt) .infokaart { background: var(--bg-alt); box-shadow: none; }
:root[data-thema="donker"] .blok:not(.alt) .infokaart { background: var(--kaart); box-shadow: var(--schaduw); }
.infokaart h3 { font-size: 23px; line-height: 1.35; }
.infokaart img { border-radius: 5px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; margin-bottom: 8px; }
.infokaart.klikbaar { justify-content: space-between; gap: 30px; transition: transform .3s ease, box-shadow .3s ease; }
.infokaart.klikbaar > div { display: flex; flex-direction: column; gap: 12px; }
.infokaart.klikbaar:hover { transform: translateY(-5px); box-shadow: var(--schaduw-hover); }
.infokaart.klikbaar:hover .kaartlink .ic { transform: translateX(3px); }

/* Tekst + foto naast elkaar */
.split { display: grid; grid-template-columns: 7fr 5fr; gap: 60px; align-items: center; }
.split-foto { margin: 0; border-radius: 5px; overflow: hidden; box-shadow: var(--schaduw); }
.split-foto img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ-accordion */
.prose details { background: var(--kaart); border: 1px solid var(--rand); border-radius: 5px; transition: border-color .3s; }
.blok.alt .prose details { border-color: transparent; box-shadow: var(--schaduw); }
.prose details[open] { border-color: var(--accent); }
.prose summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative; font-weight: 500; color: var(--kop); }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); transition: transform .3s ease; }
.prose details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.prose details > :not(summary) { padding: 0 22px 18px; }
.prose details + details { margin-top: -6px; }

/* CTA-band onderaan subpagina's */
.cta-band { padding: var(--pad-y) var(--pad-x); }
.cta-band-in { background: #015A9D; border-radius: 5px; padding: 50px; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; color: rgba(255, 255, 255, .85); }
:root[data-thema="donker"] .cta-band-in { background: #0C3A62; }
.cta-band-tekst { max-width: 620px; display: flex; flex-direction: column; gap: 10px; }
.cta-band .knop-ijs { background: #E6F2FF; color: #0B314D; }
.cta-band .knop-ijs:hover { background: #0B314D; color: #fff; }
.cta-band .knop-ijs .ic { color: #128C4A; }
.cta-band .knop-op-navy { background: #0B314D; }
.cta-band .knop-op-navy:hover { background: #fff; color: #0B314D; }
.cta-band + .voet-kort { margin-top: 0; }

/* Tarieven */
.pakketten-sub { padding-bottom: 300px; }
.prijsgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.prijskaart { position: relative; background: var(--kaart); color: var(--tekst); border-radius: 5px; padding: 40px 30px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s ease, box-shadow .3s ease; }
.prijskaart:hover { transform: translateY(-5px); box-shadow: var(--schaduw-hover); }
.prijskaart .bedrag { font: 45px/1 var(--serif); color: var(--kop); margin: 6px 0 4px; }
.prijskaart .vinklijst { flex: 1; }
.prijskaart .knop { justify-content: center; }
.prijskaart.uitgelicht { box-shadow: 0 0 0 2px #3A95E0; }
.prijskaart .label { position: absolute; top: 0; left: 30px; transform: translateY(-50%); background: #3A95E0; color: #fff; font-size: 12px; letter-spacing: .04em; padding: 3px 12px; border-radius: 999px; }
.pakket-noot { margin-top: 28px; max-width: 760px; color: rgba(255, 255, 255, .75); font-size: 15px; }
.tarief-overlap { margin-top: -220px; padding: 0 var(--pad-x); position: relative; z-index: 2; }
.tarief-kaart { max-width: 760px; margin-left: auto; margin-right: max(0px, calc((100% - 1275px) / 2)); background: var(--kaart); border-radius: 5px; box-shadow: 0 0 40px rgba(0, 0, 0, .08); padding: 50px; }
:root[data-thema="donker"] .tarief-kaart { box-shadow: 0 0 0 1px var(--rand); }
.tarief-kaart h2 { margin-bottom: 20px; }
.prijstabel { width: 100%; border-collapse: collapse; }
.prijstabel th, .prijstabel td { padding: 14px 0; border-bottom: 1px solid var(--rand); text-align: left; font-weight: 400; }
.prijstabel td { text-align: right; font: 22px/1 var(--serif); color: var(--kop); white-space: nowrap; }

/* Reviews-pagina */
.reviewgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Contact-pagina */
.inschrijf { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.inschrijf > div:first-child { max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.contact-ruimte { height: var(--pad-y); background: var(--bg-alt); }
.sub .contact { background: linear-gradient(var(--bg-alt) 50%, transparent 50%); }

@media (max-width: 1260px) {
  .paginakop { padding-top: 60px; }
  .paginakop.met-foto .paginakop-in { grid-template-columns: 1fr; gap: 30px; }
  .paginakop.met-foto .paginakop-tekst { padding-bottom: 0; }
  .paginakop-foto { max-width: 640px; }
  .split { grid-template-columns: 1fr; gap: 35px; }
  .prijsgrid { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
  .reviewgrid { grid-template-columns: repeat(2, 1fr); }
  .tarief-kaart { max-width: none; }
}
@media (max-width: 767px) {
  .paginakop { padding: 40px 20px 50px; }
  .paginakop.met-foto { padding-bottom: 0; }
  .paginakop-intro { font-size: 16px; }
  .paginakop-foto { margin-bottom: -40px; }
  .infokaart { padding: 28px 24px; }
  .prijsgrid, .reviewgrid { grid-template-columns: 1fr; }
  .pakketten-sub { padding-bottom: 240px; }
  .tarief-overlap { margin-top: -190px; padding: 0 10px; }
  .tarief-kaart { padding: 35px 20px; }
  .cta-band { padding: var(--pad-y) 0 0; }
  .cta-band-in { border-radius: 0; padding: 40px 20px; }
  .sub .contact { background: none; }
}
.prose:has(.kaartgrid) { max-width: none !important; }
.prose .kaartgrid { margin: 10px 0; }
.infokaart.klikbaar p:not(:first-child) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.prose dl, .sectie-intro dl, .cbr-kaart dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; margin: 0; max-width: 620px; }
.prose dt, .prose dd, .sectie-intro dt, .sectie-intro dd, .cbr-kaart dt, .cbr-kaart dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.prose dt, .sectie-intro dt, .cbr-kaart dt { color: var(--muted); padding-right: 24px; }
.prose dd, .sectie-intro dd, .cbr-kaart dd { color: var(--kop); font-weight: 500; }

/* Lesauto: kop met staart, foto + kaart overlappen zoals het CBR-blok */
.paginakop.met-staart { padding-bottom: 260px; }
.lesauto-overlap { margin-top: -200px; }
.lesauto-overlap .cbr-kaart .prose { gap: 12px; }
.lesauto-overlap dl { width: 100%; }
@media (max-width: 1260px) { .paginakop.met-staart { padding-bottom: 240px; } }
@media (max-width: 767px) { .paginakop.met-staart { padding-bottom: 220px; } .lesauto-overlap { margin-top: -180px; } }

/* Veelgestelde vragen */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faq-in { display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: start; }
.faq-nav { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 6px; }
.faq-nav ul { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.faq-nav a { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 5px; text-decoration: none; color: var(--kop); transition: background-color .3s, color .3s; }
.faq-nav a span { font-size: 13px; min-width: 26px; text-align: center; padding: 1px 8px; border-radius: 999px; background: var(--ijs); color: var(--ijs-tekst); }
.faq-nav a:hover, .faq-nav a.actief { background: var(--ijs); }
.faq-nav a.actief { color: var(--accent-tekst); }
.faq-hulp { background: var(--grad); color: rgba(255, 255, 255, .85); border-radius: 5px; padding: 26px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.faq-hulp .cta-kop { color: #fff; font-size: 22px; line-height: 1.3; }
.faq-hulp .knop { margin-top: 8px; background: #E6F2FF; color: #0B314D; }
.faq-hulp .knop:hover { background: #fff; color: #0B314D; }
.faq-zoek { position: relative; }
.faq-zoek > .ic { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 22px; height: 22px; pointer-events: none; }
.faq-zoek input { width: 100%; font: 16px/1.4 var(--sans); color: var(--tekst); background: var(--kaart); border: 1px solid var(--rand); border-radius: 999px; padding: 18px 56px 18px 56px; box-shadow: var(--schaduw); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.faq-zoek input::-webkit-search-cancel-button { display: none; }
.faq-zoek input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(1, 90, 157, .15); }
.faq-wis { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ijs); color: var(--ijs-tekst); display: grid; place-items: center; cursor: pointer; }
.faq-wis[hidden] { display: none; }
.faq-teller { font-size: 14px; color: var(--muted); margin: 14px 0 10px 22px; }
.faq-groep { scroll-margin-top: 120px; }
.faq-groep + .faq-groep { margin-top: 40px; }
.faq-groep h2 { font-size: 30px; margin-bottom: 16px; }
.faq-item { background: var(--kaart); border-radius: 5px; box-shadow: var(--schaduw); transition: box-shadow .3s; }
.faq-item + .faq-item { margin-top: 8px; }
.faq-item[open] { box-shadow: 0 0 0 1px var(--accent), var(--schaduw-hover); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; font-weight: 500; color: var(--kop); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-tekst); }
.faq-item summary i { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--ijs); transition: background-color .3s, transform .3s var(--ease); }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ijs-tekst); transform: translate(-50%, -50%); transition: transform .3s var(--ease), background-color .3s; }
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i { background: var(--accent); transform: rotate(180deg); }
.faq-item[open] summary i::before, .faq-item[open] summary i::after { background: #fff; }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-antwoord { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.faq-antwoord a { color: var(--accent-tekst); }
.faq-antwoord ul { display: flex; flex-direction: column; gap: 4px; }
.faq-antwoord ul li { position: relative; padding-left: 20px; }
.faq-antwoord ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.faq mark { background: rgba(58, 149, 224, .25); color: inherit; border-radius: 2px; padding: 0 1px; }
.faq-geen { text-align: center; background: var(--kaart); border-radius: 5px; box-shadow: var(--schaduw); padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.faq-geen[hidden], .faq [hidden] { display: none !important; }
@media (max-width: 1260px) {
  .faq-in { grid-template-columns: 1fr; gap: 30px; }
  .faq-nav { position: static; }
  .faq-nav ul { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
  .faq-nav a { background: var(--kaart); box-shadow: var(--schaduw); border-radius: 999px; gap: 8px; padding: 8px 14px; }
  .faq-nav .eyebrow, .faq-hulp { display: none; }
}
@media (max-width: 767px) {
  .faq-zoek input { padding: 15px 50px 15px 50px; font-size: 15px; }
  .faq-zoek > .ic { left: 18px; }
  .faq-item summary { padding: 16px 18px; }
  .faq-antwoord { padding: 0 18px 18px; }
  .faq-groep h2 { font-size: 26px; }
}
.held-intro { margin-top: 14px; font-size: 18px; color: var(--muted); }

/* Groter logo */
.logo img { width: 260px; }
@media (max-width: 1260px) { .logo img { width: 210px; } }
@media (max-width: 767px) { .logo img { width: 170px; } .logo { padding: 10px 0; } }
.mobielmenu-kop img { width: 180px; }
.voet-merk img { width: 230px; }

/* Reviews klikbaar */
a.reviewkaart { text-decoration: none; color: inherit; transition: transform .3s ease, box-shadow .3s ease; }
a.reviewkaart:hover { transform: translateY(-5px); box-shadow: var(--schaduw-hover); }
.review-naam { font-weight: 500; color: var(--kop); }
.review-naam span { font-weight: 400; color: var(--muted); }
a.reviewkaart:hover .review-naam span { color: var(--accent-tekst); text-decoration: underline; }
.review-carousel .swiper { padding-top: 8px; }

/* Instagram en TikTok */
.social { display: flex; gap: 10px; }
.social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); transition: background-color .3s, transform .3s; }
.social a:hover { background: #015A9D; transform: translateY(-2px); }
.social-menu a { background: var(--ijs); color: var(--ijs-tekst); }
.topbalk a.topbalk-soc { padding: 6px; }
@media (max-width: 767px) { .topbalk a.topbalk-soc { display: none; } }

/* Tarieven als carousel zoals op de homepage */
.pakketkaart .bedrag { font: 500 40px/1 var(--serif); color: var(--kop); margin: 8px 0 14px; letter-spacing: -0.02em; }
.pakketkaart .vinklijst { font-size: 15px; }
.pakketkaart.uitgelicht { box-shadow: 0 0 0 2px #3A95E0; }
.pakketkaart .label { position: absolute; top: 14px; right: 14px; background: #3A95E0; color: #fff; font-size: 12px; padding: 3px 12px; border-radius: 999px; }
.pakketkaart { position: relative; }
/* hele kaart klikbaar: de WhatsApp-link spant over de kaart */
.pakketkaart .kaartlink::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pakketkaart:has(.kaartlink) { cursor: pointer; }
@media (max-width: 767px) { .topbalk a.topbalk-wa { display: none; } .topbalk-bel { white-space: nowrap; } }

/* Logo nog groter */
.logo img { width: 340px; }
.logo { padding: 10px 0; }
@media (max-width: 1360px) { .logo img { width: 300px; } }
@media (max-width: 1260px) { .logo img { width: 260px; } }
@media (max-width: 767px) { .logo img { width: 210px; } .logo { padding: 8px 0; } }
@media (max-width: 380px) { .logo img { width: 180px; } }
.mobielmenu-kop img { width: 210px; }
.voet-merk img { width: 260px; }

/* Belpaneel voor computers zonder telefoon */
.belpaneel { border: 0; padding: 0; border-radius: 8px; background: var(--kaart); color: var(--tekst); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); width: min(440px, calc(100vw - 32px)); }
.belpaneel::backdrop { background: rgba(6, 24, 38, .55); }
.belpaneel-in { padding: 40px 36px 34px; display: flex; flex-direction: column; gap: 14px; text-align: center; position: relative; }
.belpaneel .sluit { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rand); background: transparent; color: var(--kop); display: grid; place-items: center; cursor: pointer; }
.belpaneel-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--ijs); color: var(--ijs-tekst); display: grid; place-items: center; margin: 0 auto 4px; }
.belpaneel-ic .ic { width: 26px; height: 26px; }
.belpaneel h2 { font-size: 26px; }
.belpaneel-nummer { font: 500 34px/1.1 var(--serif); color: var(--kop); letter-spacing: .01em; text-decoration: none; }
.belpaneel .klein { color: var(--muted); }
.belpaneel .knoprij { justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.belpaneel-terug { font-size: 15px; color: var(--accent-tekst); }

/* Handige links */
.linkgroep + .linkgroep { margin-top: 55px; }
.linkgroep-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.linkgroep-kop .ic-rond { width: 48px; height: 48px; border-radius: 50%; background: var(--ijs); color: var(--ijs-tekst); display: grid; place-items: center; flex: none; }
.linkgroep-kop h2 { font-size: 30px; }
.linkgroep-kop p { color: var(--muted); font-size: 15px; }
.linklijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.linkkaart { display: flex; gap: 16px; align-items: flex-start; padding: 24px 26px; border-radius: 6px; background: var(--kaart); box-shadow: var(--schaduw); text-decoration: none; color: var(--tekst); border: 1px solid transparent; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
.linkkaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw-hover); border-color: var(--accent); }
.linkkaart-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.linkkaart h3 { font-size: 20px; line-height: 1.3; }
.linkkaart p { font-size: 15px; color: var(--muted); }
.linkkaart .domein { font-size: 13px; color: var(--accent-tekst); margin-top: 4px; }
.linkkaart > .ic { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 4px; transition: transform .3s; }
.linkkaart:hover > .ic { transform: translate(2px, -2px); }
@media (max-width: 767px) {
  .linklijst { grid-template-columns: 1fr; }
  .linkkaart { padding: 20px; }
  .linkgroep-kop h2 { font-size: 25px; }
  .linkgroep + .linkgroep { margin-top: 40px; }
}

/* Locatiepagina's */
.kaart-ic { width: 30px; height: 30px; color: var(--accent); }
.kaartgrid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 1100px) { .kaartgrid-4 { grid-template-columns: repeat(4, 1fr); } .kaartgrid-3 { grid-template-columns: repeat(3, 1fr); } }
.stappen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; counter-reset: stap; }
.stappen li { background: var(--kaart); border-radius: 5px; box-shadow: var(--schaduw); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.blok:not(.alt) .stappen li { background: var(--bg-alt); box-shadow: none; }
:root[data-thema="donker"] .blok:not(.alt) .stappen li { background: var(--kaart); box-shadow: var(--schaduw); }
.stap-nr { width: 40px; height: 40px; border-radius: 50%; background: var(--ijs); color: var(--ijs-tekst); display: grid; place-items: center; font: 500 18px/1 var(--serif); }
.stappen h3 { font-size: 21px; }
.prijsblok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.prijsblok .infokaart { padding: 20px 30px; }
.prijsblok .prijstabel { width: 100%; }
.faq-lijst { max-width: 860px; }
@media (max-width: 900px) { .prijsblok { grid-template-columns: 1fr; gap: 25px; } }
@media (max-width: 767px) { .stappen li { padding: 24px; } .prijsblok .infokaart { padding: 10px 20px; } }

/* Held: grotere foto, dakbord in beeld */
@media (min-width: 1261px) { .held-tekst { width: 52%; padding-right: 70px; } .held-foto { width: 48%; } }
.held-foto img { object-position: 12% 55%; }
@media (max-width: 1260px) { .held-tekst, .held-foto { width: 100%; } .held-foto { min-height: 480px; } .held-foto img { object-position: 30% 60%; } }
@media (max-width: 767px) { .held-foto { min-height: 320px; } }

/* Google-score in de held beter zichtbaar */
.googlescore { font-size: 16px; gap: 12px; padding: 10px 16px; border-radius: 999px; background: var(--ijs); align-self: flex-start; }
.googlescore .sterren { gap: 3px; }
.googlescore .sterren svg { width: 24px; height: 24px; }
.googlescore strong { font-size: 20px; }

/* Instagram en TikTok netter */
.social a svg.ic, .topbalk-soc svg.ic { width: 20px; height: 20px; }
.social a { width: 44px; height: 44px; }
.social a[href*="instagram"]:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff; }
.social a[href*="tiktok"]:hover { background: #000; color: #fff; box-shadow: -2px -2px 0 #25F4EE, 2px 2px 0 #FE2C55; }

/* Links naar plaatspagina's op donkere vlakken */
.cta-band-tekst a:not(.knop), .voet-merk a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cta-band-tekst a:not(.knop):hover, .voet-merk a:hover { color: #fff; }

/* Zwevende WhatsApp-knop */
.wa-zweef { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--wa); color: #fff; text-decoration: none; font-weight: 500; font-size: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); transition: transform .3s ease, box-shadow .3s ease, background-color .3s; }
.wa-zweef .ic { width: 28px; height: 28px; stroke-width: 1.9; }
.wa-zweef:hover { transform: translateY(-3px); background: #1EBE5B; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
body.menu-open .wa-zweef { display: none; }
@media (max-width: 767px) { .wa-zweef { width: 58px; padding: 0; justify-content: center; } .wa-zweef span { display: none; } }
@media print { .wa-zweef { display: none; } }
em, i, cite, address { font-style: normal; }
.prose .handtekening { font: 500 26px/1.2 var(--serif); color: var(--kop); }
.prose .versie { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rand); font-size: 14px; color: var(--muted); }
.googlescore { white-space: nowrap; }
@media (max-width: 767px) { .googlescore { font-size: 14px; gap: 8px; padding: 9px 14px; } .googlescore .sterren svg { width: 19px; height: 19px; } .googlescore strong { font-size: 17px; } }
.h1-boven { display: block; margin-bottom: 14px; font-family: var(--sans); letter-spacing: normal; }

/* Held-foto: knippen voor het dakbord, voorkant en molen in beeld */
.held-foto img { object-position: 62% 50%; }
@media (max-width: 1260px) { .held-foto { min-height: 0; aspect-ratio: 4 / 3; } .held-foto img { object-position: 50% 50%; } }

/* Officieel WhatsApp-glyph: groen op licht, wit op groen */
.ic:has(use[href="#i-wa"]) { color: var(--wa); }
.wa-zweef .ic:has(use[href="#i-wa"]), .knop:not(.knop-ijs):not(.knop-op-navy) .ic:has(use[href="#i-wa"]) { color: #fff; }

/* Instagram en TikTok bovenin: zelfde kleurwissel als onderin */
.topbalk a.topbalk-soc { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; border-bottom: 0; transition: background-color .3s, transform .3s, box-shadow .3s; }
.topbalk a.topbalk-soc:hover { transform: translateY(-1px); border-bottom: 0; }
.topbalk a.topbalk-soc[href*="instagram"]:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.topbalk a.topbalk-soc[href*="tiktok"]:hover { background: #000; box-shadow: -2px -2px 0 #25F4EE, 2px 2px 0 #FE2C55; }

/* Nieuwe staande homepagefoto */
.held-foto img { object-position: 50% 62%; }
@media (max-width: 1260px) { .held-foto { aspect-ratio: 4 / 5; } .held-foto img { object-position: 50% 60%; } }
@media (min-width: 768px) and (max-width: 1260px) { .held-foto { aspect-ratio: 1 / 1; } }
@media (max-width: 1100px) { .topbalk-plek { display: none; } .topbalk-in { justify-content: flex-end; } }

/* Held-foto in eigen verhouding: nooit zijwaarts knippen (dakbord, voorkant en molen altijd in beeld) */
@media (min-width: 1261px) {
  .held { min-height: 0; align-items: center; }
  .held-foto { align-self: flex-start; aspect-ratio: 1400 / 1715; max-height: 1000px; }
  .held-foto img { object-position: 50% 45%; }
}

/* Sponsorpagina's: narrowcast-video naast de tekst */
.videoblok { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 50px; align-items: center; }
.videokader { margin: 0; border-radius: 5px; overflow: hidden; box-shadow: var(--schaduw); background: #0B1220; }
.videokader video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.voet-sponsor { margin: 0; }
@media (max-width: 900px) { .videoblok { grid-template-columns: 1fr; gap: 25px; } }

/* Toegankelijkheid (Lighthouse via DataForSEO, oktober 2026) */
.onderstreept { text-decoration: underline; text-underline-offset: 2px; }
.swiper-pagination-bullet { width: 10px; height: 10px; padding: 7px; box-sizing: content-box; background-clip: content-box; }
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal .swiper-pagination-bullet { margin: 0 2px; }
.wa-zweef { background: #15803D; }
.wa-zweef:hover { background: #166534; }

/* Afwerking (redesign-audit, oktober 2026): rustiger regelval, cijfers op één lijn, voelbare klik */
h1, h2, h3, .cta-kop, .voet-titel { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }
.prose > p:not(.rij), .prose > ul, .prose > ol, .sectie-intro > p { max-width: 70ch; }
.getal, .bedrag, .prijs, .prijstabel td, .cijfer, .googlescore strong { font-variant-numeric: tabular-nums; }
.knop, .carouselpijl, .themaknop, .hamburger, .sluit { transition-property: background-color, color, transform, box-shadow; transition-duration: .3s; }
.knop:active, .carouselpijl:active, .themaknop:active, .hamburger:active, .sluit:active, .wa-zweef:active { transform: scale(.97); transition-duration: .1s; }
/* de pijlen staan met translateY(-50%) gecentreerd; zonder die translate springen ze bij indrukken omlaag en mist de klik */
.carouselpijl:active { transform: translateY(-50%) scale(.97); }
.pakketkaart:active, .infokaart.klikbaar:active, .prijskaart:active { transform: translateY(-2px); transition-duration: .1s; }
.contactkaart, .tarief-kaart { box-shadow: 0 0 40px rgba(11, 49, 77, .09); }
.nav.vast { box-shadow: 0 2px 20px rgba(11, 49, 77, .08); }

/* 404-pagina */
.niet-gevonden .kaartgrid { margin-top: 10px; }
/* Ruimte boven de footerstreep voor de zwevende WhatsApp-knop (die stopt boven de streep) */
@media (max-width: 767px) { .voet-onder { margin-top: 100px; } }

/* Cookiemelding (Google Analytics + Clarity pas na akkoord) */
.cookiemelding { position: fixed; left: 24px; bottom: 24px; z-index: 70; width: min(460px, calc(100vw - 32px)); background: var(--kaart); color: var(--tekst); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 20px 60px rgba(11, 49, 77, .22); padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.cookiemelding[hidden] { display: none; }
.cookiemelding h2 { font-size: 21px; line-height: 1.25; color: var(--kop); }
.cookiemelding p { font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.cookiemelding a { color: var(--accent-tekst); }
.cookiemelding .knoprij { justify-content: flex-end; margin-top: 4px; }
@media (max-width: 767px) {
  .cookiemelding { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 22px 20px 18px; }
  .cookiemelding .knoprij .knop { flex: 1 1 0; justify-content: center; }
}