/* =====================================================================
   PrepP — Einführungs-Tour (js/tour.js): Abdunklung mit Spotlight-Loch
   und Erklärkarte.

   Hängt wie Feedback-Knopf und Speicherbanner am <body>, nicht in #app —
   route() baut #app bei jedem Wechsel neu, die Tour überlebt so die
   Navigation zwischen ihren Schritten. Benutzt die --pp-Tokens: Die
   liegen auf `body` (nicht auf .pp-root) und sind damit immer definiert.

   Einen eigenen Hilfe-Knopf gibt es seit dem Redesign R1 nicht mehr:
   Der „?" der Portal-Kopfzeile (#pp-help, app.js) öffnet die
   Tastaturhilfe, und dort steht der Neustart der Tour.

   ACHTUNG: bewusst KEINE Klasse .modal-bg/.pp-modal-bg — keynav.js
   verstummt unter .modal-bg, und die WASD-Demo der Tour braucht keynav
   wach (Begründung im Kopf von js/tour.js).
   ===================================================================== */

/* ---------- Overlay ----------
   Drei Lagen: Schild (fängt Klicks, hält die Tour vorhersagbar),
   Spotlight (transparentes Loch, der riesige box-shadow dunkelt den Rest
   ab) und Karte. Tastatur läuft am Schild vorbei — genau so erreicht die
   WASD-Demo keynav.js. z-index über Modal (150), Palette und
   Handoff/Labor-Dialogen (je 200). */
.pp-tour { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.pp-tour-shield { position: fixed; inset: 0; pointer-events: auto; }

.pp-tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(6, 8, 12, .62);
  outline: 2px solid var(--pp-accent);
  outline-offset: 0;
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
/* Schritt ohne Ziel (Willkommen): kein Loch, nur gleichmäßige Abdunklung. */
.pp-tour-spot.none {
  top: 50%; left: 50%; width: 0; height: 0;
  outline: none; border-radius: 0;
}

/* ---------- Erklärkarte ---------- */
.pp-tour-card {
  position: fixed; width: 360px; max-width: calc(100vw - 24px);
  background: var(--pp-surface); color: var(--pp-text);
  border: 1px solid var(--pp-line-2); border-radius: 12px;
  box-shadow: var(--pp-lift); padding: var(--pp-sp-4) 20px 14px;
  pointer-events: auto; outline: none;
  transition: top .28s ease, left .28s ease;
}
/* Zentriert — für Schritte ohne Zielelement. */
.pp-tour-card.mid {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: none;
}
.pp-tour-eyebrow {
  font-family: var(--pp-ui); font-size: var(--pp-fs-mini); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pp-accent-2);
  display: flex; justify-content: space-between; align-items: baseline;
}
.pp-tour-eyebrow .n { color: var(--pp-text-3); letter-spacing: .06em; }
.pp-tour-card h3 {
  /* --pp-serif gibt es seit dem Redesign „R1 Werkbank" nicht mehr
     (CLAUDE.md Abschnitt 6); der Aufruf stand hier seitdem ins Leere und
     fiel stumm auf die Vererbung zurueck. Am 13.08.2026 vom neuen
     Token-Test gefunden. */
  margin: 8px 0 6px; font-family: var(--pp-sans);
  font-size: var(--pp-fs-h1); font-weight: 600; line-height: var(--pp-lh-knapp);
}
.pp-tour-text { font-size: var(--pp-fs-text); line-height: var(--pp-lh-text); color: var(--pp-text-2); }
.pp-tour-text b { color: var(--pp-text); }
.pp-tour-text kbd {
  font-family: var(--pp-mono); font-size: var(--pp-fs-mini); padding: 1px 5px;
  border: 1px solid var(--pp-line-2); border-bottom-width: 2px;
  border-radius: 4px; background: var(--pp-surface-2); color: var(--pp-text);
}

.pp-tour-btns {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
}
.pp-tour-btns button {
  font-family: var(--pp-ui); font-size: var(--pp-fs-klein); font-weight: 600;
  border-radius: 8px; padding: 7px 13px; cursor: pointer;
  border: 1px solid var(--pp-line-2);
  background: var(--pp-surface-2); color: var(--pp-text);
}
.pp-tour-btns button:hover { border-color: var(--pp-accent-line); }
.pp-tour-btns .pp-tour-skip {
  border-color: transparent; background: none; color: var(--pp-text-3);
  padding-left: 0; margin-right: auto;
}
.pp-tour-btns .pp-tour-skip:hover { color: var(--pp-text); border-color: transparent; }
.pp-tour-btns .pp-tour-next {
  background: var(--pp-accent); border-color: var(--pp-accent);
  /* Q5 (05.09.2026): stand hart auf #16130c und kam damit im HELLEN Theme
     auf 4,00 : 1 — nach dem Heben der Tokens der letzte Text des Portals
     unter AA (gemessen an „Weiter →" auf vier Stationen des Abnahme-
     Rundgangs). --pp-accent-contrast ist das Token, das es dafuer gibt:
     6,80 dunkel, 4,63 hell. Es hebt zugleich die Erste-Schritte-Karte,
     die dieselbe Klasse benutzt. */
  color: var(--pp-accent-contrast);
}
.pp-tour-btns .pp-tour-next:hover { background: var(--pp-accent-2); }

/* ---------- Nebenaktionen im Spotlight sichtbar machen ----------
   .pp-actions (z. B. „Anschauen" in der Klausurzeile) erscheint sonst erst
   beim Überfahren — unter dem Schild gibt es aber kein :hover. Die Tour
   hängt der Zeile diese Klasse an, solange der Schritt sie zeigt. */
.pp-pick.pp-tour-reveal .pp-actions { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .pp-tour-spot, .pp-tour-card, .pp-tour-help { transition: none; }
}

/* =====================================================================
   Der Einrichtungs-Rundgang „Erste Schritte" (js/erste-schritte.js)

   Er benutzt dieselben Bausteine wie die Tour — eine zweite Karte mit
   eigenen Tokens wäre ein zweites Erscheinungsbild für dieselbe Sache.
   Zwei Unterschiede, und beide sind Absicht:

   1. KEIN SCHILD. Der Rundgang führt an Stellen, an denen der Nutzer
      selbst etwas tun soll; die Seite darunter muss bedienbar bleiben.
      .pp-es-tour rendert deshalb gar kein .pp-tour-shield — die Regel
      steht hier trotzdem, damit ein später ergänztes Schild nicht
      unbemerkt die Bedienung sperrt.
   2. EIN EIGENER KNOPF (.pp-es-tun) für „Einstellungen öffnen": Er ist
      die Handlung der Station und sieht deshalb aus wie „Weiter", ohne
      es zu sein — der Nutzer soll beide unterscheiden können.
   3. DIE AUFTRAGSZEILE (.pp-es-tu): der eine nächste Klick. Sie steht
      abgesetzt zwischen Erklärung und Knopfleiste, weil sie an vier
      Stationen die STELLE des „Weiter"-Knopfes einnimmt — dort gibt es
      keinen, weiter geht es allein durch die Handlung. Sie muss deshalb
      auffälliger sein als der Fließtext darüber.
   ===================================================================== */
.pp-es-tour .pp-tour-shield { pointer-events: none; }
.pp-tour-btns .pp-es-tun {
  border-color: var(--pp-accent-line);
  background: var(--pp-accent-tint); color: var(--pp-text);
}
.pp-tour-btns .pp-es-tun:hover { border-color: var(--pp-accent); }
.pp-es-tu {
  margin-top: 12px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--pp-accent-line); background: var(--pp-accent-tint);
  font-size: var(--pp-fs-text); line-height: var(--pp-lh-text); color: var(--pp-text);
}
.pp-es-tu b { font-weight: 600; }
/* Der ehrliche Satz, wenn das Ziel gerade nicht auf der Seite steht —
   Fließtext, keine Warnfarbe: Es ist kein Fehler, sondern eine Auskunft. */
.pp-es-fehlt {
  margin-top: 8px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); color: var(--pp-text-3);
}

/* ns0929-p6 (29.09.2026, Befund p1 #20): Die Knöpfe der Karte — Tour UND
   Erste Schritte teilen sie (die Karte des Rundgangs, nicht die mit K3-P12
   entfernte Startkarte) — waren 32 px hoch, auf dem Finger unter der
   Hausvorgabe von 44 px (R3). Nur ohne Zeiger (hover: none), der Mac
   bleibt pixelgleich. In der HÖHE, nicht in der Breite: Die Knöpfe stehen
   mit 8 px Abstand in einer Zeile, eine breitere Fläche überlappte den
   Nachbarn (die Falle vom 09.09.2026). */
@media (hover: none) {
  .pp-tour-btns button { min-height: 44px; }
}