/* Claude 04.10.2026 (Etappe 63): „Was kann <Avatar>?“-Tour (tour.mjs) – Fenster mit Karten und der kleine Hinweis im Gespräch.
   Nur Theme-Variablen (siehe themes.css) und Klassen, keine festen Farben und keine Inline-Styles (CSP). */

/* Hinweis im Gespräch: schmal, schliessbar, nimmt der Bühne nichts weg */
.tour-offer{position:relative;display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:12px 44px 12px 14px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:var(--theme-radius,18px);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));color:var(--text)}
.tour-offer[hidden]{display:none}
.tour-offer-text{margin:0;font-size:13.5px;line-height:1.45}
.tour-offer-actions{display:flex;flex-wrap:wrap;gap:8px}
.tour-offer-start,.tour-offer-later{min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
/* Claude 04.10.2026 (Etappe 66, A-083): Schrift auf dem Akzent in der lesbaren Akzent-Tinte (var(--bg) erreichte in hellen Vorlagen nur 3.9:1) */
.tour-offer-start{border-color:transparent;background:var(--accent);color:var(--theme-accent-ink,var(--bg));font-weight:650}
.tour-offer-close{position:absolute;top:4px;right:4px;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--muted);font:inherit;font-size:22px;line-height:1;cursor:pointer}

/* Fenster */
dialog.tour-dialog{width:min(520px,calc(100vw - 24px));max-height:min(88dvh,680px);margin:max(12px,env(safe-area-inset-top)) auto auto;padding:0;border:1px solid var(--line);border-radius:22px;background:var(--theme-dialog,var(--surface));color:var(--text);overflow:hidden}
dialog.tour-dialog[open]{display:flex;flex-direction:column}
dialog.tour-dialog::backdrop{background:var(--theme-backdrop,rgba(2,7,18,.74));backdrop-filter:blur(8px)}
.tour-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 6px}
.tour-title{margin:0;font-size:18px;font-weight:650;letter-spacing:-.2px;overflow-wrap:anywhere}
.tour-close{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.tour-progress{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px 8px}
.tour-dots{display:flex;flex-wrap:wrap;gap:2px}
.tour-dot{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.tour-dot::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--line)}
.tour-dot.active::after{width:18px;margin-left:-9px;border-radius:999px;background:var(--accent)}
.tour-count{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* Karte */
.tour-card{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 12px;padding:14px;border:1px solid var(--line);border-radius:var(--theme-radius,18px);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface))}
.tour-card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tour-icon-wrap{display:inline-flex;flex:0 0 auto}
.tour-icon{width:42px;height:42px;padding:9px;box-sizing:border-box;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tour-card-title{margin:0;font-size:16px;font-weight:650;line-height:1.25;overflow-wrap:anywhere}
.tour-quote{margin:0 0 10px;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.tour-example{margin:0;padding:10px 12px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--accent) 9%,transparent)}
.tour-example[hidden]{display:none}
.tour-example-label{display:block;margin-bottom:4px;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tour-example-text{display:block;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.tour-example-text::before,.tour-example-text::after{content:none}

/* Knöpfe */
.tour-try{margin:12px 12px 0;min-height:48px;padding:10px 16px;border:0;border-radius:14px;background:var(--accent);color:var(--bg);font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.tour-hint{display:block;margin:6px 16px 0;font-size:11.5px;line-height:1.4;color:var(--muted)}
.tour-foot{display:flex;justify-content:space-between;gap:8px;padding:10px 12px 14px}
.tour-nav{min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.tour-nav[hidden]{display:none}
.tour-next{margin-left:auto}
.tour-try:focus-visible,.tour-nav:focus-visible,.tour-dot:focus-visible,.tour-close:focus-visible,.tour-offer button:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px var(--accent)}

@media (max-width:360px){.tour-quote{font-size:14px}.tour-card{padding:12px}}
@media (prefers-reduced-motion:reduce){.tour-dot::after{transition:none}}