/* AV-Automotive · redesign oktober 2026 · Noble Matter
   Richting A "Showroom", gekozen door Thierry op 14-10-2026.
   Zwart, elke wagen vrijgesteld op een donkere studiovloer met spot en spiegeling,
   dunne brede kapitalen (Archivo 125%), prijsbalk, showroomrij, genummerde blokken.
   AV-blauw #1D5EAA voor vlakken, #7DB6F2 voor tekst op zwart (9,9:1).
   Ronde 3 (14-10 avond, Thierry: "allemaal heel donker"): secties wisselen af tussen zwart
   (showroom), wit en lichtgrijs (uitleg, stappen, formulier, FAQ) en AV-blauw (één band per
   pagina). Elke sectie zet haar eigen kleurvariabelen (t-zwart, t-wit, t-licht, t-blauw);
   alle onderdelen lezen enkel die variabelen. Raster: 12 kolommen, vaste ruimteschaal. */
@font-face{font-family:"Archivo";src:url(/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Manrope";src:url(/fonts/manrope-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
  --zw:#060708;--vl:#0D0F12;--vl2:#14171B;--t:#ECEEF0;--z:#9BA4AE;--z2:#858E98;
  --bl:#1D5EAA;--bll:#7DB6F2;--wit:#F2F3F4;
  --lijn:rgba(255,255,255,.1);--lijn2:rgba(255,255,255,.24);
  --kop:"Archivo",system-ui,sans-serif;--body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1280px;--pad:clamp(20px,4vw,56px);--gut:clamp(16px,2.2vw,32px);--sectie:clamp(72px,9vw,128px);
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;
  --acc:var(--bll);--knop-bg:var(--wit);--knop-t:#08090B;--knop-hover:var(--bll);--veld:var(--vl);--veld2:var(--vl2);--grond:var(--zw);
  --uit:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px;background:var(--zw)}
body{margin:0;background:var(--zw);color:var(--t);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
h1,h2,h3{margin:0;font-family:var(--kop);font-stretch:125%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:normal;hyphens:manual}
h1 b,h2 b,h3 b{font-weight:620}
h1{font-weight:200;font-size:clamp(1.55rem,6.6vw,4rem);line-height:1.02}
h1 b{display:block}
h2{font-weight:200;font-size:clamp(1.45rem,4.5vw,3.5rem);line-height:1.04}
h3{font-weight:540;font-size:clamp(1.02rem,2.2vw,1.3rem);line-height:1.2;font-stretch:118%}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--wit);color:var(--zw);padding:10px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding-inline:var(--pad)}
.zacht{color:var(--z)}
.label{display:block;margin:0 0 14px;font:600 .75rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--z)}
.lead{font-size:clamp(1.06rem,1.5vw,1.18rem);line-height:1.6;color:var(--z);max-width:48ch}
h2+p,h2+.lead,.label+h2+.lead{margin-top:var(--s3)}
h2+dl,h2+ul,h2+.contactlijst,.lead+.contactlijst,.lead+.formulier{margin-top:var(--s4)}

/* knoppen: vlak wit, of een lijn */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;background:var(--knop-bg);color:var(--knop-t);
  font:700 .78rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid var(--knop-bg);border-radius:0;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.knop:hover{background:var(--knop-hover);border-color:var(--knop-hover);color:var(--knop-hover-t,var(--knop-t))}
.knop svg{width:18px;height:18px;flex:none}
.knop-lijn{background:none;color:var(--t);border-color:var(--lijn2)}
.knop-lijn:hover{background:var(--zweef);border-color:var(--t);color:var(--t)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
@media (max-width:480px){.knoppen .knop{flex:1 1 100%}}

/* kop */
.kop{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:28px;padding:20px var(--pad)}
.merk{display:block;flex:none}
.merk img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav ul{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.nav ul a{display:block;padding:8px 0;text-decoration:none;color:var(--z);font:600 .76rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;transition:color .2s}
.nav ul a:hover,.nav ul a[aria-current=page]{color:var(--t)}
.nav ul a[aria-current=page]{box-shadow:0 2px 0 var(--bll)}
.nav .bel{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--lijn2);text-decoration:none;font:600 .86rem/1 var(--body);letter-spacing:.04em;white-space:nowrap;transition:border-color .2s,background .2s}
.nav .bel:hover{border-color:var(--t);background:rgba(255,255,255,.05)}
.nav .bel svg{width:16px;height:16px}
.menu-knop{display:none}
@media (max-width:1040px){
  .merk img{height:38px}
  .menu-knop{display:inline-flex;align-items:center;gap:12px;margin-left:auto;min-height:48px;padding:0 4px 0 14px;background:none;border:0;color:var(--t);font:600 .76rem var(--body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;position:relative;z-index:31}
  .menu-knop i{position:relative;width:24px;height:1.5px;background:currentColor;transition:background .2s}
  .menu-knop i::before,.menu-knop i::after{content:"";position:absolute;left:0;width:24px;height:1.5px;background:currentColor;transition:transform .3s var(--uit)}
  .menu-knop i::before{top:-7px}.menu-knop i::after{top:7px}
  .menu-knop[aria-expanded=true] i{background:transparent}
  .menu-knop[aria-expanded=true] i::before{transform:translateY(7px) rotate(45deg)}
  .menu-knop[aria-expanded=true] i::after{transform:translateY(-7px) rotate(-45deg)}
  .nav{display:none;position:fixed;inset:0;z-index:30;flex-direction:column;align-items:stretch;justify-content:center;gap:28px;padding:96px var(--pad) 40px;margin:0;
    background:radial-gradient(70% 40% at 50% 0,rgba(190,205,225,.12),transparent 70%),var(--zw);overflow-y:auto}
  .nav.open{display:flex;animation:fade .35s var(--uit)}
  .nav ul{flex-direction:column;gap:0;border-top:1px solid var(--lijn)}
  .nav ul a{padding:18px 0;border-bottom:1px solid var(--lijn);font:300 clamp(1.3rem,6vw,1.9rem)/1.1 var(--kop);font-stretch:125%;letter-spacing:0;color:var(--t)}
  .nav ul a[aria-current=page]{box-shadow:none;color:var(--bll)}
  .nav .bel{justify-content:center;min-height:56px;font-size:1rem}
  .kop:has(.nav.open) .merk{position:relative;z-index:31}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── podium: de studio bovenaan elke pagina ── */
.podium{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  background:radial-gradient(62% 26% at 50% 86%,rgba(29,94,170,.2),transparent 70%),linear-gradient(#0B0D10 0,#08090B 64%,#0E1013 64.2%,#060708 100%)}
.podium::before{content:"";position:absolute;z-index:-1;left:50%;top:-12%;width:min(1200px,140vw);height:96%;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 0,rgba(205,218,235,.22),rgba(205,218,235,.06) 55%,transparent 75%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(18px)}
.podium::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:64%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
/* binnenin: zelfde wrap als de rest van de pagina, dus kruimelpad, kop en tekst staan op de
   linkermarge van het raster. home en wagenpagina: gecentreerd podium; links: tekst links,
   wagen rechts; zonder: enkel tekst, links. */
.podium-in{position:relative;z-index:3;width:100%}
.podium .tekst{padding-top:clamp(124px,16vh,168px);max-width:760px}
.podium .sub{margin:var(--s3) 0 0;max-width:52ch;color:var(--z);font-size:clamp(1.02rem,1.4vw,1.14rem)}
.podium .wagen{position:relative;z-index:2;pointer-events:none}
.podium .wagen img{width:100%}
.podium.home,.podium.midden{text-align:center}
.podium.home .tekst,.podium.midden .tekst{margin:0 auto;max-width:900px}
.podium.home .sub,.podium.midden .sub{margin-inline:auto}
.podium.home .knoppen,.podium.midden .knoppen{justify-content:center}
.podium.home .kruimel,.podium.midden .kruimel{justify-content:center}
.podium.home .wagen,.podium.midden .wagen{width:min(900px,66vw);margin:clamp(8px,2vw,24px) auto 0}
.podium.home{min-height:100svh}
.podium.home .podium-in{flex:1;display:flex;flex-direction:column}
.podium.home .wagen{margin-top:auto;padding-top:var(--s3);width:min(820px,58vw,calc((100svh - 400px) * 1.42))}
.podium.links .podium-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.podium.links .tekst{grid-column:1/span 6;padding-bottom:clamp(64px,8vw,112px)}
.podium.links .wagen{grid-column:7/-1;margin:0 0 clamp(16px,3vw,40px)}
.podium.zonder{padding-bottom:clamp(64px,8vw,112px)}
.podium.zonder::after{display:none}
.podium.zonder{background:radial-gradient(60% 40% at 30% 100%,rgba(29,94,170,.14),transparent 70%),linear-gradient(#0B0D10,#060708)}
.podium.zonder::before{left:30%}
@media (max-width:860px){
  .podium.links .podium-in{grid-template-columns:minmax(0,1fr)}
  .podium.links .tekst,.podium.links .wagen{grid-column:1/-1}
  .podium.links .tekst{padding-bottom:var(--s3)}
}
@media (max-width:760px){
  .podium .tekst{padding-top:112px}
  .podium.home .wagen,.podium.midden .wagen{width:100%}
  .podium.home{min-height:auto}
}
.kruimel{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin:0 0 var(--s3);padding:0;list-style:none;font:600 .72rem/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--z2)}
.kruimel li{display:block}
.kruimel li+li::before{content:"/";margin-right:10px;color:var(--z2)}
.kruimel a{color:var(--z);text-decoration:none;padding:5px 0}
.kruimel a:hover{color:var(--t)}
.kruimel [aria-current]{color:var(--t);padding:5px 0}

/* prijsbalk / plaat onder de wagen */
.plaat{position:relative;z-index:3;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr)) auto;border-top:1px solid var(--lijn);background:rgba(6,7,8,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.plaat>div{margin:0;padding:22px clamp(16px,2.6vw,36px);border-right:1px solid var(--lijn);min-width:0}
.plaat small{display:block;margin-bottom:6px;font:600 .7rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--z)}
.plaat strong{display:block;font:500 clamp(1rem,1.6vw,1.2rem)/1.3 var(--kop);font-stretch:112%}
.plaat .acties{display:flex;padding:0;border-right:0}
.plaat .acties a{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 clamp(20px,2.6vw,40px);min-height:76px;background:var(--wit);color:#08090B;text-decoration:none;
  font:700 .8rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .25s}
.plaat .acties a:hover{background:var(--bll)}
.plaat .acties a.tweede{background:none;color:var(--t);border-left:1px solid var(--lijn)}
.plaat .acties a.tweede:hover{background:rgba(255,255,255,.06)}
.plaat .acties svg{width:18px;height:18px}
@media (max-width:900px){
  .plaat{grid-template-columns:1fr 1fr}
  .plaat>div{border-bottom:1px solid var(--lijn);padding:18px 20px}
  .plaat>div:nth-child(2n){border-right:0}
  .plaat>div.oneven-laatste{grid-column:1/-1;border-right:0}
  .plaat .acties{grid-column:1/-1;border-bottom:0}
  .plaat .acties a{flex:1;min-height:60px;padding:0 16px}
}
@media (max-width:480px){.plaat .acties{flex-direction:column}.plaat .acties a.tweede{border-left:0;border-top:1px solid var(--lijn)}}

/* binnenkomst: licht aan, wagen rijdt uit het donker */
@media (prefers-reduced-motion:no-preference){
  .podium::before{animation:spot 1.6s .1s var(--uit) both}
  .podium .wagen{animation:wagen 1.5s .15s var(--uit) both}
  .podium .tekst>*{animation:op .9s var(--uit) both}
  .podium .tekst>*:nth-child(2){animation-delay:.08s}.podium .tekst>*:nth-child(3){animation-delay:.16s}.podium .tekst>*:nth-child(4){animation-delay:.24s}
  .podium .plaat{animation:op .9s .5s var(--uit) both}
  @supports (animation-timeline:view()){
    .podium .wagen img{animation:weg linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@keyframes spot{0%{opacity:0}35%{opacity:.35}45%{opacity:.15}100%{opacity:1}}
@keyframes wagen{from{transform:translateY(24px) scale(.97);filter:brightness(.35)}to{transform:none;filter:none}}
@keyframes op{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes weg{to{transform:translateY(-6%) scale(1.04);opacity:.5}}

/* ── secties ── */
.sectie{padding-block:var(--sectie);background:var(--grond);color:var(--t)}
.sectie.lijn{border-top:1px solid var(--lijn)}
.skop{margin-bottom:clamp(32px,4vw,56px);max-width:900px}
.skop p:not(.label){margin-top:var(--s3);color:var(--z);max-width:56ch}
.skop.rij-kop{display:flex;justify-content:space-between;align-items:end;gap:20px;max-width:none;flex-wrap:wrap}

/* showroomrij: horizontaal, wagen per vak */
.rij{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--pad);scroll-padding-inline:var(--pad);max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;overscroll-behavior-x:contain}
.rij::-webkit-scrollbar{display:none}
.rij-knoppen{display:flex;gap:6px}
.rij-knoppen button{width:52px;height:52px;display:grid;place-items:center;background:none;border:1px solid var(--lijn2);color:var(--t);cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.rij-knoppen button:hover{border-color:var(--t);background:rgba(255,255,255,.06)}
.rij-knoppen button:disabled{opacity:.3;cursor:default}
.rij-knoppen svg{width:20px;height:20px}
.rij-knoppen .terug svg{transform:scaleX(-1)}
.vak{position:relative;flex:0 0 min(84vw,520px);scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;overflow:hidden;background:var(--vl);border:1px solid var(--lijn)}
.vak .beeld{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--vl2)}
.vak .beeld img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--uit)}
.vak:hover .beeld img{transform:scale(1.03)}
.vak .nr{position:absolute;left:18px;top:16px;z-index:2;font:600 .72rem/1 var(--body);letter-spacing:.2em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.vak .info{flex:1;padding:22px 84px 24px 24px}
.vak h3{margin:0 0 6px;font-size:clamp(1.1rem,2.2vw,1.4rem)}
.vak p{margin:0;color:var(--z);font-size:.95rem}
.vak .pr{display:block;padding:0 24px 24px;font:560 clamp(1.05rem,2vw,1.3rem)/1 var(--kop);font-stretch:112%}
.vak .pijl{position:absolute;right:22px;bottom:22px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--lijn2);transition:background .25s,color .25s,border-color .25s}
.vak:hover .pijl{background:var(--wit);color:#08090B;border-color:var(--wit)}
.vak .pijl svg{width:18px;height:18px}
@media (max-width:560px){.vak .info{padding:18px 72px 18px 18px}.vak .pr{padding:0 18px 20px}.vak .pijl{right:16px;bottom:16px}}
.rij-voet{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.verkocht-regel{margin:var(--s3) 0 0;color:var(--z);font-size:.92rem;line-height:1.6;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:28px;row-gap:6px}
.verkocht-regel b{font:600 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--z2);margin-right:12px}
.verkocht-regel span{white-space:nowrap}
.verkocht-regel b{margin-right:0}

/* genummerd blok */
.nummers{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn);counter-reset:n}
.nummers li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 18px;padding:26px 0;border-bottom:1px solid var(--lijn);counter-increment:n}
.nummers li::before{content:counter(n,decimal-leading-zero);font:600 .8rem/1 var(--body);letter-spacing:.2em;color:var(--acc);padding-top:7px}
.nummers h3{grid-column:2}
.nummers p{grid-column:2;margin:0;color:var(--z);max-width:60ch}
.nummers a{color:var(--t)}
.nummers.groot li{grid-template-columns:96px minmax(0,1fr) minmax(0,1.2fr);align-items:baseline;padding:34px 0}
.nummers.groot li::before{font:200 clamp(2rem,4vw,3rem)/1 var(--kop);font-stretch:125%;letter-spacing:0;padding:0}
.nummers.groot h3{grid-column:2}
.nummers.groot p{grid-column:3}
@media (max-width:820px){.nummers.groot li{grid-template-columns:64px minmax(0,1fr)}.nummers.groot li::before{font-size:1.6rem}.nummers.groot p{grid-column:2}}
@media (max-width:420px){.nummers li{grid-template-columns:44px minmax(0,1fr);gap:6px 12px}.nummers.groot li{grid-template-columns:52px minmax(0,1fr)}}

/* 12 kolommen: links 5, één kolom lucht, rechts 6 */
.duo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s5);align-items:start}
.duo>:first-child{grid-column:1/span 5}
.duo>:last-child{grid-column:7/-1}
@media (min-width:861px){.duo>:first-child{position:sticky;top:48px}}
@media (max-width:860px){.duo>:first-child,.duo>:last-child{grid-column:1/-1}}

/* lijst met lijnen (voordelen, waarden): 2 x 2, geen kaarten */
.raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--lijn);margin:0;padding:0;list-style:none}
.raster li{padding:30px clamp(0px,3vw,40px) 30px 0;border-bottom:1px solid var(--lijn)}
.raster li:nth-child(2n){padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--lijn)}
.raster h3{margin-bottom:10px}
.raster p{margin:0;color:var(--z)}
.raster.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster.drie li:nth-child(2n){border-left:0;padding-left:0}
.raster.drie li+li{border-left:1px solid var(--lijn);padding-left:clamp(20px,3vw,40px)}
@media (max-width:760px){.raster,.raster.drie{grid-template-columns:1fr}.raster li,.raster li:nth-child(2n),.raster.drie li+li{padding:26px 0;border-left:0}}

/* home: aanspreekpunt */
.axl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s5);align-items:center}
.axl>div{grid-column:1/span 5}
.axl figure{grid-column:7/-1;margin:0;position:relative}
.axl figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%}
.axl .waarden{list-style:none;margin:var(--s4) 0 0;padding:0;border-top:1px solid var(--lijn)}
.axl .waarden li{padding:16px 0;border-bottom:1px solid var(--lijn);color:var(--z)}
.axl .waarden b{color:var(--t);font-weight:700}
@media (max-width:860px){.axl>div,.axl figure{grid-column:1/-1}.axl figure{order:-1}}

/* beeldband (over ons): foto over de volle breedte */
.band{position:relative;margin:0;background:var(--zw)}
.band img{width:100%;height:clamp(220px,34vw,480px);object-fit:cover;object-position:var(--pos,50% 50%)}

/* uitspraak: missie en visie */
.uitspraak{font:300 clamp(1.3rem,2.8vw,2.1rem)/1.15 var(--kop);font-stretch:118%;text-transform:uppercase;margin:0 0 var(--s3);text-wrap:balance}

/* onze wagens: elke wagen een eigen opstelling */
.opstelling{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.opstelling>li{border-bottom:1px solid var(--lijn)}
.opstelling a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4vw,56px) 0;text-decoration:none}
.opstelling li:nth-child(2n) a{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}
.opstelling li:nth-child(2n) .info{order:2}
.opstelling .vloer{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--vl2)}
.opstelling .vloer img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--uit)}
.opstelling a:hover .vloer img{transform:scale(1.03)}
.opstelling .nr{display:block;margin-bottom:16px;font:600 .72rem var(--body);letter-spacing:.2em;color:var(--z)}
.opstelling h2{font-size:clamp(1.4rem,3.6vw,2.6rem)}
.opstelling .uitv{margin:8px 0 22px;color:var(--z)}
.feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--lijn)}
.feiten div{padding:12px 0;border-bottom:1px solid var(--lijn)}
.feiten div:nth-child(2n){padding-left:16px;border-left:1px solid var(--lijn)}
.feiten dt{font:600 .68rem/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--z)}
.feiten dd{margin:4px 0 0;font:500 1rem/1.3 var(--kop);font-stretch:110%}
.opstelling .onder{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap}
.opstelling .prijs{font:560 clamp(1.3rem,2.4vw,1.7rem)/1 var(--kop);font-stretch:112%}
.opstelling .meer{display:inline-flex;align-items:center;gap:10px;font:700 .76rem var(--body);letter-spacing:.16em;text-transform:uppercase;padding:14px 18px;border:1px solid var(--lijn2);transition:background .25s,color .25s}
.opstelling a:hover .meer{background:var(--wit);color:#08090B;border-color:var(--wit)}
.opstelling .meer svg{width:16px;height:16px}
@media (max-width:820px){
  .opstelling a,.opstelling li:nth-child(2n) a{grid-template-columns:1fr}
  .opstelling .info,.opstelling li:nth-child(2n) .info{order:2}
}
.voorbehoud{margin-top:22px;color:var(--z);font-size:.9rem}

/* verkocht: lijst met lijnen, altijd binnen de marge */
.verkocht{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.verkocht li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--lijn)}
.verkocht b{font:500 clamp(1rem,2vw,1.2rem)/1.3 var(--kop);font-stretch:112%;text-transform:uppercase}
.verkocht span{color:var(--z);font-variant-numeric:tabular-nums}
.verkocht i{font:600 .66rem/1 var(--body);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--z2);border:1px solid var(--lijn2);padding:6px 8px}
@media (max-width:480px){.verkocht li{grid-template-columns:minmax(0,1fr) auto}.verkocht i{display:none}}

/* wagenpagina */
.wagen-h1 .uitv{display:block;margin-top:14px;font:500 clamp(.82rem,1.4vw,1rem)/1.3 var(--body);letter-spacing:.2em;color:var(--z)}
.galerij{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--pad);scroll-padding-inline:var(--pad);max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;overscroll-behavior-x:contain}
.galerij::-webkit-scrollbar{display:none}
.galerij a{position:relative;flex:0 0 min(84vw,620px);aspect-ratio:3/2;scroll-snap-align:start;overflow:hidden;display:grid;place-items:end center;
  background:radial-gradient(60% 45% at 50% 10%,rgba(205,218,235,.12),transparent 70%),linear-gradient(#111418,#0A0B0D 66%,#15181C 66.2%,#08090A)}
.galerij a .foto,.galerij a .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.galerij a .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,7,8,.45),transparent 28%)}
.galerij a .foto img{transition:transform .9s var(--uit)}
.galerij a:hover .foto img{transform:scale(1.04)}
.galerij .nr{position:absolute;left:18px;top:16px;z-index:2;font:600 .72rem var(--body);letter-spacing:.2em;color:var(--t);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin:0 0 clamp(48px,6vw,80px)}
.cijfers div{padding:clamp(20px,3vw,36px) clamp(12px,2vw,28px);border-left:1px solid var(--lijn)}
.cijfers div:first-child{border-left:0;padding-left:0}
.cijfers dt{font:600 .7rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--z);margin-bottom:10px}
.cijfers dd{margin:0;font:200 clamp(1.5rem,3.6vw,2.8rem)/1 var(--kop);font-stretch:125%;white-space:nowrap}
.cijfers dd small{font-size:.45em;font-weight:500;letter-spacing:.08em;margin-left:4px;color:var(--z)}
@media (max-width:760px){.cijfers{grid-template-columns:1fr 1fr}.cijfers div{border-bottom:1px solid var(--lijn)}.cijfers div:nth-child(3){border-left:0;padding-left:0}.cijfers div:nth-child(n+3){border-bottom:0}}
.specs{margin:0;border-top:1px solid var(--lijn)}
.specs div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--lijn)}
.specs dt{color:var(--z);font-size:.95rem}
.specs dd{margin:0;font-weight:600}
.tekstblok p{color:var(--z);font-size:1.08rem;max-width:62ch}
.tekstblok p:first-of-type{color:var(--t);font-size:clamp(1.12rem,1.7vw,1.3rem)}

/* keuze consignatie / overname */
.keuzes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.keuze{padding:clamp(28px,4vw,56px) clamp(0px,4vw,56px) clamp(28px,4vw,56px) 0}
.keuze+.keuze{border-left:1px solid var(--lijn);padding-left:clamp(20px,4vw,56px);padding-right:0}
.keuze .nr{display:block;font:200 clamp(2.4rem,5vw,4rem)/1 var(--kop);font-stretch:125%;color:var(--acc);margin-bottom:var(--s3)}
.keuze h3{font-size:clamp(1.15rem,2.4vw,1.6rem);margin-bottom:14px}
.keuze p{color:var(--z);margin:0}
@media (max-width:760px){.keuzes{grid-template-columns:1fr}.keuze,.keuze+.keuze{padding:30px 0;border-left:0}.keuze+.keuze{border-top:1px solid var(--lijn)}}

/* contactlijst en het grote nummer */
.groot-nr{display:inline-block;margin:6px 0 0;font:300 clamp(1.45rem,4.6vw,3.2rem)/1 var(--kop);font-stretch:125%;text-decoration:none;letter-spacing:-.01em;white-space:nowrap;background:linear-gradient(90deg,var(--t),var(--t)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--uit);padding-bottom:6px}
.groot-nr:hover{background-size:100% 1px}
.contactlijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.contactlijst li{border-bottom:1px solid var(--lijn)}
.contactlijst a,.contactlijst li>span{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;text-decoration:none}
.contactlijst svg{width:22px;height:22px;color:var(--acc)}
.contactlijst b{display:block;font-weight:700;overflow-wrap:anywhere}
.contactlijst small{display:block;color:var(--z);font-size:.92rem}
.contactlijst a::after{content:"";width:9px;height:9px;border-top:1.5px solid var(--z);border-right:1.5px solid var(--z);transform:rotate(45deg);margin-right:6px;transition:transform .25s var(--uit)}
.contactlijst a:hover::after{transform:translateX(4px) rotate(45deg)}

/* slot (cta) onderaan elke pagina */
.slot{position:relative;padding-block:var(--sectie);overflow:hidden;isolation:isolate;color:var(--t);
  background:radial-gradient(50% 70% at 50% 0,rgba(205,218,235,.1),transparent 70%),radial-gradient(40% 40% at 50% 100%,rgba(29,94,170,.18),transparent 70%),var(--grond)}
.slot.t-blauw{background:radial-gradient(50% 80% at 50% 0,rgba(255,255,255,.14),transparent 70%),var(--grond)}
.slot .wrap{text-align:center}
.slot h2{font-size:clamp(1.3rem,4vw,2.6rem);max-width:24ch;margin:0 auto}
.slot .uitleg{margin:var(--s3) auto 0;max-width:54ch;color:var(--z)}
.slot .groot-nr{margin-top:clamp(28px,4vw,48px)}
.slot .wie{margin:14px 0 0;color:var(--z);font-size:.95rem}
.slot .knoppen{justify-content:center}

/* faq */
.faq{border-top:1px solid var(--lijn)}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;display:block;position:relative;padding:24px 44px 24px 0;font:500 clamp(1rem,1.9vw,1.2rem)/1.35 var(--kop);font-stretch:110%}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;margin-top:-7px;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform .3s var(--uit)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--acc)}
.faq .antwoord{padding:0 44px 26px 0;color:var(--z);max-width:70ch}
.faq .antwoord a{color:var(--t)}

/* formulieren */
.formblok{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s5);align-items:start}
.formblok>:first-child{grid-column:1/span 4}
.formblok>:last-child{grid-column:6/-1}
@media (min-width:901px){.formblok>div:first-child{position:sticky;top:32px}}
@media (max-width:900px){.formblok>:first-child,.formblok>:last-child{grid-column:1/-1}}
.formulier{display:grid;gap:28px}
.formulier fieldset{margin:0;padding:0;border:0;min-width:0}
.formulier legend{padding:0;margin-bottom:18px;font:540 1.05rem/1.2 var(--kop);font-stretch:118%;text-transform:uppercase;width:100%;padding-bottom:12px;border-bottom:1px solid var(--lijn)}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.veld{display:grid;gap:8px;min-width:0}
.veld.breed{grid-column:1/-1}
@media (max-width:560px){.velden{grid-template-columns:1fr}}
label{font-size:.95rem;font-weight:600}
label .opt{font-weight:400;color:var(--z)}
input,select,textarea{width:100%;min-height:52px;padding:13px 14px;background:var(--veld);color:var(--t);border:1px solid var(--lijn2);border-radius:0;font:400 1rem/1.4 var(--body);transition:border-color .2s,background .2s}
input:hover,select:hover,textarea:hover{border-color:var(--z2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);background:var(--veld2);box-shadow:0 0 0 3px var(--ring)}
textarea{min-height:130px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--z) 50%),linear-gradient(135deg,var(--z) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
input[type=date]{color-scheme:var(--schema,dark)}
input[type=file]{padding:12px;cursor:pointer;font-size:.95rem}
input[type=file]::file-selector-button{margin-right:14px;padding:9px 14px;background:var(--knop-bg);color:var(--knop-t);border:0;font:700 .72rem var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.hulp{margin:0;color:var(--z);font-size:.9rem}
.toestemming{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-weight:400;color:var(--z);font-size:.95rem}
.toestemming input{width:24px;height:24px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--acc)}
.toestemming a{color:var(--t);display:inline-block;padding:2px 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier .knop{justify-self:start}
@media (max-width:480px){.formulier .knop{justify-self:stretch}}
.melding{margin:0;font-weight:600}
.melding:empty{display:none}
.melding.fout{color:var(--fout,#FFB3B3)}
.melding.goed{color:var(--goed,#A9E8C0)}
.melding a{color:var(--t)}

/* juridisch */
.juridisch{max-width:760px}
.juridisch h2{font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:500;margin:44px 0 14px}
.juridisch h2:first-child{margin-top:0}
.juridisch p,.juridisch li{color:var(--z)}
.juridisch a{color:var(--t)}
.juridisch dl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);margin:0;border-top:1px solid var(--lijn)}
.juridisch dt,.juridisch dd{padding:12px 0;border-bottom:1px solid var(--lijn);margin:0}
.juridisch dt{color:var(--z);padding-right:16px}
.juridisch dd{overflow-wrap:anywhere}
@media (max-width:520px){.juridisch dl{grid-template-columns:1fr}.juridisch dt{border-bottom:0;padding-bottom:0}.juridisch dd{padding-top:4px}}

/* voet */
.voet{border-top:1px solid var(--lijn);padding:64px 0 32px;color:var(--z);font-size:.95rem}
.voet-boven{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.voet .merk img{height:56px}
.voet h2{font:600 .72rem/1.3 var(--body);letter-spacing:.2em;color:var(--t);margin:0 0 16px}
.voet ul{list-style:none;margin:0;padding:0}
.voet li a{display:inline-block;padding:5px 0}
.voet a{text-decoration:none;color:var(--z);transition:color .2s}
.voet a:hover{color:var(--t)}
.voet address{font-style:normal;line-height:1.9}
.voet-boven p{margin-top:var(--s3);max-width:34ch}
.voet-onder p{margin:0}
.voet-onder{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:48px;padding-top:22px;border-top:1px solid var(--lijn);font-size:.85rem}
.voet-onder ul{display:flex;flex-wrap:wrap;gap:4px 20px}
@media (max-width:900px){.voet-boven{grid-template-columns:1fr 1fr}.voet-boven>div:first-child{grid-column:1/-1}}
@media (max-width:480px){.voet-boven{grid-template-columns:1fr}}

/* belbalk op telefoon */
.belbalk{display:none}
@media (max-width:760px){
  .belbalk{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(6,7,8,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--lijn);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;transform:translateY(110%);transition:transform .35s var(--uit)}
  .belbalk.zichtbaar{transform:none}
  .belbalk .knop{min-height:50px;padding:10px 12px}
  .voet{padding-bottom:110px}
}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--uit),transform .9s var(--uit)}
  .js .rv.in{opacity:1;transform:none}
  .js .rij .vak.rv:nth-child(2){transition-delay:.08s}.js .rij .vak.rv:nth-child(3){transition-delay:.16s}.js .rij .vak.rv:nth-child(4){transition-delay:.24s}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.h1-klein{font-size:clamp(1.15rem,5.4vw,3rem)}
.podium.leeg{min-height:min(92svh,860px)}
.podium.leeg::after{top:72%}
@media (max-width:400px){
  .plaat small,.feiten dt,.cijfers dt{letter-spacing:.1em}
  .specs div{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px}
  .specs dd{font-size:.95rem}
}

/* ── kleurthema per sectie ── */
.t-zwart{--grond:var(--zw)}
.t-wit,.t-licht{--grond:#FFFFFF;--t:#0B0D10;--z:#4A525C;--z2:#5B636D;--lijn:rgba(11,13,16,.12);--lijn2:rgba(11,13,16,.3);
  --acc:#1D5EAA;--knop-bg:#0B0D10;--knop-t:#FFFFFF;--knop-hover:#1D5EAA;--knop-hover-t:#FFFFFF;--veld:#FFFFFF;--veld2:#FFFFFF;
  --ring:rgba(29,94,170,.22);--schema:light;--zweef:rgba(11,13,16,.05);--fout:#B42318;--goed:#137A3A}
.t-licht{--grond:#F1F2F4;--z:#474F59}
.t-blauw{--grond:#1D5EAA;--t:#FFFFFF;--z:#E1EBF7;--z2:#D3E1F3;--lijn:rgba(255,255,255,.24);--lijn2:rgba(255,255,255,.5);
  --acc:#FFFFFF;--knop-bg:#FFFFFF;--knop-t:#0B0D10;--knop-hover:#0B0D10;--knop-hover-t:#FFFFFF;--zweef:rgba(255,255,255,.1);--ring:rgba(255,255,255,.35)}
:root{--zweef:rgba(255,255,255,.06);--ring:rgba(125,182,242,.25)}
.t-wit input,.t-wit select,.t-wit textarea,.t-licht input,.t-licht select,.t-licht textarea{border-color:rgba(11,13,16,.28)}
.t-blauw a:not(.knop){color:inherit}
.t-blauw .nummers a,.t-blauw .lead a{text-decoration-thickness:1px;text-underline-offset:3px}

/* contact: telefoonnummer rustig en leesbaar, niet als affiche */
.podium-tel{margin:var(--s5) 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.podium-tel a{display:inline-flex;align-items:center;gap:14px;max-width:100%;padding:0 0 10px;border-bottom:1px solid var(--lijn2);text-decoration:none;
  font:400 clamp(1.25rem,2.4vw,1.7rem)/1.2 var(--kop);font-stretch:112%;letter-spacing:.04em;white-space:nowrap;transition:border-color .25s}
.podium-tel a:hover{border-color:var(--t)}
.podium-tel svg{width:22px;height:22px;flex:none;color:var(--acc)}
.podium-tel small{color:var(--z);font-size:.95rem}

/* ── ronde 4: podium met sfeerfoto (home, aankoop, verkoop) ── */
.podium.beeld{background:var(--zw)}
.podium.beeld::before,.podium.beeld::after{display:none}
.podium.beeld .achter{position:absolute;inset:0;z-index:-1}
.podium.beeld .achter picture,.podium.beeld .achter img{width:100%;height:100%}
.podium.beeld .achter img{object-fit:cover;object-position:var(--pos,50% 50%)}
.podium.beeld .achter::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,7,8,.9) 0,rgba(6,7,8,.72) 34%,rgba(6,7,8,.15) 70%,rgba(6,7,8,0)),linear-gradient(rgba(6,7,8,.55),transparent 30%,transparent 72%,rgba(6,7,8,.5))}
.podium.zonder.beeld{min-height:min(88svh,760px);justify-content:flex-end}
@media (max-width:760px){
  .podium.beeld{min-height:0!important;justify-content:flex-start}
  .podium.beeld .achter{position:relative;inset:auto;z-index:0;order:2;aspect-ratio:4/3}
  .podium.beeld .achter img{object-position:var(--pos-m,var(--pos,50% 50%))}
  .podium.beeld .achter::after{background:linear-gradient(var(--zw),rgba(6,7,8,0) 30%,rgba(6,7,8,0) 80%,rgba(6,7,8,.5))}
  .podium.zonder.beeld{padding-bottom:0}
  .podium.zonder.beeld .tekst{padding-bottom:var(--s4)}
}
/* wagenpagina: echte foto in een vast 3:2-kader op het podium */
.podium.midden .wagen{width:min(1040px,82vw);aspect-ratio:3/2;overflow:hidden;margin-bottom:clamp(24px,3vw,40px);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.podium.midden .wagen picture,.podium.midden .wagen img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.podium.midden .wagen{width:100%}}
.podium.beeld .sub{max-width:44ch}
@media (max-width:480px){.specs div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ronde 5: echte foto's rustiger in het donker (enkel de randen, de wagen zelf blijft onaangeroerd) */
.vak .beeld::after,.opstelling .vloer::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 110% at 50% 52%,transparent 58%,rgba(6,7,8,.38) 100%),linear-gradient(to top,rgba(6,7,8,.32),transparent 26%)}
/* ronde 5: eigen bestandsvak in het Nederlands */
.kies{position:relative}
.kies input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;opacity:0;cursor:pointer;z-index:2}
.kies-vak{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;min-height:76px;padding:12px;border:1px dashed var(--lijn2);background:var(--veld);transition:border-color .2s,background .2s}
.kies:hover .kies-vak,.kies.sleep .kies-vak{border-color:var(--z2);background:var(--veld2)}
.kies input:focus-visible+.kies-vak{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
.kies-knop{padding:13px 18px;background:var(--knop-bg);color:var(--knop-t);font:700 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.kies-naam{color:var(--z);font-size:.95rem;min-width:0}

/* ── hero home (15-10, feedback Thierry): de wagen is de achtergrond van het hele eerste scherm,
   in de schaduw achter titel, intro en knoppen. Verloop: donker achter de tekst, de lichtlijnen
   op lak en ramen blijven zichtbaar onder de knoppen. Heel trage zoom, uit bij minder beweging. ── */
.podium.home.beeld{min-height:100svh;justify-content:flex-start;background:var(--zw)}
.podium.home.beeld .tekst{padding-bottom:clamp(220px,30svh,340px)}
.podium.home.beeld .achter{position:absolute;inset:0;z-index:-1;overflow:hidden;order:0}
.podium.home.beeld .achter picture{position:absolute;left:0;right:0;bottom:0;top:var(--top,24%);width:auto;height:auto;
  -webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
.podium.home.beeld .achter img{object-position:50% 32%;filter:brightness(.82);transform-origin:50% 70%}
.podium.home.beeld .achter::after{
  background:
    radial-gradient(56% 50% at 50% 40%,rgba(6,7,8,.92),rgba(6,7,8,.8) 50%,rgba(6,7,8,0) 100%),
    linear-gradient(var(--zw),rgba(6,7,8,.55) 22%,rgba(6,7,8,0) 52%,rgba(6,7,8,0) 84%,var(--zw)),
    linear-gradient(90deg,rgba(6,7,8,.6),rgba(6,7,8,0) 18%,rgba(6,7,8,0) 82%,rgba(6,7,8,.6))}
@media (prefers-reduced-motion:no-preference){
  .podium.home.beeld .achter img{animation:hero-zoom 22s cubic-bezier(.25,.1,.25,1) both}
}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.04)}}
@media (max-width:760px){
  /* telefoon: de wagen staat net onder de tekst, het dak loopt achter de knoppen door */
  .podium.home.beeld .tekst{padding-bottom:46vw}
  .podium.home.beeld .achter{aspect-ratio:auto}
  .podium.home.beeld .achter picture{top:auto;left:-17.5vw;right:-17.5vw;height:calc(135vw / 1.6);
    -webkit-mask-image:linear-gradient(transparent,#000 34%);mask-image:linear-gradient(transparent,#000 34%)}
  .podium.home.beeld .achter img{object-position:50% 50%}
  .podium.home.beeld .achter::after{
    background:
      radial-gradient(95% 55% at 50% 34%,rgba(6,7,8,.8),rgba(6,7,8,0) 100%),
      linear-gradient(rgba(6,7,8,0) 80%,var(--zw))}
}

/* ── hero-richtingen home (16-10, feedback Thierry "zegt niet wauw"): de wagen of wagens nemen het hele
   eerste scherm in, achter titel, intro en knoppen. Enkel actief met .hero-a/-b/-c (HERO=a|b|c bouw.py). ── */
.podium.home.beeld[class*=hero-] .achter picture{top:0;-webkit-mask-image:none;mask-image:none}
.podium.home.beeld[class*=hero-] .achter img{transform-origin:50% 60%}
.podium.home.beeld[class*=hero-] .tekst{padding-bottom:clamp(260px,40svh,420px)}
.podium.home.beeld[class*=hero-] h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.podium.home.beeld[class*=hero-] .sub{color:#C9D0D7}
/* A: één wagen van voren, koplampen aan, nevel in de hal */
.podium.home.hero-a .achter img{object-position:50% var(--ay,46%);filter:brightness(.92) saturate(.9)}
.podium.home.hero-a .achter::after{background:
  radial-gradient(60% 46% at 50% 30%,rgba(6,7,8,.84),rgba(6,7,8,.62) 55%,rgba(6,7,8,0) 100%),
  linear-gradient(rgba(6,7,8,.85),rgba(6,7,8,.45) 30%,rgba(6,7,8,0) 54%,rgba(6,7,8,0) 86%,var(--zw)),
  linear-gradient(90deg,rgba(6,7,8,.55),rgba(6,7,8,0) 22%,rgba(6,7,8,0) 78%,rgba(6,7,8,.55))}
/* B: vier wagens in een donkere showroom onder één lichtvlak */
.podium.home.hero-b .achter img{object-position:50% var(--by,62%);filter:brightness(.95)}
.podium.home.hero-b .achter::after{background:
  radial-gradient(64% 50% at 50% 32%,rgba(6,7,8,.95),rgba(6,7,8,.88) 55%,rgba(6,7,8,0) 100%),
  linear-gradient(rgba(6,7,8,.9),rgba(6,7,8,.6) 38%,rgba(6,7,8,0) 60%,rgba(6,7,8,0) 84%,var(--zw)),
  linear-gradient(90deg,rgba(6,7,8,.5),rgba(6,7,8,0) 20%,rgba(6,7,8,0) 80%,rgba(6,7,8,.5))}
/* C: een rij wagens in een hal, trage camerabeweging (video, poster = LCP), tekst links */
.podium.home.hero-c{text-align:left}
.podium.home.hero-c .tekst{margin:0;max-width:640px}
.podium.home.hero-c .sub{margin-inline:0}
.podium.home.hero-c .knoppen{justify-content:flex-start}
.podium.home.hero-c .achter img,.podium.home.hero-c .hero-video{object-position:62% 50%;filter:brightness(.8) contrast(1.08) saturate(.85)}
.podium.home.hero-c .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--uit)}
.podium.home.hero-c .hero-video.speelt{opacity:1}
.podium.home.hero-c .achter img{animation:none}
.podium.home.hero-c .achter::after{z-index:1;background:
  linear-gradient(90deg,rgba(6,7,8,.94),rgba(6,7,8,.86) 34%,rgba(6,7,8,.35) 58%,rgba(6,7,8,0) 78%),
  linear-gradient(rgba(6,7,8,.8),rgba(6,7,8,.55) 30%,rgba(6,7,8,0) 50%,rgba(6,7,8,0) 72%,var(--zw))}
@media (min-width:761px) and (max-width:1180px){
  .podium.home.hero-c .achter::after{background:
    linear-gradient(90deg,rgba(6,7,8,.95),rgba(6,7,8,.9) 50%,rgba(6,7,8,.45) 78%,rgba(6,7,8,.1)),
    linear-gradient(rgba(6,7,8,.85),rgba(6,7,8,.6) 34%,rgba(6,7,8,0) 56%,rgba(6,7,8,0) 72%,var(--zw))}
}
/* lijnknop op een beeld: eigen donkere ondergrond, zodat hij leesbaar blijft boven koplampen en lichtvlakken */
.podium.home.beeld[class*=hero-] .knop-lijn{background:rgba(6,7,8,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.podium.home.beeld[class*=hero-] .knop-lijn:hover{background:rgba(6,7,8,.8)}
@media (max-width:760px){
  .podium.home.beeld[class*=hero-] .tekst{padding-bottom:var(--pb-m,62vw)}
  .podium.home.beeld[class*=hero-] .achter picture{top:auto;bottom:0;left:var(--l-m);width:var(--w-m);right:auto;height:calc(var(--w-m) * var(--r-m))}
  .podium.home.beeld[class*=hero-] .achter img{object-position:50% 50%}
  .podium.home.hero-a{--w-m:160vw;--l-m:-30vw;--r-m:.75}
  .podium.home.hero-b{--w-m:190vw;--l-m:-45vw;--r-m:.75;--pb-m:74vw}
  .podium.home.hero-c{--w-m:200vw;--l-m:-95vw;--r-m:.5625;--pb-m:58vw}
  .podium.home.hero-c .hero-video{top:auto;bottom:0;left:-95vw;width:200vw;height:112.5vw}
  .podium.home.beeld[class*=hero-] .achter::after{background:
    linear-gradient(var(--zw) 0,rgba(6,7,8,.9) 38%,rgba(6,7,8,.55) 56%,rgba(6,7,8,0) 72%,rgba(6,7,8,0) 90%,var(--zw))}
  .podium.home.hero-b .achter::after{background:
    linear-gradient(var(--zw) 0,rgba(6,7,8,.94) 42%,rgba(6,7,8,.7) 58%,rgba(6,7,8,0) 74%,rgba(6,7,8,0) 90%,var(--zw))}
  .podium.home.hero-b .knop-lijn{background:rgba(6,7,8,.75)}
}

/* ── hero D/E/F (16-10 avond, feedback Thierry "te exclusieve wagens"): alledaagse wagens, het wauw
   komt van licht en beweging. Tekst links, wagen groot rechts ervan en erachter. Enkel met .hero-d/-e/-f. ── */
.podium.home.hero-d,.podium.home.hero-e,.podium.home.hero-f{text-align:left}
.podium.home:is(.hero-d,.hero-e,.hero-f) .tekst{margin:0;max-width:620px}
.podium.home:is(.hero-d,.hero-e,.hero-f) .sub{margin-inline:0}
.podium.home:is(.hero-d,.hero-e,.hero-f) .knoppen{justify-content:flex-start}
.podium.home:is(.hero-d,.hero-e,.hero-f) .achter img{animation:none;object-position:50% 100%}
.podium.home:is(.hero-d,.hero-f) .achter picture,.podium.home.hero-e .achter picture,.podium.home.hero-e .hero-video{
  left:var(--dx,16%);right:auto;width:100%}
.podium.home.hero-e{--dx:18%}
.podium.home.hero-e .hero-video{position:absolute;top:0;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity 1.2s var(--uit)}
.podium.home.hero-e .achter img{object-position:50% 50%;filter:brightness(.9)}
.podium.home.hero-e .hero-video.speelt{opacity:1}
.podium.home:is(.hero-d,.hero-e,.hero-f) .achter::after{z-index:1;background:
  linear-gradient(90deg,rgba(6,7,8,.96),rgba(6,7,8,.92) 38%,rgba(6,7,8,.58) 54%,rgba(6,7,8,0) 68%),
  linear-gradient(rgba(6,7,8,.7),rgba(6,7,8,0) 26%,rgba(6,7,8,0) 84%,var(--zw))}
.podium.home.hero-e .achter::after{background:
  linear-gradient(90deg,rgba(6,7,8,.97),rgba(6,7,8,.93) 40%,rgba(6,7,8,.6) 56%,rgba(6,7,8,0) 70%),
  linear-gradient(rgba(6,7,8,.85),rgba(6,7,8,.2) 30%,rgba(6,7,8,0) 40%,rgba(6,7,8,0) 84%,var(--zw))}
/* tablet rechtop: de wagen onderaan over de volle breedte, zoals op telefoon */
@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .podium.home:is(.hero-d,.hero-e,.hero-f) .tekst{padding-bottom:58vw}
  .podium.home:is(.hero-d,.hero-e,.hero-f) .achter picture{top:auto;bottom:0;left:-25vw;width:150vw;height:84.4vw}
  .podium.home.hero-e .hero-video{top:auto;bottom:0;left:-25vw;width:150vw;height:84.4vw}
  .podium.home:is(.hero-d,.hero-e,.hero-f) .achter::after{background:
    linear-gradient(var(--zw) 0,rgba(6,7,8,.92) 40%,rgba(6,7,8,.5) 56%,rgba(6,7,8,0) 68%,rgba(6,7,8,0) 92%,var(--zw))!important}
}
@media (min-width:761px) and (max-width:1180px){
  .podium.home:is(.hero-d,.hero-e,.hero-f){--dx:24%}
  .podium.home:is(.hero-d,.hero-e,.hero-f) .achter::after{background:
    linear-gradient(90deg,rgba(6,7,8,.97),rgba(6,7,8,.92) 44%,rgba(6,7,8,.55) 62%,rgba(6,7,8,.05) 80%),
    linear-gradient(rgba(6,7,8,.75),rgba(6,7,8,0) 30%,rgba(6,7,8,0) 84%,var(--zw))}
}
/* D: de lampen gaan aan (gloed van de eigen koplampen faadt in) en een lichtveeg glijdt over de lak */
.podium.home.hero-d .laag picture{mix-blend-mode:screen;opacity:0}
.podium.home.hero-d.aan .laag-gloed picture{animation:lampen-aan 2.4s .2s cubic-bezier(.3,0,.2,1) forwards}
.podium.home.hero-d.aan .laag-lak picture{opacity:.75;-webkit-mask-image:linear-gradient(100deg,transparent 42%,#000 50%,transparent 58%);
  mask-image:linear-gradient(100deg,transparent 42%,#000 50%,transparent 58%);-webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;animation:lichtveeg 9s 1.6s cubic-bezier(.45,0,.25,1) infinite}
.podium.home.hero-d.aan > .achter > picture img{animation:basis-aan 2.4s .2s cubic-bezier(.3,0,.2,1) both}
@keyframes lampen-aan{0%{opacity:0}12%{opacity:.55}20%{opacity:.2}38%{opacity:.85}100%{opacity:1}}
@keyframes basis-aan{from{filter:brightness(.72)}to{filter:brightness(1)}}
@keyframes lichtveeg{0%{-webkit-mask-position:100% 0;mask-position:100% 0}38%,100%{-webkit-mask-position:0 0;mask-position:0 0}}
/* F: drie alledaagse wagens die rustig in elkaar overvloeien (elk 6 s) */
.podium.home.hero-f .laag picture{opacity:0}
.podium.home.hero-f.aan > .achter > picture,.podium.home.hero-f.aan .laag picture{animation:overvloei 18s linear infinite}
.podium.home.hero-f.aan .laag-f2 picture{animation-delay:6s}
.podium.home.hero-f.aan .laag-f3 picture{animation-delay:12s}
.podium.home.hero-f.aan > .achter > picture{animation-delay:-1.2s}
@keyframes overvloei{0%{opacity:0}7%{opacity:1}33%{opacity:1}40%{opacity:0}100%{opacity:0}}
@media (max-width:760px){
  .podium.home:is(.hero-d,.hero-e,.hero-f) .achter picture{left:var(--l-m);width:var(--w-m)}
  .podium.home.hero-d,.podium.home.hero-f{--w-m:170vw;--l-m:-35vw;--r-m:.5625;--pb-m:66vw}
  .podium.home.hero-e{--w-m:200vw;--l-m:-62vw;--r-m:.5625;--pb-m:64vw}
  .podium.home.hero-e .hero-video{top:auto;bottom:0;left:-62vw;width:200vw;height:112.5vw}
  .podium.home:is(.hero-d,.hero-e,.hero-f) .achter::after{background:
    linear-gradient(var(--zw) 0,rgba(6,7,8,.92) 40%,rgba(6,7,8,.55) 58%,rgba(6,7,8,0) 72%,rgba(6,7,8,0) 92%,var(--zw))}
}
/* computer en tablet liggend: het beeld is precies één scherm hoog, zodat de hele wagen boven de vouw staat */
@media (min-width:761px) and (orientation:landscape){
  .podium.home:is(.hero-d,.hero-e,.hero-f) .achter picture,.podium.home.hero-e .hero-video{bottom:auto;height:100svh}
}

/* ── hero G/H (16-10 ochtend, opdracht Thierry): titel, intro en knoppen volledig gecentreerd, horizontaal
   en verticaal; daarachter een video over de hele hero waarin de koplampen aanspringen (G één wagen, H drie
   na elkaar). Poster = eerste beeld met de lampen aan (LCP), video pas na de eerste weergave (av.js
   "hero-video"), niet bij minder beweging of databesparing. Eigen uitsnede voor telefoon. ── */
.podium.home.beeld:is(.hero-g,.hero-h){min-height:100svh;justify-content:center;text-align:center}
.podium.home.beeld:is(.hero-g,.hero-h) .podium-in{justify-content:center}
.podium.home.beeld:is(.hero-g,.hero-h) .tekst{margin:0 auto;max-width:900px;padding:clamp(96px,12svh,132px) 0 clamp(40px,7svh,80px)}
.podium.home.beeld:is(.hero-g,.hero-h) .sub{margin-inline:auto;color:#D3D8DE}
.podium.home.beeld:is(.hero-g,.hero-h) .knoppen{justify-content:center}
.podium.home.beeld:is(.hero-g,.hero-h) .achter picture,
.podium.home.beeld:is(.hero-g,.hero-h) .hero-video{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;-webkit-mask-image:none;mask-image:none}
.podium.home.beeld:is(.hero-g,.hero-h) .achter img,
.podium.home.beeld:is(.hero-g,.hero-h) .hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 70%;filter:none;animation:none;transform:none}
.podium.home.beeld:is(.hero-g,.hero-h) .hero-video{opacity:0;transition:opacity .9s var(--uit)}
/* de video is 2 px smaller dan de poster eronder (onzichtbaar, poster = eerste beeld), zodat de browser de
   poster als grootste beeld (LCP) houdt en niet de video die pas na het laden start */
.podium.home.beeld:is(.hero-g,.hero-h) .achter .hero-video{left:1px;width:calc(100% - 2px)}
.podium.home.beeld:is(.hero-g,.hero-h) .hero-video.speelt{opacity:1}
.podium.home.beeld:is(.hero-g,.hero-h) .achter::after{z-index:1;background:
    radial-gradient(46% 33% at 50% 45%,rgba(6,7,8,.88),rgba(6,7,8,.8) 62%,rgba(6,7,8,0) 100%),
    linear-gradient(rgba(6,7,8,.75),rgba(6,7,8,.2) 34%,rgba(6,7,8,0) 60%,rgba(6,7,8,0) 86%,var(--zw))}
/* computer en tablet: het beeld zakt 16% zodat de koplampen net onder de knoppen staan, niet achter de intro;
   bovenaan is het plafond toch zwart */
@media (min-width:761px){
  .podium.home.beeld:is(.hero-g,.hero-h) .achter picture,
  .podium.home.beeld:is(.hero-g,.hero-h) .hero-video{top:16%;height:100%;
    -webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
  .podium.home.beeld:is(.hero-g,.hero-h) .achter img,
  .podium.home.beeld:is(.hero-g,.hero-h) .hero-video{object-position:50% 0}
  /* H: lager en iets kleiner, zodat de drie wagens volledig in beeld staan en alle koplampen onder de knoppen */
  .podium.home.beeld.hero-h .achter picture,.podium.home.beeld.hero-h .hero-video{top:28%;height:72%}
}
/* tablet en lage laptopschermen (4:3, 1280x800, 1366x768): de tekst neemt meer hoogte in, dus het beeld
   zakt verder en de scrim achter de tekst is groter */
@media (min-width:761px) and (max-width:1180px),(min-width:761px) and (max-height:860px){
  .podium.home.beeld.hero-h .achter picture,.podium.home.beeld.hero-h .hero-video{top:30%;height:70%}
  .podium.home.beeld.hero-g .achter picture,.podium.home.beeld.hero-g .hero-video{top:24%}
  .podium.home.beeld:is(.hero-g,.hero-h) .achter::after{background:
    radial-gradient(52% 36% at 50% 46%,rgba(6,7,8,.9),rgba(6,7,8,.84) 66%,rgba(6,7,8,0) 100%),
    linear-gradient(rgba(6,7,8,.75),rgba(6,7,8,.2) 34%,rgba(6,7,8,0) 60%,rgba(6,7,8,0) 86%,var(--zw))}
}
@media (max-width:760px){
  .podium.home.beeld:is(.hero-g,.hero-h) .tekst{padding:96px 0 clamp(150px,30svh,260px)}
  .podium.home.beeld:is(.hero-g,.hero-h) .achter picture{left:0;width:100%;height:100%;top:0;bottom:0}
  .podium.home.beeld:is(.hero-g,.hero-h) .achter img,
  .podium.home.beeld:is(.hero-g,.hero-h) .hero-video{object-position:50% 100%}
  .podium.home.beeld:is(.hero-g,.hero-h) .achter::after{background:
    radial-gradient(90% 46% at 50% 38%,rgba(6,7,8,.72),rgba(6,7,8,.45) 60%,rgba(6,7,8,0) 100%),
    linear-gradient(rgba(6,7,8,.55),rgba(6,7,8,0) 40%,rgba(6,7,8,0) 88%,var(--zw))}
}