/* ============================================================================
   Process-Section — Welle 5.26 v5 Premium 2026 (Compact + GSAP-ScrollTrigger)
   ----------------------------------------------------------------------------
   Pattern: Compact Refined Statement-List (Stripe Press / Anthropic-Style)
   - KEIN Card-Container (Differenzierung zu Services/Referenzen/Pricing)
   - Small refined Numbers (nicht riesig)
   - Sehr viel Whitespace, refined Typografie
   - Subtle vertical connector hairline
   - GSAP ScrollTrigger: scroll-driven number fill, title color shift
   - Mobile-First: stacked, kein sticky
   ============================================================================ */

.process-story {
  list-style: none;
  /* Welle 5.26 v14: margin auto→0 — Process bleibt komplett links-bündig
     (Editorial-Modus), keine Halb-Halb-Inkonsistenz */
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  position: relative;
  --brand: #1498D5;
  --brand-deep: #0E7CAF;
  --brand-light: #3EB6F0;
  --accent: #FF7A4D;
  --accent-deep: #E55A2B;
  --connector-x: clamp(28px, 4vw, 44px);
}

/* Vertical hairline connector — base track */
.process-story::before {
  content: '';
  position: absolute;
  left: var(--connector-x);
  top: 0.85rem;
  bottom: 0.85rem;
  width: 1px;
  background: rgba(20, 152, 213, 0.16);
  pointer-events: none;
}
/* Animated fill that GSAP-ScrollTrigger drives via --progress var */
.process-story::after {
  content: '';
  position: absolute;
  left: var(--connector-x);
  top: 0.85rem;
  width: 1px;
  height: calc((100% - 1.7rem) * var(--progress, 0));
  background: linear-gradient(180deg,
    var(--brand) 0%,
    var(--brand-deep) 70%,
    var(--accent) 100%);
  pointer-events: none;
  transition: height 0.1s linear;
}
body.is-dark-bg .process-story::before {
  background: rgba(62, 182, 240, 0.18);
}
body.is-dark-bg .process-story::after {
  background: linear-gradient(180deg,
    var(--brand-light) 0%,
    var(--brand) 70%,
    var(--accent) 100%);
}

/* ─── Single Statement ────────────────────────────────────────────────── */
.process-statement {
  position: relative;
  display: grid;
  grid-template-columns: var(--connector-x) 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(1rem, 2vw, 1.6rem);
  row-gap: 0.25rem;
  align-items: start;
}

/* ─── Small Number-Marker (replaces big editorial numbers) ────────────── */
.process-statement-num {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  z-index: 2;
  width: calc(var(--connector-x) * 2 - 8px);
  margin-left: calc(-1 * var(--connector-x) + 4px);
  height: calc(var(--connector-x) * 2 - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFBFD;
  border: 1.5px solid rgba(20, 152, 213, 0.28);
  border-radius: 50%;
  font-family: var(--at-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
/* In-view state (set by GSAP-ScrollTrigger): fills with brand gradient */
.process-statement.is-in-view .process-statement-num {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 16px -4px rgba(20, 152, 213, 0.45),
    0 12px 28px -8px rgba(20, 152, 213, 0.32);
}
body.is-dark-bg .process-statement-num {
  background: #0A1B33;
  border-color: rgba(62, 182, 240, 0.35);
  color: var(--brand-light);
}
body.is-dark-bg .process-statement.is-in-view .process-statement-num {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 6px 16px -4px rgba(62, 182, 240, 0.40),
    0 12px 28px -8px rgba(62, 182, 240, 0.28);
}

/* ─── Ongoing-Step: Infinity-Symbol ───────────────────────────────────── */
.process-statement--ongoing .process-statement-num {
  border-color: rgba(255, 122, 77, 0.34);
  color: var(--accent);
  font-size: 1.1rem;
}
.process-statement--ongoing.is-in-view .process-statement-num {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 16px -4px rgba(255, 122, 77, 0.50),
    0 12px 28px -8px rgba(255, 122, 77, 0.35);
}
.process-statement-num-symbol {
  width: 1em;
  height: auto;
  display: block;
}
body.is-dark-bg .process-statement--ongoing .process-statement-num {
  border-color: rgba(255, 122, 77, 0.40);
  color: #FF8F66;
}

/* ─── Day-Pill (klein, mono, prominent above title) ───────────────────── */
.process-statement-day {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 0.35rem;
  font-family: var(--at-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}
.process-statement-day--ongoing { color: var(--accent-deep); }
body.is-dark-bg .process-statement-day { color: #6FCDF5; }
body.is-dark-bg .process-statement-day--ongoing { color: #FFB394; }

/* ─── Title (medium-large, refined) ───────────────────────────────────── */
.process-statement-title {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--at-font-display, 'Inter', system-ui, sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--at-ink, #0A1B33);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-statement.is-in-view .process-statement-title { color: var(--brand-deep); }
.process-statement--ongoing.is-in-view .process-statement-title { color: var(--accent-deep); }
body.is-dark-bg .process-statement-title { color: rgba(240, 244, 250, 0.96); }
body.is-dark-bg .process-statement.is-in-view .process-statement-title { color: var(--brand-light); }
body.is-dark-bg .process-statement--ongoing.is-in-view .process-statement-title { color: #FF9F7A; }

/* ─── Text (body copy, restrained line-length) ────────────────────────── */
.process-statement-text {
  grid-column: 2;
  grid-row: 3;
  font-family: var(--at-font-body, 'Inter', system-ui, sans-serif);
  font-size: clamp(0.92rem, 1.18vw, 1rem);
  line-height: 1.6;
  color: var(--at-ink-soft, rgba(10, 27, 51, 0.7));
  margin: 0;
  max-width: 56ch;
}
body.is-dark-bg .process-statement-text { color: rgba(240, 244, 250, 0.72); }

/* Day + Text in der Story-Grid sind Grid-Row 1, 2, 3, with Title between */
.process-statement {
  grid-template-rows: auto auto auto;
}

/* ─── CTA at the end ──────────────────────────────────────────────────── */
.process-cta {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  display: flex;
  justify-content: center;
}
.process-cta-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.65rem;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-main, 'Inter', system-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 8px 22px -6px rgba(20, 152, 213, 0.45),
    0 14px 36px -10px rgba(20, 152, 213, 0.30);
  transition: transform 0.35s cubic-bezier(0.34, 1.16, 0.64, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              gap 0.3s ease;
}
.process-cta-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 0%, transparent 40%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 60%, transparent 100%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  animation: cta-shimmer 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes cta-shimmer {
  0%   { background-position: 100% 50%; }
  60%  { background-position: -50% 50%; }
  100% { background-position: -50% 50%; }
}
.process-cta-link > * { position: relative; z-index: 1; }
.process-cta-link:hover {
  transform: translateY(-2px);
  gap: 0.85rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.40) inset,
    0 12px 28px -6px rgba(20, 152, 213, 0.55),
    0 18px 44px -10px rgba(43, 176, 229, 0.45);
}
.process-cta-arrow { transition: transform 0.3s ease; }
.process-cta-link:hover .process-cta-arrow { transform: translateX(2px); }
body.is-dark-bg .process-cta-link {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 8px 22px -6px rgba(62, 182, 240, 0.42),
    0 14px 36px -10px rgba(62, 182, 240, 0.32);
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE (≤767px): Welle 5.26 v47 — Default-Layout bleibt links-bündig
   (Num-Circle + Connector links, Text rechts), nur mit etwas mehr Atem
   damit Text nicht am rechten Edge quetscht.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .process-story {
    /* Welle 5.26 v48: padding beidseitig + kompaktere connector-Spalte
       damit das Layout etwas eingerückt und insgesamt kleiner wirkt. */
    padding-left: 0.75rem;
    padding-right: 1rem;
    --connector-x: 22px;
    column-gap: 1rem;
  }
  /* Num-Circle etwas kleiner auf Mobile */
  .process-statement-num {
    width: calc(var(--connector-x) * 2);
    height: calc(var(--connector-x) * 2);
    font-size: 0.78rem;
  }
  /* Title minimal kleiner */
  .process-statement-title {
    font-size: clamp(1.05rem, 4.5vw, 1.3rem);
  }
  /* Text minimal kleiner */
  .process-statement-text {
    font-size: clamp(0.86rem, 3.6vw, 0.95rem);
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET (768–1023px): Welle 5.26 v53 — Process-Story etwas vom linken
   Container-Edge eingerückt damit der Block (Connector + Numbers + Text)
   nicht direkt am Section-Padding klebt. Editorial-Pattern: Header bleibt
   links-bündig (Level 1), Process-Story leicht eingerückt (Level 2 Content).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .process-story {
    padding-left: clamp(2rem, 7vw, 5rem);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP (≥1024px): Horizontal Timeline statt vertikaler Statement-Liste
   (Welle 5.26 v26 — Stripe How-it-works / Apple AirPods Setup Pattern).
   Mobile bleibt vertikal stacked (Default oben), Desktop kippt auf 5-col-Grid.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .process-story {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    /* Editorial Pattern: full container width, centered */
    max-width: 1200px;
    margin: clamp(3rem, 5vw, 4.5rem) auto 0;
    /* Welle 5.26 v28: align-items: start damit alle 5 Statements
       top-aligned sind (sonst stretchen verschiedene Title/Text-Höhen
       die Day-Pills auf unterschiedliche Y-Positionen) */
    align-items: start;
    --num-size: 52px;
    /* Y-Position der horizontalen Connector-Line = Y-Mitte des Num-Circles */
    --connector-y: calc(var(--num-size) / 2);
  }

  /* Vertikale Linie verstecken, horizontale Linie aufbauen */
  .process-story::before {
    top: var(--connector-y);
    bottom: auto;
    /* Linie endet an Mitte des ersten und letzten Num-Circles, nicht ganz außen */
    left: calc(100% / 10);
    right: calc(100% / 10);
    width: auto;
    height: 1px;
  }
  .process-story::after {
    top: var(--connector-y);
    left: calc(100% / 10);
    height: 1px;
    /* Fill: horizontal width statt vertical height — gleicher --progress driver */
    width: calc((100% - 2 * (100% / 10)) * var(--progress, 0));
    background: linear-gradient(90deg,
      var(--brand) 0%,
      var(--brand-deep) 70%,
      var(--accent) 100%);
    transition: width 0.1s linear;
  }
  body.is-dark-bg .process-story::after {
    background: linear-gradient(90deg,
      var(--brand-light) 0%,
      var(--brand) 70%,
      var(--accent) 100%);
  }

  /* Statement: vertikaler Stack innerhalb jeder Spalte */
  .process-statement {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 0;
    /* Welle 5.26 v27: mehr Atem zwischen Day → Title → Text */
    row-gap: 0.7rem;
    text-align: center;
    align-items: stretch;
  }

  /* Num-Circle: oben zentriert auf der Connector-Line */
  .process-statement-num {
    grid-column: 1;
    grid-row: 1;
    width: var(--num-size);
    height: var(--num-size);
    margin: 0 auto 0.4rem;
  }

  /* Day-Pill (Welle 5.26 v27): jetzt ein echter Pill mit subtle Background-Anker
     statt nur uppercase-Text. Konsistenter mit anderen Eyebrow-Pills (Atelier-Cards). */
  .process-statement-day {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    padding: 0.28rem 0.7rem;
    background: rgba(20, 152, 213, 0.08);
    border: 1px solid rgba(20, 152, 213, 0.14);
    border-radius: 999px;
    font-size: 0.66rem;
    margin-bottom: 0;
  }
  body.is-dark-bg .process-statement-day {
    background: rgba(62, 182, 240, 0.10);
    border-color: rgba(62, 182, 240, 0.20);
  }
  .process-statement--ongoing .process-statement-day {
    background: rgba(255, 122, 77, 0.08);
    border-color: rgba(255, 122, 77, 0.18);
  }
  body.is-dark-bg .process-statement--ongoing .process-statement-day {
    background: rgba(255, 122, 77, 0.12);
    border-color: rgba(255, 122, 77, 0.24);
  }

  /* Title: zentriert + text-wrap balance für gleichmäßige Zeilen-Längen */
  .process-statement-title {
    grid-column: 1;
    grid-row: 3;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    text-align: center;
    text-wrap: balance;
    max-width: 22ch;
    margin: 0 auto 0.35rem;
  }

  /* Text: zentriert + text-wrap pretty (vermeidet einsame Wörter auf letzter Zeile) */
  .process-statement-text {
    grid-column: 1;
    grid-row: 4;
    font-size: clamp(0.82rem, 0.95vw, 0.92rem);
    line-height: 1.6;
    text-wrap: pretty;
    max-width: 28ch;
    margin: 0 auto;
    text-align: center;
  }
}

/* ─── Reduced-Motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .process-story::after { transition: none; height: 100%; }
  .process-statement-num,
  .process-statement-title,
  .process-cta-link,
  .process-cta-link::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM-POLISH — Welle 5.27 v33 (2026-05-21)
   Aus webdesign-page.css übertragen, jetzt unscoped → greift page-wide
   (Startseite #process + Webdesign-Page .wd-process beide profitieren).
     A) Big Background-Numbers (Editorial outline, hinter jedem Step)
     C) Step-Hover-Cards (Circle scale-pop + Title color-shift + Day-Glow)
   ════════════════════════════════════════════════════════════════════════ */

.process-statement {
  position: relative;
}

/* ─── A) Big Background-Numbers ──────────────────────────────────────── */
.process-statement::before {
  content: attr(data-step);
  position: absolute;
  top: -0.4em;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(7rem, 14vw, 11rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  /* Welle 5.27 v34: Stroke verstärkt — Light-Mode 0.10 war zu blass auf Off-White-BG */
  -webkit-text-stroke: 2px rgba(20, 152, 213, 0.22);
          text-stroke: 2px rgba(20, 152, 213, 0.22);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s, -webkit-text-stroke-color 0.4s;
}
.process-statement--ongoing::before {
  content: '∞';
  font-size: clamp(8rem, 16vw, 13rem);
  -webkit-text-stroke-color: rgba(255, 122, 77, 0.28);
}
body.is-dark-bg .process-statement::before {
  -webkit-text-stroke-color: rgba(62, 182, 240, 0.20);
}
body.is-dark-bg .process-statement--ongoing::before {
  -webkit-text-stroke-color: rgba(255, 148, 102, 0.24);
}
/* Mobile (vertical layout): BG-Number rechts vom Statement statt zentriert */
@media (max-width: 1023px) {
  .process-statement::before {
    left: auto;
    right: -0.2em;
    top: -0.6em;
    transform: none;
    font-size: clamp(5rem, 18vw, 8rem);
  }
}
/* Statement content über BG-Number (z-index) */
.process-statement > * {
  position: relative;
  z-index: 1;
}

/* ─── C) Step-Hover-Cards ────────────────────────────────────────────── */
.process-statement {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-statement-num {
  transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.5, 1), box-shadow 0.3s;
}
.process-statement-title,
.process-statement-day {
  transition: color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s;
}

.process-statement:hover .process-statement-num {
  transform: scale(1.15) rotate(-3deg);
  box-shadow:
    0 0 0 6px rgba(20, 152, 213, 0.18),
    0 12px 28px -6px rgba(20, 152, 213, 0.55);
}
body.is-dark-bg .process-statement:hover .process-statement-num {
  box-shadow:
    0 0 0 6px rgba(62, 182, 240, 0.22),
    0 12px 28px -6px rgba(62, 182, 240, 0.6);
}

.process-statement:hover .process-statement-title {
  color: var(--brand-deep, #0F7BB2);
  transform: translateX(2px);
}
body.is-dark-bg .process-statement:hover .process-statement-title {
  color: var(--brand-light, #5DC4F4);
}

.process-statement:hover .process-statement-day {
  background: rgba(20, 152, 213, 0.16);
  box-shadow: 0 0 0 1px rgba(20, 152, 213, 0.32), 0 6px 14px -4px rgba(20, 152, 213, 0.3);
}
body.is-dark-bg .process-statement:hover .process-statement-day {
  background: rgba(62, 182, 240, 0.20);
  box-shadow: 0 0 0 1px rgba(62, 182, 240, 0.4), 0 6px 14px -4px rgba(62, 182, 240, 0.36);
}

/* Ongoing-step (∞): Coral hover */
.process-statement--ongoing:hover .process-statement-title {
  color: var(--accent-deep, #E55F32);
}
body.is-dark-bg .process-statement--ongoing:hover .process-statement-title {
  color: #FFAE8C;
}
.process-statement--ongoing:hover .process-statement-day {
  background: rgba(255, 122, 77, 0.18);
  box-shadow: 0 0 0 1px rgba(255, 122, 77, 0.35), 0 6px 14px -4px rgba(255, 122, 77, 0.32);
}
.process-statement--ongoing:hover .process-statement-num {
  box-shadow:
    0 0 0 6px rgba(255, 122, 77, 0.18),
    0 12px 28px -6px rgba(255, 122, 77, 0.55);
}

/* Reduced-Motion: Polish-Effekte aus */
@media (prefers-reduced-motion: reduce) {
  .process-statement,
  .process-statement-num,
  .process-statement-title,
  .process-statement-day {
    transition: none;
  }
}