/* LAPL-Trainer – Stylesheet */
:root {
  --bg: #f3f5f9; --card: #ffffff; --text: #1a202c; --muted: #5b6577; --line: #dde2ea;
  --primary: #1d4ed8; --primary-soft: #dbe5ff; --ok: #15803d; --ok-soft: #dcfce7;
  --err: #b91c1c; --err-soft: #fee2e2; --warn: #b45309; --warn-soft: #fef3c7;
  --nav: #ffd54a; --radius: 12px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f141c; --card:#182030; --text:#e8ecf2; --muted:#9aa6b8; --line:#2a3546;
          --primary:#60a5fa; --primary-soft:#1e3a8a; --ok:#4ade80; --ok-soft:#14532d;
          --err:#f87171; --err-soft:#7f1d1d; --warn:#fbbf24; --warn-soft:#78350f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); }
a { color: var(--primary); }
h1 { font-size: 1.7rem; margin: .2em 0 .6em; }
h2 { font-size: 1.25rem; margin: 1.4em 0 .5em; border-bottom: 2px solid var(--line); padding-bottom: .2em; }
h3 { font-size: 1.05rem; margin: 1.1em 0 .4em; }
code, .mono { font-family: var(--mono); font-size: .95em; }
code { background: var(--line); padding: .1em .35em; border-radius: 4px; }
hr { border:0; border-top:1px solid var(--line); margin:1.5em 0; }

/* Topbar / Navigation */
.topbar { position: sticky; top:0; z-index: 50; background: var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:1rem; padding:.5rem 1rem; box-shadow: var(--shadow); }
.brand { font-weight: 700; text-decoration:none; color: var(--text); font-size:1.15rem; white-space:nowrap; }
.mainnav { display:flex; gap:.25rem; flex-wrap:wrap; margin-left:auto; }
.mainnav a { text-decoration:none; color: var(--text); padding:.45rem .7rem; border-radius: 8px; font-weight:500; font-size:.95rem; }
.mainnav a.active, .mainnav a:hover { background: var(--primary-soft); color: var(--primary); }
.mainnav .ico { margin-right:.3rem; }
.mainnav .logout { color: var(--muted); font-size:.85rem; }
.menu-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:8px; font-size:1.3rem; padding:.2rem .6rem; color:var(--text); }
@media (max-width: 820px) {
  .menu-toggle { display:block; }
  .mainnav { display:none; width:100%; flex-direction: column; }
  body.nav-open .mainnav { display:flex; }
  .topbar { flex-wrap:wrap; }
}

.container { max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.footer { text-align:center; color: var(--muted); font-size:.8rem; padding: 1rem; border-top:1px solid var(--line); }

/* Cards & Grid */
.card { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
.grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { display:grid; gap:1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.lead { font-size:1.08rem; color: var(--muted); }

/* Buttons & Inputs */
.btn { display:inline-block; border:1px solid var(--line); background: var(--card); color: var(--text); padding:.5rem .95rem; border-radius: 9px; cursor:pointer; font: inherit; font-weight:500; text-decoration:none; transition: background .15s; }
.btn:hover { background: var(--primary-soft); }
.btn.primary { background: var(--primary); border-color: var(--primary); color:#fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ok { background: var(--ok); border-color: var(--ok); color:#fff; }
.btn.sm { padding:.3rem .6rem; font-size:.85rem; }
.btn.block { display:block; width:100%; text-align:center; }
.btn-row { display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0; }
input[type=number], input[type=text], select { font: inherit; padding:.45rem .6rem; border:1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); width:100%; }
input[type=range] { width:100%; }
label { display:block; font-size:.88rem; color: var(--muted); margin-bottom:.15rem; }
.field { margin-bottom:.7rem; }
.fields { display:grid; gap:.6rem .9rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Badges, boxes */
.badge { display:inline-block; padding:.12em .55em; border-radius: 999px; font-size:.78rem; font-weight:600; background: var(--line); color: var(--text); }
.badge.nav { background:#dbe5ff; color:#1e3a8a; } .badge.law { background:#fee2e2; color:#7f1d1d; } .badge.agk { background:#dcfce7; color:#14532d; }
.box { border-left: 4px solid var(--primary); background: var(--primary-soft); padding:.7rem 1rem; border-radius: 0 10px 10px 0; margin:.8rem 0; }
.box.ok { border-color: var(--ok); background: var(--ok-soft); }
.box.warn { border-color: var(--warn); background: var(--warn-soft); }
.box.err { border-color: var(--err); background: var(--err-soft); }
.merk { font-size:1.05rem; font-weight:600; }
.formula { font-family: var(--mono); background: var(--line); padding:.6rem .9rem; border-radius: 8px; margin:.5rem 0; overflow-x:auto; font-size:.95rem; }
.kv { display:grid; grid-template-columns: max-content 1fr; gap:.25rem 1rem; font-size:.95rem; }
.kv dt { font-weight:600; } .kv dd { margin:0; }

/* Tables */
table { border-collapse: collapse; width:100%; margin:.6rem 0; font-size:.93rem; }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align: top; }
th { background: var(--line); font-weight:600; }
tr:hover td { background: rgba(127,127,127,.06); }

/* Progress */
.progress { height: 10px; background: var(--line); border-radius: 999px; overflow:hidden; }
.progress > span { display:block; height:100%; background: var(--primary); border-radius:999px; }
.stat { font-size: 2rem; font-weight:700; line-height:1; }
.stat-row { display:flex; gap:1.5rem; flex-wrap:wrap; margin:.5rem 0; }

/* Quiz */
.answers { list-style:none; padding:0; margin:.8rem 0; }
.answers li { border:1px solid var(--line); border-radius: 10px; padding:.65rem .9rem; margin:.4rem 0; cursor:pointer; display:flex; gap:.7rem; align-items:flex-start; transition: background .12s; }
.answers li:hover { background: var(--primary-soft); }
.answers li .key { font-weight:700; min-width:1.4em; color: var(--muted); }
.answers li.correct { background: var(--ok-soft); border-color: var(--ok); }
.answers li.wrong { background: var(--err-soft); border-color: var(--err); }
.answers li.disabled { cursor: default; }
.answers li.disabled:hover { background: inherit; }
.answers li.disabled.correct:hover { background: var(--ok-soft); }
.answers li.disabled.wrong:hover { background: var(--err-soft); }
.explain { display:none; margin-top:.8rem; }
.explain.show { display:block; }
.qmeta { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; color: var(--muted); font-size:.85rem; margin-bottom:.4rem; }
.feedback { font-weight:600; margin-top:.4rem; }
.feedback.ok { color: var(--ok); } .feedback.err { color: var(--err); }
.timer { font-family: var(--mono); font-size:1.1rem; }

/* VOR-Trainer */
.vor-wrap { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:start; }
@media (max-width: 860px) { .vor-wrap { grid-template-columns: 1fr; } }
svg.map, svg.cdi { width:100%; height:auto; display:block; }
.ctl { display:grid; grid-template-columns: 1fr auto; gap:.5rem 1rem; align-items:center; margin:.5rem 0; }
.ctl output { font-family: var(--mono); font-weight:700; font-size:1.2rem; min-width:3.5em; text-align:right; }
.toggle { display:flex; gap:.5rem; flex-wrap:wrap; }
.toggle label { display:inline-flex; gap:.3rem; align-items:center; color: var(--text); font-size:.95rem; cursor:pointer; }
details { border:1px solid var(--line); border-radius: 10px; padding:.6rem 1rem; margin:.6rem 0; background: var(--card); }
summary { cursor:pointer; font-weight:600; }
.cheat li { margin:.25rem 0; }
.step { display:flex; gap:.7rem; margin:.4rem 0; }
.step .n { background: var(--primary); color:#fff; border-radius:50%; width:1.6em; height:1.6em; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; font-size:.9rem; }
.tag { font-size:.75rem; background: var(--line); border-radius: 6px; padding:.1em .4em; margin-left:.3rem; }

/* Login */
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { width: min(360px, 92vw); display:flex; flex-direction:column; gap:.8rem; }
.login-box input { font:inherit; padding:.6rem; border:1px solid var(--line); border-radius:8px; }
.err { color: var(--err); }