@import 'tokens/fonts.css';
@import 'tokens/colors.css';
@import 'tokens/typography.css';
@import 'tokens/spacing.css';

/* ==========================================================================
   Owner OS — Startseite
   Production stylesheet. The design reference (Website.html) uses inline
   styles as an authoring-tool constraint; this file is the real thing.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
}

body {
  margin: 0;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

::selection { background: var(--signal-500); color: var(--paper-0); }

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

/* German compounds are long — never let one push the page sideways */
h1, h2, h3, p, li, summary, .step__title { overflow-wrap: break-word; }

/* A grid item's auto minimum is min-content, which can outgrow a 1fr track
   on narrow viewports. Opt every track child out of that. */
.hero__grid > *,
.split > *,
.paths__grid > *,
.process__grid > * { min-width: 0; }

:focus-visible {
  outline: 2px solid var(--signal-300);
  outline-offset: 3px;
  border-radius: 3px;
}

.page {
  /* clip, never hidden — `overflow-x: hidden` creates a scroll container and
     silently breaks the sticky module stack */
  overflow-x: clip;
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 100;
  transform: translate(-50%, -200%);
  background: var(--paper-100);
  color: var(--ink-950);
  font-size: 14px;
  font-weight: var(--weight-medium);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --- Layout primitives --------------------------------------------------- */

:root {
  --header-h: 60px;
  --gutter: clamp(20px, 4vw, 48px);
  --stack-step: 16px;
}

@media (min-width: 760px) {
  :root { --header-h: 68px; --stack-step: 24px; }
}

.section {
  padding: clamp(72px, 10vw, 128px) var(--gutter);
}

.section--hairline { border-top: 1px solid var(--border-inverse-soft); }
.section--light { background: var(--paper-100); color: var(--ink-950); }

.wrap { max-width: 1240px; margin: 0 auto; }
.wrap--narrow { max-width: 900px; }
.wrap--cta { max-width: 820px; }

:root { --border-inverse-soft: rgba(247, 244, 236, .10); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 20px;
}

/* --- Buttons & shine ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
  /* 44px minimum touch target on every button */
  min-height: 44px;
  /* Every .btn on the homepage is an <a> and never needed this, but
     .analyse-nav__next is a real <button> — without an explicit reset,
     Safari/iOS renders its native grey button chrome on top of the custom
     background, showing as an unwanted outer ring. Anchors are unaffected. */
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.btn--pill {
  background: var(--paper-100);
  color: var(--ink-950);
  font-size: 14px;
  padding: 9px 18px;
  transition: background var(--duration-fast) var(--ease-standard);
}

.btn--primary {
  background: var(--signal-500);
  color: var(--white);
  font-size: 16px;
  padding: 15px 28px;
  transition: background 180ms var(--ease-standard);
}

.btn--ghost {
  color: var(--paper-100);
  font-size: 16px;
  padding: 15px 26px;
  border: 1px solid rgba(247, 244, 236, .20);
  transition: border-color 180ms var(--ease-standard), background 180ms var(--ease-standard);
}

.btn--closing {
  background: var(--paper-100);
  color: var(--ink-950);
  font-size: 17px;
  padding: 17px 34px;
  transition: transform 180ms var(--ease-standard), background 180ms var(--ease-standard);
}

@media (hover: hover) {
  .btn--pill:hover { background: var(--white); }
  .btn--primary:hover { background: var(--signal-400); }
  .btn--ghost:hover { background: rgba(247, 244, 236, .06); border-color: rgba(247, 244, 236, .34); }
  .btn--closing:hover { background: var(--white); transform: translateY(-2px); }
}

[data-shine] { position: relative; overflow: hidden; isolation: isolate; }

[data-shine]::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 120% 0;
  background-repeat: no-repeat;
  transition: background-position .75s cubic-bezier(.2, 0, .2, 1);
  pointer-events: none;
  z-index: 1;
}

[data-shine]::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 120% 0;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: background-position .75s cubic-bezier(.2, 0, .2, 1), opacity .25s;
  pointer-events: none;
  z-index: 2;
}

/* White-on-cream is invisible — dark variant for light-background buttons */
[data-shine-dark]::after { background-image: linear-gradient(104deg, transparent 38%, rgba(17, 19, 16, .16) 50%, transparent 62%); }
[data-shine-dark]::before { background-image: linear-gradient(104deg, transparent 42%, rgba(17, 19, 16, .45) 50%, transparent 58%); }

/* Shine is a pointer affordance — it never fires on touch */
@media (hover: hover) {
  [data-shine]:hover::after { background-position: -60% 0; }
  [data-shine]:hover::before { opacity: 1; background-position: -60% 0; }
}

/* --- Header -------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(17, 19, 16, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-inverse-soft);
  padding: 0 var(--gutter);
}

.header__inner {
  max-width: 1240px;
  margin: 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--paper-100);
  flex: 0 0 auto;
}

.logo__mark { width: 26px; height: 26px; flex: 0 0 auto; }

.logo__word {
  font-family: var(--font-logo);
  font-size: var(--text-md);
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  align-items: center;
}

.nav__link {
  color: var(--ink-300);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
  .nav__link:hover { color: var(--paper-100); }
}

/* --- Mobile navigation --------------------------------------------------- */

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--paper-100);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 300ms var(--ease-standard), opacity 200ms var(--ease-standard);
}

.nav-toggle__bars span:nth-child(1) { top: 2px; }
.nav-toggle__bars span:nth-child(2) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  padding: clamp(24px, 7vw, 40px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px);
  background: rgba(17, 19, 16, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 260ms;
}

.mobile-nav.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(247, 244, 236, .12);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(247, 244, 236, .12);
  color: var(--paper-100);
  text-decoration: none;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
}

.mobile-nav__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  color: var(--signal-400);
}

.mobile-nav__cta {
  margin-top: clamp(28px, 6vw, 40px);
  width: 100%;
  font-size: 16px;
  padding: 16px 24px;
}

.mobile-nav__note {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-500);
}

@media (max-width: 759px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav { display: flex; }
  .header__inner { gap: 16px; }
  .logo__mark { width: 24px; height: 24px; }
  .logo__word { font-size: 16px; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding: clamp(56px, 11vw, 140px) var(--gutter) clamp(64px, 10vw, 132px);
}

.hero__grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* Two columns only once both actually fit — a minmax(430px) auto-fit track
   overflows the viewport on phones and gets sliced off by overflow-x: clip */
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--signal-300);
  border: 1px solid rgba(159, 176, 217, .28);
  padding: 6px 13px;
  border-radius: var(--radius-full);
  margin-bottom: clamp(20px, 4vw, 40px);
  max-width: 100%;
}

.hero__dot {
  width: 5px; height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--signal-400);
  animation: oos-pulse 2.6s ease-in-out infinite;
}

@keyframes oos-pulse { 0%, 100% { opacity: .25 } 50% { opacity: .7 } }

.hero__title {
  font-size: clamp(34px, 8.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: var(--weight-semibold);
  margin: 0 0 clamp(18px, 3vw, 30px);
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-300);
  max-width: 520px;
  margin: 0 0 clamp(28px, 4vw, 44px);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* One-tap-wide CTAs on phones instead of two cramped pills */
@media (max-width: 479px) {
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero__actions .btn { width: 100%; }
}

.hero__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-500);
  margin: 26px 0 0;
  letter-spacing: .02em;
}

.hero__figure {
  position: relative;
  width: 100%;
  max-width: 520px;
  justify-self: center;
  /* The explainer's colors (near-white owner dot, light ticks) are tuned for
     a dark backdrop. It has none of its own — it floats on the page canvas —
     so it needs a permanent dark card, identical in both themes, using the
     same recipe as the module cards. This keeps the animation and every one
     of its keyframes completely untouched regardless of page theme. */
  padding: clamp(20px, 4vw, 32px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(247, 244, 236, .16);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .07) inset;
  background: linear-gradient(165deg, #1E2A52 0%, #191B17 70%);
  color: var(--paper-100);
}

/* Stacked order: the animation sits below the CTAs, per the handoff */
.hero__figure { order: 2; }
.hero__copy { order: 1; }

.hero__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.hero__captions {
  position: relative;
  height: 22px;
  margin-top: 14px;
}

.hero__caption {
  position: absolute;
  left: 0; right: 0; top: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--paper-100);
}

/* --- Hero explainer animation (14s master clock) ------------------------- */

/* Every element carries a complete `animation` shorthand on its own class.
   The earlier version seeded duration/easing from `.hero__svg [class^="oos-"]`
   and only set animation-name per class; that split is fragile on WebKit,
   where matching an SVG `class` attribute through an attribute selector is
   not dependable. One self-contained declaration per element removes the
   dependency entirely.

   Travel vectors are also written out per keyframe set rather than passed in
   as custom properties (`transform: var(--nt)`) — the expansion the handoff
   names as the safe fallback, because WebKit drops var() inside @keyframes. */

.oos-frame       { animation: oosFrame 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-star-line   { animation: oosStarLine 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-star-label  { animation: oosStarLabel 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-layer-label { animation: oosLayerLabel 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-owner       { animation: oosOwner 14s cubic-bezier(.45, 0, .15, 1) infinite; }

.oos-node--vertrieb  { animation: oosNodeVertrieb 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-node--personal  { animation: oosNodePersonal 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-node--steuerung { animation: oosNodeSteuerung 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-node--fuehrung  { animation: oosNodeFuehrung 14s cubic-bezier(.45, 0, .15, 1) infinite; }

.oos-pulse--vertrieb  { animation: oosPulseVertrieb 14s linear infinite; }
.oos-pulse--personal  { animation: oosPulsePersonal 14s linear infinite; }
.oos-pulse--steuerung { animation: oosPulseSteuerung 14s linear infinite; }
.oos-pulse--fuehrung  { animation: oosPulseFuehrung 14s linear infinite; }

.oos-throb {
  animation: oosThrob 14s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* scaleX has to grow from the left edge, not the SVG origin */
.oos-bar {
  transform-box: fill-box;
  transform-origin: left center;
}

.oos-bar--1 { animation: oosBar1 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-bar--2 { animation: oosBar2 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-bar--3 { animation: oosBar3 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-bar--4 { animation: oosBar4 14s cubic-bezier(.45, 0, .15, 1) infinite; }

.oos-tick--a { animation: oosTickA 14s linear infinite; }
.oos-tick--b { animation: oosTickB 14s linear infinite; }

.oos-signal { animation: oosSignal 14s cubic-bezier(.45, 0, .15, 1) infinite, oosDash 1.1s linear infinite; }

.oos-cap--1 { animation: oosCap1 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-cap--2 { animation: oosCap2 14s cubic-bezier(.45, 0, .15, 1) infinite; }
.oos-cap--3 { animation: oosCap3 14s cubic-bezier(.45, 0, .15, 1) infinite; }

@keyframes oosFrame { 0% { opacity: 0 } 3%, 90% { opacity: 1 } 95%, 100% { opacity: 0 } }
@keyframes oosStarLine { 0%, 28% { opacity: 1 } 34%, 95% { opacity: 0 } 96%, 100% { opacity: 1 } }
@keyframes oosStarLabel { 0%, 26% { opacity: 1 } 32%, 95% { opacity: 0 } 96%, 100% { opacity: 1 } }
@keyframes oosNodeVertrieb { 0%, 28% { transform: translate(0, 0) } 38%, 95% { transform: translate(-120px, 50px) } 96%, 100% { transform: translate(0, 0) } }
@keyframes oosNodePersonal { 0%, 28% { transform: translate(0, 0) } 38%, 95% { transform: translate(-230px, -10px) } 96%, 100% { transform: translate(0, 0) } }
@keyframes oosNodeSteuerung { 0%, 28% { transform: translate(0, 0) } 38%, 95% { transform: translate(-120px, -70px) } 96%, 100% { transform: translate(0, 0) } }
@keyframes oosNodeFuehrung { 0%, 28% { transform: translate(0, 0) } 38%, 95% { transform: translate(-10px, 90px) } 96%, 100% { transform: translate(0, 0) } }
@keyframes oosOwner { 0%, 28% { transform: translate(0, 0) } 38%, 95% { transform: translate(0, -130px) } 96%, 100% { transform: translate(0, 0) } }
@keyframes oosThrob { 0% { transform: scale(1); opacity: .5 } 8% { transform: scale(2.1); opacity: 0 } 8.2% { transform: scale(1); opacity: .55 } 17% { transform: scale(2.2); opacity: 0 } 17.2% { transform: scale(1); opacity: .6 } 26% { transform: scale(2.4); opacity: 0 } 26.2%, 100% { transform: scale(1); opacity: 0 } }
@keyframes oosPulseVertrieb { 0% { opacity: 0; transform: translate(0, 0) } 1% { opacity: 1 } 8% { opacity: 1; transform: translate(0, 110px) } 8.6% { opacity: 0; transform: translate(0, 110px) } 9.4% { opacity: 0; transform: translate(0, 0) } 10.4% { opacity: 1 } 17% { opacity: 1; transform: translate(0, 110px) } 17.6% { opacity: 0; transform: translate(0, 110px) } 18.4% { opacity: 0; transform: translate(0, 0) } 19.4% { opacity: 1 } 26% { opacity: 1; transform: translate(0, 110px) } 26.6%, 100% { opacity: 0; transform: translate(0, 0) } }
@keyframes oosPulsePersonal { 0% { opacity: 0; transform: translate(0, 0) } 1% { opacity: 1 } 8% { opacity: 1; transform: translate(-110px, 0) } 8.6% { opacity: 0; transform: translate(-110px, 0) } 9.4% { opacity: 0; transform: translate(0, 0) } 10.4% { opacity: 1 } 17% { opacity: 1; transform: translate(-110px, 0) } 17.6% { opacity: 0; transform: translate(-110px, 0) } 18.4% { opacity: 0; transform: translate(0, 0) } 19.4% { opacity: 1 } 26% { opacity: 1; transform: translate(-110px, 0) } 26.6%, 100% { opacity: 0; transform: translate(0, 0) } }
@keyframes oosPulseSteuerung { 0% { opacity: 0; transform: translate(0, 0) } 1% { opacity: 1 } 8% { opacity: 1; transform: translate(0, -110px) } 8.6% { opacity: 0; transform: translate(0, -110px) } 9.4% { opacity: 0; transform: translate(0, 0) } 10.4% { opacity: 1 } 17% { opacity: 1; transform: translate(0, -110px) } 17.6% { opacity: 0; transform: translate(0, -110px) } 18.4% { opacity: 0; transform: translate(0, 0) } 19.4% { opacity: 1 } 26% { opacity: 1; transform: translate(0, -110px) } 26.6%, 100% { opacity: 0; transform: translate(0, 0) } }
@keyframes oosPulseFuehrung { 0% { opacity: 0; transform: translate(0, 0) } 1% { opacity: 1 } 8% { opacity: 1; transform: translate(110px, 0) } 8.6% { opacity: 0; transform: translate(110px, 0) } 9.4% { opacity: 0; transform: translate(0, 0) } 10.4% { opacity: 1 } 17% { opacity: 1; transform: translate(110px, 0) } 17.6% { opacity: 0; transform: translate(110px, 0) } 18.4% { opacity: 0; transform: translate(0, 0) } 19.4% { opacity: 1 } 26% { opacity: 1; transform: translate(110px, 0) } 26.6%, 100% { opacity: 0; transform: translate(0, 0) } }
@keyframes oosBar1 { 0%, 34% { transform: scaleX(0) } 46%, 95% { transform: scaleX(1) } 96%, 100% { transform: scaleX(0) } }
@keyframes oosBar2 { 0%, 36% { transform: scaleX(0) } 48%, 95% { transform: scaleX(1) } 96%, 100% { transform: scaleX(0) } }
@keyframes oosBar3 { 0%, 38% { transform: scaleX(0) } 50%, 95% { transform: scaleX(1) } 96%, 100% { transform: scaleX(0) } }
@keyframes oosBar4 { 0%, 40% { transform: scaleX(0) } 52%, 95% { transform: scaleX(1) } 96%, 100% { transform: scaleX(0) } }
@keyframes oosLayerLabel { 0%, 42% { opacity: 0 } 50%, 92% { opacity: 1 } 95%, 100% { opacity: 0 } }
@keyframes oosSignal { 0%, 56% { opacity: 0 } 62%, 90% { opacity: .85 } 94%, 100% { opacity: 0 } }
@keyframes oosDash { to { stroke-dashoffset: -24 } }
@keyframes oosTickA { 0%, 58% { opacity: 0; transform: translateX(0) } 60% { opacity: 1 } 72% { opacity: 1; transform: translateX(246px) } 73% { opacity: 0; transform: translateX(246px) } 74% { opacity: 0; transform: translateX(0) } 75% { opacity: 1 } 87% { opacity: 1; transform: translateX(246px) } 88%, 100% { opacity: 0; transform: translateX(0) } }
@keyframes oosTickB { 0%, 63% { opacity: 0; transform: translateX(0) } 65% { opacity: 1 } 77% { opacity: 1; transform: translateX(246px) } 78% { opacity: 0; transform: translateX(246px) } 79% { opacity: 0; transform: translateX(0) } 80% { opacity: 1 } 90% { opacity: 1; transform: translateX(246px) } 91%, 100% { opacity: 0; transform: translateX(0) } }
@keyframes oosCap1 { 0%, 4% { opacity: 0 } 9%, 26% { opacity: 1 } 31%, 100% { opacity: 0 } }
@keyframes oosCap2 { 0%, 38% { opacity: 0 } 44%, 58% { opacity: 1 } 63%, 100% { opacity: 0 } }
@keyframes oosCap3 { 0%, 64% { opacity: 0 } 70%, 88% { opacity: 1 } 93%, 100% { opacity: 0 } }

.oos-star-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }
.oos-layer-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }
.oos-owner-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; }

/* --- Split sections (two columns) ---------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}

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

.split__title {
  font-size: clamp(28px, 6.4vw, 52px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-semibold);
  margin: 0 0 24px;
  text-wrap: balance;
}

.split__title--tight { margin-bottom: 0; max-width: 520px; }
.split__title--paths { max-width: 700px; }

.split__body {
  font-size: clamp(16px, 2.2vw, 17px);
  line-height: var(--leading-relaxed);
  color: var(--ink-300);
  margin: 0;
  max-width: 520px;
  text-wrap: pretty;
}

.section--light .split__body { color: var(--ink-600); }

/* Bordered list rows */
.rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(247, 244, 236, .12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(247, 244, 236, .12);
  font-size: 16px;
  line-height: 1.45;
  color: var(--paper-100);
}

.row__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--signal-400);
  padding-top: 3px;
  flex: 0 0 auto;
}

/* --- Die Lösung ---------------------------------------------------------- */

.solution { text-align: center; }

.solution__title {
  font-size: clamp(28px, 7vw, 58px);
  line-height: 1.06;
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-semibold);
  margin: 0 0 26px;
  text-wrap: balance;
}

.solution__body {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: var(--leading-relaxed);
  color: var(--ink-600);
  margin: 0 auto;
  max-width: 660px;
  text-wrap: pretty;
}

/* --- Module (sticky stack) ----------------------------------------------- */

.modules { padding: clamp(72px, 10vw, 120px) var(--gutter) 0; }

.modules__title {
  font-size: clamp(28px, 6.4vw, 50px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-semibold);
  margin: 0 0 22px;
  max-width: 760px;
  text-wrap: balance;
}

.modules__lead {
  font-size: clamp(16px, 2.2vw, 17px);
  line-height: 1.6;
  color: var(--ink-300);
  margin: 0 0 clamp(36px, 6vw, 72px);
  max-width: 600px;
  text-wrap: pretty;
}

.modules__stack {
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: clamp(60px, 9vw, 120px);
}

.module {
  position: sticky;
  margin-bottom: var(--stack-step);
}

.module:last-child { margin-bottom: 0; }

/* Offsets derive from the header so the stack keeps its 24px (16px mobile)
   peek at every breakpoint */
.module--1 { top: calc(var(--header-h) + var(--stack-step) * 1); }
.module--2 { top: calc(var(--header-h) + var(--stack-step) * 2); }
.module--3 { top: calc(var(--header-h) + var(--stack-step) * 3); }
.module--4 { top: calc(var(--header-h) + var(--stack-step) * 4); }

.module__card {
  border: 1px solid rgba(247, 244, 236, .16);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4.4vw, 52px);
  /* inset top-edge highlight, no drop shadow — overlapping shadows band */
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .07) inset;
  /* Explicit, not inherited: this card is always dark regardless of page
     theme. Without this, a child with no color of its own (.module__name)
     would inherit body's color — correct in dark mode, dark-on-dark once
     light mode inverts body to ink-950. */
  color: var(--paper-100);
}

.module--1 .module__card { background: linear-gradient(180deg, #1E2A52 0%, #191B17 78%); }
.module--2 .module__card { background: linear-gradient(180deg, #28386C 0%, #191B17 78%); }
.module--3 .module__card { background: linear-gradient(180deg, #334A8F 0%, #191B17 78%); }
.module--4 .module__card { background: linear-gradient(180deg, #4360AC 0%, #191B17 78%); }

.module__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.module__level {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--signal-300);
}

.module--4 .module__level { color: var(--signal-100); }

/* Full opacity is required — these sit on the brightest part of the gradient
   and fail WCAG AA at any lower alpha */
.module__category {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  color: var(--paper-100);
}

.module__name {
  font-size: clamp(24px, 5.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: var(--weight-semibold);
  margin: 0 0 10px;
}

.module__lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.35;
  color: var(--paper-100);
  margin: 0 0 16px;
  font-weight: var(--weight-medium);
  max-width: 560px;
  text-wrap: pretty;
}

.module__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-300);
  margin: 0 0 26px;
  max-width: 600px;
  text-wrap: pretty;
}

.module__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--paper-100);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-bottom: 1px solid rgba(247, 244, 236, .3);
  padding-bottom: 3px;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
  .module__link:hover { border-color: var(--paper-100); }
}

/* --- Zwei Wege ----------------------------------------------------------- */

.paths__lead {
  font-size: clamp(16px, 2.2vw, 17px);
  line-height: var(--leading-relaxed);
  color: var(--ink-600);
  margin: 0 0 clamp(32px, 5vw, 56px);
  max-width: 640px;
  text-wrap: pretty;
}

.paths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.path-card {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: clamp(24px, 3.4vw, 40px);
}

.path-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--signal-600);
  margin-bottom: 16px;
}

.path-card__title {
  font-size: clamp(22px, 4vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--weight-semibold);
  margin: 0 0 12px;
}

.path-card__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
  text-wrap: pretty;
}

/* --- Prozess ------------------------------------------------------------- */

.process__title {
  font-size: clamp(28px, 6.4vw, 52px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-semibold);
  margin: 0 0 clamp(32px, 6vw, 68px);
  max-width: 640px;
  text-wrap: balance;
}

.process__grid {
  display: grid;
  /* min() keeps step 05 from orphaning on its own row as the track collapses */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  /* 1fr rows in an auto-height grid all resolve to the tallest row, so the
     longer step 05 no longer breaks the rhythm when the track is one column */
  grid-auto-rows: 1fr;
  gap: 12px;
}

.step {
  border: 1px solid rgba(247, 244, 236, .16);
  border-radius: 16px;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .07) inset;
  padding: clamp(22px, 3vw, 34px);
  /* Same reasoning as .module__card — .step__title has no color of its own. */
  color: var(--paper-100);
}

.step--1 { background: linear-gradient(180deg, #1E2A52 0%, #191B17 82%); }
.step--2 { background: linear-gradient(180deg, #28386C 0%, #191B17 82%); }
.step--3 { background: linear-gradient(180deg, #334A8F 0%, #191B17 82%); }
.step--4 { background: linear-gradient(180deg, #3A538F 0%, #191B17 82%); }
.step--5 { background: linear-gradient(180deg, #4360AC 0%, #191B17 82%); }

.step__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--paper-100);
  letter-spacing: .08em;
  margin-bottom: 14px;
}

.step__title {
  font-size: 19px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 8px;
}

.step__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-300);
}

/* --- Vertrauen + FAQ ----------------------------------------------------- */

.trust__title {
  font-size: clamp(24px, 5.6vw, 42px);
  line-height: 1.1;
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-semibold);
  margin: 0 0 22px;
  text-wrap: balance;
}

.faq { border-top: 1px solid var(--ink-200); }
.faq__item { border-bottom: 1px solid var(--ink-200); }

.faq__summary {
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  /* Comfortable thumb target across the full row width */
  min-height: 56px;
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
  margin-left: 20px;
  margin-top: 2px;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--ink-500);
  border-radius: 1px;
}

.faq__icon::before { top: 8px; left: 2px; width: 14px; height: 2px; }
.faq__icon::after { top: 2px; left: 8px; width: 2px; height: 14px; }

.faq__item[open] .faq__icon { transform: rotate(135deg); }

.faq__answer {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0 0 18px;
  text-wrap: pretty;
}

/* Chromium/Safari-current; degrades to an instant open elsewhere */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  content-visibility: hidden;
  transition: block-size var(--duration-slow) var(--ease-standard),
              content-visibility var(--duration-slow) allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
  content-visibility: visible;
}

/* --- Closing CTA --------------------------------------------------------- */

.closing {
  padding: clamp(72px, 12vw, 150px) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.closing__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(67, 96, 172, .28), transparent 70%);
  pointer-events: none;
}

.closing__inner { position: relative; }

.closing__title {
  font-size: clamp(28px, 7.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: var(--weight-semibold);
  margin: 0 0 24px;
  text-wrap: balance;
}

.closing__body {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: var(--leading-relaxed);
  color: var(--ink-300);
  margin: 0 auto 36px;
  max-width: 620px;
  text-wrap: pretty;
}

.closing__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-500);
  margin: 22px 0 0;
}

@media (max-width: 479px) {
  .btn--closing { width: 100%; }
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border-inverse-soft);
  padding: clamp(40px, 6vw, 64px) var(--gutter) calc(clamp(40px, 6vw, 64px) + env(safe-area-inset-bottom, 0px));
}

.footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__brand svg { width: 22px; height: 22px; }

.footer__word {
  font-family: var(--font-logo);
  font-size: var(--text-base);
  color: var(--ink-400);
}

.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-400);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
  .footer__link:hover { color: var(--paper-100); }
}

.footer__copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-600);
}

@media (max-width: 599px) {
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* --- Back to top --------------------------------------------------------- */

.back-to-top {
  position: fixed;
  /* Flush with the content edge: the gutter on narrow screens, the 1240px
     wrapper's own edge once the viewport is wider than that. Percentages on a
     fixed element resolve against the viewport, excluding any scrollbar. */
  right: max(var(--gutter), calc((100% - 1240px) / 2));
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(247, 244, 236, .18);
  border-radius: var(--radius-full);
  background: rgba(17, 19, 16, .74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--paper-100);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out),
              visibility 240ms, background 160ms var(--ease-standard),
              border-color 160ms var(--ease-standard);
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

.back-to-top svg { width: 17px; height: 17px; display: block; }

@media (hover: hover) {
  .back-to-top:hover { background: rgba(17, 19, 16, .92); border-color: rgba(247, 244, 236, .36); }
}

/* Never float over the open menu */
body.is-locked .back-to-top { opacity: 0; visibility: hidden; }

/* --- FAQ open/close ------------------------------------------------------ */

/* Where ::details-content is unsupported (iOS before 18.4), the script below
   animates this wrapper's height instead. */
.faq__reveal { overflow: hidden; }

/* --- Scroll reveal ------------------------------------------------------- */

[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(14px);
}

[data-reveal] {
  transition: opacity 620ms var(--ease-out) var(--reveal-delay, 0ms),
              transform 620ms var(--ease-out) var(--reveal-delay, 0ms);
}

/* --- Reduced motion ------------------------------------------------------ */

/* "Reduce", not "remove". Short, purposeful UI transitions — the menu fade,
   the accordion, hover states — are not vestibular triggers and stay on;
   blanking them out just makes the site feel broken. What goes is the motion
   the setting actually exists for: the 14s looping explainer, the pulsing
   dot, and the travel on scroll reveals. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* CLIENT DECISION: the hero explainer keeps playing here. It was previously
     frozen on its t ≈ 11s frame, which is the accessible default the handoff
     asks for, but the animation is the page's core argument and the client
     wants it running for every visitor. To restore the accessible behaviour,
     re-add:
       .hero__svg *, .hero__caption {
         animation-delay: -11s !important; animation-play-state: paused !important;
       } */

  .hero__dot { animation: none; opacity: .6; }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}