/* Geführte Tour (tour.js): abgedunkeltes Overlay mit Ausschnitt + Sprechblase.
   Der Ausschnitt entsteht über einen riesigen box-shadow um das Ziel-Rechteck —
   ein Element, keine vier Schattenflächen. */

.tour-licht {
  position: fixed; z-index: 300;
  border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events: auto;   /* Overlay fängt Klicks — Navigation nur über die Blase */
}

.tour-pop {
  position: fixed; z-index: 301;
  width: 380px; max-width: calc(100vw - 24px);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  padding: 14px 16px 12px;
}

.tour-pop-kopf { display: flex; align-items: flex-start; gap: 8px; }
.tour-pop-titel { flex: 1; font-size: 14px; font-weight: 600; }
.tour-pop-zu { border: none; background: transparent; color: var(--text-3);
  cursor: pointer; font-size: 13px; padding: 0 2px; }
.tour-pop-zu:hover { color: var(--text); }

.tour-pop-text { font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  margin: 8px 0 12px; }

.tour-pop-fuss { display: flex; align-items: center; }
.tour-pop-zaehler { flex: 1; font-size: 11px; color: var(--text-3); }
.tour-pop-knoepfe { display: flex; gap: 8px; }

/* Startknopf der Projektliste: gleiche Petrol-Umrandung wie .st-tour (kopf.css) */
.tour-start { color: var(--kkk-fg); border-color: var(--kkk-fg); }
.tour-start:hover { background: var(--kkk-bg); }

.tour-btn { border: 1px solid var(--rand); background: transparent; color: var(--text);
  font-size: 12px; padding: 5px 14px; border-radius: 6px; cursor: pointer; }
.tour-btn:hover { background: var(--hover); }
.tour-btn-primaer { background: var(--kkk-fg); border-color: var(--kkk-fg); color: #fff; }
.tour-btn-primaer:hover { filter: brightness(1.1); background: var(--kkk-fg); }