:root {
  --kyven-bg: #f7f4ef;
  --kyven-ink: #071a2b;
  --kyven-muted: #5b6b7d;
  --kyven-gold: #b79b6e;
  --kyven-green: #65795d;
  --kyven-paper: #fffdf8;
  --kyven-line-soft: rgba(7, 26, 43, 0.1);
  --kyven-border: rgba(7, 26, 43, 0.14);
  --kyven-shadow: rgba(7, 26, 43, 0.14);
  --content: 1180px;
  --header-h: 84px;
  --line-progress: 0;
  --line-mask: linear-gradient(90deg, transparent 0 40%, #000 45%, #000 61%, transparent 67% 100%);
  color-scheme: light;
}

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

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

html.is-jump-scrolling,
html.is-jump-scrolling body {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

html.is-jump-scrolling .snap-panel {
  scroll-snap-align: none;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  background: var(--kyven-bg);
  color: var(--kyven-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
video,
svg {
  display: block;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--kyven-gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--kyven-bg);
  background: var(--kyven-ink);
  border-radius: 4px;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  color: var(--kyven-ink);
  border-bottom: 1px solid transparent;
  transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.site-header.is-solid {
  background: rgba(247, 244, 239, 0.92);
  border-bottom-color: rgba(7, 26, 43, 0.08);
  box-shadow: 0 16px 44px rgba(7, 26, 43, 0.08);
  backdrop-filter: blur(18px);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  width: 150px;
  min-height: 42px;
}

.brand-link img {
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(7, 26, 43, 0.68);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.site-nav a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.site-nav a:hover {
  color: var(--kyven-ink);
  border-color: rgba(7, 26, 43, 0.12);
  background: rgba(255, 255, 255, 0.5);
}

.site-nav .nav-cta {
  color: var(--kyven-ink);
  border-color: rgba(183, 155, 110, 0.52);
  background: rgba(183, 155, 110, 0.14);
}

.scrolly-main {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(247, 244, 239, 1) 18%, rgba(242, 239, 232, 1) 58%, rgba(247, 244, 239, 1));
}

.path-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--line-mask);
  mask-image: var(--line-mask);
}

.journey-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 420ms ease;
}

.journey-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.journey-path-shadow {
  stroke: rgba(7, 26, 43, 0.28);
  stroke-width: 46;
  opacity: 0.58;
}

.journey-path-base {
  stroke: rgba(101, 121, 93, 0.95);
  stroke-width: 32;
  opacity: 1;
}

.journey-path-progress {
  stroke: url("#journey-gradient");
  stroke-width: 36;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--line-progress));
  filter: drop-shadow(0 8px 18px rgba(7, 26, 43, 0.18));
}

.snap-panel {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

.panel-shell {
  position: relative;
  z-index: 12;
  width: min(var(--content), calc(100% - 72px));
  height: 100%;
  margin: 0 auto;
}

.panel-media,
.panel-media picture,
.panel-media img,
.panel-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.panel-media {
  z-index: 1;
  background: var(--kyven-bg);
}

.panel-media img,
.panel-media video {
  object-fit: cover;
}

.panel-media picture {
  opacity: 1;
  transition: opacity 360ms ease;
}

.panel-media video {
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 540ms ease;
}

.panel-media.is-video-ready video {
  opacity: 1;
}

.panel-media.is-video-ready picture {
  opacity: 0;
}

.soft-media {
  opacity: 0.92;
}

.calm-media {
  opacity: 0.88;
}

.panel-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(247, 244, 239, 0.9) 0%, rgba(247, 244, 239, 0.68) 34%, rgba(247, 244, 239, 0.1) 68%, rgba(247, 244, 239, 0.02) 100%),
    linear-gradient(180deg, rgba(247, 244, 239, 0.68), rgba(247, 244, 239, 0.08) 44%, rgba(247, 244, 239, 0.84));
}

.right-shade {
  background:
    linear-gradient(90deg, rgba(247, 244, 239, 0.92) 0%, rgba(247, 244, 239, 0.72) 34%, rgba(247, 244, 239, 0.12) 58%, rgba(247, 244, 239, 0.24) 100%),
    linear-gradient(180deg, rgba(247, 244, 239, 0.48), rgba(247, 244, 239, 0.02) 52%, rgba(247, 244, 239, 0.62));
}

.center-shade {
  background:
    linear-gradient(90deg, rgba(247, 244, 239, 0.86), rgba(247, 244, 239, 0.18) 46%, rgba(247, 244, 239, 0.82)),
    linear-gradient(180deg, rgba(247, 244, 239, 0.54), rgba(247, 244, 239, 0.04) 52%, rgba(247, 244, 239, 0.72));
}

.finale-shade {
  background:
    linear-gradient(90deg, rgba(247, 244, 239, 0.86), rgba(247, 244, 239, 0.2) 50%, rgba(247, 244, 239, 0.62)),
    linear-gradient(180deg, rgba(247, 244, 239, 0.52), rgba(247, 244, 239, 0.04) 46%, rgba(247, 244, 239, 0.72));
}

.hero-shell,
.split-shell,
.step-shell,
.bridge-shell,
.finale-shell {
  display: grid;
  align-items: center;
}

.hero-shell {
  grid-template-columns: minmax(0, 720px) 1fr;
}

.split-shell {
  grid-template-columns: minmax(0, 520px) minmax(360px, 1fr);
  gap: 76px;
}

.step-shell {
  grid-template-columns: minmax(0, 58%) minmax(340px, 440px);
  gap: 24px;
}

.bridge-shell,
.finale-shell {
  place-items: center;
  text-align: center;
}

.hero-copy,
.section-copy,
.step-copy,
.finale-copy {
  position: relative;
  z-index: 14;
  isolation: isolate;
}

.chapter-sticky-inner {
  position: relative;
  z-index: 18;
  isolation: isolate;
}

.hero-copy::before,
.section-copy::before,
.step-copy::before,
.finale-copy::before,
.chapter-sticky-inner::before {
  content: "";
  position: absolute;
  inset: -28px -34px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 48% 50%, rgba(247, 244, 239, 0.98), rgba(247, 244, 239, 0.84) 58%, rgba(247, 244, 239, 0) 78%);
  filter: blur(2px);
}

.chapter-sticky-inner::before {
  background: linear-gradient(90deg, rgba(247, 244, 239, 0.98), rgba(247, 244, 239, 0.93) 40%, rgba(247, 244, 239, 0) 58%);
}

.hero-copy::before,
.section-copy::before,
.finale-copy::before,
.chapter-sticky-inner::before {
  display: none;
}

.hero-copy > *,
.section-copy > *,
.step-copy > *,
.finale-copy > *,
.chapter-sticky-inner > * {
  position: relative;
  z-index: 1;
}

.eyebrow,
.step-count,
.tile-index {
  margin: 0 0 18px;
  color: var(--kyven-gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--kyven-ink);
  font-weight: 640;
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: none;
}

h1 {
  max-width: 760px;
  font-size: 84px;
}

h2 {
  max-width: 720px;
  font-size: 58px;
}

h3 {
  max-width: 560px;
  font-size: 42px;
}

.lead,
.section-copy p,
.chapter-sticky-inner p,
.step-copy p,
.finale-copy p {
  max-width: 640px;
  margin: 24px 0 0;
  color: rgba(7, 26, 43, 0.72);
  font-size: 20px;
  line-height: 1.62;
  letter-spacing: 0;
}

.section-copy.centered p,
.finale-copy p {
  margin-left: auto;
  margin-right: auto;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.cta-row.centered {
  justify-content: center;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  color: var(--kyven-ink);
  border: 1px solid var(--kyven-border);
  border-radius: 4px;
  background: rgba(255, 253, 248, 0.72);
  font-size: 15px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 18px 48px rgba(7, 26, 43, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.button::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.74;
  transition: transform 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 26, 43, 0.26);
  background: #ffffff;
  box-shadow: 0 22px 58px rgba(7, 26, 43, 0.12);
}

.button:hover::after {
  transform: translateX(6px);
}

.button.primary {
  color: var(--kyven-bg);
  border-color: var(--kyven-ink);
  background: var(--kyven-ink);
}

.button.primary:hover {
  background: #0e2940;
}

.intro-panel {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(247, 244, 239, 1)),
    var(--kyven-bg);
}

.offer-pair {
  display: grid;
  gap: 18px;
  align-content: center;
}

.offer-tile {
  position: relative;
  display: grid;
  min-height: 230px;
  padding: 32px;
  color: var(--kyven-ink);
  border: 1px solid rgba(7, 26, 43, 0.14);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
  box-shadow: 0 28px 70px rgba(7, 26, 43, 0.08);
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.offer-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--kyven-gold), var(--kyven-green));
}

.offer-tile.dark {
  color: var(--kyven-bg);
  background: rgba(7, 26, 43, 0.94);
  border-color: rgba(7, 26, 43, 0.94);
}

.offer-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(183, 155, 110, 0.62);
  box-shadow: 0 34px 82px rgba(7, 26, 43, 0.12);
}

.tile-title {
  display: block;
  margin-top: 16px;
  font-size: 32px;
  font-weight: 730;
  line-height: 1.05;
  letter-spacing: 0;
}

.tile-copy {
  display: block;
  max-width: 460px;
  margin-top: 16px;
  color: rgba(7, 26, 43, 0.68);
  font-size: 17px;
  line-height: 1.5;
}

.offer-tile.dark .tile-copy {
  color: rgba(247, 244, 239, 0.76);
}

.service-chapter {
  position: relative;
  min-height: 100svh;
}

.chapter-sticky {
  position: sticky;
  top: 0;
  z-index: 16;
  height: 100svh;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.chapter-sticky-inner {
  width: min(var(--content), calc(100% - 72px));
  margin: 0 auto;
  padding-right: 54%;
}

.software-chapter .chapter-sticky-inner {
  padding-right: 50%;
}

.chapter-steps {
  position: relative;
  z-index: 10;
  margin-top: -100svh;
}

.chapter-points {
  display: grid;
  gap: 10px;
  max-width: 420px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.chapter-points li {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(7, 26, 43, 0.74);
  font-size: 16px;
  font-weight: 700;
  border-top: 1px solid rgba(7, 26, 43, 0.12);
}

.chapter-points li::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--kyven-green);
  box-shadow: 0 0 0 5px rgba(101, 121, 93, 0.12);
}

.step-copy {
  grid-column: 2;
  justify-self: start;
  max-width: 440px;
  width: min(440px, 100%);
  min-width: 0;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 8px;
}

.step-copy::before {
  inset: 0;
  border: 1px solid rgba(7, 26, 43, 0.13);
  border-left: 5px solid rgba(183, 155, 110, 0.86);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(247, 244, 239, 0.84)),
    rgba(255, 253, 248, 0.88);
  box-shadow: 0 24px 64px rgba(7, 26, 43, 0.1);
  filter: none;
}

.step-copy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: clamp(-120px, -6.4vw, -78px);
  z-index: 0;
  width: clamp(78px, 6.4vw, 120px);
  height: 22px;
  pointer-events: none;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 11px 50%, rgba(183, 155, 110, 0.95) 0 6px, rgba(183, 155, 110, 0.18) 7px 12px, rgba(183, 155, 110, 0) 13px),
    linear-gradient(90deg, rgba(183, 155, 110, 0.72), rgba(101, 121, 93, 0.58) 68%, rgba(255, 253, 248, 0.78));
  background-repeat: no-repeat;
  background-size: 22px 22px, calc(100% - 14px) 3px;
  background-position: 0 50%, 14px 50%;
}

.step-copy p:last-child {
  color: rgba(7, 26, 43, 0.7);
}

.step-count {
  color: var(--kyven-green);
}

.bridge-panel,
.finale-panel {
  background: var(--kyven-bg);
}

.section-copy.centered {
  max-width: 820px;
}

.finale-copy {
  width: min(820px, 100%);
}

.final-logo {
  width: 240px;
  height: auto;
  margin: 0 auto 34px;
}

@media (max-width: 1080px) {
  :root {
    --header-h: 76px;
  }

  .site-header {
    padding: 18px 24px;
  }

  .brand-link {
    width: 128px;
  }

  .panel-shell {
    width: min(760px, calc(100% - 44px));
  }

  .hero-shell,
  .split-shell,
  .step-shell {
    grid-template-columns: 1fr;
  }

  .hero-copy,
  .section-copy,
  .step-copy {
    max-width: 660px;
  }

  .step-copy {
    grid-column: 1;
    justify-self: start;
    align-self: end;
    padding-bottom: 76px;
  }

  .step-copy::after {
    display: none;
  }

  .chapter-sticky {
    align-items: start;
  }

  .chapter-sticky-inner,
  .software-chapter .chapter-sticky-inner {
    width: min(760px, calc(100% - 44px));
    padding: 110px 0 0;
  }

  .chapter-sticky-inner p,
  .chapter-points {
    max-width: 560px;
  }

  .right-shade {
    background:
      linear-gradient(180deg, rgba(247, 244, 239, 0.78), rgba(247, 244, 239, 0.24) 38%, rgba(247, 244, 239, 0.84)),
      linear-gradient(90deg, rgba(247, 244, 239, 0.66), rgba(247, 244, 239, 0.14));
  }

  h1 {
    font-size: 62px;
  }

  h2 {
    font-size: 46px;
  }

  h3 {
    font-size: 34px;
  }

  .lead,
  .section-copy p,
  .chapter-sticky-inner p,
  .step-copy p,
  .finale-copy p {
    font-size: 18px;
  }

  .path-layer {
    opacity: 0.9;
    --line-mask: linear-gradient(90deg, transparent 0 58%, #000 64%, #000 88%, transparent 96% 100%);
  }

  .journey-svg {
    transform: translateX(22vw);
  }

  .journey-path-shadow {
    stroke-width: 38;
  }

  .journey-path-base,
  .journey-path-progress {
    stroke-width: 22;
  }
}

@media (max-width: 720px) {
  html {
    scroll-snap-type: y mandatory;
  }

  .site-header {
    padding: 16px;
  }

  .site-nav a:not(.nav-cta) {
    display: none;
  }

  .site-nav .nav-cta {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }

  .brand-link {
    width: 112px;
  }

  .panel-shell,
  .chapter-sticky-inner,
  .software-chapter .chapter-sticky-inner {
    width: calc(100% - 36px);
  }

  .hero-shell {
    align-items: end;
    padding-bottom: 68px;
  }

  .split-shell {
    align-content: center;
    gap: 30px;
  }

  .step-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    align-self: end;
    padding-bottom: 50px;
  }

  .chapter-sticky-inner,
  .software-chapter .chapter-sticky-inner {
    padding-top: 92px;
  }

  .chapter-points {
    display: none;
  }

  h1 {
    font-size: 45px;
    line-height: 1.02;
  }

  h2 {
    font-size: 34px;
    line-height: 1.04;
  }

  h3 {
    font-size: 29px;
    line-height: 1.08;
  }

  .eyebrow,
  .step-count,
  .tile-index {
    margin-bottom: 12px;
    font-size: 11px;
  }

  .lead,
  .section-copy p,
  .chapter-sticky-inner p,
  .step-copy p,
  .finale-copy p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.55;
  }

  .cta-row {
    margin-top: 24px;
  }

  .button {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    font-size: 14px;
  }

  .offer-tile {
    min-height: 170px;
    padding: 24px;
  }

  .tile-title {
    font-size: 25px;
  }

  .tile-copy {
    font-size: 15px;
  }

  .hero-shade,
  .right-shade,
  .center-shade,
  .finale-shade {
    background:
      linear-gradient(180deg, rgba(247, 244, 239, 0.64), rgba(247, 244, 239, 0.18) 38%, rgba(247, 244, 239, 0.82) 78%),
      linear-gradient(90deg, rgba(247, 244, 239, 0.58), rgba(247, 244, 239, 0.08));
  }

  .soft-media,
  .calm-media {
    opacity: 0.74;
  }

  .path-layer {
    opacity: 0.58;
    --line-mask: linear-gradient(90deg, transparent 0 68%, #000 76%, #000 98%);
  }

  .journey-svg {
    transform: translateX(38vw);
  }

  .chapter-sticky-inner h2,
  .chapter-sticky-inner p,
  .step-copy h3,
  .step-copy p,
  .section-copy h2,
  .section-copy p {
    max-width: min(100%, calc(100vw - 128px));
  }

  .hero-copy::before,
  .section-copy::before,
  .step-copy::before,
  .finale-copy::before,
  .chapter-sticky-inner::before {
    inset: -16px -18px;
    background: linear-gradient(180deg, rgba(247, 244, 239, 0.99), rgba(247, 244, 239, 0.93) 72%, rgba(247, 244, 239, 0));
  }

  .journey-path-shadow {
    stroke-width: 34;
  }

  .journey-path-base,
  .journey-path-progress {
    stroke-width: 18;
  }

  .final-logo {
    width: 190px;
    margin-bottom: 24px;
  }
}

@media (max-width: 420px) {
  .site-header {
    height: 68px;
    padding: 12px 14px;
  }

  .site-nav .nav-cta {
    min-height: 36px;
    padding: 0 10px;
  }

  .brand-link {
    width: 104px;
  }

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 24px;
  }

  .chapter-sticky-inner p {
    display: none;
  }

  .hero-shell {
    padding-bottom: 56px;
  }

  .panel-shell,
  .chapter-sticky-inner,
  .software-chapter .chapter-sticky-inner {
    width: calc(100% - 28px);
  }

  .button {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  .panel-media video {
    display: none;
  }

  .panel-media picture {
    opacity: 1 !important;
  }
}

/* Scrollytelling rebuild: constant horizontal progress line, static imagery, richer offer cards. */
:root {
  --line-dot-x: 6%;
}

.path-layer {
  position: fixed;
  left: max(28px, 4vw);
  right: max(28px, 4vw);
  top: clamp(270px, 54vh, 580px);
  z-index: 8;
  height: 98px;
  opacity: 1 !important;
  mix-blend-mode: normal;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.journey-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: none !important;
}

.journey-path-shadow {
  stroke: rgba(255, 253, 248, 0.9);
  stroke-width: 22;
  opacity: 1;
  filter: drop-shadow(0 8px 16px rgba(7, 26, 43, 0.22));
}

.journey-path-base {
  stroke: rgba(7, 26, 43, 0.82);
  stroke-width: 9;
  opacity: 1;
}

.journey-path-progress {
  stroke: url("#journey-gradient");
  stroke-width: 11;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--line-progress));
  filter: drop-shadow(0 6px 14px rgba(7, 26, 43, 0.2));
}

.journey-dot {
  position: absolute;
  top: 50%;
  left: var(--line-dot-x);
  width: 24px;
  height: 24px;
  border: 4px solid #fffdf8;
  border-radius: 50%;
  background: var(--kyven-gold);
  box-shadow: 0 10px 24px rgba(7, 26, 43, 0.28), 0 0 0 7px rgba(183, 155, 110, 0.16);
  transform: translate(-50%, -50%);
}

.panel-media video {
  display: none !important;
}

.panel-media picture {
  opacity: 1 !important;
}

.panel-media img {
  filter: saturate(1.03) contrast(1.02);
}

.soft-media,
.calm-media {
  opacity: 1 !important;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(247, 244, 239, 0.72) 0%, rgba(247, 244, 239, 0.46) 28%, rgba(247, 244, 239, 0.08) 62%, rgba(247, 244, 239, 0) 100%),
    linear-gradient(180deg, rgba(247, 244, 239, 0.44), rgba(247, 244, 239, 0.02) 45%, rgba(247, 244, 239, 0.46));
}

.right-shade {
  background:
    linear-gradient(90deg, rgba(247, 244, 239, 0.74) 0%, rgba(247, 244, 239, 0.44) 30%, rgba(247, 244, 239, 0.04) 58%, rgba(247, 244, 239, 0.1) 100%),
    linear-gradient(180deg, rgba(247, 244, 239, 0.22), rgba(247, 244, 239, 0) 52%, rgba(247, 244, 239, 0.28));
}

.center-shade,
.finale-shade {
  background:
    linear-gradient(90deg, rgba(247, 244, 239, 0.64), rgba(247, 244, 239, 0.08) 48%, rgba(247, 244, 239, 0.34)),
    linear-gradient(180deg, rgba(247, 244, 239, 0.24), rgba(247, 244, 239, 0) 50%, rgba(247, 244, 239, 0.34));
}

.button {
  border: 1px solid var(--kyven-border);
  cursor: pointer;
  font-family: inherit;
}

button.button,
button.offer-tile {
  appearance: none;
  text-align: left;
}

@media (max-width: 1180px) {
  .chapter-sticky {
    display: none;
  }

  .chapter-steps {
    margin-top: 0;
  }

  .step-shell {
    grid-template-columns: 1fr;
  }

  .step-copy {
    grid-column: 1;
    justify-self: start;
    align-self: end;
    max-width: min(720px, 100%);
  }
}

.offer-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.offer-grid .offer-tile {
  min-height: 150px;
  cursor: pointer;
  font-family: inherit;
}

.tile-meta {
  align-self: end;
  display: inline-flex;
  width: fit-content;
  margin-top: 22px;
  padding: 8px 10px;
  color: rgba(7, 26, 43, 0.74);
  border: 1px solid rgba(7, 26, 43, 0.12);
  border-radius: 4px;
  background: rgba(255, 253, 248, 0.72);
  font-size: 13px;
  font-weight: 760;
}

.offer-tile.dark .tile-meta {
  color: rgba(255, 253, 248, 0.88);
  border-color: rgba(255, 253, 248, 0.2);
  background: rgba(255, 253, 248, 0.08);
}

.step-shell {
  grid-template-columns: minmax(0, 49%) minmax(520px, 650px);
  gap: 36px;
}

.step-copy {
  max-width: 650px;
  width: min(650px, 100%);
  padding: clamp(28px, 3vw, 42px);
}

.step-copy::before {
  border: 0;
  border-left: 6px solid rgba(183, 155, 110, 0.92);
  background: rgba(255, 253, 248, 0.86);
  box-shadow: 0 24px 58px rgba(7, 26, 43, 0.12);
}

.step-copy::after {
  display: none;
}

.showcase-track {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 72%);
  gap: 14px;
  margin: 26px -4px -4px;
  padding: 4px 4px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(101, 121, 93, 0.55) rgba(7, 26, 43, 0.08);
}

.project-track {
  grid-auto-columns: minmax(260px, 78%);
}

.showcase-card {
  scroll-snap-align: start;
  min-height: 255px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  color: var(--kyven-ink);
  border: 1px solid rgba(7, 26, 43, 0.1);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.64);
}

.showcase-card h4 {
  margin: 0;
  color: var(--kyven-ink);
  font-size: 18px;
  line-height: 1.12;
  letter-spacing: 0;
}

.showcase-card p {
  margin: 0;
  color: rgba(7, 26, 43, 0.68);
  font-size: 14px;
  line-height: 1.42;
}

.mini-visual,
.mockup {
  min-height: 118px;
  border-radius: 7px;
  border: 1px solid rgba(7, 26, 43, 0.1);
  background: linear-gradient(135deg, rgba(101, 121, 93, 0.16), rgba(183, 155, 110, 0.16));
  overflow: hidden;
}

.mini-visual {
  position: relative;
}

.video-visual video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  opacity: 1;
  transition: opacity 180ms ease;
}

.manager-visual video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  opacity: 0;
  transition: opacity 180ms ease;
}

.manager-visual.is-video-ready video {
  opacity: 1;
}

.manager-visual.is-video-ready::before,
.manager-visual.is-video-ready::after {
  content: none;
  display: none;
}

.video-visual video.is-looping {
  opacity: 0.18;
}

.mini-visual::before,
.mini-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(7, 26, 43, 0.72);
}

.mini-visual::before {
  left: 20px;
  right: 42px;
  top: 34px;
  height: 8px;
  box-shadow: 0 22px 0 rgba(7, 26, 43, 0.42), 0 44px 0 rgba(183, 155, 110, 0.72);
}

.mini-visual::after {
  right: 20px;
  bottom: 22px;
  width: 38px;
  height: 38px;
  background: rgba(183, 155, 110, 0.8);
}

.manager-visual {
  background:
    linear-gradient(90deg, rgba(7, 26, 43, 0.9) 0 34%, transparent 34%),
    linear-gradient(135deg, rgba(101, 121, 93, 0.18), rgba(183, 155, 110, 0.18)),
    #f8f6f0;
}

.manager-visual::before {
  left: 22px;
  right: auto;
  top: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.88);
  box-shadow:
    88px 4px 0 -16px rgba(7, 26, 43, 0.72),
    136px 4px 0 -16px rgba(101, 121, 93, 0.72),
    88px 40px 0 -18px rgba(183, 155, 110, 0.82),
    136px 40px 0 -18px rgba(7, 26, 43, 0.42);
}

.manager-visual::after {
  left: 92px;
  right: 24px;
  top: 88px;
  bottom: auto;
  width: auto;
  height: 7px;
  border-radius: 999px;
  background: rgba(7, 26, 43, 0.7);
  box-shadow: 0 18px 0 rgba(101, 121, 93, 0.56);
}

.video-visual::before,
.video-visual::after {
  content: none;
  display: none;
}

.mockup {
  position: relative;
  min-height: 170px;
  background: #f8f6f0;
}

.mockup::before,
.mockup::after {
  content: "";
  position: absolute;
}

.inventory-mockup::before {
  inset: 18px auto 18px 18px;
  width: 94px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(7, 26, 43, 0.9) 0 18%, transparent 18% 100%),
    repeating-linear-gradient(90deg, #071a2b 0 9px, #fffdf8 9px 15px);
}

.inventory-mockup::after {
  right: 18px;
  top: 22px;
  width: 112px;
  height: 120px;
  border-radius: 8px;
  background:
    linear-gradient(#65795d, #65795d) 14px 24px / 70px 8px no-repeat,
    linear-gradient(#b79b6e, #b79b6e) 14px 52px / 88px 8px no-repeat,
    linear-gradient(#071a2b, #071a2b) 14px 80px / 54px 8px no-repeat,
    rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(7, 26, 43, 0.12);
}

.fleet-map-mockup {
  background:
    linear-gradient(34deg, transparent 0 46%, rgba(183, 155, 110, 0.5) 47% 49%, transparent 50%),
    linear-gradient(135deg, transparent 0 38%, rgba(101, 121, 93, 0.46) 39% 41%, transparent 42%),
    #edf0e8;
}

.fleet-map-mockup::before {
  left: 34px;
  top: 42px;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  background: var(--kyven-gold);
  box-shadow: 92px 38px 0 var(--kyven-green), 168px -8px 0 var(--kyven-ink);
  transform: rotate(-45deg);
}

.ask-data-mockup {
  background:
    linear-gradient(90deg, rgba(7, 26, 43, 0.92) 0 34%, rgba(255, 253, 248, 0.96) 34% 100%);
}

.ask-data-mockup::before {
  left: 18px;
  top: 22px;
  width: 64px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.84);
  box-shadow: 0 28px 0 rgba(255, 253, 248, 0.42), 0 56px 0 rgba(255, 253, 248, 0.32);
}

.ask-data-mockup::after {
  left: 42%;
  right: 20px;
  top: 24px;
  bottom: 22px;
  border-radius: 10px;
  background:
    linear-gradient(#071a2b, #071a2b) 18px 20px / 120px 10px no-repeat,
    linear-gradient(#65795d, #65795d) 18px 52px / 158px 8px no-repeat,
    linear-gradient(#b79b6e, #b79b6e) 18px 80px / 98px 8px no-repeat,
    rgba(247, 244, 239, 0.96);
  border: 1px solid rgba(7, 26, 43, 0.12);
}

.document-mockup,
.approval-mockup,
.archive-mockup,
.knowledge-mockup,
.support-mockup,
.timeline-mockup,
.sync-mockup,
.contract-mockup,
.field-mockup,
.dashboard-mockup,
.app-mockup,
.handover-mockup {
  background:
    linear-gradient(90deg, rgba(7, 26, 43, 0.1) 16px, transparent 16px),
    linear-gradient(180deg, rgba(183, 155, 110, 0.2), rgba(101, 121, 93, 0.16)),
    #fffdf8;
}

.document-mockup::before,
.approval-mockup::before,
.archive-mockup::before,
.knowledge-mockup::before,
.support-mockup::before,
.timeline-mockup::before,
.sync-mockup::before,
.contract-mockup::before,
.field-mockup::before,
.dashboard-mockup::before,
.app-mockup::before,
.handover-mockup::before {
  left: 28px;
  right: 28px;
  top: 28px;
  height: 10px;
  border-radius: 999px;
  background: rgba(7, 26, 43, 0.78);
  box-shadow: 0 30px 0 rgba(101, 121, 93, 0.58), 0 60px 0 rgba(183, 155, 110, 0.62), 0 90px 0 rgba(7, 26, 43, 0.18);
}

.booking-menu[hidden] {
  display: none;
}

.booking-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}

.booking-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 26, 43, 0.36);
}

.booking-panel {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100svh - 48px);
  padding: clamp(24px, 3vw, 36px);
  overflow: auto;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 32px 90px rgba(7, 26, 43, 0.24);
}

.booking-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(7, 26, 43, 0.14);
  border-radius: 50%;
  color: var(--kyven-ink);
  background: rgba(247, 244, 239, 0.85);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

.booking-panel h2 {
  max-width: 700px;
  padding-right: 52px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.04;
}

.booking-lead {
  max-width: 680px;
  margin: 14px 0 0;
  color: rgba(7, 26, 43, 0.68);
  font-size: 16px;
  line-height: 1.45;
}

.booking-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.booking-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(7, 26, 43, 0.12);
  border-radius: 8px;
  background: #fffdf8;
}

.booking-card.is-highlight {
  border-color: rgba(183, 155, 110, 0.56);
  background: rgba(183, 155, 110, 0.12);
}

.booking-card h3 {
  overflow-wrap: anywhere;
  font-size: clamp(21px, 2.1vw, 25px);
  line-height: 1.08;
}

.booking-card p {
  margin: 0;
  color: rgba(7, 26, 43, 0.68);
  font-size: 14px;
  line-height: 1.42;
}

.date-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.date-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(7, 26, 43, 0.1);
  color: var(--kyven-ink);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}

.date-list strong {
  color: var(--kyven-green);
  font-size: 12px;
  text-align: right;
  line-height: 1.25;
}

.date-list .is-past {
  color: rgba(7, 26, 43, 0.42);
  text-decoration: line-through;
}

.date-list .is-past strong {
  color: rgba(7, 26, 43, 0.42);
}

@media (max-width: 1080px) {
  .path-layer {
    top: auto;
    bottom: 34px;
    height: 86px;
    opacity: 1 !important;
  }

  .offer-grid,
  .booking-columns {
    grid-template-columns: 1fr;
  }

  .booking-panel {
    width: min(760px, calc(100vw - 36px));
  }

  .step-shell {
    grid-template-columns: 1fr;
  }

  .step-copy {
    max-width: min(720px, 100%);
  }
}

@media (max-width: 720px) {
  .path-layer {
    left: 14px;
    right: 14px;
    bottom: 18px;
    height: 70px;
    opacity: 1 !important;
  }

  .journey-path-shadow {
    stroke-width: 18;
  }

  .journey-path-base,
  .journey-path-progress {
    stroke-width: 8;
  }

  .journey-dot {
    width: 20px;
    height: 20px;
  }

  .showcase-track {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-auto-columns: minmax(220px, 88%);
  }

  .booking-menu {
    padding: 12px;
  }

  .booking-panel {
    max-height: calc(100svh - 24px);
    padding: 24px 18px;
  }
}

@media (min-width: 1081px) and (max-height: 820px) {
  .booking-menu {
    padding: 14px;
  }

  .booking-panel {
    width: min(980px, calc(100vw - 28px));
    max-height: calc(100svh - 28px);
    padding: 24px;
  }

  .booking-panel .eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .booking-panel h2 {
    max-width: 620px;
    font-size: 36px;
  }

  .booking-lead {
    max-width: 620px;
    margin-top: 10px;
    font-size: 14px;
  }

  .booking-columns {
    gap: 12px;
    margin-top: 18px;
  }

  .booking-card {
    gap: 10px;
    padding: 14px;
  }

  .booking-card h3 {
    font-size: 21px;
  }

  .booking-card p {
    font-size: 13px;
  }

  .date-list li {
    padding: 7px 0;
    font-size: 13px;
  }

  .booking-card .button {
    min-height: 44px;
    font-size: 13px;
  }
}

.step-copy::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1080px), (max-height: 760px) {
  h1 {
    font-size: 56px;
    line-height: 1;
  }

  h2 {
    font-size: 40px;
    line-height: 1.04;
  }

  h3 {
    font-size: 30px;
    line-height: 1.08;
  }

  .lead,
  .section-copy p,
  .chapter-sticky-inner p,
  .step-copy p,
  .finale-copy p {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.5;
  }

  .step-copy {
    padding: 24px;
  }

  .showcase-track {
    margin-top: 20px;
  }

  .showcase-card {
    min-height: 220px;
    gap: 10px;
  }

  .showcase-card h4 {
    font-size: 17px;
  }

  .showcase-card p {
    font-size: 13px;
    line-height: 1.38;
  }

  .mini-visual,
  .mockup {
    min-height: 96px;
  }

  .tile-title {
    font-size: 27px;
  }

  .tile-copy {
    font-size: 15px;
    line-height: 1.45;
  }
}

@media (max-width: 720px), (max-height: 660px) {
  h1 {
    font-size: 38px;
    line-height: 1.03;
  }

  h2 {
    font-size: 28px;
    line-height: 1.08;
  }

  h3 {
    font-size: 24px;
    line-height: 1.1;
  }

  .eyebrow,
  .step-count,
  .tile-index {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .lead,
  .section-copy p,
  .chapter-sticky-inner p,
  .step-copy p,
  .finale-copy p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
  }

  .step-copy {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    padding-bottom: 42px;
  }

  .showcase-track {
    gap: 10px;
    max-width: 100%;
    margin-top: 16px;
    margin-right: 0;
    margin-left: 0;
    grid-auto-columns: minmax(208px, 84%);
  }

  .showcase-card {
    min-height: 196px;
    padding: 12px;
  }

  .showcase-card h4 {
    font-size: 16px;
  }

  .showcase-card p {
    font-size: 12px;
  }

  .mini-visual,
  .mockup {
    min-height: 76px;
  }

  .tile-title {
    font-size: 22px;
  }

  .tile-copy,
  .tile-meta {
    font-size: 13px;
  }
}

/* ============================================================
   Card photos — generated KYVEN visuals replace the CSS mockups.
   The .has-photo modifier hides the mock bars/backgrounds and lets
   the <img class="card-photo"> fill the visual box.
   ============================================================ */
.mini-visual.has-photo,
.mockup.has-photo {
  background: none !important;
}

.mini-visual.has-photo::before,
.mini-visual.has-photo::after,
.mockup.has-photo::before,
.mockup.has-photo::after {
  content: none !important;
  display: none !important;
}

.has-photo > .card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  border-radius: inherit;
}

/* ============================================================
   Legal pages (Impressum, Datenschutz) — readable long-form,
   no scroll snap, narrow text column, KYVEN typography.
   ============================================================ */
html.legal-html,
html.legal-html body {
  scroll-snap-type: none !important;
}

.legal-page {
  min-height: 100vh;
  padding: 120px 24px 56px;
  background: var(--kyven-bg);
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: var(--kyven-ink);
}

.legal-content > .eyebrow {
  margin-bottom: 14px;
}

.legal-content h1 {
  max-width: none;
  font-size: 56px;
  font-weight: 640;
  line-height: 1.04;
  margin: 0 0 14px;
}

.legal-content .lead {
  max-width: none;
  margin: 0 0 56px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(7, 26, 43, 0.7);
}

.legal-content section {
  margin: 44px 0;
}

.legal-content h2 {
  max-width: none;
  font-size: 24px;
  font-weight: 640;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--kyven-ink);
}

.legal-content h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 22px 0 6px;
  color: var(--kyven-ink);
}

.legal-content p {
  margin: 0 0 12px;
  color: rgba(7, 26, 43, 0.85);
}

.legal-content a {
  color: var(--kyven-ink);
  text-decoration: underline;
  text-decoration-color: rgba(183, 155, 110, 0.55);
  text-underline-offset: 3px;
}

.legal-content a:hover {
  text-decoration-color: var(--kyven-gold);
}

.legal-content dl {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 10px 28px;
  margin: 14px 0 0;
}

.legal-content dt {
  font-weight: 600;
  color: var(--kyven-ink);
}

.legal-content dd {
  margin: 0;
  color: rgba(7, 26, 43, 0.85);
}

.legal-content ul {
  margin: 8px 0 14px;
  padding-left: 20px;
}

.legal-content li {
  margin-bottom: 6px;
  color: rgba(7, 26, 43, 0.85);
}

.legal-content .note {
  margin-top: 12px;
  padding: 14px 18px;
  border-left: 4px solid var(--kyven-gold);
  background: rgba(183, 155, 110, 0.08);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(7, 26, 43, 0.78);
}

@media (max-width: 720px) {
  .legal-page { padding: 88px 18px 48px; }
  .legal-content { font-size: 15px; }
  .legal-content h1 { font-size: 38px; }
  .legal-content h2 { font-size: 21px; }
  .legal-content .lead { margin-bottom: 36px; font-size: 16px; }
  .legal-content dl { grid-template-columns: 1fr; gap: 2px 0; }
  .legal-content dt { margin-top: 12px; }
}

/* ============================================================
   Site footer — appears on every page (also after snap panels)
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 30;
  border-top: 1px solid rgba(7, 26, 43, 0.08);
  background: var(--kyven-bg);
  padding: 56px 40px 32px;
  /* Macht den Footer zum letzten Snap-Target, sodass er bei mandatory-snap
     erreichbar ist (sonst hängt der Scroll am letzten Panel fest). */
  scroll-snap-align: end;
  scroll-snap-stop: normal;
}

.footer-inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(7, 26, 43, 0.72);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-brand img {
  width: 130px;
  height: auto;
}

.footer-brand-claim {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--kyven-gold);
  margin-top: 4px;
}

.footer-group h4 {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--kyven-gold);
}

.footer-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.footer-group a {
  color: rgba(7, 26, 43, 0.78);
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-group a:hover {
  color: var(--kyven-ink);
}




.footer-copy {
  max-width: var(--content);
  margin: 32px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(7, 26, 43, 0.08);
  font-size: 12px;
  color: rgba(7, 26, 43, 0.48);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ============================================================
   Recruiting-FAB — schwebendes Badge "Wir suchen die Besten der
   Besten", läuft beim Scrollen permanent mit (unten rechts).
   Navy-Pille mit Gold-Akzenten, sanfter Einstieg, periodischer
   Licht-Sweep, Hover-Lift. Bewusst der einzige dunkle Schwebe-
   Akzent der Seite, damit Bewerber ihn nicht übersehen.
   ============================================================ */
@keyframes fab-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fab-shine {
  0%, 76% { transform: translateX(-130%) skewX(-18deg); }
  92%, 100% { transform: translateX(230%) skewX(-18deg); }
}

@keyframes fab-star {
  0%, 88%, 100% { transform: rotate(0deg) scale(1); }
  92% { transform: rotate(-12deg) scale(1.12); }
  96% { transform: rotate(8deg) scale(1.05); }
}

.termin-fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px) + 16px);
  bottom: max(20px, env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border: 1px solid rgba(183, 155, 110, 0.55);
  border-radius: 999px;
  background: linear-gradient(135deg, #0e2940, #071a2b 62%);
  color: var(--kyven-bg);
  box-shadow: 0 18px 48px rgba(7, 26, 43, 0.34), 0 2px 8px rgba(7, 26, 43, 0.22);
  overflow: hidden;
  opacity: 0;
  animation: fab-enter 520ms ease 900ms forwards;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.termin-fab::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 42%;
  left: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 248, 0.16), transparent);
  animation: fab-shine 7s ease-in-out 2.4s infinite;
}

.termin-fab:hover {
  transform: translateY(-3px);
  border-color: var(--kyven-gold);
  box-shadow: 0 26px 64px rgba(7, 26, 43, 0.4), 0 4px 12px rgba(7, 26, 43, 0.26);
}

.termin-fab:focus-visible {
  outline: 2px solid var(--kyven-gold);
  outline-offset: 4px;
}

.fab-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--kyven-gold);
  background: rgba(183, 155, 110, 0.16);
  border: 1px solid rgba(183, 155, 110, 0.4);
}

.fab-icon svg {
  animation: fab-star 7s ease-in-out 2.4s infinite;
}

.fab-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.fab-text strong {
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
  color: var(--kyven-paper);
}

.fab-text em {
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--kyven-gold);
}

@media (max-width: 720px) {
  .termin-fab {
    right: max(14px, env(safe-area-inset-right, 0px) + 10px);
    bottom: max(14px, env(safe-area-inset-bottom, 0px) + 10px);
    gap: 10px;
    padding: 10px 15px 10px 10px;
  }

  .fab-icon {
    width: 36px;
    height: 36px;
  }

  .fab-icon svg {
    width: 18px;
    height: 18px;
  }

  .fab-text strong {
    font-size: 12.5px;
  }

  .fab-text em {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .termin-fab {
    opacity: 1;
    animation: none;
  }

  .termin-fab::after,
  .fab-icon svg {
    animation: none;
  }
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  .site-footer { padding: 36px 18px 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-copy { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   Mobile (<= 720px): Panels dürfen mit dem Inhalt wachsen und
   der Scroll-Snap ist AUS.
   - Feste 100svh-Höhe + overflow:hidden schneidet auf kleinen
     Geräten (z.B. iPhone SE) Inhalte unerreichbar ab.
   - mandatory-Snap kämpft auf iOS mit der dynamischen
     Adressleiste (svh-Panels vs. wachsender Viewport) und mit
     Panels, die höher als der Viewport sind: Die Seite springt
     beim Loslassen ruckartig auf und ab. Natürliches Scrollen
     ist auf Touch-Geräten die verlässliche Wahl — die Panels
     bleiben optisch Vollbild-Slides, Desktop behält das
     Einrasten.
   ============================================================ */
@media (max-width: 720px) {
  html,
  body {
    scroll-snap-type: none;
  }

  .snap-panel {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  /* height:100% der Shell kollabiert bei height:auto des Panels.
     WICHTIG: min-height streckt Grid-Tracks in Safari NICHT (anders
     als in Chrome) — align-items end/center wäre dort wirkungslos
     und der Text klebte oben am Logo. Deshalb: der Hero bekommt eine
     ECHTE Höhe (Inhalt passt dort immer), alle Content-Panels werden
     deterministisch oben ausgerichtet mit Luft unter dem Header —
     identisches Verhalten in Safari und Chrome. */
  .panel-shell {
    height: auto;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 12px);
    padding-bottom: 32px;
  }

  .hero-shell {
    height: 100svh;
    /* Fußraum für das schwebende Recruiting-Badge (~78px hoch),
       damit es die Hero-CTAs nicht überdeckt. */
    padding-bottom: 148px;
  }

  .split-shell,
  .step-shell {
    align-items: start;
  }

  .bridge-shell,
  .finale-shell {
    place-items: start center;
  }

  /* Step-Boxen sind unten ausgerichtet (align-self:end aus der
     Basis-Regel) — bei Top-Ausrichtung des Grids nicht mehr nötig
     und in Safari wirkungslos; explizit neutralisieren. */
  .step-copy {
    align-self: auto;
  }
}

@media (max-width: 420px) {
  .hero-shell {
    padding-bottom: 136px;
  }
}

/* ============================================================
   Booking-Modal: Hintergrund-Scroll sperren, solange es offen
   ist (script.js setzt body.has-booking-menu), Scroll-Chaining
   aus dem Modal unterbinden und den Schließen-Button auf Mobile
   beim Scrollen im Modal sichtbar halten.
   ============================================================ */
body.has-booking-menu {
  overflow: hidden;
}

html:has(body.has-booking-menu) {
  overflow: hidden;
}

.booking-panel {
  overscroll-behavior: contain;
}

/* Härtung für ältere iOS (<16, ohne overscroll-behavior):
   Touch-Drags, die auf dem Backdrop starten, dürfen die Seite
   dahinter nicht bewegen. Klick zum Schließen bleibt möglich. */
.booking-backdrop {
  touch-action: none;
}

/* Lange Komposita ("Automatisierungspotenzial-Analyse") werden auf
   sehr schmalen Geräten (<340px) sonst an der overflow:hidden-Kante
   der Kachel bzw. Step-Box mitten im Glyph abgeschnitten. Gleiches
   Muster wie bei .booking-card h3. */
.tile-title,
.step-copy h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 720px) {
  .booking-close {
    position: sticky;
    top: 0;
    display: block;
    margin-left: auto;
    margin-bottom: -38px;
    z-index: 5;
  }
}

/* ============================================================
   Landscape-Phones / sehr niedrige Viewports (<= 500px Höhe):
   Feste 100svh-Panels + overflow:hidden schneiden dort Inhalte
   ab, ohne dass gescrollt werden kann. Deshalb: Snap aus,
   Panels wachsen mit dem Inhalt, nichts wird gekappt.
   ============================================================ */
@media (max-height: 500px) {
  html,
  body {
    scroll-snap-type: none;
  }

  .snap-panel {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .panel-shell {
    padding-top: 90px;
    padding-bottom: 48px;
  }

  .chapter-sticky {
    display: none;
  }

  .chapter-steps {
    margin-top: 0;
  }

  .path-layer {
    display: none;
  }
}


/* ============================================================
   VERSUCH NEUPOSITIONIERUNG — zusätzliche Bausteine
   Alles unterhalb dieser Marke gehört zum Parallel-Versuch und
   existiert in der Live-styles.css nicht.
   ============================================================ */

/* Panel-Bilder werden vom Skript per transform bewegt (Basisbewegung
   ohne Zeitachse). Die GPU-Ebene wird hier vorbereitet. */
.panel-media picture {
  display: block;
  position: absolute;
  inset: 0;
  /* Kein will-change: translate3d befördert die Ebene bereits. Beides zusammen
     hielte 16 dauerhaft beförderte 1920x1080-Ebenen im Grafikspeicher. */
  transform: translate3d(0, 0, 0) scale(1.06);
}
.panel-media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Die Reihenfolge im Grundsatz-Panel */
.vocab-chain {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  justify-content: center;
  counter-reset: vocab;
}
.vocab-chain li {
  counter-increment: vocab;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 0;
  font-size: 17px;
  font-weight: 640;
  color: var(--kyven-ink);
}
.vocab-chain li::before {
  content: counter(vocab, decimal-leading-zero);
  font-family: var(--kyven-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--kyven-gold);
}
.vocab-chain li:not(:last-child)::after {
  content: "";
  width: 22px;
  height: 1px;
  margin-left: 8px;
  background: var(--kyven-border);
}
.vocab-close {
  margin-top: 30px;
  font-size: 19px;
  font-weight: 640;
  line-height: 1.35;
  color: var(--kyven-ink);
  border-top: 1px solid var(--kyven-line-soft);
  padding-top: 20px;
}

/* Preiszeile und Einschränkungen */
.price-line {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 3px solid rgba(183, 155, 110, 0.62);
  font-size: 16px;
  line-height: 1.55;
  color: var(--kyven-muted);
}

/* Arbeitsversprechen */
.pledge-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.pledge-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kyven-ink);
}
.pledge-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--kyven-green);
  box-shadow: 0 0 0 5px rgba(101, 121, 93, 0.12);
}

/* Prüffragen an jeden Anbieter */
.check-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: check;
}
.check-list li {
  counter-increment: check;
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  font-weight: 640;
  line-height: 1.5;
  color: var(--kyven-ink);
}
.check-list li::before {
  content: counter(check, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--kyven-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--kyven-gold);
}
.check-list li span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--kyven-muted);
}

/* Zwei gleichwertige Textspalten (Arbeitsweise, Nachweise) */
#arbeitsweise .split-shell,
#nachweis .split-shell {
  align-items: start;
  gap: 56px;
}
#arbeitsweise .section-copy,
#nachweis .section-copy {
  max-width: none;
}
#arbeitsweise h2,
#nachweis h2 {
  font-size: clamp(26px, 2.4vw, 34px);
}
#arbeitsweise,
#nachweis,
#grundsatz {
  background: var(--kyven-bg);
}

/* Flugbühne: dekorative Schicht UNTER dem Header (40), niemals modal.
   Der schlimmste Fehlerfall ist "Bühne weg, Nutzer ist am Ziel". */
#flight-stage {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: block;
  overflow: hidden;
  background: var(--kyven-bg);
  pointer-events: none;
  /* Siehe .is-landing weiter unten. Hier deklariert, damit die Blende auch
     dann läuft, wenn die Klasse erst Sekunden später gesetzt wird. */
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
#flight-stage[hidden] { display: none; }

/* Die Bühne trägt exakt dieselbe Geometrie wie ein Panel-Bild: Vollbild,
   darin object-fit cover, darüber dieselbe Grundvergrößerung 1.06, die
   script.js auf .panel-media picture legt.

   Vorher stand hier ein 16:9-Kasten mit max-height und Balken. Das hatte zwei
   Folgen, die zusammen den Sprung am Flugende ergaben: auf einem 1440x900-
   Fenster erschien das letzte Videobild mit Faktor 0,750, das Panelbild
   dahinter aber mit 0,883 — 17,8 Prozent Maßstabsunterschied in einem Bild.
   Dazu verschwanden 45 px Balken oben und unten. Mit der Vollbildgeometrie
   ist der Übergang maßstabsgleich; die Blende muss dann nur noch den
   Unterschied auftragen, der wirklich einer ist: Schleier und Text. */
.flight-box {
  position: absolute;
  inset: 0;
  transform: translateZ(0) scale(1.06);
}
.flight-still,
.flight-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: opacity;
  transform: translateZ(0);
  transition: none; /* ausdrücklich keine: beide Schichten zeigen dasselbe Bild */
}
/* Das Standbild liegt ÜBER dem Video, nicht darunter. Grund: ein mit
   opacity 0 verstecktes Video präsentiert keine Bilder, dann feuert
   requestVideoFrameCallback nie und der Flug bliebe für immer im Preroll
   hängen. Also läuft das Video sichtbar an und das Standbild wird
   weggenommen, sobald ein Bild bestätigt ist. Beide sind bildgleich
   (gemessen 0,000 Codewerte), der Wechsel ist deshalb unsichtbar. */
.flight-video { opacity: 1; z-index: 1; }
.flight-still { z-index: 2; }
.flight-still.is-gone { visibility: hidden; }

/* Landung. Die Bühne verschwindet nicht, sie löst sich auf — und zwar in die
   Bewegung hinein: die Blende beginnt eine halbe Sekunde VOR dem letzten
   Videobild. Ein Bild, das erst stehen bleibt und dann blendet, liest sich als
   Stopp; eines, das während der letzten Sekunde aufgeht, liest sich als
   Ankommen. Möglich ist das nur, weil Geometrie und Bildinhalt zu diesem
   Zeitpunkt deckungsgleich sind: das Panelbild ist aus genau diesem letzten
   Videobild gewonnen (gemessen 51,4 dB PSNR, der Rest ist WebP-Kompression). */
#flight-stage.is-landing { opacity: 0; }

html.is-flying { overflow: hidden; scroll-snap-type: none; }
/* Der Schwebeknopf kommt nach dem Flug ebenfalls weich zurück statt zu
   erscheinen — sonst wäre der harte Schnitt nur verschoben. Die drei
   Übergänge der Grundregel werden mitgeführt, sonst verlöre der Knopf
   sein Anheben beim Zeigen. */
.termin-fab {
  transition: transform 180ms ease, box-shadow 180ms ease,
              border-color 180ms ease, opacity 320ms ease;
}
/* Wichtig: die Einflug-Animation des Knopfs endet mit fill-mode forwards und
   hält damit ihren eigenen opacity-Wert — eine gewöhnliche Regel käme
   dagegen nicht an. Deshalb wird sie hier abgeschaltet. */
html.is-flying .termin-fab { animation: none; opacity: 0; pointer-events: none; }

/* Unter 900 px gibt es keinen Flug — als Entwurf, nicht als Rückfall.
   Vorher standen hier 1180 px, das nahm jedes etwas kleinere Laptopfenster mit. */
@media (max-width: 899px) {
  #flight-stage { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #flight-stage { display: none !important; }
  .panel-media picture { transform: none !important; }
}

@media (max-width: 1080px) {
  #arbeitsweise .split-shell,
  #nachweis .split-shell { gap: 34px; }
  .vocab-chain li { font-size: 15px; }
}

/* Ausgangslage: drei Auslöser als Reihe unter der Copy statt als hohe Spalte.
   Als hohe rechte Spalte lief die dritte Karte auf 900 px Fensterhöhe unten
   heraus, und auf einem 800-px-Laptop deutlich mehr. */
#ausgangslage .split-shell {
  grid-template-columns: 1fr;
  gap: 34px;
  align-content: center;
}
#ausgangslage .section-copy { max-width: 780px; }
#ausgangslage .offer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}
#ausgangslage .offer-tile {
  min-height: 0;
  padding: 26px 24px;
}
#ausgangslage .offer-tile .tile-title { font-size: 23px; }
#ausgangslage .offer-tile .tile-copy { font-size: 15px; }

@media (max-width: 900px) {
  #ausgangslage .offer-grid { grid-template-columns: 1fr; }
}

/* Nachweise: textdichtestes Panel der Seite. Auf 800 px Fensterhöhe lief die
   rechte Spalte um rund 34 px heraus, deshalb hier ein engeres Satzmaß. */
#nachweis .section-copy p { font-size: 15px; line-height: 1.55; }
#nachweis .price-line { margin-top: 14px; font-size: 15px; }
#nachweis .pledge-list { margin-top: 20px; gap: 11px; }
#nachweis .pledge-list li { font-size: 14px; line-height: 1.5; }
#nachweis h2 { font-size: clamp(24px, 2.1vw, 30px); }


/* ============================================================
   Unterzeile unter dem Handlungsaufruf
   Steht überall dort, wo das kostenlose Erstgespräch angeboten wird.
   Sie ist das eigentliche Verkaufsargument: das Gespräch ist begrenzt,
   und die Grenze steht dran. Deshalb ruhig gesetzt, nicht als Kleingedrucktes.
   ============================================================ */
.cta-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kyven-muted);
  letter-spacing: 0.01em;
}
.centered .cta-note,
.finale-copy .cta-note { text-align: center; }
@media (max-width: 720px) {
  .cta-note { font-size: 13px; margin-top: 12px; }
}

/* ============================================================
   Terminformular
   Drei Pflichtfelder, mehr nicht. Qualifizierung gehört ins Gespräch,
   nicht ins Formular — keine Umsatz- oder Mitarbeiterabfrage.
   Kein Fremdskript, keine Cookies: das ist auf einer Seite, die
   prüfbaren Datenschutz verspricht, kein Detail, sondern die Zusage.
   ============================================================ */
.termin-form {
  width: min(760px, 100%);
  margin: 26px auto 0;
  text-align: left;
}
.termin-felder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.termin-form label {
  display: block;
  margin: 0;
}
.termin-form label > span {
  display: block;
  font-family: var(--kyven-font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kyven-muted);
  margin-bottom: 7px;
}
.termin-form label > span em {
  font-style: normal;
  font-weight: 600;
  opacity: 0.66;
  letter-spacing: 0.08em;
}
.termin-form input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;               /* 16px verhindert den Zoom-Sprung auf iOS */
  color: var(--kyven-ink);
  background: var(--kyven-paper);
  border: 1px solid var(--kyven-border);
  border-radius: 4px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.termin-form input:hover { border-color: rgba(183, 155, 110, 0.62); }
.termin-form input:focus-visible {
  outline: 2px solid var(--kyven-gold);
  outline-offset: 4px;
  border-color: rgba(183, 155, 110, 0.62);
}
.termin-form input:user-invalid {
  border-color: rgba(176, 70, 58, 0.55);
}
.termin-anlass { margin-top: 14px; }
.termin-form button[type="submit"] {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
}
.termin-form .cta-note { text-align: center; }

/* Honigtopf: aus dem Blickfeld und aus dem Tabstopp, aber nicht display:none —
   manche Bots werten das aus und lassen das Feld dann aus. */
.termin-honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.termin-pruefbar,
.termin-rueckfall {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kyven-muted);
}
.termin-pruefbar {
  padding-top: 12px;
  border-top: 1px solid var(--kyven-line-soft);
}
.termin-rueckfall a {
  color: var(--kyven-ink);
  text-decoration-color: rgba(183, 155, 110, 0.6);
  text-underline-offset: 3px;
}

/* Rückmeldung nach dem Absenden */
.termin-antwort {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-left: 5px solid var(--kyven-green);
  background: var(--kyven-paper);
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}
.termin-antwort.is-fehler { border-left-color: rgba(176, 70, 58, 0.7); }

@media (max-width: 900px) {
  .termin-felder { grid-template-columns: 1fr; gap: 12px; }
  .termin-form { margin-top: 20px; }
  .termin-form input { min-height: 46px; }
}


/* ============================================================
   Mitlaufender Aufruf
   Der wirksamste Platz der Seite. Vorher stand hier das Recruiting —
   die Seite soll aber Kunden gewinnen, nicht Bewerber. Ohne Stern-Symbol
   und ohne Superlativ, das war die alte Beschriftung.
   ============================================================ */
.termin-fab {
  background: var(--kyven-ink);
  color: var(--kyven-bg);
  border-color: transparent;
  padding: 13px 22px;
}
.termin-fab:hover { background: #0e2940; }
.termin-fab .fab-text strong { color: var(--kyven-bg); }
.termin-fab .fab-text em { color: rgba(247, 244, 239, 0.76); }
.termin-fab:focus-visible {
  outline: 2px solid var(--kyven-gold);
  outline-offset: 4px;
}
.footer-netzwerk {
  max-width: 34ch;
  line-height: 1.55;
  color: var(--kyven-muted);
}

/* Der einheitliche Wortlaut ist lang — in der Kopfzeile bräuchte er auf
   schmalen Fenstern drei Zeilen und liefe ins Logo. Dort greift die kurze
   Fassung. Der Wortlaut bleibt überall sonst identisch. */
.nav-cta-kurz { display: none; }
@media (max-width: 1180px) {
  .nav-cta-lang { display: none; }
  .nav-cta-kurz { display: inline; }
}
@media (max-width: 640px) {
  /* Unter 640 px trägt der mitlaufende Knopf den Aufruf allein —
     zwei gleichlautende Knöpfe übereinander sind hier nur Lärm. */
  .site-nav .nav-cta { display: none; }
}

/* ============================================================
   Produktbereich
   Kein Katalog, sondern ein Belegstück: Beratung lässt sich behaupten,
   Software nicht. Deshalb ruhig gesetzt wie die Rechtsseiten, nicht
   wie ein Schaufenster.
   ============================================================ */
.produkt-grid {
  margin: 34px 0 8px;
  gap: 16px;
}
.produkt-kachel {
  text-decoration: none;
  min-height: 0;
  padding: 26px 28px 28px;
}
.produkt-kachel .tile-index {
  font-family: var(--kyven-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kyven-gold);
}
.produkt-kachel .tile-title { margin-top: 10px; }
.produkt-kachel .tile-copy { margin-top: 9px; }

.produkt-seite .lead { max-width: 56ch; }

.produkt-vorhaben {
  margin: 22px 0 0;
  padding: 14px 18px;
  border-left: 5px solid var(--kyven-gold);
  background: var(--kyven-paper);
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.6;
}

.produkt-merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 30px;
  margin-top: 18px;
}
.produkt-merkmal h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 730;
  line-height: 1.3;
}
.produkt-merkmal p { margin: 0; }

.produkt-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 30px 0 6px;
}
.produkt-bilder figure { margin: 0; }
.produkt-bilder img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--kyven-border);
  border-radius: 8px;
  background: var(--kyven-paper);
}

.produkt-fakten dt {
  font-family: var(--kyven-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kyven-muted);
}

/* "Was dazugehört" — die Einschränkungen stehen nicht im Kleingedruckten,
   sondern als eigener Abschnitt. Das ist bei einer Nachweis-Marke kein
   Eingeständnis, sondern der Beleg. */
.produkt-ehrlich {
  border-left: 5px solid var(--kyven-green);
  padding: 2px 0 2px 20px;
}

.produkt-schluss { margin-top: 34px; }
.produkt-warten {
  margin-top: 34px;
  padding: 16px 20px;
  background: var(--kyven-paper);
  border: 1px solid var(--kyven-border);
  border-radius: 8px;
  line-height: 1.6;
}
.produkt-zurueck {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--kyven-line-soft);
  font-size: 15px;
}
.produkt-schlusswort {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--kyven-line-soft);
}

@media (max-width: 720px) {
  .produkt-merkmale { grid-template-columns: 1fr; gap: 18px; }
  .produkt-bilder { grid-template-columns: repeat(2, 1fr); }
}

/* Die Übersicht bekommt mehr Breite als die Rechtsseiten — neun Kacheln
   untereinander wären eine Liste, nebeneinander sind sie ein Regal. */
.produkt-uebersicht { max-width: min(1180px, 100%); }
.produkt-uebersicht .lead,
.produkt-uebersicht > p { max-width: 62ch; }
.produkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}