/* podofit.nl — één stylesheet, geen framework.
   Kleuren en typografie komen uit design/tokens.json; de waarden hieronder zijn
   daarvan de neerslag. Wijzig ze op één plek: in dit :root-blok. */

/* Het BaseKit-thema kent vier sectiestijlen — light, spare, accent, dark — die
   samen achtergrond én tekstkleur bepalen. Dat systeem is hier overgenomen als
   .sectie--light/spare/accent/dark, want het is wat de site zijn ritme geeft. */

:root {
  --accent: #b59775;
  --accent-donker: #a17e56;
  --accent-licht: #c8b198;
  --donker: #252525;
  --spare: #eaeaea;
  --wit: #ffffff;
  --tekst: #252525;
  --tekst-zacht: #565656; /* 7:1 op wit — leesbaar, ook met minder scherp zicht */
  --rand: #e6e6e6;

  --font-kop: 'Open Sans Condensed', 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-tekst: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --breedte: 1200px;
  --breedte-tekst: 760px;
  --gutter: 20px;
  --sectie-y: 80px;
  --radius: 4px;
  --radius-kaart: 8px;
  --radius-knop: 4px;
  --schaduw: 0 8px 30px rgb(37 37 37 / 10%);
}

/* ── basis ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Vaste basisgrootte van 19px in plaats van de gebruikelijke 16. Veel bezoekers
   zijn ouder; dit is het uitgangspunt, niet iets wat je eerst moet aanzetten.
   Alles wat tekst is rekent in rem, dus deze ene waarde bepaalt de hele pagina.
   Wie het nog groter wil, gebruikt de zoom van de browser — die werkt hier gewoon. */
html {
  font-size: 118.75%; /* 19px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Genoeg ruimte onder een aanklikbare kop wanneer je ernaartoe springt. */
:target {
  scroll-margin-top: 6rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-donker);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-kop);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--tekst);
}

h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  margin-top: 1.8em;
}

h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  margin-top: 1.6em;
}

p {
  margin: 0 0 1.1em;
}

ul,
ol {
  margin: 0 0 1.2em;
  padding-left: 1.3em;
}

li {
  margin-bottom: 0.4em;
}

blockquote {
  margin: 1.6em 0;
  padding: 1em 1.4em;
  border-left: 4px solid var(--accent);
  background: var(--spare);
  font-style: italic;
}

/* Achtergrond vastzetten zolang het mobiele menu openstaat. */
body.menu-open {
  overflow: hidden;
}

.sr,
.overslaan:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.overslaan:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  background: var(--donker);
  color: var(--wit);
  padding: 10px 16px;
  border-radius: var(--radius);
}

:focus-visible {
  outline: 3px solid var(--donker);
  outline-offset: 2px;
}

/* ── knoppen ────────────────────────────────────────────────────────────── */
/* Twee varianten, precies zoals de site ze gebruikt: accent met donkere tekst voor
   gewone knoppen, donker met witte tekst voor de hoofd-CTA in de hero. */
.knop {
  display: inline-block;
  background: var(--accent);
  color: var(--donker);
  font-family: var(--font-kop);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius-knop);
  cursor: pointer;
  transition: background 0.15s ease;
}

.knop:hover,
.knop:focus {
  background: var(--accent-donker);
  color: var(--donker);
}

.knop--donker {
  background: var(--donker);
  color: var(--wit);
}

.knop--donker:hover,
.knop--donker:focus {
  background: #000;
  color: var(--wit);
}

/* Een accent-knop op een accent-achtergrond is onzichtbaar. Overal waar de
   achtergrond de accentkleur is, wordt de knop dus donker — ongeacht de variant. */
.hero .knop,
.formulier-sectie .knop {
  background: var(--donker);
  color: var(--wit);
}

.hero .knop:hover,
.hero .knop:focus,
.formulier-sectie .knop:hover,
.formulier-sectie .knop:focus {
  background: #000;
  color: var(--wit);
}

.knop-rij {
  margin: 1.6em 0;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
}

.kop__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo img {
  width: auto;
  height: 64px;
}

.menu-knop {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.balken,
.balken::before,
.balken::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--tekst);
  content: '';
}

.balken::before {
  transform: translateY(-7px);
}

.balken::after {
  transform: translateY(5px);
}

.hoofdmenu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Acht menu-items naast een logo van 64px passen niet altijd op één regel.
   Onder 1200px worden de tussenruimtes en de letters iets krapper in plaats van
   dat het menu naar een tweede regel springt. */
@media (min-width: 901px) and (max-width: 1200px) {
  .hoofdmenu {
    gap: 4px 13px;
  }

  .hoofdmenu a,
  .submenu-knop {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }
}

.hoofdmenu a,
.submenu-knop {
  font-family: var(--font-tekst);
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--tekst-zacht);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.hoofdmenu a:hover,
.submenu-knop:hover,
.hoofdmenu a[aria-current='page'] {
  color: var(--tekst);
}

.hoofdmenu a[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.heeft-submenu {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--wit);
  border: 1px solid var(--rand);
  box-shadow: var(--schaduw);
  border-radius: var(--radius);
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 0;
}

.submenu-knop[aria-expanded='true'] + .submenu {
  display: block;
}

.submenu a {
  display: block;
  padding: 8px 18px;
  text-transform: none;
  font-weight: 400;
  font-size: 0.88rem;
  letter-spacing: 0;
}

.submenu a:hover {
  background: var(--spare);
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
  background: var(--accent);
  color: var(--tekst);
}

.hero__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 56px var(--gutter);
  display: grid;
  gap: 40px;
  align-items: center;
}

.hero--beeld .hero__binnen {
  grid-template-columns: 1.1fr 0.9fr;
  padding-block: 64px 72px;
}

.hero__boven {
  font-family: var(--font-kop);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.8em;
}

.hero h1 {
  margin-bottom: 0.5em;
}

.hero__intro {
  max-width: 46ch;
  margin-bottom: 0;
}

/* Het telefoonnummer staat op de live site als losse regel, niet als knop. */
.telefoon-rij {
  margin: 1.4em 0 0;
}

.telefoon-rij a {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.telefoon-rij a:hover {
  text-decoration: underline;
}

.hero__beeld img {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

/* ── secties ────────────────────────────────────────────────────────────── */
/* Het thema wisselt per rij van achtergrond: licht, accent of donker. Dat ritme
   is wat de pagina's hun opbouw geeft — zonder dit wordt alles één witte lap. */
.sectie {
  background: var(--wit);
  color: var(--tekst);
}

.sectie--accent {
  background: var(--accent);
}

.sectie--spare {
  background: var(--spare);
}

.sectie--dark {
  background: var(--donker);
  color: var(--wit);
}

.sectie--dark h1,
.sectie--dark h2,
.sectie--dark h3,
.sectie--dark h4 {
  color: var(--wit);
}

.sectie--dark a {
  color: var(--wit);
}

/* Een accent-knop op een accent-achtergrond is onzichtbaar: daar wordt hij donker.
   Op een donkere achtergrond is het net andersom. */
.sectie--accent .knop {
  background: var(--donker);
  color: var(--wit);
}

.sectie--accent .knop:hover,
.sectie--accent .knop:focus {
  background: #000;
  color: var(--wit);
}

.sectie--dark .knop {
  background: var(--accent);
  color: var(--donker);
}

.sectie--dark .knop:hover,
.sectie--dark .knop:focus {
  background: var(--accent-licht);
  color: var(--donker);
}

/* Sfeerband: een rij die alleen uit een achtergrondfoto bestaat. */
.sectie--beeld {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 300px;
}

.sectie--beeld .sectie__binnen {
  background: rgb(37 37 37 / 55%);
  border-radius: var(--radius);
}

.sectie__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: var(--sectie-y) var(--gutter);
}

/* Lopende tekst houdt een leesbare regellengte, ook in een brede sectie. */
.sectie__binnen > p,
.sectie__binnen > ul:not(.vinkjes),
.sectie__binnen > ol,
.sectie__binnen > h2,
.sectie__binnen > h3,
.sectie__binnen > h4,
.sectie__binnen > blockquote {
  max-width: var(--breedte-tekst);
}

/* Twee opeenvolgende banden van dezelfde kleur horen als één blok te lezen, dus
   daar valt de dubbele witruimte tussenuit. Bij een kleurwissel blijft hij staan. */
.sectie--light + .sectie--light .sectie__binnen,
.sectie--accent + .sectie--accent .sectie__binnen,
.sectie--spare + .sectie--spare .sectie__binnen,
.sectie--dark + .sectie--dark .sectie__binnen {
  padding-top: 0;
}

/* ── inhoudsopgave op lange pagina's ────────────────────────────────────── */
/* Losse "pillen" naast elkaar: compact, en de accentrand maakt zonder woorden
   duidelijk dat het aanklikbaar is. Elk pilletje is minstens 44 px hoog, ook bij
   de kleinste tekstinstelling. */
.opdezepagina {
  margin: 0 0 1em;
}

.opdezepagina h2 {
  margin: 0 0 0.8em;
  font-size: 1.05rem;
}

.opdezepagina ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.opdezepagina li {
  margin: 0;
}

.opdezepagina a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--wit);
  color: var(--donker);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.opdezepagina a:hover,
.opdezepagina a:focus {
  background: var(--accent);
  color: var(--donker);
}

@media (max-width: 600px) {
  .opdezepagina ul {
    gap: 8px;
  }

  .opdezepagina a {
    padding: 9px 14px;
    font-size: 0.88rem;
  }
}

/* ── kolommen (praktijkgegevens naast openingstijden) ───────────────────── */
.kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 48px;
  margin: 2em 0 2.5em;
}

.kolommen .kolom > h3 {
  margin-top: 0;
  font-size: 1.1rem;
}

.kolommen .kolom p {
  margin-bottom: 0.5em;
  max-width: none;
}

.kolommen .kolom p:last-child {
  margin-bottom: 0;
}

/* ── knoppen naast elkaar (de drie documenten) ──────────────────────────── */
.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 2em 0;
}

.knoppenrij .knop-rij {
  margin: 0;
}

/* ── vinkjeslijst (de specialisaties op /voor-wie) ──────────────────────── */
.vinkjes {
  list-style: none;
  margin: 2em 0 2.5em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 28px;
}

.vinkjes li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.vinkjes .vinkje {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.vinkjes span {
  font-family: var(--font-kop);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ── galerij (de negen praktijkfoto's op de homepage) ───────────────────── */
.galerij {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 2.4em 0 3em;
}

.galerij img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 700px) {
  .galerij {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── beeld naast tekst ──────────────────────────────────────────────────── */
.beeldtekst {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 3em 0;
}

.beeldtekst__beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.beeldtekst__tekst h2 {
  margin-top: 0;
}

.beeldtekst__tekst p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .beeldtekst {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ── kaarten (mobiliseren / corrigeren / trainen) ───────────────────────── */
.kaarten {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 2.4em 0 3em;
}

.kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kaart img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.kaart__tekst {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.kaart__tekst h3 {
  margin: 0 0 0.6em;
  font-size: 1.15rem;
}

.kaart__tekst p {
  font-size: 0.95rem;
}

.kaart__tekst .knop-rij {
  margin: auto 0 0;
  padding-top: 1em;
}

.kaart__tekst .knop {
  font-size: 0.85rem;
  padding: 11px 22px;
}

.inhoud > h2:first-child,
.inhoud > h3:first-child {
  margin-top: 0;
}

.beeld {
  margin: 2em 0;
}

.beeld img {
  border-radius: var(--radius);
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

.beeld figcaption {
  margin-top: 0.6em;
  font-size: 0.88rem;
  color: var(--tekst-zacht);
}

.tabel-wrap {
  overflow-x: auto;
  margin: 1.8em 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rand);
}

th {
  font-family: var(--font-kop);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  background: var(--spare);
}

/* ── locatiekaarten ─────────────────────────────────────────────────────── */
.kaarten-sectie {
  background: var(--spare);
}

.kaarten-sectie__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: var(--sectie-y) var(--gutter);
}

.kaarten-sectie h2 {
  margin-top: 0;
}

.locatiekaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.locatiekaart {
  margin: 0;
}

.locatiekaart iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius);
  display: block;
}

.locatiekaart figcaption {
  margin-top: 0.7em;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── contactformulier ───────────────────────────────────────────────────── */
.formulier-sectie {
  background: var(--accent);
}

.formulier-sectie__binnen {
  max-width: var(--breedte-tekst);
  margin: 0 auto;
  padding: var(--sectie-y) var(--gutter);
}

/* Het formulier staat op de accentkleur. Velden met alleen een onderlijn vallen
   daar weg; witte invulvakken met een echte rand lezen veel beter — zeker met
   minder scherp zicht. */
.contactformulier {
  background: var(--wit);
  border-radius: var(--radius-kaart);
  padding: 32px;
  box-shadow: var(--schaduw);
}

.veld {
  margin-bottom: 20px;
}

.veld label {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tekst);
}

.veld input,
.veld textarea {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: var(--wit);
  border: 1px solid #9a9a9a;
  border-radius: var(--radius);
  padding: 12px 14px;
  /* ruim genoeg om met een vinger te raken */
  min-height: 48px;
}

.veld textarea {
  resize: vertical;
  line-height: 1.6;
}

.veld input::placeholder {
  color: #6b6b6b;
}

.veld input:focus,
.veld textarea:focus {
  border-color: var(--donker);
  outline: 3px solid var(--donker);
  outline-offset: 1px;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier-melding {
  padding: 13px 16px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  background: var(--spare);
  border-left: 4px solid #2c6e49;
  font-weight: 600;
}

.formulier-melding--fout {
  border-left-color: #b3261e;
}

.formulier-klein {
  font-size: 0.85rem;
  margin: 1.2em 0 0;
}

/* ── zwevende belknop (alleen mobiel) ───────────────────────────────────── */
/* --belknop-onder wordt door site.js gevuld met de hoogte van een cookiemelding,
   zodat de knop daarboven uitkomt in plaats van eronder te verdwijnen.
   env(safe-area-inset-bottom) houdt hem vrij van de iPhone-thuisbalk. */
.belknop {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--belknop-onder, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  align-items: center;
  gap: 9px;
  background: var(--donker);
  color: var(--wit);
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgb(37 37 37 / 35%);
  transition: bottom 0.2s ease;
}

.belknop:hover,
.belknop:focus {
  background: #000;
  color: var(--wit);
}

.belknop svg {
  flex: 0 0 auto;
}

/* Alleen mobiel, en pas zodra je voorbij de hero bent (zie site.js). Zonder JS
   blijft hij verborgen — dan staat het nummer nog steeds in de kop van de pagina
   en in de footer, dus er gaat niets verloren. */
@media (max-width: 900px) {
  .belknop.is-zichtbaar {
    display: inline-flex;
    animation: belknop-in 0.18s ease-out;
  }
}

@keyframes belknop-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .belknop.is-zichtbaar {
    animation: none;
  }
}

/* Bij het openstaande menu is de knop overbodig en zit hij in de weg. */
body.menu-open .belknop {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .belknop {
    transition: none;
  }
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.voet {
  background: var(--donker);
  color: var(--wit);
  font-size: 0.9rem;
}

.voet__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 56px var(--gutter) 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

.voet h2 {
  color: var(--wit);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-bottom: 1.2em;
}

.voet a {
  color: var(--wit);
}

.voet a:hover {
  color: var(--wit);
}

.sociaal {
  list-style: none;
  padding: 0;
  margin: 0;
}

.voet__onder {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 18px var(--gutter) 32px;
  border-top: 1px solid rgb(255 255 255 / 12%);
  text-align: center;
  font-size: 0.82rem;
  color: rgb(217 217 217 / 75%);
}

.voet__onder p {
  margin: 0;
}

/* De drie documenten staan hier als gewone tekstlinks, niet als knoppen. */
.voet__documenten {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  font-size: 0.86rem;
}

.voet__documenten a {
  color: var(--wit);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.voet__documenten a:hover {
  text-decoration-thickness: 2px;
}

/* ── mobiel ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --sectie-y: 48px;
  }

  .logo img {
    height: 56px;
  }

  .hoofdmenu {
    flex-wrap: wrap;
  }

  .menu-knop {
    display: block;
  }

  .menu__paneel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--wit);
    border-bottom: 1px solid var(--rand);
    box-shadow: var(--schaduw);
    padding: 12px var(--gutter) 20px;
  }

  .menu__paneel.is-open {
    display: block;
  }

  /* Het submenu "Meer informatie" heeft 18 items en loopt dus buiten beeld.
     Zonder eigen hoogte scrollt de pagina eronder mee in plaats van het menu zelf;
     `overscroll-behavior: contain` houdt de scroll binnen het paneel. */
  .menu__paneel {
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .kop__binnen {
    position: relative;
  }

  .hoofdmenu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .hoofdmenu > li {
    border-bottom: 1px solid var(--rand);
  }

  .hoofdmenu a,
  .submenu-knop {
    padding: 14px 2px;
    width: 100%;
    justify-content: space-between;
  }

  .submenu {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    margin: 0 0 10px;
    padding: 0 0 0 14px;
    max-height: none;
  }

  .hero--beeld .hero__binnen {
    grid-template-columns: 1fr;
  }

  .hero__beeld {
    order: -1;
    max-width: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

/* ── naar boven, aan het eind van elk onderwerp op een lange pagina ─────── */
.naarboven {
  margin: 2.5em 0 0;
  padding-top: 1em;
  border-top: 1px solid var(--rand);
  text-align: right;
  font-size: 0.9rem;
}

.naarboven a {
  text-decoration: none;
  color: var(--tekst-zacht);
}

.naarboven a::before {
  content: '↑';
  margin-right: 8px;
}

.naarboven a:hover {
  color: var(--tekst);
  text-decoration: underline;
}

/* ── bevestiging op de verzendknop ──────────────────────────────────────── */
/* Groen met een vinkje: op de plek waar net geklikt is, zodat je niet hoeft te
   zoeken of het gelukt is. De losse melding blijft ook staan voor schermlezers. */
.formulier-sectie .knop.is-verzonden,
.knop.is-verzonden {
  background: #2c6e49;
  color: var(--wit);
  cursor: default;
}

.knop.is-verzonden:hover,
.knop.is-verzonden:focus {
  background: #2c6e49;
  color: var(--wit);
}

/* ── logo's van beroepsverenigingen ─────────────────────────────────────── */
/* Op de contactpagina in kleur en klein — ze stonden paginabreed omdat ze naar
   1800px waren opgeschaald. */
.logorij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 44px;
  margin: 1.6em 0 2em;
}

.logorij__logo {
  width: auto;
  height: 78px;
  max-width: 300px;
  object-fit: contain;
}

/* In de footer in wit. De logo's zijn JPG's met een witte achtergrond; grijs
   maken en omkeren geeft witte inkt op zwart, en `screen` laat dat zwart
   wegvallen tegen de donkere footer. */
.voet__logos {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 var(--gutter) 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.voet__logos span {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 70%);
}

.voet__logos img {
  width: auto;
  height: 34px;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
  opacity: 0.9;
}

@media (max-width: 600px) {
  .logorij {
    gap: 20px 28px;
  }

  .logorij__logo {
    height: 58px;
  }
}