/* ============================================================
   Gründungs-Journey – animierte Grafiken für den Abschnitt
   "Der häufigste Fehler" auf gruender.html.
   Stil analog zur Startseite ("Wachstum braucht Struktur"):
   großflächige Line-Art-Icons in der Step-Card, gold-betont,
   mit dezenten Loop-Animationen.
   ============================================================ */

/* --- Icon-Größe: füllt die Card-Breite (wie --contract/--growth) --- */
.process-grid.career-journey .step-card .step-icon--strategy,
.process-grid.career-journey .step-card .step-icon--structure,
.process-grid.career-journey .step-card .step-icon--operate,
.step-icon--strategy,
.step-icon--structure,
.step-icon--operate {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  min-height: 260px;
  margin: 0 auto 1.6rem !important;
}
.step-icon--strategy svg,
.step-icon--structure svg,
.step-icon--operate svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Generisches Draw-In neutralisieren – gleiche Spezifität wie die
   generische Regel, lädt aber später → gewinnt. Eigene Loop-
   Animationen unten haben höhere Spezifität und setzen sich durch. */
.step-icon--strategy svg path,
.step-icon--strategy svg line,
.step-icon--strategy svg circle,
.step-icon--strategy svg rect,
.step-icon--strategy svg polyline,
.step-icon--structure svg path,
.step-icon--structure svg line,
.step-icon--structure svg circle,
.step-icon--structure svg rect,
.step-icon--structure svg polyline,
.step-icon--operate svg path,
.step-icon--operate svg line,
.step-icon--operate svg circle,
.step-icon--operate svg rect,
.step-icon--operate svg polyline {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

/* ============================================================
   01 STRATEGISCHE VORÜBERLEGUNG
   Ziel-Scheibe + gepunktete Route mit Wegpunkten + Kurs-Pin.
   Erzählt: erst den Weg planen, dann das Ziel ansteuern.
   ============================================================ */
.process-step.is-visible .step-icon--strategy svg .gj-route {
  stroke-dasharray: 5 7;
  animation: gj-route-flow 4.5s linear infinite;
}
@keyframes gj-route-flow { to { stroke-dashoffset: -48; } }

.step-icon--strategy svg .gj-wp {
  transform-box: fill-box;
  transform-origin: center;
}
.process-step.is-visible .step-icon--strategy svg .gj-wp-1 {
  animation: gj-wp-pulse 3.6s ease-in-out 0.0s infinite both;
}
.process-step.is-visible .step-icon--strategy svg .gj-wp-2 {
  animation: gj-wp-pulse 3.6s ease-in-out 0.6s infinite both;
}
.process-step.is-visible .step-icon--strategy svg .gj-wp-3 {
  animation: gj-wp-pulse 3.6s ease-in-out 1.2s infinite both;
}
@keyframes gj-wp-pulse {
  0%, 100% { transform: scale(1);    fill: #fff; }
  18%      { transform: scale(1.5);  fill: #D4B36A; }
  40%      { transform: scale(1);    fill: #fff; }
}

.step-icon--strategy svg .gj-target {
  transform-box: fill-box;
  transform-origin: center;
}
.process-step.is-visible .step-icon--strategy svg .gj-target {
  animation: gj-target-breathe 3.6s ease-in-out infinite;
}
@keyframes gj-target-breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.05); }
}

.step-icon--strategy svg .gj-pin {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.process-step.is-visible .step-icon--strategy svg .gj-pin {
  animation: gj-pin-drop 3.6s ease-in-out infinite;
}
@keyframes gj-pin-drop {
  0%, 100% { transform: translateY(-7px); }
  50%      { transform: translateY(0);    }
}

/* ============================================================
   02 STRUKTUR & GRÜNDUNG
   Org-Diagramm: Holding-Knoten oben, zwei Tochter-Knoten unten,
   verbindende Linien fließen. Erzählt: saubere Struktur aus
   einem Guss.
   ============================================================ */
.process-step.is-visible .step-icon--structure svg .gj-link {
  stroke-dasharray: 4 5;
  animation: gj-link-flow 3.2s linear infinite;
}
@keyframes gj-link-flow { to { stroke-dashoffset: -36; } }

.step-icon--structure svg .gj-node {
  transform-box: fill-box;
  transform-origin: center;
}
.process-step.is-visible .step-icon--structure svg .gj-node-0 {
  animation: gj-node-float 4s ease-in-out 0s infinite both;
}
.process-step.is-visible .step-icon--structure svg .gj-node-1 {
  animation: gj-node-float 4s ease-in-out 0.5s infinite both;
}
.process-step.is-visible .step-icon--structure svg .gj-node-2 {
  animation: gj-node-float 4s ease-in-out 1s infinite both;
}
@keyframes gj-node-float {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-4px); }
}

.step-icon--structure svg .gj-spark {
  transform-box: fill-box;
  transform-origin: center;
}
.process-step.is-visible .step-icon--structure svg .gj-spark {
  animation: gj-spark 2.8s ease-in-out infinite;
}
@keyframes gj-spark {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg);  }
  50%      { opacity: 1; transform: scale(1)   rotate(45deg); }
}

/* ============================================================
   03 BETRIEB & WACHSTUM
   Wachstumskurve mit Flächenfüllung, steigende Sparkline,
   Datenpunkte, glühender Endpunkt. Erzählt: laufender Betrieb,
   der wächst.
   ============================================================ */
.step-icon--operate svg .gj-line {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
.process-step.is-visible .step-icon--operate svg .gj-line {
  stroke-dasharray: 620;
  animation: gj-line-draw 2.4s cubic-bezier(.16,1,.3,1) 0.2s forwards;
}
@keyframes gj-line-draw { to { stroke-dashoffset: 0; } }

.step-icon--operate svg .gj-area {
  opacity: 0;
}
.process-step.is-visible .step-icon--operate svg .gj-area {
  animation: gj-area-in 1s ease-out 1.6s forwards;
}
@keyframes gj-area-in { to { opacity: 1; } }

.step-icon--operate svg .gj-pt {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.process-step.is-visible .step-icon--operate svg .gj-pt-1 { animation: gj-pt-pop .5s ease-out 1.0s forwards; }
.process-step.is-visible .step-icon--operate svg .gj-pt-2 { animation: gj-pt-pop .5s ease-out 1.3s forwards; }
.process-step.is-visible .step-icon--operate svg .gj-pt-3 { animation: gj-pt-pop .5s ease-out 1.6s forwards; }
.process-step.is-visible .step-icon--operate svg .gj-pt-4 { animation: gj-pt-pop .5s ease-out 1.9s forwards; }
@keyframes gj-pt-pop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

.step-icon--operate svg .gj-end-glow {
  transform-box: fill-box;
  transform-origin: center;
}
.process-step.is-visible .step-icon--operate svg .gj-end-glow {
  animation: gj-end-glow 2.6s ease-in-out 2.4s infinite;
}
@keyframes gj-end-glow {
  0%, 100% { transform: scale(1);   opacity: 0.25; }
  50%      { transform: scale(1.6); opacity: 0.08; }
}
.step-icon--operate svg .gj-label {
  opacity: 0;
}
.process-step.is-visible .step-icon--operate svg .gj-label {
  animation: gj-label-in .5s ease-out 2.3s forwards;
}
@keyframes gj-label-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .step-icon--strategy svg *,
  .step-icon--structure svg *,
  .step-icon--operate svg * {
    animation: none !important;
  }
  .step-icon--operate svg .gj-line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .step-icon--operate svg .gj-area,
  .step-icon--operate svg .gj-pt,
  .step-icon--operate svg .gj-label { opacity: 1; }
}