/* Rechtsseiten (Impressum, Datenschutz): Schattenbild steht fest, der Text scrollt darüber */

.legal {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: transparent;
}

.legal::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--color-sand) url('../assets/palm-shadow.jpg') 70% 50% / cover no-repeat;
}

.legal__brand {
  padding-top: calc(47 * var(--px));
  color: inherit;
  text-decoration: none;
}

.legal__main {
  max-width: 46em;
  margin: 0 auto;
  padding: calc(160 * var(--px)) 16px 0;
  font-size: max(16px, 18 * var(--px));
  line-height: 1.75;
}

.legal__main .headline {
  margin: calc(24 * var(--px)) 0 calc(72 * var(--px));
  text-align: center;
}

.legal__main .eyebrow {
  color: var(--color-brand);
  text-align: center;
}

.legal__main h2 {
  margin: 2.5em 0 .5em;
  font-weight: 400;
  font-size: max(20px, 28 * var(--px));
  line-height: 1.2;
  color: var(--color-brand);
}

.legal__main h3 {
  margin: 1.75em 0 .25em;
  font: 700 1em / 1.5 var(--font-sans);
}

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

.legal__main a { color: var(--color-brand); }

.legal__note {
  padding: 1em 1.25em;
  border-left: 2px solid var(--color-brand);
  background: rgb(255 255 255 / .35);
  font: .875em / 1.6 var(--font-sans);
}

.legal .footer { padding-top: calc(200 * var(--px)); }

@media (max-width: 767px) {
  .legal__brand { padding-top: 32px; }
  .legal__main { padding-top: 64px; }
  .legal__main .headline { margin: 16px 0 40px; }
  .legal .footer { padding-top: 96px; }
}