/* =========================================================
   TIMELINE ARROW – PREMIUM FINAL (REFINED ARROWHEAD)
   ========================================================= */

.pt-timeline-arrow {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pt-timeline-arrow svg {
  width: 26px;
  height: 550px;
  overflow: visible;
}

/* =========================================================
   LINE
   ========================================================= */

.pt-line {
  fill: none;
  stroke: url(#pt-arrow-gradient);

  stroke-width: 1.55;
  stroke-linecap: butt;

  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* =========================================================
   ARROW (ruhiger, länger)
   ========================================================= */

.pt-arrow-left,
.pt-arrow-right {
  fill: none;
  stroke: url(#pt-arrow-gradient);

  stroke-width: 1.9;
  stroke-linecap: butt;

  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* =========================================================
   ANIMATION – deutlich ruhiger
   ========================================================= */

.pt-timeline-arrow.is-visible .pt-line {
  animation: pt-draw-line 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Spitze direkt anschließend, ohne harte Pause */
.pt-timeline-arrow.is-visible .pt-arrow-left,
.pt-timeline-arrow.is-visible .pt-arrow-right {
  animation: pt-draw-arrow 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 2.45s;
}

/* ========================================================= */

@keyframes pt-draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes pt-draw-arrow {
  to { stroke-dashoffset: 0; }
}