 <!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Antons-Büsche – Botanische Pflanzennamen interaktiv lernen mit Karteikarten, Spaced Repetition und Vorlesefunktion">
  <title>Antons-Büsche – Botanische Namen lernen</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
  <style>
/* ============================================
   ROOT & RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #f6f3ee;
  --card:          #ffffff;
  --surface:       #ede9e1;
  --border:        #d8d2c8;
  --text:          #1c1b18;
  --muted:         #6b7068;
  --primary:       #4a7c5f;
  --primary-dk:    #2e5940;
  --primary-lt:    #d4e8db;
  --green-soft:    #eaf2ec;
  --cat-farne:     #1e7a6e;
  --cat-fruh:      #7457b8;
  --cat-graser:    #8a7020;
  --cat-stauden:   #b85230;
  --r:             16px;
  --rs:            10px;
  --shadow:        0 4px 24px rgba(0,0,0,0.07);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.13);
  --nav-h:         68px;
  --sidebar-w:     230px;
  --header-h:      58px;
}

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

button { font-family: inherit; }
select { font-family: inherit; }

/* ============================================
   APP SHELL
   ============================================ */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-logo {
  padding: 22px 20px 20px;
  border-bottom: 1px solid var(--border);
}
.logo-leaf { font-size: 2rem; display: block; margin-bottom: 6px; }
.logo-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-dk);
  line-height: 1.1;
}
.logo-sub {
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-top: 3px;
}

.sidebar-nav {
  list-style: none;
  padding: 14px 10px;
  flex: 1;
}
.nav-item { margin-bottom: 3px; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: none;
  background: none;
  border-radius: var(--rs);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.18s;
  text-align: left;
}
.nav-btn:hover  { background: var(--green-soft); color: var(--primary); }
.nav-btn.active { background: var(--primary-lt); color: var(--primary-dk); font-weight: 600; }
.nav-icon { font-size: 1.15rem; width: 22px; text-align: center; flex-shrink: 0; }

.sidebar-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}
.stat-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 5px;
}
.stat-line strong { color: var(--primary); }
.progress-bar-mini {
  height: 5px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dk));
  border-radius: 3px;
  transition: width 0.4s ease;
}
.progress-label {
  font-size: 0.69rem;
  color: var(--muted);
  text-align: right;
  margin-top: 4px;
}

/* ── MAIN ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.main-header {
  height: var(--header-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 14px;
  flex-shrink: 0;
}
.view-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  scroll-behavior: smooth;
}

/* ── BOTTOM NAV (mobile) ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: 200;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
}
.bnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 18px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  border-radius: 12px;
  transition: color 0.18s;
  font-size: 0.66rem;
  font-weight: 500;
}
.bnav-btn .nav-icon { font-size: 1.3rem; width: auto; }
.bnav-btn.active { color: var(--primary); }

/* ============================================
   CATEGORY CHIPS
   ============================================ */
.cat-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.chip {
  padding: 5px 13px;
  border: 1.5px solid var(--border);
  background: var(--card);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.18s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active[data-cat="all"]           { background: var(--primary);    border-color: var(--primary);    color: #fff; }
.chip.active[data-cat="Farne"]         { background: var(--cat-farne);  border-color: var(--cat-farne);  color: #fff; }
.chip.active[data-cat="Frühjahrblüher"]{ background: var(--cat-fruh);   border-color: var(--cat-fruh);   color: #fff; }
.chip.active[data-cat="Gräser"]        { background: var(--cat-graser); border-color: var(--cat-graser); color: #fff; }
.chip.active[data-cat="Stauden"]       { background: var(--cat-stauden);border-color: var(--cat-stauden);color: #fff; }

/* ============================================
   CATEGORY BADGE (on card)
   ============================================ */
.badge {
  display: inline-block;
  font-size: 0.69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 12px;
  color: #fff;
}
.badge.Farne          { background: var(--cat-farne); }
.badge.Frühjahrblüher { background: var(--cat-fruh); }
.badge.Gräser         { background: var(--cat-graser); }
.badge.Stauden        { background: var(--cat-stauden); }

/* ============================================
   FLASHCARD
   ============================================ */
.learn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.card-counter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
  width: 100%;
  max-width: 540px;
  justify-content: space-between;
}

.card-scene {
  width: 100%;
  max-width: 540px;
  height: 310px;
  perspective: 1400px;
  cursor: pointer;
  user-select: none;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.card-inner.flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--card);
}
.card-face.back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #f0f7f2 0%, #e6f2eb 100%);
  border-color: var(--primary-lt);
}

.card-top-row {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-audio-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s;
  flex-shrink: 0;
}
.card-audio-btn:hover { background: var(--primary-lt); border-color: var(--primary); transform: scale(1.1); }
.card-audio-btn.speaking {
  background: var(--primary);
  border-color: var(--primary);
  animation: pulsate 0.9s ease-in-out infinite;
}

.card-hint {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 14px;
}
.card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}
.card-name.italic { font-style: italic; color: var(--primary-dk); }
.card-sub { font-size: 0.85rem; color: var(--muted); text-align: center; }

.card-habitat {
  margin-top: 14px;
  font-size: 0.76rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.flip-cue {
  position: absolute;
  bottom: 16px;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.7;
}

/* Action buttons */
.action-row {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 540px;
  justify-content: center;
}
.action-btn {
  flex: 1;
  padding: 14px;
  border: 1.5px solid transparent;
  border-radius: var(--rs);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn-known    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.btn-known:hover    { background: #bbf7d0; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(21,128,61,0.2); }
.btn-unknown  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.btn-unknown:hover  { background: #fecaca; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(153,27,27,0.15); }
.btn-flip     { background: var(--card); color: var(--text); border-color: var(--border); flex: 0; padding: 14px 36px; }
.btn-flip:hover     { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }

/* Leitner indicator */
.leitner-indicator {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.76rem;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: center;
}
.l-box { display: flex; align-items: center; gap: 4px; }
.l-dot { width: 9px; height: 9px; border-radius: 50%; }
.l-dot.b1 { background: #e5383b; }
.l-dot.b2 { background: #f4a261; }
.l-dot.b3 { background: #2a9d8f; }
.l-dot.b4 { background: var(--primary); }
.l-dot.b5 { background: var(--primary-dk); }

/* Session complete */
.session-done {
  text-align: center;
  padding: 50px 20px;
}
.done-emoji { font-size: 4rem; margin-bottom: 14px; }
.done-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--primary-dk);
  margin-bottom: 8px;
}
.done-sub { color: var(--muted); margin-bottom: 32px; }

/* ============================================
   BUTTONS (generic)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--rs);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  border: 1.5px solid transparent;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dk); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(46,89,64,0.25); }
.btn-secondary { background: var(--card); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.btn-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.btn-danger:hover { background: #fecaca; }

/* ============================================
   QUIZ
   ============================================ */
.quiz-progress-bar {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dk));
  border-radius: 3px;
  transition: width 0.4s ease;
}
.quiz-q-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 22px;
}

.quiz-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.quiz-type-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 10px;
}
.quiz-q-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.quiz-q-text.italic { font-style: italic; color: var(--primary-dk); }

.quiz-audio-row {
  margin-top: 14px;
}
.quiz-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--primary-lt);
  color: var(--primary-dk);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.2s;
}
.quiz-play-btn:hover { background: var(--primary); color: #fff; }
.quiz-play-btn.speaking { background: var(--primary); color: #fff; animation: pulsate 0.9s ease-in-out infinite; }

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.quiz-opt {
  padding: 15px 18px;
  border: 2px solid var(--border);
  background: var(--card);
  border-radius: var(--rs);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
  transition: all 0.18s;
  font-style: italic;
}
.quiz-opt.normal-style { font-style: normal; }
.quiz-opt:hover:not(:disabled) { border-color: var(--primary); background: var(--green-soft); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.correct { border-color: #16a34a; background: #dcfce7; color: #15803d; font-weight: 600; }
.quiz-opt.wrong   { border-color: #dc2626; background: #fef2f2; color: #dc2626; }

.quiz-feedback {
  text-align: center;
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: var(--rs);
  font-weight: 600;
  font-size: 0.95rem;
}
.quiz-feedback.ok  { background: #dcfce7; color: #15803d; }
.quiz-feedback.bad { background: #fef2f2; color: #991b1b; }

/* Quiz results */
.results-wrap { text-align: center; padding: 36px 16px; }
.results-emoji { font-size: 3.5rem; margin-bottom: 10px; }
.results-pct {
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.results-msg { color: var(--muted); margin: 6px 0 24px; font-size: 0.95rem; }
.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 340px;
  margin: 0 auto 28px;
}
.result-tile {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  padding: 20px;
}
.result-tile .big { font-size: 2.4rem; font-weight: 700; }
.result-tile .lbl { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.result-tile.ok .big  { color: #16a34a; }
.result-tile.bad .big { color: #dc2626; }

/* ============================================
   LIST VIEW
   ============================================ */
.list-search-wrap {
  position: relative;
  margin-bottom: 18px;
}
.list-search-wrap input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  background: var(--card);
  font-size: 0.93rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s;
}
.list-search-wrap input:focus { border-color: var(--primary); }
.search-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--muted);
  pointer-events: none;
}

.list-count { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }

.plant-list-table {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
  overflow: hidden;
}
.tbl-head, .tbl-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr auto 40px;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
}
.tbl-head {
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.tbl-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.tbl-row:last-child { border-bottom: none; }
.tbl-row:hover { background: var(--green-soft); }
.row-n { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.row-bot { font-style: italic; font-weight: 500; color: var(--primary-dk); font-size: 0.88rem; line-height: 1.3; }
.row-ger { font-size: 0.88rem; color: var(--text); line-height: 1.3; }
.row-audio {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.row-audio:hover { background: var(--primary-lt); border-color: var(--primary); }
.row-audio.speaking { background: var(--primary); animation: pulsate 0.9s infinite; }

.empty-msg {
  text-align: center;
  padding: 44px 20px;
  color: var(--muted);
}
.empty-msg .ico { font-size: 2.5rem; margin-bottom: 10px; }

/* ============================================
   SETTINGS
   ============================================ */
.settings-layout { display: grid; gap: 18px; max-width: 620px; }
.settings-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.settings-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.settings-row:last-child { margin-bottom: 0; }
.settings-lbl { font-size: 0.88rem; font-weight: 500; color: var(--text); }
.settings-hint { font-size: 0.75rem; color: var(--muted); margin-top: 3px; }

select {
  padding: 8px 11px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  font-size: 0.85rem;
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color 0.18s;
}
select:focus { border-color: var(--primary); }

.range-wrap { display: flex; align-items: center; gap: 10px; }
input[type="range"] {
  width: 130px;
  accent-color: var(--primary);
  cursor: pointer;
}
.range-val { font-size: 0.82rem; font-weight: 600; color: var(--primary); min-width: 28px; }

/* Leitner boxes in settings */
.leitner-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.leitner-tile {
  background: var(--surface);
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
}
.leitner-tile .count { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.leitner-tile .label { font-size: 0.65rem; color: var(--muted); margin-top: 5px; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulsate {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-up { animation: fadeUp 0.3s ease; }
.anim-slide { animation: slideIn 0.25s ease; }

/* ============================================
   RESPONSIVE / MOBILE
   ============================================ */
@media (max-width: 760px) {
  .sidebar { display: none; }
  .bottom-nav { display: flex; }
  .view-content {
    padding: 14px;
    padding-bottom: calc(var(--nav-h) + 14px);
  }
  .card-scene { height: 260px; }
  .card-name  { font-size: 1.35rem; }
  .quiz-options { grid-template-columns: 1fr; }
  .tbl-head, .tbl-row { grid-template-columns: 32px 1fr 1fr 34px; }
  .tbl-head > *:nth-child(4),
  .tbl-row  > *:nth-child(4) { display: none; }
  .main-header { padding: 0 14px; }
  .results-pct { font-size: 3.5rem; }
  .leitner-grid { grid-template-columns: repeat(5, 1fr); }
  .leitner-tile .count { font-size: 1.2rem; }
}
@media (max-width: 420px) {
  .card-name  { font-size: 1.15rem; }
  .quiz-q-text { font-size: 1.2rem; }
}
  </style>
</head>
<body>

<div class="app" id="app">

  <!-- ═══════════ SIDEBAR ═══════════ -->
  <aside class="sidebar">
    <div class="sidebar-logo">
      <span class="logo-leaf">🌿</span>
      <div class="logo-name">Antons-Büsche</div>
      <div class="logo-sub">Pflanzennamen Trainer</div>
    </div>
    <ul class="sidebar-nav">
      <li class="nav-item">
        <button class="nav-btn active" id="snav-learn" onclick="navigate('learn')">
          <span class="nav-icon">📚</span> Lernen
        </button>
      </li>
      <li class="nav-item">
        <button class="nav-btn" id="snav-quiz" onclick="navigate('quiz')">
          <span class="nav-icon">🎯</span> Quiz
        </button>
      </li>
      <li class="nav-item">
        <button class="nav-btn" id="snav-list" onclick="navigate('list')">
          <span class="nav-icon">📋</span> Pflanzenliste
        </button>
      </li>
      <li class="nav-item">
        <button class="nav-btn" id="snav-settings" onclick="navigate('settings')">
          <span class="nav-icon">⚙️</span> Einstellungen
        </button>
      </li>
    </ul>
    <div class="sidebar-foot" id="sidebar-foot"></div>
  </aside>

  <!-- ═══════════ MAIN ═══════════ -->
  <main class="main">
    <div class="main-header">
      <span class="view-title" id="view-title">📚 Karteikarten – Lernen</span>
      <div class="header-right" id="header-right"></div>
    </div>
    <div class="view-content" id="view-content"></div>
  </main>

  <!-- ═══════════ BOTTOM NAV ═══════════ -->
  <nav class="bottom-nav">
    <button class="bnav-btn active" id="bnav-learn" onclick="navigate('learn')">
      <span class="nav-icon">📚</span> Lernen
    </button>
    <button class="bnav-btn" id="bnav-quiz" onclick="navigate('quiz')">
      <span class="nav-icon">🎯</span> Quiz
    </button>
    <button class="bnav-btn" id="bnav-list" onclick="navigate('list')">
      <span class="nav-icon">📋</span> Liste
    </button>
    <button class="bnav-btn" id="bnav-settings" onclick="navigate('settings')">
      <span class="nav-icon">⚙️</span> Einstellungen
    </button>
  </nav>

</div><!-- /app -->

<script>
/* ==========================================================
   PLANT DATABASE
   Kurs 04 – Pflanzenverwendung, Stand: Februar 2026
   Extrahiert aus Kursunterlagen (OCR / Bilderkennung)
   ========================================================== */
const PLANTS = [
  // ── FARNE ──────────────────────────────────────────────────────────────
  { id:  1, botanicalName: "Dryopteris filix-mas",                        germanName: "Gewöhnlicher Wurmfarn",          category: "Farne",          habitat: "Gehölz · Gehölzrand" },
  { id:  2, botanicalName: "Matteuccia struthiopteris",                   germanName: "Trichterfarn",                   category: "Farne",          habitat: "Gehölz · Gehölzrand" },
  { id:  3, botanicalName: "Polypodium vulgare",                          germanName: "Gewöhnlicher Tüpfelfarn",        category: "Farne",          habitat: "Gehölzrand · Steinanlagen" },
  { id:  4, botanicalName: "Polystichum setiferum",                       germanName: "Borstiger Schildfarn",           category: "Farne",          habitat: "Gehölz · Steinanlagen" },

  // ── FRÜHJAHRBLÜHER / ZWIEBELN ──────────────────────────────────────────
  { id:  5, botanicalName: "Allium giganteum",                            germanName: "Riesen-Lauch",                   category: "Frühjahrblüher", habitat: "Freiflächen · Beet" },
  { id:  6, botanicalName: "Allium karataviense",                         germanName: "Blauzungen-Lauch",               category: "Frühjahrblüher", habitat: "Freiflächen · Beet" },
  { id:  7, botanicalName: "Crocus vernus",                               germanName: "Garten-Krokus",                  category: "Frühjahrblüher", habitat: "Freiflächen · Steinanlagen · Gehölz" },
  { id:  8, botanicalName: "Eranthis hyemalis",                           germanName: "Kleiner Winterling",             category: "Frühjahrblüher", habitat: "Freiflächen · Steinanlagen · Gehölz" },
  { id:  9, botanicalName: "Muscari botryoides",                          germanName: "Kleine Traubenhyazinthe",        category: "Frühjahrblüher", habitat: "Freiflächen · Steinanlagen" },
  { id: 10, botanicalName: "Narcissus (Sorte)",                           germanName: "Osterglocke / Narzisse",         category: "Frühjahrblüher", habitat: "Beet · Freiflächen · Steinanlagen" },
  { id: 11, botanicalName: "Tulipa (Sorte)",                              germanName: "Garten-Tulpe",                   category: "Frühjahrblüher", habitat: "Beet · Freiflächen · Steinanlagen" },

  // ── GRÄSER ─────────────────────────────────────────────────────────────
  { id: 12, botanicalName: "Cortaderia selloana",                         germanName: "Pampasgras",                     category: "Gräser",         habitat: "Beet · Freiflächen" },
  { id: 13, botanicalName: "Miscanthus sinensis (Sorte)",                 germanName: "Chinaschilf",                    category: "Gräser",         habitat: "Beet · Freiflächen" },
  { id: 14, botanicalName: "Panicum virgatum 'Northwind'",                germanName: "Ruten-Hirse",                    category: "Gräser",         habitat: "Beet · Freiflächen" },
  { id: 15, botanicalName: "Briza media",                                 germanName: "Zittergras",                     category: "Gräser",         habitat: "Beet · Freiflächen" },
  { id: 16, botanicalName: "Calamagrostis × acutiflora 'Karl Foerster'", germanName: "Mohn-Reitgras",                  category: "Gräser",         habitat: "Freiflächen" },
  { id: 17, botanicalName: "Chasmanthium latifolium",                     germanName: "Plattähren-Gras",                category: "Gräser",         habitat: "Freiflächen · Gehölzrand" },
  { id: 18, botanicalName: "Imperata cylindrica 'Red Baron'",             germanName: "Japanisches Blutgras",           category: "Gräser",         habitat: "Freiflächen" },
  { id: 19, botanicalName: "Pennisetum alopecuroides 'Hameln'",           germanName: "Federborstengras",               category: "Gräser",         habitat: "Freiflächen · Beet" },
  { id: 20, botanicalName: "Stipa tenuissima",                            germanName: "Federgras",                      category: "Gräser",         habitat: "Freiflächen · Fels-Steppen" },
  { id: 21, botanicalName: "Carex foliosissima 'Icedance'",               germanName: "Segge",                          category: "Gräser",         habitat: "Gehölz · Gehölzrand" },
  { id: 22, botanicalName: "Luzula sylvatica",                            germanName: "Wald-Marbel",                    category: "Gräser",         habitat: "Gehölz" },
  { id: 23, botanicalName: "Festuca gautieri",                            germanName: "Bärenfell-Schwingel",            category: "Gräser",         habitat: "Steinanlagen · Fels-Steppen" },
  { id: 24, botanicalName: "Hakonechloa macra 'Aureola'",                 germanName: "Gold-Berggras",                  category: "Gräser",         habitat: "Steinanlagen · Fels-Steppen" },

  // ── STAUDEN ────────────────────────────────────────────────────────────
  { id: 25, botanicalName: "Achillea millefolium 'Fanal'",                germanName: "Rote Schafgarbe",                category: "Stauden",        habitat: "Beet · Freiflächen" },
  { id: 26, botanicalName: "Geranium wallichianum 'Rozanne'",             germanName: "Storchschnabel",                 category: "Stauden",        habitat: "Beet · Freiflächen" },
  { id: 27, botanicalName: "Heuchera micrantha 'Palace Purple'",          germanName: "Purpurglöckchen",                category: "Stauden",        habitat: "Beet · Gehölzrand" },
  { id: 28, botanicalName: "Paeonia lactiflora",                          germanName: "Edel-Pfingstrose",               category: "Stauden",        habitat: "Beet" },
  { id: 29, botanicalName: "Rudbeckia fulgida 'Goldsturm'",               germanName: "Sonnenhut",                      category: "Stauden",        habitat: "Freiflächen · Beet" },
  { id: 30, botanicalName: "Agastache rugosa",                            germanName: "Duftnessel / Farbnessel",        category: "Stauden",        habitat: "Freiflächen · Beet" },
  { id: 31, botanicalName: "Baptisia australis",                          germanName: "Blaue Färberhülse",              category: "Stauden",        habitat: "Freiflächen" },
  { id: 32, botanicalName: "Echinacea purpurea",                          germanName: "Purpur-Sonnenhut",               category: "Stauden",        habitat: "Freiflächen · Beet" },
  { id: 33, botanicalName: "Oenothera lindheimeri",                       germanName: "Prachtkerze",                    category: "Stauden",        habitat: "Freiflächen · Beet" },
  { id: 34, botanicalName: "Geranium macrorrhizum",                       germanName: "Felsen-Storchschnabel",          category: "Stauden",        habitat: "Freiflächen · Gehölzrand" },
  { id: 35, botanicalName: "Helenium 'Moerheim Beauty'",                  germanName: "Sonnenbraut",                    category: "Stauden",        habitat: "Freiflächen · Beet" },
  { id: 36, botanicalName: "Monarda didyma",                              germanName: "Indianernessel",                 category: "Stauden",        habitat: "Freiflächen" },
  { id: 37, botanicalName: "Persicaria amplexicaulis",                    germanName: "Kerzen-Knöterich",               category: "Stauden",        habitat: "Freiflächen · Steinanlagen" },
  { id: 38, botanicalName: "Phlomis russeliana",                          germanName: "Brandkraut",                     category: "Stauden",        habitat: "Freiflächen" },
  { id: 39, botanicalName: "Salvia nemorosa",                             germanName: "Steppen-Salbei",                 category: "Stauden",        habitat: "Freiflächen" },
  { id: 40, botanicalName: "Sanguisorba officinalis 'Tanna'",             germanName: "Purpur-Wiesenknopf",             category: "Stauden",        habitat: "Freiflächen" },
  { id: 41, botanicalName: "Ajuga reptans",                               germanName: "Kriechender Günsel",             category: "Stauden",        habitat: "Gehölz · Freiflächen" },
  { id: 42, botanicalName: "Anemone hupehensis 'September Charm'",        germanName: "Herbst-Anemone",                 category: "Stauden",        habitat: "Gehölz · Freiflächen" },
  { id: 43, botanicalName: "Aruncus dioicus",                             germanName: "Wald-Geißbart",                  category: "Stauden",        habitat: "Gehölz · Freiflächen" },
  { id: 44, botanicalName: "Aster divaricatus",                           germanName: "Wald-Aster",                     category: "Stauden",        habitat: "Gehölzrand · Steinanlagen" },
  { id: 45, botanicalName: "Astilbe chinensis",                           germanName: "Zwerg-Astilbe",                  category: "Stauden",        habitat: "Gehölzrand · Steinanlagen" },
  { id: 46, botanicalName: "Bergenia (Sorte)",                            germanName: "Bergenie",                       category: "Stauden",        habitat: "Gehölzrand · Steinanlagen" },
  { id: 47, botanicalName: "Brunnera macrophylla 'Jack Frost'",           germanName: "Kaukasisches Vergissmeinnicht",  category: "Stauden",        habitat: "Gehölz · Steinanlagen" },
  { id: 48, botanicalName: "Campanula persicifolia",                      germanName: "Pfirsichblättrige Glockenblume", category: "Stauden",        habitat: "Gehölzrand · Beet" },
  { id: 49, botanicalName: "Helleborus niger",                            germanName: "Christrose",                     category: "Stauden",        habitat: "Gehölzrand · Beet" },
  { id: 50, botanicalName: "Hosta (Sorte)",                               germanName: "Funkie",                         category: "Stauden",        habitat: "Gehölzrand · Beet" },
  { id: 51, botanicalName: "Kalimeris incisa",                            germanName: "Schönaster",                     category: "Stauden",        habitat: "Gehölzrand · Freiflächen" },
  { id: 52, botanicalName: "Pulmonaria saccharata 'Mrs. Moon'",           germanName: "Geflecktes Lungenkraut",         category: "Stauden",        habitat: "Gehölz · Gehölzrand" },
  { id: 53, botanicalName: "Tiarella cordifolia",                         germanName: "Schaumblüte",                    category: "Stauden",        habitat: "Gehölz · Gehölzrand" },
  { id: 54, botanicalName: "Aurinia saxatilis",                           germanName: "Felsen-Steinkresse",             category: "Stauden",        habitat: "Steinanlagen · Fels-Steppen" },
  { id: 55, botanicalName: "Helianthemum (Sorte)",                        germanName: "Sonnenröschen",                  category: "Stauden",        habitat: "Steinanlagen · Fels-Steppen" },
  { id: 56, botanicalName: "Iberis sempervirens",                         germanName: "Immergrüne Schleifenblume",      category: "Stauden",        habitat: "Steinanlagen · Fels-Steppen" },
  { id: 57, botanicalName: "Sedum acre",                                  germanName: "Scharfer Mauerpfeffer",          category: "Stauden",        habitat: "Steinanlagen" },
  { id: 58, botanicalName: "Thymus serpyllum",                            germanName: "Sand-Thymian",                   category: "Stauden",        habitat: "Steinanlagen · Fels-Steppen" },
];

/* ==========================================================
   STATE
   ========================================================== */
const S = {
  tab: 'learn',
  settings: {
    learnMode: 'de-to-lat',   // 'de-to-lat' | 'lat-to-de'
    speechRate: 0.85,
    latinVoice: 'it-IT',      // 'it-IT' | 'es-ES' | 'de-DE'
    catFilter:  'all',
    quizCount:  10,
    quizMode:   'text',       // 'text' | 'audio'
  },
  learn: {
    deck:    [],              // array of plant IDs for this session
    idx:     0,
    flipped: false,
    done:    false,
  },
  leitner: JSON.parse(localStorage.getItem('bl_leitner') || '{}'),
  quiz: {
    questions: [],
    idx:       0,
    answered:  false,
    score:     0,
    done:      false,
  },
  list: {
    search: '',
    cat:    'all',
  },
  voices: [],
};

/* ==========================================================
   HELPERS
   ========================================================== */
function shuffle(a) {
  const b = [...a];
  for (let i = b.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [b[i], b[j]] = [b[j], b[i]];
  }
  return b;
}

function filteredPlants(catOverride) {
  const cat = catOverride !== undefined ? catOverride : S.settings.catFilter;
  return cat === 'all' ? PLANTS : PLANTS.filter(p => p.category === cat);
}

function getBox(id) { return S.leitner[id]?.box || 1; }

function setBox(id, box) {
  S.leitner[id] = { box, t: Date.now() };
  localStorage.setItem('bl_leitner', JSON.stringify(S.leitner));
}

function leitnerStats() {
  const s = { 1:0, 2:0, 3:0, 4:0, 5:0 };
  PLANTS.forEach(p => s[getBox(p.id)]++);
  return s;
}

function esc(str) {
  return String(str)
    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

const CATS = ['Farne','Frühjahrblüher','Gräser','Stauden'];
const catCount = cat => PLANTS.filter(p => p.category === cat).length;

/* ==========================================================
   TEXT-TO-SPEECH
   ========================================================== */
function loadVoices() {
  S.voices = window.speechSynthesis ? window.speechSynthesis.getVoices() : [];
}

function bestVoice(lang) {
  const primary = lang.split('-')[0];
  const all = S.voices;
  // Prefer exact match, then prefix match, premium first
  const premiumKw = ['natural','neural','enhanced','premium','google','microsoft'];
  let pool = all.filter(v => v.lang === lang);
  if (!pool.length) pool = all.filter(v => v.lang.startsWith(primary));
  if (!pool.length) pool = all;
  const premium = pool.find(v => premiumKw.some(k => v.name.toLowerCase().includes(k)));
  return premium || pool[0] || null;
}

function speak(text, lang, btn = null) {
  if (!window.speechSynthesis) return;
  window.speechSynthesis.cancel();

  const utt = new SpeechSynthesisUtterance(text);
  utt.lang  = lang;
  utt.rate  = parseFloat(S.settings.speechRate);
  utt.pitch = 1.0;

  const v = bestVoice(lang);
  if (v) utt.voice = v;

  // visual feedback
  if (btn) {
    btn.classList.add('speaking');
    utt.onend = utt.onerror = () => btn.classList.remove('speaking');
  }

  // Chrome bug workaround: re-trigger if silent after 200 ms
  let started = false;
  utt.onstart = () => { started = true; };
  window.speechSynthesis.speak(utt);
  setTimeout(() => {
    if (!started && window.speechSynthesis.paused) window.speechSynthesis.resume();
  }, 200);
}

function speakDE(text, btn)  { speak(text, 'de-DE', btn); }
function speakLAT(text, btn) { speak(text, S.settings.latinVoice, btn); }

/* ==========================================================
   NAVIGATION
   ========================================================== */
const VIEW_TITLES = {
  learn:    '📚 Karteikarten – Lernen',
  quiz:     '🎯 Quiz – Testen',
  list:     '📋 Pflanzenliste',
  settings: '⚙️ Einstellungen',
};

function navigate(tab) {
  S.tab = tab;
  window.speechSynthesis?.cancel();

  ['learn','quiz','list','settings'].forEach(t => {
    document.getElementById(`snav-${t}`)?.classList.toggle('active', t === tab);
    document.getElementById(`bnav-${t}`)?.classList.toggle('active', t === tab);
  });

  document.getElementById('view-title').textContent = VIEW_TITLES[tab];

  const dispatch = { learn: renderLearn, quiz: startQuiz, list: renderList, settings: renderSettings };
  dispatch[tab]?.();
  renderSidebarFoot();
}

/* ==========================================================
   CAT CHIPS HTML helper
   ========================================================== */
function catChipsHTML(activeCat, onclickFn) {
  const all = [
    { key: 'all', label: `Alle (${PLANTS.length})` },
    ...CATS.map(c => ({ key: c, label: `${c} (${catCount(c)})` })),
  ];
  return `<div class="cat-chips">` +
    all.map(({ key, label }) =>
      `<button class="chip${activeCat === key ? ' active' : ''}" data-cat="${esc(key)}"
               onclick="${onclickFn}('${esc(key)}')">${label}</button>`
    ).join('') + `</div>`;
}

function leitnerBarHTML(stats) {
  const total = PLANTS.length;
  return `<div class="leitner-indicator">
    <span style="margin-right:4px">Fächer:</span>
    ${[1,2,3,4,5].map(b =>
      `<span class="l-box"><span class="l-dot b${b}"></span>${stats[b]}</span>`
    ).join('')}
  </div>`;
}

/* ==========================================================
   LEARN MODULE
   ========================================================== */
function buildDeck() {
  const plants = filteredPlants();
  // Prioritise low Leitner boxes (least known first)
  const sorted = [...plants].sort((a,b) => getBox(a.id) - getBox(b.id));
  S.learn.deck    = sorted.map(p => p.id);
  S.learn.idx     = 0;
  S.learn.flipped = false;
  S.learn.done    = false;
}

function renderLearn() {
  if (!S.learn.deck.length) buildDeck();
  const vc = document.getElementById('view-content');
  if (S.learn.done || S.learn.idx >= S.learn.deck.length) {
    vc.innerHTML = renderSessionDone();
    return;
  }

  const plant   = PLANTS.find(p => p.id === S.learn.deck[S.learn.idx]);
  const total   = S.learn.deck.length;
  const current = S.learn.idx + 1;
  const flipped = S.learn.flipped;
  const box     = getBox(plant.id);
  const stats   = leitnerStats();

  const deToLat = S.settings.learnMode === 'de-to-lat';
  const frontTxt  = deToLat ? plant.germanName  : plant.botanicalName;
  const backTxt   = deToLat ? plant.botanicalName : plant.germanName;
  const frontHint = deToLat ? 'Deutscher Name'   : 'Botanischer Name (Latein)';
  const backHint  = deToLat ? 'Botanischer Name (Latein)' : 'Deutscher Name';
  const frontBot  = !deToLat;
  const backBot   =  deToLat;

  vc.innerHTML = `
  <div class="learn-wrap anim-up">
    ${catChipsHTML(S.settings.catFilter, 'setLearnCat')}

    <div class="card-counter-row">
      <span>Karte ${current} / ${total}</span>
      <span style="display:flex;align-items:center;gap:6px">
        <span class="l-dot b${box}" style="display:inline-block"></span>Fach ${box} / 5
      </span>
    </div>

    <div class="card-scene" id="card-scene" onclick="flipCard()">
      <div class="card-inner${flipped ? ' flipped' : ''}" id="card-inner">

        <!-- FRONT -->
        <div class="card-face front">
          <div class="card-top-row">
            <span class="badge ${plant.category}">${plant.category}</span>
            <button class="card-audio-btn" id="front-audio"
                    onclick="event.stopPropagation(); playFrontAudio(this)">🔊</button>
          </div>
          <span class="card-hint">${frontHint}</span>
          <div class="card-name${frontBot ? ' italic' : ''}">${esc(frontTxt)}</div>
          <span class="flip-cue">Tippen zum Aufdecken →</span>
        </div>

        <!-- BACK -->
        <div class="card-face back">
          <div class="card-top-row">
            <span class="badge ${plant.category}">${plant.category}</span>
            <button class="card-audio-btn" id="back-audio"
                    onclick="event.stopPropagation(); playBackAudio(this)">🔊</button>
          </div>
          <span class="card-hint">${backHint}</span>
          <div class="card-name${backBot ? ' italic' : ''}">${esc(backTxt)}</div>
          <div class="card-habitat">🌿 ${esc(plant.habitat)}</div>
        </div>

      </div><!-- /card-inner -->
    </div><!-- /card-scene -->

    ${flipped
      ? `<div class="action-row anim-slide">
           <button class="action-btn btn-unknown" onclick="rateCard(false)">✗ Nicht gewusst</button>
           <button class="action-btn btn-known"   onclick="rateCard(true)">✓ Gewusst</button>
         </div>`
      : `<div class="action-row">
           <button class="action-btn btn-flip" onclick="flipCard()">Aufdecken</button>
         </div>`
    }

    ${leitnerBarHTML(stats)}
  </div>`;
}

function playFrontAudio(btn) {
  const plant  = PLANTS.find(p => p.id === S.learn.deck[S.learn.idx]);
  const deToLat = S.settings.learnMode === 'de-to-lat';
  if (deToLat) speakDE(plant.germanName, btn);
  else         speakLAT(plant.botanicalName, btn);
}

function playBackAudio(btn) {
  const plant  = PLANTS.find(p => p.id === S.learn.deck[S.learn.idx]);
  const deToLat = S.settings.learnMode === 'de-to-lat';
  if (deToLat) speakLAT(plant.botanicalName, btn);
  else         speakDE(plant.germanName, btn);
}

function flipCard() {
  S.learn.flipped = !S.learn.flipped;
  renderLearn();
}

function rateCard(known) {
  const id  = S.learn.deck[S.learn.idx];
  const box = getBox(id);
  setBox(id, known ? Math.min(box + 1, 5) : 1);
  S.learn.idx++;
  S.learn.flipped = false;
  if (S.learn.idx >= S.learn.deck.length) S.learn.done = true;
  renderLearn();
  renderSidebarFoot();
}

function setLearnCat(cat) {
  S.settings.catFilter = cat;
  buildDeck();
  renderLearn();
}

function renderSessionDone() {
  const stats = leitnerStats();
  const learned = stats[4] + stats[5];
  return `
  <div class="session-done anim-up">
    <div class="done-emoji">🌿</div>
    <div class="done-title">Session abgeschlossen!</div>
    <div class="done-sub">Du hast alle ${S.learn.deck.length} Karten dieser Runde durchgearbeitet.</div>
    <div style="display:flex;gap:14px;justify-content:center;margin-bottom:28px;flex-wrap:wrap">
      ${[1,2,3,4,5].map(b=>`
        <div style="text-align:center">
          <div style="font-size:1.7rem;font-weight:700;color:var(--primary)">${stats[b]}</div>
          <div style="font-size:0.72rem;color:var(--muted)">Fach ${b}</div>
        </div>`).join('')}
    </div>
    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
      <button class="btn btn-primary" onclick="buildDeck();renderLearn()">Neue Runde</button>
      <button class="btn btn-secondary" onclick="navigate('quiz')">Zum Quiz →</button>
    </div>
  </div>`;
}

/* ==========================================================
   QUIZ MODULE
   ========================================================== */
function generateQuestions() {
  const plants = filteredPlants();
  if (plants.length < 4) return [];
  const count = Math.min(S.settings.quizCount, plants.length);
  const pool  = shuffle(plants).slice(0, count);
  const deToLat = S.settings.learnMode === 'de-to-lat';
  return pool.map(plant => {
    const qText    = deToLat ? plant.germanName    : plant.botanicalName;
    const correct  = deToLat ? plant.botanicalName : plant.germanName;
    const distPool = PLANTS.filter(p => p.id !== plant.id);
    const dists    = shuffle(distPool).slice(0,3).map(p => deToLat ? p.botanicalName : p.germanName);
    return { plant, qText, correct, options: shuffle([correct, ...dists]), deToLat };
  });
}

function startQuiz() {
  S.quiz.questions = generateQuestions();
  S.quiz.idx       = 0;
  S.quiz.answered  = false;
  S.quiz.score     = 0;
  S.quiz.done      = false;
  renderQuizQ();
}

function renderQuizQ() {
  const vc = document.getElementById('view-content');
  if (S.quiz.done || S.quiz.idx >= S.quiz.questions.length) {
    renderQuizResults(); return;
  }
  const q     = S.quiz.questions[S.quiz.idx];
  const total = S.quiz.questions.length;
  const pct   = (S.quiz.idx / total) * 100;
  const isAudio = S.settings.quizMode === 'audio';

  vc.innerHTML = `
  <div class="anim-up">
    <div class="quiz-progress-bar">
      <div class="quiz-progress-fill" style="width:${pct}%"></div>
    </div>
    <div class="quiz-q-label">Frage ${S.quiz.idx+1} / ${total}</div>

    <div class="quiz-card">
      <div class="quiz-type-label">
        ${q.deToLat ? 'Welcher botanische Name gehört zu diesem deutschen Namen?' : 'Welcher deutsche Name gehört zu diesem botanischen Namen?'}
      </div>
      ${isAudio
        ? `<div class="quiz-q-text" style="color:var(--muted);font-style:normal;font-size:1rem">🔊 Hör den Namen und wähle die richtige Antwort</div>
           <div class="quiz-audio-row">
             <button class="quiz-play-btn" id="quiz-play-btn" onclick="playQuizAudio(this)">🔊 Abspielen</button>
           </div>`
        : `<div class="quiz-q-text${!q.deToLat ? ' italic' : ''}">${esc(q.qText)}</div>`
      }
    </div>

    <div class="quiz-options" id="quiz-options">
      ${q.options.map((opt, i) =>
        `<button class="quiz-opt${q.deToLat ? '' : ' normal-style'}"
                 id="qopt-${i}"
                 onclick="answerQuiz(${i})">${esc(opt)}</button>`
      ).join('')}
    </div>

    <div id="quiz-feedback-area"></div>
  </div>`;

  // Auto-play in audio mode
  if (isAudio) setTimeout(() => {
    const btn = document.getElementById('quiz-play-btn');
    if (btn) playQuizAudio(btn);
  }, 400);
}

function playQuizAudio(btn) {
  const q = S.quiz.questions[S.quiz.idx];
  if (q.deToLat) speakDE(q.qText, btn);
  else           speakLAT(q.qText, btn);
}

function answerQuiz(optIdx) {
  if (S.quiz.answered) return;
  S.quiz.answered = true;
  const q       = S.quiz.questions[S.quiz.idx];
  const chosen  = q.options[optIdx];
  const correct = q.correct;
  const ok      = chosen === correct;
  if (ok) S.quiz.score++;

  // Colour options
  q.options.forEach((opt, i) => {
    const btn = document.getElementById(`qopt-${i}`);
    if (!btn) return;
    btn.disabled = true;
    if (opt === correct) btn.classList.add('correct');
    else if (opt === chosen) btn.classList.add('wrong');
  });

  // Feedback + next button
  const fa = document.getElementById('quiz-feedback-area');
  if (fa) {
    fa.innerHTML = `
      <div class="quiz-feedback ${ok ? 'ok' : 'bad'} anim-up">
        ${ok ? '✓ Richtig!' : `✗ Falsch – Korrekt: <em>${esc(correct)}</em>`}
      </div>
      <div style="text-align:center;margin-top:16px">
        <button class="btn btn-primary" onclick="nextQuizQ()">
          ${S.quiz.idx + 1 < S.quiz.questions.length ? 'Weiter →' : 'Auswertung →'}
        </button>
      </div>`;
  }
}

function nextQuizQ() {
  S.quiz.idx++;
  S.quiz.answered = false;
  if (S.quiz.idx >= S.quiz.questions.length) S.quiz.done = true;
  renderQuizQ();
}

function renderQuizResults() {
  const vc    = document.getElementById('view-content');
  const score = S.quiz.score;
  const total = S.quiz.questions.length;
  const pct   = Math.round((score / total) * 100);
  const emoji = pct >= 90 ? '🏆' : pct >= 75 ? '🌟' : pct >= 55 ? '✨' : pct >= 35 ? '📖' : '💪';
  const msg   = pct >= 90 ? 'Hervorragend!' : pct >= 75 ? 'Sehr gut!' : pct >= 55 ? 'Gut gemacht!' : pct >= 35 ? 'Noch etwas üben!' : 'Weiter üben – du schaffst das!';

  vc.innerHTML = `
  <div class="results-wrap anim-up">
    <div class="results-emoji">${emoji}</div>
    <div class="results-pct">${pct}%</div>
    <div class="results-msg">${msg} &nbsp;·&nbsp; ${score} von ${total} richtig</div>
    <div class="results-grid">
      <div class="result-tile ok">
        <div class="big">${score}</div>
        <div class="lbl">Richtig ✓</div>
      </div>
      <div class="result-tile bad">
        <div class="big">${total - score}</div>
        <div class="lbl">Falsch ✗</div>
      </div>
    </div>
    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
      <button class="btn btn-primary" onclick="startQuiz()">Neues Quiz</button>
      <button class="btn btn-secondary" onclick="navigate('learn')">Weiterlernen</button>
      <button class="btn btn-secondary" onclick="navigate('list')">Pflanzenliste</button>
    </div>
  </div>`;
}

/* ==========================================================
   LIST MODULE
   ========================================================== */
function renderList() {
  const vc = document.getElementById('view-content');
  const { search, cat } = S.list;

  let plants = filteredPlants(cat);
  if (search) {
    const q = search.toLowerCase();
    plants = plants.filter(p =>
      p.botanicalName.toLowerCase().includes(q) ||
      p.germanName.toLowerCase().includes(q)
    );
  }

  vc.innerHTML = `
  <div class="anim-up">
    <div class="list-search-wrap">
      <span class="search-ico">🔍</span>
      <input type="text" id="list-search-inp"
             placeholder="Suche nach botanischem oder deutschem Namen…"
             value="${esc(search)}"
             oninput="updateListSearch(this.value)">
    </div>

    ${catChipsHTML(cat, 'setListCat')}

    <div class="list-count">${plants.length} Pflanze${plants.length !== 1 ? 'n' : ''} gefunden</div>

    <div class="plant-list-table">
      <div class="tbl-head">
        <span>#</span>
        <span>Botanischer Name</span>
        <span>Deutscher Name</span>
        <span>Kategorie</span>
        <span>🔊</span>
      </div>
      ${plants.length === 0
        ? `<div class="empty-msg"><div class="ico">🌿</div>Keine Pflanzen gefunden</div>`
        : plants.map((p, i) => `
          <div class="tbl-row">
            <span class="row-n">${i+1}</span>
            <span class="row-bot">${esc(p.botanicalName)}</span>
            <span class="row-ger">${esc(p.germanName)}</span>
            <span class="badge ${p.category}" style="justify-self:start">${p.category}</span>
            <button class="row-audio" id="row-audio-${p.id}"
                    onclick="listPlayAudio(${p.id}, this)"
                    title="Botanischen Namen vorlesen">🔊</button>
          </div>`).join('')
      }
    </div>
  </div>`;

  // Preserve focus / cursor in search
  if (search) {
    const inp = document.getElementById('list-search-inp');
    if (inp) { inp.focus(); inp.setSelectionRange(search.length, search.length); }
  }
}

function updateListSearch(val) {
  S.list.search = val;
  renderList();
}

function setListCat(cat) {
  S.list.cat = cat;
  renderList();
}

function listPlayAudio(id, btn) {
  const p = PLANTS.find(x => x.id === id);
  if (p) speakLAT(p.botanicalName, btn);
}

/* ==========================================================
   SETTINGS MODULE
   ========================================================== */
function renderSettings() {
  const vc = document.getElementById('view-content');
  const st = leitnerStats();
  const s  = S.settings;

  vc.innerHTML = `
  <div class="settings-layout anim-up">

    <!-- LERNMODUS -->
    <div class="settings-card">
      <div class="settings-section-title">Lernmodus</div>

      <div class="settings-row">
        <div>
          <div class="settings-lbl">Karteikarten-Richtung</div>
          <div class="settings-hint">Was steht auf der Vorderseite?</div>
        </div>
        <select id="set-learnMode" onchange="applySetting('learnMode', this.value)">
          <option value="de-to-lat" ${s.learnMode==='de-to-lat'?'selected':''}>Deutsch → Latein</option>
          <option value="lat-to-de" ${s.learnMode==='lat-to-de'?'selected':''}>Latein → Deutsch</option>
        </select>
      </div>

      <div class="settings-row">
        <div>
          <div class="settings-lbl">Kategorie-Filter</div>
          <div class="settings-hint">Welche Pflanzengruppe lernen?</div>
        </div>
        <select id="set-catFilter" onchange="applySetting('catFilter', this.value); buildDeck()">
          <option value="all" ${s.catFilter==='all'?'selected':''}>Alle (${PLANTS.length})</option>
          ${CATS.map(c=>`<option value="${c}" ${s.catFilter===c?'selected':''}>${c} (${catCount(c)})</option>`).join('')}
        </select>
      </div>
    </div>

    <!-- QUIZ -->
    <div class="settings-card">
      <div class="settings-section-title">Quiz-Einstellungen</div>

      <div class="settings-row">
        <div>
          <div class="settings-lbl">Fragenanzahl pro Runde</div>
          <div class="settings-hint">Wie viele Fragen soll das Quiz haben?</div>
        </div>
        <select id="set-quizCount" onchange="applySetting('quizCount', parseInt(this.value))">
          ${[5,10,15,20,30].map(n=>`<option value="${n}" ${s.quizCount===n?'selected':''}>${n} Fragen</option>`).join('')}
        </select>
      </div>

      <div class="settings-row">
        <div>
          <div class="settings-lbl">Quiz-Modus</div>
          <div class="settings-hint">Fragen lesen oder per Audio hören?</div>
        </div>
        <select id="set-quizMode" onchange="applySetting('quizMode', this.value)">
          <option value="text"  ${s.quizMode==='text'? 'selected':''}>Text (Lesen)</option>
          <option value="audio" ${s.quizMode==='audio'?'selected':''}>Audio (Hören)</option>
        </select>
      </div>
    </div>

    <!-- TTS -->
    <div class="settings-card">
      <div class="settings-section-title">Vorlesefunktion (Text-to-Speech)</div>

      <div class="settings-row">
        <div>
          <div class="settings-lbl">Sprechgeschwindigkeit</div>
          <div class="settings-hint">Langsamer empfohlen für Latein (0.7–0.9)</div>
        </div>
        <div class="range-wrap">
          <input type="range" id="set-speechRate"
                 min="0.6" max="1.1" step="0.05"
                 value="${s.speechRate}"
                 oninput="applySetting('speechRate', parseFloat(this.value));
                          document.getElementById('rate-val').textContent = this.value">
          <span class="range-val" id="rate-val">${s.speechRate}</span>
        </div>
      </div>

      <div class="settings-row">
        <div>
          <div class="settings-lbl">Stimme für Botanische Namen</div>
          <div class="settings-hint">Sprache für bestmögliche Latein-Aussprache</div>
        </div>
        <select id="set-latinVoice" onchange="applySetting('latinVoice', this.value)">
          <option value="it-IT" ${s.latinVoice==='it-IT'?'selected':''}>🇮🇹 Italienisch – Empfohlen</option>
          <option value="es-ES" ${s.latinVoice==='es-ES'?'selected':''}>🇪🇸 Spanisch</option>
          <option value="de-DE" ${s.latinVoice==='de-DE'?'selected':''}>🇩🇪 Deutsch</option>
          <option value="la"    ${s.latinVoice==='la'   ?'selected':''}>🏛️ Latein (falls verfügbar)</option>
        </select>
      </div>

      <div class="settings-row">
        <div>
          <div class="settings-lbl">Aussprache testen</div>
          <div class="settings-hint">Klicke zum Testen der aktuellen Einstellung</div>
        </div>
        <div style="display:flex;gap:8px">
          <button class="btn btn-secondary" style="font-size:0.8rem;padding:8px 12px"
                  onclick="speakDE('Gewöhnlicher Wurmfarn')">🔊 Deutsch</button>
          <button class="btn btn-secondary" style="font-size:0.8rem;padding:8px 12px"
                  onclick="speakLAT('Dryopteris filix-mas')">🔊 Latein</button>
        </div>
      </div>
    </div>

    <!-- PROGRESS -->
    <div class="settings-card">
      <div class="settings-section-title">Lernfortschritt (Leitner-System)</div>

      <div class="leitner-grid">
        ${[1,2,3,4,5].map(b => {
          const labels = ['Neu / Unbekannt','Einmal gewusst','Zweimal gewusst','Oft gewusst','Sehr gut bekannt'];
          return `
          <div class="leitner-tile">
            <span class="l-dot b${b}" style="display:inline-block;width:12px;height:12px;margin-bottom:6px"></span>
            <div class="count">${st[b]}</div>
            <div class="label">Fach ${b}</div>
          </div>`;
        }).join('')}
      </div>

      <button class="btn btn-danger" onclick="resetProgress()">
        🔄 Fortschritt zurücksetzen
      </button>
    </div>

  </div>`;
}

function applySetting(key, value) {
  S.settings[key] = value;
}

function resetProgress() {
  if (!confirm('Möchtest du deinen gesamten Lernfortschritt wirklich löschen?')) return;
  S.leitner = {};
  localStorage.removeItem('bl_leitner');
  buildDeck();
  renderSettings();
  renderSidebarFoot();
}

/* ==========================================================
   SIDEBAR FOOTER STATS
   ========================================================== */
function renderSidebarFoot() {
  const el = document.getElementById('sidebar-foot');
  if (!el) return;
  const st   = leitnerStats();
  const total = PLANTS.length;
  const learned = st[4] + st[5];
  const pct = Math.round((learned / total) * 100);
  el.innerHTML = `
    <div class="stat-line"><span>Pflanzen gesamt</span><strong>${total}</strong></div>
    <div class="stat-line"><span>Gut gelernt (F4+5)</span><strong>${learned}</strong></div>
    <div class="progress-bar-mini">
      <div class="progress-bar-mini-fill" style="width:${pct}%"></div>
    </div>
    <div class="progress-label">${pct}% gelernt</div>`;
}

/* ==========================================================
   INIT
   ========================================================== */
function init() {
  // Load TTS voices
  loadVoices();
  if (window.speechSynthesis) {
    window.speechSynthesis.onvoiceschanged = loadVoices;
    setTimeout(loadVoices, 300);
    setTimeout(loadVoices, 1000);
  }

  buildDeck();
  navigate('learn');
}

document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>