/* Self-Service-Onboarding — Checkliste, Nav-Eintrag, Spotlight, Coach-Mark, Tooltips.
   Nutzt die base.html-Tokens → in Light UND Dark korrekt. */

/* --- Nav-Eintrag (Sidebar ist in beiden Themes dunkel) --- */
.ob-nav { background: rgba(203,96,121,.16); color:#fff; }
.ob-nav:hover { background: rgba(203,96,121,.26); color:#fff; }
.ob-nav-ring { width:24px; height:24px; flex:none; }
.ob-nav-ring svg { transform: rotate(-90deg); }
.ob-nav-ring .t { stroke: rgba(255,255,255,.2); fill:none; }
.ob-nav-ring .p { stroke:#cb6079; stroke-linecap:round; fill:none; }
.ob-nav-count { margin-left:auto; font-size:11px; font-weight:800; color:#e79aac; font-variant-numeric: tabular-nums; }

/* --- Checkliste --- */
.ob-card { background: var(--bg-surface); border:1px solid var(--border); border-radius:14px; margin-bottom:1.5rem; overflow:hidden; }
.ob-top { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--border); }
.ob-top h2 { margin:0; font-size:1.25rem; color: var(--text-strong); }
.ob-top p { margin:.15rem 0 0; font-size:.85rem; color: var(--text); }
.ob-ring { position:relative; width:56px; height:56px; flex:none; }
.ob-ring svg { transform: rotate(-90deg); }
.ob-ring .t { stroke: var(--border); fill:none; }
.ob-ring .p { stroke: var(--accent); stroke-linecap:round; fill:none; transition: stroke-dashoffset .5s; }
.ob-ring .l { position:absolute; inset:0; display:grid; place-items:center; font-size:.8rem; font-weight:800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ob-dismiss { margin-left:auto; align-self:flex-start; background:none; border:none; color: var(--text); font-size:1.25rem; cursor:pointer; line-height:1; }
.ob-hint { padding:.7rem 1.3rem 0; font-size:.78rem; color: var(--text); opacity:.7; }
.ob-steps { list-style:none; margin:0; padding:.5rem; }
.ob-step { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:.8rem; padding:.75rem .9rem; border-radius:10px; text-decoration:none; color:inherit; border:1px solid transparent; }
.ob-step:hover { background: var(--bg-hover); }
.ob-step.is-current { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ob-mark { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--border); color: var(--text); font-size:.7rem; font-weight:800; }
.ob-step.is-done .ob-mark { border-color: var(--badge-success-fg); color: var(--badge-success-fg); }
.ob-step.is-current .ob-mark { border-color: var(--accent); color: var(--accent); }
.ob-title { font-size:.92rem; font-weight:700; color: var(--text-strong); display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.ob-step.is-done .ob-title { color: var(--text); }
.ob-sub { font-size:.78rem; color: var(--text); opacity:.7; margin-top:.1rem; }
.ob-badge { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.1rem .45rem; border-radius:999px; }
.ob-badge.req { background: var(--badge-danger-bg, rgba(170,61,85,.14)); color: var(--badge-danger-fg, #93324a); }
.ob-badge.rec { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.ob-badge.opt { background: var(--bg-hover); color: var(--text); border:1px solid var(--border); }
.ob-go { font-size:.8rem; font-weight:700; color: var(--accent); white-space:nowrap; }
.ob-step.is-done .ob-go { color: var(--badge-success-fg); }

/* --- Spotlight + Coach-Mark (auf den Zielseiten) --- */
.ob-spot { position:relative; border-radius:9px; }
.ob-spot.on { box-shadow:0 0 0 3px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ob-spot.on { animation: obPulse 2s ease-in-out infinite; }
  @keyframes obPulse { 0%,100%{ box-shadow:0 0 0 3px var(--accent),0 0 0 7px color-mix(in srgb,var(--accent) 30%,transparent);} 50%{ box-shadow:0 0 0 3px var(--accent),0 0 0 12px color-mix(in srgb,var(--accent) 8%,transparent);} }
}
.ob-coach { margin-top:.8rem; background: var(--text-strong); color: var(--bg-surface); border-radius:12px; padding:1rem 1.1rem; max-width:400px; box-shadow:0 12px 32px -12px rgba(0,0,0,.4); }
.ob-coach .e { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; opacity:.6; }
.ob-coach p { margin:.35rem 0 .8rem; font-size:.85rem; line-height:1.5; }
.ob-coach-actions { display:flex; gap:.75rem; align-items:center; }
.ob-coach button.primary { background: var(--accent); color:#fff; border:none; border-radius:8px; padding:.5rem 1rem; font-weight:700; cursor:pointer; }
.ob-coach button.ghost { background:none; border:none; color: var(--bg-surface); opacity:.65; cursor:pointer; }

/* --- Tooltip (balloon-Stil, reines CSS) --- */
.ob-help { position:relative; display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; border:1.5px solid var(--text); color: var(--text); font-size:9px; font-weight:800; cursor:help; opacity:.7; }
.ob-help:hover, .ob-help:focus-visible { border-color: var(--accent); color: var(--accent); opacity:1; outline:none; }
.ob-help::after { content: attr(data-tip); position:absolute; left:50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: var(--text-strong); color: var(--bg-surface); font-size:12px; font-weight:500; line-height:1.4; padding:8px 11px; border-radius:8px; width:max-content; max-width:230px; text-align:left; opacity:0; pointer-events:none; transition:opacity .15s; box-shadow:0 8px 24px -10px rgba(0,0,0,.5); z-index:50; }
.ob-help:hover::after, .ob-help:focus-visible::after { opacity:1; }