/* Geführte Tour + Knopf "Tour" in der Menüleiste */
.tour-trigger { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--card-border); border-radius: 999px; padding: 7px 12px; background: var(--inset-bg); color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; text-decoration: none; }
.nav-content a.tour-trigger { color: var(--text); font-weight: 400; }
.tour-trigger:hover, .tour-trigger:focus-visible { border-color: var(--accent); }
.tour-trigger-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: .7rem; font-weight: 700; line-height: 1; }
@media (max-width: 640px) { .tour-trigger { padding: 7px 9px; font-size: .78rem; } }

.tour-root { position: fixed; inset: 0; z-index: 6000; pointer-events: none; }
.tour-block { position: fixed; background: rgba(6, 10, 8, .74); pointer-events: auto; }
.tour-cover { position: fixed; pointer-events: auto; }
.tour-cover[hidden], .tour-ring[hidden] { display: none; }
.tour-ring { position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 32%, transparent); }
.tour-ring-tap { animation: tourPulse 1.5s ease-in-out infinite; }
.tour-ring-tap::after { content: "Hier tippen"; position: absolute; right: 8px; bottom: -14px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: .75rem; font-weight: 700; white-space: nowrap; }
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 32%, transparent); }
  50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 16px color-mix(in srgb, var(--accent) 10%, transparent); }
}

.tour-card { position: fixed; box-sizing: border-box; padding: 16px 18px 14px; background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); pointer-events: auto; max-height: calc(100vh - 24px); overflow-y: auto; }
.tour-card h2 { margin: 8px 0 6px; font-size: 1.15rem; line-height: 1.25; }
.tour-text { margin: 0 0 10px; color: var(--text-muted); font-size: .95rem; line-height: 1.5; }
.tour-hint { margin: 0 0 10px; color: var(--accent); font-size: .9rem; font-weight: 600; }
.tour-progress { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: .78rem; }
.tour-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--inset-bg); overflow: hidden; }
.tour-bar span { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tour-spacer { flex: 1; }
.tour-actions .btn { min-height: 38px; padding: 8px 16px; font-size: .9rem; }
.tour-actions [hidden] { display: none; }
.tour-skip { background: none; border: 0; padding: 8px 2px; color: var(--text-muted); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.tour-skip:hover, .tour-skip:focus-visible { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .tour-ring-tap { animation: none; }
  .tour-bar span { transition: none; }
}