/* Mercolutio Voice – Onboarding-Tour (Design G "Glut"). Nutzt die Tokens aus style.css.
   Mobil: Bottom-Sheet-Karte, Desktop: schwebende Karte mit Pfeil. Bewegung nur sanft, aus bei prefers-reduced-motion. */
.tour-root{position:fixed;inset:0;z-index:80;animation:tour-in .25s ease both}
.tour-root.out{opacity:0;transition:opacity .2s;pointer-events:none}
@keyframes tour-in{from{opacity:0}to{opacity:1}}
.tour-block{position:absolute;inset:0;background:transparent;transition:background .35s}
.tour-block.dim{background:var(--scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Spotlight: abgedunkelte Umgebung per Schatten, Ziel bleibt hell und sichtbar */
.tour-spot{position:absolute;left:0;top:0;pointer-events:none;border:2px solid var(--acc-line);
  box-shadow:0 0 0 100vmax rgba(4,3,6,.66),0 0 38px 2px var(--glow-soft);
  transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease)}
[data-theme=light] .tour-spot{box-shadow:0 0 0 100vmax rgba(30,20,12,.5),0 0 34px 2px var(--glow-soft)}
.tour-spot[hidden]{display:none}
.tour-spot::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:2px solid var(--acc);opacity:0;animation:tour-pulse 2.6s var(--ease) 1.2s infinite}
@keyframes tour-pulse{0%{opacity:.5;transform:scale(.985)}70%,100%{opacity:0;transform:scale(1.035)}}

/* Karte */
.tour-card{position:absolute;display:flex;flex-direction:column;outline:none;color:var(--text);
  background:linear-gradient(180deg,var(--card-hi),var(--card));border:1px solid var(--line2);box-shadow:0 30px 70px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset}
.tour-card.swap{animation:tour-swap .38s var(--ease) both}
@keyframes tour-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tour-prog{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--mut);letter-spacing:.01em}
.tour-bar{height:4px;border-radius:2px;background:var(--field);margin:12px 0 20px;overflow:hidden}
.tour-bar i{display:block;height:100%;width:100%;border-radius:2px;background:var(--acc-grad);transform-origin:left;transition:transform .5s var(--ease)}
.tour-bar.sm{margin:10px 0 6px}
.tour-body h2{margin:0 0 10px;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.03em}
.tour-body p{margin:0;color:var(--mut);font-size:15.5px;line-height:1.6}
.tour-body p a{color:var(--acc2);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tour-extra:not(:empty){margin-top:20px}
.tour-foot{display:flex;gap:12px;margin-top:24px}
.tour-btn{flex:1;min-height:52px;padding:0 22px;border-radius:26px;font-weight:700;font-size:15.5px;background:var(--field);border:1px solid var(--line2);transition:transform .25s var(--ease),box-shadow .3s}
.tour-btn.pri{background:var(--acc-grad);color:#fff;border-color:transparent;box-shadow:0 0 28px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.3)}
.tour-btn[hidden]{display:none}
.tour-btn:active{transform:scale(.96)}
.tour-btn:hover{transform:translateY(-1px)}
.tour-link{min-height:44px;padding:0 6px;font-size:13.5px;font-weight:700;color:var(--mut);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;transition:color .2s}
.tour-link:hover{color:var(--text)}
.tour-link[hidden]{display:none}
.tour-skip{display:flex;justify-content:center;margin-top:6px}
.tour-skip[hidden]{display:none}
.tour-card :focus-visible,.tour-card:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:12px}
.tour-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Checkliste (Abschluss-Schritt, Startseite, Hilfe) */
.tour-cl{list-style:none;margin:0;padding:0}
.tour-cl li{border-top:1px solid var(--line)}
.tour-cl li:first-child{border-top:0}
.tour-cl a,.tour-cl div{display:flex;align-items:center;gap:16px;padding:14px 0;min-height:56px}
.tour-cl a:hover .tour-clt b{color:var(--acc2)}
.tour-box{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;transition:background .35s,border-color .35s,transform .35s var(--ease)}
.tour-box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.tour-box.on{background:var(--ok);border-color:var(--ok);box-shadow:0 0 18px -4px var(--ok)}
.tour-box.on svg{animation:tour-draw .45s var(--ease) .1s forwards}
@keyframes tour-draw{to{stroke-dashoffset:0}}
.tour-clt{display:flex;flex-direction:column;min-width:0}
.tour-clt b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.tour-clt small{font-size:13px;color:var(--mut);line-height:1.4}
.tour-cl li.done .tour-clt b{color:var(--mut);text-decoration:line-through;text-decoration-color:var(--dim)}
.tour-clcard{margin-top:var(--sec);padding:24px var(--pad) 12px;border-radius:var(--r);background:var(--card-bg);border:1px solid var(--line2);box-shadow:var(--shadow)}
.tour-clcard .tour-link{margin-top:6px}
.tour-clhd{display:flex;align-items:baseline;justify-content:space-between}
.tour-clhd h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.03em}
.tour-clhd span{font-size:13.5px;font-weight:700;color:var(--acc2)}
#tourcl[hidden]{display:none}

/* Hilfe-Seite */
.tour-hl{list-style:none;margin:0;padding:0}
.tour-hs{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.tour-hs:first-child{border-top:0;padding-top:0}
.tour-hs:last-child{padding-bottom:0}
.tour-num{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:800;background:var(--glow-soft);border:1px solid var(--acc-line);color:var(--acc2)}
.tour-hs b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.tour-hs p{margin:4px 0 0;color:var(--mut);font-size:14.5px;line-height:1.6}
.tour-hs p a{color:var(--acc2);font-weight:700}

/* Mobil: Bottom-Sheet (Standard) */
.tour-card{left:0;right:0;bottom:0;margin:0 auto;width:100%;max-width:580px;padding:18px 22px calc(18px + env(safe-area-inset-bottom));border-radius:32px 32px 0 0;border-bottom:0;max-height:70dvh}
.tour-card::before{content:"";align-self:center;width:42px;height:4px;border-radius:2px;background:var(--line2);margin-bottom:12px;flex:none}
.tour-arrow{display:none}
.tour-card[data-mode=sheet][data-side=top] .tour-arrow{display:block;position:absolute;top:-8px;left:var(--ax,50%);width:16px;height:16px;margin-left:-8px;transform:rotate(45deg);background:var(--card-hi);border-left:1px solid var(--line2);border-top:1px solid var(--line2);border-radius:4px 0 0 0;transition:left .5s var(--ease)}
.tour-card[data-mode=sheet]::before{display:none}
body.tour-on .main{padding-bottom:calc(360px + env(safe-area-inset-bottom))}
body.tour-on .savebar,body.tour-on .tabbar{pointer-events:none}

/* Desktop: schwebende Karte mit Pfeil */
@media(min-width:821px){
  .tour-card{left:0;top:0;right:auto;bottom:auto;margin:0;width:380px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:24px 26px 18px;border-radius:28px;border-bottom:1px solid var(--line2);
    translate:var(--tx,0px) var(--ty,0px);transition:translate .5s var(--ease)}
  .tour-card::before{display:none}
  .tour-card.center,.tour-card[data-mode=center]{left:50%;top:50%;translate:-50% -50%;width:460px;padding:34px 36px 22px;transition:none}
  .tour-card.center .tour-body h2{font-size:26px}
  .tour-arrow{position:absolute;width:16px;height:16px;transform:rotate(45deg);background:var(--card-hi);border:1px solid var(--line2);transition:top .5s var(--ease),left .5s var(--ease)}
  .tour-card[data-mode=float][data-side=right] .tour-arrow{display:block;left:-9px;top:var(--ao);margin-top:-8px;border-right:0;border-top:0}
  .tour-card[data-mode=float][data-side=left] .tour-arrow{display:block;right:-9px;left:auto;top:var(--ao);margin-top:-8px;border-left:0;border-bottom:0}
  .tour-card[data-mode=float][data-side=bottom] .tour-arrow{display:block;top:-9px;left:var(--ao);margin-left:-8px;border-right:0;border-bottom:0}
  .tour-card[data-mode=float][data-side=top] .tour-arrow{display:block;bottom:-9px;top:auto;left:var(--ao);margin-left:-8px;border-left:0;border-top:0}
  body.tour-on .main{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){.tour-card{padding-left:18px;padding-right:18px}.tour-body h2{font-size:20px}.tour-body p{font-size:15px}}
@media(prefers-reduced-motion:reduce){
  .tour-root,.tour-root.out,.tour-card.swap,.tour-spot,.tour-bar i,.tour-box,.tour-block,.tour-arrow,.tour-card{animation:none!important;transition:none!important}
  .tour-spot::after{animation:none;display:none}
  .tour-box.on svg{animation:none;stroke-dashoffset:0}
}