#vacatures{ scroll-margin-top:85px; }   /* de vaste menubalk mag de eerste vacature niet bedekken */

/* Wildbos — mobiel, voor ÁLLE pagina's van schadeprofessionals.nl (ook de 19 onverbouwde
   CMS-pagina's die sp-conversie.css niet laden). Gemeten op 7-9-2026, 58 pagina's bij 390px:
   geen enkele scrolde horizontaal, maar zes koppen knipten af op een lang Nederlands woord
   (Personenschadebehandelaar, capaciteitsvraagstukken), de hero-kop op de home brak op een <br>
   dat voor desktop bedoeld is, en de links in de voet waren lager dan 32px (tikdoelen).
   Alleen regels onder 768px; op desktop verandert hier niets. */
@media (max-width:480px){
  /* !important: website.css zet hyphens:manual op .heading-2 met meer gewicht dan deze regel.
     Alleen tussenkoppen en de vacaturekop (één lang woord) mogen afbreken met streepje; Safari
     brak anders "le-ven" af in de hero op de home (Joost, iPhone, 7-9-2026). Een H1 breekt alleen
     zonder streepje, en alleen als het woord breder is dan het scherm. */
  h2, h3, .sp-vacp-h1, h2 strong, h3 strong{ overflow-wrap:anywhere !important; hyphens:auto !important; }
  h1, .sp-slide-h, h1 strong{ overflow-wrap:anywhere !important; hyphens:manual !important; }
  .sp-slide-h br{ display:none; }
}

/* ---- Hero op de telefoon: alles op het eerste scherm ------------------------
   Joost 7-9-2026: "op alle pagina's moet de hero precies goed staan". De knoppen vielen
   onder de vouw op een iPhone 15 Pro Max. Oorzaak: de hero reserveert op mobiel 16 tot
   18rem foto boven de tekst. Op een telefoon laat Safari met balken ongeveer 745px zien
   (15 Pro Max) en 660px (13 mini); de header neemt 90px. Dus: de foto wordt achtergrond,
   de tekst begint hoog, en kicker + kop + intro + feiten + knoppen passen in ~550px.
   Gemeten op alle hero's van de site bij 430×745 en 390×660. */
@media (max-width:767px){
  #lib-block-13019-17221671.sp-hero{ padding:4.5rem 0 2.25rem !important; }
  #lib-block-13019-17221671 .sp-hero-scrim{
    background:linear-gradient(180deg, rgba(8,20,38,.62) 0%, rgba(8,20,38,.90) 30%, rgba(8,20,38,.97) 100%) !important; }
  #lib-block-13019-17221671 .sp-slide-sub{ margin-top:.7rem; }
  #lib-block-13019-17221671 .sp-cta-row{ margin-top:1.4rem !important; }
  /* Op de telefoon draait de hero niet: de eerste boodschap staat vast. De drie slides staan op
     desktop over elkaar in één rastercel, dus de langste bepaalt de hoogte; op /vacatures/ zakten
     de knoppen daardoor 180px onder de eerste slide. Het script mag blijven wisselen; de eerste
     slide blijft hoe dan ook zichtbaar en de andere twee bestaan hier niet. */
  #lib-block-13019-17221671 .sp-slide:not(:first-child){ display:none !important; }
  #lib-block-13019-17221671 .sp-slide:first-child{ opacity:1 !important; visibility:visible !important; transform:none !important; transition:none !important; }
  #lib-block-13019-17221671 .sp-tabs{ display:none !important; }
  #lib-block-13019-17221671 .sp-slide-h{ font-size:clamp(26px, 7vw, 34px) !important; }
  .sp-vacp-h1{ font-size:clamp(26px, 7vw, 34px) !important; }
  .sp-vacp-hero-in{ padding:4rem var(--sp-goot) 2.25rem !important; }
  .sp-vacp-hero-scrim{
    background:linear-gradient(180deg, rgba(8,20,38,.62) 0%, rgba(8,20,38,.90) 30%, rgba(8,20,38,.97) 100%) !important; }
  .sp-vacp-sub{ margin-top:.6rem !important; }
  .sp-vacp-feiten{ margin-top:1.1rem !important; gap:.4rem !important; }
  .sp-vacp-cta{ margin-top:1.4rem !important; }
  /* "Alle vacatures" landt op de lijst, niet op de hero; de vaste menubalk mag de eerste kaart niet bedekken. */
  #vacatures{ scroll-margin-top:90px; }
}
@media (max-width:767px){
  footer a{ display:inline-block; padding:.3rem 0; }
  .sp-rail-alle{ display:inline-block; padding:.5rem 0; }   /* "Alle vacatures →" was 20px hoog */
}