/* ==========================================================================
   7S — Minecraft-Animationen
   --------------------------------------------------------------------------
   Bewegungssprache: Pixel-Objekte bewegen sich in Stufen (steps()), nie weich.
   UI-Elemente bewegen sich weich. Pixel-Objekte haben nie border-radius.
   Alle Timings sind Teiler von 7s – dem Markenversprechen.
   ========================================================================== */

.mc-scene {
	position: relative;
	display: block;
}
.mc-scene svg { display: block; }

/* Pixelkanten hart halten, auch beim Skalieren */
.mc-scene svg,
.mc-scene img {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* Außerhalb des Sichtfelds werden alle Animationen angehalten (Akku!) */
.mc-scene.mc-paused,
.mc-scene.mc-paused *,
.mc-scene.mc-paused *::before,
.mc-scene.mc-paused *::after { animation-play-state: paused !important; }

/* Pixel-Objekte: keine runden Ecken, harte Kanten */
.mc-block,
.mc-adblock,
.mc-oven,
.mc-hopper,
.mc-rack__unit,
.mc-rack__drive,
.mc-arrow__track,
.mc-arrow__fill,
.mc-meter,
.mc-meter__fill { border-radius: 0; }

/* ==========================================================================
   1 — Winkender Charakter
   ========================================================================== */
.mc-scene--char {
	--mc-char-h: 260px;
	width: calc(var(--mc-char-h) / 34 * 16);
	height: var(--mc-char-h);
	flex: none;
}
.mc-char {
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}

/* Ganzkörper-Wippen – bewusst in 2 Stufen, damit es „engine-haft" wirkt */
.mc-char__bob {
	animation: mc-bob 2.8s steps(2, end) infinite alternate;
	transform-box: fill-box;
	transform-origin: 50% 100%;
}
@keyframes mc-bob {
	from { transform: translateY(0); }
	to   { transform: translateY(-1px); }
}

/* Kopf: leichtes Nicken zur Winkbewegung */
.mc-char__head {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: mc-head-tilt 7s ease-in-out infinite;
}
@keyframes mc-head-tilt {
	0%, 55%, 100% { transform: rotate(0deg); }
	12%, 40%      { transform: rotate(-4deg); }
}

/* Blinzeln: Hautfarbe legt sich kurz über die Augenreihe */
.mc-char__blink {
	opacity: 0;
	animation: mc-blink 5.6s steps(1, end) infinite;
}
@keyframes mc-blink {
	0%, 92%, 96%, 100% { opacity: 0; }
	93%, 95%           { opacity: 1; }
}

/* Der winkende Arm – Drehpunkt sitzt exakt auf der Schulter */
.mc-char__arm {
	transform-box: fill-box;
}
.mc-char__arm--wave {
	transform-origin: 2px 1px;
	animation: mc-wave 7s ease-in-out infinite;
}
@keyframes mc-wave {
	0%, 8%          { transform: rotate(0deg); }
	14%             { transform: rotate(-148deg); }
	19%             { transform: rotate(-172deg); }
	24%             { transform: rotate(-142deg); }
	29%             { transform: rotate(-172deg); }
	34%             { transform: rotate(-142deg); }
	39%             { transform: rotate(-170deg); }
	48%, 100%       { transform: rotate(0deg); }
}
/* Hinterer Arm schwingt minimal mit */
.mc-char__arm--back {
	transform-origin: 2px 1px;
	animation: mc-arm-idle 7s ease-in-out infinite;
}
@keyframes mc-arm-idle {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(6deg); }
}

/* Sprechblase erscheint genau während des Winkens */
.mc-speech {
	position: absolute;
	top: -4px;
	right: 74%;
	z-index: 2;
	padding: .45rem .8rem;
	background: var(--panel);
	border: 2px solid var(--border);
	color: var(--text);
	font-family: var(--font-mono);
	font-size: .78rem;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(6px);
	animation: mc-speech 7s ease-out infinite;
}
.mc-speech::after {
	content: "";
	position: absolute;
	right: 12px; bottom: -8px;
	width: 8px; height: 8px;
	background: var(--panel);
	border-right: 2px solid var(--border);
	border-bottom: 2px solid var(--border);
	transform: rotate(45deg);
}
@keyframes mc-speech {
	0%, 12%   { opacity: 0; transform: translateY(6px); }
	18%, 42%  { opacity: 1; transform: translateY(0); }
	50%, 100% { opacity: 0; transform: translateY(6px); }
}

/* Bodenschatten atmet mit */
.mc-shadow {
	position: absolute;
	left: 50%; bottom: -10px;
	width: 72%; height: 12px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);
	animation: mc-shadow 2.8s steps(2, end) infinite alternate;
}
@keyframes mc-shadow {
	from { opacity: .8; width: 72%; }
	to   { opacity: .6; width: 66%; }
}

/* ==========================================================================
   2 — Diamantschwert
   ========================================================================== */
.mc-scene--sword {
	--mc-sword-size: 96px;
	width: var(--mc-sword-size);
	height: var(--mc-sword-size);
	cursor: pointer;
}
.mc-sword {
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 6px 12px rgba(79,209,197,.35));
}
.mc-sword__body {
	transform-box: fill-box;
	transform-origin: 25% 75%;
	animation: mc-sword-idle 7s ease-in-out infinite;
}
@keyframes mc-sword-idle {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-6%) rotate(-5deg); }
}

/* Verzauberungs-Schimmer läuft über die Klinge, exakt auf die Silhouette geclippt */
.mc-sword__glint {
	animation: mc-glint 3.5s linear infinite;
}
@keyframes mc-glint {
	0%       { transform: translateX(0); }
	60%,100% { transform: translateX(34px); }
}

/* Funken */
.mc-spark {
	position: absolute;
	width: 4px; height: 4px;
	background: var(--diamond);
	opacity: 0;
	animation: mc-spark 1.75s steps(3, end) infinite;
}
.mc-spark--1 { top: 12%; right: 8%;  animation-delay: 0s; }
.mc-spark--2 { top: 28%; right: 26%; animation-delay: .58s; background: #ffffff; }
.mc-spark--3 { top: 6%;  right: 34%; animation-delay: 1.16s; background: var(--amber); }
@keyframes mc-spark {
	0%   { opacity: 0; transform: translate(0,0) scale(.5); }
	30%  { opacity: 1; transform: translate(2px,-4px) scale(1); }
	100% { opacity: 0; transform: translate(6px,-14px) scale(.4); }
}

/* Schlag beim Hover, Tastaturfokus oder Klick */
.mc-scene--sword:hover .mc-sword__body,
.mc-scene--sword:focus-visible .mc-sword__body,
.mc-scene--sword.is-swinging .mc-sword__body {
	animation: mc-swing .45s cubic-bezier(.2,.9,.25,1) 1;
}
@keyframes mc-swing {
	0%   { transform: rotate(0deg) translateX(0); }
	25%  { transform: rotate(38deg) translateX(-6%); }
	60%  { transform: rotate(-62deg) translateX(8%); }
	100% { transform: rotate(0deg) translateX(0); }
}

/* Schlagspur */
.mc-slash {
	position: absolute;
	inset: -12%;
	pointer-events: none;
	opacity: 0;
	background:
		conic-gradient(from 210deg at 50% 50%,
			transparent 0deg,
			rgba(255,255,255,.75) 18deg,
			rgba(79,209,197,.55) 34deg,
			transparent 52deg);
	mask: radial-gradient(circle at 50% 50%, transparent 46%, #000 48%, #000 70%, transparent 72%);
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent 46%, #000 48%, #000 70%, transparent 72%);
}
.mc-scene--sword:hover .mc-slash,
.mc-scene--sword:focus-visible .mc-slash,
.mc-scene--sword.is-swinging .mc-slash {
	animation: mc-slash .45s ease-out 1;
}
@keyframes mc-slash {
	0%   { opacity: 0; transform: rotate(-40deg) scale(.7); }
	35%  { opacity: 1; transform: rotate(10deg) scale(1); }
	100% { opacity: 0; transform: rotate(60deg) scale(1.15); }
}

/* ==========================================================================
   2b — Pixel-Diamant
   ========================================================================== */
.mc-scene--diamond {
	--mc-diamond-size: 92px;
	position: relative;
	width: var(--mc-diamond-size);
	height: var(--mc-diamond-size);
	cursor: pointer;
}
/* weicher Glow hinter dem Stein */
.mc-scene--diamond::before {
	content: "";
	position: absolute;
	inset: -18%;
	background: radial-gradient(circle at 50% 42%, rgba(79,209,197,.32), rgba(79,209,197,0) 65%);
	animation: mc-diamond-glow 3.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mc-diamond-glow {
	0%, 100% { opacity: .55; transform: scale(.94); }
	50%      { opacity: 1;   transform: scale(1.06); }
}
.mc-diamond {
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 8px 14px rgba(79,209,197,.4));
}
.mc-diamond__body {
	transform-box: fill-box;
	transform-origin: 50% 55%;
	animation: mc-diamond-idle 7s ease-in-out infinite;
}
@keyframes mc-diamond-idle {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-8%) rotate(3deg); }
}
/* Glanz-Sweep, exakt auf die Silhouette geclippt */
.mc-diamond__glint { animation: mc-glint 3.5s linear infinite; }

/* kleiner Freuden-Hopser beim Hover/Fokus */
.mc-scene--diamond:hover .mc-diamond__body,
.mc-scene--diamond:focus-visible .mc-diamond__body {
	animation: mc-diamond-pop .55s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes mc-diamond-pop {
	0%   { transform: translateY(0) scale(1) rotate(0deg); }
	40%  { transform: translateY(-14%) scale(1.14) rotate(-8deg); }
	100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* ==========================================================================
   2c — Pixel-Brief (Kontakt)
   ========================================================================== */
.mc-scene--mail {
	--mc-mail-size: 150px;
	position: relative;
	width: var(--mc-mail-size);
	height: calc(var(--mc-mail-size) * .91);
	cursor: pointer;
}
.mc-mail { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }

/*
 * 7s-Zyklus: zu (wackeln) -> Lasche auf -> Brief faehrt heraus ->
 * Brief zurueck -> Lasche zu. Zustandswechsel hart per steps().
 */
.mc-mail__closed { animation: mc-mail-closed 7s step-end infinite; }
.mc-mail__open   { animation: mc-mail-open 7s step-end infinite; opacity: 0; }
@keyframes mc-mail-closed {
	0%, 20%   { opacity: 1; }
	20%, 78%  { opacity: 0; }
	78%, 100% { opacity: 1; }
}
@keyframes mc-mail-open {
	0%, 20%   { opacity: 0; }
	20%, 78%  { opacity: 1; }
	78%, 100% { opacity: 0; }
}
/* Der Brief steckt hinter dem Koerper und faehrt nach oben heraus */
.mc-mail__letter {
	transform: translate(3px, 9px);
	animation: mc-mail-letter 7s ease-in-out infinite;
}
@keyframes mc-mail-letter {
	0%, 24%   { transform: translate(3px, 9px); }
	38%, 58%  { transform: translate(3px, -8px); }
	72%, 100% { transform: translate(3px, 9px); }
}
/* Umschlag wackelt kurz vor dem Oeffnen wie ein klingelndes Postfach */
.mc-scene--mail .mc-mail { animation: mc-mail-wiggle 7s ease-in-out infinite; }
@keyframes mc-mail-wiggle {
	0%, 8%    { transform: rotate(0deg); }
	10%       { transform: rotate(-4deg); }
	12%       { transform: rotate(4deg); }
	14%       { transform: rotate(-3deg); }
	16%, 100% { transform: rotate(0deg); }
}
/* Ungelesen-Punkt: pulsiert, verschwindet, sobald der Brief draussen ist */
.mc-mail__badge {
	position: absolute;
	top: 2%;
	right: -4%;
	min-width: 22px;
	height: 22px;
	padding: 0 4px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 0 rgba(229,84,79,.5);
	animation: mc-mail-badge 7s ease-in-out infinite;
}
@keyframes mc-mail-badge {
	0%        { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(229,84,79,.5); }
	8%        { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(229,84,79,0); }
	16%       { transform: scale(1); opacity: 1; }
	24%, 74%  { transform: scale(0); opacity: 0; }
	86%, 100% { transform: scale(1); opacity: 1; }
}
.mc-scene--mail .mc-spark { animation-delay: 2.1s; }
.mc-scene--mail .mc-spark--2 { animation-delay: 2.5s; }
.mc-scene--mail .mc-spark--3 { animation-delay: 2.9s; }
.mc-scene--mail:hover .mc-mail,
.mc-scene--mail:focus-visible .mc-mail { animation: mc-mail-wiggle 1.2s ease-in-out infinite; }

/* ==========================================================================
   2d — Spitzhacke (Team / "Wir suchen dich")
   ========================================================================== */
.mc-scene--pickaxe {
	--mc-pick-w: 230px;
	position: relative;
	width: var(--mc-pick-w);
	height: calc(var(--mc-pick-w) * .65);
	cursor: pointer;
}
.mc-pick { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); }

/*
 * 8s-Zyklus, vier Schlaege (alle 1.5s ab 0.6s): Hacke holt aus und schlaegt
 * zu, mit jedem Treffer ein Riss mehr; nach dem vierten zerspringt der
 * Block, kurze Pause, dann erscheint er neu.
 */
.mc-pick__tool {
	transform-box: view-box;
	transform-origin: 12% 78%; /* Griffende */
	animation: mc-pick-swing 8s ease-in-out infinite;
}
@keyframes mc-pick-swing {
	0%, 5%          { transform: rotate(-26deg); }
	7.5%            { transform: rotate(14deg); }  /* Schlag 1 */
	12%, 23.75%     { transform: rotate(-26deg); }
	26.25%          { transform: rotate(14deg); }  /* Schlag 2 */
	31%, 42.5%      { transform: rotate(-26deg); }
	45%             { transform: rotate(14deg); }  /* Schlag 3 */
	50%, 61.25%     { transform: rotate(-26deg); }
	63.75%          { transform: rotate(14deg); }  /* Schlag 4 */
	68%, 100%       { transform: rotate(-26deg); }
}
/* Block zittert bei jedem Treffer, zerspringt nach Schlag 4, kommt zurueck */
.mc-pick__block {
	transform-box: fill-box;
	transform-origin: center;
	animation: mc-pick-block 8s ease-in-out infinite;
}
@keyframes mc-pick-block {
	0%, 7%     { transform: translate(0, 0) scale(1); opacity: 1; }
	8%         { transform: translate(1.2px, 0) scale(1); }
	9%         { transform: translate(-.8px, 0) scale(1); }
	10%, 25.5% { transform: translate(0, 0) scale(1); }
	26.5%      { transform: translate(1.2px, 0); }
	27.5%      { transform: translate(-.8px, 0); }
	28.5%, 44.5% { transform: translate(0, 0); }
	45.5%      { transform: translate(1.2px, 0); }
	46.5%      { transform: translate(-.8px, 0); }
	47.5%, 63.5% { transform: translate(0, 0) scale(1); opacity: 1; }
	66%        { transform: scale(1.18); opacity: 0; }      /* zerspringt */
	67%, 82%   { transform: scale(0); opacity: 0; }
	88%        { transform: scale(1.12); opacity: 1; }      /* respawnt */
	92%, 100%  { transform: scale(1); opacity: 1; }
}
/* Risse erscheinen kumulativ nach Schlag 1, 2, 3 */
.mc-pick__crack { opacity: 0; }
.mc-pick__crack--1 { animation: mc-crack-1 8s step-end infinite; }
.mc-pick__crack--2 { animation: mc-crack-2 8s step-end infinite; }
.mc-pick__crack--3 { animation: mc-crack-3 8s step-end infinite; }
@keyframes mc-crack-1 { 0%, 7.5% { opacity: 0; } 7.5%, 66% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes mc-crack-2 { 0%, 26.25% { opacity: 0; } 26.25%, 66% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes mc-crack-3 { 0%, 45% { opacity: 0; } 45%, 66% { opacity: 1; } 66%, 100% { opacity: 0; } }
/* Funken bei den Treffern */
.mc-scene--pickaxe .mc-spark { left: 68%; top: 40%; animation-duration: 2s; animation-delay: .6s; }
.mc-scene--pickaxe .mc-spark--2 { left: 74%; top: 32%; animation-delay: 2.1s; }
.mc-scene--pickaxe .mc-spark--3 { left: 71%; top: 48%; animation-delay: 3.6s; }
.mc-scene--pickaxe:hover .mc-pick__tool,
.mc-scene--pickaxe:focus-visible .mc-pick__tool { animation-duration: 2.6s; }
.mc-scene--pickaxe:hover .mc-pick__block,
.mc-scene--pickaxe:focus-visible .mc-pick__block { animation-duration: 2.6s; }
.mc-scene--pickaxe:hover .mc-pick__crack--1,
.mc-scene--pickaxe:focus-visible .mc-pick__crack--1 { animation-duration: 2.6s; }
.mc-scene--pickaxe:hover .mc-pick__crack--2,
.mc-scene--pickaxe:focus-visible .mc-pick__crack--2 { animation-duration: 2.6s; }
.mc-scene--pickaxe:hover .mc-pick__crack--3,
.mc-scene--pickaxe:focus-visible .mc-pick__crack--3 { animation-duration: 2.6s; }

/* ==========================================================================
   3 — Server, der sich aufbaut
   ========================================================================== */
.mc-scene--build {
	--mc-unit-h: 30px;
	--mc-unit-w: 190px;
	--mc-step: .62s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4rem;
}
.mc-scene--build.mc-scene--mini {
	--mc-unit-h: 14px;
	--mc-unit-w: 96px;
	--mc-step: .34s;
	gap: .7rem;
}

.mc-rack {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 4px;
	padding-top: 34px;
}

/* Lichtsäule, in der die Blöcke einschweben */
.mc-rack__beam {
	position: absolute;
	left: 50%; top: -30px; bottom: 20px;
	width: calc(var(--mc-unit-w) * .55);
	transform: translateX(-50%);
	background: linear-gradient(180deg, rgba(95,191,90,.22), transparent 78%);
	opacity: 0;
	pointer-events: none;
}
.mc-scene--build.is-building .mc-rack__beam {
	animation: mc-beam 5.4s ease-out 1 forwards;
}
@keyframes mc-beam {
	0%       { opacity: 0; }
	12%      { opacity: 1; }
	80%,100% { opacity: 0; }
}

.mc-rack__units {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 4px;
	margin: 0; padding: 0;
	list-style: none;
}

.mc-rack__unit {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	width: var(--mc-unit-w);
	height: var(--mc-unit-h);
	padding: 0 8px;
	background: linear-gradient(180deg, var(--panel-2) 0 55%, var(--panel) 55% 100%);
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,.07),
		inset 0 -2px 0 rgba(0,0,0,.45),
		inset 2px 0 0 rgba(255,255,255,.04),
		inset -2px 0 0 rgba(0,0,0,.3);
	opacity: 0;
}
.mc-scene--mini .mc-rack__unit { padding: 0 4px; gap: 2px; }

/* Jede vierte Einheit bekommt Materialfarbe – Gras, Diamant, Redstone */
.mc-rack__unit:nth-child(3n+1) { background: linear-gradient(180deg, var(--grass) 0 55%, var(--grass-dark) 55% 100%); }
.mc-rack__unit:nth-child(3n+2) { background: linear-gradient(180deg, var(--diamond) 0 55%, #1f8f85 55% 100%); }

/* Der eigentliche Einschlag: fällt in Stufen, staucht beim Aufsetzen */
.mc-scene--build.is-building .mc-rack__unit {
	animation: mc-unit-drop var(--mc-step) steps(5, end) both;
	animation-delay: calc(var(--i) * var(--mc-step));
}
@keyframes mc-unit-drop {
	0%   { opacity: 0; transform: translateY(-130px) scaleY(1.18); }
	85%  { opacity: 1; transform: translateY(0) scaleY(1.18); }
	100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* Staub beim Aufsetzen */
.mc-rack__dust {
	position: absolute;
	left: 50%; bottom: -2px;
	width: 100%; height: 8px;
	transform: translateX(-50%);
	pointer-events: none;
	background:
		radial-gradient(3px 3px at 15% 50%, rgba(255,255,255,.5), transparent 60%),
		radial-gradient(3px 3px at 45% 40%, rgba(255,255,255,.4), transparent 60%),
		radial-gradient(3px 3px at 78% 55%, rgba(255,255,255,.45), transparent 60%);
	opacity: 0;
}
.mc-scene--build.is-building .mc-rack__dust {
	animation: mc-dust .4s steps(3, end) both;
	animation-delay: calc(var(--i) * var(--mc-step) + var(--mc-step) * .8);
}
@keyframes mc-dust {
	0%   { opacity: .9; transform: translateX(-50%) scaleX(.6); }
	100% { opacity: 0;  transform: translateX(-50%) scaleX(1.5); }
}

/* Laufwerksschächte */
.mc-rack__drive {
	width: 26px;
	height: 42%;
	background: rgba(0,0,0,.35);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.mc-scene--mini .mc-rack__drive { width: 12px; }

.mc-rack__leds {
	margin-left: auto;
	display: flex;
	gap: 4px;
}
.mc-led {
	width: 6px; height: 6px;
	background: rgba(255,255,255,.18);
}
.mc-scene--mini .mc-led { width: 4px; height: 4px; }
.mc-scene--build.is-building .mc-led {
	animation: mc-led-on 1.75s steps(2, end) infinite;
	animation-delay: calc(var(--l) * .22s + 4.4s);
}
@keyframes mc-led-on {
	0%, 49%   { background: var(--grass); box-shadow: 0 0 6px rgba(95,191,90,.9); }
	50%, 100% { background: rgba(95,191,90,.25); box-shadow: none; }
}
.mc-led--alt { animation-duration: 1.16s !important; }
.mc-scene--build.is-building .mc-led--alt {
	animation-name: mc-led-on-alt;
}
@keyframes mc-led-on-alt {
	0%, 39%   { background: var(--amber); box-shadow: 0 0 6px rgba(242,169,60,.8); }
	40%, 100% { background: rgba(242,169,60,.2); box-shadow: none; }
}

.mc-rack__base {
	width: calc(var(--mc-unit-w) + 16px);
	height: 10px;
	background: linear-gradient(180deg, var(--border), var(--bg-alt));
	box-shadow: 0 14px 26px -10px rgba(0,0,0,.7);
}

/* „Server online"-Fahne erscheint erst, wenn der letzte Block liegt */
.mc-rack__flag {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .85rem;
	background: var(--panel);
	border: 2px solid var(--border);
	font-family: var(--font-mono);
	font-size: .74rem;
	white-space: nowrap;
	opacity: 0;
}
.mc-scene--mini .mc-rack__flag { font-size: .66rem; padding: .25rem .6rem; }
.mc-scene--build.is-building .mc-rack__flag {
	animation: mc-flag .5s ease-out both;
	animation-delay: 4.7s;
}
@keyframes mc-flag {
	0%   { opacity: 0; transform: translate(-50%, 8px); }
	100% { opacity: 1; transform: translate(-50%, 0); }
}
.mc-rack__dot {
	width: 8px; height: 8px;
	background: var(--grass);
	animation: pulse 1.75s ease-in-out infinite;
}

/* HUD unter dem Rack */
.mc-rack__hud {
	width: calc(var(--mc-unit-w) + 16px);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.mc-meter {
	height: 10px;
	background: var(--bg-alt);
	box-shadow: inset 0 0 0 2px var(--border);
	overflow: hidden;
}
.mc-meter__fill {
	display: block;
	height: 100%;
	width: 0;
	background: repeating-linear-gradient(90deg, var(--grass) 0 6px, var(--grass-dark) 6px 10px);
}
.mc-scene--build.is-building .mc-meter__fill {
	animation: mc-meter 4.6s steps(14, end) both;
}
@keyframes mc-meter { to { width: 100%; } }

.mc-rack__stats {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: .76rem;
	color: var(--text-muted);
}
.mc-rack__region {
	margin: 0;
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--text-muted);
}

/* ==========================================================================
   4 — Signatur: Der Werbe-Ofen
   ========================================================================== */
.mc-scene--furnace { --mc-cycle: 7s; }

.mc-flow {
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	align-items: center;
	gap: 1.25rem;
	padding: 2rem 1.5rem;
	background: var(--bg-alt);
	box-shadow: inset 0 0 0 2px var(--border);
}
.mc-flow__node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
	text-align: center;
}
.mc-flow__label {
	margin: 0;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.mc-flow__caption {
	margin: 1.25rem 0 0;
	text-align: center;
	color: var(--text-muted);
	font-size: .92rem;
}

/* Werbeblock – das „Brennmaterial" */
.mc-adblock {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	background: linear-gradient(180deg, var(--amber) 0 55%, #c4821f 55% 100%);
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,.35),
		inset 0 -3px 0 rgba(0,0,0,.35),
		inset -2px 0 0 rgba(0,0,0,.2);
	color: #24170a;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: .64rem;
	letter-spacing: .04em;
}

.mc-adstack {
	display: flex;
	flex-direction: column-reverse;
	gap: 3px;
}
.mc-adstack .mc-adblock {
	animation: mc-restock var(--mc-cycle) steps(4, end) infinite;
	animation-delay: calc(var(--s) * 1.75s);
}
@keyframes mc-restock {
	0%, 74%  { opacity: 1; transform: translateY(0); }
	80%      { opacity: 0; transform: translateY(-10px); }
	86%      { opacity: 0; transform: translateY(10px); }
	92%,100% { opacity: 1; transform: translateY(0); }
}

/* Schiene zum Ofen */
.mc-rail {
	position: relative;
	height: 46px;
	min-width: 120px;
}
.mc-rail__line {
	position: absolute;
	left: 0; right: 0; bottom: 4px;
	height: 4px;
	background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px);
}
.mc-adblock--fly {
	position: absolute;
	bottom: 8px;
	left: -46px;
	animation: mc-travel var(--mc-cycle) steps(12, end) infinite;
	animation-delay: calc(var(--i) * -1.75s);
}
@keyframes mc-travel {
	0%   { opacity: 0; left: -46px;             transform: translateY(0); }
	7%   { opacity: 1; left: -28px;             transform: translateY(0); }
	74%  { opacity: 1; left: calc(100% + 4px);  transform: translateY(0); }
	85%  { opacity: 1; left: calc(100% + 16px); transform: translateY(14px); }
	93%  { opacity: 0; left: calc(100% + 16px); transform: translateY(30px); }
	100% { opacity: 0; left: calc(100% + 16px); transform: translateY(30px); }
}

/* Trichter über dem Ofen */
.mc-hopper {
	width: 56px; height: 18px;
	background: var(--panel-2);
	clip-path: polygon(0 0, 100% 0, 76% 100%, 24% 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.08);
	animation: mc-hopper-tap var(--mc-cycle) steps(2, end) infinite;
}
@keyframes mc-hopper-tap {
	0%, 20%, 45%, 70%, 95%, 100% { transform: translateY(0); }
	22%, 47%, 72%, 97%           { transform: translateY(3px); }
}

/* Der Ofen = dein Server */
.mc-oven {
	position: relative;
	width: 104px; height: 104px;
	background: linear-gradient(180deg, #7d838f 0 12%, #646a75 12% 100%);
	box-shadow:
		inset 0 3px 0 rgba(255,255,255,.14),
		inset 0 -4px 0 rgba(0,0,0,.45),
		inset 3px 0 0 rgba(255,255,255,.06),
		inset -3px 0 0 rgba(0,0,0,.3),
		0 18px 32px -14px rgba(0,0,0,.8);
	overflow: hidden;
}
/* Brennkammer: dunkle Nische, in der das Feuer steht */
.mc-oven::before {
	content: "";
	position: absolute;
	left: 50%; bottom: 6px;
	width: 74px; height: 44px;
	transform: translateX(-50%);
	background: #08110c;
	box-shadow: inset 0 3px 0 rgba(0,0,0,.9), inset 0 0 22px rgba(242,169,60,.35);
}
.mc-oven__slot {
	position: absolute;
	left: 50%; top: 10px;
	width: 62px; height: 28px;
	transform: translateX(-50%);
	background: #0c0f14;
	box-shadow: inset 0 2px 0 rgba(0,0,0,.8);
}
.mc-oven__grate {
	position: absolute;
	left: 50%; top: 13px;
	width: 62px; height: 22px;
	transform: translateX(-50%);
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px);
}

/* Feuer aus fünf Zungen, jede mit eigener Stufenfrequenz */
.mc-oven__fire {
	position: absolute;
	left: 50%; bottom: 10px;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	transform: translateX(-50%);
	height: 40px;
}
.mc-oven__fire i {
	display: block;
	width: 9px;
	background: linear-gradient(180deg, var(--amber) 0 40%, var(--red) 40% 100%);
	transform-origin: 50% 100%;
	animation: mc-fire .58s steps(3, end) infinite alternate;
}
.mc-oven__fire i:nth-child(1) { height: 18px; animation-delay: .00s; }
.mc-oven__fire i:nth-child(2) { height: 28px; animation-delay: .12s; }
.mc-oven__fire i:nth-child(3) { height: 38px; animation-delay: .06s; background: linear-gradient(180deg, #ffe08a 0 35%, var(--amber) 35% 100%); }
.mc-oven__fire i:nth-child(4) { height: 26px; animation-delay: .18s; }
.mc-oven__fire i:nth-child(5) { height: 16px; animation-delay: .09s; }
@keyframes mc-fire {
	from { transform: scaleY(.72); opacity: .85; }
	to   { transform: scaleY(1.18); opacity: 1; }
}
/* Aufflammen im Takt der ankommenden Werbeblöcke */
.mc-oven::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 82%, rgba(242,169,60,.55), transparent 62%);
	opacity: 0;
	animation: mc-flare 1.75s ease-out infinite;
}
@keyframes mc-flare {
	0%       { opacity: .85; }
	40%,100% { opacity: 0; }
}

/* Ofen-Fortschrittspfeil */
.mc-arrow {
	position: relative;
	width: 60px; height: 22px;
}
.mc-arrow__track,
.mc-arrow__fill {
	position: absolute;
	inset: 0;
	clip-path: polygon(0 30%, 66% 30%, 66% 0, 100% 50%, 66% 100%, 66% 70%, 0 70%);
}
.mc-arrow__track { background: var(--border); }
.mc-arrow__fill {
	background: var(--grass);
	animation: mc-arrow 1.75s steps(8, end) infinite;
}
@keyframes mc-arrow {
	0%   { clip-path: polygon(0 30%, 0 30%, 0 0, 0 50%, 0 100%, 0 70%, 0 70%); }
	100% { clip-path: polygon(0 30%, 66% 30%, 66% 0, 100% 50%, 66% 100%, 66% 70%, 0 70%); }
}

/* Ergebnis: Preis bleibt bei 0,00 € */
.mc-out {
	position: relative;
	display: grid;
	place-items: center;
	width: 104px; height: 104px;
	background: var(--panel);
	box-shadow: inset 0 0 0 2px var(--grass);
}
.mc-out__price {
	font-family: var(--font-mono);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--grass);
	animation: mc-price-tick 1.75s steps(2, end) infinite;
}
@keyframes mc-price-tick {
	0%, 88%   { transform: scale(1); }
	92%       { transform: scale(1.12); }
	96%, 100% { transform: scale(1); }
}
.mc-out__pop {
	position: absolute;
	top: 6px; left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: .68rem;
	color: var(--diamond);
	white-space: nowrap;
	opacity: 0;
	animation: mc-pop 1.75s ease-out infinite;
}
@keyframes mc-pop {
	0%       { opacity: 0; transform: translate(-50%, 10px); }
	25%      { opacity: 1; transform: translate(-50%, -2px); }
	70%,100% { opacity: 0; transform: translate(-50%, -16px); }
}

/* Erfahrungs-Kugeln steigen auf */
.mc-orb {
	position: absolute;
	width: 6px; height: 6px;
	background: var(--grass);
	opacity: 0;
	animation: mc-orb 1.75s steps(4, end) infinite;
}
.mc-orb--1 { left: 22%; bottom: 12px; animation-delay: 0s; }
.mc-orb--2 { left: 50%; bottom: 8px;  animation-delay: .58s; background: var(--diamond); }
.mc-orb--3 { left: 74%; bottom: 14px; animation-delay: 1.16s; background: var(--amber); }
@keyframes mc-orb {
	0%   { opacity: 0; transform: translateY(0); }
	25%  { opacity: 1; transform: translateY(-12px); }
	100% { opacity: 0; transform: translateY(-40px); }
}

/* ==========================================================================
   5 — Blockparade & Creeper
   ========================================================================== */
.mc-scene--parade {
	position: relative;
	height: 214px;
	overflow: hidden;
}
.mc-blocks {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(1rem, 5vw, 3.5rem);
	height: 140px;
	margin: 0; padding: 0;
	list-style: none;
}
.mc-block {
	width: 56px; height: 56px;
	animation: mc-block-float 3.5s ease-in-out infinite;
	animation-delay: calc(var(--i) * -.58s);
	filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.mc-block svg { width: 100%; height: 100%; }
@keyframes mc-block-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-26px) rotate(-6deg); }
}

/* Grasboden, auf dem der Creeper läuft */
.mc-ground {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 18px;
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 7px),
		linear-gradient(180deg, var(--grass) 0 5px, var(--grass-dark) 5px 8px, #8a5a3c 8px 100%);
}

/* Creeper spaziert durchs Bild und zündet einmal pro Runde */
.mc-creeper {
	position: absolute;
	left: -80px; bottom: 14px;
	width: 48px; height: 104px;
	transform-origin: 50% 100%;
	animation: mc-creeper-walk 21s linear infinite;
}
.mc-creeper span { position: absolute; display: block; }
.mc-creeper svg { width: 100%; height: 100%; }
.mc-creeper__head { top: 0;    left: 0;    width: 48px; height: 48px; }
.mc-creeper__body { top: 46px; left: 14px; width: 20px; height: 42px; }
.mc-creeper__leg  { top: 86px; width: 16px; height: 18px; transform-origin: 50% 0; }
.mc-creeper__leg--a { left: 3px;  animation: mc-step-a .5s steps(2, end) infinite; }
.mc-creeper__leg--b { left: 29px; animation: mc-step-b .5s steps(2, end) infinite; }
@keyframes mc-step-a { 0%,49% { transform: rotate(13deg); } 50%,100% { transform: rotate(-13deg); } }
@keyframes mc-step-b { 0%,49% { transform: rotate(-13deg); } 50%,100% { transform: rotate(13deg); } }

/* left statt translateX: nur so bezieht sich der Weg auf die Bühnenbreite */
@keyframes mc-creeper-walk {
	0%       { left: -80px; transform: scale(1);   opacity: 1; }
	60%      { left: 60%;   transform: scale(1);   opacity: 1; }
	64%      { left: 60%;   transform: scale(1.2); opacity: 1; }
	68%      { left: 60%;   transform: scale(1);   opacity: 1; }
	73%      { left: 60%;   transform: scale(1.35);opacity: 1; }
	77%      { left: 60%;   transform: scale(1.6); opacity: 1; }
	79%      { left: 60%;   transform: scale(1.9); opacity: 0; }
	80%      { left: -80px; transform: scale(1);   opacity: 0; }
	88%,100% { left: -80px; transform: scale(1);   opacity: 1; }
}
.mc-creeper__flash {
	position: absolute;
	inset: -6px;
	background: #ffffff;
	opacity: 0;
	mix-blend-mode: screen;
	animation: mc-creeper-flash 21s steps(1, end) infinite;
}
@keyframes mc-creeper-flash {
	0%, 62%  { opacity: 0; }
	63%, 67% { opacity: .7; }
	68%, 72% { opacity: 0; }
	73%, 78% { opacity: .9; }
	79%,100% { opacity: 0; }
}

/* ==========================================================================
   6 — Blockbruch-Risse (FAQ)
   ========================================================================== */
.faq-item { position: relative; overflow: hidden; }
.faq-item[open]::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background:
		linear-gradient(115deg, transparent 46%, rgba(255,255,255,.09) 47%, transparent 48%),
		linear-gradient(60deg,  transparent 62%, rgba(255,255,255,.07) 63%, transparent 64%),
		linear-gradient(160deg, transparent 30%, rgba(255,255,255,.06) 31%, transparent 32%);
	animation: mc-crack .6s steps(4, end) 1;
}
@keyframes mc-crack {
	0%   { opacity: 0; }
	40%  { opacity: 1; }
	100% { opacity: 0; }
}

/* ==========================================================================
   7 — Rücksicht auf reduzierte Bewegung
   Alles bleibt sichtbar, nur die Bewegung entfällt.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mc-scene *,
	.mc-scene *::before,
	.mc-scene *::after { animation: none !important; transition: none !important; }

	.mc-rack__unit,
	.mc-rack__flag,
	.mc-speech,
	.mc-adblock,
	.mc-out__pop { opacity: 1 !important; transform: none !important; }
	.mc-rack__flag { transform: translateX(-50%) !important; }
	.mc-speech { transform: none !important; }
	.mc-meter__fill { width: 100%; }
	.mc-led { background: var(--grass); }
	.mc-arrow__fill { clip-path: polygon(0 30%, 66% 30%, 66% 0, 100% 50%, 66% 100%, 66% 70%, 0 70%); }
	.mc-creeper { display: none; }
	.mc-adblock--fly { display: none; }
}

/* ==========================================================================
   8 — Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.mc-flow {
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		gap: 1.5rem 2rem;
	}
	.mc-rail { min-width: 90px; }
	.mc-arrow { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 640px) {
	.mc-scene--char { --mc-char-h: 190px; }
	.mc-scene--build { --mc-unit-w: 150px; --mc-unit-h: 24px; }
	.mc-flow { grid-template-columns: 1fr; padding: 1.5rem 1rem; }
	.mc-rail { width: 100%; height: 40px; }
	.mc-arrow { transform: rotate(90deg); }
	.mc-oven, .mc-out { width: 88px; height: 88px; }
	.mc-block { width: 40px; height: 40px; }
	.mc-scene--parade { height: 180px; }
}

/* ==========================================================================
   9 — Einbettung im Theme
   ========================================================================== */

/* Hero: Rack, Figur und Schwert auf einer Bühne */
.hero__stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(.75rem, 3vw, 2.5rem);
	padding: 46px 0 8px;
}
.hero__stage .mc-scene--build { flex: none; }
.hero__stage .mc-scene--char {
	flex: none;
	--mc-char-h: 230px;
	margin-bottom: 58px; /* Füße treffen die Rack-Grundplatte */
}
.hero__stage .mc-scene--sword {
	position: absolute;
	top: 0; left: 0;
	--mc-sword-size: 84px;
}

/* Abschnitt „Warum das kostenlos bleibt" */
.funding { border-bottom: 1px solid var(--border); }
.funding .wrap > .section__title { margin-left: auto; margin-right: auto; text-align: center; }
.funding .mc-scene--furnace { margin-top: 3rem; }

.funding-facts {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.funding-facts li {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 1.4rem 1rem;
	text-align: center;
	background: var(--panel);
	box-shadow: inset 0 0 0 2px var(--border);
}
.funding-facts strong {
	font-family: var(--font-display);
	font-size: 1.55rem;
	color: var(--grass);
}
.funding-facts span { color: var(--text-muted); font-size: .88rem; }

/* Standortkarten bekommen ein Mini-Rack */
.location-card .mc-scene--build { margin-top: 1.75rem; }

/* 404 */
.error-404__visual { display: flex; justify-content: center; margin-bottom: 2.5rem; }

@media (max-width: 980px) {
	.hero__stage { padding-top: 34px; }
	.hero__stage .mc-scene--char { --mc-char-h: 200px; margin-bottom: 52px; }
}
@media (max-width: 640px) {
	.hero__stage { gap: .5rem; }
	.hero__stage .mc-scene--char { --mc-char-h: 160px; margin-bottom: 46px; }
	.hero__stage .mc-scene--sword { --mc-sword-size: 62px; }
	.funding-facts { grid-template-columns: 1fr; }
}