.trainer {
  display: flex;
  flex-direction: column;
}

.trainer__portrait {
  padding: var(--sp-50);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background-color: var(--c-sage);
}

.trainer__portrait img {
  width: 100%;
  height: auto;
}

.trainer__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-15);
  padding: var(--sp-20);
  border: 1px solid var(--c-sage);
  background-color: var(--c-white);
}

.trainer__name {
  font-size: var(--fs-name);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}

/* Der negative Abstand zieht die Rollenzeile an den Namen heran und hebt einen
   Teil des 15px-Abstands wieder auf — so steht es im Original. */
.trainer__role {
  margin-top: -10px;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-normal);
  color: var(--c-green);
}

.trainer__bio {
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
}