/* ════════════════════════════════════════════════════════
 * assets/legal.css
 *
 * Shared shell for the standalone legal pages (impressum,
 * privacy, cookies, terms, dpa, subprocessors). Mirrors the
 * nav + editorial-folio pattern of about.html so the legal
 * surface reads as the same house. Tokens come from
 * design-system.css (the authoritative product palette).
 * No colours outside the brand set; motion on state change
 * only (CSS transitions, reduced-motion honoured by the UA).
 * ════════════════════════════════════════════════════════ */

/* ── Site nav (canonical, matches about / index) ── */
.page { max-width: var(--container-edge); margin: 0 auto; padding: 0 var(--space-7); }
.nav {
  display: flex; align-items: center; height: 64px; gap: var(--space-7);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-base), background var(--motion-base);
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 243, 238, 0);
}
.nav.is-stuck {
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--rule);
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.nav__brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--green); position: relative; box-shadow: 0 1px 3px rgba(15,74,40,0.2);
}
.nav__brand-mark::after {
  content: ''; position: absolute; inset: 5px;
  border: 1.5px solid var(--moss); border-radius: 2px;
  border-bottom-color: transparent; border-right-color: transparent;
}
.nav__links { display: flex; gap: var(--space-6); margin-left: var(--space-7); align-items: center; }
.nav__links a { font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: color var(--motion-fast); }
.nav__links a:hover { color: var(--ink); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.nav__signin { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.nav__signin:hover { color: var(--ink); }
.nav__cta {
  height: 32px; padding: 0 var(--space-4); display: inline-flex; align-items: center;
  background: var(--ink); color: #ffffff; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.nav__cta:hover { background: var(--green); color: #ffffff; }
@media (max-width: 820px) { .nav__links { display: none; } .page { padding: 0 var(--space-5); } }
@media (max-width: 600px) { .nav__cta { display: none; } }

/* ── Editorial folio with sticky margin column ── */
.folio {
  max-width: 1080px; margin: 0 auto;
  padding: var(--space-10) var(--space-9) var(--space-10);
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-9);
}
@media (max-width: 1100px) {
  .folio { grid-template-columns: 160px 1fr; gap: var(--space-7); padding: var(--space-9) var(--space-7); }
}
@media (max-width: 820px) {
  .folio { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-7) var(--space-5); }
}
.folio__margin {
  position: sticky; top: 80px; align-self: start;
  display: flex; flex-direction: column; gap: var(--space-3);
}
@media (max-width: 820px) { .folio__margin { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-4); align-items: center; } }
.folio__num {
  font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-tr);
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
.folio__rule { width: 24px; height: 1px; background: var(--ink-3); }
@media (max-width: 820px) { .folio__rule { display: none; } }
.folio__label {
  font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-tr);
  text-transform: uppercase; font-weight: 600; color: var(--ink-3);
}
.folio__meta {
  font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.6;
  padding-top: var(--space-3); border-top: var(--border-2); margin-top: var(--space-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) { .folio__meta { border-top: none; padding-top: 0; margin-top: 0; } }
.folio__body { min-width: 0; }

/* ── Hero ── */
.lede h1 {
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; color: var(--ink);
}
.lede p {
  margin-top: var(--space-5); font-size: var(--t-body-size);
  color: var(--ink-2); max-width: 600px; line-height: 1.65;
}

/* ── Draft / counsel-review banner (terms, dpa) ── */
.legal-banner {
  margin-top: var(--space-6); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--alert, #B23A2E); border-radius: var(--radius-sm);
  background: rgba(178, 58, 46, 0.06);
  display: flex; align-items: baseline; gap: var(--space-3); max-width: 640px;
}
.legal-banner__tag {
  font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-tr);
  text-transform: uppercase; font-weight: 600; color: var(--alert, #B23A2E);
  white-space: nowrap;
}
.legal-banner__text { font-size: var(--t-body-sm-size); color: var(--ink-2); line-height: 1.55; }

/* ── Interim notice callout (privacy, cookies) ── */
.callout {
  margin: var(--space-6) 0; padding: var(--space-5) var(--space-6);
  border: var(--border); border-left: 3px solid var(--moss);
  border-radius: var(--radius-sm); background: rgba(151, 188, 98, 0.06); max-width: 640px;
}
.callout__h { font-size: var(--t-body-sm-size); font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); }
.callout p { font-size: var(--t-body-sm-size); color: var(--ink-2); line-height: 1.6; }

/* iubenda / embed insertion container — collapses until filled */
.legal-embed:empty { display: none; }

/* ── Sections ── */
.section { padding: var(--space-8) 0; border-top: var(--border-2); }
.section:first-of-type { border-top: none; padding-top: var(--space-9); }
.section h2 {
  font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-tr);
  text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin-bottom: var(--space-3);
}
.section h3 {
  font-size: var(--t-body-size); font-weight: 600; color: var(--ink);
  margin-top: var(--space-5); margin-bottom: var(--space-2);
}
.section p { font-size: var(--t-body-size); color: var(--ink-2); line-height: 1.65; max-width: 640px; }
.section p + p { margin-top: var(--space-3); }
.section p a, .section li a {
  color: var(--ink); border-bottom: 1px solid var(--rule);
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.section p a:hover, .section li a:hover { color: var(--green); border-bottom-color: var(--green); }

/* Entity / value block — values resolved from i18n via assets/legal.js */
.entity { font-size: var(--t-body-size); line-height: 1.75; color: var(--ink); max-width: 640px; }
.entity .lead { font-weight: 600; }

/* Bulleted summary list */
.tightlist { margin-top: var(--space-4); display: grid; gap: var(--space-3); max-width: 640px; padding: 0; }
.tightlist li {
  list-style: none; padding-left: var(--space-4); position: relative;
  color: var(--ink-2); font-size: var(--t-body-sm-size); line-height: 1.6;
}
.tightlist li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 1px; background: var(--moss);
}

/* Data table (subprocessors) */
.legal-table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); font-size: var(--t-body-sm-size); }
.legal-table th, .legal-table td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-2); vertical-align: top; line-height: 1.5;
}
.legal-table th {
  font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-tr);
  text-transform: uppercase; font-weight: 600; color: var(--ink-3);
  border-bottom: var(--border);
}
.legal-table td { color: var(--ink-2); }
.legal-table td:first-child { color: var(--ink); font-weight: 500; }
.legal-table .flag { color: var(--alert, #B23A2E); font-weight: 500; }
.legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .legal-table { min-width: 640px; } }

/* ── Legal-cluster footer ── */
footer {
  padding: var(--space-7) var(--space-9); border-top: var(--border);
  font-size: var(--t-caption-size); color: var(--ink-3);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
footer .foot-legal { display: flex; gap: var(--space-4); flex-wrap: wrap; }
footer .foot-legal a { color: var(--ink-3); transition: color var(--motion-fast); }
footer .foot-legal a:hover { color: var(--ink); }
@media (max-width: 820px) { footer { padding: var(--space-5); } }