/* ==========================================================================
   Puels.legal · Strategy-Cards (Recht / Steuern / Wachstum)
   Modern interaction layer: animated mesh-gradient backdrop, magnetic 3D-tilt
   on hover, shine-pass, glow halo and smoother spring-easings.
   ========================================================================== */

:root {
  --strat-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --strat-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --strat-card-radius: 20px;
}

/* --- Section frame ------------------------------------------------------- */
.process-grid.career-journey {
  perspective: 1400px;
  perspective-origin: 50% 30%;
}

/* --- Step number — bigger serif numeral with subtle gold gradient -------- */
.process-grid.career-journey .process-step .num {
  background: linear-gradient(135deg, var(--gold-bright, #D4B36A) 0%, var(--gold, #B08856) 60%, var(--gold-soft, #C9A871) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  transition: transform 0.6s var(--strat-smooth), filter 0.6s var(--strat-smooth);
}
.process-grid.career-journey .process-step:hover .num {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 16px rgba(212,179,106,0.35));
}

/* Grid-Zellen strecken sich gleich hoch (Default), Inhalt muss aber
   die volle Höhe der Zelle einnehmen, sonst schrumpfen Karten mit
   kürzerem Text (z.B. Karte 03). */
.process-grid.career-journey .process-step {
  display: flex;
}

/* --- Card surface (modernized) ------------------------------------------- */
.process-grid.career-journey .process-step .step-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--strat-card-radius);
  background: var(--bg, #fff);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--border, #E6E0D2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 18px 38px -22px rgba(15,17,21,0.18),
    0 4px 14px -6px rgba(15,17,21,0.06);
  /* Kein 3D-Tilt mehr — verursachte Unschärfe bei Text/SVG. */
  transition:
    box-shadow 0.6s var(--strat-smooth),
    border-color 0.4s var(--strat-smooth);
}

/* Animated mesh gradient backdrop (very subtle, premium feel) */
.process-grid.career-journey .process-step .step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(800px 320px at 0% 0%,    rgba(212,179,106,0.10), transparent 60%),
    radial-gradient(700px 280px at 100% 100%, rgba(20,33,61,0.06),    transparent 65%),
    radial-gradient(600px 280px at 100% 0%,   rgba(176,136,86,0.06),  transparent 70%);
  opacity: 0.7;
  z-index: -2;
  transition: opacity 0.5s var(--strat-smooth);
  pointer-events: none;
}

/* Halo glow that follows hover */
.process-grid.career-journey .process-step .step-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    220px 220px at var(--mx, 50%) var(--my, 50%),
    rgba(212,179,106,0.18),
    transparent 65%
  );
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s var(--strat-smooth);
  pointer-events: none;
}

/* Hover state: lift + slight scale + halo on */
.process-grid.career-journey .process-step:hover .step-card {
  border-color: rgba(176,136,86,0.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 30px 60px -22px rgba(15,17,21,0.22),
    0 8px 22px -8px rgba(176,136,86,0.18);
}
.process-grid.career-journey .process-step:hover .step-card::before { opacity: 1; }
.process-grid.career-journey .process-step:hover .step-card::after  { opacity: 1; }

/* Shine pass on hover (sweeps across the card) */
.process-grid.career-journey .process-step .step-card .step-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.55) 48%,
    rgba(255,255,255,0.0) 60%
  );
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.9s var(--strat-smooth), opacity 0.4s var(--strat-smooth);
  mix-blend-mode: overlay;
}
.process-grid.career-journey .process-step:hover .step-card .step-icon::before {
  opacity: 1;
  transform: translateX(120%);
}

/* --- Icon container ------------------------------------------------------ */
.process-grid.career-journey .step-card .step-icon {
  position: relative;
  display: block;
  margin: 0 auto 1.5rem;
  transition: transform 0.6s var(--strat-spring);
}
.process-grid.career-journey .process-step:hover .step-card .step-icon {
  transform: scale(1.02);
}

/* --- Heading and copy ---------------------------------------------------- */
.process-grid.career-journey .step-card h3 {
  position: relative;
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--navy, #14213D) 30%, var(--navy-hover, #1F3158));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.5s var(--strat-spring);
}
.process-grid.career-journey .step-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-bright, #D4B36A), var(--gold, #B08856));
  border-radius: 2px;
  transition: width 0.55s var(--strat-spring);
}
.process-grid.career-journey .process-step:hover .step-card h3::after { width: 38px; }

.process-grid.career-journey .step-card p {
  /* keine translateZ — Text bleibt scharf */
}

/* ==========================================================================
   Modernized inner SVG animations — spring-easings, layered glow, smoother
   ========================================================================== */

/* Common: drop-shadow that pulses with the active element */
.process-step.is-visible .step-card svg {
  overflow: visible !important;
}

/* ==========================================================================
   Card 01 · Recht — Editorial annotations (cleaner, more refined)
   ========================================================================== */

.step-icon--contract svg .ph-marker,
.step-icon--contract svg .ph-highlight,
.step-icon--contract svg .ph-stamp {
  opacity: 0;
}

.step-icon--contract svg .ph-highlight {
  transform-origin: left center;
  transform-box: fill-box;
  transform: scaleX(0);
}

.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-marker-1 {
  animation: pl-marker-in 7s var(--strat-spring) 0.6s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-marker-2 {
  animation: pl-marker-in 7s var(--strat-spring) 1.4s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-marker-3 {
  animation: pl-marker-in 7s var(--strat-spring) 2.2s infinite both;
}
@keyframes pl-marker-in {
  0%, 7%    { opacity: 0; transform: translateX(-4px); transform-box: fill-box; transform-origin: center; }
  14%       { opacity: 1; transform: translateX(0); }
  88%       { opacity: 1; }
  95%, 100% { opacity: 0; transform: translateX(-4px); }
}

.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-highlight-1 {
  animation: pl-highlight-draw 7s var(--strat-smooth) 0.85s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-highlight-2 {
  animation: pl-highlight-draw 7s var(--strat-smooth) 1.65s infinite both;
}
.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-highlight-3 {
  animation: pl-highlight-draw 7s var(--strat-smooth) 2.45s infinite both;
}
@keyframes pl-highlight-draw {
  0%, 9%    { opacity: 0; transform: scaleX(0); }
  16%       { opacity: 1; transform: scaleX(1); }
  88%       { opacity: 1; transform: scaleX(1); }
  95%, 100% { opacity: 0; transform: scaleX(0); }
}

.process-step:nth-child(1).is-visible .step-icon--contract svg .ph-stamp {
  transform-origin: center;
  transform-box: fill-box;
  animation: pl-stamp-pop 7s var(--strat-spring) 3.2s infinite both;
}
@keyframes pl-stamp-pop {
  0%, 35%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  44%       { opacity: 1; transform: scale(1.1) rotate(2deg); }
  52%       { opacity: 1; transform: scale(0.95) rotate(0); }
  60%, 88%  { opacity: 1; transform: scale(1) rotate(0); }
  95%, 100% { opacity: 0; transform: scale(0.5) rotate(-8deg); }
}

/* ==========================================================================
   Card 02 · Steuern — Donut-Chart with savings counter
   ========================================================================== */

.step-icon--euro svg .eu-arc {
  /* circumference = 2*PI*100 = 628.3 */
  stroke-dasharray: 0 628;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .eu-arc {
  animation: pl-arc-fill 7s var(--strat-smooth) 0.8s infinite both;
}
@keyframes pl-arc-fill {
  0%, 8%    { stroke-dasharray: 0 628; }
  /* 32% of circumference = ~201 */
  55%       { stroke-dasharray: 201 628; }
  88%       { stroke-dasharray: 201 628; }
  95%, 100% { stroke-dasharray: 0 628; }
}

.step-icon--euro svg .eu-tag {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .eu-tag {
  animation: pl-tag-pop 7s var(--strat-spring) 0.5s infinite both;
}
@keyframes pl-tag-pop {
  0%, 5%    { opacity: 0; transform: translateY(-6px) scale(0.8); }
  14%       { opacity: 1; transform: translateY(0) scale(1.05); }
  20%, 88%  { opacity: 1; transform: translateY(0) scale(1); }
  95%, 100% { opacity: 0; transform: translateY(-6px) scale(0.8); }
}

.step-icon--euro svg .eu-end-dot {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.process-step:nth-child(2).is-visible .step-icon--euro svg .eu-end-dot {
  animation: pl-end-dot 7s var(--strat-spring) 3.2s infinite both;
}
@keyframes pl-end-dot {
  0%, 40%   { opacity: 0; transform: scale(0); filter: none; }
  48%       { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 8px rgba(212,179,106,0.7)); }
  56%, 88%  { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 4px rgba(212,179,106,0.45)); }
  95%, 100% { opacity: 0; transform: scale(0); filter: none; }
}

/* ==========================================================================
   Card 03 · Wachstum — Sparkline with area-fill
   ========================================================================== */

.step-icon--growth svg .gr-area {
  transform-origin: bottom;
  transform-box: fill-box;
  transform: scaleY(0);
  opacity: 0;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-area {
  animation: pl-area-rise 7s var(--strat-smooth) 1.8s infinite both;
}
@keyframes pl-area-rise {
  0%, 22%   { opacity: 0; transform: scaleY(0); }
  45%       { opacity: 1; transform: scaleY(1); }
  88%       { opacity: 1; transform: scaleY(1); }
  95%, 100% { opacity: 0; transform: scaleY(0); }
}

.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-line {
  animation: pl-line-draw 7s var(--strat-smooth) 0.7s infinite both;
}
@keyframes pl-line-draw {
  0%, 9%    { stroke-dashoffset: 600; }
  45%       { stroke-dashoffset: 0; }
  88%       { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 600; }
}

.step-icon--growth svg .gr-pt {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-pt-1 {
  animation: pl-pt-pop 7s var(--strat-spring) 1.0s infinite both;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-pt-2 {
  animation: pl-pt-pop 7s var(--strat-spring) 1.4s infinite both;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-pt-3 {
  animation: pl-pt-pop 7s var(--strat-spring) 1.8s infinite both;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-pt-4 {
  animation: pl-pt-pop 7s var(--strat-spring) 2.2s infinite both;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-pt-5 {
  animation: pl-pt-pop 7s var(--strat-spring) 2.6s infinite both;
}
@keyframes pl-pt-pop {
  0%, 11%   { opacity: 0; transform: scale(0); }
  18%       { opacity: 1; transform: scale(1.4); }
  26%, 88%  { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0); }
}

.step-icon--growth svg .gr-endpoint,
.step-icon--growth svg .gr-endpoint-inner,
.step-icon--growth svg .gr-endpoint-glow,
.step-icon--growth svg .gr-label {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-endpoint,
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-endpoint-inner {
  animation: pl-endpoint-pop 7s var(--strat-spring) 3.0s infinite both;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-endpoint-glow {
  animation: pl-endpoint-glow 7s var(--strat-smooth) 3.0s infinite both;
}
.process-step:nth-child(3).is-visible .step-icon--growth svg .gr-label {
  animation: pl-label-in 7s var(--strat-spring) 3.3s infinite both;
}
@keyframes pl-endpoint-pop {
  0%, 38%   { opacity: 0; transform: scale(0); }
  46%       { opacity: 1; transform: scale(1.4); }
  54%, 88%  { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes pl-endpoint-glow {
  0%, 38%   { opacity: 0; transform: scale(0.5); }
  50%       { opacity: 0.45; transform: scale(1.4); }
  70%, 88%  { opacity: 0.25; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes pl-label-in {
  0%, 42%   { opacity: 0; transform: translateY(-6px) scale(0.8); }
  50%       { opacity: 1; transform: translateY(0) scale(1.05); }
  58%, 88%  { opacity: 1; transform: translateY(0) scale(1); }
  95%, 100% { opacity: 0; transform: translateY(-6px) scale(0.8); }
}

/* ==========================================================================
   Drei-Schritte-Karten · Modern, fein gezeichnete Animationen
   (Analyse · Strategie · Umsetzung) — viewBox 480×360
   ========================================================================== */

.step-icon--analysis,
.step-icon--strategy,
.step-icon--implementation {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 auto 1.75rem !important;
  filter: none !important;
}
.step-icon--analysis svg,
.step-icon--strategy svg,
.step-icon--implementation svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  overflow: visible !important;
  shape-rendering: geometricPrecision;
}
/* Disable the generic stroke-draw legacy behavior on these icons */
.step-icon--analysis svg *,
.step-icon--strategy svg *,
.step-icon--implementation svg * {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.process-step.is-visible .step-icon--analysis svg *,
.process-step.is-visible .step-icon--strategy svg *,
.process-step.is-visible .step-icon--implementation svg * {
  animation: none;
}

/* ---------- Card 01 · Analyse — Status-Dashboard ---------- */
.step-icon--analysis .an-bar {
  transform-origin: left center;
  transform-box: fill-box;
  transform: scaleX(0);
}
.process-step.is-visible .step-icon--analysis .an-bar-1 {
  animation: an-bar-fill 7s var(--strat-smooth) 0.6s infinite both;
}
.process-step.is-visible .step-icon--analysis .an-bar-2 {
  animation: an-bar-fill 7s var(--strat-smooth) 1.0s infinite both;
}
.process-step.is-visible .step-icon--analysis .an-bar-3 {
  animation: an-bar-fill 7s var(--strat-smooth) 1.4s infinite both;
}
@keyframes an-bar-fill {
  0%, 8%      { transform: scaleX(0); }
  20%, 88%    { transform: scaleX(1); }
  95%, 100%   { transform: scaleX(0); }
}

/* Score counters fade-in to value */
.step-icon--analysis .an-score { opacity: 0; }
.process-step.is-visible .step-icon--analysis .an-score-1 {
  animation: an-score-1 7s var(--strat-spring) 1.0s infinite both;
}
.process-step.is-visible .step-icon--analysis .an-score-2 {
  animation: an-score-2 7s var(--strat-spring) 1.4s infinite both;
}
.process-step.is-visible .step-icon--analysis .an-score-3 {
  animation: an-score-3 7s var(--strat-spring) 1.8s infinite both;
}
@keyframes an-score-1 {
  0%, 14%   { opacity: 0; }
  22%, 88%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes an-score-2 {
  0%, 18%   { opacity: 0; }
  26%, 88%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes an-score-3 {
  0%, 22%   { opacity: 0; }
  30%, 88%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* Live pulse */
.step-icon--analysis .an-live-pulse {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0.4;
}
.process-step.is-visible .step-icon--analysis .an-live-pulse {
  animation: live-pulse 1.8s ease-in-out infinite both;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(2.2); opacity: 0; }
}

/* Final check badge */
.step-icon--analysis .an-check {
  transform-origin: 425px 312px;
  opacity: 0;
}
.process-step.is-visible .step-icon--analysis .an-check {
  animation: an-check-pop 7s var(--strat-spring) 2.4s infinite both;
}
@keyframes an-check-pop {
  0%, 30%   { opacity: 0; transform: scale(0); }
  36%       { opacity: 1; transform: scale(1.25); }
  44%       { opacity: 1; transform: scale(0.95); }
  50%, 88%  { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.5); }
}

/* ---------- Card 02 · Strategie — Roadmap ---------- */
.step-icon--strategy .st-line {
  /* dasharray set inline = 320, animate dashoffset */
}
.process-step.is-visible .step-icon--strategy .st-line {
  animation: st-line-draw 7s var(--strat-smooth) 0.5s infinite both;
}
@keyframes st-line-draw {
  0%, 8%    { stroke-dashoffset: 320; }
  35%, 88%  { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 320; }
}

.step-icon--strategy .st-stop {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.process-step.is-visible .step-icon--strategy .st-stop-1 {
  animation: st-stop-pop 7s var(--strat-spring) 0.7s infinite both;
}
.process-step.is-visible .step-icon--strategy .st-stop-2 {
  animation: st-stop-pop 7s var(--strat-spring) 1.2s infinite both;
}
.process-step.is-visible .step-icon--strategy .st-stop-3 {
  animation: st-stop-pop 7s var(--strat-spring) 1.7s infinite both;
}
.process-step.is-visible .step-icon--strategy .st-stop-4 {
  animation: st-stop-pop 7s var(--strat-spring) 2.2s infinite both;
}
@keyframes st-stop-pop {
  0%, 9%    { opacity: 0; transform: scale(0.4); }
  16%       { opacity: 1; transform: scale(1.15); }
  22%       { opacity: 1; transform: scale(0.95); }
  28%, 88%  { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.4); }
}

.step-icon--strategy .st-prio-marker {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.process-step.is-visible .step-icon--strategy .st-prio-marker {
  animation: st-prio-pop 7s var(--strat-spring) 2.7s infinite both;
}
@keyframes st-prio-pop {
  0%, 35%   { opacity: 0; transform: translateX(20px) scale(0.6); }
  44%       { opacity: 1; transform: translateX(0) scale(1.15); }
  52%       { opacity: 1; transform: translateX(0) scale(0.95); }
  60%, 88%  { opacity: 1; transform: translateX(0) scale(1); }
  95%, 100% { opacity: 0; transform: translateX(20px) scale(0.6); }
}

.step-icon--strategy .st-arrow-final {
  opacity: 0;
}
.process-step.is-visible .step-icon--strategy .st-arrow-final {
  animation: st-arrow-fade 7s var(--strat-spring) 3.0s infinite both;
}
@keyframes st-arrow-fade {
  0%, 38%   { opacity: 0; transform: translateX(-6px); transform-box: fill-box; transform-origin: center; }
  48%       { opacity: 1; transform: translateX(0); }
  88%       { opacity: 1; transform: translateX(0); }
  95%, 100% { opacity: 0; transform: translateX(-6px); }
}

/* ---------- Card 03 · Umsetzung — Active Pipeline ---------- */
.step-icon--implementation .im-progress {
  /* width animated 0 -> 400 */
}
.process-step.is-visible .step-icon--implementation .im-progress {
  animation: im-progress-fill 7s var(--strat-smooth) 0.6s infinite both;
}
@keyframes im-progress-fill {
  0%, 8%    { width: 0px; }
  60%       { width: 400px; }
  88%       { width: 400px; }
  95%, 100% { width: 0px; }
}

.step-icon--implementation .im-percent {
  /* update via animation-name fallback - text content cannot be CSS-animated;
     we instead pulse opacity for emphasis */
  opacity: 0.5;
}
.process-step.is-visible .step-icon--implementation .im-percent {
  animation: im-percent-pulse 7s var(--strat-smooth) 0.6s infinite both;
}
@keyframes im-percent-pulse {
  0%, 8%    { opacity: 0; }
  20%, 88%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}

.step-icon--implementation .im-task {
  opacity: 0;
}
.process-step.is-visible .step-icon--implementation .im-task-1 {
  animation: im-task-in 7s var(--strat-spring) 0.7s infinite both;
}
.process-step.is-visible .step-icon--implementation .im-task-2 {
  animation: im-task-in 7s var(--strat-spring) 1.2s infinite both;
}
.process-step.is-visible .step-icon--implementation .im-task-3 {
  animation: im-task-in 7s var(--strat-spring) 1.7s infinite both;
}
.process-step.is-visible .step-icon--implementation .im-task-4 {
  animation: im-task-in 7s var(--strat-spring) 2.2s infinite both;
}
@keyframes im-task-in {
  0%, 9%    { opacity: 0; transform: translateY(8px); transform-box: fill-box; transform-origin: center; }
  18%       { opacity: 1; transform: translateY(-2px); }
  26%, 88%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(8px); }
}

/* Check fill-circle and tick reveal per task */
.step-icon--implementation .im-circle-fill,
.step-icon--implementation .im-tick {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0);
}

.process-step.is-visible .step-icon--implementation .im-task-1 .im-circle-fill,
.process-step.is-visible .step-icon--implementation .im-task-1 .im-tick {
  animation: im-tick-pop 7s var(--strat-spring) 1.0s infinite both;
}
.process-step.is-visible .step-icon--implementation .im-task-2 .im-circle-fill,
.process-step.is-visible .step-icon--implementation .im-task-2 .im-tick {
  animation: im-tick-pop 7s var(--strat-spring) 1.5s infinite both;
}
.process-step.is-visible .step-icon--implementation .im-task-3 .im-circle-fill,
.process-step.is-visible .step-icon--implementation .im-task-3 .im-tick {
  animation: im-tick-pop 7s var(--strat-spring) 2.0s infinite both;
}
.process-step.is-visible .step-icon--implementation .im-task-4 .im-circle-fill,
.process-step.is-visible .step-icon--implementation .im-task-4 .im-tick {
  animation: im-tick-pop 7s var(--strat-spring) 2.5s infinite both;
}
@keyframes im-tick-pop {
  0%, 14%   { opacity: 0; transform: scale(0); }
  22%       { opacity: 1; transform: scale(1.4); }
  30%       { opacity: 1; transform: scale(0.92); }
  38%, 88%  { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0); }
}

/* Live monitoring pulse */
.step-icon--implementation .im-live-pulse {
  transform-origin: center;
  transform-box: fill-box;
}
.process-step.is-visible .step-icon--implementation .im-live-pulse {
  animation: live-pulse 1.8s ease-in-out infinite both;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .process-step.is-visible .step-icon--analysis svg *,
  .process-step.is-visible .step-icon--strategy svg *,
  .process-step.is-visible .step-icon--implementation svg * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Step-Num — die 01/02/03 sitzen jetzt INNERHALB der Karte (oben rechts).
   Editorial Italic-Serif, sehr dezent, aber prominent als Akzent.
   ========================================================================== */

/* Original .num (oben mit dashed-line) ausblenden, weil die Nummer jetzt
   innerhalb der Karte ist. Trifft beide Sektionen (Strategy + 3-Schritte). */
.process-grid.career-journey .process-step > .num {
  display: none !important;
}

/* Step-Card als positionierten Container — fuer das absolut platzierte step-num */
.process-grid.career-journey .step-card {
  position: relative;
}

/* Die Nummer selbst */
.process-grid.career-journey .step-num {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--gold, #B08856);
  opacity: 0.32;
  pointer-events: none;
  z-index: 2;
  transition:
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s ease;
  user-select: none;
}

/* Hover: Nummer wird praesenter, leicht skaliert, Goldton intensiver */
.process-grid.career-journey .process-step:hover .step-num,
.process-grid.career-journey .step-card:hover .step-num {
  opacity: 0.62;
  transform: translateY(-2px);
  color: var(--gold-bright, #D4B36A);
}

/* Subtiler Gold-Strich unterhalb der Nummer als Akzent */
.process-grid.career-journey .step-num::after {
  content: "";
  position: absolute;
  left: 25%;
  right: -10%;
  bottom: -6px;
  height: 1.5px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.45;
}

/* Verhindern, dass step-num das step-icon visuell stoert */
.process-grid.career-journey .step-card .step-icon {
  position: relative;
  z-index: 1;
}

/* Mobile: Nummer kompakter aber lesbar */
@media (max-width: 720px) {
  .process-grid.career-journey .step-num {
    top: 0.85rem;
    right: 1.05rem;
    font-size: 2.2rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .process-grid.career-journey .step-num {
    transition: none !important;
  }
  .process-grid.career-journey .step-card:hover .step-num {
    transform: none;
  }
}

/* ==========================================================================
   FIX: dashed-Geisterlinie weg
   .process-step::after war frueher ein Connector zwischen den Nummern. Jetzt
   wo die Nummern IN der Karte sitzen, liegt die Linie quer durch die Karten.
   ========================================================================== */
.process-grid.career-journey .process-step::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
  height: 0 !important;
}