/* Erzeugt von build/bildfolgen.mjs - nicht von Hand aendern.
   Quelle: src/assets/img/zielpunkte.json
   Takt: 1100 ms je Bewegungsbild, 6000 ms Ruhe am Ende, 280 ms Blende */


/* ---------- hero: 4 Bilder, 11.7 s ---------- */
[data-folge="hero"] { --takt: 11700ms; --vorlauf: 2400ms; }
[data-folge="hero"] > img:nth-child(2) {
  animation-name: hero-b2;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes hero-b2 {
  0%, 29.915% { opacity: 0 }
  32.308%, 97.607% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="hero"] > img:nth-child(3) {
  animation-name: hero-b3;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes hero-b3 {
  0%, 39.316% { opacity: 0 }
  41.709%, 97.607% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="hero"] .zeiger {
  animation-name: hero-zeiger;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes hero-zeiger {
  0% { opacity: 0 }
  4.103% { opacity: 0 }
  29.915% { opacity: 0 }
  34.017% { opacity: 1; left: 42.2%; top: 46.2% }
  39.316% { opacity: 1; left: 42.2%; top: 46.2% }
  43.419% { opacity: 1; left: 56.6%; top: 46.2% }
  48.718% { opacity: 1; left: 56.6%; top: 46.2% }
  52.821% { opacity: 1; left: 81.8%; top: 60.5% }
  100% { opacity: 1; left: 81.8%; top: 60.5% }
}
[data-folge="hero"] .zeiger-ring {
  animation-name: hero-ring;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes hero-ring {
  0% { opacity: 0; transform: scale(0.4) }
  28.878999999999998% { opacity: 0; transform: scale(0.4) }
  28.889% { opacity: 0.55; transform: scale(0.4) }
  29.915% { opacity: 0.35; transform: scale(1) }
  33.504% { opacity: 0; transform: scale(1.5) }
  33.513999999999996% { opacity: 0; transform: scale(0.4) }
  38.281% { opacity: 0; transform: scale(0.4) }
  38.291% { opacity: 0.55; transform: scale(0.4) }
  39.316% { opacity: 0.35; transform: scale(1) }
  42.906% { opacity: 0; transform: scale(1.5) }
  42.916% { opacity: 0; transform: scale(0.4) }
  100% { opacity: 0; transform: scale(0.4) }
}

.hero-fenster { grid-area: 1 / 1; display: block; clip-path: inset(21% 0 0 63.7%); }
.hero-fenster > img { display: block; width: 100%; height: auto;
  animation-duration: var(--takt); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.hero-her > img { clip-path: inset(32.81% 0 0 0); }
.hero-weg > img { animation-name: hero-weg; }
.hero-her > img { animation-name: hero-her; }
@keyframes hero-weg {
  0%, 48.709% { opacity: 0; transform: translateY(0) }
  48.718% { opacity: 1; transform: translateY(0) }
  54.701%, 97.607% { opacity: 1; transform: translateY(-67.19%) }
  100% { opacity: 0; transform: translateY(-67.19%) }
}
@keyframes hero-her {
  0%, 48.709% { opacity: 0; transform: translateY(67.19%) }
  48.718% { opacity: 1; transform: translateY(67.19%) }
  54.701%, 97.607% { opacity: 1; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}

/* ---------- freigabe: 2 Bilder, 7.7 s ---------- */
[data-folge="freigabe"] { --takt: 7700ms; --vorlauf: 600ms; }
[data-folge="freigabe"] > img:nth-child(2) {
  animation-name: freigabe-b2;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes freigabe-b2 {
  0%, 22.078% { opacity: 0 }
  25.714%, 96.364% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="freigabe"] .zeiger {
  animation-name: freigabe-zeiger;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes freigabe-zeiger {
  0% { opacity: 1; left: 33.2%; top: 6.4% }
  6.234% { opacity: 1; left: 33.2%; top: 6.4% }
  22.078% { opacity: 1; left: 33.2%; top: 6.4% }
  28.312% { opacity: 1; left: 33.2%; top: 6.4% }
  100% { opacity: 1; left: 33.2%; top: 6.4% }
}
[data-folge="freigabe"] .zeiger-ring {
  animation-name: freigabe-ring;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes freigabe-ring {
  0% { opacity: 0; transform: scale(0.4) }
  20.508999999999997% { opacity: 0; transform: scale(0.4) }
  20.519% { opacity: 0.55; transform: scale(0.4) }
  22.078% { opacity: 0.35; transform: scale(1) }
  27.532% { opacity: 0; transform: scale(1.5) }
  27.542% { opacity: 0; transform: scale(0.4) }
  100% { opacity: 0; transform: scale(0.4) }
}

/* ---------- bauen: 6 Bilder, 12.1 s ---------- */
[data-folge="bauen"] { --takt: 12100ms; --vorlauf: 600ms; }
[data-folge="bauen"] > img:nth-child(2) {
  animation-name: bauen-b2;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes bauen-b2 {
  0%, 14.05% { opacity: 0 }
  16.364%, 97.686% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="bauen"] > img:nth-child(3) {
  animation-name: bauen-b3;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes bauen-b3 {
  0%, 23.14% { opacity: 0 }
  25.455%, 97.686% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="bauen"] > img:nth-child(4) {
  animation-name: bauen-b4;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes bauen-b4 {
  0%, 32.231% { opacity: 0 }
  34.545%, 97.686% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="bauen"] > img:nth-child(5) {
  animation-name: bauen-b5;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes bauen-b5 {
  0%, 41.322% { opacity: 0 }
  43.636%, 97.686% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="bauen"] > img:nth-child(6) {
  animation-name: bauen-b6;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes bauen-b6 {
  0%, 50.413% { opacity: 0 }
  52.727%, 97.686% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="bauen"] .zeiger {
  animation-name: bauen-zeiger;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes bauen-zeiger {
  0% { opacity: 0 }
  3.967% { opacity: 0 }
  14.05% { opacity: 0 }
  18.017% { opacity: 1; left: 52.3%; top: 50.1% }
  23.14% { opacity: 1; left: 52.3%; top: 50.1% }
  27.107% { opacity: 1; left: 63.9%; top: 48.1% }
  32.231% { opacity: 1; left: 63.9%; top: 48.1% }
  36.198% { opacity: 0; left: 63.9%; top: 48.1% }
  41.322% { opacity: 0; left: 63.9%; top: 48.1% }
  45.289% { opacity: 0; left: 63.9%; top: 47.3% }
  50.413% { opacity: 0; left: 63.9%; top: 47.3% }
  54.38% { opacity: 1; left: 63.9%; top: 50.1% }
  100% { opacity: 1; left: 63.9%; top: 50.1% }
}
[data-folge="bauen"] .zeiger-ring {
  animation-name: bauen-ring;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes bauen-ring {
  0% { opacity: 0; transform: scale(0.4) }
  22.139% { opacity: 0; transform: scale(0.4) }
  22.149% { opacity: 0.55; transform: scale(0.4) }
  23.14% { opacity: 0.35; transform: scale(1) }
  26.612% { opacity: 0; transform: scale(1.5) }
  26.622% { opacity: 0; transform: scale(0.4) }
  49.411% { opacity: 0; transform: scale(0.4) }
  49.421% { opacity: 0.55; transform: scale(0.4) }
  50.413% { opacity: 0.35; transform: scale(1) }
  53.884% { opacity: 0; transform: scale(1.5) }
  53.894% { opacity: 0; transform: scale(0.4) }
  100% { opacity: 0; transform: scale(0.4) }
}

/* ---------- teilprozess: 4 Bilder, 9.9 s ---------- */
[data-folge="teilprozess"] { --takt: 9900ms; --vorlauf: 600ms; }
[data-folge="teilprozess"] > img:nth-child(2) {
  animation-name: teilprozess-b2;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes teilprozess-b2 {
  0%, 17.172% { opacity: 0 }
  20%, 97.172% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="teilprozess"] > img:nth-child(3) {
  animation-name: teilprozess-b3;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes teilprozess-b3 {
  0%, 28.283% { opacity: 0 }
  31.111%, 97.172% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="teilprozess"] > img:nth-child(4) {
  animation-name: teilprozess-b4;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes teilprozess-b4 {
  0%, 39.394% { opacity: 0 }
  42.222%, 97.172% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="teilprozess"] .zeiger {
  animation-name: teilprozess-zeiger;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes teilprozess-zeiger {
  0% { opacity: 1; left: 70.1%; top: 58.8% }
  4.848% { opacity: 1; left: 70.1%; top: 58.8% }
  17.172% { opacity: 1; left: 70.1%; top: 58.8% }
  22.02% { opacity: 1; left: 70.1%; top: 58.8% }
  28.283% { opacity: 1; left: 70.1%; top: 58.8% }
  33.131% { opacity: 1; left: 83.3%; top: 33.8% }
  39.394% { opacity: 1; left: 83.3%; top: 33.8% }
  44.242% { opacity: 1; left: 63.5%; top: 52.6% }
  100% { opacity: 1; left: 63.5%; top: 52.6% }
}
[data-folge="teilprozess"] .zeiger-ring {
  animation-name: teilprozess-ring;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes teilprozess-ring {
  0% { opacity: 0; transform: scale(0.4) }
  15.950000000000001% { opacity: 0; transform: scale(0.4) }
  15.96% { opacity: 0.55; transform: scale(0.4) }
  17.172% { opacity: 0.35; transform: scale(1) }
  21.414% { opacity: 0; transform: scale(1.5) }
  21.424000000000003% { opacity: 0; transform: scale(0.4) }
  38.172000000000004% { opacity: 0; transform: scale(0.4) }
  38.182% { opacity: 0.55; transform: scale(0.4) }
  39.394% { opacity: 0.35; transform: scale(1) }
  43.636% { opacity: 0; transform: scale(1.5) }
  43.646% { opacity: 0; transform: scale(0.4) }
  100% { opacity: 0; transform: scale(0.4) }
}

/* ---------- ki: 5 Bilder, 11.0 s ---------- */
[data-folge="ki"] { --takt: 11000ms; --vorlauf: 600ms; }
[data-folge="ki"] > img:nth-child(2) {
  animation-name: ki-b2;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes ki-b2 {
  0%, 15.455% { opacity: 0 }
  18%, 97.455% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="ki"] > img:nth-child(3) {
  animation-name: ki-b3;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes ki-b3 {
  0%, 25.455% { opacity: 0 }
  28%, 97.455% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="ki"] > img:nth-child(4) {
  animation-name: ki-b4;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes ki-b4 {
  0%, 35.455% { opacity: 0 }
  38%, 97.455% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="ki"] > img:nth-child(5) {
  animation-name: ki-b5;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes ki-b5 {
  0%, 45.455% { opacity: 0 }
  48%, 97.455% { opacity: 1 }
  100% { opacity: 0 }
}
[data-folge="ki"] .chat-zeile:nth-child(1) {
  animation-name: ki-chat1;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes ki-chat1 {
  0%, 1.091% { opacity: 0; transform: translateY(0.5em) }
  5.636%, 97.455% { opacity: 1; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
[data-folge="ki"] .chat-zeile:nth-child(2) {
  animation-name: ki-chat2;
  animation-duration: var(--takt);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes ki-chat2 {
  0%, 7.091% { opacity: 0; transform: translateY(0.5em) }
  9.818%, 97.455% { opacity: 1; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}

/* ---------- ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-folge="hero"] > img:nth-child(2) { animation-name: none; }
  [data-folge="hero"] > img:nth-child(3) { animation-name: none; }
  [data-folge="hero"] .zeiger { animation-name: none; }
  [data-folge="hero"] .zeiger-ring { animation-name: none; }
  [data-folge="freigabe"] > img:nth-child(2) { animation-name: none; }
  [data-folge="freigabe"] .zeiger { animation-name: none; }
  [data-folge="freigabe"] .zeiger-ring { animation-name: none; }
  [data-folge="bauen"] > img:nth-child(2) { animation-name: none; }
  [data-folge="bauen"] > img:nth-child(3) { animation-name: none; }
  [data-folge="bauen"] > img:nth-child(4) { animation-name: none; }
  [data-folge="bauen"] > img:nth-child(5) { animation-name: none; }
  [data-folge="bauen"] > img:nth-child(6) { animation-name: none; }
  [data-folge="bauen"] .zeiger { animation-name: none; }
  [data-folge="bauen"] .zeiger-ring { animation-name: none; }
  [data-folge="teilprozess"] > img:nth-child(2) { animation-name: none; }
  [data-folge="teilprozess"] > img:nth-child(3) { animation-name: none; }
  [data-folge="teilprozess"] > img:nth-child(4) { animation-name: none; }
  [data-folge="teilprozess"] .zeiger { animation-name: none; }
  [data-folge="teilprozess"] .zeiger-ring { animation-name: none; }
  [data-folge="ki"] > img:nth-child(2) { animation-name: none; }
  [data-folge="ki"] > img:nth-child(3) { animation-name: none; }
  [data-folge="ki"] > img:nth-child(4) { animation-name: none; }
  [data-folge="ki"] > img:nth-child(5) { animation-name: none; }
  [data-folge="ki"] .chat-zeile:nth-child(1) { animation-name: none; }
  [data-folge="ki"] .chat-zeile:nth-child(2) { animation-name: none; }
  .hero-weg > img { animation-name: none; }
  .hero-her > img { animation-name: none; }
}