/* css/app.css — schuelerseitige LernApp + Dashboards + Login */

:root {
  color-scheme: light dark;
  --akz:#207162; --gut:#0a7d33; --schlecht:#b3261e; --warn-bg:#fbe9e7; --gut-bg:#e5f4ea;
  --bg:#f6f7f9; --fg:#1b2330; --karte:#fff; --linie:#dde1e8; --grau:#6b7685;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#10141b; --fg:#e7ebf1; --karte:#171c25; --linie:#2b333f; --akz:#5cbfae;
          --warn-bg:#2c1b1a; --gut-bg:#16281c; }
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

a { color:var(--akz); text-decoration:none; }
a:visited { color:var(--akz); }
a:hover { text-decoration:underline; }
input, select, textarea { accent-color:var(--akz); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, button:focus-visible { outline:2px solid var(--akz); outline-offset:1px; }
.btn, .btn:link, .btn:visited { color:#fff; }
.btn.sek, .btn.sek:link, .btn.sek:visited { color:var(--akz); }
.aktion.primaer, .aktion.primaer:link, .aktion.primaer:visited { color:#fff; }
.adminnav a.hier, .adminnav a.hier:link, .adminnav a.hier:visited { color:#fff; }

h1 { font-size:1.4rem; margin:.2rem 0 .3rem; }
h2 { font-size:1.05rem; margin:1.6rem 0 .4rem; }
code { font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:.9em; }
ul { margin:.4rem 0 0; padding-left:1.2rem; }

/* ---- Layout ---- */
.bar { display:flex; justify-content:space-between; align-items:center; gap:1rem;
       padding:.7rem 1rem; background:var(--karte); border-bottom:1px solid var(--linie); font-size:.9rem; }
.bar .who { font-size:.9rem; color:var(--grau); }

/* ---- Admin-Navigation ---- */
.adminnav { display:flex; flex-wrap:wrap; gap:.15rem; padding:.4rem .7rem;
            background:var(--karte); border-bottom:1px solid var(--linie); font-size:.9rem; }
.adminnav a { padding:.4rem .7rem; border-radius:8px; color:var(--akz); }
.adminnav a:hover { background:color-mix(in srgb, var(--akz) 12%, transparent); text-decoration:none; }
.adminnav a.hier { background:var(--akz); color:#fff; }
main, .wrap { max-width:680px; margin:0 auto; padding:2rem 1.25rem 4rem; }
main { max-width:640px; padding:1.25rem 1rem 4rem; }
p.sub { margin:0 0 1.5rem; color:var(--grau); }

/* ---- Karten ---- */
.karte, .card { background:var(--karte); border:1px solid var(--linie); border-radius:14px;
                padding:1.1rem 1.15rem; margin:.9rem 0; }
.card { border-radius:12px; padding:1.1rem 1.25rem; margin:0 0 1rem; }

.row { display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; border-bottom:1px solid var(--linie); }
.row:last-child { border-bottom:0; }
.row .k, .k { color:var(--grau); }
.row .v, .v { text-align:right; font-variant-numeric:tabular-nums; }
.hint { color:var(--grau); font-size:.9rem; }
.ok { color:var(--gut); font-weight:600; }
.bad { color:var(--schlecht); font-weight:600; }

/* ---- Buttons ---- */
.btn { display:inline-block; padding:.7rem 1.2rem; border:0; border-radius:10px;
       background:var(--akz); color:#fff; font-size:1rem; text-decoration:none; cursor:pointer; }
.btn:hover { text-decoration:none; filter:brightness(1.06); }
.btn.sek { background:transparent; color:var(--akz); border:1px solid var(--linie); }
.btn.gross { display:block; text-align:center; font-size:1.1rem; font-weight:700; padding:1rem; }
.btn-reihe { display:flex; gap:.6rem; justify-content:space-between; align-items:center; margin-top:1rem; }

/* ---- Fortschritt ---- */
.fortschritt { height:8px; border-radius:6px; background:var(--linie); overflow:hidden; margin:.4rem 0; }
.fortschritt > i { display:block; height:100%; background:var(--gut); }

/* ---- Banner ---- */
.banner { border-radius:12px; padding:.9rem 1.1rem; margin:0 0 1.25rem; font-weight:600; }
.banner.good { background:var(--gut-bg); color:var(--gut); }
.banner.warn { background:var(--warn-bg); color:var(--schlecht); }

/* ---- Lernassistent-Start ---- */
.lern-start { margin:1.1rem 0; }
.lern-alt { display:flex; flex-direction:column; margin-top:1rem; }
.lern-alt a { padding:.8rem .2rem; border-bottom:1px solid var(--linie); }
.lern-alt a:last-child { border-bottom:0; }

/* ---- Frage-Darstellung ---- */
.frage .f-nr { font:.8rem/1 ui-monospace,monospace; color:var(--grau); letter-spacing:.03em; }
.frage img.f-bild, .frage video.f-film { max-width:100%; height:auto; border-radius:10px; margin:.6rem 0; }
.frage audio.f-audio { width:100%; margin:.6rem 0; }
ul.f-antworten audio.a-audio { display:block; height:34px; margin:0 .8rem .6rem; }
.f-freitext audio.a-audio { display:block; height:34px; margin:.5rem 0 0; }
.frage .f-bu { font-style:italic; color:var(--grau); }
.frage .f-titel { font-weight:600; margin:.5rem 0; }
.frage .f-unter { margin:.2rem 0 .6rem; }
.frage table { border-collapse:collapse; margin:.5rem 0; }
.frage td, .frage th { border:1px solid var(--linie); padding:.3rem .5rem; }
ul.f-antworten { list-style:none; margin:.6rem 0 0; padding:0; }
ul.f-antworten li { border:1px solid var(--linie); border-radius:10px; margin:.4rem 0; }
ul.f-antworten label { display:flex; gap:.6rem; padding:.7rem .8rem; cursor:pointer; align-items:flex-start; }
ul.f-antworten li.ist-richtig { border-color:var(--gut); background:color-mix(in srgb,var(--gut) 12%,transparent); }
ul.f-antworten li.ist-falsch  { border-color:var(--schlecht); background:color-mix(in srgb,var(--schlecht) 12%,transparent); }
.tag-ok { color:var(--gut); font-size:.8rem; font-weight:600; }
.f-freitext { margin:.6rem 0; font-size:1.05rem; }
.f-freitext input { width:5.5rem; padding:.5rem; font-size:1rem; border:1px solid var(--linie);
                    border-radius:8px; text-align:center; background:var(--karte); color:var(--fg); }
.f-loesung { color:var(--gut); font-weight:600; margin:.5rem 0 0; }
.ergebnis { font-weight:700; }
.ergebnis.gut { color:var(--gut); }
.ergebnis.schlecht { color:var(--schlecht); }

/* ---- Dashboard (Schueler + Mitarbeiter) ---- */
.aktionen { display:grid; gap:.7rem; margin:0 0 1.2rem; }
@media (min-width:520px) { .aktionen { grid-template-columns:1fr 1fr; } }
.aktion { display:block; padding:1rem 1.1rem; border-radius:14px; }
.aktion:hover { text-decoration:none; }
.aktion .a-titel { display:block; font-size:1.15rem; font-weight:700; }
.aktion .a-sub { display:block; font-size:.85rem; opacity:.85; margin-top:.1rem; }
.aktion.primaer { background:var(--akz); color:#fff; }
.aktion.zweit { background:var(--karte); color:var(--akz); border:2px solid var(--akz); }

.fussnav { display:flex; gap:1.3rem; flex-wrap:wrap; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--linie); }
.fussnav a { color:var(--grau); font-size:.92rem; }

.gruss { margin:.1rem 0 1rem; color:var(--grau); font-size:.95rem; }

/* Willkommen: Fenster über der (abgedunkelten) App, nur beim ersten Login */
body.modal-auf { overflow:hidden; }
.ov { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1.2rem;
      background:rgba(10,15,20,.55); }
.ov-box { width:min(94vw,440px); background:var(--karte); border:1px solid var(--linie);
          border-radius:16px; padding:1.5rem 1.4rem; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.ov-box h2 { margin-top:0; }

/* Admin-Übersicht: gleiche Breite wie die übrigen Admin-Seiten */
body.adminansicht .wrap { max-width:1040px; }

.tools a { display:inline-block; margin:.15rem .4rem .15rem 0; padding:.4rem .7rem;
           border:1px solid var(--linie); border-radius:8px; font-size:.9rem; }

.kpi { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin:0 0 1rem; }
@media (min-width:560px) { .kpi { grid-template-columns:repeat(4,1fr); } }
.kpi > div { background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:.8rem .9rem; }
.kpi b { display:block; font-size:1.35rem; line-height:1.2; }
.kpi span { color:var(--grau); font-size:.78rem; }
details.card summary::-webkit-details-marker { color:var(--grau); }

/* ---- Login ---- */
body.login { min-height:100vh; display:grid; place-items:center; padding:0; }
.login-card { width:min(92vw,360px); background:var(--karte); border:1px solid var(--linie);
              border-radius:14px; padding:1.6rem 1.5rem; }
.login-card label { display:block; font-size:.85rem; color:var(--grau); margin:.7rem 0 .2rem; }
.login-card input { width:100%; padding:.6rem .7rem; border:1px solid var(--linie); border-radius:8px;
                    font-size:1rem; background:var(--karte); color:var(--fg); }
.login-card button { margin-top:1.1rem; width:100%; padding:.65rem; border:0; border-radius:8px;
                     background:var(--akz); color:#fff; font-size:1rem; cursor:pointer; }
.login-card .fehler { margin:.6rem 0 0; color:var(--schlecht); font-size:.9rem; }
.login-card .sub { margin:.9rem 0 0; font-size:.8rem; color:var(--grau); }