/* M-Center Inbetriebnahme: Schritt-Animationen (fragments/<sprache>/mc-*.html, assets/js/mcguide.js) */

.mcg { margin-top: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }\n.mcg__stage { max-width: 1000px; width: 100%; }
.mcg__stage { background: #f3f6f9; border: 1px solid var(--card-line); border-radius: var(--r); padding: 10px; }
.mcg__svg { display: block; width: 100%; height: auto; }
.mcg__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; counter-reset: mcg; }
.mcg__st { position: relative; padding: 12px 14px 12px 48px; border: 1px solid var(--card-line); border-radius: var(--r-sm); background: var(--card); cursor: default; transition: border-color .3s, background .3s; }
.mcg__st::before { counter-increment: mcg; content: counter(mcg); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--fg); font: 600 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: 600; 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.is-on { border-color: var(--brand); }
.mcg.is-js .mcg__st.is-on::before { background: var(--brand); color: var(--on-brand); }
.mcg__ctl { display: none; gap: 10px; margin-top: 12px; }
.mcg.is-js .mcg__ctl { display: flex; }
.mcg code { font-family: var(--font-mono); font-size: .92em; }

@media (max-width: 899.98px) {
  .mcg { grid-template-columns: minmax(0, 1fr); }
  .mcg__stage { padding: 6px; border-radius: var(--r-sm); }
}

/* Schritt-Sichtbarkeit im SVG */
.mcg__svg [data-s] { opacity: 0; transition: opacity .4s; }
.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; }
.mcg__svg [data-reveal] { opacity: 0; transition: opacity .35s; }
.mcg__svg [data-reveal].is-shown { opacity: 1; }

@keyframes mcg-pulse { 0%, 100% { stroke-opacity: .25; } 50% { stroke-opacity: 1; } }
@keyframes mcg-flow { to { stroke-dashoffset: -24; } }
@keyframes mcg-spin { to { transform: rotate(360deg); } }
@keyframes mcg-hl { 0%, 100% { fill: #fff; } 50% { fill: #e6f1fb; } }
@keyframes mcg-blink { 0%, 100% { fill: #2e8b57; } 50% { fill: #7fd39b; } }
.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 .spin { transform-box: fill-box; transform-origin: center; animation: mcg-spin 1s linear infinite; }
.mcg__svg .hl { animation: mcg-hl 1.2s ease-in-out infinite; }
.mcg__svg .led { animation: mcg-blink 1.6s ease-in-out infinite; }
.mcg__svg .draw { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.5s ease-in-out; }
.mcg__svg .draw.is-drawn { stroke-dashoffset: 0; }
.mcg.is-paused .mcg__svg *, .mcg.is-idle .mcg__svg * { animation-play-state: paused !important; }

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

/* Handy: Animation lesbar gross, seitlich wischbar */
@media (max-width: 619.98px) {
  .mcg__stage { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .mcg__svg { min-width: 580px; }
}

/* LoRa-Datenweg (fragments/<sprache>/lora-uc*.html): acht Schritte in vier Spalten */
.mcg--lora .mcg__list, .mcg--bus .mcg__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099.98px) { .mcg--lora .mcg__list, .mcg--bus .mcg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 619.98px) { .mcg--lora .mcg__list, .mcg--bus .mcg__list { grid-template-columns: minmax(0, 1fr); } }