/* =============================================================================
   datenschutz.css — what is OURS on site/datenschutz.html.

   The layout is NOT here: 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.

   Neither is the legal chrome, and that is the change this file records: the
   black paper and white ink, the dark colour scheme, the headings in Funnel
   Display, the page's own air at both ends and the document's own bits — the
   back link, the address block, the two bullet lists and the closing "Stand"
   line — are now stated once for BOTH legal pages in legal.css. A second copy
   of them here is exactly the drift a shared file exists to prevent, and
   site/impressum.html is the page that would have paid for it: it needs every
   one of those answers and none of them differently.

   WHAT IS LEFT IS THE ONE THING THAT IS THIS PAGE'S ALONE, and the reason it
   cannot go in legal.css either: the floor under the title. The nineteen-
   character word argued about below belongs to this document and to no other, so
   the ramp that has to be argued with the frame's is argued with here.

   Loaded AFTER legal.css (and legal.css after case-study.css, which it
   re-points), so this page's title rule is the last word on this page's title.
   ============================================================================= */

/* --- The title's floor ------------------------------------------------------
   "DATENSCHUTZERKLÄRUNG" IS ONE NINETEEN-CHARACTER WORD, and it is the whole
   reason this page needs a ramp of its own.

   THE FRAME'S RAMP CANNOT BREAK IT. Its title is `clamp(2rem, 5vw, 3.25rem)`,
   with a German floor of 1.75rem (case-study.css) — a floor that exists because
   "ECOnudge Nachhaltigkeits-Tool" runs past a 320px phone's column at 2rem. That
   fix works because a German compound hyphenates and because it has spaces to
   wrap at. This title has neither a space nor a break the ramp knows about, so a
   floor that is too high does not give a second line, it gives type wider than
   the document.

   THIS PAGE CANNOT LEAN ON THE FRAME'S GERMAN RULE EITHER: it is keyed on the
   ROOT element's language (`html:lang(de)`), and the EN/DE toggle moves the root
   element's language on this page exactly as it does on the others — so that
   floor would be there or not depending on a visitor's language choice, and the
   overflow would come and go with it. The floor is therefore stated here against
   the TITLE rather than against the document's language, and it holds in both
   settings.

   AND STATING IT TAKES TWO SELECTORS, because the rule being argued with is a
   SPECIFICITY, not a size: the frame writes `html:lang(de) .cs-intro__title`, and
   that is (0,2,1) — one element, one pseudo-class, two classes — while a
   page-local `.legal .cs-intro__title` is (0,2,0). A tie is decided by source
   order, a loss is not decided at all: the frame's rule wins on any page whose
   root element says `de`, and this page's root element says `de`. Measured, at
   320px, before the second selector existed: the title rendered at 28px in the
   German setting and 24px in the English one — the same German word at two sizes,
   changing with a language this document does not follow. `html[lang="de"]
   .legal .cs-intro__title` is (0,3,1) and wins that comparison outright; the plain
   form carries the English setting, where the German rule does not match and the
   frame's own 2rem floor (0,1,0) is what has to be beaten. The same shape as
   case-study.css's own `html[lang="de"] .cs-text[data-de]`.

   MEASURED, in the page's own face and weight (Funnel Display 800, uppercased,
   -0.01em), the word sets ~13.4x its font-size wide:

       at 1.5rem (24px)  322px      <- the floor this page states
       at 1.75rem (28px) 375px      (the frame's German floor)
       at 2rem (32px)    429px      (the frame's English floor)
       at 3.25rem (52px) 697px      (the ceiling — inside the 800px column)

   A 320px phone leaves a 272px column (--pad-page is 24px below 48rem), so the
   frame's 2rem floor overflows it by 157px and even its German floor overflows
   it by 103px. 1.5rem is the largest round size that keeps the word on ONE line
   on the phones that matter: 322px against the 327px column of a 375px phone —
   five pixels of slack, which is why the two declarations under it are not
   decoration. RE-MEASURED in headless Chromium, from the rendered Range rects,
   in both language settings at nine widths: the word is 324px at 1.5rem and
   378px at 1.75rem, i.e. it sets 13.5x its size rather than the 13.4x above, so
   1.75rem still overflows a 375px phone's column (378 against 327) and 1.5rem
   still fits it — with 3px of slack rather than 5. The conclusion does not move;
   only the slack is smaller than stated here.

   hyphens: auto FIRST, BECAUSE THIS IS GERMAN. A break inside a German word is
   written with a hyphen at a syllable, and hyphenation is the only mechanism
   that puts one there; `<main lang="de">` is what tells the UA which dictionary
   to use, and it is on both ends of the language toggle because the document's
   own lang does not move. Measured at 320px: the word breaks into two lines
   inside the 272px column instead of running past it.

   overflow-wrap: break-word IS THE NET UNDER IT, for a UA with no German
   dictionary at all: without it, an unrecognised long word cannot be broken and
   the page scrolls sideways. It only ever fires where hyphenation could not, and
   the fallback is a break without a hyphen rather than a broken layout.

   The 5vw term and the 3.25rem ceiling are untouched, so the four project pages
   are unaffected either way, and from 560px up (where 5vw is larger than either
   floor) this page's ramp is identical too.

   WHAT MOVES IS THIS PAGE'S TITLE ON A PHONE, and it is the price of the
   paragraph above: the German setting used to take the frame's 1.75rem floor
   wherever 5vw was smaller, i.e. a flat 28px everywhere below 560px; it now takes
   the 1.5rem floor and hands over to 5vw at 480px, so it is 24px at 320-479px and
   24-28px from there up. Up to 4px smaller on a phone — against a title that is
   one size in both language settings, and that fits a 375px phone's column on one
   line instead of hyphenating into two. */
html[lang="de"] .legal .cs-intro__title,
.legal .cs-intro__title {
  font-size: clamp(1.5rem, 5vw, 3.25rem);
  hyphens: auto;
  overflow-wrap: break-word;
}