/* Fallstudien-Buehne (/autozentrum-kiener und /fallstudien): gemeinsame
 * Bausteine beider Fallstudien. Alles ist unter .kp gekapselt.
 * case-study.js setzt .kp--live (Bewegung erlaubt) und schreibt Fortschritt
 * in CSS-Variablen (--par, --done). Ohne JS oder mit reduzierter Bewegung
 * bleibt alles statisch und vollstaendig sichtbar.
 * Bausteine: Intro mit Geraete-Buehne, Story mit wechselnden Bildschirmen,
 * mobile.de-Sync (nur Kiener), Admin-Spotlight (nur Kiener), Ergebnisse,
 * Weitere Referenzen und Abschluss. */

.case-page .page-wrapper {
  overflow: clip; /* sticky Story und angeheftete Sync-Szene brauchen clip */
}

.kp {
  --g: var(--ogency-base);
  --g-rgb: var(--ogency-base-rgb);
  --ink: var(--ogency-black);
  --ink2: var(--ogency-black2);
  --ink3: var(--ogency-black3);
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .22);
  --muted: rgba(255, 255, 255, .72);
  --quiet: rgba(255, 255, 255, .58);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.4, 0, .2, 1);
  background: var(--ink);
  color: var(--ogency-white);
}

.kp section {
  position: relative;
}

.kp img {
  display: block;
  max-width: 100%;
}

.kp a:focus-visible,
.kp .ogency-btn:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 3px;
}

/* Gemeinsame Typografie ------------------------------------------------- */
.kp-h2 {
  margin: 18px 0 0;
  max-width: 17ch;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.kp-text {
  max-width: 54ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.kp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.kp-meta span {
  padding: 5px 10px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kp-meta span:first-child {
  border-color: rgba(var(--g-rgb), .6);
  color: var(--g);
}

.kp-link {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--g);
  color: var(--ogency-white);
  font-weight: 700;
  transition: color .3s ease;
}

.kp-link:hover,
.kp-link:focus-visible {
  color: var(--g);
}

.kp-verdict {
  margin: 26px 0 32px;
  padding-left: 16px;
  border-left: 2px solid var(--g);
  color: var(--ogency-white);
  font-weight: 600;
  line-height: 1.65;
}

/* Headline steigt aus der eigenen Box */
.kp--live .kp-rise {
  transition: clip-path 1000ms var(--ease), translate 1000ms var(--ease);
}

.kp--live .kp-rise:not(.is-in) {
  clip-path: inset(0 0 100% 0);
  translate: 0 .4em;
}

/* Seitenkopf: Pfadnavigation und Ladeablauf --------------------------- */
.kp-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  color: var(--quiet);
  font-size: 14px;
}

.kp-crumbs li + li::before {
  content: "›";
  margin-right: 10px;
  color: var(--g);
}

.kp-crumbs a {
  color: var(--muted);
  transition: color .3s ease;
}

.kp-crumbs a:hover,
.kp-crumbs a:focus-visible {
  color: var(--g);
}

.kp--live .kp-load {
  transition: opacity 800ms var(--ease-out), transform 1100ms var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}

.kp--live .kc-intro:not(.is-in) .kp-load {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

/* Kapitel ------------------------------------------------------------- */
/* Case 02: Autozentrum Kiener (signature project) ---------------------------
   Five chapters: layered device stage, sticky story with screen wipes,
   mobile.de sync, admin screenshots with highlights, animated results.
   Motion: --par (−1…1, from the shared spread spring) drives the gentle
   tilt and depth; reveals use the [data-kp-reveal] observer in case-study.js. */
.kp-body {
  border-top: 1px solid var(--line);
  background: var(--ink);
}

/* Browser and phone mockups */
.kc-browser {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 3px;
  background: var(--ink2);
  box-shadow: 0 50px 90px -40px #000, inset 0 1px 0 rgba(var(--g-rgb), .16);
}

.kc-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: #17181b;
}

.kc-browser__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

.kc-browser__url {
  overflow: hidden;
  min-width: 0;
  max-width: 60%;
  margin: 0 auto;
  padding: 3px 14px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .06);
  color: var(--quiet);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-14px);
}

.kc-browser__screen {
  position: relative;
  overflow: hidden;
}

.kc-browser__screen img {
  width: 100%;
  height: auto;
}

.kc-phone {
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 26px;
  background: #0c0d0f;
  box-shadow: 0 50px 80px -30px #000, inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.kc-phone img {
  width: 100%;
  height: auto;
  border-radius: 19px;
}

/* 1. Intro ---------------------------------------------------------------- */
.kc-intro {
  padding: 138px 0 clamp(110px, 12vw, 180px);
  overflow: clip;
}

.kc-intro__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: clamp(32px, 6vw, 96px);
}

.kc-title {
  max-width: 13ch;
  margin: 22px 0 0;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.kc-intro__side .kp-text {
  margin: 0 0 22px;
}

.kc-stage {
  --par: 0;
  margin-top: clamp(56px, 7vw, 100px);
}

.kc-stage__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 6% 15px 0;
}

.kc-stage__front {
  position: relative;
  z-index: 2;
  width: 72%;
  /* Own perspective per layer keeps z-index stacking intact. */
  transform:
    perspective(2200px)
    rotateX(calc(var(--par) * 7deg))
    rotateY(calc(var(--par) * -5deg))
    translate3d(0, calc(var(--par) * -12px), 0);
  transform-origin: 50% 100%;
}

.kc-stage__back {
  position: absolute;
  top: 0;
  right: 15px;
  z-index: 1;
  width: 48%;
  opacity: .6;
  transform:
    perspective(2200px)
    rotateX(calc(var(--par) * 7deg))
    rotateY(calc(var(--par) * -5deg))
    translate3d(0, calc(var(--par) * 22px), 0);
}

.kc-stage__phone {
  position: absolute;
  right: 9%;
  bottom: -9%;
  z-index: 3;
  width: 17%;
  transform: translate3d(0, calc(var(--par) * -26px), 0) rotate(calc(var(--par) * 2deg));
}

.kp--live .kc-stage [data-kp-reveal] {
  transition: opacity 1000ms var(--ease-out), translate 1300ms var(--ease);
}

.kp--live .kc-stage__front { transition-delay: 0ms; }
.kp--live .kc-stage__back { transition-delay: 160ms; }
.kp--live .kc-stage__phone { transition-delay: 380ms; }

.kp--live .kc-stage [data-kp-reveal]:not(.is-in) {
  opacity: 0;
  translate: 0 70px;
}

.kp--live .kc-stage__back:not(.is-in) {
  translate: 0 110px;
}

/* 2. Story: sticky browser + steps --------------------------------------- */
.kc-story {
  padding: 0 0 clamp(80px, 10vw, 140px);
}

.kc-story__grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(40px, 6vw, 96px);
}

.kc-story__visual {
  order: 2;
}

.kc-story__sticky {
  position: sticky;
  top: max(110px, calc(50vh - 260px));
}

.kc-screens {
  aspect-ratio: 1440 / 900;
}

.kc-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: top;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 900ms var(--ease);
}

.kc-screen.is-active {
  z-index: 1;
  clip-path: inset(0 0 0 0);
}

.kc-screen.is-leaving {
  clip-path: inset(0 0 0 0);
}

.kc-story__progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
}

.kc-story__progress span {
  height: 2px;
  background: var(--line-strong);
  transition: background-color .5s ease;
}

.kc-story__progress span.is-on {
  background: var(--g);
}

.kc-story__head {
  padding-top: clamp(20px, 4vw, 60px);
}

.kc-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 68vh;
  padding: 40px 0;
  opacity: .32;
  transition: opacity .6s ease;
}

.kc-step.is-active {
  opacity: 1;
}

.kp:not(.kp--live) .kc-step {
  opacity: 1;
}

.kc-step__title {
  position: relative;
  margin: 0;
  padding-left: 22px;
  color: var(--ogency-white);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.kc-step__title::before {
  content: "";
  position: absolute;
  top: .35em;
  bottom: .2em;
  left: 0;
  width: 2px;
  background: var(--g);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s var(--ease);
}

.kc-step.is-active .kc-step__title::before {
  transform: scaleY(1);
}

.kc-step__text {
  max-width: 46ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

/* Portal vs. own website */
.kc-compare {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}

.kc-compare th,
.kc-compare td {
  padding: 12px 10px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.kc-compare thead th {
  color: var(--quiet);
  font-size: 12px;
  font-weight: 700;
}

.kc-compare thead th:last-child {
  color: var(--g);
}

.kc-compare tbody th {
  width: 22%;
  color: var(--quiet);
  font-weight: 600;
}

.kc-compare tbody td {
  color: var(--quiet);
}

.kc-compare tbody td:last-child {
  color: var(--ogency-white);
  font-weight: 600;
}

/* 3. mobile.de sync ------------------------------------------------------- */
/* One real mobile.de record turns into the detail page. On large screens
   the chapter is pinned and the scroll progress (springs.sync) draws one
   gold wire per field, lights the field on the page and fills the status
   track. Smaller screens play the same sequence once on reveal. */
.kc-sync {
  position: relative;
  padding: clamp(100px, 12vw, 170px) 0;
  border-top: 1px solid var(--line);
  background: var(--ink2);
}

.kc-sync--pin {
  height: 180vh;
  padding: 0;
}

.kc-sync--pin .kc-sync__pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 84px 0 28px;
}

.kc-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, .38fr) minmax(0, .86fr);
  align-items: end;
}

.kc-map__source {
  grid-column: 1;
}

.kc-sync__title {
  max-width: 20ch;
  font-size: clamp(30px, 3vw, 46px);
}

.kc-sync__lead {
  max-width: 46ch;
  margin: 14px 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* Raw record */
.kc-record {
  border: 1px solid var(--line-strong);
  background: var(--ink);
}

.kc-record__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--quiet);
  font-size: 12px;
  font-weight: 600;
}

.kc-record__head span:first-child {
  color: var(--ogency-white);
}

.kc-record__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-record__rows li {
  position: relative;
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  gap: 12px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 13.5px;
  line-height: 1.4;
  transition: background-color .45s ease;
}

.kc-record__rows span {
  color: var(--quiet);
  transition: color .45s ease;
}

.kc-record__rows b {
  overflow: hidden;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .45s ease;
}

/* Port where the wire leaves the row */
.kc-record__rows li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border: 1px solid rgba(var(--g-rgb), .55);
  background: var(--ink);
  transform: rotate(45deg);
  transition: background-color .45s ease, border-color .45s ease;
}

.kc-record__rows li.is-on {
  background: rgba(var(--g-rgb), .06);
}

.kc-record__rows li.is-on span {
  color: var(--g);
}

.kc-record__rows li.is-on b {
  color: var(--ogency-white);
}

.kc-record__rows li.is-on::after {
  border-color: var(--g);
  background: var(--g);
}

.kc-record__note {
  margin: 0;
  padding: 10px 18px;
  color: var(--quiet);
  font-size: 12px;
}

/* Wires between record and page */
.kc-map__wires {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.kc-wire {
  fill: none;
  stroke-width: 1.5;
}

.kc-wire--base {
  stroke: rgba(255, 255, 255, .1);
}

.kc-wire--live {
  stroke: var(--g);
}

.kc-wire-end {
  fill: var(--g);
  transition: opacity .3s ease;
}

/* Target: the real detail page card */
.kc-map__target {
  grid-column: 3;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  justify-self: end;
}

.kc-hit {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border: 2px solid var(--g);
  border-radius: 7px;
  background: rgba(var(--g-rgb), .1);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .45s ease, transform .55s var(--ease);
}

.kc-hit.is-on {
  opacity: 1;
  transform: none;
}

/* Status track with the real sync values */
.kc-status {
  margin-top: clamp(24px, 3.5vh, 44px);
}

.kc-status__track {
  position: relative;
  height: 2px;
  background: var(--line-strong);
}

.kc-status__track i {
  position: absolute;
  inset: 0;
  background: var(--g);
  transform: scaleX(var(--done, 1));
  transform-origin: 0 50%;
}

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

.kc-status__items > div {
  padding-top: 12px;
  transition: opacity .5s ease;
}

.kp--live .kc-status__items > div:not(.is-on) {
  opacity: .35;
}

.kc-status__items dt {
  color: var(--quiet);
  font-size: 13px;
  font-weight: 500;
}

.kc-status__items dd {
  margin: 4px 0 0;
  color: var(--ogency-white);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.kc-status__items > div.is-on dd {
  color: var(--g);
}

.kc-status__note {
  max-width: 70ch;
  margin: 14px 0 0;
  color: var(--quiet);
  font-size: 12px;
  line-height: 1.6;
}

/* Short desktop windows: keep the pinned chapter inside the viewport. */
@media (min-width: 992px) and (max-height: 820px) {
  .kc-sync--pin .kc-sync__lead,
  .kc-sync--pin .kc-record__note,
  .kc-sync--pin .kc-status__note {
    display: none;
  }

  .kc-sync--pin .kc-sync__title {
    margin-bottom: 20px;
  }

  .kc-sync--pin .kc-map__target {
    max-width: 380px;
  }
}

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

  .kc-map__wires {
    display: none;
  }

  .kc-record__rows li::after {
    display: none;
  }

  .kc-map__target {
    grid-column: 1;
    justify-self: start;
    margin-top: 28px;
  }
}

@media (max-width: 575px) {
  .kc-record__rows li {
    grid-template-columns: 46% minmax(0, 1fr);
    padding: 8px 14px;
    font-size: 12.5px;
  }

  .kc-record__head,
  .kc-record__note {
    padding-right: 14px;
    padding-left: 14px;
  }

  .kc-status__items {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .kc-status__items > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .kc-status__items dd {
    margin: 0;
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kc-hit,
  .kc-record__rows li,
  .kc-record__rows li::after {
    transition: none;
  }
}


/* 4. Admin ---------------------------------------------------------------- */
.kc-admin {
  --par: 0;
  padding: clamp(100px, 12vw, 170px) 0 clamp(90px, 10vw, 140px);
  overflow: clip;
}

.kc-admin__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(32px, 6vw, 96px);
}

.kc-admin__head .kp-text {
  margin: 0;
}

.kc-admin__stage {
  position: relative;
  margin-top: clamp(64px, 8vw, 110px);
  padding: 9% 0 12%;
}

.kc-admin__main {
  position: relative;
  z-index: 2;
  width: 76%;
  margin-left: 8%;
}

.kc-admin__dash {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 42%;
  opacity: .5;
  transform: translate3d(0, calc(var(--par) * 18px), 0);
}

.kc-admin__chart {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 40%;
  transform: translate3d(0, calc(var(--par) * -22px), 0);
}

.kp--live .kc-admin__stage [data-kp-reveal] {
  transition: opacity 1000ms var(--ease-out), translate 1300ms var(--ease);
}

.kp--live .kc-admin__main { transition-delay: 0ms; }
.kp--live .kc-admin__dash { transition-delay: 200ms; }
.kp--live .kc-admin__chart { transition-delay: 420ms; }

.kp--live .kc-admin__stage [data-kp-reveal]:not(.is-in) {
  opacity: 0;
  translate: 0 60px;
}

/* Highlight: gold frame around the chosen figure, the rest dims. */
.kc-spot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border: 2px solid var(--g);
  border-radius: 3px;
  box-shadow: 0 0 0 200vmax rgba(5, 5, 6, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

[data-spot="0"] .kc-spot[data-spot="0"],
[data-spot="1"] .kc-spot[data-spot="1"],
[data-spot="2"] .kc-spot[data-spot="2"],
[data-spot="3"] .kc-spot[data-spot="3"] {
  opacity: 1;
}

.kc-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.kc-legend__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  background: none;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: border-color .4s ease, color .4s ease;
}

.kc-legend__btn strong {
  display: block;
  color: var(--ogency-white);
  font-size: 17px;
  font-weight: 700;
}

.kc-legend__btn span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.kc-legend__btn:hover,
.kc-legend__btn.is-active {
  border-top-color: var(--g);
}

.kc-legend__btn.is-active strong {
  color: var(--g);
}

.kc-legend__btn:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 4px;
}

/* 5. Results -------------------------------------------------------------- */
.kc-results {
  padding: clamp(100px, 12vw, 170px) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 15% 100%, rgba(var(--g-rgb), .08), transparent 70%),
    var(--ink);
}

.kc-figures {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  margin: clamp(48px, 6vw, 80px) 0 0;
  border-top: 1px solid var(--line-strong);
}

.kc-figure {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 30px 28px 0 0;
}

.kc-figure + .kc-figure {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.kc-figure dd {
  margin: 0;
}

.kc-figure__num {
  display: block;
  color: var(--ogency-white);
  font-size: clamp(56px, 6vw, 96px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}

.kc-figure--lead .kc-figure__num {
  color: var(--g);
  font-size: clamp(76px, 10vw, 156px);
}

.kc-figure dt {
  max-width: 24ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.kc-results .kp-verdict {
  max-width: 62ch;
  margin-top: clamp(40px, 5vw, 64px);
}

.kc-results__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 991px) {
  .kc-intro__head,
  .kc-admin__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .kc-stage__front {
    width: 86%;
  }

  .kc-stage__back {
    width: 56%;
  }

  .kc-stage__phone {
    right: 4%;
    width: 24%;
  }

  /* Story: the browser sticks to the top, the steps scroll beneath it. */
  .kc-story__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .kc-story__visual {
    order: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -15px;
    padding: 12px 15px 14px;
    background: linear-gradient(180deg, var(--ink) 88%, rgba(5, 5, 6, 0));
  }

  .kc-story__sticky {
    position: static;
    max-width: 560px;
    margin: 0 auto;
  }

  .kc-story__progress {
    margin-top: 10px;
  }

  /* Heading first, then the sticky browser, then the steps. */
  .kc-story__steps {
    display: contents;
  }

  .kc-story__head {
    order: -1;
    padding: 8px 0 28px;
  }

  .kc-step {
    order: 1;
  }

  .kc-step {
    min-height: 0;
    padding: 36px 0 44px;
  }

  .kc-admin__main {
    width: 88%;
    margin-left: 0;
  }

  .kc-admin__chart {
    width: 52%;
  }

  .kc-admin__dash {
    display: none;
  }

  .kc-admin__stage {
    padding-top: 0;
  }

  .kc-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
  }

  .kc-legend li {
    margin-bottom: 18px;
  }

  .kc-figures {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .kc-figure--lead {
    grid-column: 1 / -1;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line);
  }

  .kc-figure--lead + .kc-figure {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 767px) {

  .kc-browser__bar {
    height: 22px;
    gap: 4px;
    padding: 0 8px;
  }

  .kc-browser__bar i {
    width: 6px;
    height: 6px;
  }

  .kc-browser__url {
    padding: 1px 10px;
    font-size: 9px;
  }

  .kc-phone {
    padding: 5px;
    border-radius: 16px;
  }

  .kc-phone img {
    border-radius: 12px;
  }

  .kc-step {
    padding: 28px 0 36px;
  }

  .kc-compare tbody th {
    width: 26%;
  }

  .kc-admin__main {
    width: 100%;
  }

  .kc-admin__chart {
    width: 62%;
  }

  .kc-admin__stage {
    padding-bottom: 30%;
  }

  .kc-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .kc-legend li {
    margin-bottom: 0;
  }

  .kc-legend__btn {
    padding: 14px 0 14px;
  }

  .kc-legend__btn span {
    font-size: 13px;
  }
}

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

  .kc-figure + .kc-figure {
    padding-left: 0;
    border-left: 0;
  }

  .kc-figure {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
  }
}

/* Phones: section rhythm like the rest of the page (76px), calmer motion.
   No tilt or depth parallax on the mockups, shorter reveal travel. */
@media (max-width: 767px) {
  .kc-intro {
    padding: 124px 0 84px;
  }

  .kc-intro__head {
    gap: 22px;
  }

  .kc-intro__head .kp-meta span:nth-child(3) {
    display: none;
  }

  .kc-intro__side .kp-text {
    margin-bottom: 18px;
  }

  .kc-stage {
    margin-top: 44px;
  }

  .kc-stage__front,
  .kc-stage__back,
  .kc-admin__dash,
  .kc-admin__chart {
    transform: none;
  }

  .kc-stage__phone {
    transform: none;
  }

  .kp--live .kc-stage [data-kp-reveal]:not(.is-in),
  .kp--live .kc-stage__back:not(.is-in),
  .kp--live .kc-admin__stage [data-kp-reveal]:not(.is-in) {
    translate: 0 28px;
  }

  .kp--live .kc-stage [data-kp-reveal],
  .kp--live .kc-admin__stage [data-kp-reveal] {
    transition-duration: 700ms, 900ms;
  }

  .kc-story {
    padding-bottom: 56px;
  }

  .kc-story__head {
    padding-bottom: 20px;
  }

  .kc-step__title {
    font-size: 21px;
  }

  .kc-step__text {
    font-size: 15px;
    line-height: 1.7;
  }

  .kc-compare {
    margin-top: 20px;
    font-size: 13px;
  }

  .kc-sync,
  .kc-results {
    padding: 76px 0;
  }

  .kc-sync__lead {
    margin: 12px 0 20px;
  }

  .kc-map__target {
    margin-top: 22px;
  }

  .kc-status {
    margin-top: 28px;
  }

  .kc-admin {
    padding: 76px 0 64px;
  }

  .kc-admin__head {
    gap: 16px;
  }

  .kc-admin__stage {
    margin-top: 36px;
  }

  .kc-legend {
    margin-top: 16px;
  }

  .kc-figures {
    margin-top: 32px;
  }

  .kc-figure {
    padding-top: 22px;
  }

  .kc-results .kp-verdict {
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kc-stage__front,
  .kc-stage__back,
  .kc-stage__phone,
  .kc-admin__dash,
  .kc-admin__chart {
    transform: none;
  }

  .kc-screen {
    transition: none;
  }
}

/* Weitere Referenzen und Abschluss ----------------------------------- */
.kc-more {
  padding: clamp(90px, 10vw, 140px) 0;
  border-top: 1px solid var(--line);
  background: var(--ink2);
}

.kc-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.kc-more__title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.kc-more__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-more__card {
  display: block;
  color: var(--ogency-white);
}

.kc-more__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 60%, #1d1f23, #0b0c0e 75%);
}

.kc-more__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 900ms var(--ease);
}

.kc-more__media--cover img {
  object-fit: cover;
}

.kc-more__label {
  display: block;
  margin-top: 20px;
  color: var(--g);
  font-size: 14px;
  font-weight: 700;
}

.kc-more__name {
  display: block;
  margin-top: 6px;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  transition: color .3s ease;
}

.kc-more__result {
  display: block;
  max-width: 44ch;
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.kc-more__card:hover .kc-more__media img,
.kc-more__card:focus-visible .kc-more__media img {
  transform: scale(1.04);
}

.kc-more__card:hover .kc-more__name,
.kc-more__card:focus-visible .kc-more__name {
  color: var(--g);
}

.kc-cta {
  padding: clamp(90px, 10vw, 140px) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 70% at 80% 40%, rgba(var(--g-rgb), .07), transparent 70%),
    var(--ink);
}

.kc-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}

.kc-cta__title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.kc-cta__side .kp-text {
  margin: 0;
}

.kc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 30px;
}

@media (max-width: 991px) {
  .kc-more__grid,
  .kc-cta__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .kc-more__card {
    max-width: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp * {
    transition: none !important;
  }
}