/* ==========================================================================
   Benny Buiten Tuinonderhoud - huisstijl
   Alles komt uit zijn eigen logo: het bosgroen van de omranding, het grasgroen
   van de schrijfletters, het roomwit van de tekening en het houtbruin van het
   naambordje. Vriendelijk en volks, geen strak-modern hovenierslook.
   ========================================================================== */

@font-face {
  font-family: 'Baloo 2';
  src: url(fonts/baloo-2.woff2) format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url(fonts/nunito-sans.woff2) format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bos:        #1C4A2A;
  --bos-diep:   #12331C;
  --gras:       #6EA83C;
  --gras-licht: #8FC756;
  --gras-zacht: #E7F0D8;
  --room:       #F8F4E9;
  --room-diep:  #EFE7D2;
  --hout:       #B98A55;
  --hout-donker:#8A5E33;
  --hout-zacht: #E7D6BE;
  --klei:       #D97B3C;
  --inkt:       #22301F;
  --inkt-zacht: #55634F;
  --wit:        #FFFFFF;

  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 34px;
  --schaduw:      0 10px 28px rgba(28, 74, 42, .12);
  --schaduw-diep: 0 18px 44px rgba(28, 74, 42, .20);
  --kop-hoogte: 74px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--room);
  color: var(--inkt);
  font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Baloo 2', 'Baloo', 'Segoe UI', sans-serif;
  font-weight: 700;
  line-height: 1.12;
  color: var(--bos);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--bos); text-decoration-color: rgba(110, 168, 60, .6); text-underline-offset: 3px; }
a:hover { color: var(--gras); }

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--bos); color: var(--room); padding: 12px 18px; border-radius: 0 0 var(--r-m) 0; z-index: 200;
}
.overslaan:focus { left: 0; }

.binnen { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }

/* ---------- het houten naambordje, recht uit het logo ---------- */
.plank {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 18px 8px;
  background: linear-gradient(178deg, #C9995F 0%, var(--hout) 42%, #A97B48 100%);
  border: 2px solid rgba(90, 60, 30, .55);
  border-radius: 6px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), var(--schaduw);
  color: #FFF6E6;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: .84rem;
  letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(60, 38, 16, .55);
  transform: rotate(-1.2deg);
}
.plank--licht { border-color: rgba(255, 255, 255, .35); }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px;
  border: 0; border-radius: 999px;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.knop:hover { transform: translateY(-2px); box-shadow: var(--schaduw-diep); }
.knop:active { transform: translateY(0); }
.knop--groot { padding: 16px 30px; font-size: 1.08rem; }
.knop--vol { width: 100%; justify-content: center; }
.knop--bel { background: var(--gras); color: #102A16; box-shadow: 0 6px 0 #4E8228; }
.knop--bel:hover { background: var(--gras-licht); color: #102A16; }
.knop--groen { background: var(--bos); color: var(--room); box-shadow: 0 6px 0 #0E2C18; }
.knop--groen:hover { background: #246036; color: var(--room); }
.knop--hout { background: transparent; color: var(--bos); border: 2.5px solid var(--hout); }
.knop--hout:hover { background: var(--hout-zacht); color: var(--bos); }
.ic { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ---------- kop ---------- */
.kop {
  position: sticky; top: 0; z-index: 90;
  background: rgba(248, 244, 233, .94);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--gras);
}
.kop-binnen {
  width: min(1180px, calc(100% - 44px)); margin: 0 auto;
  min-height: var(--kop-hoogte);
  display: flex; align-items: center; gap: 20px;
}
.kop-merk { display: flex; align-items: center; flex: none; }
.kop-merk img { width: 158px; height: auto; }
.kop-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.kop-nav a {
  padding: 9px 14px; border-radius: 999px;
  font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 1rem;
  color: var(--bos); text-decoration: none;
}
.kop-nav a:hover { background: var(--gras-zacht); color: var(--bos); }
.kop-rechts { display: flex; align-items: center; gap: 12px; }
.kop-bel { padding: 11px 20px; }

.veni-langs { display: flex; gap: 6px; }
.veni-langs a {
  padding: 5px 10px; border-radius: 999px; background: var(--room-diep);
  font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--bos);
}
.veni-langs a[aria-current] { background: var(--bos); color: var(--room); }

/* ---------- hero ---------- */
.hero {
  padding: 54px 0 66px;
  background:
    radial-gradient(1100px 460px at 88% -6%, rgba(143, 199, 86, .28), transparent 62%),
    linear-gradient(180deg, var(--room) 0%, var(--room-diep) 100%);
}
.hero-binnen {
  width: min(1180px, calc(100% - 44px)); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.06fr; gap: 46px; align-items: center;
}
.hero-sub { font-size: 1.18rem; color: var(--inkt-zacht); max-width: 30ch; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 24px; }
.hero-merkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hero-merkjes li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--inkt-zacht); }
.stip { width: 11px; height: 11px; border-radius: 50%; background: var(--gras); box-shadow: 0 0 0 4px rgba(110, 168, 60, .22); flex: none; }
.hero-onderschrift { margin: 14px 2px 0; font-size: .92rem; color: var(--inkt-zacht); font-style: italic; }

/* Het maaiveld: een getekende tuin met hoog gras erover, dat de bezoeker
   wegmaait. De tekening, de canvaslaag en de maaier liggen alle drie over
   de volle bak, dus ze delen hetzelfde nulpunt en de maaier staat exact
   onder de aanwijzer. Waar het gras stopt bepaalt het script, niet de CSS. */
.maaiveld {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--schaduw-diep);
  border: 6px solid var(--wit);
  aspect-ratio: 4 / 3;
  background: #D9E9E1;
  touch-action: pan-y;
}
.maaiveld-tuin { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.tuin { display: block; width: 100%; height: 100%; }
.maaiveld-doek, .maaiveld-vonken {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%;
}
.maaiveld-vonken { pointer-events: none; }

/* De tuin leeft pas zodra de bezoeker het maaien zelf gestart heeft: dan
   draait de zon, wiegen de bomen en trekken er twee vogels over. In rust
   staat er GEEN enkele animatie in de bak, ook geen versiering. Daarom
   hangen ze alle vier aan .is-wakker, een klasse die het script alleen in
   start() zet en in groei() weer weghaalt. Nooit terugzetten op .tuin zelf:
   beweging zonder dat erom gevraagd is leest als een spel dat vanzelf loopt. */
.maaiveld.is-wakker .tuin-zon { transform-box: view-box; animation: bb-zon 90s linear infinite; }
.maaiveld.is-wakker .tuin-boom { transform-box: view-box; animation: bb-wieg 7s ease-in-out infinite alternate; }
.maaiveld.is-wakker .tuin-boom--klein { animation-duration: 5.4s; animation-delay: -2.2s; }
.maaiveld.is-wakker .tuin-vogels { transform-box: view-box; animation: bb-vlucht 34s linear infinite; }
@keyframes bb-zon { to { transform: rotate(360deg); } }
@keyframes bb-wieg { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes bb-vlucht { from { transform: translateX(-260px); } to { transform: translateX(820px); } }

/* In rust is de bak een gewone tekening: de aanwijzer verandert niet, want
   er valt niets te starten behalve het bordje in het midden. Pas terwijl er
   gemaaid wordt neemt de maaier de plaats van de aanwijzer in. */
html.js-maai .maaiveld { cursor: auto; }
html.js-maai .maaiveld.is-bezig { cursor: none; }
html.js-maai .maaiveld.is-klaar { cursor: auto; }
.maaier {
  position: absolute; top: 0; left: 0; width: 76px; margin: -26px 0 0 -38px;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .35));
}
.maaier svg { width: 100%; height: auto; }
.maaier .wiel { transform-box: view-box; }
.maaier.rijdt .wiel { animation: bb-wiel .55s linear infinite; }
@keyframes bb-wiel { to { transform: rotate(360deg); } }

.maaiveld-hint, .maaiveld-balk, .maaiveld-klaar, .maaiveld-start { display: none; }
html.js-maai .maaiveld-hint {
  display: block;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: 11px 20px;
  background: rgba(18, 51, 28, .8); color: #FFF6E6;
  border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 600;
  font-size: .98rem; text-align: center; pointer-events: none;
  transition: opacity .35s ease;
}
html.js-maai .maaiveld-hint[hidden] { display: none; }

/* Het startbordje. Het staat er van bij het laden en verdwijnt zodra de
   bezoeker zelf op start drukt; daarna komt het pas terug als hij het gras
   opnieuw laat groeien. */
html.js-maai .maaiveld-start {
  display: block;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(300px, calc(100% - 40px));
  padding: 17px 20px 19px;
  background: rgba(248, 244, 233, .96);
  border-radius: var(--r-l);
  box-shadow: 0 12px 26px rgba(18, 51, 28, .28);
  text-align: center; cursor: pointer;
}
html.js-maai .maaiveld-start[hidden] { display: none; }
.start-titel {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.22rem;
  color: var(--bos); margin: 0 0 3px;
}
.start-tekst { margin: 0 0 14px; font-size: .95rem; line-height: 1.45; color: var(--inkt-zacht); }
.start-knop { padding: 11px 22px; font-size: .96rem; }
html.js-maai .maaiveld-balk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 8px 8px 8px 16px;
  background: rgba(248, 244, 233, .93); border-radius: 999px;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: .92rem; color: var(--bos);
  cursor: auto;
}
#maaireset {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gras); color: #102A16;
  padding: 8px 16px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: .88rem;
}
#maaireset:hover { background: var(--gras-licht); }

/* Het bordje dat opkomt zodra alles gemaaid is. Het schuift op met een
   transform, nooit met opacity: wat er staat is altijd leesbaar. */
html.js-maai .maaiveld-klaar {
  display: block;
  position: absolute; left: 12px; right: 12px; bottom: 64px;
  max-width: 340px; margin: 0 auto;
  padding: 14px 18px 17px;
  background: rgba(248, 244, 233, .96);
  border-radius: var(--r-l);
  box-shadow: 0 12px 26px rgba(18, 51, 28, .28);
  text-align: center; cursor: auto;
  transform: translateY(16px);
  transition: transform .45s cubic-bezier(.22, .9, .3, 1);
}
html.js-maai .maaiveld-klaar.toon { transform: none; }
html.js-maai .maaiveld-klaar[hidden] { display: none; }
.klaar-titel {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.22rem;
  color: var(--bos); margin: 0 0 3px;
}
.klaar-tekst { margin: 0 0 13px; font-size: .95rem; line-height: 1.45; color: var(--inkt-zacht); }
.klaar-knop { padding: 11px 22px; font-size: .96rem; }

@media (prefers-reduced-motion: reduce) {
  .maaiveld.is-wakker .tuin-zon, .maaiveld.is-wakker .tuin-boom,
  .maaiveld.is-wakker .tuin-vogels, .maaier .wiel { animation: none; }
  html.js-maai .maaiveld-klaar { transform: none; transition: none; }
}

/* ---------- vakken en grasranden ---------- */
.vak { position: relative; padding: 76px 0; }
.vak--room { background: var(--room); }
.vak--groen { background: linear-gradient(170deg, var(--bos) 0%, #164024 100%); color: var(--room-diep); }
.vak--hout { background: linear-gradient(170deg, #E9DAC2 0%, var(--hout-zacht) 100%); }
.vak--groen h2, .vak--groen h3 { color: #FFF6E6; }
.vak--groen a { color: var(--gras-licht); }

.vak--groen::before, .vak--hout::before, .voet::before {
  content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 27px;
  background-repeat: repeat-x; background-position: 0 100%; background-size: 120px 28px;
  pointer-events: none;
}
.vak--groen::before { background-image: url(gras-groen.svg); }
.vak--hout::before  { background-image: url(gras-hout.svg); }
.voet::before       { background-image: url(gras-bos.svg); }

.vak-kop { max-width: 62ch; margin: 0 auto 46px; text-align: center; }
.vak-intro { font-size: 1.1rem; color: var(--inkt-zacht); margin: 0; }
.vak--groen .vak-intro { color: rgba(248, 244, 233, .84); }
.vak--hout .vak-intro { color: #5C4526; }

/* ---------- diensten ---------- */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.kaart {
  background: var(--wit); border-radius: var(--r-l); padding: 30px 28px 26px;
  box-shadow: var(--schaduw); border-bottom: 5px solid var(--gras);
}
.kaart-ic { width: 62px; height: 62px; margin-bottom: 16px; background: var(--gras-zacht); border-radius: 18px; display: grid; place-items: center; }
.kaart-ic svg { width: 40px; height: 40px; }
.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lijst li { position: relative; padding-left: 30px; color: var(--inkt-zacht); }
.lijst li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 17px; height: 12px;
  background: var(--gras);
  clip-path: polygon(0 45%, 12% 32%, 40% 62%, 88% 0, 100% 14%, 40% 100%);
}

/* ---------- waarom ---------- */
.waarom { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.waarom-tekst { font-size: 1.12rem; color: rgba(248, 244, 233, .9); max-width: 42ch; }
.beloftes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.beloftes li {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-m); padding: 12px 16px;
  font-family: 'Baloo 2', sans-serif; font-weight: 600; color: #FFF6E6;
}
.beloftes li::before {
  content: ''; width: 20px; height: 14px; flex: none; background: var(--gras-licht);
  clip-path: polygon(0 45%, 12% 32%, 40% 62%, 88% 0, 100% 14%, 40% 100%);
}
.waarom-beeld { margin: 0; }
.waarom-beeld img { width: 100%; border-radius: var(--r-l); border: 7px solid var(--room); box-shadow: var(--schaduw-diep); }

/* ---------- realisaties ---------- */
.groep-titel {
  display: flex; align-items: center; gap: 16px;
  margin: 8px 0 20px; font-size: 1.45rem;
}
.groep-titel::after { content: ''; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--gras) 0 14px, transparent 14px 24px); border-radius: 2px; }
.galerij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 46px; }
.foto { margin: 0; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--schaduw); background: var(--room-diep); }
.foto img { width: 100%; height: 280px; object-fit: cover; transition: transform .5s ease; }
.foto:hover img { transform: scale(1.05); }

/* ---------- werkgebied ---------- */
.werkgebied { display: grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items: center; }
.gemeenten { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gemeenten li {
  background: var(--bos); color: #FFF6E6; border-radius: 999px; padding: 9px 20px;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: .98rem;
}
.uren { margin-top: 30px; padding: 20px 24px; background: rgba(255, 255, 255, .6); border-left: 5px solid var(--gras); border-radius: var(--r-m); }
.uren h3 { margin-bottom: .3em; }
.uren p { margin: 0; color: #5C4526; }
.werkgebied-kaart { margin: 0; }
.werkgebied-kaart img { width: 100%; border-radius: var(--r-l); border: 7px solid var(--room); box-shadow: var(--schaduw-diep); }
.werkgebied-kaart figcaption { margin-top: 12px; font-size: .92rem; color: #5C4526; font-style: italic; text-align: center; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; align-items: start; }
.contact-kanalen { display: grid; gap: 14px; }
.kanaal {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: var(--r-l); text-decoration: none;
  background: var(--wit); box-shadow: var(--schaduw); color: var(--inkt);
  transition: transform .16s ease, box-shadow .16s ease;
}
a.kanaal:hover { transform: translateY(-2px); box-shadow: var(--schaduw-diep); color: var(--inkt); }
.kanaal .ic { width: 30px; height: 30px; }
.kanaal--bel { border-left: 6px solid var(--gras); }
.kanaal--bel .ic { fill: var(--gras); }
.kanaal--wa { border-left: 6px solid #25D366; }
.kanaal--wa .ic { fill: #1EAE54; }
.kanaal--stil { border-left: 6px solid var(--hout); background: var(--room-diep); box-shadow: none; }
.kanaal--stil .ic { fill: var(--hout-donker); }
.kanaal-woord { display: grid; gap: 2px; }
.kanaal-woord strong { font-family: 'Baloo 2', sans-serif; font-size: 1.24rem; color: var(--bos); line-height: 1.2; }
.kanaal-woord small { color: var(--inkt-zacht); font-size: .92rem; line-height: 1.35; }

.contact-blad { background: var(--wit); border-radius: var(--r-l); padding: 32px; box-shadow: var(--schaduw); }
.veld { display: grid; gap: 6px; margin-bottom: 16px; }
.veld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.veld label { font-family: 'Baloo 2', sans-serif; font-weight: 600; color: var(--bos); font-size: .98rem; }
.veld input, .veld select, .veld textarea {
  font-family: inherit; font-size: 1rem; color: var(--inkt);
  padding: 12px 14px; border: 2px solid var(--room-diep); border-radius: var(--r-s);
  background: #FDFBF6; width: 100%;
}
.veld textarea { resize: vertical; min-height: 108px; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 0; border-color: var(--gras); box-shadow: 0 0 0 4px rgba(110, 168, 60, .18); }
.form-melding { margin: 14px 0 0; font-weight: 700; color: var(--bos); }
.form-melding.fout { color: #B5451F; }
.form-klein { margin: 14px 0 0; font-size: .87rem; color: var(--inkt-zacht); }
.form-noscript { margin: 16px 0 0; padding: 16px 18px; background: var(--gras-zacht); border-radius: var(--r-m); color: var(--bos); }

/* ---------- voet ---------- */
.voet { position: relative; background: var(--bos-diep); color: rgba(248, 244, 233, .78); padding: 74px 0 0; }
.voet-binnen { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.voet-merk img { width: 190px; height: auto; margin-bottom: 16px; }
.voet h3 { color: #FFF6E6; font-size: 1.12rem; margin-bottom: .5em; }
.voet a { color: var(--gras-licht); }
.voet-tel span { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.3rem; }
.voet-kbo { font-size: .86rem; color: rgba(248, 244, 233, .55); }
.voet-streep { margin: 54px 0 0; padding: 18px 0; text-align: center; font-size: .84rem; color: rgba(248, 244, 233, .5); border-top: 1px solid rgba(248, 244, 233, .14); }

/* ---------- reveal-animaties ---------- */
/* Bewust GEEN opacity in de verborgen toestand: een sectie die op een script
   wacht om zichtbaar te worden, is een witruimte zodra dat script hapert. Wat
   hier beweegt is alleen de positie, dus alles staat altijd te lezen. */
html.js-anim:not([data-veni-shot]) .reveal { transform: translateY(22px); }
.reveal { transition: transform .55s cubic-bezier(.22, .9, .3, 1); }
.reveal.in,
html.js-anim:not([data-veni-shot]) .reveal.in { transform: none; }
html[data-veni-shot] .reveal { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, html.js-anim:not([data-veni-shot]) .reveal { transform: none; transition: none; }
}

/* ---------- kleinere schermen ---------- */
@media (max-width: 1000px) {
  .hero-binnen, .waarom, .werkgebied, .contact { grid-template-columns: 1fr; gap: 34px; }
  .kaarten { grid-template-columns: 1fr; }
  .galerij { grid-template-columns: repeat(2, 1fr); }
  .voet-binnen { grid-template-columns: 1fr 1fr; }
  .kop-binnen { flex-wrap: wrap; padding: 10px 0 4px; }
  .kop-rechts { margin-left: auto; }
  .kop-nav { order: 3; width: 100%; margin: 2px 0 6px; justify-content: center; }
  .kop-nav a { padding: 7px 11px; font-size: .95rem; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .vak { padding: 56px 0; }
  .hero { padding: 34px 0 48px; }
  .binnen, .hero-binnen, .kop-binnen { width: calc(100% - 30px); }
  .galerij { grid-template-columns: 1fr; }
  .foto img { height: 240px; }
  .beloftes, .veld-paar { grid-template-columns: 1fr; }
  .voet-binnen { grid-template-columns: 1fr; }
  .kop-merk img { width: 128px; }
  .kop-bel { padding: 10px 15px; font-size: .94rem; }
  .kop-nav { gap: 2px; margin: 0 0 6px; }
  .kop-nav a { padding: 6px 8px; font-size: .89rem; }
  .contact-blad { padding: 22px; }
  .hero-knoppen .knop { width: 100%; justify-content: center; }
  /* de maaier schaalt mee met de baan die hij maait */
  .maaier { width: 56px; margin: -19px 0 0 -28px; }
  /* de balk moet op een telefoon op een regel blijven, anders eet ze het veld op */
  .alleen-breed { display: none; }
  html.js-maai .maaiveld-balk { font-size: .82rem; padding: 6px 6px 6px 13px; }
  #maaireset { padding: 7px 13px; font-size: .8rem; }
  /* het bordje blijft klein: de bezoeker moet de tuin die hij net gemaaid
     heeft nog zien liggen, en het veld is hier maar een kwart scherm hoog */
  html.js-maai .maaiveld-klaar {
    bottom: 52px; padding: 10px 13px 12px; max-width: 302px; border-radius: var(--r-m);
  }
  .klaar-titel { font-size: 1.02rem; margin-bottom: 1px; }
  .klaar-tekst { font-size: .84rem; line-height: 1.35; margin-bottom: 9px; }
  .klaar-knop { padding: 8px 17px; font-size: .87rem; }
  /* het startbordje krimpt mee, om dezelfde reden: op een telefoon is de bak
     maar een kwart scherm hoog en moet de tuin er nog naast passen */
  html.js-maai .maaiveld-start {
    top: 45%; width: min(232px, calc(100% - 30px));
    padding: 10px 12px 12px; border-radius: var(--r-m);
  }
  .start-titel { font-size: .96rem; margin-bottom: 1px; }
  .start-tekst { font-size: .78rem; line-height: 1.3; margin-bottom: 8px; }
  .start-knop { padding: 7px 14px; font-size: .82rem; gap: 7px; }
  .start-knop .ic { width: 17px; height: 17px; }
}