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

.mannschaft {
  height: 100%;
  background: var(--farbe-weiss);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  position: relative;
}
.mannschaft__balken {
  width: 100%;
  background: var(--farbe-tinte);
  padding: 1.4rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
.mannschaft__kopf {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .25rem solid var(--farbe-tinte);
}
.mannschaft__kopf img { width: 82%; height: 82%; object-fit: contain; display: block; }
.mannschaft__kopf--gelb { background: var(--farbe-gelb); }
.mannschaft__kopf--cyan { background: var(--farbe-cyan-blass); }
.mannschaft__kopf--lila { background: var(--farbe-violett-hell); }
.mannschaft__kopf--neu  { background: var(--farbe-tinte); border-color: var(--farbe-weiss); transform: scale(0); }
.mannschaft__kopf--neu img { width: 100%; height: 100%; }

.mannschaft__schild {
  background: var(--farbe-gelb);
  color: var(--farbe-tinte);
  font: 700 1.2rem/1.2 Inter, sans-serif;
  padding: .5rem 1rem;
  white-space: nowrap;
  opacity: 0;
}
.mannschaft .zeiger { opacity: 0; left: 74%; top: 74%; }

.ist-sichtbar .mannschaft__kopf--neu { animation: mann-neu    9s var(--kurve-feder) infinite; }
.ist-sichtbar .mannschaft__schild    { animation: mann-schild 9s var(--kurve-weich) infinite; }
.ist-sichtbar .mannschaft .zeiger    { animation: mann-zeiger 9s linear infinite; }

@keyframes mann-neu {
  0%, 22%   { transform: scale(0); }
  34%, 92%  { transform: scale(1); }
  97%, 100% { transform: scale(0); }
}
@keyframes mann-schild {
  0%, 40%   { opacity: 0; transform: translateY(.6rem); }
  48%, 92%  { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes mann-zeiger {
  0%, 4%    { opacity: 0; left: 96%; top: 96%; transform: scale(1); }
  6%        { opacity: 1; left: 96%; top: 96%; transform: scale(1); animation-timing-function: var(--kurve-maus-los); }
  8.4%      { opacity: 1; left: 92%; top: 91%; transform: scale(1); }
  11.6%     { opacity: 1; left: 85%; top: 81%; transform: scale(1); }
  15.5%     { opacity: 1; left: 78%; top: 71%; transform: scale(1); }
  19.6%     { opacity: 1; left: 73%; top: 65%; transform: scale(1); }
  22%       { opacity: 1; left: 70%; top: 61%; transform: scale(1); animation-timing-function: var(--kurve-maus-korr); }
  25%       { opacity: 1; left: 71.5%; top: 62.5%; transform: scale(1); }
  27%       { opacity: 1; left: 71.5%; top: 62.5%; transform: scale(.8); }
  30%, 90%  { opacity: 1; left: 71.5%; top: 62.5%; transform: scale(1); }
  96%, 100% { opacity: 0; left: 71.5%; top: 62.5%; transform: scale(1); }
}

.kalender { height: 100%; overflow: hidden; }
.kalender__fenster {
  width: 132%;
  height: 100%;
  background: var(--farbe-weiss);
  display: flex;
  flex-direction: column;
}
.kalender__kopf {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid var(--farbe-linie);
  flex-shrink: 0;
}
.kalender__marke { height: .9rem; width: 5rem; border-radius: .8rem; background: var(--farbe-text-blass); }
.kalender__monat {
  height: 1.8rem;
  width: 3.4rem;
  border-radius: .8rem;
  background: var(--farbe-flaeche);
  flex-shrink: 0;
}
.kalender__monat--erste { margin-left: auto; }
.kalender__monat--jetzt { background: var(--farbe-violett-link); }

.ist-sichtbar .kalender__monat--m1 { animation: kal-monat-1 12s var(--kurve-weich) infinite; }
.ist-sichtbar .kalender__monat--m2 { animation: kal-monat-2 12s var(--kurve-weich) infinite; }
.ist-sichtbar .kalender__monat--m3 { animation: kal-monat-3 12s var(--kurve-weich) infinite; }

@keyframes kal-monat-1 {
  0%, 26%   { background: var(--farbe-violett-link); }
  30%, 100% { background: var(--farbe-flaeche); }
}
@keyframes kal-monat-2 {
  0%, 26%   { background: var(--farbe-flaeche); }
  30%, 50%  { background: var(--farbe-violett-link); }
  54%, 100% { background: var(--farbe-flaeche); }
}
@keyframes kal-monat-3 {
  0%, 50%   { background: var(--farbe-flaeche); }
  54%, 92%  { background: var(--farbe-violett-link); }
  96%, 100% { background: var(--farbe-flaeche); }
}

.kalender__gitter {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: .5rem;
  padding: 1.2rem 1.4rem;
}
.kalender__feld { border-radius: 0; background: var(--farbe-flaeche); overflow: hidden; }
.kalender__feld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kalender__feld--voll { opacity: 0; transform: scale(.86); transform-origin: center; }
.kalender__feld--lila   { background: var(--farbe-violett-pastell); }
.kalender__feld--blass  { background: var(--farbe-violett-blass); }
.kalender__feld--blau   { background: var(--farbe-blau-zart); }
.kalender__feld--cyan   { background: var(--farbe-cyan-blass); }
.kalender__feld--gelb   { background: var(--farbe-gelb); }
.kalender__feld--gelbzart { background: var(--farbe-gelb-blass); }

.ist-sichtbar .kalender__feld--voll:nth-child(2)  { animation: kal-feld-1  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(4)  { animation: kal-feld-2  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(6)  { animation: kal-feld-3  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(7)  { animation: kal-feld-4  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(9)  { animation: kal-feld-5  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(11) { animation: kal-feld-6  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(13) { animation: kal-feld-7  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(14) { animation: kal-feld-8  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(16) { animation: kal-feld-9  12s var(--kurve-feder) infinite; }
.ist-sichtbar .kalender__feld--voll:nth-child(17) { animation: kal-feld-10 12s var(--kurve-feder) infinite; }

@keyframes kal-feld-1  { 0%,  5% { opacity: 0; transform: scale(.86); } 11%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-2  { 0%, 10% { opacity: 0; transform: scale(.86); } 16%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-3  { 0%, 15% { opacity: 0; transform: scale(.86); } 21%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-4  { 0%, 20% { opacity: 0; transform: scale(.86); } 26%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-5  { 0%, 25% { opacity: 0; transform: scale(.86); } 31%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-6  { 0%, 30% { opacity: 0; transform: scale(.86); } 36%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-7  { 0%, 35% { opacity: 0; transform: scale(.86); } 41%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-8  { 0%, 40% { opacity: 0; transform: scale(.86); } 46%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-9  { 0%, 45% { opacity: 0; transform: scale(.86); } 51%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }
@keyframes kal-feld-10 { 0%, 50% { opacity: 0; transform: scale(.86); } 56%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.86); } }

.handy { height: 100%; display: flex; align-items: center; justify-content: center; }
.handy__rahmen {
  height: 100%;
  aspect-ratio: 1 / 2;
  background: var(--farbe-tinte);
  border-radius: .5rem;
  padding: .5rem;
}
.handy__schirm {
  height: 100%;
  background: var(--farbe-weiss);
  border-radius: .4rem;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.handy__blatt {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0;
  flex-shrink: 0;
}
.handy__blatt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.handy__zeilen { display: flex; flex-direction: column; gap: .45rem; flex-shrink: 0; }
.handy__zeilen span { height: .5rem; border-radius: .8rem; background: var(--farbe-linie); }
.handy__zeilen span:nth-child(1) { width: 82%; }
.handy__zeilen span:nth-child(2) { width: 54%; }

.handy__knoepfe { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; flex-shrink: 0; }
.handy__hauptknopf { display: block; position: relative; }
.handy__knopf { display: block; height: 2.4rem; border-radius: .8rem; background: var(--farbe-tinte); }
.handy__knopf--zart { background: var(--farbe-klar); border: 1px solid var(--farbe-linie); }
.handy .zeiger { opacity: 1; left: 50%; top: 50%; }

@media (prefers-reduced-motion: reduce) {
  .handy .zeiger { display: block; }
}