sub, sup {
  font-size: 60%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.36em;
}

sup {
  top: -0.5em;
}

.sbb-text-xxs,
.sbb-text-xs,
.sbb-text-s,
.sbb-text-m,
.sbb-text-l,
.sbb-text-xl {
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
}

.sbb-text-xxs {
  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
}

.sbb-text-xs {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
}

.sbb-text-s {
  --sbb-text-font-size: var(--sbb-text-font-size-s);
}

.sbb-text-m {
  --sbb-text-font-size: var(--sbb-text-font-size-m);
}

.sbb-text-l {
  --sbb-text-font-size: var(--sbb-text-font-size-l);
}

.sbb-text-xl {
  --sbb-text-font-size: var(--sbb-text-font-size-xl);
}

.sbb-text--bold {
  font-weight: bold;
}

.sbb-legend {
  --sbb-text-font-size: var(--sbb-text-font-size-xs);
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
  padding: 0;
  color: var(--sbb-color-granite);
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
}