/* clairr · Layout für Rechtstexte (Impressum, Datenschutz).
   Ruhige, gut lesbare Typografie auf Basis der globalen Marken-Tokens. */

.legal {
  padding: clamp(120px, 16vh, 200px) 0 96px;
}

.legal__head {
  max-width: 60ch;
  margin-bottom: clamp(48px, 7vh, 80px);
}

.legal__title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--offwhite);
  margin: 12px 0 0;
}

.legal__intro {
  color: var(--faint);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-top: 20px;
  max-width: 54ch;
}

.legal__body {
  max-width: 68ch;
  display: grid;
  gap: clamp(32px, 5vh, 52px);
}

.legal__block h2 {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--offwhite);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.legal__block h3 {
  font-size: 1rem;
  color: var(--offwhite);
  margin: 22px 0 8px;
}

.legal__block p,
.legal__block address {
  color: var(--muted, var(--faint));
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 10px;
}

.legal__block address {
  color: var(--offwhite);
}

.legal__block a {
  color: var(--aube, currentColor);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition: border-color .2s ease;
}
.legal__block a:hover { border-bottom-color: currentColor; }

/* Auszufüllende Felder — bewusst sichtbar, damit nichts vergessen wird.
   Nach dem Ausfüllen: Klasse und Klammern entfernen. */
.fill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--aube, #0B6EF0) 16%, transparent);
  color: var(--offwhite);
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 0.86em;
  letter-spacing: -0.01em;
}

.legal__meta {
  margin-top: clamp(48px, 7vh, 80px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.9rem;
}