/*
 * obhut drafts: base, layout primitives and every component class. Values come from tokens.css;
 * the component inventory with class names lives in DESIGN.md. Every animation, transition and
 * keyframe lives in motion.css, linked after this file.
 * Breakpoints: 640 · 768 · 1024 · 1280 (min-width unless noted).
 */

/* =========================================================================
   Base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  interpolate-size: allow-keywords;
  accent-color: var(--color-ink);
  caret-color: var(--color-ink);
  -webkit-tap-highlight-color: transparent;
}

/* Scroll lock while the sheet is open; scoped to its breakpoint so a rotation cannot strand it. */
@media (max-width: 1023.98px) {
  html:has(.nav-sheet:popover-open) {
    overflow: hidden;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--color-graphite);
  background: var(--color-canvas);
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--weight-regular);
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-heading-md);
  line-height: var(--leading-heading-md);
  letter-spacing: var(--tracking-heading-md);
}

h3,
h4 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote,
pre {
  margin: 0;
}

p,
li,
dd,
figcaption,
blockquote {
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration-color: currentColor;
  }
}

hr,
.rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-hairline-soft);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:focus-visible,
.is-focus {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

:where(a, summary, [tabindex]):focus-visible,
:where(a, summary).is-focus {
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--color-ink);
  color: var(--color-on-primary);
}

:where(.hero-photo, .cta-strip, .profile__ground, .site-footer, .surface-dark) {
  --focus-ring: var(--color-on-primary);
}

:where(.hero-photo, .cta-strip, .profile__ground, .site-footer, .surface-dark) :is(strong, b) {
  color: inherit;
}

/* Ink grounds select in paper; so do the ink flag and the marker on the paper figure. */
:where(.hero-photo, .cta-strip, .profile__ground, .site-footer, .surface-dark, .route__flag)
  ::selection,
.route__marker::selection {
  background: var(--color-on-primary);
  color: var(--color-ink);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Inline SVG icons: 1.5px stroke at any size, drawn in currentColor. */
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon * {
  vector-effect: non-scaling-stroke;
}

/* =========================================================================
   Type roles
   ========================================================================= */

.display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
}

.display-sm {
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  letter-spacing: var(--tracking-display-sm);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
}

.heading-md {
  font-size: var(--text-heading-md);
  line-height: var(--leading-heading-md);
  letter-spacing: var(--tracking-heading-md);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
}

.heading-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
}

.lead {
  max-width: var(--measure-lead);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  letter-spacing: var(--tracking-subtitle);
  color: var(--color-graphite);
  hyphens: manual;
}

.body-tight {
  line-height: var(--leading-body-tight);
  letter-spacing: var(--tracking-body-tight);
}

.prose {
  max-width: var(--measure);
}

/* A full measure needs no hyphenation; narrow columns and phones keep it. */
@media (min-width: 640px) {
  .prose {
    hyphens: manual;
  }
}

.prose > * + * {
  margin-top: 1em;
}

.eyebrow {
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.meta {
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--color-stone);
}

.micro-caps {
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  font-weight: var(--weight-micro);
  text-transform: uppercase;
  color: var(--color-slate);
}

/* The brand is always lowercase, also inside uppercase roles (eyebrow, micro-caps, tag, table head). */
.brand {
  text-transform: none;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* Technical tokens that must not break at their own hyphen (DNS-01, Kill-Switch). */
.nobr {
  white-space: nowrap;
}

/* Eyebrow + display + lead: opens major sections only. */
.lockup {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  max-width: 50rem;
}

.lockup > :is(.lead, p):not(.eyebrow) {
  margin-top: var(--space-xs);
}

/* =========================================================================
   Layout primitives
   ========================================================================= */

.container {
  width: min(
    100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)),
    var(--container-max)
  );
  margin-inline: auto;
}

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

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

/* Two canvas bands in a row share one gap of 120px (88 + 32), not two paddings of 88. */
.section + .section {
  padding-top: var(--space-xl);
}

.section-head {
  margin-bottom: var(--space-xxl);
}

.stack {
  --stack-gap: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

.stack--xs {
  --stack-gap: var(--space-xs);
}

.stack--sm {
  --stack-gap: var(--space-sm);
}

.stack--xl {
  --stack-gap: var(--space-xl);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-sm));
}

/* A borderless text link beside a pill needs the pill's own padding as distance. */
.cluster:has(> .text-link) {
  --cluster-gap: var(--space-lg);
}

/* 12 columns; spans apply from 1024, 3/4/6-spans pair up from 640, everything stacks below. */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-row-gap, var(--space-xxl));
}

.grid-12 > * {
  grid-column: 1 / -1;
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .grid-12 > :is(.span-3, .span-4, .span-6) {
    grid-column: span 6;
  }
}

@media (min-width: 1024px) {
  .span-3 {
    grid-column: span 3;
  }
  .span-4 {
    grid-column: span 4;
  }
  .span-5 {
    grid-column: span 5;
  }
  .span-6 {
    grid-column: span 6;
  }
  .span-7 {
    grid-column: span 7;
  }
  .span-8 {
    grid-column: span 8;
  }
}

/*
 * Ruled rows: a label (micro-caps term or heading-sm claim) beside its explanation, one hairline
 * between rows. First baselines align; explanations keep the reading measure.
 */
.ruled {
  --ruled-gap: var(--space-lg);
  display: grid;
}

.ruled--loose {
  --ruled-gap: var(--space-xl);
}

.ruled > * {
  --grid-row-gap: var(--space-sm);
  align-items: baseline;
}

.ruled > * + * {
  margin-top: var(--ruled-gap);
  padding-top: var(--ruled-gap);
  border-top: 1px solid var(--color-hairline-soft);
}

.ruled :is(p, dd) {
  max-width: var(--measure);
}

/* The 5/7 row: media (5) left, text (7) right from 1024; media on top below. */
.row-5-7 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-lg);
  align-items: start;
}

.row-5-7 > * {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .row-5-7 > :first-child {
    grid-column: 1 / span 5;
  }
  .row-5-7 > :last-child {
    grid-column: 6 / -1;
    padding-left: var(--space-lg);
  }
}

/* =========================================================================
   Skip link
   ========================================================================= */

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-link-sm);
  line-height: var(--leading-link-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-md)));
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--color-ink);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-link-sm);
  line-height: var(--leading-link-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  hyphens: manual;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.button--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.button--primary-on-dark {
  background: var(--color-on-primary);
  color: var(--color-ink);
}

.button--ghost {
  background: var(--color-canvas);
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.button--ghost-on-dark {
  background: transparent;
  border-color: var(--color-on-primary-soft);
  color: var(--color-on-primary);
}

@media (hover: hover) and (pointer: fine) {
  .button--primary:is(:hover, .is-hover) {
    background: var(--color-ink-soft);
  }
  .button--primary-on-dark:is(:hover, .is-hover) {
    background: var(--color-hairline);
  }
  .button--ghost:is(:hover, .is-hover) {
    background: var(--color-hairline);
  }
  .button--ghost-on-dark:is(:hover, .is-hover) {
    border-color: var(--color-on-primary);
    background: color-mix(in srgb, var(--color-on-primary) 10%, transparent);
  }
}

/* A tonal press beside the scale, so a touch under reduced motion still answers. .is-active is the
   static pressed state on the component sheet. */
.button--primary:is(:active, .is-active):not(:disabled, [aria-disabled='true']) {
  background: var(--color-ink-soft);
}

.button--primary-on-dark:is(:active, .is-active):not(:disabled, [aria-disabled='true']) {
  background: var(--color-hairline);
}

.button:is(:disabled, [aria-disabled='true']) {
  cursor: not-allowed;
  background: var(--color-hairline);
  border-color: var(--color-hairline-soft);
  color: var(--color-mute);
}

:is(.button--primary-on-dark, .button--ghost-on-dark):is(:disabled, [aria-disabled='true']) {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-on-primary) 25%, transparent);
  color: color-mix(in srgb, var(--color-on-primary) 50%, transparent);
}

.button .icon {
  font-size: 1rem;
}

/* Dark panel for components that sit on scrim without photography. */
.surface-dark {
  background: var(--color-scrim);
  color: var(--color-on-primary);
}

/* Standalone text link (not for links inside running text). */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding-block: var(--space-xxs);
  color: var(--color-ink);
  font-size: var(--text-link-sm);
  line-height: var(--leading-link-sm);
  font-weight: var(--weight-semibold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: transparent;
  hyphens: manual;
}

button.text-link {
  border: 0;
  padding-inline: 0;
  background: none;
  cursor: pointer;
}

.text-link .icon {
  stroke-width: 1.75;
}

@media (hover: hover) and (pointer: fine) {
  .text-link:is(:hover, .is-hover) {
    text-decoration-color: currentColor;
  }
}

.text-link:active,
.text-link.is-active {
  text-decoration-color: currentColor;
}

.text-link:is([aria-disabled='true']) {
  color: var(--color-mute);
  cursor: not-allowed;
  text-decoration-color: transparent;
}

.text-link--on-dark {
  color: var(--color-on-primary);
}

.text-link--on-dark[aria-disabled='true'] {
  color: color-mix(in srgb, var(--color-on-primary) 50%, transparent);
}

/* =========================================================================
   Wordmark and nav bar
   ========================================================================= */

/* The logo lockup: emblem and wordmark as one drawn file, black on canvas, white on the footer. */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.wordmark__mark {
  display: block;
  width: auto;
  height: var(--wordmark-height, 1.375rem);
}

/*
 * The bar stands (sticky) with a hairline under it, so the page keeps its frame while it moves.
 */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline-soft);
}

.nav-bar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  min-height: var(--nav-height);
}

/* The wordmark link covers the word, not the whole grid track. */
.nav-bar__inner > .wordmark {
  justify-self: start;
}

.nav-menu ul {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-xs);
  color: var(--color-ink-soft);
  font-size: var(--text-link-sm);
  line-height: var(--leading-link-sm);
  font-weight: var(--weight-semibold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  text-decoration-color: transparent;
  white-space: nowrap;
  hyphens: manual;
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:is(:hover, .is-hover) {
    color: var(--color-ink);
    text-decoration-color: currentColor;
  }
}

.nav-link[aria-current='page'] {
  color: var(--color-ink);
  text-decoration-color: currentColor;
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  /* Optical edge: the glyph's strokes, not the 48px box, end on the container edge. */
  margin-right: calc(-1 * var(--space-md));
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.nav-toggle .icon {
  font-size: 1.5rem;
}

@media (hover: hover) and (pointer: fine) {
  .nav-toggle:hover {
    background: var(--color-hairline);
  }
}

.nav-toggle:active {
  background: var(--color-hairline);
}

/* Mobile sheet: native popover, full screen; its head matches the bar. Its motion is in motion.css. */
.nav-sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0 max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))
    calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-canvas);
  color: var(--color-ink);
}

.nav-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
}

.nav-sheet__head .nav-toggle {
  display: grid;
}

.nav-sheet__list {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-hairline-soft);
}

.nav-sheet__list li {
  border-bottom: 1px solid var(--color-hairline-soft);
}

/* Inline padding gives the focus ring air; the negative margin keeps the text on the column. */
.nav-sheet__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  margin-inline: calc(-1 * var(--space-sm));
  padding-inline: var(--space-sm);
  color: var(--color-ink);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  text-decoration: none;
}

.nav-sheet__list a:active {
  background: var(--color-canvas-warm);
}

.nav-sheet__list a:is([aria-current='page'], :active) {
  text-decoration: underline 1px;
  text-underline-offset: 0.25em;
}

.nav-sheet__cta {
  width: 100%;
  margin-top: var(--space-lg);
}

@media (max-width: 1023.98px) {
  .nav-bar__inner {
    grid-template-columns: 1fr auto;
  }
  .nav-menu {
    display: none;
  }
  .nav-actions {
    gap: var(--space-sm);
  }
  .nav-toggle {
    display: grid;
  }
}

@media (min-width: 1024px) {
  .nav-sheet {
    display: none;
  }
}

/* Without the Popover API the sheet would cover the page: the links wrap into a second row instead. */
@supports not selector(:popover-open) {
  .nav-sheet,
  .nav-toggle {
    display: none !important;
  }
  @media (max-width: 1023.98px) {
    .nav-actions {
      grid-row: 1;
      grid-column: 2;
    }
    .nav-menu {
      display: block;
      grid-row: 2;
      grid-column: 1 / -1;
      padding-bottom: var(--space-xs);
    }
    .nav-menu ul {
      flex-wrap: wrap;
      column-gap: var(--space-lg);
      row-gap: 0;
    }
  }
}

/* Below 360 (320 CSS px reflow) the bar pill yields; the sheet and the hero still carry it. */
@media (max-width: 359.98px) {
  .nav-actions > .button {
    display: none;
  }
}

/* =========================================================================
   Tags and status
   ========================================================================= */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: var(--space-xxs) var(--space-sm);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  color: var(--color-slate);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  font-weight: var(--weight-micro);
  text-transform: uppercase;
  white-space: nowrap;
  hyphens: manual;
}

/*
 * Status is shape + word, never colour: ● gebaut, ◐ in Entwicklung, ○ geplant. On the homepage
 * status is a micro-caps word without border or dot (copy decision 3); its only pill there is
 * tag--marker („Heute“).
 */
:is(.tag--live, .tag--progress, .tag--planned)::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.tag--live::before {
  background: currentColor;
}

.tag--progress::before {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/*
 * The line of today: one pill of the tag family centred on the paper-to-rock edge, so it reads on
 * both halves. The solid dot is the page's "exists" mark (the route nodes use it too). Used once.
 */
.tag--marker {
  min-height: 28px;
  padding: var(--space-xxs) 14px;
  border-color: var(--color-ink);
  color: var(--color-ink);
  transform: translateY(-50%);
}

.tag--marker::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

@media (forced-colors: active) {
  .tag--marker::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================================
   Media: thumbnails, artefacts
   ========================================================================= */

.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--color-surface-cool);
}

.media--portrait {
  aspect-ratio: 4 / 5;
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position, 50% 50%);
}

.media-caption {
  margin-top: var(--space-sm);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--color-ash);
}

/*
 * Configuration artefact: a real record, rule or command, typeset on surface-cool at 16:9.
 * Budget: one label line plus 52 columns x 10 lines of code. Type and padding scale with the box
 * (cqi), so the budget holds from a 286px wide box upwards; anything beyond it is clipped.
 */
.media--artefact {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}

.artefact-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 3cqi 5cqi 0;
  color: var(--color-slate);
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 2.8cqi, var(--text-meta));
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.artefact {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 2cqi 5cqi 3cqi;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 2.8cqi, var(--text-mono));
  line-height: 1.5;
  font-variant-ligatures: none;
  white-space: pre;
  tab-size: 2;
  hyphens: manual;
}

.artefact code {
  font: inherit;
}

.artefact-comment {
  color: var(--color-slate);
}

.artefact-strong {
  font-weight: var(--weight-semibold);
}

/* =========================================================================
   Product row (listing): 5/7, image on top below 1024
   ========================================================================= */

.product-list > .product-row + .product-row {
  margin-top: var(--space-xxl);
  padding-top: var(--space-xxl);
  border-top: 1px solid var(--color-hairline-soft);
}

.product-row__body {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-sm);
  max-width: 40rem;
}

.product-row__body > p {
  max-width: var(--measure);
}

.product-row__body > .text-link {
  margin-top: var(--space-xs);
}

/*
 * Platform grid: two status groups on one 12-column grid with shared row tracks, so every row
 * shares one top rule. From 1024 the available items fill columns 1-4 and the planned items two
 * columns of four beside them (dense flow keeps DOM order: head, items, head, items). Below 1024
 * everything stacks with a rule per item.
 */
.platform-grid {
  row-gap: 0;
  /* The last row's bottom padding folds into the section padding. */
  margin-bottom: calc(-1 * var(--space-xl));
}

.platform-grid__head {
  padding-bottom: var(--space-sm);
}

.platform-grid__item {
  max-width: none;
  padding-block: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--color-hairline-soft);
}

/* Stacked, the status change reads as a group break (64 px), not as one more item (32 px). */
@media (max-width: 1023.98px) {
  .platform-grid__head--planned {
    margin-top: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .platform-grid {
    grid-auto-flow: row dense;
  }
  .platform-grid__head,
  .platform-grid__item.is-live {
    grid-column: 1 / span 4;
  }
  .platform-grid__head--planned {
    grid-column: 5 / -1;
  }
  .platform-grid__item:not(.is-live) {
    grid-column: span 4;
  }
}

/* Status group: a micro-caps head over a plain list. */
.status-group {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
}

.status-group > ul {
  display: grid;
  gap: var(--space-xs);
}

/* =========================================================================
   Hero photo: full-bleed or contained, photography laid into scrim
   ========================================================================= */

.hero-photo {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(560px, 86svh, 880px);
  overflow: hidden;
  background: var(--color-scrim);
  color: var(--color-on-primary);
}

/* A picture around the media (the dawn's portrait painting) takes no grid cell of its own. */
.hero-photo > picture {
  display: contents;
}

.hero-photo__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position, 50% 50%);
}

/*
 * Layered scene (hero): back, fog and front paintings stacked like one picture. Every layer is
 * cover-scaled to the same painted width; the fog tile is two periods of that width, placed where
 * the back layer starts, so its drift loops without a seam at every aspect ratio.
 */
.hero-photo__scene {
  --scene-x: 0.5; /* horizontal focus: 0 left, 1 right */
  --scene-y: 0.5;
  --scene-ratio: calc(16 / 9); /* the painting's width over height */
  --scene-width: max(100cqw, 100cqh * var(--scene-ratio));
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  container-type: size;
}

.hero-photo__scene > picture {
  display: contents;
}

.hero-photo__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(var(--scene-x) * 100%) calc(var(--scene-y) * 100%);
}

/*
 * The fog texture is cropped to its painted rows (y 840-1230 of 1350; portrait 620-940 of 1920) and
 * placed on exactly those rows of the painting, so the drifting layer keeps under a third of its old
 * texture.
 */
.hero-photo__fog {
  --fog-top: calc(840 / 1350);
  --fog-height: calc(390 / 1350);
  --scene-height: calc(var(--scene-width) / var(--scene-ratio));
  top: calc((100cqh - var(--scene-height)) * var(--scene-y) + var(--scene-height) * var(--fog-top));
  right: auto;
  bottom: auto;
  max-width: none;
  left: calc((100cqw - var(--scene-width)) * var(--scene-x));
  width: calc(2 * var(--scene-width));
  height: calc(var(--scene-height) * var(--fog-height));
}

@media (max-width: 767.98px) {
  .hero-photo__fog {
    --fog-top: calc(620 / 1920);
    --fog-height: calc(320 / 1920);
  }
}

/*
 * The drift can be paused (WCAG 2.2.2). The page script reveals the control, so without script
 * there is no dead button; under reduced motion nothing moves and the control stays away. The
 * visible word carries the state (anhalten / fortsetzen), so there is no aria-pressed on top.
 */
.hero-photo__pause {
  position: absolute;
  z-index: 1;
  right: max(var(--gutter), env(safe-area-inset-right, 0px), (100% - var(--container-max)) / 2);
  bottom: var(--space-md);
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--space-xs);
  /* A quiet control still gets a 44px touch target: the box grows upward and the
     negative margin keeps both the glyph and the box bottom where they were. */
  padding-block: 14px;
  padding-inline: var(--space-xs);
  margin-right: calc(-1 * var(--space-xs));
  margin-bottom: -6px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--color-on-primary-soft);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Both labels share one cell, set from the icon, so the gap stays too. */
.hero-photo__pause > span {
  grid-area: 1 / 2;
  text-align: start;
}

.hero-photo__pause[hidden],
.hero-photo.is-still path.hero-photo__pause-run,
.hero-photo:not(.is-still) path.hero-photo__pause-still {
  display: none;
}

/* The wider label keeps the width, so the icon stays under the finger; hidden text leaves the accessibility tree. */
.hero-photo.is-still span.hero-photo__pause-run,
.hero-photo:not(.is-still) span.hero-photo__pause-still {
  visibility: hidden;
}

.hero-photo__pause:active {
  color: var(--color-on-primary);
}

/* Phones: room under the actions for the 44px control, so it never meets the text link. */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .hero-photo__pause {
    bottom: var(--space-xs);
  }
  .hero-photo:has(> .hero-photo__pause:not([hidden])) .hero-photo__content {
    padding-bottom: calc(44px + 2 * var(--space-xs));
  }
}

@media (hover: hover) and (pointer: fine) {
  .hero-photo__pause:hover {
    color: var(--color-on-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo__pause {
    display: none;
  }
}

/* Type roles on photography that have no on-dark variant of their own. */
.hero-photo .micro-caps {
  color: var(--color-on-primary-soft);
}

/* Scrim fade: an 80% floor behind the text block, clear towards the focal point. */
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, var(--scrim-strong) 0%, var(--scrim-mid) 45%, var(--scrim-clear) 72%),
    linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim-clear) 55%);
}

.hero-photo__content {
  display: grid;
  justify-items: start;
  gap: var(--space-xl);
  padding-block: var(--space-section-lg) var(--space-section);
}

.hero-photo__content > * {
  max-width: var(--measure);
}

.hero-photo__content > .lockup {
  max-width: 44rem;
}

.hero-photo :is(h1, h2, h3, .display, .display-sm, .heading-md, .heading-sm) {
  color: var(--color-on-primary);
}

.hero-photo .eyebrow {
  color: var(--color-on-primary-soft);
}

.hero-photo .lead {
  color: var(--color-on-primary);
}

/* Contained: the aspect ratio is a minimum; min-height auto lets long German copy grow the box. */
.hero-photo.hero-photo--contained {
  min-height: auto;
  aspect-ratio: 2400 / 1030;
  border-radius: var(--radius-lg);
}

.hero-photo--contained .hero-photo__content {
  width: auto;
  margin: 0;
  padding: var(--space-xxl);
}

@media (max-width: 1023.98px) {
  .hero-photo.hero-photo--contained {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767.98px) {
  .hero-photo {
    min-height: clamp(560px, 88svh, 760px);
  }
  /* The portrait scene: hut and peaks stay above the lockup. */
  .hero-photo__scene {
    --scene-y: 0.25;
    --scene-ratio: calc(9 / 16);
  }
  .hero-photo::after {
    background: linear-gradient(
      to top,
      var(--scrim-strong) 0%,
      var(--scrim-strong) 40%,
      var(--scrim-clear) 85%
    );
  }
  .hero-photo__content {
    padding-block: var(--space-section-lg) var(--space-xxl);
  }
  .hero-photo.hero-photo--contained {
    aspect-ratio: 4 / 5;
  }
  .hero-photo--contained .hero-photo__content {
    padding: var(--space-lg);
  }
}

/* Below 640 the two-line hero headline scales with the column instead of wrapping to four. */
@media (max-width: 639.98px) {
  .hero-photo .display {
    font-size: min(var(--text-display), 9.5vw);
  }
}

/* Landscape phones: the hero keeps its lockup and action in the first screen. */
@media (max-height: 560px) {
  .hero-photo__content {
    padding-block: var(--space-md) var(--space-lg);
    gap: var(--space-lg);
  }
}

/* The page's first hero ends at the fold, below the nav bar. */
.hero-photo.hero-photo--fold {
  min-height: min(100svh - var(--nav-height), 880px);
}

/*
 * The first hero arrives in light (F11: Licht): a night veil like the dawn's lifts, and the
 * hut's window lights. The veil is the fold's twin of the dawn's ::before; its base state is
 * gone (opacity 0), the lift is in motion.css. The pane is the unlit window: the wall's own
 * colour over the painted light, two painted pixels wider on each side for the edge; it opens
 * as the glow comes on. Both sit in the scene and are placed with its geometry: x/y are the
 * centre of the painted pane (1705.5/983.5 of 2400 × 1350; portrait 655.5/608.5 of 1080 × 1920).
 * Base states are the finished scene: no veil, the window lit.
 */
.hero-photo--fold::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-scrim);
  opacity: 0;
}

.hero-photo--fold :is(.hero-photo__window, .hero-photo__pane) {
  --window-x: calc(1705.5 / 2400);
  --window-y: calc(983.5 / 1350);
  --pane-share: calc(15 / 2400);
  display: block;
  position: absolute;
  left: calc((100cqw - var(--scene-width)) * var(--scene-x) + var(--scene-width) * var(--window-x));
  top: calc(
    (100cqh - var(--scene-width) / var(--scene-ratio)) * var(--scene-y) + var(--scene-width) /
      var(--scene-ratio) * var(--window-y)
  );
  translate: -50% -50%;
  pointer-events: none;
}

.hero-photo--fold .hero-photo__window {
  width: calc(var(--scene-width) * 0.08);
  aspect-ratio: 3 / 2;
  background: radial-gradient(closest-side, rgb(201 207 230 / 0.3), transparent);
  mix-blend-mode: screen;
}

.hero-photo--fold .hero-photo__pane {
  width: calc(var(--scene-width) * var(--pane-share));
  aspect-ratio: 1;
  background: #131620;
  opacity: 0;
}

@media (max-width: 767.98px) {
  .hero-photo--fold :is(.hero-photo__window, .hero-photo__pane) {
    --window-x: calc(655.5 / 1080);
    --window-y: calc(608.5 / 1920);
    --pane-share: calc(15 / 1080);
  }
}

/* Portrait tablets get the landscape scene; the hut sits whole beside the headline. */
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait) {
  .hero-photo__scene {
    --scene-x: 0.62;
  }
}

/*
 * Dawn: the vision at full height. The lockup sits in the dark sky, the lit peaks fill the middle,
 * the closing block and the goal route sit at the foot, each over its own scrim zone. A night veil
 * (::before, under the scrim) lifts as the band scrolls in; without scroll timelines it stays
 * lifted. Short windows get a content-driven height instead. Phones get the portrait painting
 * (morgengrauen-hoch.svg), which puts the lit mist and the hut into the clear window.
 */
.hero-photo--dawn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-scrim);
  opacity: 0;
}

.hero-photo--dawn .hero-photo__content > .dawn__close {
  display: grid;
  gap: var(--space-md);
  max-width: none;
  width: 100%;
}

/* Phones: each text block keeps its 80% floor; the zones end short of the clear window between them. */
.hero-photo--dawn::after {
  background:
    linear-gradient(
      to bottom,
      var(--scrim-strong) 0%,
      var(--scrim-strong) 16%,
      var(--scrim-clear) 30%
    ),
    linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim-strong) 44%, var(--scrim-clear) 56%);
}

/* At 320 the closing line keeps „Der Weg bleibt in Europa.“ on one line. */
@media (max-width: 359.98px) {
  .dawn__close .heading-md {
    font-size: min(var(--text-heading-md), 7.6vw);
  }
}

@media (min-height: 640px) {
  .hero-photo--dawn {
    align-items: stretch;
    min-height: max(100svh, 900px);
  }
  .hero-photo--dawn .hero-photo__content {
    grid-template-rows: auto 1fr auto;
  }
  .hero-photo--dawn .dawn__close {
    grid-row: 3;
  }
}

/* Phones: a guaranteed clear window between the two text blocks, so the lit peaks are never under text. */
@media (max-width: 767.98px) {
  .hero-photo--dawn {
    align-items: stretch;
  }
  .hero-photo--dawn .hero-photo__content {
    grid-template-rows: auto minmax(42svh, 1fr) auto;
  }
  .hero-photo--dawn .dawn__close {
    grid-row: 3;
  }
}

@media (min-width: 768px) {
  .hero-photo--dawn::after {
    background:
      linear-gradient(to bottom, var(--scrim-strong) 0%, var(--scrim-clear) 38%),
      linear-gradient(
        to top,
        var(--scrim-strong) 0%,
        var(--scrim-strong) 26%,
        var(--scrim-clear) 58%
      );
  }
}

/* Portrait tablets: at 50% the frame edge would halve the hut; this keeps it whole beside the close. */
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait) {
  .hero-photo--dawn {
    --hero-position: 72% 50%;
  }
}

@media (min-width: 768px) and (min-height: 640px) {
  .hero-photo--dawn .hero-photo__content {
    padding-block: 120px var(--space-section-lg);
  }
}

/*
 * From 1024 the goal route ends at seven of twelve columns, clear of the hut, and the ground zone
 * fades out beside it, leaving the hut and its lit mist in the open. The zone is its own layer over
 * the whole band: the 80% floor holds under the text, then two long eased ramps (cosine steps, one
 * across, one upwards, intersected) let it fall off like light instead of ending in an edge.
 */
@media (min-width: 1024px) {
  .hero-photo--dawn::after {
    background: linear-gradient(to bottom, var(--scrim-strong) 0%, var(--scrim-clear) 38%);
  }
  .hero-photo--dawn .dawn__close::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--scrim-strong);
    mask-image:
      linear-gradient(
        to right,
        #000 0 36%,
        rgb(0 0 0 / 0.93) 44%,
        rgb(0 0 0 / 0.75) 52%,
        rgb(0 0 0 / 0.5) 60%,
        rgb(0 0 0 / 0.25) 68%,
        rgb(0 0 0 / 0.07) 76%,
        transparent 84%
      ),
      linear-gradient(
        to top,
        #000 0 42%,
        rgb(0 0 0 / 0.93) 48%,
        rgb(0 0 0 / 0.75) 53%,
        rgb(0 0 0 / 0.5) 59%,
        rgb(0 0 0 / 0.25) 65%,
        rgb(0 0 0 / 0.07) 70%,
        transparent 76%
      );
    mask-composite: intersect;
  }
  .hero-photo--dawn .route {
    max-width: calc((100% - 11 * var(--grid-gap)) / 12 * 7 + 6 * var(--grid-gap));
  }
}

/* From 768 the leg labels stand above the line, so the route keeps clear of the closing line. */
@media (min-width: 768px) {
  .hero-photo--dawn .route {
    margin-top: var(--space-lg);
  }
}

/*
 * While the band is capped to seven columns (1024 to 1279), a station is too narrow for label and
 * answer side by side: the label stands above its answer, so „Nur EU-Recht“ keeps one line. The cap
 * itself stays: wider, the text would leave the scrim's 80 % floor for the lit mist.
 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hero-photo--dawn .route__facts > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
}

/* =========================================================================
   Statement band: a poster on canvas (the argument, the honesty card, the call)
   ========================================================================= */

.statement {
  padding-block: calc(2 * var(--space-section-lg)) var(--space-section-lg);
}

.statement__text {
  max-width: 19em;
}

.statement .lead {
  margin-top: var(--space-xl);
}

.statement .route,
.statement__facts {
  margin-top: var(--space-section-lg);
}

.statement__verdict {
  max-width: 19em;
  margin-top: var(--space-section-lg);
  text-wrap: balance;
}

/* The intertitle: a hard cut to paper, the sentence alone and centred in a full-height frame. */
.statement--card {
  display: grid;
  align-items: center;
  min-height: min(88svh, 800px);
  padding-block: var(--space-section-lg);
}

@media (max-width: 767.98px) {
  .statement:not(.statement--card) {
    padding-top: calc(1.5 * var(--space-section-lg));
  }
  .statement--card {
    min-height: 64svh;
  }
}

/* At 320 the poster keeps its three lines, so „Das Recht nicht.“ never ends on a line alone. */
@media (max-width: 359.98px) {
  .statement .display {
    font-size: min(var(--text-display), 11vw);
  }
}

/* =========================================================================
   Route figure: one request, three stations, the same two questions at each (Standort, Recht).
   The one answer that differs gets the featured infill. Solid means it exists, dashed means
   planned; an open node is a place that is not in operation yet.
   ========================================================================= */

.route {
  --route-ink: var(--color-ink);
  --route-soft: var(--color-slate);
  --route-text: var(--color-graphite);
  --route-bg: var(--color-canvas);
  --route-stroke: 1px;
  --route-node: 11px;
  --route-gap: var(--grid-gap);
}

.route--on-dark {
  --route-ink: var(--color-on-primary);
  --route-soft: var(--color-on-primary-soft);
  --route-text: var(--color-on-primary-soft);
  --route-bg: var(--color-scrim);
}

@media (min-width: 1024px) {
  .route {
    --route-stroke: 2px;
    --route-node: 15px;
  }
}

.route__stations {
  display: grid;
  gap: var(--space-xl);
}

.route__station {
  position: relative;
  padding-left: calc(var(--route-node) + var(--space-md));
}

/* The node: solid where something exists. */
.route__station::before {
  content: '';
  position: absolute;
  top: calc((var(--leading-heading-sm) * var(--text-heading-sm) - var(--route-node)) / 2);
  left: 0;
  z-index: 1;
  width: var(--route-node);
  height: var(--route-node);
  border-radius: 50%;
  background: var(--route-ink);
}

.route__station--open::before {
  border: var(--route-stroke) solid var(--route-ink);
  background: var(--route-bg);
}

/* The path: from each node to the next one. Phones read it top to bottom. */
.route__station:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc((var(--leading-heading-sm) * var(--text-heading-sm)) / 2);
  bottom: calc(-1 * var(--space-xl) - (var(--leading-heading-sm) * var(--text-heading-sm)) / 2);
  left: calc((var(--route-node) - var(--route-stroke)) / 2);
  border-left: var(--route-stroke) solid var(--route-ink);
}

.route--goal .route__station:not(:last-child)::after {
  border-left-style: dashed;
}

/*
 * The break in the encryption: at the edge the node becomes an ink marker on the line, the same
 * inverted ink as the one answer that differs below it. Phones set it above the name.
 */
.route__marker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-on-primary);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  font-weight: var(--weight-micro);
  text-transform: uppercase;
}

.route__name {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--route-ink);
}

/* What the station is, then what it does: the cause of the whole argument, in full ink. */
.route__note {
  margin-top: var(--space-xs);
  color: var(--route-ink);
  hyphens: manual;
}

.route__sub {
  display: block;
  margin-bottom: var(--space-xxs);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--route-soft);
}

/* The legs between stations say what travels on them; the arrow gives the reading direction. */
.route__leg {
  position: absolute;
  top: calc(100% + var(--space-xl) / 2);
  left: calc(var(--route-node) + var(--space-md));
  translate: 0 -50%;
  font-size: var(--text-link-sm);
  line-height: var(--leading-link-sm);
  color: var(--route-text);
  white-space: nowrap;
}

.route__leg::after {
  content: '↓' / '';
  margin-left: var(--space-xxs);
}

.route__facts {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.route__facts > div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
}

.route__facts dt {
  color: var(--route-soft);
}

.route__facts dd {
  color: var(--route-text);
}

/* The one answer that differs, inverted: the only ink surface in the figure. */
.route__flag {
  margin-inline: calc(-1 * var(--space-sm));
  padding: var(--space-sm);
  border-radius: var(--radius-xs);
  background: var(--color-ink);
}

.route .route__flag dt {
  color: var(--color-on-primary-soft);
}

.route .route__flag dd {
  color: var(--color-on-primary);
}

.route__why {
  display: block;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  color: var(--color-on-primary-soft);
}

.statement__next {
  margin-top: var(--space-lg);
}

/* From 768 the path runs left to right: three columns on one line, rows aligned by subgrid. */
@media (min-width: 768px) {
  .route__stations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: var(--route-gap);
    row-gap: 0;
  }

  .route__station {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    padding-left: 0;
    padding-top: calc(var(--route-node) + var(--space-md));
  }

  .route__station::before {
    top: 0;
  }

  .route__station:not(:last-child)::after {
    top: calc((var(--route-node) - var(--route-stroke)) / 2);
    right: calc(-1 * var(--route-gap));
    bottom: auto;
    left: 0;
    border-top: var(--route-stroke) solid var(--route-ink);
    border-left: 0;
  }

  .route--goal .route__station:not(:last-child)::after {
    border-top-style: dashed;
  }

  .route__marker {
    position: absolute;
    top: calc(var(--route-node) / 2);
    left: 0;
    z-index: 2;
    margin: 0;
    translate: 0 -50%;
  }

  .route__station--plain::before {
    visibility: hidden;
  }

  .route__leg {
    top: calc(var(--route-node) / 2);
    left: calc((100% + var(--route-gap)) / 2);
    translate: -50% calc(-100% - var(--space-xs));
  }

  /*
   * The font's own arrow, turned: U+2192 is in none of the subsets and would fall back mid-label.
   * Turned, the glyph overhangs its advance; 1px more keeps the text-link arrow's gap (about 5.5px).
   */
  .route__leg::after {
    content: '↓' / '';
    display: inline-block;
    margin-left: calc(var(--space-xxs) + 1px);
    rotate: -90deg;
  }

  /* Fixed rows, so a station without a note keeps its facts level with the others. */
  .route__name {
    grid-row: 1;
  }
  .route__note {
    grid-row: 2;
  }
  .route__facts {
    grid-row: 3;
    align-content: start;
  }
  /* The flag's own padding on every last row, so the three answers share one line. */
  .route__facts > div:last-child {
    padding-block: var(--space-sm);
  }
}

/* Forced colours: nodes and the flag keep their shapes in the system colours. */
@media (forced-colors: active) {
  .route__station::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .route__station--open::before {
    border-color: CanvasText;
    background: Canvas;
  }
  .route__flag,
  .route__marker {
    forced-color-adjust: none;
    background: CanvasText;
    color: Canvas;
  }
  .route .route__flag dt,
  .route .route__flag dd,
  .route__why {
    color: Canvas;
  }
}

/* =========================================================================
   Profile: the line of today. Planned layers on paper above it, built layers on rock below it,
   in build order from the bottom up. The rock then carries the principles.
   ========================================================================= */

.profile {
  padding-top: var(--space-section-lg);
}

/* Paper after the last planned row, so the marker clears it. */
.profile__plan {
  margin-bottom: var(--space-xl);
}

.layer {
  display: grid;
  /* A fixed status track, so planned and built rows share one set of columns across the line. */
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 5rem;
  column-gap: var(--grid-gap);
  align-items: baseline;
  padding-block: 20px;
}

.layer__status {
  justify-self: end;
}

/* The plan is drawn, not built: dashed rules (the route's authored dash), softer ink. */
.profile__plan .layer + .layer {
  background: repeating-linear-gradient(
      to right,
      var(--color-rule-strong) 0 6px,
      transparent 6px 10px
    )
    top / 100% 1px no-repeat;
}

@media (forced-colors: active) {
  .profile__plan .layer + .layer {
    border-top: 1px dashed CanvasText;
  }
}

.profile__plan .layer__name {
  color: var(--color-ink-soft);
}

.profile__plan .layer__desc {
  color: var(--color-slate);
}

@media (max-width: 767.98px) {
  .layer {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-xxs);
  }
  .layer__desc {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

/* The marker straddles the edge; scroll jumps land with the line mid-screen. */
.profile__line {
  position: relative;
  z-index: 1;
  height: 0;
  scroll-margin-top: calc(var(--nav-height) + 35svh);
}

.profile__line > .container {
  display: flex;
}

.profile__ground {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-scrim);
  color: var(--color-on-primary);
}

/*
 * Strata under the built rows, dissolving into solid ground under the principles. The box is the
 * top 900px only, so the rock's scale does not depend on how long the principles run.
 */
.profile__rock {
  position: absolute;
  inset: 0 0 auto;
  z-index: -2;
  width: 100%;
  height: 900px;
  object-fit: cover;
  object-position: 50% 30%;
  mask-image: linear-gradient(to bottom, #000 0 520px, transparent 100%);
}

.profile__ground::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-scrim) 72%, transparent);
}

.profile__built {
  padding-top: var(--space-xxl);
}

.profile__built .layer + .layer {
  border-top: 1px solid color-mix(in srgb, var(--color-on-primary) 22%, transparent);
}

.profile__built :is(.layer__name, .layer__status) {
  color: var(--color-on-primary);
}

.profile__built .layer__desc {
  color: var(--color-on-primary-soft);
}

/* The page's one definition of its status word, where "Was heute existiert" lands. */
.profile__note {
  max-width: var(--measure);
  margin-top: var(--space-lg);
  color: var(--color-on-primary-soft);
}

/* =========================================================================
   Principles: numbered theses on the dark ground, each with its proof and status
   ========================================================================= */

.principles__head {
  padding-block: calc(1.5 * var(--space-section-lg)) var(--space-section-lg);
}

.principles__head .eyebrow {
  color: var(--color-on-primary-soft);
}

.principles__head :is(h2, .lead) {
  color: var(--color-on-primary);
}

.principles {
  padding-bottom: var(--space-section-lg);
}

.theses {
  counter-reset: thesis;
}

.thesis {
  display: grid;
  grid-template-columns: 4rem minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--grid-gap);
  align-items: baseline;
  padding-block: 40px;
  border-top: 1px solid color-mix(in srgb, var(--color-on-primary) 18%, transparent);
  counter-increment: thesis;
}

/* A citation handle ("Grundsatz 3"), not a section number. */
.thesis::before {
  content: counter(thesis);
  font-size: var(--text-heading-md);
  line-height: var(--leading-heading-md);
  letter-spacing: var(--tracking-heading-md);
  font-variant-numeric: tabular-nums;
  color: var(--color-slate-soft);
}

.thesis > h3 {
  max-width: 17em;
  color: var(--color-on-primary);
}

.thesis__proof {
  color: var(--color-on-primary-soft);
  hyphens: manual;
}

.thesis__proof > p {
  max-width: var(--measure);
}

.thesis__status {
  margin-top: var(--space-xs);
  color: var(--color-slate-soft);
}

@media (max-width: 1023.98px) {
  .thesis {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    row-gap: var(--space-sm);
  }
  .thesis__proof {
    grid-column: 2;
    padding-top: 0;
  }
}

/* =========================================================================
   Join: the closing call on canvas, the company signature beside the form
   ========================================================================= */

.join__grid {
  margin-top: calc(var(--space-section-lg) + var(--space-lg));
  padding-top: var(--space-xxl);
  border-top: 1px solid var(--color-hairline-soft);
}

.join__signature {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  color: var(--color-graphite);
}

/* Beside the form, the signature keeps a column's air before the first field. */
@media (min-width: 1024px) {
  .join__signature {
    padding-right: var(--space-xxl);
  }
}

/* For whom: four obligation rows between the lead and the signature grid. */
.join__audience-head {
  margin-top: var(--space-section-lg);
}

.join__audiences {
  margin-top: var(--space-lg);
}

/* Nested jump targets keep a bar's height of air above them. */
:where(main [id]) {
  scroll-margin-top: var(--nav-height);
}

/* The bar is not sticky: a band that opens with its own padding lands flush, so no sliver of the band before it shows. */
main > section[id],
.principles__head {
  scroll-margin-top: 0;
}

/* =========================================================================
   Hairline table / comparison
   ========================================================================= */

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.table caption {
  margin-bottom: var(--space-md);
  text-align: left;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  color: var(--color-stone);
  caption-side: top;
}

.table :is(th, td) {
  padding: var(--space-md);
  vertical-align: top;
  border-bottom: 1px solid var(--color-hairline-soft);
}

.table :is(th, td):first-child {
  padding-left: 0;
}

.table :is(th, td):last-child:not(.is-featured) {
  padding-right: 0;
}

.table thead th {
  padding-block: var(--space-sm);
  border-bottom-color: var(--color-ink);
  color: var(--color-slate);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  font-weight: var(--weight-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody th {
  color: var(--color-ink);
  font-weight: var(--weight-regular);
}

.table td {
  color: var(--color-graphite);
}

.table .is-featured {
  background: var(--color-hairline);
  color: var(--color-ink);
}

@media (max-width: 639.98px) {
  .table :is(th, td) {
    padding-inline: var(--space-xs);
  }
  .table :is(th, td):first-child {
    padding-left: 0;
  }
}

/* =========================================================================
   Pricing slab: 5 columns, 1px rules, featured = hairline infill (no badge, no border)
   ========================================================================= */

.pricing {
  display: grid;
  grid-template-columns: 1fr;
  border-block: 1px solid var(--color-hairline-soft);
}

.tier {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: var(--space-lg);
  background: var(--color-canvas);
}

.tier--featured {
  background: var(--color-hairline);
}

.tier__name {
  font-size: var(--text-heading-md);
  line-height: var(--leading-heading-md);
  letter-spacing: var(--tracking-heading-md);
  color: var(--color-ink);
}

.tier__desc {
  margin-top: var(--space-xs);
  color: var(--color-graphite);
  line-height: var(--leading-body-tight);
}

.tier__price {
  margin-top: var(--space-xl);
}

.tier__amount {
  display: block;
  font-size: var(--text-display-sm);
  line-height: var(--leading-display-sm);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-ink);
  white-space: nowrap;
}

.tier__unit {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--color-ash);
}

.tier__action {
  align-self: start;
  justify-self: start;
  margin-top: var(--space-lg);
}

.tier__features {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  margin: var(--space-lg) 0 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--color-hairline-soft);
  list-style: none;
  color: var(--color-graphite);
  line-height: var(--leading-body-tight);
  letter-spacing: var(--tracking-body-tight);
}

.pricing-note {
  margin-top: var(--space-md);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  color: var(--color-ash);
}

@media (max-width: 639.98px) {
  .tier + .tier {
    border-top: 1px solid var(--color-hairline-soft);
  }
  .tier__action {
    justify-self: stretch;
    width: 100%;
  }
}

/* 640–1023: 3 over 2; the second row splits the width in halves, so no cell stays empty. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pricing {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .tier {
    grid-column: span 2;
  }
  .tier:nth-child(n + 4) {
    grid-column: span 3;
    border-top: 1px solid var(--color-hairline-soft);
  }
  .tier:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--color-hairline-soft);
  }
  .tier:nth-child(4) {
    border-left: 0;
  }
}

@media (min-width: 1024px) {
  .pricing {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .tier + .tier {
    border-left: 1px solid var(--color-hairline-soft);
  }
}

/* =========================================================================
   FAQ accordion (<details>)
   ========================================================================= */

.faq {
  border-top: 1px solid var(--color-hairline-soft);
}

.faq-item {
  border-bottom: 1px solid var(--color-hairline-soft);
}

.faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  color: var(--color-ink);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  letter-spacing: var(--tracking-subtitle);
  list-style: none;
  cursor: pointer;
  hyphens: manual;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary .icon {
  margin-top: 0.2em;
  font-size: 1.25rem;
}

.faq-item > summary .icon-plus-bar {
  transform-origin: center;
  transform-box: fill-box;
}

.faq-item[open] > summary .icon-plus-bar {
  transform: rotate(90deg);
}

.faq-item::details-content {
  height: 0;
  overflow: clip;
}

.faq-item[open]::details-content {
  height: auto;
}

.faq-item__body {
  max-width: var(--measure);
  padding-bottom: var(--space-lg);
  padding-right: var(--space-xxl);
  color: var(--color-graphite);
}

.faq-item__body > * + * {
  margin-top: 1em;
}

/* =========================================================================
   Forms: fields as bottom rules; monochrome states, never colour alone
   ========================================================================= */

.form {
  display: grid;
  gap: var(--space-xl);
  max-width: 40rem;
  /* A jump to the form leaves air above the first label. */
  scroll-margin-top: var(--space-xxl);
}

.form-row {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}

.field__label {
  color: var(--color-ink);
}

.field__req {
  color: var(--color-ink);
}

.field__hint {
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--color-stone);
}

.field__control {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: var(--space-sm) 0;
  border: 0;
  border-bottom: 1px solid var(--color-rule-strong);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  appearance: none;
  hyphens: manual;
}

.field__control::placeholder {
  color: var(--color-stone);
  opacity: 1;
}

/* The state ladder: rest 1px rule-strong; invalid 1px ink + icon + words; focus 2px ink (one field at a time). */
.field__control:is(:focus, .is-focus) {
  outline: none;
  padding-bottom: calc(var(--space-sm) - 1px);
  border-bottom: 2px solid var(--color-ink);
}

.field__control[aria-invalid='true'] {
  border-bottom-color: var(--color-ink);
}

select.field__control {
  padding-right: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230e0e10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 16px;
  cursor: pointer;
}

textarea.field__control {
  min-height: 144px;
  resize: vertical;
  line-height: var(--leading-body);
}

.field__control:disabled {
  border-bottom-style: dashed;
  color: var(--color-mute);
  cursor: not-allowed;
  opacity: 1;
}

.field:has(.field__control:disabled) .field__label {
  color: var(--color-mute);
}

/* Error: 1px ink rule + icon + message in words; announced through the form's live region. */
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  font-weight: var(--weight-medium);
}

.field__error:empty {
  display: none;
}

.field__error::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.75v3.75'/%3E%3Ccircle cx='8' cy='11.1' r='0.4' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Checkbox */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  min-height: 44px;
  padding-block: var(--space-xs);
  color: var(--color-graphite);
  cursor: pointer;
}

.check__input {
  display: grid;
  place-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--color-rule-strong);
  border-radius: var(--radius-xs);
  background: var(--color-canvas);
  appearance: none;
  cursor: pointer;
}

.check__input::before {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--color-on-primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0;
}

.check__input:checked {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.check__input:checked::before {
  opacity: 1;
}

.check__input[aria-invalid='true'] {
  border: 2px solid var(--color-ink);
}

.check__input:disabled {
  border-style: dashed;
  cursor: not-allowed;
}

.check:has(.check__input:disabled) {
  color: var(--color-mute);
  cursor: not-allowed;
}

/* Empty, the live region stays in the accessibility tree (so its first message is announced). */
.form-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form-status {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

/* Designed success state, shown in place of the form. */
.form-success {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  max-width: 40rem;
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-ink);
}

.form-success .icon {
  font-size: 1.5rem;
  color: var(--color-ink);
}

.form-success:focus {
  outline: none;
}

.form-success[hidden] {
  display: none;
}

@media (max-width: 767.98px) {
  .form .button {
    width: 100%;
  }
}

/* =========================================================================
   Alert banner
   ========================================================================= */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
  color: var(--color-ink);
  line-height: var(--leading-body-tight);
  letter-spacing: var(--tracking-body-tight);
}

.alert > .icon {
  margin-top: 1px;
  font-size: 1.125rem;
}

.alert__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-md);
  row-gap: var(--space-xxs);
}

.alert__body p {
  color: var(--color-graphite);
}

.alert__body .text-link {
  min-height: 0;
  padding-block: 0;
}

/* =========================================================================
   CTA strip (dark)
   ========================================================================= */

.cta-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-section-lg);
  background: var(--color-scrim);
  color: var(--color-on-primary);
}

.cta-strip__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position, 50% 50%);
}

.cta-strip:has(.cta-strip__media)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    var(--scrim-strong) 0%,
    var(--scrim-strong) 40%,
    var(--scrim-mid) 100%
  );
}

.cta-strip__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: end;
}

.cta-strip :is(h2, h3, .heading-md, .display-sm) {
  color: var(--color-on-primary);
}

.cta-strip .eyebrow {
  color: var(--color-on-primary-soft);
}

.cta-strip .lead {
  color: var(--color-on-primary);
}

@media (min-width: 1024px) {
  .cta-strip__inner {
    grid-template-columns: 7fr 5fr;
    gap: var(--grid-gap);
  }
  .cta-strip__inner > .cluster {
    justify-content: flex-end;
  }
}

@media (max-width: 767.98px) {
  .cta-strip:has(.cta-strip__media)::after {
    background: var(--scrim-strong);
  }
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  padding-block: var(--space-section) calc(var(--space-section) + env(safe-area-inset-bottom, 0px));
  background: var(--color-footer);
  color: var(--color-on-primary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl) var(--grid-gap);
}

.footer-heading {
  margin-bottom: var(--space-sm);
  color: var(--color-slate-soft);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  font-weight: var(--weight-micro);
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-on-primary);
  text-decoration-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover,
  .footer-legal a:hover {
    text-decoration-color: currentColor;
  }
}

.footer-links a:active,
.footer-legal a:active {
  text-decoration-color: currentColor;
}

.footer-bottom {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-section);
  padding-top: var(--space-xl);
  border-top: 1px solid color-mix(in srgb, var(--color-on-primary) 16%, transparent);
}

.wordmark--footer {
  /* The closing lockup: the word ends the page as large as the opening carried it. */
  --wordmark-height: clamp(3rem, 9vw, 7rem);
  justify-self: start;
}

.footer-meta {
  display: grid;
  gap: var(--space-sm);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-lg);
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-link-sm);
  line-height: var(--leading-link-sm);
}

.footer-legal li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-slate-soft);
}

.footer-note {
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  color: var(--color-slate-soft);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .footer-bottom {
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: var(--space-xxl);
  }
  .footer-meta {
    justify-items: end;
    text-align: right;
  }
}

/* Touch targets follow the input, not the width: phones and touch tablets alike. */
@media (max-width: 767.98px), (pointer: coarse) {
  .footer-links a,
  .footer-legal a,
  .footer-legal li,
  .text-link,
  .nav-link,
  .hero-photo__pause {
    min-height: 44px;
  }
}

/* =========================================================================
   Draft bar: a draft tool, deliberately outside the design (system UI font, dashed)
   ========================================================================= */

/* Raised above the hero's 44px pause control, which owns the bottom-right corner. */
.draft-bar {
  position: fixed;
  right: var(--space-md);
  bottom: calc(44px + 2 * var(--space-md));
  z-index: 50;
  max-width: calc(100vw - 2 * var(--space-md));
  border: 1px dashed var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  hyphens: manual;
}

/* The footer's last line stays clear of the bar; the rule leaves with the draft tool (D6). */
body:has(> .draft-bar) .site-footer {
  padding-bottom: calc(var(--space-section) + 120px + env(safe-area-inset-bottom, 0px));
}

.draft-bar > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.draft-bar > summary::-webkit-details-marker {
  display: none;
}

.draft-bar > summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.draft-bar[open] > summary {
  border-bottom: 1px dashed var(--color-hairline-soft);
}

.draft-bar fieldset {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px 10px 10px;
  border: 0;
}

.draft-bar legend {
  padding: 0 0 4px;
  color: var(--color-stone);
  float: left;
  width: 100%;
}

.draft-bar label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 15px;
  cursor: pointer;
}

.draft-bar input {
  margin: 0;
}

.draft-bar__face--geist {
  font-family: var(--font-geist);
}

.draft-bar__face--host {
  font-family: var(--font-host);
}

.draft-bar__face--schibsted {
  font-family: var(--font-schibsted);
}

/* =========================================================================
   Print: the finished page (motion.css switches every animation and transition off)
   ========================================================================= */

@media print {
  .draft-bar,
  .skip-link,
  .nav-toggle,
  .nav-sheet {
    display: none !important;
  }
  .hero-photo,
  .cta-strip,
  .profile__ground,
  .site-footer {
    background: none;
    color: var(--color-ink);
  }
  .hero-photo__media,
  .hero-photo__scene,
  .cta-strip__media,
  .profile__rock,
  .hero-photo::before,
  .hero-photo::after,
  .cta-strip::after,
  .profile__ground::after {
    display: none;
  }
  .hero-photo__pause,
  #kontakt-formular,
  .dawn__close::before {
    display: none !important;
  }
  .hero-photo,
  .hero-photo.hero-photo--fold,
  .hero-photo--dawn {
    min-height: 0;
  }
  /* The former dark bands print in ink; the soft role resolves at :root, so it is set again here. */
  .hero-photo,
  .profile__ground,
  .site-footer {
    --color-on-primary: var(--color-ink);
    --color-on-primary-soft: var(--color-graphite);
    --color-slate-soft: var(--color-slate);
    --focus-ring: var(--color-ink);
  }
  .route--on-dark {
    --route-bg: var(--color-canvas);
  }
  .button--primary-on-dark {
    background: none;
    border-color: var(--color-ink);
  }
  .route__station::before,
  .route__marker,
  .route__flag,
  .tag--marker::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .route,
  .layer,
  .thesis {
    break-inside: avoid;
  }
}