/* Journey-Path – kurviger "Weg" mit Scroll-Zeichnung (shared/modules/journey-path.php).
   Versteck-/Reveal-Zustände greifen NUR unter .journey.is-enhanced (setzt das JS),
   damit ohne JS alle Inhalte sichtbar bleiben. Keine .reveal-Klassen verwenden –
   das Modul steuert sein Erscheinen selbst (Kollision mit reveal.js vermeiden). */

.journey-section {
  position: relative;
  overflow: hidden;
  /* Hintergrund der Section – Textblöcke ohne Karte (Fork-Kopf, Message)
     decken damit die durchlaufende Linie ab ("der Weg taucht unter"). */
  --journey-bg: var(--white);
}

.journey-section.section--cream { --journey-bg: var(--bg-cream); }
.journey-section.section--soft { --journey-bg: var(--bg-soft); }

.journey-section .section-head {
  position: relative;
  z-index: 1;
}

/* Deko-Orbs */
.journey-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
}

.journey-orb--teal { width: 420px; height: 420px; background: var(--teal-tint); top: 60px; left: -140px; }
.journey-orb--warm { width: 480px; height: 480px; background: var(--warm-tint); bottom: 40px; right: -160px; }

/* Grundgerüst */
.journey {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
}

.journey-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.journey-route {
  fill: none;
  stroke: var(--teal-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0.1 11;
}

.journey-draw {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  will-change: stroke-dashoffset;
}

.journey-tip {
  fill: var(--teal);
  filter: drop-shadow(0 0 6px rgba(0, 162, 184, 0.55));
}

.journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.journey-item {
  position: relative;
  margin: 0 0 clamp(56px, 9vh, 110px);
}

.journey-item:last-child { margin-bottom: 0; }

/* Karten */
.journey-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 26px 30px 28px;
  transition: box-shadow var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

/* Foto in der Stationskarte (z. B. Meilenstein-Timeline) */
.journey-card__media {
  margin: -26px -30px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.journey-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.journey-card:hover,
.journey-card:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.journey-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.journey-card__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.journey-card__icon svg { width: 24px; height: 24px; }

.journey-card__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.journey-card h3,
.journey-card h4 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
}

.journey-card p {
  margin: 0;
  color: var(--ink-mid);
  line-height: 1.65;
}

.journey-card__links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.journey-link {
  font-weight: 700;
  font-size: 15px;
  color: var(--teal-deep);
  text-decoration: none;
}

.journey-link::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}

.journey-link:hover { color: var(--teal); }
.journey-link:hover::after { transform: translateX(3px); }
.journey-link--soft { font-weight: 600; color: var(--ink-mid); }
.journey-link--soft:hover { color: var(--teal-deep); }

/* Ankerpunkte (JS verbindet die Dot-Zentren in DOM-Reihenfolge) */
.journey-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--teal);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
  z-index: 2;
}

.journey-dot--junction { width: 18px; height: 18px; }

.journey-dot.is-reached {
  background: var(--teal);
  animation: journey-pop 0.5s var(--ease-spring);
}

@keyframes journey-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.55); box-shadow: 0 0 0 8px rgba(0, 162, 184, 0.18); }
  100% { transform: scale(1); }
}

/* Zentrierte Stationen (Start, Message, Finale) */
.journey-item--center {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.journey-card--start {
  padding: 36px 34px;
}

.journey-card--start .journey-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
}

.journey-card--start .journey-card__icon svg { width: 28px; height: 28px; }
.journey-card--start .journey-card__eyebrow { display: block; margin-bottom: 8px; }
.journey-card--start h3 { font-size: clamp(22px, 3vw, 27px); }
.journey-card--start .journey-dot { bottom: -38px; left: calc(50% - 7px); }

/* Überleitungszeile */
.journey-item--message { max-width: 680px; }

.journey-message {
  margin: 0;
  padding: 12px 16px;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--teal-deep);
  background: var(--journey-bg);
  border-radius: var(--radius);
}

.journey-item--message > .journey-dot { top: -46px; left: calc(50% - 9px); }

/* Gabelung */
.journey-fork__head {
  position: relative;
  max-width: 560px;
  margin: 0 auto clamp(48px, 7vh, 84px);
  padding: 8px 16px 42px;
  text-align: center;
  background: var(--journey-bg);
  border-radius: var(--radius);
}

.journey-fork__glyph {
  display: inline-flex;
  color: var(--teal);
  margin-bottom: 6px;
}

.journey-fork__glyph svg { width: 30px; height: 30px; }

.journey-fork__head h3 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 27px);
  color: var(--ink);
}

.journey-fork__head p { margin: 0; color: var(--ink-mid); line-height: 1.65; }
.journey-fork__split { bottom: 0; left: calc(50% - 9px); }

.journey-fork__branches {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 120px;
}

.journey-card--branch h4 { font-size: 19px; }

/* Der Weg läuft oben mittig in die Branch-Karte hinein und unten wieder
   heraus (das Stück dazwischen liegt verdeckt hinter der weißen Karte). */
.journey-dot--branch-in { top: -7px; left: calc(50% - 7px); }
.journey-dot--branch-out { bottom: -7px; left: calc(50% - 7px); }

.journey-fork__merge {
  position: static;
  display: block;
  margin: clamp(44px, 6vh, 64px) auto 0;
}

/* Lösungs-Panel */
.journey-item--solutions {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 46px 0;
}

.journey-dot--sol-top { top: 0; left: calc(50% - 9px); }
.journey-dot--sol-bottom { bottom: 0; left: calc(50% - 9px); }

.journey-solutions {
  background: var(--teal-tint);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}

.journey-solutions h3 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 26px);
  color: var(--ink);
}

.journey-solutions > p {
  max-width: 640px;
  margin: 0 auto 26px;
  color: var(--ink-mid);
  line-height: 1.65;
}

.journey-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.journey-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius);
  padding: 13px 15px;
  text-decoration: none;
  text-align: left;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}

.journey-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color: var(--teal-deep);
}

.journey-chip__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--teal);
}

.journey-chip__icon svg { width: 20px; height: 20px; }

.journey-chip span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: manual; /* Trennstellen kommen als Soft-Hyphens aus dem Content */
}

/* Warme Station (positiver Test) */
.journey-card--warm { background: var(--warm-tint); }
.journey-card--warm .journey-card__icon { background: var(--white); color: var(--warm-deep); }
.journey-card--warm .journey-card__eyebrow { color: var(--warm-deep); }
.journey-item--warm .journey-dot { border-color: var(--warm); }
.journey-item--warm .journey-dot.is-reached { background: var(--warm); }

/* Finale */
.journey-card--finale { padding: 42px 36px 44px; }

.journey-card--finale .journey-dot {
  top: -38px;
  left: calc(50% - 7px);
  border-color: var(--warm);
}

.journey-item--finale .journey-dot.is-reached { background: var(--warm); }

.journey-card--finale .journey-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: var(--warm-tint);
  color: var(--warm-deep);
}

.journey-card--finale .journey-card__icon svg { width: 32px; height: 32px; }
.journey-card--finale h3 { font-size: clamp(24px, 3.4vw, 30px); }
.journey-card__cta { margin-top: 22px; }

.journey-sparkle {
  position: absolute;
  color: var(--warm);
  opacity: 0;
  pointer-events: none;
}

.journey-sparkle svg { width: 22px; height: 22px; }
.journey-sparkle--1 { top: -14px; left: 18%; }
.journey-sparkle--2 { top: 26px; right: 12%; }
.journey-sparkle--2 svg { width: 16px; height: 16px; }
.journey-sparkle--3 { bottom: -10px; left: 8%; }
.journey-sparkle--3 svg { width: 18px; height: 18px; }

@keyframes journey-sparkle {
  0%   { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  60%  { opacity: 1; }
  100% { opacity: 0.9; transform: scale(1) rotate(0deg); }
}

/* Reveal-Zustände – nur mit JS (.is-enhanced) */
.journey.is-enhanced .journey-item {
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.journey.is-enhanced .journey-item.is-visible {
  opacity: 1;
  transform: none;
}

.journey.is-enhanced .journey-chip {
  opacity: 0;
  transform: translateY(14px) scale(0.95);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.journey.is-enhanced .journey-item--solutions.is-reached .journey-chip {
  opacity: 1;
  transform: none;
}

.journey.is-enhanced .journey-item--finale.is-reached .journey-sparkle--1 { animation: journey-sparkle 0.9s var(--ease-out) 0.1s forwards; }
.journey.is-enhanced .journey-item--finale.is-reached .journey-sparkle--2 { animation: journey-sparkle 0.9s var(--ease-out) 0.35s forwards; }
.journey.is-enhanced .journey-item--finale.is-reached .journey-sparkle--3 { animation: journey-sparkle 0.9s var(--ease-out) 0.6s forwards; }

/* Desktop: Stationen alternieren links/rechts der Mittellinie */
@media (min-width: 768px) {
  .journey-item--station { width: calc(50% - 64px); }
  .journey-item--right { margin-left: auto; }
  .journey-item--left .journey-dot { right: -40px; top: calc(50% - 7px); }
  .journey-item--right .journey-dot { left: -40px; top: calc(50% - 7px); }
}

/* Mobil: linke Schiene, Karten volle Breite */
@media (max-width: 767px) {
  .journey-item {
    margin-left: 44px;
    margin-bottom: 56px;
    text-align: left;
  }

  .journey-item--center { max-width: none; }
  .journey-card--start { padding: 28px 24px; }
  .journey-card--start .journey-card__icon { margin-left: 0; }
  .journey-card { padding: 24px 22px 26px; }
  .journey-card__media { margin: -24px -22px 16px; }

  /* Alle Ankerpunkte auf die Schiene (x einheitlich → sanft wellige Linie per JS-Wobble) */
  .journey-item .journey-dot,
  .journey-card--start .journey-dot,
  .journey-card--finale .journey-dot,
  .journey-fork__split,
  .journey-dot--sol-top,
  .journey-dot--sol-bottom,
  .journey-dot--branch-in,
  .journey-dot--branch-out {
    left: -37px;
    right: auto;
    top: 30px;
    bottom: auto;
  }

  /* Einzel-Overrides müssen den Sammelselektor oben ((0,2,0)) schlagen –
     daher jeweils mit .journey-item präfixen. */
  .journey-item .journey-dot--junction { left: -39px; }
  .journey-item--message > .journey-dot { top: calc(50% - 9px); }
  .journey-item .journey-dot--sol-top { top: 8px; }
  .journey-item .journey-dot--sol-bottom { top: auto; bottom: 8px; }
  .journey-item .journey-fork__split { top: auto; bottom: 4px; }

  .journey-fork__head {
    text-align: left;
    margin-bottom: 36px;
    padding-bottom: 28px;
  }

  .journey-item .journey-fork__merge {
    position: absolute;
    margin: 0;
    left: -39px;
    top: auto;
    bottom: -26px;
  }

  .journey-fork__branches { grid-template-columns: 1fr; gap: 24px; }
  .journey-item--solutions { padding: 40px 0; }
  .journey-solutions { text-align: left; }
  .journey-solutions > p { margin-left: 0; }
  .journey-chips { grid-template-columns: repeat(2, 1fr); }
  .journey-message { font-size: 20px; }
  .journey-orb--teal { width: 260px; height: 260px; }
  .journey-orb--warm { width: 280px; height: 280px; }
}

@media (max-width: 400px) {
  .journey-chips { grid-template-columns: 1fr; }
}

/* Reduzierte Bewegung: alles sichtbar, keine Animationen (JS zeichnet den Pfad voll) */
@media (prefers-reduced-motion: reduce) {
  .journey.is-enhanced .journey-item,
  .journey.is-enhanced .journey-chip {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .journey-card,
  .journey-chip,
  .journey-link::after { transition: none; }

  .journey-dot.is-reached { animation: none; }

  .journey.is-enhanced .journey-item--finale.is-reached .journey-sparkle--1,
  .journey.is-enhanced .journey-item--finale.is-reached .journey-sparkle--2,
  .journey.is-enhanced .journey-item--finale.is-reached .journey-sparkle--3 {
    animation: none;
    opacity: 0.9;
    transform: none;
  }
}