/* ========================================================================== Control-F — Base Font loading, reset, element defaults, layout primitives, utilities. Depends on tokens.css. ========================================================================== */ /* -------------------------------------------------------------------------- FONTS Self-hosted on purpose — no third-party CDN, so no IP transfer to a US host on page load (DSGVO). The files sit in assets/fonts/ next to their licence. Geist + Geist Mono OFL, vendored github.com/vercel/geist-font Publica Sans commercial licence required Until Publica Sans is licensed there is no rule for it: a face whose file is not on disk costs a 404 on every page and buys nothing, so the rule ships the day the file does. --font-display falls back to Geist and headlines render one notch less distinctive but structurally identical. When the licence lands, drop PublicaSans-Variable.woff2 into assets/fonts/ and restore: @font-face { font-family: "Publica Sans"; src: url("../fonts/PublicaSans-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } -------------------------------------------------------------------------- */ @font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* WHERE A TAB PRESS PUTS THE THING IT JUST FOCUSED. The note below this rule already establishes the mechanism — "Chromium scrolls a focused element into view, so on a page this tall EVERY Tab to an off-screen control is one of these journeys" — and measured how LONG the journey takes. It never asked where it lands. It lands against the bottom edge. The scroll is `nearest`, and a control entered from above is nearest when its bottom meets the viewport's bottom. That edge is where `[data-cf-consent-banner]` is fixed, and the banner is 144 px at 1280 and 1440, 233 at 768 and 334 at 375 — 41 % of a 375 x 812 screen. So every Tab to an off-screen control parked that control behind the notice. Counted on patterns/landing-page.html, first visit, banner up, under `reduce` so the scroll is instant and the count is exact — stops whose own CENTRE returns the banner from elementFromPoint, i.e. entirely hidden, which is the wording of WCAG 2.2 SC 2.4.11 (AA): 375 x 812 30 of 45 stops 768 x 1024 20 of 45 1280 x 800 11 of 50 1440 x 900 11 of 50 This is check-consent-clearance.py's finding one layer out. That check reserves the banner in the HERO's height, because the hero hangs its call to action off its own bottom edge; the same edge, for the same reason, needs reserving in the SCROLL PORT, because every focused control is hung off it too. Same published number, same `0px` fallback so a page with no banner reserves nothing, same three links that break silently. ON html AND NOT ON body, which is the silent one: scroll-padding acts on the scroll CONTAINER, and is the scrolling element on every page here. Moved to body it parses, computes and does nothing at all. scroll-padding cannot help the last screen of the document, because there the page has no scroll left to give — .cf-footer pays that half in its own bottom padding. After both: 0 of 45 / 45 / 50 / 50 shipping stops hidden. → components.css .cf-footer; scripts/check-scroll-reserve.py */ scroll-padding-bottom: var(--cf-consent-height, 0px); } /* AND THE ONE MOTION ON THIS SITE THAT DID NOT ASK. Every animation in the three stylesheets is gated on `prefers-reduced-motion: no-preference` — every view timeline, every transition, every keyframe — and this one declaration, four lines above, was outside all of it. It is also the longest movement the site can produce: a smooth scroll to the team strip on the landing page travels 6030 px, measured, and the reader who asked for less motion got every pixel of it. It fires far more often than the anchors it was written for. Chromium scrolls a focused element into view, so on a page this tall EVERY Tab to an off-screen control is one of these journeys — reading the focused element 45 ms after each Tab, 34 of the landing page's 47 stops were still in flight, and 0 of 46 are once this block applies — and the skip link is another. Which makes the readers who take the most of this motion the ones navigating by keyboard, including anyone doing so because pointing is hard: the population the preference exists to serve, taking the dose nobody else does. `auto` is the initial value, so this restores the browser default rather than inventing a behaviour: the page arrives, instantly, at the place it was asked for. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100%; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--leading-relaxed); color: var(--text-primary); background: var(--surface-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } /* THE PAGE COPY IS GERMAN, AND GERMAN BUILDS COMPOUNDS. "Technologie-Kompetenz" and "Datenfundament" are one word each as far as line breaking is concerned, and a word that does not fit does not wrap — it hangs out of its box and takes the document's scroll width with it. At the 16 px default nothing here fires: measured across 320–2000 px on both designed pages, every line already fits and the rule changes nothing. It fires when the READER has enlarged their browser's default font, which is the case the whole reflow requirement is about — WCAG 1.4.10 asks for no sideways scrolling at 320 px of viewport, and at a 24 px default `.cf-process__title` was 252 px of unbreakable word inside a 196 px panel. `break-word` and not `anywhere`: both break a word that has no other option, but `anywhere` also shrinks the element's min-content size, which would let every grid track in the system collapse to one character and quietly change how columns are sized at widths where nothing was wrong. This one is inert until a line genuinely cannot be set, which is exactly the last resort it is meant to be. It is a NET, not typography. The right answer for German is hyphenation at the dictionary's break points rather than at the box's edge — `hyphens: auto` against these pages' `lang="de"` — but that is a decision about how the type reads, so it belongs to the typography lane and to a designer. Until then the page does not scroll sideways. → foundations/layout.html THE LIST IS THE WHOLE NET, AND IT WAS WRITTEN BY HAND, so it was a list of the elements that MEAN text rather than of the elements that HOLD it. Four tags held copy on the pattern pages and were not in it, and two of them were live faults on the landing page — measured at a 16 px default, with no enlarged type needed, using one real compound (Kraftfahrzeughaftpflichtversicherungsschutz, 42 characters) dropped into copy that is already on the page: summary the six FAQ questions 320 → 384 px, 375 → 384 px span .cf-section-header__count 320 → 384 px, 375 → 385 px Both are flex or grid ITEMS, which is why they take the document with them while the same word in a plain
merely overflows a box something else crops: an item's min-content contribution widens the line or the track it sits in, and that is layout rather than paint. option and caption hold copy on sibling pattern pages and are in for the same reason. NOT div, and not `body` either, and the two refusals are one decision. This property inherits, so either selector would cover every leaf in the tree in a single word — and a net that cannot be caught short also cannot be checked, so the completeness this list finally has would stop meaning anything the day after it was written. Both are wrong on their own terms as well: 
 and .docs-code are horizontal scrollports ON PURPOSE, and a net
   that reaches them turns a code sample that scrolls into one that wraps. So
   the net stays a list of the elements that hold their own copy; a 
 that
   holds copy is a component and covers itself where it is declared —
   .cf-accordion__content is the only one in the tree — and the completeness of
   this list is checked against the markup rather than kept by hand, by
   scripts/check-wrap-net.py, which reads the list out of this file. */
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, a, button,
label, summary, span, option, caption {
  overflow-wrap: break-word;
}
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }
a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* THIS LIST WAS WRITTEN BY HAND TOO, and it was caught short in exactly the
   way the overflow-wrap net above it was, by exactly the same element. It is
   the system's ONE focus indicator — every ring on every page is this
   declaration — and it names five tags plus [tabindex], which is a list of the
   things a person thinks of as controls rather than of the things the browser
   gives focus to.  is natively focusable, is none of those five, and
   carries no tabindex, so it has never once received this ring: 21 of them in
   six files, including the landing page's six FAQ rows.

   WHAT THE READER GOT INSTEAD was the user agent's own outline, and the
   component's sheen is not a second opinion about that. Measured on the
   landing page's first FAQ row at 1440 x 900, unfocused against focused:

     the sheen sweep alone (:focus-visible background-position)   1.23:1
     the browser's fallback outline alone                        13.61:1
     this ring, once summary is in the list                      14.91:1

   WCAG 2.4.11 asks a focus indicator for 3:1 against its unfocused state, so
   the 1.23 is not an indicator and the whole job was being done by a ring
   nothing in this repository asked for, at 1 px where the system draws 2, at
   offset 0 where the system draws 2, in the UA's near-black rather than in
   --focus-ring — which is the token that flips to lime under
   data-theme="inverse" and therefore the only one that survives a dark
   surface. Nothing renders wrong on the day you look at it in Chromium; it is
   simply not this system's ring, on the one component that discloses content.

   Held by scripts/check-focus-ring.py, which reads this selector and the
   markup rather than trusting the next hand-kept list. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--stroke-2) solid var(--focus-ring);
  outline-offset: 2px;
}

/* AND THE ONE ELEMENT THE RING ABOVE MUST NOT REACH, which is why the skip
   link's target could not simply be given the attribute that makes it work.

   The skip link is the first tab stop on all fourteen pattern pages and the
   only control on any of them that exists for one reader. Measured on the
   landing page at 375 and 1440, over three sequences — a fresh load, a load
   where the consent banner was dismissed by mouse first, and a reader who had
   scrolled and clicked before reaching for it — pressing Enter on it set
   location.hash to #inhalt and left document.activeElement on . Every
   time. 
 is not a focusable element, so there was nothing
   for the fragment to give the focus to.

   IT LOOKED LIKE IT WORKED, and that is the whole of why it lasted. Chromium
   moves the SEQUENTIAL FOCUS NAVIGATION STARTING POINT to the fragment's
   target even when the target cannot hold focus, so the next Tab does land
   inside 
 — verified in all six runs above. What does not move is
   focus. A screen reader in focus mode follows document.activeElement and not
   a starting point no API exposes, so the reader who pressed the one control
   built for them was told nothing had happened; the starting point is also a
   rescue rather than a guarantee, discarded by the next click, and one engine
   implementing it is not the platform agreeing to.

   THE ATTRIBUTE ALONE SHIPS A SECOND DEFECT, and it is a bigger one than the
   first. tabindex="-1" on 
 makes the fragment move focus for real —
   measured, document.activeElement becomes MAIN#inhalt at 375, 768, 1280 and
   1440, on all fourteen pages that carry the link — and
   [tabindex] is a term in the ring's list one rule up. Because the skip was
   activated FROM THE KEYBOARD, main then matches :focus-visible: measured
   `2px solid` around the whole of 
, which on the landing page is a
   rectangle 10,892 px tall at 1440. The reader who skips is handed a box
   drawn around the entire document.

   So the pair is the fix and neither half of it is optional. This rule is the
   second half: an element whose tabindex is -1 is BY DEFINITION out of the
   tab order, which is the definition of not being a control, and the ring
   names controls. Nothing is taken away from a reader here — the skip's
   feedback is the viewport moving and the next Tab drawing the ring on the
   first real control inside main. Written as its own rule and not as a
   :not() inside the list above, because the list above is the system's ONE
   focus indicator and check-focus-ring.py holds it to being one — a second
   `:where(...):focus-visible` rule in this file is that check's failure, and
   correctly so.

   NO :where() ON THIS ONE, which is the difference between a rule that wins
   and a rule that ties. The indicator wraps its list in :where() so it carries
   the specificity of :focus-visible alone, (0,1,0). A bare attribute selector
   with the same pseudo-class is (0,2,0) and takes it outright — in any order,
   under any later reshuffle of this file, and without the tie that would make
   the fix depend on which of two lines a hand happened to move first.
   → scripts/check-skip-target.py */
[tabindex="-1"]:focus-visible { outline: none; }

/* A BARE  WAS NOT BOLD, and it took a page about marked text to notice.
   Body copy is --weight-light, 300. The UA default for strong is `bolder`,
   which is RELATIVE: against 300 it resolves to 400, one step on a variable
   axis and no visible emphasis at all. Every component that thought about it
   set its own value and was therefore fine — .cf-prose strong and .docs-note
   strong at 600, .cf-check__label strong at 500, .cf-process__note strong —
   and both designed pages happen to put every  they have inside one of
   those. So this was latent rather than visible, and it would have shipped the
   first time a page emphasised a word outside a component.
   600 is what the components that set it chose. :where() so every one of them
   still wins. */
:where(strong, b) { font-weight: var(--weight-semibold); }

/* FLAT LIME, AND IT IS FLAT BECAUSE CSS GIVES NO OTHER OPTION: background-image
   is ignored on a highlight pseudo-element, so no ramp of the light family can
   be painted into one. Everywhere lime fills an AREA it fills it with a
   gradient — foundations/colors.html, "Lime is never flat". Do not read this
   line as a precedent; read it as the general case, which the found state below
   states in full and measures. Every highlight register in this system is the
   same exception, for the same reason, and there is no fourth one.

   This one is also the only highlight here that is a GESTURE rather than an
   answer, which is why it keeps the platform's convention and takes no contour:
   a selection that reads as anything other than a selection is a selection you
   cannot trust. Its boundary against CF-Grau is 1.37:1 and that is documented
   rather than fixed — a drag is transient, self-caused and under the reader's
   own hand, and the criterion the fill has to clear is the text on it, at
   18.51:1. Everything below is the other half of the story: a mark the reader
   did NOT make, and therefore has to be able to trust at a glance.
   → foundations/found.html */
/* A HIGHLIGHT DOES NOT OWN THE FILL OF THE TEXT IT IS PAINTED OVER, so it has
   to state one. `color` is not enough: -webkit-text-fill-color is INHERITED
   and, where it is set, it BEATS the color of every descendant. So any text
   under a background-clip:text ancestor — a foil headline, a solid button —
   arrives at the highlight already filled `transparent`, and a highlight that
   sets only `color` paints a lime slab with no word in it.

   This is stated once, here and on the four found rules below, rather than
   per clipping context. It was previously done the other way: .text-foil and
   .cf-btn--solid each carried their own ::selection rule restating this exact
   pair, byte for byte, because the rule here was missing one property. Two
   clipping contexts, two copies; a third would have needed a third. The
   found state never got its copy at all, which is how the CURRENT MATCH —
   the one drawing this brand is named after — came to render as an empty
   lime block inside every foil headline and every solid button on the site.
   → scripts/check-highlight-fill.py */
::selection {
  background: var(--cf-lime);
  color: var(--cf-schwarz);
  -webkit-text-fill-color: var(--cf-schwarz);
}

/* A brand named after a keyboard shortcut could not draw a key. A keycap is an
   OBJECT in this system's own taxonomy — a body of its own, like a control or a
   plate — so it takes the 2 px corner and a contour rather than a fill, which
   is the one thing that separates it from the code span it would otherwise be
   mistaken for. Zero specificity, so .cf-prose's own code/kbd/samp rule still
   wins inside an article. → foundations/found.html */
:where(kbd) {
  display: inline-block;
  padding: 0.1em 0.4em;
  border: var(--stroke-1) solid var(--border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.875em;
  line-height: 1.35;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   THE FOUND STATE
   Control-F is find-in-page. The brand is named after the gesture and the
   system had no drawing for its result, so every match on this site was
   whatever the browser painted — UA yellow, in three different registers.

   ONE DRAWING, TWO RUNGS. A match is a word standing on a lattice edge — a
   2 px ground line in ink, the way every object in this system is placed. The
   match the reader is standing on is the same word with the light layer
   switched on behind it. Contour before fill, and the presence ladder read as
   attention rather than as arrival.

   The ground line is not decoration and cannot be dropped: it is what holds
   the 3:1 boundary the fill cannot (lime is 1.37:1 on CF-Grau, 1.13:1 on
   Weiss), and it is what keeps the mark off colour alone. It is 2 px rather
   than the system hairline because a 1 px underline at this offset is already
   what a:not([class]) draws, and a mark must not read as a link. See
   tokens.css § 8c for the measurements and the property list this drawing
   had to be built inside.
   -------------------------------------------------------------------------- */
/* EVERY PSEUDO-ELEMENT BELOW GETS ITS OWN RULE, and the repetition is load-
   bearing. A selector list is not forgiving: one pseudo-element the browser
   has never heard of drops the WHOLE rule, every other selector in it
   included. ::target-text has been Baseline since December 2024 and
   ::highlight() only since June 2025, so a list naming both would have taken
   the older, better-supported half down with the newer one in exactly the
   browsers that still needed the fallback. :is() would not help — it is
   forgiving for selectors, not for pseudo-elements, which cannot appear in it
   at all. So: one rule each, and --found-* is what keeps them one drawing. */
:where(mark), .cf-mark {
  background-color: transparent;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--found-rule);
  text-decoration-thickness: var(--found-rule-weight);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--found-offset);
}

/* The current match, as an element.

   THE FILL IS RESTATED, not aliased to `color`, for the reason set out at
   ::selection above: inside a foil headline or a solid button this element's
   inherited -webkit-text-fill-color is `transparent` and beats --found-ink.
   Measured before this line existed: the word inside the lime slab did not
   render at all, at any size, on either designed page.

   NOTHING IS RESTATED ON THE NON-CURRENT RUNG, and that is the boundary this
   stops at. :where(mark)/.cf-mark takes `color: inherit` because a match the
   reader has not arrived at is the running text with a ground line under it —
   inside a foil, the running text is the foil, and inheriting the clip is the
   correct drawing rather than a bug it got away with. Only the rung that
   supplies its OWN ink has an ink to lose. */
.cf-mark--current {
  background-color: var(--found-light);
  color: var(--found-ink);
  -webkit-text-fill-color: var(--found-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--found-rule);
  text-decoration-thickness: var(--found-rule-weight);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--found-offset);
}

/* The current match, as a URL. A text fragment (#:~:text=…) is a reader
   arriving from a search engine or a shared link straight onto the phrase
   they were promised, and it is the one register here nothing on the page
   has to implement. ::target-text is also the reason this whole drawing
   avoids border and padding: it is a highlight pseudo-element and can have
   neither, so nothing else may either. */
::target-text {
  background-color: var(--found-light);
  color: var(--found-ink);
  -webkit-text-fill-color: var(--found-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--found-rule);
  text-decoration-thickness: var(--found-rule-weight);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--found-offset);
}

/* The Custom Highlight API half: a page that finds its own matches registers
   its ranges under these two names and the styling comes from here, so a
   search feature ships no CSS of its own and cannot draw a match differently
   from the way the server or the URL draws one.
   → foundations/found.html */
::highlight(cf-found) {
  background-color: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--found-rule);
  text-decoration-thickness: var(--found-rule-weight);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--found-offset);
}
/* The fill is restated on the highlight pseudo-elements too, and it takes: a
   highlight pseudo accepts only a short list of properties, and Chromium
   honours -webkit-text-fill-color on both of these. Verified by render — a
   ::highlight(cf-found-current) range inside a .text-foil paragraph draws its
   word without it missing. */
::highlight(cf-found-current) {
  background-color: var(--found-light);
  color: var(--found-ink);
  -webkit-text-fill-color: var(--found-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--found-rule);
  text-decoration-thickness: var(--found-rule-weight);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--found-offset);
}

/* Forced colours already has an answer for this and it is better than ours:
   Mark / MarkText are the system pair for precisely this meaning. Take them,
   and keep the two rules, so the mark survives a palette with no lime in it.
   ::selection has its own system pair and the UA applies it unasked. */
@media (forced-colors: active) {
  :where(mark), .cf-mark {
    text-decoration-color: MarkText;
  }
  /* The fill is restated here for the same reason it is restated at rest, and
     the system value has to be named rather than left to the mode: .text-foil
     hands its descendants CanvasText in forced colours, which is the pair for
     Canvas and not the pair for Mark. A match inside a foil headline would
     draw body ink on a highlight plate — legible in most themes and guaranteed
     by none of them. MarkText is the value that is guaranteed against Mark. */
  .cf-mark--current {
    background-color: Mark;
    color: MarkText;
    -webkit-text-fill-color: MarkText;
    text-decoration-color: MarkText;
  }
  ::target-text {
    background-color: Mark;
    color: MarkText;
    -webkit-text-fill-color: MarkText;
    text-decoration-color: MarkText;
  }
  ::highlight(cf-found) {
    text-decoration-color: MarkText;
  }
  ::highlight(cf-found-current) {
    background-color: Mark;
    color: MarkText;
    -webkit-text-fill-color: MarkText;
    text-decoration-color: MarkText;
  }
}

/* On paper there is no reader to stand on a match, so the current rung has
   nothing to be current against, and lime prints as a pale wash that hides
   the ink under it. Every match prints as the contour, which is the rung that
   was carrying the meaning anyway. */
@media print {
  :where(mark), .cf-mark, .cf-mark--current {
    background-color: transparent;
    color: inherit;
  }
}

hr {
  border: 0;
  border-top: var(--stroke-1) solid var(--border-strong);
  margin: 0;
}

/* --------------------------------------------------------------------------
   TYPE CLASSES
   Named after the Figma text styles so design and code stay in sync.
   -------------------------------------------------------------------------- */
.t-display-1 {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--text-display-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
}
.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.t-lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.t-body {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}
.t-body-sm {
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}

/* Mono/Label — the single most recognisable text style in the brand.
   Uppercase, 11 px, +0.01em. Used for eyebrows, counters, nav, meta. */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.t-label-lg {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
/* Numbers, counters, tabular data. */
.t-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.t-muted     { color: var(--text-muted); }
.t-secondary { color: var(--text-secondary); }

/* Measure — how wide a line of text is allowed to get. */
.measure       { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Every container is a query container, so a component can ask how much
     room it actually has instead of guessing from the viewport. A card in
     the 1280 content column and the same card in a 300 px documentation
     panel are different problems; the viewport cannot tell them apart. */
  container: layout / inline-size;
}

/* Section rhythm. The token is padding on BOTH edges, so the air between two
   adjacent sections is twice it — 240 at the reference frame. Two modifiers
   move it, and both are documented on foundations/layout.html rather than left
   to be inferred from a pattern page.

   --tight   the whole section takes --section-gap-sm instead. For a section
             that opens a page directly under the page header, where the
             header has already spent air of its own.
   --flush   the TRAILING edge only. For the last section on a page, whose
             bottom air belongs to .cf-footer--detached instead — one page can
             then not disagree with another about how far the footer stands off.

   --flush USED TO ZERO BOTH EDGES, and that was wrong twice over. Neither of
   its two users wanted a zero top edge: patterns/ueber-uns.html's team section
   came out with 120 px of air above it where every other section on the site
   has 240, and patterns/blog-artikel.html's with 80 where its siblings have
   200. And it broke the system's own idiom — every other --flush drops exactly
   the ONE edge that meets a neighbour drawing it (.cf-section-header--flush its
   bottom border and gap, .cf-pagination--flush its top margin and border).
   Dropping both was the odd one out in a family of three. */
.section {
  padding-block: var(--section-gap);
}
.section--tight { padding-block: var(--section-gap-sm); }
.section--flush { padding-block: var(--section-gap) 0; }

/* THE LAST SECTION STANDS OFF THE FOOTER AT THE SMALL RHYTHM, AND EVERY PAGE
   USES THE SAME NUMBER. Measured in the rendered image at 1440 x 900, consent
   dismissed, from the last painted row above the footer to the first row of
   its black plate, before this rule:

     120 px   ten pages whose last section is a plain .section
      80 px   the five ending on .section--tight (404, Datenschutz and the
              three confirmation pages)
     191 px   patterns/landing-page.html

   Three numbers for one edge, and the largest of them is the one the site's
   own screenshot of this seam was taken over. The landing page's is 120 + 71:
   its last section is a pin, and a released .cf-pin__stage carries 71 px of
   its own composition below the act's rule before the section's padding even
   starts. That 71 is the stage's and stays; the 120 on top of it was this
   rule's to answer, and 151 is what the same photograph measures now.

   --section-gap is the air between two sections that are both content. The
   footer is not one: it is a black plate that says the page has ended, and it
   opens with 96 px of padding of its own before the CTA. --section-gap-sm is
   what this system already reaches for when the neighbour has spent air of its
   own — .section--tight, under a page header — and it is what this edge takes:
   80 at the reference frame, 71 at 1280, 43 at 768, 32 at 375.

   :is(main, main > :last-child) is both shapes the tree actually has: thirteen
   pages whose last .section is a child of 
, and three that wrap it in an
   
 or a 
 (blog-artikel, karriere-stelle, datenschutz). Nothing
   deeper exists, and a fourth shape would show up as a page back at 120 rather
   than as a silent failure.

   :not(.section--flush) leaves the one section whose bottom edge must stay at
   zero exactly as it was. Its clearance is .cf-footer--detached's margin, and
   that rule reads the same token now, so the biconditional the two modifiers
   are held to still lands on one distance.
   → components.css .cf-footer--detached; foundations/layout.html */
:is(main, main > :last-child) > .section:last-child:not(.section--flush) {
  padding-block-end: var(--section-gap-sm);
}

/* 12-column content grid.

   Stacked first. A .col-* is full width until the container it sits in is wide
   enough to hold the split, which is the same shape .cf-statement, .cf-process
   and .cf-value-row already use: the safe layout is the default, and the wide
   one is the enhancement. A browser with no container-query support, or a .grid
   placed outside any .container, therefore stacks rather than overflowing.

   The threshold is the container's own width, not the viewport's, for the
   reason written on .container: the same two-column split is comfortable in the
   1280 px content column and cramped in a 533 px documentation panel, and only
   the container can tell those apart. 56rem is the system's two-column
   threshold — see the breakpoint register in tokens.css.

   STACKED MEANS ONE TRACK, NOT TWELVE FULL-SPAN ONES. The stacked state used
   to keep the twelve tracks and stretch every .col-* across them, which reads
   the same but is not: twelve tracks carry eleven --grid-gap gaps, and the gap
   is a rem, so it grows with the reader's font size while the viewport does
   not. At a 20 px browser default on a 320 px screen the eleven gaps alone are
   330 px inside a 270 px container — the page scrolled sideways before any
   content was placed, on all five pages built on this grid. Measured at 35 px
   of document overflow on each; foundations/layout.html carries the record.
   So the tracks are now what the state is: one track stacked, twelve only
   inside the same queries that give the spans out. .col-* pins 1 / -1, which
   is every explicit track whichever declaration is live — the two rules
   cannot disagree about a width the way a span and a track count can. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}
.col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 {
  grid-column: 1 / -1;
}

@container layout (min-width: 56rem) {
  .grid { grid-template-columns: var(--grid-tracks); }
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
}

/* A ROW THAT SPLITS SOONER.

   56rem is the system's two-column threshold and it was measured for
   .cf-statement and .cf-process — an illustration beside its copy, which
   genuinely needs that much room before splitting is worth it. .col-*
   inherited the number because it is the same shape. For a row of
   independent text blocks it is too high, and the cost is measurable rather
   than theoretical.

   Measured on the one page that uses this grid. patterns/kontakt.html's
   7 + 5 is stacked at every width below a viewport of ~1007, which draws its
   form fields 801 px wide at a 900 px viewport and 895 at 1006 — well past
   any line length a form wants — and then snaps to 522 + 366 at 1024. That
   is 238 px of viewport where the split would have been comfortable: at 900
   the row is 457 + 320.

   So the threshold belongs to the ROW, not to the system, and it cannot be
   derived from geometry. Only the author knows whether a column holds an
   illustration or a phone number, and one number cannot serve twelve spans:
   at 44rem of container a .col-6 is 340 px and comfortable while a .col-3 is
   158 px and is not. A modifier hands that call to the person who knows.

   44rem is not a new number — it is already in the register as the width
   where .subdivide folds — so this gains the register a consumer rather than
   a threshold. Tiering by SPAN rather than by row was the other candidate
   and is wrong: a 7 + 5 whose two halves promote at different widths draws
   the 7 beside a 12 and breaks the row. Pairs have to switch together.

   Additive by construction. A .grid without the modifier is unchanged, and
   the two rules never disagree — above 56rem both say the same span. The
   track list comes with the spans here for the same reason it does at 56rem:
   a span rule that fires while the stacked single track is still live would
   manufacture eleven implicit tracks — and their gaps — to satisfy itself,
   which is the overflow above by another road. */
@container layout (min-width: 44rem) {
  .grid--early { grid-template-columns: var(--grid-tracks); }
  .grid--early > .col-2 { grid-column: span 2; }
  .grid--early > .col-3 { grid-column: span 3; }
  .grid--early > .col-4 { grid-column: span 4; }
  .grid--early > .col-5 { grid-column: span 5; }
  .grid--early > .col-6 { grid-column: span 6; }
  .grid--early > .col-7 { grid-column: span 7; }
  .grid--early > .col-8 { grid-column: span 8; }
}

/* A ROW WHOSE CELLS ARE SECTIONS.

   --grid-gap is the distance between two cells of one row. It is the wrong
   distance the moment that row stacks and each cell opens with a section header
   of its own: the header already claims more air above itself than 24 px, so
   the two blocks run together and the second one reads as a continuation of the
   first rather than as the next thing. --section-gap-sm is the distance the
   rest of the system uses between a header and whatever came before it, which
   is what these are once they are one under the other.

   Only row-gap moves. Side by side there is one row, so this modifier is inert
   above the split and the column rhythm is never touched.

   It exists as a class for the reason .flow-8 does: patterns/kontakt.html had
   this decision written as `style="row-gap: var(--section-gap-sm)"`, and
   foundations/layout.html documents it as a rule of the system — a rule
   reachable only by copying an attribute off one page is not one.
   → foundations/layout.html#columns */
.grid--sections { row-gap: var(--section-gap-sm); }

/* THE CODA — what follows a register that has already closed.

   A register in this system is a stack of type blocks standing on hairlines
   and closing on one: .cf-vacancies, .cf-results, .cf-contact. Twice the site
   puts a sentence after one of them inside the same section — the initiative
   application under the open positions, the pointer to Karriere under the
   contact list — and both times the distance was written as an inline
   margin-top, at TWO DIFFERENT VALUES: --space-12 on patterns/karriere.html
   and --space-8 on patterns/kontakt.html. One relationship, two numbers,
   neither reachable from anywhere but the page it was typed on. That is the
   third time this exact substitution has happened here, after .flow-8 and
   .grid--sections, and it is the last one left in the pattern pages.

   THE NUMBER IS NOT A NEW DECISION. .cf-pagination already answers this
   question — it is the thing that follows a closed register, and it stands
   --space-8 off it, for the reason written at that rule: the distance belongs
   to the shape rather than to the page, so every page wants the same one. A
   coda is the same shape without the controls. So kontakt was right and
   karriere was 16 px generous, and the two now measure the same.

   Not a .flow-* rung, deliberately. The rungs are resolved on the CHILD — the
   margin is declared on `* + *` — so a child that carries a rung of its own
   overrides the one its parent meant, and karriere's coda is a .stack .flow-6
   of a sentence over a button. This is one element's distance from the thing
   above it, which is what a margin says.
   → foundations/layout.html#flow */
.after-register { margin-top: var(--space-8); }

/* FLOW PRIMITIVES — two ways of putting things in a line, one way of spacing
   them.

   .stack     down the block axis, spacing as margin between siblings
   .cluster   along the inline axis, spacing as gap, wrapping

   Both read --flow and both default to --space-4, so ONE set of rungs tunes
   either. That symmetry is the point of this block. It did not hold before:
   .stack carried five modifiers and .cluster carried a hard-coded gap, so the
   first author who wanted a wider cluster had nothing to reach for and wrote
   `style="gap:var(--space-8)"` on it — foundations/logo.html, the system's
   only inline spacing override. A rung the family was missing became a length
   in the markup, which is the exact failure the space scale exists to prevent.

   The rungs are their own family rather than .stack--N, because they belong to
   neither primitive: .flow-8 means the same thing on both, and a name that
   says `stack` on a cluster would have to be read as a lie or duplicated.
   They are the scale's own step numbers, so .flow-8 is --space-8 is 32 px.

   .split IS GONE. It was `.cluster` plus `justify-content: space-between` and
   minus the wrap, declared in shipping CSS and used by nothing — no pattern
   page, no component page, no foundation. Twelve components do write those
   same three declarations, but they write them on their own class names, which
   a markup utility cannot reach without a build step this system does not
   have. So the primitive was not being bypassed, it was simply never wanted.
   It comes back as a modifier, where it costs two lines instead of five and
   inherits the rungs: .cluster--between. */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--flow, var(--space-4)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--flow, var(--space-4));
}
/* Pushes the row's ends apart. No wrap: space-between on a wrapped row strands
   the last line's items at opposite edges, which is never what the caller of a
   two-ended row means. */
.cluster--between { flex-wrap: nowrap; justify-content: space-between; }

.flow-2  { --flow: var(--space-2); }
.flow-3  { --flow: var(--space-3); }
.flow-6  { --flow: var(--space-6); }
.flow-8  { --flow: var(--space-8); }
.flow-12 { --flow: var(--space-12); }

/* A ROW OF EQUAL TILES THAT FOLDS ON ITS OWN.

   .grid divides a fixed twelve. This divides by however many fit: the count is
   never declared, the browser derives it from one number — the smallest a tile
   is allowed to be — and reflows without a query.

   IT IS A PRIMITIVE BECAUSE THE SYSTEM ALREADY HAD IT TWENTY TIMES. The three
   declarations below were written out by hand in components.css once, in
   docs.css three times, and in sixteen page-local