/* B1 Kompakt – bunt & minimal, für iPhone optimiert */
:root{
  --ink:#16324a;--muted:#647a8c;--line:#e4ecf2;--bg:#f6f9fc;--card:#fff;
  --green:#17977c;--green2:#0f7c66;--greenTint:#e3f7ef;
  --sun:#fff1c7;--peach:#ffe3cc;--rose:#ffe2ea;--sky:#e1f1ff;--mint:#dcf6ea;--violet:#ece6ff;--blue:#dfe8ff;
  --red:#c2493f;--redTint:#fff0ee;--amber:#8a5a12;--amberTint:#fff5df;
  --tr:#b04a1f;--trTint:#fff4ec;
  --r:18px;--shadow:0 8px 24px rgba(22,60,95,.07);
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#f7fbff 0%,#f5faf7 100%);overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #5cc5a8;outline-offset:2px}
a{color:var(--green2)}
.shell{max-width:520px;margin:0 auto;min-height:100dvh;padding:0 16px calc(96px + env(safe-area-inset-bottom))}
main.fade{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Kopfzeile */
.head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 0 12px}
.brand{display:flex;align-items:center;font-size:19px;font-weight:800;letter-spacing:-.5px;color:#1d3c52;min-height:44px}
.brand i{font-style:normal;background:linear-gradient(135deg,#b6f0d8,#d8ebff);color:#0f6a58;border-radius:10px;padding:6px 8px;margin-right:8px;font-size:17px}
.headRight{display:flex;gap:8px;align-items:center}
.trToggle{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-size:13px;font-weight:750;color:#6a7c8a;transition:all .2s}
.trToggle.on{background:var(--trTint);border-color:#f3c9b0;color:var(--tr)}
.iconBtn{width:44px;height:44px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#55707f;box-shadow:var(--shadow)}
.iconBtn svg{width:22px;height:22px}

/* Türkisch-Zeilen */
.tr{display:block;color:var(--tr);font-size:13.5px;line-height:1.45;margin:3px 0 0;font-weight:560}
.tr::before{content:"🇹🇷 ";font-size:12px}
.tr.block{background:var(--trTint);border-radius:12px;padding:10px 12px;margin:10px 0}
[lang=tr]{font-style:normal}

/* Typografie */
.pageTitle{font-size:28px;letter-spacing:-.7px;line-height:1.15;margin:6px 0 4px;font-weight:820;color:#15354c}
.small{font-size:13px;line-height:1.5}.tiny{font-size:11.5px;color:#8597a5;line-height:1.5;margin:4px 0 12px}
.muted{color:var(--muted)}.center{text-align:center}
.sectionHead{display:flex;align-items:center;justify-content:space-between;margin:26px 0 8px}
.sectionHead h2{font-size:17px;margin:0;font-weight:800;letter-spacing:-.3px;color:#203e52}
.notice{font-size:13px;color:var(--amber);background:var(--amberTint);padding:10px 12px;border-radius:12px}

/* Buttons */
.primary{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:56px;padding:14px 20px;border-radius:16px;background:linear-gradient(135deg,#21ad8b,#13836d);color:#fff;font-weight:780;font-size:17px;box-shadow:0 10px 24px rgba(23,140,112,.25);margin:16px 0 6px;transition:transform .12s}
.primary span{font-size:20px}
.primary:active{transform:scale(.98)}
.primary.big{min-height:60px}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 24px rgba(23,140,112,.25)}50%{box-shadow:0 0 0 7px rgba(33,173,139,.18),0 10px 24px rgba(23,140,112,.25)}}
.secondary{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:14px;border:1.5px solid #cfe0e8;background:#fff;color:#1d4a5e;font-weight:720;padding:12px 16px;text-decoration:none}
.secondary.full{width:100%;margin:8px 0}
.secondary.danger{color:var(--red);border-color:#f1cbc6}
.ghost{display:block;width:100%;min-height:48px;color:#4f6f80;font-weight:700;font-size:15px;margin:2px 0}
.link{color:var(--green2);font-weight:720;font-size:14px;min-height:44px;padding:6px 0}
.back{display:inline-flex;align-items:center;min-height:44px;color:#4c7080;font-weight:720;font-size:15px;margin:0 0 2px}

/* Navigation unten */
.tabbar{position:fixed;z-index:20;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:5px 10px calc(5px + env(safe-area-inset-bottom))}
.tabinner{display:flex;max-width:520px;margin:0 auto}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:54px;justify-content:center;color:#8094a2;font-size:11.5px;font-weight:720}
.tab .ico svg{width:24px;height:24px;display:block}
.tab.active{color:var(--green2)}

/* Willkommen */
.dots{display:flex;gap:6px;justify-content:center;margin:4px 0 14px}
.dots i{width:8px;height:8px;border-radius:9px;background:#d6e2ea;transition:all .3s}
.dots i.on{width:26px;background:var(--green)}.dots i.done{background:#9fd8c6}
.hello{text-align:center;padding:8px 4px 4px}
.hello h1{font-size:32px;letter-spacing:-.8px;margin:6px 0 10px}
.lead{font-size:16.5px;line-height:1.55;color:#3b5668;margin:0 0 6px}
.bigEmoji{font-size:54px;display:inline-block;line-height:1.1}
.wave{animation:wave 1.6s ease-in-out 2;transform-origin:70% 70%}
@keyframes wave{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-4deg)}}
.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.obTitle{font-size:26px;letter-spacing:-.6px;margin:8px 0 4px;line-height:1.2}
.q{font-size:19px;margin:22px 0 2px}
.option{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:10px 0;min-height:68px;box-shadow:var(--shadow);transition:transform .12s,border-color .2s}
.option:active{transform:scale(.98);border-color:var(--green)}
.option>span{font-size:28px}
.option b{font-size:16px;font-weight:750;line-height:1.3}
.option small{display:block;font-weight:520;color:var(--muted);font-size:13px;margin-top:2px}
.input,.select{width:100%;min-height:52px;border:1.5px solid #d5e3ea;border-radius:14px;padding:12px 14px;background:#fff;font-size:16px;margin:12px 0 4px;-webkit-appearance:none;appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,#6e8796 50%),linear-gradient(135deg,#6e8796 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px;font-weight:650}
.selfBlock{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:14px 0;box-shadow:var(--shadow)}
.selfBlock b{font-size:16px}
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.face{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;border:1.5px solid var(--line);font-size:13px;font-weight:650;color:#4f6878;min-height:76px;transition:all .15s}
.face span{font-size:28px}
.face.on{border-color:var(--green);background:var(--greenTint);color:var(--green2);transform:scale(1.03)}
.how{list-style:none;padding:0;margin:16px 0}
.how li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:9px 0;box-shadow:var(--shadow)}
.how li>span{flex:none;width:30px;height:30px;border-radius:50%;background:var(--greenTint);color:var(--green2);font-weight:800;display:flex;align-items:center;justify-content:center}
.how b{font-size:15.5px}

/* Hinweise */
.hint{background:#eef6ff;border:1px solid #d6e8fb;border-radius:16px;padding:13px 15px;font-size:14.5px;line-height:1.55;color:#28465b;margin:14px 0}
.hint.soft{background:#f0faf5;border-color:#d3eedf}
.noticeBox{background:var(--amberTint);border:1px solid #f5dfb0;color:#5d4410;border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.5;margin:12px 0}

/* Startseite */
.greet h1{font-size:27px;letter-spacing:-.7px;margin:4px 0 2px;line-height:1.2}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;color:#3e5d70}
.chip.fire{background:#fff3e6;border-color:#ffd9b3;color:#a14d0f}
.installTip{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px dashed #b9d4e6;border-radius:16px;padding:12px;margin:12px 0;font-size:13.5px;line-height:1.45}
.installTip>span{font-size:24px}
.installTip small{display:block;color:var(--muted);margin-top:2px}
.installTip button{margin-left:auto;font-size:22px;color:#8aa0ae;min-width:36px;min-height:36px}
.hero{background:linear-gradient(140deg,#ffffff 0%,#eef6ff 55%,#eafaf2 100%);border:1px solid #dbe9f3;border-radius:24px;padding:20px 18px 14px;margin:14px 0;box-shadow:0 14px 34px rgba(40,90,140,.10)}
.hero.won{background:linear-gradient(140deg,#fffdf3 0%,#fff3d6 50%,#e7faef 100%)}
.hero h2{font-size:22px;letter-spacing:-.5px;margin:0;line-height:1.2}
.hero p{font-size:15px;line-height:1.5;color:#3d5a6c;margin:8px 0 0}
.heroTag{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:800;color:#3f6176;margin-bottom:10px}
.planHead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ring{--p:0;width:58px;height:58px;flex:none;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p)*360deg),#dfeaf0 0);display:flex;align-items:center;justify-content:center;transition:background .5s}
.ring span{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--green2)}
.steps{list-style:none;margin:14px 0 0;padding:0}
.steps li{margin:8px 0}
.steps button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:11px 12px;min-height:64px;transition:transform .12s}
.steps button:active{transform:scale(.98)}
.steps .current button{border-color:#7fd3bb;box-shadow:0 0 0 4px rgba(33,173,139,.12)}
.steps .done button{background:#f3fbf7;border-color:#cdeedf}
.stepNo{flex:none;width:28px;height:28px;border-radius:50%;background:#eef3f6;color:#61798a;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.current .stepNo{background:var(--green);color:#fff}
.done .stepNo{background:#c6eedc;color:var(--green2)}
.stepIcon{font-size:22px}
.stepText{min-width:0}
.stepText b{display:block;font-size:15px;line-height:1.3;font-weight:740}
.done .stepText b{color:#5c7a6f;text-decoration:line-through;text-decoration-color:#a7d9c4}
.stepText small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.stepText small span{color:var(--tr)}
.wonText{font-weight:650}
.tagRow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.tagBtn{background:#fff;border:1.5px solid #f2d3dd;color:#9b2f57;border-radius:999px;padding:10px 14px;font-weight:720;font-size:14px;min-height:44px}

/* Listen-Zeilen */
.row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;margin:9px 0;min-height:68px;box-shadow:var(--shadow);transition:transform .12s}
.row:active{transform:scale(.985)}
.rowIcon{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--sky)}
.tone-sun .rowIcon{background:var(--sun)}.tone-peach .rowIcon{background:var(--peach)}.tone-rose .rowIcon{background:var(--rose)}.tone-sky .rowIcon{background:var(--sky)}.tone-mint .rowIcon{background:var(--mint)}.tone-violet .rowIcon{background:var(--violet)}.tone-blue .rowIcon{background:var(--blue)}
.rowText{flex:1;min-width:0}
.rowText strong{display:block;font-size:15.5px;font-weight:740;line-height:1.3}
.rowText small{display:block;color:var(--tr);font-size:12.5px;margin-top:2px}
.badge{background:#ffe2ea;color:#a52d58;font-weight:800;font-size:12.5px;border-radius:999px;padding:4px 9px}
.chev{font-size:24px;color:#9bb0bd}
.ruleGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.ruleCard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 10px;min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:var(--shadow);font-size:14px}
.ruleCard span{font-size:26px}

/* Quiz */
.quizTop{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--muted);margin-top:2px}
.quizTop b{flex:1;color:#1f4054;font-weight:780}
.close{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:16px;color:#5c7686}
.bar{height:8px;background:#e1eaf0;border-radius:9px;overflow:hidden;margin:8px 0 16px}
.bar div{height:100%;background:linear-gradient(90deg,#3cc39e,#17977c);border-radius:9px;transition:width .35s ease}
.catLine{display:flex;gap:8px;flex-wrap:wrap}
.catPill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:780;border-radius:999px;padding:6px 11px;background:var(--violet);color:#5a3fa6}
.catPill.cat-lesen{background:var(--sky);color:#1e5f91}.catPill.cat-hoeren{background:var(--mint);color:#11745c}.catPill.again{background:var(--rose);color:#a52d58}
.passage{background:#fff;border:1px solid var(--line);border-left:4px solid #8cc8f0;border-radius:14px;padding:14px 15px;font-size:16px;line-height:1.65;white-space:pre-line;margin:12px 0;color:#21405a}
.listen{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin:12px 0 4px}
.audioBtn{width:100%;min-height:54px;border-radius:14px;background:#dff6ec;color:#0f6f5a;font-weight:780;font-size:16px;border:1.5px solid #bfe8d6;transition:transform .12s}
.audioBtn:active{transform:scale(.97)}
.audioBtn.slow{background:#fff;color:#386074;border-color:var(--line);font-size:15px}
.audioBtn.light{margin:8px 0}
.audioBtn:disabled{opacity:.7}
.question{font-size:21px;line-height:1.38;letter-spacing:-.3px;font-weight:780;margin:16px 0 14px;color:#132f45}
.answers{display:flex;flex-direction:column;gap:9px}
.choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:58px;padding:12px 14px;background:#fff;border:1.5px solid #dbe6ed;border-radius:15px;font-size:16px;line-height:1.38;box-shadow:0 3px 10px rgba(22,60,95,.04);transition:transform .1s,border-color .2s,background .2s}
.choice:active:not(:disabled){transform:scale(.985);border-color:var(--green)}
.choice .letter{flex:none;width:30px;height:30px;border-radius:9px;background:#eef3f6;color:#5c7686;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.choice.correct{background:#e6f8ef;border-color:#55bb8f}.choice.correct .letter{background:#2fae80;color:#fff}
.choice.wrong{background:var(--redTint);border-color:#e39a90}.choice.wrong .letter{background:#d9574c;color:#fff}
.choice.dim{opacity:.55}
.choice:disabled{cursor:default;color:inherit}
.choice.correct.anim{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.choice.wrong.anim{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.feedback{border-radius:16px;padding:14px 16px;margin:16px 0 0;animation:fadeIn .3s ease both}
.feedback.good{background:#e9f9f1;border:1px solid #c3ebd7}
.feedback.bad{background:#fff6f2;border:1px solid #f4d8cd}
.feedback>b{font-size:17px}
.feedback p{margin:8px 0 0;font-size:15px;line-height:1.55}
.feedback .right{color:#1c5c45}
.rule{margin-top:10px;background:#fff;border-radius:12px;border:1px solid #efe1d9}
.rule summary{list-style:none;padding:11px 12px;font-weight:740;font-size:14.5px;color:#7b4a2c;cursor:pointer;min-height:44px}
.rule summary::-webkit-details-marker{display:none}
.rule p{padding:0 12px 10px;margin:0;font-size:14.5px}

/* Ergebnis */
.resultTop{text-align:center;margin:10px 0}
.resultTop h1{font-size:25px;letter-spacing:-.5px;margin:6px 0 2px}
.score{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;text-align:center;margin:14px 0;box-shadow:var(--shadow)}
.score strong{font-size:50px;color:var(--green2);letter-spacing:-1.5px;line-height:1}
.score strong span{font-size:24px;color:#9ab0bb}
.score small{display:block;color:var(--muted);margin-top:6px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px;margin:10px 0;box-shadow:var(--shadow)}
.catRes{display:flex;align-items:center;gap:8px;font-size:15px;margin:6px 0}
.catRes span{flex:1;font-weight:650}
.lvl{font-style:normal;font-size:12px;font-weight:780;border-radius:999px;padding:3px 9px}
.lvl.good{background:#dcf5e8;color:#16774f}.lvl.mid{background:var(--sun);color:#8a6200}.lvl.low{background:var(--rose);color:#a52d58}
.meter{position:relative;height:9px;background:#e6edf2;border-radius:9px;overflow:visible;margin:4px 0 12px}
.meter div{height:100%;border-radius:9px;background:linear-gradient(90deg,#57c9a6,#17977c);transition:width .6s ease}
.meter.thin{height:6px;margin:6px 0 2px}
.meter.goal div{background:linear-gradient(90deg,#ffc977,#f29a4a)}
.meter.goal.reached div{background:linear-gradient(90deg,#57c9a6,#17977c)}
.meter.goal i{position:absolute;left:60%;top:-4px;bottom:-4px;width:2px;background:#33536a;border-radius:2px}
.meter+.tiny{margin-top:-6px}

/* Regel-Karte */
.lessonHead{display:flex;gap:12px;align-items:center;margin:4px 0 10px}
.lessonHead small{color:var(--muted);font-weight:700}
.lessonHead h1{font-size:23px;margin:2px 0 0;letter-spacing:-.4px;line-height:1.2}
.rulePanel p{font-size:16px;line-height:1.6;margin:0}
.rulePanel .tr.block{font-size:15px;margin:12px 0 0}
.exLine{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:7px 0;font-size:15.5px;line-height:1.45;min-height:52px}
.exLine span{flex:none}
.words{display:grid;gap:2px}
.words div{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid #eef2f5;font-size:15px}
.words div:last-child{border-bottom:0}
.words span{color:var(--tr);text-align:right}

/* Schreiben / Sprechen */
.stepLabel{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;margin:22px 0 8px;flex-wrap:wrap}
.stepLabel>span:not(.tr){width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.stepLabel .tr{flex-basis:100%;margin:0 0 0 37px}
.taskCard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin:10px 0}
.taskCard h2{font-size:19px;margin:8px 0 6px}
.taskCard p{font-size:15px;line-height:1.5;color:#36556a;margin:6px 0}
.taskMeta{display:flex;gap:6px;flex-wrap:wrap}
.typeTag{font-size:12px;font-weight:780;background:var(--peach);color:#9a4f12;border-radius:999px;padding:5px 10px}
.typeTag.ok{background:#dcf5e8;color:#16774f}
.leit{display:flex;flex-direction:column;gap:7px;margin:8px 0}
.leitItem{display:flex;align-items:center;gap:10px;text-align:left;border:1.5px solid var(--line);border-radius:13px;padding:10px 12px;min-height:52px;font-size:15px;line-height:1.35;background:#fbfdfe;transition:all .15s}
.leitItem span{flex:none;width:26px;height:26px;border-radius:50%;background:#eaf0f4;color:#58707f;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.leitItem.on{background:#ecfaf3;border-color:#9fdcc2;color:#245c49}
.leitItem.on span{background:var(--green);color:#fff}
.toggle{display:flex;align-items:center;width:100%;min-height:52px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 15px;font-weight:720;font-size:15px;color:#25576a;margin:8px 0;text-align:left}
.toggle::after{content:"⌄";margin-left:auto;color:#8aa0ae;transition:transform .2s}
.toggle.open::after{transform:rotate(180deg)}
.phrases{background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 12px 10px;margin:-2px 0 10px;animation:fadeIn .25s ease both}
.phrGroup{margin:10px 0}
.phrGroup>b{display:block;font-size:13px;color:#5d7585;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.phrGroup>b span{text-transform:none;color:var(--tr)}
.phrList{display:flex;flex-wrap:wrap;gap:7px}
.phr{background:#f2f8ff;border:1px solid #d6e7f7;color:#1c4a6a;border-radius:12px;padding:9px 11px;font-size:14.5px;text-align:left;line-height:1.35;min-height:44px}
.phr small{display:block;color:var(--tr);font-size:12px;margin-top:2px}
.phr:active{background:#dcefff}
.textarea{display:block;width:100%;min-height:240px;border:1.5px solid #cfe0e8;border-radius:16px;padding:14px;background:#fff;font-size:16px;line-height:1.6;resize:vertical}
.textarea:focus{border-color:#6ccaa9}
.wordBar{display:flex;justify-content:space-between;font-size:12.5px;color:#7d92a0;margin:6px 2px 0}
#wc{font-weight:780;color:#2f5568}
.checkList{padding:8px 14px}
.chk{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #eef2f5;font-size:15px;line-height:1.4}
.chk:last-child{border-bottom:0}
.chk>div{flex:1}
.chk small{display:block;color:var(--tr);font-size:12.5px;margin-top:2px}
.chk.ok{color:#2a6650}
.example{background:#f2fbf6;border:1px solid #d3eedf;border-radius:16px;padding:14px;white-space:pre-line;font-size:15.5px;line-height:1.6;margin:6px 0;animation:fadeIn .25s ease both}
.pointChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pointChips span{background:#f1f6f9;border-radius:10px;padding:6px 10px;font-size:13.5px;color:#3d5a6c}
.speakCard{background:linear-gradient(140deg,#ffffff,#eef7ff);border:1px solid #d9e9f5;border-radius:22px;padding:18px;margin:14px 0 0;box-shadow:var(--shadow)}
.kicker{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:#3f7da6}
.speakCard h2{font-size:22px;line-height:1.35;letter-spacing:-.3px;margin:12px 0 16px}
.timer{margin:12px 0 4px}
.timerBar{height:10px;background:#dbe8f0;border-radius:9px;overflow:hidden}
.timerBar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffb36b,#ff7a59);border-radius:9px}
.timer span{display:block;margin-top:7px;font-weight:780;font-size:15px;color:#a3461b}
.timer.over span{color:var(--green2)}
.checkRow{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #eef2f5;font-size:15px;line-height:1.4;cursor:pointer}
.checkRow:last-child{border-bottom:0}
.checkRow input{width:22px;height:22px;flex:none;accent-color:var(--green);margin:0}
.checkRow small{display:block;color:var(--tr);font-size:12.5px}

/* Lernstand */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}
.stats div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 10px;text-align:center;box-shadow:var(--shadow)}
.stats strong{display:block;font-size:22px;color:#1d4a5e}
.stats span{font-size:12.5px;color:var(--muted)}
.weakRow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid #eef2f5;min-height:48px;font-size:15px}
.weakRow:last-child{border-bottom:0}
.weakRow span{flex:1;font-weight:650}
.weakRow em{font-style:normal;font-size:12.5px;color:#a52d58;background:var(--rose);border-radius:999px;padding:3px 8px}
.weakRow b{color:var(--green2);font-size:14px}
.fold{background:#fff;border:1px solid var(--line);border-radius:16px;margin:16px 0}
.fold summary{list-style:none;display:flex;justify-content:space-between;padding:15px;font-weight:720;cursor:pointer;min-height:48px}
.fold summary::-webkit-details-marker{display:none}
.fold>div{padding:0 15px 10px}
.histLine{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;color:#4f6878;border-top:1px solid #eef2f5}

/* Einstellungen / Info */
.field{display:block;margin:12px 0}
.field>span{display:block;font-weight:720;font-size:14px;color:#3e5b6d}
.field .input,.field .select{margin-top:6px}
.switchRow{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;min-height:56px;font-weight:700;margin:12px 0}
.switchRow input{width:24px;height:24px;accent-color:var(--green)}
.partRow{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 14px;margin:9px 0;box-shadow:var(--shadow)}
.partRow>span{font-size:24px}
.partRow p{margin:3px 0 0;font-size:14.5px;line-height:1.45;color:#3e5b6d}
.linkBtn{margin:12px 0}
.modal{border:0;border-radius:22px;padding:22px;width:min(92vw,420px);box-shadow:0 24px 60px rgba(13,41,59,.3);color:var(--ink)}
.modal::backdrop{background:rgba(13,41,59,.45)}
.modal h2{margin:0 0 10px;font-size:21px}
.modal p{font-size:15.5px;line-height:1.55;color:#3f5b6c}
#toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#17344a;color:#fff;padding:11px 18px;border-radius:999px;font-weight:700;font-size:14.5px;opacity:0;pointer-events:none;transition:all .25s;z-index:50;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti span{position:absolute;top:-40px;font-size:26px;animation:fall linear both}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.9}}

@media (min-width:640px){.shell{border-left:1px solid #e8eef2;border-right:1px solid #e8eef2;background:rgba(255,255,255,.35)}}
@media (max-width:350px){.shell{padding-left:12px;padding-right:12px}.pageTitle{font-size:24px}.question{font-size:19px}.trToggle span{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}