/* ===========================================================================
   Ascend — tablet-first Lern-Hub. Plain CSS, keine Frameworks (leicht lesbar).
   Farben & Maße liegen in :root, damit du alles an einer Stelle anpassen kannst.
   =========================================================================== */
:root {
  --bg:        #0b1020;
  --bg-soft:   #121933;
  --card:      #161f3d;
  --card-2:    #1d2950;
  --line:      #283561;
  --text:      #e8ecf8;
  --muted:     #9aa6c8;
  --accent:    #5b8cff;   /* Coding */
  --accent-2:  #34d399;   /* Bio */
  --gold:      #fbbf24;
  --danger:    #f87171;
  --radius:    16px;
  --gap:       14px;
  --maxw:      900px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #16224a 0%, var(--bg) 55%) fixed;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  padding-bottom: 86px;            /* Platz für die Tabbar */
  padding-top: env(safe-area-inset-top);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px;
  background: rgba(11,16,32,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { background: none; border: 0; color: var(--text); display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 18px; font-weight: 800; }
.brand-mark { color: var(--accent); font-size: 20px; }
.stats-mini { display: flex; gap: 8px; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-size: 13px; }
.chip-streak b { color: var(--gold); }
.chip-level b { color: var(--accent); }
.chip-xp b { color: var(--accent-2); }

/* ---------- Daily goal ---------- */
.daygoal { max-width: var(--maxw); margin: 12px auto 0; padding: 0 16px; display: flex; align-items: center; gap: 10px; }
.daygoal-bar { flex: 1; height: 8px; background: var(--card); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.daygoal-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .4s ease; }
.daygoal-label { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------- View / layout ---------- */
.view { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 8px; }
.h-title { font-size: 26px; font-weight: 800; margin: 6px 0 2px; }
.h-sub { color: var(--muted); margin: 0 0 18px; }
.section-title { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 26px 0 10px; }

/* ---------- Cards & grid ---------- */
.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; cursor: pointer; transition: transform .12s ease, border-color .12s ease;
}
.card:active { transform: scale(.99); }
.card:hover { border-color: var(--accent); }
.card.flat { cursor: default; }
.card.flat:hover { border-color: var(--line); }

.track-card { display: flex; flex-direction: column; gap: 10px; }
.track-head { display: flex; align-items: center; gap: 12px; }
.track-ico { font-size: 30px; }
.track-name { font-size: 19px; font-weight: 700; }
.track-meta { font-size: 13px; color: var(--muted); }

.progress { height: 9px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress i { display: block; height: 100%; background: var(--accent); }
.progress.bio i { background: var(--accent-2); }

/* ---------- Lesson list ---------- */
.module { margin-bottom: 22px; }
.module-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.module-title { font-size: 17px; font-weight: 700; }
.module-meta { font-size: 12px; color: var(--muted); }
.lesson {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s;
}
.lesson:hover { border-color: var(--accent); }
.lesson-check { width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; font-size: 13px; }
.lesson.done .lesson-check { background: var(--accent-2); border-color: var(--accent-2); color: #06281c; }
.lesson-body { flex: 1; min-width: 0; }
.lesson-title { font-weight: 600; }
.lesson.done .lesson-title { color: var(--muted); text-decoration: line-through; }
.lesson-sub { font-size: 12px; color: var(--muted); }
.lesson-xp { font-size: 12px; color: var(--accent-2); font-weight: 700; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; border: 1px solid var(--line); background: var(--card-2); color: var(--text); border-radius: 12px; padding: 11px 16px; font-size: 15px; font-weight: 600; cursor: pointer; transition: filter .12s; }
.btn:hover { filter: brightness(1.12); }
.btn-primary { background: linear-gradient(90deg, var(--accent), #6d7bff); border: 0; }
.btn-bio { background: linear-gradient(90deg, var(--accent-2), #10b981); border: 0; color: #06281c; }
.btn-ghost { background: transparent; }
.btn-wide { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Lesson detail ---------- */
.back { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 0; margin-bottom: 6px; }
.res { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; transition: border-color .12s; }
.res:hover { border-color: var(--accent); }
.res-ico { font-size: 22px; }
.res-title { font-weight: 600; }
.res-meta { font-size: 12px; color: var(--muted); }
.res-type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.concept { background: var(--card); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
.concept b { color: var(--accent); }
textarea.notes { width: 100%; min-height: 110px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; color: var(--text); padding: 12px; font-family: inherit; font-size: 15px; resize: vertical; }

/* ---------- Review / flashcards ---------- */
.flashcard { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 22px; min-height: 200px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.flash-q { font-size: 21px; font-weight: 700; }
.flash-a { font-size: 18px; color: var(--accent-2); margin-top: 16px; }
.flash-hint { color: var(--muted); font-size: 13px; margin-top: 14px; }
.rate-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.rate { padding: 14px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font-weight: 700; }
.rate small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.rate.again { border-color: var(--danger); }
.rate.good  { border-color: var(--accent); }
.rate.easy  { border-color: var(--accent-2); }

/* ---------- Stats ---------- */
.stat-big { font-size: 34px; font-weight: 800; }
.stat-lbl { color: var(--muted); font-size: 13px; }
.badge { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 13px; margin: 0 6px 8px 0; }
.badge.locked { opacity: .4; }

/* ---------- Empty / misc ---------- */
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.empty .big { font-size: 40px; }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(20px); background: var(--card-2); border: 1px solid var(--accent); color: var(--text); padding: 12px 18px; border-radius: 12px; opacity: 0; transition: all .3s; z-index: 50; font-weight: 600; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Lektion: Lerntext & Code ---------- */
.prose h3 { font-size: 17px; margin: 18px 0 6px; color: var(--text); }
.prose p { margin: 0 0 10px; white-space: pre-wrap; }
.codeblock { background: #0d1430; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.55; color: #cfe1ff; white-space: pre; margin: 0 0 12px; }
.adapt { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin: 6px 0 14px; font-size: 14px; }

/* ---------- Quiz ---------- */
.quiz-q { margin-bottom: 18px; }
.quiz-qtext { font-weight: 600; margin-bottom: 8px; }
.opt { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; margin-bottom: 8px; color: var(--text); cursor: pointer; font-size: 15px; transition: border-color .12s, background .12s; }
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt.chosen { border-color: var(--accent); background: rgba(91,140,255,.10); }
.opt.correct { border-color: var(--accent-2); background: rgba(52,211,153,.14); }
.opt.wrong { border-color: var(--danger); background: rgba(248,113,113,.14); }
.opt:disabled { cursor: default; }
.explain { font-size: 13px; color: var(--muted); margin: 4px 2px 0; }
.quiz-score { font-size: 18px; font-weight: 800; margin: 8px 0; color: var(--accent-2); }
details.more { margin: 8px 0 4px; }
details.more > summary { cursor: pointer; color: var(--muted); padding: 10px 0; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary { color: var(--text); }

/* ---------- Passcode-Sperre ---------- */
#gate { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(800px 400px at 50% 0%, #16224a, var(--bg)); display: grid; place-items: center; padding: 24px; }
.gate-box { width: 100%; max-width: 340px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; }
.gate-mark { font-size: 40px; color: var(--accent); }
.gate-box h1 { margin: 6px 0 2px; font-size: 26px; }
.gate-box p { color: var(--muted); margin: 0 0 16px; }
#gate-input { width: 100%; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; color: var(--text); padding: 12px 14px; font-size: 16px; text-align: center; }
#gate-btn { width: 100%; margin-top: 10px; background: linear-gradient(90deg, var(--accent), #6d7bff); border: 0; color: #fff; border-radius: 12px; padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
#gate-err { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ---------- Bottom tabbar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  background: rgba(11,16,32,.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tab { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 12px; border-radius: 10px; }
.tab span { font-size: 20px; }
.tab.active { color: var(--text); }
.tab.active span { transform: translateY(-1px); }