/* Schritt-Animationen (fragments/<sprache>/*.html, assets/js/steps.js)
   Komponente .mcg aus dem EMU-Theme übernommen. Neu: Farben kommen aus
   Variablen und Klassen (s-*), nicht aus festen Hex-Werten im SVG. */

.mcg {
  --s-bg: #f4f7f0; --s-line: #1d1d1b; --s-muted: #58585a; --s-pipe: #c9ccc4; --s-pipe-in: #eef1ea;
  --s-water: #6393c7; --s-hot: #e30613; --s-cold: #6393c7; --s-wave: #3f7212; --s-green: #76b82a;
  --s-dev: #ffffff; --s-dev-line: #9a9d95; --s-panel: #1d1d1b; --s-panel-fg: #ffffff; --s-data: #3f7212;
  --s-wall: #e3e6df;
  margin-top: clamp(20px, 3vw, 34px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mcg {
    --s-bg: #1f1f1d; --s-line: #eeeeec; --s-muted: #b5b5b0; --s-pipe: #55574f; --s-pipe-in: #2c2d29;
    --s-dev: #2a2a28; --s-dev-line: #6c6e66; --s-panel: #0d0d0c; --s-wave: #a6d46f; --s-data: #a6d46f; --s-wall: #2a2b27;
    --s-water: #8fb3dc; --s-cold: #8fb3dc; --s-hot: #ff5a62;
  }
}
:root[data-theme="dark"] .mcg {
  --s-bg: #1f1f1d; --s-line: #eeeeec; --s-muted: #b5b5b0; --s-pipe: #55574f; --s-pipe-in: #2c2d29;
  --s-dev: #2a2a28; --s-dev-line: #6c6e66; --s-panel: #0d0d0c; --s-wave: #a6d46f; --s-data: #a6d46f; --s-wall: #2a2b27;
  --s-water: #8fb3dc; --s-cold: #8fb3dc; --s-hot: #ff5a62;
}

.mcg__stage { background: var(--s-bg); border-radius: var(--r-panel) 0 var(--r-panel) var(--r-panel); padding: clamp(6px, 1.2vw, 14px); }
.mcg__svg { display: block; width: 100%; height: auto; font-family: "Ubuntu", "Segoe UI", Arial, sans-serif; }
.mcg__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: mcg; }
@media (max-width: 1099.98px) { .mcg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 619.98px) { .mcg__list { grid-template-columns: minmax(0, 1fr); } }
.mcg__st { position: relative; padding: 12px 14px 12px 48px; border-radius: 16px; background: var(--mist); cursor: default; transition: background .3s, box-shadow .3s; }
.mcg__st::before { counter-increment: mcg; content: counter(mcg); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: rgba(29,29,27,.14); color: var(--fg); font: 500 13px/24px var(--font-display); text-align: center; transition: background .3s, color .3s; }
.mcg__st strong { display: block; font-family: var(--font-display); font-weight: 500; margin-bottom: 2px; }
.mcg__st span { color: var(--fg-muted); font-size: var(--fs-sm); }
.mcg.is-js .mcg__st { cursor: pointer; }
.mcg.is-js .mcg__st:hover { background: var(--green-15); }
.mcg.is-js .mcg__st.is-on { box-shadow: inset 0 0 0 2px var(--green); background: var(--green-15); }
.mcg.is-js .mcg__st.is-on::before { background: var(--green); color: #1d1d1b; }
.mcg__ctl { display: none; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.mcg.is-js .mcg__ctl { display: flex; }
.mcg__note { font-size: var(--fs-xs); color: var(--fg-muted); }
.mcg code { font-family: var(--font-mono); font-size: .92em; }

/* Schritt-Sichtbarkeit im SVG (ohne JS: Schritt 1 als statisches Bild) */
.mcg__svg [data-s] { opacity: 0; transition: opacity .45s; }
.mcg:not(.is-js) .mcg__svg [data-s~="1"],
.mcg__svg[data-step="1"] [data-s~="1"], .mcg__svg[data-step="2"] [data-s~="2"], .mcg__svg[data-step="3"] [data-s~="3"],
.mcg__svg[data-step="4"] [data-s~="4"], .mcg__svg[data-step="5"] [data-s~="5"], .mcg__svg[data-step="6"] [data-s~="6"],
.mcg__svg[data-step="7"] [data-s~="7"], .mcg__svg[data-step="8"] [data-s~="8"] { opacity: 1; }
/* Statisches Gesamtbild für reduzierte Bewegung und ohne JS: alle Elemente mit data-all sichtbar */
.mcg:not(.is-js) .mcg__svg [data-all] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mcg.is-static .mcg__svg [data-all] { opacity: 1; } }

/* SVG-Klassen */
.mcg__svg .s-bg { fill: var(--s-bg); }
.mcg__svg .s-wall { fill: var(--s-wall); }
.mcg__svg .s-pipe { fill: var(--s-pipe); }
.mcg__svg .s-pipe-in { fill: var(--s-pipe-in); }
.mcg__svg .s-pipe-line { fill: none; stroke: var(--s-pipe); }
.mcg__svg .s-dev { fill: var(--s-dev); stroke: var(--s-dev-line); stroke-width: 1.5; }
.mcg__svg .s-dev-dark { fill: var(--s-panel); }
.mcg__svg .s-lcd { fill: #c9d3bd; stroke: var(--s-dev-line); }
.mcg__svg .s-txt { fill: var(--s-line); }
.mcg__svg .s-muted { fill: var(--s-muted); }
.mcg__svg .s-ondark { fill: var(--s-panel-fg); }
.mcg__svg .s-green { fill: var(--s-green); }
.mcg__svg .s-greentxt { fill: var(--s-data); }
.mcg__svg .s-water { fill: var(--s-water); }
.mcg__svg .s-hot { fill: var(--s-hot); }
.mcg__svg .s-cold { fill: var(--s-cold); }
.mcg__svg .s-stroke { fill: none; stroke: var(--s-line); }
.mcg__svg .s-stroke-muted { fill: none; stroke: var(--s-muted); }
.mcg__svg .s-wave { fill: none; stroke: var(--s-wave); stroke-width: 2.2; stroke-linecap: round; }
.mcg__svg .s-bus { fill: none; stroke: var(--s-line); stroke-width: 2; }
.mcg__svg .s-data { fill: none; stroke: var(--s-data); stroke-width: 3; stroke-linecap: round; }
.mcg__svg .s-hotline { fill: none; stroke: var(--s-hot); stroke-width: 3; stroke-linecap: round; }
.mcg__svg .s-coldline { fill: none; stroke: var(--s-cold); stroke-width: 3; stroke-linecap: round; }
.mcg__svg .s-waterline { fill: none; stroke: var(--s-water); stroke-width: 3; stroke-linecap: round; }
.mcg__svg .s-radio { fill: none; stroke: var(--s-data); stroke-width: 2.2; }
.mcg__svg .s-hl { fill: none; stroke: var(--s-green); stroke-width: 2.5; }
.mcg__svg .s-brass { fill: #c2a14a; }
.mcg__svg .s-brass-dark { fill: #957a31; }
.mcg__svg .s-dim { opacity: .35; transition: opacity .45s; }
.mcg__svg .s-arrow { fill: var(--s-line); }
.mcg__svg .s-screen { fill: var(--s-panel); }
.mcg__svg .s-bar { fill: var(--s-green); }
.mcg__svg .s-cable { fill: none; stroke: var(--s-muted); stroke-width: 2; }
.mcg__svg .s-cable2 { fill: none; stroke: #d9cdb2; stroke-width: 3; stroke-linecap: round; }
.mcg__svg .s-dev-side { fill: #d7dad3; }
:root[data-theme="dark"] .mcg__svg .s-dev-side { fill: #3a3b37; }

@keyframes mcg-pulse { 0%, 100% { stroke-opacity: .25; } 50% { stroke-opacity: 1; } }
@keyframes mcg-flow { to { stroke-dashoffset: -24; } }
@keyframes mcg-flowfast { to { stroke-dashoffset: -40; } }
@keyframes mcg-radio { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes mcg-ping { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } }
.mcg__svg .pulse { animation: mcg-pulse 1.2s ease-in-out infinite; }
.mcg__svg .flow { stroke-dasharray: 4 8; animation: mcg-flow .8s linear infinite; }
.mcg__svg .flowfast { stroke-dasharray: 10 10; animation: mcg-flowfast .7s linear infinite; }
.mcg__svg .radio { transform-box: fill-box; transform-origin: 0% 50%; animation: mcg-radio 1.8s ease-out infinite; }
.mcg__svg .radio2 { animation-delay: .6s; }
.mcg__svg .radio3 { animation-delay: 1.2s; }
.mcg__svg .ping { stroke-dasharray: 6 4; animation: mcg-flow .5s linear infinite; }
.mcg.is-paused .mcg__svg *, .mcg.is-idle .mcg__svg * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .mcg__svg *, .mcg__svg [data-s] { animation: none !important; transition: none !important; }
}

/* Handy: Mit JS zoomt steps.js pro Schritt auf den Ausschnitt (4:3), ohne seitliches Scrollen.
   Ohne JS bleibt die Bühne seitlich wischbar, damit die Beschriftung lesbar bleibt. */
@media (max-width: 619.98px) {
  .mcg__stage { border-radius: 18px; }
  .mcg.is-zoom .mcg__svg { aspect-ratio: 4 / 3; }
  .mcg:not(.is-zoom) .mcg__stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mcg:not(.is-zoom) .mcg__svg { min-width: 600px; }
  .mcg:not(.is-zoom) .mcg__stage::after { content: attr(data-swipe); display: block; font-size: var(--fs-2xs); color: var(--fg-muted); padding: 6px 8px 2px; }
}