/* Tour-Player (app/static/tour.js). Eigene Klassen mit Praefix "tour-", unabhaengig vom Tailwind-Build. */
.tour-knopf {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 40px; height: 40px; border-radius: 9999px;
  background: #1e293b; color: #fff; border: 2px solid #fff; font-size: 20px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer;
}
.tour-knopf:hover, .tour-knopf:focus-visible { background: #2563eb; outline: 2px solid #93c5fd; outline-offset: 2px; }
.tour-schicht { position: fixed; inset: 0; z-index: 9000; }
.tour-ausschnitt {
  position: fixed; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .65); transition: top .2s, left .2s, width .2s, height .2s;
}
.tour-ausschnitt.tour-mitte { box-shadow: none; background: rgba(15, 23, 42, .65); inset: 0; width: auto; height: auto; border-radius: 0; }
.tour-blase {
  position: fixed; z-index: 9001; width: min(360px, calc(100vw - 24px)); background: #fff; color: #0f172a; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4); padding: 14px 16px; font-size: 14px; line-height: 1.45;
}
.tour-blase h2 { margin: 0 0 6px; padding-right: 28px; font-size: 16px; font-weight: 700; }
.tour-x {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 9999px; border: 0; background: transparent;
  color: #475569; font-size: 22px; line-height: 1; cursor: pointer;
}
.tour-x:hover, .tour-x:focus-visible { background: #f1f5f9; color: #0f172a; outline: 2px solid #93c5fd; }
/* Tour-Knopf nicht ueber der offenen Menue-Schublade und nicht waehrend einer Tour */
body.nav-offen .tour-knopf, body.tour-aktiv .tour-knopf { display: none; }
.tour-blase p { margin: 0 0 12px; }
.tour-fortschritt { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.tour-leiste { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.tour-leiste button { border: 1px solid #cbd5e1; background: #fff; color: #0f172a; border-radius: 6px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.tour-leiste button.tour-primaer { background: #2563eb; border-color: #2563eb; color: #fff; }
.tour-leiste button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.tour-leiste .tour-ende { margin-right: auto; border: 0; background: transparent; color: #475569; text-decoration: underline; padding-left: 0; }
@media (max-width: 639px) {
  .tour-blase { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-ausschnitt { transition: none; }
}