/* Luna Lernapp Schnupper-Demo - Zusatz-Stile */

.demo-weg { display: none !important; }
[data-thema="zoo"] { display: none !important; }

/* Demo-Band unten */
#demo-band {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: linear-gradient(90deg, #7b4fc9, #e0679a);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 14px;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  box-shadow: 0 -3px 12px rgba(90, 74, 106, 0.35);
}
#demo-band a { color: #ffe9a8; text-decoration: underline; }
#demo-band a#demo-beenden {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
}
body { padding-bottom: 46px; }

/* Intro-Overlay */
#demo-intro {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(60, 40, 90, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
#demo-intro-karte {
  background: #fff7fb;
  border-radius: 22px;
  padding: clamp(14px, 3vw, 26px);
  width: min(560px, 100%);
  text-align: center;
  box-shadow: 0 14px 44px rgba(40, 20, 70, 0.45);
}
#demo-intro-titel { color: #7b4fc9; margin: 0 0 6px; font-size: clamp(1.15rem, 3vw, 1.5rem); }
#demo-intro-text { font-weight: 700; color: #5a4a6a; min-height: 2.4em; }
#demo-intro-buehne { margin: 10px auto; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
#demo-intro-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* Folge 1: Quiz-Karte */
.demo-quizkarte { background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 4px 0 rgba(90,74,106,0.12); }
.demo-frage { font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.demo-antworten { display: flex; gap: 8px; justify-content: center; }
.demo-antworten button {
  min-width: 64px; min-height: 44px; border-radius: 12px; background: #f3ecff;
  font-weight: 800; font-size: 1.1rem; border: none; pointer-events: none;
}
.demo-antworten button.richtig { background: #8fe0a8; transform: scale(1.12); transition: all 0.4s; }
.demo-juwelen { font-weight: 800; color: #2e9e5b; margin-top: 10px; }
.versteckt { display: none; }

/* Folge 2: Schachbrett */
#demo-schach {
  display: grid;
  grid-template-columns: repeat(8, clamp(26px, 5.4vw, 40px));
  grid-auto-rows: clamp(26px, 5.4vw, 40px);
  border: 3px solid #7b4fc9;
  border-radius: 8px;
  overflow: hidden;
}
.demo-schach-feld { display: flex; align-items: center; justify-content: center; font-size: clamp(17px, 4vw, 27px); transition: background 0.4s; }
.demo-schach-feld.hell { background: #f6edff; }
.demo-schach-feld.dunkel { background: #c9aef0; }
.demo-schach-feld.zug { background: #ffd76b; }
#demo-schach-status { font-weight: 700; color: #5a4a6a; min-height: 1.6em; }
#demo-schach-status.matt { color: #c9295e; font-size: 1.05em; }

/* Folge 3: Figuren-Parade */
#demo-welten { display: flex; gap: 14px; font-size: clamp(30px, 7vw, 46px); }
#demo-welten span { animation: demo-huepf 1.2s ease-in-out infinite; }
#demo-welten span:nth-child(2) { animation-delay: 0.15s; }
#demo-welten span:nth-child(3) { animation-delay: 0.3s; }
#demo-welten span:nth-child(4) { animation-delay: 0.45s; }
#demo-welten span:nth-child(5) { animation-delay: 0.6s; }
#demo-welten span:nth-child(6) { animation-delay: 0.75s; }
@keyframes demo-huepf {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}