.legal-page {
  padding: 80px 0 120px;
}

.legal-page h1 {
  font-size: var(--font-size-h2);
  letter-spacing: var(--letter-spacing-h2);
  margin-bottom: 40px;
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  padding-top: 48px;
  border-top: 2px solid var(--color-heading);
}

.legal-aside {
  position: sticky;
  top: 32px;
  align-self: start;
}

.legal-back { margin-top: 64px; }

.legal-anschrift {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-heading);
  line-height: 1.3;
  color: var(--color-heading);
}

.legal-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.legal-blocks h2 {
  font-size: var(--font-size-h4);
  letter-spacing: 0;
  margin-bottom: 10px;
}
.legal-blocks p + p { margin-top: 12px; }
.legal-blocks a { overflow-wrap: anywhere; }

.legal-toc ul { list-style: none; }
.legal-toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0 8px 18px;
  border-left: 2px solid var(--color-border);
  color: var(--color-body);
  font-weight: 500;
  line-height: 1.35;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.legal-toc a:hover { color: var(--color-brand-main); border-left-color: var(--color-brand-main); }
.legal-toc a:active { color: var(--color-brand-darker); }

.legal-text { max-width: 40em; }

.legal-text h2 {
  font-size: var(--font-size-h3);
  letter-spacing: 0;
  margin: 72px 0 20px;
  padding-top: 32px;
  border-top: 2px solid var(--color-border);
  scroll-margin-top: 32px;
}
.legal-text h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-text h3 { font-size: 22px; margin: 40px 0 10px; }
.legal-text h4 { font-size: var(--font-size-body); margin: 24px 0 6px; }
.legal-text p,
.legal-text ul { margin-bottom: 16px; }
.legal-text ul { padding-left: 1.25em; }
.legal-text li + li { margin-top: 6px; }
.legal-text p,
.legal-text li { overflow-wrap: break-word; }

@media (max-width: 1024px) {
  .legal-page { padding: 56px 0 80px; }
  .legal-blocks { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 767px) {
  .legal-page { padding: 40px 0 60px; }
  .legal-page h1 { margin-bottom: 28px; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 32px; }
  .legal-aside { position: static; }
  .legal-text h2 { margin-top: 56px; padding-top: 28px; }
  .legal-back { margin-top: 48px; }

  .legal-text p,
  .legal-text li,
  .legal-blocks p { hyphens: auto; }
}