/* Legal pages (Impressum, Datenschutz) — readable long-form prose.
   Loaded after styles.css, reuses its tokens. */

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(90px, 12vh, 140px) var(--pad) clamp(60px, 8vh, 100px);
}

.legal__kicker {
  font: 600 11px/1 var(--font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.legal__title {
  margin: 0 0 10px;
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(30px, 5.5vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.legal__meta {
  margin: 0 0 clamp(28px, 4vw, 44px);
  font: 400 13px/1.5 var(--font-mono, ui-monospace, Menlo, monospace);
  color: var(--muted, rgba(20, 20, 20, 0.6));
}

.legal h2 {
  margin: clamp(34px, 5vw, 52px) 0 12px;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  scroll-margin-top: 90px;
}

.legal h3 {
  margin: 26px 0 8px;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 700;
}

.legal p,
.legal li {
  font-size: clamp(14.5px, 1.7vw, 16px);
  line-height: 1.68;
  text-wrap: pretty;
}

.legal p { margin: 0 0 14px; }

.legal ul,
.legal ol { margin: 0 0 16px; padding-left: 1.3em; }
.legal li { margin-bottom: 7px; }

.legal a { color: inherit; text-underline-offset: 3px; }
.legal a:hover { color: var(--accent-ink, #0d7c8c); }

/* Definition-style blocks for "who processes what" */
.legal dl {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
}
.legal dt {
  font: 600 11px/1.4 var(--font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, rgba(20, 20, 20, 0.6));
  margin-top: 12px;
}
.legal dt:first-child { margin-top: 0; }
.legal dd { margin: 3px 0 0; font-size: clamp(14px, 1.6vw, 15.5px); line-height: 1.6; }

/* Draft banner — remove once the texts have been reviewed. */
.legal__draft {
  margin: 0 0 clamp(26px, 4vw, 38px);
  padding: 14px 16px;
  border: 1px solid rgba(200, 120, 0, 0.4);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.09);
  font-size: 14px;
  line-height: 1.6;
}
.legal__draft b { font-weight: 700; }

/* Placeholders that still need real data */
.legal mark {
  background: rgba(255, 196, 0, 0.28);
  color: inherit;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}

.legal__toc {
  margin: 0 0 clamp(30px, 4vw, 44px);
  padding: 16px 18px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 12px;
}
.legal__toc p {
  margin: 0 0 8px;
  font: 600 11px/1 var(--font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted, rgba(20, 20, 20, 0.6));
}
.legal__toc ol { margin: 0; padding-left: 1.2em; }
.legal__toc li { margin-bottom: 4px; font-size: 14.5px; }

.legal__back {
  display: inline-block;
  margin-top: clamp(34px, 5vw, 52px);
  font: 600 12px/1 var(--font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink, #0d7c8c);
  text-decoration: none;
}
.legal__back:hover { text-decoration: underline; }