.sales-story{height:240svh;position:relative;background:#f3f6fb;isolation:isolate;--p:0;scroll-margin-top:76px}.story-screen{position:sticky;top:76px;height:calc(100svh - 76px);min-height:600px;overflow:hidden;isolation:isolate;background:#f3f6fb;color:#102f56}.story-intro{position:absolute;left:7%;top:9%;z-index:2;opacity:var(--intro,1);transform:translateY(calc(var(--out,0) * -40px))}.story-intro .eyebrow{margin-bottom:16px}.story-intro>p:last-child{font-size:20px;letter-spacing:-.025em}.chat-world{position:absolute;inset:0;opacity:var(--chats,1);transform:scale(calc(1 - var(--out,0) * .12));transform-origin:50% 55%;pointer-events:none}.main-question{position:absolute;left:10%;top:29%;width:80%;font-size:clamp(62px,7.8vw,125px);line-height:1.02;letter-spacing:-.065em;font-weight:600;transform:translateY(calc(var(--build,0) * -16px));z-index:2}.main-question>span{color:#245ef0}.chat-note{position:absolute;background:#fff;border:1px solid #d1dce9;padding:18px 24px;font-size:16px;line-height:1.4;box-shadow:0 15px 45px #17395a12;opacity:var(--build,0);transform:translateY(calc((1 - var(--build,0)) * 65px)) rotate(var(--rot,0deg));white-space:nowrap}.note-a{top:18%;right:10%;--rot:6deg}.note-b{top:60%;left:8%;--rot:-6deg}.note-c{top:72%;left:39%;--rot:4deg}.note-d{top:57%;right:6%;--rot:-4deg}.note-e{top:8%;left:40%;--rot:-5deg}.note-f{top:80%;left:15%;--rot:3deg}.chat-note small{display:block;font-size:10px;color:#6a8098;margin-bottom:7px;letter-spacing:.03em}.story-bridge{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;z-index:3;background:#245ef0;color:white;clip-path:inset(calc((1 - var(--sweep,0)) * 100%) 0 0);pointer-events:none}.story-bridge p{font-size:clamp(40px,5.6vw,88px);font-weight:600;line-height:1.08;letter-spacing:-.055em;max-width:17ch;opacity:var(--bridge,0);transform:translateY(calc((1 - var(--bridge,0)) * 30px))}.story-resolution{position:absolute;inset:0;z-index:4;background:#102f56;color:#fff;display:grid;grid-template-columns:43% 57%;clip-path:inset(calc((1 - var(--resolved,0)) * 100%) 0 0)}.story-resolution figure{position:relative;margin:0;overflow:hidden}.story-resolution figure img{width:100%;height:100%;object-fit:cover;object-position:45% 65%;transform:scale(calc(1.07 - var(--resolved,0) * .07))}.story-resolution figure:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#102f56)}.story-resolution-copy{padding:10% 12% 150px 9%;align-self:center;position:relative}.story-resolution-copy .eyebrow{color:#a8c8ff}.story-resolution-copy h2{font-size:clamp(40px,4.8vw,72px);line-height:1.08;letter-spacing:-.055em}.story-resolution-copy h2 span{color:#accbff}.story-resolution-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:#d7e3f1;margin-top:25px;max-width:36ch}.story-mark{width:62px;height:40px;object-fit:contain;filter:brightness(0) invert(1);margin-bottom:25px}.story-footer{position:absolute;left:7%;right:7%;bottom:6%;z-index:6;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.story-footer>p{font-size:12px;line-height:1.6;color:var(--footer-color,#526b85);max-width:30ch}.story-footer>div{text-align:right}.story-footer .button{border-radius:2px;box-shadow:0 8px 30px #071e3717;font-size:14px;background:var(--cta-bg,#245ef0);color:var(--cta-color,#fff)}.story-footer small{display:block;font-size:10px;margin-top:10px;color:var(--footer-color,#526b85)}.story-progress{position:absolute;top:0;left:0;height:3px;width:100%;background:#245ef0;transform:scaleX(var(--p));transform-origin:left;z-index:8}.story-screen a:focus-visible{outline-color:#8ab8ff}.story-duties{padding:25px 7%;background:white;font-size:12px;color:#526b85;line-height:1.7}.story-duties strong{color:#102f56;margin-right:15px}
@media(max-width:700px){.sales-story{height:250svh}.story-screen{top:66px;height:calc(100svh - 66px);min-height:590px}.story-intro{left:7%;top:8%}.story-intro>p:last-child{font-size:16px}.main-question{top:29%;left:7%;font-size:clamp(45px,10.5vw,70px);width:86%}.chat-note{font-size:12px;padding:12px 15px}.chat-note small{font-size:9px}.note-a{top:19%;right:5%}.note-b{top:56%;left:6%}.note-c{top:68%;left:17%}.note-d{top:49%;right:4%}.note-e,.note-f{display:none}.story-resolution{grid-template-columns:1fr}.story-resolution figure{position:absolute;inset:0;opacity:.22}.story-resolution figure:after{background:linear-gradient(180deg,#102f5644,#102f56 85%)}.story-resolution-copy{padding:35px 7% 150px;align-self:center;z-index:1}.story-resolution-copy h2{font-size:clamp(39px,10vw,52px)}.story-resolution-copy>p:not(.eyebrow){font-size:15px;max-width:30ch}.story-mark{width:51px;height:34px;margin-bottom:22px}.story-footer{bottom:5%;display:block}.story-footer>p{display:none}.story-footer>div{text-align:left}.story-footer .button{width:100%;font-size:12px}.story-footer small{text-align:center}.story-bridge p{font-size:44px}.story-duties strong{display:block}}
@media(prefers-reduced-motion:reduce){.sales-story{height:auto}.story-screen{position:relative;top:0;min-height:720px}.story-resolution{clip-path:none}.chat-world,.story-intro,.story-bridge,.story-progress{display:none}.story-footer{--footer-color:#d7e3f1;--cta-bg:#fff;--cta-color:#102f56}.story-resolution figure img{transform:none}}
/* Statische Lösung als Rückfall, Scrollinszenierung erst nach Initialisierung. */
.sales-story{height:auto;--resolved:1}.story-screen{position:relative;top:0}.sales-story.is-enhanced{height:240svh;--resolved:0}.is-enhanced .story-screen{position:sticky;top:76px}.sales-story:not(.is-enhanced) .story-intro,.sales-story:not(.is-enhanced) .chat-world,.sales-story:not(.is-enhanced) .story-bridge{display:none}.sales-story:not(.is-enhanced) .story-footer{--cta-bg:#fff;--cta-color:#102f56;--footer-color:#d7e3f1}
@media(max-width:700px){.sales-story.is-enhanced{height:250svh}.is-enhanced .story-screen{top:66px}}
@media(max-height:700px){.story-screen{min-height:0}.story-resolution-copy{padding-top:24px;padding-bottom:110px}.story-mark{display:none}.story-resolution-copy h2{font-size:clamp(30px,4.2vw,48px)}.story-resolution-copy>p:not(.eyebrow){font-size:14px;margin-top:16px}.story-intro{top:6%}.story-footer{bottom:5%}.story-bridge p{font-size:clamp(34px,5vw,70px)}}
@media(prefers-reduced-motion:reduce){.sales-story.is-enhanced{height:auto}.is-enhanced .story-screen{position:relative;top:0}}
/* Weicher Anschluss und einmaliger Fokus auf den ersten Schritt. */
.sales-story{background:#fff}.story-screen{background:linear-gradient(180deg,#fff 0%,#f3f6fb 24%)}
.story-bridge,.story-resolution{clip-path:none!important;opacity:0;transform:translateY(32px);transition:opacity .22s ease-out,transform .22s ease-out;pointer-events:none}
.story-bridge{opacity:var(--sweep,0);transform:translateY(calc((1 - var(--sweep,0)) * 32px))}
.story-resolution{opacity:var(--resolved,0);transform:translateY(calc((1 - var(--resolved,0)) * 28px))}
.story-first-step{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:12px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.cta-landed .story-first-step{opacity:1;transform:none}
.cta-landed .story-footer .button{animation:cta-arrive .65s cubic-bezier(.2,.8,.25,1) both;box-shadow:0 8px 35px #0002}
@keyframes cta-arrive{0%{transform:scale(.94)}55%{transform:scale(1.045)}100%{transform:scale(1)}}
@media(max-width:700px){.story-first-step{font-size:12px;margin-bottom:9px}}
@media(prefers-reduced-motion:reduce){.story-bridge{display:none}.story-resolution{opacity:1;transform:none;transition:none}.story-first-step{opacity:1;transform:none}.cta-landed .story-footer .button{animation:none}}
.sales-story:not(.is-enhanced) .story-resolution{opacity:1;transform:none}
/* Der Verkaufscheck wird zum Abschluss der Szene. */
.cta-landed .story-footer{left:48%;right:7%;bottom:7%;display:block;animation:check-stage-in .65s ease-out both}
.cta-landed .story-footer>p{display:none}.cta-landed .story-footer>div{text-align:left;padding:24px 26px;background:#ffffff0a;border:1px solid #a8c8ff55;border-left:3px solid #a8c8ff}
.cta-landed .story-first-step{font-size:clamp(22px,2.1vw,31px);line-height:1.2;letter-spacing:-.035em;margin-bottom:18px}
.cta-landed .story-footer .button{width:100%;min-height:70px;padding:20px 18px;font-size:clamp(14px,1.2vw,18px);font-weight:800;box-shadow:0 10px 35px #0003;animation:check-button-in .8s cubic-bezier(.16,.9,.3,1) both}
.cta-landed .story-footer small{text-align:center;font-size:11px;margin-top:12px;color:#d7e3f1}
.cta-landed .story-resolution-copy{padding-bottom:265px}
@keyframes check-stage-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes check-button-in{0%{transform:scale(.9);opacity:.4}55%{transform:scale(1.055);opacity:1}78%{transform:scale(.985)}100%{transform:scale(1)}}
@media(max-width:700px){.cta-landed .story-footer{left:7%;right:7%;bottom:5%}.cta-landed .story-footer>div{padding:18px}.cta-landed .story-first-step{font-size:25px;margin-bottom:14px}.cta-landed .story-footer .button{min-height:64px;font-size:12px;padding:16px 9px}.cta-landed .story-resolution-copy{padding-bottom:270px}.cta-landed .story-resolution-copy h2{font-size:34px}.cta-landed .story-resolution-copy>p:not(.eyebrow){font-size:14px;margin-top:16px}}
@media(max-height:700px){.cta-landed .story-footer{bottom:4%}.cta-landed .story-footer>div{padding:14px 18px}.cta-landed .story-first-step{font-size:23px;margin-bottom:10px}.cta-landed .story-footer .button{min-height:54px}.cta-landed .story-resolution-copy{padding-top:18px;padding-bottom:210px}.cta-landed .story-resolution-copy h2{font-size:30px}.cta-landed .story-resolution-copy>p:not(.eyebrow){font-size:13px;margin-top:12px}.cta-landed .story-resolution-copy .eyebrow{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.cta-landed .story-footer,.cta-landed .story-footer .button{animation:none}}
/* Abschluss im gemeinsamen Layoutfluss: Text und CTA können sich nicht überlagern. */
.cta-landed .story-resolution{grid-template-columns:43% 57%}
.cta-landed .story-resolution-copy{align-self:start;padding:clamp(28px,5vh,60px) 12% 0 9%}
.cta-landed .story-resolution-copy h2{font-size:clamp(32px,3.4vw,52px)}
.cta-landed .story-mark{width:48px;height:30px;margin-bottom:16px}
.cta-landed .story-resolution-copy .eyebrow{margin-bottom:14px}
.cta-landed .story-resolution-copy>p:not(.eyebrow){font-size:15px;margin-top:18px;line-height:1.6}
.cta-landed .story-footer{position:relative;inset:auto;margin:0;padding:0;animation:none}
.cta-landed .story-footer>div{margin-top:24px;padding:20px;}
.cta-landed .story-footer .button{min-height:60px;font-size:14px}
@media(max-width:700px){.cta-landed .story-resolution{grid-template-columns:1fr}.cta-landed .story-resolution-copy{padding:30px 7%}.cta-landed .story-resolution-copy h2{font-size:34px}.cta-landed .story-footer>div{padding:16px;margin-top:22px}.cta-landed .story-first-step{font-size:24px}.cta-landed .story-footer .button{font-size:12px}}
@media(max-height:700px){.cta-landed .story-resolution-copy{padding-top:20px}.cta-landed .story-mark{display:none}.cta-landed .story-resolution-copy h2{font-size:30px}.cta-landed .story-resolution-copy>p:not(.eyebrow){font-size:13px;margin-top:12px}.cta-landed .story-footer>div{margin-top:18px;padding:14px}.cta-landed .story-first-step{font-size:22px;margin-bottom:10px}.cta-landed .story-footer .button{min-height:52px}}
.story-screen.cta-landed{overflow-y:auto}
/* Größere, gut lesbare Typografie im Abschluss. */
.cta-landed .story-resolution-copy h2{font-size:clamp(38px,4.1vw,64px)}
.cta-landed .story-resolution-copy>p:not(.eyebrow){font-size:18px;line-height:1.65;max-width:37ch}
.cta-landed .story-resolution-copy .eyebrow{font-size:12px}
.cta-landed .story-first-step{font-size:clamp(27px,2.4vw,36px)}
.cta-landed .story-footer .button{font-size:18px;line-height:1.4;min-height:68px}
.cta-landed .story-footer small{font-size:13px}
@media(max-width:700px){.cta-landed .story-resolution-copy{padding:26px 7%}.cta-landed .story-resolution-copy h2{font-size:clamp(34px,9.6vw,43px)}.cta-landed .story-resolution-copy>p:not(.eyebrow){font-size:16px;line-height:1.6}.cta-landed .story-first-step{font-size:27px}.cta-landed .story-footer .button{font-size:16px;min-height:66px}.cta-landed .story-footer small{font-size:12px}}
@media(max-height:700px){.cta-landed .story-resolution-copy h2{font-size:clamp(34px,3.5vw,46px)}.cta-landed .story-resolution-copy>p:not(.eyebrow){font-size:16px}.cta-landed .story-first-step{font-size:26px}.cta-landed .story-footer .button{font-size:16px;min-height:60px}.cta-landed .story-footer small{font-size:12px}.cta-landed .story-footer>div{padding:14px}.cta-landed .story-resolution-copy{padding-top:18px;padding-bottom:24px}}
/* Abschluss ohne zusätzlichen Kasten: Marke aus dem Bild führt zum Check. */
.cta-landed .story-footer>div{background:none;border:0;padding:0;margin-top:30px}.cta-landed .story-first-step{display:none}
.cta-landed .story-footer .button{border-radius:2px;animation:none;box-shadow:none;position:relative;gap:12px;transition:background .25s,color .25s,box-shadow .25s}
.check-token{position:absolute;z-index:12;display:grid;place-items:center;width:52px;height:44px;background:white;border:1px solid #cad9ed;border-radius:2px;box-shadow:0 8px 25px #0003;pointer-events:none}.check-token img{width:34px;height:25px;object-fit:contain}
.cta-landed .story-footer .button.check-received{animation:check-reaction .65s ease-out both}.button.check-received:before{content:'';display:block;flex:0 0 25px;width:25px;height:19px;background:url('assets/wagensache-w.svg') center/contain no-repeat}
@keyframes check-reaction{0%{box-shadow:0 0 0 0 #a8c8ff99;transform:scale(1)}35%{box-shadow:0 0 0 10px #a8c8ff00;transform:scale(1.025)}100%{box-shadow:0 0 0 14px #a8c8ff00;transform:scale(1)}}
@media(max-width:700px){.cta-landed .story-footer>div{margin-top:25px}.button.check-received:before{flex-basis:20px;width:20px}.cta-landed .story-footer .button{gap:8px}}
@media(prefers-reduced-motion:reduce){.check-token{display:none}.cta-landed .story-footer .button.check-received{animation:none}}
.story-resolution figure>svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.check-token{background:none;border:0;box-shadow:none}.check-token img{filter:drop-shadow(0 1px 2px #fff)}
.check-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}.check-burst i{position:absolute;display:block;width:7px;height:4px;background:#82b4ff;box-shadow:0 0 8px #accbff;pointer-events:none}.check-burst i:nth-child(3n){width:4px;height:9px;background:#245ef0}
@keyframes check-reaction{0%{box-shadow:0 0 0 0 #a8c8ffcc,0 0 0 #accbff00;transform:scale(1)}28%{box-shadow:0 0 0 12px #a8c8ff22,0 0 48px #accbff88;transform:scale(1.055)}60%{box-shadow:0 0 0 23px #a8c8ff00,0 0 22px #accbff33;transform:scale(.99)}100%{box-shadow:0 0 0 28px #a8c8ff00,0 0 0 #accbff00;transform:scale(1)}}
.cta-landed .story-footer .button.check-received{animation-duration:.95s}
@media(prefers-reduced-motion:reduce){.check-burst{display:none}}