/* Powertune – Maschinenpark (3D): Bühnen in den Maschinenabschnitten (mp.js)
   Die Bühne hat das Seitenverhältnis der SVG-Grafik (320 × 170): Laden, Fallback und 3D belegen denselben Platz. */
.mp-stage{position:relative;aspect-ratio:320/170}
.mp-stage > svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s var(--ease)}
.mp-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
.mp-ready .mp-canvas{opacity:1}
.mp-ready > svg{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}

/* Arbeitsschritte wie in der SVG-Grafik, der aktive Schritt ist hervorgehoben */
.mp-steps{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px;opacity:0;font:500 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);pointer-events:none;transition:opacity .6s var(--ease);text-shadow:0 0 3px #0A0B0C,0 0 8px #0A0B0C,0 0 14px rgba(10,11,12,.8)}
.bg-white .mp-steps{text-shadow:0 0 3px #F3F3F5,0 0 8px #F3F3F5,0 0 14px rgba(243,243,245,.85)}
.mp-ready .mp-steps{opacity:1}
.mp-steps span{position:relative;padding-bottom:3px;transition:color .3s}
.mp-steps span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;background:#4FA3FF;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.mp-steps span,.mp-steps em,.mp-steps .mp-dot{color:var(--fg-2)}
.mp-steps span.on{color:var(--fg)}
.mp-probe .mp-canvas,.mp-probe .mp-stage > svg,.mp-probe .mp-steps{transition:none!important}
.mp-steps span.on::after{transform:none}
.mp-steps em{font-style:normal}

/* An 3D-Punkten verankerte Beschriftungen (Stil wie in den übrigen 3D-Szenen) */
.mp-labels{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.mp-labels .sl{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:5px;opacity:0;white-space:nowrap;will-change:transform,opacity}
.mp-labels .sl b{transform:translateX(var(--dx,0px));padding:4px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(10,11,13,.76);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:560 12px/1 var(--display);font-variation-settings:"wdth" 106;color:#F2F3F5}
.mp-labels .sl i{width:1px;height:var(--lead,16px);background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0))}
.bg-white .mp-labels .sl i{background:linear-gradient(rgba(11,12,14,.55),rgba(11,12,14,0))}
.mp-labels .sl.below{flex-direction:column-reverse}
.mp-labels .sl.below i{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.7))}
.bg-white .mp-labels .sl.below i{background:linear-gradient(rgba(11,12,14,0),rgba(11,12,14,.55))}
.mp-labels .sl.ok b{border-color:rgba(98,213,150,.65)}

/* Kraftanzeige (Beispielverlauf) oben rechts */
.mp-hud{position:absolute;right:0;top:0;z-index:2;display:grid;gap:3px;width:clamp(116px,32%,156px);padding:8px 10px 6px;border:1px solid var(--card-line);border-radius:12px;background:rgba(10,11,13,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;color:#F2F3F5}
.bg-white .mp-hud{background:rgba(255,255,255,.8);color:var(--ink)}
.mp-hud-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font:500 9.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.mp-hud-h b{font:inherit;color:var(--ok);white-space:nowrap;opacity:0;transition:opacity .3s}
.mp-narrow .mp-steps{gap:2px 5px;font-size:8.5px}
.mp-narrow .mp-steps em,.mp-narrow .mp-labels .sl.minor{display:none}
.bg-white .mp-hud-h b{color:#1E8A4C}
.mp-hud-h b.on{opacity:1}
.mp-hud svg{display:block;width:100%;height:auto;overflow:visible}
.mp-hud .g{fill:none;stroke:currentColor;stroke-opacity:.18}
.mp-hud .ut{fill:none;stroke:#4FA3FF;stroke-opacity:.55;stroke-dasharray:2 2}
.mp-hud .ref{fill:none;stroke:rgba(98,213,150,.22);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mp-hud .cv{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mp-hud .dot{fill:#4FA3FF}
.mp-hud .utl{font:500 5.5px var(--mono);fill:#4FA3FF}
.mp-hud small{font:500 8.5px/1.2 var(--mono);letter-spacing:.06em;opacity:.6}
.mp-hud small .ns{display:none}
/* Handy (Bühne unter 420 px): kompakte Anzeige, der Ablauf bleibt sichtbar */
.mp-small .mp-hud{width:31%;padding:4px 6px 3px;gap:2px;border-radius:8px}
.mp-small .mp-hud-h{font-size:7px;letter-spacing:.04em}
.mp-small .mp-hud small{font-size:7px}
.mp-small .mp-hud small .nl{display:none}
.mp-small .mp-hud small .ns{display:inline}
.mp-small .mp-hud-rows{width:36%}
.mp-small .mp-hud-r{gap:4px;font-size:7px}
.mp-small .mp-hud-r .mp-wave,.mp-small .mp-hud-r u{width:28px}
/* Hinweis in der Bildunterschrift, solange die 3D-Szene läuft */
.mp-slow{visibility:hidden}
.mp-slow.on{visibility:visible}
.mp-slow::before{content:" · "}
.art-fig .mp-slow::before{content:" "}
.art-fig .mp-slow::after{content:"."}

/* Datenanzeige mit Zeilen (Ultraschall) */
.mp-hud-rows{gap:4px;width:clamp(128px,36%,176px)}
.mp-hud-r{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;font:500 9.5px/1.2 var(--mono);letter-spacing:.04em}
.mp-hud-r span{opacity:.72}
.mp-hud-r i{justify-self:end;font-style:normal;font-variant-numeric:tabular-nums;font-weight:600}
.mp-hud-r .mp-wave{display:block;width:54px;height:10px;overflow:visible}
.mp-hud-r .mp-wave path{fill:none;stroke:#4FA3FF;stroke-width:1.2}
.mp-hud-r u{display:block;width:54px;height:4px;border-radius:2px;background:#4FA3FF;transform:scaleX(0);transform-origin:left}
/* Bühne in einer Karte (Verdrillen) */
.mach-cards .mach-fig{margin:0 0 18px;padding:10px;border-radius:16px}
.mach-cards .mach-fig figcaption{margin-top:8px}
/* Dunkle Bühne in einem hellen Abschnitt (Beitrag zur B340: Grafikfeld mit dunklem Grund) */
.mp-stage[data-theme="dark"]{--fg:#F2F3F4;--fg-2:#A7AAB0;--fg-3:#767A81;--card-line:rgba(255,255,255,.12)}
.bg-white .mp-stage[data-theme="dark"] .mp-steps{text-shadow:0 0 3px #0A0B0C,0 0 8px #0A0B0C,0 0 14px rgba(10,11,12,.8)}
.bg-white .mp-stage[data-theme="dark"] .mp-labels .sl i{background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0))}
.art-fig .mp-stage .mp-steps{left:18px;right:18px;bottom:14px}
@media (max-width:760px){
  .mp-labels .sl b{padding:3px 7px;font-size:10.5px}
  .mp-steps{font-size:9px;gap:3px 6px}
  .mp-hud{padding:6px 7px 5px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .mp-canvas,.mp-stage > svg,.mp-steps,.mp-steps span::after{transition:none}
}