/* ================= ScanQM Hero-Animation ================= */
.sq{
  --ink:#15323D; --muted:#5E7680; --line:#D3DFE3; --tile:#E7EFF2;
  --brand:#0E7C86; --brand-soft:#D7ECEE;
  --green:#22A06B; --amber:#EFA521; --red:#D9453D;
  --skin:#E6B08E; --skin-d:#CF9573;
  --page:#0B1520; /* Hintergrundfarbe des Hero-Bereichs, fuer die Beschriftungen auf den Linien */
  max-width:1180px;margin:0 auto;color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  position:relative;
}
.sq *{box-sizing:border-box}
.sq svg text{font-family:inherit}
.sq-stage{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:start}
.sq-card{margin:0;transition:opacity .6s ease, transform .6s ease;opacity:.55;transform:scale(.97)}
.sq[data-active="1"] .sq-card[data-step="1"],
.sq[data-active="2"] .sq-card[data-step="2"],
.sq[data-active="3"] .sq-card[data-step="3"]{opacity:1;transform:none}
.sq-card svg{display:block;width:100%;height:auto;border-radius:20px;background:var(--tile);box-shadow:0 1px 0 var(--line),0 18px 40px -24px rgba(21,50,61,.45)}
.sq-card figcaption{padding:18px 4px 0}
.sq-card h3{margin:0 0 6px;font-size:1.05rem;line-height:1.3;font-weight:700;display:flex;gap:10px;align-items:baseline}
.sq-card h3 span{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;border-radius:50%;background:#15323D;color:#fff;font-size:.78rem;transform:translateY(-1px)}
.sq-card p{margin:0;font-size:.93rem;line-height:1.5;color:var(--muted);max-width:34ch}

/* Verbinder zwischen den Szenen */
.sq-link{align-self:center;height:2px;margin-top:-60px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 11px);position:relative}
.sq-link::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:8px solid var(--line);border-right:0}
.sq-link i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--brand);opacity:0}
.sq-link.on i{animation:sq-travel 1s ease-in-out forwards}
.sq-link.amber i{background:var(--amber)}
@keyframes sq-travel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}

.sq-same{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;margin-bottom:26px}
.sq-same-bracket{grid-column:1/4;margin:0 calc((100% - 56px)/4);height:20px;margin-top:36px;border:2px dashed #9CC9CD;border-bottom:0;border-radius:12px 12px 0 0;position:relative;transition:border-color .4s}
.sq-same-bracket span{position:absolute;left:50%;top:-34px;transform:translateX(-50%);padding:0 12px;font-size:.9rem;font-weight:650;color:var(--ink);white-space:nowrap;display:flex;gap:8px;align-items:center}
.sq-same-bracket svg{color:var(--brand)}
.sq-same-bracket::before,.sq-same-bracket::after{content:"";position:absolute;bottom:-6px;border:6px solid transparent;border-top:7px solid #9CC9CD;border-bottom:0}
.sq-same-bracket::before{left:-7px}.sq-same-bracket::after{right:-7px}
.sq-same.on .sq-same-bracket{border-color:var(--brand)}
.sq-dots{display:none}
.sq-usecases{margin:44px auto 0;text-align:center;font-size:1.05rem;line-height:1.5;color:var(--muted);max-width:74ch}
.sq-rot{display:inline-grid;text-align:left;vertical-align:bottom;color:var(--ink)}
.sq-rot b{grid-area:1/1;font-weight:700;opacity:0;transform:translateY(.4em);transition:opacity .4s ease,transform .4s ease;white-space:nowrap}
.sq-rot b.on{opacity:1;transform:none}
.sq-rot b.out{opacity:0;transform:translateY(-.4em)}
.sq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Zustaende in den SVG-Szenen */
.sq .fx{opacity:0;transition:opacity .45s ease,transform .45s ease}
.sq .fx.on{opacity:1}
.sq .fxo{transition:opacity .45s ease}
.sq .fxo.off{opacity:0}
.sq .beam{opacity:0}
.sq .beam.on{animation:sq-beam 1.1s ease-in-out}
@keyframes sq-beam{0%,100%{opacity:0}30%,70%{opacity:.9}}
.sq .scanline{opacity:0}
.sq .scanline.on{animation:sq-scan 1.1s ease-in-out}
@keyframes sq-scan{0%{opacity:0;transform:translateY(0)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(96px)}}
.sq .chk{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s ease}
.sq .chk.on{stroke-dashoffset:0}
.sq .box{transition:fill .3s ease,stroke .3s ease}
.sq .box.on{fill:var(--green);stroke:var(--green)}
.sq .done-txt{transition:opacity .3s}
.sq .progress{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform .45s ease}
.sq .btnbg{transition:fill .35s ease}
.sq .btnbg.ok{fill:var(--green)}
.sq .btnbg.go{fill:var(--brand)}
.sq .lamp{opacity:.22;transition:opacity .4s ease}
.sq .lamp.on{opacity:1}
.sq .chip{transition:fill .3s,stroke .3s}
.sq .chip.sel{fill:#FFF3DC;stroke:var(--amber)}
.sq .ripple{transform-box:fill-box;transform-origin:center;opacity:0}
.sq .ripple.on{animation:sq-ripple .6s ease-out}
@keyframes sq-ripple{0%{opacity:.55;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.sq .slide{transform:translateY(-10px)}
.sq .slide.on{transform:none}
.sq .cursor{transition:transform 1s cubic-bezier(.45,.05,.3,1)}
.sq .cursor.at{transform:translate(214px,146px)}
.sq .cursor.at2{transform:translate(219px,16px)}
.sq .s2-arm.press,.sq .s2-lever.press{animation:sq-press .5s ease-in-out 2}
@keyframes sq-press{50%{transform:translateY(-6px)}}
.sq .s2-shotA{transition:opacity .5s ease}
.sq .s2-shotA.off{opacity:0}
.sq .face{transition:fill .3s,stroke-width .3s}
.sq .smi.sel .face{stroke-width:3}
.sq .s2-caret{animation:sq-blink 1s steps(1) infinite}
@keyframes sq-blink{50%{opacity:0}}
.sq .sig{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s ease-in-out}
.sq .sig.on{stroke-dashoffset:0}
.sq .hot{transition:fill .4s}
.sq .hot.on{fill:var(--amber)}
.sq .tag{transform-box:fill-box;transform-origin:left center}
.sq .pulse.on{animation:sq-pulse 1.2s ease-in-out 2}
@keyframes sq-pulse{50%{opacity:.35}}

@media (max-width:860px){
  .sq-stage{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .sq-link,.sq-same{display:none}
  .sq-card{grid-area:1/1;opacity:0;transform:none;pointer-events:none}
  .sq[data-active="1"] .sq-card[data-step="1"],
  .sq[data-active="2"] .sq-card[data-step="2"],
  .sq[data-active="3"] .sq-card[data-step="3"]{opacity:1}
  .sq-usecases{margin-top:28px;font-size:1rem}
  .sq-rot{display:grid;text-align:center}
  .sq-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
  .sq-dots b{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,width .3s}
  .sq[data-active="1"] .sq-dots b:nth-child(1),
  .sq[data-active="2"] .sq-dots b:nth-child(2),
  .sq[data-active="3"] .sq-dots b:nth-child(3){background:var(--ink);width:22px;border-radius:4px}
}
@media (prefers-reduced-motion:reduce){
  .sq *{transition:none!important;animation:none!important}
  .sq-card{opacity:1!important;transform:none!important}
  .sq-rot{display:none}
  .sq-sr{position:static;width:auto;height:auto;clip:auto;white-space:normal}
}