/* Motion-Erklärung „EACS in 3 Schritten“ (affilionaer-starter-m)
   Projektdaten, Storyboard und QA: motion/eacs-schritte/ (nicht öffentlich).
   Grundzustand ohne JS bzw. bei prefers-reduced-motion = fertiges Endbild.
   Animiert werden nur transform und opacity, feste Höhen verhindern Layoutsprünge. */

.mx-eacs{
  --mx-bg:#0b0b09;
  --mx-panel:rgba(255,255,255,.05);
  --mx-line:rgba(255,255,255,.14);
  --mx-text:#f4efe3;
  --mx-dim:#bdb8aa;
  --mx-gold:#c99238;
  --mx-gold-light:#e6bb70;
  --mx-green:#3fbf74;
  position:relative;width:100%;max-width:1080px;margin:0 auto 2rem;
  background:var(--mx-bg);color:var(--mx-text);border-radius:6px;
  padding:1.1rem 1rem 1.2rem;text-align:left;overflow:hidden;
  font-family:var(--font-label,"Archivo",sans-serif);
}
@media(min-width:800px){.mx-eacs{padding:1.4rem 1.6rem 1.5rem;}}

/* Fortschritt oben: welcher Schritt läuft gerade */
.mx-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:1rem;}
.mx-seg{font-size:.64rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--mx-dim);white-space:nowrap;}
@media(min-width:800px){.mx-seg{font-size:.72rem;letter-spacing:.05em;}}
.mx-seg i{display:block;height:3px;margin-top:.35rem;background:var(--mx-line);border-radius:2px;overflow:hidden;}
.mx-seg i b{display:block;height:100%;background:var(--mx-gold);transform-origin:left center;}

/* Drei Zonen: Handy untereinander, ab 800 px nebeneinander */
.mx-zones{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:800px){.mx-zones{grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:stretch;}}
.mx-zone{display:flex;flex-direction:column;gap:.5rem;}
@media(min-width:800px){.mx-zone{min-height:186px;gap:.6rem;}}
.mx-cap{margin:0;font-size:.86rem;font-weight:700;color:var(--mx-gold-light);text-align:center;}

.mx-conn{position:relative;height:22px;}
.mx-conn i{position:absolute;left:50%;top:3px;bottom:3px;width:2px;margin-left:-1px;background:var(--mx-line);}
.mx-conn i b{display:block;width:100%;height:100%;background:var(--mx-gold);transform-origin:center top;}
@media(min-width:800px){
  .mx-conn{height:auto;}
  .mx-conn i{left:4px;right:4px;top:42%;bottom:auto;width:auto;height:2px;margin:0;}
  .mx-conn i b{transform-origin:left center;}
}

.mx-panel{flex:1;background:var(--mx-panel);border:1px solid var(--mx-line);border-radius:5px;padding:.8rem;display:flex;flex-direction:column;gap:.45rem;}
.mx-panel-h{margin:0 0 .1rem;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mx-dim);}

/* Zone 1: Einrichtung */
.mx-slot{position:relative;height:30px;border:1px dashed var(--mx-line);border-radius:4px;}
.mx-chip{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 .6rem;
  background:#1d1b16;border:1px solid var(--mx-line);border-radius:4px;font-size:.82rem;font-weight:700;}
.mx-chip em{font-style:normal;color:var(--mx-green);font-weight:800;}
.mx-link{position:relative;height:34px;border-radius:4px;overflow:hidden;border:1px solid var(--mx-gold);}
.mx-link-fill{position:absolute;inset:0;background:var(--mx-gold);transform-origin:left center;}
.mx-link span{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 .6rem;
  font-size:.82rem;font-weight:800;color:#171104;}

/* Zone 2: Traffic */
.mx-lane{display:grid;grid-template-columns:4.6rem 1fr;align-items:center;gap:.5rem;font-size:.76rem;font-weight:700;color:var(--mx-dim);}
.mx-track{position:relative;height:12px;overflow:hidden;}
.mx-track::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--mx-line);}
.mx-run{position:absolute;inset:0;opacity:0;}
.mx-run i{position:absolute;right:0;top:1px;width:10px;height:10px;border-radius:50%;background:var(--mx-gold-light);}
.mx-target{margin-top:.2rem;font-size:.76rem;font-weight:700;color:var(--mx-dim);}
.mx-people{display:flex;gap:.35rem;margin-top:.35rem;}
.mx-person{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mx-line);position:relative;}
.mx-person b{position:absolute;inset:3px;border-radius:50%;background:var(--mx-gold);}

/* Zone 3: Umsatz */
.mx-proc{font-size:.76rem;font-weight:700;color:var(--mx-dim);}
.mx-proc i{display:block;height:6px;margin:.35rem 0 .2rem;background:var(--mx-line);border-radius:3px;overflow:hidden;}
.mx-proc i b{display:block;height:100%;background:var(--mx-green);transform-origin:left center;}
.mx-sale{display:flex;align-items:center;gap:.6rem;margin-top:.2rem;background:#f4efe3;color:#181818;border-radius:5px;padding:.55rem .7rem;}
.mx-sale-ico{flex:none;width:26px;height:26px;border-radius:50%;background:#1a8f4c;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;}
.mx-sale b{display:block;font-size:.86rem;line-height:1.2;}
.mx-sale small{display:block;font-size:.74rem;color:#54606c;font-weight:600;line-height:1.3;}

.mx-replay{display:none;margin:1rem auto 0;background:none;border:1px solid var(--mx-line);color:var(--mx-dim);
  font:700 .78rem var(--font-label,"Archivo",sans-serif);letter-spacing:.03em;padding:.5rem .9rem;border-radius:3px;cursor:pointer;}
.mx-replay:hover{color:var(--mx-text);border-color:var(--mx-dim);}
.mx-eacs.mx-ready .mx-replay{display:block;}

/* Begleitende Karte unter der Animation hervorheben, solange ihr Schritt läuft */
.step-card{transition:border-color .3s ease, box-shadow .3s ease;}
.step-card.mx-active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}

@media (prefers-reduced-motion:reduce){
  .mx-replay{display:none !important;}
}
.mx-proc em{display:block;font-style:normal;font-size:.74rem;color:var(--mx-dim);font-weight:600;}
@media(min-width:800px){.mx-sale{margin-top:auto;}}