/* FLOWNIQ fx-Explainer — wiederverwendbares interaktives Strecken-Element (Stil wie Startseite "So funktioniert's").
   Wrapper: <div class="fxx"> ... .fx-stage ... </div>. Engine: /js/fx-explainer.js */
/* ===== Interaktive Produkt-Erklärung (Explainer v2) ===== */
.fxx .fx{margin-top:36px}
.fxx .fx-stage{
  display:grid;grid-template-columns:1.42fr 1fr;gap:0;
  width:100%;max-width:1140px;margin:0 auto;background:#fff;
  border-radius:26px;overflow:hidden;
  box-shadow:0 36px 80px -34px rgba(26,28,61,.30),0 0 0 1px rgba(26,28,61,.07);
}
.fxx .fx-canvas{position:relative;overflow:hidden;background:
  radial-gradient(120% 120% at 30% 0%,#f3f7fc 0%,#eaf0f8 60%,#e4ebf6 100%);
  aspect-ratio:600/540;min-height:380px}
.fxx .fx-canvas svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fxx .fx-scene{position:absolute;inset:0;opacity:0;visibility:hidden}
.fxx .fx-scene.is-active{opacity:1;visibility:visible}
.fxx .fx-scene.is-exiting{opacity:0;transition:opacity .26s ease}
.fxx .fx-dots{position:absolute;left:26px;top:22px;z-index:6;display:flex;gap:8px}
.fxx .fx-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(42,45,82,.18);transition:all .3s}
.fxx .fx-dots button.done{background:rgba(238,123,27,.6)}
.fxx .fx-dots button.active{background:#EE7B1B;width:22px;border-radius:4px}

.fxx .fx-panel{position:relative;padding:46px 46px 30px;display:flex;flex-direction:column;min-width:0;
  border-left:1px solid #eef1f7}
.fxx .fx-kicker{font-size:13px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:#C25A12;margin-bottom:16px;min-height:18px}
.fxx .fx-title{font-size:clamp(26px,2.9vw,40px);font-weight:900;line-height:1.07;letter-spacing:-.8px;color:#1a1c3d;margin:0 0 18px;min-height:2.1em}
.fxx .fx-body{font-size:clamp(15px,1.15vw,17px);line-height:1.62;color:#555879;margin:0;min-height:6em}
.fxx .fx-title .car,.fxx .fx-body .car{color:#EE7B1B;font-weight:400;animation:fxCaret .85s steps(1) infinite}
@keyframes fxCaret{0%,100%{opacity:1}50%{opacity:0}}

.fxx .fx-controls{display:flex;align-items:center;justify-content:flex-end;margin-top:auto;padding-top:24px;gap:12px}
.fxx .fx-back{width:46px;height:50px;border-radius:13px;border:1.5px solid #e0e4ef;background:#fff;color:#5b5fa0;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .2s}
.fxx .fx-back.show{display:flex}
.fxx .fx-back:hover{border-color:#EE7B1B;color:#C25A12}
.fxx .fx-back svg{width:18px;height:18px}
.fxx .fx-next{
  border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:16px;color:#fff;
  background:linear-gradient(180deg,#EE7B1B,#C25A12);padding:15px 28px;border-radius:13px;
  display:inline-flex;align-items:center;gap:10px;box-shadow:0 14px 26px -10px rgba(194,90,18,.85);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s,box-shadow .2s}
.fxx .fx-next.show{opacity:1;transform:none;pointer-events:auto}
.fxx .fx-next:hover{box-shadow:0 18px 30px -10px rgba(194,90,18,.95)}
.fxx .fx-next svg{width:19px;height:19px}
.fxx .fx-next.is-cta{background:linear-gradient(180deg,#3eb87f,#2f9e6a);box-shadow:0 14px 26px -10px rgba(47,158,106,.85)}

/* ---- big entrance keyframes ---- */
.fxx .fx-scene svg [data-anim]{transform-box:fill-box;transform-origin:center;animation-fill-mode:both;animation-timing-function:cubic-bezier(.18,1.25,.4,1)}
@keyframes fxInL{0%{opacity:0;transform:translateX(-180%) rotate(-10deg)}66%{opacity:1;transform:translateX(8%) rotate(2deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes fxInR{0%{opacity:0;transform:translateX(180%) rotate(10deg)}66%{opacity:1;transform:translateX(-8%) rotate(-2deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes fxInT{0%{opacity:0;transform:translateY(-190%) rotate(7deg)}66%{opacity:1;transform:translateY(7%)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes fxInB{0%{opacity:0;transform:translateY(190%) rotate(-7deg)}66%{opacity:1;transform:translateY(-7%)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes fxSlam{0%{opacity:0;transform:scale(2.7)}56%{opacity:1;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes fxPop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.16)}100%{opacity:1;transform:scale(1)}}
@keyframes fxStamp{0%{opacity:0;transform:scale(3.2) rotate(-14deg)}54%{opacity:1;transform:scale(.84) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fxFade{0%{opacity:0}100%{opacity:1}}
@keyframes fxSweep{0%{transform:translateX(-140%) skewX(-14deg)}100%{transform:translateX(150%) skewX(-14deg)}}
@keyframes fxTravel{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes fxSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .fxx .fx-scene svg [data-anim]{animation:fxFade .25s ease both !important}
  .fxx .fx-title .car,.fxx .fx-body .car{animation:none}
}
/* responsive: stack for iPad portrait & below */
@media (max-width:900px){
  .fxx .fx-stage{grid-template-columns:1fr;max-width:680px}
  .fxx .fx-canvas{aspect-ratio:600/540;min-height:0}
  .fxx .fx-panel{padding:30px 30px 26px;border-left:0;border-top:1px solid #eef1f7}
  .fxx .fx-title{min-height:auto}
  .fxx .fx-body{min-height:5em}
  .fxx .fx-controls{justify-content:center}
}
@media (max-width:560px){
  .fxx .fx-panel{padding:24px}
  .fxx .fx-next{font-size:15px;padding:13px 20px}
  .fxx .fx-controls{justify-content:center}
}