/* Aanvullende opmaak voor de persona-landingspagina's (/bandenmonteur en later
   /automonteur, /gse-monteur). Bouwt voort op style.css: dezelfde variabelen,
   knoppen, kaarten en koppen. Hier staat alleen wat op die pagina's nieuw is:
   de USP-balk, de kaartsectie, de salariscalculator, de fotostrip en de FAQ. */

/* --- Hero ---------------------------------------------------------- */
.p-hero .container{grid-template-columns:1fr;max-width:900px}
.p-hero h1{max-width:16ch}
/* De hero heeft hier geen foto naast zich, dus de diagonale band zou dwars
   door de kop lopen. Huisstijlregel: de band hoort in de rand te blijven. */
.p-hero .band-rechts{right:-180px;width:220px}
/* Belknop in de hero. Niet .header-bel gebruiken: die is onder 920px verborgen
   omdat hij daar in de balk zit, en juist op mobiel moet deze knop er staan. */
.p-belknop{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.p-belknop svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.p-hero .sub{max-width:560px;font-size:18.5px}
.p-hero .knoppen{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.p-hero .knoppen .knop{font-size:16px;padding:15px 26px}
.knop-hoofd{font-size:17px;font-weight:700;padding:16px 30px}
.knoppen-duo{display:flex;gap:10px;flex-wrap:wrap}
/* Secundaire knoppen: half zo zwaar als de oranje hoofdknop, één regel */
.knoppen-duo .knop{font-size:14px;padding:11px 18px;font-weight:600}
.knoppen-duo .knop svg{width:16px;height:16px}
/* Bedragen die uit de feed komen. Alleen in de hero oranje uitgelicht, in de
   lopende tekst van de FAQ blijven ze gewoon meelopen. */
.p-bedrag{white-space:nowrap}
.p-hero .p-bedrag{color:var(--oranje)}
.p-hero-onder{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:22px;color:#bbb;font-size:14px}
.p-hero-onder span{display:inline-flex;align-items:center;gap:7px}
.p-hero-onder svg{width:15px;height:15px;stroke:var(--oranje);fill:none;stroke-width:2.4;flex-shrink:0}

/* WhatsApp-knop: herkenbaar groen, maar in de huisstijlvorm */
.knop.wa-knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#25D366;color:#fff}
.knop.wa-knop:hover{background:#1da851}
.knop.wa-knop svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}

/* --- USP-balk ------------------------------------------------------- */
.usp-balk{background:var(--grijs-licht);border-bottom:1px solid var(--lijn)}
.usp-balk .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;padding-top:30px;padding-bottom:30px}
.usp-punt{display:flex;gap:12px;align-items:flex-start}
.usp-punt svg{width:22px;height:22px;stroke:var(--oranje);fill:none;stroke-width:2.2;flex-shrink:0;margin-top:2px}
.usp-punt p{font-size:14.5px;line-height:1.45;font-weight:500}

/* --- Kaart en plaatsenblok ------------------------------------------ */
.kaart-vlak{border:1px solid var(--lijn);border-radius:14px;overflow:hidden;background:var(--wit);margin-bottom:22px}
#persona-kaart{height:460px;width:100%;background:var(--grijs-licht);z-index:1}
.kaart-mislukt{padding:26px;color:var(--grijs);font-size:15px}

/* Oranje pinnen in plaats van de standaard Leaflet-markers */
.ot-pin-wikkel{background:none;border:0}
.ot-pin{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--oranje);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ot-pin-meer{width:34px;height:34px;color:#fff;font-weight:700;font-size:14px;border-width:3px}
/* Kleur per functietype: 0 = oranje (eerste type), 1 = zwart (tweede type),
   mix = beide types in dezelfde plaats, half om half */
.ot-pin-1{background:var(--zwart)}
.ot-pin-mix{background:conic-gradient(var(--oranje) 0deg 180deg,#1c1c1c 180deg 360deg)}
.ot-pin-wikkel:hover .ot-pin{transform:scale(1.12);transition:transform .12s}

.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.22)}
.leaflet-popup-content{margin:16px 18px;font-family:var(--font);line-height:1.5}
.kaart-popup .pop-kop{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--oranje);margin-bottom:10px}
.kaart-popup .pop-vac + .pop-vac{border-top:1px solid var(--lijn);margin-top:14px;padding-top:14px}
.kaart-popup h4{font-size:15.5px;font-weight:700;line-height:1.3;margin:0 0 3px}
.kaart-popup .pop-meta{font-size:13px;color:var(--grijs);margin:0 0 10px}
.kaart-popup .pop-knoppen{display:grid;gap:7px}
.kaart-popup .knop{font-size:13px;padding:9px 14px;text-align:center;width:100%}

/* Mobiel: eerst tikken, dan pas slepen, anders kun je niet langs de kaart scrollen */
/* Geen donker scherm over de hele kaart: de kaart moet gewoon te zien zijn.
   Een klein pilletje onderin is genoeg om duidelijk te maken dat je eerst tikt. */
.kaart-slot{position:relative}
.kaart-slot::after{content:"Tik op de kaart om te slepen";position:absolute;z-index:500;
  left:50%;bottom:34px;transform:translateX(-50%);white-space:nowrap;
  background:rgba(17,17,17,.82);color:#fff;font-size:12.5px;font-weight:600;
  padding:7px 14px;border-radius:99px;box-shadow:0 3px 12px rgba(0,0,0,.3)}

/* Intro onder een sectiekop, zelfde maat als op de rest van de site */
.sectie-intro{color:#555;max-width:680px;margin:12px 0 24px;font-size:16.5px;line-height:1.65}

.plaats-filter{display:grid;grid-template-columns:2fr 1fr auto;gap:12px;align-items:end;margin-bottom:14px}
.plaats-filter .filterveld.waar{position:relative}
/* De maatvoering van het plaatsveld staat in style.css onder .filterbalk.v3.
   Dit blok gebruikt diezelfde bouwstenen zonder die filterbalk, dus de
   afmetingen horen hier herhaald te worden. Zonder dit rekt het locatie-icoon
   uit tot een schermvullende cirkel. */
.plaats-filter .waar-groep{display:flex;align-items:center;border:1px solid #ccc;
  border-radius:var(--radius);overflow:hidden;background:var(--wit)}
.plaats-filter .waar-groep:focus-within{border-color:var(--oranje)}
.plaats-filter .waar-groep svg{width:20px;height:20px;stroke:var(--oranje);fill:none;
  stroke-width:1.8;margin-left:12px;flex-shrink:0}
.plaats-filter .waar-groep input{border:0;flex:1;min-width:0;font:inherit;font-size:15px;padding:13px 10px}
.plaats-filter .waar-groep input:focus-visible{outline:none}
.plaats-filter select{width:100%;font:inherit;font-size:15px;padding:13px 12px;
  border:1px solid #ccc;border-radius:var(--radius);background:var(--wit);cursor:pointer}
.knop.wis-knop{background:none;border:1px solid var(--lijn);color:var(--grijs);font-size:14px;padding:13px 16px}
.knop.wis-knop:hover{background:none;border-color:var(--zwart);color:var(--zwart)}
/* .knop zet display:inline-block en wint het daarmee van het hidden-attribuut
   uit de browserstijl. Zonder deze regel blijft "Wis plaats" altijd staan. */
.knop[hidden]{display:none}
#persona-status{font-size:14px;color:var(--grijs);margin-bottom:20px}

/* Compacte plaatslijst onder de kaart. Klikken opent het formulier; het linkje
   naar de volledige vacature is bewust klein en secundair, maar staat er altijd
   (ook zonder JavaScript) voor de interne linkstructuur. */
.plaatsenlijst{border:1px solid var(--lijn);border-radius:12px;overflow:hidden;margin-top:26px}
.plaatsrij{display:grid;grid-template-columns:150px 1fr auto auto;gap:6px 18px;align-items:center;
  padding:13px 18px;border-bottom:1px solid var(--lijn);cursor:pointer;transition:background .12s}
.plaatsrij-actie{font-size:13.5px;font-weight:700;color:var(--oranje);white-space:nowrap}
.plaatsrij-actie::after{content:" \2192"}
.plaatsrij:last-child{border-bottom:0}
.plaatsrij:hover{background:var(--grijs-licht)}
.plaatsrij-naam{font-weight:700;font-size:15px}
.plaatsrij:hover .plaatsrij-naam{color:var(--oranje-donker)}
.plaatsrij-meta{color:var(--grijs);font-size:13.5px}
.plaatsrij-link{font-size:12.5px;color:var(--grijs);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.plaatsrij-link:hover{color:var(--oranje)}
.plaatsrij-afstand{font-weight:600;font-size:12.5px;color:var(--oranje);white-space:nowrap}
.plaatsenlijst .leeg{padding:34px 20px}

/* Uitklapknop onder de ingekorte lijst (mobiel) */
.toon-alles{display:block;width:100%;font:inherit;font-size:14.5px;font-weight:700;
  color:var(--oranje-donker);background:var(--grijs-licht);border:0;padding:15px;
  cursor:pointer;text-align:center}
.toon-alles::after{content:" \2193"}
.toon-alles:hover{background:var(--creme)}

/* Locatieknop naast het typefilter */
.knop.geoloc-knop{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;
  background:var(--zwart);font-size:14.5px;padding:13px;margin-bottom:12px}
.knop.geoloc-knop:hover{background:#000}
.knop.geoloc-knop svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.knop.geoloc-knop[disabled]{opacity:.6;cursor:default}

/* Ingeklapte optionele velden in het formulier */
.meer-opties{margin-top:14px}
.meer-opties summary{font-size:13.5px;font-weight:600;color:var(--grijs);cursor:pointer;
  list-style:none;text-decoration:underline;text-underline-offset:3px}
.meer-opties summary::-webkit-details-marker{display:none}
.meer-opties summary::before{content:"+ "}
.meer-opties[open] summary::before{content:"\2212 "}
.meer-opties[open] summary{color:var(--zwart)}

/* Legenda bij de kaart: welk type welke kleur pin heeft */
.kaart-legenda{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px;
  font-size:13.5px;font-weight:600;color:#444}
.kaart-legenda[hidden]{display:none}
.stip{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--oranje);
  margin-right:7px;vertical-align:-1px;border:2px solid #fff;box-shadow:0 0 0 1px #ddd}
.stip-1{background:var(--zwart)}

/* Kaart naast het postcodefilter */
.kaart-en-filter{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}
.kaart-en-filter .kaart-vlak{margin-bottom:0}
.naast-kaart{border:1px solid var(--lijn);border-top:4px solid var(--oranje);
  border-radius:0 0 12px 12px;padding:20px;background:var(--wit)}
.naast-kaart-kop{font-size:15px;font-weight:700;margin-bottom:14px}
/* In de smalle kolom naast de kaart passen de drie velden niet naast elkaar,
   daar staan ze onder elkaar. */
.naast-kaart .plaats-filter{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
.naast-kaart #persona-status{margin-bottom:0}

/* Sollicitatieformulier (één component, twee plekken) */
.formulier-mount[hidden]{display:none}
.persona-formulier{border:1px solid var(--lijn);border-top:4px solid var(--oranje);
  border-radius:0 0 14px 14px;padding:26px;background:var(--wit);
  box-shadow:0 12px 32px rgba(0,0,0,.07)}
#formulier-kaart .persona-formulier{margin-top:26px}
.formulier-kop{font-size:19px;font-weight:700;line-height:1.3}
.formulier-sub{font-size:14px;color:var(--grijs);margin:6px 0 4px}
.persona-formulier label{display:block;font-size:13.5px;font-weight:600;margin:14px 0 0}
.persona-formulier input,.persona-formulier select{width:100%;font:inherit;font-size:15px;
  padding:12px;border:1px solid #ccc;border-radius:var(--radius);margin-top:5px;background:var(--wit)}
.persona-formulier select{cursor:pointer}
.persona-formulier input[type=file]{border:1px dashed #bbb;background:var(--grijs-licht);font-size:14px;padding:10px}
.persona-formulier .knop{width:100%;margin-top:18px}
.persona-formulier .wa-knop{margin-top:10px}
.persona-formulier .privacy-noot{margin-top:12px}

.formulier-gelukt{text-align:center;padding:14px 6px}
.formulier-gelukt svg{width:52px;height:52px;stroke:var(--oranje);fill:none;stroke-width:1.8;margin:0 auto 12px}
.formulier-gelukt h3{font-size:22px;margin-bottom:8px}
.formulier-gelukt p{color:#444;font-size:16px;line-height:1.6;max-width:420px;margin:0 auto}
.formulier-gelukt-noot{font-size:14px;color:var(--grijs);margin-top:12px}
.formulier-gelukt-noot a{color:var(--oranje);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Onderschuifpaneel (mobiel) voor de vacatures van één plaats op de kaart.
   Scrollbaar, dus ook met drie vacatures blijft elke knop bereikbaar. */
.paneel-scrim{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:94}
.paneel-scrim[hidden]{display:none}
.plaats-paneel{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--wit);
  border-radius:18px 18px 0 0;box-shadow:0 -12px 44px rgba(0,0,0,.35);
  max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px 20px calc(20px + env(safe-area-inset-bottom))}
.plaats-paneel[hidden]{display:none}
.paneel-sluit{position:sticky;top:0;float:right;width:36px;height:36px;border-radius:50%;
  border:0;background:var(--grijs-licht);color:var(--zwart);font-size:22px;line-height:1;
  cursor:pointer;margin-left:12px}
.paneel-sluit:hover{background:var(--creme)}
.plaats-paneel .kaart-popup .pop-kop{margin-top:4px}
.plaats-paneel .knop{font-size:14.5px;padding:13px 14px}

/* Knoppen in de kaartpopup */
.kaart-popup .pop-link{display:block;font-size:12.5px;color:var(--grijs);text-decoration:underline;
  text-underline-offset:3px;text-align:center;margin-top:2px}
.kaart-popup .pop-link:hover{color:var(--oranje)}

/* Sticky conversiebalk, alleen op mobiel door JavaScript geplaatst.
   Onderin het scherm, waar de duim vanzelf zit. */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;
  grid-template-columns:1fr 58px;gap:10px;padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--lijn);box-shadow:0 -6px 24px rgba(0,0,0,.08)}
.sticky-cta .knop{text-align:center;font-size:15.5px;font-weight:700;padding:14px 10px}
.sticky-cta .wa-knop{padding:0;display:flex;align-items:center;justify-content:center}
.sticky-cta .wa-knop svg{width:24px;height:24px}
.sticky-cta[hidden]{display:none}
/* De zwevende WhatsApp-bal uit main.js zou dubbelop zijn boven deze balk */
body:has(.sticky-cta:not([hidden])) .wa-zweef{display:none}

/* --- Salariscalculator ---------------------------------------------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;
  border:1px solid var(--lijn);border-top:4px solid var(--oranje);border-radius:0 0 14px 14px;
  padding:30px;background:var(--wit);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.calc-invoer label{display:block;font-size:12px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:#888;margin-bottom:7px}
.calc-veld{display:flex;align-items:center;border:1px solid #ccc;border-radius:var(--radius);overflow:hidden}
.calc-veld:focus-within{border-color:var(--oranje)}
.calc-veld .teken{padding:0 4px 0 14px;font-size:17px;font-weight:700;color:var(--grijs)}
.calc-veld input{border:0;flex:1;min-width:0;font:inherit;font-size:19px;font-weight:700;padding:14px 12px 14px 4px}
.calc-veld input:focus-visible{outline:none}
.calc-vink{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:14px;cursor:pointer}
.calc-vink input{width:17px;height:17px;accent-color:var(--oranje);cursor:pointer}
.calc-uitkomst{background:var(--zwart);color:var(--wit);border-radius:12px;padding:24px 26px}
.calc-groot{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--oranje)}
.calc-bedrag{font-size:clamp(30px,4.4vw,42px);font-weight:700;line-height:1.1;margin:4px 0 14px}
/* Lege staat ("Vul je bruto loon in") mag niet zo groot als een echt bedrag */
.calc-bedrag.leeg{font-size:18px;font-weight:600;color:#bbb}
.calc-regels{display:grid;gap:7px;font-size:14px;color:#bbb;border-top:1px solid #333;padding-top:14px}
.calc-regels div{display:flex;justify-content:space-between;gap:16px}
.calc-regels strong{color:var(--wit);font-weight:600}
.calc-noot{font-size:12.5px;color:#999;margin-top:14px;line-height:1.5}

/* --- Instapblok ------------------------------------------------------ */
.instap{background:var(--creme)}
.instap .container{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.instap p{color:#333;font-size:16.5px;line-height:1.7;margin:14px 0 22px;max-width:560px}
.instap-beeld img{border-radius:14px;width:100%;height:340px;object-fit:cover}

/* --- Stappen --------------------------------------------------------- */
.p-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;counter-reset:stap}
.p-stap{border-top:3px solid var(--oranje);padding-top:16px}
.p-stap .nr{width:34px;height:34px;border-radius:50%;background:var(--zwart);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:10px}
.p-stap h3{font-size:17.5px;margin-bottom:6px}
.p-stap p{color:var(--grijs);font-size:14.5px;line-height:1.55}

/* --- Fotostrip ------------------------------------------------------- */
/* Drie op een rij: dan vullen de vier foto's plus het videovak precies twee
   rijen, in plaats van dat het videovak alleen op een derde rij blijft hangen. */
.media-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.media-strip figure{margin:0;border-radius:12px;overflow:hidden;position:relative;background:var(--grijs-licht)}
.media-strip img{width:100%;height:250px;object-fit:cover;transition:transform .3s}
.media-strip figure:hover img{transform:scale(1.04)}
.media-strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;
  background:linear-gradient(to top,rgba(10,10,10,.85),rgba(10,10,10,0));
  color:#fff;font-size:13.5px;font-weight:600}
/* Plek voor de video die later komt: zelfde vorm als de foto's, zodat de
   strook straks niet verspringt. */
.media-video{grid-column:span 2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;height:250px;border:2px dashed #ccc;border-radius:12px;
  color:#999;font-size:13.5px;text-align:center;padding:20px}
.media-video svg{width:38px;height:38px;stroke:var(--oranje);fill:none;stroke-width:1.6}

/* --- FAQ -------------------------------------------------------------- */
.faq-lijst{max-width:820px}
.faq-lijst details.faq h3{font-size:17px;font-weight:600;display:inline}
.faq-lijst details.faq summary h3{display:inline}

/* --- Afsluitende CTA met formulier ------------------------------------ */
/* De rechterkolom is hier het gedeelde formuliercomponent, zie
   .persona-formulier hierboven. */
.slot-form{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.slot-tekst .knoppen{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px}
.slot-tekst .knoppen .knop{font-size:15.5px;padding:14px 24px}
.slot-tekst .knop.contour{border-color:var(--zwart)}

/* --- Mobiel ------------------------------------------------------------ */
@media (max-width:920px){
  /* Op een smal scherm past de band er niet naast zonder over de tekst te
     lopen. Dan liever helemaal weg dan half over de kop heen. */
  .p-hero .band-rechts{display:none}
  .p-hero .knoppen{display:grid;grid-template-columns:1fr;gap:10px}
  .p-hero .knoppen .knop{width:100%;text-align:center}
  /* WhatsApp en bellen naast elkaar, klein en op één regel: het zijn
     bijknoppen, de oranje knop erboven is de hoofdactie. */
  .knoppen-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .knoppen-duo .knop{padding:12px 6px;font-size:13.5px}
  .p-hero h1{font-size:clamp(30px,7.4vw,42px)}
  .p-hero .sub{font-size:16.5px}
  /* De kaart mag op een telefoon nooit meer dan een half scherm pakken, en
     staat boven de lijst. */
  .kaart-en-filter{grid-template-columns:1fr;gap:16px}
  #persona-kaart{height:min(50vh,340px)}
  .plaats-filter{grid-template-columns:1fr;gap:10px}
  /* Strakkere secties: op 375 breed is 54px lucht per sectie boven en onder
     samen bijna een half scherm per overgang. persona.css laadt alleen op
     deze pagina's, dus dit raakt de rest van de site niet. */
  section{padding:40px 0}

  /* USP's twee-aan-twee in plaats van vier onder elkaar */
  .usp-balk .container{grid-template-columns:1fr 1fr;gap:12px;padding-top:20px;padding-bottom:20px}
  .usp-punt{gap:8px}
  .usp-punt svg{width:18px;height:18px}
  .usp-punt p{font-size:12.5px;line-height:1.4}

  /* Plaatsrij als compact blokje: plaats plus afstand en de actie op één
     regel, functie en salaris eronder, het kleine linkje inline erachter */
  .plaatsrij{grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px}
  .plaatsrij-naam{grid-column:1;font-size:14.5px}
  .plaatsrij-actie{grid-column:2;grid-row:1;align-self:center;font-size:13px}
  .plaatsrij-meta{grid-column:1 / -1;font-size:12.5px}
  .plaatsrij-link{grid-column:1 / -1;justify-self:start;margin-top:2px;font-size:11.5px}
  .persona-formulier{padding:20px}
  .calc{grid-template-columns:1fr;gap:22px;padding:22px}
  .instap .container{grid-template-columns:1fr;gap:22px}
  .instap-beeld{order:-1}
  .instap-beeld img{height:180px}
  .slot-form{grid-template-columns:1fr;gap:24px}
  /* De drie knoppen boven het slotformulier zijn op mobiel dubbelop: het
     formulier staat er direct onder, WhatsApp zit ín dat formulier én in de
     sticky balk. Drie extra knoppen is alleen maar meer scrollen. */
  .slot-tekst .knoppen{display:none}

  /* Fotostrip als swipe-strook: één rij die je opzij veegt, met de volgende
     foto half in beeld zodat je vanzelf ziet dat er meer is. Vijf blokken
     gestapeld was ruim 1000 pixels; dit is er 210. */
  .media-strip{display:flex;overflow-x:auto;scroll-snap-type:x proximity;
    gap:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -24px;padding:0 24px}
  .media-strip::-webkit-scrollbar{display:none}
  .media-strip figure,.media-strip .media-video{flex:0 0 76%;scroll-snap-align:start}
  .media-strip img,.media-video{height:190px}
  .media-video{grid-column:auto}

  /* Stappen: nummer naast de tekst in plaats van erboven */
  .p-stappen{gap:18px}
  .p-stap{display:grid;grid-template-columns:34px 1fr;gap:4px 14px;border-top:0;
    border-left:3px solid var(--oranje);padding:0 0 0 14px}
  .p-stap .nr{grid-row:1 / 3;margin-bottom:0}
  .p-stap h3{font-size:16px;margin-bottom:2px}
  .p-stap p{font-size:13.5px}

  /* Onderaan ruimte voor de sticky balk, anders valt de laatste regel erachter */
  body:has(.sticky-cta) footer.site{padding-bottom:96px}
}