:root{--ink:#142c39;--muted:#53636b;--green:#c6ee83;--paper:#fff;--soft:#f3f5f4;--line:#dce2df;--width:1280px;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;font-size:1rem;line-height:1.65}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}button,summary,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a,button,summary{touch-action:manipulation}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.1;letter-spacing:-.045em}h2{font-size:clamp(2rem,3.3vw,3rem);font-weight:700;margin-bottom:24px}h3{font-size:1.35rem;letter-spacing:-.025em}p{margin-bottom:20px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #527d22;outline-offset:5px} [hidden]{display:none!important}.container{width:min(var(--width),calc(100% - 64px));margin-inline:auto}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;padding:12px 20px;background:var(--green);color:var(--ink)}.skip-link:focus{top:10px}.topbar{background:var(--ink);color:#e4ecef;font-size:.875rem;padding:8px 0}.topbar .container{display:flex;justify-content:space-between;gap:20px}.topbar a{text-decoration:none}.site-header{background:white;border-bottom:1px solid var(--line);position:relative;z-index:10}.header-inner{display:flex;justify-content:space-between;align-items:center;gap:26px;min-height:100px}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}.brand-mark{font-size:2.9rem;line-height:1;font-weight:900;letter-spacing:-.085em;font-style:italic}.brand-mark>span{color:#5f852f}.brand-name{font-size:.65rem;line-height:1.4;font-weight:700;letter-spacing:.12em;border-left:1px solid #aeb8bb;padding-left:12px}.main-nav{display:flex;align-items:center;gap:22px;font-size:.875rem;font-weight:600}.main-nav>a{text-decoration:none;padding-block:14px}.main-nav a:hover,.main-nav [aria-current=page]{text-decoration:underline}.nav-group{position:relative}.nav-group summary{cursor:pointer;padding-block:14px}.nav-group>div{position:absolute;top:100%;left:-16px;background:white;min-width:185px;padding:10px;box-shadow:0 12px 30px #142c391a;border:1px solid var(--line)}.nav-group a{display:block;padding:8px;text-decoration:none}.menu-toggle{border:1px solid var(--line);background:white;padding:10px 15px;display:none}.hero{position:relative;overflow:hidden;background:var(--ink);color:white;padding:48px 0 56px;min-height:490px}.hero-media{position:absolute;inset:0;z-index:0}.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(1.05) contrast(1.06) saturate(1.05)}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,24,31,.88) 0%,rgba(6,24,31,.70) 32%,rgba(6,24,31,.25) 58%,rgba(6,24,31,.05) 100%)}.hero-grid{position:relative;z-index:1}.hero-copy{max-width:620px}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.16em;margin-bottom:24px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px}.hero h1{font-size:clamp(2.8rem,4.9vw,4.7rem);line-height:1.02;letter-spacing:-.05em;margin-bottom:28px}.hero h1>span{color:var(--green)}.hero-promise{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.5;letter-spacing:-.015em}.cost{font-weight:600;font-size:1rem}.cost>span{color:var(--green);margin-right:6px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 20px;min-height:52px;text-decoration:none;font-weight:700;font-size:.875rem;border:1px solid transparent;transition:background .15s}.button-green{background:var(--green);color:var(--ink)}.button-green:hover{background:#ddf6b5}.button-outline{border-color:#91a0a8;color:white}.button-outline:hover{background:#29414e}.button-dark{background:var(--ink);color:white}.button-dark:hover{background:#2e4857}.hero-note{font-size:.875rem;color:#becbd2;margin:22px 0 0}.trust-strip{background:var(--green)}.trust-strip .container{display:flex;justify-content:space-between;gap:20px;padding-block:22px;font-size:.875rem;font-weight:600}.trust-strip b{margin-right:8px}.section{padding-block:88px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.muted{color:#738289}.intro-copy{padding-top:32px;color:var(--muted)}.lead{font-size:1.25rem;line-height:1.6;color:var(--ink)}.text-link{display:inline-flex;align-items:center;gap:18px;font-size:.9375rem;font-weight:700;color:var(--ink)}.process-section{background:var(--soft)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.section-heading h2{margin-bottom:0}.section-heading .eyebrow{margin-bottom:18px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.steps article{border-top:1px solid #b8c6bf;padding-top:24px}.step-number{font-size:1rem;color:#536c41;display:block;margin-bottom:40px}.steps p,.usp-grid p{color:var(--muted);margin-bottom:0}.section-aside{max-width:340px;color:var(--muted);margin-bottom:0}.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.usp-grid article{border-top:1px solid var(--line);padding:30px 28px 30px 0}.usp-grid article>span{display:block;font-size:.75rem;letter-spacing:.06em;color:#64767c;margin-bottom:22px}.flexibility{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:var(--soft);padding:48px}.flexibility p{color:var(--muted)}.flexibility .eyebrow{color:var(--ink)}.offer-links{display:grid;grid-template-columns:1fr 1fr;gap:24px}.offer-links>a{display:flex;align-items:center;justify-content:space-between;padding:36px;border:1px solid var(--line);text-decoration:none;font-size:2.2rem;font-weight:700;line-height:1.3}.offer-links a:hover{background:var(--soft)}.offer-links small{display:block;font-size:.7rem;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}.contact-band{background:var(--green);padding-block:64px}.contact-band>.container{display:flex;align-items:center;justify-content:space-between;gap:50px}.contact-band h2{margin-bottom:18px}.contact-band p:last-child{margin-bottom:0}.closing-actions{display:flex;flex-direction:column;gap:20px;align-items:start}.site-footer{background:var(--ink);color:#d0dbe0;padding:64px 0 24px;font-size:.875rem}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1.2fr 1fr;gap:40px}.footer-brand{color:white;margin-bottom:28px}.footer-brand .brand-mark>span{color:var(--green)}.footer-grid h2{color:white;font-size:1rem;letter-spacing:0;margin:6px 0 26px}.footer-grid>div>a:not(.brand){display:block;text-decoration:none;margin-bottom:8px;overflow-wrap:anywhere}.footer-grid>div>a:hover{text-decoration:underline}.hours{margin:0}.hours>div{display:flex;justify-content:space-between;gap:18px;margin-bottom:6px}.hours dd{margin:0;white-space:nowrap}.footer-bottom{margin-top:48px;padding-top:22px;border-top:1px solid #47606d;display:flex;justify-content:space-between;gap:20px;font-size:.75rem}.page-intro{padding-top:32px;padding-bottom:88px;min-height:60vh}.breadcrumbs{display:flex;gap:12px;flex-wrap:wrap;font-size:.875rem;margin-bottom:60px}.page-intro h1{font-size:clamp(2.5rem,5vw,4.5rem);max-width:900px}.page-intro>.lead{max-width:750px}.notice{background:var(--soft);padding:36px;margin-top:40px;max-width:800px}.notice h2,.visit h2{font-size:1.65rem}.notice p{max-width:630px}.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;scroll-margin-top:30px}.visit{padding-top:76px}.contact-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-bottom:24px}
@media(min-width:1600px){.hero{padding-block:64px;min-height:540px}}
@media(max-width:1150px){.header-inner{flex-wrap:wrap;padding-block:22px;gap:16px}.main-nav{width:100%;justify-content:space-between;gap:12px}.hero-actions{flex-direction:column;align-items:start}.hero{min-height:510px}.footer-grid{grid-template-columns:1fr 1fr;gap:42px}.trust-strip .container{flex-wrap:wrap}.trust-strip span{width:calc(50% - 20px)}}
@media(max-width:760px){.container{width:calc(100% - 40px)}.topbar .container{justify-content:center}.topbar .container>span{display:none}.header-inner{min-height:88px;padding-block:20px}.brand-mark{font-size:2.5rem}.brand-name{font-size:.6rem}.js .menu-toggle{display:block}.main-nav{display:flex;flex-direction:column;align-items:stretch;padding-top:12px;gap:0}.js .main-nav{display:none}.js .main-nav.is-open{display:flex}.main-nav>a,.nav-group summary{padding:13px 8px}.nav-group>div{position:static;box-shadow:none;border:0;background:var(--soft);margin-bottom:8px}.hero{padding:38px 0 28px;min-height:330px}.hero h1{font-size:clamp(2.5rem,9vw,4rem)}.hero-promise{font-size:1.18rem}.eyebrow{font-size:.7rem;margin-bottom:20px}.hero-actions{align-items:stretch;margin-top:24px}.trust-strip .container{gap:12px 18px;padding-block:20px;font-size:.8rem}.trust-strip span{width:calc(50% - 9px)}.section{padding-block:56px}.intro-grid,.flexibility{grid-template-columns:1fr;gap:16px}.intro-copy{padding-top:0}.section-heading{display:block;margin-bottom:28px}.section-heading>a{margin-top:20px}.section-aside{margin-top:20px}.steps{grid-template-columns:1fr;gap:26px}.step-number{margin-bottom:18px}.steps article{padding-top:20px}.usp-grid{grid-template-columns:1fr 1fr}.usp-grid article{padding:24px 20px 24px 0}.usp-grid h3{font-size:1.15rem}.flexibility{padding:30px;width:calc(100% - 40px)}.offer-links{grid-template-columns:1fr;gap:16px}.offer-links>a{padding:26px}.contact-band{padding-block:44px}.contact-band>.container{display:block}.closing-actions{margin-top:28px}.footer-grid{grid-template-columns:1fr;gap:32px}.footer-grid>div{max-width:370px}.footer-grid h2{margin-bottom:18px}.footer-bottom{flex-direction:column;gap:8px}.page-intro{padding-bottom:56px}.breadcrumbs{margin-bottom:36px}.notice{padding:26px}.contact-grid{grid-template-columns:1fr;gap:12px}.visit{padding-top:24px}.lead{font-size:1.125rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Shared sticky navigation and mobile panel. */
html { scroll-padding-top: 112px; scrollbar-gutter: stable; }
/* Vloeiend scrollen naar interne #anchors (skip-link, /contact/#aanmelden); scroll-padding-top
   hierboven houdt de sticky header al overal rekening mee. Alleen CSS, geen JS-library. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 5px 22px #142c3914;
}
.header-inner { min-height: 84px; }
/* Straight screen wordmark; the existing mobile breakpoint restores italic. */
@media screen { .brand-mark { font-style: normal; } }
.main-nav { gap: 18px; }
.mobile-menu-heading, .mobile-menu-actions { display: none; }
.nav-group summary { list-style: none; display: flex; align-items: center; gap: 8px; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
}
.nav-group[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.nav-group a { min-height: 44px; }
/* .95 alpha: at .7 (previous) dark H1/body text stayed legible through the dimmed backdrop
   because dark ink blended with dark backdrop keeps enough contrast against the lightened
   background; this near-opaque tint removes that residual legibility while staying technically
   translucent. */
.menu-backdrop { position: fixed; inset: 0; background: #06121cf2; z-index: 41; }
.floating-whatsapp {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  box-shadow: 0 5px 20px #06121c40;
  border: 2px solid var(--ink);
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.floating-whatsapp:hover { background: #ddf6b5; transform: translateY(-2px); }
.floating-whatsapp:focus-visible { outline: 3px solid white; outline-offset: 3px; box-shadow: 0 0 0 7px var(--ink); }
.site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
#aanmelden { scroll-margin-top: 112px; }
@media (max-width: 1210px) {
  .topbar { display: none; }
  .site-header {
    top: 10px;
    width: calc(100% - 24px);
    margin: 10px auto;
    border: 1px solid #ffffff20;
    border-radius: 18px;
    background: #182b34f5;
    color: white;
    box-shadow: 0 6px 24px #07141d26;
    backdrop-filter: blur(12px);
  }
  .header-inner { width: 100%; min-height: 60px; padding: 8px 16px; gap: 12px; }
  .brand-mark { font-size: 2.45rem; font-style: italic; }
  .brand-mark > span, .menu-accent { color: var(--green); }
  .brand-name { font-size: .6rem; }
  .js .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: white;
  }
  /* Without scripting, the navigation stays in normal flow. */
  .main-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav > a, .nav-group summary { padding: 14px 8px; min-height: 48px; }
  .nav-group > div { position: static; box-shadow: none; border: 0; background: var(--soft); color: var(--ink); margin: 0 0 8px; }
  .nav-group a { padding: 10px 14px; }
  .nav-group summary { justify-content: space-between; }
  .js .main-nav {
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 430px);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 22px calc(106px + env(safe-area-inset-bottom));
    background: var(--paper);
    color: var(--ink);
    z-index: 42;
    box-shadow: -12px 0 36px #07141d30;
  }
  /* No filter/transform on ancestors: the drawer and backdrop use the viewport. */
  .site-header:has(.is-open) { backdrop-filter: none; }
  .js .main-nav.is-open { display: flex; }
  .js .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; }
  .mobile-menu-heading > span { font-size: 2rem; font-weight: 900; font-style: italic; letter-spacing: -.08em; }
  .menu-close { width: 44px; height: 44px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
  .main-nav > a, .nav-group { border-bottom: 1px solid var(--line); }
  .mobile-menu-actions { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 28px; }
  .mobile-menu-actions > a { min-height: 48px; display: flex; align-items: center; }
  .mobile-menu-actions .button { padding: 14px; gap: 8px; }
  .site-header :focus-visible { outline-color: var(--green); outline-offset: 3px; }
  body.menu-open { position: fixed; width: 100%; overflow: hidden; }
  /* These floating widgets live outside .site-header, so their own z-index (58-65) competes
     directly with the header's stacking context (40) instead of with the drawer's local z-index
     (42) — they always win and float above an open menu. Hiding the idle trigger is simpler and
     more robust than chasing a z-index number high enough to beat all of them. The open chat
     panel and its toggle are deliberately left alone: menu + chat can be open together by design
     (see navigation-check.ps1 Test-ChatPriority), with the chat trap taking Tab priority. */
  body.menu-open .floating-whatsapp, body.menu-open .avm-chat-attention { display: none !important; }
  body.menu-open:not(.avm-chat-open) .avm-chat-toggle { display: none !important; }
  .floating-whatsapp { width: 54px; height: 54px; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .header-inner { padding-inline: 12px; gap: 8px; }
  .brand { gap: 8px; }
  .brand-name { padding-left: 8px; font-size: .55rem; }
  .menu-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .usp-grid { grid-template-columns: 1fr; }
}

/* Small visual refinements; shared menu behavior is unchanged. */
.cta-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke: currentColor;
  transition: transform .15s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover .cta-arrow, .button:focus-visible .cta-arrow {
    transform: translate(2px, -2px);
  }
}
@media (max-width: 1210px) {
  .menu-toggle > span { display: none; }
  .site-header { box-shadow: 0 2px 10px #07141d14; }
  .site-header.is-scrolled { box-shadow: 0 6px 22px #07141d2e; }
  .main-nav :focus-visible { outline-color: #527d22; }
  .main-nav .menu-accent { color: #527d22; }
  .main-nav > a:hover, .nav-group summary:hover { background: var(--soft); }
  .menu-close:hover { background: var(--soft); }
}
@media (max-width: 760px) {
  .hero .eyebrow { margin-bottom: 20px; }
  .hero h1 { margin-bottom: 24px; }
  .hero-promise { margin-bottom: 16px; }
  .hero .cost { margin-bottom: 0; }
  .hero-actions { margin-top: 24px; gap: 12px; }
  .hero-note { margin-top: 20px; }
}

/* Camper intro: preserve the complete photograph, including the front plate. */
.camper-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.camper-intro-copy, .camper-intro-media { min-width: 0; }
.camper-intro .notice { margin-top: 28px; }
.camper-intro .notice .button { max-width: 100%; }
.camper-intro-media {
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 1447 / 1087;
  background: var(--soft);
  box-shadow: 0 8px 24px #142c3912;
}
.camper-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1447 / 1087;
  object-fit: cover;
  object-position: 50% 50%;
}
.camper-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  .camper-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 4vw, 64px); }
  .camper-intro h1 { font-size: clamp(2.5rem, 4vw, 3.75rem); }
  .camper-intro .notice { padding: 28px; }
}
/* Contact location: local preview, with direct Google Maps links. */
.contact-registration .notice { max-width: 800px; }
.location-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
.location-details, .location-preview { min-width: 0; }
.location-details h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.location-details address { font-style: normal; margin-bottom: 12px; }
.location-phone { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; margin-bottom: 16px; }
.location-actions { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 32px; }
.location-actions .button { min-height: 48px; }
.location-secondary { border-color: var(--line); color: var(--ink); background: white; }
.location-secondary:hover { background: var(--soft); }
.location-details h3 { margin-bottom: 20px; }
.location-hours { max-width: 360px; }
.location-hours > div { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.location-note { font-size: .875rem; color: var(--muted); margin: 20px 0 0; }
.location-preview {
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: 350px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft);
  box-shadow: 0 8px 24px #142c3912;
}
.location-preview-label {
  display: flex;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  font-size: .75rem;
  letter-spacing: .12em;
  font-weight: 700;
}
.location-preview-body { padding: 28px 24px; }
.location-pin { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); margin-bottom: 24px; }
.location-preview-name { font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.location-preview-body .text-link { min-height: 44px; }
.location-preview-footer { margin: auto 0 0; padding: 18px 24px; font-size: .875rem; border-top: 1px solid var(--line); }
@media (min-width: 1000px) {
  .location-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .location-actions { flex-direction: row; flex-wrap: wrap; }
  .location-preview { min-height: 420px; }
}

@media (max-width: 999px) {
  .location-hours, .location-note { max-width: calc(100% - 64px); }
}

/* Verkoopformulier: compact, printable sales form. */
.form-link { margin-top: 16px; }
.page-intro h1 { overflow-wrap: break-word; }
.form-page { margin-top: 8px; }
.form-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0; }
.form-toolbar-bottom { margin-top: 48px; }
.form-toolbar .button-outline { border-color: var(--line); color: var(--ink); background: white; }
.form-toolbar .button-outline:hover { background: var(--soft); }
.form-section { padding-top: 32px; border-top: 1px solid var(--line); }
.form-vehicle-type { border-top: 0; padding-top: 0; }
.form-payout { border-top: 0; }
fieldset.form-section { border: 0; margin: 0; min-width: 0; }
.print-page, .print-page-body { display: contents; }
.print-page-header, .print-page-footer { display: none; }
.form-section legend, .form-section > h2, .form-notes > label { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; padding: 0; width: 100%; display: block; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 18px 24px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: .8125rem; font-weight: 600; }
.form-hint { font-weight: 400; color: var(--muted); }
.form-field input, .form-section textarea { border: 1px solid var(--line); background: var(--paper); padding: 12px 14px; font: inherit; font-size: .9375rem; color: var(--ink); border-radius: 2px; width: 100%; }
.form-section textarea { resize: vertical; }
.form-field input:focus-visible, .form-section textarea:focus-visible, .form-inline-input:focus-visible { outline: 3px solid #527d22; outline-offset: 1px; }

.form-radio-pills { display: flex; gap: 12px; flex-wrap: wrap; }
.form-pill { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 14px 22px; font-weight: 700; cursor: pointer; }
.form-pill input { margin: 0; accent-color: var(--ink); }
@supports selector(:has(*)) { .form-pill:has(input:checked) { background: var(--green); border-color: var(--ink); } }

.form-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; margin-top: 28px; }
.form-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-choice legend { font-size: .8125rem; font-weight: 600; padding: 0 0 8px; }
.form-choice label, .form-choice-wide label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: .9rem; font-weight: 400; }
.form-choice input, .form-choice-wide input[type=radio] { accent-color: var(--ink); }
.form-choice-wide { margin-top: 28px; border: 0; padding: 0; }
.form-choice-wide legend { font-size: .8125rem; font-weight: 600; padding: 0 0 10px; width: 100%; }
.form-inline-input { margin-left: 4px; border: 1px solid var(--line); padding: 8px 12px; font: inherit; font-size: .9rem; min-width: 220px; }
@supports selector(:has(*)) { .form-financiering:has(#financiering-nee:checked) .form-inline-input { opacity: .45; } }
.form-note { margin: 14px 0 0; font-size: .8125rem; color: var(--muted); }
.form-note-conditional { display: none; }
@supports selector(:has(*)) { .form-locatie:has(#locatie-eigenaar:checked) .form-note-conditional { display: block; } }

.form-payout { background: var(--soft); padding: 32px; padding-top: 0; margin-top: 36px; }
.form-payout-label { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.form-payout-input { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 2px solid var(--ink); padding: 14px 18px; max-width: 320px; }
.form-payout-input span { font-size: 1.5rem; font-weight: 700; }
.form-payout-input input { border: 0; background: transparent; font: inherit; font-size: 1.5rem; font-weight: 700; width: 100%; padding: 0; }
.form-payout-input input:focus-visible { outline: 0; }
.form-payout-note { margin: 16px 0 0; font-size: .8125rem; color: var(--muted); max-width: 560px; }

.form-agreements ol { margin: 0; padding-left: 22px; color: var(--muted); }
.form-agreements li { margin-bottom: 10px; }
.form-agreements li:last-child { margin-bottom: 0; }

.form-terms { background: var(--soft); border-left: 4px solid var(--ink); border-top: 0; padding: 24px 28px; margin-top: 36px; }
.form-terms h2 { margin-bottom: 10px; }
.form-terms p { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.form-terms strong { font-weight: 700; }

.form-declaration p { font-size: .9375rem; color: var(--muted); max-width: 760px; }
.form-declaration p:last-child { margin-bottom: 0; }

.form-signature-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
.form-signature-block { display: flex; flex-direction: column; gap: 14px; }
.form-signature-pad-wrap { position: relative; }
.form-signature-pad { display: block; width: 100%; height: 140px; border: 1px dashed #98a6ac; border-radius: 6px; background: var(--paper); touch-action: none; cursor: crosshair; }
.form-signature-pad:focus-visible { outline: 3px solid #527d22; outline-offset: 1px; }
.form-signature-clear { position: absolute; top: 8px; right: 8px; border: 1px solid var(--line); background: white; color: var(--muted); font-size: .75rem; font-weight: 600; padding: 5px 10px; border-radius: 3px; cursor: pointer; }
.form-signature-clear:hover { background: var(--soft); color: var(--ink); }
.form-signature-caption { font-size: .8125rem; color: var(--muted); }

@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-col-2 { grid-column: span 2; }
  .form-choice-grid { grid-template-columns: repeat(3, 1fr); }
  .form-signature-grid { grid-template-columns: 1fr 1fr; }
}

@media print {
  .topbar, .floating-whatsapp, .breadcrumbs, .form-toolbar, .menu-toggle, .menu-backdrop, #main-nav, .skip-link,
  .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(4) { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 8mm 12mm; }
  body { line-height: 1.2; }
  p { margin-bottom: 0; }
  /* This form page prints its own repeating header/footer per A4 page; the shared site chrome and one-off
     intro text are replaced by that, scoped so other pages keep their existing print treatment. */
  body:has(.form-page) .site-header, body:has(.form-page) .site-footer,
  body:has(.form-page) .eyebrow, body:has(.form-page) .page-intro h1, body:has(.form-page) .page-intro .lead,
  .verkoopformulier-hero, .verkoopformulier-close {
    display: none !important;
  }
  .page-intro { padding: 0; min-height: 0; }
  .form-page { margin-top: 0; }
  /* Placeholders (€ 0,00, IBAN example, dd-mm-jjjj, ...) are UX hints, not values: never print them as if filled in. */
  .form-page input::placeholder, .form-page textarea::placeholder { color: transparent; }
  .print-page { display: flex; flex-direction: column; min-height: 281mm; break-after: page; page-break-after: always; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-page-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  /* Bijzonderheden grows to absorb page 1's leftover space, leaving a fixed safety gap above the footer. */
  .form-notes { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 34mm; margin-bottom: 10mm; }
  .form-notes textarea { flex: 1 1 auto; min-height: 0; }
  .print-page-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 5px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
  }
  .print-page-brand { display: flex; align-items: baseline; gap: 8px; }
  .print-page-header .brand-mark { font-size: 1.3rem; }
  .print-page-brand-name { font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
  .print-page-doctitle { font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
  .print-page-footer {
    margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 6px 16px; background: var(--ink); color: #d0dbe0; padding: 7px 10px; border-radius: 2px; font-size: .62rem;
    break-inside: avoid; page-break-inside: avoid;
  }
  .print-page-footer-brand { font-weight: 700; color: white; }
  .form-section { padding-top: 7px; }
  .form-section legend, .form-section > h2, .form-notes > label { font-size: .88rem; margin-bottom: 5px; break-after: avoid; page-break-after: avoid; }
  .form-vehicle-type, .form-choice, .form-choice-wide, .form-payout { break-inside: avoid; page-break-inside: avoid; }
  .form-grid { gap: 4px 12px; grid-template-columns: 1fr 1fr; }
  .form-field { gap: 1px; }
  .form-field label { font-size: .7rem; }
  .form-field input, .form-section textarea { padding: 3px 6px; font-size: .8rem; border-color: #8a9aa1; }
  .form-choice-grid { grid-template-columns: repeat(3, 1fr); gap: 2px 14px; margin-top: 5px; }
  .form-choice legend { font-size: .68rem; padding-bottom: 2px; }
  .form-choice label, .form-choice-wide label { font-size: .74rem; margin-right: 8px; }
  .form-choice-wide { margin-top: 5px; }
  .form-pill { padding: 4px 12px; font-size: .78rem; }
  .form-payout { padding: 5px 10px; margin-top: 6px; }
  .form-payout-label { font-size: .78rem; margin-bottom: 3px; }
  .form-payout-input { padding: 4px 8px; max-width: 200px; border-width: 1.5px; }
  .form-payout-input span, .form-payout-input input { font-size: .95rem; }
  .form-payout-note { font-size: .65rem; margin-top: 3px; }
  .form-agreements ol { font-size: .86rem; line-height: 1.4; padding-left: 15px; margin: 0; }
  .form-agreements li { margin-bottom: 4px; break-inside: avoid; page-break-inside: avoid; }
  .form-terms { padding: 9px 12px; margin-top: 7px; border-left-width: 3px; break-inside: avoid; page-break-inside: avoid; }
  .form-terms p { font-size: .86rem; line-height: 1.45; }
  .form-terms strong { font-size: 1.05em; }
  .form-declaration { break-before: avoid; page-break-before: avoid; }
  .form-declaration p { font-size: .86rem; line-height: 1.4; margin-bottom: 4px; }
  .form-signatures { break-before: avoid; page-break-before: avoid; }
  .form-signature-grid { gap: 12px; margin-top: 5px; }
  .form-signature-block { break-inside: avoid; page-break-inside: avoid; }
  .form-signature-pad { height: 92px; border-style: solid; border-color: var(--ink); }
  .form-signature-clear { display: none; }
  .form-signature-caption { font-size: .62rem; }
  .form-signature-caption .form-hint { display: none; }
  .form-note { font-size: .62rem; margin-top: 5px; }
}
/* Camper sales content only; shared styles and print/PDF CSS remain intact. */
@media screen {
  .camper-sales { --camper-card-radius: 18px; }
  .camper-sales h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); }
  .camper-sales p { max-width: 780px; }
  .camper-brand-context { display: block; letter-spacing: 0; font-size: .9rem; font-weight: 400; margin-top: 6px; }
  .camper-sales .camper-intro h1 { margin-bottom: 20px; }
  .camper-sales .camper-intro .lead { font-size: 1.3rem; line-height: 1.5; }
  .camper-sales-usps { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 10px; font-size: .9375rem; font-weight: 600; }
  .camper-sales-usps li { display: flex; gap: 10px; align-items: baseline; }
  .camper-sales-usps li::before { content: "✓"; color: #527d22; font-weight: 700; }
  .camper-sales-actions { display: flex; flex-direction: column; gap: 12px; }
  .camper-sales-actions .button, .camper-value-actions .button { min-height: 52px; white-space: normal; }
  .camper-sales-secondary { border-color: var(--line); background: var(--paper); color: var(--ink); }
  .camper-sales-secondary:hover { background: var(--soft); }
  .camper-sales-section { padding-block: 64px; }
  .camper-sales-steps { list-style: none; padding: 0; margin: 28px 0 24px; display: grid; gap: 16px; }
  .camper-sales-steps > li { min-width: 0; padding: 24px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--camper-card-radius); }
  .camper-step-number { display: block; color: #527d22; font-size: .875rem; font-weight: 700; margin-bottom: 24px; }
  .camper-sales-steps h3, .camper-benefit-grid h3 { font-size: 1.2rem; line-height: 1.25; margin-bottom: 14px; }
  .camper-sales-steps p, .camper-benefit-grid p { margin-bottom: 0; }
  .camper-sales-steps p { color: var(--muted); }
  .camper-sales-benefits { padding: 28px 24px; border-radius: var(--camper-card-radius); background: var(--ink); color: white; }
  .camper-sales-benefits > h2 { max-width: 850px; }
  .camper-sales-benefits > p { color: #d0dbe0; }
  .camper-benefit-grid { display: grid; gap: 24px; margin-top: 28px; }
  .camper-benefit-grid > div { min-width: 0; border-top: 1px solid #ffffff40; padding-top: 24px; }
  .camper-benefit-grid .camper-trade-in { background: var(--green); color: var(--ink); padding: 24px; border: 0; border-radius: 12px; }
  .camper-sales-location { display: grid; gap: 12px; }
  .camper-sales-location p:last-child { margin-bottom: 0; }
  .camper-sales-value { background: var(--green); border-radius: var(--camper-card-radius); padding: 28px 24px; display: grid; gap: 24px; }
  .camper-sales-value p:last-child { margin-bottom: 0; }
  .camper-value-actions { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 18px; }
  .camper-value-actions .text-link { min-height: 44px; }
  .camper-sales-terms { max-width: 850px; margin-top: 28px; padding: 24px; background: var(--soft); border-left: 3px solid var(--ink); }
  .camper-sales-terms h3 { font-size: 1.2rem; }
  .camper-sales-faq { padding-bottom: 64px; }
  .camper-sales-faq details { border-bottom: 1px solid var(--line); }
  .camper-sales-faq details:first-of-type { border-top: 1px solid var(--line); }
  .camper-sales-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 20px 4px; min-height: 52px; cursor: pointer; font-weight: 700; line-height: 1.5; }
  .camper-sales-faq summary::-webkit-details-marker { display: none; }
  .camper-sales-faq summary::after { content: "+"; flex: 0 0 20px; font-size: 1.3rem; text-align: center; line-height: 1.2; }
  .camper-sales-faq details[open] summary::after { content: "−"; }
  .camper-sales-faq details p { padding: 0 4px 4px; margin: 0 0 20px; color: var(--muted); }
  .camper-sales-final { padding: 28px 24px; background: var(--ink); color: white; border-radius: var(--camper-card-radius); }
  .camper-sales-final p { color: #d0dbe0; }
  .camper-sales-final .camper-final-address { margin: 24px 0 0; font-size: .875rem; }
  .camper-sales-final a:focus-visible { outline-color: var(--green); }
  @media (min-width: 640px) {
    .camper-sales-steps, .camper-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .camper-sales-actions { flex-direction: row; flex-wrap: wrap; }
    .camper-sales-benefits, .camper-sales-value, .camper-sales-final { padding: 40px; }
  }
  @media (min-width: 1100px) {
    .camper-sales-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .camper-sales-location { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
    .camper-sales-value { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
    .camper-sales-usps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Portfolio-slider met verkochte campers (/camper-verkopen/). Zonder JS blijven alle slides
     gewoon zichtbaar in een grid (progressive enhancement); .is-active (via main.js) schakelt naar
     de schuivende carousel. Extra merken toevoegen is een kwestie van een .camper-slide-blok
     kopiëren in de HTML, dit stylesheet en main.js gaan uit van een dynamisch aantal slides. */
  .camper-portfolio { padding-block: 64px; }
  .camper-portfolio h2 { margin-bottom: 8px; }
  .camper-slider { position: relative; margin-top: 28px; }
  .camper-slider-viewport { overflow: hidden; border-radius: var(--camper-card-radius); }
  .camper-slider-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
  .camper-slide { min-width: 0; }
  .camper-slide figure { margin: 0; background: var(--soft); border-radius: var(--camper-card-radius); overflow: hidden; }
  .camper-slide img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--soft); }
  .camper-slide figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; }
  .camper-slide figcaption strong { font-size: 1.05rem; }
  .camper-slide figcaption span { color: var(--muted); font-size: .875rem; }
  .camper-slider-arrow, .camper-slider-dots, .camper-slider-status { display: none; }
  .camper-slider.is-active .camper-slider-track { display: flex; gap: 0; transition: transform .5s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
  .camper-slider.is-active .camper-slide { flex: 0 0 100%; }
  .camper-slider.is-active .camper-slider-arrow {
    display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px #06121c26; transition: background .15s, border-color .15s;
  }
  .camper-slider.is-active .camper-slider-arrow:hover { background: var(--green); border-color: var(--green); }
  .camper-slider.is-active .camper-slider-arrow:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
  .camper-slider.is-active .camper-slider-arrow svg { width: 20px; height: 20px; }
  .camper-slider.is-active .camper-slider-prev { left: 12px; }
  .camper-slider.is-active .camper-slider-next { right: 12px; }
  .camper-slider.is-active .camper-slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .camper-slider.is-active .camper-slider-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid #76909d; background: var(--paper); cursor: pointer; }
  .camper-slider.is-active .camper-slider-dot[aria-current="true"] { background: var(--green); border-color: var(--green); }
  .camper-slider.is-active .camper-slider-dot:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
  .camper-slider.is-active .camper-slider-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (min-width: 640px) {
    .camper-slider.is-active .camper-slider-arrow { width: 48px; height: 48px; }
  }
}

/* Shared footer social links: add future platforms as sibling anchors. */
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid #76909d;
  border-radius: 50%;
  color: var(--green);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.footer-social-link:hover { background: var(--green); color: var(--ink); border-color: var(--green); }
.footer-social-link:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.footer-social-link svg { display: block; }
@media print { .footer-socials { display: none !important; } }

/* Homepage: buyer options, scoped to this section. */
.buyer-reach { padding-block: 56px; background: var(--ink); color: white; }
.buyer-reach h2 { max-width: 850px; }
.buyer-reach-intro { max-width: 870px; color: #d0dbe0; margin-bottom: 32px; }
.buyer-reach-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.buyer-reach-grid > article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid #76909d;
  border-radius: 18px;
}
.buyer-reach-grid h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 16px; }
.buyer-reach-grid p { margin-bottom: 0; }
.buyer-reach-grid .text-link { margin-top: auto; padding-top: 20px; min-height: 44px; font-size: .875rem; }
.buyer-reach .text-link { color: inherit; }
.buyer-reach-grid .buyer-reach-trade { background: var(--green); color: var(--ink); border-color: var(--green); }
.buyer-reach-closing { margin-top: 32px; }
.buyer-reach-closing > p { max-width: 720px; font-size: 1.125rem; font-weight: 600; }
.buyer-reach-actions { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.buyer-reach-actions .text-link { min-height: 44px; }
.buyer-reach a:focus-visible { outline-color: var(--green); }
@media (min-width: 640px) {
  .buyer-reach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buyer-reach-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
}
@media (min-width: 1200px) {
  .buyer-reach { padding-block: 64px; }
  .buyer-reach-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Privacyverklaring: leesbare regellengte voor doorlopende tekst. */
.privacy-content { max-width: 760px; }
.privacy-content h2 { font-size: 1.5rem; margin-top: 40px; }
.privacy-content h2:first-child { margin-top: 0; }
.privacy-content p { color: var(--muted); }

/* Subtiele scroll-reveal voor secties/kaarten (toegevoegd via assets/js/main.js, alleen op de
   contentpagina's; header, navigatie, footer, floating WhatsApp, chatwidget en het
   verkoopformulier krijgen deze klasse nooit). transition-delay via --reveal-delay geeft cards
   binnen eenzelfde groep een klein stagger-effect. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms cubic-bezier(.22, .61, .36, 1), transform 620ms cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Sales agreement links and the shared auto/camper process page. */
@media screen {
  .sales-agreement-link { margin: 24px 0 0; font-size: .875rem; }
  .sales-agreement-link .text-link { color: inherit; min-height: 44px; }
  .process-page > header h1 { max-width: 900px; }
  .process-page .camper-sales-section + .camper-sales-section { padding-top: 0; }
  .process-agreement { margin: 32px 0; }
  .process-agreement .text-link { min-height: 44px; }
  @media (min-width: 1100px) {
    .process-page .camper-sales-steps, .process-page .camper-benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

/* Services overview: scoped to /diensten/. */
@media screen {
  .services-page .services-hero h1 { max-width: 920px; }
  .services-page .services-hero .camper-sales-actions { margin-top: 28px; }
  .services-page .services-intro { display: grid; gap: 16px; }
  .services-page .services-grid, .services-page .services-selling { display: grid; gap: 20px; }
  .services-page .services-grid { margin-top: 28px; }
  .services-page .services-card { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--camper-card-radius); background: var(--soft); display: flex; flex-direction: column; }
  .services-page .services-card h3 { font-size: 1.25rem; line-height: 1.3; }
  .services-page .services-card p { color: var(--muted); }
  .services-page .services-card-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: auto; padding-top: 12px; }
  .services-page .text-link { min-height: 44px; }
  .services-page .services-seller { margin-top: 64px; }
  .services-page .services-seller .camper-sales-usps { margin-bottom: 0; }
  .services-page .services-seller .camper-sales-usps li::before { color: var(--green); }
  .services-page .camper-sales-faq p a { text-decoration: underline; text-underline-offset: 3px; }
  @media (min-width: 640px) {
    .services-page .services-grid, .services-page .services-selling { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1100px) {
    .services-page .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .services-page .services-intro { grid-template-columns: 1fr 1.2fr; gap: 64px; }
    .services-page .services-card { padding: 30px; }
  }
}

/* Services photography slots and restrained visual accents. */
@media screen {
  .services-page .services-hero { display: grid; gap: 32px; align-items: center; }
  .services-page .services-hero-copy, .services-page .services-intro-copy, .services-page .services-seller-copy { min-width: 0; }
  .services-page .avm-photo-slot { position: relative; margin: 0; width: 100%; min-width: 0; min-height: 260px; aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 28px; border: 1px solid #c8d4cc; border-radius: var(--camper-card-radius); background: linear-gradient(135deg, #edf2e8, #dde7e5); color: var(--ink); text-align: center; overflow: hidden; }
  .services-page .avm-photo-slot::before { content: ""; position: absolute; inset: 12px; border: 1px dashed #9cac9f; border-radius: 10px; pointer-events: none; }
  .services-page .avm-photo-symbol { width: 38px; height: 38px; flex-shrink: 0; color: #527d22; }
  .services-page .avm-photo-slot figcaption { max-width: 340px; display: grid; gap: 10px; position: relative; }
  .services-page .avm-photo-label { font-size: .65rem; font-weight: 700; letter-spacing: .15em; }
  .services-page .avm-photo-slot strong { font-size: 1rem; line-height: 1.35; }
  .services-page .avm-photo-note { font-size: .75rem; color: #50615b; }
  .services-page .avm-photo-slot > img, .services-page .avm-photo-slot > picture { width: 100%; height: 100%; position: absolute; inset: 0; }
  .services-page .avm-photo-slot img { width: 100%; height: 100%; object-fit: cover; }
  .services-page .services-intro { gap: 28px; align-items: center; }
  .services-page .services-card-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
  .services-page .services-card-heading .camper-step-number { margin: 0; color: var(--muted); }
  .services-page .services-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--green); color: var(--ink); }
  .services-page .services-icon svg { width: 28px; height: 28px; }
  .services-page .services-grid .services-card { background: var(--paper); border-top: 3px solid #d2e8b0; }
  .services-page .services-seller { display: grid; gap: 32px; align-items: center; }
  .services-page .services-seller .avm-photo-slot { background: linear-gradient(135deg, #293f43, #20333a); border-color: #51655e; color: white; }
  .services-page .services-seller .avm-photo-symbol { color: var(--green); }
  .services-page .services-seller .avm-photo-note { color: #d0dbe0; }
  .services-page .services-seller .avm-photo-slot::before { border-color: #6f8376; }
  .services-page .services-seller .camper-sales-usps { grid-template-columns: 1fr; }
  .services-page .services-vehicle-card { padding: 0; overflow: hidden; }
  .services-page .services-vehicle-card .avm-photo-slot { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; aspect-ratio: 16 / 9; }
  .services-page .services-vehicle-copy { padding: 26px; display: flex; flex-direction: column; flex: 1; }
  .services-page .services-vehicle-copy h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
  .services-page .services-vehicle-copy .text-link { gap: 14px; }
  .services-page .services-card:focus-within { border-color: #527d22; }
  @media (min-width: 1100px) {
    .services-page .services-hero { grid-template-columns: 1.1fr 1fr; gap: 48px; }
    .services-page .services-hero h1 { font-size: clamp(2.7rem, 4vw, 3.7rem); }
    .services-page .services-hero-photo { aspect-ratio: 4 / 3; min-height: 400px; }
    .services-page .services-intro { grid-template-columns: 1fr 1fr; gap: 64px; }
    .services-page .services-seller { grid-template-columns: .9fr 1.1fr; gap: 40px; }
    .services-page .services-seller .avm-photo-slot { aspect-ratio: 4 / 5; }
  }
  @media (hover: hover) and (pointer: fine) {
    .services-page .services-card { transition: border-color 180ms ease, box-shadow 180ms ease, translate 180ms ease; }
    .services-page .services-card:hover { border-color: #81a653; box-shadow: 0 8px 24px #142c3910; translate: 0 -3px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .services-page .services-card { transition: none; translate: none; }
    .services-page .services-card:hover { translate: none; }
  }
}

/* AVM-eigen aanbodweergave op basis van de Cadar-voorraad (netlify/functions/inventory-*),
   ter vervanging van de eerdere Wheeler Delta-iframe. */
.inventory { margin-top: 40px; min-width: 0; }
.inventory-filters { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px; margin-bottom: 28px; background: var(--soft); border-radius: var(--camper-card-radius, 18px); }
.inventory-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inventory-filter label { font-size: .8125rem; font-weight: 700; color: var(--muted); }
.inventory-filter select { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.inventory-filter select:focus-visible { outline: 3px solid #527d22; outline-offset: 1px; }
.inventory-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; grid-column: 1 / -1; margin-top: 4px; }
.inventory-filter-actions .button { min-height: 48px; }
.inventory-filter-actions .text-link { min-height: 44px; }
.inventory-result-count { color: var(--muted); font-size: .9375rem; margin-bottom: 16px; }
.inventory-grid { display: grid; grid-template-columns: 1fr; gap: 20px; min-height: 40px; }
.inventory-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--camper-card-radius, 18px); overflow: hidden; background: var(--paper); text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
.inventory-card:hover { box-shadow: 0 10px 28px #142c3914; border-color: #c7d2cc; }
.inventory-card:focus-visible { outline: 3px solid #527d22; outline-offset: 2px; }
.inventory-card-photo { margin: 0; aspect-ratio: 4 / 3; background: var(--soft); overflow: hidden; }
.inventory-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inventory-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.inventory-card-body h3 { font-size: 1.0625rem; line-height: 1.3; margin: 0; }
.inventory-card-meta { margin: 0; font-size: .8125rem; color: var(--muted); }
.inventory-card-price-row { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.inventory-card-price { font-weight: 700; font-size: 1.05rem; }
.inventory-card-lease { font-size: .8125rem; color: var(--muted); }
.inventory-state { padding: 48px 24px; text-align: center; color: var(--muted); background: var(--soft); border-radius: var(--camper-card-radius, 18px); }
.inventory-state-error { color: var(--ink); background: #fdeeee; }
.inventory-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.inventory-page-btn { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.inventory-page-btn:hover:not(:disabled) { background: var(--soft); }
.inventory-page-btn[aria-current="page"] { background: var(--green); border-color: var(--green); }
.inventory-page-btn:focus-visible { outline: 3px solid #527d22; outline-offset: 2px; }
.inventory-page-btn:disabled { cursor: default; }
/* Pagination renders as real links (crawlable); keep the original button look. */
a.inventory-page-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.inventory-page-btn[aria-current="page"]:hover { background: var(--green); cursor: default; }
/* Short static category introduction above the inventory filters. */
.inventory-intro { max-width: 780px; margin: 0 0 32px; }
.inventory-intro p:last-child { margin-bottom: 0; }
.inventory-seller-cta { margin-top: 48px; }
@media (min-width: 640px) {
  .inventory-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .inventory-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* AVM-eigen voertuigdetailpagina (netlify/functions/vehicle-detail.js). De fotogalerij
   hergebruikt de bestaande .camper-slider-component (assets/js/main.js pakt die automatisch op). */
.vehicle-detail-heading { margin-top: 8px; }
.vehicle-detail-heading h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.vehicle-detail-badge { font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; vertical-align: middle; }
.vehicle-detail-badge-sold { background: var(--ink); color: white; }
.vehicle-detail-badge-reserved { background: var(--green); color: var(--ink); }
.vehicle-detail-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin: 16px 0; }
.vehicle-detail-price { font-size: 1.75rem; font-weight: 700; }
.vehicle-detail-lease { color: var(--muted); font-size: .9375rem; }
.vehicle-detail-actions { margin-bottom: 32px; }
.vehicle-detail-actions .button { min-height: 52px; }
.vehicle-detail-gallery { margin: 32px 0; }
.vehicle-detail-specs, .vehicle-detail-accessories, .vehicle-detail-warranty, .vehicle-detail-description { margin-top: 40px; max-width: 780px; }
.vehicle-detail-spec-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
.vehicle-detail-spec-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.vehicle-detail-spec-list dt { color: var(--muted); margin: 0; }
.vehicle-detail-spec-list dd { margin: 0; font-weight: 600; text-align: right; }
.vehicle-detail-accessory-groups { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 20px; }
.vehicle-detail-accessory-group h3 { font-size: 1rem; margin-bottom: 10px; }
.vehicle-detail-accessory-group ul { margin: 0; padding-left: 20px; color: var(--muted); }
.vehicle-detail-warranty ul { margin: 16px 0 0; padding-left: 20px; }
.vehicle-detail-description-text { margin-top: 16px; color: var(--muted); line-height: 1.7; }
.vehicle-detail-description-text p { margin: 0 0 16px; }
.vehicle-detail-seller-cta { margin-top: 56px; padding: 28px 24px; background: var(--ink); color: white; border-radius: var(--camper-card-radius, 18px); }
.vehicle-detail-seller-cta h2 { color: white; }
.vehicle-detail-seller-cta p { color: #d0dbe0; }
@media (min-width: 640px) {
  .vehicle-detail-accessory-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-detail-seller-cta { padding: 40px; }
}
@media (min-width: 900px) {
  .vehicle-detail-accessory-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Visueel verborgen, blijft beschikbaar voor schermlezers (bijv. een sectie-heading die alleen
   voor structuur/aria-labelledby dient). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* /financiering/: vertrouwensregel onder de hero-CTA's. */
.financing-trust-note { margin-top: 18px; font-size: .8125rem; color: var(--muted); max-width: 520px; }

/* Op het donkere .camper-sales-benefits-blok is de standaard (donkere) .text-link-kleur
   onleesbaar; hier alleen voor de financieringspagina overschreven met de AVM-groene accentkleur. */
.financing-page .camper-sales-benefits .text-link { color: var(--green); }

/* Ingebedde externe OccasionVoorraad/DAF-financieringsmodule: eigen wrapperklassen zodat deze
   los staat van de Wheeler Delta-voorraadmodule (.inventory-*) elders op de site. */
.financing-page #financing-module-title { overflow-wrap: anywhere; word-break: normal; }
.financing-frame-wrap { margin-top: 28px; min-width: 0; }
.financing-module-link { margin-bottom: 16px; min-height: 44px; font-size: .875rem; }
.financing-frame-scroll {
  width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--camper-card-radius); background: var(--soft);
}
.financing-frame { display: block; width: 100%; min-width: 640px; max-width: 100%; height: 1000px; border: 0; }
.financing-frame:focus-visible { outline: 3px solid #527d22; outline-offset: -3px; }
.financing-frame-fallback { margin: 16px 0 0; font-size: .8125rem; color: var(--muted); }
.financing-frame-fallback a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .financing-frame { height: 700px; }
}

.financing-notice { padding: 24px 28px; background: var(--soft); border-radius: var(--camper-card-radius); }
.financing-notice p { margin-bottom: 0; color: var(--muted); font-size: .9375rem; }

/* /financiering/: korte auto/camper-keuze onder de financieringsmodule. */
.financing-split-heading { font-size: 1.4rem; margin-bottom: 20px; }
.financing-split-grid { display: grid; gap: 20px; }
.financing-split-item { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--camper-card-radius); background: var(--soft); }
.financing-split-item p { color: var(--muted); }
.financing-split-note { margin-top: 20px; font-size: .8125rem; color: var(--muted); max-width: 640px; }
@media (min-width: 640px) {
  .financing-split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* /garantie/: eigen klassen (losstaand van .financing-split-*, financiering.html blijft ongewijzigd)
   voor de korte auto/camper-keuze en het toelichtingsblok, zelfde visuele lijn als /financiering/. */
.garantie-fit-cta { margin-top: 24px; }
.garantie-notice { padding: 24px 28px; background: var(--soft); border-radius: var(--camper-card-radius); }
.garantie-notice p { margin-bottom: 0; color: var(--muted); font-size: .9375rem; }
.garantie-split-heading { font-size: 1.4rem; margin-bottom: 20px; }
.garantie-split-grid { display: grid; gap: 20px; }
.garantie-split-item { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--camper-card-radius); background: var(--soft); }
.garantie-split-item p { color: var(--muted); }
.garantie-split-item .text-link { margin-top: 12px; min-height: 44px; }
@media (min-width: 640px) {
  .garantie-split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* /verzekeringen/: eigen klassen (losstaand van .garantie-split-* en .financing-split-*, die
   pagina's blijven ongewijzigd) voor de factorenlijst, de auto/camper-keuze en het toelichtingsblok. */
.verzekeringen-factors-grid { display: grid; gap: 12px; margin-bottom: 24px; }
.verzekeringen-factor { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--camper-card-radius); background: var(--soft); font-weight: 700; font-size: .9375rem; }
.verzekeringen-notice { padding: 24px 28px; background: var(--soft); border-radius: var(--camper-card-radius); }
.verzekeringen-notice p { margin-bottom: 0; color: var(--muted); font-size: .9375rem; }
.verzekeringen-split-heading { font-size: 1.4rem; margin-bottom: 20px; }
.verzekeringen-split-grid { display: grid; gap: 20px; }
.verzekeringen-split-item { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--camper-card-radius); background: var(--soft); }
.verzekeringen-split-item p { color: var(--muted); }
.verzekeringen-split-item .text-link { margin-top: 12px; min-height: 44px; }
@media (min-width: 640px) {
  .verzekeringen-factors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .verzekeringen-split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .verzekeringen-factors-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* SEO landing pages and compact navigation on the existing sales hubs. */
@media screen {
  .landing-page h1, .landing-page h2, .landing-page h3 { overflow-wrap: anywhere; }
  .landing-page .breadcrumbs { align-items: center; gap: 8px 12px; margin-bottom: 32px; }
  .landing-page .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .landing-page .breadcrumbs > * { min-width: 0; overflow-wrap: anywhere; }
  .landing-hero { display: grid; gap: 32px; padding-bottom: 20px; }
  .landing-hero > *, .landing-split > * { min-width: 0; }
  .landing-hero h1 { max-width: 1000px; }
  .landing-hero .lead { max-width: 820px; }
  .landing-hero .camper-sales-actions { margin-top: 28px; }
  .landing-page .button { max-width: 100%; overflow-wrap: anywhere; }
  .landing-page .camper-sales-section { padding-block: 48px; }
  .landing-page > .camper-sales-benefits { margin-block: 0 40px; }
  .landing-page .camper-sales-benefits a { color: var(--green); }
  .landing-page .camper-sales-benefits a:focus-visible { outline-color: var(--green); }
  .landing-page > .camper-sales-faq { padding-top: 32px; }
  .landing-grid { display: grid; gap: 18px; margin-top: 24px; }
  .landing-card { min-width: 0; background: var(--soft); border: 1px solid var(--line); border-radius: var(--camper-card-radius); padding: 24px; }
  .landing-card h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.02em; }
  .landing-card p { color: var(--muted); margin-bottom: 0; }
  .landing-split { display: grid; gap: 28px; align-items: start; }
  .landing-photo { display: flex; align-items: center; min-height: 250px; margin: 0; padding: 28px; background: var(--soft); border: 1px dashed #829497; border-radius: var(--camper-card-radius); }
  .landing-photo figcaption > span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin-bottom: 16px; }
  .landing-photo strong { display: block; font-size: 1.3rem; line-height: 1.3; }
  .landing-photo p { margin: 16px 0 0; font-size: .875rem; color: var(--muted); }
  .landing-region .landing-hero { border-left: 4px solid var(--green); padding-left: 24px; }
  .landing-valuation .landing-hero { background: var(--soft); border-radius: var(--camper-card-radius); padding: 28px 24px; }
  .seo-hub-links { padding-block: 40px 48px; }
  .seo-hub-groups { display: grid; gap: 24px; }
  .seo-hub-groups h3 { font-size: 1rem; letter-spacing: 0; margin-bottom: 12px; }
  .seo-link-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .seo-link-grid a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: .875rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
  .seo-link-grid a:hover { background: var(--green); border-color: #527d22; }
  .seo-link-grid a:focus-visible { outline: 3px solid #527d22; outline-offset: 3px; }
  @media (min-width: 640px) { .landing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) {
    .landing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
    .landing-split .landing-grid { grid-template-columns: 1fr; margin-top: 0; }
    .landing-hero:has(.landing-photo) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
    .seo-hub-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .seo-hub-groups:has(.seo-hub-brands) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seo-hub-brands { grid-column: 1 / -1; }
    .landing-valuation .landing-hero { padding: 48px; }
  }
}

/* Shared supporting company photograph; keep the complete image visible. */
.avm-business-photo { margin: 0; min-width: 0; width: 100%; max-width: 560px; justify-self: center; align-self: center; overflow: hidden; border-radius: var(--camper-card-radius, 18px); }
.avm-business-photo img { display: block; width: 100%; height: auto; }
.avm-business-section { align-items: center; }

/* Voertuigfotogalerij op de Cadar-detailpagina (assets/js/vehicle-gallery.js): teller,
   pauzeknop en fullscreen-overlay, uitsluitend geschoold op .vehicle-detail-gallery zodat de
   camper-verkopen-slider en de Adria/Bürstner-foto's ongewijzigd blijven. */
.vehicle-detail-gallery { position: relative; }
.camper-slider-counter {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; background: #06121cb3; color: white;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; pointer-events: none;
}
.camper-slider-playpause {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: #06121cb3; color: white; cursor: pointer;
}
.camper-slider-playpause svg { width: 16px; height: 16px; }
.camper-slider-playpause:hover { background: #06121ce6; }
.camper-slider-playpause:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.vehicle-detail-gallery .camper-slide img { cursor: zoom-in; }

/* Hint/knop onder de galerij die ook fullscreen opent. */
.gallery-fullscreen-hint {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; margin: 14px 0 0;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft);
  color: var(--ink); font: inherit; cursor: pointer; max-width: max-content;
}
.gallery-fullscreen-hint:hover { background: #e9efe9; }
.gallery-fullscreen-hint:focus-visible { outline: 3px solid #527d22; outline-offset: 2px; }
.gallery-fullscreen-hint-main { font-size: .8125rem; font-weight: 700; }
.gallery-fullscreen-hint-sub { font-size: .75rem; color: var(--muted); }

/* Fullscreen-overlay: direct onder <body> (zie vehicle-gallery.js), dus nooit gevangen in een
   contentcontainer die position: fixed een lokale containing block zou kunnen geven. Elke maat
   staat hier expliciet (width/height/min-height/margin/padding/max-width/max-height) zodat geen
   enkele geërfde of cascaderende regel de overlay kleiner dan de volledige viewport kan maken. */
/* top/left (niet inset/right/bottom) zodat width/height de bepalende maat blijven: met alle vier
   insets gezet dicteert het box model de breedte vanuit left+right, wat op desktop terugviel op
   documentElement.clientWidth. Die blijft echter alsnog ~15px smaller dan window.innerWidth zolang
   de sitewide "scrollbar-gutter: stable" (elders op <html>, niet hier gewijzigd) een permanente
   gutter reserveert — Chromium's 100vw/100dvh houden daar zelf ook rekening mee. Gallery-scoped
   fix: terwijl fullscreen open staat (JS zet html.gallery-fullscreen-active) schakelen we de
   gutter-reservering tijdelijk uit, zodat de overlay echt de volle breedte krijgt; buiten de
   gallery blijft scrollbar-gutter overal ongewijzigd. */
html.gallery-fullscreen-active { scrollbar-gutter: auto; }
.gallery-fullscreen {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh;
  margin: 0; padding: 0; max-width: none; max-height: none;
}
.gallery-fullscreen[hidden] { display: none !important; }
.gallery-fullscreen-backdrop { position: absolute; inset: 0; background: #06121c; }
/* Eigen position: fixed op de stage (i.p.v. absolute t.o.v. de overlay) zodat de foto rechtstreeks
   tegen de viewport aan zit, onafhankelijk van welk box model de overlay zelf toepast. */
.gallery-fullscreen-stage {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 0; margin: 0;
}
/* CSS-basis (object-fit: contain schaalt zelf al maximaal zonder vervorming/afsnijden); de JS
   zet hier bovenop een inline width/height op basis van de echte beeld- vs. viewportverhouding
   (zie fitFullscreenImage in vehicle-gallery.js) voor exacte edge-to-edge weergave op mobiel. */
.gallery-fullscreen-image {
  display: block;
  width: auto; height: calc(100vh - 8px); height: calc(100dvh - 8px);
  max-width: 100vw; max-height: 100vh; max-height: 100dvh;
  object-fit: contain; object-position: center;
}
.gallery-fullscreen-close {
  position: absolute; z-index: 2;
  top: calc(16px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left));
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #ffffff40; background: #06121cb3; color: white; cursor: pointer;
}
.gallery-fullscreen-close svg { width: 20px; height: 20px; }
.gallery-fullscreen-close:hover { background: #06121ce6; }
.gallery-fullscreen-close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.gallery-fullscreen-counter {
  position: absolute; z-index: 2;
  top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  margin: 0; padding: 6px 14px; border-radius: 999px; background: #06121cb3; color: white;
  font-size: .8125rem; font-weight: 700;
}
.gallery-fullscreen-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid #ffffff40; background: #06121cb3; color: white; cursor: pointer;
}
.gallery-fullscreen-arrow svg { width: 22px; height: 22px; }
.gallery-fullscreen-arrow:hover { background: #06121ce6; }
.gallery-fullscreen-arrow:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.gallery-fullscreen-prev { left: calc(12px + env(safe-area-inset-left)); }
.gallery-fullscreen-next { right: calc(12px + env(safe-area-inset-right)); }

/* Zolang fullscreen open staat: pagina-scroll blokkeren en overlappende UI (sticky header,
   chatwidget, WhatsApp-knop) verbergen in plaats van met z-index te concurreren — zelfde,
   beproefde aanpak als de mobiele menu-fix elders op de site. */
body.gallery-fullscreen-open { position: fixed; width: 100%; overflow: hidden; }
body.gallery-fullscreen-open .site-header,
body.gallery-fullscreen-open .floating-whatsapp,
body.gallery-fullscreen-open .avm-chat-toggle,
body.gallery-fullscreen-open .avm-chat-attention,
body.gallery-fullscreen-open .avm-chat-panel { display: none !important; }

@media (min-width: 640px) {
  .gallery-fullscreen-arrow { width: 56px; height: 56px; }
}

/* /auto-verkopen/ hero: page-specific full-bleed photo treatment. Scoped entirely
   under .auto-verkopen-hero so the shared .camper-intro component used by
   camper-verkopen/verzekeringen/garantie/financiering is left untouched. */
.auto-verkopen-hero { position: relative; overflow: hidden; display: block; width: 100vw; margin-left: calc(50% - 50vw); color: white; padding: 72px 0; min-height: 520px; }
.auto-verkopen-hero-media { position: absolute; inset: 0; z-index: 0; }
.auto-verkopen-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(1.04) contrast(1.06) saturate(1.05); }
.auto-verkopen-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,24,31,.94) 0%, rgba(7,24,31,.82) 25%, rgba(7,24,31,.52) 45%, rgba(7,24,31,.18) 65%, rgba(7,24,31,.03) 100%); }
.auto-verkopen-hero-inner { position: relative; z-index: 1; }
.auto-verkopen-hero .camper-intro-copy { max-width: 620px; }
.auto-verkopen-hero h1 { font-size: clamp(2.6rem, 4.5vw, 4.2rem); font-weight: 800; line-height: .98; }
.auto-verkopen-hero-accent { color: var(--green); }
.auto-verkopen-hero .lead { color: #dce6ea; }
.auto-verkopen-hero .eyebrow { color: var(--green); }
.auto-verkopen-hero .camper-sales-usps li::before { color: var(--green); }
.auto-verkopen-hero .camper-sales-secondary { background: transparent; border-color: #ffffff80; color: white; }
.auto-verkopen-hero .camper-sales-secondary:hover { background: #ffffff1a; }
.auto-verkopen-hero + .camper-sales-benefits { margin-top: 70px; }
@media (min-width: 640px) {
  .auto-verkopen-hero .camper-sales-usps { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
@media (max-width: 760px) {
  .auto-verkopen-hero { padding: 44px 0; min-height: 420px; }
  .auto-verkopen-hero + .camper-sales-benefits { margin-top: 42px; }
  .auto-verkopen-hero-media img { object-position: 68% center; }
}

/* /contact/ page: intro grid (registration card + office photo) and the
   Google Maps embed under the location preview card. Page-specific selectors
   only (.contact-intro-grid, .contact-office-photo, .location-preview-column,
   .location-map) so no shared component (.notice, .location-preview, etc.)
   used elsewhere is touched.
   The intro grid and .location-block below it share the exact same
   grid-template-columns/gap/breakpoint so the two rows form one aligned
   2x2 layout on desktop, with the registration card stretched to the same
   height as the office photo (mobile keeps both stacked, auto height). */
.contact-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.contact-intro-grid .contact-registration { display: flex; min-width: 0; }
.contact-intro-grid .notice { margin-top: 0; flex: 1 1 auto; max-width: none; box-sizing: border-box; border-radius: 18px; }
.contact-office-photo { margin: 0; min-width: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 24px #142c3912; min-height: 240px; }
.contact-office-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(1.03) contrast(1.04) saturate(1.03); }
.location-preview-column { display: flex; flex-direction: column; min-width: 0; }
.location-map { margin-top: 20px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 24px #142c3912; }
.location-map iframe { display: block; width: 100%; height: 320px; border: 0; }
@media (min-width: 760px) {
  .contact-intro-grid, .location-block { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
  .contact-office-photo { min-height: 100%; }
}
@media (max-width: 759px) {
  .contact-office-photo { min-height: 220px; }
  .location-map iframe { height: 260px; }
}

/* /aanbod/ intro: page-specific grid pairing the heading/intro text with the
   showroom photo. Scoped to .aanbod-intro-* so /auto-aanbod/ and
   /camper-aanbod/ (separate static files reusing .page-intro/.inventory)
   are unaffected, and the filter form/inventory grid below is untouched. */
.aanbod-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 32px; margin-bottom: 40px; }
.aanbod-intro-copy { min-width: 0; }
.aanbod-intro-photo { margin: 0; min-width: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 24px #142c3912; min-height: 220px; }
.aanbod-intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(1.04) contrast(1.05) saturate(1.04); }
@media (min-width: 760px) {
  .aanbod-intro-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; }
  .aanbod-intro-photo { min-height: 100%; }
}

/* /verkoopformulier/ hero: full-bleed photo hero matching the auto-verkopen /
   camper-verkopen hero style. Scoped under .verkoopformulier-hero so the
   shared .camper-intro component used by other pages is untouched. */
.verkoopformulier-hero { position: relative; overflow: hidden; display: block; width: 100vw; margin-left: calc(50% - 50vw); color: white; padding: 72px 0; min-height: 520px; }
.verkoopformulier-hero-media { position: absolute; inset: 0; z-index: 0; }
.verkoopformulier-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; filter: brightness(1.04) contrast(1.06) saturate(1.05); }
.verkoopformulier-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,24,31,.94) 0%, rgba(7,24,31,.82) 25%, rgba(7,24,31,.52) 45%, rgba(7,24,31,.18) 65%, rgba(7,24,31,.03) 100%); }
.verkoopformulier-hero-inner { position: relative; z-index: 1; }
.verkoopformulier-hero .camper-intro-copy { max-width: 620px; }
.verkoopformulier-hero h1 { font-size: clamp(1rem, 7.7vw - 5px, 2.95rem); font-weight: 800; line-height: 1.05; overflow-wrap: normal; word-break: keep-all; }
.verkoopformulier-hero-accent { color: var(--green); }
.verkoopformulier-hero .lead { color: #dce6ea; margin-bottom: 0; }
.verkoopformulier-hero .eyebrow { color: var(--green); }
@media (max-width: 760px) {
  .verkoopformulier-hero { padding: 44px 0; min-height: 380px; }
}

/* /verkoopformulier/ action toolbars: the top row keeps every original action but
   presents them as a quiet secondary strip (all classes/JS hooks unchanged); the
   prominent close-out actions now live at the end of the form, see
   .verkoopformulier-close below. Scoped classes only exist on this page. */
.form-toolbar-top .button { min-height: 40px; padding: 9px 14px; font-size: .8125rem; font-weight: 600; gap: 10px; }
.form-toolbar-top .button-dark, .form-toolbar-top .button-green { background: white; color: var(--ink); border: 1px solid var(--line); }
.form-toolbar-top .button-dark:hover, .form-toolbar-top .button-green:hover { background: var(--soft); }

/* /verkoopformulier/ closing call-to-action: the primary Print/PDF action plus
   the two explicit send options (e-mail, WhatsApp), reusing the existing
   mailto:/wa.me links and .form-print/.form-new JS hooks unchanged. */
.verkoopformulier-close { margin-top: 56px; padding: 40px; background: var(--soft); border-radius: 18px; text-align: center; }
.verkoopformulier-close h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 10px; }
.verkoopformulier-close > p { max-width: 480px; margin: 0 auto 28px; color: var(--muted); }
.verkoopformulier-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.verkoopformulier-close-note { max-width: 480px; margin: 20px auto 0; font-size: .8125rem; color: var(--muted); }
.verkoopformulier-close-secondary { display: inline-block; margin-top: 20px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .875rem; text-decoration: underline; cursor: pointer; padding: 8px; }
.verkoopformulier-close-secondary:hover { color: var(--ink); }
@media (max-width: 600px) {
  .verkoopformulier-close { padding: 28px 20px; }
  .verkoopformulier-close-actions { flex-direction: column; align-items: stretch; }
}

/* Homepage "Wij nemen het van u over." USPs: quiet auto-cycling highlight
   driven by main.js toggling .is-active on one .usp-grid article at a time.
   Only color/background/shadow change, so the existing 3x2 (2x1 on mobile)
   grid never shifts size. .usp-grid is homepage-only. */
.usp-grid article { transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease; }
.usp-grid article > span, .usp-grid article h3 { transition: color .4s ease; }
.usp-grid article.is-active {
  border-top-color: var(--green);
  background-color: rgba(198, 238, 131, .08);
  box-shadow: inset 0 0 0 1px rgba(198, 238, 131, .35);
}
.usp-grid article.is-active > span { color: var(--green); }
.usp-grid article.is-active h3 { color: #527d22; }

/* Hymer Free 600S-foto's: voorbeeldpresentatie van een camper (geen aanbod). Vaste beeldverhoudingen,
   zodat er geen layout shift is; afgeronde hoeken en schaduw sluiten aan op .camper-intro-media. */
.home-camper-photo { grid-column: 1 / -1; margin: 8px 0 0; overflow: hidden; border-radius: 18px; background: var(--soft); box-shadow: 0 8px 24px #142c3912; }
.home-camper-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 760px) {
  .home-camper-photo { margin-top: -32px; }
  .home-camper-photo img { aspect-ratio: 2 / 1; }
}
.camper-presentation { padding-block: 64px; }
.camper-presentation h2 { margin-bottom: 8px; }
.camper-gallery { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.camper-gallery > li { flex: 0 0 100%; min-width: 0; }
.camper-gallery figure { margin: 0; overflow: hidden; border-radius: var(--camper-card-radius, 18px); background: var(--soft); box-shadow: 0 8px 24px #142c3912; }
.camper-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 640px) {
  .camper-gallery > li { flex-basis: calc((100% - 20px) / 2); }
}
@media (min-width: 1100px) {
  .camper-gallery > li { flex-basis: calc((100% - 40px) / 3); }
}
.process-step-photo figure { margin: 24px 0 0; overflow: hidden; border-radius: 12px; }
.process-step-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 640px) {
  .process-page .camper-sales-steps > .process-step-photo { grid-row: span 2; }
}

/* Hymer Free 600S-voorbeeldfoto's op de merk- en typepagina's (Hymer, buscamper). */
.landing-card:has(.landing-card-photo) { display: flex; flex-direction: column; }
.landing-card-photo { margin: auto 0 0; padding-top: 20px; }
.landing-card-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.landing-photo-pair { display: grid; gap: 18px; margin-top: 28px; }
.landing-photo-pair figure { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--camper-card-radius, 18px); background: var(--soft); box-shadow: 0 8px 24px #142c3912; }
.landing-photo-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.landing-photo-pair-43 img { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .landing-photo-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* AVM proposition: existing colors and type, compact content cards. */
.cost-condition{font-size:.875rem;line-height:1.5;margin:0 0 20px;max-width:650px}.hero .cost{margin-bottom:6px}.hero .cost-condition{color:#e4ecef}.auto-verkopen-hero .cost-condition{color:inherit}
.avm-proposition .container{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding-block:28px}.avm-proposition article{min-width:0}.avm-proposition strong{display:block;font-size:clamp(1.25rem,1.6vw,1.65rem);letter-spacing:-.04em;line-height:1.2;margin-bottom:8px}.avm-proposition h2{font-size:.8rem;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px}.avm-proposition p{font-size:.85rem;font-weight:400;line-height:1.5;margin:0}
.avm-market-note{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;border-block:1px solid #ffffff38;padding:26px 0;margin:32px 0}.avm-market-note>strong{color:var(--green);font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;letter-spacing:-.04em}.avm-market-note p{margin:0 0 10px}.avm-market-note .avm-source{font-size:.8rem;line-height:1.6;margin:0;color:#d0dbe0}.avm-market-note a{color:inherit}
@media(max-width:1024px){.avm-proposition .container{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.avm-proposition strong{font-size:1.4rem}}
@media(max-width:600px){.avm-proposition .container{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;padding-block:24px}.avm-proposition article:last-child{grid-column:1/-1}.avm-market-note{grid-template-columns:1fr;gap:12px}.avm-market-note>strong{font-size:2.6rem}}

/* Smalle schermen (<360px): lange woorden in de USP-strook afbreken in plaats van horizontaal te overlopen. */
@media (max-width: 359px) { .avm-proposition article { min-width: 0; } .avm-proposition strong, .avm-proposition p { hyphens: auto; overflow-wrap: break-word; } }

/* Kostenvergelijkingen blijven binnen het bestaande, inklapbare dienstenmenu. */
.nav-services>div{min-width:240px}.nav-group .nav-subheading{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--muted);border-top:1px solid var(--line);padding:12px 8px 4px;margin:8px 0 0}.services-cost-comparisons .landing-grid{margin-top:24px}.services-cost-comparisons .services-card{display:block}.services-cost-comparisons .services-card h3{font-size:1.5rem}

/* Desktop: one navigation, a proportional official logo and a separate sale CTA. */
.site-header .desktop-brand-logo, .site-header .desktop-sale-cta { display: none; }
@media (min-width: 1211px) {
  .site-header .header-inner { width: min(1520px, calc(100% - 48px)); gap: 18px; min-height: 88px; flex-wrap: nowrap; }
  .site-header .brand { width: 180px; }
  .site-header .brand-mark, .site-header .brand-name { display: none; }
  .site-header .desktop-brand-logo { display: block; width: 180px; height: auto; aspect-ratio: 237.265625 / 46.40625; }
  .main-nav { gap: clamp(10px, 1vw, 18px); font-size: 13px; width: auto; flex-shrink: 0; }
  .main-nav > a, .main-nav > .nav-group > summary { white-space: nowrap; }
  .main-nav > .nav-group > summary:focus-visible { outline: 2px solid #527d22; outline-offset: 3px; border-radius: 4px; }
  .main-nav > .nav-group > summary:focus:not(:focus-visible) { outline: none; }
  .site-header .desktop-sale-cta { display: inline-flex; justify-content: center; white-space: nowrap; min-height: 46px; padding: 12px 16px; font-size: 13px; border-radius: 8px; flex-shrink: 0; }
  .nav-group > div { left: -12px; min-width: 220px; padding: 10px; border-radius: 12px; box-shadow: 0 14px 34px #142c391c; }
  .nav-services > div { min-width: 260px; }
  .nav-group > div a { border-radius: 6px; }
  .nav-group > div a:hover, .nav-group > div a:focus-visible { background: var(--soft); }
  .desktop-cost-heading { border-top: 1px solid var(--line); padding: 12px 8px 4px; margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }
}

/* P1 content blocks: isolated from the approved header and existing cards. */
.avm-brand-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}
.avm-brand-groups .landing-card{min-width:0}
.avm-business-models .landing-card h3{color:var(--ink)}
.avm-model-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;padding-left:20px;margin:24px 0}
.avm-model-list li{padding-left:2px}
@media(max-width:760px){.avm-brand-groups,.avm-model-list{grid-template-columns:1fr}.avm-brand-groups{margin:18px 0}.avm-model-list{gap:12px}}

.services-grid .services-card-wide { grid-column: 1 / -1; }

/* Mobiel: primaire verkoopknop direct na de intro op auto- en camperverkopen (desktop ongewijzigd). */
@media (max-width: 759px) {
  .auto-verkopen-hero .camper-intro-copy, .camper-verkopen-hero .camper-intro-copy { display: flex; flex-direction: column; }
  .auto-verkopen-hero .camper-intro-copy > *, .camper-verkopen-hero .camper-intro-copy > * { order: 5; }
  .auto-verkopen-hero .camper-intro-copy > .eyebrow, .camper-verkopen-hero .camper-intro-copy > .eyebrow { order: 0; }
  .auto-verkopen-hero .camper-intro-copy > h1, .camper-verkopen-hero .camper-intro-copy > h1 { order: 1; }
  .auto-verkopen-hero .camper-intro-copy > .lead, .camper-verkopen-hero .camper-intro-copy > .lead { order: 2; }
  .auto-verkopen-hero .camper-intro-copy > .cost-condition, .camper-verkopen-hero .camper-intro-copy > .cost-condition { order: 3; }
  .auto-verkopen-hero .camper-intro-copy > .camper-sales-actions, .camper-verkopen-hero .camper-intro-copy > .camper-sales-actions { order: 4; margin-bottom: 8px; }
}

/* AVM opening hours: existing brand green over the existing dark ink base. */
.hours > .is-today {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(82, 125, 34, .18), rgba(82, 125, 34, .18));
}
.hours > .is-today > dt, .hours > .is-today > dd { color: var(--green); }