/* Text pages (imprint, privacy…): the text sits on white at the left, kept
   to a readable width, so the pyonen shows beside it */
.text {
  max-width: 36em;
  margin: var(--fs-base);
  padding: var(--fs-base);
  background: var(--color-background);
  line-height: 1.4;
  /* Long German words and URLs break instead of overflowing small screens */
  hyphens: auto;
  overflow-wrap: break-word;
}

.text__title {
  margin: 0 0 1em;
  font-size: var(--fs-header);
  font-weight: 700;
}

.text__consent {
  margin: 2em 0 0;
}

/* The body is the layout field: rows of columns holding text and image
   blocks; the text blocks' HTML carries no classes. Columns stack on small screens
   and sit side by side on wider ones, spanning their share of 12 */
.text__row {
  display: grid;
  gap: var(--fs-base);
}

.text__row + .text__row {
  margin-top: 2em;
}

.text__column > :first-child {
  margin-top: 0;
}

.text__column > :last-child {
  margin-bottom: 0;
}

.text__body h2 {
  margin: 2em 0 0.5em;
}

.text__body h3 {
  margin: 1.5em 0 0.5em;
}

/* Headings and bold text set like the footer's column titles: Simplex at
   the text's size, given weight by its stroke */
.text__body h2,
.text__body h3,
.text__body strong,
.text__body b {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 400;
  -webkit-text-stroke: 1.5px currentColor;
}

.text__body p,
.text__body ul,
.text__body ol {
  margin: 0 0 1em;
}

.text__body ul {
  padding-left: 1.25em;
  list-style: disc;
}

.text__body ol {
  padding-left: 1.25em;
}

.text__body li p {
  margin: 0;
}

.text__body li + li {
  margin-top: 0.25em;
}

@media (min-width: 900px) {
  .text__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .text__column {
    grid-column: span var(--span);
  }
}