/* ═══════════════════════════════════════════════════════
   FEATURE 4: SPOILER-SYSTEM + LESELEITFADEN
   ═══════════════════════════════════════════════════════ */

/* Level buttons */
.guide-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.guide-level-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s;
  flex: 1;
  min-width: 100px;
  text-align: center;
}
.guide-level-btn:hover {
  border-color: var(--border2);
  color: var(--text-main);
}
.guide-level-btn.active {
  background: rgba(139,92,246,.12);
  border-color: var(--accent1);
  color: var(--accent1);
}

/* Content blocks */
.guide-content-block {
  display: none;
  animation: guideFadeIn .3s ease;
}
.guide-content-block.active {
  display: block;
}
@keyframes guideFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Steps */
.guide-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: border-color .2s;
}
.guide-step:hover {
  border-color: var(--border2);
}
.guide-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent1);
  margin-bottom: 6px;
}
.guide-step-title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}
.guide-step-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}
.guide-step-body strong {
  color: var(--text-main);
}
.guide-step-body a {
  color: var(--accent1);
  text-decoration: none;
}
.guide-step-body a:hover {
  text-decoration: underline;
}

/* Spoiler warning */
.guide-spoiler-warn {
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.25);
  border-left: 3px solid var(--accent3);
  padding: 14px 18px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.guide-spoiler-warn strong {
  color: var(--accent3);
}

/* Star highlights (Level 5) */
.guide-star {
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.2);
  border-left: 3px solid var(--accent4);
  padding: 16px 20px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}
.guide-star strong {
  color: var(--accent4);
}

@media (max-width: 640px) {
  .guide-level-btn { padding: 8px 10px; font-size: 10px; min-width: 70px; }
  .guide-step { padding: 16px; }
}