@font-face {
  font-family: N27;
  src: url("/n27/n27-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: N27;
  src: url("/n27/n27-medium-webfont.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: N27;
  src: url("/n27/n27-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --z-surface-primary: var(--color-surface, #f8f8f5);
  --z-surface-secondary: var(--color-panel, #fffcf7);
  --z-text-primary: var(--color-text, #20201f);
  --z-text-secondary: var(--color-muted, #5c5c59);
  --z-accent-primary: var(--color-sapphire, #004cd0);
  --z-accent-benefit: var(--color-gold, #ffb300);
}

html[data-theme="dark"] {
  --z-surface-primary: var(--color-surface, #111110);
  --z-surface-secondary: var(--color-panel, #2a2a28);
  --z-text-primary: var(--color-text, #f8f8f5);
  --z-text-secondary: var(--color-muted, #c4c4be);
  --z-accent-primary: var(--color-link, #7aa6ff);
  --z-accent-benefit: var(--color-gold, #ffb300);
}

.process-demo-page {
  margin: 0;
  background: var(--z-surface-primary);
  color: var(--z-text-primary);
  font-family: N27, Arial, sans-serif;
}

.process {
  max-width: var(--z-content-max, 80rem);
  margin: 0 auto;
  padding: clamp(6.5rem, 14vw, 11rem) clamp(1.25rem, 3.4vw, 3.5rem);
  background: var(--z-surface-primary);
  color: var(--z-text-primary);
}

.process-kicker {
  margin: 0 0 1.1rem;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--z-text-secondary);
}

.process-title,
.z-shell .process-title,
.z-shell h2.process-title {
  margin: 0 0 clamp(3.6rem, 7vw, 6rem);
  max-width: 14ch;
  font-size: clamp(72px, 7vw, 136px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.04em;
  color: var(--z-text-primary);
}

.process .z-land-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-inline: 0;
}
.process-scroller {
  outline: none;
}
.process-scroller:focus-visible {
  box-shadow: inset 0 0 0 2px var(--z-accent-primary);
}

.process-track {
  display: grid;
  gap: 2.4rem;
}

.process-steps,
.process-groups {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}

.process-step {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
}

.process-step-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2rem;
  margin-bottom: .85rem;
}

.process-number {
  color: var(--z-accent-primary);
  font-size: clamp(26px, 1.7vw, 32px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.process-icon,
.process-step-title,
.z-shell .process-step-title {
  color: var(--z-text-primary);
}
.process-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.process-next {
  position: absolute;
  top: .35rem;
  right: -16px;
  color: var(--z-accent-primary);
  font-size: 1.05rem;
  line-height: 1;
}

.process-step-title,
.z-shell .process-step-title {
  margin: 0 0 1rem;
  min-height: 3.2em;
  max-width: none;
  font-size: clamp(24px, 1.55vw, 30px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.process-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 0 0 1rem;
  background: var(--z-surface-secondary);
}

.process-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.process-step-text {
  margin: 0;
  font-size: clamp(16px, 1.05vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--z-text-secondary);
}

.process-step-group {
  display: none;
  margin: .85rem 0 0;
  color: var(--z-accent-primary);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.process-step[data-group="nutzen"] .process-step-group {
  color: var(--z-accent-benefit);
}

.process-step.is-outcome .process-image {
  border-bottom: 2px solid var(--z-accent-benefit);
}

.process-group {
  display: grid;
  justify-items: center;
  gap: .55rem;
  padding-top: .15rem;
}
.process-group::before {
  content: "";
  display: block;
  width: 100%;
  height: 9px;
  border: 1px solid var(--z-accent-primary);
  border-bottom: 0;
}
.process-group span {
  color: var(--z-accent-primary);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.process-group.is-gold::before { border-color: var(--z-accent-benefit); }
.process-group.is-gold span { color: var(--z-accent-benefit); }

@media (max-width: 1279px) {
  .process {
    padding-inline: 0 0;
    padding-block: 2.4rem 3.5rem;
  }
  .process-kicker,
  .process-title,
  .process .z-land-cta {
    padding-inline: 1.25rem;
  }
  .process-title {
    font-size: clamp(52px, 11vw, 88px);
    margin-bottom: 2rem;
  }
  .process-scroller {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    padding-inline: 1.25rem 1.5rem;
    scrollbar-width: thin;
  }
  .process-track { width: max-content; gap: 0; }
  .process-steps {
    display: flex;
    width: max-content;
    gap: 1.1rem;
  }
  .process-step {
    flex: 0 0 min(76vw, 320px);
    scroll-snap-align: start;
  }
  .process-next { right: -10px; }
  .process-groups { display: none; }
  .process-step-group { display: block; }
}

.process--compact {
  padding-block: clamp(3rem, 7vw, 5.2rem);
}
.process--compact .process-title { display: none; }
.process--compact .process-kicker { margin-bottom: 1.6rem; }
.process--compact .process-track { gap: 1.5rem; }
.process--compact .process-steps,
.process--compact .process-groups { gap: 16px; }
.process--compact .process-step-title,
.process--compact.z-shell .process-step-title,
.z-shell .process--compact .process-step-title {
  min-height: 2.6em;
  margin-bottom: .7rem;
  font-size: clamp(18px, 1.25vw, 24px);
}
.process--compact .process-image { margin-bottom: .7rem; }
.process--compact .process-step-text { font-size: clamp(14px, .95vw, 16px); }
/* Focus: current=1, past=.55, later=.25 — only here. */
.process--compact .process-step.is-current,
.process--compact .process-group.is-current { opacity: 1; }
.process--compact .process-step.is-past,
.process--compact .process-group.is-past { opacity: .55; }
.process--compact .process-step.is-later,
.process--compact .process-group.is-later { opacity: .25; }
.process--compact .process-group.is-current span {
  font-weight: 700;
}

@media (max-width: 1279px) {
  .process--compact {
    padding-block: 2rem 2.6rem;
  }
  .process--compact .process-step {
    flex-basis: min(68vw, 280px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-scroller { scroll-behavior: auto; }
}