/* Datenschutz, Impressum, Barrierefreiheit (M360-4723).
 *
 * Long-form legal text on the relaunched design. Two constraints that make it
 * unlike the marketing pages:
 *
 * 1. It is read, not scanned. Measure is capped near 70 characters and the
 *    line height is the wider of the two body settings.
 * 2. The wording is reviewed against the law it cites, so the conversion
 *    restyled the page and changed no text. Nothing here may hide, truncate or
 *    collapse content by default.
 *
 * The wrapper is `.legal-content`, not `.content`, because the relaunch has its
 * own `.hero` and container classes and the two sets would otherwise collide.
 */

.legal-content {
  max-width: min(74ch, 100%);
  font-size: var(--fs-body);
  line-height: var(--lh-body-wide);
  color: var(--c-text-muted);
}

.legal-section { margin-bottom: clamp(40px, 5vw, 64px); }

.legal-content h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  color: var(--c-text);
  margin: 0 0 var(--sp-2);
}
.legal-content h3 {
  font-size: 18px;
  font-weight: var(--fw-semi);
  color: var(--c-text);
  margin: var(--sp-4) 0 var(--sp-1);
}
.legal-content p { margin: 0 0 var(--sp-2); }
.legal-content ul,
.legal-content ol { margin: 0 0 var(--sp-2); padding-left: 1.3em; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--c-cyan-text); text-decoration: underline; }
/* --c-text, not --c-navy: navy is the *dark section* colour, and in dark mode it
   becomes the page background — a hovered link went to 1.02:1 against the page
   it sits on, which is invisible rather than merely low (M360-4726). --c-text
   inverts with the theme and gives 15.7:1 light, 15.1:1 dark. */
.legal-content a:hover { color: var(--c-text); }
.legal-content strong { color: var(--c-text); font-weight: var(--fw-semi); }

/* Definition lists carry the address and register details: label left, value
   right, collapsing to stacked pairs when the column gets narrow. */
.legal-grid {
  display: grid;
  /* The label column gives way before the value does. A media query below
     stacks the pairs entirely, but the floor still has to be collapsible. */
  grid-template-columns: minmax(min(140px, 40%), 200px) 1fr;
  gap: 10px var(--sp-3);
  margin: 0 0 var(--sp-3);
}
.legal-grid dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-label);
  padding-top: 3px;
}
.legal-grid dd { margin: 0; color: var(--c-text); }
@media (max-width: 560px) {
  .legal-grid { grid-template-columns: 1fr; gap: 4px var(--sp-2); }
  .legal-grid dd { margin-bottom: var(--sp-2); }
}

/* Table of contents on the privacy notice. */
.legal-toc {
  background: var(--c-surface-alt);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.legal-toc h2 { font-size: 15px; margin-bottom: var(--sp-2); }
.legal-toc ol { margin: 0; padding-left: 1.2em; }
.legal-toc li { margin-bottom: 5px; }
.legal-toc a { text-decoration: none; color: var(--c-cyan-label); }
.legal-toc a:hover { text-decoration: underline; }
/* The header is sticky, so a jump inside the notice must clear it. */
.legal-section[id] { scroll-margin-top: 110px; }

/* Data tables. They scroll inside their own box rather than widening the page —
   a legal table that forces the body to scroll sideways is unreadable on a
   phone, and these list every field CONNECT stores. */
.legal-table-wrap {
  overflow-x: auto;
  /* Without this the box takes its content's width instead of its parent's and
     the table pushes the whole document sideways on a phone — the scroll box
     only works if it is allowed to be narrower than what it holds. */
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin: 0 0 var(--sp-3);
}
.legal-table { border-collapse: collapse; width: 100%; font-size: var(--fs-body-sm); }
.legal-table th,
.legal-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--c-border); }
.legal-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-label);
  background: var(--c-surface-alt);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td.num {
  font-family: var(--font-mono);
  color: var(--c-label);
  width: 1%;
  white-space: nowrap;
}

/* The verbatim consent declaration, quoted from the live consent_versions row
   so the notice cannot drift from what the checkout actually shows. Set apart
   because it is a quotation, not our prose. */
.consent-box {
  background: var(--c-surface-alt);
  border-left: 3px solid var(--c-cyan);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-3);
  margin: 0 0 var(--sp-3);
}
.consent-quote {
  font-style: italic;
  color: var(--c-text);
  white-space: pre-line;
  margin: 0;
}

.stand-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-label);
}

/* Fixed width for the running-number column, so the first column does not
   stretch to fit its heading and squeeze the text beside it. A class rather
   than an inline width: the CSP drops style attributes without a word. */
.legal-table__num-col { width: 80px; }
.legal-table__num-col--wide { width: 120px; }

/* A legal page opens straight into its text — there is no hero image or card
   to separate the title from, so the marketing section rhythm would just leave
   a hole. */
.page-hero--legal { padding-bottom: var(--sp-6); }
.legal-body { padding-top: 0; }