/* ==========================================================================
   Prozess – ein Project Canvas, in dem der Auftritt entsteht
   --pt: 0 = Stone (Übergang aus Leistungen), 1 = Dark
   ========================================================================== */

.process {
  --pt: 1;
  --p-fg: color-mix(in srgb, var(--c-ivory) calc(var(--pt) * 100%), var(--c-ink));
  --p-muted: color-mix(in srgb, var(--c-muted) calc(var(--pt) * 100%), var(--c-muted-on-stone));
  --p-line: color-mix(in srgb, rgb(245 243 238 / 0.14) calc(var(--pt) * 100%), rgb(24 24 23 / 0.2));
  position: relative;
  background-color: color-mix(in srgb, var(--c-dark) calc(var(--pt) * 100%), var(--c-stone));
  color: var(--p-fg);
  padding-top: clamp(6rem, 4rem + 8vw, 11rem);
}
.process .kicker { color: var(--p-muted); }

.process__title {
  margin-top: 1.75rem;
  max-width: 13em;
}
.process__title > span { display: block; }
.process__lead {
  margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  color: var(--p-muted);
}
.process .marker {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  color: var(--p-muted);
}
.process .marker__sep { color: var(--c-champagne); }

/* ---------- Bühne ---------- */

.process__stage {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}

.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}

.canvas-col {
  position: sticky;
  top: calc(50svh - min(18vw, 16rem));
  z-index: 2;
  aspect-ratio: 16 / 10.4;
  width: 100%;
}

.canvas {
  --cv-line: rgb(245 243 238 / 0.34);
  position: absolute;
  inset: 0;
  margin-inline: auto;
  container-type: inline-size;
  border: 1px solid var(--cv-line);
  border-radius: 6px;
  background: rgb(26 25 23 / 0.6);
  overflow: hidden;
}

.canvas__chrome {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7%;
  display: flex;
  align-items: center;
  gap: 3%;
  padding-inline: 2.4%;
  border-bottom: 1px solid var(--cv-line);
}
.canvas__dots { display: flex; gap: 6px; }
.canvas__dots i { width: 14px; height: 1px; background: var(--cv-line); }
.canvas__url {
  flex: 0 1 34%;
  height: 42%;
  border: 1px solid rgb(245 243 238 / 0.16);
  border-radius: 999px;
}
.canvas__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(0.5625rem, 1.4cqi, 0.75rem);
  font-weight: 500;
  font-stretch: 115%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-champagne);
  opacity: 0;
}
.canvas__status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-champagne);
  box-shadow: 0 0 0 3px rgb(197 154 118 / 0.18);
}

/* Grundriss-Linien (Anschluss an die Leistungs-Section) */
.canvas__planlines { position: absolute; inset: 0; pointer-events: none; }
.canvas__planlines i { position: absolute; background: var(--cv-line); }
.canvas__planlines i:nth-child(1) { left: 42%; top: 0; bottom: 0; width: 1px; }
.canvas__planlines i:nth-child(2) { left: 0; width: 42%; top: 58%; height: 1px; }
.canvas__planlines i:nth-child(3) { left: 42%; right: 0; top: 38%; height: 1px; }

.canvas__view {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 7%;
  overflow: hidden;
}

/* 01 – bestehende Website, monochrom */
.old { position: absolute; inset: 0; }
.old > span { position: absolute; background: rgb(245 243 238 / 0.1); }
.old__nav { left: 6%; right: 6%; top: 6%; height: 4%; }
.old__hero { left: 22%; right: 22%; top: 22%; height: 18%; }
.old__line--a { left: 36%; right: 36%; top: 47%; height: 3%; }
.old__line--b { left: 42%; right: 42%; top: 53%; height: 3%; }
.old__box { top: 68%; height: 22%; width: 26%; }
.old__box:nth-of-type(5) { left: 6%; }
.old__box:nth-of-type(6) { left: 37%; }
.old__box:nth-of-type(7) { left: 68%; }

.marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.marks ellipse,
.marks path { fill: none; stroke: var(--c-champagne); stroke-width: 1; vector-effect: non-scaling-stroke; }
.marks .marks__dash { stroke: rgb(197 154 118 / 0.5); stroke-dasharray: 4 6; }

.node {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  display: grid;
  place-items: center;
  min-width: 9.5em;
  padding: 0.7em 1.1em;
  /* Zentrierung übernimmt GSAP (xPercent/yPercent), damit sie sich nicht mit
     animierten Transforms beißt */
  font-size: clamp(0.5rem, 1.25cqi, 0.6875rem);
  font-weight: 500;
  font-stretch: 115%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}
.node::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(245 243 238 / 0.4);
  opacity: 0;
}
.node b { grid-area: 1 / 1; font-weight: inherit; }
.node__a { color: var(--c-champagne); }
.node__b { color: var(--c-ivory); opacity: 0; }

.sitemap { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sitemap path { fill: none; stroke: rgb(245 243 238 / 0.4); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* 03 – gestaltetes Interface */
.ui { position: absolute; inset: 0; }
.ui__grid {
  position: absolute;
  inset: 0 5%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.6%;
  opacity: 0;
}
.ui__grid i { background: rgb(197 154 118 / 0.06); border-inline: 1px solid rgb(197 154 118 / 0.14); }

.ui__wire { position: absolute; inset: 0; opacity: 0; }
.ui__wire > span { position: absolute; border: 1px dashed rgb(245 243 238 / 0.32); }
.ui__wire-nav { left: 5%; right: 5%; top: 5%; height: 6%; }
.ui__wire-h { left: 5%; top: 24%; width: 40%; height: 22%; }
.ui__wire-p { left: 5%; top: 50%; width: 34%; height: 9%; }
.ui__wire-img { right: 5%; top: 20%; width: 36%; aspect-ratio: 1; }
.ui__wire-cta { left: 5%; top: 66%; width: 18%; height: 8%; border-radius: 999px; }

.ui__surface {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 76% at 76% 44%, rgb(24 63 106 / 0.85), rgb(9 42 91 / 0) 72%),
    radial-gradient(40% 50% at 30% 80%, rgb(172 124 80 / 0.22), rgb(172 124 80 / 0) 70%),
    #0a1728;
  opacity: 0;
}

.ui__nav {
  position: absolute;
  left: 5%; right: 5%; top: 5%;
  height: 6%;
  display: flex;
  align-items: center;
  gap: 4%;
  opacity: 0;
}
.ui__nav b {
  margin-right: auto;
  font-size: clamp(0.5rem, 1.5cqi, 0.8125rem);
  font-weight: 600;
  font-stretch: 115%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ivory);
}
.ui__nav span { width: 7%; height: 1px; background: rgb(245 243 238 / 0.5); }
.ui__navcta { width: 11%; height: 55%; border-radius: 999px; border: 1px solid rgb(245 243 238 / 0.4); }

.ui__copy {
  position: absolute;
  left: 5%; top: 24%;
  width: 42%;
  display: flex;
  flex-direction: column;
  gap: 0.9cqi;
  opacity: 0;
}
.ui__kicker {
  font-size: clamp(0.4375rem, 1.1cqi, 0.625rem);
  font-weight: 500;
  font-stretch: 115%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d8b184;
}
.ui__h {
  font-size: 4.6cqi;
  font-weight: 500;
  font-stretch: 86%;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--c-ivory);
}
.ui__p { display: block; height: 1px; width: 88%; margin-top: 1.2cqi; background: rgb(245 243 238 / 0.36); }
.ui__p--short { width: 60%; margin-top: 0.4cqi; }

.ui__img {
  position: absolute;
  right: 5%; top: 20%;
  width: 36%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(80% 70% at 50% 70%, #123152, #08111d);
  opacity: 0;
}
.ui__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui__cta {
  position: absolute;
  left: 5%; top: 66%;
  padding: 0.95cqi 1.9cqi;
  border-radius: 999px;
  background: #c99a63;
  color: var(--c-dark);
  font-size: clamp(0.4375rem, 1.3cqi, 0.75rem);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.ui__cta.is-hover {
  background: #dcb18a;
  box-shadow: 0 6px 22px -8px rgb(216 177 132 / 0.6);
}

.ui__details {
  position: absolute;
  left: 5%; right: 5%; bottom: 7%;
  height: 8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4%;
  opacity: 0;
}
.ui__details i { border-top: 1px solid rgb(245 243 238 / 0.22); }
.ui__rule {
  position: absolute;
  left: 0; top: -1px;
  width: 30%;
  height: 1px;
  background: #d8b184;
}

/* schmale Canvas-Breite (Tablet/Mobile-Zustand in Phase 04) */
@container (max-width: 440px) {
  .ui__copy { width: 54%; top: 15%; }
  .ui__h { font-size: 5.8cqi; }
  .ui__img { right: 5%; left: auto; width: 38%; top: 40%; height: auto; }
  .ui__cta { top: 58%; font-size: 2.6cqi; padding: 2cqi 4cqi; }
  .ui__nav span { display: none; }
  .ui__nav b { font-size: 3cqi; }
  .ui__navcta { width: 16%; }
  .ui__details { display: none; }
  .canvas__url { display: none; }
}

.canvas__sweep {
  position: absolute;
  /* deutlich höher als der Rahmen: die schrägen Enden werden außerhalb beschnitten */
  inset: -70% auto -70% 0;
  width: 52%;
  background: linear-gradient(104deg,
    rgb(230 199 168 / 0) 0%,
    rgb(230 199 168 / 0.02) 14%,
    rgb(230 199 168 / 0.06) 28%,
    rgb(230 199 168 / 0.12) 42%,
    rgb(233 205 176 / 0.15) 50%,
    rgb(197 154 118 / 0.11) 60%,
    rgb(197 154 118 / 0.05) 74%,
    rgb(197 154 118 / 0.015) 86%,
    rgb(197 154 118 / 0) 100%);
  filter: blur(10px);
  transform: translateX(-115%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------- Schritte ---------- */

.steps {
  position: relative;
  z-index: 1;
}
.step {
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2rem;
  transition: opacity 0.5s ease;
}
.step__count {
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 115%;
  letter-spacing: 0.2em;
  color: var(--c-champagne);
  font-variant-numeric: tabular-nums;
}
.step__title {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 1.2rem + 2.8vw, 4rem);
  font-weight: 450;
  font-stretch: 90%;
  line-height: 1;
  letter-spacing: -0.03em;
}
.step__text {
  margin-top: 1.4rem;
  max-width: 26rem;
  color: rgb(245 243 238 / 0.72);
  text-wrap: pretty;
}
.step__tags {
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(245 243 238 / 0.14);
  max-width: 26rem;
  font-size: 0.6875rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Live-Modus Desktop: Bühne gepinnt, Schritte laufen im Viewport durch */
.process__stage.is-live .process__grid {
  height: 100svh;
  align-items: center;
}
.process__stage.is-live .canvas-col { position: relative; top: auto; }
.process__stage.is-live .steps-mask {
  height: 100svh;
  overflow: hidden;
}
.process__stage.is-live .step { min-height: 0; height: 100svh; opacity: 0.18; }
.process__intro.is-slide {
  width: auto;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--header-h);
}
.process__intro.is-slide .process__title { font-size: clamp(2.25rem, 1rem + 2.6vw, 3.75rem); }
.process__intro.is-slide .process__lead { font-size: 1.0625rem; }
.process__stage.is-live { margin-top: 0; }
.process__stage.is-live .step.is-active { opacity: 1; }

/* ---------- Abschluss ---------- */

.process__next {
  padding-block: clamp(7rem, 16svh, 11rem) var(--space-section-tight);
  text-align: center;
}
.process__next .kicker { color: var(--c-champagne); }
.process__next-title {
  margin: 1.75rem auto 0;
  max-width: 14em;
  font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem);
  font-weight: 450;
  font-stretch: 92%;
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.process__next .cta-stack { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

/* Ghost-Rahmen für den Übergang Leistungen → Prozess */
.frame-ghost {
  position: fixed;
  left: 0; top: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid var(--ghost-line, rgb(24 24 23 / 0.62));
  border-radius: 0;
  visibility: hidden;
  display: none;
  will-change: transform, width, height;
}
.frame-ghost__lines i { position: absolute; background: var(--ghost-line, rgb(24 24 23 / 0.62)); }
.frame-ghost__lines i:nth-child(1) { left: 42%; top: 0; bottom: 0; width: 1px; }
.frame-ghost__lines i:nth-child(2) { left: 0; width: 42%; top: 58%; height: 1px; }
.frame-ghost__lines i:nth-child(3) { left: 42%; right: 0; top: 38%; height: 1px; }
.frame-ghost__bar { position: absolute; left: 0; right: 0; top: 7%; height: 1px; background: var(--ghost-line); opacity: 0; }

@media (max-width: 860px) {
  .process__grid { grid-template-columns: 1fr; gap: 0; }
  .canvas-col {
    top: calc(var(--header-top) + var(--header-h) + 0.75rem);
    aspect-ratio: auto;
    height: 34svh;
    background: var(--c-dark);
  }
  .canvas-col::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    height: calc(var(--header-top) + var(--header-h) + 0.75rem);
    background: var(--c-dark);
  }
  .canvas-col::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 4.5rem;
    background: linear-gradient(to bottom, var(--c-dark) 30%, rgb(17 17 16 / 0));
    pointer-events: none;
  }
  .canvas { width: 100%; }
  .step { min-height: 52svh; padding-block: 2.5rem; justify-content: center; }
  .step__title { font-size: 2rem; }
  .process__stage { margin-top: 2.5rem; }
  .process__intro .marker { margin-top: 2rem; }
}

/* Ohne Animation (reduzierte Bewegung / kein JS): fertiges Interface zeigen */
html:not(.motion) .canvas :is(.old, .marks, .node, .sitemap, .canvas__planlines, .ui__grid, .ui__wire) { display: none; }
html:not(.motion) .canvas :is(.ui__surface, .ui__nav, .ui__copy, .ui__img, .ui__cta, .ui__details, .canvas__status) { opacity: 1; }