/* ---------- lettertypes, van onze eigen server ----------
   Ze kwamen eerder van fonts.googleapis.com. Dat betekende dat de browser
   van elke bezoeker contact legde met Google en daarbij zijn IP-adres
   meestuurde, nog voor er iets op het scherm stond. Nu staan ze in de map
   font en verlaat er geen enkel gegeven de site. Het laadt ook sneller:
   geen twee extra servers om op te zoeken en verbinding mee te maken.
   Het zijn variabele lettertypes, dus één bestand dekt alle diktes.
   ---------------------------------------------------------- */
@font-face{
  font-family:'Libre Bodoni';
  src:url('font/librebodoni.woff2') format('woff2-variations');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('font/archivo.woff2') format('woff2-variations');
  font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Sometype Mono';
  src:url('font/sometypemono.woff2') format('woff2-variations');
  font-weight:400 500;font-style:normal;font-display:swap;
}

/* =========================================================
   David Vespa-onderdelen
   Palet: Max Meyer, Piaggio 1946-1957
   ========================================================= */
:root{
  --carta:#F5F3EE;        /* avorio, het ivoor van de carrosserie */
  --carta-2:#E9E7DF;      /* grigio chiaro 15048, het fabrieksgrijs */
  --zand-diep:#DEDCD3;    /* diepste van de drie */
  --azzurro-licht:#E0E6E7;/* grigio azzurro 15028, sterk verlicht */
  --notte:#1D241E;        /* donkere secties, verde metallizzato verdiept */
  --inchiostro:#161E21;   /* tekst en voettekst */
  --ink-soft:#4C565A;
  --verde:#6F7D68;        /* verde metallizzato 6002M */
  --verde-scuro:#232A22;
  --pastello:#B4C6A8;     /* verde pastello 1.298.6334 */
  --grigio:#ADB1A6;       /* grigio metallizzato 8000M */
  /* kleur van de kop- en voetbalk, in één plek te wijzigen */
  --balk:#1E3038;         /* blu Piaggio, kop en voet */
  --balk-tekst:#FFFFFF;
  --balk-zacht:#B6C4C8;
  --balk-lijn:rgba(255,255,255,.22);
  --azzurro:#93A9AF;      /* grigio azzurro 15028 */
  --rosso:#9C3A28;        /* rosso opaco 10055M, enkel als klein accent */
  --blu:#1E3038;          /* blu Piaggio, verdiept uit grigio azzurro 15028 */
  --blu-diep:#132227;
  --linea:#D8D5CB;
  --linea-zacht:#E6E3DA;

  /* Libre Bodoni in plaats van Bodoni Moda: zelfde Italiaanse klasse, maar
     met stevigere haarlijnen en een grotere x-hoogte. Bij Bodoni Moda viel
     de dunne schuine streep van een v op een telefoon soms weg. */
  --display:'Libre Bodoni',Georgia,serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'Sometype Mono',ui-monospace,monospace;

  /* Eén breedte voor alle blokken, ook de balk en de footer: 1100 met de
     zijmarge erbij, dus 1044 voor de inhoud. Dat was eerst 1240 voor het
     merendeel en 1100 voor de aanbodpagina, waardoor blokken onder elkaar
     niet op dezelfde rand begonnen. */
  --wrap:1100px;
  /* Eén maat voor lopende tekst. In rem en niet in ch, want ch rekent met de
     breedte van een nul in het huidige lettertype: een .lede van 52ch is bij
     een grotere letter fysiek breder dan een gewone alinea van 52ch, en dan
     lopen twee blokken onder elkaar niet gelijk uit. */
  --meet:34rem;
  /* rosso opaco is te donker op de navy kaart; dezelfde tint, lichter.
     #D4735B haalde maar 4,2:1 op de navy, #D8816B haalt 4,7:1 (WCAG AA). */
  --rosso-licht:#D8816B;
  /* Kleur van "Hoe het werkt" en de footerkopjes op de navy achtergrond.
     Wit, zoals de tekst erond. Rosso (#9C3A28) haalde op navy maar 2,0:1,
     WCAG AA vraagt 4,5:1. */
  --accent-op-balk:var(--balk-tekst);
  --pil:999px;
  --zacht:6px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
/* tekst die enkel een schermlezer voorleest, onzichtbaar op het scherm */
.enkel-voorlezen{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Tekstlinks zonder eigen opmaak kregen het blauw van de browser. :where()
   geeft deze regel geen gewicht, dus elke specifiekere linkstijl wint. */
:where(main a:not([class])){color:var(--blu);text-decoration-color:var(--rosso);text-underline-offset:.18em;text-decoration-thickness:1px}
:where(main a:not([class])):hover{text-decoration-thickness:2px}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.smal{max-width:820px}

/* ---------- typografie ---------- */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.012em}
.klem{position:relative;display:inline-block;color:inherit}
/* het accentwoord krijgt een boog in rosso opaco, als een streep met de hand gezet */
.klem::after{
  content:"";position:absolute;left:-.05em;right:-.05em;bottom:-.16em;height:.3em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2.5,12 Q50,3.4 97.5,12' fill='none' stroke='%239C3A28' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path:inset(0 0 0 0);
}
.js .ld .klem::after,.js .rv .klem::after,.js .boog .klem::after,
.js .ld.klem::after,.js .rv.klem::after{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.05s cubic-bezier(.22,.7,.2,1);
  transition-delay:calc(var(--i,0)*80ms + 380ms);
}
.ld.in .klem::after,.rv.in .klem::after,.boog.in .klem::after,
.ld.in.klem::after,.rv.in.klem::after{clip-path:inset(0 0 0 0)}
/* Eén titelmaat voor de hele site, die van de kop boven de foto op de
   aanbodpagina. Sectiekoppen en paginatitels zijn even groot; alleen de
   titels binnen een kaart blijven een trap kleiner. */
h1,h2{font-size:clamp(1.5rem,2.3vw,2.1rem);font-weight:600}
h3{font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.14}
em{font-style:italic}
.lede{font-size:clamp(1.06rem,1.35vw,1.22rem);color:var(--ink-soft);max-width:52ch;line-height:1.55}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* het handmerk: de zes lakkleuren als aaneengesloten strook */
/* Het logo: zes lakstalen naast elkaar. Overal exact dezelfde maat en
   dezelfde afronding, zodat het in de kop en in de voet hetzelfde merk
   blijft. Alleen de ruimte eronder verschilt per plek. */
.waaier{
  /* De band rekent zelf uit hoe breed een streepje is, uit de maat van het
     merk eromheen. Zo klopt hij in de kop, de voet en de partnerzegel,
     zonder die maat op drie plaatsen te moeten herhalen. */
  --streep:calc(var(--merk-maat, 1.32rem) * .758);
  display:flex;gap:0;width:max-content;overflow:hidden;
  border-radius:calc(var(--streep) / 6.4);
  margin:0 0 calc(var(--merk-maat, 1.32rem) * .43);
}
/* Eén maat stuurt het hele merk. De streepjes zijn altijd 3,2 keer breder
   dan hoog en de band is altijd 4,55 keer de lettergrootte van de naam.
   Zo ziet het merk er in de kop en in de voet identiek uit, alleen groter. */
.waaier i{
  width:var(--streep);height:calc(var(--streep) / 3.2);
  display:block;flex:none;
}

/* logo */
.waaier i:nth-child(1){background:var(--grigio)}
.waaier i:nth-child(2){background:var(--verde)}
.waaier i:nth-child(3){background:var(--pastello)}
.waaier i:nth-child(4){background:var(--azzurro)}
.waaier i:nth-child(5){background:#C6C3B6}
.waaier i:nth-child(6){background:var(--rosso)}

/* ---------- knoppen en links ---------- */
.btn{
  display:inline-block;font-family:var(--body);font-weight:500;font-size:.94rem;
  letter-spacing:.02em;padding:15px 32px;text-decoration:none;border:1px solid transparent;
  border-radius:var(--pil);
  cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),
  border-color .3s var(--ease),transform .3s var(--ease);
}
.btn-vol{background:var(--blu);color:#fff}
/* tweede knop naast de hoofdknop: zelfde maat, alleen een lijn */
.btn-lijn{background:transparent;color:var(--blu);border-color:var(--blu)}
.btn-lijn:hover{background:var(--blu);color:#fff;transform:translateY(-2px)}
.btn-vol:hover{background:var(--blu-diep);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* knop met een pictogram ervoor */
.btn.met-icoon{display:inline-flex;align-items:center;gap:10px}
.btn.met-icoon svg{width:18px;height:18px;flex:none}


/* ---------- kop ---------- */
header.top{
  position:sticky;top:0;z-index:60;background:var(--balk);
  border-bottom:1px solid var(--balk-lijn);
  transition:box-shadow .4s var(--ease);
}
.top .wrap{display:flex;align-items:center;gap:30px;min-height:78px;transition:min-height .4s var(--ease)}
.top.klein .wrap{min-height:60px}
.top.klein{box-shadow:0 2px 22px rgba(22,30,33,.16)}
.merk{
  --merk-maat:1.32rem;
  text-decoration:none;color:var(--balk-tekst);line-height:1.1;
  display:inline-flex;flex-direction:column;align-items:center;text-align:center;
}
.merk b{display:block;font-family:var(--display);font-weight:500;font-size:var(--merk-maat);letter-spacing:-.01em}
.merk span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);margin-right:-.24em;
}
.top nav{margin-left:auto;display:flex;gap:30px;align-items:center}
.top nav a{
  font-family:var(--body);font-size:.95rem;font-weight:500;letter-spacing:.005em;
  text-decoration:none;color:var(--balk-zacht);position:relative;padding:4px 0;
}
.top nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--balk-tekst);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.top nav a:hover{color:var(--balk-tekst)}
.top nav a:hover::after,.top nav a[aria-current]::after{transform:scaleX(1)}
.top nav a[aria-current]{color:var(--balk-tekst)}
.top nav a.knop{
  background:var(--blu);color:#fff;padding:11px 20px;letter-spacing:.14em;border-radius:var(--pil);
  transition:background .3s var(--ease);
}
.top nav a.knop::after{display:none}
.top nav a.knop:hover{background:var(--blu-diep);color:#fff}

/* ---------- secties ---------- */
/* Blokken volgen elkaar kort op: ruimte genoeg om ze uit elkaar te houden,
   niet zoveel dat er een leeg scherm tussen zit. */
main section{padding:clamp(48px,6vw,80px) 0}
.band{background:var(--carta-2)}
.azzurro{background:var(--azzurro-licht);border-top:1px solid #CBD4D5;border-bottom:1px solid #CBD4D5}

/* donkere sectie: één per pagina, voor ritme */
.azzurro .lijst,.azzurro .lijst a{border-color:#CBD4D5}
.azzurro .feiten div{border-bottom-color:#CBD4D5}
.donker .lede{color:#BFC6BA}
/* Het blok zelf is niet meer begrensd: de kop mag breder lopen dan de tekst
   eronder, zodat een titel op één of twee regels staat in plaats van drie
   korte. De alinea's houden hun eigen maat. */
.kop{margin-bottom:clamp(28px,3.4vw,44px)}
.kop h1,.kop h2{max-width:40ch}
.kop>p{max-width:var(--meet)}
/* binnen een tekstblok krijgen de lede en de alinea's eronder dezelfde maat,
   zodat ze op dezelfde lijn eindigen */
.intro-tekst,.persoonkop-tekst{max-width:var(--meet)}
.intro-tekst .lede,.persoonkop-tekst .lede{max-width:none}
/* de eerste alinea onder een kop, of die nu .lede is of niet */
.kop .lede,.kop h2+p,.kop h1+p{margin-top:22px}
/* niets mag het scherm zijwaarts kunnen oprekken */
/* Alleen op html, niet op body. Staat overflow op allebei, dan wordt body zelf
   een scrollcontainer en heeft position:sticky nergens meer houvast: het
   paneel in het restauratieblok scrolde daardoor gewoon mee uit beeld. Op html
   alleen gaat de instelling naar het venster en blijft sticky werken. */
html{overflow-x:hidden}
html,body{max-width:100%}
img,svg,video{max-width:100%}
.hero-zij .lede{max-width:34ch}
/* ---------- hero: kop, brede foto, twee luiken naast elkaar ----------
   De twee activiteiten stonden onder elkaar met een streep ertussen, wat het
   tweede luik automatisch tot bijzaak maakte. Naast elkaar zijn ze gelijk in
   gewicht, en de foto kan dan over de volle breedte als één beeld. */
/* De hele hero staat in één kolom van 1000 breed: de titel, de zin ernaast,
   de foto en de twee luiken beginnen allemaal op dezelfde linkerrand. Stond de
   kop over de volle 1184 en de foto op 1000, dan sprong de titel links buiten
   het beeld en zag het er los uit. */

/* ---------- hero: alleen de foto, over de volle breedte van de kolom ----------
   Geen titel en geen tekst ernaast: de collectie is het eerste wat je ziet.
   16:9 houdt alle vier de scooters heel, van koplamp tot wiel, en blijft met
   het bijschrift binnen een gewoon laptopscherm. */
/* Eén regel boven de foto, bescheiden van maat: zegt in twee seconden wat
   dit is, zonder de foto het beeld uit te duwen. */
.hero-titel{margin:0 0 clamp(16px,1.8vw,22px)}
.hero-foto{margin:0}
/* uitsnede per foto, als klasse in plaats van een style-attribuut in de html:
   de Content-Security-Policy laat geen inline opmaak toe */
.uitsnede-38{object-position:center 38%}
.uitsnede-40{object-position:center 40%}
.uitsnede-42{object-position:center 42%}
.uitsnede-45{object-position:center 45%}
.uitsnede-55{object-position:center 55%}
.hero-foto img{height:auto;aspect-ratio:2.3/1;object-fit:cover;object-position:center 46%}
.hero-foto figcaption{margin-top:12px}

/* De twee activiteiten als twee gelijke kaarten onder de hero. Een kaart
   heeft een eigen rand, dus je ziet meteen waar het ene stopt en het andere
   begint, en de knop zit onderaan in de kaart bij de tekst waar hij bij hoort.
   Losse kolommen met een haarlijn ertussen deden dat niet: de ene tekst was
   langer dan de andere en de knoppen zweefden. */
.luikduo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.4vw,32px);
  margin-top:clamp(28px,3.4vw,44px);
}
.luik{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--linea);border-radius:var(--zacht);
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,34px) clamp(22px,2.4vw,28px);
}
/* (met .luik ervoor, anders wint de algemene .luik p en wordt hij grijs) */
.luik .luik-kop{
  margin:0 0 8px;font-size:.86rem;font-weight:600;
  color:var(--rosso);
}
.luik h2{font-size:clamp(1.5rem,2vw,1.85rem);margin-bottom:10px}
.luik p{color:var(--ink-soft);max-width:none;font-size:.95rem;line-height:1.6;margin-bottom:.9em}
.luik p:last-of-type{margin-bottom:0}
/* de knop onderaan elke kolom, op dezelfde hoogte in beide luiken ook als
   de ene tekst een regel langer is dan de andere */
.luik-acties{margin-top:auto;padding-top:18px}

@media (max-width:860px){
  .hero-foto img{aspect-ratio:4/3}
  .luikduo{grid-template-columns:1fr;gap:20px}
}

.paginakop{padding:clamp(40px,5vw,68px) 0 clamp(26px,3.4vw,40px)}
.vragenkop{padding-bottom:clamp(40px,5vw,64px)}
.vragenkop .lede{max-width:none}
.paginakop h1{max-width:40ch}
.paginakop .lede{margin-top:26px}
.galerij img,.duo img{border-radius:var(--zacht)}

/* ---------- kop van het aanbod: tekst en foto samen ---------- */
.bestelkop{padding:clamp(36px,4.4vw,60px) 0 clamp(40px,5vw,64px)}
/* de aanbodpagina compacter bovenaan: de foto en het bijschrift moeten
   zonder scrollen in beeld staan op een gewoon laptopscherm */
.aanbodkop{padding:clamp(28px,3.4vw,48px) 0 clamp(40px,5vw,64px)}
.bestelkop-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4.5vw,68px);align-items:center}
.intro-tekst h1{margin-bottom:20px}
.intro-tekst .lede{margin-bottom:18px}
.intro-tekst p{color:var(--ink-soft)}
.intro-tekst .acties{margin-top:30px}

.kopfoto{margin:0}
.kopfoto img{width:100%;height:auto;border-radius:var(--zacht);box-shadow:0 22px 48px rgba(22,30,33,.16)}
.kopfoto figcaption{
  font-family:var(--body);font-size:.84rem;letter-spacing:.005em;
  line-height:1.55;color:var(--ink-soft);margin-top:14px;
}
.kopfoto figcaption a{color:var(--blu);font-weight:500}

/* Mozaïek van de collectie: een breed openingsbeeld, dan een staand detail
   naast twee liggende, en een breed slotbeeld. De hoogtes zijn zo gekozen
   dat het staande beeld precies twee rijen overspant. */
/* De kop van Over David wijkt bewust af van de andere pagina's. Daar staat
   overal tekst links en beeld rechts; hier loopt de titel over de volle
   breedte en staat de foto juist links, met de tekst ernaast. */
.persoonpagina h1{max-width:40ch;margin-bottom:clamp(22px,2.8vw,34px)}
.persoonkop{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,58px);align-items:start;
}
.persoonkop-tekst .lede{margin-top:0}
.persoonkop-tekst p + p{margin-top:18px}
.persoonkop-tekst p:not(.lede){color:var(--ink-soft)}@media (max-width:900px){
  .persoonpagina h1{max-width:none}
  .persoonkop{grid-template-columns:1fr;gap:30px}
  .persoonkop .kopfoto{max-width:260px;margin-inline:auto}
}

.projectgalerij{grid-auto-flow:dense}
.projectgalerij figure{
  overflow:hidden;border-radius:var(--zacht);
  box-shadow:0 16px 38px rgba(22,30,33,.15);
  transition:box-shadow .55s var(--ease);
}
@media (hover:hover){
  /* het kader komt naar voren en de foto zet nog een stapje bij */
  .projectgalerij figure:hover{box-shadow:0 30px 66px rgba(22,30,33,.26)}
  .projectgalerij img{transition:scale .9s var(--ease)}
  .projectgalerij figure:hover img{scale:1.055}
}
.projectgalerij img{
  display:block;height:100%;width:100%;object-fit:cover;
  /* iets groter dan het kader, zodat er ruimte is om binnen dat kader te
     schuiven terwijl je scrolt. De verschuiving zelf komt uit site.js. */
  transform:scale(1.16) translate3d(0, var(--drift, 0px), 0);
  will-change:transform;
}

/* De kaders komen samen op, met een korte fade en een kleine opduw. De vorige
   versie veegde elk kader vanuit een andere richting open in 1,15s met 140ms
   tussen elk beeld: dat las als een foto die traag staat te laden. Nu staat
   alles binnen een halve seconde scherp. */
.js .projectgalerij figure.rv{
  clip-path:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}
.projectgalerij figure.rv.in{opacity:1;transform:none}
.g-vol{grid-column:span 12}
.g-vol img{aspect-ratio:21/9}
.g-staand{grid-column:span 4;grid-row:span 2}
.g-zij{grid-column:span 8}
.g-zij img{aspect-ratio:21/9}
.g-staand img{aspect-ratio:auto;width:100%}@media (max-width:820px){
  .projectgalerij{grid-template-columns:repeat(2,1fr)}
  .g-vol{grid-column:span 2}
  .g-zij{grid-column:span 2}
  .g-staand{grid-column:span 2;grid-row:auto}
  .g-staand img{aspect-ratio:16/9}
  /* zonder parallax hoeft de foto niet groter dan zijn kader te staan */
  .projectgalerij img{transform:none}
}

/* ---------- voorwaardenpagina: gewoon goed leesbare tekst ---------- */
.artikel h2{
  font-size:clamp(1.28rem,1.9vw,1.6rem);margin:clamp(38px,4vw,52px) 0 14px;
  padding-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--linea);
}
.artikel h2:first-child{margin-top:0;padding-top:0;border-top:0}
.artikel h3{font-size:1.04rem;margin:26px 0 8px}
.artikel p{margin:0 0 14px;color:var(--ink-soft)}
.artikel ul,.artikel ol{margin:0 0 16px;padding-left:22px;color:var(--ink-soft)}
.artikel li{margin-bottom:8px}
.artikel b{color:var(--inchiostro);font-weight:500}
.artikel .gegevens{list-style:none;padding:0}
.artikel .gegevens li{margin-bottom:5px}
.artikel .stappen-lijst li{margin-bottom:12px}
/* het kernrecht mag niet wegzakken in de lopende tekst */
.uitgelicht{
  background:var(--azzurro-licht);border-left:3px solid var(--blu);
  padding:18px 22px;border-radius:calc(var(--zacht) * .6);
  color:var(--inchiostro) !important;
}
/* het modelformulier is wettelijk verplicht om te verstrekken, maar het
   hoeft de pagina niet te domineren: het zit weggevouwen */
.meer-form{margin-top:clamp(38px,4vw,52px)}
.meer-form summary{font-size:.98rem}
.formulier-model{
  border:1px solid var(--linea);border-radius:var(--zacht);
  padding:clamp(20px,2.6vw,30px);background:var(--carta-2);margin-top:18px;
}
.formulier-model p{margin:0 0 20px;font-size:.94rem}
.formulier-model .btn{margin:0}
@media (max-width:680px){
  .artikel h2{margin-top:32px;padding-top:22px}
  .uitgelicht{padding:15px 17px}
}

/* ---------- de route: compacte roadmap met stippenspoor ---------- */
.route{position:relative;padding:clamp(16px,2vw,28px) 0 0;margin-inline:calc(-1 * clamp(0px,3.6vw,76px))}
.routelijn{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:2}

.stippen circle{fill:var(--linea);transition:fill .45s var(--ease),r .45s var(--ease)}
.stippen circle.op{fill:var(--blu)}

/* een rode Vespa, zoals die van David zelf */
.vespa .romp{fill:#9C3A28}
.vespa .zadel{fill:#2A2320}
.vespa .stuur{fill:#8A8F8C}
.vespa .band{fill:#1B2226}
.vespa .naaf{fill:#DCD9CF}
.vespa .lamp{fill:#F0EDE4}
.vespa .rib{fill:#7A2C1E}
.vespa .uitlaat{fill:#3A3835}
.vespa .spatbord{stroke:#9C3A28}
.vespa .pluim{fill:#9AA6AA}
.js .routelijn .vespa{opacity:0;transition:opacity .5s var(--ease)}
.js .route.rijdt .vespa{opacity:1}
.route.direct .vespa,.route.direct .stapnr,.route.direct .keten li>div,.route.direct .stippen circle{transition:none}

.route.rijdt .pluim{animation:pufje 2.1s ease-out infinite;transform-box:fill-box;transform-origin:center}
.route.rijdt .p2{animation-delay:.7s}
.route.rijdt .p3{animation-delay:1.4s}@keyframes pufje{
  0%{opacity:.45;transform:translate(0,0) scale(.35)}
  70%{opacity:.15}
  100%{opacity:0;transform:translate(-16px,-10px) scale(1.7)}
}

.keten{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(7,1fr);
  grid-template-rows:auto clamp(58px,7vw,104px) auto;
  column-gap:clamp(6px,.7vw,12px);
}
.keten li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  position:relative;z-index:4;
}
.keten li>div{max-width:196px}
/* De bovenste haltes vullen hun rij volledig: tekst tegen de bovenkant,
   bol tegen de onderkant. Zo staan alle titels op dezelfde hoogte, ook
   wanneer de ene drie regels tekst heeft en de andere vier. */
.keten li:nth-child(odd){grid-row:1;align-self:stretch;justify-content:space-between;gap:46px}
.keten li:nth-child(even){grid-row:3;align-self:start}
.keten li:nth-child(odd) .stapnr{order:2}
.keten li:nth-child(odd)>div{order:1}
.keten li:nth-child(1){grid-column:1}
.keten li:nth-child(2){grid-column:2}
.keten li:nth-child(3){grid-column:3}
.keten li:nth-child(4){grid-column:4}
.keten li:nth-child(5){grid-column:5}
.keten li:nth-child(6){grid-column:6}
.keten li:nth-child(7){grid-column:7}
/* de bovenste haltes hebben lucht boven de bol, want daar rijdt de Vespa */
.stapnr{
  width:48px;height:48px;border-radius:var(--pil);border:0;
  /* De cijfers in de schrijfletter van de site en zonder voorloopnul. Die nul
     hoort bij een technische reeks, niet bij zeven stappen die iemand leest. */
  color:var(--ink-soft);font-family:var(--display);font-weight:600;
  font-size:1.26rem;letter-spacing:0;
  display:grid;place-items:center;background:var(--carta-2);position:relative;z-index:5;
  flex:none;
  /* geen harde rand meer, maar een haarlijn en een zachte schaduw eronder */
  box-shadow:inset 0 0 0 1px var(--linea), 0 3px 10px rgba(22,30,33,.07);
  transition:background .55s var(--ease),color .55s var(--ease),
             box-shadow .55s var(--ease),transform .55s var(--ease);
}
/* het rondje dekt het spoor af, dus het volgt de kleur van zijn sectie */
.band .stapnr{background:var(--carta-2)}
.azzurro .stapnr{background:var(--azzurro-licht)}
.diep .stapnr{background:var(--zand-diep)}

.keten h3{font-size:1.14rem;margin-bottom:7px;line-height:1.24}
.keten p{color:var(--ink-soft);font-size:.98rem;margin:0;line-height:1.5}

.js .keten li>div{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .keten li.aan>div{opacity:1;transform:none}
.keten li.aan .stapnr{
  background:var(--blu);color:#fff;
  box-shadow:inset 0 0 0 1px var(--blu), 0 4px 12px rgba(22,30,33,.14);
}

/* ---------- zoekkaart naar de catalogus ---------- */
.zoekkaart{
  background:#fff;border:1px solid var(--inchiostro);border-radius:var(--zacht);
  padding:clamp(22px,2.6vw,34px);margin:clamp(34px,4.5vw,56px) 0 0;
  box-shadow:0 14px 34px rgba(22,30,33,.10);
}
.zoekkaart-kop{margin-bottom:24px}
.zoekkaart-kop h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}

.zoekkaart-velden{display:grid;grid-template-columns:1.2fr 1.05fr .8fr auto;gap:14px 16px;align-items:end}
.zoekkaart-velden .veld:first-child{position:relative;padding-right:16px}
.zoekkaart-velden .veld:first-child::after{
  content:"";position:absolute;right:0;bottom:6px;top:24px;width:1px;background:var(--linea);
  z-index:1;   /* mag niet over de keuzelijst met modellen heen vallen */
}
.zoekkaart .veld label{
  font-family:var(--body);font-size:.82rem;letter-spacing:.005em;font-weight:500;
  color:var(--ink-soft);
}
.zoekkaart .veld label .opt{letter-spacing:.005em}
/* verplicht of optioneel: overal dezelfde cursieve, grijze toevoeging */
.opt,.verplicht{font-style:italic;font-weight:400;color:var(--ink-soft);letter-spacing:.005em;margin-left:.2em}
.zoekkaart-velden .veld:first-child input{border-color:var(--blu)}
.zoekkaart input{
  border:1px solid var(--linea);border-radius:var(--zacht);background:var(--carta);
  padding:13px 14px;font-size:1rem;
}
/* het monospace-lettertype van bouwjaar maakte dat veld 2px hoger, waardoor
   zijn label niet op één lijn stond met de andere */
.zoekkaart .veld input{height:45px;box-sizing:border-box}
.zoekkaart input:focus{border-color:var(--blu);background:#fff;box-shadow:inset 0 -2px 0 var(--blu)}
.zoekknop{
  display:flex;align-items:center;justify-content:center;
  line-height:1.2;padding:15px 28px;white-space:nowrap;
}
/* eigen keuzelijst bij het modelveld */
.zoekkaart-velden .veld{position:relative}
.suggesties{
  position:absolute;left:0;right:0;top:100%;z-index:30;
  margin:5px 0 0;
  background:#fff;border:1px solid var(--linea);border-radius:var(--zacht);
  box-shadow:0 16px 38px rgba(22,30,33,.18);
  max-height:290px;overflow-y:auto;overscroll-behavior:contain;
}
.suggesties[hidden]{display:none}
.suggesties ul{list-style:none;margin:0;padding:5px}
.suggesties li{
  padding:9px 12px;border-radius:calc(var(--zacht) * .55);cursor:pointer;
  font-size:.94rem;line-height:1.3;color:var(--inchiostro);
  transition:background .14s var(--ease),color .14s var(--ease);
}
.suggesties li.sug-kop{
  cursor:default;padding:12px 12px 6px;
  font-family:var(--body);font-size:.78rem;letter-spacing:.005em;font-weight:600;
  color:var(--blu);background:none;
}
.suggesties li.sug-kop:first-child{padding-top:6px}
.suggesties li:not(.sug-kop):hover,
.suggesties li[aria-selected="true"]{background:var(--azzurro-licht);color:var(--blu)}
.suggesties mark{background:none;color:var(--rosso);font-weight:600}

/* uitklapblok voor gegevens die niet iedereen hoeft in te vullen */
.meer{margin-top:16px;border-top:1px solid var(--linea);padding-top:13px}
.meer summary{
  display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font-size:.86rem;font-weight:500;color:var(--blu);
  padding:6px 0;min-height:34px;
}
.meer summary::-webkit-details-marker{display:none}
.meer summary::before{
  content:"";width:15px;height:15px;flex:none;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.7px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.7px 100% no-repeat;
  transition:transform .3s var(--ease);
}
.meer[open] summary::before{transform:rotate(45deg);opacity:.75}
.meer summary .opt{font-weight:400;color:var(--ink-soft)}
.meer summary:hover{opacity:.75}

.zoekknop-regel{display:inline-flex;align-items:center;gap:9px}
.zoekknop .loep{width:16px;height:16px;flex:none;margin-top:-1px}
.zoekvoorbeeld{
  margin:18px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);
  min-height:1.2em;
}
.zoekvoorbeeld b{color:var(--rosso);font-weight:500}

.zoektips-blok{margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--linea)}
.zoektips-blok h4{
  font-family:var(--body);font-size:.86rem;letter-spacing:.005em;
  color:var(--ink-soft);font-weight:600;margin:0 0 14px;
}
.zoektips{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:78ch}
.zoektips li{font-size:.88rem;color:var(--ink-soft);padding-left:18px;position:relative;line-height:1.5}
.zoektips li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--blu)}
.zoektips b{color:var(--inchiostro);font-weight:500;font-family:var(--mono);font-size:.85em}
.zoektips a{color:var(--blu)}

/* ---------- restauratie: kop en uitleg naast elkaar, zes kaarten eronder ----
   De kop links en de twee alinea's rechts vullen samen de breedte. Daaronder
   zes gelijke kaarten in drie kolommen, elk met een foto van 4:3 bovenaan,
   dan cijfer en titel, dan twee regels uitleg. Dezelfde kaartvorm als de twee
   luiken bovenaan, zodat de pagina één taal spreekt. Niets beweegt. */
.stappen{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);
}
.stap{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--linea);border-radius:var(--zacht);
  padding:14px 14px 22px;
}
.stap-foto{margin:0 0 18px}
.stap-foto img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:calc(var(--zacht) - 6px);
}
.stap h3{font-size:clamp(1.15rem,1.5vw,1.3rem);margin:0 10px 8px}
.stap p{margin:0 10px;color:var(--ink-soft);font-size:.95rem;line-height:1.6}

/* De eerste kaart legt uit, de andere tonen. Zelfde kaart, andere vulling:
   geen foto, wel een label, een kop en de uitleg, met onderaan de brug naar
   de voorbeelden ernaast. Op de achtergrondkleur van de pagina in plaats van
   wit, zodat hij zich stil onderscheidt van de fotokaarten. */
.stap-uitleg{
  background:var(--balk);border-color:var(--balk);color:var(--balk-tekst);
  padding:24px 22px 24px;
}
.stap-uitleg p{font-size:.92rem;line-height:1.55;color:var(--balk-zacht)}
.stap-uitleg .stap-label{
  margin:0 0 10px;font-size:.82rem;font-weight:600;color:var(--accent-op-balk);
}
.stap-uitleg h3{display:block;margin:0 0 14px;font-size:clamp(1.25rem,1.7vw,1.5rem);color:#fff}
.stap-uitleg p{margin:0 0 12px}
.stap-uitleg .stap-brug{
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--balk-lijn);
  color:#fff;font-weight:500;
}

@media (max-width:1100px){
  .stappen{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .stappen{grid-template-columns:1fr}
  .stap-foto img{aspect-ratio:16/10}
}

/* de afsluiter: uitnodiging en knop, gecentreerd onder het raster */
.rest-slot{
  margin:clamp(40px,4.6vw,60px) auto 0;max-width:56ch;text-align:center;
}
.rest-slot p{margin:0 0 22px;color:var(--ink-soft);font-size:1.05rem}

@media (max-width:880px){
  .stap{grid-template-columns:1fr;gap:20px}
  .stap:nth-child(even) figure{order:0}
  .stap p{max-width:60ch}
}

/* het tweede luik aankondigen, in de kop en in de hero */

/* ---------- stappen op de bestelpagina ----------
   Twee blokken onder elkaar op één pagina leest als twee losse dingen zolang
   er niet staat dat het één weg is. Vandaar een genummerd label boven elke kop
   en onderaan stap 1 een verwijzing naar stap 2. */
/* (heette .stap, maar die naam is nu van de stappen in het restauratieverhaal
   op de aanbodpagina; twee dezelfde klassen met andere opmaak liep fout) */
.stap-label{
  margin:0 0 6px;font-family:var(--body);font-size:.82rem;font-weight:600;
  letter-spacing:.005em;color:var(--blu);
}
.naar-stap-2{
  margin:26px 0 0;padding-top:20px;border-top:1px solid var(--linea);
  font-size:.92rem;color:var(--ink-soft);
}
.naar-stap-2 a{color:var(--blu);font-weight:500}

/* ---------- galerij ---------- */
.galerij{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px)}
/* De projectgalerij liep over de volle 1240px. Vier foto's van die maat onder
   elkaar duwen de rest van de pagina ver naar beneden en vragen meer aandacht
   dan het blok verdient. Het hele blok staat daarom in een smallere, gecentreerde
   kolom: de kop, de regel eronder en het mozaïek delen dezelfde linkerrand,
   zodat er niets scheef staat. */
.projecten-wrap{max-width:996px}
.galerij figure{margin:0}
.galerij img{width:100%;object-fit:cover}
.galerij figcaption{
  font-family:var(--body);font-size:.84rem;letter-spacing:.005em;
  color:var(--ink-soft);margin-top:12px;
}

.kaart{
  position:relative;overflow:hidden;border-radius:calc(var(--zacht) * 2);
  background:var(--carta-2);box-shadow:0 24px 56px rgba(22,30,33,.18);
  border:1px solid var(--linea);
}
.kaart video{display:block;width:100%;height:auto}
.bestelkop .kaart{border-radius:calc(var(--zacht) * 2)}
/* een haarlijn tussen de uitleg en de animatie */
.bestelkop-grid{align-items:stretch}
.bestelkop-grid .intro-tekst{
  display:flex;flex-direction:column;justify-content:center;
  padding-right:clamp(26px,3.4vw,54px);border-right:1px solid var(--linea);
  /* hier loopt de scheidingslijn langs de kolom, dus het blok zelf mag niet
     smaller worden; de maat zit op de alinea's */
  max-width:none;
}
.bestelkop-grid .intro-tekst .lede,
.bestelkop-grid .intro-tekst>p{max-width:var(--meet)}
.bestelkop-grid .kaart{align-self:center}
.kaart-bij{
  position:absolute;left:clamp(16px,2vw,26px);bottom:clamp(14px,2vw,22px);
  font-family:var(--body);font-size:.8rem;font-weight:500;letter-spacing:.005em;
  color:#fff;background:rgba(22,30,33,.5);backdrop-filter:blur(5px);
  padding:8px 14px;border-radius:var(--pil);
}
.kaart-knop{
  position:absolute;right:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);
  width:38px;height:38px;border-radius:var(--pil);border:1px solid rgba(255,255,255,.5);
  background:rgba(22,30,33,.45);backdrop-filter:blur(5px);color:#fff;cursor:pointer;
  font-size:.8rem;line-height:1;display:grid;place-items:center;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.kaart-knop:hover{background:rgba(22,30,33,.75);transform:scale(1.06)}

/* ---------- doorlopende fotoband ---------- */
/* ---------- de leverancier ---------- */
.leverancier{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,3.4vw,54px);margin-top:clamp(26px,3vw,40px);align-items:start;
}
.leverancier-verhaal p{color:var(--ink-soft);margin:0 0 13px;max-width:none}
.leverancier-verhaal .lede{color:var(--inchiostro);margin-bottom:20px}
.leverancier-verhaal p:last-child{margin-bottom:0}

/* vier vierkante beeldjes, twee bij twee, samen even hoog als de tekst */
.pakjes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.9vw,26px) clamp(14px,1.6vw,22px);perspective:1100px}
.pakjes figure{margin:0;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.raam{
  display:block;overflow:hidden;border-radius:calc(var(--zacht) * .8);
  box-shadow:0 12px 28px rgba(22,30,33,.17);transform-style:preserve-3d;backface-visibility:hidden;
}
.raam img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;transform:scale(1);transition:transform 1s var(--ease)}
.pakjes figcaption{
  margin-top:10px;font-family:var(--body);font-size:.82rem;letter-spacing:.005em;
  color:var(--ink-soft);transition:color .5s var(--ease);
}

/* de vier beeldjes zwaaien open als luikjes, elk met een eigen tel */
.js .pakjes .raam{
  opacity:0;filter:blur(7px);
  transform:rotateY(var(--draai)) translateZ(-30px) scale(.94);
  transition:opacity .8s var(--ease), filter .9s var(--ease),
             transform 1.05s cubic-bezier(.2,.72,.24,1), box-shadow .9s var(--ease);
  transition-delay:var(--vertraag,0ms);
}
.js .pakjes .raam img{
  transform:scale(1.14);
  transition:transform 1.5s cubic-bezier(.2,.72,.24,1);
  transition-delay:var(--vertraag,0ms);
}
.js .pakjes figcaption{
  opacity:0;transform:translateY(7px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--vertraag,0ms) + 420ms);
}
.js .pakjes.uit .raam{opacity:1;filter:none;transform:rotateY(0deg) translateZ(0) scale(1)}
.js .pakjes.uit .raam img{transform:scale(1)}
.js .pakjes.uit figcaption{opacity:1;transform:none}

/* de linkerkolom scharniert links, de rechterkolom rechts */
.pakjes figure:nth-child(odd) .raam{transform-origin:left center;--draai:-52deg}
.pakjes figure:nth-child(even) .raam{transform-origin:right center;--draai:52deg}

.pakjes figure:nth-child(1){--vertraag:0ms}
.pakjes figure:nth-child(2){--vertraag:170ms}
.pakjes figure:nth-child(3){--vertraag:340ms}
.pakjes figure:nth-child(4){--vertraag:510ms}@media (hover:hover){
  .pakjes figure:hover .raam img{transform:scale(1.07)}
  .pakjes figure:hover figcaption{color:var(--blu)}
}

/* het partnerschap sluit de sectie af, over de volle breedte */
.partnerzegel{
  margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--linea);text-align:center;
}
/* De partnerzegel was een platte afbeelding met het merk erin gebakken.
   Nu wordt de linkerhelft opgebouwd met dezelfde bouwsteen als de kop en
   de voet, zodat ze nooit meer uit de pas kan lopen. */
.zegel-lockup{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(24px,3.4vw,46px);flex-wrap:wrap;
}
.zegel-merk{
  --merk-maat:clamp(1.6rem,3vw,2.35rem);
  display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;
}
.zegel-merk b{
  font-family:var(--display);font-weight:500;font-size:var(--merk-maat);
  letter-spacing:-.01em;color:var(--inchiostro);
}
.zegel-streep{
  width:1px;align-self:stretch;background:var(--linea);
  margin-block:clamp(4px,1vw,12px);flex:none;
}
.zegel-sip{
  /* officieel dealerlogo van S.I.P. (vector, uit hun partnermateriaal) */
  width:clamp(140px,16vw,196px);height:auto;display:block;
}
.zegel-onder{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:clamp(22px,2.8vw,34px) 0 0;
}
.zegel-onder::before,.zegel-onder::after{
  content:"";height:1px;width:clamp(28px,6vw,64px);background:var(--linea);flex:none;
}
.zegel-onder span{
  font-family:var(--body);font-size:.88rem;letter-spacing:.005em;font-weight:500;
  color:var(--ink-soft);
}@media (max-width:700px){
  /* Onder elkaar in plaats van naast elkaar. Met flex-wrap belandde de
     streep naast het merk en het S.I.P.-logo eronder, wat scheef leest. */
  .zegel-lockup{flex-direction:column;gap:clamp(16px,4vw,24px)}
  .zegel-streep{width:min(150px,46%);height:1px;align-self:center;margin:0}
}
.duo .acties{margin-top:30px}
.band .scheda,.diep .scheda,.azzurro .scheda{background:#fff}

/* ---------- formulier ---------- */
.formulier{border:1px solid var(--linea);border-radius:var(--zacht);overflow:hidden;background:#fff}
/* smalle strook boven het formulier: de titel staat nu boven de kaart */
.formulier-kop{padding:16px 32px;border-bottom:1px solid var(--linea);background:var(--carta-2)}
.formulier-kop p{margin:0;font-family:var(--body);font-size:.86rem;letter-spacing:.005em;color:var(--ink-soft)}
.formulier-body{padding:24px 28px}
fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}
fieldset:last-of-type{margin-bottom:0}
legend{
  font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:.005em;
  color:var(--blu);padding:0 0 11px;
}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.velden.drieko{grid-template-columns:.55fr .45fr 1fr}
.veld{display:flex;flex-direction:column;gap:5px;min-width:0}
.veld.vol{grid-column:1/-1}
label{font-size:.86rem;font-weight:500}
label .opt{font-weight:400;color:var(--ink-soft)}
input,textarea{
  font-family:var(--body);font-size:1rem;color:var(--inchiostro);background:#fff;
  border:1px solid var(--linea);border-radius:var(--zacht);padding:12px 14px;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
input:focus,textarea:focus{outline:none;border-color:var(--blu);box-shadow:inset 0 -2px 0 var(--blu)}
textarea{min-height:70px;resize:vertical}
.mono-in{font-family:var(--mono)}
.tip{font-size:.83rem;color:var(--ink-soft);margin:12px 0 0}
/* een blok dat op een vorig blok volgt, met wat lucht ertussen */
.volgt{margin-top:16px}
.volgt-kort{margin-top:13px}

.keuze{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.keuze label{
  display:flex;align-items:center;gap:11px;font-weight:400;font-size:.94rem;
  border:1px solid var(--linea);border-radius:var(--zacht);padding:13px 18px;background:#fff;cursor:pointer;flex:1 1 190px;
  transition:border-color .25s var(--ease);
}
.keuze label:has(input:checked){border-color:var(--blu);box-shadow:inset 0 -2px 0 var(--blu)}
.keuze input{width:auto}
.vink{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;font-weight:400;line-height:1.55}
.vink input{width:auto;margin-top:4px;flex:none}
[hidden]{display:none!important}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.regels{border:1px solid var(--linea);border-radius:var(--zacht);overflow:hidden;background:#fff}
.regels-kop,.regel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 96px 46px;gap:14px;align-items:center;padding:11px 16px}
.regels-kop{
  background:var(--carta-2);border-bottom:1px solid var(--linea);
  font-family:var(--body);font-size:.8rem;font-weight:500;letter-spacing:.005em;color:var(--ink-soft);
}
.regel{border-bottom:1px solid var(--linea-zacht)}
.regel input{border:0;padding:9px 6px;background:transparent}
.regel input:focus{box-shadow:none;background:rgba(30,48,56,.09)}
.regel input.ref{font-family:var(--mono);font-size:.9rem}

/* het aantal met altijd zichtbare pijltjes ernaast */
.telveld{
  display:flex;align-items:stretch;gap:0;
  border:1px solid var(--linea);border-radius:calc(var(--zacht) * .7);
  background:var(--carta);overflow:hidden;height:38px;
}
.regel .telveld input.aantal{
  width:100%;min-width:0;border:0;background:transparent;text-align:center;
  padding:0 2px 0 8px;font-family:var(--mono);font-size:.92rem;
  -moz-appearance:textfield;appearance:textfield;
}
.regel .telveld input.aantal::-webkit-outer-spin-button,
.regel .telveld input.aantal::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.regel .telveld input.aantal:focus{background:rgba(30,48,56,.07)}
.tel-pijlen{display:flex;flex-direction:column;border-left:1px solid var(--linea);flex:none;width:26px}
.tel-op,.tel-af{
  flex:1;display:grid;place-items:center;padding:0;
  background:var(--carta-2);border:0;cursor:pointer;color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.tel-op{border-bottom:1px solid var(--linea)}
.tel-op svg,.tel-af svg{width:11px;height:7px;display:block}
.tel-op:hover,.tel-af:hover{background:var(--blu);color:#fff}
.tel-op:active,.tel-af:active{background:var(--blu-diep)}

/* de toevoegknop is de laatste rij van de tabel zelf */
.regel-plus{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:14px 16px;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:500;font-size:.9rem;color:var(--blu);
  text-align:left;transition:background .25s var(--ease);
}
.regel-plus svg{width:19px;height:19px;flex:none}
.regel-plus:hover{background:rgba(30,48,56,.05)}
.regels-tip{margin:14px 0 0}
.wis{
  background:none;border:1px solid var(--linea);border-radius:var(--pil);color:var(--ink-soft);cursor:pointer;
  font-size:1rem;line-height:1;padding:8px 0;width:100%;transition:border-color .25s var(--ease),color .25s var(--ease);
}
.wis:hover{border-color:var(--blu);color:var(--blu)}
.formulier-voet{
  padding:28px 32px 34px;border-top:1px solid var(--linea);background:var(--carta);
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.formulier-voet .noot{font-family:var(--body);font-size:.82rem;color:var(--ink-soft);flex:1 1 240px;line-height:1.6}
.melding{margin:22px 0 0;padding:15px 18px;font-size:.92rem;display:none;border:1px solid}
.melding.fout{display:block;background:rgba(156,58,40,.07);border-color:var(--rosso);color:#7E2C1D}
.melding.goed{display:block;background:rgba(30,48,56,.09);border-color:var(--verde);color:#1B3037}

/* ---------- vragen ---------- */
/* ---------- veelgestelde vragen ---------- */
.vragenlijst{border-top:1px solid var(--inchiostro);margin-top:clamp(28px,3.4vw,44px)}
.vraag{border-bottom:1px solid var(--linea)}
.vraag summary{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:24px 2px;cursor:pointer;list-style:none;
  font-family:var(--body);font-weight:500;font-size:clamp(1rem,1.25vw,1.12rem);
  color:var(--inchiostro);transition:color .3s var(--ease);
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--blu)}
.vraag summary i{
  flex:none;width:30px;height:30px;border-radius:var(--pil);box-sizing:border-box;
  border:1px solid var(--linea);position:relative;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease);
}
.vraag summary i::before,.vraag summary i::after{
  content:"";position:absolute;background:var(--inchiostro);
  transition:opacity .3s var(--ease),background .3s var(--ease);
}
/* vaste pixelposities, anders staat het plusteken bij de ene vraag net anders dan bij de andere */
.vraag summary i::before{width:12px;height:2px;left:8px;top:13px}
.vraag summary i::after{width:2px;height:12px;left:13px;top:8px}
.vraag summary:hover i{border-color:var(--blu)}
.vraag[open] summary{color:var(--inchiostro)}
.vraag[open] summary i{background:var(--blu);border-color:var(--blu);transform:rotate(180deg)}
.vraag[open] summary i::before{background:#fff}
.vraag[open] summary i::after{opacity:0}
.antwoord{animation:vouwopen .45s var(--ease)}
.antwoord p{
  margin:0 0 26px;padding-right:56px;color:var(--ink-soft);
  font-size:1rem;line-height:1.62;max-width:68ch;
}@keyframes vouwopen{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
.oproep .lede{color:var(--ink-soft);margin:26px auto 34px;max-width:44ch}

/* ---------- voettekst ---------- */
footer{background:var(--balk);color:var(--balk-zacht);padding:clamp(24px,2.6vw,32px) 0 16px;font-size:.92rem}
footer a{color:var(--balk-tekst);text-decoration:none;border-bottom:1px solid var(--balk-lijn);transition:border-color .3s var(--ease)}
footer a:hover{border-color:var(--balk-tekst)}
/* Het merk staat nu boven de kolommen, gecentreerd, met een scheidingslijn
   eronder. Daardoor zijn de drie kolommen gelijk van breedte in plaats van
   dat de eerste anderhalf keer zo breed is als de rest. */
.voet-kop{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-bottom:clamp(16px,1.8vw,22px);
}
.voet-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px);
  /* smaller en gecentreerd, en de kolommen zelf ook gecentreerd: anders staat
     het merk in het midden en het blok eronder over de volle breedte, en dan
     klopt de as van de voettekst niet */
  max-width:860px;margin-inline:auto;text-align:center;
}
footer h2{
  font-family:var(--body);font-size:.92rem;letter-spacing:.005em;
  /* wit, zie --accent-op-balk */
  color:var(--accent-op-balk);font-weight:600;margin-bottom:8px;
}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:3px;line-height:1.45}
.voet-merk{
  --merk-maat:1.35rem;
  display:inline-flex;flex-direction:column;align-items:center;text-align:center;
  line-height:1.1;margin-bottom:0;
}
.voet-merk b{font-family:var(--display);font-weight:500;color:var(--balk-tekst);font-size:var(--merk-maat)}
.voet-merk span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--balk-zacht);margin-top:6px;margin-right:-.24em;
}
.voet-onder{
  margin-top:clamp(16px,1.8vw,22px);padding-top:12px;border-top:1px solid var(--balk-lijn);
  font-family:var(--body);font-size:.82rem;letter-spacing:.005em;color:var(--balk-zacht);
  display:flex;justify-content:space-between;gap:14px 32px;flex-wrap:wrap;
}

/* ---------- beweging ----------
   Tijden bewust kort gehouden. Een reveal die langer dan een halve seconde
   duurt, leest niet als stijl maar als een pagina die niet klaar is. */
.js .ld,.js .rv{
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i,0)*55ms);
}
.ld.in,.rv.in{opacity:1;transform:none}
/* Wat al in beeld staat bij het laden, of wat het vangnet toont, verschijnt
   meteen. Zo meet een toegankelijkheidsscan nooit tekst halverwege een fade. */
.js .direct{transition:none!important}
.js .rv-img{
  clip-path:inset(0 0 101% 0);transform:scale(1.03);
  transition:clip-path .6s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0)*60ms);
}
.rv-img.in{clip-path:inset(0 0 0 0);transform:none}

/* ---------- kleiner scherm ---------- */
@media (max-width:1000px){
  .hero-grid,.duo,.duo.smal-links,.bestelkop-grid{grid-template-columns:1fr;gap:36px}
  /* vier kolommen onder elkaar wordt een lange sliert, dus twee bij twee */
  .voet-grid{grid-template-columns:1fr 1fr;gap:22px 36px}
  /* met drie kolommen op twee plaatsen gaat de laatste over de volle breedte */
  .voet-grid>:last-child{grid-column:1/-1}
  .leverancier{grid-template-columns:1fr;gap:34px}
  .bestelkop-grid .intro-tekst{padding-right:0;border-right:0;display:block}
  .route{margin-inline:0}
  .keten{grid-template-columns:repeat(2,1fr);grid-template-rows:none;row-gap:clamp(54px,8vw,80px)}
  .keten li,.keten li:nth-child(odd),.keten li:nth-child(even){grid-column:auto;grid-row:auto;align-self:auto}
  .keten li:nth-child(odd) .stapnr{order:0}
  .keten li:nth-child(odd)>div{order:0}
  .keten li:nth-child(odd){gap:14px}
  .keten li>div{max-width:none}
  .zoekkaart-velden{grid-template-columns:1fr 1fr;gap:14px}
  .zoekkaart-velden .veld:first-child{grid-column:1/-1;padding-right:0}
  .zoekkaart-velden .veld:first-child::after{display:none}
  .zoekkaart .btn{grid-column:1/-1}
  .drie{grid-template-columns:1fr;gap:34px}
  .galerij{grid-template-columns:repeat(6,1fr)}
  .g-groot,.g-hoog,.g-half{grid-column:span 6}
  .lijst a{grid-template-columns:1fr auto;gap:8px 20px}
  .lijst p{grid-column:1/-1}
}@media (max-width:680px){
  body{font-size:16px}
  .top .wrap{flex-wrap:wrap;gap:10px;min-height:0;padding-top:12px;padding-bottom:10px}
  .top.klein .wrap{min-height:0}
  .merk{margin-right:auto}
  .top nav{width:100%;margin-left:0;justify-content:space-between;gap:8px;order:3}
  .top nav a{font-size:.62rem;letter-spacing:.09em}
  .velden{grid-template-columns:1fr}
  /* postcode en bus zijn kort genoeg om samen op één regel te staan,
     dat scheelt twee volle rijen op een telefoon */
  .velden.drieko{grid-template-columns:1fr 1fr}
  .velden.drieko .veld:last-child{grid-column:1/-1}
  .zoekkaart-velden{grid-template-columns:1fr}
  .antwoord p{padding-right:0}
  /* ---- de zeven stappen als tijdlijn met een rail links ----
     Een Vespa die een kaarsrechte verticale lijn afrijdt leest niet als
     rijden, dus op een telefoon vervalt het spoor en vult de rail zich
     terwijl je scrolt. */
  .routelijn{display:none}
  .route{padding-top:4px}
  .keten{grid-template-columns:1fr;row-gap:0}
  .keten li,
  .keten li:nth-child(odd),
  .keten li:nth-child(even){
    display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 18px;
    align-items:start;text-align:left;padding-bottom:34px;
  }
  .keten li:last-child{padding-bottom:0}
  .keten li:nth-child(odd) .stapnr,
  .keten li:nth-child(even) .stapnr{order:0}
  .keten li:nth-child(odd)>div,
  .keten li:nth-child(even)>div{order:0}
  .keten li>div{max-width:none;padding-top:11px}
  .keten h3{font-size:1.08rem}

  /* de grijze rail tussen twee bollen */
  .keten li::before{
    content:"";position:absolute;left:23px;top:52px;bottom:-2px;width:2px;
    background:var(--linea);z-index:1;
  }
  /* en de blauwe die eroverheen groeit zodra de stap bereikt is */
  .keten li::after{
    content:"";position:absolute;left:23px;top:52px;bottom:-2px;width:2px;
    background:var(--blu);z-index:2;
    transform:scaleY(0);transform-origin:top;
    transition:transform .75s var(--ease);
  }
  .keten li.aan::after{transform:scaleY(1)}
  .keten li:last-child::before,
  .keten li:last-child::after{display:none}
  .regels-kop{display:none}
  /* een onderdeelregel wordt een blokje: naam, nummer, dan aantal en wissen */
  .regel{grid-template-columns:136px 1fr 46px;gap:12px;padding:18px 16px}
  .regel input{
    border:1px solid var(--linea);padding:12px;border-radius:calc(var(--zacht) * .7);
    font-size:16px;   /* onder 16px zoomt iOS vanzelf in bij het aantikken */
  }
  .regel input.naam,.regel input.ref{grid-column:1/-1}
  .regel input.ref{font-size:16px}
  .regel .telveld{grid-column:1;height:48px}
  .regel .telveld input.aantal{border:0;padding:0 2px 0 12px;font-size:16px}
  .tel-pijlen{width:36px}
  .tel-op svg,.tel-af svg{width:13px;height:8px}
  .wis{grid-column:3;align-self:center;height:48px;width:46px;padding:0;font-size:1.15rem}

  /* de toevoegknop moet met een duim te raken zijn */
  .regel-plus{padding:17px 16px;font-size:.95rem}

  /* de keuzelijst mag het scherm niet vullen als het toetsenbord openstaat */
  .suggesties{max-height:44vh}
  .suggesties li:not(.sug-kop){padding:13px 12px;font-size:1rem}
  .suggesties li.sug-kop{padding:14px 12px 7px}

  /* knoppen over de volle breedte, dat tikt makkelijker */
  .zoekknop{width:100%}
  .formulier-voet .btn{width:100%;text-align:center}

  /* de pauzeknop op de animatie moet met een duim te raken zijn */
  .kaart-knop{width:46px;height:46px}

  .voet-grid{grid-template-columns:1fr;gap:18px}
  /* iets meer tekstbreedte: 28px marge aan elke kant is veel op 360px */
  .wrap{padding:0 20px}

  /* de paginakop mag niet in stukjes van dertien tekens breken */

  /* De galerij staat op 21:9. Dat werkt breed, maar op een telefoon blijft
     daar een reepje van 137px van over waarin de Vespa's wegvallen. Hier
     tonen we de foto's in hun eigen verhouding, dus zonder bijsnijden. */
  .g-vol img,.g-zij img{aspect-ratio:16/9}

  /* de streepjes naast het onderschrift knijpen de tekst dood */
  .zegel-onder::before,.zegel-onder::after{display:none}
  .zegel-onder{gap:0}

  /* ruimer tikvlak op de uitklapper en de vragen */
  .meer summary{min-height:44px;font-size:.92rem}
  .vraag summary{padding:20px 2px;gap:18px}

  .formulier-body,.formulier-kop,.formulier-voet{padding-left:20px;padding-right:20px}
  .galerij{grid-template-columns:1fr}
}@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .ld,.rv{opacity:1;transform:none}
  .rv-img{clip-path:none;transform:none}
  .js .projectgalerij figure.rv{clip-path:none;transition:none}
  .projectgalerij img{transform:none}
}

/* ---------- uitvullen ----------
   Lopende tekst staat uitgevuld tussen beide marges, zoals in een boek.
   Automatisch afbreken (lang="nl") houdt de woordafstand gelijkmatig.
   Wat bewust gecentreerd staat, blijft gecentreerd; korte labels, de
   gegevenslijst in de voorwaarden en het formulier blijven links.
   Op een gsm (smaller dan 520px) staat alles links: in zo'n smalle kolom
   ontstaan anders gaten tussen de woorden, zeker in een browser die niet
   afbreekt. */
@media (min-width:520px){
  main :is(p,li,dd):not(.keten *,.aan,.aan *,.rest-slot,.rest-slot *,.zegel-onder,.zegel-onder *,
    .stap-label,.luik-kop,.formulier-kop,.formulier-kop *,.formulier *,.honing,.gegevens li){
    text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  }
  /* titels en labels in een uitgevuld lijstitem erven dat niet over */
  main li :is(h2,h3,h4,figcaption,summary,label,legend,.stap-label){text-align:start;hyphens:manual}
}