/* =============================================================================
   legal.css — the frame the two legal pages share.

   Two pages, one layout:

     site/datenschutz.html   the privacy statement
     site/impressum.html     the imprint

   What they share is what a legal document looks like on this site: the
   monochrome pair swapped so the page is black paper with white ink, a dark
   colour scheme to match, the headings in Funnel Display, the page's own air at
   both ends, and the four things a legal document has that a case study does not
   — a back link, an address block, a bullet list and a closing "Stand" line.
   What they do NOT share is the size of their title: "Datenschutzerklärung" is
   one nineteen-character word and needs a floor put under it (datenschutz.css),
   while "Impressum" — nine characters — needs the frame's own floor restated
   against the title so the language toggle cannot move it (impressum.css).

   THE LAYOUT IS NOT HERE EITHER. The document column (~800px, --cs-measure),
   the Inter-set prose and the rhythm between blocks all come from
   case-study.css, the frame the four project pages share — for the reason
   hairdresser-website.css states for itself: a second copy of the Inter
   @font-face rules and a second answer to "how wide is the document" is exactly
   the drift that shared file exists to prevent. This file is the same argument
   one layer up: two legal pages, one answer to every question they answer the
   same way, and a page's own file for the ones they do not.

   Loaded LAST, after case-study.css, so the re-points below win over its :root —
   and a page's own file is loaded after THIS one, so it wins in turn.

   Nothing here invents a colour, a face or a scale step: the two colours are the
   pair the site is built on, swapped, the face is already loaded, and the sizes
   are the ones the frame and the scale already state.
   ============================================================================= */

/* --- Black paper, white ink ------------------------------------------------
   THE MONOCHROME PAIR IS RE-POINTED, NOT REPLACED. system/tokens.css states the
   site's #ffffff paper / #000000 ink, and restating the pair — in the two tokens
   the system already names — turns a whole page over: system/base.css's body,
   focus ring and selection colour, system/components.css's links and skip link,
   and portfolio.css's .header, .nav panel, nav links, burger bars, language
   toggle and custom cursor all paint themselves from these two.

   IT IS THE IDIOM THE PROJECTS BAND ALREADY USES. portfolio.css re-points the
   same pair inside .work so that band draws black type on a white surface and
   white type on black; the only difference here is HOW FAR the surface reaches.
   That band is a stripe inside a white page; these pages ARE the surface.

   NEITHER HEX IS NEW — #000000 and #ffffff are the pair the site is built on,
   swapped — and no rule had to be told about it: every declaration stated against
   "the page's ink" now means white, which is what the brief asked for.

   THE ONE CONSEQUENCE, MEASURED RATHER THAN HIDDEN: the only grey on the page is
   the language toggle's INACTIVE word, which takes --c-muted #767676 — a value
   system/tokens.css picked against white, where it measures 4.54:1. Against
   black it measures 4.62:1, so it still clears the 4.5:1 AA floor for its 14px
   and the token stays exactly as the system states it: the swap makes the toggle
   clearer, not muddier, and no page-local grey is needed to rescue it. */
:root {
  --c-bg: #000000;
  --c-fg: #ffffff;
}

/* --- The colour scheme, and the one footgun the swap creates ----------------
   system/base.css declares `color-scheme: only light` on <html> and states why:
   it is the spelling a UA that auto-darkens honours, and it is what keeps a page
   designed light from being re-painted dark by the browser.

   THE SAME DECLARATION POINTED AT A BLACK PAGE IS A HAZARD RATHER THAN A
   SAFEGUARD: `only light` promises the UA this document is light, and a promise
   of light is an invitation to turn it over. Measured on datenschutz.html in
   headless Chrome with `--force-dark-mode --enable-features=WebContentsForceDark`:
   under `only light` the paper is sampled back at rgb(255,255,255) — the black
   page inverted to white, with white type on it — which is the failure base.css
   was written to prevent, and which no rule in this file could see coming.

   `only dark` is the mirror of that opt-out and it is what these pages say: there
   is one scheme here and the page is already in it, so there is nothing for the
   UA to apply. It also moves the UA's own furniture — scrollbar, caret, form
   controls' default palette — onto a dark surface, which is where the page is.
   The declaration is on <html> and therefore global: it is the same page colour
   on both of these pages, so it is the shared file's business rather than
   either page's. */
html {
  color-scheme: only dark;
}

/* --- The headings -----------------------------------------------------------
   The brief asks for the site's display face on the headings and Inter on the
   body copy. That is one re-point of the frame's own token — the line
   hairdresser-website.css and econudge-sustainable-tool.css each carry, and the
   whole of the difference on either page. Funnel Display is already loaded
   (portfolio.css, self-hosted, weights 300-800), so this costs no extra request.

   The frame's other answer is left alone: its headings already come out BOLD and
   a step larger than the prose beside them (--cs-heading-font on .cs-label and
   .cs-intro__title), which is what the brief asks for, so no size is restated
   here — a page that needs one (the title ramp) states it in its own file. */
:root {
  --cs-heading-font: var(--font-page);
}

/* --- The page's own air at both ends ---------------------------------------
   The frame already gives the document its leading (.cs-intro pads its top
   block, every .cs-section opens with 1.5-2.5rem and closes with 3-6rem); this
   is the page's own margin at the page's edge, on top of that.

   PADDING AND NOT MARGIN, which is the one thing worth saying about it: the last
   .cs-section's closing margin would collapse out of <main> at the bottom of the
   page — the classic way a document's final gap disappears — and padding is what
   holds it in. So the last 3-6rem of the frame plus this block's 2-4rem are the
   air under the last line of the document, and neither can be swallowed at the
   page's edge. */
.legal {
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 6vw, 4rem);
}

/* ============================================================================
   The document's own bits
   ============================================================================
   The four things a legal page has that a case study does not, and the reason
   this file exists at all rather than each page carrying them. They are stated
   once, for both pages, and a page spends the ones it has: datenschutz.html
   carries a back link, an address block, two bullet lists and the closing
   "Stand" line; impressum.html carries a back link and two address blocks, and
   has no list and no date — the "Stand" line below is the one rule in this file
   that only one of the two pages ever spends, and it is here rather than in
   datenschutz.css because it is a legal document's own kind of line rather than
   that word's problem. */

/* --- The back link ----------------------------------------------------------
   A step of type DOWN from the document (--fs-meta, the same size the nav uses)
   and a `.ds-link` like the footer's legal links, because it is chrome rather
   than a word of the document: it should read as the way out of the page, not as
   the first sentence of it.

   THE AIR UNDER IT is stated as its own bottom margin and needs no override: the
   frame puts --s-3 between two children of .cs-intro, margins between siblings
   COLLAPSE, and the larger of the two wins — so this block's 1.5-2.5rem is the
   gap above the title, with nothing fighting .cs-intro > * + *. */
.legal__back {
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
  font-size: var(--fs-meta);
  line-height: 1.2;
}

/* --- The address block ------------------------------------------------------
   <address> carries one UA default this page does not want: italic. The block is
   an address, not a quotation or a caption, and on a document whose whole
   argument is "here is who is responsible" it is the one run of type that must
   not look decorative. Everything else about it comes from .cs-text, which it
   also carries — same face, same size, same 1.6 line-height as the prose around
   it. datenschutz.html uses it once, for the party responsible for the
   processing; impressum.html uses it twice, for the provider under § 5 DDG and
   for the party responsible for the content. */
.legal__address {
  font-style: normal;
}

/* --- The bullet list --------------------------------------------------------
   The frame is a document of prose and has no list, so this is the one shape
   added here. The UA's default marker gutter is 40px — wider than a fifth of a
   320px phone's column and unrelated to anything in this system — so it is
   restated as a step of the scale instead: --s-4 outside the text, which puts
   the disc where a reader's eye expects it and leaves 16px more of the line for
   words. The marker itself is left alone: it inherits the page's ink, so it is
   white here and needs no rule. */
.legal__list {
  padding-inline-start: var(--s-4);
}

/* One step of air between the lines of a list, so a six-line list of what a
   server log holds does not read as a wrapped paragraph. The frame's --s-3 is
   the gap between BLOCKS; a list needs less than a block break and more than a
   line, and --s-2 is that. */
.legal__list > li + li {
  margin-block-start: var(--s-2);
}

/* --- Air between paragraphs -------------------------------------------------
   THE FRAME'S --s-3 IS TOO TIGHT INSIDE A SECTION OF THIS LENGTH. It is the gap
   between a block and the block after it, and on a case study that is usually a
   label or a figure — a break you notice. Here it is one paragraph following
   another at 1.6 line-height, where 12px between blocks is LESS than the 25.6px
   between the lines inside them: the prose would read as one long paragraph with
   odd gaps in it. --s-4 puts the paragraph break just under the line rhythm,
   which is what makes a legal text scannable.

   Stated as `.cs-text + .cs-text` and scoped to a section, so a paragraph that
   follows a label, a list or the address block keeps the frame's own spacing and
   nothing on a case study can move — `.legal` is what does the scoping, and it
   is why the two pages carry that class on <main> even though the rest of the
   black page needs no class of its own. */
.legal .cs-section > .cs-text + .cs-text {
  margin-block-start: var(--s-4);
}

/* --- The closing line -------------------------------------------------------
   "Stand: Oktober 2026" is a stamp on the document rather than a sentence in it,
   so it takes the meta step and the bold weight instead of another paragraph's
   size, and a label's worth of air above it. It is the last thing on the page and
   the one line a reader scans the whole document for when they want to know how
   current the policy is. */
.legal__stand {
  margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
}