@property --pw-km { syntax: "<integer>"; initial-value: 30; inherits: false; }
@property --wt-beitraege { syntax: "<integer>"; initial-value: 3; inherits: false; }
@property --kb-erreicht { syntax: "<integer>"; initial-value: 150; inherits: false; }

.wahrheit__galerie { position: relative; width: 100%; max-width: 46rem; aspect-ratio: 642 / 894; margin: 3.2rem auto 0; }
.wahrheit__blatt {
  position: absolute; width: 36%; aspect-ratio: 3 / 4; margin: 0; padding: .5rem;
  background: var(--farbe-weiss); box-shadow: var(--schatten-stapelkarte);
}
.wahrheit__blatt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wahrheit__blatt:nth-child(1) { left: 12%; top: 7%; }
.wahrheit__blatt:nth-child(2) { left: 58.6%; top: 13%; }
.wahrheit__blatt:nth-child(3) { left: 30%; top: 32.3%; z-index: 2; }
.wahrheit__blatt:nth-child(4) { left: 12%; top: 59.2%; }
.wahrheit__blatt:nth-child(5) { left: 58.6%; top: 57.5%; }

.loesungsliste { list-style: none; margin: 0 0 6rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6rem; }
.loesungsschritt { min-width: 0; width: 100%; max-width: 52rem; margin: 0 auto; }
.loesungsschritt .systemmedium { aspect-ratio: 4 / 5; container-type: inline-size; margin-bottom: 2.4rem; }
.loesungsschritt__zeile { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1rem; }
.loesungsschritt__titel { margin: 0; min-width: 0; color: var(--farbe-tinte); letter-spacing: -.03rem; font: 700 2rem/1.25 Inter, sans-serif; }
.loesungsschritt__text { margin: 0; color: var(--farbe-text-zweit); letter-spacing: -.032rem; text-wrap: pretty; font: 400 1.6rem/150% Inter, sans-serif; }
@media screen and (width >= 900px) {
  .loesungsliste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .loesungsschritt { max-width: none; }
}
@media screen and (width >= 1025px) {
  .loesungsliste { margin-bottom: 64px; gap: 20px; }
  .loesungsschritt .systemmedium { margin-bottom: 24px; }
  .loesungsschritt__zeile { gap: 14px; margin-bottom: 10px; }
  .loesungsschritt__titel { font-size: 21px; line-height: 1.25; }
  .loesungsschritt__text { font-size: 17px; line-height: 1.6; }
}

.profilwahl, .kamerasucher, .wochentakt {
  height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 1.2em;
  padding: 1.8em 1.6em; font-size: clamp(11.5px, 4.2cqw, 17px); position: relative;
}
.profilwahl__karte, .wochentakt__karte {
  background: var(--farbe-weiss); border-radius: .4em; padding: 1.3em 1.2em;
  display: flex; flex-direction: column; gap: 1.1em; min-width: 0;
}
.profilwahl__kopf, .wochentakt__kopf { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .8em; font-weight: 700; font-size: 1.05em; line-height: 1.2; color: var(--farbe-tinte); }
.profilwahl__gruppe { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.profilwahl__name { font-weight: 500; font-size: .85em; line-height: 1; color: var(--farbe-text-zweit); }
.profilwahl__chips { display: flex; flex-wrap: wrap; gap: .4em; }
.profilwahl__chip {
  padding: .45em .8em; border-radius: 10em; border: 1px solid var(--farbe-linie);
  font-weight: 600; font-size: .9em; line-height: 1; color: var(--farbe-text-zweit); background: var(--farbe-weiss);
}
.profilwahl__chip--wahl { border-color: var(--farbe-violett-blass); background: var(--farbe-violett-blass); color: var(--farbe-violett-kraeftig); }
.profilwahl__regler { display: flex; align-items: center; gap: .8em; }
.profilwahl__spur { position: relative; flex: 1 1 auto; min-width: 0; height: .35em; border-radius: 10em; background: var(--farbe-linie); }
.profilwahl__fuellung { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; border-radius: 10em; background: var(--farbe-violett-kraeftig); }
.profilwahl__knopf {
  position: absolute; top: 50%; left: 60%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%;
  background: var(--farbe-weiss); border: 2px solid var(--farbe-violett-kraeftig);
}
.profilwahl__km { min-width: 3.6em; text-align: right; font-weight: 700; font-size: .95em; color: var(--farbe-tinte); font-variant-numeric: tabular-nums; counter-reset: km var(--pw-km); }
.profilwahl__km::after { content: counter(km) " km"; }
.profilwahl__schalter {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: .25em; border-radius: 10em; background: var(--farbe-flaeche);
}
.profilwahl__schalter b { position: relative; z-index: 1; padding: .5em .4em; text-align: center; white-space: nowrap; font-weight: 600; font-size: .85em; line-height: 1; color: var(--farbe-text-zweit); }
.profilwahl__schieber {
  position: absolute; z-index: 0; top: .25em; bottom: .25em; left: .25em; width: calc(50% - .25em);
  border-radius: 10em; background: var(--farbe-weiss); box-shadow: var(--schatten-beitrag);
}
.profilwahl__haken {
  align-self: center; margin: 0; display: flex; align-items: center; gap: .5em;
  padding: .55em 1em; border-radius: 10em; background: var(--farbe-violett-blass);
  font-weight: 700; font-size: .95em; line-height: 1; color: var(--farbe-violett-kraeftig);
}
.profilwahl__haken svg { width: 1.1em; height: 1.1em; display: block; }

.ist-sichtbar .profilwahl__chip--wahl { animation: pw-chip 10s var(--kurve-weich) infinite; }
.ist-sichtbar .profilwahl__fuellung { animation: pw-fuellung 10s var(--kurve-druck) infinite; }
.ist-sichtbar .profilwahl__knopf { animation: pw-knopf 10s var(--kurve-druck) infinite; }
.ist-sichtbar .profilwahl__km { animation: pw-km 10s var(--kurve-druck) infinite; }
.ist-sichtbar .profilwahl__schieber { animation: pw-schieber 10s var(--kurve-feder) infinite; }
.ist-sichtbar .profilwahl__haken { animation: pw-haken 10s var(--kurve-feder) infinite; }
@keyframes pw-chip {
  0%, 8% { background: var(--farbe-weiss); border-color: var(--farbe-linie); color: var(--farbe-text-zweit); }
  12%, 94% { background: var(--farbe-violett-blass); border-color: var(--farbe-violett-blass); color: var(--farbe-violett-kraeftig); }
  100% { background: var(--farbe-weiss); border-color: var(--farbe-linie); color: var(--farbe-text-zweit); }
}
@keyframes pw-fuellung { 0%, 18% { width: 12%; } 40%, 94% { width: 60%; } 100% { width: 12%; } }
@keyframes pw-knopf { 0%, 18% { left: 12%; } 40%, 94% { left: 60%; } 100% { left: 12%; } }
@keyframes pw-km { 0%, 18% { --pw-km: 5; } 40%, 94% { --pw-km: 30; } 100% { --pw-km: 5; } }
@keyframes pw-schieber { 0%, 48% { transform: translateX(0); } 56%, 94% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes pw-haken { 0%, 64% { transform: scale(.6); opacity: 0; } 70%, 94% { transform: scale(1); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }

.kamerasucher__bild { position: relative; flex: 1 1 auto; min-height: 0; border-radius: .4em; overflow: hidden; background: var(--farbe-tinte); }
.kamerasucher__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kamerasucher__ecke { position: absolute; width: 1.6em; height: 1.6em; border: 0 solid var(--farbe-weiss); }
.kamerasucher__ecke:nth-of-type(1) { left: .8em; top: .8em; border-left-width: 2px; border-top-width: 2px; }
.kamerasucher__ecke:nth-of-type(2) { right: .8em; top: .8em; border-right-width: 2px; border-top-width: 2px; }
.kamerasucher__ecke:nth-of-type(3) { left: .8em; bottom: .8em; border-left-width: 2px; border-bottom-width: 2px; }
.kamerasucher__ecke:nth-of-type(4) { right: .8em; bottom: .8em; border-right-width: 2px; border-bottom-width: 2px; }
.kamerasucher__rec {
  position: absolute; left: 1.4em; top: 1.4em; display: flex; align-items: center; gap: .45em;
  padding: .35em .6em; border-radius: .3em; background: var(--farbe-schleier);
  font-weight: 700; font-size: .8em; line-height: 1; letter-spacing: .06em; color: var(--farbe-weiss);
}
.kamerasucher__rec i { width: .65em; height: .65em; border-radius: 50%; background: var(--farbe-fehler); }
.kamerasucher__tag {
  position: absolute; right: 1.4em; bottom: 1.4em; padding: .45em .7em; border-radius: .3em;
  background: var(--farbe-weiss); font-weight: 700; font-size: .85em; line-height: 1; color: var(--farbe-tinte);
}
.kamerasucher__quartale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.kamerasucher__quartal {
  display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .6em .2em; border-radius: .3em;
  background: var(--farbe-weiss); font-weight: 700; font-size: .85em; line-height: 1; color: var(--farbe-text-stumm);
}
.kamerasucher__quartal svg { width: 1.3em; height: 1.3em; display: block; }

.ist-sichtbar .kamerasucher__bild img { animation: ks-fahrt 10s ease-in-out infinite alternate; }
.ist-sichtbar .kamerasucher__rec i { animation: ks-rec 1.2s steps(1) infinite; }
.ist-sichtbar .kamerasucher__quartal { animation: ks-quartal 10s var(--kurve-weich) infinite; }
.ist-sichtbar .kamerasucher__quartal:nth-child(2) { animation-delay: 2.5s; }
.ist-sichtbar .kamerasucher__quartal:nth-child(3) { animation-delay: 5s; }
.ist-sichtbar .kamerasucher__quartal:nth-child(4) { animation-delay: 7.5s; }
@keyframes ks-fahrt { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -3%); } }
@keyframes ks-rec { 0% { opacity: 1; } 50% { opacity: .2; } }
@keyframes ks-quartal {
  0% { background: var(--farbe-violett-blass); color: var(--farbe-violett-kraeftig); }
  22% { background: var(--farbe-violett-blass); color: var(--farbe-violett-kraeftig); }
  27%, 100% { background: var(--farbe-weiss); color: var(--farbe-text-stumm); }
}

.wochentakt__zahl { font-weight: 800; font-size: 1em; color: var(--farbe-violett-kraeftig); font-variant-numeric: tabular-nums; counter-reset: wt var(--wt-beitraege); }
.wochentakt__zahl::after { content: counter(wt) " von 3"; }
.wochentakt__tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3em; }
.wochentakt__tag { display: flex; flex-direction: column; align-items: center; gap: .35em; min-width: 0; }
.wochentakt__tag i { font-style: normal; font-weight: 600; font-size: .75em; line-height: 1; color: var(--farbe-text-stumm); }
.wochentakt__platz { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: .25em; border: 1px dashed var(--farbe-text-blass); overflow: hidden; }
.wochentakt__platz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wochentakt__tag--beitrag i { color: var(--farbe-violett-kraeftig); }
.wochentakt__tag--beitrag .wochentakt__platz { border: 0; }
.wochentakt__marke {
  padding: .35em .6em; border-radius: .3em; background: var(--farbe-violett-blass);
  font-weight: 700; font-size: .8em; line-height: 1; color: var(--farbe-violett-kraeftig);
}
.wochentakt__balken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: .7em; height: 5.6em; }
.wochentakt__balken span { display: block; border-radius: .2em .2em 0 0; background: var(--farbe-text-blass); transform-origin: bottom; }
.wochentakt__balken span:nth-child(1) { height: 38%; }
.wochentakt__balken span:nth-child(2) { height: 46%; }
.wochentakt__balken span:nth-child(3) { height: 64%; }
.wochentakt__balken span:nth-child(4) { height: 92%; background: var(--farbe-violett-kraeftig); }
.wochentakt__wochen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; margin-top: -.6em; }
.wochentakt__wochen i { font-style: normal; text-align: center; font-weight: 600; font-size: .75em; line-height: 1; color: var(--farbe-text-stumm); }

.ist-sichtbar .wochentakt__tag--beitrag img { animation: wt-beitrag 10s var(--kurve-feder) infinite; }
.ist-sichtbar .wochentakt__tag--beitrag:nth-child(3) img { animation-delay: .7s; }
.ist-sichtbar .wochentakt__tag--beitrag:nth-child(5) img { animation-delay: 1.4s; }
.ist-sichtbar .wochentakt__zahl { animation: wt-zahl 10s linear infinite; }
.ist-sichtbar .wochentakt__balken span { animation: wt-balken 10s var(--kurve-aus) infinite; }
.ist-sichtbar .wochentakt__balken span:nth-child(2) { animation-delay: .25s; }
.ist-sichtbar .wochentakt__balken span:nth-child(3) { animation-delay: .5s; }
.ist-sichtbar .wochentakt__balken span:nth-child(4) { animation-delay: .75s; }
.ist-sichtbar .wochentakt__marke { animation: wt-marke 10s var(--kurve-feder) infinite; }
@keyframes wt-beitrag { 0%, 6% { transform: scale(.4); opacity: 0; } 12%, 92% { transform: scale(1); opacity: 1; } 98%, 100% { transform: scale(.4); opacity: 0; } }
@keyframes wt-zahl {
  0%, 11% { --wt-beitraege: 0; } 12%, 18% { --wt-beitraege: 1; } 19%, 25% { --wt-beitraege: 2; }
  26%, 94% { --wt-beitraege: 3; } 95%, 100% { --wt-beitraege: 0; }
}
@keyframes wt-balken { 0%, 34% { transform: scaleY(0); } 48%, 94% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes wt-marke { 0%, 62% { transform: scale(.6); opacity: 0; } 68%, 94% { transform: scale(1); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }

.kreisbild { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--farbe-flaeche); margin-bottom: 6rem; }
.kreisbild__buehne { position: relative; aspect-ratio: 4 / 3; container-type: inline-size; min-width: 0; }
.kreisbild__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kreisbild__feld { fill: url(#kreisbild-punkte); }
.kreisbild__punktmuster circle { fill: var(--farbe-text-blass); }
.kreisbild__innen { fill: var(--farbe-weiss); }
.kreisbild__ring { fill: none; stroke: var(--farbe-violett-kraeftig); stroke-width: 1.5; stroke-dasharray: 4 3; transform-box: fill-box; transform-origin: center; }
.kreisbild__mensch { fill: var(--farbe-text-grau); transition: fill .3s; }
.kreisbild__betrieb { fill: var(--farbe-tinte); }
.kreisbild__haus, .kreisbild__spiel { fill: var(--farbe-weiss); }
.kreisbild__spiel { opacity: 0; }
.kreisbild__weg { fill: none; stroke: var(--farbe-violett-kraeftig); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.kreisbild__prall { fill: var(--farbe-violett-kraeftig); opacity: 0; transform-box: fill-box; transform-origin: center; }
.kreisbild__welle { fill: var(--farbe-violett-blass); fill-opacity: .55; stroke: var(--farbe-violett-kraeftig); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.kreisbild__schild {
  position: absolute; margin: 0; display: flex; flex-direction: column; gap: .3em;
  padding: .55em .8em; border-radius: .3em; background: var(--farbe-weiss);
  font-size: clamp(11px, 1.9cqw, 15px); line-height: 1.15; color: var(--farbe-tinte); box-shadow: var(--schatten-beitrag);
}
.kreisbild__schild b { font-weight: 700; }
.kreisbild__schild span { font-weight: 500; color: var(--farbe-text-zweit); }
.kreisbild__schild--aussen { left: 4%; top: 6%; }
.kreisbild__schild--kreis { left: 50%; top: 85%; transform: translateX(-50%); background: var(--farbe-violett-blass); color: var(--farbe-violett-kraeftig); box-shadow: none; white-space: nowrap; }
.kreisbild__schild--zaehler { right: 4%; top: 6%; align-items: flex-end; }
.kreisbild__schild--zaehler b { font-weight: 800; font-size: 1.9em; line-height: 1; color: var(--farbe-violett-kraeftig); font-variant-numeric: tabular-nums; counter-reset: kb var(--kb-erreicht); }
.kreisbild__schild--zaehler b::after { content: counter(kb); }
.kreisbild__schild--aussen b { font-weight: 800; font-size: 1.9em; line-height: 1; color: var(--farbe-text-stumm); }

.kreisbild__wege { display: flex; flex-direction: column; justify-content: center; gap: 3.2rem; padding: 3.2rem 2.4rem 4rem; min-width: 0; }
.kreisbild__abschnitt { position: relative; display: flex; flex-direction: column; gap: .8rem; opacity: .4; transition: opacity var(--dauer-3) var(--kurve-weich); }
.kreisbild[data-weg="empfehlung"] .kreisbild__abschnitt:nth-child(1),
.kreisbild[data-weg="beitrag"] .kreisbild__abschnitt:nth-child(2) { opacity: 1; }
@media (hover: hover) {
  .kreisbild[data-weg="empfehlung"] .kreisbild__abschnitt:nth-child(2):hover,
  .kreisbild[data-weg="beitrag"] .kreisbild__abschnitt:nth-child(1):hover { opacity: .75; }
}
.kreisbild__fortschritt { display: block; height: 3px; border-radius: 10em; background: var(--farbe-linie); overflow: hidden; margin-bottom: .8rem; }
.kreisbild__fortschritt i { display: block; height: 100%; width: 100%; background: var(--farbe-violett-kraeftig); transform-origin: left; transform: scaleX(0); transition: transform var(--dauer-3) var(--kurve-weich); }
.kreisbild[data-weg="empfehlung"] .kreisbild__abschnitt:nth-child(1) .kreisbild__fortschritt i,
.kreisbild[data-weg="beitrag"] .kreisbild__abschnitt:nth-child(2) .kreisbild__fortschritt i { transform: none; }
.kreisbild__abschnitt h3 { margin: 0; color: var(--farbe-tinte); letter-spacing: -.03rem; font: 700 2rem/1.25 Inter, sans-serif; }
.kreisbild__abschnitt p { margin: 0; color: var(--farbe-text-zweit); letter-spacing: -.032rem; text-wrap: pretty; font: 400 1.6rem/150% Inter, sans-serif; }
.kreisbild__knopf {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none;
  display: flex; align-items: center; gap: 1.2rem; text-align: left; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit;
}
.kreisbild__knopf::after { content: ""; position: absolute; inset: -1.2rem -1.6rem; border-radius: .8rem; }
.kreisbild__knopf:focus-visible { outline: none; }
.kreisbild__knopf:focus-visible::after { outline: 2px solid var(--farbe-violett); }

.kreisbild__haus, .kreisbild__spiel { transition: opacity var(--dauer-3) var(--kurve-weich); }
.kreisbild__welle { transition: opacity var(--dauer-3) var(--kurve-weich); }
.kreisbild__weg { transition: stroke-dashoffset var(--dauer-3) var(--kurve-weich); }

.kreisbild[data-weg="empfehlung"] .kreisbild__weg { stroke-dashoffset: 0; }
.kreisbild[data-weg="empfehlung"] :is(.kreisbild__mensch--eins, .kreisbild__mensch--zwei, .kreisbild__mensch--drei) { fill: var(--farbe-violett-kraeftig); }
.kreisbild[data-weg="empfehlung"] .kreisbild__schild--zaehler b { --kb-erreicht: 3; }

.kreisbild[data-weg="beitrag"] .kreisbild__mensch { fill: var(--farbe-violett-kraeftig); }
.kreisbild[data-weg="beitrag"] .kreisbild__haus { opacity: 0; }
.kreisbild[data-weg="beitrag"] .kreisbild__spiel { opacity: 1; }
.kreisbild[data-weg="beitrag"] .kreisbild__welle:first-child { opacity: 1; transform: none; }
.kreisbild[data-weg="beitrag"] .kreisbild__schild--zaehler b { --kb-erreicht: 150; }

.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__abschnitt:nth-child(1) .kreisbild__fortschritt i { animation: kb-balken 3.6s linear backwards; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__weg { animation: kb-zeichnen .6s var(--kurve-druck) .3s backwards; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__weg:nth-of-type(2) { animation-delay: 1.1s; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__weg:nth-of-type(3) { animation-delay: 1.9s; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__weg:nth-of-type(4) { animation-delay: 2.7s; animation-duration: .5s; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__mensch--eins { animation: kb-grau .9s steps(1, end) backwards; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__mensch--zwei { animation: kb-grau 1.7s steps(1, end) backwards; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__mensch--drei { animation: kb-grau 2.5s steps(1, end) backwards; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__prall { animation: kb-prall .8s var(--kurve-aus) 3.2s backwards; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__ring { animation: kb-ring .6s var(--kurve-aus) 3.2s; }
.kreisbild.ist-spielend[data-weg="empfehlung"] .kreisbild__schild--zaehler b { animation: kb-zaehlen 2.4s steps(3, end) .1s backwards; }

.kreisbild.ist-spielend[data-weg="beitrag"] .kreisbild__abschnitt:nth-child(2) .kreisbild__fortschritt i { animation: kb-balken 3s linear backwards; }
.kreisbild.ist-spielend[data-weg="beitrag"] .kreisbild__welle:first-child { animation: kb-welle 1.6s var(--kurve-weich) .4s backwards; }
.kreisbild.ist-spielend[data-weg="beitrag"] .kreisbild__welle:last-child { animation: kb-welle-nach 1.8s var(--kurve-weich) .9s backwards; }
.kreisbild.ist-spielend[data-weg="beitrag"] .kreisbild__mensch--nah { animation: kb-grau 1s steps(1, end) backwards; }
.kreisbild.ist-spielend[data-weg="beitrag"] :is(.kreisbild__mensch--fern, .kreisbild__mensch--eins, .kreisbild__mensch--zwei, .kreisbild__mensch--drei) { animation: kb-grau 1.4s steps(1, end) backwards; }
.kreisbild.ist-spielend[data-weg="beitrag"] .kreisbild__ring { animation: kb-ring .6s var(--kurve-aus) 1.9s; }
.kreisbild.ist-spielend[data-weg="beitrag"] .kreisbild__schild--zaehler b { animation: kb-zaehlen 1.6s var(--kurve-aus) .6s backwards; }

@keyframes kb-balken { from { transform: scaleX(0); } }
@keyframes kb-zeichnen { from { stroke-dashoffset: 1; } }
@keyframes kb-grau { from { fill: var(--farbe-text-grau); } }
@keyframes kb-prall { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes kb-ring { 0%, 100% { stroke-width: 1.5; } 30% { stroke-width: 3.5; } }
@keyframes kb-welle { from { opacity: 1; transform: scale(.12); } }
@keyframes kb-welle-nach { 0% { opacity: .7; transform: scale(.12); } 80% { opacity: .7; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes kb-zaehlen { from { --kb-erreicht: 0; } }

@media screen and (width < 900px) {
  .kreisbild__buehne { aspect-ratio: 1; }
  .kreisbild__schild { font-size: clamp(11px, 3cqw, 14px); }
  .kreisbild__schild--kreis { top: 82%; }
}
@media screen and (width >= 900px) {
  .kreisbild { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
  .kreisbild__wege { order: -1; padding: 5.6rem 4.8rem; }
}
@media screen and (width >= 1025px) {
  .wahrheit__galerie { max-width: none; }
  .zkopf--wahrheit .behaelter > .wahrheit__galerie { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .kreisbild { margin-bottom: 64px; }
  .kreisbild__wege { gap: 40px; padding: 56px 48px; }
  .kreisbild__abschnitt { gap: 10px; }
  .kreisbild__fortschritt { margin-bottom: 10px; }
  .kreisbild__abschnitt h3 { font-size: 24px; gap: 14px; }
  .kreisbild__abschnitt p { font-size: 17px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .ist-sichtbar .profilwahl__chip--wahl, .ist-sichtbar .profilwahl__fuellung,
  .ist-sichtbar .profilwahl__knopf, .ist-sichtbar .profilwahl__km, .ist-sichtbar .profilwahl__schieber,
  .ist-sichtbar .profilwahl__haken, .ist-sichtbar .kamerasucher__bild img, .ist-sichtbar .kamerasucher__rec i,
  .ist-sichtbar .kamerasucher__quartal, .ist-sichtbar .wochentakt__tag--beitrag img, .ist-sichtbar .wochentakt__zahl,
  .ist-sichtbar .wochentakt__balken span, .ist-sichtbar .wochentakt__marke,
  .kreisbild.ist-spielend * { animation: none; }
  .kreisbild * { transition: none; }
}