.ablauf { margin: 14rem 0; position: relative; }
@media screen and (width >= 768px)  { .ablauf { padding-top: 6rem; } }
@media screen and (width >= 1025px) { .ablauf { margin: 18rem 0; } }
@media screen and (width >= 1441px) { .ablauf { padding-top: 10rem; } }
@media screen and (width >= 1729px) { .ablauf { margin: 22rem 0; } }

.ablauf__kopf { margin-bottom: 9rem; }
@media screen and (width >= 1441px) { .ablauf__kopf { margin-bottom: 12rem; } }
.ablauf__kopf .zkopf__titel { margin: 0 auto; }
@media screen and (width >= 1025px) { .ablauf__kopf .zkopf__titel { max-width: 50rem; } }
@media screen and (width >= 1441px) { .ablauf__kopf .zkopf__titel { max-width: 80rem; } }
@media screen and (width >= 1025px) { .ablauf__kopf .zkopf__text { max-width: 50rem; } }
@media screen and (width >= 1441px) { .ablauf__kopf .zkopf__text { max-width: 60rem; } }

.ablauf__liste { flex-direction: column; align-items: center; display: flex; }

.stapelkarte {
  aspect-ratio: 400 / 620;
  border-radius: .8rem;
  flex-direction: column-reverse;
  justify-content: space-between;
  width: 100%;
  max-width: 40rem;
  padding-top: 4.5rem;
  display: flex;
  overflow: hidden;
}
@media screen and (width <= 1024px) { .stapelkarte { aspect-ratio: 350 / 550; max-height: 550px; } }
@media screen and (width >= 1025px) { .stapelkarte { aspect-ratio: 460 / 580; max-width: 46rem; padding-top: 6.5rem; } }
@media screen and (width >= 1441px) { .stapelkarte { aspect-ratio: 510 / 640; max-width: 51rem; padding-top: 8rem; } }
@media screen and (width >= 1729px) { .stapelkarte { aspect-ratio: 560 / 700; max-width: 56rem; } }

.stapelkarte__kopf {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  padding: 0 5rem 5rem;
  display: flex;
}
.stapelkarte__kopf .medium { width: 100%; max-width: 100%; max-height: 100%; display: block; }

.stapelkarte__inhalt {
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 0 3.6rem;
  display: flex;
}
@media screen and (width >= 1025px) { .stapelkarte__inhalt { padding: 0 5rem; } }
@media screen and (width >= 1729px) { .stapelkarte__inhalt { padding: 0 6rem; } }

.stapelkarte__titel {
  letter-spacing: -.02rem;
  background: var(--farbe-weiss);
  padding: .3rem .5rem;
  font: 600 2rem/100% Inter, sans-serif;
}
.stapelkarte__text {
  letter-spacing: -.032rem;
  color: var(--farbe-weiss);
  text-wrap: pretty;
  font: 400 1.6rem/150% Inter, sans-serif;
}

.stapelkarte--eins { background: var(--farbe-flaeche-karte); }
.stapelkarte--eins .stapelkarte__titel { color: var(--farbe-weiss); background: var(--farbe-tinte); }
.stapelkarte--eins .stapelkarte__text  { color: var(--farbe-text-zweit); }
.stapelkarte--eins .stapelkarte__kopf  { flex-grow: 0; padding: 0 5rem 6rem; }

.stapelkarte--zwei { background: var(--farbe-cyan); box-shadow: var(--schatten-stapelkarte); }
.stapelkarte--zwei .stapelkarte__kopf { flex-grow: 0; padding: 0 5rem 4.5rem; }
.stapelkarte--zwei .stapelkarte__kopf .medium { background: var(--farbe-cyan); }

.stapelkarte--drei { background: var(--farbe-violett-kraeftig); box-shadow: var(--schatten-stapelkarte); }
.stapelkarte--drei .stapelkarte__kopf { flex-grow: 0; padding: 0 5rem 4.5rem; }
.stapelkarte--drei .stapelkarte__kopf .medium { background: var(--farbe-violett-kraeftig); }

.stapelkarte--vier { background: var(--farbe-gelb); box-shadow: var(--schatten-stapelkarte); }
.stapelkarte--vier .stapelkarte__kopf { flex-grow: 0; padding: 0 5rem 4.5rem; }
.stapelkarte--vier .stapelkarte__kopf .medium { background: var(--farbe-gelb); }
.stapelkarte--vier .stapelkarte__text { color: var(--farbe-tinte); }

.stapelkarte__zahl {
  letter-spacing: -.64rem;
  -webkit-text-fill-color: transparent;
  background: var(--verlauf-zahl);
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0 1rem;
  font-family: Inter, sans-serif;
  font-size: 16rem;
  font-weight: 800;
  line-height: 150%;
}
@media screen and (width >= 1025px) { .stapelkarte__zahl { font-size: 20rem; } }
@media screen and (width >= 1441px) { .stapelkarte__zahl { font-size: 24rem; } }
@media screen and (width >= 1729px) { .stapelkarte__zahl { font-size: 26rem; } }