/* Studio Lune — Behandelingen (paginaspecifieke layout)
   Opbouw: kop als inhoudsopgave → zes hoofdstukken met elk een eigen compositie → kleuradvies (bordeaux) → slot. */

.page-behandelingen {
  /* afstand van de wrap tot de schermrand, voor beelden die tot de rand doorlopen */
  --bleed: calc((100vw - min(100vw - 2 * var(--marge), var(--max))) / 2);
}

/* ---------- Kleine bouwstenen ---------- */
.bh-label {
  display: block;
  margin-bottom: .8rem;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--tekst-zacht);
}

/* Beelden: elke .media op deze pagina krijgt een vaste verhouding, het beeld vult hem */
.bh-ch .media img, .bh-head__preview .media img { position: absolute; inset: 0; }

/* Prijsregels: de notitie (duur) als tweede regel onder de naam */
.page-behandelingen .menu-list { border-top: 1px solid var(--haarlijn); }
.page-behandelingen .menu-list__row { row-gap: .1rem; padding-block: .75rem; }
.page-behandelingen .menu-list__row dd.menu-list__note {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: .875rem;
  font-weight: 400;
  white-space: normal;
  font-variant-numeric: normal;
  color: var(--tekst-zacht);
}

/* ---------- 1. Kop + beeld-inhoudsopgave ---------- */
.bh-head { padding-block: clamp(1.75rem, 4vw, 3.5rem) var(--ritme-s); }
.bh-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.1rem, .2rem + 10vw, 5rem);
  line-height: .86;
  letter-spacing: -.035em;
  color: var(--espresso);
}
/* 320px (WCAG-reflow): het lange woord past dan net binnen de kantlijnen */
@media (max-width: 359px) { .bh-head__title { font-size: 2.75rem; } }
.bh-head__lead { margin-top: 1.5rem; max-width: 31em; }
.bh-head__actions { margin-top: 1.75rem; }

.bh-index { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.bh-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem .75rem;
  border-top: 1px solid var(--espresso);
  padding-top: 1rem;
}
.bh-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "media media" "nr name" ". meta";
  column-gap: .5rem;
  color: var(--espresso);
  text-decoration: none;
}
.bh-index__media { grid-area: media; aspect-ratio: 4 / 5; margin-bottom: .75rem; }
.bh-index__media img { position: absolute; inset: 0; }
.bh-index__nr {
  grid-area: nr;
  padding-top: .35rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--walnoot);
}
.bh-index__name {
  grid-area: name;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  line-height: 1.1;
  transition: color .25s var(--ease);
}
.bh-index__meta { grid-area: meta; margin-top: .25rem; font-size: .8125rem; color: var(--walnoot); font-variant-numeric: tabular-nums; }
.bh-index__link:hover .bh-index__name, .bh-index__link:focus-visible .bh-index__name { font-style: italic; color: var(--bordeaux); }

@media (min-width: 640px) {
  .bh-index__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
}
@media (min-width: 900px) {
  .bh-head__top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .bh-head__title { grid-column: 1 / 9; font-size: clamp(4.5rem, .2rem + 7.4vw, 8rem); }
  .bh-head__intro { grid-column: 9 / 13; padding-bottom: .4rem; }
  .bh-head__lead { margin-top: 0; }
}
@media (min-width: 1100px) {
  .bh-index__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* zachte trap: elke tweede tegel iets lager, zoals een contactvel */
  .bh-index__list li:nth-child(even) { margin-top: 2.5rem; }
}

/* Strook met hoofdstukken: alleen onder 900px, sticky onder de header */
.bh-chapters { position: relative; }
.bh-strip {
  position: sticky;
  top: calc(var(--header-h) + 1px);
  z-index: 30;
  background: var(--creme);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}
.no-js .bh-strip { top: 0; }
.bh-strip .bh-strip__list {
  display: flex;
  margin: 0;
  padding: 0 var(--marge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.bh-strip__list::-webkit-scrollbar { display: none; }
.bh-strip__list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 .8rem;
  white-space: nowrap;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--espresso);
  text-decoration: none;
}
.bh-strip__list li:first-child a { padding-left: 0; }
.bh-strip__list a::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: 0;
  height: 2px;
  background: var(--bordeaux);
  transform: scaleX(0);
  transition: transform .3s var(--ease);
}
.bh-strip__list li:first-child a::after { left: 0; }
.bh-strip__list a:hover::after, .bh-strip__list a.is-active::after { transform: scaleX(1); }
.bh-strip__list a.is-active { color: var(--bordeaux); }
@media (min-width: 900px) {
  .bh-strip { display: none; }
}
@media (max-width: 899px) {
  /* ruimte voor de sticky strook bij een sprong naar een hoofdstuk */
  .page-behandelingen .bh-ch { scroll-margin-top: calc(3rem - var(--ritme-m) + 1rem); }
}

/* Inklapknop voor prijzen en tips (wordt door js/behandelingen.js toegevoegd) */
.bh-fold { display: none; }
@media (max-width: 899px) {
  .bh-fold {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 1.75rem;
    padding: .75rem 0;
    border: 0;
    border-top: 1px solid var(--tekst);
    border-bottom: 1px solid var(--haarlijn);
    background: none;
    color: var(--tekst);
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 600;
    text-align: left;
  }
  .bh-fold__icon {
    position: relative;
    flex: none;
    width: .8rem;
    height: .8rem;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
    transition: transform .3s var(--ease);
  }
  .bh-fold[aria-expanded="true"] .bh-fold__icon { transform: rotate(45deg); }
  .bh-ch .is-foldable.is-folded { display: none; }
  .bh-fold + .is-foldable { margin-top: 1.25rem; }
}

/* ---------- 2. Hoofdstukken: gedeeld ---------- */
.bh-ch {
  padding-block: var(--ritme-m);
  /* bij een sprong naar het anker niet eerst een lege band tonen */
  scroll-margin-top: calc(var(--ritme-m) * -1 + 1.25rem);
}
.bh-ch__nr {
  margin-bottom: .55rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.1rem, 2rem + 3.6vw, 5.75rem);
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--tekst-zacht);
}
.bh-ch__deck {
  margin-top: .65rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-3);
  line-height: 1.2;
  color: var(--tekst-zacht);
}

/* Specificatie: duur, prijs, stylist */
.bh-spec {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: .5rem clamp(1.4rem, 3.5vw, 3rem);
  margin-top: 1.75rem;
  padding-block: .85rem 1rem;
  border-top: 1px solid var(--tekst);
  border-bottom: 1px solid var(--haarlijn);
}
.bh-spec dt {
  font-size: .7rem;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.bh-spec dd {
  margin-top: .2rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--tekst);
}
.bh-spec a { color: inherit; text-decoration-color: var(--haarlijn); }
.bh-spec a:hover { color: var(--accent); text-decoration-color: currentColor; }

.bh-ch__lead {
  margin-top: 1.5rem;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--tekst);
}
.bh-ch__lead--large {
  max-width: 24em;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
  line-height: 1.28;
  letter-spacing: -.005em;
}
.bh-ch__more { margin-top: 1.25rem; max-width: 34em; color: var(--tekst-zacht); }

/* Een zin van de stylist zelf (geen klantreview) */
.bh-quote { margin: 2.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--haarlijn); max-width: 24em; }
.bh-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2.1rem);
  line-height: 1.22;
  color: var(--accent);
}
.bh-quote blockquote { margin: 0; }
.bh-quote figcaption { margin-top: .9rem; font-size: var(--fs-small); color: var(--tekst-zacht); }

.bh-know, .bh-prices, .bh-faq { margin-top: 2.25rem; }
.bh-know ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--haarlijn); }
.bh-know li {
  position: relative;
  padding: .7rem 0 .7rem 1.6rem;
  border-bottom: 1px solid var(--haarlijn);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--tekst);
}
.bh-know li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: .85rem;
  height: 1px;
  background: var(--tekst-zacht);
}
.bh-know a, .bh-ch__more a { color: inherit; text-decoration-color: var(--accent); }
.bh-know a:hover { color: var(--accent); }

.bh-ch__actions { margin-top: 2rem; }
.bh-faq .accordion__summary { font-size: 1.2rem; }
.bh-faq .bh-label { margin-bottom: .4rem; }

.bh-ch__fig { margin: 2rem 0 0; }

@media (min-width: 900px) {
  .bh-ch__grid, .bh-ch__headrow, .bh-ch__cols {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .bh-ch__fig { margin: 0; }
}

/* ---------- 2.1 Knippen dames: groot staand beeld links, tekst rechts ---------- */
.bh-ch--a .bh-ch__fig { margin-inline: calc(var(--marge) * -1); }
.bh-ch--a .bh-ch__fig .media { aspect-ratio: 5 / 4; }
.bh-ch--a .bh-ch__fig img { object-position: 50% 30%; }
.bh-ch--a .bh-ch__fig .caption { padding-inline: var(--marge); }
@media (min-width: 900px) {
  .bh-ch--a .bh-ch__fig {
    grid-column: 1 / 7;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    margin-inline: 0;
  }
  .bh-ch--a .bh-ch__fig .media { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 7rem); }
  .bh-ch--a .bh-ch__fig .caption { padding-inline: 0; }
  .bh-ch--a .bh-ch__head { grid-column: 8 / 13; grid-row: 1; padding-top: 1rem; }
  .bh-ch--a .bh-ch__body { grid-column: 8 / 13; grid-row: 2; }
}

/* ---------- 2.2 Knippen heren: brede tekst, beeld tot de rechterrand, informatieband ---------- */
.bh-ch--b .bh-ch__fig .media { aspect-ratio: 3 / 2; }
.bh-ch--b .bh-ch__fig img { object-position: 55% 50%; }
.bh-band { margin-top: 2.5rem; }
@media (min-width: 900px) {
  .bh-ch--b .bh-ch__head { grid-column: 1 / 7; grid-row: 1; }
  .bh-ch--b .bh-ch__intro { grid-column: 1 / 7; grid-row: 2; }
  .bh-ch--b .bh-ch__fig {
    grid-column: 8 / 13;
    grid-row: 1 / span 2;
    align-self: start;
    margin-right: calc(var(--bleed) * -1);
    margin-top: 1rem;
  }
  .bh-band {
    grid-column: 1 / 13;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    margin-top: var(--ritme-s);
  }
  .bh-band > * { margin-top: 0; }
  .bh-band .bh-know { grid-column: 1 / 5; }
  .bh-band .bh-prices { grid-column: 5 / 9; }
  .bh-band__end { grid-column: 9 / 13; }
  .bh-band__end .bh-ch__actions { margin-top: 2.1rem; }
}

/* ---------- 2.3 Kleuren: espresso, beeld over de volle breedte ---------- */
.bh-bleed { margin-top: clamp(2rem, 4vw, 3.5rem); }
.bh-bleed .media { aspect-ratio: 4 / 3; }
.bh-bleed img { object-position: 50% 35%; }
.bh-bleed .caption { margin-top: .9rem; }
.bh-ch__cols { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .bh-ch__headrow { align-items: end; }
  .bh-ch__headrow .bh-ch__head { grid-column: 1 / 8; }
  .bh-ch__headrow .bh-spec { grid-column: 8 / 13; justify-self: end; margin-top: 0; }
  .bh-bleed .media { aspect-ratio: 21 / 9; max-height: 80svh; }
  .bh-ch--c .bh-ch__text { grid-column: 1 / 7; }
  .bh-ch--c .bh-ch__side { grid-column: 8 / 13; }
  .bh-ch--c .bh-ch__side > :first-child { margin-top: .4rem; }
  .bh-ch--c .bh-ch__lead--large { margin-top: 0; }
  .bh-ch--c .bh-quote { margin-top: var(--step); }
}

/* ---------- 2.4 Highlights: smalle kolom, staand beeld met verticaal bijschrift ---------- */
.bh-ch--d .bh-ch__fig { width: 84%; margin-left: auto; }
.bh-ch--d .bh-ch__fig .media { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .bh-ch--d .bh-ch__head { grid-column: 1 / 6; grid-row: 1; }
  .bh-ch--d .bh-ch__body { grid-column: 1 / 6; grid-row: 2; }
  .bh-ch--d .bh-ch__fig {
    grid-column: 7 / 13;
    grid-row: 1 / span 2;
    align-self: start;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    width: auto;
    margin: var(--step) 0 0;
  }
  .bh-ch--d .bh-ch__fig .media { flex: 1; max-height: calc(100svh - var(--header-h) - 5rem); }
  .bh-ch--d .bh-ch__fig .caption {
    flex: none;
    margin: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }
}

/* Vergelijking highlights / balayage */
.bh-compare {
  margin-top: var(--ritme-m);
  padding-top: 1.25rem;
  border-top: 1px solid var(--tekst);
}
.bh-compare__head { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.bh-compare__head .h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 400; }
.bh-compare__head p { max-width: 30em; color: var(--tekst-zacht); }
.bh-compare__scroll { overflow-x: auto; }
.bh-compare__table { width: 100%; min-width: 19rem; font-size: var(--fs-small); line-height: 1.45; }
.bh-compare__table th, .bh-compare__table td {
  padding: .8rem .9rem .8rem 0;
  border-bottom: 1px solid var(--haarlijn);
  text-align: left;
  vertical-align: top;
}
.bh-compare__table thead th, .bh-compare__table thead td {
  padding-bottom: .5rem;
  border-bottom-color: var(--tekst);
}
.bh-compare__table thead th {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
}
.bh-compare__table thead a { color: inherit; text-decoration-color: var(--haarlijn); }
.bh-compare__table thead a:hover { color: var(--accent); text-decoration-color: currentColor; }
.bh-compare__table tbody th {
  width: 24%;
  padding-top: 1rem;
  font-size: .68rem;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.bh-compare__table tbody tr:last-child td { font-weight: 600; }
@media (min-width: 900px) {
  .bh-compare { grid-column: 1 / 13; grid-row: 3; }
  .bh-compare__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: baseline; margin-bottom: 2rem; }
  .bh-compare__table { font-size: 1rem; }
  .bh-compare__table th, .bh-compare__table td { padding: 1rem 1.5rem 1rem 0; }
  .bh-compare__table tbody th { width: 18%; padding-top: 1.25rem; font-size: var(--fs-label); letter-spacing: .16em; }
  .bh-compare__table tbody td { width: 41%; }
}

/* ---------- 2.5 Balayage: reeks van dezelfde klant, tijdens en na ---------- */
.bh-series {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem .75rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.bh-series__fig { margin: 0; }
.bh-series__fig--during { grid-column: 1; grid-row: 1; }
.bh-series__fig--after { grid-column: 2; grid-row: 1; margin-top: 2.75rem; }
.bh-series__text { grid-column: 1 / -1; grid-row: 2; }
.bh-series .media { aspect-ratio: 2 / 3; }
.bh-series .caption i {
  display: block;
  margin-bottom: .2rem;
  font-size: 1.7em;
  line-height: 1;
}
.bh-series__text .bh-ch__lead { margin-top: 0; }
.bh-ch__cols--split { margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .bh-series {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .bh-series__fig--during { grid-column: 1 / 5; }
  .bh-series__text { grid-column: 5 / 9; grid-row: 1; padding: var(--step) clamp(0rem, 1.2vw, 1.25rem) 0; }
  .bh-series__fig--after { grid-column: 9 / 13; margin-top: calc(var(--step) * 2); }
  .bh-series .caption i { font-size: 2em; }
  .bh-ch__cols--split { margin-top: var(--ritme-s); }
  .bh-ch__cols--split .bh-know { grid-column: 1 / 6; margin-top: 0; }
  .bh-ch__cols--split .bh-faq { grid-column: 7 / 13; margin-top: 0; }
}

/* ---------- 2.6 Föhnen en styling: kop over de breedte, twee beelden naast elkaar ---------- */
.bh-ch--f .bh-ch__intro { margin-top: 1.5rem; }
.bh-pair {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  gap: .75rem;
  align-items: end;
  margin-top: 2rem;
}
.bh-pair__fig { margin: 0; }
.bh-pair .media { aspect-ratio: 4 / 5; }
.bh-pair__fig--b { margin-bottom: 2.5rem; }
@media (min-width: 900px) {
  .bh-ch--f .bh-ch__head { grid-column: 1 / 7; grid-row: 1; }
  .bh-ch--f .bh-ch__intro { grid-column: 7 / 13; grid-row: 1; align-self: end; margin-top: 0; }
  .bh-pair {
    grid-column: 1 / 9;
    grid-row: 2;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    margin-top: var(--step);
  }
  .bh-pair__fig--a { grid-column: 1 / 6; }
  .bh-pair__fig--b { grid-column: 6 / 9; margin-bottom: var(--step); }
  .bh-ch--f .bh-ch__body { grid-column: 9 / 13; grid-row: 2; margin-top: var(--step); }
  .bh-ch--f .bh-spec { margin-top: 0; }
}
/* Smalle tekstkolom (9 / 13) tussen 900 en 1200px: de stylist-cel schuift naar een tweede rij */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .bh-ch--f .bh-spec { grid-template-columns: repeat(2, max-content); }
}

/* ---------- 3. Twijfel je? (het enige bordeaux vlak) ---------- */
.bh-advies {
  --tekst: var(--papier);
  --tekst-zacht: var(--zand);
  --accent: var(--zand);
  --haarlijn: rgba(251, 247, 241, .28);
  --focus: var(--papier);
  padding-block: var(--ritme-m);
  background: var(--bordeaux);
  color: var(--papier);
}
.bh-advies ::selection { background: var(--papier); color: var(--bordeaux); }
.bh-advies__num {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 2rem;
  font-family: var(--serif);
  color: var(--zand);
}
.bh-advies__digits {
  font-style: italic;
  font-size: clamp(7rem, 3.5rem + 15vw, 17rem);
  line-height: .74;
  letter-spacing: -.05em;
}
.bh-advies__unit {
  padding-bottom: .4rem;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bh-advies .h2 { margin-top: 1rem; }
.bh-advies__text { margin-top: 1.25rem; max-width: 32em; font-size: var(--fs-lead); }
.bh-advies .actions { margin-top: 2rem; }
.bh-advies .btn--light { --btn-bg-h: var(--espresso); --btn-fg-h: var(--papier); --btn-bd-h: var(--espresso); }
.bh-advies .link-arrow { color: var(--papier); text-decoration-color: rgba(251, 247, 241, .5); }
.bh-advies .link-arrow:hover { color: var(--zand); text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .bh-advies__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  .bh-advies__num { grid-column: 1 / 6; flex-direction: column; align-items: flex-start; gap: 1.5rem; margin: 0; }
  .bh-advies__unit { padding: 0 0 0 .5rem; }
  .bh-advies__copy { grid-column: 7 / 13; }
}

/* ---------- 4. Slot: afspraak en lees verder ---------- */
.bh-next__text { margin-top: 1.25rem; max-width: 28em; font-size: var(--fs-lead); }
.bh-next .actions { margin-top: 1.75rem; }
.bh-next__extra {
  margin-top: 2.5rem;
  padding-top: 1rem;
  max-width: 30em;
  border-top: 1px solid var(--haarlijn);
  font-size: var(--fs-small);
  color: var(--tekst-zacht);
}
.bh-next__extra .bh-label { display: inline; margin: 0 .5rem 0 0; color: var(--tekst); }
.bh-next__nav { margin-top: var(--ritme-s); }
.bh-next__nav ul { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--haarlijn); }
.bh-next__nav a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name arrow" "desc arrow";
  column-gap: 1rem;
  padding-block: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--haarlijn);
  color: var(--tekst);
  text-decoration: none;
}
.bh-next__name {
  grid-area: name;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  transition: color .3s var(--ease);
}
.bh-next__nav li:first-child .bh-next__name { font-size: clamp(2.8rem, 1.6rem + 4.6vw, 6rem); }
.bh-next__desc { grid-area: desc; margin-top: .4rem; font-size: var(--fs-small); color: var(--tekst-zacht); }
.bh-next__nav .i-arrow { grid-area: arrow; align-self: center; width: 1.5rem; height: 1.5rem; color: var(--tekst-zacht); }
.bh-next__nav a:hover .bh-next__name, .bh-next__nav a:focus-visible .bh-next__name { font-style: italic; color: var(--accent); }
.bh-next__nav a:hover .i-arrow, .bh-next__nav a:focus-visible .i-arrow { transform: translateX(4px); color: var(--accent); }
@media (min-width: 900px) {
  .bh-next__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .bh-next__copy { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + 2rem); }
  .bh-next__nav { grid-column: 7 / 13; margin-top: .5rem; }
}

@media (forced-colors: active) {
  .bh-advies { border-block: 1px solid CanvasText; }
  .bh-know li::before { background: CanvasText; }
}