/* ═══ ViCore — Interaktiver Einführungs-Rundgang (Spotlight-Tour, namespace vob-) ═══ */

/* Dimm-Panels (vier Rechtecke um das Zielelement) — blockieren Klicks außerhalb */
.vob-panel { position: fixed; background: rgba(9,22,16,.76); z-index: 9550; transition: left .2s, top .2s, width .2s, height .2s, opacity .2s; pointer-events: auto; }
.vob-panel.vob-hide { opacity: 0; pointer-events: none; }
/* Highlight-Rahmen um das Zielelement — kräftig, mit Glow + sanftem Pulsieren */
.vob-ring { position: fixed; z-index: 9560; border: 3px solid #F4C430; border-radius: var(--radius-lg); pointer-events: none;
  transition: left .2s cubic-bezier(.4,0,.2,1), top .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1), height .2s cubic-bezier(.4,0,.2,1);
  animation: vob-pulse 1.5s ease-in-out infinite; }
.vob-ring.vob-hide { opacity: 0; animation: none; }
@keyframes vob-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 8px rgba(244,196,48,.45), 0 0 26px 3px rgba(244,196,48,.5); }
  50%      { box-shadow: 0 0 0 3px rgba(255,255,255,1),   0 0 0 13px rgba(244,196,48,.65), 0 0 46px 10px rgba(244,196,48,.75); }
}

/* Sprechblase / Callout */
.vob-call { position: fixed; z-index: 9600; width: 350px; max-width: calc(100vw - 28px);
  background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: 0 18px 52px rgba(0,0,0,.34);
  padding: 15px 18px 14px; box-sizing: border-box; transition: left .2s, top .2s; animation: vob-pop .16s ease;
  font-family: var(--font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); }
@keyframes vob-pop { from { opacity: 0; transform: scale(.97); } }
.vob-call.vob-centered { width: 460px; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.vob-arrow { position: fixed; z-index: 9601; width: 13px; height: 13px; background: var(--color-surface); transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0,0,0,.04); transition: all .2s; }
.vob-arrow.vob-hide { display: none; }

.vc-head { display: flex; align-items: flex-start; gap: 12px; }
.vc-ico { flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--brand-secondary, #EDF7F2); color: var(--brand-primary, #0F5C42); font-size: var(--text-lg); }
.vc-htext { flex: 1; min-width: 0; }
.vc-lbl { font-size: var(--text-xxs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary, #147352); }
.vc-title { font-size: 16.5px; font-weight: 700; color: #16221B; margin-top: 1px; letter-spacing: -0.01em; line-height: 1.25; }
.vc-close { flex: none; border: none; background: transparent; font-size: 19px; line-height: 1; color: #9aa79f; cursor: pointer; padding: 2px 5px; border-radius: var(--radius-sm); }
.vc-close:hover { background: rgba(0,0,0,.05); color: #16221B; }
.vc-body { font-size: var(--text-md); line-height: 1.58; color: #2c3a31; margin-top: 9px; }
.vc-body b { color: #16221B; }
.vc-body ul { margin: 6px 0 8px; padding-left: 18px; }
.vc-body li { margin: 3px 0; }
.vc-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.vc-dots { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.vc-dot { width: 7px; height: 7px; border-radius: 50%; background: #d5ded8; cursor: pointer; transition: .15s; }
.vc-dot.on { background: var(--brand-primary, #147352); transform: scale(1.25); }

.vob-btn { font: inherit; font-weight: 600; border-radius: var(--radius-md); padding: 8px 15px; cursor: pointer; border: 1px solid transparent; font-size: var(--text-sm); }
.vob-btn-primary { background: var(--brand-primary, #0F5C42); color: var(--color-surface); }
.vob-btn-primary:hover { filter: brightness(1.1); }
.vob-btn-ghost { background: transparent; color: #6b7a70; }
.vob-btn-ghost:hover { background: rgba(0,0,0,.05); color: #16221B; }
.vc-skip { font-size: var(--text-xs); color: #93a19a; cursor: pointer; background: none; border: none; }
.vc-skip:hover { color: #6b7a70; text-decoration: underline; }

/* Inhalts-Bausteine im Body */
.vob-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 9px 0 3px; }
.vob-node { background: var(--brand-secondary, #EDF7F2); color: var(--brand-primary, #0F5C42); border-radius: var(--radius-sm); padding: 3px 8px; font-size: var(--text-xs); font-weight: 600; }
.vob-arrow-i { color: #9aa79f; font-weight: 700; }
.vob-tip { background: #f4f8f5; border-left: 3px solid var(--brand-primary, #147352); border-radius: 0 8px 8px 0; padding: 8px 11px; font-size: var(--text-xs); color: #3c4b42; margin: 8px 0 2px; }

/* Launcher-Zeile in den Einstellungen */
.set-onboarding-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* Hilfe & Support (Verwaltung → Hilfe & Support) */
.adm-help-hero { display: flex; gap: 20px; align-items: center; padding: 22px 24px; }
.adm-help-ic { flex: none; width: 54px; height: 54px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center;
  background: var(--brand-secondary, #EDF7F2); color: var(--brand-primary, #0F5C42); font-size: var(--text-2xl); }
.adm-help-hero-txt h3 { margin: 0 0 6px; font-size: var(--text-lg); }
.adm-help-hero-txt p { margin: 0 0 14px; color: var(--muted, #6b7a70); max-width: 680px; line-height: 1.55; }
.adm-help-grid { margin-top: 16px; }
.adm-tile.adm-help-soon { cursor: default; opacity: .68; }
.adm-tile.adm-help-soon:hover { transform: none; }

@media (max-width: 560px) { .vob-call { width: calc(100vw - 24px); } .vob-call.vob-centered { width: calc(100vw - 24px); } }