.agv-services__headline {
  color: var(--agv-white);
  max-width: 18ch;
  margin-bottom: clamp(40px, 4.8vw, 92px);
}
.agv-services__headline .agv-hl { color: var(--agv-coral); }
.agv-services__row {
  display: grid;
  grid-template-columns: clamp(64px, 7.34vw, 141px) minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(20px, 2.3vw, 44px);
  align-items: start;
  padding-block: clamp(26px, 3vw, 58px);
  border-top: 1px solid var(--agv-muted);
}
.agv-services__row:last-child { padding-bottom: 0; }
/* Das Symbol gibt die Zeitleiste vor, an der sich seine Striche
   aufbauen — jeder Pfad hat im Entwurf sein eigenes Zeitfenster. */
.agv-services__symbol { view-timeline-name: --agv-symbol; }
.agv-services__icon {
  display: block;
  width: clamp(34px, 3.2vw, 62px);
  height: auto;
  overflow: visible;
}

.agv-icon__p {
  transform-box: fill-box;
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  animation-fill-mode: both;
  animation-timeline: --agv-symbol;
  animation-range: cover var(--von) cover var(--bis);
}
.agv-icon__p--strich { transform-origin: left center;   animation-name: agv-strich; }
.agv-icon__p--saeule { transform-origin: center bottom; animation-name: agv-saeule; }
.agv-icon__p--punkt  { transform-origin: center;        animation-name: agv-punkt; }

@keyframes agv-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes agv-saeule { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes agv-punkt  { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

/* Ohne scroll-gebundene Bewegung steht das Symbol einfach fertig da. */
@supports not (animation-timeline: view()) {
  .agv-icon__p { animation: none; }
}
.agv-services__title { color: var(--agv-white); }
.agv-services__text { color: var(--agv-white); }
.agv-services__accent {
  display: block;
  margin-top: clamp(10px, 1.1vw, 22px);
  color: var(--agv-coral);
}

@media (max-width: 900px) {
  .agv-services__headline { max-width: none; }
  .agv-services__row {
    grid-template-columns: clamp(44px, 12vw, 64px) minmax(0, 1fr);
    gap: 16px 20px;
  }
  .agv-services__body { grid-column: 2; }
}