/* ============ Fonts ============ */
/* Served from our own server, so no visitor IP goes to Google (DSGVO). Variable fonts, latin and latin-ext only. */
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/funnel-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/funnel-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/funnel-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/funnel-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/martian-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/martian-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Tokens ============ */
:root {
  --bg: #050506;
  --fg: #f4f4f5;
  --fg-soft: #c9c9cf;
  --fg-muted: #a1a1a8;
  --fg-dim: #7c7c85;
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.09);
  --line-faint: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.55);
  --accent: #a9c1ff;
  --accent-rgb: 169, 193, 255;

  /* Surfaces share the face of the AI OS plates. */
  --surface-1: #0a0a0d;
  --surface-2: #111217;
  --surface-3: #16171c;
  --card-fill: linear-gradient(160deg, var(--surface-3) 0%, var(--surface-1) 60%);
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --elev: 0 48px 120px -60px rgba(0, 0, 0, 0.9);
  --r-lg: 6px;
  --r-md: 4px;
  --r-sm: 3px;
  --glow-dot: none;
  --glow-laser: 0 0 5px 1px rgba(var(--accent-rgb), 0.95), 0 0 16px 2px rgba(var(--accent-rgb), 0.5);

  --font-display: "Funnel Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-h2: clamp(2.5rem, 1.1rem + 4vw, 5rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.15vw, 2rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  --fs-mono: 11px;
  --ls-mono: 0.08em;
  --fs-mono-sm: 10px;
  --ls-mono-sm: 0.06em;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  /* Rhythm: every chapter ends --seam-end below its content and the next one opens --seam later with its rule.
     Pinned scenes start their content --pin-seam below the top of the screen. */
  --seam: clamp(72px, 11vh, 120px);
  --seam-end: clamp(16px, 3vh, 32px);
  --pin-seam: var(--seam);
  --rule-gap: clamp(24px, 3.5vh, 36px);
  --head-gap: clamp(40px, 7vh, 72px);
  /* One measuring grid for the whole page: 62px cells (the container ÷ 20), a major line every four. */
  --grid-cell: 62px;
  --grid-line: rgba(255, 255, 255, 0.04);
  --grid-major: rgba(255, 255, 255, 0.05);
  --feather: 96px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sweep: cubic-bezier(0.7, 0, 0.25, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-state: 0.45s;
  --dur-enter: 0.9s;
  --dur-sweep: 1.2s;
  --stagger: 80ms;
  --rise: 16px;

  color-scheme: dark;
}
@media (max-width: 900px) {
  :root { --seam: 64px; --seam-end: 24px; --pin-seam: 24px; --rule-gap: 20px; --head-gap: 40px; --feather: 64px; }
}
@media (max-width: 900px) and (max-height: 700px) {
  :root { --seam: 48px; --pin-seam: 16px; }
}

/* Angle of the light that runs around the form card while it is being filled in. */
@property --beam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============ Buttons ============ */
/* Hard-edged: a solid slab or a hairline frame, in sentence case. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--fg);
  transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.pill--ghost:hover { border-color: var(--line-strong); background: var(--wash); }
.pill--solid { background: var(--fg); border-color: var(--fg); color: var(--on-fg); }
.pill--solid:hover { background: var(--fg-soft); border-color: var(--fg-soft); }
.pill span { transition: transform var(--dur-fast) var(--ease-out); }
.pill:hover span { transform: translate(2px, -2px); }

/* ============ Hero ============ */
/* Five scenes from the work klonx takes over – the shop floor, the loading bay, the workshop, the office, and
   an abstract close – as films graded in one look (in the files themselves: monochrome, accent-blue shadows, one
   mean brightness), full-bleed and dark, so stock from different hands reads as one. Each scene has one title,
   monumental at the foot of the picture; below a hairline sit the two actions and the scene index, whose rail
   fills while a scene runs (hero.js). The still fades up once loaded and the first title rises after it
   (.is-ready); each film fades in over the one before. Scrolling, the picture drifts a little behind the page
   (scroll timeline where supported). */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--bg); }
/* Still and films lie on top of each other; the newest one fades in. */
.hero__media > img,
.hero__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hero__media > video { opacity: 0; transition: opacity 1.3s var(--ease-std); }
.hero__media > video.is-on { opacity: 1; }
/* Shade: deep at the foot for the copy, a little at the top for the nav, a little on the left for the headline. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(5, 5, 6, 0.6) 0, transparent 22%),
    linear-gradient(to top, rgba(5, 5, 6, 0.96) 0, rgba(5, 5, 6, 0.7) 26%, rgba(5, 5, 6, 0.15) 58%, transparent 78%),
    linear-gradient(90deg, rgba(5, 5, 6, 0.5) 0, transparent 58%);
}
/* Film grain */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ---- Nav ---- */
.nav { position: relative; z-index: 3; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  height: 72px;
}
.nav__logo img { height: 20px; width: auto; }
.nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.nav__links a { color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-std); }
.nav__links a:hover { color: var(--fg); }
.nav__cta { margin-left: auto; height: 38px; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__toggle span {
  width: 14px;
  height: 1.2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.1px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.1px) rotate(-45deg); }

.nav__mobile {
  position: absolute;
  inset: 72px var(--gutter) auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(12, 12, 14, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a:not(.pill) { padding: 14px 12px; color: var(--fg-muted); border-radius: 2px; }
.nav__mobile a:not(.pill):hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.nav__mobile .pill { margin-top: 8px; height: 44px; }

/* ---- Stage: one monumental title per scene at the foot of the picture ---- */
.hero__stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 96px;
  padding-bottom: clamp(32px, 6vh, 64px);
}
/* All titles share one cell, so the stage keeps the height of the tallest. */
.hero__titles { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  align-self: end;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7.2vw, 9.25rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--fg);
}
/* hero.js wraps every word and every letter in its own span (--c counts the letters along the line). Each word
   is a mask the letters rise into one after another – a word never breaks, so this holds when a line wraps on a
   phone. Each line is a mask too, which the whole line leaves upwards when the next scene comes. The padding keeps
   the descenders inside the masks, the negative margin keeps the spacing. */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__line > span { display: block; }
.hero__line--b { color: rgba(255, 255, 255, 0.5); }
.hero__word { display: inline-block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: top; white-space: nowrap; }
.hero__char { display: inline-block; transform: translateY(135%); }
.hero__slide.is-active .hero__char { transform: none; }
html:not(.js) .hero__slide:not(.is-active) { visibility: hidden; }

/* ---- Footer row: the actions on the left, the scene index on the right – below a hairline ---- */
.hero__footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px clamp(24px, 4vw, 64px);
  padding-top: 28px;
  padding-bottom: clamp(26px, 4.5vh, 44px);
}
.hero__actions { display: flex; gap: 10px; }

/* The scene index: one rail per scene, filling while it runs. */
.hero__scenes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 108px));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__scene button {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px 0 2px;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-align: left;
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
  transition: color var(--dur-state) var(--ease-std);
}
.hero__scene button::before,
.hero__scene button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}
.hero__scene button::before { background: rgba(255, 255, 255, 0.18); }
.hero__scene button::after { background: var(--fg); transform: scaleX(0); transform-origin: left; }
.hero__scene.is-active button::after { transform: scaleX(var(--p, 1)); }
.hero__scene button:hover,
.hero__scene.is-active button { color: var(--fg); }
.hero__scene-num { color: var(--fg-dim); }
.hero__scene button:focus-visible { outline-offset: 6px; }

/* ---- Choreography ---- */
@media (prefers-reduced-motion: no-preference) {
  .nav__inner { animation: rise 1.2s var(--ease-out) 0.2s both; }

  .js .hero__media > img { opacity: 0; transition: opacity 1.6s var(--ease-std); }
  .js .hero.is-ready .hero__media > img { opacity: 1; }

  /* A title builds up letter by letter once the picture is in, the second line a beat later. When the scene
     changes, the old title slides out upwards first, line by line and fast, and only then does the new one build
     up – the two never share the stage. */
  .js .hero:not(.is-ready) .hero__titles { visibility: hidden; }
  .js .hero:not(.is-ready) .hero__slide .hero__char { transform: translateY(135%); }
  .hero.is-ready .hero__slide.is-active .hero__char { transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) calc(0.5s + var(--c, 0) * 22ms); }
  .hero.is-ready .hero__slide.is-active .hero__line--b .hero__char { transition-delay: calc(0.66s + var(--c, 0) * 22ms); }
  .hero__slide.is-leaving .hero__char { transform: none; }
  .hero__slide.is-leaving .hero__line > span { transform: translateY(-140%); transition: transform 0.45s cubic-bezier(0.7, 0, 0.84, 0); }
  .hero__slide.is-leaving .hero__line--b > span { transition-delay: 0.05s; }

  .js .hero:not(.is-ready) .hero__footer > * { opacity: 0; }
  .hero.is-ready .hero__footer > * { animation: rise var(--dur-enter) var(--ease-out) 1s both; }
  .hero.is-ready .hero__footer > :nth-child(2) { animation-delay: 1.12s; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes hero-drift { to { transform: translateY(16vh); } }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .hero__scenes { flex: 1 1 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero__slide { font-size: clamp(2.75rem, 13.5vw, 4.5rem); }
  .hero__actions { flex: 1 1 100%; }
  .hero__actions .pill { flex: 1; height: 46px; }
  /* Phones: the index keeps its rails and numbers. */
  .hero__scenes { gap: 6px; }
  .hero__scene button { padding-top: 12px; min-height: 40px; }
  .hero__scene-name { display: none; }
}

/* ============ Shared ============ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nowrap { white-space: nowrap; }

/* ---- Chapter start: every chapter opens with the same gap above its heading, without a line. ---- */
.rule { position: relative; padding-top: var(--rule-gap); }

/* ---- Chapter head: two-tone H2 on the left, a short aside bottom-aligned on the right ---- */
.chapter-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36ch);
  align-items: end;
  column-gap: 40px;
  row-gap: 20px;
}
.chapter-head > :where(:last-child:not(:first-child)) { justify-self: end; max-width: 36ch; margin: 0; }
.os__title,
.usecases__title,
.process__title,
.about__title,
.faq__title,
.contact__title,
.work__title,
.values__title,
.jobs__title,
.offer__title {
  max-width: 16em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
:is(.os__title, .usecases__title, .process__title, .about__title, .faq__title, .contact__title, .work__title, .values__title, .jobs__title, .offer__title) > span:not(.nowrap) { display: block; color: var(--fg-dim); }

/* ---- Entrances: one observer (reveal.js), one rise, one stagger. Hidden only while JS runs the show. ---- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] .reveal:not(.is-in) [data-rise],
  [data-reveal] .reveal-self:not(.is-in) { opacity: 0; }
  [data-reveal] .reveal.is-in [data-rise],
  [data-reveal] .reveal-self.is-in { animation: rise var(--dur-enter) var(--ease-out) calc(var(--delay, 0s) + var(--i, 0) * var(--stagger)) both; }
  /* Large panels rise without the blur – it would have to be repainted over live content. */
  [data-reveal] .reveal-self.is-in { animation-name: rise-flat; }
  /* The head follows its rule. */
  .rule.reveal { --delay: 0.25s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--rise)); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes rise-flat {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: none; }
}
@keyframes live-blink { 50% { opacity: 0.3; } }
@keyframes beam { to { --beam: 360deg; } }

@media (max-width: 900px) {
  .chapter-head { grid-template-columns: minmax(0, 1fr); }
  .chapter-head > :where(:last-child:not(:first-child)) { justify-self: start; max-width: 52ch; }
}

/* ---- Surfaces: some chapters stand on paper. The same tokens, inverted; product windows inside stay dark. ---- */
:root {
  --paper: #f1f1ee;
  --on-fg: #0a0a0b;
  --wash: rgba(255, 255, 255, 0.06);
}
.surface-light {
  --fg: #0b0b0c;
  --fg-soft: #2b2b30;
  --fg-muted: #55555d;
  --fg-dim: #74747c;
  --line: rgba(11, 11, 12, 0.18);
  --line-soft: rgba(11, 11, 12, 0.1);
  --line-faint: rgba(11, 11, 12, 0.06);
  --line-strong: rgba(11, 11, 12, 0.6);
  --accent: #3653d4;
  --accent-rgb: 54, 83, 212;
  --grid-line: rgba(11, 11, 12, 0.035);
  --grid-major: rgba(11, 11, 12, 0.05);
  --glow-dot: none;
  --on-fg: #f4f4f5;
  --wash: rgba(11, 11, 12, 0.04);
  background: var(--paper);
  color: var(--fg);
  color-scheme: light;
}
.surface-light .ops {
  --fg: #f4f4f5;
  --fg-soft: #c9c9cf;
  --fg-muted: #a1a1a8;
  --fg-dim: #7c7c85;
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.09);
  --line-faint: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.55);
  --accent: #a9c1ff;
  --accent-rgb: 169, 193, 255;
  --on-fg: #0a0a0b;
  color: var(--fg);
  color-scheme: dark;
}

/* ============ Shared texture: one feathered measuring grid ============ */
/* Lines sit at 50% ± n·62px, majors every 248px – on wide screens they land on the content edges.
   The grid fades in from black at the top and out at the bottom, so it never ends on a hard line. */
.usecases::before,
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 50% 0 / calc(var(--grid-cell) * 4) 100%,
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 100% calc(var(--grid-cell) * 4),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) calc(50% + var(--grid-cell) / 2) 0 / var(--grid-cell) 100%,
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% var(--grid-cell);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent), radial-gradient(var(--grid-focus), #000 30%, transparent 75%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent), radial-gradient(var(--grid-focus), #000 30%, transparent 75%);
  mask-composite: intersect;
}

/* ============ Statement ============ */
/* What klonx is, in one sentence set large on paper; three facts on hairlines below; then the first band. */
.statement { position: relative; padding-top: clamp(96px, 15vh, 176px); }
.statement__text {
  max-width: 23em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 0.9rem + 4vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.statement__text span { color: var(--fg-dim); }

.statement__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(72px, 12vh, 136px);
  margin-bottom: 0;
  list-style: none;
}
.statement__facts li { padding-top: 20px; border-top: 1px solid var(--line); }
.statement__idx { margin: 0 0 32px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); color: var(--fg-dim); }
.statement__facts h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.015em; }
.statement .band { margin-top: clamp(96px, 15vh, 176px); }
.statement__facts h3 + p { max-width: 36ch; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }

/* ---- Band: one still from the shop floor, full-bleed between two chapters, drifting slowly as it passes
   (scroll timeline where supported), with its figure number and credit. ---- */
.band {
  position: relative;
  height: clamp(420px, 82vh, 920px);
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}
.band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 6, 0.8), transparent 38%);
  pointer-events: none;
}
.band figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band img { animation: band-drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes band-drift {
  from { transform: translateY(-7%) scale(1.15); }
  to { transform: translateY(7%) scale(1.15); }
}

@media (max-width: 900px) {
  .statement__facts { grid-template-columns: minmax(0, 1fr); }
  .statement__idx { margin-bottom: 14px; }
  .band { height: 62vh; }
}

/* ============ AI OS ============ */
.os { position: relative; padding-top: var(--seam); }
.os__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* The stage pins while the track scrolls past; without JS or with reduced motion it simply flows. */
.os__track { position: relative; }
.js .os:not(.os--static) .os__track { height: 420vh; }
.js .os:not(.os--static) .os__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
/* Same top line as the Vorgehen frame: both pinned instruments start --pin-seam below the top. */
.os__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  height: 100%;
  padding-block: var(--pin-seam) var(--seam-end);
}

/* Anchored to the top so expanding layers never shift the list. */
.os__copy { align-self: start; }
.os__layers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.os__layer { position: relative; border-bottom: 1px solid var(--line-soft); }
.os__layer-btn {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 18px 0 18px 22px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.os__layer-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.os__layer-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--dur-state) var(--ease-std);
}
.os__layer-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-dim);
  transition: color var(--dur-state) var(--ease-std);
}
.os__layer-btn:hover .os__layer-title { color: var(--fg-muted); }
.os__layer.is-active .os__layer-tag { color: var(--accent); }
.os__layer.is-active .os__layer-title,
.os__layer.is-lit .os__layer-title { color: var(--fg); }
.os__layer-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-state) var(--ease-out); }
.os__layer-body > div { overflow: hidden; }
.os__layer-body p {
  max-width: 46ch;
  margin: 0;
  padding: 0 0 20px 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.os__layer.is-active .os__layer-body,
.os--static .os__layer-body { grid-template-rows: 1fr; }
.os__summary {
  margin: 28px 0 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease-std), transform 0.6s var(--ease-out);
}
.os.is-complete .os__summary,
.os--static .os__summary { opacity: 1; transform: none; }

.os__stage { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; }
.os--static .os__stage { height: min(78vh, 720px); }
html:not(.js) .os__stage { display: none; }
/* Feathered top and bottom: the stack's halo dissolves before it reaches the caption rule. */
.os__canvas {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 min(24px, 5%), #000 calc(100% - min(40px, 8%)), transparent);
  mask-image: linear-gradient(transparent, #000 min(24px, 5%), #000 calc(100% - min(40px, 8%)), transparent);
}
.os__caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.os__status { display: inline-flex; flex: none; align-items: center; gap: 8px; white-space: nowrap; color: var(--fg-muted); }
.os__status::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
  box-shadow: var(--glow-dot);
}

@media (prefers-reduced-motion: no-preference) {
  .os__status::before { animation: live-blink 1.6s ease-in-out infinite; }
}

@media (max-width: 900px) {
  /* Stage on top, the active layer's text underneath – both have to fit one screen. */
  .os__grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 16px;
  }
  .os__stage { order: -1; }
  /* The chapter rule already opens the section; a second line here would stack up under the caption. */
  .os__layers { border-top: 0; }
  .os__layer-btn { padding: 12px 0 12px 18px; gap: 4px; }
  .os__layer-body p { padding: 0 0 14px 18px; font-size: 14px; line-height: 1.5; }
  .os__summary { margin-top: 14px; padding-left: 18px; font-size: 14px; }
  .os:not(.is-complete) .os__summary { display: none; }
  .os--static .os__summary { display: block; }
}
@media (max-width: 520px) {
  .os__fig { display: none; }
}
/* Phones in landscape: side by side again, otherwise the stage has no height left. */
@media (max-width: 900px) and (max-height: 520px) {
  .os__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: none; }
  .os__stage { order: 0; }
  .os__layer-btn { padding-block: 8px; }
  .os__layer-body p { padding-bottom: 10px; font-size: 13px; }
}

/* ============ Einsatz ============ */
/* Between the two films (usecases.js): three scenario tabs on hairlines, and below them the case record as it
   looks in the klonx AI OS – the case, six checks by Mikro-AIs, the proposal your team releases and the audit
   trail. It sits on the measuring grid with a faint, still glow behind the window. */
.usecases {
  --warn: 255, 196, 120;
  --grid-focus: 70% 60% at 50% 62%;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--seam) var(--seam-end);
}
@supports not (overflow-x: clip) {
  .usecases { overflow: hidden; }
}
.usecases::after {
  content: "";
  position: absolute;
  top: 34%;
  left: 50%;
  z-index: -1;
  width: min(90vw, 1100px);
  aspect-ratio: 1.6;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.03) 55%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.usecases__head { margin-bottom: var(--head-gap); }
.usecases__lede { font-size: 16px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }

/* ---- Tabs: the active rail fills while its scenario plays (usecases.js sets --p) ---- */
.usecases__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.usecase { position: relative; border-top: 1px solid var(--line-soft); }
.usecase::before,
.usecase::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  pointer-events: none;
}
.usecase.is-active::after { background: rgba(var(--accent-rgb), 0.14); }
.usecase::before {
  z-index: 1;
  background: var(--accent);
  box-shadow: var(--glow-dot);
  transform: scaleX(0);
  transform-origin: left;
}
.usecase.is-active::before { transform: scaleX(var(--p, 1)); }
.usecase__btn {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 20px 0 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.usecase__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.usecase__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--dur-state) var(--ease-std);
}
.usecase__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-dim);
  transition: color var(--dur-state) var(--ease-std);
}
.usecase__text { max-width: 42ch; font-size: 14px; line-height: 1.55; color: var(--fg-dim); text-wrap: pretty; transition: color var(--dur-state) var(--ease-std); }
.usecase__btn:hover .usecase__title { color: var(--fg-muted); }
.usecase.is-active .usecase__tag { color: var(--accent); }
.usecase.is-active .usecase__title { color: var(--fg); }
.usecase.is-active .usecase__text { color: var(--fg-muted); }

/* ---- The window: a case record in the klonx AI OS (usecases.js fills it) ---- */
.usecases__stage { position: relative; margin: 0; }
html:not(.js) .usecases__stage { display: none; }
.ops {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--card-hi), 0 48px 120px -60px rgba(0, 0, 0, 0.95);
  font-size: 13px;
}
.ops p { margin: 0; }
/* Small mono labels: crumbs, status, column heads, the log. */
.ops__crumbs,
.ops__status,
.ops__note,
.ops__kind,
.ops__checks-head,
.ops__panel-head,
.ops__basis,
.ops__signoff,
.ops__log-head,
.ops__draft p {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
}
/* The system a check ran in, or an attachment type. */
.ops__tag {
  display: inline-block;
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 15px;
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-dim);
}

/* The bar: where the case sits, its status, and that the data are examples. */
.ops__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.ops__crumbs { display: flex; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--fg-dim); }
.ops__crumbs > span + span::before { content: "/"; margin: 0 10px; color: var(--line); }
.ops__id { color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.ops__status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--fg-muted);
  transition: color var(--dur-state) var(--ease-std), border-color var(--dur-state) var(--ease-std);
}
.ops__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); transition: background-color var(--dur-state) var(--ease-std); }
.ops__status.is-run { color: var(--fg-soft); }
.ops__status.is-run::before { background: var(--accent); }
.ops__status.is-wait { border-color: rgba(var(--warn), 0.4); color: rgb(var(--warn)); }
.ops__status.is-wait::before { background: rgb(var(--warn)); }
.ops__status.is-done { border-color: rgba(var(--accent-rgb), 0.35); color: var(--fg); }
.ops__status.is-done::before { background: var(--accent); }
.ops__note { flex: none; padding: 3px 8px; border: 1px dashed var(--line); border-radius: 999px; color: var(--fg-dim); }

/* The body: the case and its checks on the left, the proposal for the team on the right. */
.ops__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.6fr); }
.ops__main { min-width: 0; padding: 24px 24px 18px; }
.ops__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px 20px;
  border-left: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.012);
}

.ops__case { padding-bottom: 20px; border-bottom: 1px solid var(--line-faint); }
.ops__kind { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.ops__subject {
  margin-top: 8px !important;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.ops__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 12px !important; font-size: 12.5px; color: var(--fg-dim); }
.ops__meta b { font-weight: 400; color: var(--fg-soft); }
.ops__file { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-soft); }

/* The checks: one row per Mikro-AI – waiting, running with its run time, done, or done with a point to judge. */
.ops__checks { margin-top: 16px; }
.ops__checks-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; color: var(--fg-dim); }
.ops__progress { display: inline-flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.ops__segs { display: flex; gap: 3px; }
.ops__segs i { width: 14px; height: 3px; border-radius: 1px; background: var(--line-soft); transition: background-color var(--dur-state) var(--ease-std); }
.ops__segs i.is-on { background: var(--accent); }
.ops__segs i.is-flag { background: rgb(var(--warn)); }
.ops__rows { margin: 0; padding: 0; list-style: none; }
.ops__row {
  display: grid;
  grid-template-columns: 14px minmax(0, 0.9fr) 64px minmax(0, 1.5fr) 48px;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin-inline: -10px;
  padding-inline: 10px;
  border-top: 1px solid var(--line-faint);
  color: var(--fg-dim);
  transition: color var(--dur-state) var(--ease-std), background-color var(--dur-state) var(--ease-std);
}
.ops__state {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.ops__check { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ops__row .ops__tag { justify-self: start; }
.ops__result { display: grid; min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--fg-soft); }
.ops__result > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity var(--dur-state) var(--ease-std); }
.ops__pending { color: var(--fg-dim); }
.ops__value { opacity: 0; }
.ops__time { font-family: var(--font-mono); font-size: 10.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-dim); }

.ops__row.is-run { color: var(--fg); }
.ops__row.is-run .ops__state { border-color: rgba(var(--accent-rgb), 0.22); border-top-color: var(--accent); }
.ops__row.is-run .ops__pending { color: var(--fg-muted); }
.ops__row.is-done { color: var(--fg-soft); }
.ops__row.is-done .ops__value { opacity: 1; }
.ops__row.is-done .ops__state { border-color: var(--accent); background: var(--accent); }
.ops__row.is-done .ops__state::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 1px;
  width: 3px;
  height: 6.5px;
  border: solid var(--bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.ops__row.is-flagged.is-done { background: linear-gradient(90deg, rgba(var(--warn), 0.07), transparent 70%); }
.ops__row.is-flagged.is-done .ops__value { color: rgb(var(--warn)); }
.ops__row.is-flagged.is-done .ops__state { border-color: rgb(var(--warn)); background: rgb(var(--warn)); }
.ops__row.is-flagged.is-done .ops__state::after {
  content: "!";
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  font: 700 9px/11px var(--font-mono);
  text-align: center;
  color: var(--bg);
}

/* The proposal: drafted once every check is in, then released by your team. Draft and proposal share one
   cell, so the panel never changes size. */
.ops__panel-head { padding-bottom: 14px; color: var(--fg-dim); }
.ops__panel-body { display: grid; flex: 1; }
.ops__panel-body > * { grid-area: 1 / 1; }
.ops__draft { display: grid; align-content: start; gap: 10px; transition: opacity var(--dur-state) var(--ease-std); }
.ops__draft i { height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); }
.ops__draft i:nth-child(1) { width: 78%; height: 13px; }
.ops__draft i:nth-child(2) { width: 96%; }
.ops__draft i:nth-child(3) { width: 88%; }
.ops__draft i:nth-child(4) { width: 54%; }
.ops__draft p { margin-top: 10px !important; color: var(--fg-dim); }
.ops__proposal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-state) var(--ease-std), visibility 0s linear var(--dur-state);
}
.ops__panel.is-in .ops__draft { opacity: 0; }
.ops__panel.is-in .ops__proposal { opacity: 1; visibility: visible; transition-delay: 0s; }
.ops__question { font-family: var(--font-display); font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.ops__reason { font-size: 12.5px; line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; }
.ops__basis { color: var(--fg-dim); }
.ops__flag {
  padding: 8px 10px;
  border-left: 2px solid rgb(var(--warn));
  border-radius: 0 6px 6px 0;
  background: rgba(var(--warn), 0.07);
  font-size: 12px;
  line-height: 1.45;
  color: rgb(var(--warn));
}
.ops__options { display: grid; gap: 6px; }
.ops__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--fg-muted);
  transition: opacity var(--dur-state) var(--ease-std), background-color var(--dur-state) var(--ease-std);
}
.ops__option::before { content: ""; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--line); border-radius: 50%; }
.ops__option em { flex: none; margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-style: normal; letter-spacing: var(--ls-mono-sm); text-transform: uppercase; color: var(--accent); }
.ops__option.is-rec { border-color: rgba(var(--accent-rgb), 0.4); color: var(--fg); }
.ops__option.is-rec::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px); }
.ops__panel.is-approved .ops__option.is-rec { background: rgba(var(--accent-rgb), 0.06); }
.ops__panel.is-approved .ops__option:not(.is-rec) { opacity: 0.4; }

/* Release: the button is pressed, turns into a receipt, and who released it and when is noted beside it. */
.ops__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ops__approve {
  display: inline-grid;
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--fg);
  color: #0a0a0b;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 32px;
  transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), transform 0.12s var(--ease-std);
}
.ops__approve > span { grid-area: 1 / 1; text-align: center; transition: opacity var(--dur-fast) var(--ease-std); }
.ops__approve > span:last-child { opacity: 0; }
.ops__approve.is-press { transform: scale(0.97); background: #fff; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); }
.ops__panel.is-approved .ops__approve { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45); }
.ops__panel.is-approved .ops__approve > span:first-child { opacity: 0; }
.ops__panel.is-approved .ops__approve > span:last-child { opacity: 1; }
.ops__signoff { color: var(--fg-dim); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--dur-state) var(--ease-std); }
.ops__panel.is-approved .ops__signoff { opacity: 1; }
.ops__out { display: grid; gap: 6px; margin: 0; padding: 12px 0 0; border-top: 1px solid transparent; list-style: none; transition: border-color var(--dur-state) var(--ease-std); }
.ops__panel.is-approved .ops__out { border-top-color: var(--line-faint); }
.ops__out li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--fg-soft); opacity: 0; transition: opacity var(--dur-state) var(--ease-std); }
.ops__out li::before { content: "✓"; flex: none; font-size: 11px; color: var(--accent); }
.ops__out li.is-in { opacity: 1; }

/* The audit trail: every step with time and source – the newest at the bottom, older ones fading. */
.ops__log {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 12px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.28);
}
.ops__log-head { line-height: 15px; color: var(--fg-dim); }
.ops__log ol {
  display: grid;
  align-content: end;
  gap: 4px;
  min-height: calc(4 * 15px + 3 * 4px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 15px;
}
.ops__log li { display: grid; grid-template-columns: 62px 92px minmax(0, 1fr); gap: 12px; white-space: nowrap; color: var(--fg-muted); }
.ops__log li:nth-last-child(n + 3) { opacity: 0.45; }
.ops__log li:nth-last-child(2) { opacity: 0.7; }
.ops__log time { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.ops__src { overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: var(--ls-mono-sm); color: var(--fg-soft); }
.ops__msg { overflow: hidden; text-overflow: ellipsis; }
.ops__log li.is-flag :is(.ops__src, .ops__msg) { color: rgb(var(--warn)); }

/* What the colours mean. */
.usecases__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
html:not(.js) .usecases__legend { display: none; }
.usecases__legend li { display: inline-flex; align-items: center; gap: 9px; }
.usecases__legend li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.usecases__legend .is-run::before { background: var(--accent); }
.usecases__legend .is-flag::before { background: rgb(var(--warn)); }
.usecases__legend .is-log::before { width: 10px; height: 1px; border-radius: 0; background: var(--fg-dim); box-shadow: 0 -3px 0 var(--fg-dim), 0 3px 0 var(--fg-dim); }

/* Motion is the product's own: a record fading in, a spinner while a check runs, a skeleton while the
   proposal is drafted, new log lines. */
@media (prefers-reduced-motion: no-preference) {
  .usecases__stage { --delay: 0.35s; }
  .ops > * { animation: ops-in 0.35s var(--ease-std) both; }
  .ops__row.is-run .ops__state { animation: ops-spin 0.9s linear infinite; }
  .ops__status.is-run::before { animation: live-blink 1.6s ease-in-out infinite; }
  .ops__draft i { animation: ops-skeleton 1.8s ease-in-out infinite; }
  .ops__log li.is-new { animation: ops-in 0.35s var(--ease-std) both; }
}
@keyframes ops-in { from { opacity: 0; } }
@keyframes ops-spin { to { transform: rotate(360deg); } }
@keyframes ops-skeleton { 50% { opacity: 0.45; } }

/* Below desktop width the proposal moves under the checks. */
@media (max-width: 1080px) {
  .ops__body { grid-template-columns: minmax(0, 1fr); }
  .ops__panel { border-top: 1px solid var(--line-soft); border-left: 0; }
}
/* Phones: the tabs become a row of chips. */
@media (max-width: 900px) {
  .js .usecases__tabs {
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1) 20px;
    padding: 2px var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .js .usecases__tabs::-webkit-scrollbar { display: none; }
  .js .usecase {
    flex: none;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    scroll-snap-align: start;
    transition: border-color var(--dur-state) var(--ease-std), background-color var(--dur-state) var(--ease-std);
  }
  .js .usecase.is-active { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.05); }
  .js .usecase::before,
  .js .usecase::after { inset: auto 0 0; }
  .js .usecase__btn { gap: 4px; padding: 12px 16px 13px; }
  .js .usecase__title { font-size: 15px; white-space: nowrap; }
  .js .usecase__text { display: none; }
  html:not(.js) .usecases__tabs { grid-template-columns: minmax(0, 1fr); }
}
/* Narrow windows: each check takes two lines – name and system, then result and run time. */
@media (max-width: 720px) {
  .ops__row {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    grid-template-areas: "state check tag" ". result time";
    gap: 4px 12px;
    padding-block: 10px;
  }
  .ops__state { grid-area: state; }
  .ops__check { grid-area: check; }
  .ops__row .ops__tag { grid-area: tag; justify-self: end; }
  .ops__result { grid-area: result; }
  .ops__time { grid-area: time; }
}
@media (max-width: 640px) {
  .ops__bar { gap: 10px; padding: 8px 14px; }
  .ops__crumbs > span:not(.ops__id),
  .ops__note { display: none; }
  .ops__crumbs > span + span::before { content: none; }
  .ops__main { padding: 18px 16px 14px; }
  .ops__panel { padding: 18px 16px 16px; }
  .ops__subject { font-size: 17px; }
  .ops__checks-head > * { white-space: nowrap; }
  .ops__segs { display: none; }
  .ops__log { grid-template-columns: minmax(0, 1fr); padding: 10px 14px 12px; }
  .ops__log-head { display: none; }
  .ops__log li { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
  .ops__src { display: none; }
}

/* ---- On paper: the chapter is light, the case record stays a dark product window ---- */
.usecases.surface-light::after { display: none; }
.usecases__title { max-width: 15em; font-size: clamp(2.5rem, 1.1rem + 3.2vw, 4.25rem); }
.usecases__tabs { counter-reset: usecase; }
.usecase { counter-increment: usecase; }
.usecase__tag::before { content: "/0." counter(usecase); margin-right: 12px; color: var(--fg-dim); }
.surface-light .ops { border-color: #0b0b0c; border-radius: 6px; box-shadow: 0 50px 100px -50px rgba(11, 11, 12, 0.6); }

/* ============ Vorgehen ============ */
/* A pinned chapter in four phases (process.js): one photograph per phase on the right, graded like the hero
   films, crossfading as the phases hand over; the copy on the left, the phase name across the foot of the
   screen. Without JS or with reduced motion it flows as a plain list above a row of the four photographs. */
.process { position: relative; padding-top: calc(var(--seam) - var(--pin-seam)); }
.js .process:not(.process--static) .process__track { height: 340vh; }
.js .process:not(.process--static) .process__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.process__sticky { position: relative; isolation: isolate; }

/* The photographs lie on top of each other on the right; the active one fades in and settles. A shade lets them
   fall away into the black behind the copy, the heading and the phase name. */
.process__media { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 62%; margin: 0; }
.process__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s var(--ease-std), transform 2.4s var(--ease-out);
}
.process__media img.is-active { opacity: 1; transform: none; }
.process__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0, rgba(5, 5, 6, 0.55) 24%, transparent 58%),
    linear-gradient(to top, var(--bg) 0, rgba(5, 5, 6, 0.6) 26%, transparent 55%),
    linear-gradient(to bottom, var(--bg) 0, transparent 22%);
}
/* process.js writes --enter while the frame slides in and --out over the last stretch of the pin: the
   photographs fade in with the frame and step back before the release. */
.js .process:not(.process--static) .process__media { opacity: calc(var(--enter, 1) * (1 - var(--out, 0))); }
.js .process:not(.process--static) :is(.process__top, .process__phases) { opacity: calc(1 - var(--out, 0)); }

.process__frame {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding-block: var(--pin-seam) var(--seam-end);
}
.process__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.process__title { width: fit-content; max-width: 12em; font-size: min(var(--fs-h2), 7.2vh); }
.process__nav { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.process__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--fg-dim);
}
.process__num {
  margin-right: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  vertical-align: -0.1em;
}
/* Four segments that fill with the scroll – the same 2px rail as the OS layers and the hero index. */
.process__dots { display: flex; gap: 4px; }
.process__dot {
  position: relative;
  width: 20px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.process__dot::before,
.process__dot::after {
  content: "";
  position: absolute;
  inset: 11px 0 auto;
  height: 2px;
}
.process__dot::before { background: var(--line); transition: background-color var(--dur-fast) var(--ease-std); }
.process__dot::after {
  background: var(--fg);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
}
.process__dot:hover::before { background: var(--line-strong); }
.process__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

.process__phases { display: grid; align-self: center; max-width: 380px; margin: 0; padding: 0; list-style: none; }
/* One phase at a time: the old copy clears first, then the new one is written. */
.js .process:not(.process--static) .process__phase { grid-area: 1 / 1; }
.js .process:not(.process--static) .process__phase:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-std), visibility 0s var(--dur-fast);
}
.js .process:not(.process--static) .process__phase.is-active { transition: opacity var(--dur-state) var(--ease-std) var(--dur-fast); }
/* Until the pin engages the copy waits (still readable for assistive tech), so phase 1 gets its entrance too. */
.js .process.is-waiting .process__phase.is-active { opacity: 0; transition: opacity var(--dur-fast) var(--ease-std); }
.process__tag {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--accent);
}
.process__phase-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 360;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.process__text { margin: 16px 0 20px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.process__results { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.process__results li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-soft);
}
.process__results li::before { content: ""; width: 5px; height: 5px; background: var(--accent); }

/* The phase name, one screen wide; it is wiped in from the left and out to the right. */
.process__word {
  position: relative;
  height: 0.8em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: min(12.5vw, 190px);
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  transition: color 0.8s var(--ease-std);
}
/* At the release the last word steps down to the grey of every H2's second line – a full stop, not a rival. */
.js .process.is-leaving .process__word { color: var(--fg-dim); }
.process__word span {
  position: absolute;
  right: 0;
  bottom: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s var(--ease-sweep);
}
/* The old word clears first, then the new one is wiped in – they never overlap. */
.process__word span.is-active { clip-path: inset(0 0 0 0); transition: clip-path 0.6s var(--ease-sweep) 0.35s; }
.process__word span.is-before { clip-path: inset(0 0 0 100%); }
.js .process.is-waiting .process__word span.is-active { clip-path: inset(0 100% 0 0); transition: clip-path 0.4s var(--ease-sweep); }

@media (prefers-reduced-motion: no-preference) {
  .js .process:not(.process--static):not(.is-waiting) .process__phase.is-active > * { animation: rise-flat var(--dur-enter) var(--ease-out) 0.2s both; }
  .js .process:not(.process--static):not(.is-waiting) .process__phase.is-active > :nth-child(2) { animation-delay: 0.26s; }
  .js .process:not(.process--static):not(.is-waiting) .process__phase.is-active > :nth-child(3) { animation-delay: 0.32s; }
  .js .process:not(.process--static):not(.is-waiting) .process__phase.is-active > :nth-child(4) { animation-delay: 0.38s; }
}
@media (prefers-reduced-motion: reduce) {
  .process__media img { transition: none; }
}

.process--static .process__word,
.process--static .process__nav,
html:not(.js) .process__word,
html:not(.js) .process__nav { display: none; }
/* Still version: header and the four phases first, then the four photographs in a row. */
.process--static .process__sticky,
html:not(.js) .process__sticky { display: flex; flex-direction: column-reverse; }
.process--static .process__media,
html:not(.js) .process__media {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: auto;
  margin: 48px var(--gutter) var(--seam);
}
.process--static .process__media img,
html:not(.js) .process__media img { position: static; height: auto; aspect-ratio: 3 / 4; opacity: 1; transform: none; }
.process--static .process__media::after,
html:not(.js) .process__media::after { display: none; }
.process--static .process__frame,
html:not(.js) .process__frame { height: auto; padding-block: var(--pin-seam) 0; }
.process--static .process__phases,
html:not(.js) .process__phases { max-width: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; margin-top: 48px; }

@media (max-width: 900px) {
  /* Phones: the photograph is a band between the heading and the phase name, full width, falling away into
     black at both edges – heading, counter and copy stay on black. */
  .process__media { inset: 26% 0 24%; width: 100%; }
  .process__media::after {
    background:
      linear-gradient(to bottom, var(--bg) 0, transparent 28%, transparent 62%, var(--bg) 100%),
      linear-gradient(rgba(5, 5, 6, 0.3), rgba(5, 5, 6, 0.3));
  }
  .process--static .process__media,
  html:not(.js) .process__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__frame { grid-template-rows: auto 1fr auto auto; row-gap: 14px; }
  /* Counter and segments get their own row under the heading, so the heading keeps the full width. */
  .process__top { display: grid; grid-template-columns: minmax(0, 1fr); }
  .process__nav { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
  .process__num { font-size: 1.75rem; }
  .process__dot { width: 32px; height: 40px; }
  .process__dot::before,
  .process__dot::after { inset: 19px 6px auto; }
  .process__phases { grid-row: 4; align-self: end; max-width: none; }
  .process__word { grid-row: 3; font-size: 13vw; }
  .process__text { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
  .process__tag { margin-bottom: 8px; }
  .process__results { display: none; }
}

/* ============ Über uns ============ */
/* A quiet chapter after the two films: no canvas, only type. The manifesto lights up word by word as it
   scrolls through (about.js); the career line follows on the same hairline as the OS list. */
.about { position: relative; padding-block: var(--seam) var(--seam-end); }
.about__head { margin-bottom: var(--head-gap); }
.about__lede { font-size: 16px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }

.about__manifesto {
  max-width: 23em;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.75rem, 0.95rem + 2.7vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}
/* Words not yet read sit one step below the grey of the H2's second line. */
.about__manifesto .w { color: #34343b; transition: color 0.4s var(--ease-std); }
.surface-light .about__manifesto .w { color: #c7c7c2; }
.about__manifesto .w.is-lit { color: var(--fg); }

/* One closing line under a chapter: text and a ghost pill on a hairline (Einsatz, Karriere). */
.usecases__more,
.about__career {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(64px, 11vh, 112px);
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 24px;
}
.usecases__more-text,
.about__career-text { flex: 1 1 36ch; margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-soft); }

@media (max-width: 520px) {
  :is(.usecases__more, .about__career) .pill { width: 100%; height: 44px; }
}

/* ============ FAQ ============ */
/* The heading shares its row with the questions, so it stops a size below the other chapter headings. */
.faq__title { font-size: min(var(--fs-h2), 4.25rem); }
/* The questions a decision maker still has after the films. The heading stays in view on the left while the
   answers open on the right: OS hairlines, a mono topic in front of every question and the same 2px accent
   rail on the open one. */
.faq { position: relative; padding-block: var(--seam) var(--seam-end); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 40px clamp(40px, 6vw, 112px);
}
.faq__head { position: sticky; top: 40px; }
.faq__lede { max-width: 34ch; margin: 28px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.faq__more {
  max-width: 34ch;
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.faq__more a { margin-left: 8px; color: var(--fg); white-space: nowrap; transition: color var(--dur-fast) var(--ease-std); }
.faq__more a:hover { color: var(--accent); }

.faq__item { position: relative; border-bottom: 1px solid var(--line-soft); }
.faq__item summary {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: 20px;
  padding: 22px 0 22px 20px;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--dur-state) var(--ease-std);
}
.faq__q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg-soft);
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-std);
}
.faq__item summary:hover .faq__q,
.faq__item[open] .faq__q { color: var(--fg); }
.faq__item[open] .faq__tag { color: var(--accent); }
/* A plus that turns into a minus, in the round frame of the hero's scroll button. */
.faq__icon {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--fg-muted);
  transition: border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.2px;
  margin: -0.6px 0 0 -5px;
  background: currentColor;
  transition: transform var(--dur-state) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item summary:hover .faq__icon { border-color: var(--line-strong); color: var(--fg); }
.faq__item[open] .faq__icon { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }
.faq__item[open] .faq__icon::after { transform: none; }
.faq__a p {
  max-width: calc(60ch + 120px);
  margin: 0;
  padding: 0 48px 26px 120px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-muted);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .faq__head,
  .faq__list { --delay: 0.25s; }
  /* Answers slide open where the browser can animate to auto height; elsewhere they simply appear. */
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-state) var(--ease-out), content-visibility var(--dur-state) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

@media (max-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
}
@media (max-width: 560px) {
  .faq__item summary {
    grid-template-columns: minmax(0, 1fr) 28px;
    grid-template-areas: "tag icon" "q icon";
    row-gap: 6px;
    column-gap: 16px;
    padding: 18px 0 18px 16px;
  }
  .faq__tag { grid-area: tag; }
  .faq__q { grid-area: q; }
  .faq__icon { grid-area: icon; }
  .faq__a p { padding: 0 0 22px 16px; }
}

/* ============ Kontakt ============ */
/* Clipped sideways only: the glow and the card's light may spill into the space below instead of ending on a line. */
.contact {
  --danger: #ff9b9b;
  --grid-focus: 70% 70% at 70% 45%;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--seam) var(--seam-end);
}
@supports not (overflow-x: clip) {
  .contact { overflow: hidden; }
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: start;
  gap: clamp(48px, 7vw, 112px);
}
.contact__lede {
  max-width: 44ch;
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.contact__perks {
  display: grid;
  gap: 22px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.contact__perks li {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  column-gap: 19px;
  row-gap: 4px;
}
/* The same 5px accent marker as the Vorgehen results. */
.contact__perks li::before {
  content: "";
  grid-row: span 2;
  width: 5px;
  height: 5px;
  margin-top: 8.5px;
  background: var(--accent);
}
.contact__perks strong { font-size: 15px; font-weight: 500; color: var(--fg); }
.contact__perks span { font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.contact__direct {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.contact__direct a { margin-left: 8px; color: var(--fg); text-decoration: none; text-transform: none; letter-spacing: 0.02em; transition: color var(--dur-fast) var(--ease-std); }
.contact__direct a:hover { color: var(--accent); }

/* Same fill, edge and elevation as the case card above: proof and action are one family of objects. */
.contact__card {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--card-fill);
  box-shadow: var(--card-hi), var(--elev);
  transition: border-color var(--dur-state) var(--ease-std);
}
.contact__card:focus-within { border-color: rgba(var(--accent-rgb), 0.3); }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}
.form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field label span { color: var(--accent); }
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg);
  font: 15px/1.4 var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std);
}
.field textarea { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; }
.field select {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1a8' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.field select.is-empty { color: var(--fg-dim); }
.field select option { background: var(--surface-2); color: var(--fg); }
.field ::placeholder { color: var(--fg-dim); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--line); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.65);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.field [aria-invalid="true"] { border-color: var(--danger) !important; }
.field__error { margin: 0; font-size: 12.5px; color: var(--danger); }
.field__error:empty { display: none; }

.field--check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
  margin-top: 2px;
}
.field--check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03) no-repeat center / 12px;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.field--check input:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%230a0a0b' stroke-width='1.6'/%3E%3C/svg%3E");
}
.field--check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field--check label {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.field--check label a { color: var(--fg); }
.field--check .field__error { grid-column: 2; }

.form__submit { grid-column: 1 / -1; height: 48px; margin-top: 6px; }
.form__submit[disabled] { opacity: 0.6; cursor: progress; }
.form__note {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-align: center;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.contact__success { padding: 48px 8px 40px; text-align: center; }
.contact__check { display: block; width: 56px; height: 56px; margin: 0 auto; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.contact__check circle { stroke: rgba(var(--accent-rgb), 0.35); }
.contact__success-title {
  margin: 24px 0 10px;
  font-family: var(--font-display);
  font-weight: 360;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  outline: none;
}
.contact__success-text { max-width: 36ch; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.contact__success-text a { color: var(--fg); }

/* ============ Karriere ============ */
/* The career page is built from the home page's chapters: the hero with a single title, the statement on paper,
   the bands, the manifesto, and the contact card as the application form. New here are the three parts of the
   work, the values, the open roles and the benefits. */

/* ---- Hero: the title, the pitch and the actions under it, who is hiring on the right. The still settles from a
   little closer once it is in. ---- */
.hero__intro { display: grid; gap: 22px; max-width: 48ch; }
.hero__lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg-soft); text-wrap: pretty; }
.hero__hiring {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
/* The live square of the AI OS caption: these roles are open now. */
.hero__hiring::before { content: ""; width: 5px; height: 5px; background: var(--accent); }
.hero__hiring strong { font-weight: 400; color: var(--fg); }

@media (prefers-reduced-motion: no-preference) {
  .hero__hiring::before { animation: live-blink 1.6s ease-in-out infinite; }
  .hero--career.is-ready .hero__media > img { animation: hero-settle 7s var(--ease-out) both; }
}
@keyframes hero-settle {
  from { transform: scale(1.14); }
  to { transform: scale(1.04); }
}

/* ---- Ihre Arbeit: three upright photographs in staggered columns, each uncovered from below as it arrives and
   drifting a little inside its frame as it passes, with its part of the work underneath. Phones swipe through
   them in a row. ---- */
.work { position: relative; padding-block: var(--seam) var(--seam-end); }
.work__head { margin-bottom: var(--head-gap); }
.work__lede { font-size: 16px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.work__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 3vw, 48px);
  margin-block: 0;
  list-style: none;
}
.work__item:nth-child(2) { margin-top: clamp(48px, 9vh, 112px); }
.work__item:nth-child(3) { margin-top: clamp(96px, 18vh, 224px); }
.work__shot {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 24px;
  overflow: hidden;
  background: var(--surface-1);
}
/* A little taller than its frame, so the drift never shows an edge. */
.work__shot img {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
}
.work__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 6, 0.9), rgba(5, 5, 6, 0.45) 20%, transparent 40%);
  pointer-events: none;
}
.work__shot figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.work__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.work__text { max-width: 40ch; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .work__item:nth-child(2) { --delay: 0.12s; }
  .work__item:nth-child(3) { --delay: 0.24s; }
  [data-reveal] .work__item:not(.is-in) .work__shot { clip-path: inset(100% 0 0 0); }
  [data-reveal] .work__item.is-in .work__shot { clip-path: inset(0); transition: clip-path var(--dur-sweep) var(--ease-sweep) var(--delay, 0s); }
  [data-reveal] .work__item:not(.is-in) .work__shot img { transform: scale(1.18); }
  [data-reveal] .work__item.is-in .work__shot img { transition: transform 2.2s var(--ease-out) var(--delay, 0s); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work__shot img { animation: work-drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes work-drift {
  from { translate: 0 -5%; }
  to { translate: 0 5%; }
}

@media (max-width: 900px) {
  .work__list {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .work__list::-webkit-scrollbar { display: none; }
  .work__item { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; }
  .work__item:nth-child(n) { margin-top: 0; }
}

/* ---- Werte: the manifesto lights up word by word as on the home page; the four values follow as rows, the name
   large on the left, what it means on the right. ---- */
.values { position: relative; padding-block: var(--seam) var(--seam-end); }
.values__head { margin-bottom: var(--head-gap); }
.values__lede { font-size: 16px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.values__list { margin: clamp(72px, 12vh, 136px) 0 0; padding: 0; list-style: none; }
.values__list li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 40px;
  padding-block: clamp(22px, 3.6vh, 36px);
  border-top: 1px solid var(--line);
}
.values__idx { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); color: var(--fg-dim); }
.values__list h3 { margin: 0; font-family: var(--font-display); font-weight: 340; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.values__list h3 + p { max-width: 44ch; margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }

@media (max-width: 900px) {
  .values__list li { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Offene Stellen: one role per row on the FAQ's hairlines, with its field, title and terms; opened, what the
   role does and needs and the way to apply for it. One role is open at a time. ---- */
.jobs { position: relative; padding-block: var(--seam) var(--seam-end); }
.jobs__head { margin-bottom: var(--head-gap); }
.jobs__lede { font-size: 16px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.jobs__list { border-top: 1px solid var(--line-soft); }
.job { border-bottom: 1px solid var(--line-soft); }
.job summary {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto 28px;
  align-items: center;
  column-gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(22px, 3.6vh, 34px);
  list-style: none;
  cursor: pointer;
}
.job summary::-webkit-details-marker { display: none; }
.job summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.job__tag,
.job__meta,
.job__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 400;
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.job__tag { transition: color var(--dur-state) var(--ease-std); }
.job__meta { white-space: nowrap; }
.job__title {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg-soft);
  transition: color var(--dur-fast) var(--ease-std), transform var(--dur-state) var(--ease-out);
}
.job__mwd { font-size: 0.55em; letter-spacing: 0; white-space: nowrap; color: var(--fg-dim); }
.job summary:hover .job__title,
.job[open] .job__title { color: var(--fg); }
@media (hover: hover) {
  .job summary:hover .job__title { transform: translateX(6px); }
}
.job[open] .job__tag { color: var(--accent); }
.job summary:hover .faq__icon { border-color: var(--line-strong); color: var(--fg); }
.job[open] .faq__icon { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }
.job[open] .faq__icon::after { transform: none; }

/* The opened role lines up under its title. */
.job__body {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 40px);
  padding-bottom: clamp(32px, 5vh, 48px);
}
.job__body > * { grid-column: 2; }
.job__lede { max-width: 60ch; margin: 0; font-size: 17px; line-height: 1.55; color: var(--fg-soft); text-wrap: pretty; }
/* Two by two: what the role does and needs, then the bonus points and the first 90 days. */
.job__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 64px); margin-top: 32px; }
.job__label { margin: 0 0 14px; }
.job__cols ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.job__cols li { position: relative; padding-left: 19px; font-size: 15px; line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; }
/* The same 5px accent marker as the Vorgehen results. */
.job__cols li::before { content: ""; position: absolute; top: 9px; left: 0; width: 5px; height: 5px; background: var(--accent); }
/* The first 90 days: the milestone over what is done by then. */
.job__cols .job__steps { gap: 14px; }
.job__steps strong { display: block; font-weight: 500; color: var(--fg-soft); }
/* The tools of the role, as tags. */
.job__stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.job__stack li {
  padding: 5px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.job__note { margin: 28px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-dim); }
.job__apply { justify-self: start; margin-top: 16px; }
/* The role's own page: for sharing one role, and for Google's job search. */
.job__link {
  justify-self: start;
  margin-top: 14px;
  font-size: 13px;
  color: var(--fg-dim);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-std);
}
.job__link:hover { color: var(--fg); }

/* Bewerbung: two short notes under the steps, on AI in the application and on who is welcome. */
.contact__notes { display: grid; gap: 14px; max-width: 52ch; margin: 40px 0 0; }
.contact__notes p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; }
.contact__notes strong { font-weight: 500; color: var(--fg); }

@media (prefers-reduced-motion: no-preference) {
  .job { interpolate-size: allow-keywords; }
  .job::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-state) var(--ease-out), content-visibility var(--dur-state) allow-discrete;
  }
  .job[open]::details-content { block-size: auto; }
}

@media (max-width: 720px) {
  .job summary {
    grid-template-columns: minmax(0, 1fr) 28px;
    grid-template-areas: "tag icon" "title icon" "meta icon";
    row-gap: 8px;
  }
  .job__tag { grid-area: tag; }
  .job__title { grid-area: title; }
  .job__meta { grid-area: meta; }
  .job .faq__icon { grid-area: icon; }
  .job__body { grid-template-columns: minmax(0, 1fr); }
  .job__body > * { grid-column: 1; }
  .job__cols { grid-template-columns: minmax(0, 1fr); }
  .job__apply { width: 100%; height: 46px; }
}

/* ---- Angebot: the heading stays in view on the left as in the FAQ, the benefits sit in two columns on the
   right. ---- */
.offer { position: relative; padding-block: var(--seam) var(--seam-end); }
.offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 48px clamp(40px, 6vw, 112px);
}
.offer__head { position: sticky; top: 40px; }
.offer__title { font-size: min(var(--fs-h2), 4.25rem); }
.offer__lede { max-width: 34ch; margin: 28px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.offer__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 6vh, 64px) clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.offer__list li { padding-top: 20px; border-top: 1px solid var(--line); }
.offer__idx { margin: 0 0 28px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); color: var(--fg-dim); }
.offer__list h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.015em; }
.offer__list h3 + p { max-width: 36ch; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .offer__head,
  .offer__list { --delay: 0.25s; }
}
@media (max-width: 900px) {
  .offer__grid { grid-template-columns: minmax(0, 1fr); }
  .offer__head { position: static; }
}
@media (max-width: 560px) {
  .offer__list { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Rechtliches ============ */
/* Impressum and Datenschutz: the site's nav and footer around a calm reading column. Each section puts its
   heading on the left and the text on the right, on the same proportions as the footer. */
.nav__back { margin-left: auto; }
.pill.nav__back:hover span { transform: translateX(-2px); }

.legal { padding-block: clamp(32px, 6vh, 64px) 0; }
.legal__head { margin-bottom: var(--head-gap); }
.legal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.legal__lede { color: var(--fg-muted); font-size: 16px; line-height: 1.6; }
.legal__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px 48px;
  padding-block: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line-faint);
  scroll-margin-top: 24px;
}
.legal__section > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.legal__text {
  max-width: 68ch;
  color: var(--fg-soft);
  font-size: 16px;
  line-height: 1.65;
  hyphens: auto;
  overflow-wrap: break-word;
}
.legal__text > :first-child { margin-top: 0; }
.legal__text > :last-child { margin-bottom: 0; }
.legal__text :is(p, ul, ol, address, dl) { margin: 0 0 1em; }
.legal__text address { font-style: normal; }
.legal__text h3 { margin: 1.8em 0 0.4em; font-size: 16px; font-weight: 500; color: var(--fg); }
.legal__text strong { font-weight: 500; color: var(--fg); }
.legal__text :is(ul, ol) { padding-left: 1.2em; }
.legal__text li + li { margin-top: 0.35em; }
.legal__text li::marker { color: var(--fg-dim); }
.legal__text a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-std), text-decoration-color var(--dur-fast) var(--ease-std);
}
.legal__text a:hover { color: var(--accent); text-decoration-color: currentColor; }
/* Label and value, as in "Telefon  +49 …" */
.legal__pairs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 24px; }
.legal__pairs dt { color: var(--fg-dim); }
.legal__pairs dd { margin: 0; }
/* The objection right has to stand apart from the rest (Art. 21 Abs. 4 DSGVO). */
.legal__notice {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-fill);
  box-shadow: var(--card-hi);
}
.legal__toc { columns: 2 24ch; column-gap: 32px; padding-left: 1.7em; }
.legal__toc li { break-inside: avoid; }
.legal__stand {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
/* 404: the way back, as the hero's pills. */
.notfound__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* A role's own page (stellen/*.html, built by _werkzeuge/seo.js): the career page's role body in the legal layout. */
.jobpage .legal__title .job__mwd { font-size: 0.42em; }
.jobpage__body { max-width: 960px; padding-bottom: var(--seam-end); }
.jobpage__body .job__lede { font-size: clamp(17px, 1rem + 0.3vw, 20px); }
.jobpage__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
/* Placeholders for company data and unconfirmed claims, on every page: loud on purpose, so the site cannot go
   live unfinished. */
mark {
  padding: 0 4px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
  color: var(--accent);
}
.footer__nav a[aria-current="page"] { color: var(--fg); }

@media (max-width: 900px) {
  .legal__section { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Footer ============ */
/* The ending: the chapter rule, the klonx mark (without the wordmark) over the claim with the links, and the
   legal line. */
.footer { position: relative; z-index: 1; padding-block: var(--seam) 32px; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 48px;
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer__logo { display: block; margin-bottom: 14px; }
.footer__logo img { display: block; width: auto; height: 44px; opacity: 0.94; transition: opacity var(--dur-fast) var(--ease-std); }
.footer__logo:hover img { opacity: 1; }
.footer__claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.footer__claim span { color: var(--fg-dim); }
.footer__mail { font-size: 14px; color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-std); }
.footer__mail:hover { color: var(--accent); }
.footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer__heading {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.footer__nav ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer__nav a,
.footer__bottom a { color: var(--fg-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-std); }
.footer__nav a { font-size: 14px; }
.footer__nav a:hover,
.footer__bottom a:hover { color: var(--fg); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: clamp(56px, 9vh, 96px);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono-sm);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.footer__bottom p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {

  .contact__success:not([hidden]) .contact__check path { animation: draw-check 0.7s 0.15s var(--ease-out) both; }

  /* Intro first, the card two steps later; the list markers switch on one after another. */
  .contact__intro { --delay: 0.25s; }
  .contact__card { --delay: 0.25s; --i: 2; }
  .contact[data-reveal] .contact__intro.is-in .contact__perks li::before { animation: perk-on 0.9s both; }
  .contact[data-reveal] .contact__intro.is-in .contact__perks li:nth-child(1)::before { animation-delay: 0.75s; }
  .contact[data-reveal] .contact__intro.is-in .contact__perks li:nth-child(2)::before { animation-delay: 0.9s; }
  .contact[data-reveal] .contact__intro.is-in .contact__perks li:nth-child(3)::before { animation-delay: 1.05s; }
  .contact[data-reveal] .contact__intro.is-in .contact__perks li:nth-child(4)::before { animation-delay: 1.2s; }
}
@media (prefers-reduced-motion: reduce) {
  .pill span,
  .nav__toggle span { transition: none; }
}
@keyframes breathe { 50% { opacity: 0.6; transform: scale(0.94); } }
@keyframes draw-check { from { stroke-dasharray: 40; stroke-dashoffset: 40; } to { stroke-dasharray: 40; stroke-dashoffset: 0; } }
@keyframes perk-on {
  0% { opacity: 0; }
  40% { opacity: 1; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9); }
  100% { opacity: 1; box-shadow: none; }
}

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__card { max-width: 640px; }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .form { grid-template-columns: 1fr; }
  /* 16px keeps iOS from zooming into the field on focus. */
  .field input:not([type="checkbox"]),
  .field select,
  .field textarea { font-size: 16px; }
  .footer__nav { gap: 20px; }
}