.agv-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(56.25vw, 1080px);
  padding-block: clamp(72px, 8vw, 150px);
  overflow: hidden;
  background: var(--agv-teal);
  color: var(--agv-white);

  /* Eine Einheit entspricht 1 % der Entwurfsbreite (1920px). Damit
     lassen sich die Maße aus dem Entwurf unverändert übernehmen und
     die Kreisbahnen behalten in jeder Breite ihre Lage. */
  --u: min(1vw, 19.2px);
}
.agv-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Kreisbahnen ---------------------------------------- */
.agv-hero__orbits {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.agv-hero__parallax { position: absolute; inset: 0; }
@supports (animation-timeline: scroll(root)) {
  .agv-hero__parallax {
    animation: agv-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
}
@keyframes agv-parallax { to { transform: translateY(-70px); } }

.agv-hero__ring,
.agv-hero__track {
  position: absolute;
  border-radius: 50%;
}
.agv-hero__ring { border: 2px solid var(--agv-line-soft); box-sizing: border-box; }
.agv-hero__dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(2.777 * var(--u));
  aspect-ratio: 1;
  margin: calc(-1.389 * var(--u)) 0 0 calc(-1.389 * var(--u));
  border-radius: 50%;
  background: var(--agv-line-soft);
}

.agv-hero__ring--1, .agv-hero__track--1 {
  left: calc(57.531 * var(--u)); top: calc(17.278 * var(--u));
  width: calc(62.502 * var(--u)); height: calc(62.502 * var(--u));
}
.agv-hero__ring--2, .agv-hero__track--2 {
  left: calc(65.240 * var(--u)); top: calc(24.986 * var(--u));
  width: calc(47.084 * var(--u)); height: calc(47.084 * var(--u));
}
.agv-hero__ring--3, .agv-hero__track--3 {
  left: calc(73.056 * var(--u)); top: calc(32.803 * var(--u));
  width: calc(31.451 * var(--u)); height: calc(31.451 * var(--u));
}
.agv-hero__track--1 { animation: agv-orbit 46s linear infinite; }
.agv-hero__track--2 { animation: agv-orbit-rev 34s linear infinite; animation-delay: -8.5s; }
.agv-hero__track--3 { animation: agv-orbit 25s linear infinite; animation-delay: -4.5s; }
.agv-hero__track--3 .agv-hero__dot { background: var(--agv-coral); }

/* ---- Inhalt --------------------------------------------- */
.agv-hero__inner { position: relative; width: 100%; }
.agv-hero__headline { max-width: 15ch; }
.agv-hero__accent { color: var(--agv-coral-warm); }
.agv-hero__subline {
  max-width: 48ch;
  margin-top: clamp(20px, 2.2vw, 42px);
}
.agv-hero__action { margin-top: clamp(28px, 3vw, 58px); }

/* Der Einstieg läuft auf der Dokumentzeitleiste: die Wörter werden
   sichtbar ausgeliefert, die Bewegung kommt erst dazu. */
.agv-hero__word { display: inline-block; }
html[data-agv-intro="an"] .agv-hero__word {
  animation: agv-word .9s cubic-bezier(.2, .7, .2, 1) both;
}

@media (max-width: 640px) {
  .agv-hero { min-height: 82vh; }
  .agv-hero__headline { max-width: none; }
}