/* ==========================================================================
   legal.css — privacy policy pages (privacy.html, datenschutz.html). One
   white reading panel on the --surface-alt band, same look as the cards.
   ========================================================================== */

.legal {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-12);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-wrap: break-word;
}

.legal h2 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--green-800);
  margin: var(--space-10) 0 var(--space-3);
}
.legal h2:first-child { margin-top: 0; }

.legal p,
.legal ul,
.legal address { margin: 0 0 var(--space-4); }

.legal ul { padding-left: var(--space-5); list-style: disc; }
.legal li { margin-bottom: var(--space-1); }
.legal li::marker { color: var(--kit-green); }

.legal address {
  padding-left: var(--space-4);
  border-left: 2px solid var(--green-200);
  line-height: 1.6;
}

.legal a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--green-200);
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .legal a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
}

.legal code {
  font-size: .9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--green-50);
}

.legal__meta {
  max-width: none;
  margin-top: var(--space-10) !important;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Wave divider sits on --surface-alt, as on the other inner pages */
.page-legal .wave-divider--footer { background: var(--surface-alt); }

@media (max-width: 639px) {
  .legal { padding: var(--space-6) var(--space-5); }
  .legal h2 { margin-top: var(--space-8); }
}