/* ==========================================================================
   roxingmoms · merk-tokens uit het merkboek
   Petrol is de hoofdkleur, koraal enkel als accent.
   Titels Bricolage Grotesque · tekst Onest · accent Shantell Sans.
   ========================================================================== */

:root {
  /* kleuren */
  --petrol:        #1e4e4a;  /* anker, hoofdkleur */
  --petrol-zacht:  #2e635e;
  --petrol-diep:   #143734;
  --zeegroen:      #86c6ba;  /* herkenning */
  --mint:          #cbe5da;  /* zacht */
  --koraal:        #f08a5d;  /* accent, spaarzaam */

  --zeewit:        #f5faf7;  /* achtergrond */
  --schelp:        #edf4f1;
  --zand:          #fbede5;  /* zachte koraal-tint voor vlakken */

  /* fonts */
  --font-titel:  "Bricolage Grotesque", system-ui, sans-serif;
  --font-tekst:  "Onest", system-ui, sans-serif;
  --font-accent: "Shantell Sans", cursive;

  /* maten */
  --radius:     22px;
  --radius-l:   34px;
  --maxbreedte: 74rem;
  --gutter:     clamp(1.1rem, 5vw, 3.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-tekst);
  color: var(--petrol);
  background: var(--zeewit);
  line-height: 1.65;
  overflow-x: hidden;
}

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

.wrap {
  max-width: var(--maxbreedte);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Woordmerk · ro[x-golf]ingmoms met de bewegingslijn eronder
   -------------------------------------------------------------------------- */
.wordmark {
  position: relative;
  display: inline-block;
  padding-bottom: 0.24em;
  line-height: 0.9;
  text-decoration: none;
}
.wordmark .word {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-titel);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--petrol);
  font-size: 1.5rem;
  white-space: nowrap;
}
.wordmark .xmark {
  display: inline-block;
  height: 0.6em;
  width: 0.56em;
  vertical-align: -0.03em;
  margin: 0 -0.055em;
  overflow: visible;
}
.xmark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wordmark .word .xmark { color: var(--petrol); }
.wordmark .wave-onder {
  position: absolute;
  left: 0; right: 0; bottom: 0.02em;
  width: 100%; height: 0.42em;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* op donkere achtergrond */
.op-petrol .wordmark .word,
.op-petrol .wordmark .word .xmark { color: var(--zeewit); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 250, 247, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 78, 74, 0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
}
/* Let op de :not(.knop-klein). Zonder die uitzondering pakte de padding-bottom
   van 2px ook de knop, die zelf 0.55rem onder hoort te hebben. De knop kreeg
   dan 8,8 boven en 2 onder, waardoor zijn tekst scheef zat tegenover de links
   ernaast en hij te laag werd om met een duim te raken. */
.site-nav a:not(.knop-klein) {
  color: var(--petrol);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
}
.site-nav a:not(.knop-klein):hover { color: var(--petrol-zacht); }
.site-nav a:not(.knop-klein)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--zeegroen);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.site-nav a:not(.knop-klein):hover::after { transform: scaleX(1); }
.site-nav .knop-klein { display: none; }
@media (min-width: 780px) {
  .site-nav .knop-klein { display: inline-block; }
}
/* Onder 780 pixels staat de knop in de balk, en dan passen de vier
   sectielinks er niet meer naast op één regel. Ze verdwijnen daarom op
   dezelfde breedte waar de knop verschijnt, en niet pas op 620. Tussen die
   twee waarden viel de balk over twee regels. Alles blijft bereikbaar door
   te scrollen, en de knop brengt je naar het contactformulier. */
@media (max-width: 779px) {
  .site-nav .verberg-mobiel { display: none; }
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.knop,
.knop-licht,
.knop-lijn,
.knop-klein {
  display: inline-block;
  font-family: var(--font-tekst);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 100px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.knop {
  background: var(--petrol);
  color: #fff;
  padding: 0.95rem 1.7rem;
  font-size: 1rem;
}
.knop:hover { background: var(--koraal); transform: translateY(-2px); }

.knop-licht {
  background: var(--zeewit);
  color: var(--petrol);
  padding: 0.95rem 1.7rem;
  font-size: 1rem;
}
.knop-licht:hover { background: var(--mint); transform: translateY(-2px); }

.knop-lijn {
  background: transparent;
  color: var(--petrol);
  border: 1.5px solid rgba(30, 78, 74, 0.28);
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
}
.knop-lijn:hover { border-color: var(--petrol); background: rgba(30, 78, 74, 0.05); transform: translateY(-2px); }

.knop-klein {
  background: var(--petrol);
  color: #fff;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
}
.knop-klein:hover { background: var(--koraal); }

:is(.knop, .knop-licht, .knop-lijn, .knop-klein):focus-visible {
  outline: 3px solid var(--zeegroen);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-titel);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.25; }

.krabbel {
  font-family: var(--font-accent);
  color: var(--petrol);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
  display: inline-block;
}
.op-petrol .krabbel { color: var(--zeegroen); }

.oogje {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--petrol-zacht);
  display: block;
  margin-bottom: 0.8rem;
}
.op-petrol .oogje { color: var(--zeegroen); }

.lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 46ch; }
.zacht { color: var(--petrol-zacht); }

/* titel met een golfje eronder: één wave per vlak */
.titel-golf { display: inline-block; position: relative; padding-bottom: 0.3em; }
.titel-golf .streep {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 0.26em;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Secties en golvende overgangen
   -------------------------------------------------------------------------- */
section { position: relative; }
.blok { padding-block: clamp(3.5rem, 9vw, 7rem); }

.vlak-zeewit { background: var(--zeewit); }
.vlak-schelp { background: var(--schelp); }
.vlak-mint   { background: var(--mint); }
.vlak-zand   { background: var(--zand); }
.vlak-petrol { background: var(--petrol); color: var(--zeewit); }
.vlak-petrol .zacht { color: var(--mint); }

/* De golvende rand tussen twee vlakken. De svg vult de kleur van het
   vlak dat eronder komt, zodat de overgang echt golft. */
.golfrand {
  display: block;
  width: 100%;
  height: clamp(58px, 9vw, 124px);
  margin-bottom: -1px;
}
.golfrand + .golfrand { margin-top: -1px; }

/* de dunne ombré-bewegingslijn */
.beweeglijn { display: block; width: 100%; height: 26px; overflow: visible; }
.beweeglijn path { fill: none; stroke-width: 5; stroke-linecap: round; }

/* tape: dezelfde golf dicht op elkaar, als accentstrook */
.tape {
  height: 40px;
  background: var(--mint);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tape svg { width: 100%; height: 100%; }
.tape path { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  /* Petrol, de ankerkleur uit het merkboek. De golf erboven loopt van het
     lichte zeewit naar dit donkere vlak, zodat de kop hierboven op het lichte
     stuk blijft staan en niet als losse strook leest. */
  background: var(--petrol);
  color: var(--zeewit);
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.05fr 0.95fr; }
}
.hero-logo { margin-bottom: 1.6rem; }
/* Groter dan de rest van de pagina: dit is het eerste wat je moet zien. */
.hero-logo .word { font-size: clamp(3rem, 9vw, 5rem); }
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  max-width: 15ch;
  margin-bottom: 1.1rem;
}
/* De slogan staat hier in het Engels, net als onderaan, dus geen afbreking
   midden in een woord en een iets rustiger regelafstand. */
.slogan-hero { max-width: 13ch; line-height: 1.05; }
.hero .lead { margin-bottom: 1.6rem; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

/* De hero staat op petrol, dus de knoppen moeten omgekeerd: een petrolknop op
   een petrolvlak zou verdwijnen. */
.hero .knop { background: var(--zeewit); color: var(--petrol); }
.hero .knop:hover { background: var(--mint); color: var(--petrol); }
.hero .knop-lijn { color: var(--zeewit); border-color: rgba(245, 250, 247, 0.45); }
.hero .knop-lijn:hover { border-color: var(--zeewit); background: rgba(245, 250, 247, 0.12); }

/* Geen gekleurde vorm meer achter de foto. Die stak aan elke kant een ander
   stuk uit (-8% -6% -6% -8%) met nog eens een eigen ronding, en dat trok het
   hele blok scheef zodra er een echte foto in stond. */
.hero-foto { position: relative; }

/* --------------------------------------------------------------------------
   Fotoplekken · vervangen door echte foto's zodra ze er zijn
   -------------------------------------------------------------------------- */
.foto {
  position: relative;
  z-index: 1;
  background: var(--schelp);
  border: 1px dashed rgba(30, 78, 74, 0.25);
  border-radius: var(--radius-l);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}
.foto span {
  font-family: var(--font-accent);
  color: var(--petrol-zacht);
  font-size: 1.05rem;
  line-height: 1.35;
  max-width: 22ch;
}
.foto.breed  { aspect-ratio: 16 / 10; }
.foto.vierkant { aspect-ratio: 1 / 1; }
.foto.golvend { border-radius: 56% 44% 48% 52% / 48% 50% 50% 52%; }

/* Staat er een echte foto in plaats van een leeg kader, dan valt de stippellijn
   weg en vult het beeld de vorm. De mint-achtergrond blijft staan zolang de
   foto nog aan het laden is, zodat de vorm niet opspringt.

   Bewust een gewone afgeronde rechthoek en geen organische vorm: een blob
   werkt als leeg kader, maar snijdt een echte foto scheef af. Het merkboek
   zegt trouwens ook dat de wave niet gecombineerd mag worden met andere
   golvende vormen, en een blob rond een foto is precies dat.

   De verhouding staat op 3/4, gelijk aan de foto's zelf, zodat er niets
   afgesneden wordt. Staat er ooit een foto met een andere verhouding in,
   dan vult object-fit het kader netjes op. */
img.foto {
  border: none;
  padding: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: var(--mint);
  box-shadow: 0 24px 48px -32px rgba(30, 78, 74, 0.55);
}
.contact-foto { max-width: 21rem; margin-top: 1.4rem; }

/* --------------------------------------------------------------------------
   Herkenning · "geen tijd, geen goesting"
   -------------------------------------------------------------------------- */
.herkenning .wrap {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.5rem);
}
@media (min-width: 860px) {
  .herkenning .wrap { grid-template-columns: 1fr 1fr; align-items: center; }
}
.herkenning-lijst { display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.herkenning-lijst li {
  list-style: none;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 1.02rem;
}
.herkenning-lijst .bolletje {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--zeegroen);
  display: grid; place-items: center;
  margin-top: 0.22rem;
}
.herkenning-lijst .bolletje svg { width: 15px; height: 15px; overflow: visible; }
.herkenning-lijst .bolletje path { fill: none; stroke: var(--petrol); stroke-width: 3.2; stroke-linecap: round; }

/* --------------------------------------------------------------------------
   Aanbod
   -------------------------------------------------------------------------- */
.aanbod-kop { max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.kaarten {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .kaarten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .kaarten { grid-template-columns: repeat(3, 1fr); } }

.kaart {
  background: var(--zeewit);
  border: 1px solid rgba(30, 78, 74, 0.09);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 44px -30px rgba(30, 78, 74, 0.55);
}

.kaart h3 { margin-top: 0.4rem; }
.kaart p { font-size: 0.98rem; color: var(--petrol-zacht); }
.kaart .prijsje {
  font-family: var(--font-accent);
  color: var(--petrol);
  font-size: 1.15rem;
}
.kaart .plaatsjes {
  font-size: 0.85rem;
  color: var(--petrol-zacht);
  border-top: 1px solid rgba(30, 78, 74, 0.1);
  padding-top: 0.8rem;
  margin-top: auto;
}
.kaart.uitgelicht { background: var(--mint); border-color: transparent; }
.kaart.uitgelicht p { color: var(--petrol); }
.kaart .lintje {
  align-self: flex-start;
  background: var(--petrol);
  color: var(--zeewit);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   Club-blok
   -------------------------------------------------------------------------- */
.club .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 920px) {
  .club .wrap { grid-template-columns: 1fr 1fr; align-items: center; }
}
.weeklijst { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.weeklijst li {
  list-style: none;
  background: rgba(245, 250, 247, 0.08);
  border: 1px solid rgba(203, 229, 218, 0.22);
  border-radius: 16px;
  padding: 0.85rem 1.1rem;
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  font-size: 1rem;
}
.weeklijst .nummer {
  font-family: var(--font-titel);
  font-weight: 800;
  color: var(--zeegroen);
  font-size: 0.95rem;
  min-width: 1.6rem;
}
.prijskaart {
  background: var(--zeewit);
  color: var(--petrol);
  border-radius: var(--radius-l);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
  overflow: hidden;
}
.prijskaart .bedrag {
  font-family: var(--font-titel);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.prijskaart .permaand { color: var(--petrol-zacht); font-size: 0.95rem; }
.prijskaart ul { list-style: none; display: grid; gap: 0.55rem; margin: 1.4rem 0; }
.prijskaart li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.98rem; }
/* Petrol en geen zeegroen: op de witte prijskaart haalde zeegroen maar 1,84
   op 1 aan contrast, waardoor de vinkjes zo goed als onzichtbaar waren. */
.prijskaart li .vink { color: var(--petrol); flex: none; font-weight: 700; }
.prijskaart .knop { width: 100%; text-align: center; }
.prijskaart .fijnprint { font-size: 0.85rem; color: var(--petrol-zacht); margin-top: 0.9rem; text-align: center; }

/* --------------------------------------------------------------------------
   Wie zijn wij
   -------------------------------------------------------------------------- */
/* De foto naast de gezamenlijke inleiding. Een eigen klasse en niet .wrap,
   want de verhalen eronder zitten in een tweede .wrap die deze twee kolommen
   juist niet mag overnemen. */
.overons .duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  /* De fotokolom is smaller dan de tekstkolom. De inleiding is maar een paar
     regels lang, en naast een staande foto op volle hoogte zou die er verloren
     bijstaan. */
  .overons .duo { grid-template-columns: 0.62fr 1fr; }
}
.overons p + p { margin-top: 1rem; }
.overons .foto-duo { position: relative; }

/* De twee persoonlijke verhalen, elk in een eigen vlak zodat meteen te zien
   is waar de ene stem stopt en de andere begint. Schelp op zeewit: genoeg
   verschil om de kaders te laten lezen, te weinig om te schreeuwen. */
.verhalen {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 860px) {
  .verhalen { grid-template-columns: 1fr 1fr; }
}
.verhaal {
  background: var(--schelp);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
}
/* De kaart regelt de ruimte tussen de alinea's zelf, anders telt de marge
   van .overons p + p er nog eens bovenop. */
.verhalen p + p { margin-top: 0.9rem; }
.verhaal h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.verhaal .rol {
  font-size: 0.9rem;
  color: var(--petrol-zacht);
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}
.verhaal p { font-size: 0.98rem; }

/* De knop en de ingeklapte tekst van "Lees verder". Op een breed scherm bestaat
   die knop niet: daar staan de twee verhalen naast elkaar en is er ruimte zat.
   De tekst erachter heeft hier dus geen enkele regel die haar verbergt, zodat
   ze zichtbaar is zolang het mobiele blok onderaan niet meespeelt. */
.meer-knop { display: none; }
/* De alinea's verhuizen naar een eigen kader, waardoor de eerste zijn marge
   van p + p kwijt was. */
.meer-tekst > p:first-child { margin-top: 0.9rem; }
/* De krabbel staat bovenaan en niet onderaan. Wie snel scrolt leest enkel de
   naam en deze zin, en weet dan al waar het verhaal over gaat. Onderaan zou
   hij die mensen nooit bereiken. */
.verhaal .krabbel {
  margin-top: 1rem;
  margin-bottom: 1.3rem;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.35;
}

/* Bewust binnen .verhaal gehouden: in de voettekst heet de punt op het
   Instagram-icoon ook .stip, en die mag hier niets van meekrijgen. */
.verhaal h3 .stip { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.verhaal h3 .stip.anke  { background: var(--zeegroen); }
.verhaal h3 .stip.ellen { background: var(--koraal); }

/* --------------------------------------------------------------------------
   Citaat
   -------------------------------------------------------------------------- */
.citaat { text-align: center; }
.citaat blockquote {
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 auto;
}
.citaat .bron { margin-top: 1.4rem; font-size: 0.95rem; }
.citaat .beweeglijn { max-width: 220px; margin: 1.8rem auto 0; }

/* --------------------------------------------------------------------------
   Locaties
   -------------------------------------------------------------------------- */
.locatie-rij {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  grid-template-columns: 1fr;
  margin-top: 2.2rem;
}
@media (min-width: 640px) { .locatie-rij { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .locatie-rij { grid-template-columns: repeat(4, 1fr); } }
.locatie {
  background: var(--zeewit);
  border: 1px solid rgba(30, 78, 74, 0.09);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
.locatie b { font-family: var(--font-titel); font-size: 1.05rem; display: block; }
.locatie span { font-size: 0.88rem; color: var(--petrol-zacht); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .contact .wrap { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
}
form { display: grid; gap: 1rem; }
label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
input, textarea, select {
  padding: 0.8rem 1rem;
  border: 1.5px solid rgba(30, 78, 74, 0.18);
  border-radius: 14px;
  font: inherit;
  color: var(--petrol);
  background: #fff;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--zeegroen);
  box-shadow: 0 0 0 3px rgba(134, 198, 186, 0.35);
}
textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; }
#form-status { font-size: 0.95rem; min-height: 1.5em; }
#form-status.gelukt { color: var(--petrol); font-weight: 600; }
#form-status.mis {
  color: var(--petrol);
  font-weight: 600;
  background: rgba(240, 138, 93, 0.22);
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
}
.contact-info { display: grid; gap: 1.2rem; }
.contact-info a { color: var(--petrol); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--petrol); color: var(--zeewit); }
.site-footer .wrap {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer .kreet { font-family: var(--font-accent); color: var(--mint); font-size: 1.15rem; }
/* Doffe regel via kleur en niet via opacity, anders dooft die ook de link erin. */
.site-footer .fijn { width: 100%; font-size: 0.85rem; color: color-mix(in srgb, var(--mint) 75%, var(--petrol)); }
.site-footer a { color: var(--mint); }
/* De twee fijne regels onderaan horen bij elkaar: de copyrightregel en de
   wettelijke ondernemingsgegevens. In één houder, anders krijgen ze de gap van
   1,6 rem van de flexrij eromheen tussen zich in. */
/* De kleine lettertjes onder het nieuwsbriefveld: de uitschrijfbelofte en de
   link naar de privacyverklaring. Zonder die link is een inschrijving niet
   geldig gegeven. */
.nieuwsbrief .kleinletter {
  margin-top: 1rem;
  max-width: 34rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--petrol-zacht);
}
.nieuwsbrief .kleinletter a {
  color: var(--petrol);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .voetregels { width: 100%; display: grid; gap: 0.4rem; }
.site-footer .fijn .maker { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .fijn .maker:hover { color: var(--zeewit); }

/* --------------------------------------------------------------------------
   Beweging · zachte deining, uit bij prefers-reduced-motion
   -------------------------------------------------------------------------- */
@keyframes deining {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-2.2%); }
}
.deint {
  width: 106%;
  animation: deining 9s ease-in-out infinite;
}
@keyframes deining-traag {
  0%, 100% { transform: translateX(-2%); }
  50%      { transform: translateX(0); }
}
.deint-traag {
  width: 106%;
  animation: deining-traag 13s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .deint, .deint-traag { width: 100%; transform: none; }
}

/* houder rond een golfrand zodat de deining niet uitloopt */
.golfrand-houder { display: block; overflow: hidden; line-height: 0; }

/* De houder van een golf toont alles boven de curve. Zonder achtergrond zie
   je daar de paginakleur, en dat gaf een lichte strook tussen twee gekleurde
   vlakken. Elke houder krijgt daarom de kleur van het vlak eróver mee, zodat
   de golf echt van het ene vlak in het andere loopt. De klasse staat in de
   html en noemt het vlak erboven. */
.golfrand-houder.van-zand   { background: var(--zand); }
.golfrand-houder.van-schelp { background: var(--schelp); }
.golfrand-houder.van-zeewit { background: var(--zeewit); }
.golfrand-houder.van-petrol { background: var(--petrol); }
.golfrand-houder.van-mint   { background: var(--mint); }

/* De golf helemaal bovenaan: zeewit erboven, en de curve loopt naar beneden
   het donkere vlak van de hero in. Zo staat de kop nog op het lichte stuk. */
.openingsgolf { background: var(--zeewit); }

/* Golvend ritme in het kaartenraster: brede en smalle kaarten wisselen elkaar af. */
@media (min-width: 1080px) {
  .kaart.breed-2 { grid-column: span 2; }
  /* Het groepsaanbod loopt over de volle breedte, maar pas vanaf drie kolommen.
     Daaronder blijft het een gewone kaart, anders staat er op twee kolommen
     een gat naast de retreatkaart. */
  .kaart.breed-alles { grid-column: 1 / -1; }
}

/* Het woordmerk in de balk en dat in de hero zijn precies hetzelfde. Bij het
   scrollen schoof de grote onder de kleine door, en dan stond het logo een paar
   tellen dubbel en half afgesneden. De balk toont haar woordmerk daarom pas
   zodra dat van de hero eronder verdwenen is. Verbergen gebeurt met opacity en
   niet met display, zodat de rest van de balk niet verspringt. Staat javascript
   uit, dan ontbreekt de klasse js en staat het woordmerk er gewoon altijd. */
.js .site-header .wordmark {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.js .site-header.toon-woordmerk .wordmark { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .js .site-header .wordmark { transition: none; }
}

/* Mobiele header: woordmerk wat kleiner, sectielinks weg, de knop blijft staan. */
@media (max-width: 780px) {
  .site-header .wordmark .word { font-size: 1.25rem; }
  .site-nav { gap: 0.85rem; }
  .site-nav .knop-klein { display: inline-block; }
}
/* De knop in de balk heet "Kom eens mee trainen" en dat is lang voor een
   telefoon. Hij mag nooit over twee regels vallen, want dan wordt de
   meescrollende balk ineens twintig pixels hoger. Onder 480 pixels krijgt hij
   daarom wat kleinere letters en smallere zijkanten, en wordt het woordmerk
   ernaast een tikje kleiner, zodat de twee samen op één regel passen. */
.knop-klein { white-space: nowrap; }
/* Net boven 780 pixels komt de knop erbij terwijl de vier sectielinks er nog
   staan. Met de langere knoptekst past dat rijtje niet meer op één regel, dus
   in die strook staan de letters en de tussenruimtes wat krapper. */
@media (min-width: 780px) and (max-width: 920px) {
  .site-nav { gap: 0.8rem; }
  .site-nav a:not(.knop-klein) { font-size: 0.88rem; }
  .site-nav .knop-klein { font-size: 0.85rem; padding: 0.5rem 0.9rem; }
}
@media (max-width: 480px) {
  .site-header .wordmark .word { font-size: 1.1rem; }
  .site-nav { gap: 0.6rem; }
  .site-nav .knop-klein { font-size: 0.82rem; padding: 0.5rem 0.85rem; }
}
/* De allersmalste toestellen, ongeveer een iPhone SE. */
@media (max-width: 360px) {
  .site-header .wordmark .word { font-size: 1rem; }
  .site-nav .knop-klein { font-size: 0.78rem; padding: 0.45rem 0.7rem; }
}
/* Nog smaller dan een iPhone SE, bijvoorbeeld een opgevouwen Galaxy Fold.
   Daar moeten het woordmerk en de knop echt elke pixel delen. */
@media (max-width: 340px) {
  .site-header .wrap { padding-inline: 0.75rem; }
  .site-header .wordmark .word { font-size: 0.95rem; }
  .site-nav .knop-klein { font-size: 0.72rem; padding: 0.45rem 0.6rem; }
}

@media (max-width: 420px) {
  /* Op het smalste scherm valt de tekstlink Contact weg, want de knop ernaast
     gaat naar dezelfde plek. De :not() is nodig sinds die knop ook naar
     #contact wijst: zonder haar verdween de knop mee en bleef er niets over. */
  .site-nav a[href="#contact"]:not(.knop-klein) { display: none; }
}


/* --------------------------------------------------------------------------
   De golf tekent zichzelf uit
   De bewegingslijn loopt van links naar rechts vol, zoals ze in het merkboek
   onder het woordmerk doorloopt tot het einde van het woord. Het pad heeft
   pathLength="100", dus de streepjes rekenen in procenten en blijven kloppen
   hoe breed de svg ook uitgerekt wordt.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* De verborgen begintoestand hangt aan .wacht, en die zet javascript er zelf
     op om ze meteen weer af te halen. Zo is zichtbaar de standaard: gaat er in
     het script iets mis, dan staat alles er gewoon, in plaats van onzichtbaar
     te blijven hangen. Dat was precies wat er misliep toen de golven op een
     scroll-melding wachtten die nooit kwam.

     De veeg gebruikt clip-path en geen stroke-dasharray: dat laatste rekent
     samen met non-scaling-stroke in schermpixels in plaats van in de lengte
     van het pad, waardoor de lijn halverwege het woord stilviel. De boven- en
     ondermarge staan negatief zodat de dikte nergens afgesneden wordt. */
  /* De open eindtoestand staat er expliciet als inset en niet als "none":
     clip-path: none valt niet te interpoleren, dus dan sprong de golf er in
     een keer bij in plaats van open te vegen. Deze inset ligt aan alle kanten
     buiten het kader, dus ze knipt niets af en de golf staat gewoon volledig. */
  .js .tekenbaar {
    clip-path: inset(-80% -3% -80% -3%);
    transition: clip-path 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* transition: none is hier geen detail maar de kern. Het script zet .wacht
     erop en haalt hem één uitgelezen layout later weer af. Zonder deze regel
     wordt ook die eerste stap een animatie van 1,4 seconde, en dan is de golf
     bij het afhalen nog nauwelijks dichtgeschoven. Resultaat: geen zichtbare
     veeg. De begintoestand moet dus meteen staan, en enkel de weg terug mag
     animeren. */
  .js .tekenbaar.wacht {
    clip-path: inset(-80% 100% -80% -3%);
    transition: none;
  }

  /* Hero komt rustig opzetten, met een klein verschil per regel. */
  .js .opkomst {
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js .opkomst.wacht {
    opacity: 0;
    transform: translateY(16px);
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Ronde foto bovenaan een aanbod-kaart
   Een cirkel past bij het merk zonder met de golf te concurreren, en hij
   werkt op elke kaartbreedte gelijk. Vaste maat, dus de brede en de smalle
   kaarten krijgen dezelfde cirkel en de rij blijft rustig.
   -------------------------------------------------------------------------- */
.kaartfoto {
  align-self: flex-start;
  width: 140px;
  /* height: auto is nodig, geen overbodige regel: zonder deze regel wint de
     height="800" uit de HTML en wordt de cirkel 140 bij 800. */
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mint);
  margin-bottom: 0.2rem;
}
.kaart.uitgelicht .kaartfoto { background: var(--zeewit); }
@media (max-width: 480px) {
  .kaartfoto { width: 112px; }
}


/* --------------------------------------------------------------------------
   Scrolgalerij
   Alle beelden krijgen dezelfde hoogte en houden hun eigen breedte. Daardoor
   hoeft er niets bijgesneden te worden en staan staande en liggende foto's
   naast elkaar zonder dat het rommelig wordt.
   -------------------------------------------------------------------------- */
.galerij {
  display: flex;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 1.1rem;
  margin-inline: -4px;
  scrollbar-color: rgba(30, 78, 74, 0.35) transparent;
  scrollbar-width: thin;
  text-align: left;
}
.galerij:focus-visible { outline: 3px solid var(--zeegroen); outline-offset: 4px; }
.galerij::-webkit-scrollbar { height: 8px; }
.galerij::-webkit-scrollbar-track { background: rgba(30, 78, 74, 0.10); border-radius: 100px; }
.galerij::-webkit-scrollbar-thumb { background: rgba(30, 78, 74, 0.32); border-radius: 100px; }
.galerij img {
  flex: none;
  height: clamp(15rem, 26vw, 21rem);
  width: auto;
  max-width: none;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--zeewit);
  scroll-snap-align: start;
  box-shadow: 0 18px 36px -28px rgba(30, 78, 74, 0.6);
}

/* Knoppen in een kaart stonden met een inline-stijl links vastgezet. Dat staat
   nu hier, zodat de mobiele weergave ze kan centreren. */
.kaart .knop,
.kaart .knop-lijn { align-self: flex-start; }



/* Een select wordt vanzelf zo breed als zijn langste optie, en in een raster
   duwt dat de hele kolom mee open. Met min-width 0 mag hij krimpen tot de
   breedte die hij krijgt, in plaats van de layout te bepalen. */
form, form label { min-width: 0; }
input, textarea, select { width: 100%; min-width: 0; }

/* --------------------------------------------------------------------------
   De x van het woordmerk is een tekening, geen letter. Deze verborgen x zorgt
   dat de tekst van de pagina wel "roxingmoms" leest: voor zoekmachines, voor
   voorleessoftware, en voor wie de naam kopieert.
   -------------------------------------------------------------------------- */
.verborgen-x {
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: baseline;
}


/* --------------------------------------------------------------------------
   Resultaatregel in het club-blok
   Niet wat je krijgt, maar wat er verandert.
   -------------------------------------------------------------------------- */
.resultaat {
  margin-top: 1.4rem;
  max-width: 46ch;
  padding: 1rem 1.3rem;
  border-left: 3px solid var(--zeegroen);
  border-radius: 0 14px 14px 0;
  background: rgba(245, 250, 247, 0.08);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Ervaringen
   -------------------------------------------------------------------------- */
/* De kaarten staan in een venster waar je doorheen schuift. De breedte is zo
   gekozen dat er op een breed scherm ongeveer tweeënhalf tot drie kaarten
   passen: die halve kaart aan de rand laat meteen zien dat er meer is. */
.ervaring-rij {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* ruimte onder de kaarten voor de schuifbalk, en opzij zodat de schaduw
     van de eerste en laatste kaart niet wordt afgesneden */
  padding: 4px 4px 1.1rem;
  margin-inline: -4px;
  scrollbar-color: rgba(30, 78, 74, 0.35) transparent;
  scrollbar-width: thin;
}
.ervaring-rij:focus-visible { outline: 3px solid var(--zeegroen); outline-offset: 4px; }
.ervaring-rij::-webkit-scrollbar { height: 8px; }
.ervaring-rij::-webkit-scrollbar-track { background: rgba(30, 78, 74, 0.08); border-radius: 100px; }
.ervaring-rij::-webkit-scrollbar-thumb { background: rgba(30, 78, 74, 0.32); border-radius: 100px; }

.ervaring {
  flex: 0 0 clamp(17rem, 38%, 25rem);
  scroll-snap-align: start;
  background: var(--zeewit);
  border: 1px solid rgba(30, 78, 74, 0.09);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ervaring blockquote {
  font-size: 1.02rem;
  line-height: 1.6;
  quotes: "\201E" "\201D";
}
.ervaring blockquote::before { content: open-quote; }
.ervaring blockquote::after  { content: close-quote; }
/* De vette stukken zijn er voor wie scant: die pikt zo de kern op zonder het
   hele citaat te lezen. Bewust <b> en geen <strong>: het is nadruk voor het
   oog, geen extra betekenis, en zo leest voorleessoftware het gewoon mee als
   doorlopende tekst. Alleen zwaarder, geen andere kleur, want koraal tekst op
   een lichte achtergrond mag niet van het merkboek. */
.ervaring blockquote b { font-weight: 700; }
.ervaring figcaption {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(30, 78, 74, 0.1);
  font-size: 0.88rem;
  color: var(--petrol-zacht);
}





/* --------------------------------------------------------------------------
   Nieuwsbrief
   -------------------------------------------------------------------------- */
.nieuwsbrief .lead { max-width: 52ch; }
.nieuwsbrief-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 34rem;
}
.nieuwsbrief-form input[type="email"] {
  flex: 1 1 16rem;
  padding: 0.95rem 1.2rem;
  border-radius: 100px;
  border: 1.5px solid rgba(30, 78, 74, 0.22);
  background: var(--zeewit);
}
.nieuwsbrief-form .knop { flex: none; }
#nieuwsbrief-status { font-size: 0.95rem; min-height: 1.5em; margin-top: 0.8rem; }
#nieuwsbrief-status.gelukt { font-weight: 600; }
#nieuwsbrief-status.mis {
  font-weight: 600;
  background: rgba(240, 138, 93, 0.22);
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
  display: inline-block;
}

.mailregel { font-size: 0.95rem; }
.mailregel a { color: var(--petrol); }

/* Verbergen voor het oog, niet voor voorleessoftware. */
.enkel-voorlezers {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* De bijgesneden hero-foto is bijna vierkant (1050 bij 1062). Met de 3/4 van
   de andere foto's zou er links en rechts een kwart afvallen, precies waar hun
   armen zitten. Vandaar zijn eigen verhouding. */
img.hero-beeld { aspect-ratio: 1000 / 1250; }

/* --------------------------------------------------------------------------
   Instagram in de voettekst
   -------------------------------------------------------------------------- */
.instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--mint);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(203, 229, 218, 0.35);
  border-radius: 100px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.instagram:hover { background: rgba(203, 229, 218, 0.14); transform: translateY(-2px); }
.instagram:focus-visible { outline: 3px solid var(--zeegroen); outline-offset: 3px; }
.instagram svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.instagram svg .stip { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   Ankerlinks en de plakkende kop
   Zonder deze regel springt een klik op "Aanbod" of "Contact" de titel net
   onder de kop, waar je ze niet meer ziet. Deze marge houdt er ruimte vrij.
   -------------------------------------------------------------------------- */
:target,
section[id],
main[id] { scroll-margin-top: clamp(78px, 9vw, 96px); }
/* Hint bij het schuifvenster met reacties. */
.schuifhint {
  font-size: 0.88rem;
  color: var(--petrol-zacht);
  margin-top: 1rem;
}
/* --------------------------------------------------------------------------
   Roxing Moms Club, coming soon
   De clubkaart staat bovenaan het aanbod over de volle breedte, vanaf twee
   kolommen. Zo blijft het raster eronder heel: drie kaarten en het
   groepsaanbod, net zoals voordien.
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .kaart.breed-club { grid-column: 1 / -1; }
}
/* Het coming soon-lint op de hoek. Koraal als energie-accent, met de letters
   in diep petrol, want koraal tekst op licht mag niet. De twee omgeslagen
   puntjes zijn koraal met wat petrol erdoor, zodat het lint rond de rand
   van de kaart lijkt te plooien. De kaart zelf mag daarvoor niet afknippen. */
.kaart.breed-club { overflow: visible; }
.hoeklint {
  --lint-maat: 300px;
  --lint-plooi: color-mix(in srgb, var(--koraal) 62%, var(--petrol-diep));
  position: absolute;
  top: -10px;
  right: -10px;
  width: var(--lint-maat);
  height: var(--lint-maat);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.hoeklint::before,
.hoeklint::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 8px solid var(--lint-plooi);
  border-top-color: transparent;
  border-right-color: transparent;
}
.hoeklint::before { top: 0; left: 0; }
.hoeklint::after { bottom: 0; right: 0; }
.hoeklint span {
  position: absolute;
  display: block;
  width: 450px;
  left: -50px;
  top: 62px;
  padding: 1.35rem 0;
  /* een tikje doorschijnend, zodat de kaart erdoor blijft lezen */
  background: color-mix(in srgb, var(--koraal) 86%, transparent);
  color: var(--petrol-diep);
  font-family: var(--font-titel);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 6px 14px -8px rgba(20, 55, 52, 0.45);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .js .hoeklint span { transform: rotate(45deg) translateX(110%); }
  .js .hoeklint::before,
  .js .hoeklint::after { opacity: 0; }
  .js .hoeklint.geland span {
    transform: rotate(45deg);
    transition: transform 0.6s cubic-bezier(0.25, 1.2, 0.5, 1) 0.15s;
  }
  .js .hoeklint.geland::before,
  .js .hoeklint.geland::after { opacity: 1; transition: opacity 0.2s ease 0.6s; }
}
@media (max-width: 760px) {
  .hoeklint { --lint-maat: 190px; }
  .hoeklint::before,
  .hoeklint::after { border-width: 6px; }
  .hoeklint span { width: 285px; left: -32px; top: 40px; padding: 0.85rem 0; font-size: 1.05rem; }
}

/* Het wachtlijstvenster */
.wachtlijst {
  margin: auto;
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--zeewit);
  color: var(--petrol);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: 0 30px 60px -30px rgba(20, 55, 52, 0.6);
}
.wachtlijst::backdrop { background: rgba(20, 55, 52, 0.55); }
.wachtlijst h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 0.6rem; }
.wachtlijst > p { color: var(--petrol-zacht); }
.wachtlijst form { margin-top: 1.3rem; max-width: none; }
.wachtlijst .knop { justify-self: start; }
.wachtlijst .kleinletter { margin-top: 1rem; font-size: 0.85rem; color: var(--petrol-zacht); }
.wachtlijst .kleinletter a { color: var(--petrol); }
.wachtlijst-sluit {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 50%;
  background: var(--mint);
  color: var(--petrol);
  font-size: 1.5rem;
  line-height: 1;
}
.wachtlijst-sluit:hover { background: var(--zeegroen); }
#wachtlijst-status { font-size: 0.95rem; min-height: 1.5em; }
#wachtlijst-status.gelukt { font-weight: 600; }
#wachtlijst-status.mis {
  font-weight: 600;
  background: rgba(240, 138, 93, 0.22);
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
}

/* ==========================================================================
   MOBIEL · alles gecentreerd
   Onder deze breedte staat elk blok onder elkaar in plaats van naast elkaar.
   Links uitlijnen laat dan een rafelige rechterkant achter; gecentreerd
   leest rustiger op een smal scherm.
   ========================================================================== */
@media (max-width: 760px) {
  .hero .wrap,
  .herkenning .wrap,
  .aanbod-kop,
  .kaarten,
  .club .wrap,
  .overons .wrap,
  #locaties .wrap,
  .ervaringen .wrap,
  .nieuwsbrief .wrap,
  .contact .wrap,
  .site-footer .wrap { text-align: center; }

  /* blokken met een leesbreedte netjes in het midden zetten */
  .lead,
  .aanbod-kop,
  .kaart p,
  .overons p,
  .club p,
  /* De hero-titel heeft een maximumbreedte van 15 tekens. Zonder automarge
     staat dat kader links, en dan is de gecentreerde tekst erin alsnog 12
     pixels naar links geschoven tegenover de rest. */
  .hero h1,
  #contactform { margin-inline: auto; }

  /* knoppen en losse elementen */
  .hero-knoppen { justify-content: center; }
  /* het veld vult de breedte, de knop valt eronder en komt in het midden */
  .nieuwsbrief-form { justify-content: center; margin-inline: auto; }
  .kaart { align-items: center; }
  .kaart .knop,
  .kaart .knop-lijn,
  .kaartfoto,
  .kaart .lintje { align-self: center; }
  .kaart .plaatsjes { width: 100%; }
  .resultaat { border-left: none; border-top: 3px solid var(--zeegroen); border-radius: 0 0 14px 14px; margin-inline: auto; }

  /* Lijstjes. Het vinkje of cijfer staat altijd voor de zin, ook op een smal
     scherm. De lijst als geheel staat in het midden, maar de regels binnen de
     lijst blijven links uitgelijnd, zodat alle vinkjes netjes onder elkaar
     staan en een zin van twee regels gewoon doorloopt. */
  .herkenning-lijst,
  .weeklijst,
  .prijskaart ul {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
  .herkenning-lijst li,
  .weeklijst li,
  .prijskaart li {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  /* De naam met haar bolletje is een flexregel, dus die moet apart gecentreerd
     worden: text-align alleen verzet een flexkind niet. */
  .verhaal h3 { justify-content: center; }

  /* Lees verder. Enkel hier, dus enkel op een smal scherm, wordt de rest van
     het verhaal weggestopt. Alles hangt aan .js: zonder javascript bestaat de
     knop niet en staat de tekst er gewoon volledig. */
  .js .verhaal .meer-tekst { display: none; }
  .js .verhaal.open .meer-tekst { display: block; }
  .js .meer-knop {
    display: inline-block;
    align-self: center;
    margin-top: 1.2rem;
    min-height: 44px;
    padding: 0.6rem 1.4rem;
    background: transparent;
    color: var(--petrol);
    border: 1.5px solid rgba(30, 78, 74, 0.28);
    border-radius: 100px;
    font-family: var(--font-tekst);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }
  .js .meer-knop:hover { border-color: var(--petrol); background: rgba(30, 78, 74, 0.05); }
  .js .meer-knop:focus-visible { outline: 3px solid var(--zeegroen); outline-offset: 3px; }

  /* foto's en clip */
  .contact-foto { margin-inline: auto; }

  /* formulier: labels in het midden, maar wat je typt blijft links staan */
  form label { justify-items: center; }
  input, textarea, select { text-align: left; }

  /* Een invoerveld kleiner dan 16 pixels laat iPhones inzoomen zodra je erin
     tikt, en dan staat de pagina scheef. Vandaar precies 16. */
  input, textarea, select { font-size: 1rem; }

  /* Tikdoelen groot genoeg om met een duim te raken. */
  .site-nav .knop-klein {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .mailregel a { display: inline-block; padding-block: 0.45rem; }
  #form-status { text-align: center; }

  .site-footer .wrap { justify-content: center; }
}