/* Impressum + Datenschutz. Builds on site.css (tokens, nav, footer, type). */

.legal-nav { display: flex; justify-content: space-between; }
.legal-back { color: var(--muted); text-decoration: none; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .legal-back:hover { color: var(--text); } }

.legal { max-width: 920px; padding-top: clamp(120px, 14vw, 168px); padding-bottom: clamp(80px, 10vw, 128px); }
.legal-title { font-size: clamp(44px, 7vw, 96px); letter-spacing: -0.055em; line-height: .95; hyphens: manual; }
.legal-lead { margin-top: 24px; max-width: 52ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); }

.legal-facts { margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--line); }
.legal-facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.legal-facts dt { color: var(--dim); padding-top: 3px; }
.legal-facts dd { font-size: 18px; }

.legal-block { display: grid; grid-template-columns: 240px 1fr; gap: 16px 48px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.legal-facts + .legal-block, .legal-lead + .legal-block { margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--line); }
.legal-block h2 { grid-column: 1; grid-row: 1; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.legal-block > :not(h2) { grid-column: 2; max-width: 62ch; color: var(--muted); }
.legal-block a, .legal-facts a { color: var(--text); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.legal-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.legal-list li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--line); }
.legal-list li::before { content: "+"; position: absolute; left: 2px; font-family: var(--font-mono); color: var(--accent); }
.legal-date { margin-top: 32px; color: var(--dim); }

.footer a[aria-current="page"] { color: var(--text); }

@media (hover: hover) and (pointer: fine) {
  .legal-block a:hover, .legal-facts a:hover { text-decoration-color: var(--text); }
}
@media (max-width: 760px) {
  .legal-block { grid-template-columns: 1fr; gap: 12px; }
  .legal-block h2 { grid-row: auto; }
  .legal-block > :not(h2) { grid-column: 1; }
  .legal-facts div { grid-template-columns: 1fr; gap: 2px; }
}