:root{--navy:#24324d;--blue:#159ac1;--blue-light:#e4f5fa;--amber:#e3a72f;--ink:#1f2a44;--muted:#667085;--line:#d8dee7;--bg:#eef2f6;--paper:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
header{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.header-inner{max-width:1160px;margin:auto;padding:14px 18px}.header-inner h1{margin:0;font-size:1.24rem;font-weight:750}.header-inner p{margin:4px 0 0;color:#d8e0ec;font-size:.9rem}
.wrap{max-width:1160px;margin:22px auto 60px;padding:0 12px}.lesson-shell{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,.07);overflow:hidden}
.lesson-top{display:grid;grid-template-columns:58px 1fr 58px;align-items:center;gap:14px;padding:18px 20px;background:linear-gradient(90deg,var(--blue-light),#fff);border-bottom:1px solid var(--line)}
.nav-arrow{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid #b9c5d3;background:#fff;color:var(--navy);text-decoration:none;font-size:1.65rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.nav-arrow:hover{border-color:var(--blue);background:#f7fdff}.nav-arrow.disabled{opacity:.25;pointer-events:none}
.lesson-heading{display:flex;align-items:center;justify-content:center;gap:18px;min-width:0}.lesson-number{width:88px;height:88px;flex:0 0 88px;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:3.7rem;line-height:1;font-weight:800;border-radius:5px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.lesson-title{min-width:0}.lesson-title h2{margin:0;font-size:1.9rem;color:#101828}.lesson-title p{margin:5px 0 0;color:var(--muted);line-height:1.35}
.lesson-content{background:#fff}.block{padding:22px;border-bottom:1px solid #edf0f4}.block:last-child{border-bottom:0}.block h3{text-align:center;font-size:1.45rem;margin:0 0 6px;color:#111827}
.instruction{text-align:center;margin:0 auto 14px;max-width:920px;line-height:1.45}.trackline{display:flex;gap:10px;align-items:center;margin-bottom:10px}.trackno{color:var(--blue);font-weight:800}.disc{font-size:1.2rem}
.scorecard{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;margin:10px 0}.scorecard.compact{display:inline-block;vertical-align:top;width:31%;margin-right:1.5%}.scoretop{display:flex;justify-content:space-between;align-items:center;gap:10px}.scoretop strong{display:block}.scoretop span{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}.scoretop button{border:0;background:var(--navy);color:#fff;border-radius:7px;padding:7px 9px;cursor:pointer}.scoretop button:hover{background:#344563}.scorecard p{font-size:.88rem;color:var(--muted)}.osmd{min-height:95px;overflow:hidden}
.symbols{display:flex;justify-content:center;gap:35px;flex-wrap:wrap;margin:12px 0}.symbol{border:1px solid var(--line);border-radius:9px;padding:10px 16px;text-align:center;min-width:160px}.symbol b{display:block;margin-top:6px}
.orig{padding:12px 22px 20px;border-bottom:1px solid #edf0f4}.orig details{color:var(--muted)}.orig img{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:8px}
.empty-lesson{min-height:58vh;display:grid;place-items:center;padding:40px;color:#8a94a5;font-size:2rem;font-weight:650}
.lesson-bottom-nav{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fafbfc;border-top:1px solid var(--line)}.lesson-bottom-nav .label{color:var(--muted);font-size:.82rem}.bottom-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy);font-weight:700;border:1px solid #c8d1dd;background:#fff;padding:8px 11px;border-radius:8px}.bottom-link.disabled{opacity:.25;pointer-events:none}
@media(max-width:800px){.lesson-top{grid-template-columns:44px 1fr 44px;padding:14px 10px}.nav-arrow{width:40px;height:40px;font-size:1.35rem}.lesson-heading{gap:12px}.lesson-number{width:68px;height:68px;flex-basis:68px;font-size:2.9rem}.lesson-title h2{font-size:1.45rem}.scorecard.compact{width:100%;margin-right:0}.block{padding:16px}}


/* Lektion 1 – zusätzliche Buch-/Infobereiche */
.lesson-symbols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  padding:18px 22px;
  border-bottom:1px solid #edf0f4;
  background:#fbfdfe;
}
.lesson-symbol{
  border:1px solid var(--line);
  border-radius:9px;
  padding:12px;
  text-align:center;
  background:#fff;
}
.lesson-symbol .big{
  display:block;
  font-size:1.4rem;
  font-weight:800;
  color:#101828;
  margin-bottom:5px;
}
.lesson-symbol b{display:block;margin-bottom:3px}
.lesson-symbol small{color:var(--muted);line-height:1.25}
.warmup{
  max-width:680px;
  margin:0 auto;
  line-height:1.5;
}
.warmup ol{margin:.5rem 0 0;padding-left:2rem}
.info-box{
  margin:16px 22px 22px;
  padding:18px 20px;
  border-radius:9px;
  background:#c9eff5;
  border:1px solid #a3dce6;
  line-height:1.45;
}
.info-box h3{
  text-align:left;
  margin:0 0 6px;
  font-size:1.05rem;
}
.info-box ol{margin:.5rem 0;padding-left:1.55rem}
.scoregrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:12px;
}
.scoregrid .scorecard{margin:0}
.exercise-label{
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  border:2px solid #344054;
  border-radius:4px;
  font-weight:800;
  margin-right:8px;
}
.blank-practice{
  border:1px dashed #aab5c3;
  border-radius:9px;
  padding:18px;
  color:var(--muted);
  text-align:center;
  min-height:100px;
  display:grid;
  place-items:center;
}
.quiz-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media(max-width:800px){
  .quiz-grid{grid-template-columns:1fr}
}