/* Base styles: font, type roles, container, section surfaces, focus ring and the reveal start state. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
}

/* Metric-matched fallback for Montserrat (spec 13: CLS). Until the web font has loaded, display text
   is set in Arial Bold or a metric-compatible clone (Liberation Sans on Linux, Arimo), scaled to
   Montserrat's average advance width per weight and given Montserrat's vertical metrics (ascent 968,
   descent 251, line gap 0 per 1000 units; Chromium scales the overrides by size-adjust, hence
   divided by it). Line breaks and line boxes stay the same when the font swaps, on every platform,
   instead of depending on the system-ui face. Display text only uses the weights 600 and 700.
   unicode-range is the cmap of montserrat-latin.woff2: characters the web font lacks (→, ↗) keep
   coming from system-ui before and after the swap. */
@font-face {
  font-family: "Montserrat Fallback";
  font-style: normal;
  font-weight: 600;
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
    local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
  size-adjust: 108.4%;
  ascent-override: 89.3%;
  descent-override: 23.15%;
  line-gap-override: 0%;
  unicode-range:
    U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2009, U+200B,
    U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Montserrat Fallback";
  font-style: normal;
  font-weight: 700;
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
    local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
  size-adjust: 110.5%;
  ascent-override: 87.6%;
  descent-override: 22.71%;
  line-gap-override: 0%;
  unicode-range:
    U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2009, U+200B,
    U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Light surface variables are the default; .surface-* classes switch them per section (10.6). */
:root,
.surface-white,
.surface-paper {
  --text: var(--navy-900);
  --text-muted: var(--ink-muted);
  --accent: var(--orange-ink);
  --rule: var(--line);
  --focus: var(--orange-ink);
  --hover-bg: var(--paper);
  --plate-border: var(--navy-900);
  --plate-bg: transparent;
  --button-bg: var(--button-light);
  --button-hover: var(--button-light-hover);
  --button-border: var(--line-strong);
  --button-text: var(--navy-900);
  --badge-live: var(--label-live);
  --badge-live-bg: var(--label-live-bg);
  --badge-early: var(--label-early);
  --badge-early-bg: var(--label-early-bg);
  --badge-wait: var(--label-wait);
  --badge-wait-bg: var(--label-wait-bg);
}

.surface-night,
.surface-deep {
  --text: var(--white);
  --text-muted: var(--muted-on-dark);
  --accent: var(--orange);
  --rule: var(--navy-600);
  --focus: var(--orange);
  --hover-bg: var(--navy-700);
  --plate-border: rgba(255, 255, 255, 0.24);
  --plate-bg: var(--navy-700);
  --button-bg: var(--button-dark);
  --button-hover: var(--button-dark-hover);
  --button-border: var(--button-dark-border);
  --button-text: var(--white);
  --badge-live: var(--label-live-dark);
  --badge-live-bg: var(--label-live-bg-dark);
  --badge-early: var(--label-early-dark);
  --badge-early-bg: var(--label-early-bg-dark);
  --badge-wait: var(--label-wait-dark);
  --badge-wait-bg: var(--label-wait-bg-dark);
}

.surface-white {
  background-color: var(--white);
  color: var(--text);
}

.surface-paper {
  background-color: var(--paper);
  color: var(--text);
}

.surface-night {
  background-color: var(--navy-900);
  color: var(--text);
}

.surface-deep {
  background-color: var(--navy-950);
  color: var(--text);
}

body {
  margin: 0;
  background-color: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
}

img,
svg {
  max-width: 100%;
}

p {
  max-width: 65ch;
}

/* Line breaks (typesetting rules of 09.10.2026). Running text avoids a single word in its last line.
   German running text below 768 px hyphenates long compounds only (12+ characters with 5 on each
   side; Chromium counts punctuation), so short words ("spei-chern.") and names ("Mo-mentum") stay
   whole; from 768 px the 65ch measure takes every word whole. Display text (headings, leads, row titles) is balanced and never hyphenated
   automatically. */
:is(p, li, dd, td, figcaption) {
  text-wrap: pretty;
}

@media (max-width: 767.98px) {
  :lang(de) :is(p, li):not(.lead) {
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
}

h1,
h2,
h3 {
  margin-block: 0 var(--space-5);
  font-family: var(--font-display);
}

:is(h1, h2, h3, h4, .lead, .index-row-title) {
  text-wrap: balance;
}

h1,
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  font-weight: var(--fw-display-xl);
}

.display-l {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
  letter-spacing: var(--ls-display-l);
  font-weight: var(--fw-display-l);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-h3);
}

.lead {
  hyphens: manual;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  font-weight: var(--fw-lead);
}

.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  font-weight: var(--fw-small);
}

/* Calm label (D20): system font, normal case, semibold, muted. */
.label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-label);
}

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

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--section-space);
}

.band > * + section {
  margin-top: var(--space-8);
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  hyphens: manual;
  border: 0;
}

/* Reveal start states exist only with .motion-ok (set by site.js); without it everything stays visible. */
.motion-ok [data-reveal] {
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.motion-ok [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}

.motion-ok [data-reveal]:nth-child(2) {
  transition-delay: var(--reveal-stagger);
}

.motion-ok [data-reveal]:nth-child(3) {
  transition-delay: calc(2 * var(--reveal-stagger));
}

.motion-ok [data-reveal]:nth-child(n + 4) {
  transition-delay: calc(3 * var(--reveal-stagger));
}