.preis__inner { text-align: center; }

.price {
  display: flex;
  flex-direction: column;
  padding: var(--sp-20);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.price--early { border-color: var(--c-coral); }

.price__amount {
  font-family: var(--ff-serif);
  font-size: var(--fs-price);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--c-body);
}

.price__rate {
  font-family: var(--ff-serif);
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: var(--c-body);
}

.price__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--c-green);
}

/* Trennlinie zwischen Gesamtpreis und Ratenzahlung. */
.price__note:first-of-type::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-block: var(--sp-15);
  background-color: var(--c-sage);
}

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

.bonus {
  display: flex;
  flex-direction: column;
  gap: var(--sp-15);
  align-self: center;
  width: 540px;
  max-width: 100%;
  padding: var(--sp-20);
  border: 1px solid var(--c-sage-bright);
  border-radius: var(--r-md);
  background-color: rgb(168 200 160 / 0.08);
  text-align: left;
}

.bonus__label { color: var(--c-coral-text); }

.bonus__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
}

.bonus__text { color: var(--c-body); }