.agv-principles { background: var(--agv-mist); }
.agv-principles__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.agv-principles__headline { color: var(--agv-white); max-width: 14ch; }
.agv-principles__headline .agv-hl { color: var(--agv-coral); }
.agv-principles__text {
  max-width: 40ch;
  margin-top: clamp(20px, 2.4vw, 46px);
  color: var(--agv-teal);
}

/* Ziffer, Spur und Text stehen im Entwurf auf einer Achse: die
   senkrechte Linie läuft durch die Mitte der Ziffern, die kurze
   waagerechte zweigt unter dem Titel ab. */
.agv-principles__items {
  view-timeline-name: --agv-spur;
  --ziffer: clamp(38px, 2.82vw, 54px);
  --ziffer-gross: clamp(58px, 4.35vw, 84px);
  --stufen-abstand: clamp(32px, 4vw, 76px);
}
.agv-principles__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--ziffer) minmax(0, 1fr);
  gap: 0 clamp(20px, 3.86vw, 74px);
  align-items: start;
}
.agv-principles__item + .agv-principles__item { margin-top: var(--stufen-abstand); }
/* Die Spur verbindet die Ziffern und zeichnet sich beim Scrollen in
   zwei Etappen: erst von 01 nach 02, dann von 02 nach 03. */
.agv-principles__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--ziffer) / 2);
  top: var(--ziffer);
  bottom: calc(-1 * var(--stufen-abstand));
  width: 1px;
  background: var(--agv-white);
  transform-origin: 50% 0;
  animation: agv-spur 1s linear both;
  animation-timeline: --agv-spur;
}
.agv-principles__item:nth-child(1)::before { animation-range: cover 8% cover 34%; }
.agv-principles__item:nth-child(2)::before { animation-range: cover 34% cover 60%; }
@keyframes agv-spur { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@supports not (animation-timeline: view()) {
  .agv-principles__item::before { animation: none; }
}

.agv-principles__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ziffer);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--agv-white);
  color: var(--agv-number);
  font-size: var(--agv-fs-num);
  font-weight: 400;
  letter-spacing: -0.028em;
}
.agv-principles__item--em .agv-principles__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--agv-coral);
  border-radius: 50%;
  animation: agv-hub 4.6s ease-out infinite;
}
.agv-principles__item--em .agv-principles__badge {
  width: var(--ziffer-gross);
  margin-left: calc((var(--ziffer) - var(--ziffer-gross)) / 2);
  background: var(--agv-coral);
  color: var(--agv-white);
  font-size: var(--agv-fs-h5);
}

.agv-principles__title { color: var(--agv-white); }
.agv-principles__item--em .agv-principles__title {
  color: var(--agv-coral);
  font-size: var(--agv-fs-h3);
}
.agv-principles__body {
  margin-top: clamp(14px, 1.6vw, 30px);
  max-width: 44ch;
  color: var(--agv-deep);
}

@media (max-width: 900px) {
  .agv-principles__grid { grid-template-columns: minmax(0, 1fr); }
  .agv-principles__item { gap: 0 20px; }
  .agv-principles__headline,
  .agv-principles__text,
  .agv-principles__body { max-width: none; }
}