/* /impressum and /datenschutz — the two legal pages, one stylesheet.

   THE CONCEPT, in one sentence: a typeset legal document with a citation
   gutter — a single hairline spine runs the length of the page, the statute
   that requires each clause hangs outside it in monospace, and the clause
   itself sits inside. Every section names the rule it exists to satisfy, so
   the page can be checked line by line instead of taken on trust. That is the
   same argument the rest of this site makes; here it costs nothing to make it.

   These are deliberately the plainest pages on the site. No imagery, no
   reveal, no scroll effect, no page module. On a site that argues for
   restraint, the legal pages are where restraint is free — and the restraint
   is the design decision, not the absence of one.

   Two pages, one class. `.taxi-w.legal` is the scope and `[data-lg]` tells the
   two apart; nothing below needs it yet, and that is the point — they are the
   same document in two subjects. Same precedent as the ten case studies, which
   share `.taxi-w.case` and differ only by `[data-cs]`.

   Every class is lg-* namespaced. THE FOOTER LIVES INSIDE `.taxi-w.legal` —
   content.html never closes its wrapper, so the shared footer band is a
   descendant of this scope. Every reset below is therefore written against an
   lg-* class and never against a bare element, or it would reach the footer.

   Remember 1rem is not 16px: html{font-size} is a fluid function of viewport
   width (css-main.html), so every rem below is a proportional design unit.

   Motion contract: the pre-paint gate `.lgjs` is set by the inline one-liner
   in content.html and DELIBERATELY GATES NOTHING. These pages have no hidden
   start state because they have no reveal — there is nothing a JS failure
   could leave blank. The line stays on the page because the shell's contract
   expects it, and because a page that ever grows a reveal must not have to
   remember to add it back. */

.taxi-w.legal {
  --lg-bg: #fafcfb;            /* the page — same paper as /contact and /projects */
  --lg-ink: #040504;           /* = --color--dark-green */
  --lg-dim: #535450;           /* = --color--dark-green-tint-2 — 7.3:1 on the paper */
  --lg-line: rgba(4, 5, 4, .09);
  /* The spine is the only structural graphic on either page, so it is one
     step stronger than a hairline divider — still decorative, still ink, and
     still not a second hue. */
  --lg-rule: rgba(4, 5, 4, .15);
  --lg-card: #e9efeb;          /* the tone step. There are no shadows here */
  --lg-rim: #cbd3ce;
  --lg-rim-strong: #9fa9a4;
  /* ONE SITE GREEN, and on these pages it appears exactly once: the skip
     link. Mint is a brand mark, not a text colour (~1.5:1 on paper), and a
     legal document has nothing that wants highlighting. */
  --lg-mint: var(--color--lime, #21f1a8);
  --lg-on-mint: #10120f;
  --lg-mono: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
  --lg-ease: cubic-bezier(.215, .61, .355, 1);

  --lg-measure: 62ch;          /* the site-wide reading cap */
  --lg-rhythm: 6.5rem;         /* desktop rhythm; 4.5rem below 768px */
  --lg-rail: 9.5rem;           /* the citation gutter */
  --lg-gutter: 2.25rem;        /* rail -> spine */
  --lg-hang: 2.5rem;           /* spine -> text; the clause number hangs here */

  /* what the shared footer band paints itself with — see css-main.html */
  --page-bg: var(--lg-bg);

  background-color: var(--lg-bg);
  color: var(--lg-ink);
  display: block;
}

/* ---------------------------------------------------------------- shared */

.lg-s {
  position: relative;
  padding-inline: var(--padding--container);
}
.lg-wrap {
  width: 100%;
  /* rail + gutter + hang + measure, and nothing wider. The document is a
     column on a large screen because that is what a document is. */
  max-width: calc(var(--lg-rail) + var(--lg-gutter) + var(--lg-hang) + var(--lg-measure));
  margin-inline: auto;
}

/* The shared sheet uppercases every heading, sets p{font-size:1.25rem} and
   strips underlines from every anchor. All three are undone per class, never
   per element, because the footer is inside this scope. */
.lg-h1, .lg-h2, .lg-h3, .lg-toc-h, .lg-side-h, .lg-callout-h {
  margin: 0;
  text-transform: none;
  font-variation-settings: normal;
  font-weight: normal;
}
.lg-p, .lg-lede, .lg-dd, .lg-side-p, .lg-end-note, .lg-toc-t {
  margin: 0;
  font-size: 1rem;
  font-weight: normal;
}
.lg-eyebrow {
  margin: 0;
  font-family: var(--lg-mono);
  font-size: .625rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lg-dim);
}

/* Body links keep an underline at rest — colour alone is not a distinction,
   and on a page with no accent there is no colour to spare anyway. The rest
   state is a quiet rim-grey rule; hover and focus bring it up to ink. */
.lg-a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lg-rim-strong);
  text-underline-offset: .2em;
  transition: text-decoration-color .25s var(--lg-ease), text-decoration-thickness .25s var(--lg-ease);
}
.lg-a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.lg-code {
  font-family: var(--lg-mono);
  font-size: .875em;
  background-color: rgba(4, 5, 4, .06);
  border-radius: .25rem;
  padding: .1em .35em;
  word-break: break-word;
}

/* ONE FOCUS TREATMENT, for everything focusable on both pages. :focus-visible
   only — a permanent ring on a document full of links would be noise, and
   `outline: none` on :focus has already deleted the global ring twice on this
   site. It is not written anywhere below. */
.taxi-w.legal .lg-skip:focus-visible,
.taxi-w.legal .lg-a:focus-visible,
.taxi-w.legal .lg-toc-a:focus-visible,
.taxi-w.legal .lg-end-a:focus-visible {
  outline: 2px solid var(--lg-ink);
  outline-offset: 3px;
}
/* The end links sit in a clipped, rounded pair of cells, so their ring is
   drawn inside the cell — an offset ring there would be cut off by the
   parent's overflow, which is a focus indicator that only looks present. */
.taxi-w.legal .lg-end-a:focus-visible { outline-offset: -3px; }

/* Invisible until focused, then a real, visible control — the .pjx-skip
   contract, unchanged. opacity + pointer-events rather than a transform
   alone, because a translated-away element still peeks whenever an ancestor's
   clipping box does not start where you assumed it did. */
.lg-skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  padding: .75rem 1.25rem;
  background-color: var(--lg-mint);
  color: var(--lg-on-mint);
  font-family: var(--lg-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: .5rem;
  transition: transform .2s var(--lg-ease), opacity .2s var(--lg-ease);
}
.lg-skip:focus,
.lg-skip:focus-visible {
  transform: translate(-50%, 1rem);
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------------- masthead */

.lg-mast {
  padding-block: calc(var(--on-t-nav-spacer, 5.375rem) + 4.5rem) 0;
}
.lg-h1 {
  margin-top: 1.5rem;
  font-family: Orbitron, Arial, sans-serif;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.0625rem;
  text-transform: uppercase;
  color: var(--lg-ink);
}
/* "Datenschutzerklärung" is twenty characters of Orbitron. It gets its own
   size and a soft hyphen in the markup rather than a shrunken masthead on
   /impressum — one word must not set the scale of both pages. */
.lg-h1.is-long {
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  hyphens: manual;
  overflow-wrap: break-word;
}
.lg-lede {
  margin-top: 1.75rem;
  max-width: var(--lg-measure);
  line-height: 1.65;
  color: var(--lg-dim);
}
.lg-lede.is-quiet {
  margin-top: 1rem;
  font-size: .9375rem;
  color: var(--lg-dim);
}

/* Date and status, set as the document's own header block: monospace keys,
   because both are values a reader is invited to check. */
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 2.5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lg-line);
}
.lg-meta-i { display: flex; flex-direction: column; gap: .375rem; }
.lg-meta dt {
  font-family: var(--lg-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lg-dim);
}
.lg-meta dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--lg-ink);
}

/* ---------------------------------------------------------------- contents */

.lg-toc-s { padding-block: 3.5rem 0; }
.lg-toc-h {
  font-family: var(--lg-mono);
  font-size: .625rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lg-dim);
}
.lg-toc {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;                    /* the gap IS the rule: rows sit on the page's
                                  own line colour with no border to double up */
  background-color: var(--lg-line);
  border-block: 1px solid var(--lg-line);
}
/* The shared sheet sets `li { list-style-type: disc }` on the ELEMENT, which
   beats `list-style: none` inherited from the ol. Reset the item itself —
   scoped to these two lists so the footer's own lists are untouched. */
.taxi-w.legal .lg-toc li,
.taxi-w.legal .lg-end-links li {
  list-style: none;
  list-style-type: none;
  background-color: var(--lg-bg);
}
.taxi-w.legal .lg-toc li::marker,
.taxi-w.legal .lg-end-links li::marker { content: none; }

.lg-toc-a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  /* 2.75rem tall at the smallest root size — comfortably past the 24x24 floor
     at 320px, where these rows are the only touch targets on the page. */
  min-height: 2.75rem;
  padding: .8125rem .875rem;
  color: inherit;
  text-decoration: none;
  transition: background-color .3s var(--lg-ease), padding-left .3s var(--lg-ease);
}
.lg-toc-a:hover {
  background-color: rgba(4, 5, 4, .045);
  padding-left: 1.5rem;
}
.lg-toc-n {
  flex: none;
  width: 1.5rem;
  font-family: var(--lg-mono);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--lg-dim);
}
.lg-toc-t { font-size: .9375rem; line-height: 1.3; }

/* ---------------------------------------------------------------- the document

   THE SPINE. One absolutely-positioned hairline, drawn once for the whole
   document rather than per section, so consecutive clauses cannot leave a
   seam where their paddings meet. It starts at the first clause's heading and
   stops at the last clause's last line — the sections carry their rhythm as
   top padding only, and the closing full stop is the rule simply ending. */

.lg-doc-s { padding-block: var(--lg-rhythm) 0; }
.lg-doc { position: relative; }
.lg-doc::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lg-rail) + var(--lg-gutter));
  width: 1px;
  background-color: var(--lg-rule);
}

.lg-sec {
  display: grid;
  grid-template-columns: var(--lg-rail) minmax(0, 1fr);
  column-gap: var(--lg-gutter);
  padding-block: var(--lg-rhythm) 0;
}
.lg-sec:first-child { padding-top: 0; }

/* The contents list and the skip link both jump into the document, and the
   nav is fixed — without this the clause you asked for lands underneath it.
   Ten anchors is enough for that to be a defect rather than a nuisance. */
.lg-doc-s,
.lg-sec { scroll-margin-top: calc(var(--on-t-nav-spacer, 5.375rem) + 1.5rem); }

/* The citation hangs outside the spine, right-aligned against it, and wraps
   on its own terms — the   in the markup decide where. The nudge is
   optical: a .625rem monospace cap sits above a 1.6rem heading's cap. */
.lg-cite {
  margin: 0;
  padding-top: .4375rem;
  text-align: right;
  font-family: var(--lg-mono);
  font-size: .625rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--lg-dim);
}

.lg-body {
  position: relative;
  padding-left: var(--lg-hang);
  max-width: calc(var(--lg-hang) + var(--lg-measure));
}
/* The clause tick: a short ink crossbar laid across the spine at the height of
   the heading, joining the statute on the left to the clause on the right.
   Scanning the rule alone tells you where the clauses begin, and which two
   things each one ties together. It is the only ornament on either page and it
   carries information, which is the only reason it is here. */
.lg-body::before {
  content: "";
  position: absolute;
  left: -.625rem;
  top: .8125rem;
  width: 1.25rem;
  height: 1px;
  background-color: var(--lg-ink);
}

/* The clause number hangs into the gutter between spine and text: negative
   text-indent on the first line, a fixed-width inline-block to land the title
   back on the text axis. It is real text, not a counter, because a clause
   number is how you cite a clause and a screen-reader user needs it too. */
.lg-h2 {
  text-indent: calc(var(--lg-hang) * -1);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.0125rem;
  font-variation-settings: "wght" 650, "wdth" 96;
  color: var(--lg-ink);
}
/* Right-aligned inside its hanging box, so 1 and 10 end on the same axis a
   little short of the text — the way a numbered document sets its numbers, and
   far enough off the spine that the rule never runs through a digit. */
.lg-num {
  display: inline-block;
  width: var(--lg-hang);
  padding-right: .75rem;
  text-indent: 0;
  text-align: right;
  font-family: var(--lg-mono);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  vertical-align: .1em;
  color: var(--lg-dim);
}

.lg-p {
  margin-top: 1.125rem;
  max-width: var(--lg-measure);
  line-height: 1.7;
  color: var(--lg-dim);
}
.lg-p strong, .lg-dd strong {
  color: var(--lg-ink);
  font-variation-settings: "wght" 600;
  font-weight: normal;
}

/* THE LEDGER. Every clause that describes a processing operation answers the
   same four questions in the same order and the same shape — purpose, legal
   basis, recipient, retention. Consistency is what makes a legal document
   scannable, and it is what makes a missing value visible: the gap always
   appears in the same column. */
.lg-dl {
  margin: 1.5rem 0 0;
  max-width: var(--lg-measure);
  border-top: 1px solid var(--lg-line);
}
.lg-dl-i {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: .25rem 1.5rem;
  padding-block: .9375rem;
  border-bottom: 1px solid var(--lg-line);
}
.lg-dt {
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lg-ink);
}
.lg-dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--lg-dim);
}

/* ---------------------------------------------------------------- the sidenote

   A definition or an aside that is genuinely quieter than the clause it sits
   under — smaller, dimmer, no fill, one hairline down its left edge. It is
   never used for anything the reader must not miss; the draft note above is
   for that, and it is the loud one. */
.lg-side {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--lg-rim);
  max-width: var(--lg-measure);
}
.lg-side-h {
  font-family: Quicksand Label, Arial, sans-serif;
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lg-ink);
}
.lg-side-p {
  margin-top: .625rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--lg-dim);
}
.lg-side-p em { font-style: normal; font-variation-settings: "wght" 600; color: var(--lg-ink); }

/* Art. 21 DSGVO wants the right to object presented separately and clearly.
   A tone step and a rim is how this site says "separately". */
.lg-callout {
  margin-top: 1.75rem;
  padding: 1.375rem 1.5rem 1.5rem;
  max-width: var(--lg-measure);
  background-color: var(--lg-card);
  border: 1px solid var(--lg-rim);
  border-radius: .625rem;
}
.lg-callout-h {
  font-size: 1rem;
  line-height: 1.3;
  font-variation-settings: "wght" 650;
  color: var(--lg-ink);
}
.lg-callout .lg-p { margin-top: .75rem; font-size: .9375rem; }

/* ---------------------------------------------------------------- the end */

.lg-end-s { padding-block: var(--lg-rhythm) 2rem; }
.lg-end { border-top: 1px solid var(--lg-line); padding-top: 2rem; }
.lg-end-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--lg-line);
  border: 1px solid var(--lg-line);
  border-radius: .625rem;
  overflow: hidden;
}
.lg-end-a {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: 1.25rem 1.25rem 1.375rem;
  color: inherit;
  text-decoration: none;
  transition: background-color .3s var(--lg-ease);
}
.lg-end-a:hover { background-color: var(--lg-card); }
.lg-end-k {
  font-family: var(--lg-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lg-dim);
}
.lg-end-t {
  font-size: 1.0625rem;
  line-height: 1.2;
  font-variation-settings: "wght" 620;
}
.lg-end-note {
  margin-top: 1.5rem;
  max-width: var(--lg-measure);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--lg-dim);
}

/* ---------------------------------------------------------------- 991 and down

   The citation gutter is a wide-screen luxury. Below 992px the spine goes and
   each clause becomes a ruled block with its statute set above the heading —
   the same document, folded. The hanging number stays, because it is what
   makes a numbered document read as one at any width. */

@media screen and (max-width: 991px) {
  .taxi-w.legal { --lg-hang: 2rem; }
  .lg-doc::before { display: none; }
  .lg-sec {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 3rem 0;
    border-top: 1px solid var(--lg-line);
    margin-top: 3rem;
  }
  .lg-sec:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
  .lg-cite {
    padding-top: 0;
    margin-bottom: 1rem;
    text-align: left;
  }
  .lg-cite br { display: none; }
  .lg-body { max-width: none; }
  .lg-body::before { display: none; }
  .lg-dl-i { grid-template-columns: minmax(0, 1fr); gap: .375rem; }
}

/* ---------------------------------------------------------------- 767 and down */

@media screen and (max-width: 767px) {
  .taxi-w.legal { --lg-rhythm: 4.5rem; --lg-hang: 1.875rem; }
  .lg-mast { padding-block: calc(var(--on-t-nav-spacer, 5.375rem) + 3rem) 0; }
  .lg-end-links { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 992 and up */

@media screen and (min-width: 992px) {
  /* Ten clauses is a long list; two columns keep it inside one screen without
     shrinking a single row. The order stays document order, column by column. */
  .lg-toc.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
  }
}

/* ---------------------------------------------------------------- reduced motion

   There is nothing here that moves on its own — no reveal, no scroll effect,
   no autoplay, and no JavaScript at all. This block therefore only flattens
   the three hover transitions, and there is deliberately NOTHING in it that
   reveals a hidden element, because nothing on either page is ever hidden.
   Under reduce, both pages already are in their settled state. */

@media (prefers-reduced-motion: reduce) {
  .taxi-w.legal *,
  .taxi-w.legal *::before,
  .taxi-w.legal *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .lg-toc-a:hover { padding-left: .875rem; }
}