.ablaufmedium {
  aspect-ratio: 1.25;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.ablaufmedium--offen { overflow: visible; }

.zeiger {
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.zeiger svg { width: 100%; height: 100%; display: block; }
.zeiger svg path {
  fill: var(--farbe-weiss);
  stroke: var(--farbe-schwarz);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drehplan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 1.6rem 1.4rem;
  background: var(--farbe-tinte);
  position: relative;
}
.drehplan__zeile {
  display: grid;
  grid-template-columns: 4.4rem 1.2rem 1fr;
  align-items: center;
  gap: .9rem;
  height: 2.9rem;
  padding: 0 .8rem;
  border-radius: .2rem;
  opacity: .34;
  transition: opacity var(--dauer-3) var(--kurve-weich);
}
.drehplan__zeit {
  color: var(--farbe-weiss);
  font: 600 1.2rem/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
  opacity: .6;
}
.drehplan__punkt {
  width: .9rem; height: .9rem;
  border-radius: 50%;
  border: .2rem solid var(--farbe-violett-hell);
  justify-self: center;
}
.drehplan__text {
  color: var(--farbe-weiss);
  font: 500 1.25rem/1.3 Inter, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ist-sichtbar .drehplan__zeile { animation: drehplan-zeile 15s var(--kurve-weich) infinite; }
.ist-sichtbar .drehplan__zeile:nth-child(2) { animation-delay: 2.2s; }
.ist-sichtbar .drehplan__zeile:nth-child(3) { animation-delay: 4.4s; }
.ist-sichtbar .drehplan__zeile:nth-child(4) { animation-delay: 6.6s; }
.ist-sichtbar .drehplan__zeile:nth-child(5) { animation-delay: 8.8s; }
.ist-sichtbar .drehplan__zeile:nth-child(6) { animation-delay: 11s; }

@keyframes drehplan-zeile {
  0%, 1%    { opacity: .34; background: none; }
  3%, 13%   { opacity: 1;   background: var(--farbe-flaeche-hell-zart); }
  15%, 100% { opacity: .62; background: none; }
}
[data-ablaufmedium]:not(.ist-sichtbar) .drehplan__zeile { opacity: 1; }

.ist-sichtbar .drehplan .zeiger { animation: drehplan-zeiger 15s linear infinite; }
@keyframes drehplan-zeiger {
  0%        { opacity: 0; left: 7rem;    top: calc(50% - 7.9rem); }
  2%, 12%   { opacity: 1; left: 7rem;    top: calc(50% - 7.9rem); animation-timing-function: var(--kurve-maus-los); }
  13.4%     { opacity: 1; left: 7.5rem;  top: calc(50% - 6.9rem); }
  14.6%     { opacity: 1; left: 7.2rem;  top: calc(50% - 4.6rem); animation-timing-function: var(--kurve-maus-korr); }
  15.8%, 27% { opacity: 1; left: 7rem;   top: calc(50% - 5rem);   animation-timing-function: var(--kurve-maus-los); }
  28.2%     { opacity: 1; left: 6.4rem;  top: calc(50% - 4rem);   }
  29.6%     { opacity: 1; left: 6.7rem;  top: calc(50% - 1.7rem); animation-timing-function: var(--kurve-maus-korr); }
  30.8%, 42% { opacity: 1; left: 7rem;   top: calc(50% - 2.1rem); animation-timing-function: var(--kurve-maus-los); }
  43.3%     { opacity: 1; left: 7.6rem;  top: calc(50% - 1.1rem); }
  44.7%     { opacity: 1; left: 7.3rem;  top: calc(50% + 1.2rem); animation-timing-function: var(--kurve-maus-korr); }
  45.9%, 57% { opacity: 1; left: 7rem;   top: calc(50% + .8rem);  animation-timing-function: var(--kurve-maus-los); }
  58.3%     { opacity: 1; left: 6.5rem;  top: calc(50% + 1.8rem); }
  59.7%     { opacity: 1; left: 6.8rem;  top: calc(50% + 4.1rem); animation-timing-function: var(--kurve-maus-korr); }
  60.9%, 72% { opacity: 1; left: 7rem;   top: calc(50% + 3.7rem); animation-timing-function: var(--kurve-maus-los); }
  73.3%     { opacity: 1; left: 7.6rem;  top: calc(50% + 4.7rem); }
  74.7%     { opacity: 1; left: 7.3rem;  top: calc(50% + 7rem);   animation-timing-function: var(--kurve-maus-korr); }
  75.9%, 92% { opacity: 1; left: 7rem;   top: calc(50% + 6.6rem); }
  97%, 100% { opacity: 0; left: 7rem;    top: calc(50% + 6.6rem); }
}

.beitragslauf { display: block; width: 100%; height: 100%; position: relative; overflow: visible; }
.beitragslauf__buehne {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.beitragslauf__karte {
  position: absolute;
  width: 52%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  opacity: 0;
  transition: transform 1.1s var(--kurve-aus),
              opacity var(--dauer-6) var(--kurve-weich),
              box-shadow 1.1s var(--kurve-weich);
}
.beitragslauf__karte video { width: 100%; height: 100%; object-fit: cover; display: block; }

.beitragslauf__karte.ist-vorne {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
  box-shadow: var(--schatten-vorne);
}
.beitragslauf__karte.ist-links {
  transform: translateX(-56%) scale(.72);
  opacity: 1;
  z-index: 1;
}
.beitragslauf__karte.ist-rechts {
  transform: translateX(56%) scale(.72);
  opacity: 1;
  z-index: 2;
}

.kanaele {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.6rem;
  height: 100%;
  background: var(--farbe-weiss);
  position: relative;
}
.kanaele__verlauf { flex: 1; display: flex; flex-direction: column; gap: .9rem; justify-content: flex-end; }
.kanaele__zeile { display: flex; align-items: flex-end; gap: .8rem; opacity: 0; }
.kanaele__zeile--rechts { flex-direction: row-reverse; }
.kanaele__bildnis {
  flex-shrink: 0;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--farbe-flaeche);
}
.kanaele__zeile--rechts .kanaele__bildnis { background: var(--farbe-violett-hell); }
.kanaele__blase {
  max-width: 76%;
  padding: .8rem 1.2rem;
  border-radius: .3rem;
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  font: 400 1.25rem/1.4 Inter, sans-serif;
  border-bottom-left-radius: .2rem;
}
.kanaele__zeile--rechts .kanaele__blase {
  background: var(--farbe-tinte);
  color: var(--farbe-weiss);
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .2rem;
}

.kanaele__leiste {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .6rem .6rem 1.2rem;
  border: 1px solid var(--farbe-linie);
  border-radius: .8rem;
  background: var(--farbe-weiss);
  flex-shrink: 0;
}
.kanaele__feld {
  flex: 1;
  min-width: 0;
  color: var(--farbe-tinte);
  font: 400 1.25rem/1.6 Inter, sans-serif;
  white-space: nowrap;
  overflow: hidden;
}
.kanaele__tipptext { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; }
.kanaele__senden {
  flex-shrink: 0;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  background: var(--farbe-tinte);
  color: var(--farbe-weiss);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kanaele__senden svg { width: 1.4rem; height: 1.4rem; display: block; }

.kanaele__fuss {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--farbe-text-zweit);
  font: 600 1.1rem/1.3 Inter, sans-serif;
  opacity: 0;
}
.kanaele__haken { width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: var(--farbe-violett-link); }
.kanaele__haken svg { width: 100%; height: 100%; display: block; }

.ist-sichtbar .kanaele__zeile--frage   { animation: kanaele-frage   18s var(--kurve-weich) infinite; }
.ist-sichtbar .kanaele__zeile--antwort { animation: kanaele-antwort 18s var(--kurve-weich) infinite; }
.ist-sichtbar .kanaele__fuss           { animation: kanaele-fuss    18s var(--kurve-weich) infinite; }
.ist-sichtbar .kanaele__tipptext       { animation: kanaele-tippen  18s steps(38, end) infinite; }
.ist-sichtbar .kanaele__leiste         { animation: kanaele-leiste  18s var(--kurve-weich) infinite; }
.ist-sichtbar .kanaele__senden         { animation: kanaele-knopf   18s var(--kurve-weich) infinite; }
.ist-sichtbar .kanaele .zeiger         { animation: kanaele-zeiger  18s linear infinite; }

@keyframes kanaele-frage {
  0%        { opacity: 0; transform: translateY(.8rem); }
  5%, 92%   { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes kanaele-leiste {
  0%, 17%   { border-color: var(--farbe-linie); }
  20%, 62%  { border-color: var(--farbe-violett-link); }
  66%, 100% { border-color: var(--farbe-linie); }
}
@keyframes kanaele-tippen {
  0%, 22%   { width: 0; }
  56%, 70%  { width: 21ch; }
  72%, 100% { width: 0; }
}
@keyframes kanaele-knopf {
  0%, 70%    { transform: scale(1); }
  71.4%      { transform: scale(.84); }
  73.4%, 100% { transform: scale(1); }
}
@keyframes kanaele-antwort {
  0%, 72%   { opacity: 0; transform: translateY(.8rem); }
  77%, 92%  { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes kanaele-fuss {
  0%, 80%   { opacity: 0; }
  85%, 92%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes kanaele-zeiger {
  0%       { opacity: 1; left: 4rem;    top: 42%; transform: scale(1); }
  8%       { opacity: 1; left: 4rem;    top: 42%; transform: scale(1); animation-timing-function: var(--kurve-maus-los); }
  8.88%    { opacity: 1; left: 3.8rem;  top: calc(48.96% - .41rem);  transform: scale(1); }
  10.08%   { opacity: 1; left: 3.68rem; top: calc(66.36% - 1.43rem); transform: scale(1); }
  11.52%   { opacity: 1; left: 4.51rem; top: calc(83.76% - 2.45rem); transform: scale(1); }
  13.04%   { opacity: 1; left: 5.43rem; top: calc(94.2% - 3.06rem);  transform: scale(1); }
  14.48%   { opacity: 1; left: 6.4rem;  top: calc(100% - 3.15rem);   transform: scale(1); animation-timing-function: var(--kurve-maus-korr); }
  16%      { opacity: 1; left: 6rem;    top: calc(100% - 3.4rem); transform: scale(1); }
  17.4%    { opacity: 1; left: 6rem;    top: calc(100% - 3.4rem); transform: scale(.8); }
  19.4%    { opacity: 1; left: 6rem;    top: calc(100% - 3.4rem); transform: scale(1); }
  62%      { opacity: 1; left: 6rem;    top: calc(100% - 3.4rem); transform: scale(1); animation-timing-function: var(--kurve-maus-los); }
  62.88%   { opacity: 1; left: calc(12% + 4.78rem); top: calc(100% - 3.78rem); transform: scale(1); }
  64.08%   { opacity: 1; left: calc(42% + 1.72rem); top: calc(100% - 4.28rem); transform: scale(1); }
  65.52%   { opacity: 1; left: calc(72% - 1.34rem); top: calc(100% - 4.11rem); transform: scale(1); }
  67.04%   { opacity: 1; left: calc(90% - 3.18rem); top: calc(100% - 3.68rem); transform: scale(1); }
  68.48%   { opacity: 1; left: calc(100% - 3.7rem); top: calc(100% - 3.9rem);  transform: scale(1); animation-timing-function: var(--kurve-maus-korr); }
  70%      { opacity: 1; left: calc(100% - 4.2rem); top: calc(100% - 3.4rem); transform: scale(1); }
  71.4%    { opacity: 1; left: calc(100% - 4.2rem); top: calc(100% - 3.4rem); transform: scale(.8); }
  73.4%, 92% { opacity: 1; left: calc(100% - 4.2rem); top: calc(100% - 3.4rem); transform: scale(1); }
  97%,100% { opacity: 0; left: calc(100% - 4.2rem); top: calc(100% - 3.4rem); transform: scale(1); }
}

.reichweite {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--farbe-gelb);
  position: relative;
  overflow: hidden;
}
.reichweite__zahl {
  font: 800 21rem/1 Inter, sans-serif;
  letter-spacing: 0;
  display: flex;
  align-items: flex-end;
  gap: .06em;
}
@media screen and (width >= 1025px) { .reichweite__zahl { font-size: 26rem; } }

.reichweite__ziffer {
  display: block;
  background: var(--verlauf-gelb-zahl);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.reichweite__mal { width: .4em; height: .4em; flex-shrink: 0; margin-bottom: .14em; }
.reichweite__mal svg { width: 100%; height: 100%; display: block; }
.reichweite__mal stop:first-child { stop-color: var(--farbe-gelb-tiefer); }
.reichweite__mal stop:last-child  { stop-color: var(--farbe-gelb-tief); }

@media (prefers-reduced-motion: reduce) {
  .ist-sichtbar .drehplan__zeile,
  .ist-sichtbar .drehplan .zeiger,
  .ist-sichtbar .kanaele__zeile--frage, .ist-sichtbar .kanaele__zeile--antwort,
  .ist-sichtbar .kanaele__fuss, .ist-sichtbar .kanaele__tipptext,
  .ist-sichtbar .kanaele__leiste, .ist-sichtbar .kanaele__senden,
  .ist-sichtbar .kanaele .zeiger {
    animation: none;
  }
  .drehplan__zeile { opacity: 1; }
  .kanaele__zeile, .kanaele__fuss { opacity: 1; transform: none; }
  .kanaele__tipptext { width: 21ch; }
  .zeiger { display: none; }
  .beitragslauf__karte { transition: none; }
}