.fortschrittssterne {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.6em;
			margin-top: 1em;
		}
		.fortschrittsstern {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.2em;
			height: 1.3em;
			font-size: 2.4em;
			line-height: 1;
			color: #aaa;
		}
		.fortschrittsstern.geschafft {
			color: #ffd54a;
			text-shadow: 0 0 0.3em rgba(255, 213, 74, 0.65);
			animation: geschafft 1100ms ease-out;
		}
		.fortschrittsstern.geschafft::before,
		.fortschrittsstern.geschafft::after {
			content: "✦";
			position: absolute;
			font-size: 0.45em;
			color: #fff5bc;
			text-shadow: 0 0 0.4em #ffd54a, 0 0 0.8em #ffd54a;
			pointer-events: none;
			opacity: 0;
			animation: sternfunkeln 1000ms ease-out;
		}
		.fortschrittsstern.geschafft::before {
			top: 0;
			left: -0.15em;
		}
		.fortschrittsstern.geschafft::after {
			right: -0.15em;
			bottom: 0;
			animation-delay: 150ms;
		}
		@keyframes geschafft {
			0% { transform: scale(0.7); }
			30% {
				transform: scale(1.2);
				text-shadow: 0 0 0.2em #fff5bc, 0 0 0.6em #ffd54a, 0 0 1em #ffd54a;
			}
			65% {
				transform: scale(1);
				text-shadow: 0 0 0.3em #fff5bc, 0 0 0.8em #ffd54a;
			}
			100% { transform: scale(1); }
		}
		@keyframes sternfunkeln {
			0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
			25% { opacity: 1; transform: scale(1.2) rotate(0deg); }
			55% { opacity: 0.4; transform: scale(0.7) rotate(15deg); }
			75% { opacity: 1; transform: scale(1) rotate(30deg); }
			100% { opacity: 0; transform: scale(0.3) rotate(45deg); }
		}
		@media (prefers-reduced-motion: reduce) {
			.fortschrittsstern.geschafft,
			.fortschrittsstern.geschafft::before,
			.fortschrittsstern.geschafft::after { animation: none; }
		}

		main { position: relative; overflow: hidden; }
		main > section { position: relative; z-index: 1; }
		.fertig .fortschrittsstern {
			animation: bunt-blinken 900ms steps(1) infinite;
			animation-delay: calc(var(--stern-index) * -90ms);
		}
		@keyframes bunt-blinken {
			0%, 100% { color: #ff6688; text-shadow: 0 0 0.5em currentColor; }
			25% { color: #ffd54a; }
			50% { color: #66ddff; }
			75% { color: #99ff88; }
		}
		.feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
		@media (prefers-reduced-motion: reduce) {
			.fertig .fortschrittsstern { animation: none; color: #ffd54a; }
			.feuerwerk { display: none; }
		}

main { min-height: 95vh; }
.mathe-fortschritt { text-align: center; margin: 1em 0 1.5em; }
.mathe-counter-versteckt { display: none; }