/* ===========================================================================
   Mr F. van Schaik c.s. Advocaten, Berkel en Rodenrijs
   ---------------------------------------------------------------------------
   Richting: het kantoor zoals het er is. Inkt uit de voordeur en de toga,
   papier uit de witte wanden, goud als enige accent. Het terugkerende motief
   is de plooi van de bef: fijne verticale haarlijnen die op elke blokkop,
   tussen de secties en in de voet terugkomen.
   =========================================================================== */

:root {
  --inkt: #14181d;
  --inkt-2: #0f1216;
  --papier: #f2f1ed;
  --wit: #ffffff;
  --goud: #ae9737;
  --goud-diep: #6f5a16;
  --grijs: #4d5861;
  --grijs-licht: rgba(255, 255, 255, .72);
  --lijn: rgba(20, 24, 29, .16);
  --lijn-licht: rgba(255, 255, 255, .18);

  --ruim: clamp(3.25rem, 6vw, 5.5rem);
  --kopletter: Georgia, 'Times New Roman', serif;
  --uiletter: 'Helvetica Neue', Arial, sans-serif;

  /* knoppen van de opening */
  --opening-achtergrond: #14181d;
  --opening-demping: .45;

  scroll-behavior: smooth;
}

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

/* ---- taalkeuze: één pagina, elke tekst per taal ------------------------- */

html[data-taal="nl"] [lang="fr"] { display: none !important; }
html[data-taal="fr"] [lang="nl"] { display: none !important; }

/* ---- basis -------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--kopletter);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -.012em; line-height: 1.1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

.omheining { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }

/* De kopbalk staat vast; een sprong naar een anker mag er niet onder duiken. */
main [id], #hoofd { scroll-margin-top: 5.5rem; }

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--inkt);
  color: #fff;
  padding: .75rem 1.25rem;
  font-family: var(--uiletter);
  font-size: .85rem;
}
.overslaan:focus { left: .75rem; top: .75rem; }

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

/* ---- het motief: de plooi ---------------------------------------------- */

.merkteken {
  display: block;
  width: 58px;
  height: 13px;
  margin-bottom: .95rem;
  background-image: repeating-linear-gradient(90deg, var(--goud) 0 1px, transparent 1px 5px);
}
.merkteken--donker {
  background-image: repeating-linear-gradient(90deg, var(--goud-diep) 0 1px, transparent 1px 5px);
}

.plooilijn {
  display: block;
  height: 16px;
  background-image: repeating-linear-gradient(90deg, rgba(20, 24, 29, .34) 0 1px, transparent 1px 6px);
}
.plooilijn--licht {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0 1px, transparent 1px 6px);
}

.plooivlak {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46px;
  background-image: repeating-linear-gradient(90deg, rgba(20, 24, 29, .26) 0 1px, transparent 1px 5px);
}

/* ---- typografische bouwstenen ------------------------------------------ */

.opmaat {
  font-family: var(--uiletter);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: .85rem;
}
.opmaat--donker { color: var(--goud-diep); }

.blokkop { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.blokkop--breed { max-width: 56ch; }
.blokkop--klein { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.blokkop__titel {
  font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.1rem);
  font-weight: 300;
  color: #fff;
}
.blokkop__titel--donker { color: var(--inkt); }

.blokkop__regel {
  margin-top: 1.1rem;
  max-width: 54ch;
  color: var(--grijs-licht);
}

.lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.5;
  color: var(--inkt);
  margin-top: 1.25rem;
}

/* ---- knoppen ------------------------------------------------------------ */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.4rem;
  font-family: var(--uiletter);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .055em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.knop--goud { background: var(--goud); color: #14181d; }
.knop--goud:hover { background: #c3aa43; transform: translateY(-1px); }
.knop--rand { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.knop--rand:hover { border-color: var(--goud); color: var(--goud); }
.knop--klein { padding: .55rem 1rem; font-size: .78rem; }

/* =========================================================================
   KOPBALK
   ========================================================================= */

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.kop.is-vast {
  background: rgba(15, 18, 22, .96);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}

.kop__binnen {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.4rem;
  padding-block: .6rem;
}

.merk { text-decoration: none; display: flex; align-items: baseline; gap: .6rem; flex: 0 0 auto; }
.merk__naam {
  font-family: var(--kopletter);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: .035em;
  color: #fff;
}
.merk__naam--groot { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.merk__rol {
  font-family: var(--uiletter);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--goud);
}

.nav { margin-left: auto; }
.nav__lijst { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.nav__lijst li { display: block; }
.nav__lijst a {
  display: inline-block;
  font-family: var(--uiletter);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  padding-block: .2rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav__lijst a:hover { color: #fff; border-color: var(--goud); }

.kop__rechts { display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; }

.taal { display: flex; align-items: center; gap: .15rem; }
.taal__knop {
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: .3rem .45rem;
  font-family: var(--uiletter);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.taal__knop:hover { color: #fff; }
.taal__knop[aria-pressed="true"] { color: var(--goud); border-color: rgba(174, 151, 55, .55); }

.kop__bel { padding: .6rem 1rem; font-size: .78rem; }

.menuknop {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 2px;
  padding: .45rem .7rem;
  color: #fff;
  font-family: var(--uiletter);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.menuknop__bars {
  width: 16px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

/* =========================================================================
   OPENING: strook. Band boven, kop eronder op inkt.
   ========================================================================= */

.opening__binnen {
  width: min(100%, 1200px);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: end;
}

@media (min-width: 900px) {
  .opening__binnen { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}

.opening__titel {
  font-size: clamp(1.9rem, 1.05rem + 3vw, 3.5rem);
  font-weight: 300;
  color: #fff;
  max-width: 20ch;
  text-wrap: balance;
}

.opening__regel {
  color: var(--grijs-licht);
  max-width: 42ch;
  font-size: 1rem;
}

.opening__knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

.opening__slot {
  padding: 0 clamp(1.25rem, 3vw, 2rem) .8rem;
  text-align: right;
  font-family: var(--uiletter);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--goud);
}
.opening__slot span { display: block; }

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-family: var(--uiletter);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.wenk__streep { display: block; width: 1px; height: 26px; background: linear-gradient(180deg, var(--goud), transparent); }

/* =========================================================================
   VOOR WIE: drie ingangen, doorlopend op de inkt van de opening
   ========================================================================= */

.ingangen {
  background: var(--inkt);
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  color: #fff;
}

.ingang {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1.25fr) minmax(0, .95fr);
  gap: clamp(1rem, 3vw, 2.75rem);
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  border-top: 1px solid var(--lijn-licht);
  align-items: start;
}
.ingang:last-of-type { border-bottom: 1px solid var(--lijn-licht); }

.ingang__nr {
  font-family: var(--uiletter);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--goud);
  font-variant-numeric: tabular-nums;
}

.ingang__titel {
  font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.35rem);
  font-weight: 300;
  margin-bottom: .7rem;
}
.ingang__tekst p { color: var(--grijs-licht); max-width: 56ch; }

.ingang__lijst { display: flex; flex-direction: column; }
.ingang__lijst li {
  font-family: var(--uiletter);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .42rem 0 .42rem 1.1rem;
  position: relative;
  color: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ingang__lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .95em;
  width: 5px;
  height: 1px;
  background: var(--goud);
}

@media (max-width: 820px) {
  .ingang { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .ingang__lijst { grid-column: 2; }
}

/* ---- brede beelden ------------------------------------------------------ */

.breedbeeld { margin: clamp(2rem, 4vw, 3.5rem) 0 0; }
.breedbeeld img {
  width: 100%;
  height: clamp(190px, 25vw, 330px);
  object-fit: cover;
  object-position: center 38%;
}
.breedbeeld--aansluitend { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.breedbeeld--aansluitend img { object-position: center 42%; height: clamp(220px, 28vw, 380px); }

/* =========================================================================
   PRAKTIJK
   ========================================================================= */

.praktijk { background: var(--papier); }

.pandband { margin: 0; }
.pandband img {
  width: 100%;
  height: clamp(210px, 30vw, 420px);
  object-fit: cover;
  object-position: center 52%;
}
.pandband__bijschrift {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  margin-top: -1.6rem;
  position: relative;
  z-index: 2;
}
.pandband__bijschrift span {
  display: inline-block;
  background: var(--papier);
  padding: .9rem 1.4rem .9rem 0;
  font-family: var(--uiletter);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grijs);
  border-top: 2px solid var(--goud);
}

.praktijk__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-bottom: var(--ruim);
}
@media (min-width: 900px) {
  .praktijk__raster { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}

.praktijk__verhaal p + p { margin-top: 1rem; }
.praktijk__verhaal p:not(.opmaat):not(.lead) { color: var(--grijs); max-width: 56ch; }
.praktijk__verhaal .blokkop__titel { margin-bottom: 0; }

/* ---- rechtsgebieden ----------------------------------------------------- */

.gebieden {
  background: var(--wit);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 2px solid var(--inkt);
  align-self: start;
}
.gebieden__kop {
  font-family: var(--uiletter);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--inkt);
  margin-bottom: .5rem;
}

.gebied { padding-block: .95rem; border-bottom: 1px solid var(--lijn); }
.gebied__naam {
  font-size: 1.22rem;
  line-height: 1.25;
}
.gebied__uitleg { color: var(--grijs); font-size: .95rem; line-height: 1.5; margin-top: .2rem; }

.gebieden__meerkop {
  margin-top: 1.35rem;
  font-family: var(--uiletter);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud-diep);
}
.gebieden__meer { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.gebieden__meer li {
  font-family: var(--uiletter);
  font-size: .8rem;
  padding: .3rem .65rem;
  border: 1px solid var(--lijn);
  color: var(--grijs);
}

/* =========================================================================
   AANPAK
   ========================================================================= */

.aanpak { background: var(--papier); }

.aanpak__raster {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .aanpak__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
}

.aanpak__zij { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 2.25rem); }

.aanpak__beeld { margin: 0; overflow: hidden; background: #dcdad4; }
.aanpak__beeld img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: 42% 42%;
}

.citaat { margin: 0; }
.citaat p {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.12;
  color: var(--inkt);
  border-left: 2px solid var(--goud);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

.aanpak__tekst p:not(.opmaat) { color: var(--grijs); max-width: 60ch; }
.aanpak__tekst p + p { margin-top: .95rem; }
.aanpak__tekst .blokkop__titel { margin-bottom: 1.1rem; }

/* =========================================================================
   TARIEVEN
   ========================================================================= */

.tarieven {
  background: var(--inkt);
  color: #fff;
  padding-block: var(--ruim);
}

.prijzen { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 820px) { .prijzen { grid-template-columns: 1fr 1fr; } }

.prijs {
  border-top: 1px solid var(--lijn-licht);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
}
.prijs__label {
  font-family: var(--uiletter);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .64);
}
.prijs__bedrag {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--goud);
  margin: .45rem 0 .8rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.prijs__tekst { color: var(--grijs-licht); font-size: .98rem; max-width: 48ch; }

/* =========================================================================
   ADVOCATEN
   ========================================================================= */

.team { background: var(--papier); padding-bottom: var(--ruim); display: flow-root; }

.team__raster {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .team__raster { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}

.persoon { position: relative; }
.persoon__naam { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); font-weight: 400; }
.persoon__rol {
  font-family: var(--uiletter);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--goud-diep);
  margin: .4rem 0 .85rem;
}
.persoon__tekst p:not(.persoon__rol) { color: var(--grijs); max-width: 58ch; }
.persoon__tekst p + p:not(.persoon__rol) { margin-top: .85rem; }

.persoon__beeld { overflow: hidden; background: #dcdad4; }
.persoon__beeld img { width: 100%; height: 100%; object-fit: cover; }
.persoon__beeld--hoog { aspect-ratio: 4 / 5; }
.persoon__beeld--hoog img { object-position: center 20%; }
.persoon__beeld--breed { aspect-ratio: 16 / 9; }
.persoon__beeld--breed img { object-position: center 34%; }

/* De grote kolom: het portret steekt omhoog de donkere tariefband in. */
.persoon--groot { margin-top: calc(-1 * clamp(2.5rem, 5vw, 5.5rem)); }
.persoon--groot .persoon__tekst { padding-top: 1.35rem; }

.team__kolom { display: flex; flex-direction: column; gap: clamp(1.75rem, 3vw, 2.5rem); padding-top: var(--ruim); }
.team__kolom .blokkop { margin-bottom: 0; }

.persoon--breed { display: grid; gap: 1.1rem; }
@media (min-width: 620px) {
  .persoon--breed { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
  .persoon--breed .persoon__beeld--breed { aspect-ratio: 4 / 3; }
}

.persoon--plooi { padding-left: 4.4rem; }
.persoon--plooi .persoon__tekst { border-top: 1px solid var(--lijn); padding-top: 1.1rem; }

/* =========================================================================
   NIEUWS
   ========================================================================= */

.nieuws { background: var(--papier); }

.nieuws__raster {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding-block: clamp(2.25rem, 4.5vw, 4rem);
}
@media (min-width: 900px) {
  .nieuws__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
}

.berichten { margin-top: clamp(1.25rem, 3vw, 2rem); }
.bericht { padding-block: 1.1rem; border-top: 1px solid var(--lijn); }
.bericht:last-child { border-bottom: 1px solid var(--lijn); }
.bericht__datum {
  font-family: var(--uiletter);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--goud-diep);
}
.bericht__titel { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.22; margin-top: .3rem; }

.archief { background: var(--wit); padding: clamp(1.4rem, 3vw, 2rem); border-top: 2px solid var(--inkt); }
.archief__kop {
  font-family: var(--uiletter);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--inkt);
  margin-bottom: .55rem;
}
.archief__lijst li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--lijn);
  color: var(--grijs);
  font-size: .97rem;
  line-height: 1.4;
}
.archief__lijst li:last-child { border-bottom: 0; }

/* =========================================================================
   CONTACT
   ========================================================================= */

.contact { background: var(--inkt); color: #fff; }

.contact__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: var(--ruim);
}
@media (min-width: 900px) {
  .contact__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
}

.gegevens {
  display: grid;
  gap: 1.5rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 560px) { .gegevens { grid-template-columns: 1fr 1fr; } }
.gegeven--breed { grid-column: 1 / -1; border-top: 1px solid var(--lijn-licht); padding-top: 1.25rem; }

.gegeven__kop {
  font-family: var(--uiletter);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: .55rem;
}
.gegeven__regel { color: var(--grijs-licht); }
.gegeven__link {
  display: block;
  font-size: 1.2rem;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  padding-bottom: .25rem;
  margin-bottom: .55rem;
  width: fit-content;
  transition: color .2s ease, border-color .2s ease;
}
.gegeven__link:hover { color: var(--goud); border-color: var(--goud); }
.gegeven__link--klein { font-size: .92rem; }
.gegeven__knoppen { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }

/* ---- formulier ---------------------------------------------------------- */

.formulier { background: rgba(255, 255, 255, .05); border-top: 2px solid var(--goud); padding: clamp(1.4rem, 3vw, 2.1rem); }
.formulier__kop {
  font-family: var(--uiletter);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.veld { margin-bottom: 1rem; }
.veld label {
  display: block;
  font-family: var(--uiletter);
  font-size: .76rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .72);
  margin-bottom: .35rem;
}
.veld input, .veld textarea {
  width: 100%;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2px;
  color: #fff;
  font-family: var(--kopletter);
  font-size: 1rem;
  padding: .7rem .8rem;
  transition: border-color .2s ease;
}
.veld input:focus, .veld textarea:focus { border-color: var(--goud); outline: none; }
.veld textarea { resize: vertical; }

.formulier__melding {
  margin-top: 1rem;
  border-left: 2px solid var(--goud);
  padding: .3rem 0 .3rem .9rem;
  color: var(--grijs-licht);
  font-size: .95rem;
}
.formulier__melding[hidden] { display: none; }

/* =========================================================================
   VOET
   ========================================================================= */

.voet { background: var(--inkt-2); color: #fff; }
.voet__raster {
  display: grid;
  gap: 1.75rem 2rem;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  align-items: start;
}
@media (min-width: 720px) { .voet__raster { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }

.voet__merk .merk__rol { margin-left: .5rem; }
.voet__regel { color: rgba(255, 255, 255, .62); font-size: .95rem; }
.voet__merk .voet__regel:first-of-type { margin-top: .9rem; }

.voet__kop {
  font-family: var(--uiletter);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: .7rem;
}
.voet__link {
  display: block;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  padding-block: .2rem;
  transition: color .2s ease;
}
.voet__link:hover { color: var(--goud); }
.taal--voet { flex-direction: column; align-items: flex-start; gap: .25rem; }
.taal--voet .taal__knop { padding: .2rem .35rem; letter-spacing: .06em; }

/* =========================================================================
   ONTHULLEN: alleen als er JavaScript is en reduced motion uit staat
   ========================================================================= */

html.beweegt [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .72, .2, 1);
}
html.beweegt [data-reveal].zichtbaar { opacity: 1; transform: none; }

html.beweegt [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: var(--vertraging, 0s);
}
html.beweegt [data-reveal-group].zichtbaar > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html [data-reveal],
  html [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .knop, .nav__lijst a, .gegeven__link, .voet__link { transition: none !important; }
}

/* =========================================================================
   SMALLE SCHERMEN
   ========================================================================= */

@media (max-width: 1240px) {
  .nav__lijst { gap: 1rem; }
  .nav__lijst a { font-size: .78rem; }
  .kop__bel { padding: .55rem .85rem; font-size: .74rem; }
}

/* De belknop blijft op elk scherm in de kopbalk staan; op smalle schermen
   alleen als nummer, want dat is daar de snelste handeling. */
.kop__bel--kort { display: none; }

@media (max-width: 1023px) {
  .menuknop { display: inline-flex; }
  .kop__bel { display: none; }
  .kop__bel--kort { display: inline-flex; }
  .kop__rechts { gap: .55rem; }

  .nav {
    position: fixed;
    inset: 4.4rem 0 auto 0;
    background: rgba(15, 18, 22, .985);
    border-top: 1px solid var(--lijn-licht);
    border-bottom: 1px solid var(--lijn-licht);
    padding: 1rem clamp(1.25rem, 4vw, 2rem) 1.5rem;
    margin-left: 0;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__lijst { flex-direction: column; gap: 0; }
  .nav__lijst li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .nav__lijst a { display: block; width: 100%; padding: .75rem 0; font-size: 1rem; border-bottom: 0; }
}

@media (max-width: 620px) {
  .kop__binnen { gap: .45rem; min-height: 3.9rem; }
  .nav { inset: 3.9rem 0 auto 0; }
  .merk { flex-direction: column; gap: .05rem; align-items: flex-start; flex-shrink: 1; min-width: 0; }
  .merk__naam { font-size: .92rem; letter-spacing: .02em; }
  .merk__rol { font-size: .56rem; }
  .kop__rechts { gap: .4rem; }
  .taal { gap: .05rem; }
  .taal__knop { padding: .2rem .22rem; font-size: .64rem; }
  .kop__bel--kort { padding: .4rem .5rem; font-size: .64rem; letter-spacing: 0; }
  .menuknop { padding: .35rem .4rem; }
  .menuknop__tekst { display: none; }

  .opening__slot { text-align: left; }
  .persoon--plooi { padding-left: 3.4rem; }
  .plooivlak { width: 32px; }
  .persoon--groot { margin-top: calc(-1 * clamp(1.5rem, 5vw, 3rem)); }
  .gebieden__meer li { font-size: .76rem; }
}