/* ==========================================================================
   LEGAL — Rechtstextseiten
   Bewusst schmal und ruhig gesetzt: hier zählt Lesbarkeit, nicht Wirkung.
   ========================================================================== */

.legal { padding-top: clamp(24px, 4vw, 48px); }

.legal h1 { margin: 12px 0 40px; }

.legal h2 {
  margin: 48px 0 14px;
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
  line-height: 1.24;
  letter-spacing: -.025em;
  font-weight: 600;
}

.legal h3 {
  margin: 32px 0 10px;
  font-size: 1.125rem;
  font-weight: 650;
}

.legal p {
  max-width: 68ch;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 27px;
  color: #3a4043;
}

.legal a {
  color: var(--color-petrol);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.legal a:hover { color: var(--color-ink); }

.legal__list {
  max-width: 68ch;
  margin: 0 0 20px;
  padding-inline-start: 22px;
  list-style: disc;
  font-size: 16px;
  line-height: 27px;
  color: #3a4043;
}
.legal__list li { margin-bottom: 10px; }

/* Hinweisblock für offene Punkte — bewusst auffällig, damit er nicht
   versehentlich mit online geht. */
.legal__todo {
  max-width: 68ch;
  margin-bottom: 44px;
  padding: 22px 24px;
  border-radius: var(--radius-control);
  border: 2px solid var(--color-coral);
  background: rgba(255, 90, 54, .07);
  font-size: 15px;
  line-height: 25px;
}
.legal__todo strong { display: block; margin-bottom: 6px; }

/* Platzhalter im Fließtext */
.legal__gap {
  display: inline;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--color-lime);
  color: var(--color-ink);
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.legal .caption { max-width: 68ch; }

.site-footer .footer__bottom a {
  color: rgba(252, 252, 250, .78);
  transition: color var(--dur-hover) var(--ease-out);
}
.site-footer .footer__bottom a:hover { color: var(--color-lime); }