/*
 * The website view (#site, "Ohne Fahren entdecken"): the whole screen as a
 * site of its own, its header, its pages and their foot. It builds on
 * world.css (the sections it shares with the driving panel, the dark tokens)
 * and is loaded right after it. Everything here is scoped to the view: the
 * panel shows the same sections and does not change with it.
 *
 * One grid, one scale, a few type steps: every edge lies on one of three
 * lines (A: the first column, B: the second half, C: the right edge), every
 * space comes from the rhythm tokens, every text size from a step. Spaces are
 * measured from a baseline to a cap height: large type is trimmed to its
 * caps and its baseline with negative margins (from the fonts' metrics), and
 * a space is always a padding or a margin-top of the block, never the trim.
 */

/* ---------- the grid and the rhythm ---------- */

.site {
  /* the grid: columns, the margin at the screen's edge and the gutter between columns, by width (below) */
  --site-max: 1280px;
  --cols: 4;
  --margin: 20px;
  --gutter: 16px;
  /* the scroll bar's width (ui/site.mjs measures it): its room is kept on the page's right, the header takes it off its own edge */
  --sbw: 0px;
  /* the page's edge: the margin, or wider where the screen is wider than the page – the same for the header, the page and its foot */
  --edge: max(var(--margin), (100vw - var(--sbw) - var(--site-max)) / 2);
  /* the spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 80px;
  --s-11: 96px;
  --s-12: 128px;
  --s-13: 160px;
  /* the rhythm: the header's height; the header to the title's caps; the title's baseline to the lead's caps; the lead to the first block;
     between blocks; inside a block; a row's padding; the last block to the end of the page; the end of the page to the foot */
  --head-h: 56px;
  --page-top: var(--s-7);
  --title-gap: 20px;
  --intro-gap: var(--s-8);
  --block-gap: var(--s-9);
  --group-gap: var(--s-5);
  --row-y: 20px;
  --end-gap: var(--s-11);
  --foot-gap: var(--s-9);
  /* the type steps (sizes): display (a page's title), title (a project, the next page), heading, lead; running text */
  --display: clamp(40px, 26px + 4.375vw, 96px);
  --title: clamp(28px, 22px + 1.875vw, 48px);
  --heading: clamp(20px, 17.5px + 0.78vw, 28px);
  --lead: clamp(19px, 17.5px + 0.47vw, 24px);
  --body: 16px;
  --body-line: 24px;
}
@media (min-width: 480px) {
  .site {
    --margin: 32px;
  }
}
@media (min-width: 768px) {
  .site {
    --cols: 8;
    --margin: 40px;
    --gutter: 24px;
    --head-h: 64px;
    --page-top: var(--s-9);
    --title-gap: var(--s-5);
    --intro-gap: var(--s-9);
    --block-gap: var(--s-10);
    --row-y: var(--s-5);
    --end-gap: 112px;
    --foot-gap: var(--s-10);
    --body: 17px;
    --body-line: 28px;
  }
}
@media (min-width: 1024px) {
  .site {
    --cols: 12;
    --margin: 48px;
    --page-top: var(--s-10);
    --title-gap: 28px;
    --intro-gap: var(--s-10);
    --block-gap: var(--s-11);
    --group-gap: var(--s-6);
    --end-gap: var(--s-12);
    --foot-gap: var(--s-11);
  }
}
@media (min-width: 1280px) {
  .site {
    --margin: 64px;
    --gutter: 32px;
    --page-top: var(--s-11);
    --title-gap: var(--s-6);
    --intro-gap: var(--s-11);
    --block-gap: var(--s-12);
    --row-y: 28px;
    --end-gap: var(--s-13);
  }
}
/* short: a phone held sideways – its own, tighter rhythm, the grid by width */
@media (max-height: 540px) and (orientation: landscape) {
  .site {
    --margin: var(--s-5);
    --head-h: 52px;
    --page-top: var(--s-5);
    --title-gap: var(--s-3);
    --intro-gap: var(--s-6);
    --block-gap: var(--s-8);
    --group-gap: var(--s-4);
    --row-y: var(--s-4);
    --end-gap: var(--s-9);
    --foot-gap: var(--s-8);
    --display: 40px;
    --title: 28px;
  }
}

/* ---------- the surface: the whole screen, a header and the page under it that scrolls with its foot at the end ---------- */

.site {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--ink);
  background: var(--page);
}
.site:not([open]) {
  display: none;
}
.site::backdrop {
  background: transparent;
}
/*
 * opening and closing (ui/site.mjs): the view is clipped to what it grows out
 * of, and meanwhile its white is two layers of its own, the view and its
 * header having no background: over what opened it (its rect, --from-inset
 * and --from-radius) a layer that fades in over the intro's words (::before),
 * and everywhere else one that stands (::after, its spread shadow), so the
 * surface sweeping over the world is white from its first frame. The first
 * reaches a pixel under the second, so their two rounded edges never fall on
 * the same pixels (a seam). The header's hairline fades with the header's
 * items.
 */
.site:is([data-arriving], [data-leaving])::before,
.site:is([data-arriving], [data-leaving])::after {
  content: "";
  position: fixed;
  inset: var(--from-inset, 0px);
  z-index: -1;
  border-radius: var(--from-radius, 0px);
  pointer-events: none;
}
.site:is([data-arriving], [data-leaving])::before {
  margin: -1px;
  background: var(--page);
}
.site:is([data-arriving], [data-leaving])::after {
  box-shadow: 0 0 0 200vmax var(--page);
}
.site:is([data-arriving], [data-leaving]),
.site:is([data-arriving], [data-leaving]) .site-head {
  background: transparent;
}
.site[data-leaving] .site-head::before {
  opacity: 0;
  transition-duration: var(--dur-exit);
}

/* ---------- the header: the logo on line A, the pages over the page's centre, the actions on line C ---------- */

.site-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-2);
  height: calc(var(--head-h) + var(--safe-top));
  /* (its box the page's: the scroll bar's room taken off its right) */
  padding: var(--safe-top) calc(var(--edge) + var(--sbw) + var(--safe-right)) 0 calc(var(--edge) + var(--safe-left));
  background: var(--page);
}
/* the page has scrolled under it: a hairline fades in (under the mark of the current page) */
.site-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-out);
}
.site.scrolled .site-head::before {
  opacity: 1;
}
.site-logo {
  justify-self: start;
  display: flex;
}
/* (the mark has more air below than above: a pixel down, it stands in the middle) */
.site-logo img {
  width: auto;
  height: 24px;
  translate: 0 1px;
  mix-blend-mode: multiply;
}
.site-nav {
  grid-column: 2;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.site-nav a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--muted);
  font: 700 15px/20px Satoshi, system-ui, sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
/* (1080 to 1279: a little closer, so the six fit between the logo and the actions in both languages) */
@media (min-width: 1080px) and (max-width: 1279px) {
  .site-nav a {
    padding-inline: 9px;
  }
}
@media (hover: hover) {
  .site-nav a:hover {
    color: var(--ink);
  }
}
.site-nav a[aria-current] {
  color: var(--ink);
}
/* the current page's mark: under its link's text on the header's edge, sliding from link to link (ui/site.mjs sets --x and --w) */
.site-nav-mark {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 1px;
  height: 2px;
  background: var(--blue);
  transform-origin: 0 0;
  transform: translateX(var(--x, 0)) scaleX(var(--w, 0));
  transition: transform 0.36s var(--ease-in-out);
}
.site-nav-mark[data-still] {
  transition: none;
}
.site-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.site-menu,
.site-close {
  width: 44px;
  height: 44px;
  box-shadow: none;
  background: transparent;
}
.site-menu {
  display: none;
}
/* the last symbol's glyph on line C (a 22 px symbol in a 44 px target: 11 px of air) */
.site-close,
.site-menu:has(+ .site-close[hidden]) {
  margin-inline-end: -11px;
}
@media (hover: hover) {
  .site-menu:hover,
  .site-close:hover {
    background: var(--hover);
  }
}
/* the menu button's three lines turn into a cross while the sheet is open */
.site-menu path {
  transform-box: fill-box;
  transform-origin: center;
  transition: translate 0.22s var(--ease-out), rotate 0.22s var(--ease-out), scale 0.18s ease;
}
.site-menu[aria-expanded="true"] path:nth-child(1) {
  translate: 0 5px;
  rotate: 45deg;
}
.site-menu[aria-expanded="true"] path:nth-child(2) {
  scale: 0 1;
}
.site-menu[aria-expanded="true"] path:nth-child(3) {
  translate: 0 -5px;
  rotate: -45deg;
}

/* ---------- the page: on the grid, its large type trimmed to caps and baseline ---------- */

.site-body {
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* (the scroll bar's room on one side only: the page and its foot keep the header's edges, the foot's hairline runs to the bar) */
  scrollbar-gutter: stable;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  transition: opacity 0.2s ease;
}
.site-body:focus-visible {
  outline-offset: -4px;
}
.site-top {
  flex: none;
  height: 1px;
  margin-bottom: -1px;
}
.site-page {
  flex: 1 0 auto;
  padding: var(--page-top) calc(var(--edge) + var(--safe-right)) 0 calc(var(--edge) + var(--safe-left));
}
.site-body .sections {
  max-width: var(--site-max);
  margin: 0 auto;
}
/* every page is the grid; its parts span it unless the page says otherwise, the space between them comes from the rhythm alone */
.site-body .sections > section:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0;
}
.site-body :where(.sections > section > *) {
  grid-column: 1 / -1;
  margin: 0;
}
/* rows that keep the page's columns (subgrid; where there is none, the same columns of their own, which match: they have no padding at the sides) */
.site-body :is(.project, .service-list, .service-list > li, .regions, .regions > li) {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-columns: subgrid;
  column-gap: var(--gutter);
  row-gap: 0;
}
.site-body :where(.project, .service-list, .service-list > li, .regions, .regions > li) > * {
  grid-column: 1 / -1;
}
/* a page shows from its top, also when the address names its section (#kontakt) and the browser jumps to it */
.site[open] .sections > section {
  scroll-margin-top: 100vh;
}
/* without the 3D world the website view is the site: one quiet line says why */
.site-note {
  max-width: var(--site-max);
  margin: 0 auto var(--intro-gap);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
/* in the website view the foot holds the legal links: the contact section's own are for the panel */
.site .sections .legal {
  display: none;
}

/*
 * The hairlines: on top of a block (::before), and below the last row of a
 * list (::after, on the first pixel after it, where the next row's line
 * would be: so it is also the line of whatever lies beside it there). Drawn
 * as a border, which forced colours keep.
 */
.site-body :is(.cards li, .site-plan-caption, .project, .project .facts li, .service-list > li, .person, .sections > section > .facts li, .contact-row, .brief, details, .figures li, .regions > li),
.site-page .onward {
  position: relative;
  border: 0;
}
.site-body :is(.cards li, .site-plan-caption, .project, .project .facts li, .service-list > li, .person, .sections > section > .facts li, .contact-row, .brief, details, .figures li, .regions > li)::before,
.site-body :is(.cards li:last-child, .service-list > li:last-child, .regions > li:last-child, details:last-of-type, .person)::after,
.site-body .project .facts li:last-child::after,
.site-body .sections > section > .facts li:last-child::after,
.site-page .onward::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.site-body :is(.cards li:last-child, .service-list > li:last-child, .regions > li:last-child, details:last-of-type, .person)::after,
.site-body .project .facts li:last-child::after,
.site-body .sections > section > .facts li:last-child::after {
  inset: auto 0 -1px;
}

/*
 * The type. Large type is trimmed to its cap height and its baseline, with
 * negative margins from the fonts' metrics: the baseline stands
 * (L − (ascent + descent)) / 2 + ascent under the top of a line (L: the line
 * height), Satoshi's ascent 1.010 em, its descent 0.240, its caps 0.734;
 * Source's 0.984, 0.273 and 0.656. Browsers lay a line out on whole pixels
 * (the ascent and the descent rounded, the half-leading rounded down), and
 * where CSS can round, the trim does it alike, so caps and baselines land
 * on their lines to the pixel at every size. Titles from the title step up
 * stand on line A by the ink of their first letter (ui/optical.mjs sets
 * --hang).
 */
.site {
  --satoshi-base: calc((1lh - 1.25em) / 2 + 1.01em);
  --source-base: calc((1lh - 1.257em) / 2 + 0.984em);
}
@supports (width: round(down, 1.5px, 1px)) {
  .site {
    --satoshi-base: calc(round(1.01em, 1px) + round(down, (1lh - round(1.01em, 1px) - round(0.24em, 1px)) / 2, 1px));
    --source-base: calc(round(0.984em, 1px) + round(down, (1lh - round(0.984em, 1px) - round(0.273em, 1px)) / 2, 1px));
  }
}
.site-body :is(.sections > section > h2, .project h3, .onward-next, .cards b, .service-list h3, .region-name, .sections > section > h3, .contact-mail, summary, .figures b) {
  margin-block: calc(0.734em - var(--satoshi-base)) calc(var(--satoshi-base) - 1lh);
}
.site-body .sections .lead {
  margin-block: calc(0.656em - var(--source-base)) calc(var(--source-base) - 1lh);
}
.site-body :is(h2, h3, .onward-next, summary) {
  text-wrap: balance;
  hyphens: manual;
}
.site-body :is(p, .lead, li, dd) {
  text-wrap: pretty;
}
/* display: a page's title */
.site-body .sections > section > h2 {
  max-inline-size: 13em;
  font-size: var(--display);
  line-height: 0.96;
  letter-spacing: max(-0.05em, -0.03em - 0.12vw);
}
/* title: a project's name, the next page */
.site-body :is(.project h3, .onward-next) {
  max-inline-size: 16em;
  font: 700 var(--title) / 1.04 Satoshi, system-ui, sans-serif;
  letter-spacing: -0.035em;
}
.site-body :is(.sections > section > h2, .project h3, .onward-next, .figures b) {
  margin-inline-start: calc(var(--hang, 0) * 1em);
}
/* heading: the index's titles, a service, a strength, a continent, "Standorte", the address (the questions: below) */
.site-body :is(.cards b, .service-list h3, .sections > section > .facts li, .region-name, .sections > section > h3, .contact-mail) {
  max-inline-size: 22em;
  font: 700 var(--heading) / 1.15 Satoshi, system-ui, sans-serif;
  letter-spacing: -0.025em;
  color: var(--ink);
}
/* lead: one sentence under a title (its caps the title gap under the title's baseline) */
.site-body .sections > section > h2 + .lead {
  padding-top: var(--title-gap);
}
.site-body .sections .lead {
  max-inline-size: 28em;
  font-size: var(--lead);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}
/* body: running text, in ink at a reading measure */
.site-body :is(.sections > section > p:not(.lead, .form-note, .process), .project > p:not(.lead, .form-note), .service-list p, details p, .cities) {
  max-inline-size: 36em;
  font-size: var(--body);
  line-height: var(--body-line);
  color: var(--ink);
}
/* meta: what goes with the text, muted */
.site-body :is(.meta, .cards a > span, .site-plan-caption, .network-map figcaption, .region-name b, .sections .form-note, .figures li > span, .person span, .field-count, .brief-keys),
.site-note,
.site-foot {
  font: 400 14px/20px Source, system-ui, sans-serif;
  letter-spacing: 0.005em;
  color: var(--muted);
}
.site-body :is(.meta, .cards a > span, .network-map figcaption, .sections .form-note, .figures li > span, .person span) {
  max-inline-size: 40em;
}
/* label: buttons and the form's labels */
.site .button {
  line-height: 20px;
  letter-spacing: -0.01em;
}
.site-body .brief label {
  font: 700 15px/20px Satoshi, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ---------- start: the title over the whole width, the lead and the pages as an index beside the 3D world from above ---------- */

.site-body .sections > section > .site-plan {
  margin-top: var(--intro-gap);
}
.site-body .sections > section > .cards {
  margin-top: var(--intro-gap);
}
.site-body .sections > section > .site-plan:not([hidden]) + .cards {
  margin-top: var(--block-gap);
}
.cards {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cards li {
  display: grid;
}
.cards a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-content: center;
  column-gap: var(--s-4);
  padding-block: var(--row-y);
  color: var(--ink);
  text-decoration: none;
}
.cards b {
  transition: color 0.15s ease, translate 0.24s var(--ease-out);
}
.cards a > span {
  grid-column: 1;
  margin-top: var(--s-2);
  transition: translate 0.24s var(--ease-out);
}
.cards a::after {
  content: "→";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  transition: translate 0.24s var(--ease-out), color 0.15s ease;
}
/* pointed at (or its ring on the plan): the row leans in, a blue line runs along its hairline */
.cards a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.36s var(--ease-in-out);
}
.cards a.lit b,
.cards a.lit::after {
  color: var(--blue);
}
.cards a.lit :is(b, span),
.cards a.lit::after {
  translate: 6px 0;
}
.cards a.lit::before {
  transform: scaleX(1);
}
@media (hover: hover) {
  .cards a:hover b,
  .cards a:hover::after {
    color: var(--blue);
  }
  .cards a:hover :is(b, span),
  .cards a:hover::after {
    translate: 6px 0;
  }
  .cards a:hover::before {
    transform: scaleX(1);
  }
}

/* the plan: the ground drawn once (ui/siteplan.mjs), the rings and names over it, its caption under a hairline */
.site-plan {
  margin: 0;
}
.site-plan-map {
  position: relative;
  aspect-ratio: 1;
}
.site-plan-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* (the rings and names over it: the start screen's names layer, only the rings take the pointer) */
.site-plan-marks {
  pointer-events: none;
}
.site-plan-ring {
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: scale 0.24s var(--ease-out), background-color 0.2s ease;
}
.site-plan-ring .place-check {
  width: 58%;
  height: 58%;
  stroke: #fff;
  opacity: 0;
}
.site-plan-ring.visited {
  background: var(--blue);
}
.site-plan-ring.visited .place-check {
  opacity: 1;
}
.site-plan-ring.lit {
  scale: 1.18;
}
.site-plan-ring.challenge {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1.5px rgba(31, 102, 220, 0.6);
}
.site-plan-label b {
  transition: color 0.15s ease;
}
.site-plan-label.lit b {
  color: var(--blue);
}
.site-plan-label span span {
  font-size: 14px;
}
/* (the challenge's name a word a line: its portal stands at the edge of the world) */
.site-plan-label.challenge > span {
  white-space: normal;
}
.site-plan-label.challenge b {
  width: min-content;
  font-size: 14px;
  line-height: 1.2;
  color: var(--muted);
}
.site-plan-caption {
  padding-top: var(--s-3);
}

/* ---------- the projects: each a spread, its words beside a large picture ---------- */

.site-body .sections > section > .project {
  margin-top: var(--block-gap);
  padding-top: var(--s-7);
}
.site-body .sections > section > .project:first-of-type {
  margin-top: var(--intro-gap);
}
.site-body .project-head {
  display: grid;
  justify-items: start;
  align-items: start;
  gap: 0;
}
.site-body .project-head .meta {
  margin-top: var(--s-3);
}
.site-body .status-dot {
  width: 6px;
  height: 6px;
}
.site-body .project > .lead {
  padding-top: var(--s-5);
}
.site-body .project > p:not(.lead, .form-note) {
  margin-top: var(--s-4);
}
.site-body .project > :is(.facts, .button, .form-note) {
  margin-top: var(--group-gap);
}
.site-body .project > .button {
  justify-self: start;
}
/* the facts: rows, each with its line on top */
.site-body .project .facts {
  display: grid;
  gap: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.site-body .project .facts li {
  padding-block: 10px;
  white-space: normal;
}
.site-body .facts li::after {
  content: none;
}
.site-body .shot img {
  transition: scale 0.6s var(--ease-out);
}
@media (hover: hover) {
  .site-body .shot:hover img {
    scale: 1.015;
  }
}

/* ---------- the services: names and their text on the grid, the way of working as a line over four steps ---------- */

.site-body .service-list {
  margin-top: var(--intro-gap);
  padding: 0;
  border: 0;
}
.site-body .service-list > li {
  align-items: first baseline;
  padding-block: var(--row-y);
}
.site-body .service-list p {
  margin-top: var(--s-2);
}
.site-body .process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--block-gap);
  padding-top: var(--s-5);
  font: 700 var(--heading) / 1.15 Satoshi, system-ui, sans-serif;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.site-body .process::before,
.site-body .process::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.site-body .process::after {
  height: 2px;
  top: -0.5px;
  background: var(--blue);
  transform-origin: left;
}
.site-body .process span + span::before {
  content: none;
}
.site-body .sections > section > .button {
  margin-top: calc(2 * var(--group-gap));
}

/* ---------- about: the lead, the person between hairlines, the strengths side by side ---------- */

/* the person: the picture, the name with the flag right after it, the role under it */
.site-body .person {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin-top: var(--s-6);
  padding-block: var(--s-5);
}
.site-body .person > div {
  display: contents;
}
.site-body .person img {
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  margin-inline-end: var(--s-4);
}
.site-body .person strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font: 700 20px/1.15 Satoshi, system-ui, sans-serif;
  letter-spacing: -0.025em;
}
.site-body .person span {
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: start;
  margin-top: var(--s-1);
}
/* (its middle on the middle of the name's caps) */
.site-body .person .flag {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  width: 16px;
  height: 16px;
  margin: 0 0 3px var(--s-2);
}
.site-body .sections > section > .person ~ p {
  margin-top: var(--s-6);
}
/* the strengths: each under its own line (its top trimmed in its padding, which lies between the line and the text) */
.site-body .sections > section > .facts {
  display: grid;
  column-gap: var(--gutter);
  margin-top: var(--block-gap);
}
.site-body .sections > section > .facts li {
  max-inline-size: none;
  margin-block: 0 calc(var(--satoshi-base) - 1lh);
  padding: calc(var(--s-4) + 0.734em - var(--satoshi-base)) 0 var(--s-4);
  white-space: normal;
}

/* ---------- contact: the address and the form under the same line, the questions under the address ---------- */

.site-body .contact-row {
  display: grid;
  justify-items: start;
  gap: 0;
  margin-top: var(--intro-gap);
  padding-top: var(--s-6);
}
/* (the address's line draws on the view's curve) */
.site-body .contact-mail::after {
  transition-timing-function: var(--ease-in-out);
}
/* ("Adresse kopieren" a small secondary button, as everywhere in the view) */
.site-body .contact-row .button {
  min-height: 40px;
  margin-top: var(--s-3);
  font-size: 14px;
}
.site-body .brief {
  row-gap: var(--s-5);
  margin-top: var(--block-gap);
  padding-top: var(--s-6);
}
/* (32 px to the first field) */
.site-body .ideas {
  margin-bottom: var(--s-2);
  font-size: var(--body);
  line-height: var(--body-line);
  color: var(--muted);
}
/* (what happens on sending, before it is sent: a meta line) */
.site-body .brief-state[data-state="idle"] .state-text {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.005em;
}
.site-body .brief input {
  block-size: 48px;
  padding: 0 var(--s-4);
}
.site-body .brief textarea {
  min-block-size: 160px;
  padding: var(--s-3) var(--s-4);
}
.site-body .sections > section > details {
  padding: 0;
}
.site-body .sections > section > details:first-of-type {
  margin-top: var(--s-8);
}
/* a question: its +/− a cross of two bars on the column's edge, on the middle of the first line's caps; open, the upright bar lies down */
.site-body summary {
  position: relative;
  display: block;
  padding-block: var(--s-5);
  padding-inline-end: calc(12px + var(--s-4));
  font: 700 20px/1.15 Satoshi, system-ui, sans-serif;
  letter-spacing: -0.025em;
}
.site-body summary::before,
.site-body summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(var(--s-5) + var(--satoshi-base) - 0.367em - 0.75px);
  width: 12px;
  height: 1.5px;
  background: var(--muted);
}
.site-body summary::after {
  rotate: 90deg;
}
.site-body details[open] > summary::after {
  rotate: 0deg;
}
.site-body details p {
  padding-bottom: var(--s-5);
}

/* ---------- the data centre: large figures, the map, the continents in rows ---------- */

/* the figures: each cell its own size (container units), the numbers and the word on one baseline */
.site-body .figures {
  --figure: clamp(36px, 21cqi, 88px);
  --figure-word: clamp(24px, 13cqi, 56px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--group-gap) var(--gutter);
  margin-top: var(--intro-gap);
}
.site-body .figures li {
  container-type: inline-size;
  gap: 0;
  padding: var(--s-5) 0 0;
  contain: layout paint;
}
.site-body .figures b {
  font-size: var(--figure);
  line-height: 1;
  letter-spacing: -0.045em;
}
/* (the word as tall as a number's caps, its baseline on theirs) */
.site-body .figures .figure-word b {
  font-size: var(--figure-word);
  line-height: 1;
  margin-top: calc(0.734 * var(--figure) - var(--satoshi-base));
}
.site-body .figures li > span {
  margin-top: var(--s-3);
}
/* counting up: a copy counts over the real figure, which keeps its place (and is what is read out) unseen meanwhile (ui/network.mjs) */
.figures li > b {
  grid-area: 1 / 1;
}
.figures li > span {
  grid-area: 2 / 1;
}
.figures li.counting > b:not(.figure-count) {
  color: transparent;
}
/* the map straight on the page */
.site-body .network-map {
  margin-top: var(--block-gap);
  padding: 0;
  border: 0;
}
.site-body .network-map figcaption {
  margin-top: var(--s-4);
}
/* "Standorte" and the continents: a row each, the cities flowing after the name */
.site-body .sections > section > h3 {
  padding-top: var(--block-gap);
}
.site-body .regions {
  margin-top: var(--s-5);
}
.site-body .regions > li {
  align-items: first baseline;
  padding-block: var(--row-y);
}
.site-body .region-name {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.site-body .cities {
  margin-top: var(--s-2);
}
.site-body .sections > section > .form-note {
  margin-top: var(--s-5);
}

/* ---------- the end of a page: the next one large, the link and the place in the 3D world on its baseline ---------- */

/*
 * A row that wraps: the next page's title at the left, its actions at line C
 * on the title's baseline where both fit in one line, else under it at line A
 * (and always under it without the way into the world: the start is no place).
 */
.site-page .onward {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: last baseline;
  /* (the actions' reach above their line given back where they wrap) */
  gap: calc(var(--s-4) + 10px) var(--gutter);
  max-width: var(--site-max);
  margin: var(--end-gap) auto 0;
  padding-top: var(--s-6);
}
.onward-next {
  position: relative;
  justify-self: start;
  color: var(--ink);
  text-decoration: none;
}
.onward-next::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-in-out);
}
.onward-next span {
  display: inline-block;
  margin-inline-start: 0.2em;
  color: var(--muted);
  transition: translate 0.24s var(--ease-out), color 0.15s ease;
}
@media (hover: hover) {
  .onward-next:hover span {
    color: var(--blue);
    translate: 6px 0;
  }
  .onward-next:hover::after {
    transform: scaleX(1);
  }
}
.site-page .onward-actions {
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
  /*
   * (the button stands 10 px higher than its 20 px label line: by that much
   * the actions reach above the line they share with the title, so a small
   * title keeps its caps on the onward's padding and only they move to meet
   * its baseline)
   */
  margin-top: -10px;
}
.site-page .onward-actions > * {
  white-space: nowrap;
}
.site-page .onward-share {
  margin-left: 0;
  line-height: 20px;
}
.site-page .onward-actions:not(:has(.button:not([hidden]))) {
  flex-basis: 100%;
}

/*
 * The foot of every page: who, the languages, the legal pages. On phones
 * the legal pages take a line of their own; the languages stand at the
 * right of the first where they fit beside it, else at the start of a line
 * of their own (their text on line A or C either way: their targets reach
 * out beyond it). Every line is as tall as a 32 px target, so the lines
 * stand evenly apart however they wrap.
 */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--foot-gap);
  /* (its hairline the first pixel of its padding: it never moves, a border is all it needs) */
  padding: calc(var(--s-4) - 1px) calc(var(--edge) + var(--safe-right)) calc(var(--s-4) + var(--safe-bottom)) calc(var(--edge) + var(--safe-left));
  border-top: 1px solid var(--line);
}
.site-foot :is(.languages, .legal) {
  font-size: inherit;
}
.site-foot > span {
  display: flex;
  align-items: center;
  min-block-size: 32px;
}
.site-foot .legal {
  column-gap: var(--s-3);
}
/* (the narrowest phones: closer, so the legal pages still make one line) */
@media (max-width: 359px) {
  .site-foot .legal {
    column-gap: var(--s-2);
  }
}
.site-foot .languages {
  margin-inline: -6px;
}
.site-foot .legal {
  flex-basis: 100%;
  padding: 0;
}

/*
 * ---------- motion states: a page comes in (ui/site.mjs, ui/choreo.mjs) ----------
 *
 * Nothing here moves: every entrance is a Web Animation, which holds what is
 * about to arrive at its start (fill "backwards") – so nothing is hidden
 * without the script, below the level "full", or once it has come in. The
 * hairline of a block is its ::before (above) and draws by its transform.
 */

/*
 * a heading split into its lines for one entrance (ui/motion.mjs splitLines):
 * each line a block where the browser had it, clipped just outside its
 * glyphs – 0.1em above its box (an umlaut's dots), 0.18em below (a "j"), by
 * a clip that reaches past its box, not by padding cancelled with margins,
 * which would collapse between the lines and push each one down. The line
 * rises from its height plus both reaches below (ui/choreo.mjs MASK_FRAMES).
 * The two wrappers take nothing from the rules for the heading's own spans
 * (the arrow of the next page's title).
 */
.site .ln,
.site .ln-in {
  all: unset;
  display: block;
}
.site .ln {
  white-space: nowrap;
  clip-path: inset(-0.1em -0.08em -0.18em);
}
/* a row's text as one box for its entrance, apart from its hairline (ui/motion.mjs wrapContent): laid out as the row's own text was */
.site .unit-in {
  all: unset;
  display: block;
}

/* the shade between a light page and the dark one: over everything, the header too, taking no clicks; the colours swap under it */
.site-shade {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: #070f22;
  pointer-events: none;
}

/* ---------- the data centre is dark: the header, the page and its foot ---------- */

.site.dark-page .site-logo img {
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(180deg);
}

/* ---------- xs and sm (below 768): one column ---------- */

@media (max-width: 767px) {
  .site-logo img {
    height: 22px;
  }
  .site-drive {
    padding: 0 14px;
  }
  .site-body p {
    hyphens: auto;
    hyphenate-limit-chars: 8 4 3;
  }
  /* projects: the name, its picture, then its words */
  .site-body .project-head,
  .site-body .project > .shot {
    order: -1;
  }
  .site-body .project > .shot {
    margin-top: var(--s-5);
  }
  /* the way of working downwards, its line at the left */
  .site-body .process {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-4);
    padding: 0 0 0 var(--s-5);
  }
  .site-body .process::before,
  .site-body .process::after {
    top: 0;
    bottom: 0;
    right: auto;
    width: 1px;
    height: auto;
  }
  .site-body .process::after {
    top: 0;
    left: -0.5px;
    width: 2px;
    transform-origin: top;
  }
  /* the data centre's map from edge to edge, its caption on line A */
  .site-body .network-map {
    margin-inline: calc(-1 * (var(--edge) + var(--safe-left))) calc(-1 * (var(--edge) + var(--safe-right)));
  }
  .site-body .network-map figcaption {
    padding-inline: calc(var(--edge) + var(--safe-left)) calc(var(--edge) + var(--safe-right));
  }
}

/* xs (below 480): the figures as a small table, the number at the left, what it counts at the right */
@media (max-width: 479px) {
  .site-page .onward {
    padding-top: var(--s-6);
  }
  .site-body .figures {
    --figure: 44px;
    --figure-word: calc(44px * 13 / 21);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .site-body .figures li {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: last baseline;
    padding-block: var(--s-4);
  }
  .site-body .figures li > span {
    grid-area: 1 / 2;
    margin-top: 0;
    text-align: end;
  }
}

/* ---------- md (768 and up): eight columns ---------- */

@media (min-width: 768px) {
  .site-page .onward {
    padding-top: var(--s-7);
  }
  /* start: the title over the whole width; the lead and the index in the first half, the plan in the second, one line under both */
  .site-body .sections > section:has(> .site-plan):not([hidden]) {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .site-body .sections > section:has(> .site-plan) > .lead {
    grid-row: 2;
  }
  .site-body .sections > section:has(> .site-plan) > .cards {
    grid-row: 3;
    align-self: stretch;
    display: grid;
    grid-auto-rows: minmax(min-content, 1fr);
  }
  .site-body .sections > section > .site-plan {
    grid-row: 2 / span 3;
    display: grid;
    grid-template-rows: subgrid;
    margin-top: 0;
  }
  /* (at least square – a block as tall as the column is wide holds it open –, taller where the index beside it is) */
  .site-plan-map {
    grid-row: 1 / span 2;
    aspect-ratio: auto;
  }
  .site-plan-map::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .site-plan-caption {
    grid-row: 3;
  }
  /* (beside the name, the text's top is trimmed like the name's: their first baselines meet, and the name's caps stay on the row's padding) */
  .site-body :is(.service-list p, .cities) {
    margin-top: calc(0.656em - var(--source-base));
  }
  /* about: the strengths side by side */
  .site-body .sections > section > .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-body .sections > section > .facts li {
    padding: calc(var(--s-5) + 0.734em - var(--satoshi-base)) 0 0;
  }
  /* (side by side they are one row: nothing to close) */
  .site-body .sections > section > .facts li:last-child::after {
    content: none;
  }
  /* the foot in one line: the languages over the page's centre */
  .site-foot {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  }
  .site-foot .languages {
    margin-inline: 0;
  }
  .site-foot .legal {
    justify-self: end;
  }
}

/* md only: the first half (five of eight columns) and the second; a project's picture over the width, at most 4:3, a taller one keeps its top (the archived one smaller) */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-body .sections > section > :is(.lead, .person, .person ~ p, .contact-row, .brief, details) {
    grid-column: 1 / 7;
  }
  .site-body .sections > section:has(> .site-plan) > :is(.lead, .cards) {
    grid-column: 1 / 5;
  }
  .site-body .sections > section > .site-plan:not([hidden]) + .cards {
    margin-top: var(--s-8);
  }
  .site-body .sections > section > .site-plan {
    grid-column: 5 / 9;
  }
  .site-body .project > :is(.lead, p) {
    grid-column: 1 / 7;
  }
  .site-body .project .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .site-body .project .facts li:last-child::after {
    content: none;
  }
  .site-body .service-list h3,
  .site-body .region-name {
    grid-column: 1 / 5;
  }
  .site-body .service-list p,
  .site-body .cities,
  .site-body .sections > section > .form-note {
    grid-column: 5 / 9;
  }
  .site-body .project-head,
  .site-body .project > .shot {
    order: -1;
  }
  .site-body .project > .shot {
    margin-top: var(--s-5);
    container-type: inline-size;
  }
  /* (never taller than 4:3: a tall picture loses its bottom, a wide one stays whole) */
  .site-body .project > .shot img {
    max-block-size: 75cqi;
    object-fit: cover;
    object-position: 50% 0;
  }
  .site-body .project > .shot.archived {
    grid-column: 1 / 6;
  }
}

/* ---------- lg (1024 and up): twelve columns ---------- */

@media (min-width: 1024px) {
  .site-body .sections > section > .lead {
    grid-column: 1 / 8;
  }
  .site-body .sections > section:has(> .site-plan) > :is(.lead, .cards) {
    grid-column: 1 / 7;
  }
  .site-body .sections > section > .site-plan:not([hidden]) + .cards {
    margin-top: var(--s-9);
  }
  .site-body .sections > section > .site-plan {
    grid-column: 7 / 13;
  }
  /*
   * A project as a spread: its words in five columns, its picture in six
   * beside them (mirrored every other one; the archived one smaller). The
   * name's caps stand on the picture's top edge; where the words are
   * shorter, the facts and the button close on its bottom edge (the row
   * before them takes the rest).
   */
  .site-body .project {
    grid-template-rows: repeat(6, auto) minmax(0, 1fr) auto auto;
    align-items: start;
  }
  .site-body .sections > section > .project {
    padding-top: var(--s-8);
  }
  .site-body .project > * {
    grid-column: 1 / 6;
  }
  .site-body .project > .shot {
    grid-column: 7 / -1;
    grid-row: 1 / -1;
  }
  .site-body .project:nth-of-type(even) > * {
    grid-column: 8 / -1;
  }
  .site-body .project:nth-of-type(even) > .shot {
    grid-column: 1 / 7;
  }
  .site-body .project:has(> .shot.archived) > * {
    grid-column: 1 / 7;
  }
  .site-body .project:has(> .shot.archived) > .shot {
    grid-column: 9 / -1;
  }
  .site-body .project > .facts {
    grid-row: -3;
  }
  .site-body .project > :is(.button, .form-note) {
    grid-row: -2;
  }
  .site-body .service-list h3 {
    grid-column: 1 / 7;
  }
  .site-body .service-list p {
    grid-column: 7 / 12;
  }
  /* about: the person beside the lead, its line on the lead's caps */
  .site-body .sections > section:has(> .person) > .lead {
    grid-row: 2;
  }
  .site-body .sections > section > .person {
    grid-column: 9 / -1;
    grid-row: 2 / span 2;
    align-self: start;
    margin-top: var(--title-gap);
  }
  .site-body .sections > section > .person ~ p {
    grid-column: 1 / 8;
    grid-row: 3;
  }
  .site-body .person img {
    width: 72px;
    height: 72px;
  }
  /* contact: the form at the left, the address and the questions in a side column */
  .site-body .sections > section:has(> .brief):not([hidden]) {
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    align-items: start;
  }
  .site-body .sections > section > .contact-row {
    grid-column: 9 / -1;
    grid-row: 2;
  }
  .site-body .sections > section > .brief {
    grid-column: 1 / 8;
    grid-row: 2 / span 5;
    margin-top: var(--intro-gap);
  }
  .site-body .sections > section > details {
    grid-column: 9 / -1;
  }
  .site-body summary {
    font-size: 18px;
  }
  /* the data centre: four figures in a row, a continent's count beside its name */
  .site-body .figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .site-body .region-name {
    grid-column: 1 / 7;
    display: grid;
    /* (four of its six columns for the name, the count from the fifth) */
    grid-template-columns: calc((100% - 5 * var(--gutter)) * 4 / 6 + 3 * var(--gutter)) minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: baseline;
  }
  .site-body .region-name b {
    margin-left: 0;
  }
  .site-body .cities {
    grid-column: 7 / -1;
  }
  .site-body .sections > section > .form-note {
    grid-column: 7 / -1;
  }
}

/* xl (1280 and up): the name and the address side by side */
@media (min-width: 1280px) {
  .site-body .brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .site-body .brief > * {
    grid-column: 1 / -1;
  }
  .site-body .brief > .field:has(> input) {
    grid-column: auto;
  }
}

/* ---------- not as wide (below 1080), or short: the navigation is a sheet under the header ---------- */

@media (max-width: 1079px), (max-height: 540px) and (orientation: landscape) {
  .site-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .site-actions {
    grid-column: 2;
  }
  .site-menu {
    display: grid;
  }
  /* while it is open the close button steps aside: the menu button is the cross */
  .site-menu[aria-expanded="true"] ~ .site-close {
    visibility: hidden;
  }
  /* (out of the header's columns: placed in one, it would take that column for its box, not the header's) */
  .site-nav {
    grid-column: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100dvh - var(--head-h) - var(--safe-top));
    overflow-y: auto;
    padding: 0 calc(var(--edge) + var(--sbw) + var(--safe-right)) var(--s-5) calc(var(--edge) + var(--safe-left));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--page);
  }
  .site-nav.open {
    display: flex;
    animation: page-in 0.2s ease-out;
  }
  .site[data-motion="full"] .site-nav.open {
    animation: nav-down 0.24s var(--ease-out);
  }
  /* a row each, 56 px, a line between them; the current page in ink with a blue bar at its left */
  .site-nav a {
    position: relative;
    display: flex;
    align-items: center;
    block-size: 56px;
    padding: 0 0 0 14px;
    border-radius: 0;
    font-size: var(--heading);
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
  .site-nav a + a::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    border-top: 1px solid var(--line);
  }
  .site-nav a[aria-current] {
    box-shadow: inset 2px 0 var(--blue);
  }
  .site[data-motion="full"] .site-nav.open a {
    animation: rise 0.3s var(--ease-out) backwards;
  }
  .site[data-motion="full"] .site-nav.open a:nth-child(2) {
    animation-delay: 30ms;
  }
  .site[data-motion="full"] .site-nav.open a:nth-child(3) {
    animation-delay: 60ms;
  }
  .site[data-motion="full"] .site-nav.open a:nth-child(4) {
    animation-delay: 90ms;
  }
  .site[data-motion="full"] .site-nav.open a:nth-child(5) {
    animation-delay: 120ms;
  }
  .site[data-motion="full"] .site-nav.open a:nth-child(6) {
    animation-delay: 150ms;
  }
  .site-nav-mark {
    display: none;
  }
  /* the page steps back under it */
  .site:has(.site-nav.open) .site-body {
    opacity: 0.3;
  }
}

/* (the sheet comes down, its links one after the other) */
@keyframes page-in {
  from {
    opacity: 0;
  }
}
@keyframes nav-down {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

/* ---------- short: a phone held sideways ---------- */

@media (max-height: 540px) and (orientation: landscape) {
  .site-logo img {
    height: 20px;
  }
  .site-drive {
    padding: 0 14px;
  }
  .site-nav a {
    block-size: 44px;
  }
  /* the key figures no larger than a short screen bears beside a 40 px title */
  .site-body .figures {
    --figure: clamp(36px, 21cqi, 56px);
    --figure-word: clamp(24px, 13cqi, 35px);
  }
  /* the plan no taller than the screen under the header, in the middle of its column */
  .site-plan-map {
    inline-size: min(100%, calc(100dvh - var(--head-h) - var(--s-8)));
    aspect-ratio: 1;
    min-block-size: 0;
    margin-inline: auto;
    justify-self: center;
    align-self: center;
  }
}
/* (wide enough: the sheet in two columns of three) */
@media (max-height: 540px) and (orientation: landscape) and (min-width: 600px) {
  .site-nav.open {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--gutter);
  }
  .site-nav a:nth-child(3n + 1)::before {
    content: none;
  }
}
/* (on eight columns: a project as a spread too, its picture beside its words) */
@media (max-height: 540px) and (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) {
  .site-body .project {
    grid-template-rows: repeat(6, auto) minmax(0, 1fr) auto auto;
    align-items: start;
  }
  .site-body .project-head,
  .site-body .project > .shot {
    order: 0;
  }
  .site-body .project > :is(.project-head, .lead, p, .facts, .button) {
    grid-column: 1 / 5;
  }
  .site-body .project > .shot {
    grid-column: 5 / -1;
    grid-row: 1 / -1;
    margin-top: 0;
  }
  .site-body .project > .shot.archived {
    grid-column: 6 / -1;
  }
  .site-body .project > .shot img {
    max-block-size: none;
  }
  .site-body .project .facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-body .project .facts li:last-child::after {
    content: "";
  }
  .site-body .project > .facts {
    grid-row: -3;
  }
  .site-body .project > :is(.button, .form-note) {
    grid-row: -2;
  }
}

/* narrow phones: the way back to the 3D world says only where it goes ("3D-Welt"; the whole label is still read out), so the logo, it, the menu and the close button stay in one row */
@media (max-width: 420px) {
  .site-drive .drive-more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- forced colours: the mark under the current page in the system's highlight ---------- */

@media (forced-colors: active) {
  .site-shade {
    display: none;
  }
  .site-nav-mark {
    background: Highlight;
    forced-color-adjust: none;
  }
}