/* Hero-Kette — Agenten → Orchestrierung → Cockpit (seit 08.10.2026, v3_10).
   Jedes Glied trägt seine Leistungsfarbe nur als Punkt und Beschriftung (Brandguide,
   „Leistungsfarben"). Die Verbindungslinie bleibt neutral, der wandernde Lichtpunkt ist weiß —
   kein Verlauf zwischen zwei Leistungsfarben. */

.hero-kette li:nth-child(2) { --ton: var(--ton-agenten); }
.hero-kette li:nth-child(3) { --ton: var(--ton-orchestrierung); }
.hero-kette li:nth-child(4) { --ton: var(--ton-cockpit); }

.hero-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  font-size: 14px; color: var(--gray-300);
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: 2px;
}
.hero-textlink:hover { color: var(--white); border-color: var(--white); opacity: 1; }
.hero-textlink .arrow { transition: transform .25s; }
.hero-textlink:hover .arrow { transform: translateX(4px); }

.hero-kette {
  --luecke: 40px;
  --punkt: 11px;
  list-style: none;
  margin: 88px 0 0; padding: 40px 0 0;
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luecke);
}

/* Neutrale Linie vom ersten zum letzten Punkt */
.hero-kette .kette-spur {
  position: absolute; top: 0; height: 1px;
  left: calc(var(--punkt) / 2);
  right: calc((100% - 2 * var(--luecke)) / 3 - var(--punkt) / 2);
  background: rgba(255,255,255,.16);
}
.kette-puls {
  position: absolute; top: -1px; left: 0;
  width: 90px; height: 3px; margin-left: -45px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
  animation: kette-puls 6s linear infinite;
}
@keyframes kette-puls {
  0%   { left: 0;    opacity: 0; }
  4%   { opacity: 1; }
  66%  { opacity: 1; }
  70%  { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

.kette-glied {
  position: relative; display: block;
  color: var(--off-white);
}
.kette-glied:hover { opacity: 1; }
.kette-glied::before {             /* Farbpunkt auf der Linie */
  content: ""; position: absolute;
  top: calc(-40px - var(--punkt) / 2); left: 0;
  width: var(--punkt); height: var(--punkt); border-radius: 50%;
  background: rgb(var(--ton));
  box-shadow: 0 0 0 4px var(--navy-900);
  animation: kette-glimmen 6s linear infinite;
}
/* Der Punkt glimmt kurz, wenn der Lichtpunkt ihn erreicht (0 %, 35 %, 70 % des Takts) */
.hero-kette li:nth-child(3) .kette-glied::before { animation-delay: 2.1s; }
.hero-kette li:nth-child(4) .kette-glied::before { animation-delay: 4.2s; }
@keyframes kette-glimmen {
  0%, 100% { box-shadow: 0 0 0 4px var(--navy-900), 0 0 0 4px rgba(var(--ton), 0); }
  4%       { box-shadow: 0 0 0 4px var(--navy-900), 0 0 0 10px rgba(var(--ton), .15); }
  16%      { box-shadow: 0 0 0 4px var(--navy-900), 0 0 0 4px rgba(var(--ton), 0); }
}

.kette-kicker {
  display: block; margin-bottom: 10px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--ton));
}
.kette-glied strong {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 400; color: var(--white);
  margin-bottom: 6px;
}
.kette-glied strong::after {
  content: "→"; font-size: 15px; color: var(--gray-400);
  transition: transform .25s, color .25s;
}
.kette-glied:hover strong::after { transform: translateX(4px); color: rgb(var(--ton)); }
.kette-text {
  display: block; max-width: 30ch;
  font-size: 14px; line-height: 1.55; color: var(--gray-300); font-weight: 300;
}

/* Schmal: Kette läuft senkrecht */
@media (max-width: 760px) {
  .hero-kette {
    grid-template-columns: 1fr; gap: 28px;
    margin-top: 56px; padding: 0 0 0 30px;
  }
  .hero-kette .kette-spur {
    top: 6px; bottom: auto; left: calc(var(--punkt) / 2); right: auto;
    width: 1px; height: calc(100% - 92px);
  }
  .kette-puls {
    top: 0; left: -1px; width: 3px; height: 70px; margin: -35px 0 0;
    animation-name: kette-puls-senkrecht;
  }
  .kette-glied::before { top: 4px; left: calc(-30px); }
}
@keyframes kette-puls-senkrecht {
  0%   { top: 0;    opacity: 0; }
  4%   { opacity: 1; }
  66%  { opacity: 1; }
  70%  { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kette-puls { display: none; }
  .kette-glied::before { animation: none; }
}

.hero h1 .nowrap { white-space: nowrap; }