/* ── LUMIZED Onboarding Tour ─────────────────────────────────────────────── */

.btn-tour       { background: rgba(200,168,75,0.07); color: var(--gold); border: 1px solid rgba(200,168,75,0.2); }
.btn-tour:hover { background: var(--gold); color: #000; opacity: 1; }

#tour-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.78);
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.35s ease;
  backdrop-filter: blur(5px);
}
#tour-overlay.tour-visible {
  opacity:        1;
  pointer-events: all;
}

#tour-modal {
  background:     #111;
  border:         1px solid rgba(255,255,255,0.1);
  border-radius:  18px;
  width:          100%;
  max-width:      660px;
  height:         min(690px, calc(100dvh - 2rem));
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  position:       relative;
  transition:     opacity 0.15s ease;
}
#tour-content {
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-height:     0;
}
#tour-content.tour-stepping { opacity: 0; }



/* Visual */
#tour-visual {
  width:        100%;
  aspect-ratio: 1200/860;
  overflow:     hidden;
  flex-shrink:  0;
  background:   #000;
}
#tour-visual img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}
#tour-visual video {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}

/* Body */
#tour-body {
  padding:    20px 28px 10px;
  flex:       1;
  min-height: 0;
  overflow:   hidden;
}

/* Section-Label */
#tour-section {
  font-size:      0.62rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--gold, #c8a84b);
  margin-bottom:  6px;
  font-family:    var(--font-main, sans-serif);
  opacity:        0.8;
}

#tour-title {
  font-size:      1.25rem;
  font-weight:    300;
  color:          #fff;
  letter-spacing: -0.01em;
  margin-bottom:  8px;
  line-height:    1.3;
  font-family:    var(--font-main, sans-serif);
}
#tour-text {
  font-size:      0.87rem;
  color:          rgba(255,255,255,0.55);
  line-height:    1.75;
  font-family:    var(--font-main, sans-serif);
  white-space:    pre-line;
}

/* Footer */
#tour-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 28px;
  padding-bottom:  calc(18px + env(safe-area-inset-bottom, 0px));
  gap:             12px;
  flex-shrink:     0;
}

/* Dots */
#tour-dots {
  display:     flex;
  flex-wrap:   wrap;
  gap:         5px;
  align-items: center;
  flex:        1;
}
.tour-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.18);
  border:        none;
  cursor:        pointer;
  padding:       0;
  transition:    background 0.2s, transform 0.2s;
}
.tour-dot--active {
  background: var(--gold, #c8a84b);
  transform:  scale(1.3);
}
.tour-dot:hover:not(.tour-dot--active) { background: rgba(255,255,255,0.4); }

/* Nav */
#tour-nav { display: flex; gap: 8px; align-items: center; }

#tour-skip {
  padding:       0.5rem 0;
  width:         calc(var(--text-ui, 0.78rem) + 1rem);
  text-align:    center;
  border-radius: 50%;
  flex-shrink:   0;
}

/* CTA-Override: letzter Step gold */
#tour-next.tour-cta             { background: var(--gold, #c8a84b); color: #000; font-weight: 500; opacity: 1; }
#tour-next.tour-cta:hover       { background: #d4b85c; opacity: 1; }

/* Mobile: Sheet von unten */
@media (max-width: 600px) {
  #tour-overlay { padding: 0; align-items: flex-end; }
  #tour-modal {
    border-radius: 20px 20px 0 0;
    max-width:     100%;
    max-height:    92dvh;
    border-bottom: none;
  }
#tour-body   { padding: 18px 20px 8px; }
  #tour-footer {
    padding:        12px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}