/* Legal pages: /privacy and /impressum.  P5.
   Loaded only by those two, after site.css and sections.css. Nothing in here
   selects an element that exists on the five design pages, so it cannot move a
   pixel of the handoff. Verified by the render diff rather than by assertion.

   WHY A THIRD COLUMN. The site has no long-form prose component, so one had to
   be designed. A single centred measure was the obvious shape and it is the
   wrong one here: at 1440 the content column is ~940px, a readable measure is
   ~66ch, and the difference is 400px of empty paper down the right of every
   section. That is the defect the vault names as "no text block ends mid-sheet
   without a partner" - the fix it prescribes is to put something in the row,
   not to widen the type.

   What belongs there turned out to be the thing that makes this page worth
   reading: each claim's MEASUREMENT, in the margin beside the claim. A privacy
   notice that says "we load nothing from third parties" is a promise; one that
   says it beside "18 requests on this page, 18 to this origin, measured
   2026-08-24" is checkable. So the pair rule is satisfied by content that had
   to exist anyway, which is the cheap way to satisfy it.

   NO .reveal ON THESE PAGES, deliberately. Every other page hides its content
   until site.js adds .landed, and P3 built an inline .js class plus an onerror
   on every script tag so that a failure to load leaves the page visible. That
   machinery works, and a legal page should still not depend on it: this is the
   page a reader reaches when something has already gone wrong, and it must
   render complete with no JavaScript at all, by construction rather than by
   fallback. */

.legal{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:clamp(120px,14vh,164px) var(--pad) clamp(56px,7vw,96px)}

/* ── head ─────────────────────────────────────────── */
.legal-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:clamp(28px,3.6vw,48px);border-bottom:1px solid var(--rule)}
.legal-head h1{font-size:clamp(34px,5vw,64px);letter-spacing:-.042em;max-width:18ch}
.legal-head .subline{max-width:56ch}
.legal-updated{font:400 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-70)}

/* ── body: sticky index + sections ────────────────── */
.legal-body{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(28px,4.4vw,64px);padding-top:clamp(34px,4.4vw,56px)}
/* The index is a nav landmark, not decoration: it is how a reader finds the
   one clause they came for without reading the page. */
.legal-idx{position:sticky;top:104px;align-self:start;display:flex;flex-direction:column;gap:10px}
.legal-idx-h{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);margin-bottom:4px}
.legal-idx a{font-size:13.5px;line-height:1.35;color:var(--ink-70);position:relative}
.legal-idx a:hover{color:var(--accent)}
/* The links sit on a 10px gap at ~18px tall, so the pitch is ~28px and a 44px
   box would overlap its neighbours - the same geometry problem the carousel
   dots had. The box grows to the full pitch instead, so the column is
   contiguous with no dead space, and the measured number goes in the register
   rather than being rounded up. */
.legal-idx a::after{content:"";position:absolute;left:0;right:0;top:50%;height:28px;transform:translateY(-50%)}

.legal-secs{display:flex;flex-direction:column;gap:clamp(34px,4.4vw,58px);min-width:0}
.lsec{display:grid;grid-template-columns:minmax(0,66ch) minmax(0,1fr);gap:clamp(20px,2.6vw,44px);align-items:start;scroll-margin-top:104px}
.lsec-copy{display:flex;flex-direction:column;gap:13px;min-width:0}
.lsec h2{font-size:clamp(20px,2.1vw,29px);letter-spacing:-.032em}
.lsec p{font-size:15.5px;line-height:1.62;color:var(--ink-70)}
.lsec strong{font-weight:600;color:var(--ink)}
.lsec a:not(.consent-link){color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-35)}
.lsec a:not(.consent-link):hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ── the margin note: one measured fact per claim ─── */
.lnote{display:flex;flex-direction:column;gap:9px;padding:15px 17px;border:1px solid var(--rule);border-radius:var(--r-in);background:var(--wash)}
.lnote-h{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70)}
.lnote dl{display:flex;flex-direction:column;gap:8px;margin:0}
.lnote dt{font:400 11px/1.3 var(--mono);letter-spacing:.05em;color:var(--ink-70)}
.lnote dd{margin:0;font-size:13px;line-height:1.45;color:var(--ink)}
.lnote dd strong{font-weight:600}

/* Inline monospace, for a storage key or a file path quoted in prose. Website
   Max has a global `.mono`; this site does not, and adding one to site.css
   would be a new global class on five pages that do not use it. Scoped to
   .legal so it cannot reach the handoff pages at all. */
.legal .mono{font-family:var(--mono);font-size:.93em;letter-spacing:.01em}

/* ── a plain definition list, for the Impressum ───── */
.ldl{display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);gap:12px clamp(18px,2.4vw,36px);margin:0}
.ldl dt{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70);padding-top:3px}
.ldl dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.ldl dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-35)}
.ldl dd a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ── responsive ───────────────────────────────────── */
@media (max-width:1080px){
/* The margin note stops being a margin and becomes a block under the prose it
   annotates. It keeps its border, so it still reads as apparatus rather than
   as more body copy. */
.lsec{grid-template-columns:minmax(0,1fr)}
.lnote{max-width:52ch}
}
@media (max-width:767px){
/* The sticky index would eat a third of a phone screen and it is sticky
   against a fixed nav pill that is already there. It becomes a plain list at
   the top of the document, in flow, which is also the order a screen reader
   wanted it in. */
.legal-body{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,38px)}
.legal-idx{position:static;padding-bottom:clamp(22px,4vw,30px);border-bottom:1px solid var(--rule-soft)}
.ldl{grid-template-columns:minmax(0,1fr);gap:5px}
.ldl dt{padding-top:10px}
}