/* ── LEGAL PAGES (Impressum / Datenschutz) ───────────────────────────────
   Layout + typography for the static legal pages. Loaded AFTER the shared
   modules (tokens, base, nav, footer, responsive) so it can override them.
   The site nav is designed for the dark hero (light text on transparent bg);
   legal pages have a light background, so we force the solid "scrolled" look
   permanently to keep the nav legible. */

body.legal {
  background: var(--cream);
}

/* Always-solid, legible nav on light pages */
body.legal #nav {
  padding: 10px 0;
  background: rgba(12, 27, 46, .96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(238, 132, 32, .12);
}

body.legal #nav .nav-logo-img {
  height: 40px;
}

/* ── Content ── */
.legal-main {
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(130px, 16vw, 180px) var(--pad) clamp(80px, 12vw, 130px);
}

.legal-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.legal-eyebrow-rule {
  width: 36px;
  height: 1px;
  background: var(--accent);
}

.legal-eyebrow-text {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}

.legal-main h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text-1);
  margin-bottom: 14px;
}

.legal-intro {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 52px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--cream-2);
}

.legal-main h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-1);
  margin: 48px 0 16px;
}

.legal-main h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-1);
  margin: 32px 0 10px;
}

.legal-main p,
.legal-main li {
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-2);
}

.legal-main p {
  margin-bottom: 18px;
}

.legal-main ul,
.legal-main ol {
  margin: 0 0 18px 1.2em;
}

.legal-main li {
  margin-bottom: 8px;
}

.legal-main a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s;
}

.legal-main a:hover {
  color: var(--accent-l);
}

.legal-main strong {
  color: var(--text-1);
  font-weight: 600;
}

/* First section heading shouldn't double-space after the intro divider */
.legal-intro + h2 {
  margin-top: 0;
}

/* Back link */
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 56px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
}

.legal-back:hover {
  color: var(--accent);
}