/* ============================================================
   tour.css — Geführter Rundgang (js/lib/tour.js)

   Aufbau: Über der echten App liegt eine dunkle Schicht. Ein Loch
   darin (.tour-spot) lässt genau den erklärten Bereich stehen –
   erzeugt nicht durch Ausschneiden, sondern durch einen riesigen
   box-shadow AUSSERHALB des Kästchens. Dadurch braucht es weder
   Canvas noch clip-path, und das Loch lässt sich weich animieren.

   Kopf- und Fußleiste sitzen fest: Der Daumen findet „Weiter“
   immer an derselben Stelle, egal wohin der Spot springt. Die
   Sprechblase bewegt sich dazwischen.
   ============================================================ */

/* ---------- Gastgeber: die Vorführung über der echten App ---------- */
/* Deckt die App vollständig zu, statt sie zu verstecken. Ein .hide auf
   #app-main hätte die Navigationsleiste auf Breite 0 gemessen zurück-
   gelassen – movePill() bricht dann ab und der Fando-Strich fehlt nach
   dem Rundgang. Hintergrund in --bg, damit beim Laden des iframes kein
   weißes Blitzen entsteht. */
.tour-host {
  position: fixed; inset: 0;
  z-index: var(--z-tour);
  background: var(--bg);
  animation: fade-in var(--dur-3) ease both;
}
.tour-host.weg { animation: fade-in var(--dur-2) ease reverse both; }
.tour-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.tour-host-lade {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; text-align: center;
  background: var(--bg);
}
.tour-host-lade[hidden] { display: none; }

/* ---------- Motor: die Führung selbst ---------- */

.tour {
  position: fixed; inset: 0;
  z-index: var(--z-tour);
  /* Die Schicht selbst fängt nichts ab – das erledigt .tour-catch.
     So bleiben Kopf, Fuß und Blase bedienbar. */
  pointer-events: none;
  animation: fade-in var(--dur-3) ease both;
}
.tour.leaving { animation: fade-in var(--dur-2) ease reverse both; }

/* Schluckt jeden Tipp auf die App darunter: Der Rundgang führt selbst,
   nichts soll versehentlich ausgelöst werden. Vier Streifen, deren Lage
   js/lib/tour.js setzt (setzeSperre) – zusammen decken sie den ganzen
   Bildschirm, beim Ausprobier-Schritt lassen sie genau eine Schaltfläche
   frei. Ein echtes Loch kennt CSS nicht. */
.tour-catch { position: absolute; pointer-events: auto; }

/* ---------- Der Lichtkegel ---------- */

.tour-spot {
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 9999px rgba(35, 37, 37, 0.74);
  pointer-events: none;
  transition: transform var(--dur-4) var(--ease-out),
              width var(--dur-4) var(--ease-out),
              height var(--dur-4) var(--ease-out),
              border-radius var(--dur-3) var(--ease-out);
}
/* Feine helle Kante am Loch, damit der Ausschnitt gewollt wirkt
   und nicht wie ein Darstellungsfehler. */
.tour-spot::after {
  content: ''; position: absolute; inset: -2px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: inherit;
  animation: tour-breathe 2.4s var(--ease-in-out) infinite;
}

/* Schritte ohne Ziel (Begrüßung, Abschluss): gleichmäßig dunkel. */
.tour-fill {
  position: absolute; inset: 0;
  background: rgba(35, 37, 37, 0.74);
  pointer-events: none;
  animation: fade-in var(--dur-3) ease both;
}

@keyframes tour-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(1.035); }
}

/* ---------- Bedienleiste (unten) ----------
   ALLES vom Rundgang sitzt unten: Fortschritt, Kapitel, Überspringen,
   Zurück/Weiter. Anfangs stand die Hälfte davon oben – und lag damit
   genau auf dem App-Header, den der Rundgang selbst erklärt (Palmen-
   Konto, Zeitraum-Symbol). Unten kollidiert nichts, der obere
   Bildschirmrand bleibt für den Lichtkegel frei, und der Daumen
   findet „Weiter“ immer an derselben Stelle. */

.tour-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 16px calc(var(--safe-bottom) + 14px);
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 10px;
  /* Der Verlauf sitzt direkt auf der Leiste und nicht auf einem
     ::before mit negativem z-index – dort läge er HINTER dem Schleier,
     den der Lichtkegel per box-shadow wirft, und wäre wirkungslos. */
  background: linear-gradient(to top,
    rgba(35, 37, 37, 0.97) 0%, rgba(35, 37, 37, 0.9) 52%, rgba(35, 37, 37, 0) 100%);
}
.tour-bar > * { max-width: var(--app-max); width: 100%; margin: 0 auto; }

.tour-track {
  height: 3px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.tour-track i {
  display: block; height: 100%;
  border-radius: inherit;
  background: var(--fando-300);
  transition: width var(--dur-4) var(--ease-out);
}

.tour-trow { display: flex; align-items: center; gap: 8px; }
.tour-chapter {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.tour-count {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-num);
}
.tour-skip {
  margin-left: auto;
  background: none; color: rgba(255, 255, 255, 0.65);
  border: 0; padding: 4px 2px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  font-family: inherit; cursor: pointer;
}
.tour-skip:active { color: #fff; }
.tour-skip[hidden] { display: none; }

.tour-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- Sprechblase ---------- */

.tour-bubble {
  position: absolute;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: 16px 18px;
  pointer-events: auto;
}
/* Auftritt nur beim echten Schrittwechsel – das Nachführen (alle 300 ms)
   setzt die Blase ebenfalls, dürfte sie aber nicht ständig neu einblenden. */
.tour-bubble.auf { animation: tour-pop var(--dur-3) var(--ease-out) both; }
.tour-bubble .h {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-snug);
}
.tour-bubble .t {
  margin-top: 6px;
  font-size: var(--fs-sm); line-height: 1.55;
  color: var(--text-muted);
}
.tour-bubble .t b { color: var(--text); font-weight: var(--fw-semibold); }

/* Kleines Dreieck zum Lichtkegel hin – die Blase erklärt sichtbar DAS DA. */
.tour-bubble::before {
  content: ''; position: absolute;
  left: var(--ax, 50%); width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
}
.tour-bubble.below::before {
  top: -8px; margin-left: -9px;
  border-bottom: 9px solid var(--surface);
}
.tour-bubble.above::before {
  bottom: -8px; margin-left: -9px;
  border-top: 9px solid var(--surface);
}
.tour-bubble.free::before { display: none; }

@keyframes tour-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.tour-back {
  background: rgba(255, 255, 255, 0.16);
  color: #fff; border: 0;
  border-radius: var(--r-pill);
  padding: 0 18px; min-height: 48px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.tour-back:active { background: rgba(255, 255, 255, 0.24); }
.tour-back[hidden] { display: none; }
.tour-next {
  flex: 1;
  background: var(--fando); color: #fff; border: 0;
  border-radius: var(--r-pill);
  min-height: 48px;
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-md);
}
.tour-next:active { background: var(--fando-600); transform: scale(0.985); }

/* ---------- Ruhigere Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .tour, .tour-bubble.auf, .tour-fill { animation: none; }
  .tour-spot { transition: none; }
  .tour-spot::after { animation: none; opacity: 0.8; }
}