/* =========================================================
   MN MEDIA · STEP 50 · Wo drückt der Schuh?
   ========================================================= */
.step50-cta{
  --s50-ink:#111311;
  --s50-paper:#f1efe8;
  --s50-lime:#d8f024;
  --s50-warm:#e9deca;
  position:relative;
  overflow:hidden;
  background:var(--s50-paper);
  color:var(--s50-ink);
  padding:clamp(92px,10vw,154px) 0 clamp(96px,10vw,152px);
}

.step50-cta::before{
  content:"";
  position:absolute;
  width:min(62vw,920px);
  aspect-ratio:1;
  right:-28%;
  top:-50%;
  border-radius:50%;
  border:1px solid rgba(17,19,17,.08);
  box-shadow:
    0 0 0 70px rgba(17,19,17,.025),
    0 0 0 140px rgba(17,19,17,.018);
  pointer-events:none;
}

.step50-cta-shell{
  position:relative;
  z-index:2;
  width:min(1540px,calc(100% - clamp(34px,5vw,82px)));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);
  gap:clamp(58px,8vw,132px);
  align-items:center;
}

.step50-cta-kicker{
  margin:0 0 18px;
  font-size:.68rem;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.16em;
}

.step50-cta-copy h2{
  margin:0;
  max-width:8.3ch;
  font-size:clamp(4.2rem,8vw,9.3rem);
  line-height:.79;
  letter-spacing:-.078em;
  font-weight:950;
}

.step50-cta-copy>p:last-child{
  max-width:51ch;
  margin:clamp(26px,3vw,40px) 0 0;
  font-size:clamp(1rem,1.25vw,1.22rem);
  line-height:1.55;
  color:rgba(17,19,17,.64);
}

.step50-kick-stage{
  display:grid;
  justify-items:center;
  gap:24px;
  padding-top:48px;
}

.step50-kick-button{
  position:relative;
  width:min(640px,100%);
  height:132px;
  border:4px solid var(--s50-ink);
  border-radius:999px;
  background:linear-gradient(135deg,#faf5ec 0%,var(--s50-warm) 100%);
  box-shadow:10px 12px 0 var(--s50-ink);
  overflow:visible;
  cursor:pointer;
  user-select:none;
  isolation:isolate;
  display:block;
  text-decoration:none;
  color:var(--s50-ink);
  transition:transform .12s ease,box-shadow .12s ease,background .2s ease;
  will-change:transform;
}

.step50-kick-button::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 11% 25%,rgba(255,255,255,.96) 0 1.8%,transparent 2%),
    radial-gradient(circle at 19% 37%,rgba(255,255,255,.64) 0 1%,transparent 1.3%);
  z-index:0;
  pointer-events:none;
}

.step50-label{
  position:absolute;
  left:176px;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  z-index:7;
  font-size:clamp(1.18rem,2.3vw,2rem);
  font-weight:950;
  color:var(--s50-ink);
  letter-spacing:.015em;
  text-transform:uppercase;
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;
}

.step50-kick-button:is(:hover,.is-playing) .step50-label{
  opacity:0;
  transform:translateY(-50%) scale(.98);
}

.step50-shadow-track{
  position:absolute;
  left:34px;
  right:34px;
  bottom:20px;
  height:12px;
  background:rgba(17,17,17,.08);
  border-radius:999px;
  filter:blur(1px);
  z-index:0;
}

.step50-shoe-wrap{
  position:absolute;
  left:22px;
  top:13px;
  width:150px;
  height:104px;
  z-index:4;
  transform-origin:48% 62%;
  filter:drop-shadow(6px 8px 0 rgba(17,17,17,.12));
}
.step50-shoe-wrap img{
  width:100%;height:100%;object-fit:contain;display:block;
  transform:scaleX(-1);
  user-select:none;pointer-events:none;
}

.step50-donkey-wrap{
  position:absolute;
  right:-50px;
  top:-66px;
  width:350px;
  height:188px;
  z-index:6;
  opacity:0;
  transform:translateX(210px) scale(.96);
  transform-origin:28% 62%;
  filter:drop-shadow(8px 10px 0 rgba(17,17,17,.10));
  pointer-events:none;
}
.step50-donkey-wrap img{
  width:100%;height:100%;object-fit:contain;display:block;
  user-select:none;pointer-events:none;
}

.step50-speed-lines{
  position:absolute;
  left:138px;
  top:34px;
  width:130px;
  height:58px;
  opacity:0;
  z-index:1;
  pointer-events:none;
}
.step50-speed-lines i{
  position:absolute;left:0;height:4px;background:var(--s50-ink);border-radius:999px;transform-origin:left center;
}
.step50-speed-lines i:nth-child(1){top:5px;width:76px;transform:rotate(-7deg)}
.step50-speed-lines i:nth-child(2){top:20px;width:114px;transform:rotate(2deg)}
.step50-speed-lines i:nth-child(3){top:36px;width:90px;transform:rotate(-2deg)}
.step50-speed-lines i:nth-child(4){top:50px;width:100px;transform:rotate(6deg)}

.step50-impact{
  position:absolute;
  right:196px;
  top:20px;
  width:78px;
  aspect-ratio:1;
  z-index:8;
  opacity:0;
  transform:scale(.2) rotate(-15deg);
  pointer-events:none;
}
.step50-burst{
  position:absolute;inset:0;background:var(--s50-lime);border:3px solid var(--s50-ink);
  clip-path:polygon(50% 0,61% 28%,84% 9%,80% 38%,100% 43%,75% 57%,94% 79%,64% 72%,59% 100%,47% 75%,26% 96%,31% 68%,0 72%,23% 51%,2% 35%,34% 37%);
}
.step50-pow{
  position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:1000;color:#ff5b43;-webkit-text-stroke:1.5px var(--s50-ink);transform:rotate(-10deg);
}

.step50-stars{
  position:absolute;right:42px;top:-28px;width:100px;height:70px;opacity:0;z-index:8;pointer-events:none;
}
.step50-stars span{
  position:absolute;font-size:25px;font-weight:1000;color:var(--s50-lime);-webkit-text-stroke:1.5px var(--s50-ink);line-height:1;
}
.step50-stars span:nth-child(1){left:0;top:30px;transform:rotate(-14deg)}
.step50-stars span:nth-child(2){left:30px;top:0;transform:rotate(10deg)}
.step50-stars span:nth-child(3){right:0;top:24px;transform:rotate(18deg)}

.step50-kick-note{
  margin:0;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(17,19,17,.44);
  text-align:center;
}

.step50-kick-button:active,
.step50-kick-button.is-clicked{
  transform:translateY(7px) scale(.985);
  box-shadow:3px 4px 0 var(--s50-ink);
}

.step50-kick-button:is(:hover,.is-playing) .step50-donkey-wrap{animation:s50DonkeyIn 1s ease both}
.step50-kick-button:is(:hover,.is-playing) .step50-shoe-wrap{animation:s50Kick 1s cubic-bezier(.2,.86,.34,1) both}
.step50-kick-button:is(:hover,.is-playing) .step50-impact{animation:s50ImpactPop 1s ease both}
.step50-kick-button:is(:hover,.is-playing) .step50-stars{animation:s50StarsPop 1s ease both}
.step50-kick-button:is(:hover,.is-playing) .step50-speed-lines{animation:s50Lines 1s ease both}

@keyframes s50DonkeyIn{
  0%{opacity:0;transform:translateX(210px) scale(.95)}
  16%{opacity:1;transform:translateX(18px) scale(1)}
  30%{opacity:1;transform:translateX(0) scale(1)}
  42%{opacity:1;transform:translateX(-4px) scale(1)}
  53%{opacity:1;transform:translateX(10px) rotate(4deg) scaleX(.96) scaleY(1.03)}
  62%{opacity:1;transform:translateX(-12px) rotate(-3deg) scaleX(1.04) scaleY(.98)}
  80%{opacity:1;transform:translateX(4px) rotate(1deg)}
  100%{opacity:0;transform:translateX(210px) scale(.95)}
}
@keyframes s50Kick{
  0%,28%{transform:translateX(0) rotate(0) scale(1)}
  40%{transform:translateX(0) rotate(-8deg) scale(1)}
  53%{transform:translateX(164px) rotate(9deg) scale(1.04)}
  60%{transform:translateX(198px) rotate(18deg) scale(1.06)}
  67%{transform:translateX(166px) rotate(4deg) scale(1.03)}
  100%{transform:translateX(0) rotate(0) scale(1)}
}
@keyframes s50ImpactPop{
  0%,43%{opacity:0;transform:scale(.2) rotate(-15deg)}
  49%{opacity:1;transform:scale(1.18) rotate(5deg)}
  60%{opacity:1;transform:scale(.97) rotate(-4deg)}
  76%{opacity:0;transform:scale(1.3) rotate(12deg)}
  100%{opacity:0}
}
@keyframes s50StarsPop{
  0%,47%{opacity:0;transform:translateY(12px) scale(.6)}
  58%{opacity:1;transform:translateY(-3px) scale(1.05)}
  78%,100%{opacity:0;transform:translateY(-18px) scale(1.18)}
}
@keyframes s50Lines{
  0%,16%{opacity:0;transform:translateX(-25px)}
  28%{opacity:.95;transform:translateX(0)}
  48%{opacity:.5;transform:translateX(30px)}
  60%,100%{opacity:0;transform:translateX(64px)}
}

@media(max-width:980px){
  .step50-cta-shell{grid-template-columns:1fr;gap:70px}
  .step50-cta-copy h2{max-width:9.5ch;font-size:clamp(4.4rem,12vw,7.6rem)}
  .step50-kick-stage{padding-top:28px}
}

@media(max-width:640px){
  .step50-cta{padding:76px 0 94px}
  .step50-cta-shell{width:calc(100% - 24px);gap:54px}
  .step50-cta-copy h2{font-size:clamp(3.6rem,16vw,5.7rem)}
  .step50-kick-stage{padding-top:32px}
  .step50-kick-button{height:100px;border-width:3px;box-shadow:7px 8px 0 var(--s50-ink)}
  .step50-shoe-wrap{width:112px;height:78px;top:10px;left:14px}
  .step50-donkey-wrap{width:226px;height:120px;top:-40px;right:-24px}
  .step50-label{left:124px;right:14px;font-size:1rem}
  .step50-impact{right:120px;top:18px;width:60px}
  .step50-stars{right:14px;top:-18px;width:84px;height:60px}
  .step50-speed-lines{left:100px;top:26px;transform:scale(.8);transform-origin:left center}
  .step50-kick-note{font-size:.58rem;line-height:1.4;max-width:38ch}
  @keyframes s50Kick{
    0%,28%{transform:translateX(0) rotate(0) scale(1)}
    40%{transform:translateX(0) rotate(-8deg) scale(1)}
    53%{transform:translateX(105px) rotate(9deg) scale(1.04)}
    60%{transform:translateX(128px) rotate(18deg) scale(1.06)}
    67%{transform:translateX(106px) rotate(4deg) scale(1.03)}
    100%{transform:translateX(0) rotate(0) scale(1)}
  }
}

@media(prefers-reduced-motion:reduce){
  .step50-kick-button *{animation:none!important;transition:none!important}
}