/* mase. Bewegung für die Shop-Seiten: App-Bühne (Handy bleibt stehen, Bildschirm wechselt), Laufband, Überschriften, Knöpfe.
   Wird von shop/start-page.make.py eingebunden. Alles ohne Bewegung bei „Bewegung reduzieren“. */

/* ---------- App-Bühne ---------- */
/* .ms schneidet sonst mit overflow:hidden ab, dann klebt nichts */
.ms:has(.mst){overflow:visible;overflow-x:clip}
.ms .mst{position:relative;margin-top:32px}
.ms .mst-ph{position:relative;aspect-ratio:780/1552;margin:0 auto}
/* Bildschirm, Text und Punkte setzt motion.js direkt aus der Scroll-Position (ohne CSS-Übergänge, sonst ruckelt es) */
.ms .mst-scr{position:absolute;inset:0;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.ms .mst:not(.mst-js) .mst-scr:first-child{opacity:1}
.ms .mst-scr img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 36px rgba(0,0,0,.28))}
.ms .mst-feats{list-style:none;margin:0;padding:0}
.ms .mst-feat h3{margin:0 0 8px;font-size:26px;line-height:1.12;letter-spacing:-.025em;font-weight:700;color:var(--ink)}
.ms .mst-feat p{margin:0;font-size:17px;line-height:1.45;color:var(--muted)}
.ms .mst-n{display:inline-block;margin-bottom:12px;font-family:"Poppins",system-ui,sans-serif;font-style:italic;font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--wine)}
html[data-mt=dark] .ms .mst-n{color:#E8A4AE}
.ms .mst-dots{display:flex;gap:6px;justify-content:center}
.ms .mst-dots i{display:block;width:7px;height:7px;border-radius:4px;background:var(--ink);opacity:.22;transition:background .3s}
.ms .mst-dots i.on{background:var(--wine)}

/* Handy: Bühne bleibt oben stehen, Text wechselt darunter. Kein Wischen zur Seite. */
@media (max-width:999px){
  .ms .mst-stage{position:sticky;top:var(--mst-top,64px);z-index:1;height:calc(100svh - var(--mst-top,64px) - 92px);min-height:440px;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
  .ms .mst-ph{flex:1 1 0;min-height:0;height:100%}
  .ms .mst-txt{position:relative;flex:none;width:100%;height:9.6em;overflow:hidden}
  .ms .mst-txt>div{position:absolute;inset:0;text-align:center;opacity:0;will-change:transform,opacity}
  .ms .mst-txt h3{margin:0 0 6px;font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
  .ms .mst-txt p{margin:0 auto;max-width:30em;font-size:15.5px;line-height:1.42;color:var(--muted)}
  .ms .mst-feats{position:relative;z-index:0}
  .ms .mst-feat{height:62vh;visibility:hidden}
  .ms .mst-feat:last-child{height:30vh}
}
/* Laptop: Handy links stehend, Texte rechts laufen vorbei */
@media (min-width:1000px){
  .ms .mst{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:72px;margin-top:48px}
  .ms .mst-stage{position:sticky;top:calc(50vh - 320px);height:640px;display:flex;flex-direction:column;align-items:center;gap:18px}
  .ms .mst-ph{height:600px}
  .ms .mst-txt{display:none}
  .ms .mst-feat{display:flex;flex-direction:column;justify-content:center;min-height:64vh}
  .ms .mst-js .mst-feat{opacity:.28}
  .ms .mst-feat h3{font-size:36px}
  .ms .mst-feat p{font-size:20px;max-width:28em}
}

/* ---------- Laufband unter dem Kopfbild ---------- */
.ms .mq{overflow:hidden;background:var(--wine);color:#fff;padding:12px 0;transform:skewY(-2deg);margin:-10px 0 6px;position:relative;z-index:2}
.ms .mq-in{display:flex;width:max-content;animation:mq 26s linear infinite}
.ms .mq span{display:inline-flex;align-items:center;gap:18px;padding-right:18px;white-space:nowrap;font-family:"Poppins",system-ui,sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:15px;letter-spacing:.02em;transform:skewY(2deg)}
.ms .mq span i{font-style:normal;opacity:.55}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Überschriften: Wörter kommen nacheinander hoch ---------- */
.ms .mw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.ms .mw>i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .75s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.ms .mw-in .mw>i{transform:none}

/* ---------- Knöpfe: Lichtkante läuft drüber ---------- */
.ms .btn.mshine{position:relative;overflow:hidden;isolation:isolate}
.ms .btn.mshine::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-150%) skewX(-18deg);animation:mshine 4.2s ease-in-out infinite;pointer-events:none;z-index:1;will-change:transform}
.ms .btn.l.mshine::after{background:linear-gradient(100deg,transparent,rgba(107,31,42,.18),transparent)}
@keyframes mshine{0%,62%{transform:translateX(-150%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}

/* ---------- Kopfbild zoomt langsam ---------- */
.ms .bn img{animation:mkb 16s ease-in-out infinite alternate;transform-origin:60% 40%;will-change:transform}
@keyframes mkb{from{transform:scale(1)}to{transform:scale(1.08)}}


/* ---------- FAQ: Antwort gleitet rein ---------- */
.ms details[open]>p,.ms details[open]>div{animation:mfq .4s cubic-bezier(.2,.8,.2,1)}
@keyframes mfq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Zahl der freien Plätze tickt ---------- */
.ms [data-ts-left].tick{display:inline-block;animation:mtk .5s cubic-bezier(.2,.8,.2,1)}
@keyframes mtk{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .ms .mst-scr,.ms .mst-txt>div,.ms .mst-feat,.ms .mw>i{transition:none!important;transform:none!important}
  .ms .mq-in,.ms .btn.mshine::after,.ms .bn img,.ms details[open]>p,.ms [data-ts-left].tick{animation:none!important}
}

/* ---------- Videos: nie einen Play-Knopf zeigen (iPhone blendet ihn sonst ein, wenn Autoplay gesperrt ist) ---------- */
video::-webkit-media-controls,video::-webkit-media-controls-panel,video::-webkit-media-controls-overlay-play-button,video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none!important;opacity:0!important}