/* ═══════════════════════════════════════════════════════════════════════════
   EINSTEIGER-TOUR (v3.68) — Aussehen zu public/js/tour.js
   ───────────────────────────────────────────────────────────────────────────
   Nur Klassen mit dem Vorsatz .tour: Ohne laufende Tour gibt es kein solches
   Element, diese Regeln kosten die Seite also nichts (kein globaler
   Selektor, keine Animation im Leerlauf).
   · Abdunkeln per riesigem box-shadow um das Lichtfenster (.tour__loch):
     ein Element statt vier Balken, das Fenster bekommt Goldrand und Schein.
   · Karte: 340 px, Inter, Etikett in Versalien mit .04em; Handy: ganze
     Breite unten (oben, wenn das Ziel unten liegt), Safe-Area beachtet.
   · Uebergaenge nur transform/opacity (plus die Masse des Lichtfensters
     waehrend des Wechsels); reduzierte Bewegung: alles hart.
   ═══════════════════════════════════════════════════════════════════════════ */
.tour {
  position: fixed; inset: 0; z-index: 10050;
  opacity: 0;
  transition: opacity .25s var(--ease-out, ease-out);
}
.tour--an { opacity: 1 }
.tour__loch {
  position: fixed; left: 0; top: 0;
  width: 0; height: 0;
  border-radius: 12px;
  box-shadow:
    0 0 0 2px rgba(245,196,106,.95),
    0 0 26px 6px rgba(245,196,106,.35),
    0 0 0 200vmax rgba(6,8,14,.76);
  pointer-events: none;
  transition: transform .32s var(--ease-out, ease-out), width .32s var(--ease-out, ease-out), height .32s var(--ease-out, ease-out);
}
/* Ohne Ziel (Begruessung): kein Rand, nur das Abdunkeln. */
.tour__loch--leer { box-shadow: 0 0 0 200vmax rgba(6,8,14,.8) }

.tour__karte {
  position: fixed; left: 50%; top: 50%;
  width: 340px; max-width: calc(100vw - 24px);
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #1c2029, #14171d);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--text, #edebf7);
  font-family: var(--font-disp, 'Inter', system-ui, sans-serif);
  outline: none;
}
.tour__karte--neu { animation: tour-karte .28s var(--ease-out, ease-out) both }
@keyframes tour-karte { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.tour__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px }
.tour__schritt {
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--gold, #f3c15f);
}
.tour__skip {
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: var(--t-knopf-klein);
  letter-spacing: var(--ls-knopf);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #8e8ca6);
  cursor: pointer;
}
.tour__skip:hover { color: var(--text, #edebf7); background: rgba(255,255,255,.06) }
.tour__titel { margin: 0 0 6px; font: var(--t-karte); color: #fff }
.tour__text { margin: 0; font: var(--t-text); color: var(--text-2, #b6b3cc) }
.tour__extra:empty { display: none }
.tour__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px }
.tour__discord { text-decoration: none }
.tour__link {
  padding: 4px 0;
  border: 0;
  background: none;
  font: var(--t-zeile);
  color: var(--gold, #f3c15f);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tour__fuss { display: flex; align-items: center; gap: 8px; margin-top: 16px }
.tour__punkte { display: flex; gap: 6px; margin-right: auto }
.tour__punkt { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); transition: transform .2s, background .2s }
.tour__punkt--fertig { background: rgba(245,196,106,.5) }
.tour__punkt--an { background: var(--gold, #f3c15f); transform: scale(1.3) }
.tour__zurueck[hidden] { display: none }
/* Zurueck leise: ein Rahmen statt grauer Flaeche, Next bleibt die Handlung. */
.tour__fuss .tour__zurueck { background: none; border: 1px solid rgba(255,255,255,.14); color: var(--text-2, #b6b3cc); box-shadow: none }
.tour__fuss .tour__zurueck:hover { border-color: rgba(255,255,255,.3); color: var(--text, #edebf7) }
.tour__fuss .btn { min-height: 40px; padding: 8px 16px }
.tour__karte :focus-visible { outline: 2px solid var(--gold, #f3c15f); outline-offset: 2px }

/* Handy: Karte ueber die ganze Breite, unten (oder oben), Safe-Area. */
.tour__karte--handy {
  left: 12px; right: 12px; top: auto;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: none;
}
.tour__karte--handy.tour__karte--oben { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto }
.tour__karte--handy .tour__fuss .btn { min-height: 44px }

/* Neustart-Knopf im Kopf von Help & FAQ. */
.tour-neustart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--text-2, #b6b3cc) }
.tour-neustart .btn { display: inline-flex; align-items: center; gap: 6px }

/* Reduzierte Bewegung: keine Einblendung, das Lichtfenster springt. */
.tour--still, .tour--still .tour__loch, .tour--still .tour__punkt { transition: none }
.tour--still .tour__karte--neu { animation: none }
html.reduziert .tour, html.reduziert .tour__loch, html.reduziert .tour__punkt { transition: none }
html.reduziert .tour__karte--neu { animation: none }
@media (prefers-reduced-motion: reduce) {
  .tour, .tour__loch, .tour__punkt { transition: none }
  .tour__karte--neu { animation: none }
}