@font-face {
  font-family: "Adelina-Regular"; /* zelfgekozen naam */
  src: url("../fonts/Adelina-Regular.woff2") format("woff2"),
    url("../fonts/Adelina-Regular.woff") format("woff"),
    url("../fonts/Adelina-Regular.ttf") format("truetype"),
    url("../fonts/Adelina-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* zorgt dat tekst zichtbaar blijft tijdens laden */
}
/* =========================
   2) Design tokens
========================= */
:root {
  --brand-light: #ffeab4;
  --brand-pink-light: #ffe6ff;
  --brand-pink: #ff99ff;
  --brand-green: #99cccc;
  --brand-yellow: #ffca43;
  --brand-orange: #020202;
  --brand: #ffca43; /* knopkleur */
  --brand-dark: #e6b837; /* hoverkleur */

  --primary: var(--brand-yellow);
  --text: #7a7a7a;
  --bg: #fff;
  --surface: #f8fafc;
  --border: #e6e9ee;

  /* FONT VARS GECORRIGEERD */
  --font-sans: sans-serif;
  --font-deco: "Adelina-Regular", cursive;

  --radius: 20px;
  --container: 1100px;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --header-h: 90px; /* hoogte header */
}

/* =========================
   3) Base / reset / helpers
========================= */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
/* ===== UNIFORME AFSTAND NA HEADER (niet op index) ===== */

/* Alleen NIET-homepagina’s krijgen een compacte afstand */
body:not(.home-page) main,
body:not(.home-page) section:first-of-type,
body:not(.home-page) .page-content:first-of-type,
body:not(.home-page) .container:first-of-type {
  padding-top: calc(var(--header-h) + 0.5rem) !important;
  margin-top: 0 !important;
}

/* Scrollfix voor anchors (NIET-homepagina’s) */
body:not(.home-page) html {
  scroll-padding-top: calc(var(--header-h) + 0.5rem);
}
body:not(.home-page) :target {
  scroll-margin-top: calc(var(--header-h) + 0.5rem);
}

html {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  scroll-padding-top: calc(var(--header-h) + 0.5rem);
}
:target {
  scroll-margin-top: calc(var(--header-h) +0.5rem);
}
body {
  margin: 0;
  font: 16px/1.45 var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--header-h); /* ruimte voor fixed header */
}
.container {
  width: calc(100% - 2rem);
  max-width: var(--container);
  margin-inline: auto;
  /* padding-block: var(--space-6);*/
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   4) Header
========================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0.4rem 1rem; /* <— typo gefixt */
}
.logo-link {
  /*flex-shrink: 0;
  margin: 0;
  padding-left: 1rem;
  display: flex;
  align-items: center; */
  font-family: var(--font-deco);
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: normal;
  margin-top: 5rem; /* extra ruimte boven de titel */
  color: var(--text);
  line-height: 1.2;
  text-align: center;
  margin-bottom: 0;
}
.logo-link img.logo {
  max-height: 200px; /* of 150px, kies wat je mooi vindt */
  width: auto;
  display: block;
}

.header-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 1.5rem;
  margin-left: auto;
}
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2rem;
}

.main-nav ul {
  display: flex;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--text);
  font-size: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: 0.3s all;
  font-family: var(--font-deco);
}
/* Hover */
.main-nav a.home-link:hover {
  background: #ff8c42;
  color: #fff;
}
.main-nav a[href*="over"]:hover {
  background: #ffeab4;
  color: #fff;
}
.main-nav a[href*="logopedie"]:hover {
  background: #ffca43;
  color: #fff;
}
.main-nav a[href*="kinesitherapie"]:hover {
  background: #ff99ff;
  color: #fff;
}
.main-nav a[href*="praktisch"]:hover {
  background: #a8e6cf;
  color: #fff;
}
/* Active */
.main-nav a.home-link.active {
  background: #ff8c42;
  color: #fff;
}
.main-nav a[href*="over"].active {
  background: #ffeab4;
  color: #fff;
}
.main-nav a[href*="logopedie"].active {
  background: #ffca43;
  color: #fff;
}
.main-nav a[href*="kinesitherapie"].active {
  background: #ff99ff;
  color: #fff;
}
.main-nav a[href*="praktisch"].active {
  background: #a8e6cf;
  color: #fff;
}

/* Zorg dat ankernavigatie niet onder de header valt */
:target {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* CTA knop */
.btn.btn-primary {
  background: var(--primary);
  color: #7a7a7a;
  padding: 0.9rem 4rem;
  font-size: 1.2rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  display: inline-block;
  text-align: center;
  font-family: sans-serif;
}
.btn.btn-primary:hover {
  background: var(--brand-light);
  color: #fff;
}

/* =========================
   HOME / INDEX OVERRIDES
========================= */

/* 1) Header: navigatie rechts, knop boven de links */
.home-page .header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* alles naar rechts */
  gap: 2rem;
}
.home-page .header-right {
  display: flex;
  flex-direction: column; /* knop boven de links */
  align-items: flex-end;
  gap: 0.5rem;
}
.home-page .main-nav ul {
  display: flex;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-page .main-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--text);
  font-size: 1.9rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  transition: 0.3s all;
  font-family: var(--font-deco);
}

/* Intro-band: logo exact in het midden maar iets smaller */
.home-page .intro-band {
  display: flex;
  align-items: center; /* verticaal centreren */
  justify-content: center; /* horizontaal centreren */
  min-height: 400px; /* laatste versie */
  background: var(--brand-light);
  position: relative;
  padding: 0;
  box-sizing: border-box;
}
.home-page .intro-band .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; /* container vult hele band */
}
.home-page .intro-band .logo-link {
  margin: 0;
  padding: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto; /* niet forceren op 100% */
}
.home-page .intro-band .logo-link .logo {
  display: block;
  max-height: 415px; /* laatste versie */
  width: auto;
  padding-top: 0px;
}

.home-page .intro-quote {
  font-size: 1.8rem;
  color: #ff8c42;
  font-style: italic;
  margin-top: 3.15rem;
  margin-bottom: 3.15rem;
}

/* 3) Intro-tekst: centreren + dichter tegen gele band */
.home-page .intro-text {
  margin-top: 0;
  padding-top: 0.25rem; /* klein beetje ademruimte */
  font-family: var(--font-sans);
}
.home-page .intro-text .container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}
.home-page .intro-text .intro-paragraph {
  max-width: 1500px;
  margin: 0 auto 1.25rem;
  font-size: 1.2rem;
  line-height: 1.7;
  hyphens: auto;
  font-family: var(--font-sans) !important;
}
.home-page .intro-text .btn {
  display: block;
  margin: 0.5rem auto 0;
  width: max-content;
}

/* 4) “Ons aanbod”: knoppen mooi in één lijn onderaan */
.home-page .offers .cards {
  align-items: stretch;
}
.home-page .offers .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.home-page .offers .card img {
  height: 320px;
  object-fit: cover;
}
.home-page .offers .card-text {
  flex: 1 1 auto;
  margin-bottom: 0;
  font-family: var(--font-sans) !important;
}
.home-page .offers .card .btn {
  margin-top: auto;
  align-self: center;
  margin-bottom: 1rem;
}

/* Subtitle stijl */
.intro-subtitle {
  font-family: var(--font-deco);
  font-size: 3.5rem;
  font-weight: normal;
  color: var(--text);
  text-align: center;
  margin: 1.5rem auto 0.5rem auto;
}

/* Voor de zekerheid: gewone paragrafen op home nooit onderlijnd */
.home-page p {
  text-decoration: none !important;
}

/* =========================
   7) Sectietitels
========================= */
.section-title,
.offers-title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 3rem;
  color: var(--text);
  font-family: var(--font-deco);
  text-align: left !important;
}

/* =========================
   8) Kaarten
========================= */
.offers .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  align-items: stretch;
  margin-inline: auto;
}
.card {
  background: none;
  padding: 0;
  border: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.card-title {
  font-family: var(--font-deco);
  font-size: 2rem; /* laatste versie */
  font-weight: 400;
  color: var(--text);
  margin: 0.5rem 0 0.8rem;
  text-align: center;
}
.card-text {
  font-size: 1.2rem;
  line-height: 1.6; /* laatste versie */
  margin: 0 0 1rem;
  color: var(--text);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  font-family: var(--font-sans) !important;
}
.card .btn.btn-primary {
  display: inline-block;
  margin: 0 auto;
  padding: 0.7rem 1.6rem;
  font-size: 1.1rem;
  border-radius: 8px;
}
.card-text p {
  margin-bottom: 1rem;
}

/* Kaart als flex-container */
.offers .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* duwt knop naar onder */
}

/* Tekst flexibel, knop naar onder */
.offers .card-text {
  flex: 1; /* tekst vult de ruimte */
}

.offers .card .btn {
  margin-top: auto; /* duwt knop helemaal naar onder */
  align-self: center; /* gecentreerd */
}

/* =========================
   9) Why-blocks (detailpagina's)
========================= */
.logopedie-page .page-content,
.kinesitherapie-page .page-content {
  margin-top: 3rem;
}

/* Logopedie specifieke tekstgroottes/kleuren */
.logopedie-page p {
  font-size: 1.2rem;
}
.logopedie-page li {
  font-size: 1.2rem;
}
.logopedie-page strong {
  color: #e6b837;
}

.why-block {
  display: flex;
  flex-direction: row; /* altijd dezelfde richting */
  align-items: flex-start;
  gap: 8rem;
  margin-bottom: 4rem;
}
.why-block .why-img img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.why-block .why-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
}
.why-block .why-text h3,
.why-block .why-text p {
  margin-top: 0;
}
.why-block:nth-child(even) {
  flex-direction: row; /* overschrijft de eerdere row-reverse */
}

/* =========================
   10) Aanbod-lijst
========================= */
.aanbod-lijst {
  max-width: 900px;
  margin: 3rem auto 5rem;
  padding: 0 1rem;
}

/* =========================
   11) Instagram
========================= */
.instagram {
  background: #fff0e6; /* laatste versie */
  padding: 3rem 1rem; /* laatste versie */
  margin-top: 2rem;
}

.instagram .container {
  padding-top: 1;
}

/* Grid layout */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  justify-items: center;
}

/* Instagram embeds – gelijke breedte & hoogte */
.insta-grid .instagram-media {
  max-width: 300px !important; /* breedte bepaald door jou */
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;

  /* gelijke hoogte voor alle posts */
  height: 600px !important; /* pas aan wat jij mooi vindt */
  overflow: hidden !important; /* snijdt langere posts af */
  border-radius: 12px; /* optioneel: mooier */
}

/* Verberg Instagram’s eigen resize gedrag */
.insta-grid .instagram-media > * {
  max-height: none !important;
}

/* =========================
   FOOTER
========================= */
.site-footer {
  background: var(--brand-light);
  padding: 0.3rem 2rem;
  padding-right: 2cm;
}
.site-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: nowrap;
}
.site-footer .footer-logo-link {
  flex: 0 0 auto;
}
.site-footer .footer-logo {
  max-height: 150px;
  display: block;
}
.site-footer .footer-nav {
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.site-footer .footer-nav a {
  text-decoration: none;
  color: var(--text);
  font-size: 1.7rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  transition: 0.3s all;
  font-family: var(--font-deco);
}
.site-footer .footer-social {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}
.site-footer .footer-social a[aria-label="Facebook"] i,
.site-footer .footer-social a[aria-label="Instagram"] i {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}
.site-footer .footer-social a[aria-label="Facebook"] i {
  background: #1877f2;
}
.site-footer .footer-social a[aria-label="Instagram"] i {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}
.site-footer .footer-nav a.home-link:hover {
  background: #ff8c42;
  color: #fff;
}
.site-footer .footer-nav a[href*="over"]:hover {
  background: #ffca43;
  color: #fff;
}
.site-footer .footer-nav a[href*="logopedie"]:hover {
  background: #ffca43;
  color: #fff;
}
.site-footer .footer-nav a[href*="kinesitherapie"]:hover {
  background: #ff99ff;
  color: #fff;
}
.site-footer .footer-nav a[href*="praktisch"]:hover {
  background: #99cccc;
  color: #fff;
}

/* Laatste container op praktisch strak tegen footer */
.praktisch-page .container:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}
.praktisch-page td {
  font-size: 1.2rem;
}
.praktisch-page .section-title {
  margin-top: 3.5rem;
}
.bereik-grid {
  margin-top: 3.5rem;
}
#typlessen .why-img {
  object-fit: contain;
}
/* Footer dropdown */
.footer-nav .dropdown {
  position: relative;
}

/* Klikbare "Praktisch" */
.footer-nav .dropdown-toggle {
  cursor: pointer;
  position: relative;
}

/* Dropdown-menu: opent naar boven en staat gecentreerd boven "Praktisch" */
.footer-nav .dropdown-menu {
  display: none;
  position: absolute;
  bottom: 100%; /* opent naar boven */
  left: 50%; /* midden van het li-element */
  transform: translateX(-50%); /* mooi centreren boven het woord */

  background: #fff;
  padding: 0.5rem 0.75rem;
  list-style: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;

  width: 200px; /* vaste breedte */
  box-sizing: border-box;
  text-align: left;
}

.footer-nav .dropdown:hover .dropdown-menu,
.footer-nav .dropdown:focus-within .dropdown-menu {
  display: block;
}

/* Links in de lijst */
.footer-nav .dropdown-menu li a {
  display: block;
  padding: 0.3rem 0.6rem;
  width: 100%;
  box-sizing: border-box;
  color: #7a7a7a;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Hover-kleuren */
.footer-nav .dropdown-menu li a:hover,
.footer-nav .dropdown-menu li a:focus {
  background: #99cccc;
  color: #fff;
}

/* =========================
   13) Over Ons
========================= */
body.overons-page {
  --header-h: 160px;
}

.why-ontpop {
  text-align: left; /* laatste versie: links */
  max-width: 800px;
  margin: 4rem auto;
}
.why-ontpop h1 {
  font-family: var(--font-deco);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--text);
  text-align: left !important;
}
.why-ontpop p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  color: var(--text);
  text-align: left;
  font-family: var(--font-sans);
}

/* OVER ONS — pagina-specifiek (laatste versies) */
.overons-page .why-ontpop {
  max-width: 1100px !important;
  width: 100% !important;
  margin: 0 auto 4rem auto !important;
  padding: 0 12rem;
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  line-height: 2 !important;
}
.overons-page .why-ontpop h1 {
  font-family: var(--font-deco);
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 3 0 3rem;
  color: var(--text);
}
.overons-page .why-ontpop p {
  margin: 0 0 1rem;
  line-height: 1.65;
  color: var(--text);
  font-family: var(--font-sans);
}

.overons-page .offers {
  padding: 1rem 0 3rem;
}
.overons-page .offers-title {
  text-align: left;
  margin-bottom: 2.5rem;
  font-family: var(--font-deco);
}
.overons-page .offers .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6rem 6rem;
  justify-items: center;
}
.overons-page p {
  font-size: 1.2rem;
  font-family: var(--font-sans);
  color: #7a7a7a;
}
.overons-page li {
  font-size: 1.2rem;
}
.overons-page .offers .card {
  text-align: center;
  max-width: 520px;
}
.overons-page .offers .card-title {
  text-align: center;
  margin: 0 0 0.6rem;
}
.overons-page .offers .card img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto;
}
.overons-page .offers .card-text {
  font-family: var(--font-sans);
}
.overons-page .offers .btn.btn-primary {
  margin: 0.25rem auto 0;
}
/* OVER ONS — gele bullets in "Waarom Ontpop?" (ALLEEN desktop) */
@media (min-width: 769px) {
  .overons-page .why-ontpop ul {
    list-style: none;
    padding-left: 2.8rem;
    margin: 2rem 0;
    position: relative;
  }
  .overons-page .why-ontpop ul li {
    position: relative;
    margin-bottom: 0.8rem;
    line-height: 1.9;
    color: #4a4a4a;
  }
  .overons-page .why-ontpop ul li::before {
    content: "";
    position: absolute;
    left: -2.5rem;
    top: 0.2rem;
    width: 2.3rem;
    height: 2.3rem;
    background: url("../images/pijl-geel.png") no-repeat center / contain;
  }
}
/* OVER ONS — gele bullets in "Waarom Ontpop?" (desktop correct uitgelijnd) */
@media (min-width: 769px) {
  .overons-page .why-ontpop ul {
    list-style: none;
    padding-left: 2.8rem;
    margin: 2rem 0;
  }

  .overons-page .why-ontpop ul li {
    position: relative;
    margin-bottom: 0.9rem;
    padding-left: 2.8rem; /* ruimte voor het pijltje */
    line-height: 1.9;
    color: #4a4a4a;
  }

  .overons-page .why-ontpop ul li::before {
    content: "";
    position: absolute;
    left: 0; /* icoon helemaal links */
    top: 50%; /* verticaal centreren */
    transform: translateY(-50%); /* midden van de tekstregel */
    width: 1.8rem;
    height: 1.8rem;
    background: url("../images/pijl-geel.png") no-repeat center / contain;
  }
}
/* OVER ONS — gele bullets in "Waarom Ontpop?" (desktop correct uitgelijnd) */
@media (min-width: 769px) {
  .overons-page .why-ontpop ul {
    list-style: none;
    padding-left: 2.8rem;
    margin: 2rem 0;
  }

  .overons-page .why-ontpop ul li {
    position: relative;
    margin-bottom: 0.9rem;
    padding-left: 2.8rem; /* ruimte voor het pijltje */
    line-height: 1.9;
    color: #7a7a7a;
  }

  .overons-page .why-ontpop ul li::before {
    content: "";
    position: absolute;
    left: 0; /* icoon helemaal links */
    top: 50%; /* verticaal centreren */
    transform: translateY(-50%); /* midden van de tekstregel */
    width: 4rem;
    height: 4rem;
    background: url("../images/pijl-geel.png") no-repeat center / contain;
  }
}

.person-block {
  display: flex;
  align-items: stretch;
  gap: 7.5rem;
  margin-bottom: 4rem;
}
.person-img {
  flex: 0 0 45%;
}
.person-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.person-block .person-text {
  flex: 1;
  text-align: left;
}
.person-text h2 {
  font-family: "Adelina-Regular", cursive;
}
.person-block .person-text h2 {
  font-family: var(--font-deco);
  font-size: 2rem;
  margin: 0 0 1rem;
  color: var(--text);
}
.person-block .person-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--text);
  font-family: var(--font-sans);
}
.person-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.person-list li {
  font-weight: normal;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
}

/* ====== Mobiel menu ====== */
.nav-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}
.logo-link .logo-desktop {
  display: block !important;
}
.logo-link .logo-mobile {
  display: none !important;
}

/* =========================
   PRAKTISCH (scoped)
========================= */
.praktisch-page .section-title {
  text-align: center;
  font-family: var(--font-deco);
}
.praktisch-page .page-content {
  padding-top: calc(var(--header-h) + 2rem);
}
.praktisch-page #werkwijze-title + p {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
  font-family: var(--font-sans);
}
.praktisch-page .why-block .why-text h3 {
  font-size: 2rem;
  font-weight: normal;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  margin: 0 0 0.5rem;
  font-family: var(--font-deco);
}
.praktisch-page .why-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; /* fix */
  align-items: start;
  column-gap: clamp(2rem, 5vw, 4rem) !important;
  row-gap: 0;
  margin-bottom: clamp(2.5rem, 5vw, 6rem);
}
.praktisch-page .why-block .why-text {
  max-width: none !important;
  width: 100% !important;
  justify-self: stretch !important;
  line-height: 1.6;
  font-family: var(--font-sans);
}
.praktisch-page .why-block .why-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.praktisch-page .why-block .why-img img {
  width: clamp(72px, 10vw, 120px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* TARIEVEN */
.praktisch-page #tarieven-title {
  margin-top: 1rem;
  margin-bottom: 4rem;
  text-align: center;
  font-family: var(--font-deco);
}
.praktisch-page .tarieven-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.praktisch-page .tarief-tabel {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: var(--font-sans);
}
.praktisch-page .tarief-tabel .tarief-heading {
  background: var(--brand-orange);
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 1.25rem;
  text-align: center;
}
.praktisch-page .tarief-tabel .subheading td {
  background: #99cccc;
  color: #7a7a7a;
  font-weight: bold;
  padding: 0.75rem;
}
.praktisch-page .tarief-tabel tbody tr:last-child td {
  background: #fff;
  color: #000;
  padding: 0.9rem;
}
.praktisch-page .tarief-link {
  text-align: center;
  margin-top: 0.75rem;
}
.praktisch-page .tarief-link a {
  text-decoration: underline;
}
.praktisch-page .tarief-link a:hover {
  color: var(--brand-orange);
}
.praktisch-page .tarief-opmerking {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 2.5rem;
}
.praktisch-page .tarief-tabel .subheading td,
.praktisch-page .tarief-tabel tbody tr:last-child td,
.praktisch-page .tarief-link,
.praktisch-page .tarief-link a,
.praktisch-page .tarief-opmerking {
  color: #7a7a7a;
}

/* BEREIKBAARHEID */
.praktisch-page .bereikbaarheid .section-title {
  text-align: center;
  margin-bottom: 2.5rem;
  font-family: var(--font-deco);
}
.praktisch-page .bereik-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9rem;
  align-items: start;
}
.praktisch-page .bereik-map iframe {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.praktisch-page .bereik-text {
  text-align: left;
  line-height: 1.6;
  font-size: 1rem;
  color: var(--text);
  font-family: var(--font-sans);
  color: #7a7a7a;
}
.praktisch-page .bereik-text p {
  margin-bottom: 1.2rem;
}
.praktisch-page .bereik-text strong {
  display: inline-block;
  font-weight: normal;
  font-size: 1.1rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  margin-bottom: 0.3rem;
}
.praktisch-page .bereik-text,
.praktisch-page .bereik-text p,
.praktisch-page .bereik-text strong {
  color: #7a7a7a;
}
/* ============================================================
   BEREIKBAARHEID — juiste volgorde: map → contact → tekst
   ============================================================ */

.bereikbaarheid-page .bereik-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "map text"
    "contact text";
  gap: 2rem;
}

/* Grid-areas koppelen */
.bereikbaarheid-page .bereik-map {
  grid-area: map;
}

.bereikbaarheid-page .contact-info {
  grid-area: contact;
}

.bereikbaarheid-page .bereik-text {
  grid-area: text;
}
.bereikbaarheid-page .contact-info {
  margin-top: -0.25rem; /* schuift het blok omhoog */
}

/* Extra zekerheid: eerste regel geen extra marge */
.bereikbaarheid-page .contact-info .contact-line:first-child {
  margin-top: -1rem !important;
}
/* 1) Contact-info onder de map in dezelfde kolom */
.bereikbaarheid-page .bereik-grid .bereik-map {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.bereikbaarheid-page .bereik-grid .contact-info {
  grid-column: 1 !important; /* zelfde kolom als map */
  grid-row: 2 !important; /* net eronder */
  align-self: start !important;
  margin-top: -0.6rem !important; /* schuif dichter tegen iframe */
}

/* 2) Tekstblok rechts, over 2 rijen (blijft netjes naast map+contact) */
.bereikbaarheid-page .bereik-grid .bereik-text {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}

/* 3) Minder verticale gap tussen de grid-items */
.bereikbaarheid-page .bereik-grid {
  row-gap: 0.4rem !important;
}

/* 4) Extra: p’s in contact-info mogen geen grote marge hebben */
.bereikbaarheid-page .contact-info .contact-line {
  margin: 0.15rem 0 !important;
}
/* =========================
   2) Design tokens
========================= */
:root {
  --brand-light: #ffeab4;
  --brand-pink: #ff92e1;
  --brand-green: #86d0c7;
  --brand-yellow: #ffca43;
  --brand-orange: #ff9d5e;
  --brand: #ffca43; /* knopkleur */
  --brand-dark: #e6b837; /* hoverkleur */
  --primary: var(--brand-yellow);
  --text: #7a7a7a;
  --bg: #fff;
  --surface: #f8fafc;
  --border: #e6e9ee;
  --font-sans: sans-serif;
  --font-deco: "Adelina-Regular", cursive;
  --radius: 20px;
  --container: 1100px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --header-h: 90px; /* hoogte header */
}

/* =========================
   3) Base / reset / helpers
========================= */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}

/* Alleen NIET-homepagina’s krijgen een compacte afstand */
body:not(.home-page) main,
body:not(.home-page) section:first-of-type,
body:not(.home-page) .page-content:first-of-type,
body:not(.home-page) .container:first-of-type {
  padding-top: calc(var(--header-h) + 0.5rem) !important;
  margin-top: 0 !important;
}

/* Scrollfix voor anchors (NIET-homepagina’s) */
body:not(.home-page) html {
  scroll-padding-top: calc(var(--header-h) + 0.5rem);
}
body:not(.home-page) :target {
  scroll-margin-top: calc(var(--header-h) + 0.5rem);
}

html {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  scroll-padding-top: calc(var(--header-h) + 0.5rem);
}
:target {
  scroll-margin-top: calc(var(--header-h) + 0.5rem);
}

body {
  margin: 0;
  font: 16px/1.45 var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--header-h); /* ruimte voor fixed header */
}
.container {
  width: calc(100% - 2rem);
  max-width: var(--container);
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   4) Header
========================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0.4rem 1rem;
}
.logo-link {
  font-family: var(--font-deco);
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: normal;
  margin-top: 5rem; /* extra ruimte boven de titel */
  color: var(--text);
  line-height: 1.2;
  text-align: center;
  margin-bottom: 0;
}
.logo-link img.logo {
  max-height: 200px;
  width: auto;
  display: block;
}
.header-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 1.5rem;
  margin-left: auto;
}
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2rem;
}
.main-nav ul {
  display: flex;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--text);
  font-size: 1.9rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: 0.3s all;
  font-family: var(--font-deco);
}
/* Hover */
.main-nav a.home-link:hover {
  background: #ff8c42;
  color: #fff;
}
.main-nav a[href*="over"]:hover {
  background: #ffeab4;
  color: #fff;
}
.main-nav a[href*="logopedie"]:hover {
  background: #ffca43;
  color: #fff;
}
.main-nav a[href*="kinesitherapie"]:hover {
  background: #ff99ff;
  color: #fff;
}
.main-nav a[href*="praktisch"]:hover {
  background: #99cccc;
  color: #fff;
}
/* Active */
.main-nav a.home-link.active {
  background: #ff8c42;
  color: #fff;
}
.main-nav a[href*="over"].active {
  background: #ffeab4;
  color: #fff;
}
.main-nav a[href*="logopedie"].active {
  background: #ffca43;
  color: #fff;
}
.main-nav a[href*="kinesitherapie"].active {
  background: #ff99ff;
  color: #fff;
}
.main-nav a[href*="praktisch"].active {
  background: #99cccc;
  color: #fff;
}

/* Zorg dat ankernavigatie niet onder de header valt */
:target {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* CTA knop */
.btn.btn-primary {
  background: var(--primary);
  color: #7a7a7a;
  padding: 0.9rem 4rem;
  font-size: 1.2rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  display: inline-block;
  text-align: center;
  font-family: sans-serif;
}
.btn.btn-primary:hover {
  background: var(--brand-light);
  color: #fff;
}

/* Fonts */
@font-face {
  font-family: "Adelina-Regular";
  src: url("../fonts/Adelina-Regular.woff2") format("woff2"),
    url("../fonts/Adelina-Regular.woff") format("woff"),
    url("../fonts/Adelina-Regular.ttf") format("truetype"),
    url("../fonts/Adelina-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================
   CONTACT (contact.html) — FORMULIER
========================= */

/* Titel niet onder de vaste header + centreren */
.contact-page main {
  padding-top: calc(var(--header-h) + 2rem);
}
.contact-page .section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--font-deco);
}

/* Formulier container */
.contact-page .contact-form {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  row-gap: 1rem;
  color: var(--text);
  font-family: var(--font-sans);
}

/* Standaard rij: 2 kolommen => label (200px) | veld (220px)
   Zo start elk invulveld op precies dezelfde x-positie. */
.contact-page .contact-form .form-row {
  display: grid;
  grid-template-columns: 200px 220px;
  column-gap: 2.5rem;
  align-items: center;
}

/* Labels */
.contact-page .contact-form label {
  justify-self: start;
  text-align: left;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  margin: 0;
}

/* Inputs & textarea (basis) */
.contact-page .contact-form input[type="text"],
.contact-page .contact-form input[type="email"],
.contact-page .contact-form input[type="tel"],
.contact-page .contact-form input[type="date"],
.contact-page .contact-form textarea {
  width: 220px;
  max-width: 220px;
  justify-self: start; /* links in hun kolom, niet centreren */
  padding: 0.75rem 1rem;
  background: #fff4cc;
  border: none;
  border-radius: 25px;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  box-shadow: none;
}

/* --- RIJ 1: Voornaam kind + Naam kind naast elkaar --- */
.contact-page .contact-form .form-row.two-up {
  /* 4 kolommen: label|veld | label|veld */
  grid-template-columns: 200px 220px 200px 220px;
  column-gap: 2.5rem;
  align-items: center;
}

/* “Vorige onderzoeken/therapieën”: even hoog/breed als inputs,
   pas scrollen als de tekst groter wordt */
.contact-page .contact-form textarea#vorige {
  height: 45px;
  line-height: 1.2;
  resize: vertical;
  overflow-y: auto;
}

/* “Reden aanmelding”: label boven veld + breed invulvak */
.contact-page .contact-form .form-row.full-width {
  grid-template-columns: 1fr;
  row-gap: 0.5rem;
}
.contact-page .contact-form .form-row.full-width label {
  justify-self: start;
}
.contact-page .contact-form .form-row.full-width textarea {
  width: calc(100% - 2rem);
  max-width: 1000px;
  height: 150px;
  border-radius: 60px;
  resize: vertical;
  justify-self: center;
}

/* Placeholders zichtbaar */
.contact-page .contact-form input::placeholder,
.contact-page .contact-form textarea::placeholder {
  color: var(--text);
  opacity: 0.75;
}

/* Acties */
.contact-page .contact-form .form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.contact-page .contact-form .form-actions button {
  border: none;
  padding: 0.9rem 2.5rem;
  border-radius: 15px;
  background: var(--brand-yellow);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.contact-page .contact-form .form-actions button:hover {
  background: var(--brand-dark);
  color: #fff;
}

/* Label 'Naam kind' wat dichter bij het veld */
.contact-page .contact-form .form-row.two-up label[for="naam-kind"] {
  margin-left: 60px; /* schuif naar rechts, waarde kan je tunen (20–60px) */
}

/* Extra ruimte onder de titel */
.contact-page .section-title {
  text-align: center;
  margin-bottom: 3rem; /* was 2rem, nu meer ruimte */
}

/* Extra marge onder de submit-knop */
.contact-page .contact-form .form-actions {
  margin-top: 2rem; /* boven de knop */
  margin-bottom: 4rem; /* afstand tot footer */
}

.contact-page .contact-form .form-actions button {
  margin: 0; /* reset oude margin */
}

/* Vorige onderzoeken/therapieën: geen scrollbar tonen */
.contact-page .contact-form textarea#vorige {
  height: 45px;
  resize: vertical; /* gebruiker kan zelf groter trekken */
  overflow: hidden; /* scrollbalk niet tonen */
  width: 220px;
  max-width: 220px;
  padding: 0.75rem 1rem;
  background: #fff4cc;
  border: none;
  border-radius: 25px;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  box-shadow: none;
  justify-self: start;
}

/* =========================
   GLOBALE TEKST-OPMAAK (justify + line-height)
========================= */
.page-content p,
.page-content li,
.page-content td,
.card-text,
.card-text p,
.why-text p,
.bereik-text p,
.person-block .person-text p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 2; /* ruimer overal */
  font-family: var(--font-sans);
}

/* Brede tekstkolommen (geen smalle clamps) op alle inhoudspagina's */
body.logopedie-page .why-block .why-text,
body.kinesitherapie-page .why-block .why-text,
body.praktisch-page .why-block .why-text {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 0 !important;
}

/* Extra vangnet voor eerste blokken op logopedie (andere wrappers) */
.logopedie-page :where(.why-text, .card-text, .text, .content, .tekst) p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 2.05 !important;
}
.logopedie-page :where(.why-text, .text, .content, .tekst, .card-text) {
  max-width: none !important;
  width: 100% !important;
}

/* Iets compacter visueel tussen foto en tekst op inhoudspagina's */
body.logopedie-page .why-block,
body.kinesitherapie-page .why-block,
body.praktisch-page .why-block {
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}

/* KINESITHERAPIE — brede tekst + justify, ook bij 'Psychomotorische therapie' */
body.kinesitherapie-page .page-content :where(p, li, td) {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 2.05 !important;
}

/* containers die die paragrafen bevatten — geef volle breedte */
body.kinesitherapie-page
  :where(
    .why-text,
    .card-text,
    .text,
    .tekst,
    .content,
    .description,
    .richtext,
    .body,
    .copy,
    .inhoud,
    .artikel,
    .section-text
  ) {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 0 !important;
}

/* safety: koppen en knoppen niet justifyen */
body.kinesitherapie-page :where(h1, h2, h3, h4, h5, h6, .btn, .btn a) {
  text-align: initial !important;
  line-height: 1.2 !important;
}

.kinesitherapie-page p {
  font-size: 1.2rem;
}
.kinesitherapie-page li {
  font-size: 1.2rem;
}

.kinesitherapie-page strong {
  color: #ff99ff;
}

/* ===== KINESITHERAPIE — HARD OVERRIDE (plak dit als allerlaatste) ===== */

/* Tekst echt links+rechts uitlijnen, met nette woordafbreking */
body.kinesitherapie-page
  :where(
    .why-block p,
    .why-text p,
    .card-text p,
    .content p,
    .text p,
    .tekst p,
    section p,
    .container p,
    .description p,
    .richtext p,
    .copy p,
    .body p,
    .inhoud p,
    article p,
    .artikel p,
    .section-text p
  ) {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2.05 !important;
  word-break: normal !important; /* niet onnatuurlijk breken */
  overflow-wrap: anywhere !important; /* voorkomt afsnijden bij lange woorden */
}

/* Geef de tekstkolom effectief de ruimte naast de afbeelding */
body.kinesitherapie-page
  :where(
    .why-text,
    .content,
    .text,
    .tekst,
    .description,
    .richtext,
    .copy,
    .body,
    .inhoud,
    .section-text,
    .container .text,
    .container .content
  ) {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 0 !important; /* bij flex: tekst neemt alle resterende ruimte */
}

/* Minder lucht tussen beeld en tekst voor een bredere look */
body.kinesitherapie-page .why-block {
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}

/* (veiligheid) Koppen/knoppen niet justifyen */
body.kinesitherapie-page
  :where(h1, h2, h3, h4, h5, h6, .btn, .btn a, .main-nav a) {
  text-align: initial !important;
  line-height: 1.2 !important;
}

/* ====== HARD FIX — WHY-BLOCK TEKST (alle inhoudspagina's) ====== */
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page)
  .why-block
  .why-text {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 0 !important; /* bij flex: tekst krijgt alle resterende ruimte */
}

/* Foto vaste kolombreedte zodat tekst echt kan uitrekken */
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page)
  .why-block
  .why-img {
  flex: 0 0 300px !important; /* pas aan indien gewenst */
}

/* Paragrafen én lijstitems: volledig justify + ruimere line-height */
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page)
  .why-block
  .why-text
  :where(p, li) {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2.05 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
}

.praktisch-page p {
  font-size: 1.2rem;
}

/* Iets minder ruimte tussen beeld en tekst voor bredere look */
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page) .why-block {
  gap: clamp(2rem, 4vw, 3.5rem) !important; /* was groter */
}

/* SPECIFIEK: sommige secties heten 'psychomotor...' op kinesitherapie */
.kinesitherapie-page [id*="psychomotor"] .why-text,
.kinesitherapie-page [id*="psycho"] .why-text {
  max-width: none !important;
  width: 100% !important;
}
.kinesitherapie-page [id*="psychomotor"] .why-text :where(p, li),
.kinesitherapie-page [id*="psycho"] .why-text :where(p, li) {
  text-align: justify !important;
  line-height: 2.05 !important;
}

/* Veilig: koppen/knoppen niet justifyen */
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page)
  :where(h1, h2, h3, h4, h5, h6, .btn, .btn a, .main-nav a) {
  text-align: initial !important;
  line-height: 1.2 !important;
}
/* KINESITHERAPIE — tekst onder titels volledig uitlijnen */
.kinesitherapie-page :is(h2, h3) + p,
.kinesitherapie-page :is(h2, h3) ~ p,
.kinesitherapie-page :is(h2, h3) ~ ul li {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2.05 !important;
}

/* Zorg dat opvolgende tekstblokken niet kunstmatig smal zijn */
.kinesitherapie-page :is(h2, h3) ~ :is(p, ul) {
  max-width: none !important;
  width: 100% !important;
}

/* ==== KINESITHERAPIE — FINAL OVERRIDE (zet dit helemaal onderaan) ==== */

/* Zorg dat content-kolommen nooit afkappen */
.kinesitherapie-page .container,
.kinesitherapie-page .why-block,
.kinesitherapie-page .why-block .why-img,
.kinesitherapie-page .why-block .why-text {
  min-width: 0 !important;
}

/* Tekstkolom: pak alle resterende breedte naast de foto */
.kinesitherapie-page .why-block .why-text {
  flex: 1 1 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Volledige uitlijning + ruimere regelafstand in ALLE tekstblokken op de pagina */
.kinesitherapie-page :where(p, li, td) {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2.05 !important;
  overflow-wrap: anywhere;
  word-break: keep-all !important;
}

/* Specifiek: tekst direct onder H2/H3 (zoals de twee genoemde secties) */
.kinesitherapie-page :is(h2, h3) + :where(p, div, section, article),
.kinesitherapie-page :is(h2, h3) ~ :where(p, div, section, article) {
  max-width: none !important;
  width: 100% !important;
}
.kinesitherapie-page
  :is(h2, h3)
  + :where(p, div, section, article)
  :where(p, li),
.kinesitherapie-page
  :is(h2, h3)
  ~ :where(p, div, section, article)
  :where(p, li) {
  text-align: justify !important;
  line-height: 2.05 !important;
  hyphens: auto !important;
}

/* Titles/knoppen niet justify’en */
.kinesitherapie-page :where(h1, h2, h3, h4, h5, h6, .btn, .btn a, .main-nav a) {
  text-align: initial !important;
  line-height: 1.2 !important;
}

/* ===== PRAKTISCH TITELS TERUG CENTREREN ===== */
.praktisch-page .section-title,
.praktisch-page #werkwijze-title,
.praktisch-page #tarieven-title,
.praktisch-page .bereikbaarheid .section-title {
  text-align: center !important;
}

/* HOME — Intro-tekst volledig benutten en justifiëren */
.intro-text .container {
  /* maak de container (bijna) full-width met wat zijkant-padding */
  max-width: none;
  width: calc(100% - 4rem); /* laat 2rem marge links/rechts */
  margin-inline: auto;
}

.intro-text .intro-paragraph {
  /* links + rechts uitlijnen */
  text-align: center;
  text-justify: inter-word;
  hyphens: auto;

  /* laat ze de volle (nieuwe) breedte gebruiken */
  max-width: none;
  margin: 0 0 1rem 0;
  line-height: 1.8;
  font-family: var(--font-sans);
}

/* optioneel: iets meer ruimte vóór de knop */
.intro-text .btn.large {
  margin-top: 1.25rem;
}

/* Titel centreren op logopedie pagina */
.logopedie-page .section-title,
.kinesitherapie-page .section-title {
  text-align: center !important;
  margin-bottom: 2rem; /* optioneel extra ruimte eronder */
  font-family: var(--font-deco);
}

/* Zorg dat de tekstkolom in .person-block echt alle ruimte naast de foto neemt */
.person-block {
  display: flex;
  align-items: flex-start;
  gap: 3rem; /* ruimte tussen foto en tekst */
  margin-bottom: 4rem;
}

.person-block .person-img {
  flex: 0 0 400px !important; /* vaste breedte foto (wordt NIET groter) */
}

.person-block .person-img img {
  width: 100%;
  height: 600px; /* langer maken (was bv. 280px) */
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.person-block .person-text {
  flex: 1 1 auto !important; /* tekstkolom neemt alle resterende ruimte */
  max-width: none !important;
  width: 100% !important;
}

.person-block .person-text p {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
  font-family: var(--font-sans);
}

/* ===== PERSON-BLOCK — breed beeld + volle tekstkolom naast de foto ===== */
.person-block {
  display: flex !important;
  align-items: flex-start !important;
  gap: 3rem !important; /* ruimte tussen foto en tekst */
  flex-wrap: nowrap !important; /* NOOIT onder elkaar vallen op desktop */
}

.person-block .person-img {
  flex: 0 0 400px !important; /* vaste beeldkolom */
}

.person-block .person-img img {
  width: 100% !important;
  height: 600px !important; /* langere foto */
  object-fit: cover !important;
  border-radius: var(--radius);
  display: block;
}

/* Tekstkolom: pak ALLE resterende ruimte, kan krimpen zonder te duwen */
.person-block .person-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-right: 2rem; /* laat ruimte rechts zodat tekst niet tegen de rand plakt */
}

/* Paragrafen & lijst volledig uitlijnen en netjes afbreken */
.person-block .person-text p,
.person-block .person-text li {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  font-family: var(--font-sans);
}

/* Lijst netjes naast de foto, niet eronder */
.person-block .person-list {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
}

/* PERSON-BLOCK — kolommen even hoog + foto vult de hoogte */
.person-block {
  display: flex !important;
  align-items: stretch !important; /* beide kolommen even hoog */
  gap: 2.5rem !important; /* iets compacter zodat alles past */
  flex-wrap: nowrap !important;
}

.person-block .person-img {
  flex: 0 0 clamp(360px, 35vw, 380px) !important; /* vaste kolom, licht adaptief */
  display: flex !important; /* nodig voor height:100% op img */
}

.person-block .person-img img {
  width: 100% !important;
  height: 100% !important; /* match de (gerekte) kolomhoogte */
  object-fit: cover !important;
  border-radius: var(--radius);
}

/* tekstkolom mag krimpen en gebruikt alle resterende ruimte */
/* Alleen de tekst in person-block verder laten doorlopen */
.person-block .person-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 420px) !important; /* 400px foto + 20px marge */
  padding-right: 0; /* geen extra witruimte rechts */
  text-align: justify;
}

/* lijsten: geen extra grote inspringing die ‘duwt’ */
.person-block .person-text ul,
.person-block .person-text ol {
  padding-left: 1.1rem;
  margin-left: 0;
  list-style-position: outside;
  overflow-wrap: anywhere; /* lange woorden breken netjes af */
}

/* Globale offset voor alle anchors i.v.m. de vaste header */
html {
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-behavior: smooth; /* optioneel: mooie smooth scroll */
}

/* Extra vangnet als het doel-element zelf marge nodig heeft */
:target {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* ====== OVER ONS — brede tekstblok ====== */
.overons-page .why-ontpop {
  max-width: none !important; /* verwijder de 800/900px beperking */
  width: calc(100% - 4rem) !important; /* laat 2rem marge links/rechts */
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: justify !important; /* volledig uitgelijnd links + rechts */
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2 !important;
}

/* Over ons – knoppen "Ontdek" exact op dezelfde hoogte in beide cards */
.overons-page .offers .cards {
  align-items: stretch; /* kolommen even hoog */
}

.overons-page .offers .card {
  display: flex; /* inhoud stapelt verticaal */
  flex-direction: column;
  height: 100%; /* pak volle kolomhoogte */
}

.overons-page .offers .card img {
  height: 300px; /* zelfde beeldhoogte */
  object-fit: cover;
  border-radius: 12px;
}

.overons-page .offers .card-title {
  margin: 0.75rem 0;
}

.overons-page .offers .card-text {
  flex: 1 1 auto; /* tekstblok neemt rest-ruimte */
  margin-bottom: 0; /* geen extra lucht */
  font-family: var(--font-sans);
}

/* knop naar helemaal onder in de card */
.overons-page .offers .card .btn {
  margin-top: auto;
  align-self: center; /* centreren onderaan */
}

/* Intro: stapel de inhoud onder elkaar en centreer horizontaal */
.intro-text > .container {
  display: flex; /* ja, flex mag – maar als kolom */
  flex-direction: column; /* onder elkaar */
  align-items: center; /* horizontaal centreren */
  justify-content: flex-start; /* geen verticale centrering nodig */
}

/* Paragrafen netjes onder elkaar met wat ruimte */
.intro-text .intro-paragraph {
  margin: 0 0 1rem 0;
}

/* Knop onder de tekst en gecentreerd */
.intro-text .btn {
  display: block !important;
  margin: 1.25rem auto 0;
  width: max-content;
}

/* Zet onderlijning uit bij gewone tekst */
p,
.intro-subtitle,
.intro-paragraph {
  text-decoration: none !important;
}

/* OVERRIDE: Over ons – eerste blok even dicht als de rest */
.overons-page .why-ontpop {
  margin-top: calc(
    var(--header-h) + 0rem
  ) !important; /* identiek aan de andere pagina’s */
}

/* ===== FIX 2: Header compacter (alles iets hoger in de header) ===== */
.site-header {
  padding-block: 0.3rem !important; /* was groter */
}
.header-inner {
  padding-block: 0.3rem !important; /* was groter */
}

/* Hou het header-logo klein op alle niet-home pagina's */
body:not(.home-page) .logo-link img.logo {
  max-height: 200px !important; /* of 130–150px naar smaak */
  width: auto;
}

/* ===== FINAL OVERRIDE: compacte start onder de header ===== */
/* Niet toepassen op home, praktisch, contact (die staan al goed) */
body:not(.home-page):not(.praktisch-page):not(.contact-page) main,
body:not(.home-page):not(.praktisch-page):not(.contact-page)
  section:first-of-type,
body:not(.home-page):not(.praktisch-page):not(.contact-page)
  .page-content:first-of-type,
body:not(.home-page):not(.praktisch-page):not(.contact-page)
  .container:first-of-type {
  padding-top: calc(
    var(--header-h) + 0.15rem
  ) !important; /* heel dicht tegen de header */
  margin-top: 0 !important;
}

/* Verwijder extra opdrijvende marges die eerder gezet waren */
.logopedie-page .page-content,
.kinesitherapie-page .page-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Over ons: het eerste blok hoeft geen extra marge meer */
.overons-page .why-ontpop {
  margin-top: 0 !important;
}

/* Anchor/scroll offset op deze pagina’s ook compacter */
body:not(.home-page):not(.praktisch-page):not(.contact-page) {
  scroll-margin-top: calc(var(--header-h) + 0.15rem) !important;
}
body:not(.home-page):not(.praktisch-page):not(.contact-page) :target {
  scroll-margin-top: calc(var(--header-h) + 0.15rem) !important;
}

/* OVERRIDES — Over ons: net zo dicht tegen de header als de rest */
.overons-page {
  --header-h: 90px !important; /* zelfde headerhoogte als andere pagina's */
}

.overons-page main,
.overons-page section:first-of-type,
.overons-page .page-content:first-of-type,
.overons-page .container:first-of-type {
  padding-top: calc(var(--header-h) + 0rem) !important; /* geen extra lucht */
  margin-top: 0 !important;
}

.overons-page .why-ontpop {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Over ons – minder ruimte tussen "Waarom Ontpop" en "Wie zijn wij" */
.overons-page .why-ontpop {
  margin-bottom: 1rem !important; /* was groter */
}

.overons-page .person-block {
  margin-top: 1em !important; /* blok dichter tegen de vorige sectie */
}

/* LOGOPEDIE — altijd beeld links, tekst rechts */
.logopedie-page .why-block {
  display: flex !important;
  flex-direction: row !important; /* vaste richting */
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* Negeer afwisselen en 'reverse' varianten */
.logopedie-page .why-block.reverse,
.logopedie-page .why-block:nth-child(even) {
  flex-direction: row !important;
}

/* Zorg dat de kolomvolgorde altijd klopt */
.logopedie-page .why-block .why-img {
  order: 0 !important;
}
.logopedie-page .why-block .why-text {
  order: 1 !important;
}

/* =========================
   OVER ONS — alles uitlijnen op de linkerrand van "Waarom Ontpop"
   (laat "Waarom Ontpop" zelf onaangeroerd)
========================= */
@media (min-width: 1000px) {
  /* Neem dezelfde effectieve breedte/positie als het "Waarom Ontpop"-blok:
     dat blok staat nu praktisch met ~2rem marge links/rechts (width: calc(100% - 4rem)). */
  .overons-page .person-block,
  .overons-page .offers,
  .overons-page .offers .cards {
    width: calc(100% - 4rem);
    margin-left: auto;
    margin-right: auto;
    max-width: none; /* niet kunstmatig versmallen */
  }

  /* (optioneel) klein beetje interne ruimte rechts zodat tekst niet tegen de rand plakt */
  .overons-page .person-block .person-text {
    padding-right: 2rem;
  }
}
/* ==== LOGOPEDIE — FORCEER ALTIJD BEELD LINKS, TEKST RECHTS ==== */
body.logopedie-page .why-block,
body.logopedie-page .why-block.reverse,
body.logopedie-page .why-block:nth-child(even) {
  display: flex !important;
  flex-direction: row !important; /* geen afwisseling meer */
  align-items: flex-start;
}

/* Kolomvolgorde expliciet vastzetten */
body.logopedie-page .why-block .why-img {
  order: 0 !important;
}
body.logopedie-page .why-block .why-text {
  order: 1 !important;
}

/* =========================
   OVER ONS — uitlijnen op linkerrand "Waarom Ontpop"
   (titel blijft onaangeroerd)
========================= */
.overons-page {
  /* Pas deze aan als je de binnenmarge van "Waarom Ontpop" ooit wijzigt */
  --overons-pad: 12rem;
  --overons-wrap: calc(100% - 4rem); /* zelfde breedte als het titelblok */
}

/* Zorg dat het titelblok zijn eigen padding expliciet heeft (referentie) */
.overons-page .why-ontpop {
  padding-left: var(--overons-pad) !important;
  padding-right: var(--overons-pad) !important;
  width: var(--overons-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Blok 2: "Wie zijn wij" gelijk starten met "Waarom Ontpop" */
.overons-page .person-block {
  width: var(--overons-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--overons-pad) !important;
  padding-right: var(--overons-pad) !important;
}

/* Blok 3: "Ons aanbod" — container en grid gelijk starten met "Waarom Ontpop" */
.overons-page .offers {
  width: var(--overons-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--overons-pad) !important;
  padding-right: var(--overons-pad) !important;
}

/* In de grid: kaarten niet centreren, maar links uitlijnen */
.overons-page .offers .cards {
  justify-items: start !important; /* i.p.v. center */
}

/* Kaarten mogen hun huidige max-width houden; als je ze wilt laten uitrekken:
   haal de volgende regel van commentaar:
   .overons-page .offers .card { max-width: none !important; width: 100% !important; }
*/

/* =========================
   OVER ONS — perfecte uitlijning op linkerrand van "Waarom Ontpop"
   (Laat de titel "Waarom Ontpop" onaangeroerd)
========================= */
.overons-page {
  /* gebruik dezelfde binnenmarge/breedte als je titelblok */
  --overons-pad: 12rem;
  --overons-wrap: calc(100% - 4rem);
}

/* Referentie: titelblok "Waarom Ontpop" (blijft staan) */
.overons-page .why-ontpop {
  padding-left: var(--overons-pad) !important;
  padding-right: var(--overons-pad) !important;
  width: var(--overons-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: calc(12rem + 0.5rem) !important;
  padding-right: calc(12rem - 0.5rem) !important;
}

/* 1) "Wie zijn wij" — hele sectie en elk person-block exact gelijk zetten */
.overons-page .person-section,
.overons-page .person-block {
  width: var(--overons-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--overons-pad) !important;
  padding-right: var(--overons-pad) !important;
}

/* Als er een sectietitel vóór het eerste person-block staat, lijn die mee uit */
.overons-page .person-section > :is(h2, h3),
.overons-page :is(h2, h3):has(+ .person-block) {
  /* :has() wordt genegeerd in oudere browsers; is veilig */
  padding-left: var(--overons-pad) !important;
  padding-right: var(--overons-pad) !important;
  width: var(--overons-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Binnen het person-block niets laten "duwen" */
.overons-page .person-block .person-img {
  margin-left: 0 !important;
}
.overons-page .person-block .person-text {
  margin-left: 0 !important;
}

/* 2) Eventuele personen-cards (als grid of lijst) gelijk starten met de titel */
.overons-page .person-cards,
.overons-page .team-cards,
.overons-page .team,
.overons-page .members {
  width: var(--overons-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--overons-pad) !important;
  padding-right: var(--overons-pad) !important;
  justify-items: start !important;
  justify-content: start !important;
}

/* Zorg dat kaarten niet stiekem centreren */
.overons-page :is(.person-cards, .team-cards, .team, .members) > * {
  margin-left: 0 !important;
}

/* (reeds ok) Onderaan 'Ons aanbod' laten we ook exact gelijk starten */
.overons-page .offers {
  width: var(--overons-wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--overons-pad) !important;
  padding-right: var(--overons-pad) !important;
}
.overons-page .offers .cards {
  justify-items: start !important;
}

/* LOGOPEDIE + KINESITHERAPIE – uniforme horizontale marges */
.logopedie-page .page-content,
.logopedie-page .container,
.logopedie-page .why-block,
.logopedie-page .why-block .why-text,
.logopedie-page .why-block .why-img,
.kinesitherapie-page .page-content,
.kinesitherapie-page .container,
.kinesitherapie-page .why-block,
.kinesitherapie-page .why-block .why-text,
.kinesitherapie-page .why-block .why-img {
  max-width: 80%; /* laat ±10% links + 10% rechts vrij */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Optioneel: losse paragrafen & afbeeldingen ook laten volgen */
.logopedie-page .page-content p,
.logopedie-page .page-content img,
.kinesitherapie-page .page-content p,
.kinesitherapie-page .page-content img {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Optioneel: losse paragrafen & afbeeldingen ook laten volgen */
.logopedie-page .page-content p,
.logopedie-page .page-content img,
.kinesitherapie-page .page-content p,
.kinesitherapie-page .page-content img {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.test {
  color: #ffca43;
}

/* ===== KINESITHERAPIE — BEELD LINKS OP ORIGINELE GROOTTE ===== */
.kinesitherapie-page .why-block {
  display: flex !important;
  flex-direction: row !important; /* altijd beeld links */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  padding-inline: var(--page-gutter, clamp(1.25rem, 4vw, 4rem)) !important;
  box-sizing: border-box !important;
}

.kinesitherapie-page .why-block.reverse {
  flex-direction: row !important; /* reverse uitschakelen */
}

/* Afbeelding links: behoudt natuurlijke grootte, geen vaste breedte */
.kinesitherapie-page .why-block .why-img {
  order: 0 !important;
  flex: 0 0 auto !important; /* afbeelding behoudt zijn eigen breedte */
  margin: 0 !important;
}

.kinesitherapie-page .why-block .why-img img {
  display: block !important;
  height: auto !important; /* behoud aspect ratio */
  max-width: 100% !important; /* voorkomt dat ze uit de container vallen */
  object-fit: contain !important;
}

/* LOGOPEDIE — #spraaktherapie exact laten lijnen met de andere why-blocks */
.logopedie-page {
  --page-gutter: clamp(1.25rem, 4vw, 4rem); /* zelfde gutter als elders */
}

/* Laatste container op praktisch strak tegen footer */
.praktisch-page .container:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* =========================
   13) Over Ons
========================= */
body.overons-page {
  --header-h: 160px;
}
.why-ontpop {
  text-align: left;
  max-width: 800px;
  margin: 4rem auto;
}
.why-ontpop h1 {
  font-family: var(--font-deco);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--text);
}
.why-ontpop p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  color: var(--text);
  text-align: left;
  font-family: var(--font-sans);
}

/* OVER ONS — tekstblok breder + justify */
.overons-page .why-ontpop {
  max-width: 1100px !important;
  width: 100% !important;
  margin: 0 auto 4rem auto !important;
  padding: 0 12rem;
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  line-height: 2 !important;
}
.overons-page .why-ontpop h1 {
  font-family: var(--font-deco);
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 3 0 3rem;
  color: var(--text);
  text-align: center;
}
.overons-page .why-ontpop p {
  margin: 0 0 1rem;
  line-height: 1.65;
  color: var(--text);
  font-family: var(--font-sans);
}

.overons-page .offers {
  padding: 1rem 0 3rem;
  margin-bottom: 4rem !important;
}
.overons-page .offers-title {
  text-align: left;
  margin-bottom: 2.5rem;
  font-family: var(--font-deco);
}
.overons-page .offers .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6rem 6rem;
  justify-items: center;
}
.overons-page .offers .card {
  text-align: center;
  max-width: 520px;
}
.overons-page .offers .card-title {
  text-align: center;
  margin: 0 0 0.6rem;
  font-family: "Adelina-Regular", cursive;
}
.overons-page .offers .card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto;
}
.overons-page .offers .card-text {
  font-family: var(--font-sans);
}
.overons-page .offers .btn.btn-primary {
  margin: 0.25rem auto 0;
}

/* EXTRA uitlijning "Wie zijn wij?" exact onder "Waarom Ontpop?" */
.overons-page .offers {
  width: calc(100% - 4rem) !important;
  margin-inline: auto !important;
  padding-left: 12rem !important;
  padding-right: 12rem !important;
}
.overons-page .offers > .container {
  display: contents !important;
}
.overons-page #offers-title {
  text-align: center !important;
  margin-left: 0 !important;
}
.overons-page .offers .cards {
  justify-items: start !important;
  justify-content: start !important;
  margin-inline: 0 !important;
}
.overons-page .offers .card {
  justify-self: start !important;
  width: 100% !important;
  max-width: none !important;
}

/* Personen */
.person-block {
  display: flex !important;
  align-items: stretch !important;
  gap: 2.5rem !important;
  flex-wrap: nowrap !important;
  margin-bottom: 4rem;
}
.person-img {
  flex: 0 0 clamp(360px, 35vw, 380px) !important;
  display: flex !important;
}
.person-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius);
  display: block;
}
.person-block .person-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 420px) !important;
  padding-right: 0;
  text-align: justify;
}
.person-text h2 {
  font-family: var(--font-deco);
}
.person-block .person-text h2 {
  font-size: 2rem;
  margin: 0 0 1rem;
  color: var(--text);
}
.person-block .person-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--text);
  font-family: var(--font-sans);
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  line-height: 2 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
}
.person-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.person-list li {
  font-weight: normal;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  line-height: 2 !important;
  overflow-wrap: anywhere !important;
}
.person-block .person-list {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
}

/* ====== Mobiel menu (desktop defaults) ====== */
.nav-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}
.logo-link .logo-desktop {
  display: block !important;
}
.logo-link .logo-mobile {
  display: none !important;
}
.overons-page #offers-title,
.overons-page .offers-title {
  text-align: left !important;
  margin-left: 0 !important;
}
/* Kaarten links laten starten */
.overons-page .offers .cards {
  justify-items: start !important;
  justify-content: start !important;
}
/* =========================
   PRAKTISCH (scoped)
========================= */
.praktisch-page .section-title {
  text-align: center;
  font-family: var(--font-deco);
}
.praktisch-page .page-content {
  padding-top: calc(var(--header-h) + 2rem);
}
.praktisch-page #werkwijze-title + p {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
  font-family: var(--font-sans);
}
.praktisch-page .why-block .why-text h3 {
  font-size: 2rem;
  font-weight: normal;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  margin: 0 0 0.5rem;
  font-family: var(--font-deco);
}
.praktisch-page .why-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: start;
  column-gap: clamp(2rem, 5vw, 4rem) !important;
  row-gap: 0;
  margin-bottom: clamp(2.5rem, 5vw, 6rem);
}
.praktisch-page .why-block .why-text {
  max-width: none !important;
  width: 100% !important;
  justify-self: stretch !important;
  line-height: 1.6;
  font-family: var(--font-sans);
}
.praktisch-page .why-block .why-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.praktisch-page .why-block .why-img img {
  width: clamp(72px, 10vw, 120px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* TARIEVEN */
.praktisch-page #tarieven-title {
  margin-top: 1rem;
  margin-bottom: 4rem;
  text-align: center;
  font-family: var(--font-deco);
}
.praktisch-page .tarieven-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.praktisch-page .tarief-tabel {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: var(--font-sans);
}
.praktisch-page .tarief-tabel .tarief-heading {
  background: #99cccc;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 1.25rem;
  text-align: center;
}
.praktisch-page .tarief-tabel .subheading td {
  background: #e2f3f1;
  color: #000;
  font-weight: bold;
  padding: 0.75rem;
}
.subheading {
  color: #7a7a7a;
}
.praktisch-page .tarief-tabel tbody tr:last-child td {
  background: #fff;
  color: #000;
  padding: 0.9rem;
}
.praktisch-page .tarief-link {
  text-align: center;
  margin-top: 0.75rem;
}
.praktisch-page .tarief-link a {
  text-decoration: underline;
}
.praktisch-page .tarief-link a:hover {
  color: var(--brand-orange);
}
.praktisch-page .tarief-opmerking {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 2.5rem;
}
.praktisch-page .tarief-tabel .subheading td,
.praktisch-page .tarief-tabel tbody tr:last-child td,
.praktisch-page .tarief-link,
.praktisch-page .tarief-link a,
.praktisch-page .tarief-opmerking {
  color: #7a7a7a;
}

/* BEREIKBAARHEID */
.praktisch-page .bereikbaarheid .section-title {
  text-align: center;
  margin-bottom: 2.5rem;
  font-family: var(--font-deco);
}
.praktisch-page .bereik-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9rem;
  align-items: start;
}
.praktisch-page .bereik-map iframe {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.praktisch-page .bereik-text {
  text-align: left;
  line-height: 1.6;
  font-size: 1rem;
  color: var(--text);
  font-family: var(--font-sans);
}
.praktisch-page .bereik-text p {
  margin-bottom: 1.2rem;
}
.praktisch-page .bereik-text strong {
  display: inline-block;
  font-weight: normal;
  font-size: 1.2rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  margin-bottom: 0.3rem;
}
.praktisch-page .bereik-text,
.praktisch-page .bereik-text p,
.praktisch-page .bereik-text strong {
  color: #7a7a7a;
}

/* =========================
   CONTACT — FORMULIER
========================= */
.contact-page main {
  padding-top: calc(var(--header-h) + 2rem);
}
.contact-page .section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--font-deco);
}

.contact-page .contact-form {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  row-gap: 1rem;
  color: var(--text);
  font-family: var(--font-sans);
}
.contact-page .contact-form .form-row {
  display: grid;
  grid-template-columns: 200px 220px;
  column-gap: 2.5rem;
  align-items: center;
}
.contact-page .contact-form label {
  justify-self: start;
  text-align: left;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  margin: 0;
}
.contact-page .contact-form input[type="text"],
.contact-page .contact-form input[type="email"],
.contact-page .contact-form input[type="tel"],
.contact-page .contact-form input[type="date"],
.contact-page .contact-form textarea {
  width: 220px;
  max-width: 220px;
  justify-self: start;
  padding: 0.75rem 1rem;
  background: #fff4cc;
  border: none;
  border-radius: 25px;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  box-shadow: none;
}

/* 2 velden naast elkaar */
.contact-page .contact-form .form-row.two-up {
  grid-template-columns: 200px 220px 200px 220px;
  column-gap: 2.5rem;
  align-items: center;
}

/* Vorige onderzoeken/therapieën */
.contact-page .contact-form textarea#vorige {
  height: 45px;
  line-height: 1.2;
  resize: vertical;
  overflow-y: auto;
}

/* Reden aanmelding */
.contact-page .contact-form .form-row.full-width {
  grid-template-columns: 1fr;
  row-gap: 0.5rem;
}
.contact-page .contact-form .form-row.full-width label {
  justify-self: start;
}
.contact-page .contact-form .form-row.full-width textarea {
  width: calc(100% - 2rem);
  max-width: 1000px;
  height: 150px;
  border-radius: 60px;
  resize: vertical;
  justify-self: center;
}

.contact-page .contact-form input::placeholder,
.contact-page .contact-form textarea::placeholder {
  color: var(--text);
  opacity: 0.75;
  font-family: var(--font-sans);
}

.contact-page .contact-form .form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.contact-page .contact-form .form-actions button {
  border: none;
  padding: 0.9rem 2.5rem;
  border-radius: 15px;
  background: var(--brand-yellow);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.contact-page .contact-form .form-actions button:hover {
  background: var(--brand-dark);
  color: #fff;
}

/* Label 'Naam kind' dichter bij veld */
.contact-page .contact-form .form-row.two-up label[for="naam-kind"] {
  margin-left: 60px;
}

/* Extra ruimte onder titel en submit */
.contact-page .section-title {
  text-align: center;
  margin-bottom: 3rem;
}
.contact-page .contact-form .form-actions {
  margin-top: 2rem;
  margin-bottom: 4rem;
}
.contact-page .contact-form .form-actions button {
  margin: 0;
}

/* Vorige onderzoeken/therapieën: geen scrollbar tonen */
.contact-page .contact-form textarea#vorige {
  height: 45px;
  resize: vertical;
  overflow: hidden;
  width: 220px;
  max-width: 220px;
  padding: 0.75rem 1rem;
  background: #fff4cc;
  border: none;
  border-radius: 25px;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  box-shadow: none;
  justify-self: start;
}

/* =========================
   GLOBALE TEKST-OPMAAK
========================= */
.page-content p,
.page-content li,
.page-content td,
.card-text,
.card-text p,
.why-text p,
.bereik-text p,
.person-block .person-text p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 2;
  font-family: var(--font-sans);
}

/* Brede tekstkolommen */
body.logopedie-page .why-block .why-text,
body.kinesitherapie-page .why-block .why-text,
body.praktisch-page .why-block .why-text {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 0 !important;
}

.logopedie-page h3 {
  font-size: 2rem;
  font-family: var(--font-deco);
  font-weight: 100;
}

/* Extra vangnet logopedie */
.logopedie-page :where(.why-text, .card-text, .text, .content, .tekst) p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 2.05 !important;
}
.logopedie-page :where(.why-text, .text, .content, .tekst, .card-text) {
  max-width: none !important;
  width: 100% !important;
}

/* Iets compacter tussen beeld en tekst */
body.logopedie-page .why-block,
body.kinesitherapie-page .why-block,
body.praktisch-page .why-block {
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}

/* KINESITHERAPIE — brede tekst + justify */
body.kinesitherapie-page .page-content :where(p, li, td) {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 2.05 !important;
}

.kinesitherapie-page h3 {
  font-size: 2rem;
  font-family: var(--font-deco);
  font-weight: 100;
}

/* containers die paragrafen bevatten */
body.kinesitherapie-page
  :where(
    .why-text,
    .card-text,
    .text,
    .tekst,
    .content,
    .description,
    .richtext,
    .body,
    .copy,
    .inhoud,
    .artikel,
    .section-text
  ) {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 0 !important;
}

/* safety: koppen en knoppen niet justifyen */
body.kinesitherapie-page :where(h1, h2, h3, h4, h5, h6, .btn, .btn a),
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page)
  :where(h1, h2, h3, h4, h5, h6, .btn, .btn a, .main-nav a) {
  text-align: initial !important;
  line-height: 1.2 !important;
}

/* ===== KINESITHERAPIE — HARD OVERRIDE ===== */
body.kinesitherapie-page
  :where(
    .why-block p,
    .why-text p,
    .card-text p,
    .content p,
    .text p,
    .tekst p,
    section p,
    .container p,
    .description p,
    .richtext p,
    .copy p,
    .body p,
    .inhoud p,
    article p,
    .artikel p,
    .section-text p
  ) {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2.05 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
}
body.kinesitherapie-page
  :where(
    .why-text,
    .content,
    .text,
    .tekst,
    .description,
    .richtext,
    .copy,
    .body,
    .inhoud,
    .section-text,
    .container .text,
    .container .content
  ) {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 0 !important;
}
body.kinesitherapie-page .why-block {
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}

/* SPECIFIEK psychomotor */
.kinesitherapie-page [id*="psychomotor"] .why-text,
.kinesitherapie-page [id*="psycho"] .why-text {
  max-width: none !important;
  width: 100% !important;
}
.kinesitherapie-page [id*="psychomotor"] .why-text :where(p, li),
.kinesitherapie-page [id*="psycho"] .why-text :where(p, li) {
  text-align: justify !important;
  line-height: 2.05 !important;
}

/* KINESITHERAPIE — FINAL OVERRIDE */
.kinesitherapie-page .container,
.kinesitherapie-page .why-block,
.kinesitherapie-page .why-block .why-img,
.kinesitherapie-page .why-block .why-text {
  min-width: 0 !important;
}
.kinesitherapie-page .why-block .why-text {
  flex: 1 1 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.kinesitherapie-page :where(p, li, td) {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2.05 !important;
  overflow-wrap: anywhere;
  word-break: keep-all !important;
}
.kinesitherapie-page :is(h2, h3) + :where(p, div, section, article),
.kinesitherapie-page :is(h2, h3) ~ :where(p, div, section, article) {
  max-width: none !important;
  width: 100% !important;
}
.kinesitherapie-page
  :is(h2, h3)
  + :where(p, div, section, article)
  :where(p, li),
.kinesitherapie-page
  :is(h2, h3)
  ~ :where(p, div, section, article)
  :where(p, li) {
  text-align: justify !important;
  line-height: 2.05 !important;
  hyphens: auto !important;
}

/* ===== PRAKTISCH TITELS TERUG CENTREREN ===== */
.praktisch-page .section-title,
.praktisch-page #werkwijze-title,
.praktisch-page #tarieven-title,
.praktisch-page .bereikbaarheid .section-title {
  text-align: center !important;
}

/* HOME — Intro-tekst volledig benutten en justifiëren */
.intro-text .container {
  max-width: none;
  width: calc(100% - 4rem);
  margin-inline: auto;
}
.intro-text .intro-paragraph {
  text-align: center;
  text-justify: inter-word;
  hyphens: auto;
  max-width: none;
  margin: 0 0 1rem 0;
  line-height: 1.8;
  font-family: var(--font-sans);
}
.intro-text .btn.large {
  margin-top: 1.25rem;
}

/* Titels centreren op logopedie & kinesitherapie */
.logopedie-page .section-title,
.kinesitherapie-page .section-title {
  text-align: center !important;
  margin-bottom: 2rem;
  font-family: var(--font-deco);
}

/* Anchor offset & scroll behavior */
html {
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-behavior: smooth;
}
:target {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* OVER ONS — compact tegen header en consistente marges */
.site-header {
  padding-block: 0.3rem !important;
}
.header-inner {
  padding-block: 0.3rem !important;
}
body:not(.home-page) .logo-link img.logo {
  max-height: 200px !important;
  width: auto;
}

body:not(.home-page):not(.praktisch-page):not(.contact-page) main,
body:not(.home-page):not(.praktisch-page):not(.contact-page)
  section:first-of-type,
body:not(.home-page):not(.praktisch-page):not(.contact-page)
  .page-content:first-of-type,
body:not(.home-page):not(.praktisch-page):not(.contact-page)
  .container:first-of-type {
  padding-top: calc(var(--header-h) + 0.15rem) !important;
  margin-top: 0 !important;
}
.logopedie-page .page-content,
.kinesitherapie-page .page-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.overons-page {
  --header-h: 90px !important;
}
.overons-page main,
.overons-page section:first-of-type,
.overons-page .page-content:first-of-type,
.overons-page .container:first-of-type {
  padding-top: calc(var(--header-h) + 0rem) !important;
  margin-top: 0 !important;
}
.overons-page .why-ontpop {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 1rem !important;
}
.overons-page .person-block {
  margin-top: 1em !important;
}

/* Sierfont & accenten */
#test {
  font-family: "Adelina-Regular", cursive;
  color: #ffca43;
}
.person-text li::marker {
  color: #ffca43;
}

/* LOGOPEDIE + KINESITHERAPIE — consistente gutters */
.logopedie-page,
.kinesitherapie-page {
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
}
.logopedie-page .intro-text > .container,
.kinesitherapie-page .intro-text > .container {
  max-width: none;
  width: 100%;
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
}
.logopedie-page .intro-text > .container > *,
.kinesitherapie-page .intro-text > .container > * {
  margin-left: 0;
  margin-right: 0;
}

.logopedie-page .why-block,
.kinesitherapie-page .why-block {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin: 0 0 3rem 0;
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
}
.logopedie-page .why-block.reverse,
.kinesitherapie-page .why-block.reverse {
  flex-direction: row-reverse;
}
.logopedie-page .why-block .why-img,
.kinesitherapie-page .why-block .why-img {
  flex: 0 0 clamp(260px, 28%, 340px);
}
.logopedie-page .why-block .why-text,
.kinesitherapie-page .why-block .why-text {
  flex: 1 1 0;
  min-width: 0;
}

.logopedie-page .why-block .why-img,
.logopedie-page .why-block .why-text,
.kinesitherapie-page .why-block .why-img,
.kinesitherapie-page .why-block .why-text {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}

/* HARD FIX — WHY-BLOCK TEKST (alle inhoudspagina's) */
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page)
  .why-block
  .why-text {
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 0 !important;
}
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page)
  .why-block
  .why-img {
  flex: 0 0 300px !important;
}
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page)
  .why-block
  .why-text
  :where(p, li) {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  line-height: 2.05 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere;
}

/* PRAKTISCH — "Tarieven" titel uitlijnen met andere secties */
.praktisch-page #tarieven-title {
  margin-top: 3.5rem !important; /* was 1rem — nu gelijk met andere secties */
}

/* LOGOPEDIE — afbeeldingen exact links uitgelijnd */
.logopedie-page .why-block {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}
.logopedie-page .why-block.reverse {
  flex-direction: row !important; /* voorkom omkering */
}
.logopedie-page .why-block .why-img {
  flex: 0 0 400px !important; /* vaste kolombreedte */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.logopedie-page .why-block .why-img img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
}

/* LOGOPEDIE — aanbod-lijst lay-out (breedte + kolommen) */
.logopedie-page .aanbod-lijst {
  max-width: none !important;
  width: calc(100% - 4rem) !important;
  margin-inline: auto !important;
  padding-left: 12rem !important;
  padding-right: 12rem !important;
  box-sizing: border-box;
}
.logopedie-page .aanbod-lijst ul {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr; /* eerste kolom breder */
  justify-content: space-between;
  column-gap: 5rem;
  row-gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: disc; /* wordt hieronder overschreven naar none */
  list-style-position: outside;
}
.logopedie-page .aanbod-lijst li {
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text);
  font-family: var(--font-sans);
  padding-left: 1.25rem; /* wordt hieronder overschreven naar 3rem */
  text-indent: -0.75rem; /* wordt hieronder geneutraliseerd */
  white-space: normal;
}
.logopedie-page .aanbod-lijst a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease;
}
.logopedie-page .aanbod-lijst a:hover {
  color: var(--brand-orange);
}

/* LOGOPEDIE — aanbod-lijst: afbeelding als bullet (laatste variant) */
.logopedie-page .aanbod-lijst ul {
  list-style: none !important;
  padding-left: 0;
}
.logopedie-page .aanbod-lijst li {
  position: relative;
  padding-left: 3rem; /* ruimte voor de afbeelding */
  text-indent: 0 !important;
}
.logopedie-page .aanbod-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 2rem;
  height: 2rem;
  background-image: url("../images/bulletgeel.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.logopedie-page ul {
  list-style: none !important;
  padding-left: 0;
}

.logopedie-page li {
  position: relative;
  padding-left: 3rem; /* ruimte voor de afbeelding */
  text-indent: 0 !important;
}
.logopedie-page li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/bullet.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* KINESITHERAPIE — why-blocks gelijk aan logopedie */
.kinesitherapie-page .why-block,
.kinesitherapie-page .why-block.reverse {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  padding-inline: var(--page-gutter, clamp(1.25rem, 4vw, 4rem)) !important;
  box-sizing: border-box !important;
}
.kinesitherapie-page .why-block .why-img {
  flex: 0 0 400px !important; /* match logopedie */
  margin: 0 !important;
}
.kinesitherapie-page .why-block .why-img img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.3 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--radius);
  display: block !important;
}

.kinesitherapie-page .why-block .why-img #typlessen {
  object-fit: contain !important;
}

.kinesitherapie-page .why-block .why-text {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* KINESITHERAPIE — aanbod-lijst identiek aan logopedie (laatste & compact) */
.kinesitherapie-page {
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
}
.kinesitherapie-page .aanbod-lijst {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-left: var(
    --page-gutter
  ) !important; /* start = linkerkant afbeelding */
  padding-right: var(
    --page-gutter
  ) !important; /* einde = rechterkant tekstkolom */
  box-sizing: border-box !important;
}
.kinesitherapie-page .aanbod-lijst ul {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 0.8fr !important;
  column-gap: 5rem !important;
  row-gap: 0.75rem !important; /* compacter in de hoogte */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.kinesitherapie-page .aanbod-lijst li {
  position: relative !important;
  margin: 0 !important;
  padding-left: 3rem !important; /* zelfde als logopedie */
  text-indent: 0 !important;
  white-space: normal !important;
  line-height: 1.45 !important; /* compacter */
  font-size: 1.2rem !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  text-align: left !important;
}
.kinesitherapie-page .aanbod-lijst li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.45em !important;
  width: 2rem !important;
  height: 2rem !important;
  background-image: url("../images/bulletroze.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.kinesitherapie-page .aanbod-lijst a {
  color: var(--text) !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  transition: color 0.3s ease;
}
.kinesitherapie-page .aanbod-lijst a:hover {
  color: var(--brand-orange) !important;
}

/* Safety — nooit bullets in header/footer navigatie (laatste scoped variant) */
.kinesitherapie-page header .main-nav li::before,
.kinesitherapie-page footer .footer-nav li::before {
  content: none !important;
}

/* Logopedie specifieke tekstgroottes/kleuren */
.logopedie-page p {
  font-size: 1.2rem;
}
.logopedie-page li {
  font-size: 1.2rem;
}
.logopedie-page strong {
  color: #e6b837;
}

.kinesitherapie-page p {
  font-size: 1.2rem;
}
.kinesitherapie-page li {
  font-size: 1.2rem;
}

.kinesitherapie-page strong {
  color: #ff99ff;
}
/* === LOGOPEDIE & KINESITHERAPIE — Titelpositie finetuning === */
.logopedie-page .page-content:first-of-type,
.kinesitherapie-page .page-content:first-of-type,
.logopedie-page section:first-of-type,
.kinesitherapie-page section:first-of-type {
  margin-top: 0 !important;
  padding-top: calc(
    var(--header-h) + 0rem
  ) !important; /* halve cm minder ruimte */
}

/* Titel zelf licht optrekken */
.logopedie-page .section-title,
.kinesitherapie-page .section-title {
  margin-top: -1rem !important; /* nog iets dichterbij */
}

/* === Dropdown menu in header === */
.main-nav li.dropdown {
  position: relative;
}

.main-nav li.dropdown .dropdown-toggle {
  cursor: default; /* niet klikbaar als gewone link */
}

.main-nav li.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* direct onder de knop */
  left: 0;
  background: #fff;
  padding: 0.75rem 1rem;
  list-style: none;
  margin: 0;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  min-width: 200px;
}

.main-nav li.dropdown:hover .dropdown-menu,
.main-nav li.dropdown:focus-within .dropdown-menu {
  display: block; /* toon menu bij hover of focus */
}

.main-nav li.dropdown .dropdown-menu li {
  margin: 0;
  padding: 0;
}

.main-nav li.dropdown .dropdown-menu a {
  display: block;
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: var(--text);
  font-size: 1.5rem;
  font-family: var(--font-deco);
  transition: background 0.3s, color 0.3s;
  border-radius: 6px;
}

.main-nav li.dropdown .dropdown-menu a:hover {
  background: #99cccc;
  color: #fff;
}

/* Alleen aangepaste bullets binnen .aanbod-lijst (niet in nav of footer!) */

/* LOGOPEDIE — bullet-afbeeldingen */
.logopedie-page .aanbod-lijst ul {
  list-style: none !important;
  padding-left: 0;
}

.logopedie-page .aanbod-lijst li {
  position: relative;
  padding-left: 3rem; /* ruimte voor de afbeelding */
}

.logopedie-page .aanbod-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 2rem;
  height: 2rem;
  background-image: url("../images/bulletgeel.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* KINESITHERAPIE — bullet-afbeeldingen */
.kinesitherapie-page .aanbod-lijst ul {
  list-style: none !important;
  padding-left: 0;
}

.kinesitherapie-page .aanbod-lijst li {
  position: relative;
  padding-left: 3rem; /* ruimte voor de afbeelding */
}

.kinesitherapie-page .aanbod-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 2rem;
  height: 2rem;
  background-image: url("../images/bulletroze.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.kinesitherapie-page ul {
  list-style: none !important;
  padding-left: 0;
}

.kinesitherapie-page li {
  position: relative;
  padding-left: 3rem; /* ruimte voor de afbeelding */
  text-indent: 0 !important;
}
.kinesitherapie-page li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/bulletroze.png");
  background-size: contain;
  background-repeat: no-repeat;
}
/* OVERONS — bullets alleen in cards/person-blokken, NIET in het hero "Waarom Ontpop?" */
.overons-page .offers .card-text ul,
.overons-page .person-block .person-text ul {
  list-style: none;
  padding-left: 0;
}

.overons-page .offers .card-text li,
.overons-page .person-block .person-text li {
  position: relative;
  padding-left: 2.6rem; /* ruimte voor icoon */
  text-indent: 0;
}

.overons-page .offers .card-text li::before,
.overons-page .person-block .person-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.6rem;
  height: 1.3rem;
  background: url("../images/bulletgeel.png") no-repeat center / contain;
}
.kinesitherapie-page .aanbod-lijst li a:hover {
  color: #ff99ff;
}

/* Zorg dat header/footer nav geen bullets krijgen */
header .main-nav li::before,
footer .footer-nav li::before {
  content: none !important;
}

/* =========================
   AANBODLIJST HOVERKLEUREN — OVERSCHRIJVEN GLOBALE STIJL
========================= */

/* LOGOPEDIE → geel/oranje tint */
.logopedie-page .aanbod-lijst a:hover {
  color: #ffca43 !important; /* exact dezelfde geel/oranje als header */
}

/* KINESITHERAPIE → roze tint */
.kinesitherapie-page .aanbod-lijst a:hover {
  color: #ff99ff !important; /* exact dezelfde roze als header */
}

/* === OVERRIDE: Waarom Ontpop altijd links uitlijnen === */
.overons-page .why-ontpop,
.overons-page .why-ontpop * {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Zorg dat het blok niet gecentreerd wordt door grid of flex */
.overons-page .why-ontpop {
  display: block !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  max-width: none !important;
  width: auto !important;
  padding-left: calc(12rem + 1.5rem) !important;
  padding-right: calc(12rem - 1.5rem) !important;
}
/* OVER ONS — kaartafbeeldingen volledig tonen (2 naast elkaar) */
.overons-page .offers .card img {
  width: 100% !important;
  height: auto !important; /* geen vaste hoogte meer */
  max-height: none !important;
  object-fit: contain !important; /* volledige foto zichtbaar */
  display: block;
  background: #fff; /* optioneel: neutrale achtergrond */
}

/* (optioneel) kaart gelijkmatig laten meeschalen */
.overons-page .offers .card {
  align-items: center; /* center de afbeelding in de card */
}
/* === FINAL FIX LOGOPEDIE & KINESITHERAPIE === */

/* Afstand bovenaan op deze detailpagina's */
body.logopedie-page .page-content,
body.kinesitherapie-page .page-content {
  margin-top: 3rem !important;
  padding-top: 0 !important; /* of wat je zelf wilt */
}

/* Logopedie – grotere tekst + gele accenten */
body.logopedie-page p,
body.logopedie-page li {
  font-size: 1.2rem !important;
}

body.logopedie-page strong {
  color: #e6b837 !important;
}

/* Kinesitherapie – grotere tekst + roze accenten */
body.kinesitherapie-page p,
body.kinesitherapie-page li {
  font-size: 1.2rem !important;
}

body.kinesitherapie-page strong {
  color: #ff99ff !important;
}

/* =========================
   MOBILE HERO – finetuning
========================= */

/* Betere leesbaarheid CTA op geel */
.home-page .mobile-hero .hero-cta {
  color: #fff !important; /* i.p.v. grijs */
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
}

/* "Lees meer" chevron onderaan */
/* "Lees meer" met dubbele chevron */
.hero-scroll {
  position: absolute;
  bottom: clamp(0.75rem, 3.5vh, 2rem);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--brand-orange) !important; /* oranje kleur */
  font-weight: 500;
  font-size: 0.95rem;
  z-index: 2;
}

.hero-scroll .chevron-group {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

.hero-scroll .chevron {
  width: 28px;
  height: 28px;
  animation: chevronBounce 1.6s infinite;
  opacity: 0.95;
}

/* tweede pijl iets later starten */
.hero-scroll .chevron.second {
  animation-delay: 0.3s;
  opacity: 0.7;
}

@keyframes chevronBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* =========================================
   GLOBAL (geldt voor alle pagina's)
   ========================================= */
:root {
  /* vaste UI (logo/hamburger) */
  --mobile-ui-h: clamp(56px, 12vw, 84px);
  --mobile-ui-top: max(8px, env(safe-area-inset-top));
  --mobile-ui-offset: calc(var(--mobile-ui-h) + var(--mobile-ui-top));
}

.mobile-only {
  display: none !important;
}
.desktop-only {
  display: block !important;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.mobile-logo img {
  height: clamp(60px, 14vw, 90px) !important; /* groter logo */
  width: auto !important;
  display: block !important;
}

/* Pijltjes-animatie */
@keyframes chevronPulse {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

/* (eventuele) JS-klassen – worden op mobiel verder geneutraliseerd */
body.logo-hidden .mobile-logo {
  opacity: 0;
  pointer-events: none;
}
body.logo-force-show .mobile-logo {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================
   DESKTOP (≥769px)
   ========================================= */
@media (min-width: 769px) {
  /* visibility lock desktop */
  body .mobile-only {
    display: none !important;
    visibility: hidden !important;
  }
  body .desktop-only {
    display: block !important;
    visibility: visible !important;
  }

  /* mobiele UI en drawer NIET tonen op desktop */
  .mobile-logo,
  .hamburger,
  #mobile-drawer {
    display: none !important;
  }

  /* 🔒 Zorg dat desktop nooit snap aan heeft */
  html,
  body {
    scroll-snap-type: none !important;
  }
}

/* OVERONS — desktop: ruimte tussen 'Waarom Ontpop' en 'Wie zijn wij' minimaliseren */
@media (min-width: 769px) {
  /* nog kleinere :target-offset voor #wie-zijn-wij */
  .overons-page #wie-zijn-wij:target::before {
    height: 40px;
    margin-top: -40px;
  }

  /* geen extra ruimte onder de eerste sectie */
  .overons-page .why-ontpop {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .overons-page .why-ontpop > *:last-child {
    margin-bottom: 0 !important; /* laatste p/ul zonder extra bodem-marge */
  }

  /* geen extra ruimte boven de tweede sectie */
  .overons-page .offers {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .overons-page .offers .container {
    padding-top: 0 !important;
  }
  .overons-page .offers h2 {
    margin-top: 0 !important;
  }
}

/* =========================================
   GLOBAL (geldt voor alle pagina's)
   ========================================= */
:root {
  /* vaste UI (logo/hamburger) */
  --mobile-ui-h: clamp(56px, 12vw, 84px);
  --mobile-ui-top: max(8px, env(safe-area-inset-top));
  --mobile-ui-offset: calc(var(--mobile-ui-h) + var(--mobile-ui-top));
}

.mobile-only {
  display: none !important;
}
.desktop-only {
  display: block !important;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.mobile-logo img {
  height: clamp(60px, 14vw, 90px) !important;
  width: auto !important;
  display: block !important;
}

/* Pijltjes-animatie */
@keyframes chevronPulse {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

/* (eventuele) JS-klassen – worden op mobiel verder geneutraliseerd */
body.logo-hidden .mobile-logo {
  opacity: 0;
  pointer-events: none;
}
body.logo-force-show .mobile-logo {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================
   DESKTOP (≥769px)
   ========================================= */
@media (min-width: 769px) {
  /* visibility lock desktop */
  body .mobile-only {
    display: none !important;
    visibility: hidden !important;
  }
  body .desktop-only {
    display: block !important;
    visibility: visible !important;
  }

  /* mobiele UI en drawer NIET tonen op desktop */
  .mobile-logo,
  .hamburger,
  #mobile-drawer {
    display: none !important;
  }

  /* 🔒 Zorg dat desktop nooit snap aan heeft */
  html,
  body {
    scroll-snap-type: none !important;
  }
}

/* =========================================
   MOBIEL (≤768px) — GLOBAL (site-breed)
   ========================================= */
@media (max-width: 768px) {
  /* visibility lock mobiel */
  body .mobile-only {
    display: block !important;
    visibility: visible !important;
  }
  body .desktop-only {
    display: none !important;
    visibility: hidden !important;
  }

  /* scroll-snap per scherm */
  html,
  body {
    scroll-snap-type: y mandatory;
  }
  html.no-snap,
  body.no-snap {
    scroll-snap-type: none !important;
  }

  /* ===== VASTE UI: logo + hamburger (op elk mobiel blok zichtbaar) ===== */
  .mobile-logo {
    position: fixed !important;
    top: var(--mobile-ui-top) !important;
    left: calc(max(8px, env(safe-area-inset-left))) !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-logo img {
    height: clamp(85px, 20vw, 120px) !important;
    width: auto !important;
    display: block !important;
  }

  .hamburger {
    position: fixed !important;
    top: calc(var(--mobile-ui-top) + 4px) !important;
    right: calc(max(12px, env(safe-area-inset-right))) !important;
    width: 42px;
    height: 36px;
    display: inline-grid;
    align-content: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    z-index: 10000 !important;
  }
  .hamburger span {
    height: 3px;
    width: 100%;
    border-radius: 3px;
    background: var(--brand-orange) !important;
  }
  body.first-mobile-block-inview .mobile-logo {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ===== Alle mobiele secties (site-breed) ===== */
  section.mobile-only,
  section[class^="mobile-"],
  section[class*=" mobile-"] {
    min-height: 100svh !important;
    height: 100svh !important;
    margin: 0 !important;
    padding-top: calc(var(--mobile-ui-offset) + 32px) !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    position: relative;
    isolation: isolate;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: clip !important;
    text-align: center;
  }
  section.mobile-only::before,
  section[class^="mobile-"]::before,
  section[class*=" mobile-"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
    background: inherit;
    z-index: 1;
  }
  .overons-page .why-ontpop.mobile-only,
  .overons-page .mobile-wie-zijn-wij,
  .overons-page .mobile-loes,
  .overons-page .mobile-meet-liselotte,
  .overons-page .mobile-meet-loes,
  .overons-page .mobile-social {
    /* geen eigen padding-blok; match de globale waarden */
    padding-top: calc(var(--mobile-ui-offset) + 32px) !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  /* ===== “Lees meer” + pijlen — MOBIEL ===== */

  .mobile-only .hero-scroll,
  .mobile-only .section-scroll {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0.25cm !important; /* Lees meer blijft hoger */
    display: grid !important;
    justify-items: center !important;
    gap: 0rem !important; /* ruimte tussen tekst en pijlen */
    z-index: 5 !important;
    text-decoration: none !important;
    color: var(--brand-orange);
  }

  .mobile-only .hero-scroll span,
  .mobile-only .section-scroll span {
    order: -1; /* tekst boven de pijlen */
  }

  .mobile-only .hero-scroll .chevron,
  .mobile-only .section-scroll .chevron {
    width: clamp(70px, 18vw, 100px) !important; /* zelfde grootte */
    height: auto !important;
    animation: chevronPulse 1.6s infinite;
  }

  .mobile-only .hero-scroll .chevron path,
  .mobile-only .section-scroll .chevron path {
    stroke-width: 1.6 !important;
    vector-effect: non-scaling-stroke;
  }

  /* pijlen dichter bij elkaar */
  .mobile-only .hero-scroll .chevron-group,
  .mobile-only .section-scroll .chevron-group {
    display: grid !important;
    line-height: 0 !important;
    margin-top: 0 !important; /* meer overlap → dichter */
  }

  .mobile-only .hero-scroll .chevron.second,
  .mobile-only .section-scroll .chevron.second {
    margin-top: -90px !important; /* tweede pijl korter onder eerste */
    opacity: 0.8;
  }

  /* neutraliseer evt. JS die het logo verbergt */
  body.logo-hidden .mobile-logo,
  body.logo-force-show .mobile-logo {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =========================================
   GLOBAL MOBILE PILL STYLING (site-breed)
   ========================================= */
@media (max-width: 768px) {
  /* Algemeen: één uniforme “pill” op alle mobiele secties */
  section[class^="mobile-"] h2,
  section[class*=" mobile-"] h2 {
    font-family: var(--font-deco);
    font-weight: 400;
    font-size: clamp(1.4rem, 7vw, 2.2rem);
    line-height: 1.1;
    text-align: center;

    /* hoger & breder dan “Ons aanbod”-pil */
    padding: 1.5rem 2.25rem;

    /* echte pill, géén full width */
    display: inline-block;
    width: auto !important;
    max-width: calc(100% - 2rem);

    border-radius: 32px / 26px;
    margin: 0.4rem 0 1rem;

    /* kleur per blok/pagina via CSS vars */
    background: var(--pill-bg, #fff);
    color: var(--pill-color, var(--brand-orange));
  }

  /* centreren van h2 wrappers (waar aanwezig) */
  section[class^="mobile-"] .mo-title-pill,
  section[class*=" mobile-"] .mo-title-pill,
  section[class^="mobile-"] .vision-title-wrap,
  section[class*=" mobile-"] .vision-title-wrap {
    display: grid;
    place-items: center;
    text-align: center;
  }
  .mobile-social .ms-inner > h2 {
    align-self: center; /* ⬅️ centreert de pil als flex-item */
  }
}

/* =========================================
   HOMEPAGE-SPECIFIEK (alleen .home-page)
   ========================================= */
@media (max-width: 768px) {
  .home-page .site-header,
  .home-page .intro-band,
  .home-page .intro-text,
  .home-page .offers,
  .home-page .instagram,
  .home-page .site-footer {
    display: none !important;
  }

  /* HERO */

  /* haal horizontale padding van de hero-sectie weg */
  /* ===== HERO (mobiel) ===== */
  .home-page .mobile-hero {
    background: var(--brand-light);
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    text-align: center;
  }

  .home-page .mobile-hero .hero-inner {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 max(1rem, env(safe-area-inset-right)) 0
      max(1rem, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  /* afbeelding volledig gecentreerd */
  .home-page .mobile-hero .hero-image {
    display: block;
    width: 100vw;
    max-width: none;
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-45%) translateY(30%) scale(1.28);
    /* ↑ verhoogd van 4% naar 10% voor echte verticale centrering */
    transform-origin: center center;
    object-fit: contain;
    object-position: center center;
  }

  .home-page .mobile-hero .hero-title {
    font-family: var(--font-deco);
    font-weight: 500;
    text-align: center;
    color: var(--text);
    font-size: clamp(1.4rem, 6vw, 2rem);
    margin: 6rem 0 1rem 0;
    padding: 0 1rem;
  }

  /* VISIE */
  .home-page .mobile-vision {
    background: color-mix(in srgb, var(--brand-orange) 35%, white);
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .home-page .mobile-vision .vision-title-wrap {
    margin: 0.35rem 0 0.75rem;
  }
  .home-page .mobile-vision h2 {
    --pill-bg: #fff;
    --pill-color: var(--brand-orange);
  }
  .home-page .mobile-vision .vision-copy {
    max-width: 38ch;
    margin: 0 auto;
    color: #fff;
    line-height: 1.9;
  }
  .home-page .mobile-vision .vision-copy p {
    margin: 0 0 1rem;
  }

  /* AANBOD */
  .home-page .mobile-offers {
    background: #fff;
    display: grid;
    gap: 1.1rem;
    text-align: center;
  }
  .home-page .mobile-offers .mo-title-pill {
    place-items: center;
  }
  .home-page .mobile-offers h2 {
    --pill-bg: #ffd3ae;
    --pill-color: #fff;
  }
  .home-page .mobile-offers .mo-card {
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    text-align: left;
  }
  .home-page .mobile-offers .mo-card-title {
    font-family: var(--font-deco);
    font-weight: 400;
    color: var(--brand-orange);
    font-size: clamp(1.15rem, 6vw, 1.6rem);
    margin: 0.2rem 0 0.3rem;
  }
  .home-page .mobile-offers .mo-card-media img {
    width: min(560px, 100%);
    height: auto;
    display: block;
    border-radius: 16px;
  }
  .home-page .mobile-offers .mo-card-text {
    max-width: 36ch;
    margin: 0 auto;
  }
  .home-page .mobile-offers .mo-card-cta {
    margin-top: 0.25rem;
    margin-bottom: 5rem;
    border-radius: 12px;
    padding: 0.75rem 1.4rem;
    background: #ffd3ae !important;
    color: #fff !important;
  }

  /* KINE */
  .home-page .mobile-kine {
    background: #fff;
    display: grid;
    gap: 0.9rem;
    justify-items: center;
    text-align: center;
  }
  .home-page .mobile-kine .mk-title {
    font-family: var(--font-deco);
    font-weight: 400;
    color: var(--brand-orange);
    font-size: clamp(1.2rem, 6.5vw, 1.7rem);
    margin: 0.25rem 0;
  }
  .home-page .mobile-kine .mk-media img {
    width: min(560px, 100%);
    height: auto;
    display: block;
    border-radius: 18px;
  }
  .home-page .mobile-kine .mk-text {
    max-width: 36ch;
    margin: 0.25rem auto 0.6rem;
  }
  .home-page .mobile-kine .mk-cta {
    background: #ffd3ae;
    color: #fff !important;
    border-radius: 12px;
    padding: 0.8rem 1.6rem;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 5rem;
  }
  .home-page .mobile-kine .mk-cta:hover {
    filter: brightness(0.97);
  }

  /* SOCIAL (mobiele footerblok) */
  .home-page .mobile-social {
    background: #ffd3ae;
    color: #fff;
    display: grid;
    place-items: center;
  }
  .home-page .mobile-social h2 {
    --pill-bg: #fff;
    --pill-color: var(--brand-orange);
  }
  .home-page .mobile-social .ms-icons {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2rem;
  }
  .home-page .mobile-social .ms-icon {
    color: #fff;
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    transition: opacity 0.3s ease;
  }
  .home-page .mobile-social .ms-icon:hover {
    opacity: 0.8;
  }
  .home-page .mobile-social .ms-footer-nav,
  .home-page .mobile-social .ms-footer-location {
    background: #fff;
    color: var(--brand-orange);
    width: 100vw;
    margin: 0;
    box-sizing: border-box;
    border: none;
  }
  .home-page .mobile-social .ms-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem 0 1rem;
    font-size: 0.95rem;
  }
  .home-page .mobile-social .ms-footer-nav a {
    color: var(--brand-orange);
    text-decoration: none;
    font-weight: 500;
  }
  .home-page .mobile-social .ms-footer-nav a:hover {
    text-decoration: underline;
  }
  .home-page .mobile-social .ms-footer-location {
    font-size: 0.9rem;
    padding-bottom: 1.25rem;
  }
}
/* Pijl in hero verbergen zodra #visie zichtbaar is (JS zet .hide-hero-arrows) */
@media (max-width: 768px) {
  body.hide-hero-arrows .mobile-hero .hero-scroll {
    display: none !important;
  }
}

/* =========================================
   DESKTOP (≥769px) — opgeschoonde reset
   ========================================= */
@media (min-width: 769px) {
  body .mobile-only {
    display: none !important;
    visibility: hidden !important;
  }
  body .desktop-only {
    display: block !important;
    visibility: visible !important;
  }

  .mobile-logo,
  .hamburger,
  #mobile-drawer {
    display: none !important;
    position: static !important;
    z-index: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html,
  body {
    scroll-snap-type: none !important;
  }

  section.mobile-only,
  section[class^="mobile-"],
  section[class*=" mobile-"] {
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    isolation: auto !important;
    overflow: visible !important;
    scroll-snap-align: auto !important;
    scroll-snap-stop: normal !important;
    text-align: center !important;
  }

  section.mobile-only::before,
  section[class^="mobile-"]::before,
  section[class*=" mobile-"]::before {
    content: none !important;
  }

  .hero-scroll,
  .section-scroll {
    position: static !important;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
  }

  :root {
    --desktop-header-h: 120px;
  }
  body:not(.home-page) {
    padding-top: var(--desktop-header-h) !important;
  }
  html {
    scroll-padding-top: var(--desktop-header-h);
  }
  [id],
  section[id],
  [id].section,
  h1[id],
  h2[id],
  h3[id] {
    scroll-margin-top: var(--desktop-header-h);
  }
  /* :target::before {
    content: "";
    display: block;
    height: var(--desktop-header-h);
    margin-top: calc(-1 * var(--desktop-header-h));
  } */
  .site-header.header--desktop {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* =========================================
   MOBILE FOOTER — full-bleed, bottom-glued
   ========================================= */
@media (max-width: 768px) {
  .mobile-social,
  .mobile-footer {
    background: var(--mobile-footer-bg, #ffd3ae);
    color: #fff;
    padding-top: calc(var(--mobile-ui-offset) + 16px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: relative;
  }

  .mobile-social .ms-inner,
  .mobile-footer .ms-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 !important;
  }

  /* (de h2 gebruikt de globale pill-styling hierboven) */

  .mobile-social .ms-icons,
  .mobile-footer .ms-icons {
    align-self: center;
    display: flex;
    gap: clamp(28px, 12vw, 56px);
    margin: clamp(12px, 2.5vh, 24px) 0 0 0;
  }
  .mobile-social .ms-icon i,
  .mobile-footer .ms-icon i {
    font-size: clamp(120px, 28vw, 180px);
    line-height: 1;
    color: #fff !important;
  }

  /* full-bleed witte balken onderaan */
  .mobile-social .ms-footer-nav,
  .mobile-footer .ms-footer-nav,
  .mobile-social .ms-footer-location,
  .mobile-footer .ms-footer-location {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    margin: 0 !important;
    background: #fff !important;
  }

  .mobile-social .ms-footer-nav,
  .mobile-footer .ms-footer-nav {
    margin-top: auto !important;
    color: var(--brand-orange) !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.2rem 0 0.9rem !important;
  }
  .mobile-social .ms-footer-nav a,
  .mobile-footer .ms-footer-nav a {
    color: var(--brand-orange) !important;
    text-decoration: none;
    font-weight: 500;
  }
  .mobile-social .ms-footer-nav a:hover,
  .mobile-footer .ms-footer-nav a:hover {
    text-decoration: underline;
  }

  .mobile-social .ms-footer-location,
  .mobile-footer .ms-footer-location {
    color: var(--brand-orange) !important;
    text-align: right !important;
    padding: 8px max(1rem, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom) + 18px)
      max(1rem, env(safe-area-inset-left)) !important;
    margin-top: -1px !important;
    margin-bottom: -6px !important;
    background: #fff !important;
  }
  .mobile-social .ms-footer-location i,
  .mobile-footer .ms-footer-location i {
    margin-right: 0.4rem;
  }

  .mobile-social::after,
  .mobile-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: #fff;
    z-index: 2;
  }
}

/* =========================================
   OVERONS — MOBIEL (≤768px)
   - 1 sectie per scherm (—vh)
   - uniforme top-offset onder vaste UI
   - geen 'bleed' tussen secties
   ========================================= */
@media (max-width: 768px) {
  /* ===== Container: snappen zonder extra padding ===== */
  .overons-page {
    --mobile-ui-offset: calc(var(--mobile-ui-h) + var(--mobile-ui-top));
  }
  main.page-content.overons-page {
    scroll-snap-type: y mandatory !important;
    scroll-padding-top: 0 !important;
    scroll-padding-bottom: 0 !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: smooth !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main.page-content.overons-page > section {
    margin: 0 !important;
  }

  /* ===== Alle Overons-mobiele secties: exact 1 “stabiel viewport”-scherm ===== */
  .overons-page .why-ontpop.mobile-only,
  .overons-page .mobile-wie-zijn-wij,
  .overons-page .mobile-loes,
  .overons-page .mobile-meet-liselotte,
  .overons-page .mobile-meet-loes,
  .overons-page .mobile-social {
    height: calc(var(--vh, 1vh) * 100) !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;

    /* uniforme ruimte onder logo/hamburger */
    padding-top: calc(var(--mobile-ui-offset) + 32px) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* Anker-scroll (bv. 'Lees meer'): land exact bovenaan */
  :target {
    scroll-margin-top: 0 !important;
  }

  /* ===== Eerste blok: Waarom Ontpop ===== */
  .overons-page .why-ontpop.mobile-only {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: left !important;
    background: var(--brand-light, #ffeab4) !important;
    isolation: isolate !important;
    transform: translateZ(0); /* compositor nudge */
    backface-visibility: hidden !important;
  }
  .overons-page .why-ontpop.mobile-only h1 {
    background: #fff;
    color: #ffca43;
    font-family: var(--font-deco);
    font-weight: 400;
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    line-height: 1.1;
    padding: 1.5rem 2.25rem;
    border-radius: 32px / 26px;
    max-width: calc(100% - 2rem);
    margin: 0.4rem auto 1rem auto !important;
    text-align: center;
    display: inline-block;
  }
  .overons-page .why-ontpop.mobile-only p,
  .overons-page .why-ontpop.mobile-only ul {
    max-width: 38ch;
    width: 100%;
    margin: 0 0 1rem 0;
    color: #6e6e6e;
    line-height: 1.9;
  }
  .overons-page .why-ontpop.mobile-only ul {
    list-style: none;
    padding: 0;
  }
  .overons-page .why-ontpop.mobile-only li {
    --bullet-size: 2.8rem;
    --bullet-gap: 0.6rem;
    position: relative;
    padding-left: calc(var(--bullet-size) + var(--bullet-gap));
    margin: 0.55rem 0;
  }
  .overons-page .why-ontpop.mobile-only li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: var(--bullet-size);
    height: var(--bullet-size);
    background: url("../images/pijl-geel.png") no-repeat center / contain !important;
  }
  .overons-page .why-ontpop.mobile-only .section-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    color: #ffca43 !important;
    text-decoration: none;
  }
  .overons-page .why-ontpop.mobile-only .section-scroll .chevron path {
    stroke: #ffca43 !important;
  }
  .overons-page .hamburger span {
    background: #ffca43 !important;
  }

  /* ===== Wie zijn wij (Liselotte) ===== */
  .overons-page .mobile-wie-zijn-wij {
    background: #fff;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 1.1rem;
    isolation: isolate !important;
    overflow: hidden !important;
    transform: translateZ(0);
    backface-visibility: hidden !important;
  }
  .overons-page .mobile-wie-zijn-wij .mo-title-pill {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .overons-page .mobile-wie-zijn-wij h2 {
    --pill-bg: #ffca43;
    --pill-color: #fff;
    font-family: var(--font-deco);
    font-weight: 400;
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.1;
    padding: 1.3rem 2.4rem;
    border-radius: 32px / 26px;
    background: var(--pill-bg);
    color: var(--pill-color);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0.4rem auto 1.2rem auto;
  }

  /* Liselotte */
  .overons-page .mobile-wie-zijn-wij img {
    width: min(560px, 100%) !important;
    height: auto !important;
    max-height: 72vh !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 18px !important;
    display: block !important;
    margin: 0.4rem auto 1rem !important; /* iets minder marge onderaan */
  }

  .overons-page .mobile-wie-zijn-wij .mo-card {
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    text-align: center;
  }
  .overons-page .mobile-wie-zijn-wij .mo-card-title {
    font-family: var(--font-deco);
    font-weight: 400;
    color: #ffca43;
    font-size: clamp(1.15rem, 6vw, 1.6rem);
    margin: 0.2rem auto 0.3rem; /* auto = centreren */
    text-align: center !important;
    display: flex;
    justify-content: center;
  }

  .overons-page .mobile-wie-zijn-wij .mo-card-text {
    max-width: 38ch;
    margin: 0.25rem auto 0.75rem;
    color: #6e6e6e;
    line-height: 1.9;
    font-size: 1rem;
    text-align: left;
  }
  .overons-page .mobile-wie-zijn-wij .btn {
    margin-top: 0.5rem;
    border-radius: 12px;
    padding: 0.75rem 1.4rem;
    background: #ffca43;
    color: #fff !important;
    text-decoration: none;
    display: inline-block;
  }
  .overons-page .mobile-wie-zijn-wij .section-scroll {
    color: #ffca43 !important;
  }
  .overons-page .mobile-wie-zijn-wij .section-scroll .chevron path {
    stroke: #ffca43 !important;
  }

  /* Dun topmasker tegen 1–2px artefact bij anchor-scroll */
  .overons-page .mobile-wie-zijn-wij::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 4px;
    background: #fff;
    pointer-events: none;
    z-index: 2;
  }

  /* ===== Loes (kaart) ===== */
  .overons-page .mobile-loes {
    background: #fff;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
  }
  .overons-page .mobile-loes .mo-card {
    display: grid;
    gap: 0.8rem !important;
    justify-items: center;
  }

  /* Loes */
  .overons-page .mobile-loes .mo-card-media img {
    width: min(560px, 100%) !important;
    height: auto !important;
    max-height: 72vh !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 18px !important;
    display: block !important;
    margin: 1.4rem auto 1rem !important; /* exact dezelfde marge */
  }
  .overons-page .mobile-loes .mo-card-title {
    font-family: var(--font-deco);
    font-weight: 400;
    color: #ffca43;
    font-size: clamp(1.15rem, 6vw, 1.6rem);
    margin: 0.2rem 0 0.3rem;
  }
  .overons-page .mobile-loes .mo-card-text {
    max-width: 38ch;
    margin: 0.25rem auto 0.75rem;
    color: #6e6e6e;
    line-height: 1.9;
    font-size: 1rem;
    text-align: left;
  }
  .overons-page .mobile-loes .btn {
    border-radius: 12px;
    padding: 0.75rem 1.4rem;
    background: #ffca43;
    color: #fff !important;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.25rem;
  }
  .overons-page .mobile-loes .section-scroll {
    color: #ffca43 !important;
  }
  .overons-page .mobile-loes .section-scroll .chevron path {
    stroke: #ffca43 !important;
  }

  /* ===== Meet Liselotte ===== */
  .overons-page .mobile-meet-liselotte {
    background: var(--brand-light, #ffeab4);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 1rem;
  }
  .overons-page .mobile-meet-liselotte .mo-title-pill {
    display: grid;
    place-items: center;
    width: 100%;
  }
  .overons-page .mobile-meet-liselotte h2 {
    --pill-bg: #fff;
    --pill-color: #ffca43;
    font-family: var(--font-deco);
    font-weight: 400;
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.1;
    padding: 1.3rem 2.4rem;
    border-radius: 32px / 26px;
    background: var(--pill-bg);
    color: var(--pill-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0.4rem auto 0.8rem;
  }
  .overons-page .mobile-meet-liselotte .ml-copy {
    max-width: 40ch;
    margin: 0 auto;
    color: #6e6e6e;
    line-height: 1.9;
    text-align: left;
  }
  .overons-page .mobile-meet-liselotte .ml-copy p {
    margin: 0 0 1rem;
  }
  .overons-page .mobile-meet-liselotte .ml-copy h3 {
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 0.6rem;
    text-decoration: underline;
    color: inherit;
  }
  .overons-page .mobile-meet-liselotte .ml-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.25rem;
  }
  .overons-page .mobile-meet-liselotte .ml-list li {
    --bullet-size: 2.8rem;
    --bullet-gap: 0.6rem;
    position: relative;
    padding-left: calc(var(--bullet-size) + var(--bullet-gap));
    margin: 0.55rem 0;
    line-height: 1.35;
  }
  .overons-page .mobile-meet-liselotte .ml-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: var(--bullet-size);
    height: var(--bullet-size);
    background: url("../images/pijl-geel.png") no-repeat center / contain !important;
  }
  .overons-page .mobile-meet-liselotte .btn {
    border-radius: 12px;
    padding: 0.8rem 1.6rem;
    background: #ffca43;
    color: #fff !important;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.2rem;
  }

  /* ===== Meet Loes ===== */
  .overons-page .mobile-meet-loes {
    background: var(--brand-light, #ffeab4);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 1rem;
    padding-bottom: 1rem;
  }
  .overons-page .mobile-meet-loes .mo-title-pill {
    display: grid;
    place-items: center;
    width: 100%;
  }
  .overons-page .mobile-meet-loes h2 {
    --pill-bg: #fff;
    --pill-color: #ffca43;
    font-family: var(--font-deco);
    font-weight: 400;
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.1;
    padding: 1.3rem 2.4rem;
    border-radius: 32px / 26px;
    background: var(--pill-bg);
    color: var(--pill-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0.4rem auto 0.8rem;
  }
  .overons-page .mobile-meet-loes .ml-copy {
    max-width: 40ch;
    margin: 0 auto;
    color: #6e6e6e;
    line-height: 1.9;
    text-align: left;
  }
  .overons-page .mobile-meet-loes .ml-copy p {
    margin: 0 0 1rem;
  }
  .overons-page .mobile-meet-loes .ml-copy h3 {
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 0.6rem;
    text-decoration: underline;
    color: inherit;
  }
  .overons-page .mobile-meet-loes .ml-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.25rem;
  }
  .overons-page .mobile-meet-loes .ml-list li {
    --bullet-size: 2.8rem;
    --bullet-gap: 0.6rem;
    position: relative;
    padding-left: calc(var(--bullet-size) + var(--bullet-gap));
    margin: 0.55rem 0;
    line-height: 1.35;
  }
  .overons-page .mobile-meet-loes .ml-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: var(--bullet-size);
    height: var(--bullet-size);
    background: url("../images/pijl-geel.png") no-repeat center / contain !important;
  }
  .overons-page .mobile-meet-loes .btn {
    border-radius: 12px;
    padding: 0.8rem 1.6rem;
    background: #ffca43;
    color: #fff !important;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.2rem;
  }

  /* ===== Socials (mobiele footerblok) ===== */
  .overons-page .mobile-social {
    background: #fff !important;
    color: #ffca43 !important;
  }
  .overons-page .mobile-social #social-title {
    --pill-bg: var(--brand-light);
    --pill-color: #fff;
    color: #fff !important;
  }
  .overons-page .mobile-social .ms-icon i {
    color: var(--brand-light) !important;
  }
  .overons-page .mobile-social .ms-footer-nav,
  .overons-page .mobile-social .ms-footer-location {
    background: var(--brand-light) !important;
    color: #fff !important;
  }
  .overons-page .mobile-social .ms-footer-nav a,
  .overons-page .mobile-social .ms-footer-location i {
    color: #fff !important;
  }

  /* Onderste rand van de footer ook geel maken (override globale witte ::after) */
  .overons-page .mobile-social::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: var(--brand-light) !important;
    z-index: 2;
    pointer-events: none;
  }

  /* ===== Uniforme tekststijl in mobiele blokken ===== */
  .overons-page .mobile-only p,
  .overons-page .mobile-only li {
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    color: #6e6e6e;
    text-align: left !important;
    margin: 0 0 1rem 0;
  }
  .overons-page .mobile-only ul {
    padding: 0;
    margin: 0 0 1rem 0;
    list-style: none;
  }

  /* Snap uit wanneer <html> no-snap krijgt (JS) */
  html.no-snap main.page-content.overons-page {
    scroll-snap-type: none !important;
  }

  /* Buttons “Afspraak maken”: centreren zonder maat te wijzigen */
  .overons-page .mobile-meet-liselotte .ml-copy .btn,
  .overons-page .mobile-meet-loes .ml-copy .btn {
    display: block !important;
    width: max-content !important;
    margin: 2rem auto 0 !important;
  }
  .overons-page .mobile-meet-loes .ml-copy .btn {
    margin-bottom: 1rem !important;
  }

  /* =========================================================
   MOBIEL — Hero / Bullet styling (geldig voor ALLE mobiele pagina’s)
   ========================================================= */
  @media (max-width: 768px) {
    /* Algemene containerstijl voor alle mobiele hero-secties */
    section[class*="mobile-"] {
      height: calc(var(--vh, 1vh) * 100);
      min-height: calc(var(--vh, 1vh) * 100);
      padding-top: calc(var(--mobile-ui-offset) + 32px);
      padding-right: max(1rem, env(safe-area-inset-right));
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      margin: 0;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      background: var(--brand-light, #ffeab4);
      display: grid;
      align-content: start;
      justify-items: stretch;
      gap: 0.9rem;
      text-align: left;
    }

    /* Titelstijl (werkt voor alle mobiele secties met pill of h2) */
    section[class*="mobile-"] .mo-title-pill {
      display: grid;
      place-items: center;
      text-align: center;
      width: 100%;
    }

    section[class*="mobile-"] h2 {
      --pill-bg: #fff;
      --pill-color: #ffca43;
      margin: 0.4rem auto 1rem;
    }

    /* Typografie */
    section[class*="mobile-"] p,
    section[class*="mobile-"] li {
      font-family: var(
        --font-body,
        "Open Sans",
        "Helvetica Neue",
        Arial,
        sans-serif
      );
      font-size: 1rem;
      line-height: 1.9;
      color: #6e6e6e;
      text-align: left;
    }

    section[class*="mobile-"] p {
      margin: 0 0 1rem;
    }

    section[class*="mobile-"] h3 {
      font-family: var(
        --font-body,
        "Open Sans",
        "Helvetica Neue",
        Arial,
        sans-serif
      );
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.9;
      color: #6e6e6e;
      text-align: left;
      margin: 0.25rem 0;
      justify-self: start;
    }

    section[class*="mobile-"] .mo-intro {
      max-width: 40ch;
      width: 100%;
      margin: 0 0 0.5rem;
      text-align: left;
    }
    body.home-page .mobile-offers .mo-card-title {
      text-align: center !important;
      justify-self: center;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }
    /* =========================================================
     Bullets (één universele definitie, alle mobiele pagina's)
     ========================================================= */
    section[class*="mobile-"] ul {
      list-style: none;
      padding: 0;
      margin: 0.15rem 0 0.55rem;
      max-width: 40ch;
      width: 100%;
    }

    section[class*="mobile-"] ul li {
      position: relative;
      padding-left: 3rem; /* horizontale afstand pijl ↔︎ tekst */
      margin: 0.35rem 0; /* verticale afstand tussen items */
      line-height: 1.6; /* regelafstand binnen item */
    }

    section[class*="mobile-"] ul li::before {
      content: "";
      position: absolute;
      left: 0;
      top: -0.5em; /* pijl nét hoger → uitlijnen met 1e regel */
      width: 3rem; /* pijl-grootte */
      height: 3rem;
      background: url("../images/pijl-geel.png") no-repeat center / contain;
    }

    section[class*="mobile-"] ul a {
      color: inherit;
      text-decoration: none;
    }

    :is(
        section[class^="mobile-"],
        section[class*=" mobile-"],
        .mobile-only,
        .overons-page .why-ontpop.mobile-only,
        .overons-page .mobile-meet-liselotte,
        .overons-page .mobile-meet-loes,
        .overons-page .mobile-wie-zijn-wij
      )
      :is(.mo-bullets, .ml-list, ul) {
      list-style: none !important;
      padding: 0 !important;
      margin: 0.15rem 0 0.55rem !important;
      max-width: 40ch;
      width: 100%;
    }

    /* LI’s: horizontale afstand (padding-left), verticale afstand (margin), line-height */
    :is(
        section[class^="mobile-"],
        section[class*=" mobile-"],
        .mobile-only,
        .overons-page .why-ontpop.mobile-only,
        .overons-page .mobile-meet-liselotte,
        .overons-page .mobile-meet-loes,
        .overons-page .mobile-wie-zijn-wij
      )
      :is(.mo-bullets, .ml-list, ul)
      > li {
      position: relative !important;
      padding-left: 3rem !important; /* ⬅︎ horizontale afstand pijl ↔︎ tekst */
      margin: 0.05rem 0 !important; /* ⬅︎ verticale afstand tussen bullets */
      line-height: 1.8 !important; /* ⬅︎ regelafstand binnen item */
      text-align: left !important;
    }

    /* De gele pijlen zelf: grootte en verticale uitlijning */
    :is(
        section[class^="mobile-"],
        section[class*=" mobile-"],
        .mobile-only,
        .overons-page .why-ontpop.mobile-only,
        .overons-page .mobile-meet-liselotte,
        .overons-page .mobile-meet-loes,
        .overons-page .mobile-wie-zijn-wij
      )
      :is(.mo-bullets, .ml-list, ul)
      > li::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: -0.5em !important; /* ⬅︎ iets hoger = visueel gelijk met 1e regel */
      width: 3rem !important; /* ⬅︎ pijl-grootte */
      height: 3rem !important;
      background: url("../images/pijl-geel.png") no-repeat center / contain !important;
    }

    /* Links binnen bullets */
    :is(
        section[class^="mobile-"],
        section[class*=" mobile-"],
        .mobile-only,
        .overons-page .why-ontpop.mobile-only,
        .overons-page .mobile-meet-liselotte,
        .overons-page .mobile-meet-loes,
        .overons-page .mobile-wie-zijn-wij
      )
      :is(.mo-bullets, .ml-list, ul)
      a {
      color: inherit !important;
      text-decoration: none !important;
    }
    /* =========================================================
     Afbeelding / media / lees meer (optioneel: visueel consistent)
     ========================================================= */
    section[class*="mobile-"] .mo-card-media {
      width: min(500px, 88%);
      margin: 2rem auto 0;
      aspect-ratio: 4/3;
      border-radius: 18px;
      overflow: hidden;
    }

    section[class*="mobile-"] .mo-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    section[class*="mobile-"] .section-scroll {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: max(22px, env(safe-area-inset-bottom) + 14px);
      color: #ffca43 !important;
      text-decoration: none;
    }

    section[class*="mobile-"] .section-scroll .chevron path {
      stroke: #ffca43 !important;
    }

    .hamburger span {
      background: #ffca43 !important;
    }
  }
}
/* ============================================================
   MOBIEL — GEDEELDE BASIS (sectie-layout + bleed-fix)
   ============================================================ */
@media (max-width: 768px) {
  /* Basissecties met dezelfde structuur */
  .mobile-taaltherapie,
  .mobile-spraaktherapie,
  .mobile-voorschoolse,
  .mobile-voorschoolse-list,
  .mobile-leerstoornissen,
  .mobile-spelling,
  .mobile-rekenen,
  .mobile-communicatie {
    background: #fff !important;
    position: relative;
    min-height: calc(var(--vh, 1vh) * 100);
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.6rem;
    text-align: left;
    isolation: isolate;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Bleed-fix */
  .mobile-taaltherapie::before,
  .mobile-spraaktherapie::before,
  .mobile-voorschoolse::before,
  .mobile-voorschoolse-list::before,
  .mobile-leerstoornissen::before,
  .mobile-spelling::before,
  .mobile-rekenen::before,
  .mobile-communicatie::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 8px;
    background: #fff;
    z-index: 3;
    pointer-events: none;
  }

  /* Hamburger (één bron van waarheid) */
  .logopedie-page .hamburger span {
    background: #ffca43 !important;
  }

  /* ============================================================
     PIL — ÉÉN BASIS (vorm/typografie); kleuren per sectie
     ============================================================ */
  .mo-title-pill {
    display: grid;
    place-items: center;
    width: 100%;
  }
  .mo-title-pill h2 {
    display: inline-block;
    padding: 0.55rem 1.6rem;
    border-radius: 20px; /* afgeronde rechthoek (niet full pill) */
    margin: 0.5rem auto 1.2rem;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: center;
    background: var(--pill-bg, #ffca43);
    color: var(--pill-color, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }
  .mo-title-pill::before,
  .mo-title-pill::after,
  .mo-title-pill h2::before,
  .mo-title-pill h2::after {
    content: none !important;
    display: none !important;
  }

  /* Kleur-variabelen per blok (laatste gewenste toestand) */
  .mobile-taaltherapie .mo-title-pill h2,
  .mobile-leerstoornissen .mo-title-pill h2,
  .mobile-communicatie .mo-title-pill h2 {
    --pill-bg: #ffca43;
    --pill-color: #ffffff;
  }

  /* =========================================================
   LOGOPEDIE — TAALTHERAPIE (mobiel) — opgeschoond
   Leunt op:
   - Afbeelding/media: section[class*="mobile-"] .mo-card-media ...
   - Uniforme tekst: .mobile-only p, li ...
   - "Lees meer" kleur: --scroll-color (per pagina)
   - Uniforme buttons (logopedie): MOBIEL — UNIFORME BUTTONVORM
   ========================================================= */

  /* CTA-sectie onder taaltherapie */
  .mobile-taaltherapie-buttons {
    background: #fff;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
    padding: 2.5rem 0 3rem;
  }

  .mobile-taaltherapie-buttons .mtb-buttons {
    display: grid;
    gap: 1.4rem;
    place-items: center;
    width: 100%;
  }

  /* ============================================================
     SPRAAKTHERAPIE (laatste waarden behouden)
     ============================================================ */
  .mobile-spraaktherapie .mo-card-media {
    width: min(500px, 88%);
    margin: 0 auto 3.2rem;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
  }
  .mobile-spraaktherapie .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mobile-spraaktherapie .st-copy {
    max-width: 42ch;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
  }
  .mobile-spraaktherapie .st-copy p {
    margin: 0 0 0.6rem;
  }

  .mobile-spraaktherapie .mo-bullets {
    margin: 0.1rem 0 0.4rem !important;
  }
  .mobile-spraaktherapie .mo-bullets li {
    margin: 0.1rem 0 !important;
    line-height: 1.6 !important;
  }

  .mobile-spraaktherapie .section-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    color: #ffca43 !important;
    text-decoration: none;
    display: grid;
    justify-items: center;
    gap: 1.4rem;
  }
  .mobile-spraaktherapie .section-scroll .chevron path {
    stroke: #ffca43 !important;
  }

  /* SPRAAKTHERAPIE — knoppen (eigen stijl behouden) */
  .mobile-spraaktherapie-buttons {
    background: #fff !important;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
  }
  .mobile-spraaktherapie-buttons .stb-copy {
    max-width: 42ch;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
  }
  .mobile-spraaktherapie-buttons .stb-buttons,
  .mobile-spraaktherapie-buttons .buttons {
    display: grid;
    gap: 1.4rem;
    place-items: center;
    width: 100%;
  }
  body.logopedie-page .mobile-spraaktherapie-buttons .stb-buttons a,
  .mobile-spraaktherapie-buttons .buttons a {
    all: unset;
    display: inline-block !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-align: center !important;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    ) !important;
    font-weight: 100 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    border-radius: 12px !important;
    padding: 0.8rem 1.6rem !important;
    border: none !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
  }
  body.logopedie-page .mobile-spraaktherapie-buttons .stb-buttons .btn-light {
    background: #fff2b4 !important;
    color: var(--brand-orange, #ffb703) !important;
  }
  body.logopedie-page .mobile-spraaktherapie-buttons .stb-buttons .btn-dark {
    background: #ffca43 !important;
    color: #fff !important;
  }
  body.logopedie-page .mobile-spraaktherapie-buttons .stb-buttons a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }
  .mobile-spraaktherapie .mo-title-pill h2 {
    background: #ffca43 !important;
    color: #ffffff !important;
  }

  /* ============================================================
     VOORSCHOOLSE (en -list) — laatste waarden behouden
     ============================================================ */
  .mobile-voorschoolse .mo-title-pill h2 {
    --pill-bg: #ffca43;
    --pill-color: #fff;
    text-align: center !important;
    justify-content: center !important;
  }

  .mobile-voorschoolse .mo-card-media {
    width: min(500px, 88%);
    margin: 0 auto 3.6rem;
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
  }
  .mobile-voorschoolse .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mobile-voorschoolse .vv-copy {
    max-width: 42ch;
    width: 100%;
    margin: 0 auto;
    padding-top: 1rem;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
  }
  .mobile-voorschoolse .vv-copy p {
    margin: 0 0 1.6rem;
  }

  .mobile-voorschoolse .section-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    color: #ffca43 !important;
    text-decoration: none;
    display: grid;
    justify-items: center;
    gap: 1.4rem;
  }
  .mobile-voorschoolse .section-scroll .chevron path {
    stroke: #ffca43 !important;
  }

  .mobile-voorschoolse-list {
    background: #fff !important;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
  }
  .mobile-voorschoolse-list .copy {
    max-width: 42ch;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
  }
  .mobile-voorschoolse-list .mo-bullets {
    list-style: none;
    padding: 0;
    margin: 0.2rem 0 1rem;
    max-width: 42ch;
    width: 100%;
  }
  .mobile-voorschoolse-list .mo-bullets li {
    position: relative;
    padding-left: 2.6rem;
    margin: 0.4rem 0;
    color: #6e6e6e;
    line-height: 1.8;
  }
  .mobile-voorschoolse-list .mo-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.2em;
    width: 2.2rem;
    height: 2.2rem;
    background: url("../images/pijl-geel.png") no-repeat center / contain;
  }

  .mobile-voorschools-buttons,
  .mobile-voorschoolse-list .mtb-buttons {
    /* knoppenstack */
    display: grid;
    gap: 1.4rem;
    place-items: center;
    width: 100%;
  }
  /* Gebruik de stijl zoals in dat blok is ingesteld (laatste toestand) */
  body.logopedie-page .mobile-voorschoolse-list .mtb-buttons a {
    all: unset;
    display: inline-block !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    font: 100 1rem/1.3
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif) !important;
    border-radius: 9999px !important;
    padding: 0.9rem 2.6rem !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
  }
  body.logopedie-page .mobile-voorschoolse-list .mtb-buttons a.btn-light {
    background: #fff2b4 !important;
    color: var(--brand-orange, #ffb703) !important;
  }
  body.logopedie-page .mobile-voorschoolse-list .mtb-buttons a.btn-light:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }
  body.logopedie-page .mobile-voorschoolse-list .mtb-buttons a.btn-dark {
    background: #ffca43 !important;
    color: #fff !important;
  }
  body.logopedie-page .mobile-voorschoolse-list .mtb-buttons a.btn-dark:hover {
    filter: brightness(0.97);
    transform: translateY(-1px);
  }

  /* ============================================================
     LEERSTOORNISSEN (laatste waarden behouden)
     ============================================================ */
  .mobile-leerstoornissen .subhead {
    color: var(--brand-orange, #ffb703);
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-weight: 100;
    font-size: 1.35rem;
    line-height: 1.3;
    width: min(500px, 88%);
    margin: 0 auto 0.6rem;
    text-align: left;
  }
  .mobile-leerstoornissen .mo-card-media {
    width: min(500px, 88%);
    margin: 0 auto 2rem;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
  }
  .mobile-leerstoornissen .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mobile-leerstoornissen .ls-copy {
    max-width: 42ch;
    width: 100%;
    margin: 0.4rem auto 0;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
  }
  .mobile-leerstoornissen .ls-copy p {
    margin: 0 0 1.6rem;
  }
  .mobile-leerstoornissen .mo-bullets {
    margin: 0.1rem 0 0.4rem !important;
  }
  .mobile-leerstoornissen .mo-bullets li {
    margin: 0.1rem 0 !important;
    line-height: 1.6 !important;
  }
  .mobile-leerstoornissen .section-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    color: #ffca43 !important;
    text-decoration: none;
    display: grid;
    justify-items: center;
    gap: 1.4rem;
  }
  .mobile-leerstoornissen .section-scroll .chevron path {
    stroke: #ffca43 !important;
  }

  /* ============================================================
     SPELLING (laatste waarden behouden)
     ============================================================ */
  .mobile-spelling .subhead {
    color: var(--brand-orange, #ffb703);
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-weight: 100;
    font-size: 1.35rem;
    line-height: 1.3;
    width: min(500px, 88%);
    margin: 0 auto 0.6rem;
    text-align: left;
  }
  .mobile-spelling .mo-card-media {
    width: min(500px, 88%);
    margin: 0 auto 2.2rem;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
  }
  .mobile-spelling .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mobile-spelling .sp-copy {
    max-width: 42ch;
    width: 100%;
    margin: 0 auto;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
  }
  .mobile-spelling .sp-copy p {
    margin: 0 0 1.6rem;
  }
  .mobile-spelling .section-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    color: #ffca43 !important;
    text-decoration: none;
    display: grid;
    justify-items: center;
    gap: 1.4rem;
  }
  .mobile-spelling .section-scroll .chevron path {
    stroke: #ffca43 !important;
  }

  /* ============================================================
     REKENEN (laatste waarden behouden)
     ============================================================ */
  .mobile-rekenen .subhead {
    color: var(--brand-orange, #ffb703);
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-weight: 100;
    font-size: 1.35rem;
    line-height: 1.3;
    width: min(500px, 88%);
    margin: 0 auto 0.6rem;
    text-align: left;
  }
  .mobile-rekenen .mo-card-media {
    width: min(500px, 88%);
    margin: 0 auto 2.2rem;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
  }
  .mobile-rekenen .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mobile-rekenen .rk-copy {
    max-width: 42ch;
    width: 100%;
    margin: 0 auto;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
  }
  .mobile-rekenen .rk-copy p {
    margin: 0 0 1.6rem;
  }

  .mobile-rekenen .buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }
  body.logopedie-page .mobile-rekenen .buttons a {
    all: unset;
    display: inline-block !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    ) !important;
    font-weight: 100 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    border-radius: 9999px !important;
    padding: 0.9rem 2.6rem !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
  }
  body.logopedie-page .mobile-rekenen .buttons .btn-light {
    background: #fff2b4 !important;
    color: var(--brand-orange, #ffb703) !important;
  }
  body.logopedie-page .mobile-rekenen .buttons .btn-dark {
    background: #ffca43 !important;
    color: #fff !important;
  }
  body.logopedie-page .mobile-rekenen .buttons a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }

  /* ============================================================
     COMMUNICATIETHERAPIE (laatste waarden behouden)
     ============================================================ */
  .mobile-communicatie .mo-title-pill h2 {
    --pill-bg: #ffca43;
    --pill-color: #ffffff;
    margin: 0.4rem auto 1.2rem;
    text-align: center !important;
    line-height: 1.3;
    white-space: normal;
  }

  .mobile-communicatie .cm-copy {
    max-width: 42ch;
    width: 100%;
    margin: 0 auto;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
  }
  .mobile-communicatie .cm-copy p {
    margin: 0 0 1.6rem;
  }

  .mobile-communicatie-buttons {
    background: #fff !important;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
  }
  .mobile-communicatie-buttons .cb-copy {
    max-width: 42ch;
    color: #6e6e6e;
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
  }
  .mobile-communicatie-buttons .cb-buttons {
    display: grid;
    gap: 1.4rem;
    place-items: center;
    width: 100%;
  }
  body.logopedie-page .mobile-communicatie-buttons .cb-buttons a {
    all: unset;
    display: inline-block !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 9999px !important;
    padding: 0.9rem 2.6rem !important;
    font: 100 1rem/1.3
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif) !important;
    letter-spacing: 0.01em !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
  }
  body.logopedie-page .mobile-communicatie-buttons .btn-light {
    background: #fff2b4 !important;
    color: var(--brand-orange, #ffb703) !important;
  }
  body.logopedie-page .mobile-communicatie-buttons .btn-dark {
    background: #ffca43 !important;
    color: #fff !important;
  }
  body.logopedie-page .mobile-communicatie-buttons .cb-buttons a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }

  /* ============================================================
     MOBIELE FOOTER (ALLEEN op logopedie) — donkergele tekst/links
     ============================================================ */
  body.logopedie-page .site-footer a,
  body.logopedie-page footer.site-footer a,
  body.logopedie-page .site-footer nav a,
  body.logopedie-page .site-footer .footer-nav a,
  body.logopedie-page .site-footer .footer-menu a,
  body.logopedie-page .site-footer [class*="nav"] a,
  body.logopedie-page .site-footer [class*="menu"] a,
  body.logopedie-page .site-footer [href] {
    color: #ffca43 !important;
    text-decoration-color: #ffca43 !important;
    -webkit-text-fill-color: #ffca43 !important;
  }
  body.logopedie-page .site-footer a:hover,
  body.logopedie-page .site-footer a:focus {
    color: #f6b301 !important;
    text-decoration-color: #f6b301 !important;
    -webkit-text-fill-color: #f6b301 !important;
  }
  /* Social + adres */
  body.logopedie-page .mobile-social .ms-footer-nav a {
    color: #ffca43 !important;
    text-decoration-color: #ffca43 !important;
    -webkit-text-fill-color: #ffca43 !important;
  }
  body.logopedie-page .mobile-social .ms-footer-nav a:hover,
  body.logopedie-page .mobile-social .ms-footer-nav a:focus {
    color: #f6b301 !important;
    text-decoration-color: #f6b301 !important;
    -webkit-text-fill-color: #f6b301 !important;
  }
  body.logopedie-page .mobile-social .ms-icons a {
    color: #ffca43 !important;
  }
  body.logopedie-page .mobile-social .ms-icons a:hover {
    color: #f6b301 !important;
  }

  body.logopedie-page .mobile-social .ms-footer-location,
  body.logopedie-page .mobile-social .ms-footer-location a {
    color: #ffca43 !important;
    -webkit-text-fill-color: #ffca43 !important;
  }
  body.logopedie-page .mobile-social .ms-footer-location i,
  body.logopedie-page .mobile-social .ms-footer-location svg,
  body.logopedie-page .mobile-social .ms-footer-location svg * {
    color: #ffca43 !important;
    fill: #ffca43 !important;
    stroke: #ffca43 !important;
  }
  body.logopedie-page .mobile-social .ms-footer-location a:hover,
  body.logopedie-page .mobile-social .ms-footer-location a:focus {
    color: #f6b301 !important;
    -webkit-text-fill-color: #f6b301 !important;
  }
}

/* ============================================================
   MOBIEL — KINESITHERAPIE PAGINA (GEGROEPEERDE DEFINITIEVE VERSIE)
   ============================================================ */
@media (max-width: 768px) {
  /* ------------------------------------------------------------
     BASIS: VARIABELEN, RESET & GLOBALE PAGINA-STYLING
     ------------------------------------------------------------ */
  html,
  body {
    min-height: 100vh;
  }

  body.kinesitherapie-page {
    --brand-pink: #ff99ff;
  }

  body.kinesitherapie-page #main {
    flex: 1 0 auto;
  }
  /* Roze bullets (pagina-breed) */
  body.kinesitherapie-page .mo-bullets,
  body.kinesitherapie-page .aanbod-lijst ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body.kinesitherapie-page .mo-bullets li,
  body.kinesitherapie-page .aanbod-lijst ul li {
    position: relative;
    padding-left: 3rem;
    line-height: 1.8;
    margin: 0.35rem 0;
  }
  body.kinesitherapie-page .mo-bullets li::before,
  body.kinesitherapie-page .aanbod-lijst ul li::before {
    content: none !important;
  }
  body.kinesitherapie-page .mo-bullets li::after,
  body.kinesitherapie-page .aanbod-lijst ul li::after {
    content: "";
    position: absolute;
    left: 0;
    top: -0.5em;
    width: 3rem;
    height: 3rem;
    background: url("../images/pijl-roze.png?v=3") no-repeat center / contain !important;
  }

  /* Uniforme knopvorm & typografie */
  body.kinesitherapie-page .pt-buttons a,
  body.kinesitherapie-page .od-buttons a {
    all: unset;
    display: inline-block;
    cursor: pointer;
    border-radius: 18px;
    padding: 0.8rem 1.6rem;
    text-align: center;
    font: 100 1rem/1.2
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  body.kinesitherapie-page .pt-buttons,
  body.kinesitherapie-page .od-buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }
  /* Kleurvarianten */
  body.kinesitherapie-page .pt-buttons .btn-light-pink,
  body.kinesitherapie-page .od-buttons .btn-light-pink,
  body.kinesitherapie-page .pt-buttons .btn-light,
  body.kinesitherapie-page .od-buttons .btn-light {
    background: #ffe6ff !important;
    color: var(--brand-pink) !important;
  }
  body.kinesitherapie-page .pt-buttons .btn-dark-pink,
  body.kinesitherapie-page .od-buttons .btn-dark-pink,
  body.kinesitherapie-page .pt-buttons .btn-dark,
  body.kinesitherapie-page .od-buttons .btn-dark {
    background: var(--brand-pink) !important;
    color: #fff !important;
  }
  body.kinesitherapie-page .pt-buttons a:hover,
  body.kinesitherapie-page .od-buttons a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }
  /* Kinesitherapie — één knopprofiel voor alle buttons op de mobiele blokken */
  body.kinesitherapie-page .pt-buttons a,
  body.kinesitherapie-page .od-buttons a,
  body.kinesitherapie-page .ms-buttons a {
    all: unset;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 18px;
    padding: 0.8rem 1.6rem;
    text-align: center;
    font: 100 1rem/1.2
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  /* zelfde grid-opbouw voor alle drie */
  body.kinesitherapie-page .pt-buttons,
  body.kinesitherapie-page .od-buttons,
  body.kinesitherapie-page .ms-buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }

  /* kleurvarianten blijven gewoon werken */
  body.kinesitherapie-page .pt-buttons .btn-light-pink,
  body.kinesitherapie-page .od-buttons .btn-light-pink,
  body.kinesitherapie-page .ms-buttons .btn-light-pink,
  body.kinesitherapie-page .pt-buttons .btn-light,
  body.kinesitherapie-page .od-buttons .btn-light,
  body.kinesitherapie-page .ms-buttons .btn-light {
    background: #ffe6ff !important;
    color: var(--brand-pink) !important;
  }

  body.kinesitherapie-page .pt-buttons .btn-dark-pink,
  body.kinesitherapie-page .od-buttons .btn-dark-pink,
  body.kinesitherapie-page .ms-buttons .btn-dark-pink,
  body.kinesitherapie-page .pt-buttons .btn-dark,
  body.kinesitherapie-page .od-buttons .btn-dark,
  body.kinesitherapie-page .ms-buttons .btn-dark {
    background: var(--brand-pink) !important;
    color: #fff !important;
  }

  body.kinesitherapie-page .pt-buttons a:hover,
  body.kinesitherapie-page .od-buttons a:hover,
  body.kinesitherapie-page .ms-buttons a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }

  /* ------------------------------------------------------------
     BLOK 1 — HERO (lichtroze)
     ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-kine-hero {
    background: #ffe6ff !important;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.6rem;
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  body.kinesitherapie-page .mobile-kine-hero .mo-title-pill h2 {
    background: #fff !important;
    color: var(--brand-pink) !important;
    text-align: center !important;
    margin: 0.4rem auto 1.2rem;
  }
  body.kinesitherapie-page .mobile-kine-hero .mo-card-media {
    width: min(500px, 88%);
    margin: 0.6rem auto 2.2rem;
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
  }
  body.kinesitherapie-page .mobile-kine-hero .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ------------------------------------------------------------
   BLOK 2 — PSYCHOMOTORISCHE THERAPIE (wit)
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-psychomotorische {
    background: #fff !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.6rem;
    /* horizontale padding komt uit de globale mobile-gutter */
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  body.kinesitherapie-page .mobile-psychomotorische .mo-title-pill h2 {
    background: var(--brand-pink) !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.4;
    margin: 0.4rem auto 1.2rem;
  }

  body.kinesitherapie-page .mobile-psychomotorische .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    margin: 0.6rem auto 1.2rem !important; /* wint van globale 0.8rem */
  }

  body.kinesitherapie-page .mobile-psychomotorische .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ------------------------------------------------------------
     BLOK 2B — PSYCHOMOTORISCHE TEKST + KNOPPEN
     ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-psychomotorische-text {
    background: #fff !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.6rem;
    padding: calc(var(--mobile-ui-offset) + 32px) 1rem
      max(40px, env(safe-area-inset-bottom));
  }
  body.kinesitherapie-page .mobile-psychomotorische-text .pt-copy {
    width: min(500px, 88%);
    max-width: 42ch;
    color: #6e6e6e;
    font: 400 1rem/1.9
      var(--font-body, "Open Sans", "Helvetica Neue", Arial, sans-serif);
  }
  /* ------------------------------------------------------------
   BLOK 3 — ONTWIKKELINGSSTIMULATIE (wit)
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-ontwikkelings {
    background: #fff !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    /* horizontale padding komt uit de globale mobile-gutter */
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  body.kinesitherapie-page .mobile-ontwikkelings .mo-title-pill h2 {
    background: var(--brand-pink) !important;
    color: #fff !important;
    text-align: center !important;
    white-space: normal;
    margin: 0.4rem auto 1rem;
  }

  body.kinesitherapie-page .mobile-ontwikkelings .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    /* globale regel zet al margin-bottom: 0.8rem; → we houden alleen centeren */
    margin-left: auto;
    margin-right: auto;
  }

  body.kinesitherapie-page .mobile-ontwikkelings .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ------------------------------------------------------------
   BLOK 4/5 — EXTRA TEKST + KNOPPEN (wit)
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-ontwikkelings-extra {
    background: #fff !important;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
    /* horizontale padding komt uit de globale mobile-gutter */
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  body.kinesitherapie-page .mobile-ontwikkelings-extra .od-copy {
    max-width: 42ch;
    color: #6e6e6e;
    font: 400 1rem/1.9
      var(--font-body, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    /* text-align: left; niet nodig → komt al uit algemene regels */
  }

  /* ------------------------------------------------------------
     GLOBALE FIXES VOOR PUNTEN/PIJLEN & MASKERS
     ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-psychomotorische,
  body.kinesitherapie-page .mobile-ontwikkelings {
    position: relative;
    overflow: hidden;
  }
  body.kinesitherapie-page .section-scroll {
    color: var(--brand-pink, #ff99ff) !important;
    z-index: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    z-index: 0 !important;
    pointer-events: none;
  }
  body.kinesitherapie-page .section-scroll .chevron path {
    stroke: var(--brand-pink, #ff99ff) !important;
  }

  /* Blokmaskers (bovenrand) */
  body.kinesitherapie-page .mobile-psychomotorische::before,
  body.kinesitherapie-page .mobile-psychomotorische-text::before,
  body.kinesitherapie-page .mobile-ontwikkelings::before,
  body.kinesitherapie-page .mobile-ontwikkelings-extra::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 8px;
    background: #fff;
    z-index: 2;
    pointer-events: none;
  }
  /* Hero-masker in lichtroze */
  body.kinesitherapie-page .mobile-kine-hero::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 8px;
    background: #ffe6ff;
    z-index: 2;
    pointer-events: none;
  }

  /* ------------------------------------------------------------
   BLOK — MUSCULOSKELETALE
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-musculo {
    background: #fff !important;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    overflow: hidden; /* laten als je die rand nodig hebt */
  }

  body.kinesitherapie-page .mobile-musculo .mo-title-pill h2 {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.35;
    margin: 0.4rem auto 1.2rem;
  }

  body.kinesitherapie-page .mobile-musculo .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    margin: 0.6rem auto 1rem;
  }

  body.kinesitherapie-page .mobile-musculo .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* alleen de breedte van de bullets is echt uniek hier */
  body.kinesitherapie-page .mobile-musculo .mo-bullets {
    width: min(500px, 88%);
    max-width: 40ch;
    margin: 0.15rem 0 0.55rem;
  }

  /* ------------------------------------------------------------
   Musculo — vervolg
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-musculo-extra {
    background: #fff !important;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
  }

  body.kinesitherapie-page .mobile-musculo-extra .ms-copy {
    max-width: 42ch;
    color: #6e6e6e;
    font: 400 1rem/1.9
      var(--font-body, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-align: left;
  }

  /* als je de ms-buttons toevoegt aan je globale kine-knoppen, kan dit weg */
  body.kinesitherapie-page .mobile-musculo-extra .ms-buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }
  body.kinesitherapie-page .mobile-musculo-extra .ms-buttons .btn-light-pink {
    background: #ffe6ff !important;
    color: var(--brand-pink, #ff99ff) !important;
  }
  body.kinesitherapie-page .mobile-musculo-extra .ms-buttons .btn-dark-pink {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
  }

  /* ------------------------------------------------------------
   BLOK — ADEMHALING
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-ademhaling {
    background: #fff !important;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    overflow: hidden; /* laat staan als je het masker gebruikt */
  }

  body.kinesitherapie-page .mobile-ademhaling .mo-title-pill h2 {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.35;
    margin: 0.4rem auto 1.2rem;
  }

  body.kinesitherapie-page .mobile-ademhaling .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    margin: 0.6rem auto 1rem;
  }

  body.kinesitherapie-page .mobile-ademhaling .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* enkel de breedte van de bullets behouden */
  body.kinesitherapie-page .mobile-ademhaling .mo-bullets {
    width: min(500px, 88%);
    max-width: 40ch;
    margin: 0.15rem 0 0.55rem;
  }

  /* ------------------------------------------------------------
     BLOK — ADEMHALINGS (variant + tekst)
     ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-ademhalings {
    background: #fff !important;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    text-align: left !important;
    padding: calc(var(--mobile-ui-offset) + 32px) 1rem
      max(40px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow: hidden;
  }
  body.kinesitherapie-page .mobile-ademhalings .mo-title-pill h2 {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.35;
    margin: 0.4rem auto 1.2rem;
  }
  body.kinesitherapie-page .mobile-ademhalings .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    margin: 0.6rem auto 1rem;
  }
  body.kinesitherapie-page .mobile-ademhalings .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  body.kinesitherapie-page .mobile-ademhalings .mo-bullets {
    list-style: none;
    padding: 0;
    margin: 0.15rem 0 0.55rem;
    width: min(500px, 88%);
    max-width: 40ch;
  }
  body.kinesitherapie-page .mobile-ademhalings .mo-bullets li {
    position: relative;
    padding-left: 3rem;
    margin: 0.35rem 0;
    line-height: 1.8;
  }
  body.kinesitherapie-page .mobile-ademhalings .mo-bullets li::after {
    content: "";
    position: absolute;
    left: 0;
    top: -0.5em;
    width: 3rem;
    height: 3rem;
    background: url("../images/pijl-roze.png?v=3") no-repeat center / contain !important;
  }
  body.kinesitherapie-page .mobile-ademhalings .section-scroll {
    color: var(--brand-pink, #ff99ff) !important;
  }
  body.kinesitherapie-page .mobile-ademhalings .section-scroll .chevron path {
    stroke: var(--brand-pink, #ff99ff) !important;
  }

  body.kinesitherapie-page .mobile-ademhalings-text {
    background: #fff !important;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.6rem;
    padding: calc(var(--mobile-ui-offset) + 32px) 1rem
      max(40px, env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  body.kinesitherapie-page .mobile-ademhalings-text .ak-copy {
    width: min(500px, 88%);
    max-width: 42ch;
    color: #6e6e6e;
    font: 400 1rem/1.9
      var(--font-body, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-align: left;
  }
  body.kinesitherapie-page .mobile-ademhalings-text .ak-buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }
  body.kinesitherapie-page .mobile-ademhalings-text .ak-buttons a {
    all: unset;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 18px;
    padding: 0.8rem 1.6rem;
    text-align: center;
    font: 100 1rem/1.2
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  body.kinesitherapie-page .mobile-ademhalings-text .ak-buttons a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }
  body.kinesitherapie-page
    .mobile-ademhalings-text
    .ak-buttons
    .btn-light-pink {
    background: #ffe6ff !important;
    color: var(--brand-pink, #ff99ff) !important;
  }
  body.kinesitherapie-page .mobile-ademhalings-text .ak-buttons .btn-dark-pink {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
  }

  /* ------------------------------------------------------------
   BLOK — RELAXATIE
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-relaxatie {
    background: #fff !important;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    overflow: hidden; /* laten als masker zichtbaar is */
  }

  body.kinesitherapie-page .mobile-relaxatie .mo-title-pill h2 {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
    text-align: center !important;
    margin: 0.4rem auto 1.2rem;
    line-height: 1.3;
  }

  body.kinesitherapie-page .mobile-relaxatie .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    margin: 0.6rem auto 1rem;
  }

  body.kinesitherapie-page .mobile-relaxatie .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  body.kinesitherapie-page .mobile-relaxatie .rx-copy {
    width: min(500px, 88%);
    max-width: 42ch;
  }

  /* ------------------------------------------------------------
   RELAXATIE — EXTRA BLOK
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-relaxatie-extra {
    background: #fff !important;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  /* gebruik globale kine-button styling */
  body.kinesitherapie-page .mobile-relaxatie-extra .rx-buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }

  /* Topmasker consistent houden */
  body.kinesitherapie-page .mobile-relaxatie::before,
  body.kinesitherapie-page .mobile-relaxatie-extra::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 8px;
    background: #fff;
    z-index: 2;
    pointer-events: none;
  }

  /* ------------------------------------------------------------
   BLOK — BOBATHTHERAPIE
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-bobath {
    background: #fff !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    overflow: hidden; /* laten indien masker nodig is */
  }

  body.kinesitherapie-page .mobile-bobath .mo-title-pill h2 {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
    text-align: center !important;
    margin: 0.4rem auto 1.2rem;
    line-height: 1.3;
  }

  body.kinesitherapie-page .mobile-bobath .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    margin: 0.6rem auto 1rem;
  }

  body.kinesitherapie-page .mobile-bobath .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.kinesitherapie-page .mobile-bobath .bb-copy {
    width: min(500px, 88%);
    max-width: 42ch;
  }

  /* ------------------------------------------------------------
   BOBATH — EXTRA BLOK
   ------------------------------------------------------------ */
  body.kinesitherapie-page .mobile-bobath-extra {
    background: #fff !important;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
  }

  body.kinesitherapie-page .mobile-bobath-extra .bb-copy {
    max-width: 42ch;
  }

  body.kinesitherapie-page .mobile-bobath-extra .bb-buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }

  /* linkje in tekst */
  body.kinesitherapie-page .mobile-bobath-extra .bb-copy a {
    color: var(--brand-pink, #ff99ff);
    text-decoration: underline;
  }

  /* Topmasker consistent */
  body.kinesitherapie-page .mobile-bobath::before,
  body.kinesitherapie-page .mobile-bobath-extra::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 8px;
    background: #fff;
    z-index: 2;
  }

  /* ============================================================
   MOBIEL — TYPLLESSEN
   ============================================================ */
  body.kinesitherapie-page .mobile-typlessen {
    background: #fff !important;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    overflow: hidden; /* laten als masker zichtbaar */
  }

  body.kinesitherapie-page .mobile-typlessen .mo-title-pill h2 {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.35;
    margin: 0.4rem auto 1.2rem;
  }

  body.kinesitherapie-page .mobile-typlessen .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    margin: 0.6rem auto 1rem;
  }

  body.kinesitherapie-page .mobile-typlessen .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  body.kinesitherapie-page .mobile-typlessen .tp-copy {
    width: min(500px, 88%);
    max-width: 42ch;
  }

  body.kinesitherapie-page .mobile-typlessen .tp-buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }

  /* Dun wit masker bovenaan */
  body.kinesitherapie-page .mobile-typlessen::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 8px;
    background: #fff;
    z-index: 2;
  }
  /* =========================================
   MOBIEL — SOCIAL ICONS & FOOTER (clean final)
   ========================================= */
  body.kinesitherapie-page .mobile-social {
    background: #ffe6ff;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    text-align: center;
  }

  /* PIL */
  body.kinesitherapie-page #mobile-social #social-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.4rem auto 1.2rem;
    padding: 0.8rem 1.6rem;
    border-radius: 18px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    background: #fff;
    color: var(--brand-pink, #ff99ff);
    font: 700 1.25rem/1.35
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-align: center;
  }

  /* NAVIGATIE + ADRES */
  body.kinesitherapie-page #mobile-social .ms-footer-nav a,
  body.kinesitherapie-page #mobile-social .ms-footer-location {
    color: var(--brand-pink, #ff99ff) !important;
    text-decoration: none;
  }

  /* FOOTER */
  body.kinesitherapie-page .mobile-footer {
    background: #fff;
    color: var(--brand-pink, #ff99ff);
    padding: 2.5rem 1.5rem 3.5rem;
    text-align: center;
    display: grid;
    gap: 1.2rem;
    justify-items: center;
  }

  body.kinesitherapie-page .mobile-footer nav {
    display: grid;
    gap: 0.8rem;
  }

  body.kinesitherapie-page .mobile-footer nav a {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  body.kinesitherapie-page .mobile-footer nav a:hover {
    opacity: 0.8;
  }

  body.kinesitherapie-page .mobile-footer .footer-address {
    font: 400 0.95rem/1.6
      var(--font-body, "Open Sans", "Helvetica Neue", Arial, sans-serif);
  }

  /* MASKERS + LEES MEER */
  body.kinesitherapie-page
    :is(
      .mobile-psychomotorische,
      .mobile-psychomotorische-text,
      .mobile-ontwikkelings,
      .mobile-ontwikkelings-extra,
      .mobile-kine-hero
    )::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 10px;
    background: inherit;
    z-index: 2;
    pointer-events: none;
  }

  body.kinesitherapie-page .section-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    z-index: 0 !important;
    pointer-events: none;
  }
  body.kinesitherapie-page .section-scroll {
    pointer-events: auto !important;
    z-index: 10 !important;
  }
  body.kinesitherapie-page .mobile-footer {
    background: #fff !important;
    isolation: isolate;
    position: relative;
    z-index: 2;
  }

  body.kinesitherapie-page .mobile-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: -1;
  }

  /* ============================================================
   KINESITHERAPIE — FIX: tekstbreedte in BLOK 3 + socials centreren
   ============================================================ */
  body.kinesitherapie-page .mobile-ontwikkelings .mo-bullets,
  body.kinesitherapie-page .mobile-ontwikkelings .why-text,
  body.kinesitherapie-page .mobile-ontwikkelings .kh-copy,
  body.kinesitherapie-page .mobile-ontwikkelings .pt-copy,
  body.kinesitherapie-page .mobile-ontwikkelings .od-copy {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .mo-bullets li {
    padding-left: 3rem !important;
  }
  body.kinesitherapie-page .mobile-social .ms-icons {
    display: flex;
    justify-content: center !important;
    align-items: center;
  }
  /* ICONS in het social-blok: altijd wit en juiste schaal,
     ongeacht eerdere (roze/oranje) overrides of SVG fill */
  body.kinesitherapie-page #mobile-social .ms-icons a,
  body.kinesitherapie-page #mobile-social .ms-icons a i,
  body.kinesitherapie-page #mobile-social .ms-icons svg,
  body.kinesitherapie-page #mobile-social .ms-icons svg * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    line-height: 1 !important;
    font-size: clamp(2.8rem, 8vw, 3.6rem) !important;
    text-decoration: none !important;
  }

  /* nette afstand + centreren van de icon-wrapper */
  body.kinesitherapie-page #mobile-social .ms-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
    margin-top: 0.25rem !important;
  }

  /* links/tekst onderaan social-blok in felroze */
  body.kinesitherapie-page #mobile-social .ms-footer-nav a,
  body.kinesitherapie-page #mobile-social .ms-footer-location,
  body.kinesitherapie-page #mobile-social .ms-footer-nav a:link,
  body.kinesitherapie-page #mobile-social .ms-footer-nav a:visited,
  body.kinesitherapie-page #mobile-social .ms-footer-nav a:active {
    color: var(--brand-pink, #ff99ff) !important;
    text-decoration: none !important;
  }
  /* --- PIL (ongewijzigd, correct zoals eerder) --- */
  body.kinesitherapie-page #mobile-social #social-title {
    --pill-bg: #fff;
    --pill-color: var(--brand-pink, #ff99ff);
    display: inline-block !important;
    width: auto !important;
    margin: 0.4rem auto 1.2rem !important;

    font-family: var(--font-deco) !important;
    font-weight: 400 !important;
    font-size: clamp(1.4rem, 7vw, 2.2rem) !important;
    line-height: 1.1 !important;
    padding: 1.5rem 2.25rem !important;
    border-radius: 32px / 26px !important;

    background: var(--pill-bg) !important;
    color: var(--pill-color) !important;
    -webkit-text-fill-color: var(--pill-color) !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  /* --- ICONS: exacte logopedie-stijl --- */
  body.kinesitherapie-page #mobile-social .ms-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2rem !important; /* minder afstand */
    margin-top: 0.25rem !important;
  }

  body.kinesitherapie-page #mobile-social .ms-icons a,
  body.kinesitherapie-page #mobile-social .ms-icons a i,
  body.kinesitherapie-page #mobile-social .ms-icons svg,
  body.kinesitherapie-page #mobile-social .ms-icons svg * {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    font-size: 6.6rem !important; /* matcht visueel 1:1 met logopedie */
    width: 6.6rem !important;
    height: 6.6rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
  }

  body.kinesitherapie-page #mobile-social .ms-icons a:hover {
    transform: scale(1.06);
    filter: brightness(1.05);
  }

  /* --- Footer links/adres --- */
  body.kinesitherapie-page #mobile-social .ms-footer-nav a,
  body.kinesitherapie-page #mobile-social .ms-footer-location,
  body.kinesitherapie-page #mobile-social .ms-footer-nav a:link,
  body.kinesitherapie-page #mobile-social .ms-footer-nav a:visited,
  body.kinesitherapie-page #mobile-social .ms-footer-nav a:active {
    color: var(--brand-pink, #ff99ff) !important;
    text-decoration: none !important;
  }
  /* Roze bullets boven de tekst */
  body.kinesitherapie-page .mobile-psychomotorische-text .mo-bullets {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.15rem 0 0.55rem !important;
    width: min(500px, 88%) !important;
    max-width: 40ch !important;
  }
  body.kinesitherapie-page .mobile-psychomotorische-text .mo-bullets li {
    position: relative !important;
    padding-left: 3rem !important;
    margin: 0.35rem 0 !important;
    line-height: 1.8 !important;
  }
  body.kinesitherapie-page .mobile-psychomotorische-text .mo-bullets li::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: -0.5em !important;
    width: 3rem !important;
    height: 3rem !important;
    background: url("../images/pijl-roze.png?v=2") no-repeat center / contain !important;
  }

  /* Ontwikkelingsblok uniform */
  body.kinesitherapie-page .mobile-ontwikkelings {
    background: #fff !important;
    position: relative;
    min-height: calc(var(--vh, 1vh) * 100);
    padding-top: calc(var(--mobile-ui-offset) + 32px);
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    text-align: left;
    isolation: isolate;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .mo-title-pill {
    display: grid;
    place-items: center;
    width: 100%;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .mo-title-pill h2 {
    --pill-bg: var(--brand-pink, #ff99ff);
    --pill-color: #fff;
    background: var(--pill-bg) !important;
    color: var(--pill-color) !important;
    text-align: center !important;
    white-space: normal;
    margin: 0.4rem auto 1rem;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .mo-card-media {
    width: min(500px, 88%);
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 auto 0.8rem;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .mo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .mo-bullets {
    list-style: none;
    padding: 0;
    margin: 0.15rem 0 0.55rem;
    width: min(500px, 88%);
    max-width: 40ch;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .mo-bullets li {
    position: relative;
    padding-left: 3rem;
    margin: 0.35rem 0;
    line-height: 1.8;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .mo-bullets li::after {
    content: "";
    position: absolute;
    left: 0;
    top: -0.5em;
    width: 3rem;
    height: 3rem;
    background: url("../images/pijl-roze.png?v=2") no-repeat center / contain !important;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .section-scroll {
    color: var(--brand-pink, #ff99ff) !important;
  }
  body.kinesitherapie-page .mobile-ontwikkelings .section-scroll .chevron path {
    stroke: var(--brand-pink, #ff99ff) !important;
  }
}
/* =========================================
   PRAKTISCH — MOBILE
   ========================================= */
@media (max-width: 768px) {
  /* =========================================
     1. INTRO-BLOK (titelpil + groene pijlen)
     ========================================= */
  body.praktisch-page .mobile-praktisch-intro {
    background: #d8f0ed;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding: calc(var(--mobile-ui-offset, 0px) + 32px) clamp(16px, 6vw, 28px)
      max(40px, env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  /* Titelpil in globale stijl (witte pil met mint tekst) */
  body.praktisch-page .mobile-praktisch-intro .mo-title-pill h2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px / 26px;
    padding: 1.5rem 2.25rem;
    margin: 0.4rem auto 0.8rem;
    font-family: var(--font-deco);
    font-weight: 400;
    line-height: 1.1;
    text-align: center !important;
    background: #fff;
    color: #99cccc;
    -webkit-text-fill-color: #99cccc;
    box-shadow: none;
  }

  /* Pijlbullit-lijst */
  body.praktisch-page .mobile-praktisch-intro .pp-links {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    width: min(560px, 100%);
  }
  body.praktisch-page .mobile-praktisch-intro .pp-links li {
    position: relative;
    padding-left: 3rem;
    margin: 0.35rem 0;
    line-height: 1.8;
  }
  body.praktisch-page .mobile-praktisch-intro .pp-links li::after {
    content: "";
    position: absolute;
    left: 0;
    top: -0.5em;
    width: 3rem;
    height: 3rem;
    background: url("../images/pijl-groen.png") no-repeat center/contain !important;
  }
  body.praktisch-page .mobile-praktisch-intro .pp-links a {
    color: #6e6e6e;
    text-decoration: none;
  }
  body.praktisch-page .mobile-praktisch-intro .pp-links a:hover {
    text-decoration: underline;
  }

  /* =========================================
     2. WERKWIJZE-BLOK
     ========================================= */
  body.praktisch-page .mobile-werkwijze {
    background: #ffffff !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding: calc(var(--mobile-ui-offset, 48px) + 24px) clamp(16px, 6vw, 28px)
      max(40px, env(safe-area-inset-bottom));
  }

  /* Wrapper neutraal; pil zit op H2 */
  body.praktisch-page .mobile-werkwijze .mo-title-pill {
    display: grid !important;
    place-items: center !important;
    margin: 0 auto 0.8rem !important;
    background: none !important;
    border-radius: 0 !important;
  }

  /* Echte pil */
  body.praktisch-page .mobile-werkwijze .mo-title-pill h2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #99cccc !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 32px / 26px !important;
    padding: 0.9rem 1.6rem !important;
    margin: 0 !important;
    font-family: var(--font-deco) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Afbeelding */
  body.praktisch-page .mobile-werkwijze .mo-card-media {
    width: min(500px, 88%);
    border-radius: 18px;
    overflow: hidden;
  }
  body.praktisch-page .mobile-werkwijze .mo-card-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* Tekst */
  body.praktisch-page .mobile-werkwijze .wk-copy {
    width: min(500px, 88%);
    max-width: 42ch;
    font-size: 1rem;
    line-height: 1.9;
  }
  body.praktisch-page .mobile-werkwijze .wk-copy h3 {
    font-weight: 100;
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin: 0.6rem 0 0.25rem;
    color: #99cccc;
    text-transform: uppercase;
  }

  /* =========================================
     3. WERKWIJZE-TEKSTBLOK (stap 2–3)
     ========================================= */
  body.praktisch-page .mobile-werkwijze-text {
    background: #ffffff !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding: 1.25rem clamp(16px, 6vw, 28px) 2.25rem;
    box-sizing: border-box;
  }
  body.praktisch-page .mobile-werkwijze-text .wk-copy {
    width: min(500px, 88%);
    max-width: 42ch;
    color: #6e6e6e;
    font: 400 1rem/1.9
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-align: left;
  }
  body.praktisch-page .mobile-werkwijze-text .wk-copy h3 {
    margin: 0.9rem 0 0.35rem;
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #99cccc;
    font-weight: 100;
  }

  /* “Lees meer”-pijlen in accentkleur */
  body.praktisch-page .section-scroll,
  body.praktisch-page .section-scroll .chevron path {
    color: #99cccc !important;
    stroke: #99cccc !important;
  }

  /* ===== WERKWIJZE — STAP 4 ===== */
  body.praktisch-page .mobile-werkwijze-step4 {
    background: #ffffff !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding: 1.25rem clamp(16px, 6vw, 28px) 2.25rem;
    box-sizing: border-box;
  }
  body.praktisch-page .mobile-werkwijze-step4 .wk-copy {
    width: min(500px, 88%);
    max-width: 42ch;
    color: #6e6e6e;
    font: 400 1rem/1.9
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-align: left;
  }
  body.praktisch-page .mobile-werkwijze-step4 .wk-copy h3 {
    margin: 0.6rem 0 0.25rem;
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #99cccc;
    font-weight: 100;
  }
  body.praktisch-page .mobile-tarieven .wk-note {
    width: min(560px, 92%);
    margin: 0.8rem auto 0.2rem;
    text-align: center !important;
    color: #8a8a8a;
    font: 400 0.95rem/1.7
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-transform: uppercase;
  }
  body.praktisch-page .mobile-werkwijze-step4 .section-scroll {
    color: #99cccc !important;
    fill: #99cccc !important;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    text-decoration: none;
  }
  body.praktisch-page .mobile-werkwijze-step4 .section-scroll .chevron path {
    stroke: #99cccc !important;
  }

  /* ===== MOBIEL: TARIEVEN ===== */
  body.praktisch-page .mobile-tarieven {
    background: #d8f0ed !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding: calc(var(--mobile-ui-offset, 0px) + 32px) clamp(16px, 6vw, 28px)
      max(40px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    text-align: center;
  }
  /* Pil (witte pil met mint tekst) */
  body.praktisch-page .mobile-tarieven .mo-title-pill h2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px / 26px;
    padding: 1rem 2.25rem;
    margin: 0.4rem auto 0.8rem;
    font-family: var(--font-deco);
    font-weight: 400;
    line-height: 1.1;
    background: #ffffff;
    color: #99cccc;
    -webkit-text-fill-color: #99cccc;
    white-space: nowrap;
  }
  /* Tabellen */
  body.praktisch-page .mobile-tarieven .tarieven-table {
    width: 100%;
    max-width: 480px;
    display: grid;
    gap: 1.5rem;
  }
  body.praktisch-page .mobile-tarieven table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }
  body.praktisch-page .mobile-tarieven th.heading {
    background: #99cccc;
    color: #ffffff;
    font-weight: 400;
    font-size: 1rem;
    padding: 0.8rem 0.6rem;
  }
  body.praktisch-page .mobile-tarieven tr.subhead td {
    background: #f8f8f8;
    font-weight: 600;
    color: #6e6e6e;
  }
  body.praktisch-page .mobile-tarieven td {
    padding: 0.6rem 0.4rem;
    text-align: center;
    font-size: 0.95rem;
    border: 1px solid #e5e5e5;
  }
  /* Link onder tabel */
  body.praktisch-page .mobile-tarieven .tarief-link a {
    color: #6e6e6e;
    font-size: 0.9rem;
    text-decoration: underline;
  }
  /* “Lees meer” */
  body.praktisch-page .mobile-tarieven .section-scroll {
    color: #99cccc !important;
    fill: #99cccc !important;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    text-decoration: none;
  }
  body.praktisch-page .mobile-tarieven .section-scroll .chevron path {
    stroke: #99cccc !important;
  }
  /* Alleen de PIL optisch omhoog duwen */
  body.praktisch-page .mobile-tarieven .mo-title-pill {
    position: relative !important;
    top: -55px !important;
    margin-top: 0 !important;
  }
  body.praktisch-page .mobile-tarieven .mo-title-pill h2 {
    margin: 0 auto 0.8rem !important;
  }

  /* ===== MOBIEL: BEREIKBAARHEID ===== */
  body.praktisch-page .mobile-bereikbaarheid {
    background: #ffffff !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1.2rem;
    padding: calc(var(--mobile-ui-offset, 48px) + 24px) clamp(16px, 6vw, 28px)
      max(40px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    text-align: left;
  }
  /* Enkele pil (wrapper = pil, h2 = alleen tekst) + hard center */
  body.praktisch-page .mobile-bereikbaarheid .mo-title-pill {
    display: grid !important;
    place-items: center !important;
    width: fit-content;
    margin: 0 auto 0.8rem;
    background: #99cccc !important;
    border-radius: 32px / 26px !important;
    padding: 0.9rem 1.6rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  body.praktisch-page .mobile-bereikbaarheid .mo-title-pill h2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.2;
    white-space: nowrap !important;
    font-family: var(--font-deco, "Comic Neue", cursive);
    font-weight: 400;
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    color: #ffffff !important;
    text-align: center !important;
    /* geen tweede pil */
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-indent: 0 !important;
    transform: none !important;
  }
  /* Pictogram/afbeelding */
  body.praktisch-page .mobile-bereikbaarheid .br-media {
    width: min(420px, 82%);
    display: grid;
    place-items: center;
    margin: 0 0 0.6rem 0;
  }
  body.praktisch-page .mobile-bereikbaarheid .br-media img {
    display: block;
    max-width: 220px;
    width: 60%;
    height: auto;
  }
  /* Tekst */
  body.praktisch-page .mobile-bereikbaarheid .br-copy {
    width: min(520px, 88%);
    max-width: 42ch;
    color: #6e6e6e;
    font: 400 1rem/1.9
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-decoration: none;
  }
  body.praktisch-page .mobile-bereikbaarheid .br-copy .u-linklike {
    font-weight: 600;
    color: #6e6e6e;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* “Lees meer” in accentkleur */
  body.praktisch-page .mobile-bereikbaarheid .section-scroll,
  body.praktisch-page .mobile-bereikbaarheid .section-scroll .chevron path {
    color: #99cccc !important;
    stroke: #99cccc !important;
  }
  /* ===== MOBIEL: SOCIAL BLOK ===== */
  body.praktisch-page .mobile-social {
    background: #d8f0ed !important; /* lichtgroene achtergrond */
    color: #ffffff;
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem 2.5rem;
    text-align: center;
  }

  body.praktisch-page .mobile-social h2 {
    color: #99cccc !important;
    font-family: var(--font-deco, "Comic Neue", cursive);
    font-weight: 400;
    font-size: clamp(1.6rem, 6vw, 2rem);
    margin-bottom: 1rem;
  }

  /* Social icons wit */
  body.praktisch-page .mobile-social .ms-icons a {
    color: #ffffff !important;
    background: none !important;
    font-size: 1.6rem;
    margin: 0 0.75rem;
    transition: transform 0.2s ease;
  }

  body.praktisch-page .mobile-social .ms-icons a:hover {
    transform: scale(1.15);
  }

  /* Navigatie in social blok */
  body.praktisch-page .mobile-social .ms-footer-nav a {
    display: inline-block;
    margin: 0.25rem 0.5rem;
    color: #99cccc !important;
    font-size: 0.95rem;
    text-decoration: none;
  }

  body.praktisch-page .mobile-social .ms-footer-nav a:hover {
    text-decoration: underline;
  }

  /* Locatie-tekst wit */
  body.praktisch-page .mobile-social .ms-footer-location {
    color: #ffffff !important;
    font-size: 0.9rem;
    margin-top: 1rem;
  }

  body.praktisch-page .mobile-social .ms-footer-location i {
    color: #99cccc !important;
    margin-right: 0.35rem;
  }

  /* ===== MOBIEL: FOOTER ===== */
  body.praktisch-page .site-footer {
    background: #ffffff !important; /* witte achtergrond */
    color: #99cccc !important; /* donkergroene tekst */
    text-align: center;
    padding: 2rem 1.5rem;
  }

  body.praktisch-page .site-footer a {
    color: #99cccc !important; /* donkergroene links */
    text-decoration: none;
  }

  body.praktisch-page .site-footer a:hover {
    text-decoration: underline;
  }

  body.praktisch-page .site-footer .footer-nav li {
    display: inline-block;
    margin: 0.3rem 0.6rem;
  }

  body.praktisch-page .site-footer .footer-social a {
    color: #99cccc !important;
    margin: 0 0.5rem;
    font-size: 1.4rem;
  }

  body.praktisch-page .site-footer .footer-logo {
    max-width: 140px;
    margin-bottom: 1rem;
  }

  body.praktisch-page .site-footer .fa-location-dot {
    color: #99cccc !important;
  }
  body.praktisch-page .site-footer .ms-footer-location {
    color: #99cccc !important;
  }
  /* Tekst van het adres mint (#99cccc), icoon blijft wit */
  body.praktisch-page .mobile-social .ms-footer-location {
    color: #99cccc !important;
    -webkit-text-fill-color: #99cccc !important; /* iOS */
  }
  body.praktisch-page .mobile-social .ms-footer-location i {
    color: #99cccc !important;
    -webkit-text-fill-color: #99cccc !important; /* iOS */
  }
}
/* =========================================
   OVERONS — DESKTOP (mobiele versie uitschakelen + fine-tuning)
   + desktop offsets logopedie & kinesitherapie
   ========================================= */
@media (min-width: 769px) {
  /* -------- OVER ONS — DESKTOP -------- */
  .overons-page .why-ontpop.mobile-only {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  main.page-content.overons-page {
    row-gap: 3rem;
  }

  main.page-content.overons-page > section {
    margin: 0 !important;
  }

  .overons-page .why-ontpop,
  .overons-page .offers {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .overons-page .offers > .container {
    margin: 0 !important;
    padding: 0 !important;
  }

  .overons-page .why-ontpop.desktop-only {
    padding-bottom: 1px !important;
    border-bottom: 1px solid transparent !important;
  }

  .overons-page .offers {
    padding-top: 1px !important;
    border-top: 1px solid transparent !important;
    padding-bottom: clamp(2rem, 4vw, 4rem) !important;
  }

  /* Titel op Overons dichter tegen bovenkant */
  .overons-page .offers .offers-title {
    margin-top: clamp(2rem, 3vw, 3rem) !important;
  }

  .overons-page .offers .cards {
    margin-top: clamp(1.25rem, 2vw, 2rem) !important;
    gap: clamp(1.5rem, 3vw, 3rem) !important;
  }

  .overons-page .person-block.container {
    display: flex !important;
    align-items: flex-start;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(3rem, 5vw, 5rem) !important;
    margin-bottom: clamp(3rem, 5vw, 5rem) !important;
  }

  .overons-page .person-block .person-img {
    flex: 0 0 clamp(320px, 34vw, 460px);
  }

  .overons-page .person-block .person-img img {
    display: block;
    width: 100%;
    height: auto !important;
    border-radius: 18px;
  }

  .overons-page .person-block .person-text {
    flex: 1 1 auto;
    max-width: none;
  }

  .overons-page .site-footer.desktop-only {
    margin-top: clamp(2.5rem, 4vw, 4rem) !important;
  }

  .overons-page #wie-zijn-wij:target::before {
    content: "";
    display: block;
    height: 0 !important;
    margin-top: 0 !important;
  }

  /* -------- DESKTOP scroll-offset & titels -------- */

  :root {
    --desktop-header-h: 120px;
  }

  /* Logopedie: scroll-offset voor de blokken onder de header */
  .logopedie-page .mobile-logopedie-hero,
  .logopedie-page .mobile-logopedie-hero [id] {
    scroll-margin-top: var(--desktop-header-h);
  }

  /* Logopedie: intro blok direct onder header */
  body.logopedie-page .intro-text {
    margin-top: 0 !important;
  }

  /* Logopedie: "Waarvoor kan je bij ons terecht?" dichter tegen bovenkant */
  .logopedie-page h2#waarvoor-title.section-title {
    margin-top: clamp(2rem, 3vw, 3rem) !important;
    scroll-margin-top: 0;
  }

  /* Kinesitherapie: intro blok direct onder header */
  body.kinesitherapie-page .intro-text {
    margin-top: 0 !important;
  }

  /* Kinesitherapie: titels dichter tegen bovenkant */
  body.kinesitherapie-page h2.section-title {
    margin-top: clamp(2rem, 3vw, 3rem) !important;
  }

  /* Bestaand desktop-tuning blok kine laten staan */
  body.kinesitherapie-page .mobile-ontwikkelings-extra {
    background: #fff !important;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
  }

  body.kinesitherapie-page .mobile-ontwikkelings-extra .od-copy {
    max-width: 42ch;
    color: #6e6e6e;
    font-family: var(
      --font-body,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    text-align: left;
  }

  body.kinesitherapie-page .mobile-ontwikkelings-extra .od-buttons {
    display: grid;
    gap: 1.1rem;
    place-items: center;
    width: 100%;
  }
}

/* ============================================================
   MOBIEL — UNIFORME BUTTONVORM (logopedie)
   ============================================================ */
@media (max-width: 768px) {
  body.logopedie-page .mobile-taaltherapie-buttons .mtb-buttons a,
  body.logopedie-page .mobile-spraaktherapie-buttons .stb-buttons a,
  body.logopedie-page .mobile-spraaktherapie .stb-buttons a,
  body.logopedie-page .mobile-spraaktherapie .mtb-buttons a,
  body.logopedie-page .mobile-spraaktherapie .cta-buttons a,
  body.logopedie-page .mobile-spraaktherapie .buttons a,
  body.logopedie-page .mobile-only [class*="buttons"] a,
  body.logopedie-page .mobile-only a[class*="btn-"] {
    all: unset;
    display: inline-block !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    border-radius: 18px !important;
    padding: 0.8rem 1.6rem !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06) !important;
    font: 100 1rem/1.2
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
  }

  body.logopedie-page .mobile-taaltherapie-buttons .mtb-buttons a.btn-light,
  body.logopedie-page .mobile-spraaktherapie-buttons .stb-buttons a.btn-light,
  body.logopedie-page .mobile-spraaktherapie .stb-buttons a.btn-light,
  body.logopedie-page .mobile-only [class*="buttons"] a.btn-light {
    background: #fff2b4 !important;
    color: var(--brand-orange, #ffb703) !important;
  }

  body.logopedie-page .mobile-taaltherapie-buttons .mtb-buttons a.btn-dark,
  body.logopedie-page .mobile-spraaktherapie-buttons .stb-buttons a.btn-dark,
  body.logopedie-page .mobile-spraaktherapie .stb-buttons a.btn-dark,
  body.logopedie-page .mobile-only [class*="buttons"] a.btn-dark {
    background: #ffca43 !important;
    color: #fff !important;
  }

  body.logopedie-page .mobile-only [class*="buttons"] a:hover,
  body.logopedie-page .mobile-only a[class*="btn-"]:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }
  /* Hele 3e mobiele blok (taaltherapie-vervolg) wit maken */
  body.logopedie-page .mobile-taaltherapie-buttons {
    background: #ffffff !important;
  }
}

/* ============================================================
   MOBIEL — AFSTAND TUSSEN AFBEELDING EN TEKST (logopedie blokjes)
   ============================================================ */
@media (max-width: 768px) {
  .mobile-only .lt-copy,
  .mobile-only .st-copy,
  .mobile-only .vs-copy,
  .mobile-only .ls-copy,
  .mobile-only .rk-copy,
  .mobile-only .sp-copy,
  .mobile-taaltherapie .lt-copy,
  .mobile-voorschools .vs-copy {
    margin-top: 0 !important;
  }
}

/* ============================================================
   MOBIEL — uniforme afstand img → tekst (standaard 0.8rem)
   ============================================================ */
@media (max-width: 768px) {
  .mobile-only .mo-card-media,
  .mobile-taaltherapie .mo-card-media,
  .mobile-voorschoolse .mo-card-media {
    margin-bottom: 0.8rem !important;
  }
}

/* ============================================================
   HOMEPAGE — compacter beeld → tekst onder Logopedie-kaart
   ============================================================ */
@media (max-width: 768px) {
  body.home-page .mobile-offers .mo-card {
    gap: 0.5rem !important;
  }

  body.home-page .mobile-offers .mo-card-media {
    margin: 0 0 0.4rem 0 !important;
  }

  body.home-page .mobile-offers .mo-card-text {
    margin-top: 0 !important;
  }
}

/* ============================================================
   UNIVERSELE MOBILE DRAWER — ALLE PAGINA’S
   ============================================================ */
.mobile-drawer {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(255, 234, 180, 0.98) !important;
  backdrop-filter: blur(2px) !important;
  transform: translateY(-100%) !important;
  transition: transform 0.35s ease !important;
  z-index: 9999 !important;
  display: grid !important;
  align-content: start !important;
  box-sizing: border-box !important;
  padding: 1rem clamp(20px, 6vw, 28px) 2rem !important;
}

.mobile-drawer.open {
  transform: translateY(0) !important;
}

/* Sluitknop */
.mobile-drawer .drawer-close {
  background: none !important;
  border: none !important;
  font-size: 2.2rem !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 0.4rem !important;
  right: 0.75rem !important;
  color: var(--text) !important;
  cursor: pointer !important;
}

/* Navigatie (links uitgelijnd) */
.mobile-drawer .drawer-nav {
  list-style: none !important;
  margin: 3rem 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 0.25rem !important;
  text-align: left !important;
  justify-items: start !important;
  align-items: start !important;
}

.mobile-drawer .drawer-nav li {
  margin-bottom: 1.2rem !important;
}

.mobile-drawer .drawer-nav a {
  display: block !important;
  padding: 0.9rem 1rem !important;
  font-family: var(--font-deco) !important;
  font-size: 1.6rem !important;
  color: var(--text) !important;
  text-decoration: none !important;
  border-radius: 10px !important;
}

/* Pijltjes/bullets volledig uit */
.mobile-drawer .drawer-nav li::before,
.mobile-drawer .drawer-nav li::after,
.mobile-drawer .drawer-nav a::before,
.mobile-drawer .drawer-nav a::after,
.mobile-drawer .drawer-nav svg,
.mobile-drawer .drawer-nav i {
  display: none !important;
  content: none !important;
}

/* CTA-knop — universeel basis */
.mobile-drawer .drawer-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 1.5rem 0 0 !important;
  padding: 0.6rem 0 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  background: var(--primary, #ffd3ae) !important;
}

.mobile-drawer .drawer-cta:hover,
.mobile-drawer .drawer-cta:focus {
  filter: brightness(0.95) !important;
}

/* ============================================================
   PAGINA-SPECIFIEKE KLEUREN — drawer + CTA
   ============================================================ */
body.home-page .mobile-drawer {
  background-color: #ffd3ae !important;
  backdrop-filter: none !important;
}

body.home-page .mobile-drawer .drawer-cta {
  background-color: #ff8c42 !important;
  color: #ffffff !important;
}

body.logopedie-page .mobile-drawer {
  background-color: var(--brand-light) !important;
}

body.logopedie-page .mobile-drawer .drawer-cta {
  background-color: #ffca43 !important;
  color: #ffffff !important;
}

body.kinesitherapie-page .mobile-drawer {
  background-color: #ffe6ff !important;
}

body.kinesitherapie-page .mobile-drawer .drawer-cta {
  background-color: #ff99ff !important;
  color: #ffffff !important;
}

body.overons-page .mobile-drawer {
  background-color: #ffedcc !important;
  color: #ffffff !important;
}

body.overons-page .mobile-drawer .drawer-cta {
  background-color: #ffca43 !important;
  color: #ffffff !important;
}

body.praktisch-page .mobile-drawer {
  background-color: #d8f0ed !important;
}

body.praktisch-page .mobile-drawer .drawer-cta {
  background-color: #99cccc !important;
  color: #ffffff !important;
}

/* ============================================================
   UNIVERSELE HAMBURGER
   ============================================================ */
.hamburger {
  position: fixed !important;
  top: calc(var(--mobile-ui-top) + 4px) !important;
  right: calc(max(12px, env(safe-area-inset-right))) !important;
  width: 42px !important;
  height: 36px !important;
  display: inline-grid !important;
  align-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  z-index: 10000 !important;
  cursor: pointer !important;
}

.hamburger span {
  height: 3px !important;
  width: 100% !important;
  border-radius: 3px !important;
  background: var(--hamburger-color, var(--brand-orange)) !important;
  transition: background 0.3s ease !important;
}

/* pagina-specifieke hamburger kleuren */
body.home-page {
  --hamburger-color: #ff8c42;
}

body.logopedie-page {
  --hamburger-color: #ffca43;
}

body.kinesitherapie-page {
  --hamburger-color: #ff99ff;
}

body.overons-page {
  --hamburger-color: #ffca43;
}

body.praktisch-page {
  --hamburger-color: #99cccc;
}

/* desktop / mobiel toggles */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: initial !important; /* werkt voor button, a, div, … */
  }

  .desktop-only {
    display: none !important;
  }

  .hamburger.mobile-only {
    display: inline-grid !important; /* matcht je .hamburger-styling */
  }
}

/* ============================================
   CONTACT — MOBIEL (titel hoger, gele hamburger,
   logo + hamburger verdwijnen bij scroll)
   ============================================ */
@media (max-width: 768px) {
  /* Gele hamburgerkleur zoals introband */
  body.contact-page {
    --hamburger-color: var(--brand-light);
  }

  /* Sectie dichter onder logo/hamburger */
  body.contact-page .contact-blok {
    padding: 16px 20px 40px !important; /* minder top-padding → titel hoger */
    display: grid;
    justify-items: center;
    text-align: center;
    row-gap: 1rem;
  }

  /* Titel mooi hoog en gecentreerd */
  body.contact-page .contact-blok .section-title {
    margin: 0 0 1.2rem !important;
    text-align: center;
    width: 100%;
  }

  /* Form = mooie gecentreerde kolom */
  body.contact-page .contact-form {
    width: 100%;
    max-width: 520px;
    display: grid;
    gap: 22px;
    justify-items: center;
  }

  /* Two-up → onder elkaar */
  body.contact-page .contact-form .form-row,
  body.contact-page .contact-form .form-row.two-up {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px;
    width: 100%;
    justify-items: center;
  }

  /* Labels */
  body.contact-page .contact-form label {
    text-align: center !important;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
  }

  /* Velden */
  body.contact-page .contact-form input,
  body.contact-page .contact-form textarea {
    background: #fff7d6 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto 1rem !important;
    border: 1px solid #e8d8a2 !important;
    border-radius: 10px !important;
    padding: 0.8rem 1rem !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
  }

  body.contact-page .contact-form textarea {
    min-height: 120px;
    resize: vertical;
  }

  /* Placeholder */
  body.contact-page .contact-form input::placeholder,
  body.contact-page .contact-form textarea::placeholder {
    text-align: center !important;
    color: #9c9c9c !important;
    font-family: var(--font-sans);
  }

  /* Submit */
  body.contact-page .contact-form .form-actions {
    display: grid;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
  }

  body.contact-page .contact-form button[type="submit"] {
    background: #ffca43;
    color: #fff;
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 18px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    transition: 0.2s ease;
  }

  body.contact-page .contact-form button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(0.97);
  }

  /* Honeypot verbergen */
  body.contact-page .contact-form input[name="_gotcha"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Logo wat dichter naar boven */
  body.contact-page .mobile-logo {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Main geen extra ruimte geven bovenaan */
  body.contact-page main#main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Hamburger-streepjes in gele kleur */
  body.contact-page .hamburger span {
    background: var(--hamburger-color) !important;
  }

  /* Smooth overgang voor logo + hamburger */
  body.contact-page .mobile-logo,
  body.contact-page .hamburger {
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  /* Drawer-kleuren voor CONTACT: lichtgeel + donkergele CTA */
  body.contact-page .mobile-drawer {
    background-color: var(--brand-light) !important; /* lichtgeel */
    color: #333 !important;
  }

  body.contact-page .mobile-drawer .drawer-cta {
    background-color: #ffca43 !important; /* donkergeel */
    color: #fff !important;
  }
  body.contact-page .contact-form .form-row.two-up label {
    text-align: center !important;
    justify-self: center !important;
    float: none !important;
    margin: 0 auto 0.3rem !important;
    display: block !important;
    width: 100% !important;
  }
}

/* ============================================================
   FIX — Drawer lijst + breedte CTA op ALLE pagina's (mobiel)
   + UNIFORME TEKSTSTIJL, GUTTER, ETC.
   ============================================================ */
@media (max-width: 768px) {
  /* zelfde padding links/rechts in de drawer */
  .mobile-drawer {
    padding-left: clamp(20px, 6vw, 28px) !important;
    padding-right: clamp(20px, 6vw, 28px) !important;
  }

  /* lijst links uitgelijnd, maar over de volle breedte */
  .mobile-drawer .drawer-nav {
    padding: 0 !important;
    margin: 3rem 0 0 !important;
    text-align: left !important;
    justify-items: start !important;
    align-items: start !important;
    width: 100% !important;
  }

  /* elk li + link vult de volle breedte → CTA wordt ook breed */
  .mobile-drawer .drawer-nav li,
  .mobile-drawer .drawer-nav a {
    margin-left: 0 !important;
    padding-left: 0 !important;
    /* text-align: left !important;  ← deze weg */
    width: 100% !important;
    line-height: 1 !important;
  }

  /* CTA-knop — overal zelfde formaat als op Praktisch */
  body.home-page .mobile-drawer .drawer-cta,
  body.logopedie-page .mobile-drawer .drawer-cta,
  body.kinesitherapie-page .mobile-drawer .drawer-cta,
  body.overons-page .mobile-drawer .drawer-cta,
  body.praktisch-page .mobile-drawer .drawer-cta,
  body.contact-page .mobile-drawer .drawer-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 1.5rem 0 0 !important;
    padding: 0.9rem 1rem !important; /* zelfde als de andere links */
    border-radius: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: var(--font-deco) !important;
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }

  /* UNIFORME TEKSTSTIJL IN MOBIELE BLOKKEN */
  .mobile-only p,
  .mobile-only li {
    font-family: var(
      --font-sans,
      "Open Sans",
      "Helvetica Neue",
      Arial,
      sans-serif
    );
    font-size: 1rem;
    line-height: 1.9;
    color: #6e6e6e;
    text-align: left !important;
    margin: 0 0 0.5rem 0;
  }

  /* "Lees meer" + pijlen — per pagina eigen kleur */
  .section-scroll,
  .hero-scroll {
    color: var(--scroll-color, var(--brand-orange)) !important;
    fill: var(--scroll-color, var(--brand-orange)) !important;
  }

  .section-scroll .chevron path,
  .hero-scroll .chevron path {
    stroke: var(--scroll-color, var(--brand-orange)) !important;
  }

  body.home-page {
    --scroll-color: #ff8c42;
  }

  body.logopedie-page {
    --scroll-color: #ffca43;
  }

  body.kinesitherapie-page {
    --scroll-color: #ff99ff;
  }

  body.overons-page {
    --scroll-color: #ffca43;
  }

  body.praktisch-page {
    --scroll-color: #99cccc;
  }

  /* home: alles oranje */
  body.home-page .hero-scroll,
  body.home-page .section-scroll,
  body.home-page .hero-scroll .chevron,
  body.home-page .section-scroll .chevron {
    color: #ff8c42 !important;
    fill: #ff8c42 !important;
  }

  body.home-page .hero-scroll .chevron path,
  body.home-page .section-scroll .chevron path {
    stroke: #ff8c42 !important;
  }

  /* UNIVERSELE MOBILE-GUTTER & TEKSTUITLIJNING */
  :root {
    --mobile-gutter: clamp(16px, 4vw, 24px);
  }

  /* 1) alle mobiele secties dezelfde gutter */
  body
    :is(
      section.mobile-only,
      section[class^="mobile-"],
      section[class*=" mobile-"]
    ) {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  /* 2) veelgebruikte wrappers laten stretchen */
  body
    :is(
      section.mobile-only,
      section[class^="mobile-"],
      section[class*=" mobile-"]
    )
    :where(
      .container,
      .inner,
      .ms-inner,
      .mo-card,
      .mo-title-pill,
      .wk-copy,
      .mk-text,
      .od-copy,
      .br-copy,
      .vision-copy,
      .mo-card-text,
      .card-text,
      .section-copy,
      .copy,
      .text,
      .desc,
      .pp-links,
      .tarieven-table,
      .tarief-link,
      .wk-note
    ) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-self: stretch !important;
    text-align: left !important;
  }

  body.praktisch-page .mobile-only .tarief-link {
    text-align: center !important;
  }

  /* 3) p en li exact meeliften */
  body
    :is(
      section.mobile-only,
      section[class^="mobile-"],
      section[class*=" mobile-"]
    )
    :where(p, li) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* 4) img → tekst overal */
  body
    :is(
      section.mobile-only,
      section[class^="mobile-"],
      section[class*=" mobile-"]
    )
    :where(.mo-card-media, .mk-media, .br-media) {
    margin-bottom: 0.8rem !important;
  }

  /* 5) kinesitherapie extra vangnet */
  body.kinesitherapie-page
    section[class*="mobile-"]
    :where(
      .pt-copy,
      .od-copy,
      .ms-copy,
      .ak-copy,
      .rx-copy,
      .bb-copy,
      .tp-copy,
      .pt-buttons,
      .od-buttons,
      .ms-buttons,
      .ak-buttons,
      .rx-buttons,
      .bb-buttons,
      .tp-buttons,
      .mo-card-text,
      .section-copy,
      .copy,
      .text,
      .desc
    ) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    text-align: left !important;
  }

  /* bullets uitlijnen */
  body.kinesitherapie-page section[class*="mobile-"] .mo-bullets {
    margin-left: 0 !important;
    padding-left: 1.2rem !important;
  }
}

/* =========================================
   OVER ONS — MOBIEL: Loes exact gelijk trekken
   ========================================= */
@media (max-width: 768px) {
  /* zelfde afstand t.o.v. top */
  body.overons-page .mobile-loes {
    padding-top: calc(var(--mobile-ui-offset, 0px) + 32px) !important;
  }

  /* geen extra marge tussen Liselotte-blok en Loes-blok */
  body.overons-page section.mobile-wie-zijn-wij + section.mobile-loes {
    margin-top: 0 !important;
  }

  /* zelfde beeld → tekst afstand */
  body.overons-page .mobile-loes .mo-card-media {
    margin-bottom: 0.8rem !important;
  }

  /* titel zelfde als Liselotte + hard center */
  body.overons-page .mobile-loes .mo-card-title {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    margin: 0.8rem auto 0.35rem auto !important;
    line-height: 1.2;
  }

  /* kaart zelf geen extra top */
  body.overons-page .mobile-loes .mo-card,
  body.overons-page .mobile-loes .mo-card > *:first-child {
    margin-top: 0 !important;
  }

  /* ietsje lucht binnen de kaart maar gelijk aan andere */
  body.overons-page .mobile-loes .mo-card {
    row-gap: 0.6rem !important;
  }
}
/* =========================================
   MOBIEL — footer layout (ALLE PAGINA’S)
   ========================================= */
@media (max-width: 768px) {
  /* Basis mobile-social op alle pagina's */
  .mobile-social {
    width: 100%;
    text-align: center;
    display: grid;
    justify-items: center;
    row-gap: 1rem;
    /* géén flex op body hier, geen height:100% */
  }

  .mobile-social .ms-inner {
    width: 100%;
  }

  /* MENU LINKS → 3 op rij 1, 2 op rij 2 */
  .mobile-social .ms-footer-nav {
    display: grid !important;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    justify-items: center;
    gap: 0.6rem 1.2rem;
    text-align: center;
  }

  /* Link 4 → midden van rij 2 */
  .mobile-social .ms-footer-nav a:nth-child(4) {
    grid-column: 2;
  }

  /* Link 5 → rechts op rij 2 */
  .mobile-social .ms-footer-nav a:nth-child(5) {
    grid-column: 3;
  }

  /* Adres → rij 3, volledig gecentreerd */
  .mobile-social .ms-footer-location {
    text-align: center !important;
    justify-self: center;
    margin-top: 0.2rem;
  }

  /* Overons: adres gecentreerd zoals jij wou */
  body.overons-page .mobile-social .ms-footer-location {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    width: 100% !important;
  }
}
/* Smooth scroll overal */
html {
  scroll-behavior: smooth;
}

/* Alle secties met een ID op de kinesitherapie-pagina
   krijgen een veilige marge zodat ze mooi bovenaan uitlijnen */
.kinesitherapie-page section[id] {
  scroll-margin-top: 0 !important;
}
@media (max-width: 768px) {
  body.kinesitherapie-page {
    scroll-snap-type: none !important;
  }

  body.kinesitherapie-page section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}
@media (max-width: 768px) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Geen extra top-ruimte op de kinesitherapie-pagina zelf */
  body.kinesitherapie-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* En ook niet op de belangrijkste wrappers */
  body.kinesitherapie-page #page,
  body.kinesitherapie-page #wrapper,
  body.kinesitherapie-page #main,
  body.kinesitherapie-page main.page-content,
  body.kinesitherapie-page .mobile-kine-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* =========================================
   KINESITHERAPIE — scroll snap tussen mobiele blokken
   ========================================= */
@media (max-width: 768px) {
  /* Body als snap-container */
  body.kinesitherapie-page {
    scroll-snap-type: y mandatory !important;
    overscroll-behavior-y: contain;
  }

  /* Alle mobiele blok-secties laten "snappen" */
  body.kinesitherapie-page section[class^="mobile-"],
  body.kinesitherapie-page section[class*=" mobile-"] {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
}
@media (max-width: 768px) {
  /* Kinesitherapie – zelfde knopstijl ook voor laatste blokken */
  body.kinesitherapie-page .rx-buttons a,
  body.kinesitherapie-page .bb-buttons a,
  body.kinesitherapie-page .tp-buttons a {
    all: unset;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 18px;
    padding: 0.8rem 1.6rem;
    text-align: center;
    font: 100 1rem/1.2
      var(--font-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  body.kinesitherapie-page .rx-buttons .btn-light-pink,
  body.kinesitherapie-page .bb-buttons .btn-light-pink,
  body.kinesitherapie-page .tp-buttons .btn-light-pink {
    background: #ffe6ff !important;
    color: var(--brand-pink, #ff99ff) !important;
  }

  body.kinesitherapie-page .rx-buttons .btn-dark-pink,
  body.kinesitherapie-page .bb-buttons .btn-dark-pink,
  body.kinesitherapie-page .tp-buttons .btn-dark-pink {
    background: var(--brand-pink, #ff99ff) !important;
    color: #fff !important;
  }

  body.kinesitherapie-page .rx-buttons a:hover,
  body.kinesitherapie-page .bb-buttons a:hover,
  body.kinesitherapie-page .tp-buttons a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
  }
}
/* ============================================================
   OVER ONS — DESKTOP: foto’s en titels uniform
   ============================================================ */
@media (min-width: 769px) {
  .overons-page .offers .card img {
    max-width: 450px !important;
    height: 420px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 32px !important;
    display: block !important;
    margin: 0 0 1.2rem 0 !important;
    background: #fff !important;
  }

  .overons-page .offers .card-title {
    text-align: center !important;
    margin: 0 auto 1rem auto !important;
  }

  .overons-page .offers .card-text {
    text-align: left !important;
  }

  /* Titels boven secties overal uniform */
  body.home-page h2.section-title,
  body.logopedie-page h2.section-title,
  body.kinesitherapie-page h2.section-title,
  body.overons-page h2.section-title,
  body.werkwijze-page h2.section-title,
  body.tarieven-page h2.section-title,
  body.bereikbaarheid-page h2.section-title {
    margin-top: clamp(2rem, 3vw, 3rem) !important;
  }

  /* Logopedie — gele pijltjes in WHY-lijst */
  body.logopedie-page .why-block ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 1rem 0 !important;
  }

  body.logopedie-page .why-block ul li {
    position: relative;
    padding-left: 3rem !important;
    margin: 0.35rem 0;
    line-height: 1.8;
  }

  body.logopedie-page .why-block ul li::marker {
    content: "" !important;
  }

  body.logopedie-page .why-block ul li::after {
    content: "";
    position: absolute;
    left: 0;
    top: -0.5em;
    width: 3rem;
    height: 3rem;
    background: url("../images/pijl-geel.png") no-repeat center / contain;
  }

  /* Logopedie & Kine — anchors correct uitlijnen */
  /* .logopedie-page #taaltherapie,
  .logopedie-page #spraaktherapie,
  .logopedie-page #voorschoolse,
  .logopedie-page #leerstoornissen,
  .logopedie-page #communicatietherapie,
  .kinesitherapie-page #psychomotorische,
  .kinesitherapie-page #ontwikkelingsstimulatie,
  .kinesitherapie-page #musculoskeletale,
  .kinesitherapie-page #ademhaling,
  .kinesitherapie-page #bobath,
  .kinesitherapie-page #relaxatie,
  .kinesitherapie-page #typlessen {
    scroll-margin-top: 350px !important;
  } */
}

/* ============================================================
   CONTACT — logo + hamburger verdwijnen bij scroll
   ============================================================ */
@media (max-width: 768px) {
  body.contact-page.scrolled-away .mobile-logo,
  body.contact-page.scrolled-away .hamburger {
    opacity: 0 !important;
    transform: translateY(-24px) !important;
    pointer-events: none !important;
    display: none !important;
  }
}

/* ============================================================
   KINESITHERAPIE — mobile social footer
   ============================================================ */
@media (max-width: 768px) {
  body.kinesitherapie-page #mobile-social {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 100vh !important;
    padding: 0 !important;
  }

  body.kinesitherapie-page #mobile-social .ms-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    flex: 1 0 auto !important;
  }

  body.kinesitherapie-page #mobile-social .ms-footer-nav,
  body.kinesitherapie-page #mobile-social .ms-footer-location {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0.75rem 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.kinesitherapie-page #mobile-social .ms-footer-nav {
    margin-top: auto !important;
  }

  body.kinesitherapie-page #mobile-social .ms-footer-location {
    padding-top: 0.4rem !important;
    padding-bottom: 1.6rem !important;
  }
}

/* ============================================================
   OVER ONS — Mobile social footer
   ============================================================ */
@media (max-width: 768px) {
  body.overons-page #mobile-social {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 100vh !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body.overons-page #mobile-social .ms-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    flex: 1 0 auto !important;
  }

  body.overons-page #mobile-social .ms-footer-nav,
  body.overons-page #mobile-social .ms-footer-location {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    background: var(--brand-light, #ffedcc) !important;
    margin: 0 !important;
    border: none !important;
  }

  body.overons-page #mobile-social .ms-footer-nav {
    margin-top: auto !important;
    padding: 0.75rem 0.35rem !important;
  }

  body.overons-page #mobile-social .ms-footer-location {
    margin-top: -1px !important;
    padding: 0.35rem 1.5rem !important;
    text-align: center !important;
  }
}

/* ============================================================
   PRAKTISCH — alle scrollcontainers uitschakelen
   ============================================================ */
body.praktisch-page .page-content,
body.praktisch-page #page,
body.praktisch-page #wrapper {
  overflow: visible !important;
  max-height: none !important;
}

@media (max-width: 768px) {
  body.praktisch-page,
  body.praktisch-page #page,
  body.praktisch-page #wrapper,
  body.praktisch-page #main,
  body.praktisch-page .site-content,
  body.praktisch-page .content-area,
  body.praktisch-page .page-content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.praktisch-page section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}

/* ============================================================
   GLOBAL — geen woordafbreking
   ============================================================ */
html,
body,
body * {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* ============================================================
   LOGOPEDIE & KINE — Header & footer responsive
   ============================================================ */
@media (max-width: 1366px) {
  .logopedie-page .site-header,
  .kinesitherapie-page .site-header {
    padding: 0.3rem 0.8rem !important;
  }

  .main-nav a,
  .main-nav a {
    font-size: 1.3rem !important;
    padding: 0.4rem 0.7rem !important;
    white-space: nowrap !important;
  }

  .logopedie-page .main-nav ul,
  .kinesitherapie-page .main-nav ul {
    flex-wrap: wrap !important;
    row-gap: 0.3rem !important;
  }

  .logopedie-page .footer-inner,
  .kinesitherapie-page .footer-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }

  .logopedie-page .footer-nav,
  .kinesitherapie-page .footer-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.8rem !important;
  }

  .logopedie-page .footer-nav a,
  .kinesitherapie-page .footer-nav a {
    font-size: 1.2rem !important;
    padding: 0.35rem 0.7rem !important;
  }

  .logopedie-page .footer-social a i,
  .kinesitherapie-page .footer-social a i {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   PRATISCH-DROPDOWN — Final, uniform op ALLE pagina’s
   ============================================================ */
body.logopedie-page .footer-nav .dropdown-menu li a,
body.kinesitherapie-page .footer-nav .dropdown-menu li a,
.footer-nav .dropdown-menu li a {
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
  padding: 0.45rem 0.8rem !important;
  font-family: var(--font-deco) !important;
  font-weight: 300 !important;
  margin: 0 !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
}

body.logopedie-page .footer-nav .dropdown-menu li,
body.kinesitherapie-page .footer-nav .dropdown-menu li,
.footer-nav .dropdown-menu li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.footer-nav .dropdown-menu li a:hover,
.footer-nav .dropdown-menu li a.active {
  background: #99cccc !important;
  color: #ffffff !important;
}
/* ============================================================
   LOGOPEDIE & KINE — gewone footer navigatie identiek aan HOME
   ============================================================ */

/* Zelfde layout / gap als op home */
body.logopedie-page .site-footer .footer-nav,
body.kinesitherapie-page .site-footer .footer-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 1.5rem !important; /* zelfde afstand tussen items als op home */
  margin: 0 !important;
  padding: 0 !important;
}

/* Zorg dat <li> geen extra ruimte toevoegen */
body.logopedie-page .site-footer .footer-nav li,
body.kinesitherapie-page .site-footer .footer-nav li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Links zelf identiek aan homepage-stijl */
body.logopedie-page .site-footer .footer-nav a,
body.kinesitherapie-page .site-footer .footer-nav a {
  font-size: 1.7rem !important; /* zelfde grootte als home */
  padding: 0.6rem 1rem !important; /* zelfde “pil”-hoogte/breedte */
  border-radius: 8px !important;
  font-family: var(--font-deco) !important;
  text-decoration: none !important;
  display: inline-block !important;
}
/* ============================================================
   LOGOPEDIE & KINE — HEADER navigatie afstemmen op global
   ============================================================ */

/* UL: zelfde uitlijning + gap als globale header */
body.logopedie-page .site-header .main-nav ul,
body.kinesitherapie-page .site-header .main-nav ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  /* gap: 1.8rem !important; 
  padding: 0 !important;
  margin: 0 !important; */
}

/* LI: geen extra marge/padding die spacing vergroot */
body.logopedie-page .site-header .main-nav li,
body.kinesitherapie-page .site-header .main-nav li {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Links gebruiken gewoon de globale .main-nav a-stijl
   (geen extra font-size/padding overrides meer) */

/* ============================================================
   LOGOPEDIE & KINE — FOOTER navigatie gelijk aan andere pagina's
   ============================================================ */

body.logopedie-page .site-footer .footer-nav,
body.kinesitherapie-page .site-footer .footer-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.logopedie-page .site-footer .footer-nav li,
body.kinesitherapie-page .site-footer .footer-nav li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

body.logopedie-page .site-footer .footer-nav a,
body.kinesitherapie-page .site-footer .footer-nav a {
  font-size: 1.7rem !important;
  padding: 0.6rem 1rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-family: var(--font-deco) !important;
  display: inline-block !important;
}

/* ============================================================
   PRAKTISCH – FOOTER DROPDOWN LIJST TERUG COMPACT (ALLE PAGINA'S)
   ============================================================ */

.footer-nav .dropdown-menu {
  padding: 0.5rem 0.75rem !important;
  width: 200px !important;
  box-sizing: border-box !important;
}

.footer-nav .dropdown-menu li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}

.footer-nav .dropdown-menu li a {
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  padding: 0.35rem 0.65rem !important;
  display: block !important;
  text-align: left !important;
}

/* ============================================================
   GLOBAL RESET (veilig)
   ============================================================ */
html,
body {
  margin: 0;
  padding: 0;
}

/* ============================================================
   HEADER — compact + logo groot zonder header te verhogen
   ============================================================ */
.site-header {
  margin: 0;
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  padding: 0.25rem 0; /* compact */
}

/* Desktop: enkel desktop-logo tonen */
@media (min-width: 769px) {
  .site-header .logo.logo-desktop {
    display: block !important;
  }
  .site-header .logo.logo-mobile {
    display: none !important;
  }
}

/* Logo: layout-hoogte klein, visueel groot (geen header-shift) */
.site-header .logo-desktop {
  height: 50px; /* layout */
  width: auto;
  display: block;
  transform: scale(3);
  transform-origin: left center;
}


@media (max-width: 991px) {
  .site-header .logo-desktop {
    transform: scale(2);
  }
}

/* Afspraakknop (terug zoals vroeger) */
.site-header .cta .btn {
  font-size: 1.4rem !important;
  padding: 1.2rem 3.5rem !important;
  line-height: 1.2 !important;
  border-radius: 10px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Nav baseline (veilig) */
.site-header .main-nav ul {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
}
.site-header .main-nav li {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* ============================================================
   DROPDOWN "PRAKTISCH" — ALTIJD dicht, enkel open bij hover/focus
   (fix voor logopedie/kine waar hij bleef openstaan)
   ============================================================ */
.site-header .main-nav li.dropdown {
  position: relative;
}

/* DICHT forceren (overschrijft oude pagina-specifieke regels) */
.site-header .main-nav li.dropdown > .dropdown-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;

  margin: 0;
  padding: 0.75rem 1rem;
  list-style: none;

  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 200px;

  flex-direction: column;
  align-items: flex-start;
  row-gap: 0;
}

/* Openen enkel bij hover of keyboard */
.site-header .main-nav li.dropdown:hover > .dropdown-menu,
.site-header .main-nav li.dropdown:focus-within > .dropdown-menu {
  display: flex !important;
}

/* Items/links */
.site-header .main-nav li.dropdown > .dropdown-menu > li {
  width: 100%;
  margin: 0;
  padding: 0;
}
.site-header .main-nav li.dropdown > .dropdown-menu > li > a {
  display: block;
  width: 100%;
  padding: 0.35rem 0.65rem;
  text-align: left;
}

/* BELANGRIJK: eventuele oude “klik” classes mogen niets openen */
.site-header .main-nav li.dropdown.open > .dropdown-menu,
.site-header .main-nav li.dropdown.active > .dropdown-menu {
  display: none !important;
}

/* ============================================================
   TITELS — ALLE PAGINA'S BEHALVE HOME: niet onder header, wel dicht
   (fix voor pagina’s waar titels verdwenen onder header)
   ============================================================ */
@media (min-width: 769px) {
  /* Gebruik 1 vaste offset voor alle subpagina’s */
  body:not(.home-page) #main,
  body:not(.home-page) main.page-content {
    padding-top: 5.6rem !important; /* <-- header-hoogte “veilig” */
    margin-top: 0 !important;
  }

  /* Eerste desktop-blok geen extra top-ruimte */
  body:not(.home-page) #main > *:not(.mobile-only):first-of-type,
  body:not(.home-page) main.page-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Eerste titel geen extra top-marge */
  body:not(.home-page) #main h1:first-of-type,
  body:not(.home-page) #main h2.section-title:first-of-type,
  body:not(.home-page) main.page-content h1:first-of-type,
  body:not(.home-page) main.page-content h2.section-title:first-of-type {
    margin-top: 0 !important;
  }
}

/* ============================================================
   CONTACT — titel gecentreerd
   ============================================================ */
body.contact-page .contact-blok .section-title {
  text-align: center !important;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* ============================================================
   OVER ONS — bullets consistent
   ============================================================ */
@media (min-width: 769px) {
  .overons-page .why-ontpop ul li {
    font-size: 1.2rem !important;
    line-height: 1.9 !important;
  }
}

/* ============================================================
   FOOTER — stabiel & compact (zoals je vorige “goede” gedrag)
   ============================================================ */
.site-footer .footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.1rem;
}

.site-footer .footer-logo-link {
  order: 0;
}

.site-footer .footer-nav {
  order: 1;
  margin: 0 auto;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.site-footer .footer-nav li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.site-footer .footer-social {
  order: 1;
  margin-left: auto;
  white-space: nowrap;
}
.site-footer .footer-social a {
  display: inline-flex;
}

.site-footer .footer-contact {
  order: 2;
  flex: 0 0 100% !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  color: #7a7a7a;
  font-family: var(--font-sans);
}

.site-footer .footer-contact a {
  color: inherit;
  text-decoration: none;
}
.site-footer .footer-contact a:hover {
  text-decoration: underline;
}
/* ============================================================
   TITELS — Logopedie & Kinesitherapie iets hoger uitlijnen
   (desktop, zonder andere pagina’s te beïnvloeden)
   ============================================================ */
@media (min-width: 769px) {
  /* Eerste desktop-sectie iets dichter tegen de header */
  body.logopedie-page #main .intro-text.desktop-only,
  body.kinesitherapie-page #main .intro-text.desktop-only {
    margin-top: -4.2rem !important; /* subtiele opschuiving */
  }

  /* Titel zelf geen extra marge bovenaan */
  body.logopedie-page #main .intro-text.desktop-only .section-title,
  body.kinesitherapie-page #main .intro-text.desktop-only .section-title {
    margin-top: 0 !important;
  }
}
/* ============================================================
   FIX — witte ruimte ONDER de footer (kine / tarieven / bereikbaarheid)
   Plaats dit helemaal ONDERAAN styles.css
   ============================================================ */

/* 1) Niets van extra margin/padding onderaan */
body.kinesitherapie-page,
body.tarieven-page,
body.bereikbaarheid-page {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important; /* haalt 100vh-effect weg indien gezet */
}

/* 2) Als je een wrapper gebruikt (#page komt bij jou voor): ook die resetten */
body.kinesitherapie-page #page,
body.tarieven-page #page,
body.bereikbaarheid-page #page {
  min-height: auto !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) Main/content mag geen “reserve-ruimte” onderaan hebben */
body.kinesitherapie-page #main,
body.tarieven-page #main,
body.bereikbaarheid-page #main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 4) Footer zelf: geen extra ruimte onderaan */
body.kinesitherapie-page .site-footer,
body.tarieven-page .site-footer,
body.bereikbaarheid-page .site-footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* ============================================================
   FINAL OVERRIDES — Praktisch pages: dropdown hover + no double scroll + no footer gap
   Plaats dit HELEMAAL ONDERAAN styles.css
   ============================================================ */

/* --------------------------------------------
   1) DROPDOWN: enkel open bij HOVER / FOCUS (desktop)
   (overschrijft oudere click-versies met .open/.active)
   -------------------------------------------- */
@media (min-width: 769px) {
  /* referentiepunt */
  .site-header .main-nav li.dropdown,
  .site-footer .footer-nav li.dropdown {
    position: relative;
  }

  /* standaard dicht */
  .site-header .main-nav li.dropdown > .dropdown-menu,
  .site-footer .footer-nav li.dropdown > .dropdown-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0.75rem 1rem;
    list-style: none;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
    min-width: 200px;

    /* verticaal */
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0;
  }

  /* open bij hover/focus */
  .site-header .main-nav li.dropdown:hover > .dropdown-menu,
  .site-header .main-nav li.dropdown:focus-within > .dropdown-menu,
  .site-footer .footer-nav li.dropdown:hover > .dropdown-menu,
  .site-footer .footer-nav li.dropdown:focus-within > .dropdown-menu {
    display: flex !important;
  }

  /* forceer: click-states mogen NIET automatisch open blijven op desktop */
  .site-header .main-nav li.dropdown.open > .dropdown-menu,
  .site-header .main-nav li.dropdown.active > .dropdown-menu,
  .site-footer .footer-nav li.dropdown.open > .dropdown-menu,
  .site-footer .footer-nav li.dropdown.active > .dropdown-menu {
    display: none !important;
  }

  /* items netjes full width */
  .site-header .main-nav li.dropdown > .dropdown-menu > li,
  .site-footer .footer-nav li.dropdown > .dropdown-menu > li {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .site-header .main-nav li.dropdown > .dropdown-menu > li > a,
  .site-footer .footer-nav li.dropdown > .dropdown-menu > li > a {
    display: block;
    width: 100%;
    padding: 0.35rem 0.65rem;
    text-align: left;
  }
}

/* --------------------------------------------
   2) WERKWIJZE: dubbele scrollbar weg
   (neutraliseert “height/overflow” op main.page-content)
   -------------------------------------------- */
body.werkwijze-page main.page-content,
body.praktisch-page main.page-content,
body.tarieven-page main.page-content,
body.bereikbaarheid-page main.page-content {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Extra safety: geen verticale overflow op wrappers die soms 100vh + scroll krijgen */
body.werkwijze-page #main,
body.praktisch-page #main,
body.tarieven-page #main,
body.bereikbaarheid-page #main {
  overflow: visible !important;
}

/* --------------------------------------------
   3) WITRUIMTE ONDER FOOTER weg (tarieven/bereikbaarheid/werkwijze)
   -> body als flex-kolom, footer “duwt” naar onder zonder gap
   + oude absolute footer-contact uitschakelen
   -------------------------------------------- */
body.werkwijze-page,
body.tarieven-page,
body.bereikbaarheid-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
}

/* main vult de ruimte, footer blijft netjes onderaan */
body.werkwijze-page #main,
body.tarieven-page #main,
body.bereikbaarheid-page #main {
  flex: 1 0 auto;
}

/* footer niet “extra lang” maken */
body.werkwijze-page .site-footer,
body.tarieven-page .site-footer,
body.bereikbaarheid-page .site-footer {
  margin-top: auto;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* als je ooit footer-contact absoluut had gezet: terug normaal maken */
body.werkwijze-page .site-footer .footer-contact,
body.tarieven-page .site-footer .footer-contact,
body.bereikbaarheid-page .site-footer .footer-contact {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
}
/* ============================================================
   FINAL FIX — Praktisch-subpagina’s (incl. werkwijze/tarieven/bereikbaarheid)
   Werkt OOK wanneer body class = "praktisch-page"
   Plaats dit HELEMAAL ONDERAAN styles.css
   ============================================================ */

/* -----------------------------
   A) DROPDOWN: alleen hover/focus (DESKTOP)
   + forceer dat .open/.active niets doet
   ----------------------------- */
@media (min-width: 769px) {
  .site-header .main-nav li.dropdown,
  .site-footer .footer-nav li.dropdown {
    position: relative;
  }

  .site-header .main-nav li.dropdown > .dropdown-menu,
  .site-footer .footer-nav li.dropdown > .dropdown-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0.75rem 1rem;
    list-style: none;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    flex-direction: column;
    align-items: flex-start;
    row-gap: 0;
  }

  .site-header .main-nav li.dropdown:hover > .dropdown-menu,
  .site-header .main-nav li.dropdown:focus-within > .dropdown-menu,
  .site-footer .footer-nav li.dropdown:hover > .dropdown-menu,
  .site-footer .footer-nav li.dropdown:focus-within > .dropdown-menu {
    display: flex !important;
  }

  /* 🔒 op desktop mogen click-klassen NOOIT open blijven */
  .site-header .main-nav li.dropdown.open > .dropdown-menu,
  .site-header .main-nav li.dropdown.active > .dropdown-menu,
  .site-footer .footer-nav li.dropdown.open > .dropdown-menu,
  .site-footer .footer-nav li.dropdown.active > .dropdown-menu {
    display: none !important;
  }
}

/* -----------------------------
   B) DUBBELE SCROLLBAR WEG
   -> laat enkel de BODY scrollen
   ----------------------------- */
html,
body {
  height: auto !important;
  overflow-y: auto !important;
}

/* Heel belangrijk: main mag geen eigen scrollcontainer zijn */
main.page-content,
#main.page-content,
#main {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Als je drawer open staat: body niet scrollen */
body.nav-open {
  overflow: hidden !important;
}

/* -----------------------------
   C) WITRUIMTE ONDER FOOTER WEG
   -> body als kolom, main vult, footer onderaan
   (werkt voor praktisch-page én voor aparte tarieven/bereikbaarheid classes)
   ----------------------------- */
body.praktisch-page,
body.tarieven-page,
body.bereikbaarheid-page,
body.werkwijze-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
}

/* main neemt resterende ruimte */
body.praktisch-page #main,
body.tarieven-page #main,
body.bereikbaarheid-page #main,
body.werkwijze-page #main {
  flex: 1 0 auto;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* footer niet “verlengen” + geen extra ruimte eronder */
body.praktisch-page .site-footer,
body.tarieven-page .site-footer,
body.bereikbaarheid-page .site-footer,
body.werkwijze-page .site-footer {
  margin-top: auto;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Als footer-contact ooit absolute was: altijd terug normaal */
.site-footer .footer-contact {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}
/* ============================================================
   TARIEVEN + BEREIKBAARHEID — footer gap weg (zonder werkwijze te raken)
   ============================================================ */

body.tarieven-page,
body.bereikbaarheid-page {
  margin: 0 !important;
  padding: 0 !important;

  /* footer onderaan zonder extra ruimte */
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Killers: wrappers die vaak 100vh/scroll krijgen */
body.tarieven-page #page,
body.tarieven-page #wrapper,
body.tarieven-page #main,
body.tarieven-page main.page-content,
body.bereikbaarheid-page #page,
body.bereikbaarheid-page #wrapper,
body.bereikbaarheid-page #main,
body.bereikbaarheid-page main.page-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;

  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* main vult de ruimte, footer plakt aan onderkant zonder witruimte */
body.tarieven-page #main,
body.bereikbaarheid-page #main {
  flex: 1 0 auto !important;
}

body.tarieven-page .site-footer,
body.bereikbaarheid-page .site-footer {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Als er een laatste blok/section nog extra ruimte geeft */
body.tarieven-page #main > *:last-child,
body.bereikbaarheid-page #main > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* ============================================================
   TARIEVEN + BEREIKBAARHEID — witte ruimte onder footer weg
   (werkt alleen als body ook tarieven-page / bereikbaarheid-page heeft)
   ============================================================ */

body.tarieven-page,
body.bereikbaarheid-page {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body.tarieven-page #main,
body.bereikbaarheid-page #main {
  flex: 1 0 auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

body.tarieven-page .site-footer,
body.bereikbaarheid-page .site-footer {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* ============================================================
   FINAL FIX — TITELS terug zichtbaar op Werkwijze/Tarieven/Bereikbaarheid
   (zonder Logopedie/Kine stuk te breken)
   Plaats HELEMAAL ONDERAAN styles.css
   ============================================================ */

@media (min-width: 769px) {
  /* 1) Grote offset UIT voor praktisch-subpagina's */
  body.praktisch-page #main,
  body.praktisch-page main.page-content {
    padding-top: 1.2rem !important; /* dicht tegen header */
    margin-top: 0 !important;
  }

  /* 2) Extra zekerheid: eerste titel mag niet “naar beneden verdwijnen” */
  body.praktisch-page #main h1:first-of-type,
  body.praktisch-page #main h2.section-title:first-of-type,
  body.praktisch-page main.page-content h1:first-of-type,
  body.praktisch-page main.page-content h2.section-title:first-of-type {
    margin-top: 0 !important;
  }
}
/* ============================================================
   FIX — Praktisch-subpagina’s (werkwijze/tarieven/bereikbaarheid)
   Content mag NIET onder de header schuiven
   Plaats HELEMAAL ONDERAAN styles.css
   ============================================================ */

@media (min-width: 769px) {
  /* 1) Zorg dat de header op deze pagina’s NIET overlay/fixed is */
  body.praktisch-page .site-header {
    position: static !important; /* voorkomt overlap */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* 2) Main start netjes onder header (klein beetje ruimte) */
  body.praktisch-page #main,
  body.praktisch-page main.page-content {
    padding-top: 1.2rem !important;
    margin-top: 0 !important;
  }

  /* 3) Eerste section/container mag niet “negatief” of met rare offset starten */
  body.praktisch-page #main > *:first-child,
  body.praktisch-page main.page-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }

  /* 4) Eerste titel altijd zichtbaar */
  body.praktisch-page #main h1:first-of-type,
  body.praktisch-page #main h2.section-title:first-of-type {
    margin-top: 0 !important;
  }
}
/* ============================================================
   LIVE FIX — witruimte onder footer (kine/bereikbaarheid/tarieven/werkwijze)
   Oorzaak: footer-background zit (deels) op inner/wrapper i.p.v. op .site-footer
   Plak HELEMAAL ONDERAAN styles.css
   ============================================================ */

/* 1) Zorg dat de footer zélf de achtergrond draagt (dus ook “lege” pixels) */
.site-footer {
  margin: 0 !important;
  padding: 0 !important;
  background: inherit; /* fallback als je elders footer-bg zet */
}

/* Als jouw footer-kleur op .footer-inner staat, kopiëren we die naar .site-footer */
.site-footer .footer-inner {
  margin: 0 !important;
}

/* Zet de achtergrond expliciet ook op .site-footer (meest robuust) */
.site-footer {
  background: #ffedcc !important; /* <- gebruik exact jouw footerkleur */
}

/* 2) Die extra container onderaan de footer (met sr-only nav) mag geen ruimte maken */
.site-footer > .container {
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) sr-only mag letterlijk geen layout-hoogte innemen */
.site-footer .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.overons-page .person-block.container {
    align-items: start !important;
}


.site-footer.desktop-only,
body.praktisch-page .site-footer,
body.kinesitherapie-page .site-footer {
  padding-bottom: 40px !important;
}

.site-footer .footer-social a, .site-footer .footer-social a {
    text-decoration: none;
}

.site-footer.desktop-only .footer-social,
.site-footer .footer-social {
    margin-right: 40px !important;
}

.site-footer.desktop-only .footer-nav li.dropdown > .dropdown-menu {
    bottom: 100% !important;
    top: auto !important;
}
body.logopedie-page .why-block ul li,
:where(.logopedie-page, .kinesitherapie-page, .praktisch-page) .why-block .why-text :where(p, li),
.overons-page .why-ontpop p,
.overons-page .why-ontpop ul li,
.person-block .person-text p,
.person-block .person-text li { 
    word-break: normal !important;
    word-wrap: normal !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
    overflow-wrap: normal !important;
}
.overons-page .footer-mobile {
    background-color: #FFF;
}
.overons-page .mobile-loes .mo-card-media img {
    object-fit: cover !important;
}
@media (max-width: 1199px) {
  .desktop-only.site-footer .footer-contact,
  .site-footer .footer-contact {
    margin-top: 40px !important;
  }
}
@media (max-width: 768px) {
  .mobile-only .hero-scroll, 
  .mobile-only .section-scroll,
  .section-scroll,
  .bottom-scroll {
    display: none !important;
  }
}