.vmedium {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--farbe-flaeche);
}
.vmedium--weiss { background: var(--farbe-weiss); }
.vmedium--tinte { background: var(--farbe-tinte); }
.vmedium--gelb  { background: var(--farbe-gelb); }
.vmedium--lila  { background: var(--verlauf-lila-karte); }
.vmedium--blau  { background: var(--verlauf-blau-karte); }

.vmedium__platzhalter {
  position: absolute;
  inset: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed var(--farbe-platzhalter-hell);
  border-radius: .3rem;
  color: var(--farbe-platzhalter-hell);
  letter-spacing: -.02em;
  font: 600 1.4rem/1.3 Inter, sans-serif;
}
.vmedium--weiss .vmedium__platzhalter,
.vmedium--gelb  .vmedium__platzhalter {
  border-color: var(--farbe-text-zweit);
  color: var(--farbe-text-zweit);
}

.vmedium picture { display: block; height: 100%; }
.vmedium picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vmedium video { width: 100%; height: 100%; object-fit: cover; display: block; }

.vmedium .stapel__blatt img { height: auto; object-fit: fill; }
.vmedium .beitragslauf__karte picture { height: 100%; }
.vmedium .beitragslauf__karte { opacity: 1; }
.vmedium .beitragslauf__karte:nth-child(1) { transform: translateX(-56%) scale(.72); z-index: 1; }
.vmedium .beitragslauf__karte:nth-child(2) { transform: none; z-index: 3; box-shadow: var(--schatten-vorne); }
.vmedium .beitragslauf__karte:nth-child(3) { transform: translateX(56%) scale(.72); z-index: 2; }
.vmedium .beitragslauf__karte.ist-links,
.vmedium .beitragslauf__karte.ist-vorne,
.vmedium .beitragslauf__karte.ist-rechts { box-shadow: none; }
.vmedium .beitragslauf__karte.ist-vorne { box-shadow: var(--schatten-vorne); }


.gschnitt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.gschnitt__sicht {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--farbe-flaeche-dunkel);
}
.gschnitt__gross { position: absolute; inset: 0; display: block; opacity: 0; }
.gschnitt__gross picture { display: block; width: 100%; height: 100%; }
.gschnitt__gross--a { opacity: 1; }
.gschnitt__spur {
  position: relative;
  height: 22%;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: .3rem;
  padding: .5rem;
  background: var(--farbe-flaeche-dunkel);
}
.gschnitt__clip {
  position: relative;
  overflow: hidden;
  display: block;
  opacity: .34;
  outline: .2rem solid var(--farbe-klar);
  outline-offset: -.2rem;
}
.gschnitt__clip picture { display: block; width: 100%; height: 100%; }
.gschnitt__clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gschnitt__clip--a { flex: 34; }
.gschnitt__clip--b { flex: 41; }
.gschnitt__clip--c { flex: 25; }
.gschnitt__kopf {
  position: absolute;
  top: -.3rem;
  bottom: -.3rem;
  left: .5rem;
  width: .25rem;
  border-radius: .8rem;
  background: var(--farbe-weiss);
  z-index: 4;
}
.ist-sichtbar .gschnitt__kopf     { animation: gschnitt-kopf 8.4s linear infinite; }
.ist-sichtbar .gschnitt__clip--a  { animation: gschnitt-a 8.4s var(--kurve-weich) infinite; }
.ist-sichtbar .gschnitt__clip--b  { animation: gschnitt-b 8.4s var(--kurve-weich) infinite; }
.ist-sichtbar .gschnitt__clip--c  { animation: gschnitt-c 8.4s var(--kurve-weich) infinite; }
.ist-sichtbar .gschnitt__gross--a { animation: gschnitt-gross-a 8.4s steps(1, end) infinite; }
.ist-sichtbar .gschnitt__gross--b { animation: gschnitt-gross-b 8.4s steps(1, end) infinite; }
.ist-sichtbar .gschnitt__gross--c { animation: gschnitt-gross-c 8.4s steps(1, end) infinite; }
.ist-sichtbar .gschnitt .zeiger   { animation: gschnitt-zeiger 8.4s linear infinite; }
@keyframes gschnitt-kopf {
  0%        { left: 1.6%; }
  92%, 100% { left: 99.2%; }
}
@keyframes gschnitt-a {
  0%, 29.8%   { opacity: 1; outline-color: var(--farbe-violett-link); }
  32.8%, 100% { opacity: .62; outline-color: var(--farbe-klar); }
}
@keyframes gschnitt-b {
  0%, 29.8%   { opacity: .34; outline-color: var(--farbe-klar); }
  32.8%, 67.4% { opacity: 1; outline-color: var(--farbe-violett-link); }
  70.4%, 100% { opacity: .62; outline-color: var(--farbe-klar); }
}
@keyframes gschnitt-c {
  0%, 67.4%   { opacity: .34; outline-color: var(--farbe-klar); }
  70.4%, 100% { opacity: 1; outline-color: var(--farbe-violett-link); }
}
@keyframes gschnitt-gross-a { 0%, 30.8% { opacity: 1; } 30.9%, 100% { opacity: 0; } }
@keyframes gschnitt-gross-b { 0%, 30.8% { opacity: 0; } 30.9%, 68.4% { opacity: 1; } 68.5%, 100% { opacity: 0; } }
@keyframes gschnitt-gross-c { 0%, 68.4% { opacity: 0; } 68.5%, 100% { opacity: 1; } }
@keyframes gschnitt-zeiger {
  0%      { opacity: 0; left: 108%; top: 112%; transform: none; animation-timing-function: var(--kurve-maus-los); }
  4%      { opacity: 1; }
  11%     { left: 44%; top: 86%; animation-timing-function: var(--kurve-maus-korr); }
  15%     { left: 18%; top: 83%; transform: none; }
  17%     { transform: scale(.82); }
  19%     { transform: none; }
  40%     { left: 19.4%; top: 83.6%; animation-timing-function: var(--kurve-maus-los); }
  45%     { left: 58%; top: 79%; animation-timing-function: var(--kurve-maus-korr); }
  48%     { left: 51%; top: 83%; transform: none; }
  50%     { transform: scale(.82); }
  52%     { transform: none; }
  66%     { left: 51.6%; top: 83.4%; animation-timing-function: var(--kurve-maus-los); }
  70%     { left: 88%; top: 79%; animation-timing-function: var(--kurve-maus-korr); }
  73%     { left: 82%; top: 83%; transform: none; }
  75%     { transform: scale(.82); }
  77%     { transform: none; }
  92%     { left: 82.4%; top: 83.6%; opacity: 1; }
  99%,100%{ left: 112%; top: 116%; opacity: 0; }
}

.grund {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.grund__bild { position: absolute; inset: 0; display: block; opacity: 0; }
.grund__bild picture { display: block; width: 100%; height: 100%; }
.grund__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grund__bild--eins { opacity: 1; }
.grund__balken {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 3;
  display: flex;
  gap: .4rem;
}
.grund__balken i {
  flex: 1;
  height: .3rem;
  border-radius: .8rem;
  background: var(--farbe-flaeche-hell);
  display: block;
  position: relative;
  overflow: hidden;
}
.grund__balken i::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: .8rem;
  background: var(--farbe-weiss);
}
.grund__tipp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 8rem;
  height: 8rem;
  margin: -4rem 0 0 -4rem;
  border-radius: 50%;
  border: .2rem solid var(--farbe-weiss);
  opacity: 0;
  pointer-events: none;
}
.ist-sichtbar .grund__bild--eins { animation: grund-1 9s steps(1, end) infinite; }
.ist-sichtbar .grund__bild--zwei { animation: grund-2 9s steps(1, end) infinite; }
.ist-sichtbar .grund__bild--drei { animation: grund-3 9s steps(1, end) infinite; }
@keyframes grund-1 { 0%, 30% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes grund-2 { 0%, 30% { opacity: 0; } 31%, 63% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes grund-3 { 0%, 63% { opacity: 0; } 64%, 100% { opacity: 1; } }
.ist-sichtbar .grund__balken i:nth-child(1)::after { animation: grund-b1 9s linear infinite; }
.ist-sichtbar .grund__balken i:nth-child(2)::after { animation: grund-b2 9s linear infinite; }
.ist-sichtbar .grund__balken i:nth-child(3)::after { animation: grund-b3 9s linear infinite; }
@keyframes grund-b1 { 0% { width: 0; } 30%, 100% { width: 100%; } }
@keyframes grund-b2 { 0%, 31% { width: 0; } 63%, 100% { width: 100%; } }
@keyframes grund-b3 { 0%, 64% { width: 0; } 96%, 100% { width: 100%; } }
.ist-sichtbar .grund .zeiger { animation: grund-zeiger 9s linear infinite; }
.ist-sichtbar .grund__tipp   { animation: grund-tipp 9s var(--kurve-aus) infinite; }
@keyframes grund-zeiger {
  0%      { opacity: 0; left: -14%; top: 62%; transform: none; animation-timing-function: var(--kurve-maus-los); }
  5%      { opacity: 1; }
  20%     { left: 74%; top: 48%; animation-timing-function: var(--kurve-maus-korr); }
  25%     { left: 68%; top: 52%; transform: none; }
  29%     { transform: scale(.8); }
  32%     { transform: none; }
  56%     { left: 68.6%; top: 52.6%; transform: none; }
  60%     { transform: scale(.8); }
  63%     { transform: none; }
  90%     { left: 69%; top: 53%; opacity: 1; }
  99%,100%{ left: 112%; top: 60%; opacity: 0; }
}
@keyframes grund-tipp {
  0%, 28%   { opacity: 0; transform: scale(.3); }
  31%       { opacity: .8; transform: scale(.55); }
  38%       { opacity: 0; transform: scale(1.1); }
  59%       { opacity: 0; transform: scale(.3); }
  62%       { opacity: .8; transform: scale(.55); }
  69%, 100% { opacity: 0; transform: scale(1.1); }
}

.worttakt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2rem;
}
.worttakt__wort {
  font: 800 min(3.2rem, 12.4cqw)/1.1 Inter, sans-serif;
  letter-spacing: -.12rem;
  color: var(--farbe-tinte);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
}
.worttakt__wort--stark { background: var(--farbe-gelb); padding: 0 .6rem; }
.ist-sichtbar .worttakt__wort:nth-child(1) { animation: takt-1 5.4s steps(1, end) infinite; }
.ist-sichtbar .worttakt__wort:nth-child(2) { animation: takt-2 5.4s steps(1, end) infinite; }
.ist-sichtbar .worttakt__wort:nth-child(3) { animation: takt-3 5.4s steps(1, end) infinite; }

.ganzeige {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem;
}
.ganzeige__karte {
  width: 100%;
  background: var(--farbe-weiss);
  border-radius: .3rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.ganzeige__bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  background: var(--farbe-flaeche);
}
.ganzeige__hut {
  align-self: flex-start;
  background: var(--farbe-gelb);
  color: var(--farbe-tinte);
  border-radius: .2rem;
  padding: .15rem .5rem;
  font: 800 1.1rem/1.4 Inter, sans-serif;
  letter-spacing: .04rem;
  text-transform: uppercase;
}
.ganzeige__zeile { height: .7rem; border-radius: .8rem; background: var(--farbe-linie); display: block; }
.ganzeige__zeile--kurz { width: 58%; }
.ganzeige__knopf {
  margin-top: .3rem;
  align-self: stretch;
  text-align: center;
  background: var(--farbe-tinte);
  color: var(--farbe-weiss);
  border-radius: .8rem;
  padding: .55rem;
  font: 700 1.1rem/1.4 Inter, sans-serif;
}
.ist-sichtbar .ganzeige__karte { animation: ganzeige-karte 6.2s var(--kurve-aus) infinite; }
@keyframes ganzeige-karte {
  0%, 8%    { opacity: 0; transform: translateY(10%); }
  22%, 88%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(10%); }
}

.geingang {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
  padding: 1.6rem;
}
.geingang__zeile {
  display: flex;
  align-items: center;
  gap: .7rem;
  border-radius: .2rem;
  background: var(--farbe-flaeche-dunkel);
  padding: .7rem;
  opacity: 0;
}
.geingang__zeile--aktiv { border: .1rem solid var(--farbe-violett-link); }
.geingang__punkt { width: .9rem; height: .9rem; border-radius: 50%; flex-shrink: 0; display: block; }
.geingang__punkt--lila { background: var(--farbe-violett-kraeftig); }
.geingang__punkt--blau { background: var(--farbe-cyan-kraeftig); }
.geingang__punkt--gelb { background: var(--farbe-gelb); }
.geingang__strich { flex: 1; min-width: 0; height: .6rem; border-radius: .8rem; background: var(--farbe-linie-dunkel); display: block; }
.geingang__strich--kurz { flex: .6; }
.geingang__vorschau {
  width: 2.6rem;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  background: var(--farbe-linie-dunkel);
}
.geingang__ki {
  margin-top: .3rem;
  border-radius: .8rem;
  background: var(--farbe-violett-link);
  padding: .6rem .8rem;
  display: flex;
  align-items: center;
  opacity: 0;
}
.geingang__ki i { height: .5rem; border-radius: .8rem; background: var(--farbe-flaeche-hell); display: block; width: 0; }
.ist-sichtbar .geingang__zeile:nth-child(1) { animation: gein-1 6.6s var(--kurve-aus) infinite; }
.ist-sichtbar .geingang__zeile:nth-child(2) { animation: gein-2 6.6s var(--kurve-aus) infinite; }
.ist-sichtbar .geingang__zeile:nth-child(3) { animation: gein-3 6.6s var(--kurve-aus) infinite; }
.ist-sichtbar .geingang__ki   { animation: gein-ki 6.6s var(--kurve-aus) infinite; }
.ist-sichtbar .geingang__ki i { animation: gein-ki-strich 6.6s var(--kurve-aus) infinite; }

.gplan {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem;
}
.gplan__karte {
  width: 100%;
  max-width: 30rem;
  background: var(--farbe-weiss);
  border-radius: .3rem;
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  box-shadow: var(--schatten-beitrag);
}
.gplan__hut {
  font: 800 .95rem/1.3 Inter, sans-serif;
  letter-spacing: .1rem;
  text-transform: uppercase;
  color: var(--farbe-text-stumm);
  text-align: center;
}
.gplan__zeile { display: flex; align-items: center; gap: .8rem; }
.gplan__haken {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: .2rem;
  border: .15rem solid var(--farbe-linie);
  flex-shrink: 0;
  display: block;
  position: relative;
}
.gplan__haken::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: .55rem;
  height: .28rem;
  border-left: .18rem solid var(--farbe-weiss);
  border-bottom: .18rem solid var(--farbe-weiss);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
}
.gplan__strich { flex: 1; min-width: 0; height: .7rem; border-radius: .8rem; background: var(--farbe-linie); display: block; }
.gplan__strich--kurz   { flex: .55; }
.gplan__strich--mittel { flex: .78; }
.ist-sichtbar .gplan__zeile:nth-child(2) .gplan__haken { animation: gplan-kasten 6.6s var(--kurve-aus) infinite; }
.ist-sichtbar .gplan__zeile:nth-child(3) .gplan__haken { animation: gplan-kasten 6.6s var(--kurve-aus) .5s infinite; }
.ist-sichtbar .gplan__zeile:nth-child(4) .gplan__haken { animation: gplan-kasten 6.6s var(--kurve-aus) 1s infinite; }
.ist-sichtbar .gplan__zeile:nth-child(5) .gplan__haken { animation: gplan-kasten 6.6s var(--kurve-aus) 1.5s infinite; }
.ist-sichtbar .gplan__zeile:nth-child(2) .gplan__haken::after { animation: gplan-haken 6.6s var(--kurve-aus) infinite; }
.ist-sichtbar .gplan__zeile:nth-child(3) .gplan__haken::after { animation: gplan-haken 6.6s var(--kurve-aus) .5s infinite; }
.ist-sichtbar .gplan__zeile:nth-child(4) .gplan__haken::after { animation: gplan-haken 6.6s var(--kurve-aus) 1s infinite; }
.ist-sichtbar .gplan__zeile:nth-child(5) .gplan__haken::after { animation: gplan-haken 6.6s var(--kurve-aus) 1.5s infinite; }
@keyframes gplan-kasten {
  0%, 8%    { background: var(--farbe-klar); border-color: var(--farbe-linie); }
  16%, 82%  { background: var(--farbe-violett-link); border-color: var(--farbe-violett-link); }
  92%, 100% { background: var(--farbe-klar); border-color: var(--farbe-linie); }
}
@keyframes gplan-haken { 0%, 10% { opacity: 0; } 18%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }


@keyframes takt-1 { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes takt-2 { 0%, 24% { opacity: 0; } 25%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes takt-3 { 0%, 54% { opacity: 0; } 55%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes gein-1 { 0%, 4% { opacity: 0; transform: translateY(.8rem); } 14%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(.8rem); } }
@keyframes gein-2 { 0%, 16% { opacity: 0; transform: translateY(.8rem); } 26%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(.8rem); } }
@keyframes gein-3 { 0%, 28% { opacity: 0; transform: translateY(.8rem); } 38%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(.8rem); } }
@keyframes gein-ki { 0%, 46% { opacity: 0; } 56%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes gein-ki-strich { 0%, 56% { width: 0; } 78%, 90% { width: 76%; } 97%, 100% { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ist-sichtbar .gschnitt__kopf,
  .ist-sichtbar .gschnitt__clip--a,
  .ist-sichtbar .gschnitt__clip--b,
  .ist-sichtbar .gschnitt__clip--c,
  .ist-sichtbar .gschnitt__gross--a,
  .ist-sichtbar .gschnitt__gross--b,
  .ist-sichtbar .gschnitt__gross--c,
  .ist-sichtbar .gschnitt .zeiger,
  .ist-sichtbar .grund__bild--eins,
  .ist-sichtbar .grund__bild--zwei,
  .ist-sichtbar .grund__bild--drei,
  .ist-sichtbar .grund__balken i::after,
  .ist-sichtbar .grund .zeiger,
  .ist-sichtbar .grund__tipp,
  .ist-sichtbar .worttakt__wort:nth-child(1),
  .ist-sichtbar .worttakt__wort:nth-child(2),
  .ist-sichtbar .worttakt__wort:nth-child(3),
  .ist-sichtbar .ganzeige__karte,
  .ist-sichtbar .geingang__zeile:nth-child(1),
  .ist-sichtbar .geingang__zeile:nth-child(2),
  .ist-sichtbar .geingang__zeile:nth-child(3),
  .ist-sichtbar .geingang__ki,
  .ist-sichtbar .geingang__ki i,
  .ist-sichtbar .gplan__zeile .gplan__haken,
  .ist-sichtbar .gplan__zeile .gplan__haken::after { animation: none; }

  .gschnitt__clip--b { opacity: 1; outline-color: var(--farbe-violett-link); }
  .grund__balken i:nth-child(1)::after { width: 100%; }
  .worttakt__wort:nth-child(3) { opacity: 1; }
  .ganzeige__karte { opacity: 1; }
  .geingang__zeile, .geingang__ki { opacity: 1; }
  .geingang__ki i { width: 76%; }
  .gplan__haken { background: var(--farbe-violett-link); border-color: var(--farbe-violett-link); }
  .gplan__haken::after { opacity: 1; }
}