/* ============================================================
   BLOOMELOOM LERNPLATTFORM — lernen.css
   Nutzt das Bloomeloom Design-System (style.css muss zuerst geladen sein)
   ============================================================ */

/* ── Seiten-Layout ── */
.lern-hero {
  background: var(--color-linen-50);
  border-bottom: 1px solid var(--color-linen-200);
  padding: 100px var(--section-pad-x) 48px;
  text-align: center;
}
.lern-hero .section-label { justify-content: center; }
.lern-hero .section-label::before { display: none; }
.lern-hero h1 { margin-bottom: 12px; }
.lern-hero p { color: var(--text-light); max-width: 540px; margin: 0 auto; font-size: 1.05rem; }

.lern-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px var(--section-pad-x) 96px;
}

/* ── Filter-Leiste ── */
.lern-filters { margin-bottom: 40px; }
.lern-filter-group { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lern-filter-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-overline);
  color: var(--text-muted); font-weight: var(--font-semibold); min-width: 64px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-linen-200); background: var(--white);
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-light);
  cursor: pointer; transition: all var(--dur-base) var(--ease-out);
}
.filter-chip:hover { border-color: var(--green-mid); color: var(--green); }
.filter-chip.active {
  background: var(--green); border-color: var(--green);
  color: var(--white); font-weight: var(--font-semibold);
}

/* ── Fortschrittsbalken ── */
.quiz-progress { margin-bottom: 28px; }
.progress-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.progress-text { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--font-medium); }
.progress-score { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--green); }
.progress-track {
  height: 6px; background: var(--color-linen-200); border-radius: var(--radius-full); overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--green); border-radius: var(--radius-full);
  transition: width var(--dur-slow) var(--ease-out); width: 0%;
}

/* ── Quiz-Karte ── */
.quiz-card {
  background: var(--white); border: 1px solid var(--color-linen-200);
  border-radius: var(--radius-lg); padding: 36px 40px;
  box-shadow: var(--shadow-sm);
  animation: slideInCard var(--dur-slow) var(--ease-out);
}
@keyframes slideInCard {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: center; }
.quiz-badge {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  padding: 4px 12px; border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.quiz-badge--mathe { background: #E8F2FF; color: #2563EB; }
.quiz-badge--englisch { background: #FFF7E8; color: #D97706; }
.quiz-badge--lernen { background: var(--color-forest-50); color: var(--green); }
.quiz-badge--stufe { background: var(--color-linen-100); color: var(--text-light); }
.quiz-typ { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; }

.quiz-frage {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  font-weight: var(--font-regular); line-height: 1.4;
  color: var(--text); margin-bottom: 28px;
}

/* ── Antwort-Buttons (Multiple Choice / T-F) ── */
.answer-grid { display: grid; gap: 12px; }
.tf-grid { grid-template-columns: 1fr 1fr; }

.answer-btn {
  width: 100%; text-align: left; padding: 16px 20px;
  border: 1.5px solid var(--color-linen-200); border-radius: var(--radius-md);
  background: var(--white); color: var(--text);
  font: var(--font-medium) var(--text-base) var(--font-body);
  cursor: pointer; transition: all var(--dur-base) var(--ease-out);
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
}
.answer-btn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: transparent; transition: background var(--dur-base);
}
.answer-btn:hover:not(:disabled) {
  border-color: var(--green-mid); background: var(--color-forest-25);
  transform: translateX(3px); color: var(--green-dark);
}
.answer-btn:hover::before { background: var(--green-mid); }

.answer-btn.richtig {
  border-color: #16A34A; background: #F0FDF4; color: #15803D; font-weight: var(--font-semibold);
}
.answer-btn.richtig::before { background: #16A34A; }
.answer-btn.falsch {
  border-color: #DC2626; background: #FEF2F2; color: #B91C1C;
}
.answer-btn.falsch::before { background: #DC2626; }
.answer-btn:disabled { cursor: not-allowed; }

.tf-btn { text-align: center; justify-content: center; font-size: 1.05rem; }

/* ── Lückentext / Rechnen ── */
.luecke-wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.luecke-input {
  flex: 1; min-width: 180px; padding: 14px 18px;
  border: 1.5px solid var(--color-linen-300); border-radius: var(--radius-md);
  font: var(--font-medium) var(--text-md) var(--font-body); color: var(--text);
  background: var(--white); transition: border-color var(--dur-base);
}
.luecke-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(48,98,74,0.10); }
.luecke-input.richtig { border-color: #16A34A; background: #F0FDF4; color: #15803D; }
.luecke-input.falsch  { border-color: #DC2626; background: #FEF2F2; color: #B91C1C; }

/* ── Erklärungs-Box ── */
.erklaerung-box {
  margin-top: 20px; padding: 18px 22px;
  border-radius: var(--radius-md);
  animation: fadeInBox var(--dur-base) var(--ease-out);
}
@keyframes fadeInBox {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.erklaerung--richtig { background: #F0FDF4; border-left: 3px solid #16A34A; }
.erklaerung--falsch  { background: #FEF2F2; border-left: 3px solid #DC2626; }
.erklaerung-box strong { display: block; margin-bottom: 6px; font-size: var(--text-base); }
.erklaerung--richtig strong { color: #15803D; }
.erklaerung--falsch  strong { color: #B91C1C; }
.erklaerung-box p { font-size: 0.93rem; color: var(--text-light); line-height: 1.65; margin: 0; }

/* ── Weiter-Button ── */
.quiz-weiter { margin-top: 24px; }

/* ── Score-Screen ── */
.score-screen { text-align: center; padding: 48px 32px; }
.score-emoji { font-size: 4rem; margin-bottom: 16px; animation: popIn 0.5s var(--ease-spring); }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.score-title { font-family: var(--font-display); font-size: 2rem; font-weight: var(--font-regular); margin-bottom: 28px; }
.score-ring { position: relative; width: 140px; height: 140px; margin: 0 auto 24px; }
.score-ring svg { width: 140px; height: 140px; }
.score-arc { transition: stroke-dasharray 1s var(--ease-out); }
.score-number {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.score-number strong { font-family: var(--font-display); font-size: 2rem; color: var(--green); line-height: 1; }
.score-number span { font-size: var(--text-sm); color: var(--text-muted); }
.score-msg { color: var(--text-light); font-size: 1.05rem; margin-bottom: 32px; max-width: 400px; margin-inline: auto; }
.score-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Leer-Zustand ── */
.quiz-empty {
  text-align: center; padding: 64px 32px;
  background: var(--color-linen-50); border-radius: var(--radius-lg);
  color: var(--text-light);
}
.quiz-empty p { margin-bottom: 8px; font-size: 1.05rem; }

/* ── Seiten-Teaser auf index.html ── */
.lern-teaser {
  background: var(--color-forest-50); border: 1px solid var(--color-forest-200);
  border-radius: var(--radius-lg); padding: 32px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.lern-teaser-text h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--font-regular); margin-bottom: 6px; }
.lern-teaser-text p { color: var(--text-light); font-size: 0.93rem; margin: 0; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .quiz-card { padding: 24px 20px; }
  .quiz-frage { font-size: 1.15rem; }
  .tf-grid { grid-template-columns: 1fr; }
  .luecke-wrap { flex-direction: column; align-items: stretch; }
  .luecke-input { min-width: auto; }
  .score-screen { padding: 32px 16px; }
  .lern-teaser { flex-direction: column; text-align: center; }
}