.nav-btn{
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* sizing */
  padding: 11px 20px;        /* iets meer lucht voor Knewave */
  min-height: 40px;
  border-radius: 12px;

  /* font */
  font-family: var(--font-heading); /* Knewave */
  font-weight: 400;                 /* Knewave is display font */
  font-size: 0.95rem;
  line-height: 1;

  /* colors */
  background-color: #ECD57B;
  color: #000;
  text-decoration: none;
  letter-spacing: 0.05em;           /* Knewave heeft baat bij dit */

  /* interaction */
  border: 0;
  cursor: pointer;
  user-select: none;

  /* animation */
  transform: translateZ(0);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

/* hover */
.nav-btn:hover{
  background-color: #d6be61;          /* iets warmer */
  box-shadow: 0 10px 18px rgba(0,0,0,0.22);
  transform: translateY(-1px) scale(1.035);
  color:#fffcd9;
}

/* active */
.nav-btn:active{
  transform: translateY(0) scale(0.985);
  box-shadow: 0 6px 12px rgba(0,0,0,0.18);
}

/* keyboard focus */
.nav-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
}