body {
  --header-color: var(--color-primary);
  --header-color-hover: var(--color-accent);
  --logo-header: var(--brand-logo-header-light);
  overflow-x: hidden;
}

.legal-layout {
  padding-top: calc(20vh - var(--header-height));
  padding-bottom: 96px;
  overflow-x: hidden;
}

.legal-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.legal-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.legal-content * {
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * The legal pages (imprint/privacy) often contain plain text. Set the
 * default text colour to the global primary colour so that all
 * paragraphs, headings and lists inherit `var(--color-primary)` by
 * default. Without this rule, some browsers may fall back to the
 * user-agent colour or an undefined value if no colour is specified.
 */
.legal-content {
  color: var(--color-primary);
}

.legal-content a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-all;
}

@media (max-width: 767px) {
  .legal-layout {
    padding-bottom: 64px;
  }
  
  .legal-container {
    padding-inline: clamp(1rem, 4vw, var(--pad-x));
  }
  
  .legal-content {
    word-break: break-word;
    hyphens: auto;
  }
}