@font-face {
  font-family: "Barlow Condensed";
  src: url("../../fonts/barlow-condensedlatin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/ibm-plex-sanslatin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/ibm-plex-sanslatin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../../fonts/ibm-plex-monolatin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --paper: #f5f2e9;
  --paper-raised: #fbf9f2;
  --ink: #17242c;
  --ink-soft: #50606a;
  --blue: #06467f;
  --blue-bright: #0b5b9f;
  --line: #c8cfcb;
  --line-dark: #52636d;
  --green: #809d8b;
  --header-height: 82px;
  --shell: min(91vw, 1440px);
  --measure: 650px;
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 22px);
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: clamp(15px, 1.08vw, 17px);
  line-height: 1.67;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

body.nav-open .site-header {
  background: var(--paper);
  backdrop-filter: none;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

button,
summary {
  font: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid #70a6d2;
  outline-offset: 4px;
}

::selection {
  color: white;
  background: var(--blue);
}

h1,
h2,
h3,
p,
figure,
dl,
dd {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-wrap: balance;
}

h1,
h2 {
  margin-bottom: 0.35em;
  letter-spacing: -0.025em;
  line-height: 0.93;
}

h1 {
  max-width: 8.5em;
  font-size: clamp(3.5rem, 7.1vw, 7.6rem);
}

h2 {
  font-size: clamp(3rem, 6.6vw, 7.1rem);
}

h3 {
  line-height: 1.02;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 12px;
  translate: 0 -160%;
  padding: 10px 16px;
  background: var(--ink);
  color: white;
}

.skip-link:focus {
  translate: 0;
}

.eyebrow,
.section-index,
.photo-panel figcaption span,
.loading-panel__caption span,
.contact__name span,
.contact__meta strong {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}

.eyebrow,
.section-index {
  color: var(--blue);
}

.button {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0.75em 1.2em;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: white;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

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

.button--small {
  min-height: 42px;
  padding: 0.6em 1.05em;
}

.button--light {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.button--light:hover {
  border-color: white;
  background: white;
  color: var(--blue);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding-block: 0.22em;
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(6, 70, 127, 0.35);
}

.text-link span {
  display: inline-block;
  transition: translate 180ms ease;
}

.text-link:hover span {
  translate: 0.18em 0;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  width: 100%;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 16px max(4.5vw, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid rgba(23, 36, 44, 0.14);
  background: rgba(245, 242, 233, 0.94);
  backdrop-filter: blur(16px);
}

.brand {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.brand img {
  width: 146px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.3rem, 2.6vw, 2.9rem);
}

.site-nav > a:not(.button) {
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav > a:not(.button)::after {
  display: block;
  width: 0;
  height: 1px;
  margin-top: 2px;
  background: var(--blue);
  content: "";
  transition: width 180ms ease;
}

.site-nav > a:not(.button):hover::after {
  width: 100%;
}

.menu-toggle {
  display: none;
}

/* Hero: the default state remains useful when JavaScript is unavailable. */
.hero-runway {
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(30px, 5vw, 72px) clamp(74px, 9vw, 140px);
}

.hero-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.hero-art {
  z-index: 0;
  order: 4;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}

.hero-static-photo {
  order: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #d5d7d3;
}

.hero-static-photo img {
  width: 100%;
  aspect-ratio: 2048 / 1143;
  object-fit: contain;
}

.hero-art svg {
  width: 100%;
  height: auto;
}

.hero-copy {
  z-index: 3;
  max-width: 540px;
}

.hero-copy p:not(.eyebrow) {
  max-width: 420px;
  color: var(--ink-soft);
}

.hero-copy--intro {
  order: 2;
  margin: clamp(32px, 5vw, 68px) 0 0;
}

.hero-copy--intro h1 {
  font-size: clamp(2.9rem, 4vw, 4rem);
}

.hero-copy--intro .text-link {
  margin-top: clamp(8px, 1.5vw, 22px);
}

.hero-copy--plan {
  order: 3;
  padding: clamp(50px, 7vw, 96px) 0 clamp(26px, 4vw, 54px);
}

.hero-copy--plan h2 {
  font-size: clamp(3.2rem, 6vw, 6.6rem);
}

.hero-note {
  display: none;
}

.hero-progress {
  display: none;
}

@media (min-width: 861px) {
  .js.motion-ok .hero-runway {
    width: 100%;
    height: 258svh;
    margin: 0;
    padding: 0;
  }

  .js.motion-ok .hero-sticky {
    position: sticky;
    top: var(--header-height);
    display: grid;
    height: calc(100svh - var(--header-height));
    place-items: center;
    overflow: hidden;
  }

  .js.motion-ok .hero-frame {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: min(var(--shell), calc(179.18svh - 208px));
    max-height: calc(100svh - var(--header-height) - 34px);
  }

  .js.motion-ok .hero-static-photo {
    display: none;
  }

  .js.motion-ok .hero-art {
    order: 0;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .js.motion-ok .hero-copy--intro,
  .js.motion-ok .hero-copy--plan {
    position: absolute;
    top: 50%;
    left: clamp(22px, 4vw, 72px);
    width: min(31%, 470px);
    margin: 0;
    padding: 0;
    translate: 0 -50%;
  }

  .js.motion-ok .hero-copy--plan {
    pointer-events: none;
  }

  .js.motion-ok .hero-copy--plan h2 {
    font-size: clamp(3rem, 4.5vw, 5.1rem);
  }

  .js.motion-ok .hero-copy--plan {
    width: min(29%, 440px);
  }

  .js.motion-ok .hero-copy--intro h1 {
    font-size: clamp(2.4rem, 4vw, 4rem);
  }

  .js.motion-ok .hero-note {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    display: block;
    margin: 0;
    padding: 8px 11px;
    background: rgba(245, 242, 233, 0.88);
    color: var(--ink-soft);
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 0.63rem;
    letter-spacing: 0.04em;
  }

  .js.motion-ok .hero-progress {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: -13px;
    left: 0;
    display: block;
    height: 2px;
    overflow: hidden;
    background: rgba(6, 70, 127, 0.15);
  }

  .js.motion-ok .hero-progress span {
    display: block;
    width: 100%;
    height: 100%;
    scale: 0 1;
    transform-origin: left;
    background: var(--blue);
  }
}

/* Connected story */
.story {
  position: relative;
  padding-block: clamp(90px, 12vw, 190px) clamp(100px, 12vw, 190px);
  background: var(--paper);
}

.story-rail {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: max(2.2vw, calc((100vw - 1540px) / 2));
  width: 1px;
  background: rgba(6, 70, 127, 0.18);
}

.story-rail::before {
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}

.story-rail span {
  position: sticky;
  top: calc(var(--header-height) + 10vh);
  display: block;
  width: 1px;
  height: 22vh;
  background: var(--blue);
}

.chapter {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin-inline: auto;
}

.chapter + .chapter {
  margin-top: clamp(120px, 16vw, 250px);
}

.chapter__heading {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(400px, 1.5fr);
  column-gap: clamp(40px, 8vw, 140px);
  align-items: start;
  margin-bottom: clamp(45px, 7vw, 98px);
}

.chapter__heading .section-index {
  padding-top: 0.8em;
}

.chapter__heading h2 {
  grid-column: 2;
  margin-bottom: 0.25em;
}

.chapter__heading > p:last-child {
  grid-column: 2;
  max-width: 600px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.photo-panel {
  width: min(100%, 1220px);
  margin: 0 0 0 auto;
}

.photo-panel__mask {
  position: relative;
  overflow: hidden;
  background: #d9dcd7;
}

.photo-panel__mask::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  content: "";
  pointer-events: none;
}

.photo-panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-panel figcaption,
.loading-panel__caption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.photo-panel figcaption span,
.loading-panel__caption span {
  flex: 0 0 auto;
  color: var(--blue);
}

.diagram-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  grid-template-rows: 1fr auto;
  gap: 1px;
  max-width: 1260px;
  margin-left: auto;
  background: var(--line);
  border: 1px solid var(--line);
}

.diagram-panel__main {
  grid-row: 1 / span 2;
  display: grid;
  min-height: 570px;
  place-items: center;
  padding: clamp(28px, 5vw, 76px);
  background: var(--paper-raised);
}

.diagram-panel__main img {
  width: 100%;
  max-width: 820px;
}

.layer-key {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 22px 24px;
  background: var(--paper-raised);
}

.layer-key span {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 10px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.79rem;
}

.layer-key span:last-child {
  border: 0;
}

.layer-key b {
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.66rem;
}

.evidence-photo {
  position: relative;
  align-self: end;
  margin: 0;
  background: var(--ink);
  color: white;
}

.evidence-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.evidence-photo figcaption {
  padding: 11px 14px 13px;
  font-size: 0.7rem;
}

.chapter--loading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  background: var(--ink);
  color: white;
}

.loading-panel {
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 2.8vw, 42px);
  padding-right: 0;
}

.loading-panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.loading-panel__caption {
  color: #bbc5ca;
}

.loading-panel__caption span {
  color: #93bfdf;
}

.chapter__heading--dark {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: clamp(42px, 5vw, 80px);
}

.chapter__heading--dark .section-index,
.chapter__heading--dark h2,
.chapter__heading--dark > p:last-child {
  grid-column: auto;
}

.chapter__heading--dark .section-index {
  color: #93bfdf;
}

.chapter__heading--dark h2 {
  font-size: clamp(3.5rem, 6.2vw, 6.6rem);
}

.chapter__heading--dark > p:last-child {
  color: #ccd3d6;
}

.remontage-art {
  display: grid;
  min-height: 600px;
  place-items: center;
  overflow: hidden;
  padding: clamp(25px, 5vw, 80px);
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

.remontage-art img {
  width: min(100%, 1100px);
}

/* Services */
.services {
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(100px, 14vw, 210px);
  border-top: 1px solid var(--line);
}

.section-head {
  display: grid;
  grid-template-columns: 0.65fr 1.5fr;
  column-gap: clamp(40px, 8vw, 140px);
  margin-bottom: clamp(70px, 9vw, 130px);
}

.section-head .section-index {
  padding-top: 0.8em;
}

.section-head h2,
.section-head > p:last-child {
  grid-column: 2;
}

.section-head h2 {
  max-width: 11em;
}

.section-head > p:last-child {
  max-width: 610px;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.service-list {
  max-width: 1200px;
  margin-left: auto;
  border-top: 1px solid var(--ink);
}

.service-list details {
  border-bottom: 1px solid var(--line);
}

.service-list summary {
  display: grid;
  grid-template-columns: 62px 1fr 30px;
  gap: 20px;
  align-items: center;
  min-height: 94px;
  padding: 18px 8px;
  cursor: pointer;
  list-style: none;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.55rem, 2.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.service-list summary::-webkit-details-marker {
  display: none;
}

.service-number {
  align-self: start;
  padding-top: 0.4em;
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.65rem;
}

.service-list summary i {
  position: relative;
  width: 23px;
  height: 23px;
  justify-self: end;
}

.service-list summary i::before,
.service-list summary i::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--blue);
  content: "";
  transition: rotate 180ms ease;
}

.service-list summary i::after {
  rotate: 90deg;
}

.service-list details[open] summary i::after {
  rotate: 0deg;
}

.service-body {
  display: grid;
  grid-template-columns: 62px minmax(0, 660px) 1fr;
  gap: 20px;
  padding: 0 8px clamp(32px, 4vw, 54px);
}

.service-body p {
  grid-column: 2;
  margin: 0;
  color: var(--ink-soft);
}

.service-body small {
  grid-column: 3;
  align-self: end;
  padding-left: 28px;
  border-left: 1px solid var(--line);
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}

.small-job {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 40px;
  max-width: 1200px;
  margin: clamp(42px, 6vw, 85px) 0 0 auto;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line);
}

.small-job p {
  margin: 0;
}

.small-job p:last-child {
  max-width: 750px;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

/* Reuse paths */
.routes {
  display: grid;
  grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(55px, 8vw, 130px);
  width: var(--shell);
  margin-inline: auto;
  padding-bottom: clamp(110px, 15vw, 220px);
}

.routes__copy {
  align-self: start;
}

.routes__copy h2 {
  font-size: clamp(3.6rem, 6.2vw, 6.6rem);
}

.routes__copy > p:not(.section-index) {
  max-width: 430px;
  color: var(--ink-soft);
}

.routes__copy .text-link {
  margin-top: 20px;
}

.route-map {
  display: grid;
  grid-template-columns: minmax(120px, 0.33fr) minmax(0, 1fr);
  align-items: center;
}

.route-origin {
  position: relative;
  z-index: 2;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--blue);
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: clamp(0.58rem, 0.8vw, 0.72rem);
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}

.route-origin::after {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 45px;
  height: 1px;
  background: var(--blue);
  content: "";
}

.route-branches {
  position: relative;
  display: grid;
  gap: 1px;
  margin-left: 44px;
  background: var(--line);
  border: 1px solid var(--line);
}

.route-branches::before {
  position: absolute;
  top: 16.66%;
  bottom: 16.66%;
  left: -45px;
  width: 1px;
  background: var(--blue);
  content: "";
}

.route-branches article {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  background: var(--paper-raised);
}

.route-branches article::before {
  position: absolute;
  top: 50%;
  right: 100%;
  width: 45px;
  height: 1px;
  background: var(--blue);
  content: "";
}

.route-branches b {
  grid-row: 1 / span 2;
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.66rem;
}

.route-branches h3 {
  margin: 0 0 0.28em;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.route-branches p {
  grid-column: 2;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

/* Company proof */
.proof {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(50px, 10vw, 160px);
  padding: clamp(90px, 12vw, 170px) max(4.5vw, calc((100vw - 1440px) / 2));
  background: var(--blue);
  color: white;
}

.proof .section-index {
  color: #a8d0ed;
}

.proof__lead h2 {
  font-size: clamp(3.4rem, 5.6vw, 6.1rem);
}

.proof__lead > p:last-child {
  max-width: 500px;
  color: #d6e1e9;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  border-left: 1px solid rgba(255, 255, 255, 0.38);
}

.facts div {
  min-height: 180px;
  padding: clamp(24px, 3vw, 45px);
  border-right: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
}

.facts dt {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(2.8rem, 5vw, 5.3rem);
  font-weight: 600;
  line-height: 0.9;
  text-transform: uppercase;
}

.facts dd {
  margin-top: 16px;
  color: #d6e1e9;
  font-size: 0.8rem;
}

/* Contact */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  column-gap: clamp(50px, 10vw, 150px);
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(100px, 15vw, 220px) clamp(80px, 11vw, 160px);
}

.contact__headline h2 {
  max-width: 8em;
}

.contact__headline > p:last-child {
  max-width: 650px;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
}

.contact__direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
}

.contact__name {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.contact__name span {
  color: var(--blue);
}

.contact__phone {
  margin-bottom: 30px;
  color: var(--blue);
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(2.15rem, 3.9vw, 4rem);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.contact__direct .button {
  width: min(100%, 330px);
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.contact__direct .button:hover {
  background: var(--ink);
}

.contact__direct small {
  max-width: 330px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.contact__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(70px, 10vw, 140px);
  background: var(--line);
  border: 1px solid var(--line);
}

.contact__meta address,
.contact__meta p {
  margin: 0;
  padding: clamp(22px, 3vw, 38px);
  background: var(--paper-raised);
  font-size: 0.82rem;
  font-style: normal;
}

.contact__meta strong {
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
}

.site-footer {
  padding: clamp(55px, 7vw, 100px) max(4.5vw, calc((100vw - 1440px) / 2)) 28px;
  background: var(--ink);
  color: white;
}

.site-footer__main {
  display: grid;
  grid-template-columns: 0.8fr 1.6fr 0.8fr;
  gap: 50px;
  align-items: end;
  padding-bottom: clamp(55px, 8vw, 105px);
}

.brand--footer {
  filter: brightness(0) invert(1);
}

.site-footer__main p {
  max-width: 500px;
  margin: 0;
  color: #c6cdd1;
}

.site-footer__main > a:last-child {
  justify-self: end;
  color: #a8d0ed;
  font-size: 0.8rem;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #aeb8bd;
  font-size: 0.7rem;
}

.site-footer__legal span:last-child {
  margin-left: auto;
}

.legal-details {
  margin-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.legal-details summary {
  padding-block: 18px;
  color: #a8d0ed;
  cursor: pointer;
  font-size: 0.76rem;
}

.legal-copy {
  max-width: 760px;
  padding: 14px 0 45px;
  color: #d5dbde;
  font-size: 0.78rem;
}

.legal-copy h2 {
  color: white;
  font-size: 3rem;
}

.legal-copy h3 {
  margin-top: 2em;
  margin-bottom: 0.35em;
  color: white;
  font-size: 1.35rem;
}

/* Progressive reveal. Elements stay visible until the observer is active. */
.will-reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.will-reveal.is-visible {
  opacity: 1;
  translate: 0;
}

@media (max-width: 1050px) {
  :root {
    --shell: min(92vw, 920px);
  }

  .hero-copy--intro {
    grid-column: 1 / span 7;
  }

  .chapter__heading,
  .section-head {
    grid-template-columns: 180px 1fr;
    column-gap: 45px;
  }

  .diagram-panel__main {
    min-height: 490px;
  }

  .chapter--loading {
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  }

  .chapter__heading--dark {
    padding: 36px;
  }

  .service-body {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .service-body small {
    grid-column: 2;
    margin-top: 18px;
    padding: 0;
    border: 0;
  }

  .routes {
    grid-template-columns: 1fr;
  }

  .routes__copy {
    display: grid;
    grid-template-columns: 0.65fr 1fr;
    column-gap: 45px;
  }

  .routes__copy h2,
  .routes__copy > p:not(.section-index),
  .routes__copy .text-link {
    grid-column: 2;
  }

  .route-map {
    width: min(100%, 850px);
    margin-left: auto;
  }

  .proof {
    grid-template-columns: 1fr;
  }

  .proof__lead {
    max-width: 750px;
  }

  .contact {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .contact__meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  :root {
    --header-height: 70px;
    --shell: calc(100vw - 36px);
  }

  h1 {
    font-size: clamp(3.3rem, 15vw, 5.8rem);
  }

  h2 {
    font-size: clamp(3.1rem, 14vw, 5.5rem);
  }

  .site-header {
    min-height: var(--header-height);
    padding: 12px 18px;
  }

  .brand img {
    width: 126px;
  }

  .js .menu-toggle {
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 8px 8px;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.77rem;
    font-weight: 600;
  }

  .menu-toggle__icon {
    position: relative;
    display: block;
    width: 24px;
    height: 16px;
  }

  .menu-toggle__icon i {
    position: absolute;
    left: 0;
    width: 24px;
    height: 1px;
    background: currentColor;
    transition: rotate 180ms ease, top 180ms ease;
  }

  .menu-toggle__icon i:first-child {
    top: 4px;
  }

  .menu-toggle__icon i:last-child {
    top: 12px;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child {
    top: 8px;
    rotate: 45deg;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child {
    top: 8px;
    rotate: -45deg;
  }

  .js .site-nav {
    position: fixed;
    z-index: 1;
    inset: var(--header-height) 0 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 24px 26px 35px;
    background: var(--paper);
  }

  .js .site-nav.is-open {
    display: flex;
  }

  .site-nav > a:not(.button) {
    padding-block: 18px;
    border-bottom: 1px solid var(--line);
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    text-transform: uppercase;
  }

  .site-nav .button {
    margin-top: 34px;
  }

  .hero-runway {
    padding-top: 30px;
  }

  .hero-frame {
    display: flex;
    flex-direction: column;
  }

  .hero-copy--intro,
  .hero-copy--plan {
    position: static;
    width: 100%;
    max-width: 680px;
    padding: 0;
  }

  .hero-copy--intro {
    order: 2;
    margin: 34px 0 0;
  }

  .hero-copy--intro p:not(.eyebrow) {
    max-width: 550px;
  }

  .hero-art {
    order: 4;
    width: 100%;
  }

  .hero-copy--plan {
    order: 3;
    padding: 52px 0 28px;
  }

  .hero-copy--plan h2 {
    font-size: clamp(3.1rem, 14vw, 5.5rem);
  }

  .hero-note {
    display: none;
  }

  .story {
    padding-top: 80px;
  }

  .story-rail {
    display: none;
  }

  .chapter + .chapter {
    margin-top: 120px;
  }

  .chapter__heading,
  .section-head {
    display: block;
  }

  .chapter__heading .section-index,
  .section-head .section-index {
    padding-top: 0;
  }

  .chapter__heading h2,
  .chapter__heading > p:last-child,
  .section-head h2,
  .section-head > p:last-child {
    grid-column: auto;
  }

  .photo-panel figcaption,
  .loading-panel__caption {
    display: block;
  }

  .photo-panel figcaption span,
  .loading-panel__caption span {
    display: block;
    margin-bottom: 5px;
  }

  .diagram-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .diagram-panel__main {
    grid-row: auto;
    min-height: auto;
    padding: 24px;
  }

  .layer-key {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: 0;
    background: var(--line);
  }

  .layer-key span {
    display: block;
    padding: 14px;
    border: 0;
    background: var(--paper-raised);
  }

  .layer-key b {
    display: block;
    margin-bottom: 6px;
  }

  .evidence-photo {
    width: min(72%, 420px);
    margin: 18px 18px 18px auto;
  }

  .chapter--loading {
    display: flex;
    flex-direction: column;
  }

  .loading-panel {
    order: 2;
    padding: 0 18px 18px;
  }

  .chapter__heading--dark {
    order: 1;
    padding: 55px 28px 42px;
  }

  .remontage-art {
    min-height: auto;
    padding: 24px;
  }

  .services {
    padding-top: 100px;
  }

  .section-head {
    margin-bottom: 65px;
  }

  .small-job {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .routes__copy {
    display: block;
  }

  .proof {
    padding-inline: 18px;
  }

  .contact {
    grid-template-columns: 1fr;
  }

  .contact__direct {
    margin-top: 30px;
    padding-top: 0;
  }

  .site-footer__main {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .site-footer__main > a:last-child {
    justify-self: start;
  }
}

@media (max-width: 580px) {
  body {
    font-size: 15px;
  }

  .hero-runway {
    padding-bottom: 90px;
  }

  .hero-art {
    width: calc(100% + 20px);
    margin-left: -10px;
  }

  .hero-note {
    display: none;
  }

  .chapter__heading {
    margin-bottom: 38px;
  }

  .photo-panel {
    width: calc(100% + 36px);
    margin-left: -18px;
  }

  .photo-panel figcaption {
    padding-inline: 18px;
  }

  .layer-key {
    grid-template-columns: 1fr;
  }

  .evidence-photo {
    width: calc(100% - 36px);
  }

  .chapter--loading {
    width: 100%;
  }

  .loading-panel {
    padding-inline: 0;
  }

  .loading-panel__caption {
    padding-inline: 18px;
  }

  .chapter__heading--dark {
    padding-inline: 18px;
  }

  .service-list summary {
    grid-template-columns: 34px 1fr 24px;
    gap: 10px;
    min-height: 82px;
    padding-inline: 0;
    font-size: 1.7rem;
  }

  .service-body {
    display: block;
    padding-inline: 44px 0;
  }

  .service-body small {
    display: block;
  }

  .small-job {
    padding: 24px 20px;
  }

  .route-map {
    display: block;
  }

  .route-origin {
    width: 118px;
    margin: 0 auto 44px;
  }

  .route-origin::after {
    top: 100%;
    left: 50%;
    width: 1px;
    height: 45px;
  }

  .route-branches {
    margin-left: 0;
  }

  .route-branches::before,
  .route-branches article::before {
    display: none;
  }

  .route-branches article {
    grid-template-columns: 32px 1fr;
    column-gap: 12px;
    padding: 22px 18px;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .facts div {
    min-height: 145px;
  }

  .contact__phone {
    font-size: clamp(2rem, 11.8vw, 3.3rem);
  }

  .contact__meta {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding-inline: 18px;
  }

  .site-footer__legal span:last-child {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .will-reveal {
    opacity: 1;
    translate: 0;
  }
}

/* Scrollfassung. Ergaenzt assets/basis/site.css.
   Ohne JavaScript, bei reduzierter Bewegung und unter 861px steht alles
   ruhig und vollstaendig untereinander. */

/* IBM Plex Mono zeichnet das Eszett in einer altertuemlichen Form mit z-Schwung.
   Nur dieses Zeichen kommt deshalb aus IBM Plex Sans. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../../fonts/ibm-plex-sanslatin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+00DF, U+1E9E;
}

/* Pfeile in Links und Knoepfen: Die Zeichen fehlen in den Hausschriften und saehen je nach Geraet
   anders aus. Deshalb wird das Zeichen ausgeblendet und ein gezeichneter Pfeil in Textfarbe gezeigt. */
a > span[aria-hidden="true"] {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  overflow: hidden;
  background: currentColor;
  margin-left: 0.14em;
  vertical-align: 0.02em;
  white-space: nowrap;
  text-indent: 2em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 10.5 10 2M3.6 1.5h6.9v6.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 10.5 10 2M3.6 1.5h6.9v6.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Zum Ablauf" zeigt nach unten: derselbe Pfeil, gedreht. */
a[href="#ablauf"] > span[aria-hidden="true"] {
  rotate: 135deg;
}

/* ---------- Einstieg bildschirmfuellend (Desktop, mit Bewegung) ---------- */

@media (min-width: 861px) {
  .js.motion-ok .hero-sticky {
    display: block;
  }

  .js.motion-ok .hero-frame {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .js.motion-ok .hero-art {
    position: absolute;
    inset: 0;
    border: 0;
  }

  .js.motion-ok .hero-art svg {
    width: 100%;
    height: 100%;
  }

  .js.motion-ok .hero-copy--intro,
  .js.motion-ok .hero-copy--plan {
    left: max(4.5vw, calc((100vw - 1440px) / 2));
  }

  .js.motion-ok .hero-progress {
    bottom: 0;
  }
}

/* ---------- Ablauf: ein Abschnitt, vier Schritte ---------- */

.scenes {
  position: relative;
  background: var(--paper);
}

.scene {
  --p: 1;
  position: relative;
  border-top: 1px solid var(--line);
}

.scene [data-range] {
  --t: 1;
}

.scene__stage {
  position: relative;
}

.scene__grid {
  display: grid;
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(70px, 9vw, 130px);
  gap: clamp(34px, 5vw, 60px);
}

.flow__copy h2 {
  margin-bottom: 0.5em;
  font-size: clamp(2.6rem, 3.6vw, 4rem);
}

.flow__copy .section-index {
  margin-bottom: 1.4em;
}

.flow__lead {
  max-width: 32em;
  margin: -0.6em 0 1.6em;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
}

.flow__steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.flow__step {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.flow__step::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  scale: 0 1;
  transform-origin: left;
  background: var(--blue);
  content: "";
  transition: scale 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flow__head {
  display: grid;
  grid-template-columns: 2.8em 1fr;
  align-items: baseline;
  margin: 0;
  padding: 0.62em 0;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  transition: color 260ms ease;
}

.flow__head b {
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.flow__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}

.flow__body > div {
  min-height: 0;
  overflow: hidden;
  padding-left: 2.8em;
}

.flow__body p {
  max-width: 30em;
  margin: 0;
  padding-bottom: 1.1em;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
}

.flow__layers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 1.2em;
  list-style: none;
}

.flow__layers li {
  padding: 0.3em 0.75em;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 260ms ease, border-color 260ms ease, background-color 260ms ease;
}

/* Bildfeld */

.flow__frame {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.flow__layer {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 3 / 2;
  background: #d9dcd7;
}

.flow__layer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow__layer > figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 1.2em;
  align-items: baseline;
  padding: 9px 14px;
  background: rgba(245, 242, 233, 0.92);
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.flow__layer > figcaption span,
.flow__evidence figcaption span {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flow__layer > figcaption span {
  color: var(--blue);
}

.flow__layer--art {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

.flow__art {
  position: relative;
  z-index: 1;
  grid-row: 1;
  width: 92%;
}

.flow__art svg,
.flow__art img {
  width: 100%;
  height: auto;
}

.flow__note {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 14px;
  margin: 0;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.flow__step-caption {
  position: relative;
  z-index: 3;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  display: grid;
  gap: 2px;
  width: min(54%, 390px);
  margin: 0 14px 14px;
  padding: 9px 13px 10px;
  border-left: 2px solid var(--blue);
  background: rgba(245, 242, 233, 0.94);
  color: var(--ink);
  line-height: 1.35;
  pointer-events: none;
}

.flow__step-caption-context {
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.flow__step-caption-text {
  display: none;
  font-size: 0.78rem;
}

/* Ohne Bewegung bleibt die letzte, vollstaendige Schutzstufe lesbar. */
.flow__step-caption-text[data-step-caption-key="4"] {
  display: block;
}

.flow__evidence {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 42%;
  margin: 0;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 24px 60px -30px rgba(23, 36, 44, 0.6);
}

.flow__evidence img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.flow__evidence figcaption {
  display: grid;
  gap: 2px;
  padding: 11px 15px 13px;
  font-size: 0.74rem;
}

.flow__evidence figcaption span {
  color: #93bfdf;
}

/* Beschriftungen in eingebetteten Zeichnungen: Schrift kommt von der Seite. */
.scene svg text {
  stroke: none;
  fill: var(--blue);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 27px;
  font-weight: 600;
}

.scene svg text.t-small {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scene__progress {
  display: none;
}

/* ---------- Desktop ---------- */

@media (min-width: 861px) {
  .scene__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2vw, 34px);
    align-items: center;
  }

  .flow__copy {
    grid-column: 1 / span 4;
  }

  .flow__frame {
    grid-column: 5 / -1;
  }
}

/* ---------- Bewegung (alle Breiten, nur wenn erlaubt) ---------- */

.scenes-on .scene {
  height: calc(var(--len, 320) * 1svh);
}

.scenes-on .scene__stage {
  position: sticky;
  top: var(--header-height);
  display: grid;
  height: calc(100svh - var(--header-height));
  align-items: center;
  overflow: hidden;
}

.scenes-on .scene__grid {
  position: relative;
  padding-block: 0;
}

.scenes-on .flow__copy {
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 46px));
}

/* Bildfeld: nie hoeher als die Buehne, Ebenen liegen uebereinander. */
.scenes-on .flow__frame {
  --fit: calc((100svh - var(--header-height) - 110px) * 1.5);
  position: relative;
  display: block;
  width: min(100%, var(--fit));
  aspect-ratio: 3 / 2;
  justify-self: end;
  overflow: hidden;
  background: #d9dcd7;
}

.scenes-on .flow__layer {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  /* Wechsel als Wischbewegung von rechts: das neue Bild schiebt sich ueber das alte. */
  clip-path: inset(0 0 0 calc((1 - var(--t)) * 100%));
}

.scenes-on .flow__layer > img {
  transform: translateX(calc((1 - var(--t)) * 5%));
}

/* Verpackung: am Ende rueckt die Zeichnung zur Seite, das Einsatzfoto schiebt sich daneben. */
.scenes-on .flow .flow__art {
  --shift: clamp(0, (var(--p) - 0.5) * 14, 1);
  /* Schrumpft zur linken oberen Ecke, damit Beschriftungen am linken Rand im Bild bleiben. */
  transform: translate(calc(var(--shift) * -2%), calc(var(--shift) * -4%)) scale(calc(1 - var(--shift) * 0.36));
  transform-origin: 0 0;
}

.scenes-on .flow__step-caption {
  --caption-opacity: clamp(0, (0.52 - var(--p)) * 50, 1);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 180ms ease, translate 180ms ease;
}

.scenes-on .flow__step-caption.is-active {
  opacity: var(--caption-opacity);
  translate: 0 calc((1 - var(--caption-opacity)) * 6px);
}

.scenes-on .flow__step-caption-text {
  display: none;
}

.scenes-on .flow__step-caption-text.is-active {
  display: block;
}

.scenes-on .flow__evidence {
  opacity: var(--t);
  transform: translateX(calc((1 - var(--t)) * 60px));
}

/* Schritte: nur der aktive ist aufgeklappt. */
.scenes-on .flow__head {
  color: rgba(80, 96, 106, 0.6);
}

.scenes-on .flow__step.is-done .flow__head,
.scenes-on .flow__step.is-active .flow__head {
  color: var(--ink);
}

.scenes-on .flow__step.is-active::before,
.scenes-on .flow__step.is-done::before {
  scale: 1 1;
}

.scenes-on .flow__body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.scenes-on .flow__step.is-active .flow__body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.scenes-on .flow__layers li {
  color: rgba(80, 96, 106, 0.6);
}

.scenes-on .flow__layers li.is-done {
  border-color: var(--line-dark);
  color: var(--ink);
}

.scenes-on .flow__layers li.is-active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.scenes-on .scene__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 2px;
  background: rgba(6, 70, 127, 0.12);
}

.scenes-on .scene__progress span {
  display: block;
  height: 100%;
  scale: clamp(0, var(--p), 1) 1;
  transform-origin: left;
  background: var(--blue);
}

/* ---------- Kleiner Einsatz mit Foto ---------- */

.small-job--photo {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  padding: 0;
  gap: 0;
}

.small-job--photo figure {
  margin: 0;
}

.small-job--photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.small-job--photo .small-job__text {
  display: grid;
  gap: 14px;
  padding: clamp(26px, 3.4vw, 52px);
}

.small-job--photo .small-job__text p:last-child {
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}

@media (max-width: 860px) {
  .small-job--photo {
    grid-template-columns: 1fr;
  }
}

/* ---------- Abschnitt nach dem Ablauf, Leistungszeile ---------- */

.extra {
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(80px, 10vw, 150px);
  border-top: 1px solid var(--line);
}

.extra .small-job {
  margin-top: 0;
}

.service-line {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 10px 0;
  margin: 0;
  padding: clamp(26px, 3vw, 40px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  list-style: none;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-line li:not(:last-child)::after {
  margin-inline: 1.1em;
  color: #a8d0ed;
  content: "·";
}

.proof {
  row-gap: clamp(40px, 5vw, 70px);
}

/* ---------- Handy ---------- */

.hero-svg--mobile {
  display: none;
}

@media (max-width: 860px) {
  /* Einstieg: hochformatiges Bild fuellt den Bildschirm, Text liegt unten auf dem Hallenboden. */
  .js.motion-ok .hero-runway {
    width: 100%;
    height: 300svh;
    margin: 0;
    padding: 0;
  }

  .js.motion-ok .hero-sticky {
    position: sticky;
    top: var(--header-height);
    height: calc(100svh - var(--header-height));
    overflow: hidden;
  }

  .js.motion-ok .hero-frame {
    display: block;
    height: 100%;
  }

  .js.motion-ok .hero-static-photo,
  .js.motion-ok .hero-svg--desktop {
    display: none;
  }

  .js.motion-ok .hero-art {
    position: absolute;
    inset: 0;
    border: 0;
  }

  .js.motion-ok .hero-svg--mobile {
    display: block;
    width: 100%;
    height: 100%;
  }

  .js.motion-ok .hero-copy--intro,
  .js.motion-ok .hero-copy--plan {
    position: absolute;
    right: 20px;
    bottom: 30px;
    left: 20px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .js.motion-ok .hero-copy--plan {
    pointer-events: none;
  }

  .js.motion-ok .hero-copy--intro h1 {
    font-size: clamp(2.3rem, 10.4vw, 3.1rem);
  }

  .js.motion-ok .hero-copy--plan h2 {
    font-size: clamp(2.3rem, 10.4vw, 3.1rem);
  }

  .js.motion-ok .hero-copy p:not(.eyebrow) {
    max-width: 30em;
    margin-bottom: 0.7em;
    font-size: 0.95rem;
  }

  .js.motion-ok .hero-copy--intro .text-link {
    margin-top: 0;
  }

  .js.motion-ok .hero-note {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 4px;
    display: block;
    margin: 0;
    padding: 4px 10px;
    background: rgba(245, 242, 233, 0.88);
    color: var(--ink-soft);
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }

  .js.motion-ok .hero-progress {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 2px;
    background: rgba(6, 70, 127, 0.15);
  }

  .js.motion-ok .hero-progress span {
    display: block;
    width: 100%;
    height: 100%;
    scale: 0 1;
    transform-origin: left;
    background: var(--blue);
  }

  /* Ablauf: Bildfeld oben ueber die volle Breite, Schritte darunter. */
  .scenes-on .scene {
    height: calc(var(--len, 320) * 0.9svh);
  }

  .scenes-on .scene__stage {
    align-items: start;
  }

  .scenes-on .scene__grid {
    width: 100%;
    gap: 14px;
  }

  .scenes-on .flow__frame {
    order: -1;
    width: 100%;
    aspect-ratio: 5 / 4;
  }

  @media (max-height: 740px) {
    .scenes-on .flow__frame {
      aspect-ratio: 3 / 2;
    }
  }

  .scenes-on .flow__copy {
    padding-inline: 20px;
  }

  .scenes-on .flow__copy h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .scenes-on .flow__copy .section-index {
    margin-bottom: 0.8em;
  }

  .scenes-on .flow__lead {
    margin: 0 0 0.9em;
    font-size: 0.86rem;
    line-height: 1.45;
  }

  @media (max-height: 800px) {
    .scenes-on .flow__lead {
      display: none;
    }
  }

  .scenes-on .flow__head {
    grid-template-columns: 2.4em 1fr;
    padding: 0.5em 0;
    font-size: 1.32rem;
  }

  .scenes-on .flow__body > div {
    padding-left: 0;
  }

  .scenes-on .flow__body p {
    padding-bottom: 0.8em;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .scenes-on .flow__layers {
    gap: 5px;
    padding-bottom: 0.9em;
  }

  .scenes-on .flow__layers li {
    padding: 0.25em 0.5em;
    font-size: 0.56rem;
    letter-spacing: 0.03em;
  }

  .scenes-on .flow__layer > figcaption {
    padding: 6px 10px;
    font-size: 0.68rem;
  }

  .scenes-on .flow__layer--art {
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    border-inline: 0;
  }

  /* Die Zeichnung bleibt gross, ihre Beschriftungen uebernehmen die Marken darunter. */
  .scenes-on .flow__art {
    width: 100%;
    height: 100%;
    transform: none;
  }

  .scenes-on .flow__art svg {
    height: 100%;
  }

  .scenes-on .flow__art svg .label {
    display: none;
  }

  .scenes-on .flow__note {
    top: 8px;
    left: 10px;
    font-size: 0.52rem;
  }

  .scenes-on .flow__step-caption {
    width: min(calc(100% - 20px), 430px);
    margin: 0 10px 10px;
    padding: 7px 10px 8px;
  }

  .scenes-on .flow__step-caption-context {
    font-size: 0.52rem;
  }

  .scenes-on .flow__step-caption-text {
    font-size: 0.7rem;
  }

  /* Das echte Foto uebernimmt am Ende das ganze Bildfeld. */
  .scenes-on .flow__evidence {
    inset: 0;
    width: 100%;
    clip-path: inset(0 0 0 calc((1 - var(--t)) * 100%));
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  .scenes-on .flow__evidence img {
    height: 100%;
    aspect-ratio: auto;
  }

  .scenes-on .flow__evidence figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 1em;
    padding: 6px 10px;
    background: rgba(23, 36, 44, 0.9);
    font-size: 0.68rem;
  }

  .extra {
    padding-block: 64px;
  }

  .service-line {
    font-size: 0.66rem;
  }

  /* Kurze Bildschirme: Text im Einstieg kuerzen, damit er die Maschine nicht beruehrt. */
  @media (max-height: 740px) {
    .js.motion-ok .hero-copy p:not(.eyebrow) {
      display: none;
    }

    .js.motion-ok .hero-copy--intro,
    .js.motion-ok .hero-copy--plan {
      bottom: 22px;
    }

    .js.motion-ok .hero-copy--intro h1,
    .js.motion-ok .hero-copy--plan h2 {
      font-size: clamp(2.1rem, 9.4vw, 2.7rem);
    }
  }
}

/* ---------- Was nicht mitgeht: Einleitung und Sortierzeichnung ---------- */

.sort {
  border-top: 1px solid var(--line);
}

.sort__intro {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 6vw, 110px);
  align-items: end;
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(80px, 10vw, 150px) clamp(40px, 5vw, 70px);
}

.sort__intro h2 {
  margin-bottom: 0;
  font-size: clamp(3.2rem, 5.6vw, 6rem);
}

.sort__lead p {
  max-width: 34em;
  margin-bottom: 1.4em;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
}

.sort__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: center;
}

.sort__scene {
  border-top: 0;
  padding-bottom: clamp(60px, 8vw, 120px);
}

.scenes-on .sort__scene {
  padding-bottom: 0;
}

@media (max-width: 860px) {
  .sort__intro {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 70px 34px;
  }
}

/* Fachschilder im Regal: klein halten, sie sind Beiwerk. */
.sort__scene svg text.t-small {
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Kontakt: E-Mail ist der Hauptweg, die Adresse steht zum Kopieren darunter. */
.contact__direct .contact__mail {
  margin-top: 18px;
}

/* Kontaktzeile mit fuenf Feldern (Angaben wie auf der bisherigen Website). */
@media (min-width: 1051px) {
  .contact__meta.contact__meta--fuenf {
    grid-template-columns: 1fr 1fr 1.15fr 1.5fr 1fr;
  }
}

/* ---------- Kopfleiste liegt frei ueber dem Einstiegsbild ----------
   Das Bild reicht bis zur Oberkante des Fensters. Solange der Einstieg steht, ist die Leiste
   durchsichtig; ein heller Verlauf am oberen Rand haelt Logo und Menue lesbar. */

.js.motion-ok .hero-runway {
  margin-top: calc(-1 * var(--header-height));
}

.js.motion-ok .hero-sticky {
  top: 0;
  height: 100svh;
}

.js.motion-ok .hero-sticky::before {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: calc(var(--header-height) * 2.1);
  background: linear-gradient(rgba(245, 242, 233, 0.78), rgba(245, 242, 233, 0.5) 42%, rgba(245, 242, 233, 0));
  content: "";
  pointer-events: none;
}

/* Handy: Der Verlauf beginnt oben deckend im Ton, mit dem auch Notch und Statusleiste
   eingefaerbt werden (siehe setFree in site.js). So entsteht keine Kante am oberen Rand. */
@media (max-width: 860px) {
  .js.motion-ok .hero-sticky::before {
    background: linear-gradient(#e7e3db, #e7e3db 4px, rgba(238, 234, 226, 0.72) 22%, rgba(245, 242, 233, 0.45) 50%, rgba(245, 242, 233, 0));
  }
}

.site-header {
  transition: background-color 260ms ease, border-color 260ms ease;
}

.js.motion-ok .site-header.is-frei {
  border-bottom-color: transparent;
  background: rgba(245, 242, 233, 0);
  backdrop-filter: none;
}

.js.motion-ok body.nav-open .site-header.is-frei {
  background: var(--paper);
}

/* ---------- Erste Darstellung, bevor das Skript gelaufen ist ----------
   Die Klassen js, motion-ok und scenes-on setzt ein kurzes Skript im Seitenkopf, damit das Layout
   von Anfang an stimmt. Bis site.js den Einstieg uebernimmt (hero-bereit), zeigt er das Foto. */

.js.motion-ok:not(.hero-bereit) .hero-paper,
.js.motion-ok:not(.hero-bereit) .hero-grid,
.js.motion-ok:not(.hero-bereit) .hero-drawing,
.js.motion-ok:not(.hero-bereit) .hero-planning,
.js.motion-ok:not(.hero-bereit) .hero-copy--plan,
.js.motion-ok:not(.hero-bereit) .hero-note {
  opacity: 0 !important;
}

.js.motion-ok:not(.hero-bereit) .site-header {
  border-bottom-color: transparent;
  background: rgba(245, 242, 233, 0);
  backdrop-filter: none;
}

/* Buehne: Bild ueber die volle Breite, Text im Bild, Wechsel aus Bewegung und Stillstand.
   Ergaenzt scenes.css. Ohne Bewegung stehen Bild und Zeilen ruhig untereinander. */

.akt {
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.akt__intro {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 6vw, 110px);
  align-items: end;
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(80px, 10vw, 150px) clamp(36px, 4vw, 60px);
}

.akt__intro h2 {
  margin-bottom: 0;
  font-size: clamp(3rem, 5.2vw, 5.6rem);
}

.akt__lead {
  max-width: 34em;
  margin-bottom: 0.4em;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
}

.buehne {
  border-top: 0;
}

.buehne__rahmen {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
  padding-bottom: clamp(50px, 7vw, 100px);
}

.buehne .flow__frame {
  width: 100%;
}

/* Zeilen: Nummer, Titel, ein Satz */
.buehne__zeilen {
  display: grid;
  gap: 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.buehne__zeilen li {
  display: grid;
  gap: 0.35em;
  max-width: 30em;
}

.buehne__zeilen b {
  color: var(--blue);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.buehne__zeilen strong {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(2rem, 3.1vw, 3.3rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.buehne__zeilen span {
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.12vw, 1.12rem);
  line-height: 1.5;
}

.buehne__schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.buehne__schritte li {
  position: relative;
  padding-top: 9px;
  transition: color 260ms ease;
}

.buehne__schritte li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  scale: 0 1;
  transform-origin: left;
  background: var(--blue);
  content: "";
  transition: scale 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Die Zeilen nennen die Schichten, Beschriftungen in der Zeichnung sind hier ueberfluessig. */
.buehne .flow__art--pack svg .label,
.buehne--teile svg .label {
  display: none;
}

/* Hallenplan: die Beschriftungen gehoeren hier zur Zeichnung. */
.buehne.buehne--plan svg .label {
  display: inline;
}

.akt--klein .akt__intro h2 {
  font-size: clamp(2.6rem, 4.2vw, 4.6rem);
}

/* ---------- Bewegung ---------- */

.scenes-on .buehne__rahmen {
  --feld: min(var(--shell), calc((100svh - var(--header-height) - 118px) * 2));
  width: var(--feld);
  padding-bottom: 0;
}

.scenes-on .buehne .flow__frame {
  --fit: var(--feld);
  width: 100%;
  aspect-ratio: 2 / 1;
  justify-self: auto;
}

/* Die Zeichnung fuellt das Feld und sitzt rechts, links unten bleibt Platz fuer die Zeile. */
.scenes-on .buehne .flow__art {
  width: 100%;
  height: 100%;
}

.scenes-on .buehne .flow__art svg {
  width: 100%;
  height: 100%;
}

.scenes-on .buehne__zeilen {
  position: absolute;
  bottom: 58px;
  left: 0;
  z-index: 5;
  display: block;
  right: 0;
  margin: 0;
  pointer-events: none;
}

.scenes-on .buehne__zeilen li {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(27em, 34%);
  padding: clamp(18px, 1.8vw, 28px) clamp(20px, 2vw, 32px);
  background: rgba(245, 242, 233, 0.95);
  box-shadow: 0 18px 50px -30px rgba(23, 36, 44, 0.5);
  opacity: 0;
  translate: 0 18px;
  transition: opacity 380ms ease, translate 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Zeile in der freien Mitte, wenn links unten die Maschine steht. */
.scenes-on .buehne__zeilen li.zeile--mitte {
  left: 43%;
  width: min(25em, 27%);
}

.scenes-on .buehne__zeilen li.is-active {
  opacity: 1;
  translate: 0 0;
}

.scenes-on .buehne__schritte {
  margin-top: 16px;
}

.scenes-on .buehne__schritte li {
  color: rgba(80, 96, 106, 0.6);
}

.scenes-on .buehne__schritte li.is-active {
  color: var(--blue);
}

.scenes-on .buehne__schritte li.is-done {
  color: var(--ink);
}

.scenes-on .buehne__schritte li.is-active::before,
.scenes-on .buehne__schritte li.is-done::before {
  scale: 1 1;
}

/* Fotohinweis nach oben rechts, unten links steht die Zeile. */
.scenes-on .buehne .flow__layer > figcaption {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
}

/* Verpackung: am Ende rueckt die Zeichnung nach oben links, das Einsatzfoto schiebt sich daneben. */
@media (min-width: 861px) {
  .scenes-on .buehne--ablauf .flow__art--pack {
    --shift: clamp(0, (var(--p) - 0.49) * 28, 1);
    transform: translate(calc(var(--shift) * -2%), calc(var(--shift) * -4%)) scale(calc(1 - var(--shift) * 0.4));
    transform-origin: 0 0;
  }

  .scenes-on .buehne .flow__evidence {
    width: 46%;
  }
}

/* ---------- Handy: Bild oben, die Zeile darunter ---------- */

@media (max-width: 860px) {
  .akt__intro {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 70px 30px;
  }

  .scenes-on .buehne .scene__stage {
    align-items: start;
  }

  /* Der Hallenplan hat keine Zeilen darunter: mittig setzen statt oben. */
  .scenes-on .buehne--plan .scene__stage {
    align-items: center;
  }

  .scenes-on .buehne__rahmen {
    --feld: 100%;
    width: 100%;
  }

  .scenes-on .buehne .flow__frame {
    aspect-ratio: 5 / 4;
  }

  .scenes-on .buehne__zeilen {
    position: relative;
    bottom: auto;
    width: auto;
    min-height: 13.5em;
    margin: 18px 20px 0;
  }

  .scenes-on .buehne__zeilen li,
  .scenes-on .buehne__zeilen li.zeile--mitte {
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .scenes-on .buehne__zeilen strong {
    font-size: clamp(1.9rem, 8.4vw, 2.5rem);
  }

  .scenes-on .buehne__schritte {
    margin: 10px 20px 0;
    gap: 6px 16px;
    font-size: 0.58rem;
  }
}

/* ---------- Was nicht mitgeht (kurz) ---------- */

.rest {
  border-top: 1px solid var(--line);
}

.rest .akt__intro {
  align-items: start;
  padding-bottom: clamp(80px, 10vw, 150px);
}

.rest__punkte {
  display: grid;
  gap: 0;
  margin: 1.4em 0 2em;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.rest__punkte li {
  padding: 0.85em 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

/* ---------- Streifen zum Shop ---------- */

.rest .akt__intro {
  padding-bottom: clamp(50px, 6vw, 90px);
}

.streifen {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 6vw, 110px);
  align-items: center;
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(40px, 5vw, 70px) clamp(90px, 11vw, 160px);
  border-top: 1px solid var(--line);
}

.streifen h2 {
  margin-bottom: 0.5em;
  font-size: clamp(1.9rem, 2.7vw, 3rem);
  line-height: 1;
}

.streifen__text > p:not(.section-index) {
  margin-bottom: 1.1em;
  color: var(--ink-soft);
}

.streifen__bild {
  display: flex;
  gap: clamp(14px, 2.4vw, 40px);
  align-items: flex-end;
  justify-content: flex-end;
}

.streifen__bild img {
  width: auto;
  height: clamp(120px, 15vw, 230px);
  min-width: 0;
}

.streifen__bild img:last-child {
  height: clamp(96px, 12vw, 184px);
}

@media (max-width: 860px) {
  .streifen {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .streifen__bild {
    justify-content: space-between;
  }

  .streifen__bild img {
    height: 25vw;
  }

  .streifen__bild img:last-child {
    height: 20vw;
  }
}

@media (min-width: 861px) {
  .scenes-on .buehne .flow__evidence--klein {
    width: 34%;
  }
}


/* ---------- Renderings als Standbilder (Blicktest) ---------- */

.flow__stills {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
}

.flow__stills .flow__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scenes-on .flow__stills .flow__still {
  opacity: var(--t);
}

.scenes-on .buehne .flow__stills {
  aspect-ratio: auto;
}

/* Zeichnungen, deren Beschriftung zur Aussage gehoert: auch auf dem Handy zeigen. */
@media (max-width: 860px) {
  .scenes-on .buehne .flow__art--beschriftet svg .label {
    display: inline;
  }

  .scenes-on .buehne .flow__art--beschriftet svg text {
    font-size: 34px;
  }
}

/* ---------- Fassung ohne Animation (reduzierte Bewegung oder kein JavaScript) ----------
   Das Belegfoto darf die Zeichnung nicht verdecken: es steht dann darunter. */

html:not(.scenes-on) .buehne .flow__layer--art {
  display: block;
  aspect-ratio: auto;
  padding: 40px 0 0;
}

html:not(.scenes-on) .buehne .flow__art {
  width: 100%;
}

html:not(.scenes-on) .buehne .flow__evidence {
  position: static;
  width: min(100%, 560px);
  margin: 18px 0 0 auto;
  box-shadow: none;
}

html:not(.scenes-on) .buehne__schritte {
  display: none;
}

html:not(.scenes-on) .buehne svg .label {
  display: inline;
}

/* Ruhigerer Ton fuer alles nach dem Ablauf: Was nicht mitgeht, Shop-Streifen, Fakten, Kontakt.
   Der Einstieg und der Ablauf auf der Buehne bleiben unveraendert gross. */

.rest .akt__intro h2 {
  font-size: clamp(2.3rem, 3.5vw, 3.8rem);
}

.rest .akt__lead {
  font-size: clamp(1rem, 1.2vw, 1.16rem);
}

.rest .akt__intro {
  padding-block: clamp(64px, 7vw, 104px) clamp(40px, 4.5vw, 64px);
}

.streifen {
  padding-block: clamp(36px, 4vw, 56px) clamp(70px, 8vw, 116px);
}

.contact__headline h2 {
  font-size: clamp(2.6rem, 4.4vw, 4.8rem);
}

/* Fakten als Band */
.band {
  background: var(--blue);
  color: #fff;
}

.band__innen {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 5vw, 90px);
  align-items: center;
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(44px, 5vw, 76px);
}

.band h2 {
  margin: 0;
  font-size: clamp(1.9rem, 2.6vw, 2.8rem);
  line-height: 1;
}

.band__fakten {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: clamp(26px, 4vw, 70px);
  margin: 0;
}

.band__fakten dt {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.7rem, 2.3vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.band__fakten dd {
  margin: 0.35em 0 0;
  color: #d6e1e9;
  font-size: 0.84rem;
}

.band .service-line {
  padding-top: clamp(20px, 2.4vw, 32px);
}

@media (max-width: 860px) {
  .band__innen {
    grid-template-columns: 1fr;
  }

  .band__fakten {
    grid-template-columns: 1fr 1fr;
  }
}

.band__fakten a {
  color: #fff;
  text-underline-offset: 0.25em;
}

/* Grosse Bildschirme. Wird als letztes Stylesheet geladen.

   Die Seite ist fuer Fensterbreiten bis etwa 1830 px abgestimmt. Darueber blieb sie stehen:
   Inhaltsbreite 1440 px, Fliesstext 17 px. Auf einem Monitor mit 2560 px wirkte sie deshalb klein,
   und erst 125 bis 150 % Browser-Zoom sah richtig aus.

   Loesung: Oberhalb von 1830 px waechst die Grundschriftgroesse stufenlos mit der Fensterbreite.
   Alles, was in rem oder em bemessen ist, waechst automatisch mit. Die wenigen festen Pixelwerte,
   die das Bild praegen, werden hier auf rem umgestellt. Unter 1830 px aendert sich nichts. Zielbild: 2560 px Fensterbreite sieht aus wie bisher 140 % Browser-Zoom. */

@media (min-width: 1830px) {
  html {
    /* 1830 px -> 100 %, 1920 px -> 105 %, 2560 px -> 140 %, 3440 px -> 188 %, gedeckelt bei 200 %. */
    font-size: clamp(100%, 0.875vw, 200%);
  }

  :root {
    --header-height: 5.125rem;
    --shell: min(91vw, 90rem);
    --measure: 40.6rem;
  }

  body {
    font-size: 1.0625rem;
  }

  /* Kopfleiste */
  .site-header {
    gap: 2rem;
    padding: 1rem max(4.5vw, calc((100vw - 90rem) / 2));
  }

  .brand img {
    width: 9.125rem;
  }

  .button {
    min-height: 3.06rem;
    gap: 1.4rem;
  }

  .button--small {
    min-height: 2.625rem;
  }

  /* Einstieg */
  .js.motion-ok .hero-copy--intro,
  .js.motion-ok .hero-copy--plan {
    left: max(4.5vw, calc((100vw - 90rem) / 2));
    width: min(31%, 29.4rem);
  }

  .js.motion-ok .hero-copy--plan {
    width: min(29%, 27.5rem);
  }

  .hero-copy {
    max-width: 33.75rem;
  }

  .hero-copy p:not(.eyebrow) {
    max-width: 26.25rem;
  }

  .js.motion-ok .hero-note {
    padding: 0.5rem 0.7rem;
  }

  .js.motion-ok .hero-progress,
  .scenes-on .scene__progress {
    height: 0.125rem;
  }

  /* Buehne: die Reserve fuer Schrittmarken und Rand waechst mit. */
  .scenes-on .buehne__rahmen {
    --feld: min(var(--shell), calc((100svh - var(--header-height) - 7.4rem) * 2));
  }

  .scenes-on .akt--ruhig .buehne__rahmen {
    --feld: min(calc(var(--shell) * 0.92), calc((100svh - var(--header-height) - 9.4rem) * 2));
  }

  .scenes-on .buehne__zeilen {
    bottom: 3.6rem;
  }

  .scenes-on .buehne__zeilen li {
    box-shadow: 0 1.1rem 3.1rem -1.9rem rgba(23, 36, 44, 0.5);
  }

  .buehne__schritte {
    gap: 0.5rem 1.6rem;
  }

  .buehne__schritte li {
    padding-top: 0.56rem;
  }

  .flow__note {
    top: 0.75rem;
    left: 0.9rem;
  }

  .flow__layer > figcaption {
    padding: 0.56rem 0.9rem;
  }

  .flow__evidence figcaption {
    padding: 0.7rem 0.95rem 0.8rem;
  }

  /* Abschnitte: Abstaende, die bisher bei einem Pixelwert stehen blieben. */
  .akt__intro {
    gap: clamp(30px, 6vw, 6.9rem);
    padding-block: clamp(80px, 10vw, 9.4rem) clamp(36px, 4vw, 3.75rem);
  }

  .rest .akt__intro {
    padding-block: clamp(64px, 7vw, 6.5rem) clamp(40px, 4.5vw, 4rem);
  }

  .rest__punkte li {
    padding: 0.85em 0;
  }

  .streifen {
    gap: clamp(30px, 6vw, 6.9rem);
    padding-block: clamp(36px, 4vw, 3.5rem) clamp(70px, 8vw, 7.25rem);
  }

  .streifen__bild {
    gap: clamp(14px, 2.4vw, 2.5rem);
  }

  .streifen__bild img {
    height: clamp(120px, 15vw, 14.4rem);
  }

  .streifen__bild img:last-child {
    height: clamp(96px, 12vw, 11.5rem);
  }

  .band__innen {
    gap: clamp(24px, 5vw, 5.6rem);
    padding-block: clamp(44px, 5vw, 4.75rem);
  }

  .band__fakten {
    gap: clamp(26px, 4vw, 4.4rem);
  }

  /* Kontakt und Fuss */
  .contact {
    column-gap: clamp(50px, 10vw, 9.4rem);
    padding-block: clamp(100px, 15vw, 13.75rem) clamp(80px, 11vw, 10rem);
  }

  .contact__direct .button {
    width: min(100%, 20.6rem);
  }

  .contact__meta {
    margin-top: clamp(70px, 10vw, 8.75rem);
  }

  .contact__meta address,
  .contact__meta p {
    padding: clamp(22px, 3vw, 2.4rem);
  }

  .site-footer {
    padding: clamp(55px, 7vw, 6.25rem) max(4.5vw, calc((100vw - 90rem) / 2)) 1.75rem;
  }
}