/* ─────────────────────────────────────────────
   LINGSTER DEUTSCH-TRAINER – Komponenten
   ───────────────────────────────────────────── */

/* ── GAP-FILL ── */
.gap-sentence {
  font-size: 1.1rem; font-weight: 600;
  line-height: 2;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.gap-blank {
  display: inline-block;
  min-width: 90px;
  border-bottom: 2px solid var(--accent-blue);
  padding: 0 6px;
  text-align: center;
  color: var(--accent-cyan);
  font-weight: 700;
}
.gap-blank.filled { border-color: var(--success); color: var(--success); }
.gap-blank.wrong  { border-color: var(--error);   color: var(--error);   }
.gap-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem; font-weight: 600;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 12px;
}
.gap-input:focus    { border-color: var(--accent-blue); }
.gap-input.correct  { border-color: var(--success); background: var(--success-bg); }
.gap-input.wrong    { border-color: var(--error);   background: var(--error-bg);   }

/* ── ERROR FIND ── */
.error-sentence {
  font-size: 1rem; line-height: 1.8;
  color: var(--text-secondary);
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.error-word {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
  position: relative;
}
.error-word:hover       { background: rgba(255,255,255,0.1); }
.error-word.selected    { background: rgba(59,158,222,0.2); color: var(--accent-blue); text-decoration: underline; }
.error-word.found-error { background: var(--error-bg); color: var(--error); font-weight: 700; }
.error-word.wrong-click { background: var(--warning-bg); color: var(--warning); }

/* ── THEORY BLOCK ── */
.theory-block {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.06);
}
.theory-block__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.theory-block__icon  { font-size: 1.5rem; }
.theory-block__title { font-size: 1rem; font-weight: 700; }

/* ── INFO CHIP ── */
.info-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 600;
  color: var(--text-secondary);
}
.info-chip--blue { background: rgba(59,158,222,0.15); color: var(--accent-blue); }
.info-chip--gold { background: rgba(255,209,102,0.15); color: var(--accent-gold); }
.info-chip--green { background: rgba(74,222,128,0.15); color: var(--success); }

/* ── ACCORDION ── */
.accordion { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; }
.accordion__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-card);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  font-weight: 600; font-size: 0.9rem;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.accordion__header:hover { background: var(--bg-card-hover); }
.accordion__arrow {
  width: 20px; height: 20px;
  transition: transform 0.25s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}
.accordion__arrow svg { fill: none; stroke: currentColor; stroke-width: 2.5; }
.accordion.open .accordion__arrow { transform: rotate(180deg); }
.accordion__body {
  max-height: 0; overflow: hidden;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: none;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion.open .accordion__body { max-height: 600px; padding: 16px; }

/* ── CHIPS FILTER (Wortschatz-Level) ── */
.chips-row {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.15s;
}
.chip.active-a1,
.chip:hover.chip-a1 { background: rgba(74,222,128,0.2); color: var(--level-a1); border-color: rgba(74,222,128,0.3); }
.chip.active-a2,
.chip:hover.chip-a2 { background: rgba(96,165,250,0.2); color: var(--level-a2); border-color: rgba(96,165,250,0.3); }
.chip.active-b1,
.chip:hover.chip-b1 { background: rgba(192,132,252,0.2); color: var(--level-b1); border-color: rgba(192,132,252,0.3); }

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 20px 0;
}
.divider--label {
  display: flex; align-items: center; gap: 12px;
  height: auto;
}
.divider--label::before, .divider--label::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06);
}
.divider--label span { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* ── STAT ROW ── */
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stat-row:last-child { border-bottom: none; }
.stat-row__label { font-size: 0.85rem; color: var(--text-secondary); }
.stat-row__value { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.stat-row__value.green { color: var(--success); }
.stat-row__value.blue  { color: var(--accent-blue); }

/* ── EMOJI BANNER ── */
.emoji-banner {
  text-align: center;
  padding: 24px 20px;
}
.emoji-banner__icon  { font-size: 3.5rem; margin-bottom: 12px; }
.emoji-banner__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.emoji-banner__sub   { font-size: 0.9rem; color: var(--text-secondary); }

/* ── LOADING STATE ── */
.loading-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 60px 20px;
  color: var(--text-muted); font-size: 0.88rem;
}

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center; padding: 60px 20px;
}
.empty-state__icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
.empty-state__text { color: var(--text-muted); font-size: 0.9rem; }

/* ── MODAL PARTIKELN ── */
.partikel-item {
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.05);
}
.partikel-item__word { font-size: 1.2rem; font-weight: 800; color: var(--accent-gold); margin-bottom: 4px; }
.partikel-item__meaning { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; }
.partikel-item__examples { display: flex; flex-direction: column; gap: 5px; }
.partikel-example {
  font-size: 0.82rem; color: var(--text-primary);
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  font-style: italic;
}

/* ── KONNEKTOREN ── */
.konnektor-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(59,158,222,0.1);
  border: 1px solid rgba(59,158,222,0.2);
  border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 700;
  color: var(--accent-blue);
  margin: 4px;
  cursor: pointer; transition: all 0.15s;
}
.konnektor-chip:hover { background: rgba(59,158,222,0.2); }
.konnektor-chip small { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); font-style: italic; }

/* ── VERB CONJUGATION TABLE ── */
.conj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.conj-table th {
  background: rgba(0,200,215,0.1);
  color: var(--accent-cyan);
  font-weight: 700; text-align: left;
  padding: 8px 10px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.conj-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-secondary);
}
.conj-table td:first-child { color: var(--text-muted); font-weight: 600; }
.conj-table td:last-child  { color: var(--text-primary); font-weight: 600; }
.conj-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.conj-table tr:last-child td { border-bottom: none; }

/* ── SECTION HEADING ── */
.section-heading {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.section-heading__line { flex: 1; height: 1px; background: rgba(255,255,255,0.07); }
.section-heading__text { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); white-space: nowrap; }

/* ── PROGRESS RING ── */
.progress-ring { display: inline-block; position: relative; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring__bg    { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.progress-ring__fill  { fill: none; stroke: var(--accent-blue); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.8s cubic-bezier(.34,1.56,.64,1); }
.progress-ring__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }

/* ── SCHREIBKOMPETENZ / PHRASE EDITOR ── */
.phrase-editor {
  width: 100%;
  min-height: 120px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.7;
  resize: none;
  outline: none;
  transition: border-color 0.15s;
}
.phrase-editor:focus { border-color: var(--accent-blue); }

/* ── STREAK CALENDAR DOTS ── */
.streak-dots {
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
  margin: 12px 0;
}
.streak-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.streak-dot.done { background: var(--accent-gold); }
.streak-dot.today { background: var(--accent-blue); box-shadow: 0 0 8px var(--accent-blue); }

/* ── COPY BUTTON ── */
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer; opacity: 0;
  transition: all 0.15s;
}
.phrase-item:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
.copy-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── BLOOM INDICATOR ── */
.bloom-indicator {
  display: flex; gap: 3px; align-items: center;
}
.bloom-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.bloom-dot.filled { background: var(--accent-gold); }

/* ── SRS QUEUE ITEM ── */
.srs-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(251,146,60,0.08);
  border: 1px solid rgba(251,146,60,0.15);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  font-size: 0.88rem;
}
.srs-item__word { flex: 1; font-weight: 600; }
.srs-item__due  { font-size: 0.75rem; color: var(--warning); }

/* ── QUIZ PROGRESS ── */
.quiz-progress-dots {
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 20px;
}
.qp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  transition: all 0.2s;
}
.qp-dot.done-correct { background: var(--success); }
.qp-dot.done-wrong   { background: var(--error);   }

/* ── TTS-Button ────────────────────────────────── */
.tts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s, transform 0.1s;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
  min-height: 0;
  line-height: 1;
}
.tts-btn:hover {
  color: var(--accent-blue);
  background: rgba(33, 150, 243, 0.12);
}
.tts-btn:active {
  transform: scale(0.85);
}
.flashcard .tts-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 1.1rem;
  padding: 6px 8px;
}
.theory-example {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qp-dot.current      { background: var(--accent-blue); width: 20px; border-radius: 4px; }