/* Logo-Animation (vom Kunden geliefert) */
.lvs{position:fixed;inset:0;z-index:100;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Cambria,Georgia,serif;transition:opacity .5s ease;cursor:pointer;overflow:hidden}
.lvs.out{opacity:0;pointer-events:none}
.lvs .lvs-logo{width:min(88vw,620px)!important;padding-bottom:min(53vw,373px)!important}
.lvs .lvs-logo{position:relative;width:88vw;max-width:880px;height:0;padding-bottom:min(53vw,530px)}
.lvs .lvs-logo img{position:absolute;inset:0;width:100%;height:100%}
.lvs .lvs-stage{animation:lvs-zoom 4.2s cubic-bezier(.2,.7,.2,1) forwards;transform:scale(1.12)}
@keyframes lvs-zoom{to{transform:scale(1)}}
.lvs .lvs-flare{position:absolute;left:50%;top:45%;width:120%;height:200%;transform:translate(-50%,-50%) scale(.2);border-radius:50%;
background:radial-gradient(circle,rgba(230,215,130,.55) 0%,rgba(230,215,130,.18) 35%,rgba(255,255,255,0) 65%);opacity:0;animation:lvs-flare 2.6s ease-out .1s forwards;pointer-events:none}
@keyframes lvs-flare{30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
.lvs .lvs-wglow{position:absolute;inset:0;animation:lvs-glow 2s ease-out .1s both}
.lvs .lvs-wreath{-webkit-clip-path:inset(100% 0 0 0);clip-path:inset(100% 0 0 0);animation:lvs-grow 1.4s cubic-bezier(.5,0,.2,1) .1s forwards}
@keyframes lvs-grow{to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
@keyframes lvs-glow{0%{filter:brightness(2.2) drop-shadow(0 0 30px rgba(240,220,120,1))}
60%{filter:brightness(1.6) drop-shadow(0 0 22px rgba(240,220,120,.9))}
100%{filter:brightness(1) drop-shadow(0 0 0 rgba(240,220,120,0))}}
.lvs .lvs-pin{transform-origin:42.8% 90.8%;opacity:0;animation:lvs-pop .7s cubic-bezier(.3,1.8,.5,1) 1.35s forwards}
@keyframes lvs-pop{0%{transform:translateY(-60%) scale(.3);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}
.lvs .lvs-ring{height:0;padding-bottom:4%;position:absolute;left:42.8%;top:90.8%;width:4%;border:3px solid #6A3881;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;animation:lvs-ring .9s ease-out 1.75s forwards}
@keyframes lvs-ring{0%{opacity:.8;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(9,2.2)}}
.lvs .lvs-text{-webkit-clip-path:inset(0 57.2% 0 42.8%);clip-path:inset(0 57.2% 0 42.8%);animation:lvs-out 1.1s cubic-bezier(.7,0,.2,1) 1.95s forwards}
@keyframes lvs-out{to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
.lvs .lvs-shine{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:var(--lvsplash-mask);mask-image:var(--lvsplash-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;
background:linear-gradient(105deg,transparent 40%,rgba(255,235,160,.95) 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:lvs-shine 1.1s ease-in-out 3.05s forwards}
@keyframes lvs-shine{to{background-position:-50% 0}}
.lvs .lvs-claim{margin-top:1.2em;letter-spacing:1.2em;font-weight:700;font-size:clamp(12px,2.4vw,22px);color:#1a1a1a;opacity:0;animation:lvs-fade 1.4s ease 2.9s forwards}
@keyframes lvs-fade{to{opacity:1;letter-spacing:.5em}}

.lvs .lvs-logo{width:min(88vw,620px);padding-bottom:min(53vw,373px)}
.lvs .lvs-claim{font-size:clamp(11px,2.4vw,18px)}
.lvs .lvs-skip{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));font:600 12px var(--f-body,system-ui);color:#8a8494;letter-spacing:.05em}

/* Vendi */
/* Tutorial-Overlay */
.tut{position:fixed;inset:0;z-index:80;background:rgba(24,16,30,.55);display:grid;place-items:end center;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@media (min-width:600px){.tut{place-items:center}}
.tutbox{width:100%;max-width:440px;background:var(--surface);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.tutbox .stage{height:150px;border-radius:16px;background:var(--gold-soft);display:grid;place-items:center;position:relative;overflow:hidden;border:2px solid var(--ink)}
.tutbox .stage .masc{width:104px;height:124px;animation:bob 1.8s ease-in-out infinite}
.tutbox .bubble{background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:12px 14px;font-size:15px;position:relative;font-weight:500}
.tutbox .bubble::before{content:"";position:absolute;top:-10px;left:40px;width:16px;height:16px;background:var(--surface);border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}
.tutbox h2{font:800 22px/1.15 var(--f-body);letter-spacing:-.01em}
.tdots{display:flex;gap:6px;justify-content:center}
.tdots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.tdots i.on{background:var(--accent);width:22px;border-radius:99px}
.tskip{position:absolute;top:12px;right:14px;all:unset;cursor:pointer;font-size:13px;font-weight:700;color:var(--muted)}
.props{position:absolute;inset:0;pointer-events:none}
.props span{position:absolute;font:800 13px var(--f-body);background:var(--surface);border:2px solid var(--ink);border-radius:10px;padding:3px 8px;animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.tutbox .btns.grow{display:flex;gap:8px}.tutbox .btns.grow .btn{flex:1}
.tutbox .stage .masc{display:block}