/* ================================
   LEGAL / TEXT PAGES (privacy, impressum, …)
   Simple readable prose under the fixed header.
================================ */
.legal {
  /* Reserve room for the header and native navigation without JavaScript. */
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-lg);
  padding-inline: var(--space-lg);
  /* let long words / URLs wrap instead of overflowing the screen */
  overflow-wrap: break-word;
  word-break: break-word;
}

.legal__inner {
  width: 100%;
}

.legal h1 {
  font-size: var(--text-5xl);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}

.legal h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.legal h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.legal p {
  color: var(--color-blue);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.legal ul {
  list-style: disc;
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--color-blue);
}

.legal li {
  line-height: 1.8;
  margin-bottom: var(--space-xs);
}

.legal a {
  color: var(--color-blue);
  text-decoration: underline;
}

.legal a:hover {
  color: var(--color-yellow);
}

@media (max-width: 900px) {
  .legal {
    padding-inline: var(--space-md);
  }

  /* long German words (e.g. "Datenschutzerklärung") must not overflow */
  .legal h1 {
    font-size: var(--text-3xl);
    hyphens: auto;
  }

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

body:has([data-site-fallback]:not([hidden])) .legal {
  padding-block-start: calc(var(--header-height) + var(--space-lg) + var(--space-sm));
}