:root{
  --bg:#f6f7fb; --panel:#ffffff; --ink:#172033; --muted:#657089; --brand:#6554ff; --brand2:#00a4a6; --good:#16794c; --bad:#b42318; --soft:#eef0ff; --line:#dde2ef; --shadow:0 18px 40px rgba(23,32,51,.12); --radius:24px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(160deg,#f7f8ff,#eefaf8);color:var(--ink);-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
.app-shell{max-width:1180px;margin:0 auto;padding:22px;min-height:100vh}
.hero{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:linear-gradient(135deg,#6554ff,#00a4a6);color:white;border-radius:32px;padding:28px;box-shadow:var(--shadow)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:.78rem;margin:0 0 8px;opacity:.85}.hero h1{font-size:clamp(2rem,5vw,4.4rem);line-height:.95;margin:0 0 12px}.subtitle{max-width:720px;font-size:1.1rem;margin:0;opacity:.92}.hero-card{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:24px;padding:22px;min-width:160px;text-align:center}.hero-score{font-size:3rem;font-weight:900}.hero-label{font-weight:700}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 10px 24px rgba(23,32,51,.06)}.timer-panel{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin:22px 0}.timer-panel h2,.section-head h2,.big-card h2{margin:0 0 6px}.timer-panel p,.section-head p,.big-card p{color:var(--muted);margin:0}.timer-box{display:grid;grid-template-columns:auto 84px auto;gap:10px;align-items:center}.timer-box label{font-weight:800}.timer-box input{border:2px solid var(--line);border-radius:16px;padding:10px;text-align:center}.timer-display{font-variant-numeric:tabular-nums;font-weight:900;font-size:2rem;background:var(--soft);padding:8px 16px;border-radius:16px;min-width:116px;text-align:center}.button-row{display:flex;gap:10px;flex-wrap:wrap}.btn{border:0;border-radius:999px;padding:12px 18px;font-weight:850;cursor:pointer;background:#eef1f7;color:var(--ink);box-shadow:0 4px 10px rgba(23,32,51,.08)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--brand);color:white}.btn.ghost{background:transparent;border:2px solid var(--line);box-shadow:none}.btn.large{font-size:1.05rem;padding:15px 22px}.tabs{display:flex;gap:10px;overflow:auto;padding:4px 0 18px}.tab{border:0;background:white;border:1px solid var(--line);border-radius:999px;padding:12px 18px;font-weight:900;color:var(--muted)}.tab.active{background:var(--ink);color:white}.view{display:none}.view.active{display:block}.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.big-card{min-height:220px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}.card-icon{font-size:3rem}.section-head{margin:8px 0 16px}.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.module-card{display:flex;flex-direction:column;gap:10px}.module-card .icon{font-size:2rem}.module-card h3{margin:0}.module-card p{margin:0;color:var(--muted)}.chipline{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:.8rem;font-weight:800;padding:4px 8px;border-radius:999px;background:var(--soft);color:#4438ca}.training{position:fixed;inset:0;background:rgba(11,17,31,.58);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;z-index:20}.training.hidden{display:none}.training-card{width:min(780px,100%);background:white;border-radius:30px;padding:24px;box-shadow:var(--shadow)}.training-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.training-meta{font-weight:900;color:var(--muted)}.rule-box{margin:16px 0;padding:14px 16px;border-radius:18px;background:#fff7df;border:1px solid #ffe19a;font-weight:750}.answer-area{display:grid;gap:12px;margin:18px 0}.answer-input{width:100%;font-size:1.25rem;border:2px solid var(--line);border-radius:18px;padding:14px;text-transform:none}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.choice{border:2px solid var(--line);border-radius:18px;background:white;padding:14px;font-weight:900}.choice.selected{border-color:var(--brand);background:var(--soft)}.feedback{min-height:32px;font-weight:900}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}.training-actions{justify-content:flex-end}.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.progress-card h3{margin:0 0 8px}.progress-card p{margin:4px 0;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-weight:750;margin:28px 6px 6px}
@media (max-width:760px){.app-shell{padding:12px}.hero,.timer-panel,.grid.two{grid-template-columns:1fr}.timer-box{grid-template-columns:1fr}.hero-card{text-align:left}.training-card{padding:18px}.tabs{position:sticky;top:0;background:rgba(246,247,251,.95);z-index:5}.timer-display{text-align:left}.button-row .btn{flex:1}}
.answer-label{display:grid;gap:6px;font-weight:900;color:var(--ink)}
.answer-label .answer-input{margin-top:2px}


.auto-options{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  margin:1rem 0 1.15rem;
}
.check-option{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-weight:700;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(79,70,229,.14);
  border-radius:16px;
  padding:.75rem .85rem;
}
.check-option input{
  width:1.2rem;
  height:1.2rem;
}
.answer-area.tense-table{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
@media (max-width:760px){.answer-area.tense-table{grid-template-columns:1fr}}

/* Version 2.9.1: echte 3-Spalten-Tabelle fuer Zeitformen */
.answer-area.tense-table-wrap{display:block;overflow-x:auto;margin:18px 0}
table.tense-table{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
table.tense-table th{background:var(--soft);color:#4438ca;font-weight:900;text-align:left;padding:12px 14px;border-bottom:2px solid var(--line)}
table.tense-table td{padding:12px;border-right:1px solid var(--line)}
table.tense-table td:last-child,table.tense-table th:last-child{border-right:0}
table.tense-table .answer-input{font-size:1.05rem;min-width:180px}
@media (max-width:760px){table.tense-table{min-width:620px}.answer-area.tense-table-wrap{padding-bottom:4px}}

.version-notice{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:16px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#166534;
  font-weight:700;
  box-shadow:0 10px 25px rgba(22,101,52,.08);
}

/* Version 3.0: FRESCH-Zeitformen mit vorgegebenem Feld */
.mini-badge{
  display:inline-block;
  margin-left:.5rem;
  padding:.15rem .45rem;
  border-radius:999px;
  background:#fff;
  color:#4438ca;
  border:1px solid rgba(68,56,202,.25);
  font-size:.72rem;
  font-weight:900;
  vertical-align:middle;
}
.given-answer{
  min-height:52px;
  display:flex;
  align-items:center;
  padding:14px;
  border-radius:18px;
  background:#f8fafc;
  border:2px dashed var(--line);
  color:var(--ink);
  font-weight:900;
  font-size:1.05rem;
}
.choice:focus-visible,.btn:focus-visible,.answer-input:focus-visible,.tab:focus-visible{
  outline:4px solid rgba(101,84,255,.25);
  outline-offset:2px;
}

/* Version 3.1: Leseheld */
.answer-area.reading-wrap{
  display:grid;
  gap:16px;
  max-height:min(72vh,860px);
  overflow:auto;
  padding-right:4px;
}
.reading-passage{
  background:#f8fafc;
  border:2px solid var(--line);
  border-radius:24px;
  padding:18px;
}
.reading-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.reading-kicker{
  margin:0 0 4px;
  color:var(--muted);
  font-weight:900;
  font-size:.88rem;
  letter-spacing:.02em;
}
.reading-passage h3{
  margin:0;
  font-size:1.45rem;
}
.reading-passage p{
  line-height:1.7;
  font-size:1.06rem;
  margin:12px 0 0;
}
.reading-question-list{
  display:grid;
  gap:12px;
}
.reading-question{
  border:2px solid var(--line);
  border-radius:22px;
  padding:16px;
  background:#fff;
}
.reading-question h3{
  margin:0 0 6px;
  color:#4438ca;
}
.reading-question p{
  margin:0 0 12px;
  font-weight:850;
}
.reading-choices .choice{
  text-align:left;
  line-height:1.35;
}
@media (max-width:760px){
  .answer-area.reading-wrap{max-height:68vh}
  .reading-head{display:block}
  .reading-passage{padding:14px}
  .reading-passage p{font-size:1rem;line-height:1.62}
}

.module-stat{font-weight:900;color:#166534;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:999px;padding:6px 10px;display:inline-block;margin:0}

/* Version 3.5: Timer-Alarm als Vordergrund-Dialog */
.timer-alarm{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(11,17,31,.68);
  backdrop-filter:blur(8px);
}
.timer-alarm.hidden{display:none}
.timer-alarm-card{
  width:min(520px,100%);
  background:#fff;
  border-radius:32px;
  padding:30px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.75);
}
.timer-alarm-icon{
  font-size:4rem;
  line-height:1;
  margin-bottom:10px;
}
.timer-alarm-card h2{
  margin:0 0 8px;
  font-size:clamp(1.7rem,5vw,2.5rem);
}
.timer-alarm-card p{
  margin:0 auto 20px;
  max-width:36rem;
  color:var(--muted);
  font-weight:750;
  line-height:1.5;
}
.timer-alarm-actions{justify-content:center}
.timer-alarm-open{overflow:hidden}
@media (max-width:760px){
  .timer-alarm-card{padding:24px 18px}
  .timer-alarm-actions .btn{flex:1}
}