:root{
  --bg:#FBF8F3; --card:#fff; --ink:#2A2622; --muted:#6E6459;
  --line:#E6DED2; --bleu:#2B4C7E; --bleu-l:#EAF0F8;
  --rouge:#C1272D; --rouge-l:#FBEDEC; --vert:#2E7D5B; --vert-l:#E9F4EF;
  --gold:#B98B2E;
  --sh:0 1px 2px rgba(42,38,34,.05),0 4px 16px rgba(42,38,34,.06);
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* ---------- Kopf ---------- */
.top{background:linear-gradient(180deg,#fff 0%,#FBF8F3 100%);border-bottom:1px solid var(--line)}
.top .wrap{padding-top:30px;padding-bottom:24px;display:flex;flex-wrap:wrap;gap:24px;
  align-items:flex-end;justify-content:space-between}
.brand{display:flex;gap:16px;align-items:center}
.flag{width:34px;height:34px;border-radius:7px;flex:0 0 auto;box-shadow:var(--sh);
  background:linear-gradient(90deg,#0055A4 0 33.3%,#fff 33.3% 66.6%,#EF4135 66.6%)}
h1{font:600 30px/1.15 Georgia,"Times New Roman",serif;margin:0;letter-spacing:-.01em}
.sub{margin:5px 0 0;color:var(--muted);font-size:14.5px}
.stats{display:flex;gap:26px;margin:0}
.stats div{text-align:right}
.stats dt{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.stats dd{margin:2px 0 0;font:600 26px/1 Georgia,serif;color:var(--bleu)}

/* ---------- Reiter ---------- */
.tabs{position:sticky;top:0;z-index:20;background:rgba(251,248,243,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs button{
  border:0;background:none;font:inherit;font-size:15px;color:var(--muted);
  padding:13px 14px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--bleu);border-bottom-color:var(--bleu);font-weight:600}

main{padding-top:26px;padding-bottom:60px;min-height:60vh}

/* ---------- Bausteine ---------- */
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.search{flex:1;min-width:200px;position:relative}
.search input{width:100%;padding:11px 14px 11px 38px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font:inherit;font-size:15px;color:var(--ink)}
.search input:focus{outline:2px solid var(--bleu-l);border-color:var(--bleu)}
.search::before{content:"";position:absolute;left:14px;top:50%;width:13px;height:13px;
  margin-top:-8px;border:2px solid var(--muted);border-radius:50%;opacity:.7}
.search::after{content:"";position:absolute;left:24px;top:50%;width:7px;height:2px;
  background:var(--muted);transform:rotate(45deg);margin-top:3px;opacity:.7}
.count{color:var(--muted);font-size:14px}
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 15px;
  font:inherit;font-size:14.5px;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--bleu);color:var(--bleu)}
.btn.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.btn.big{padding:13px 22px;font-size:16px}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh)}
a.card{display:block;text-decoration:none;color:inherit;transition:.15s}
a.card:hover{transform:translateY(-2px);border-color:var(--bleu);
  box-shadow:0 6px 22px rgba(43,76,126,.13)}
.card h3{margin:0 0 8px;font:600 18px/1.3 Georgia,serif}
.meta{font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dot{width:3px;height:3px;border-radius:50%;background:var(--line)}
.tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12.5px;background:var(--bleu-l);color:var(--bleu);border-radius:20px;
  padding:3px 10px;white-space:nowrap}
.pills{margin-top:14px;display:flex;gap:14px;font-size:13px;color:var(--muted)}
.pills b{color:var(--ink);font-weight:600}
.sect{margin:34px 0 14px;font:600 14px/1 inherit;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.sect:first-child{margin-top:0}

/* ---------- Tabellen ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0}
table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:600;background:#FDFBF8;position:sticky;top:47px}
tbody tr:hover{background:#FDFBF8}
.vok{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.vok .fr{font-weight:600;color:var(--bleu)}
.vok .src{font-size:12.5px;color:var(--muted)}

/* ---------- Lektion ---------- */
.back{display:inline-block;margin-bottom:18px;color:var(--bleu);text-decoration:none;font-size:15px}
.back:hover{text-decoration:underline}
.lesson{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:34px 38px;box-shadow:var(--sh)}
.lesson h2{font:600 27px/1.25 Georgia,serif;margin:0 0 6px}
.lesson .meta{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.doc h3{font:600 21px/1.3 Georgia,serif;margin:32px 0 10px;color:var(--bleu)}
.doc h4{font:600 17px/1.3 Georgia,serif;margin:24px 0 8px}
.doc h5,.doc h6{font:600 15.5px/1.3 inherit;margin:20px 0 6px;color:var(--muted)}
.doc p{margin:11px 0}
.doc ul{margin:11px 0;padding-left:22px}
.doc li{margin:5px 0}
.doc li>ul{margin:4px 0}
.doc blockquote{margin:18px 0;padding:14px 20px;background:var(--bleu-l);
  border-left:3px solid var(--bleu);border-radius:0 8px 8px 0;font-size:16.5px}
.doc hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.doc code{background:#F4EFE7;padding:1px 5px;border-radius:4px;font-size:14px}
.doc table{border:1px solid var(--line);border-radius:8px}
.x{color:var(--rouge);font-style:normal}
.ok{color:var(--vert);font-style:normal}

.navlesson{display:flex;justify-content:space-between;gap:14px;margin-top:24px}
.navlesson a{color:var(--bleu);text-decoration:none;font-size:15px;max-width:48%}
.navlesson a:hover{text-decoration:underline}

/* ---------- Karteikarten ---------- */
.trainer{max-width:620px;margin:0 auto;text-align:center}
.flash{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);
  min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:38px 30px;cursor:pointer;margin:22px 0;position:relative;user-select:none}
.flash:hover{border-color:var(--bleu)}
.flash .q{font:600 27px/1.35 Georgia,serif;color:var(--bleu)}
.flash .a{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  font-size:21px;width:100%;max-width:430px}
.flash .hint{position:absolute;bottom:14px;font-size:13px;color:var(--muted)}
.flash .from{position:absolute;top:14px;font-size:12px;color:var(--muted)}
.flash.de .q{color:var(--ink)}
.progress{height:5px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:6px}
.progress i{display:block;height:100%;background:var(--bleu);transition:width .25s}
.tstat{font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between}
.tbtns{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.tbtns .no{border-color:#EBC9C7;color:var(--rouge)}
.tbtns .no:hover{background:var(--rouge-l)}
.tbtns .yes{border-color:#C6E2D5;color:var(--vert)}
.tbtns .yes:hover{background:var(--vert-l)}
.opts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}

/* ---------- Fehler / Sätze ---------- */
.korr{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;
  box-shadow:var(--sh)}
.korr .f{color:var(--rouge);text-decoration:line-through;text-decoration-color:#E9B7B4}
.korr .r{color:var(--vert);font-weight:600;margin-top:5px}
.korr .src{margin-top:9px;font-size:12.5px;color:var(--muted)}
.satz{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 19px;
  box-shadow:var(--sh)}
.satz .fr{font-size:17px;color:var(--bleu);font-weight:500}
.satz .de{color:var(--muted);font-size:14.5px;margin-top:4px}
.satz .src{margin-top:8px;font-size:12.5px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:50px 20px}
mark{background:#FDF0C9;color:inherit;border-radius:3px;padding:0 2px}

.foot{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:20px;
  padding-bottom:34px}

@media(max-width:640px){
  .top .wrap{padding-top:22px}
  h1{font-size:24px}
  .stats{gap:18px;width:100%;justify-content:space-between}
  .stats dd{font-size:21px}
  .stats div{text-align:left}
  .lesson{padding:22px 20px;border-radius:10px}
  .lesson h2{font-size:22px}
  th{position:static}
  .flash .q{font-size:23px}
}
@media print{
  .tabs,.bar,.foot,.tbtns,.back{display:none}
  body{background:#fff}
  .lesson{border:0;box-shadow:none;padding:0}
}