@property --zahl-a { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --zahl-b { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --zahl-c { syntax: "<integer>"; initial-value: 0; inherits: false; }

.portalmedium {
  aspect-ratio: 1.25;
  overflow: hidden;
  position: relative;
  width: 100%;
  background: var(--farbe-weiss);
}
.portalbild { width: 100%; height: 100%; object-fit: cover; display: block; }

.uebersicht { display: flex; flex-direction: column; height: 100%; }

.uebersicht__leiste {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--farbe-linie);
  flex-shrink: 0;
}
.uebersicht__marke { width: 3.4rem; height: .9rem; border-radius: .8rem; background: var(--farbe-tinte); }
.uebersicht__reiter { display: flex; gap: .7rem; margin-left: auto; align-items: center; }
.uebersicht__reiter span { height: .7rem; border-radius: .8rem; background: var(--farbe-linie); }
.uebersicht__reiter span:nth-child(1) { width: 2.6rem; background: var(--farbe-tinte); }
.uebersicht__reiter span:nth-child(2) { width: 3.2rem; }
.uebersicht__reiter span:nth-child(3) { width: 2.2rem; }
.uebersicht__reiter span:nth-child(4) { width: 1.8rem; }
.uebersicht__reiter span:nth-child(5) { width: 2.4rem; }
.uebersicht__nutzer {
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--farbe-violett-kraeftig);
  margin-left: .4rem;
  flex-shrink: 0;
}

.uebersicht__feld {
  flex: 1;
  padding: 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .9rem;
}
.uebersicht__kachel {
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: .2rem;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.uebersicht__kachel--breit { grid-column: span 2; }
.uebersicht__zeichen {
  width: 2rem; height: 2rem;
  border-radius: .2rem;
  background: var(--farbe-violett-blass);
  flex-shrink: 0;
}
.uebersicht__kachel--cyan .uebersicht__zeichen { background: var(--farbe-cyan-blass); }
.uebersicht__kachel--gelb .uebersicht__zeichen { background: var(--farbe-gelb-blass); }
.uebersicht__strich {
  height: .6rem;
  border-radius: .8rem;
  background: var(--farbe-linie);
  width: 74%;
}
.uebersicht__strich--kurz { width: 48%; }
.uebersicht__wert {
  color: var(--farbe-tinte);
  font: 800 2.4rem/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.uebersicht__wert::after { content: counter(eb); }
.uebersicht__wert--a { --zahl-a: 63; counter-reset: eb var(--zahl-a); }
.uebersicht__wert--b { --zahl-b: 34; counter-reset: eb var(--zahl-b); }
.uebersicht__wert--c { --zahl-c: 3;  counter-reset: eb var(--zahl-c); }

.uebersicht__balken {
  height: .6rem;
  border-radius: .8rem;
  background: var(--farbe-linie);
  overflow: hidden;
}
.uebersicht__balken span {
  display: block;
  height: 100%;
  border-radius: .8rem;
  background: var(--farbe-violett-kraeftig);
  width: 0;
}
.uebersicht__kurve { height: 3.4rem; display: block; width: 100%; margin-top: auto; }
.uebersicht__kurve path {
  fill: none;
  stroke: var(--farbe-violett-kraeftig);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

.ist-sichtbar .uebersicht__wert--a { animation: zaehlen-a 13s var(--kurve-weich) infinite; }
.ist-sichtbar .uebersicht__wert--b { animation: zaehlen-b 13s var(--kurve-weich) infinite; }
.ist-sichtbar .uebersicht__wert--c { animation: zaehlen-c 13s var(--kurve-weich) infinite; }
@keyframes zaehlen-a { 0%, 6% { --zahl-a: 0; } 40%, 100% { --zahl-a: 63; } }
@keyframes zaehlen-b { 0%, 10% { --zahl-b: 0; } 46%, 100% { --zahl-b: 34; } }
@keyframes zaehlen-c { 0%, 14% { --zahl-c: 0; } 40%, 100% { --zahl-c: 3; } }

.ist-sichtbar .uebersicht__balken span { animation: balken-auf 13s var(--kurve-weich) infinite; }
@keyframes balken-auf { 0%, 12% { width: 0; } 52%, 100% { width: 78%; } }

.ist-sichtbar .uebersicht__kurve path { animation: kurve-zeichnen 13s var(--kurve-weich) infinite; }
@keyframes kurve-zeichnen { 0%, 8% { stroke-dashoffset: 300; } 58%, 100% { stroke-dashoffset: 0; } }

.lernen { display: flex; flex-direction: column; height: 100%; }

.lernen__feld {
  flex: 1;
  padding: 1.6rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.lernen__zeilen { display: flex; flex-direction: column; gap: .7rem; width: 100%; align-items: center; }
.lernen__zeilen span { height: .6rem; border-radius: .8rem; background: var(--farbe-linie); }
.lernen__zeilen span:nth-child(1) { width: 58%; }
.lernen__zeilen span:nth-child(2) { width: 44%; }
.lernen__knopf {
  background: var(--farbe-violett-kraeftig);
  color: var(--farbe-weiss);
  border-radius: .8rem;
  padding: 1rem 2.2rem;
  font: 700 1.5rem/1.2 Inter, sans-serif;
  margin-top: .4rem;
}

.stapel {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.stapel__blatt {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  line-height: 0;
}
.stapel__blatt img { width: 100%; height: auto; display: block; }
.stapel__blatt:nth-child(5n + 1) { width: 46%; }
.stapel__blatt:nth-child(5n + 2) { width: 56%; }
.stapel__blatt:nth-child(5n + 3) { width: 48%; }
.stapel__blatt:nth-child(5n + 4) { width: 36%; }
.stapel__blatt:nth-child(5n + 5) { width: 53%; }

.ist-sichtbar .stapel__blatt { animation-duration: 4.4s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
.ist-sichtbar .stapel__blatt:nth-child(1)  { animation-name: stapel-1; }
.ist-sichtbar .stapel__blatt:nth-child(2)  { animation-name: stapel-2; }
.ist-sichtbar .stapel__blatt:nth-child(3)  { animation-name: stapel-3; }
.ist-sichtbar .stapel__blatt:nth-child(4)  { animation-name: stapel-4; }
.ist-sichtbar .stapel__blatt:nth-child(5)  { animation-name: stapel-5; }
.ist-sichtbar .stapel__blatt:nth-child(6)  { animation-name: stapel-6; }
.ist-sichtbar .stapel__blatt:nth-child(7)  { animation-name: stapel-7; }
.ist-sichtbar .stapel__blatt:nth-child(8)  { animation-name: stapel-8; }
.ist-sichtbar .stapel__blatt:nth-child(9)  { animation-name: stapel-9; }
.ist-sichtbar .stapel__blatt:nth-child(10) { animation-name: stapel-10; }
.ist-sichtbar .stapel__blatt:nth-child(11) { animation-name: stapel-11; }
.ist-sichtbar .stapel__blatt:nth-child(12) { animation-name: stapel-12; }
.ist-sichtbar .stapel__blatt:nth-child(13) { animation-name: stapel-13; }
.ist-sichtbar .stapel__blatt:nth-child(14) { animation-name: stapel-14; }
.ist-sichtbar .stapel__blatt:nth-child(15) { animation-name: stapel-15; }
.ist-sichtbar .stapel__blatt:nth-child(16) { animation-name: stapel-16; }
.ist-sichtbar .stapel__blatt:nth-child(17) { animation-name: stapel-17; }
.ist-sichtbar .stapel__blatt:nth-child(18) { animation-name: stapel-18; }
.ist-sichtbar .stapel__blatt:nth-child(19) { animation-name: stapel-19; }
.ist-sichtbar .stapel__blatt:nth-child(20) { animation-name: stapel-20; }
.ist-sichtbar .stapel__blatt:nth-child(21) { animation-name: stapel-21; }
.ist-sichtbar .stapel__blatt:nth-child(22) { animation-name: stapel-22; }
.ist-sichtbar .stapel__blatt:nth-child(23) { animation-name: stapel-23; }
.ist-sichtbar .stapel__blatt:nth-child(24) { animation-name: stapel-24; }

@keyframes stapel-1  { 0%        { opacity: 0; } 2%,  93.7% { opacity: 1; } 94.7%, 100% { opacity: 0; } }
@keyframes stapel-2  { 0%,  2.9% { opacity: 0; } 3.9%, 91.8% { opacity: 1; } 92.8%, 100% { opacity: 0; } }
@keyframes stapel-3  { 0%,  4.8% { opacity: 0; } 5.8%, 89.9% { opacity: 1; } 90.9%, 100% { opacity: 0; } }
@keyframes stapel-4  { 0%,  6.7% { opacity: 0; } 7.7%, 88%   { opacity: 1; } 89%,   100% { opacity: 0; } }
@keyframes stapel-5  { 0%,  8.6% { opacity: 0; } 9.6%, 86.1% { opacity: 1; } 87.1%, 100% { opacity: 0; } }
@keyframes stapel-6  { 0%, 10.5% { opacity: 0; } 11.5%, 84.2% { opacity: 1; } 85.2%, 100% { opacity: 0; } }
@keyframes stapel-7  { 0%, 12.4% { opacity: 0; } 13.4%, 82.3% { opacity: 1; } 83.3%, 100% { opacity: 0; } }
@keyframes stapel-8  { 0%, 14.3% { opacity: 0; } 15.3%, 80.4% { opacity: 1; } 81.4%, 100% { opacity: 0; } }
@keyframes stapel-9  { 0%, 16.2% { opacity: 0; } 17.2%, 78.5% { opacity: 1; } 79.5%, 100% { opacity: 0; } }
@keyframes stapel-10 { 0%, 18.1% { opacity: 0; } 19.1%, 76.6% { opacity: 1; } 77.6%, 100% { opacity: 0; } }
@keyframes stapel-11 { 0%, 20%   { opacity: 0; } 21%,   74.7% { opacity: 1; } 75.7%, 100% { opacity: 0; } }
@keyframes stapel-12 { 0%, 21.9% { opacity: 0; } 22.9%, 72.8% { opacity: 1; } 73.8%, 100% { opacity: 0; } }
@keyframes stapel-13 { 0%, 23.8% { opacity: 0; } 24.8%, 70.9% { opacity: 1; } 71.9%, 100% { opacity: 0; } }
@keyframes stapel-14 { 0%, 25.7% { opacity: 0; } 26.7%, 69%   { opacity: 1; } 70%,   100% { opacity: 0; } }
@keyframes stapel-15 { 0%, 27.6% { opacity: 0; } 28.6%, 67.1% { opacity: 1; } 68.1%, 100% { opacity: 0; } }
@keyframes stapel-16 { 0%, 29.5% { opacity: 0; } 30.5%, 65.2% { opacity: 1; } 66.2%, 100% { opacity: 0; } }
@keyframes stapel-17 { 0%, 31.4% { opacity: 0; } 32.4%, 63.3% { opacity: 1; } 64.3%, 100% { opacity: 0; } }
@keyframes stapel-18 { 0%, 33.3% { opacity: 0; } 34.3%, 61.4% { opacity: 1; } 62.4%, 100% { opacity: 0; } }
@keyframes stapel-19 { 0%, 35.2% { opacity: 0; } 36.2%, 59.5% { opacity: 1; } 60.5%, 100% { opacity: 0; } }
@keyframes stapel-20 { 0%, 37.1% { opacity: 0; } 38.1%, 57.6% { opacity: 1; } 58.6%, 100% { opacity: 0; } }
@keyframes stapel-21 { 0%, 39%   { opacity: 0; } 40%,   55.7% { opacity: 1; } 56.7%, 100% { opacity: 0; } }
@keyframes stapel-22 { 0%, 40.9% { opacity: 0; } 41.9%, 53.8% { opacity: 1; } 54.8%, 100% { opacity: 0; } }
@keyframes stapel-23 { 0%, 42.8% { opacity: 0; } 43.8%, 51.9% { opacity: 1; } 52.9%, 100% { opacity: 0; } }
@keyframes stapel-24 { 0%, 44.7% { opacity: 0; } 45.7%, 50%   { opacity: 1; } 51%,   100% { opacity: 0; } }

.beitragsreihe {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem 1.6rem;
}
.beitragsreihe__blatt {
  width: 28%;
  flex-shrink: 0;
  line-height: 0;
  box-shadow: var(--schatten-beitrag);
}
.beitragsreihe__blatt img { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .ist-sichtbar .uebersicht__wert--a, .ist-sichtbar .uebersicht__wert--b,
  .ist-sichtbar .uebersicht__wert--c, .ist-sichtbar .uebersicht__balken span,
  .ist-sichtbar .uebersicht__kurve path, .ist-sichtbar .stapel__blatt {
    animation: none;
  }
  .ist-sichtbar .stapel__blatt:nth-child(n) { animation-name: none; }
  .stapel__blatt:nth-child(1) { opacity: 1; }
  .uebersicht__balken span { width: 78%; }
  .uebersicht__kurve path { stroke-dashoffset: 0; }
  .stapel__blatt { opacity: 1; }
}