/* Cellister-Produktaufnahmen: Kamerafahrten auf unveränderten Bildschirmfotos.
   Szene 01 behält die bestätigte Verbindungsillustration. */
.hero-product.hero-story{padding:20px 0 20px 4px;position:relative;min-width:0;margin:0}
.story-halo{position:absolute;inset:-18px -28px;background:radial-gradient(ellipse at center,#e7d9fd 0,#f3ecff80 48%,transparent 72%);z-index:-1}
.story-window{background:#fff;border:1px solid #c9b0ee;border-radius:18px;overflow:hidden;box-shadow:0 24px 65px #522b9216;position:relative;container-type:inline-size}
.story-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 21px;border-bottom:1px solid #e6ddf1;background:#fdfbff}
.story-header>div{display:flex;align-items:center;gap:9px;font-size:12px}
.story-header strong{font-weight:600}.story-header img{object-fit:contain}.story-example{font-size:10px;color:#766180;white-space:nowrap}
.story-stage{padding:18px;height:max(385px,calc(69.444cqw + 52px))}
.story-scene{min-width:0;height:100%}.story-scene[hidden]{display:none!important}
/* Die Aufnahme füllt 02–06; keine nachgebauten Karten oder künstlichen Statuswerte. */
.story-scene[data-recording]{display:flex;flex-direction:column;gap:12px}
.recording-heading{display:flex;align-items:center;gap:9px;min-height:25px}
.recording-heading>span:first-child{font:500 10px var(--display);color:#7957a4;border:1px solid #d8c5ee;border-radius:5px;padding:2px 5px}
.recording-heading h2{font-size:15px;letter-spacing:-.025em;line-height:1.3;margin:0}
.recording-source{font-size:9px;color:#766180;margin-left:auto;white-space:nowrap}
.recording-viewport{display:block;position:relative;flex-shrink:0;width:100%;aspect-ratio:1.44;overflow:hidden;padding:0;background:#fff;border:1px solid #dbcfeb;border-radius:9px;text-align:left;cursor:zoom-in;isolation:isolate;margin:auto 0}
.recording-image{display:block;position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;transform-origin:0 0;transform:var(--camera-start);pointer-events:none}
.story-scene.is-current .recording-image{animation:recording-camera var(--scene-duration,7200ms) cubic-bezier(.22,.68,.25,1) both;animation-play-state:paused}
.story-is-playing .story-scene.is-current .recording-image{animation-play-state:running}
.recording-zoom-hint{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #c9b0ee;background:#ffffffed;box-shadow:0 3px 15px #51306e12;border-radius:6px;font-size:10px;color:#603b8d;z-index:2}
.recording-zoom-hint>span{font-size:17px;line-height:1}
.recording-viewport:hover .recording-zoom-hint{background:#f2e9ff;border-color:#a777d1}
.recording-viewport:focus-visible{outline:3px solid #7954e5;outline-offset:3px}
[data-recording='scan']{--camera-start:translate(-2%,-1%) scale(1.04);--camera-end:translate(-11%,-6%) scale(1.9)}
[data-recording='research']{--camera-start:translate(-2%,-24%) scale(1.04);--camera-end:translate(-10%,-100%) scale(1.75)}
[data-recording='listing']{--camera-start:translate(-2%,-1%) scale(1.04);--camera-end:translate(-8%,-6%) scale(1.8)}
[data-recording='orders']{--camera-start:translate(-1%,-1%) scale(1.04);--camera-end:translate(-3%,-16%) scale(1.35)}
[data-recording='orders'] .recording-image{width:140%}
[data-recording='schedule']{--camera-start:translate(-2%,-1%) scale(1.04);--camera-end:translate(-82%,-9%) scale(1.85)}
@keyframes recording-camera{0%,12%{transform:var(--camera-start)}65%,100%{transform:var(--camera-end)}}
.story-is-static .recording-image{animation:none!important;transform:var(--camera-start)}
/* Szene 01: die bisherige Verbindung mit Original-Logo. */
.story-connections{display:flex;align-items:center;justify-content:center;padding:10px 16px 23px;gap:9px}
.brand-node{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;gap:4px;min-width:76px}
.brand-node small{font-size:10px;color:#766180}.brand-node .ebay-word{font-size:30px;line-height:1.4}
.ebay-word{display:inline-flex;align-items:center;font-family:Arial,sans-serif;font-style:normal;letter-spacing:-.065em}.ebay-word i{font-style:normal;font-weight:400}.ebay-word i:nth-child(1){color:#e53238}.ebay-word i:nth-child(2){color:#0064d2}.ebay-word i:nth-child(3){color:#f5af02}.ebay-word i:nth-child(4){color:#86b817}
.cellenes-node{position:relative;min-width:84px}.cellenes-node img{object-fit:contain;padding:5px;width:58px;height:58px;border:1px solid #e3d5f7;box-shadow:0 4px 20px #7540bd13;background:white;border-radius:50%}.cellenes-node small{color:#65488d;font-size:10px;letter-spacing:.1em;font-weight:600}
.amazon-word{position:relative;font:bold 21px Arial,sans-serif;line-height:1.9;color:#34313c;letter-spacing:-1px}.amazon-word>span{position:absolute;bottom:-10px;right:6px;color:#ed9e32;font-size:40px;font-weight:400;line-height:1;transform:rotate(-5deg)}.amazon-node small{margin-top:2px}
.story-wire{height:1px;flex:1;max-width:73px;background:#dbcbee;position:relative}.story-wire:before,.story-wire:after{content:'';position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:#d3c0ed}.story-wire:before{left:0}.story-wire:after{right:0}.story-wire i{position:absolute;top:-3px;left:0;width:7px;height:7px;background:#8e53db;border-radius:50%;box-shadow:0 0 0 4px #eee4fd;opacity:0}
.story-is-playing .story-wire i{animation:story-packet 2.2s ease-in-out infinite}.wire-amazon i{display:none}
.scene-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#766180;letter-spacing:.04em;min-height:21px;flex-wrap:wrap}
.scene-state{color:#346a52;background:#eef7f2;border-radius:15px;padding:4px 8px;font-size:10px;letter-spacing:0;white-space:nowrap}
#story-scene-0>h2{font-size:25px;letter-spacing:-.04em;margin-top:13px;line-height:1.15}
#story-scene-0>p{font-size:11px;color:#766180;margin-top:9px;line-height:1.65;max-width:420px}
.connection-visual{display:flex;align-items:center;justify-content:center;position:relative;gap:17px;padding:23px 32px 15px}
.connection-disc{display:grid;place-items:center;width:70px;height:70px;border:1px solid #e4d7f5;border-radius:18px;background:#fcfaff;flex-shrink:0}.connection-disc img{object-fit:contain}.connection-disc .ebay-word{font-size:31px}
.connection-path{position:relative;width:90px;height:1px;background:#d7c4f1}.connection-path i{width:7px;height:7px;position:absolute;top:-3px;left:0;background:#8f51de;border-radius:50%;box-shadow:0 0 0 6px #f0e5ff}.story-is-playing .connection-path i{animation:story-packet 2s ease infinite}.connection-path>span{font-size:10px;color:#766180;position:absolute;top:12px;left:0;right:0;text-align:center}
.connection-tick{position:absolute;right:calc(50% - 125px);bottom:8px;width:24px;height:24px;border:3px solid #fff;border-radius:50%;display:grid;place-items:center;background:#e1f4ea;color:#068767;font-size:12px}
.scene-note{font-size:10px;color:#766180;text-align:center;margin-top:13px;display:flex;align-items:center;justify-content:center;gap:7px}.scene-note>span{color:#52a788}
@keyframes story-packet{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
/* Bedienung und bereits freigegebene Zähler der unteren Demo. */
.story-controls{display:flex;align-items:center;gap:14px;padding:15px 22px 9px;border-top:1px solid #f0e7f8}
.story-steps{display:flex;align-items:center;gap:0}.story-steps button{width:24px;height:28px;padding:7px 3px;background:none;display:grid;place-items:center}.story-steps button>span{height:4px;width:16px;background:#e4d9f1;border-radius:3px;transition:background .3s,width .3s}.story-steps button[aria-current='step']>span{background:#8747cd}.story-steps button.is-complete>span{background:#c1a0e3}
.story-position{font-size:10px;color:#766180;font-variant-numeric:tabular-nums;white-space:nowrap}
.story-play{margin-left:auto;font-size:10px;border:1px solid #dfcfee;border-radius:7px;background:#fcf9ff;color:#766180;padding:6px 10px;min-height:31px;display:flex;align-items:center;gap:6px}.story-play:hover{border-color:#af7cdb;background:#f2e9ff}
.story-caption{padding:4px 18px 14px;font-size:10px;color:#766180;text-align:center}
.story-is-paused .story-scene *{animation-play-state:paused!important}
.story-is-static .connection-path i{left:90%}
.queue-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.queue-count{font-size:10px;color:#766180;font-variant-numeric:tabular-nums;line-height:1.4}.queue-item.running .queue-count{color:var(--purple)}.queue-item.done .queue-count{color:var(--green)}
@media(max-width:1180px){.story-header{padding:14px 18px}.story-controls{gap:10px;padding-inline:18px}.story-stage{padding:15px;height:max(385px,calc(69.444cqw + 52px))}}
@media(min-width:741px) and (max-width:960px){.hero-product.hero-story{padding:15px 0}.story-header{padding:13px}.story-header>div{font-size:11px}.story-example,.recording-source{display:none}.story-stage{padding:13px}.story-connections{gap:5px;padding:7px 0 22px}.brand-node,.cellenes-node{min-width:65px}.brand-node .ebay-word{font-size:25px}.amazon-word{font-size:18px}.cellenes-node img{width:48px;height:48px}#story-scene-0>h2{font-size:22px}.connection-visual{padding-inline:5px;gap:12px}.connection-disc{width:60px;height:60px}.connection-path{width:65px}.connection-tick{right:calc(50% - 103px)}.story-controls{padding-inline:13px;gap:7px}.story-position{display:none}.story-steps button{width:21px}.story-caption{padding-inline:12px}.recording-heading h2{font-size:13px}}
@media(max-width:740px){.hero-product.hero-story{padding:5px 0 10px;max-width:550px;margin:0 auto}.story-halo{inset:-10px -12px}.story-window{border-radius:14px}.story-header{padding:13px 16px}.story-header>div{font-size:11px}.story-stage{padding:15px}.story-controls{padding:13px 16px 8px;gap:10px}.story-steps button{width:23px}.story-caption{padding-inline:16px}.recording-heading h2{font-size:14px}}
@media(max-width:390px){.story-header{padding:12px 14px}.story-example,.recording-source{display:none}.story-header>div{font-size:10px;gap:7px}.story-stage{padding:12px;height:385px}.story-connections{padding:7px 0 20px;gap:6px}.brand-node{min-width:60px}.cellenes-node{min-width:65px}.cellenes-node img{width:48px;height:48px}.brand-node .ebay-word{font-size:26px}.amazon-word{font-size:19px}#story-scene-0>h2{font-size:23px}#story-scene-0>p{font-size:10px}.connection-visual{padding-inline:8px;gap:12px}.connection-disc{width:60px;height:60px}.connection-path{width:65px}.connection-tick{right:calc(50% - 102px)}.story-controls{padding-inline:13px;gap:8px}.story-steps button{width:22px}.story-position{display:none}.story-caption{padding-inline:12px}.recording-heading h2{font-size:13px}}
@media(prefers-reduced-motion:reduce){.recording-image{animation:none!important;transform:var(--camera-start)}.story-steps button>span{transition:none}}
