/* Thinking Media — Impressum & Datenschutz: schlichte Leseseiten im Designsystem */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--gutter) 4rem;
}
.legal-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center;
  padding-bottom: 1.25rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-soft);
  font: 500 0.8rem var(--mono); letter-spacing: 0.06em;
}
.legal .legal-nav a { color: var(--muted); text-decoration: none; }
.legal .legal-nav a:hover, .legal .legal-nav a[aria-current="page"] { color: var(--signal); }
.legal .legal-nav .brand { color: var(--text); letter-spacing: 0.18em; margin-right: auto; }

.legal h1 { font: 600 clamp(2rem, 5vw, 3rem)/1 var(--display); letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.legal h2 { font: 600 1.25rem/1.25 var(--display); margin: 2.5rem 0 0.75rem; }
.legal h3 { font: 600 1rem/1.3 var(--sans); margin: 1.5rem 0 0.4rem; }
.legal p, .legal li { color: var(--text); max-width: 68ch; }
.legal p + p { margin-top: 0.75rem; }
.legal ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.legal li + li { margin-top: 0.35rem; }
.legal a { color: var(--signal); }
.legal address { font-style: normal; line-height: 1.7; }
.legal code { font: 0.88em var(--mono); color: var(--signal); }
.legal .muted { color: var(--muted); }

/* Platzhalter deutlich markieren, damit nichts unbemerkt online geht */
.ph {
  padding: 0.05em 0.35em;
  border: 1px dashed var(--energy);
  border-radius: 3px;
  background: rgba(var(--energy-rgb), 0.08);
  font: 500 0.92em var(--mono);
}
.legal-note {
  margin-bottom: 2rem; padding: 1rem 1.2rem;
  border: 1px solid rgba(var(--energy-rgb), 0.45); border-radius: var(--radius);
  background: rgba(var(--energy-rgb), 0.06);
  font-size: 0.92rem;
}
.legal-en { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.9rem; }