/* Paket 109 · Belegerl-Produktseite – „A2 rahmt, Belegerl spielt“. Nur transform/opacity animiert, alles aus bei reduzierter Bewegung. */
.bp-main{--bl:#4F46E5;--bl2:#8B5CF6;--bl3:#C4B5FD;--blr:79,70,229;--lir:139,92,246;--cor:37,99,235;overflow-x:clip}
.bp-main .bp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bp-main h2{font-family:Space Grotesk,sans-serif;font-weight:700;letter-spacing:-.02em;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.05;margin:0 0 14px}
.bp-sh{max-width:760px;margin:0 0 clamp(26px,4vw,44px)}
.bp-sh .lead{margin-inline:0}
.bp-sh-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;max-width:none}
.bp-small{font-size:.82rem;line-height:1.55;color:var(--text-3)}
.bp-btn svg{width:16px;height:16px;flex:none}
.bp-btn[data-bp-play] svg,.bp-btn[data-bp-sound] svg{width:14px;height:14px}

/* Aurora: A2-Kobalt links → Belegerl-Lila rechts */
.bp-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bp-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.bp-aurora i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,rgba(var(--cor),.55),transparent 66%);animation:bp-float 18s ease-in-out infinite alternate}
.bp-aurora i:nth-child(2){width:50vw;height:50vw;right:-14vw;top:-6vw;background:radial-gradient(circle,rgba(var(--lir),.5),transparent 66%);animation:bp-float 22s ease-in-out -6s infinite alternate-reverse}
.bp-aurora i:nth-child(3){width:34vw;height:34vw;left:38%;bottom:-18vw;background:radial-gradient(circle,rgba(var(--blr),.4),transparent 66%);animation:bp-float 26s ease-in-out -3s infinite alternate}
.bp-aurora.soft i{opacity:.32}
[data-theme=dark] .bp-aurora i{opacity:.38}
@keyframes bp-float{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(4vw,3vw,0) scale(1.12)}}
.bp-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(to right,color-mix(in srgb,var(--cobalt) 9%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--cobalt) 9%,transparent) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 35% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 35% 40%,#000 30%,transparent 75%)}

/* Hero */
.bp-hero{position:relative;padding:calc(var(--top-clear,120px) - 30px) 0 clamp(50px,7vw,96px);isolation:isolate}
.bp-hero-in{position:relative;z-index:1;display:grid;gap:clamp(30px,5vw,64px);align-items:center}
@media(min-width:980px){.bp-hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.bp-crumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--text-3);margin-bottom:18px}
.bp-crumb a{color:var(--text-3)}.bp-crumb a:hover{color:var(--cobalt-ink)}
.bp-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px 7px 12px;border-radius:999px;font:600 .78rem/1.2 Space Grotesk,sans-serif;letter-spacing:.02em;
  color:var(--text-2);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--sh-1)}
.bp-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.bp-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:#22C55E;animation:bp-pulse 2s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes bp-pulse{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(3);opacity:0}}
.bp-h1{font-family:Space Grotesk,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.9rem,7.2vw,5.6rem);margin:0 0 22px}
.bp-h1 span{display:block}
.bp-h1 .bp-l1{color:var(--text)}
.bp-h1 .bp-l2{color:var(--text-2)}
.bp-h1 .bp-l3{background:linear-gradient(100deg,var(--cobalt) 0%,var(--bl) 45%,var(--bl2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
[data-theme=dark] .bp-h1 .bp-l3{background-image:linear-gradient(100deg,#7DA6FF 0%,#8B87FF 45%,#C4B5FD 100%)}
.bp-h1.sm{font-size:clamp(2.2rem,5.4vw,4.2rem)}
.bp-lead{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.6;color:var(--text-3);max-width:54ch;margin:0 0 28px}
.bp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.bp-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;color:var(--text-3)}
.bp-facts li{display:inline-flex;align-items:center;gap:7px}
.bp-facts li:before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--cobalt),var(--bl2))}

/* Bühne */
.bp-stage{position:relative;margin:0;perspective:1200px;min-height:clamp(420px,52vw,600px);display:grid;place-items:center}
.bp-stage-in{position:relative;width:min(100%,520px);height:clamp(420px,50vw,580px);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bp-phone{position:relative;z-index:2;width:min(64%,290px);aspect-ratio:600/1298;padding:9px;border-radius:44px;margin:auto;
  background:linear-gradient(155deg,#2a3346 0%,#0b111d 42%,#05080f 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 1px 0 rgba(255,255,255,.14) inset,0 40px 70px -28px rgba(var(--blr),.55),0 18px 30px -16px rgba(5,10,24,.45)}
.bp-stage .bp-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateZ(30px)}
.bp-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#F7F7FB}
.bp-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.bp-screen .bp-d{opacity:0}
[data-theme=dark] .bp-screen .bp-d{opacity:1}[data-theme=dark] .bp-screen .bp-l{opacity:0}
.bp-gloss{position:absolute;inset:9px;border-radius:36px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.08) 100%);mix-blend-mode:screen}
.bp-phone.sm{width:min(52%,230px)}
.bp-phone.lg{width:min(100%,330px);padding:10px;border-radius:48px}
.bp-phone.lg video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:38px;background:#0b111d;object-fit:cover}

/* Kassenbon */
.bp-rc{position:absolute;z-index:3;left:-2%;top:16%;width:min(48%,210px);padding:14px 14px 12px;border-radius:6px 6px 14px 14px;background:#fff;color:#1B2230;
  font:500 10.5px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 24px 40px -18px rgba(11,19,32,.45),0 2px 6px rgba(11,19,32,.08);
  transform:translateZ(80px) rotate(-6deg);overflow:hidden;animation:bp-rc 12s cubic-bezier(.2,.7,.2,1) infinite}
.bp-rc:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:12px;background:radial-gradient(circle at 6px 0,transparent 6px,#fff 6.5px) 0 0/12px 12px repeat-x}
.bp-rc b{display:block;font:700 12px/1.2 Space Grotesk,sans-serif;text-align:center}
.bp-rc small{display:block;text-align:center;font-size:8.5px;color:#4F46E5;letter-spacing:.04em;margin:3px 0 4px}
.bp-rc em{display:block;font-style:normal;color:#5B6474;margin-bottom:6px}
.bp-rc ul{list-style:none;margin:0;padding:6px 0;border-top:1px dashed #C9CFDA;border-bottom:1px dashed #C9CFDA}
.bp-rc li{display:flex;justify-content:space-between;gap:8px}
.bp-rc li b,.bp-rc p b{font:600 10.5px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:right}
.bp-rc p{display:flex;justify-content:space-between;margin:6px 0 0;font-weight:700}
.bp-scan{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(to bottom,rgba(var(--blr),0),rgba(var(--blr),.22) 70%,rgba(var(--blr),.9) 100%);
  border-bottom:2px solid var(--bl);opacity:0;transform:translateY(-50px);animation:bp-scan 12s linear infinite;mix-blend-mode:multiply}
@keyframes bp-rc{0%{opacity:0;transform:translate3d(-60px,60px,80px) rotate(-16deg)}7%,86%{opacity:1;transform:translate3d(0,0,80px) rotate(-6deg)}94%,100%{opacity:0;transform:translate3d(30px,-10px,80px) rotate(-2deg) scale(.92)}}
@keyframes bp-scan{0%,9%{opacity:0;transform:translateY(-50px)}11%{opacity:1}29%{opacity:1;transform:translateY(270px)}31%,100%{opacity:0;transform:translateY(270px)}}

/* Glas-Chips */
.bp-chips{position:absolute;z-index:4;right:-3%;top:12%;list-style:none;margin:0;padding:0;display:grid;gap:9px;width:min(46%,215px);transform:translateZ(110px)}
.bp-chips li{display:flex;flex-direction:column;gap:1px;padding:9px 13px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 14px 30px -14px rgba(var(--blr),.45),0 1px 0 rgba(255,255,255,.5) inset;
  opacity:0;transform:translate3d(-30px,8px,0) scale(.9);animation:bp-chip 12s cubic-bezier(.34,1.3,.64,1) infinite;animation-delay:calc(var(--k)*.45s)}
.bp-chips li span{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.bp-chips li b{font:700 .9rem/1.25 Space Grotesk,sans-serif;color:var(--text)}
.bp-chips li.ok{background:linear-gradient(135deg,var(--bl),var(--bl2));border-color:transparent}
.bp-chips li.ok b{color:#fff}
@keyframes bp-chip{0%,30%{opacity:0;transform:translate3d(-30px,8px,0) scale(.9)}34%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translate3d(10px,-6px,0) scale(.96)}}
.bp-chips.sm{right:2%;top:18%;width:min(44%,190px)}
.bp-chips.sm li{animation:none;opacity:0;transform:translate3d(-20px,8px,0) scale(.94);transition:opacity .5s,transform .6s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(.25s + var(--k)*.12s)}

/* Maskottchen */
.bp-mascot{position:absolute;z-index:1;right:4%;bottom:6%;width:min(30%,150px);padding:0;border:0;background:none;cursor:pointer;transform:translateZ(10px) rotate(6deg);transform-origin:bottom center;transition:transform .45s cubic-bezier(.34,1.4,.64,1)}
.bp-mascot img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(var(--blr),.35))}
.bp-mascot .bp-m2,.bp-mascot .bp-mh{position:absolute;left:0;bottom:0;opacity:0;transition:opacity .25s}
.bp-mascot:hover,.bp-mascot:focus-visible,.bp-mascot.is-on{transform:translateZ(10px) translateX(-14%) rotate(-2deg) scale(1.06)}
.bp-mascot.is-on .bp-m1{opacity:0}.bp-mascot.is-on .bp-m2{opacity:1}
.bp-mascot:focus-visible{outline:2px solid var(--focus);outline-offset:6px;border-radius:16px}
.bp-bubble{position:absolute;right:62%;top:4%;padding:7px 12px;border-radius:14px 14px 4px 14px;background:#fff;color:#1B2230;font:700 .85rem/1 Space Grotesk,sans-serif;box-shadow:var(--sh-2);
  opacity:0;transform:translateY(8px) scale(.8);transition:opacity .25s,transform .35s cubic-bezier(.34,1.5,.64,1);white-space:nowrap}
.bp-mascot:hover .bp-bubble,.bp-mascot.is-on .bp-bubble,.bp-mascot:focus-visible .bp-bubble{opacity:1;transform:none}
html[data-mood=halloween] .bp-mascot .bp-m1,html[data-mood=halloween] .bp-mascot .bp-m2{opacity:0!important}
html[data-mood=halloween] .bp-mascot .bp-mh{position:static;opacity:1}
.bp-sample{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);font-size:.72rem;color:var(--text-3);padding:4px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line)}
@media(max-width:560px){.bp-rc{left:0;top:6%;width:52%}.bp-chips{right:-1%;top:auto;bottom:10%;width:54%}.bp-mascot{display:none}}

/* Scroll-Geschichte */
.bp-story-in{display:grid;gap:24px}
.bp-story-stage{position:sticky;top:76px;z-index:2;height:min(48vh,420px);border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,rgba(var(--lir),.16),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(var(--cor),.13),transparent 60%),var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-2)}
.bp-prog{position:absolute;z-index:5;left:20px;right:20px;top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bp-prog i{height:4px;border-radius:4px;background:color-mix(in srgb,var(--text-3) 18%,transparent);overflow:hidden;position:relative}
.bp-prog i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cobalt),var(--bl2));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
[data-step="1"] .bp-prog i:nth-child(-n+1):after,[data-step="2"] .bp-prog i:nth-child(-n+2):after,[data-step="3"] .bp-prog i:nth-child(-n+3):after,[data-step="4"] .bp-prog i:after{transform:none}
.bp-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .55s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
[data-step="1"] .bp-s1,[data-step="2"] .bp-s2,[data-step="3"] .bp-s3,[data-step="4"] .bp-s4{opacity:1;transform:none}
.bp-scene .bp-phone.sm{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:auto;height:84%;aspect-ratio:600/1298}
.bp-sm{position:absolute;left:4%;bottom:0;height:62%;width:auto;filter:drop-shadow(0 16px 20px rgba(var(--blr),.3));transform:translateY(20%);transition:transform .7s cubic-bezier(.34,1.3,.64,1) .15s}
.bp-sm.r{left:auto;right:3%}
[data-step="1"] .bp-s1 .bp-sm,[data-step="2"] .bp-s2 .bp-sm,[data-step="3"] .bp-s3 .bp-sm,[data-step="4"] .bp-s4 .bp-sm{transform:none}
.bp-vf{position:relative;width:min(56%,300px);aspect-ratio:3/4;border-radius:22px;display:grid;place-items:center;background:color-mix(in srgb,var(--text) 6%,transparent)}
.bp-paper{width:62%;padding:14px;border-radius:6px;background:#fff;box-shadow:0 18px 30px -14px rgba(11,19,32,.4);transform:rotate(-4deg);display:grid;gap:6px}
.bp-paper b{font:700 11px/1.2 Space Grotesk,sans-serif;color:#1B2230;text-align:center;margin-bottom:4px}
.bp-paper i{display:block;height:5px;border-radius:3px;width:var(--w);background:#D5DAE3}
.bp-paper em{display:block;height:8px;border-radius:3px;width:46%;margin-left:auto;background:#1B2230;margin-top:4px}
.bp-corner{position:absolute;width:26px;height:26px;border:3px solid var(--bl);border-radius:4px}
.bp-corner.c1{left:10px;top:10px;border-right:0;border-bottom:0}.bp-corner.c2{right:10px;top:10px;border-left:0;border-bottom:0}
.bp-corner.c3{left:10px;bottom:10px;border-right:0;border-top:0}.bp-corner.c4{right:10px;bottom:10px;border-left:0;border-top:0}
.bp-flash{position:absolute;inset:0;border-radius:22px;background:#fff;opacity:0}
[data-step="1"] .bp-flash{animation:bp-flash 3.2s ease-out .4s infinite}
@keyframes bp-flash{0%,62%{opacity:0}66%{opacity:.95}100%{opacity:0}}
.bp-snap{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:linear-gradient(135deg,var(--bl),var(--bl2));color:#fff;font:700 .78rem/1 Space Grotesk,sans-serif;box-shadow:0 10px 20px -8px rgba(var(--blr),.6)}
[data-step="2"] .bp-chips.sm li{opacity:1;transform:none}
.bp-check{position:absolute;left:50%;top:22%;transform:translate(-50%,0) scale(.6);opacity:0;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:999px;
  background:#16A34A;color:#fff;font:700 .95rem/1 Space Grotesk,sans-serif;box-shadow:0 16px 30px -12px rgba(22,163,74,.6);transition:transform .6s cubic-bezier(.34,1.6,.64,1) .3s,opacity .3s .3s}
.bp-check svg{width:20px;height:20px}
[data-step="3"] .bp-check{opacity:1;transform:translate(-50%,0) scale(1)}
.bp-conf{position:absolute;left:50%;top:26%;width:0;height:0}
.bp-conf i{position:absolute;width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0}
[data-step="3"] .bp-conf i{animation:bp-conf 1.4s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.45s + var(--d))}
@keyframes bp-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(calc(var(--x)*1px),calc(var(--y)*1px + 60px)) rotate(240deg)}}
.bp-zip{position:absolute;left:30%;top:40%;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);
  font:700 .85rem/1 Space Grotesk,sans-serif;color:var(--text);opacity:0}
.bp-zip svg{width:20px;height:20px;color:var(--bl)}
[data-step="4"] .bp-zip{animation:bp-zip 3.6s cubic-bezier(.45,0,.2,1) .4s infinite}
@keyframes bp-zip{0%{opacity:0;transform:translate(0,10px) scale(.9)}15%{opacity:1;transform:none}65%{opacity:1;transform:translate(min(22vw,190px),-60px) scale(.8)}80%,100%{opacity:0;transform:translate(min(22vw,190px),-60px) scale(.6)}}
.bp-kanzlei{position:absolute;right:6%;top:18%;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:700 .82rem/1 Space Grotesk,sans-serif;color:var(--text);box-shadow:var(--sh-1)}
.bp-fm{position:absolute;left:4%;top:16%;display:grid;gap:6px}
.bp-fm span{padding:6px 11px;border-radius:999px;font:700 .74rem/1 Space Grotesk,sans-serif;color:var(--cobalt-ink);background:var(--cobalt-soft);border:1px solid color-mix(in srgb,var(--cobalt) 26%,transparent);
  opacity:0;transform:translateX(-12px);transition:opacity .4s,transform .5s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(.3s + var(--k)*.1s)}
[data-step="4"] .bp-fm span{opacity:1;transform:none}
.bp-steps{list-style:none;margin:0;padding:0;display:grid}
.bp-step{min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding:28px 0;opacity:.32;transition:opacity .45s}
.bp-step.is-on{opacity:1}
.bp-num{font:700 .82rem/1 Space Grotesk,sans-serif;letter-spacing:.14em;color:var(--bl);margin-bottom:12px}
[data-theme=dark] .bp-num{color:var(--bl3)}
.bp-step h3{font:700 clamp(1.6rem,3.2vw,2.4rem)/1.05 Space Grotesk,sans-serif;letter-spacing:-.02em;margin:0 0 12px}
.bp-step p{margin:0;max-width:44ch;color:var(--text-3);font-size:1.02rem;line-height:1.6}
@media(min-width:900px){
 .bp-story-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,70px);align-items:start}
 .bp-story-stage{top:calc(50vh - 260px);height:520px}
 .bp-step{min-height:72vh}
}
@media(max-width:899px){.bp-step{min-height:46vh}.bp-story-stage{top:68px}}

/* Bento */
.bp-grid8{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
@media(min-width:1000px){.bp-grid8{grid-template-columns:repeat(4,1fr)}.bp-card.bp-big{grid-column:span 2;grid-row:span 2}}
.bp-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 22px 18px;border-radius:var(--r-lg);color:inherit;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface) 66%,transparent));border:1px solid var(--line);
  box-shadow:var(--sh-1);transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.bp-card:hover{text-decoration:none;box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--bl) 35%,var(--line))}
.bp-card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.bp-card h3{font:700 1.12rem/1.2 Space Grotesk,sans-serif;margin:0;color:var(--text)}
.bp-card p{margin:0;color:var(--text-3);font-size:.93rem;line-height:1.55}
.bp-card .bp-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--cobalt),var(--bl2));box-shadow:0 10px 20px -10px rgba(var(--blr),.7)}
.bp-card .bp-ic svg{width:22px;height:22px}
.bp-ep{margin-top:auto;display:flex;align-items:center;gap:10px;font:600 .8rem/1.3 Space Grotesk,sans-serif;color:var(--cobalt-ink);padding-top:6px}
.bp-ep img{width:38px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:8px;box-shadow:var(--sh-1);transition:transform .4s cubic-bezier(.34,1.4,.64,1)}
.bp-ep span{display:inline-flex;align-items:center;gap:6px}
.bp-ep svg{width:11px;height:11px;flex:none}
.bp-card:hover .bp-ep img{transform:rotate(-4deg) scale(1.12)}
.bp-ep.none img{width:auto;height:64px;aspect-ratio:auto;border-radius:0;box-shadow:none}
.bp-big{padding:28px}
.bp-big h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.bp-big p{font-size:1rem;max-width:40ch}
.bp-big .bp-ep img{width:min(34%,150px);border-radius:16px}
.bp-big .bp-ep{align-items:flex-end;font-size:.9rem}
.bp-glare{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--lir),.16),transparent 55%)}
.bp-card:hover .bp-glare{opacity:1}

/* Folgen-Schiene */
.bp-arrows{display:none;gap:8px}
@media(min-width:900px){.bp-arrows{display:flex}}
.bp-arr{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--text);background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s}
.bp-arr:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}.bp-arr:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.bp-arr svg{width:16px;height:16px}
.bp-rail{list-style:none;margin:0;padding:6px 4px 18px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;overscroll-behavior-x:contain;scrollbar-width:thin}
.bp-rail:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:12px}
.bp-rail li{flex:0 0 clamp(170px,22vw,210px);scroll-snap-align:start}
.bp-epc{display:grid;gap:8px;color:inherit}
.bp-epc:hover{text-decoration:none}
.bp-epc img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:20px;box-shadow:var(--sh-2);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.bp-epc:hover img,.bp-epc:focus-visible img{transform:translateY(-6px);box-shadow:var(--sh-3)}
.bp-epc:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:20px}
.bp-epn{justify-self:start;font:700 .72rem/1 Space Grotesk,sans-serif;letter-spacing:.04em;color:#fff;background:var(--bl);padding:5px 9px;border-radius:999px}
.bp-epc b{font:700 .98rem/1.25 Space Grotesk,sans-serif}
.bp-more{margin:8px 0 0}

/* Werbespot */
.bp-spot{position:relative;isolation:isolate}
.bp-spot-in{position:relative;z-index:1;display:grid;gap:clamp(28px,5vw,60px);align-items:center}
@media(min-width:900px){.bp-spot-in{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.bp-spot-fig{margin:0;display:grid;place-items:center}
.bp-tr{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.bp-tr summary{cursor:pointer;font-weight:600;color:var(--cobalt-ink)}
.bp-tr div{max-height:300px;overflow:auto;margin-top:10px;font-size:.9rem;line-height:1.55;color:var(--text-2)}
.bp-tr p{margin:0 0 6px}

/* Wir sind unser erster Kunde */
.bp-self-in{display:grid;gap:30px;align-items:center;padding:clamp(26px,4vw,48px);border-radius:var(--r-xl);border:1px solid var(--line);
  background:linear-gradient(120deg,color-mix(in srgb,var(--cobalt) 7%,var(--surface)),color-mix(in srgb,var(--bl2) 9%,var(--surface)));box-shadow:var(--sh-2)}
@media(min-width:900px){.bp-self-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.bp-flow{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:30px 0 70px}
.bp-node{display:grid;justify-items:center;gap:8px;font:700 .82rem/1.2 Space Grotesk,sans-serif;text-align:center;max-width:120px}
.bp-node img{width:78px;height:78px;object-fit:contain;padding:12px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.bp-wire{position:relative;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--bl2),var(--cobalt));opacity:.85}
.bp-wire i{position:absolute;top:50%;left:0;width:12px;height:12px;margin-top:-6px;border-radius:3px;background:#fff;border:2px solid var(--bl);box-shadow:0 4px 10px rgba(var(--blr),.4);animation:bp-pkt 3.3s linear infinite;animation-delay:var(--d)}
.bp-wire em{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-style:normal;font-size:.75rem;color:var(--text-3);white-space:nowrap}
@keyframes bp-pkt{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(calc(var(--ww,220px) - 12px));opacity:0}}
.bp-sm.h{left:auto;right:-2%;bottom:-6px;height:96px;transform:none}

/* Zeitleiste */
.bp-tl{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.bp-tl:before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--cobalt),var(--bl2));border-radius:2px;transform:scaleY(0);transform-origin:top;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.bp-tl.is-in:before{transform:none}
.bp-tl li{position:relative;padding:4px 0 4px 40px}
.bp-tl li:before{content:"";position:absolute;left:4px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--bl);box-shadow:0 0 0 4px color-mix(in srgb,var(--bl) 14%,transparent)}
.bp-tl time{display:block;font:700 .8rem/1 Space Grotesk,sans-serif;letter-spacing:.08em;color:var(--cobalt-ink);margin-bottom:6px}
.bp-tl b{display:block;font:700 1.08rem/1.25 Space Grotesk,sans-serif;margin-bottom:4px}
.bp-tl p{margin:0;color:var(--text-3);font-size:.93rem;line-height:1.55;max-width:46ch}
@media(min-width:1000px){
 .bp-tl{grid-template-columns:repeat(4,1fr);gap:22px}
 .bp-tl:before{left:8px;right:8px;top:11px;bottom:auto;width:auto;height:2px;transform:scaleX(0);transform-origin:left}
 .bp-tl li{padding:40px 6px 0 0}.bp-tl li:before{top:4px}
}

/* Vertrauen */
.bp-tgrid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.bp-tgrid li{padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.bp-tgrid .bp-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--cobalt-ink);background:var(--cobalt-soft);margin-bottom:12px}
.bp-tgrid .bp-ic svg{width:21px;height:21px}
.bp-tgrid b{display:block;font:700 1.02rem/1.25 Space Grotesk,sans-serif;margin-bottom:6px}
.bp-tgrid p{margin:0;color:var(--text-3);font-size:.92rem;line-height:1.55}
.bp-disc{margin-top:18px;padding:16px 18px;border-radius:var(--r-md);background:color-mix(in srgb,var(--bl) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--bl) 18%,var(--line));font-size:.88rem;line-height:1.6;color:var(--text-2)}
.bp-disc p{margin:0 0 8px}.bp-disc p:last-child{margin:0}

/* Preise */
.bp-promo{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin:0 0 12px;padding:12px 16px;border-radius:var(--r-md);
  background:linear-gradient(110deg,color-mix(in srgb,var(--bl) 12%,var(--surface)),color-mix(in srgb,var(--bl2) 12%,var(--surface)));border:1px solid color-mix(in srgb,var(--bl) 26%,var(--line));font-size:.9rem;color:var(--text-2)}
.bp-promo[hidden]{display:none}
.bp-promo a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--cobalt-ink);white-space:nowrap}
.bp-promo a svg{width:14px;height:14px}
.bp-tiers{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.bp-tier{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.bp-tier.rec{border-color:transparent;box-shadow:0 0 0 2px var(--bl),var(--sh-2)}
.bp-rec{position:absolute;right:16px;top:-11px;padding:5px 10px;border-radius:999px;background:linear-gradient(135deg,var(--bl),var(--bl2));color:#fff;font:700 .72rem/1 Space Grotesk,sans-serif}
.bp-tn{font:700 1.1rem/1 Space Grotesk,sans-serif}
.bp-tp{margin:4px 0 0;display:flex;align-items:baseline;gap:6px}
.bp-tp span{font:700 2rem/1 Space Grotesk,sans-serif;letter-spacing:-.02em}
.bp-tp small{color:var(--text-3);font-size:.85rem}
.bp-ts{margin:0;color:var(--text-3);font-size:.84rem}
.bp-tier ul{list-style:none;margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:7px;font-size:.9rem;color:var(--text-2)}
.bp-tier ul li{position:relative;padding-left:22px}
.bp-tier ul li:before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:6px;border:solid var(--bl);border-width:0 0 2px 2px;transform:rotate(-45deg)}
[data-theme=dark] .bp-tier ul li:before{border-color:var(--bl3)}
.bp-pnote{margin-top:16px}
.bp-pnote a svg,.bp-more a svg{width:14px;height:14px}

/* FAQ */
.bp-faq-in{display:grid;gap:26px}
@media(min-width:900px){.bp-faq-in{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.bp-q{border-bottom:1px solid var(--line);padding:16px 0}
.bp-q summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:700 1.05rem/1.35 Space Grotesk,sans-serif}
.bp-q summary::-webkit-details-marker{display:none}
.bp-q summary:after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt-soft);color:var(--cobalt-ink);font-weight:700;transition:transform .3s}
.bp-q[open] summary:after{transform:rotate(45deg)}
.bp-q p{margin:10px 0 0;color:var(--text-3);line-height:1.6;max-width:62ch}

/* Schluss-Bühne */
.bp-end{position:relative;isolation:isolate;overflow:hidden;padding:clamp(60px,8vw,110px) 0 clamp(150px,18vw,230px);margin-top:clamp(20px,4vw,40px)}
.bp-end-in{position:relative;z-index:2;display:grid;gap:clamp(26px,5vw,60px);align-items:center}
@media(min-width:900px){.bp-end-in{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}}
.bp-pin{margin:0;justify-self:center;width:min(100%,300px)}
.bp-pin img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:var(--sh-3);transform:rotate(-3deg)}
@media(max-width:899px){.bp-pin{order:2;width:min(70%,260px)}}
.bp-end-copy .bp-cta{margin-bottom:12px}
.bp-head{position:absolute;z-index:1;left:50%;bottom:0;width:min(46vw,380px);transform:translate(-50%,72%);transition:transform 1.1s cubic-bezier(.34,1.25,.64,1)}
.bp-head.is-in{transform:translate(-50%,18%)}
.bp-head img{display:block;width:100%;height:auto;filter:drop-shadow(0 -10px 30px rgba(var(--blr),.35))}
.bp-head .w{position:absolute;inset:0;opacity:0}
.bp-head.wink .w{opacity:1}.bp-head.wink .o{opacity:0}
@media(min-width:900px){.bp-head{left:auto;right:6%;transform:translate(0,72%)}.bp-head.is-in{transform:translate(0,18%)}}

/* Ruhe: reduzierte Bewegung (System) und A2-Schalter „Bewegung anhalten“ */
@media(prefers-reduced-motion:reduce){
 .bp-aurora i,.bp-dot:after,.bp-scan,.bp-flash,.bp-zip,.bp-conf i,.bp-wire i{animation:none!important}
 .bp-rc{animation:none;opacity:1;transform:translateZ(80px) rotate(-6deg)}
 .bp-chips li{animation:none;opacity:1;transform:none}
 .bp-stage-in,.bp-card{transform:none!important}
 .bp-scene,.bp-step,.bp-prog i:after,.bp-head,.bp-tl:before{transition:none}
 .bp-zip{opacity:1}.bp-head{transform:translate(-50%,18%)}
}
html.a2-still .bp-aurora i,html.a2-still .bp-dot:after,html.a2-still .bp-scan,html.a2-still .bp-flash,html.a2-still .bp-zip,html.a2-still .bp-conf i,html.a2-still .bp-wire i{animation:none!important}
html.a2-still .bp-rc{animation:none;opacity:1;transform:translateZ(80px) rotate(-6deg)}
html.a2-still .bp-chips li{animation:none;opacity:1;transform:none}
html.a2-still .bp-stage-in,html.a2-still .bp-card{transform:none!important}
html.a2-still .bp-scene,html.a2-still .bp-step,html.a2-still .bp-head,html.a2-still .bp-tl:before{transition:none}
html.a2-still .bp-zip{opacity:1}
@media(prefers-reduced-motion:reduce){@media(min-width:900px){.bp-head{transform:translate(0,18%)}}}

/* Fixes nach Vorschau: Sticky braucht einen nicht-scrollenden body; Rail-Inhalte bleiben im Scroll-Container; Effekte über dem Handy */
body:has(.bp-main){overflow-x:clip}
.bp-rail{position:relative}
.bp-check,.bp-conf,.bp-zip,.bp-kanzlei,.bp-fm{z-index:4}
.bp-sm{z-index:3}
@media(min-width:1000px){.bp-tgrid{grid-template-columns:repeat(3,1fr)}}
/* Kontrast: inaktive Schritte nicht mehr per Deckkraft abdunkeln (WCAG 1.4.3), sondern nur Farbe zurücknehmen */
.bp-step{opacity:1;transition:color .45s}
.bp-step:not(.is-on) h3,.bp-step:not(.is-on) .bp-num{color:var(--text-3)}
.bp-step h3,.bp-step .bp-num{transition:color .45s}

/* Paket 110 – Darstellung nach Aykuts Handy-Fotos */
/* Hero: Handy richtet sich nach der Bühnenhöhe → ragt nicht mehr über Text/Knöpfe */
.bp-stage{min-height:clamp(500px,54vw,600px)}
.bp-stage-in{height:clamp(480px,50vw,580px)}
.bp-stage .bp-phone{width:auto;height:94%}
@media(max-width:560px){.bp-stage{margin-top:6px}.bp-rc{top:10%}.bp-chips{bottom:4%}}
/* Werbespot: Rahmen so hoch wie das Video (kein schwarzer Rest unten) */
.bp-phone.lg{aspect-ratio:auto;height:auto}
/* Scroll-Bühne: unter der schwebenden Navigation bleiben */
.bp-story-stage{top:96px}
@media(min-width:900px){.bp-story-stage{top:max(124px,calc(50vh - 260px))}}