/* Dezelfde drie belroutes op alle subpagina's, binnen de bestaande slotsectie. */
.belblok { scroll-margin-top: 88px; }
.belblok p { max-width: none; margin: 0; color: var(--mist); }
.belblok .belblok-intro { max-width: 60ch; margin: 0 auto 28px; }
.belblok-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px; margin-top: 28px; text-align: left;
}
.belblok-route { min-width: 0; }
.belblok-route h3 { color: #fff; font-size: 21px; margin: 0 0 14px; }
.belblok-route p { margin-top: 12px; font-size: 14px; }
.belblok-route > .btn, .belblok .widget-form .btn {
  width: 100%; max-width: 100%; justify-content: center;
  padding: 14px 18px; font-size: 16px; white-space: normal; text-align: center;
}
.belblok .btn, .belblok .widget-form input, .belblok .bevestigd,
.belblok .pn, .belblok .pn button, .belblok .pn input,
.belblok .pn-transcript li, .belblok .pn-fout, .belblok .pn-vervolg {
  border-radius: 0 var(--radius-sm) 0 0;
}
.belblok .widget-form { display: flex; flex-direction: column; gap: 10px; }
.belblok .widget-form input[type="tel"] {
  width: 100%; min-width: 0; min-height: 48px;
  background: #fff; color: var(--ink); border-color: var(--mist);
}
.belblok input::placeholder { color: var(--baseline); opacity: 1; }
.belblok :is(button, a, input, summary):focus-visible {
  outline: 2px solid var(--ping); outline-offset: 3px;
}
.belblok .bevestigd, .belblok .bevestigd b, .belblok .bevestigd p { color: var(--ink); }
.belblok .form-fout { color: var(--hotline-soft); margin-top: 10px; }
.belblok .widget-note { margin-top: 22px; font-size: 13px; }
.belblok .widget-note-meer { margin: 12px 0 0; text-align: left; }
.belblok .widget-note-meer > summary,
.belblok .widget-note-meer > div { color: var(--mist); }
.belblok .widget-note-meer > div { border-left-color: var(--sage); }
.belblok .widget-note a, .belblok .widget-note-meer a,
.belblok-route p a { color: #fff; text-underline-offset: 3px; }

/* Het bestaande live-paneel past ook in een smalle kolom. */
.belblok .praatnu-paneel { margin-top: 12px; }
.belblok .pn { text-align: left; }
.belblok .pn p { margin: 0 0 12px; }
.belblok .pn-keuze-knoppen { grid-template-columns: minmax(0, 1fr); }
.belblok .pn-keuze-knop small { opacity: 1; }
.belblok .pn-transcript li { overflow-wrap: anywhere; }
.belblok .pn-transcript li b { color: var(--mist); }
.belblok .pn-transcript li.gebruiker b { color: var(--ping); }
.belblok .pn-chat { flex-direction: column; }
.belblok .pn-chat input { font-size: 16px; }
.belblok .pn-acties { flex-direction: column; align-items: stretch; }
.belblok .pn-acties button { justify-content: center; margin-left: 0; }
.belblok .pn-stop { background: var(--hotline-tekst); border-color: var(--hotline-tekst); }
.belblok .pn-stop:hover { background: #A6321E; border-color: #A6321E; }
.belblok .pn-vervolg-knop { white-space: normal; justify-content: center; text-align: center; }

@media (max-width: 720px) {
  .belblok-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .belblok-route + .belblok-route { border-top: 1px solid var(--sage); padding-top: 24px; }
}