/* Alker deck system v2: tokens, zones, type and shared components (design-spec.md).
   Every slide is 1920 × 1080 px = pt in Keynote. Coordinates are panel coordinates
   (the panel sits 20 inside the slide): content from y 96, hanging line y 400, floor
   y 918 (854 with a source line), source line ends at y 942, footer at y 982 (Mono 16).
   The floor keeps 64 clear above the footer, and 64 above a source line of one line; the
   source line ends 40 above the footer.
   Family files (a.css … charts.css) use only these tokens and the tone variables. */

@font-face {
  font-family: GT;
  src: url("../fonts/gt-standard-condensed-black-oblique.woff2") format("woff2");
  font-weight: 100 1000;
}
@font-face {
  font-family: Tobias;
  src: url("../fonts/tobias-regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "GT Mono";
  src: url("../fonts/gt-standard-mono-regular.woff2") format("woff2");
  font-weight: 100 599;
}
@font-face {
  font-family: "GT Mono";
  src: url("../fonts/gt-standard-mono-bold.woff2") format("woff2");
  font-weight: 600 1000;
}

:root {
  --font-gt: GT, Arial, sans-serif;
  --font-tobias: Tobias, Georgia, serif;
  --font-mono: "GT Mono", "Courier New", monospace;

  /* The palette, nothing else */
  --ink: #0b0b0a;
  --paper: #fff;
  --offwhite: #e4e1df;
  --cream: #f2efe9;
  --anthracite: #646464;
  --rule: #c6c3c1;
  --neon: #d2ff00;
  --midgrey: #979491; /* only in charts: the comparison level (vergleich), via --mid-series */
  --ink-30: rgba(11, 11, 10, 0.3);
  --cream-30: rgba(242, 239, 233, 0.3);
  --lean: -10deg;

  /* Grid: 12 × 104, gutter 40, from x 96 */
  --rim: 20px;
  --radius: 24px;
  --margin: 96px;
  --col: 104px;
  --gutter: 40px;
  --w2: 248px;
  --w3: 392px;
  --w4: 536px;
  --w5: 680px;
  --w6: 824px;
  --w7: 968px;
  --w8: 1112px;
  --w9: 1256px;
  --w10: 1400px;
  --w11: 1544px;
  --w12: 1688px;

  /* Zones (panel y) */
  --top: 96px;
  --hang: 400px; /* hanging line */
  --floor: 918px;
  --floor-src: 854px;
  --source-bottom: 942px;
  --footer-y: 982px;

  /* Rhythm */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s12: 96px;

  /* Type scale */
  --chapter: 300px;
  --big: 260px;
  --h-xl: 224px;
  --zahlen: 190px; /* GT, the two values of vorher-nachher zahlen */
  --h-l: 136px;
  --tile: 130px;
  --tile-2: 80px; /* GT, the second tile row of D3 */
  --h-m: 100px;
  --h-s: 64px;
  --card: 54px;
  --h-xs: 44px;
  --t36: 36px;
  --lead: 40px;
  --body-l: 36px;
  --steps: 30px;
  --body: 27px;
  --mid: 26px;
  --small: 24px;
  --small-min: 22px;
  --mail: 32px;
  --text-l: 32px; /* Tobias, light text and conclusions */
  --quote: 56px; /* Tobias, single quote */
  --v56: 56px; /* GT values */
  --v32: 32px;
  --v26: 26px;
  --nav: 22px; /* GT, chapter titles in the compact chapter list of A4 verlauf */
  --data-label: 22px;
  --label: 20px;
  --key: 18px;
  --caption: 18px;
  --source: 18px;
  --foot: 16px; /* the footer, a step below the source line (Oktober 2026) */
  --tick: 16px;

  /* Cap height per em of the three typefaces: OS/2 sCapHeight of the fonts, and measured in
     Chrome (canvas, „H“ at 1000 px); web and desktop cuts agree, so screen and PDF do too.
     GT and GT Mono 705 / 1000, Tobias 708 / 1000. (Ascent and descent, should a layout need
     them: GT and Mono 0.970 / 0.190, Tobias 0.950 / 0.212.) Used by .nr below and by the
     ink block (0.705). */
  --versal-gt: 0.705;
  --versal-mono: 0.705;
  --versal-tobias: 0.708;

  /* Icons */
  --icon-s: 24px;
  --icon-m: 48px;
  --icon-l: 72px;
  --icon-xl: 120px;
}

@page {
  size: 1920px 1080px;
  margin: 0;
}
* {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font: 400 16px/1.5 var(--font-mono);
  color: var(--ink);
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
p,
figure,
ul,
ol,
dl,
dd,
blockquote {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Slide, panel, tones ---------- */
.slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  padding: var(--rim);
  background: var(--offwhite);
  overflow: hidden;
  break-after: page;
  page-break-after: always;
}
.panel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  /* Tone variables: every family file colours with these, never with fixed values. */
  --bg: var(--offwhite);
  --fg: var(--ink);
  --fg2: var(--anthracite); /* metadata only, never content */
  --line: var(--rule); /* thin separators */
  --line-strong: var(--ink); /* 2 px heads of columns, tiles, conclusions */
  --leader: var(--ink-30); /* dashed leaders and dashed separators */
  --surface: var(--paper); /* inner surfaces: boxes, cells, placeholders */
  --track: var(--paper); /* chart tracks */
  --bar: var(--rule); /* chart marks that are not the key */
  --key-fill: var(--ink); /* the key mark of a chart */
  --mid-series: var(--midgrey); /* a chart's comparison mark (vergleich), between key and rest */
  --on-mid: var(--ink); /* text on a comparison mark */
  --on-key: var(--cream); /* text on a key fill or ink surface */
  background: var(--bg);
  color: var(--fg);
}
.white .panel {
  --bg: var(--paper);
  --surface: var(--offwhite);
  --track: var(--offwhite);
}
.black .panel {
  --bg: var(--ink);
  --fg: var(--cream);
  --fg2: var(--rule);
  --line: var(--cream-30);
  --line-strong: var(--cream);
  --leader: var(--cream-30);
  --surface: rgba(242, 239, 233, 0.08);
  --track: var(--anthracite);
  --bar: var(--anthracite);
  --key-fill: var(--neon);
  --mid-series: var(--rule); /* key neon, comparison rule, rest anthracite */
  --on-key: var(--ink);
}
.neon .panel {
  --bg: var(--neon);
  --fg: var(--ink);
  --fg2: var(--ink);
  --line: var(--ink-30);
  --line-strong: var(--ink);
  --leader: var(--ink-30);
  --surface: rgba(11, 11, 10, 0.06);
  --track: rgba(11, 11, 10, 0.12);
  --bar: var(--ink-30);
  --key-fill: var(--ink);
  --mid-series: rgba(11, 11, 10, 0.6);
  --on-mid: var(--neon);
  --on-key: var(--neon);
}

/* ---------- Zones ---------- */
.content {
  position: absolute;
  top: var(--top);
  left: var(--margin);
  right: var(--margin);
  bottom: calc(1040px - var(--floor));
}
.has-source .content {
  bottom: calc(1040px - var(--floor-src));
}
.floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.hang {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hang) - var(--top));
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, var(--col));
  column-gap: var(--gutter);
  align-items: start;
}
.footer {
  position: absolute;
  top: var(--footer-y);
  left: var(--margin);
  right: var(--margin);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  font: 400 var(--foot) / 1 var(--font-mono);
  letter-spacing: 0.04em; /* a touch more than 0.03 at 18: small caps need the air */
  text-transform: uppercase;
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}
.footer b {
  font-weight: 700;
  color: var(--fg);
}
/* the page number (the second half; a slide with a picture in its place has none) never
   breaks; a footer too long for one line wraps on the left, and qa.py reports it
   (build.py warns before) */
.footer > span + span {
  white-space: nowrap;
}
.source {
  position: absolute;
  left: var(--margin);
  right: calc(var(--margin) + var(--w3) + var(--gutter)); /* c1-9 */
  bottom: calc(1040px - var(--source-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 400 var(--source) / 1.35 var(--font-mono);
  color: var(--fg2);
}
.source b {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 0.5em;
}

/* Head, main element and conclusion in one column (.zone-head, .zone-main): the main
   element hangs on y 400 when the head leaves room (.zone-hang: the head block then
   reaches down to 336), otherwise it follows 64 below the head (40 below a lone
   label). The conclusion stands on the floor with at least 64 clear above it, so the
   two never run into each other; content that is too long shows up below the floor. */
:has(> .zone-main) {
  display: flex;
  flex-direction: column;
}
:has(> .zone-main) > * {
  flex: none;
}
.zone-main {
  margin-top: var(--s8);
}
.zone-head:not(:has(.h, .lead, p)) + .zone-main {
  margin-top: var(--s5);
}
:has(> .zone-main.zone-hang) > .zone-head {
  min-height: calc(var(--hang) - var(--top) - var(--s8));
}
.zone-main:has(+ .folgerung) {
  margin-bottom: var(--s8);
}
.zone-main + .folgerung {
  position: static;
  margin-top: auto;
}

/* ---------- Type ---------- */
.label {
  display: block;
  font: 700 var(--label) / 1.2 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.label-long {
  display: block;
  font: 400 var(--body) / 1.35 var(--font-tobias);
  letter-spacing: -0.012em;
  margin-bottom: var(--s3);
  color: var(--fg2);
}
.key {
  display: block;
  font: 700 var(--key) / 1.25 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* The system caption under a picture (core.caption): Mono 18 / 1.4 in --fg2, 16 under
   the picture. With a number (.has-n): the number Mono Bold 18 in --fg, 12 px, the text;
   a second text line stays under the first. */
.caption {
  font: 400 var(--caption) / 1.4 var(--font-mono);
  margin-top: var(--s2);
  color: var(--fg2);
}
.caption.has-n {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
}
.caption .cap-n {
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tick {
  font: 400 var(--tick) / 1 var(--font-mono);
  color: var(--fg2);
}
.h,
.gt {
  font-family: var(--font-gt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  word-spacing: 0.015em;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}
/* The ink block lies behind the whole headline: a stacking context of its own, but only
   where there is a block. On every headline it made Chrome write the headline behind the
   running text into the PDF (reading order, copied text). */
.h:has(.ink),
.gt:has(.ink) {
  isolation: isolate;
}
.h {
  line-height: 0.98;
}
/* Numbers in GT: the narrow space before % and € (U+202F) has no glyph in GT and is
   0.047 em in the browser, so „12.000 €“ reads as „12.000€“. core.txt() sets the unit in
   .unit; 0.06 em before it make the gap about 0.1 em, a word space of GT. One setting for
   every family (R8); the families and the charts repeat it only for GT text that carries
   neither .h nor .gt. */
.h .unit,
.gt .unit,
.marke-wert .unit {
  margin-inline-start: 0.06em;
}
.h-xl {
  font-size: var(--h-xl);
  line-height: 0.92;
}
.h-l {
  font-size: var(--h-l);
  line-height: 0.95;
}
.h-m {
  font-size: var(--h-m);
}
.h-s {
  font-size: var(--h-s);
  line-height: 1;
}
.h-card {
  font-size: var(--card);
}
.h-xs {
  font-size: var(--h-xs);
  line-height: 1.02;
}
.h-36 {
  font-size: var(--t36);
  line-height: 1.02;
}
.lead,
.body-l,
.steps-text,
.body,
.mid,
.small,
.small-min {
  font-family: var(--font-tobias);
  font-weight: 400;
  letter-spacing: -0.012em;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  text-wrap: pretty;
}
.lead {
  font-size: var(--lead);
  line-height: 1.26;
}
.body-l {
  font-size: var(--body-l);
  line-height: 1.4;
}
.steps-text {
  font-size: var(--steps);
  line-height: 1.3;
}
.body {
  font-size: var(--body);
  line-height: 1.45;
}
.mid {
  font-size: var(--mid);
  line-height: 1.38;
}
.small {
  font-size: var(--small);
  line-height: 1.42;
}
.small-min {
  font-size: var(--small-min);
  line-height: 1.4;
}
:is(.lead, .body-l, .body, .mid, .small, .small-min) p + p {
  margin-top: 0.6em;
}
.h + .lead {
  margin-top: var(--s5);
}
.h + .body,
.h + :is(.mid, .small),
.lead + .body {
  margin-top: var(--s4);
}
.nobr {
  white-space: nowrap;
}
/* §3 Umbruch: names, numbers, codes and hyphen compounds are never hyphenated (core.txt,
   satz.py); the build also sets it on a word whose hyphenation it takes back */
.nohy {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.muted {
  color: var(--fg2);
}

/* ---------- Number beside its entry: cap top on cap top (design-spec §7) ----------
   Jürgen, 4 Oct 2026: „Ja, Oberkante überall“. Wherever a number (Mono or GT) stands beside
   its entry in a row, the cap top of the number lies on the cap top of the first line of
   that text. One mechanism for every layout:

     .nr      the number            .nr-zu   its text: the element beside the number whose
                                             first line it belongs to (a title, a sentence,
                                             or a block that starts with one)
     --zu     the type size of that first line, set on the row or on the number

   Both stand on one baseline (grid and flex items by align-self, inline elements anyway);
   the number is then moved up by the difference of the two cap heights, so no line height
   enters the sum; in a row that stood on the baseline already nothing but the number moves
   (a row that was top-aligned: system/API.md §3, what to check):

     top = cap(number) × its size − cap(text) × --zu        (0.705 em − 0.708 × --zu)

   A text in one of the roles of this file tells its size itself (the :has() rules below);
   for a size a family sets, the family sets --zu in the same rule („.x-row { --zu: 30px }“).
   Without --zu the number is not moved, and qa.py reports it („Nummer nicht an der
   Oberkante“, more than 2 px). --zu-versal (the cap height of the text's typeface, default
   Tobias) and --nr-versal (of the number's, default Mono) follow from .gt / .h; they differ
   by 0.003 em. Not meant: a number above its text, and number and text in one size on one
   baseline (the caption „01 Paris“). */
.nr,
.nr-zu {
  align-self: baseline;
}
.nr {
  position: relative;
  top: calc(var(--nr-versal, var(--versal-mono)) * 1em - var(--zu-versal, var(--versal-tobias)) * var(--zu));
}
.nr:is(.h, .gt) {
  --nr-versal: var(--versal-gt);
}
:has(> .nr-zu:is(.h, .gt)) {
  --zu-versal: var(--versal-gt);
}
:has(> .nr-zu.h-s) {
  --zu: var(--h-s);
}
:has(> .nr-zu.h-card) {
  --zu: var(--card);
}
:has(> .nr-zu.h-xs) {
  --zu: var(--h-xs);
}
:has(> .nr-zu.h-36) {
  --zu: var(--t36);
}
:has(> .nr-zu.lead) {
  --zu: var(--lead);
}
:has(> .nr-zu.body-l) {
  --zu: var(--body-l);
}
:has(> .nr-zu.steps-text) {
  --zu: var(--steps);
}
:has(> .nr-zu.body) {
  --zu: var(--body);
}
:has(> .nr-zu.mid) {
  --zu: var(--mid);
}
:has(> .nr-zu.small) {
  --zu: var(--small);
}
:has(> .nr-zu.small-min) {
  --zu: var(--small-min);
}

/* ---------- The neon ink block: one construction, as on alker.io ---------- */
.ink {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--ink);
  padding-inline: 0.07em;
  margin-inline-start: 0.16em;
}
.ink.ink-mid {
  margin-inline-end: 0.16em;
}
/* a block that starts its line stands on the edge of the column: its lowest left corner,
   the point that reaches furthest left, lies on the edge. That point lies 0.06em (the inset of
   ::before) plus half the block height times tan 10° (the lean) left of the box, so the margin
   is exactly that much; nothing reaches past the column, as the letters of the lines above. */
.ink.ink-start {
  margin-inline-start: 0.145em;
  margin-inline-start: calc(0.06em + 0.0882lh);
}
.ink::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* The block is exactly one line pitch high and centred on the capitals, so its top
     edge lies midway between the line above and the inked word, its bottom edge midway
     to the line below (measured: cap height 0.705 em, offset 0.036 em at every size). */
  inset: 0.036em -0.06em -0.036em;
  background: var(--neon);
  transform: skewX(var(--lean));
}
.neon .ink,
.neon .ink.ink-start {
  margin-inline: 0;
  padding-inline: 0;
}

/* ---------- Wordmark, arrow, icons ---------- */
.wordmark {
  display: block;
  width: 230px;
  height: auto;
}
.black .wordmark {
  color: var(--neon);
}
.mark-tl {
  position: absolute;
  top: var(--top);
  left: var(--margin);
}
.arrow {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.08em;
}
.icon {
  display: block;
  flex: none;
  color: currentColor;
}
.icon-s {
  width: var(--icon-s);
  height: var(--icon-s);
}
.icon-m {
  width: var(--icon-m);
  height: var(--icon-m);
}
.icon-l {
  width: var(--icon-l);
  height: var(--icon-l);
}
.icon-xl {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

/* ---------- Pictures: square-cornered, as on the site ---------- */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.photo.square {
  aspect-ratio: 1;
}
.photo.portrait {
  aspect-ratio: 2 / 3;
}
.photo.wide {
  aspect-ratio: 16 / 9;
}
.photo.fill {
  width: 100%;
  height: 100%;
}
.photo.ph {
  display: flex;
  align-items: flex-start;
  padding: var(--s3);
  font: 400 var(--caption) / 1.4 var(--font-mono);
  color: var(--fg2);
}
/* The word before the placeholder's text comes from the build, in the deck's language
   (core.placeholder: data-wort="Bildplatz" or "Placeholder"); a stylesheet writes no word. */
.photo.ph[data-wort]::before {
  content: attr(data-wort) " · ";
  font-weight: 700;
  white-space: pre;
}
.photo.video video,
.photo.video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.print-only {
  display: none !important;
}
.video-link {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  padding: 12px 16px;
  background: var(--ink);
  color: var(--cream);
  font: 700 var(--key) / 1 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase; /* a key like every Mono Bold 18 (R8) */
}

/* ---------- Shared components ---------- */
/* The one conclusion of a page, on the floor. Its rule runs as wide as the main
   element above it (c1-12 unless a layout keeps a column beside it free); the
   sentence stays in c1-8 for the line length. 64 clear above it. */
.folgerung {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 2px solid var(--line-strong);
  padding-top: 20px;
}
.folgerung p {
  max-width: var(--w8);
}
.folgerung .key {
  margin-bottom: var(--s2);
}
.folgerung p {
  font: 400 var(--text-l) / 1.32 var(--font-tobias);
  letter-spacing: -0.012em;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4; /* §3: no break in words under 10 characters */
  text-wrap: pretty;
}
.folgerung.dicht p {
  font-size: 28px;
}
/* Sequence like the website's loop line: SEE IT. / BUILD IT. / BACK IT. */
.tags {
  margin-top: var(--s5);
  padding-top: 12px;
  border-top: 1.5px solid var(--line);
  font: 700 var(--key) / 1.4 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tags .sep {
  color: var(--fg2);
  font-weight: 400;
}
/* Link to another slide: → FOLIE 19 */
.ref {
  display: inline-block;
  margin-top: var(--s2);
  font: 700 var(--key) / 1.25 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}
/* Assumption: dashed instead of solid, with a key */
.annahme {
  border-top-style: dashed !important;
  border-top-color: var(--fg2) !important;
}

/* ---------- Conclusion, two more forms (core.pointe, core.abgrenzung) ---------- */
/* pointe: the line of the conclusion, one to three words GT 64, ink on the last word */
.folgerung .pointe-h {
  font-size: var(--h-s);
  line-height: 1;
}
/* abgrenzung: NICHT under a dashed line, SONDERN under the solid line; key in c1,
   the sentence (Tobias 32/1.32 from .folgerung p) in c2-8 */
.panel .folgerung.abgrenzung {
  border-top: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.abgr-row {
  display: grid;
  grid-template-columns: var(--col) minmax(0, var(--w7));
  column-gap: var(--gutter);
  align-items: baseline;
  padding-top: 20px;
  border-top: 2px solid var(--line-strong);
}
.abgr-row.nicht {
  border-top: 2px dashed var(--fg2);
}
.folgerung .abgr-row .key {
  margin-bottom: 0;
}

/* ---------- Focus: items outside fokus: are dimmed, never further ----------
   60 %: ink on offwhite becomes about #62615f (4.7:1, the level of anthracite), so a
   dimmed sentence stays readable at laptop scale; 35 % (2.3:1) was too faint. */
.is-dim {
  opacity: 0.6;
}
.is-dim .is-dim {
  opacity: 1;
}
/* A second level that is anthracite already (time keys, roles, captions, running numbers,
   GEPLANT) would be weakened twice and end near 2.3 : 1, below „nie schwächer“ (design-spec
   §7 Fokus). Inside a dimmed entry it takes the text colour, in every family; .schritt-dim
   is the same state under `aufbau: hervor` (praes.css). */
.is-dim,
.schritt-dim {
  --fg2: var(--fg);
}

/* ---------- Series marker (build.py, top right of every member slide) ---------- */
.serie-pos {
  position: absolute;
  top: var(--top);
  right: var(--margin);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.serie-sq {
  display: flex;
  gap: var(--s1);
}
.serie-sq i {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--leader);
}
.serie-sq i.on {
  background: var(--fg);
}
/* with glied: one square-cornered cell per member, the current one filled */
.serie-pos.glieder {
  gap: 0;
  max-width: var(--w6);
  margin: 0;
  padding: 0;
}
.serie-pos.glieder li {
  display: block;
  padding: 7px 12px 6px;
  border: 2px solid var(--fg);
  font: 700 var(--key) / 1.25 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
}
.serie-pos.glieder li + li {
  margin-left: -2px;
}
.serie-pos.glieder li.on {
  background: var(--fg);
  color: var(--on-key);
}

/* ---------- Value tag (core.marke): key on the light surface, value on --fg ---------- */
.marke {
  display: inline-flex;
  align-items: stretch;
  vertical-align: top;
}
.marke-key {
  display: flex;
  align-items: center;
  padding: 0 var(--s2);
  background: var(--surface);
  color: var(--fg);
  font: 700 var(--key) / 1.25 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.marke-wert {
  display: flex;
  align-items: center;
  padding: 12px var(--s2) 8px;
  background: var(--fg);
  color: var(--on-key);
  font: 700 var(--h-xs) / 1.02 var(--font-gt);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Comparison under a value (core.vergleich_html) ---------- */
.vergleich {
  display: block;
  margin-top: var(--s1);
  font: 400 var(--key) / 1.25 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg2);
}
.vergleich b {
  font-weight: 700;
  color: var(--fg);
  margin-left: 0.5em;
}

/* ---------- T2 Fokustest (core.py, test bench only) ---------- */
.l-t2 .t2-list {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
/* number, title and sentence of a row stand on one baseline (the number then hangs on the
   cap line of the title: .nr) */
.l-t2 .t2-row > .small {
  align-self: baseline;
}
/* a row with one cell: the sentence 16 behind its number (R2) */
.l-t2 .t2-pair {
  display: flex;
  column-gap: var(--s2);
}
.l-t2 .t2-pair > .nr-zu {
  max-width: var(--w8);
}
/* nummer: the pairings of test-nummern. Two sizes no role class of this file carries: the
   row sets --zu itself, as a family does for its own sizes. */
.l-t2 .t2-mono {
  font: 400 var(--caption) / 1.4 var(--font-mono);
}
.l-t2 .t2-v26 {
  font-size: var(--v26);
  line-height: 1;
}
.l-t2 .t2-nav {
  font-size: var(--nav);
  line-height: 1.05;
}
.l-t2 .t2-row:has(> .t2-nav.nr-zu) {
  --zu: var(--nav);
}
.l-t2 .t2-textl {
  font: 400 var(--text-l) / 1.32 var(--font-tobias);
  letter-spacing: -0.012em;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  text-wrap: pretty;
}
.l-t2 .t2-row:has(> .t2-textl.nr-zu) {
  --zu: var(--text-l);
}
/* nummer: … unten: the number stays on the baseline, as before 4 Oct 2026. Only for
   _tests/_test-qa: qa.py must report it. */
.l-t2 .t2-row.unten > .nr {
  top: 0;
}
.l-t2 .zone-main {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}
.l-t2 .t2-side {
  display: flex;
  align-items: flex-start;
  gap: var(--s6);
}
.l-t2 .t2-bs {
  display: flex;
  gap: var(--s5);
}
.l-t2 .t2-bs .ref {
  margin-top: var(--s1);
}

/* ---------- Column spans: .cA-B spans columns A to B ---------- */
.c1-1{grid-column:1/2}.c1-2{grid-column:1/3}.c1-3{grid-column:1/4}.c1-4{grid-column:1/5}.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-8{grid-column:1/9}.c1-9{grid-column:1/10}.c1-10{grid-column:1/11}.c1-11{grid-column:1/12}.c1-12{grid-column:1/13}
.c2-2{grid-column:2/3}.c2-3{grid-column:2/4}.c2-4{grid-column:2/5}.c2-5{grid-column:2/6}.c2-6{grid-column:2/7}.c2-7{grid-column:2/8}.c2-8{grid-column:2/9}.c2-9{grid-column:2/10}.c2-10{grid-column:2/11}.c2-11{grid-column:2/12}.c2-12{grid-column:2/13}
.c3-3{grid-column:3/4}.c3-4{grid-column:3/5}.c3-5{grid-column:3/6}.c3-6{grid-column:3/7}.c3-7{grid-column:3/8}.c3-8{grid-column:3/9}.c3-9{grid-column:3/10}.c3-10{grid-column:3/11}.c3-11{grid-column:3/12}.c3-12{grid-column:3/13}
.c4-4{grid-column:4/5}.c4-5{grid-column:4/6}.c4-6{grid-column:4/7}.c4-7{grid-column:4/8}.c4-8{grid-column:4/9}.c4-9{grid-column:4/10}.c4-10{grid-column:4/11}.c4-11{grid-column:4/12}.c4-12{grid-column:4/13}
.c5-5{grid-column:5/6}.c5-6{grid-column:5/7}.c5-7{grid-column:5/8}.c5-8{grid-column:5/9}.c5-9{grid-column:5/10}.c5-10{grid-column:5/11}.c5-11{grid-column:5/12}.c5-12{grid-column:5/13}
.c6-6{grid-column:6/7}.c6-7{grid-column:6/8}.c6-8{grid-column:6/9}.c6-9{grid-column:6/10}.c6-10{grid-column:6/11}.c6-11{grid-column:6/12}.c6-12{grid-column:6/13}
.c7-7{grid-column:7/8}.c7-8{grid-column:7/9}.c7-9{grid-column:7/10}.c7-10{grid-column:7/11}.c7-11{grid-column:7/12}.c7-12{grid-column:7/13}
.c8-8{grid-column:8/9}.c8-9{grid-column:8/10}.c8-10{grid-column:8/11}.c8-11{grid-column:8/12}.c8-12{grid-column:8/13}
.c9-9{grid-column:9/10}.c9-10{grid-column:9/11}.c9-11{grid-column:9/12}.c9-12{grid-column:9/13}
.c10-10{grid-column:10/11}.c10-11{grid-column:10/12}.c10-12{grid-column:10/13}
.c11-11{grid-column:11/12}.c11-12{grid-column:11/13}
.c12-12{grid-column:12/13}

/* ---------- QA overlay (build.py --raster) ---------- */
.raster-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}
.raster-overlay .raster-cols {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--margin);
  right: var(--margin);
  display: grid;
  grid-template-columns: repeat(12, var(--col));
  column-gap: var(--gutter);
}
.raster-overlay .raster-cols span {
  background: rgba(210, 255, 0, 0.18);
  border-left: 1px solid var(--ink-30);
  border-right: 1px solid var(--ink-30);
  font: 700 14px/1 var(--font-mono);
  color: var(--ink);
  padding: 6px 4px;
}
.raster-overlay .raster-z {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--ink-30);
  font: 700 14px/1 var(--font-mono);
  font-style: normal;
  color: var(--ink);
  padding: 4px 8px;
  text-align: right;
}

@media print {
  .screen-only {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  .video-link.print-only {
    display: inline-block !important;
  }
}