/*
  Voorbeeld 1 — opbouw, lettertypes, maten en animaties 1-op-1 naar Fitzone (Framer),
  in de kleuren en het logo van Studio Pyramid.
  Breakpoints zoals het origineel: desktop ≥ 1440, tablet 810–1439, telefoon < 810.
*/

:root {
  /* Merkkleuren uit het merkboek (brand/merkpakket): 60% achtergrond, 25% tekst, 10% logo, 5% accent */
  --indigo: #201F54;      /* Background */
  --wit: #F7F6FC;         /* Text */
  --goud: #BC964F;        /* Logo */
  --accent: #D4AE62;      /* Accent */
  /* Afgeleid van de merkkleuren */
  --wit-zacht: rgb(247 246 252 / .72);
  --indigo-zacht: rgb(32 31 84 / .78);
  --kaart: #FFFFFF;
  --indigo-diep: #14133A;   /* diepste vlak (merkpakket indigo-950) */
  --indigo-kaart: #2B2A6A;  /* kaart op donker (merkpakket indigo-800) */

  /* Lettertypes van het voorbeeld */
  --font-kop: "Oswald", "Arial Narrow", sans-serif;
  --font-tekst: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Veren zoals Framer: bounce 0.2 en bounce 0 */
  --veer: cubic-bezier(.22, 1, .36, 1);
  --veer-zacht: cubic-bezier(.22, 1, .36, 1);
  --veer-kaart: cubic-bezier(.22, 1, .36, 1);
  --tekst-curve: cubic-bezier(.18, .35, .53, .93);

  --container: 1240px;
  --h1: 84px;
  --kolom: 480px;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --veer: linear(0, 0.0273, 0.0954, 0.1873, 0.2906, 0.3961, 0.4978, 0.5917, 0.6755, 0.7484, 0.8101, 0.8612, 0.9025, 0.9353, 0.9605, 0.9795, 0.9932, 1.0028, 1.0091, 1.0128, 1.0147, 1.0152, 1.0147, 1.0137, 1.0123, 1.0107, 1.0091, 1.0076, 1.0061, 1.0049, 1.0038, 1.0028, 1.0021, 1.0015, 1.001, 1.0006, 1);
    --veer-zacht: linear(0, 0.0278, 0.0942, 0.1803, 0.2738, 0.3669, 0.4551, 0.5358, 0.6079, 0.6711, 0.7258, 0.7725, 0.8122, 0.8455, 0.8734, 0.8966, 0.9157, 0.9315, 0.9445, 0.9551, 0.9637, 0.9708, 0.9765, 0.9811, 0.9848, 0.9878, 0.9903, 0.9922, 0.9938, 0.995, 0.996, 0.9968, 0.9975, 0.998, 0.9984, 0.9987, 1);
    /* Kaartveer: stiffness 400, damping 60, mass 1 (overgedempt, ± 0,9 s) */
    --veer-kaart: linear(0, 0.1089, 0.2758, 0.4238, 0.5439, 0.6395, 0.7151, 0.7749, 0.8221, 0.8595, 0.8889, 0.9123, 0.9307, 0.9452, 0.9567, 0.9658, 0.973, 0.9786, 0.9831, 0.9867, 0.9895, 0.9917, 0.9934, 0.9948, 0.9959, 0.9968, 0.9974, 0.998, 0.9984, 0.9987, 1);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--indigo);
  color: var(--wit);
  font-family: var(--font-tekst);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0; }

/* ---------- Menu ---------- */

.menu {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  width: 100%;
  max-width: var(--container);
  transform: translateX(-50%);
}
.menu__balk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
  padding: 30px 0;
}
.menu__waas { display: none; }

.logo { display: flex; align-items: center; height: 48px; }
.logo img { width: auto; height: 46px; }

.menu__links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menulink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: var(--wit);
}
.menulink__lijn {
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s var(--veer);
}
.menulink:hover .menulink__lijn,
.menulink:focus-visible .menulink__lijn {
  transform: scaleX(1);
  transform-origin: left;
}
.menulink:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.menu__acties { display: flex; align-items: center; gap: 16px; }

/* ---------- Knoppen (pil + ronde pijl) ---------- */

.knop {
  --pijl: 50px;
  --recht-x: 37px;
  --schuin-x: 27px;
  --schuin-y: -49px;
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  overflow: clip;
  cursor: pointer;
  font-weight: 500;
  font-size: 18px;
  white-space: nowrap;
}
.knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.knop__pil {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 100px;
}
.knop__pil::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--rand);
  border-radius: inherit;
  pointer-events: none;
}
.knop__vulling { position: absolute; top: 0; height: 100%; border-radius: 100px; background: var(--accent); }
.knop__tekst { position: relative; z-index: 1; }
.knop__pijl {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--pijl);
  height: var(--pijl);
  border-radius: 50%;
  background: var(--wit);
  overflow: clip;
}
.knop__pijl svg {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .8s var(--knop-veer);
}
.pijl-recht { left: -23px; transform: translateY(-50%); }
.pijl-schuin { left: 50%; transform: translate(-50%, -50%); }
.knop:hover .pijl-recht { transform: translate(var(--recht-x), -50%); }
.knop:hover .pijl-schuin { transform: translate(calc(-50% + var(--schuin-x)), calc(-50% + var(--schuin-y))); }

/* Randknop in het menu: vulling schuift van links naar rechts */
.knop--rand { --knop-veer: var(--veer-zacht); line-height: 1.6; }
.knop--rand .knop__pil {
  --rand: var(--wit);
  padding: 10px 20px;
  overflow: clip;
  color: var(--wit);
  transition: color .8s var(--veer-zacht);
}
.knop--rand .knop__pil::after { transition: border-color .8s var(--veer-zacht); }
.knop--rand .knop__vulling { left: -2px; width: 1%; transition: width .8s var(--veer-zacht); }
.knop--rand:hover .knop__vulling { width: 102%; }
.knop--rand:hover .knop__pil { --rand: var(--accent); color: var(--indigo); }

/* Volle knop in de hero: vulling glijdt achter de pijl weg */
.knop--vol { --knop-veer: var(--veer); line-height: 1.2; }
.knop--vol .knop__pil {
  --rand: var(--accent);
  padding: 14px 26px;
  color: var(--indigo);
  transition: color .8s var(--veer);
}
.knop--vol .knop__pil::after { transition: border-color .8s var(--veer); }
.knop--vol .knop__vulling { left: 0; width: 100%; transition: left .8s var(--veer), width .8s var(--veer); }
.knop--vol:hover .knop__vulling { left: calc(134.667% - 35%); width: 70%; }
.knop--vol:hover .knop__pil { --rand: var(--wit); color: var(--wit); }

/* Hamburger (alleen telefoon) */
.hamburger {
  display: none;
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--wit);
  border-radius: 6px;
  background: var(--accent);
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  left: 9px;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--indigo);
  transition: transform .4s var(--veer), opacity .2s ease;
}
.hamburger span:nth-child(1) { top: 12px; }
.hamburger span:nth-child(2) { top: 17.5px; }
.hamburger span:nth-child(3) { top: 23px; }
.menu.is-open .hamburger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu.is-open .hamburger span:nth-child(2) { opacity: 0; }
.menu.is-open .hamburger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  padding: 20px;
  overflow: hidden;
}
.hero__achter { position: absolute; inset: 0; isolation: isolate; background: var(--indigo); }
.hero__foto { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Indigo kleurtint over de zwart-witfoto, links donkerder zoals het origineel */
.hero__achter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--indigo);
  mix-blend-mode: color;
}
.hero__waas {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgb(32 31 84 / .92) 0%, rgb(32 31 84 / .82) 32%, rgb(32 31 84 / .55) 62%, rgb(32 31 84 / .45) 100%);
}

.hero__container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
.hero__rij { display: flex; align-items: center; gap: 10px; }
.hero__inhoud { display: flex; flex-direction: column; gap: 40px; width: var(--kolom); }
.hero__kop { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.beoordeling {
  display: inline-flex;
  align-items: center;
  gap: 23px;
  padding: 4px 14px;
  border-radius: 25px;
  box-shadow: inset 0 0 0 .8px rgb(255 255 255 / .07);
}
.beoordeling__sterren { width: 104px; height: 20px; fill: var(--accent); }
.beoordeling__tekst { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 14px; line-height: 1.4; }
.beoordeling__tekst svg { width: 24px; height: 24px; }

.hero__titel {
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: var(--h1);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.hero__titel .woord { display: inline-block; }

.hero__teken { flex: none; display: grid; place-items: center; width: 240px; height: 310px; }
.hero__teken img { width: 100%; height: auto; filter: drop-shadow(0 0 22px rgb(212 174 98 / .45)); }

.hero__contact {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 18px;
}
.hero__adres { font-weight: 400; line-height: 1.5; }
.hero__scheiding { flex: none; width: 1px; height: 40px; background: rgb(255 255 255 / .5); }
.hero__info { display: flex; flex-direction: column; gap: 2px; font-weight: 500; line-height: 1.6; }
.hero__info a:hover { color: var(--accent); }

/* ---------- Trainingen ---------- */

.trainingen { padding: 120px 20px; background: var(--kaart); color: var(--indigo); }
.trainingen__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  max-width: var(--container);
  margin: 0 auto;
}
.trainingen__titel {
  width: 100%;
  max-width: 730px;
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
}
.trainingen__titel .woord { display: inline-block; }
.trainingen__kaarten { display: flex; gap: 20px; width: 100%; }
.kaart { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0; }
.kaart__foto { width: 100%; aspect-ratio: .8413 / 1; border-radius: 20px; overflow: hidden; }
.kaart__foto img { width: 100%; height: 100%; object-fit: cover; }
.kaart__titel {
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Over Ali ---------- */

.over { padding: 120px 20px; overflow: hidden; background: var(--wit); color: var(--indigo); }
.over__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
}
.over__beeld { position: relative; flex: 1 0 0; max-width: 605px; aspect-ratio: .7992 / 1; }
.over__teken { position: absolute; top: -50px; right: -49px; z-index: 2; width: 150px; }
.over__teken img { width: 100%; height: auto; filter: drop-shadow(0 0 18px rgb(212 174 98 / .45)); }
.over__foto { position: relative; height: 100%; border-radius: 30px; overflow: hidden; }
.over__foto img { width: 100%; height: 100%; object-fit: cover; }
.over__verloop { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(32 31 84 / 0) 0%, var(--indigo) 100%); }
.over__cijfer {
  position: absolute;
  left: 50%;
  bottom: 60px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translateX(-50%);
}
.over__getal {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 180px;
  line-height: 1.1;
  letter-spacing: -.1em;
  color: var(--accent);
  white-space: nowrap;
}
.over__label { font-weight: 700; font-size: 20px; line-height: 1.5; color: var(--wit); text-transform: uppercase; white-space: nowrap; }

.over__inhoud { display: flex; flex-direction: column; gap: 48px; flex: 1 0 0; max-width: 550px; }
.over__boven { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; }
.over__kop { display: flex; flex-direction: column; gap: 16px; }
.over__titel {
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.over__titel .woord { display: inline-block; }
.over__tekst { font-size: 18px; line-height: 1.5; color: var(--indigo-zacht); }
.over__lijn { height: 1px; background: rgb(32 31 84 / .14); }
.over__lijstblok { display: flex; flex-direction: column; gap: 24px; }
.over__script { font-family: "Cedarville Cursive", cursive; font-size: 35px; line-height: 1.2; }
.over__lijst { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.over__lijst li { display: flex; align-items: center; gap: 5px; font-size: 18px; line-height: 1.5; }
.over__lijst svg { flex: none; width: 20px; height: 20px; }
.vinkje-badge { fill: var(--indigo); }
.vinkje-haak { fill: none; stroke: var(--wit); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Donkere variant van de volle knop: donkere pijl, bij hover wordt de pil donker */
.knop--donker .knop__pijl { background: var(--indigo); }
.knop--donker .knop__pijl svg { stroke: var(--wit); }
.knop--donker .knop__pil { transition: color .8s var(--veer), background-color .8s var(--veer); }
.knop--donker:hover .knop__pil { --rand: var(--accent); background: var(--indigo); color: var(--wit); }

/* ---------- Traject (donkere sectie met drie kaarten) ---------- */

.traject { padding: 120px 20px; background: var(--indigo); color: var(--wit); }
.traject__container { display: flex; flex-direction: column; gap: 60px; max-width: var(--container); margin: 0 auto; }
.traject__kop { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.traject__titel {
  flex: 1 0 0;
  max-width: 526px;
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.traject__titel .woord { display: inline-block; }
.traject__tekst { flex: 1 0 0; max-width: 450px; font-size: 18px; line-height: 1.5; }
.traject__kaarten { display: flex; justify-content: center; gap: 20px; }
.traject__plek { flex: 1 0 0; min-width: 0; }

.dienst {
  display: flex;
  height: 434px;
  padding: 12px;
  border-radius: 20px;
  background: var(--kaart);
  color: var(--indigo);
}
.dienst:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dienst__binnen {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  border-radius: 12px;
  overflow: hidden;
}
.dienst__inhoud { position: relative; display: flex; flex-direction: column; gap: 30px; }
/* Gouden cirkel achter het icoon; bij hover groeit hij uit tot over de hele kaart */
.dienst__vlak {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  border-radius: 100px;
  background: var(--goud);
  transition: width .9s var(--veer-kaart), height .9s var(--veer-kaart), top .9s var(--veer-kaart), left .9s var(--veer-kaart);
}
.dienst:hover .dienst__vlak { top: calc(45px - 356px); left: calc(45px - 356px); width: 712px; height: 712px; }
.dienst__icoon {
  position: relative;
  width: 90px;
  height: 90px;
  fill: none;
  stroke: var(--indigo);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dienst__teksten { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.dienst__titel { margin: 0; font-family: var(--font-kop); font-weight: 500; font-size: 28px; line-height: 1.2; text-transform: uppercase; }
.dienst__tekst { font-size: 18px; line-height: 1.5; color: var(--indigo-zacht); transition: color .4s ease; }
.dienst:hover .dienst__tekst { color: var(--indigo); }
.dienst__meer {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-kop);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dienst__meer svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Reviews (schuif uit voorbeeld 2, in de stijl van deze site) ---------- */

.reviews { padding: 120px 20px; overflow: hidden; background: var(--wit); color: var(--indigo); }
.reviews__container { display: flex; flex-direction: column; gap: 60px; max-width: var(--container); margin: 0 auto; }
.reviews__kop { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.reviews__titel {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.reviews__titel .woord { display: inline-block; }
.reviews__titel, .tarieven__titel { text-wrap: balance; }
.reviews__tekst { max-width: 600px; font-size: 18px; line-height: 1.5; color: var(--indigo-zacht); text-wrap: balance; }

/* 3, 2 of 1 kaart tegelijk; site.js leest --zichtbaar uit */
.schuif { --zichtbaar: 3; --tussen: 20px; position: relative; }
.schuif__venster { overflow: hidden; border-radius: 20px; }
.schuif__baan { display: flex; gap: var(--tussen); transition: transform .85s var(--veer); touch-action: pan-y; }

.review {
  flex: 0 0 calc((100% - (var(--zichtbaar) - 1) * var(--tussen)) / var(--zichtbaar));
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 400px;
  padding: 36px;
  border-radius: 20px;
  background: var(--kaart);
  box-shadow: inset 0 0 0 1px rgb(32 31 84 / .08);
  user-select: none;
}
.sterren { display: flex; gap: 4px; color: var(--goud); }
.sterren svg { width: 20px; height: 20px; }
.review__tekst { margin-top: 28px; font-size: 20px; line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.review__voet { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 28px; }
.review__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--accent);
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .03em;
}
.review__naam { font-weight: 700; font-size: 16px; line-height: 1.4; }
.review__meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--indigo-zacht); }
.review__meta svg { flex: none; width: 13px; height: 13px; }

/* Scorekaart in logogoud, net als de uitgelichte vlakken elders op de site */
.review--score { justify-content: center; align-items: flex-start; background: var(--goud); box-shadow: none; }
.review__score { font-family: var(--font-kop); font-weight: 700; font-size: 120px; line-height: 1; letter-spacing: -.05em; }
.review--score .sterren { margin-top: 12px; color: var(--indigo); }
.review--score .review__tekst { margin: 16px 0 32px; }

.pijlknop {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--wit);
  cursor: pointer;
  transition: background-color .3s var(--veer-zacht), color .3s var(--veer-zacht), transform .45s var(--veer);
}
.pijlknop svg { width: 22px; height: 22px; }
.pijlknop:hover { background: var(--accent); color: var(--indigo); }
.pijlknop:active { transform: scale(.9); }
.pijlknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pijlknop--vorige { left: -66px; }
.pijlknop--volgende { right: -66px; }

.stippen { display: flex; justify-content: center; margin-top: 28px; }
.stip { display: grid; place-items: center; height: 30px; padding: 0 3px; border: 0; background: none; cursor: pointer; }
.stip span { display: block; width: 6px; height: 6px; border-radius: 3px; background: rgb(32 31 84 / .25); transition: width .45s var(--veer-zacht), background-color .45s var(--veer-zacht); }
.stip[aria-current="true"] span { width: 18px; background: var(--indigo); }
.stip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Tarieven (prijslijst uit voorbeeld 2, in de stijl van deze site) ---------- */

.tarieven { position: relative; isolation: isolate; padding: 140px 20px 150px; overflow: hidden; background: var(--indigo); color: var(--wit); }
/* Zwart-witte studiofoto, indigo getint en naar boven en onder weggewerkt */
.tarieven__achter { position: absolute; inset: 0; z-index: -1; }
.tarieven__achter img { width: 100%; height: 100%; object-fit: cover; }
.tarieven__achter::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--indigo); mix-blend-mode: color; }
.tarieven__achter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--indigo) 0%, rgb(32 31 84 / .86) 22%, rgb(32 31 84 / .8) 72%, var(--indigo) 100%);
}

.tarieven__container { display: flex; flex-direction: column; align-items: center; gap: 60px; max-width: var(--container); margin: 0 auto; }
.tarieven__kop { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tarieven__titel {
  max-width: 800px;
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.tarieven__titel .woord { display: inline-block; }
.tarieven__tekst { max-width: 600px; font-size: 18px; line-height: 1.5; color: var(--wit-zacht); text-wrap: balance; }

.tarieven__kaarten { display: flex; justify-content: center; align-items: stretch; gap: 20px; width: 100%; padding-top: 12px; }
.pakket-plek { position: relative; display: flex; flex: 0 1 440px; min-width: 0; }
.pakket {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px;
  border-radius: 20px;
}
.pakket--licht { background: var(--kaart); color: var(--indigo); }
.pakket--donker { background: var(--indigo-diep); box-shadow: inset 0 0 0 1px rgb(195 193 230 / .2); }
.pakket__top { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border-radius: 12px; }
.pakket--licht .pakket__top { background: var(--wit); }
.pakket--donker .pakket__top { background: var(--indigo-kaart); }
.pakket__naam {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  text-transform: uppercase;
}
.pakket__naam svg { flex: none; width: 28px; height: 28px; color: var(--accent); }
.pakket--licht .pakket__naam svg { color: var(--goud); }
.pakket__tekst { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--wit-zacht); }
.pakket--licht .pakket__tekst { color: var(--indigo-zacht); }
.pakket__prijs { display: flex; align-items: baseline; gap: 8px; margin: 28px 0 26px; }
.pakket__prijs span { font-family: var(--font-kop); font-weight: 700; font-size: 80px; line-height: .9; letter-spacing: -.03em; }
.pakket__prijs small { font-size: 16px; color: var(--wit-zacht); }
.pakket--licht .pakket__prijs small { color: var(--indigo-zacht); }

.pakket__lijst { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 20px 20px; list-style: none; }
.pakket__lijst li { display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.45; }
.pakket__lijst svg { flex: none; width: 16px; height: 16px; }
.pakket__lijst circle { fill: rgb(247 246 252 / .14); }
.pakket__lijst path { fill: none; stroke: var(--wit); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pakket--licht .pakket__lijst circle { fill: rgb(32 31 84 / .1); }
.pakket--licht .pakket__lijst path { stroke: var(--indigo); }
.pakket__lijst .is-uitgelicht { color: var(--accent); }
.pakket__lijst .is-uitgelicht circle { fill: var(--accent); }
.pakket__lijst .is-uitgelicht path { stroke: var(--indigo); }

/* Gouden tab die achter de uitgelichte kaart uitsteekt */
.pakket__label {
  position: absolute;
  top: -38px;
  right: 20px;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 16px 46px 12px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--indigo);
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pakket__label svg { width: 17px; height: 17px; }

.tarieven__noot { max-width: 560px; margin-top: -20px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--wit-zacht); }

/* ---------- FAQ (één vraag tegelijk open) ---------- */

.faq { padding: 120px 20px; background: var(--kaart); color: var(--indigo); }
.faq__container { display: flex; flex-direction: column; gap: 60px; max-width: var(--container); margin: 0 auto; }
.faq__titel {
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
}
.faq__titel .woord { display: inline-block; }
.faq__lijst { display: flex; flex-direction: column; gap: 20px; }
.faq__item { overflow: hidden; border: 1px solid transparent; border-radius: 12px; background: var(--kaart); }
.faq__item.is-open { background: var(--wit); }
.faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border: 0;
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  text-transform: uppercase;
  transition: background-color .2s ease;
}
.faq__vraag:hover { background: rgb(188 150 79 / .14); }
.faq__vraag:focus-visible { outline: 2px solid var(--indigo); outline-offset: -4px; }
.faq__vraag span { flex: 1; max-width: 900px; }
.faq__vraag svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .3s ease-in-out;
}
.faq__item.is-open .faq__vraag svg { transform: rotate(45deg); }
.faq__antwoord { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease-in-out, opacity .3s ease-in-out; }
.faq__item.is-open .faq__antwoord { grid-template-rows: 1fr; opacity: 1; }
.faq__antwoord-binnen { min-height: 0; overflow: hidden; }
.faq__antwoord p { max-width: 900px; padding: 0 20px 20px; font-size: 20px; line-height: 1.5; letter-spacing: -.01em; color: var(--indigo-zacht); }

/* ---------- Afsluitende oproep (CTA) ---------- */

.cta { padding: 120px 20px; background: var(--kaart); color: var(--indigo); }
.cta__vlak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 20px;
  border-radius: 30px;
  background: var(--goud);
}
.cta__tekst { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 600px; text-align: center; }
.cta__titel {
  margin: 0;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 74px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.cta__titel .woord { display: inline-block; }
.cta__zin { font-size: 18px; line-height: 1.5; }

/* Knopvariant op de gouden CTA: donkere pil, bij hover glijdt het donker achter de pijl weg */
.knop--indigo .knop__pil { --rand: transparent; background: var(--wit); color: var(--wit); }
.knop--indigo .knop__vulling { background: var(--indigo); }
.knop--indigo:hover .knop__pil { --rand: transparent; color: var(--indigo); }

/* ---------- Footer ---------- */

.voet { padding: 80px 0 0; overflow: hidden; background: var(--indigo); color: var(--wit); }
.voet__container {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1196px;
  margin: 0 auto;
  padding: 0 20px;
}
.voet__kolommen { display: flex; align-items: flex-start; justify-content: space-between; }
.voet__kolom { display: flex; flex-direction: column; gap: 20px; }
.voet__contact { width: 170px; }
.voet__contact .logo img { height: 37px; }
.voet__regel { display: flex; align-items: flex-start; gap: 10px; }
.voet__regel svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.voet__regel > div { display: flex; flex-direction: column; gap: 10px; }
.voet__label { font-size: 16px; line-height: 1.5; color: var(--wit-zacht); }
.voet__gegeven { font-family: var(--font-kop); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--wit); }
.voet__gegeven:hover { color: var(--accent); }
.voet__kop { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.5; text-transform: uppercase; }
.voet__lijst { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 0; list-style: none; }
.voet__lijst .menulink { color: var(--wit-zacht); }

.voet__bericht { width: 285px; }
.voet__formulier { display: flex; flex-direction: column; gap: 32px; }
.voet__formulier label { display: block; }
.voet__formulier input,
.voet__formulier textarea {
  display: block;
  width: 100%;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid rgb(247 246 252 / .35);
  border-radius: 0;
  background: transparent;
  color: var(--wit);
  font: 400 16px/1.2 var(--font-tekst);
  resize: none;
}
.voet__formulier input { height: 40px; padding-top: 10px; }
.voet__formulier textarea { height: 70px; padding-top: 0; }
.voet__formulier ::placeholder { color: var(--wit-zacht); opacity: 1; }
.voet__formulier input:focus-visible,
.voet__formulier textarea:focus-visible { outline: none; border-bottom-color: var(--accent); }
.voet__knop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  overflow: hidden;
  border: 0;
  background: var(--accent);
  color: var(--indigo);
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
}
.voet__vulling { position: absolute; top: 0; bottom: 0; left: -4px; width: 1%; background: var(--wit); transition: width .6s var(--veer); }
.voet__knop span:last-child { position: relative; z-index: 1; }
.voet__knop:hover .voet__vulling { width: 102%; }
.voet__knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.voet__melding:empty { display: none; }
.voet__melding { margin-top: -16px; font-size: 14px; line-height: 1.4; color: var(--fout-op-donker, #FFA090); }

.voet__onder { display: flex; flex-direction: column; gap: 24px; }
.voet__lijn { height: 4px; background: linear-gradient(90deg, rgb(247 246 252 / 0), rgb(247 246 252 / .55) 50%, rgb(247 246 252 / 0)) center / 100% 1px no-repeat; }
.voet__copy { font-size: 16px; line-height: 1.5; text-align: center; }
.voet__grijs { color: var(--wit-zacht); }
.voet__copy a { color: var(--accent); }
.voet__copy a:hover { color: var(--accent); }

/* Groot merkwoord onderaan: schaalt mee met de breedte en loopt weg in de onderrand */
.voet__woord {
  height: .764em;
  overflow: hidden;
  font-weight: 700;
  font-size: calc(100cqw / 4.3);
  line-height: .8;
  text-align: center;
  white-space: nowrap;
}
.voet__woord span {
  background-image: linear-gradient(0deg, rgb(188 150 79 / 0) 35%, rgb(188 150 79 / .4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Terug naar boven (zwevend, linksonder) ---------- */

.naar-boven {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--accent);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: background-color .4s var(--veer);
}
.naar-boven svg {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--indigo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .4s var(--veer);
}
.naar-boven .naar-boven__hover { stroke: var(--wit); transform: translateY(40px); }
.naar-boven:hover { background: var(--indigo); }
.naar-boven:hover svg { transform: translateY(-34px); }
.naar-boven:hover .naar-boven__hover { transform: translateY(0); }
.naar-boven:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Taalkeuze (zwevend, rechtsonder) ---------- */

.taalkeuze {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: var(--wit);
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
}
.taalkeuze button {
  padding: 7px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--indigo);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.taalkeuze button[aria-pressed="true"] { background: var(--indigo); color: var(--wit); }
.taalkeuze button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Verschijnen (zoals Framer: veer 1 s, oplopende vertraging) ---------- */

.js .menu[data-verschijn-menu] { transform: translate(-50%, -150px); }
.js .menu.is-zichtbaar { transform: translate(-50%, 0); transition: transform 1s var(--veer) 1s; }

.js [data-verschijn] { opacity: 0; transform: translateY(30px); }
.js [data-verschijn].is-zichtbaar {
  opacity: 1;
  transform: none;
  transition: opacity var(--duur, 1s) var(--veer), transform var(--duur, 1s) var(--veer);
  transition-delay: var(--vertraging, 0s);
}

.js [data-woorden] .woord { opacity: .001; transform: translateY(20px); }
.js [data-woorden].is-zichtbaar .woord {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--tekst-curve), transform .7s var(--tekst-curve);
  transition-delay: var(--woord-vertraging, .3s);
}

.alles-zichtbaar .menu[data-verschijn-menu] { transform: translate(-50%, 0) !important; }
.alles-zichtbaar [data-verschijn],
.alles-zichtbaar [data-woorden] .woord { opacity: 1 !important; transform: none !important; }

/* ---------- Tablet (810–1439) ---------- */

@media (max-width: 1439.98px) {
  :root { --h1: 64px; --kolom: 515px; }
  .menu { max-width: none; }
  .menu__balk { padding: 30px 20px; }
  .menu__links { gap: 18px; }
  .hero__teken { width: 190px; height: 245px; }

  .trainingen { padding: 100px 20px; }
  .trainingen__container { gap: 48px; }
  .trainingen__titel { font-size: 48px; }
  .kaart__titel { font-size: 24px; }

  .over { padding: 100px 20px; }
  .over__container { flex-direction: column; gap: 32px; }
  .over__beeld { flex: none; width: 605px; max-width: 100%; }
  .over__inhoud { flex: none; width: 100%; max-width: none; }
  .over__titel { font-size: 48px; }
  .over__getal { font-size: 140px; }

  .traject { padding: 100px 20px; }
  .traject__container { gap: 48px; }
  .traject__kop { flex-direction: column; align-items: flex-start; gap: 32px; }
  .traject__titel { flex: none; width: 100%; max-width: none; font-size: 48px; }
  .traject__tekst { flex: none; width: 100%; }
  .dienst { border-radius: 12px; }
  .dienst__binnen { padding: 8px; }
  .dienst__titel { font-size: 24px; }

  .reviews { padding: 100px 20px; }
  .reviews__container { gap: 48px; }
  .reviews__titel { font-size: 48px; }
  .pijlknop--vorige { left: -16px; }
  .pijlknop--volgende { right: -16px; }

  .tarieven { padding: 100px 20px 120px; }
  .tarieven__container { gap: 48px; }
  .tarieven__titel { font-size: 48px; }
  .tarieven__noot { margin-top: -12px; }
  .pakket__naam { font-size: 24px; }
  .pakket__prijs span { font-size: 72px; }

  .faq { padding: 100px 20px; }
  .faq__container { gap: 48px; }
  .faq__titel { font-size: 48px; }
  .faq__vraag { font-size: 20px; }
  .faq__antwoord p { font-size: 18px; }

  .cta { padding: 100px 20px; }
  .cta__titel { font-size: 64px; }
}

/* Schuif: twee reviews naast elkaar; prijskaarten iets compacter */
@media (max-width: 1199.98px) {
  .schuif { --zichtbaar: 2; }
}
@media (max-width: 1023.98px) {
  .pakket__top { padding: 26px; }
  .pakket .knop { font-size: 16px; }
}

/* ---------- Telefoon (< 810) ---------- */

@media (max-width: 809.98px) {
  :root { --h1: 54px; --kolom: 100%; }

  .menu__balk { flex-wrap: wrap; height: auto; min-height: 100px; padding: 30px 16px; }
  .logo { height: 36px; }
  .logo img { height: 30px; }
  .hamburger { display: block; }

  .knop--rand { --pijl: 40px; --recht-x: 32px; --schuin-x: 22px; --schuin-y: -44px; font-size: 16px; line-height: 1.5; }
  .knop--rand .knop__pil { height: 40px; padding: 8px 12px; }

  /* Uitklapmenu: lijst onder de balk, achtergrond groeit van boven naar beneden */
  .menu__lijst {
    order: 3;
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .4s var(--veer), visibility 0s linear .4s;
  }
  .menu__lijst-binnen { min-height: 0; overflow: hidden; }
  .menu__links { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 80px; }
  .menu.is-open .menu__lijst { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--veer), visibility 0s; }

  .menu__waas {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(32 31 84 / .75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .4s var(--veer);
  }
  .menu.is-open .menu__waas { clip-path: inset(0); }

  .hero { padding: 20px 16px; }
  .hero__waas { background: linear-gradient(180deg, rgb(32 31 84 / .6) 0%, rgb(32 31 84 / .75) 50%, rgb(32 31 84 / .85) 100%); }
  .hero__rij { flex-direction: column; align-items: center; width: 100%; }
  .hero__inhoud { align-self: stretch; }
  .hero__teken { width: 91px; height: 118px; }

  .hero__contact { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
  .hero__adres br { display: none; }
  .hero__scheiding { width: 90px; height: 1px; }

  .trainingen { padding: 80px 16px; }
  .trainingen__titel { font-size: 40px; }
  .trainingen__kaarten { flex-direction: column; gap: 32px; }
  .kaart { flex: none; width: 100%; }

  .over { padding: 80px 16px; }
  .over__beeld { width: 100%; }
  .over__titel { font-size: 40px; }
  .over__getal { font-size: 110px; }

  .traject { padding: 80px 16px; }
  .traject__titel { font-size: 40px; }
  .traject__kaarten { flex-direction: column; }
  .traject__plek { flex: none; }

  .reviews { padding: 80px 16px; }
  .reviews__titel { font-size: 40px; }
  .schuif {
    --zichtbaar: 1;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    grid-template-areas: "venster venster venster" "vorige stippen volgende";
    row-gap: 22px;
  }
  .schuif__venster { grid-area: venster; }
  .pijlknop { position: static; margin: 0; }
  .pijlknop--vorige { grid-area: vorige; }
  .pijlknop--volgende { grid-area: volgende; }
  .stippen { grid-area: stippen; margin: 0; align-self: center; }
  .review { min-height: 360px; padding: 28px; }
  .review__tekst { font-size: 18px; }
  .review__score { font-size: 104px; }

  .tarieven { padding: 80px 16px 100px; }
  .tarieven__titel { font-size: 40px; }
  .tarieven__kaarten { flex-direction: column; align-items: center; gap: 56px; }
  .pakket-plek { flex: none; width: 100%; max-width: 440px; }
  .pakket-plek--uitgelicht { order: -1; }
  .pakket__top { padding: 22px; }
  .pakket .knop--vol .knop__pil { padding: 14px 18px; }
  .pakket__prijs span { font-size: 68px; }
  .pakket__lijst { padding: 24px 12px 12px; }

  .faq { padding: 80px 16px; }
  .faq__titel { font-size: 40px; }

  .cta { padding: 80px 16px; }
  .cta__vlak { padding: 60px 20px; border-radius: 20px; }
  .cta__titel { font-size: 48px; }

  .voet { padding-top: 60px; }
  .voet__container { padding: 0 16px; }
  .voet__kolommen { flex-direction: column; gap: 34px; }
  .voet__bericht { width: 100%; }
}

/* Smalle telefoons (360 px): logo en knoppen blijven naast elkaar passen */
@media (max-width: 379.98px) {
  .menu__acties { gap: 10px; }
  .pakket .knop { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .menu[data-verschijn-menu], .js .menu.is-zichtbaar { transform: translate(-50%, 0); transition: none; }
  .js [data-verschijn], .js [data-woorden] .woord { opacity: 1; transform: none; transition: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}