/* Kop en mobiele balk op de binnenpagina's (review Amir, 10-11-2026, baan B).
   Laadt na het paginabundel (binnen-bundel-*.css) en staat er los van: het bundel is per pagina
   gesnoeid en kent de nieuwe klassen niet. */

/* Telefoonnummer in de kop vanaf 768 px altijd zichtbaar. Het stond er pas vanaf 1200 px, terwijl de
   mobiele balk met Bellen bij 768 px stopt: daartussen was er geen belmogelijkheid in beeld. Nummer, taallink
   en Inschrijven passen daar alleen als de Google-score wijkt; die blijft vanaf 1200 px in de kop staan
   en staat op elke breedte bij de reviews. */
@media (min-width:768px) and (max-width:1199.98px){
  .topbar__tel{display:inline-flex}
  html .topbar .topbar__kv{display:none}   /* zwaarder dan de terugvalregel :is(html.sb-momentopname) .topbar__kv */
}
/* Tussen 1024 en 1200 px staat het hele menu naast nummer en knop: iets minder lucht tussen de menupunten. */
@media (min-width:1024px) and (max-width:1199.98px){
  .nav__links{gap:.9rem}
}

/* Met de taallink erbij past de score met datumregel (de terugvalstand zonder live score) pas vanaf 1280 px
   naast menu, nummer en knop; alleen in die stand wijkt hij tussen 1200 en 1280 px. */
@media (min-width:1200px) and (max-width:1279.98px){
  :is(html:not(.js),html.sb-momentopname) .topbar .topbar__kv{display:none}
}

/* Mobiele balk: Bellen, WhatsApp, Inschrijven. De WhatsApp-knop krijgt zijn groene stijl en pictogram van de
   bestaande regel voor a.btn[href*="wa.me"] in het bundel. De kolommen volgen de woordlengte (de knoppen staan
   in hoofdletters); onder 440 px zonder pictogram en iets kleiner, zodat ook 320 px past. */
.mcta{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.25fr);gap:.4rem}
.mcta .btn,.page--inner .mcta .btn{padding-inline:.3rem;gap:.35rem}
@media (max-width:439.98px){
  .mcta .btn,.page--inner .mcta .btn{font-size:.8125rem}
  .mcta .btn svg{display:none}
  .page--inner.page--inner.page--inner .mcta a.btn[href*="wa.me"]::before{display:none}   /* zelfde gewicht als de bundelregel die het pictogram zet */
}
@media (max-width:349.98px){
  .mcta .btn,.page--inner .mcta .btn{font-size:.75rem}
}
/* De zwevende WhatsApp-knop is op de telefoon dubbel nu WhatsApp in de balk staat. */
@media (max-width:767.98px){
  .wa-zweef{display:none}
}

/* ===== Baan A (10-11-2026), geldt op elke pagina ===== */
/* WhatsApp in de mobiele balk op de homepage (geen .page--inner, dus de bundelregel geldt daar niet): zelfde groen. */
body:not(.page--inner) .mcta a.btn[href*="wa.me"]{background:#25D366;border-color:#25D366;color:#063b1f;box-shadow:none}
/* Cookiebalk vanaf tablet: een lage balk over de volle breedte onderaan in plaats van een kaart over het korte formulier in de hero.
   Vanaf 900 px staan tekst en knoppen naast elkaar. */
@media (min-width:577px){
  .cookiebanner{left:0;right:0;bottom:0;width:auto;border-radius:0;box-shadow:0 -4px 18px rgba(0,0,0,.18)}
  .cookiebanner__in{max-width:1300px;margin-inline:auto;padding:10px clamp(16px,4vw,40px) 12px}
  .cookiebanner__titel{margin:0 0 2px;font-size:15px;line-height:20px}
  .cookiebanner__tekst{margin:0 0 10px;font-size:13px;line-height:19px}
  .cookiebanner__cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cookiebanner__knoppen{flex-wrap:nowrap}
  .cookiebanner__knoppen .btn,.cookiebanner__knop{flex:0 1 auto;min-height:40px;white-space:nowrap}
}
@media (min-width:900px){
  .cookiebanner__in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;align-items:center}
  .cookiebanner__titel,.cookiebanner__tekst{grid-column:1}
  .cookiebanner__tekst{margin:0}
  .cookiebanner__cats{grid-column:1 / -1;margin:10px 0 0}
  .cookiebanner__knoppen{grid-column:2;grid-row:1 / span 2}
}