/* Spotlight-Tour und Checkliste "Erste Schritte" (26.09.2026, static/js/tour.js).
   Nur Theme-Variablen aus style.css. */
body.tour-open{overflow:hidden;}
#tourRoot{position:fixed; inset:0; z-index:210;}
.tour-blocker{position:absolute; inset:0; background:transparent;}
.tour-blocker.dim{background:color-mix(in srgb, #000 55%, transparent);}
.tour-spot{
  position:fixed; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 3px var(--accent), 0 0 0 200vmax color-mix(in srgb, #000 55%, transparent);
  transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.tour-bubble{
  position:fixed; width:min(21rem, calc(100vw - 24px)); box-sizing:border-box;
  display:flex; flex-direction:column; gap:.55rem; padding:1rem 1.1rem 1rem;
  background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,.3);
  transition:left .25s ease, top .25s ease;
}
.tour-bubble h2{margin:0; font-size:1.2rem;}
.tour-bubble p{margin:0; line-height:1.45;}
.tour-head{display:flex; align-items:center; justify-content:space-between;}
.tour-count{font-size:.78rem; letter-spacing:.04em; color:var(--ink-muted);}
.tour-close{
  width:2rem; height:2rem; border-radius:50%; border:1px solid var(--border);
  background:transparent; color:var(--ink-muted); font-size:1.2rem; line-height:1; cursor:pointer;
}
.tour-close:hover{background:var(--surface-hover); color:var(--ink);}
.tour-dots{display:flex; gap:.3rem; margin-top:.1rem;}
.tour-dots span{width:.45rem; height:.45rem; border-radius:50%; background:var(--border);}
.tour-dots span.active{background:var(--accent); width:1.1rem; border-radius:99px;}
.tour-actions{display:flex; justify-content:space-between; gap:.6rem; margin-top:.3rem;}
.tour-actions .btn{min-height:2.6rem;}
.tour-bubble button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.tour-bubble-end{width:min(30rem, calc(100vw - 24px)); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; padding:1.3rem 1.4rem;}
.tour-bubble-end h2, .tour-bubble-end #tourText{text-align:center;}
.tour-end-hero{font-size:2.6rem; line-height:1; text-align:center;}
.tour-discover .dsc-suggest-title{text-align:left;}

@media (prefers-reduced-motion: reduce){ .tour-spot, .tour-bubble{transition:none;} }

/* ---------- Checkliste "Erste Schritte" ---------- */
.tour-checklist{
  margin:0 0 1.25rem; padding:1rem 1.2rem; border-radius:16px;
  background:var(--surface); color:var(--ink); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:.7rem; max-width:40rem;
}
.tour-cl-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;}
.tour-cl-head h2{margin:0; font-size:1.1rem;}
.tour-cl-sub{margin:.15rem 0 0; font-size:.85rem; color:var(--ink-muted);}
.tour-cl-hide, .tour-cl-tour{border:0; background:none; padding:.3rem 0; font:inherit; font-size:.85rem; cursor:pointer; color:var(--ink-muted);}
.tour-cl-hide:hover{color:var(--ink); text-decoration:underline;}
.tour-cl-tour{align-self:flex-start; color:var(--accent); font-weight:600;}
.tour-cl-tour:hover{text-decoration:underline;}
.tour-cl-bar{height:6px; border-radius:99px; background:var(--surface-hover); overflow:hidden;}
.tour-cl-bar span{display:block; height:100%; background:var(--accent); border-radius:inherit; transition:width .3s ease;}
.tour-cl-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem;}
.tour-cl-list li{display:flex; align-items:center; gap:.7rem; min-height:2.5rem;}
.tour-cl-list li.done{padding:0 .5rem; color:var(--ink-muted);}
.tour-cl-list li.done .tour-cl-label{text-decoration:line-through;}
.tour-cl-item{
  flex:1; display:flex; align-items:center; gap:.7rem; min-height:2.5rem; padding:.35rem .5rem;
  border:0; border-radius:10px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer;
}
.tour-cl-item:hover{background:var(--surface-hover);}
.tour-cl-item:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.tour-cl-check{
  flex:none; width:1.35rem; height:1.35rem; border-radius:50%; border:2px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
}
li.done .tour-cl-check{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.tour-cl-label{flex:1;}
.tour-cl-go{color:var(--accent); font-weight:700;}
@media (max-width: 600px){ .tour-checklist{padding:.9rem 1rem;} }

/* "Tour ansehen" im Konto-Menue: gleiche Optik wie die data-menu-section-Eintraege (style.css) */
.user-menu-item[data-tour-start]{display:flex; align-items:center; gap:.6rem;}
.user-menu-item[data-tour-start] .hicon{font-size:1.05rem; color:var(--accent-strong);}

/* Lilli fuehrt durch die Tour (27.09.2026, Bild aus static/js/help.js) */
.tour-lilli{display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:700;}
.tour-lilli img{width:36px; height:36px; border-radius:50%; object-fit:cover; background:#fff; border:2px solid var(--accent-soft);}
.tour-lilli .tour-count{font-weight:400; margin-left:.2rem;}
.tour-end-lilli{display:block; margin:0 auto; width:88px; height:88px; border-radius:50%; object-fit:cover; background:#fff; border:3px solid var(--accent-soft);}
/* Platz fuer Lilli ueber der Abschlusskarte */
body.lilli-sprite-on .tour-bubble-end{max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px);}