/* Looymans Auto's, demo-homepage. Lettertypen: TeX Gyre Adventor (GUST Font License, verwant aan de gevelletters) en Source Sans 3 (OFL). */
@font-face { font-family: "Adventor"; src: url("../assets/fonts/adventor-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Adventor"; src: url("../assets/fonts/adventor-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../assets/fonts/source-sans-3-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #f2f3f1;
  --vlak: #fbfbfa;
  --grijs: #e6e8e6;
  --ink: #1d2733;
  --navy: #2f4155;
  --navy-diep: #223041;
  --muted: #56616e;
  --lijn: #cfd4d8;
  --accent: #d2392b;
  --accent-hover: #b52f22;
  --accent-licht: #f95446;
  --accent-tekst: #b02e21;
  --plaat: #f4c514;
  --kop: "Adventor", "Avenir Next", "Century Gothic", sans-serif;
  --tekst: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1320px;
  --r: 4px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --kop-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-tap-highlight-color: rgba(47, 65, 85, .15); margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--tekst); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--kop); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: var(--r); }
.skip:focus { top: 1rem; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .7rem 1.25rem; border-radius: var(--r); font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .1s ease-out; }
.knop:active { transform: scale(.97); }
.knop--vol { background: var(--accent); color: #fff; }
.knop--vol:hover { background: var(--accent-hover); }
.knop--lijn { border-color: var(--navy); color: var(--navy); background: transparent; }
.knop--lijn:hover { background: var(--navy); color: #fff; }
.knop--tekst { padding-inline: .25rem; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.knop--tekst:hover { color: var(--accent); }
.knop .ic { width: 1.1em; height: 1.1em; }

.titel { font-size: clamp(1.75rem, 3.2vw, 2.6rem); color: var(--navy-diep); max-width: 22ch; }
.titel--klein { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.label { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-tekst); }

/* Kop */
.kop { position: sticky; top: 0; z-index: 30; background: rgba(242, 243, 241, .88); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kop.is-gescrold { border-bottom-color: var(--lijn); }
@media (prefers-reduced-transparency: reduce) { .kop { background: var(--bg); backdrop-filter: none; } }
.kop__in { height: var(--kop-h); display: flex; align-items: center; gap: 2rem; }
.kop__logo { color: var(--navy); display: block; padding: .5rem 0; }
.kop__logo img { width: clamp(190px, 18vw, 254px); height: auto; }
.kop__nav { display: flex; gap: 1.75rem; margin-left: auto; }
.kop__nav a { text-decoration: none; font-weight: 600; color: var(--navy); padding: .5rem 0; position: relative; }
.kop__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.kop__nav a:hover::after, .kop__nav a:focus-visible::after { transform: scaleX(1); }
.kop__bel { min-height: 42px; padding: .45rem 1rem; }
.kop__menu { display: none; margin-left: auto; background: none; border: 0; width: 48px; height: 48px; align-items: center; justify-content: center; color: var(--navy); cursor: pointer; }
.kop__menu .ic { width: 28px; height: 28px; }
.mobiel-menu { display: grid; padding: .5rem var(--gutter) 1.25rem; border-top: 1px solid var(--lijn); background: var(--bg); }
.mobiel-menu[hidden] { display: none; }
.mobiel-menu a { padding: .9rem 0; font-family: var(--kop); font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--navy); border-bottom: 1px solid var(--grijs); }

/* Hero */
.hero { padding-top: clamp(1rem, 3vh, 2rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: center; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.hero__tekst { display: grid; gap: 1.25rem; padding-block: 1rem; }
.hero__titel { font-size: clamp(2.3rem, 3.75vw, 3.6rem); color: var(--navy-diep); line-height: 1.02; letter-spacing: -0.03em; }
.hero__titel .regel { display: block; }
.hero__sub { font-size: 1.1875rem; color: var(--muted); max-width: 34ch; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

.stoep { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: calc(100svh - var(--kop-h) - 2.5rem); justify-self: end; background: #c9ccc9; overflow: visible; }
.stoep__beeld { position: absolute; inset: 0; overflow: hidden; }
.stoep__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 1s ease; }
.stoep__beeld img.is-actief { opacity: 1; }
.stoep__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 28, 38, .35), rgba(20, 28, 38, 0) 35%); pointer-events: none; }
.stoep__kader { position: absolute; inset: clamp(12px, 2vw, 28px); border: 1.5px solid rgba(255, 255, 255, .9); pointer-events: none; transform-origin: center; }
.stoep__nu { position: absolute; left: clamp(24px, 3.4vw, 52px); bottom: clamp(24px, 3.4vw, 52px); display: flex; align-items: center; gap: 1rem; background: var(--vlak); padding: .75rem .75rem .75rem 1rem; border-radius: var(--r); box-shadow: 0 10px 30px rgba(20, 28, 38, .22); max-width: calc(100% - 48px); }
.stoep__info { min-width: 0; }
.stoep__naam { font-family: var(--kop); font-weight: 700; color: var(--navy-diep); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stoep__prijs { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.stoep__bekijk { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem .9rem; border: 0; border-radius: var(--r); background: var(--navy); color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; }
.stoep__bekijk:hover { background: var(--navy-diep); }
.stoep__pauze { position: absolute; right: clamp(24px, 3.4vw, 52px); bottom: clamp(24px, 3.4vw, 52px); min-height: 40px; padding: .4rem .9rem; border-radius: var(--r); border: 1.5px solid rgba(255, 255, 255, .9); background: rgba(20, 28, 38, .78); color: #fff; font-weight: 600; font-size: .9375rem; cursor: pointer; }
.stoep__pauze:hover { background: rgba(20, 28, 38, .7); }
.stoep__lijn { position: absolute; left: 50%; top: 100%; width: 1.5px; height: clamp(48px, 7vw, 88px); background: var(--navy); transform-origin: top; }

.kenteken { display: inline-flex; align-items: center; font-family: var(--tekst); font-weight: 700; font-size: .95rem; letter-spacing: .06em; background: var(--plaat); color: #141414; border-radius: 3px; padding: .2rem .55rem .2rem .9rem; position: relative; white-space: nowrap; border: 1.5px solid #141414; line-height: 1.3; }
.kenteken::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .45rem; background: #1f4aa8; border-radius: 1px 0 0 1px; }

/* Voorraad */
.voorraad { padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem); }
.voorraad__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 2rem; }
.voorraad__teller { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.voorraad__raster { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.filters { position: sticky; top: calc(var(--kop-h) + 1.25rem); }
.filters__mobiel > summary { display: none; }
.filters__form { display: grid; gap: 1.5rem; }
.filter { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter legend, .filter__label { font-family: var(--kop); font-weight: 700; color: var(--navy-diep); font-size: 1rem; padding: 0; margin-bottom: .6rem; display: block; }
.filter__opties { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .3rem .75rem; border: 1px solid var(--lijn); border-radius: 999px; background: var(--vlak); font-size: .9375rem; font-weight: 500; transition: background-color .2s, border-color .2s, color .2s; }
.chip span small { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.chip input:hover + span { border-color: var(--navy); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip input:checked + span small { color: #d4dbe3; }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
select { min-height: 44px; width: 100%; padding: .5rem .75rem; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); color: var(--ink); }
.filters__wis { justify-self: start; background: none; border: 0; padding: .25rem 0; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

.kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 2rem 1.5rem; }
.kaart { display: flex; flex-direction: column; background: var(--vlak); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 0 rgba(29, 39, 51, .06); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.kaart:hover { box-shadow: 0 14px 34px rgba(34, 48, 65, .14); transform: translateY(-2px); }
.kaart__knop { all: unset; display: flex; flex-direction: column; flex: 1; cursor: pointer; }
.kaart__knop:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.kaart__foto { position: relative; aspect-ratio: 4 / 3; background: var(--grijs); overflow: hidden; }
.kaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.kaart:hover .kaart__foto img { transform: scale(1.035); }
.kaart__leeg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .75rem; background: var(--navy); color: #e8edf2; text-align: center; padding: 1rem; }
.kaart__leeg .kenteken { font-size: 1.15rem; }
.kaart__leeg p { font-size: .9375rem; }
.kaart__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.kaart__naam { font-family: var(--kop); font-weight: 700; font-size: 1.1875rem; color: var(--navy-diep); line-height: 1.15; }
.kaart__uitv { color: var(--muted); font-size: .9375rem; line-height: 1.35; }
.specregel { display: flex; flex-wrap: wrap; gap: 0 .45rem; font-size: .9375rem; color: var(--ink); margin-top: .35rem; font-variant-numeric: tabular-nums; }
.specregel li { list-style: none; }
.specregel li + li::before { content: "/"; color: var(--accent); margin-right: .45rem; font-weight: 600; }
.specregel { padding: 0; margin-bottom: 0; }
.specregel--2 { margin-top: 0; color: var(--muted); }
.meer { margin: 2.5rem auto 0; display: flex; }
.kaart__voet { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--grijs); }
.kaart__prijs { font-family: var(--kop); font-weight: 700; font-size: 1.375rem; color: var(--navy-diep); font-variant-numeric: tabular-nums; }
.kaart__cta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--accent-tekst); }
.kaart__cta .ic { transition: transform .25s var(--ease); }
.kaart:hover .kaart__cta .ic { transform: translateX(3px); }
.kaart--verkocht .kaart__prijs { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.kaart--verkocht .kaart__cta { color: var(--muted); }
.verkocht { font-weight: 700; color: var(--accent-tekst); }
.leeg { padding: 2.5rem; background: var(--vlak); border-radius: var(--r); max-width: 60ch; }
.leeg__titel { font-family: var(--kop); font-weight: 700; font-size: 1.25rem; color: var(--navy-diep); margin-bottom: .5rem; }
.tekstknop { background: none; border: 0; padding: 0; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

/* Uitgelicht */
.uitgelicht { background: var(--grijs); }
.uitgelicht__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); max-width: 1600px; margin-inline: auto; align-items: stretch; }
.uitgelicht__tekst { padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 7vw, 6rem) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; }
.uitgelicht__titel { font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: var(--navy-diep); line-height: 1; }
.uitgelicht__titel span { display: block; font-family: var(--tekst); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); letter-spacing: 0; margin-top: .6rem; line-height: 1.3; }
.specs2 { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .9rem 2.5rem; font-weight: 600; font-size: 1.0625rem; }
.specs2 li { display: flex; align-items: center; gap: .6rem; }
.specs2 .ic { width: 1.5rem; height: 1.5rem; color: var(--navy); }
.uitgelicht__opties { color: var(--muted); max-width: 44ch; }
.uitgelicht__prijsrij { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: .5rem; }
.uitgelicht__prijs { font-family: var(--kop); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--accent-tekst); line-height: 1; font-variant-numeric: tabular-nums; }
.uitgelicht__foto { margin: 0; position: relative; overflow: hidden; min-height: 360px; }
.uitgelicht__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* Vestigingen */
.vestigingen { padding: clamp(5rem, 10vw, 8rem) 0; }
.vestigingen__raster { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.vestiging { background: var(--vlak); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.vestiging__foto { width: 100%; aspect-ratio: 770 / 370; object-fit: cover; }
.vestiging__body { padding: clamp(1.25rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.vestiging__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vestiging__kop h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--navy-diep); }
.status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9375rem; color: var(--muted); }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--lijn); }
.status.is-open { color: #1d6b3a; }
.status.is-open::before { background: #239150; box-shadow: 0 0 0 4px rgba(35, 145, 80, .16); }
.vestiging__adres { font-weight: 600; font-size: 1.125rem; }
.vestiging__wie { color: var(--muted); max-width: 46ch; }
.diensten { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.diensten li { padding: .3rem .75rem; border-radius: 999px; background: var(--grijs); font-size: .9375rem; font-weight: 500; }
.uren { margin: 0; display: grid; gap: .25rem; font-variant-numeric: tabular-nums; }
.uren div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--lijn); }
.uren dt { color: var(--muted); }
.uren dd { margin: 0; font-weight: 600; }
.vestiging__knoppen { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: auto; padding-top: .5rem; }

/* Sinds 1964 */
.sinds { background: var(--navy); color: #e9eef3; padding: clamp(4.5rem, 9vw, 7rem) 0; overflow: hidden; }
.sinds__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "jaar jaar" "tekst foto"; gap: 2rem 4rem; align-items: start; }
.sinds__jaar { grid-area: jaar; font-family: var(--kop); font-weight: 700; font-size: clamp(6rem, 22vw, 18rem); line-height: .8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(233, 238, 243, .55); }
.sinds__tekst { grid-area: tekst; display: grid; gap: 1.25rem; }
.sinds__titel { font-size: clamp(1.6rem, 2.8vw, 2.3rem); color: #fff; max-width: 24ch; }
.sinds__tekst > p { color: #d2dbe4; max-width: 56ch; }
.broers { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid rgba(233, 238, 243, .25); padding-top: 1.25rem; }
.broers strong { display: block; font-family: var(--kop); color: #fff; font-size: 1.0625rem; line-height: 1.2; }
.broers span { color: #c3cdd8; font-size: .9375rem; }
.sinds__foto { grid-area: foto; margin: 0; border: 1.5px solid rgba(255, 255, 255, .85); padding: 10px; }
.sinds__foto img { width: 100%; }

/* Inruil */
.inruil { padding: clamp(5rem, 10vw, 8rem) 0 clamp(2.5rem, 5vw, 4rem); }
.inruil__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.inruil__foto { margin: 0; min-height: 320px; position: relative; border-radius: var(--r) 0 0 var(--r); overflow: hidden; }
.inruil__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inruil__vlak { background: var(--vlak); padding: clamp(2rem, 4.5vw, 3.5rem); display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; border-radius: 0 var(--r) var(--r) 0; }
.vinkjes { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.vinkjes li { display: flex; gap: .7rem; align-items: flex-start; }
.vinkjes .ic { color: var(--accent); margin-top: .2em; width: 1.25em; height: 1.25em; }

/* Contact */
.contact { padding: clamp(3rem, 7vw, 6rem) 0 clamp(5rem, 10vw, 8rem); }
.contact__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem 5rem; align-items: start; }
.contact__intro { color: var(--muted); margin-top: 1rem; max-width: 40ch; }
.contactlijst { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0; }
.contactlijst li { display: flex; flex-direction: column; padding: .85rem 0; border-top: 1px solid var(--lijn); }
.contactlijst span { font-size: .9375rem; color: var(--muted); }
.contactlijst a { font-family: var(--kop); font-weight: 700; font-size: 1.3rem; color: var(--navy-diep); text-decoration: none; }
.contactlijst a:hover { color: var(--accent); }
.formulier { background: var(--vlak); padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--r); display: grid; gap: 1.1rem; }
.veld { display: grid; gap: .4rem; min-width: 0; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.veld label { font-weight: 600; color: var(--ink); }
.optioneel { font-weight: 400; color: var(--muted); }
.veld input, .veld textarea, .veld select { width: 100%; min-height: 48px; padding: .65rem .8rem; border: 1px solid #9aa3ad; border-radius: var(--r); background: #fff; color: var(--ink); }
.veld textarea { resize: vertical; min-height: 120px; }
.veld input:focus-visible, .veld textarea:focus-visible, .veld select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--navy); }
.veld [aria-invalid="true"] { border-color: #b3261e; }
.veld__fout { color: #b3261e; font-size: .9375rem; font-weight: 600; }
.formulier .knop { justify-self: start; }
.formulier__melding { padding: 1rem 1.1rem; border-radius: var(--r); background: #e3ece6; color: #1d4a2f; font-weight: 600; }

/* Voet */
.voet { background: var(--navy-diep); color: #cfd8e1; padding: 4rem 0 2rem; }
.voet__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.voet__logo { width: 230px; filter: brightness(0) invert(1); margin-bottom: 1.1rem; }
.voet__merk p { max-width: 38ch; }
.voet__keur { margin-top: .75rem; color: #aebccb; font-size: .9375rem; }
.voet__kop { font-size: 1rem; color: #fff; margin-bottom: .6rem; }
.voet a { color: #fff; text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet__onder { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgba(207, 216, 225, .2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9375rem; color: #aebccb; }
.voet__onder nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* Paneel */
.paneel { width: min(1100px, 100vw - 2rem); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 6px; background: var(--vlak); color: var(--ink); overflow: hidden; box-shadow: 0 30px 80px rgba(20, 28, 38, .35); }
.paneel::backdrop { background: rgba(20, 28, 38, .62); }
.paneel[open] { display: block; }
.paneel__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 100%; height: min(860px, calc(100dvh - 2rem)); }
.paneel__sluit { position: absolute; top: .75rem; right: .75rem; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(251, 251, 250, .95); color: var(--navy-diep); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(20, 28, 38, .2); }
.paneel__sluit .ic { width: 22px; height: 22px; }
.galerij { position: relative; background: #1b232d; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.galerij__beeld { position: relative; }
.duimen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.duimen button { padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; cursor: pointer; background: none; opacity: .7; transition: opacity .2s, border-color .2s; }
.duimen button:hover { opacity: 1; }
.duimen button[aria-current="true"] { border-color: #fff; opacity: 1; }
.duimen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerij__baan { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; scrollbar-width: none; overscroll-behavior-x: contain; }
.galerij__baan::-webkit-scrollbar { display: none; }
.galerij__baan figure { margin: 0; flex: 0 0 100%; scroll-snap-align: start; }
.galerij__baan img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.galerij__pijl { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(251, 251, 250, .92); color: var(--navy-diep); display: grid; place-items: center; cursor: pointer; }
.galerij__pijl--l { left: .75rem; }
.galerij__pijl--r { right: .75rem; }
.galerij__pijl[disabled] { opacity: .35; cursor: default; }
.galerij__teller { position: absolute; left: .9rem; bottom: .9rem; background: rgba(20, 28, 38, .7); color: #fff; padding: .2rem .6rem; border-radius: 3px; font-size: .875rem; font-variant-numeric: tabular-nums; }
.galerij--leeg { display: grid; place-content: center; justify-items: center; gap: 1rem; color: #e8edf2; padding: 3rem 1rem; text-align: center; background: var(--navy); }
.paneel__body { padding: clamp(1.25rem, 3vw, 2.25rem); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1.1rem; align-content: start; }
.paneel__body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--navy-diep); padding-right: 3rem; }
.paneel__uitv { color: var(--muted); margin-top: -.5rem; }
.paneel__prijsrij { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.paneel__prijs { font-family: var(--kop); font-weight: 700; font-size: 2rem; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.paneel .specs2 { font-size: 1rem; gap: .7rem 1.75rem; }
.paneel__groep h3 { font-family: var(--tekst); font-size: .9375rem; font-weight: 700; color: var(--navy); margin-bottom: .45rem; letter-spacing: 0; }
.paneel__feiten { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.25rem; font-size: .9375rem; }
.paneel__feiten div { display: flex; flex-direction: column; }
.paneel__feiten dt { color: var(--muted); }
.paneel__feiten dd { margin: 0; font-weight: 600; }
.paneel .vinkjes { gap: .4rem; font-size: .9375rem; }
.opties { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.opties li { padding: .2rem .6rem; background: var(--grijs); border-radius: 999px; font-size: .875rem; }
.paneel__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .25rem; }
.paneel__noot { font-size: .875rem; color: var(--muted); }

/* Belbalk mobiel */
.belbalk { display: none; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 1.25rem; translate: -50% 0; z-index: 60; background: var(--navy-diep); color: #fff; padding: .8rem 1.1rem; border-radius: var(--r); box-shadow: 0 10px 30px rgba(20, 28, 38, .3); max-width: calc(100vw - 2rem); font-weight: 500; }

/* Reveal (alleen met JS en zonder reduced motion) */
.js-anim [data-reveal] { opacity: 0; transform: translateY(24px); }

/* Responsief */
@media (max-width: 1100px) {
  .kop__nav { gap: 1.25rem; }
  .voorraad__raster { grid-template-columns: 210px minmax(0, 1fr); gap: 1.75rem; }
}
@media (max-width: 960px) {
  .kop__nav, .kop__bel { display: none; }
  .kop__menu { display: inline-flex; }
  .hero__grid { grid-template-columns: 1fr; padding-left: 0; gap: 1.5rem; }
  .hero__tekst { padding-inline: var(--gutter); }
  .stoep { max-height: none; }
  .voorraad__raster { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters__mobiel { background: var(--vlak); border-radius: var(--r); }
  .filters__mobiel > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: .75rem 1rem; font-family: var(--kop); font-weight: 700; color: var(--navy-diep); cursor: pointer; list-style: none; }
  .filters__mobiel > summary::-webkit-details-marker { display: none; }
  .filters__mobiel > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--accent); }
  .filters__mobiel[open] > summary::after { content: "\2212"; }
  .filters__form { padding: 0 1rem 1.25rem; }
  .uitgelicht__in { grid-template-columns: 1fr; }
  .uitgelicht__foto { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .uitgelicht__tekst { padding: 2.5rem var(--gutter) 3rem; }
  .vestigingen__raster { grid-template-columns: 1fr; }
  .sinds__in { grid-template-columns: 1fr; grid-template-areas: "jaar" "tekst" "foto"; }
  .inruil__in { grid-template-columns: 1fr; }
  .inruil__foto { aspect-ratio: 770 / 370; min-height: 0; border-radius: var(--r) var(--r) 0 0; }
  .inruil__vlak { border-radius: 0 0 var(--r) var(--r); }
  .contact__in { grid-template-columns: 1fr; }
  .voet__in { grid-template-columns: 1fr 1fr; }
  .paneel { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .paneel__in { display: block; max-height: 100dvh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  html { scroll-padding-bottom: 72px; }
  .paneel__body { overflow: visible; padding-bottom: 2.5rem; }
  .paneel__sluit { position: fixed; }
  .duimen { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 6px; }
  .belbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: var(--lijn); box-shadow: 0 -6px 20px rgba(20, 28, 38, .14); transform: translateY(110%); transition: transform .35s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
  .belbalk.is-zichtbaar { transform: none; }
  .belbalk a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; font-weight: 700; text-decoration: none; background: var(--vlak); color: var(--navy-diep); }
  .belbalk a:first-child { background: var(--accent); color: #fff; }
  body { padding-bottom: 0; }
}
@media (max-width: 600px) {
  :root { --kop-h: 60px; }
  .hero__titel { font-size: clamp(2.3rem, 11vw, 3rem); }
  .hero__sub { font-size: 1.0625rem; }
  .hero__knoppen .knop { flex: 1 1 auto; justify-content: center; }
  .stoep__beeld { bottom: auto; height: 0; padding-bottom: 75%; position: relative; }
  .stoep { aspect-ratio: auto; background: transparent; }
  .stoep__kader { inset: 8px 8px auto 8px; height: calc((100vw * .75) - 16px); }
  .stoep__nu { position: relative; left: auto; bottom: auto; margin: -2.25rem 12px 0; max-width: none; flex-wrap: wrap; gap: .5rem .75rem; padding: .7rem .7rem .7rem .8rem; z-index: 2; }
  .stoep__info { flex: 1 1 0; }
  .stoep__bekijk { flex: 1 1 100%; justify-content: center; }
  .stoep__pauze { top: 14px; right: 14px; bottom: auto; min-height: 36px; padding: .3rem .7rem; font-size: .875rem; }
  .stoep__lijn { height: 44px; }
  .veld-rij { grid-template-columns: 1fr; }
  .broers { grid-template-columns: 1fr; gap: .75rem; }
  .specs2 { gap: .8rem 1.5rem; }
  .voet__in { grid-template-columns: 1fr; }
  .paneel__feiten { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .stoep__beeld img { transition: opacity .2s linear !important; }
  .kaart:hover { transform: none; }
  .kaart:hover .kaart__foto img { transform: none; }
}
.galerij--leeg .galerij__baan { flex-direction: column; align-items: center; gap: 1rem; overflow: visible; }