/* The four legal and trust pages only (accessibility.html, impressum.html, privacy.html,
   security.html), loaded last, after site.css. Everything here is scoped to body.legalpage, as
   css/faq.css is to body.faqpage, so no other page changes. (Not body.legal: the text column
   itself is .legal.)
   2026-10-17, where the eye goes: these pages are read, not sold. The reader is a lawyer, a data
   protection officer or someone checking us, and they scan an F: across the title, then down the
   left edge from heading to heading. So the title wins the head, every section starts on a rule
   at the same left edge, and the records (who we are, what never happens) sit in rows on the
   site's hairlines, labels on the left. One thing per page stands in full ink; everything else
   keeps the quieter grey. Nothing here moves on its own once the page has opened. */

/* ---------- the head ----------
   The title wins: it is the largest and darkest thing, top left. The mark stays top right,
   where the eye passes but does not stop: its petals a deeper red than the page's buttons and
   still once drawn, so no scarlet sits beside the title. */
.legalpage .phv__petals path { fill: var(--c-crimson); }
.legalpage .pagehead--v .phv__petals path { animation-play-state: running, paused; }

/* On a phone the mark no longer stands above the title, where it was the first thing seen:
   it goes small into the top right corner and the title moves up to lead. */
@media (max-width: 900px) {
  .legalpage .pagehead.pagehead--v { padding-top: 7.5rem; }
  .legalpage .phv { top: 1.25rem; right: var(--gutter); translate: 0 0; height: 5.5rem; }
}

/* ---------- the text ----------
   The column starts level with the index beside it, and every section after the first opens
   on a soft hairline, so the headings make clear rows down the left edge. */
.legalpage .legal > :first-child { margin-top: 0; }
.legalpage .legal h2 { margin-top: var(--s-7); }
.legalpage .legal h2:not(:first-child) { padding-top: var(--s-5); border-top: var(--hairline-soft); }
.legalpage .legal h3 { margin-top: var(--s-5); }
/* A paragraph after a list or a register keeps a clear gap, so it never reads as the last row. */
.legalpage .legal ul + p, .legalpage .legal dl + p { margin-top: var(--s-5); }

/* ---------- records ----------
   A label and its value on one row, the labels down the left edge, as a register is laid out:
   soft hairlines between the rows and none round the outside, since the next section already
   opens on its own rule. On a phone the value goes under its label, still one row. */
.legalpage .legal dl { gap: 0; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); }
.legalpage .legal dt, .legalpage .legal dd { padding-block: var(--s-3);
  border-bottom: var(--hairline-soft); }
.legalpage .legal dt { padding-right: var(--s-5); text-wrap: balance; }
.legalpage .legal dl > dt:first-child { padding-top: 0; }
.legalpage .legal dl > :nth-last-child(-n+2) { padding-bottom: 0; border-bottom: 0; }

/* The one list a page stands on (what never happens, what is never collected): the same rows on
   hairlines, no bullets, and the only text in the column in full ink. */
.legalpage .legal .legal__key { list-style: none; padding-left: 0; gap: 0; }
.legalpage .legal .legal__key li { padding-block: var(--s-3); color: var(--ink); }
.legalpage .legal .legal__key li:first-child { padding-top: 0; }
.legalpage .legal .legal__key li:last-child { padding-bottom: 0; }
.legalpage .legal .legal__key li + li { border-top: var(--hairline-soft); }

@media (min-width: 601px) {
  .legalpage .legal dl > dt:first-child + dd { padding-top: 0; }
}
@media (max-width: 600px) {
  .legalpage .legal dl { grid-template-columns: minmax(0, 1fr); }
  .legalpage .legal dt { padding-bottom: 0; border-bottom: 0; }
  .legalpage .legal dd { padding-top: var(--s-1); }
}

/* ---------- a little more life (2026-10-17) ----------
   "The eye is there but a tiny bit bland." Nothing new to look at and no new red: what is here
   already answers the pointer a little more, and the quiet parts take a little warmth, so no
   section gains a second focal point. The free-demo button lifts 2px onto a soft oxblood shade and
   its petal (and a link's) turns further, quick and ease-out, never a bounce. The quiet hairlines
   are a breath of dusty rose (--c-dusty; --c-petal on the dark ground) rather than grey. With
   reduced motion base.css makes every change instant. */
body.legalpage { --warm-rule: color-mix(in oklch, var(--c-dusty) 38%, transparent);
  --warm-rule-dark: color-mix(in oklch, var(--c-petal) 24%, transparent); }
.legalpage main .btn { transition: background var(--dur) var(--ease-out-quart), gap var(--dur) var(--ease-out-quart),
  transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-quart); }
.legalpage main .btn:is(:hover, :focus-visible) { transform: translateY(-2px); }
.legalpage main .btn:not(.btn--quiet):is(:hover, :focus-visible) { box-shadow: 0 0.875rem 1.5rem -0.875rem oklch(33.8% 0.127 27.8 / 0.6); }
.legalpage main .btn:active { transform: scale(0.97); transition-duration: var(--dur-fast); }
.legalpage main .btn:not(.btn--quiet):active { box-shadow: none; }
.legalpage main :is(.btn, .cta):is(:hover, :focus-visible) .petal { transform: rotate(24deg); }
/* The closing panel is no longer flat: the paper grain over the oxblood, and its big outlined
   petal (which already turns with the scroll) a faint dusty fill, so it reads as warmth behind the
   question rather than a second thing to look at. */
.legalpage .vpanel { background-image: url(../assets/img/grain.svg); background-size: 200px; }
.legalpage .vpanel__petal { color: color-mix(in oklch, var(--c-dusty) 11%, transparent); stroke: color-mix(in oklch, var(--c-petal) 42%, transparent); }
/* The rules that open each section, and the index's left edge when pointed at, in dusty rose. */
.legalpage .legal h2:not(:first-child) { border-top-color: var(--warm-rule); }
.legalpage .legal-index a:not(.is-current):hover { border-left-color: var(--warm-rule); }