/* --------------------- Inleiding --------------------- */

.inleiding__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.inleiding-tekst {
  font-family: var(--font-body, 'BricolageGrotesque'), sans-serif;
  font-weight: 300;
  font-size: 1.3em;
  line-height: 1.3em;
  text-transform: none;
  color: var(--black);
  margin: 0;
}

.inleiding__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  gap: 10px;
}

.inleiding__nav-title {
  font-family: var(--font-body, 'BricolageGrotesque'), sans-serif;
  font-weight: 500;
  color: var(--black);
  margin: 0;
}

.inleiding__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: column;
}

.inleiding__nav-link {
  align-self: flex-start;            /* lijn is net zo breed als de tekst */
  padding-bottom: 3px;
  font-family: var(--font-body, 'BricolageGrotesque'), sans-serif;
  font-weight: 400;
  font-size: 0.95em;
  text-decoration: none;
  color: var(--black);
  /* Onderlijning als achtergrond, zodat ze kan animeren */
  background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat;
}

/* Hover: de lijn schuift weg naar rechts en tekent zich opnieuw van links naar rechts */
.inleiding__nav-link:hover,
.inleiding__nav-link:focus-visible {
  animation: inleiding-underline .6s cubic-bezier(.22, 1, .36, 1);
}

@keyframes inleiding-underline {
  0%   { background-size: 100% 1px; background-position: 100% 100%; }
  49%  { background-size: 0 1px;    background-position: 100% 100%; }
  50%  { background-size: 0 1px;    background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* Items die als knop zijn ingesteld (Brand → Knoppen) */
.inleiding__nav-btn {
  align-self: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .inleiding__nav-link:hover,
  .inleiding__nav-link:focus-visible { animation: none; }
}

@media screen and (max-width: 900px) {
}