/* Disce – App-Stylesheet (römische Antike trifft Lernspiel) */
:root {
  --app: #F7F1E1; --card: #FFFDF6; --card-2: #F3EAD4;
  --ink: #2C2417; --muted: #8A7B5E; --line: #E4D9BE;
  --gold: #C08A0F; --gold-2: #E8C25A; --gold-tint: #F6E7BE;
  --porphyry: #7A2E5D; --laurel: #4E7C3A; --laurel-t: #DBE7CC;
  --terra: #C0432B; --terra-t: #F3D9D1;
  --shadow: rgba(52,38,12,.16); --shadow-lg: rgba(52,38,12,.28);
  --font-display: "Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,serif;
  --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --app:#1A140B; --card:#241C11; --card-2:#2E2416; --ink:#F2E7CE; --muted:#A6906B;
    --line:#3B2F1C; --gold:#E6B534; --gold-2:#F6D57A; --gold-tint:#40331A;
    --porphyry:#C56AA3; --laurel:#7FB25E; --laurel-t:#263320; --terra:#E56A50; --terra-t:#3A211A;
    --shadow:rgba(0,0,0,.4); --shadow-lg:rgba(0,0,0,.55);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; }   /* nur .view scrollt, nicht die ganze Seite */
#app { height: 100%; }
body {
  font-family: var(--font-ui); color: var(--ink);
  background: var(--app);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
h1,h2,h3 { font-family: var(--font-display); margin: 0; }

.boot { min-height: 100dvh; display: grid; place-items: center; color: var(--muted); font-size: 18px; }
.boot-owl { font-size: 32px; display: block; text-align: center; }

/* ── App-Rahmen ── */
.app-frame {
  max-width: 460px; margin: 0 auto; height: 100%;
  display: flex; flex-direction: column; background: var(--app);
  box-shadow: 0 0 60px -20px var(--shadow-lg); overflow: hidden;
}
.view {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 14px;
}
.view.center { justify-content: center; align-items: center; text-align: center; }

/* ── Topbar ── */
.topbar {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--card); border-bottom: 1px solid var(--line); z-index: 10;
}
.topbar .brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-right: auto; display: flex; align-items: center; gap: 6px; }
.stat { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; }
.stat.streak { color: var(--terra); } .stat.xp { color: var(--gold); }
.hearts { letter-spacing: 1px; font-size: 15px; }
.heart-full { color: var(--terra); } .heart-empty { color: color-mix(in srgb, var(--terra) 28%, transparent); }

/* ── Tabbar ── */
.tabbar { flex: none; display: flex; background: var(--card); border-top: 1px solid var(--line); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
.tabbar button {
  flex: 1; background: none; border: 0; color: var(--muted); font-size: 11px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; cursor: pointer;
}
.tabbar button .ic { font-size: 20px; }
.tabbar button.on { color: var(--gold); }

/* ── Typo helpers ── */
.h-lg { font-size: 26px; } .h-md { font-size: 20px; }
.muted { color: var(--muted); }
.sectlabel { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.center-text { text-align: center; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px; border-radius: 14px; font-weight: 800; font-size: 15px; border: 2px solid transparent; cursor: pointer; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-gold { background: var(--gold); color: #3a2a06; box-shadow: 0 4px 0 color-mix(in srgb, var(--gold) 55%, #000); }
.btn-solid { background: var(--laurel); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--laurel) 60%, #000); }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--terra); color: #fff; }
.btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.btn:active { transform: translateY(1px); }

/* ── Cards / Tiles ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 6px 16px -14px var(--shadow-lg); }
.greet { display: flex; align-items: center; gap: 12px; }
.greet .owl { font-size: 42px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { position: relative; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 14px; min-height: 108px;
  display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; color: inherit; }
.tile .emoji { font-size: 28px; }
.tile .name { font-weight: 700; font-size: 15px; }
.tile .meta { font-size: 11px; color: var(--muted); margin-top: auto; }
.tile.active { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: linear-gradient(160deg, var(--card), var(--gold-tint)); }
.tile.soon { opacity: .68; cursor: default; }
.badge-soon { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--porphyry); background: color-mix(in srgb, var(--porphyry) 14%, transparent); border-radius: 999px; padding: 3px 7px; }
.ring { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p,0)*1%), color-mix(in srgb,var(--gold) 18%, transparent) 0); display: grid; place-items: center; }
.ring::after { content: attr(data-label); width: 28px; height: 28px; background: var(--card); border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; }

/* ── Lernpfad ── */
.pathwrap { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 20px; }
.node { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin: 10px auto;
  font-size: 22px; font-weight: 800; color: #fff; border: 3px solid var(--card); box-shadow: 0 5px 0 var(--shadow-lg); cursor: pointer; }
.node.l { margin-left: 22%; } .node.r { margin-right: 22%; }
.node.done { background: linear-gradient(180deg, var(--laurel), color-mix(in srgb,var(--laurel) 70%, #000)); }
.node.now { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #3a2a06; box-shadow: 0 0 0 5px var(--gold-tint), 0 6px 0 var(--shadow-lg); }
.node.lock { background: var(--card-2); color: var(--muted); box-shadow: 0 4px 0 var(--shadow); border-color: var(--line); cursor: not-allowed; }
.node .lbl { position: absolute; bottom: -18px; font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* ── Flashcard ── */
.flashtop { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; }
.flashcard { min-height: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 30px -18px var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; gap: 8px; position: relative; cursor: pointer; }
.flashcard .chip { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--porphyry);
  background: color-mix(in srgb, var(--porphyry) 12%, transparent); border-radius: 999px; padding: 4px 12px; }
.flashcard .latin { font-family: var(--font-display); font-size: 34px; font-weight: 700; }
.flashcard .divider { width: 55%; height: 1px; background: var(--line); margin: 10px 0; }
.flashcard .de { font-family: var(--font-display); font-size: 26px; color: var(--laurel); }
.flashcard .hint { position: absolute; bottom: 14px; font-size: 11px; color: var(--muted); }
.rule-box { font-size: 13px; }
.rule-box table { border-collapse: collapse; width: 100%; margin-top: 6px; font-size: 12px; }
.rule-box th, .rule-box td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }

/* ── Übung ── */
.progress { height: 10px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width .3s; }
.question { font-family: var(--font-display); font-size: 20px; text-align: center; margin: 6px 0; text-wrap: balance; }
.question b { color: var(--gold); }
.opt { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 14px; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; width: 100%; color: inherit; }
.opt.correct { border-color: var(--laurel); background: var(--laurel-t); }
.opt.wrong { border-color: var(--terra); background: var(--terra-t); }
.opt:disabled { cursor: default; }
.feedback { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 12px; margin-top: 8px; }
.feedback.good { background: var(--laurel-t); } .feedback.good b { color: var(--laurel); }
.feedback.bad { background: var(--terra-t); } .feedback.bad b { color: var(--terra); }

/* ── Formulare ── */
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted); }
.field input, .field select {
  padding: 12px 13px; border: 2px solid var(--line); border-radius: 12px; font-size: 15px; background: var(--card); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--gold); }
.reqs { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.reqs li.met { color: var(--laurel); }

/* ── Admin / Nutzerliste ── */
.user-row { display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; flex: none;
  background: linear-gradient(140deg, var(--porphyry), var(--gold)); }
.user-row .who { flex: 1; min-width: 0; }
.user-row .who b { display: block; font-size: 14px; }
.user-row .who small { color: var(--muted); font-size: 12px; }
.role { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 3px 7px; }
.role.admin { color: var(--gold); background: var(--gold-tint); }
.role.pupil { color: var(--porphyry); background: color-mix(in srgb, var(--porphyry) 14%, transparent); }
.role.pending { color: var(--terra); background: var(--terra-t); }
.row-actions { display: flex; gap: 6px; }
.icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--card-2); display: grid; place-items: center; cursor: pointer; font-size: 15px; }

/* ── Admin-Inhaltseditor (Vokabeln/Regeln/Texte/Formen pflegen) ── */
.editcontent input, .editcontent select, .editcontent textarea {
  width: 100%; min-width: 0; max-width: 100%;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card-2); color: var(--ink); font: inherit; font-size: 13px;
}
.editcontent textarea { resize: vertical; line-height: 1.45; }
.editcontent input:focus, .editcontent select:focus, .editcontent textarea:focus { outline: none; border-color: var(--gold); }
.editcontent summary { color: var(--muted); }
.editcontent .icon-btn { flex: none; }

/* ── PDF-Kandidaten ── */
.cand { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; }
.cand .dot { width: 10px; height: 10px; border-radius: 50%; }
.cand.ok .dot { background: var(--laurel); } .cand.low .dot { background: var(--gold); }
.cand.low { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.cand input { padding: 7px 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); width: 100%; }
.cand .la { font-family: var(--font-display); font-weight: 700; }

/* ── Belohnung ── */
.reward-owl { font-size: 72px; }
.rewstats { display: flex; gap: 8px; width: 100%; }
.rewstat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; }
.rewstat .v { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold); }
.rewstat .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.badge-earned { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: linear-gradient(120deg, var(--gold-tint), var(--card)); border: 1px solid color-mix(in srgb,var(--gold) 45%, var(--line)); border-radius: 16px; padding: 12px; }
.badge-earned .medal { font-size: 34px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; }
.badge { text-align: center; font-size: 10px; color: var(--muted); }
.badge .medal { font-size: 30px; display: block; filter: grayscale(1); opacity: .4; }
.badge.on .medal { filter: none; opacity: 1; }

/* ── Toast ── */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 100;
  background: var(--ink); color: var(--app); padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px -8px var(--shadow-lg); max-width: 88%; }
.toast.err { background: var(--terra); color: #fff; }

/* ── Offline-Banner ── */
.offline-banner { background: var(--porphyry); color: #fff; text-align: center; font-size: 12px; font-weight: 600; padding: 5px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }