/* Geführte Tour (static/js/tour.js, Schritte aus components/tour.html): Spotlight dunkelt alles außer dem Ziel ab,
   die Sprechblase gleitet mit dem Spotlight zum nächsten Schritt. Markenfarbe 2job-Blau. */
.tour-layer { position: fixed; inset: 0; z-index: 90; opacity: 0; transition: opacity .25s ease-out; }
.tour-layer.is-on { opacity: 1; }
.tour-block { position: absolute; inset: 0; }
.tour-spot { position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px #2563eb, 0 0 0 9999px rgba(15, 23, 42, .6);
  transition: left .45s cubic-bezier(.22, .8, .3, 1), top .45s cubic-bezier(.22, .8, .3, 1),
              width .45s cubic-bezier(.22, .8, .3, 1), height .45s cubic-bezier(.22, .8, .3, 1); }
.tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid #60a5fa;
  animation: tour-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.tour-bubble { position: fixed; width: 330px; max-width: calc(100vw - 24px); padding: 14px 16px; border-radius: 18px;
  background: #fff; color: #334155; border: 1px solid #e2e8f0; box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
  transition: left .45s cubic-bezier(.22, .8, .3, 1), top .45s cubic-bezier(.22, .8, .3, 1); outline: none; }
html.dark .tour-bubble { background: #0f172a; color: #cbd5e1; border-color: #334155; }
.tour-bubble.is-sheet { width: auto; right: 12px; }
.tour-arrow { position: absolute; width: 12px; height: 12px; background: inherit; border: inherit; display: none; transform: rotate(45deg); }
.tour-arrow.is-right { display: block; left: -7px; border-top-color: transparent; border-right-color: transparent; }
.tour-arrow.is-left { display: block; right: -7px; border-bottom-color: transparent; border-left-color: transparent; }
.tour-arrow.is-bottom { display: block; top: -7px; border-bottom-color: transparent; border-right-color: transparent; }
.tour-arrow.is-top { display: block; bottom: -7px; border-top-color: transparent; border-left-color: transparent; }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: #2563eb; }
html.dark .tour-head { color: #60a5fa; }
.tour-x { width: 30px; height: 30px; margin: -5px -7px -5px 0; border-radius: 9999px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; background: transparent; border: 0; }
.tour-x svg { width: 20px; height: 20px; }
.tour-x:hover { background: #f1f5f9; }
html.dark .tour-x:hover { background: #1e293b; }
.tour-title { margin: .35rem 0 .25rem; font-size: 1.05rem; font-weight: 900; line-height: 1.3; color: #0f172a; }
html.dark .tour-title { color: #fff; }
.tour-text { margin: 0; font-size: .875rem; line-height: 1.55; }
.tour-body.tour-in { animation: tour-in .3s ease-out; }
.tour-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: .85rem 0 .75rem; }
.tour-dots span { width: 6px; height: 6px; border-radius: 9999px; background: #cbd5e1; transition: width .3s, background .3s; }
.tour-dots span.is-done { background: #93c5fd; }
.tour-dots span.is-active { width: 18px; background: #2563eb; }
html.dark .tour-dots span { background: #334155; }
html.dark .tour-dots span.is-done { background: #1e40af; }
html.dark .tour-dots span.is-active { background: #3b82f6; }
.tour-foot { display: flex; justify-content: flex-end; gap: .5rem; }
.tour-foot [hidden] { display: none; }

.tour-btn { display: inline-flex; align-items: center; justify-content: center; padding: .45rem .95rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 700; line-height: 1.25rem; cursor: pointer; transition: background-color .15s, border-color .15s; }
.tour-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.tour-btn-primary { background: #2563eb; color: #fff; border: 1px solid #2563eb; }
.tour-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.tour-btn-ghost { background: transparent; color: #334155; border: 1px solid #cbd5e1; }
.tour-btn-ghost:hover { background: #f8fafc; }
html.dark .tour-btn-ghost { color: #e2e8f0; border-color: #475569; }
html.dark .tour-btn-ghost:hover { background: #1e293b; }

.tour-offer-wrap { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: tour-fade .25s ease-out; }
.tour-offer { width: 100%; max-width: 24rem; padding: 1.75rem 1.5rem 1.5rem; border-radius: 22px; text-align: center;
  background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  animation: tour-offer-in .4s cubic-bezier(.22, .8, .3, 1); }
html.dark .tour-offer { background: #0f172a; border-color: #334155; }
.tour-offer-icon { width: 3.75rem; height: 3.75rem; margin: 0 auto 1rem; border-radius: 18px; display: flex; align-items: center;
  justify-content: center; background: #eff6ff; border: 1px solid #dbeafe; }
.tour-offer-icon svg { width: 34px; height: 34px; }
html.dark .tour-offer-icon { background: rgba(37, 99, 235, .18); border-color: rgba(96, 165, 250, .35); }
.tour-offer-title { margin: 0; font-size: 1.3rem; font-weight: 900; color: #0f172a; }
html.dark .tour-offer-title { color: #fff; }
.tour-offer-text { margin: .45rem 0 0; font-size: .875rem; line-height: 1.55; color: #475569; }
html.dark .tour-offer-text { color: #cbd5e1; }
.tour-offer-row { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }

@keyframes tour-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tour-offer-in { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tour-ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.05); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tour-layer, .tour-spot, .tour-bubble, .tour-dots span { transition: none; }
  .tour-spot::after, .tour-body.tour-in, .tour-offer, .tour-offer-wrap { animation: none; }
}
@media print { .tour-layer, .tour-offer-wrap { display: none !important; } }