/* Simple – nur dunkel, im Stil von iOS. Überschreibt die hellen Farben des gemeinsamen Designs. */
:root, html[lang] { color-scheme:dark;
  --bg:#000; --panel:#1c1c1e; --panel2:#2c2c2e; --panel3:#3a3a3c; --fill:rgba(120,120,128,.24); --line:rgba(84,84,88,.6);
  --text:#fff; --muted:#98989f; --muted2:#636366; --accent:#0a84ff; --accent-ink:#fff;
  --green:#30d158; --orange:#ff9f0a; --red:#ff453a; --pink:#ff375f; --purple:#bf5af2; --indigo:#5e5ce6; --ok:#30d158; --warn:#ff9f0a; --bad:#ff453a; --radius:14px; --shadow:none; }
@media (prefers-color-scheme: light) { :root { --bg:#000; --panel:#1c1c1e; --panel2:#2c2c2e; --fill:rgba(120,120,128,.24); --line:rgba(84,84,88,.6); --text:#fff; --muted:#98989f; --accent:#0a84ff; --ok:#30d158; --warn:#ff9f0a; --bad:#ff453a; --shadow:none; } }
html, body { background:#000; }
body { overscroll-behavior-y:none; }
body.noscroll { overflow:hidden; }
.ic { width:22px; height:22px; flex:none; }
.wrap { max-width:720px; padding:0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right)); }
.muted { color:var(--muted); } .small { font-size:.82rem; } .grow { flex:1; min-width:0; }
button { -webkit-touch-callout:none; }

/* ---- Anmeldung ---- */
.gate { max-width:420px; margin:0 auto; padding:max(12vh, env(safe-area-inset-top)) 4px 40px; text-align:center; }
.gate .logo { width:88px; height:88px; margin:0 auto 16px; border-radius:22px; display:block; box-shadow:0 12px 40px rgba(10,132,255,.35); }
.gate h1 { font-size:2rem; margin:0 0 6px; letter-spacing:-.03em; } .gate > p { margin:0 0 24px; }
.gate .auth { margin:0; text-align:left; background:var(--panel); border:0; } .gate .auth h1 { display:none; }
.stack { display:grid; gap:10px; margin-top:18px; }
.wait { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); padding:10px; }
.spin { width:18px; height:18px; border-radius:50%; border:2.5px solid var(--panel3); border-top-color:var(--accent); animation:sp .8s linear infinite; } @keyframes sp { to { transform:rotate(360deg); } }

/* ---- Knöpfe ---- */
.btn-fill, .btn-tint, .btn-plain, .btn-danger { min-height:50px; border-radius:14px; font-size:1.02rem; font-weight:600; padding:12px 18px; gap:8px; }
.btn-fill { background:var(--accent); color:#fff; } .btn-fill:hover { background:#2b95ff; } .btn-fill:disabled { background:var(--panel2); color:var(--muted); opacity:1; }
.btn-tint { background:rgba(10,132,255,.16); color:#409cff; } .btn-tint:hover { background:rgba(10,132,255,.24); }
.btn-plain { background:transparent; color:var(--accent); } .btn-plain.danger { color:var(--red); }
.btn-danger { background:var(--red); color:#fff; }
.btn-tint.sm, .btn-plain.sm { min-height:34px; font-size:.86rem; padding:6px 12px; border-radius:10px; margin-top:8px; }
.wide { width:100%; }
.ib { min-height:34px; min-width:34px; width:34px; padding:0; border-radius:50%; background:var(--fill); color:var(--accent); } .ib .ic { width:18px; height:18px; }

/* ---- Grundgerüst ---- */
.app { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
.offline { position:sticky; top:0; z-index:30; margin:0 -16px; padding:calc(6px + env(safe-area-inset-top)) 16px 6px; background:#3a2a00; color:#ffd60a; font-size:.8rem; text-align:center; }
.lt { position:relative; padding:calc(18px + env(safe-area-inset-top)) 0 8px; display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.lt h1 { margin:0; font-size:2.1rem; font-weight:700; letter-spacing:-.035em; line-height:1.1; flex:1 1 100%; }
.lt-sub { font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; flex:1 1 100%; }
.lt-act { position:absolute; right:0; bottom:10px; width:36px; height:36px; min-height:0; padding:0; border-radius:50%; background:var(--fill); color:var(--accent); } .lt-act .ic { width:20px; height:20px; }
.sec { font-size:1.25rem; font-weight:700; letter-spacing:-.02em; margin:28px 0 10px; } .sec2 { font-size:1.05rem; margin:24px 0 8px; }
.foot { color:var(--muted2); font-size:.78rem; line-height:1.45; margin:22px 4px 8px; } .foot .ic { width:13px; height:13px; vertical-align:-2px; }
.tile { display:block; width:100%; text-align:left; background:var(--panel); border-radius:18px; padding:16px; margin:12px 0 0; color:var(--text); font-weight:400; border:0; min-height:0; } button.tile:active { transform:scale(.985); } button.tile:hover { background:#232325; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; background:var(--panel2); color:var(--text); font-size:.78rem; font-weight:500; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; min-height:0; }
.chip.new { background:rgba(10,132,255,.2); color:#64b0ff; } .chip.big { padding:7px 12px; font-size:.84rem; } .chip.big i { font-style:normal; color:var(--muted); font-size:.74rem; }
.pill { display:inline-block; padding:3px 9px; border-radius:7px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.03em; } .pill.alt { background:var(--indigo); }
.seg { display:flex; padding:2px; background:rgba(118,118,128,.24); border-radius:9px; margin:6px 0 4px; } .seg button { flex:1; min-height:32px; padding:4px; border-radius:7px; background:transparent; font-size:.9rem; font-weight:500; } .seg button.on { background:#636366; font-weight:600; box-shadow:0 3px 8px rgba(0,0,0,.25); }

/* ---- Tab-Leiste ---- */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:center; gap:0; padding:5px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background:rgba(22,22,24,.86); backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px); border-top:.5px solid rgba(84,84,88,.65); }
.tabbar button { flex:1; max-width:140px; flex-direction:column; gap:2px; min-height:50px; padding:3px 0; background:transparent; border-radius:10px; color:#8e8e93; font-size:.64rem; font-weight:500; } .tabbar button .ic { width:25px; height:25px; } .tabbar button.on { color:var(--accent); } .tabbar button:hover { background:transparent; color:#aeaeb2; } .tabbar button.on:hover { color:var(--accent); }

/* ---- Heute ---- */
.rings-tile { display:flex; align-items:center; gap:20px; } .rings { flex:none; } .ring-v { animation:ring 1s cubic-bezier(.2,.8,.2,1); } @keyframes ring { from { stroke-dasharray:0 var(--len); } }
.ring-legend { display:grid; gap:10px; flex:1; min-width:0; } .ring-legend div { display:flex; flex-direction:column; } .ring-legend .lab { font-size:.8rem; font-weight:600; } .ring-legend b { font-size:1.5rem; font-weight:600; line-height:1.15; letter-spacing:-.02em; } .ring-legend small { color:var(--muted); font-size:.95rem; font-weight:500; }
.streak { display:flex; align-items:center; gap:14px; } .streak b { display:block; font-size:1.05rem; } .streak span { color:var(--muted); font-size:.85rem; }
.flame { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(255,159,10,.14); color:#6e6e73; flex:none; } .flame .ic { width:28px; height:28px; } .streak.lit .flame { color:#ff9f0a; background:rgba(255,159,10,.2); box-shadow:0 0 24px rgba(255,159,10,.25); }
.streak.big { display:flex; gap:14px; align-items:center; } .streak.big .huge { font-size:2.4rem; line-height:1; } .streak.big .best { margin-left:auto; text-align:right; } .streak.big .best b { font-size:1.4rem; }
.cta { position:relative; display:block; width:100%; margin:12px 0 0; padding:18px 70px 18px 18px; text-align:left; border-radius:18px; background:linear-gradient(135deg,#0a84ff,#5e5ce6); color:#fff; min-height:0; box-shadow:0 10px 30px rgba(10,132,255,.25); } .cta:hover { background:linear-gradient(135deg,#2b95ff,#6f6df0); } .cta:active { transform:scale(.985); }
.cta-t { font-size:1.25rem; font-weight:700; letter-spacing:-.02em; } .cta-s { font-size:.88rem; opacity:.85; margin-top:2px; font-weight:400; }
.cta-i { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; } .cta-i .ic { width:20px; height:20px; } .cta-i.sm { position:static; transform:none; width:38px; height:38px; background:var(--accent); flex:none; }
.exam .exam-top, .examcard .exam-top { display:flex; align-items:center; gap:8px; } .exam-mid { display:flex; align-items:flex-end; justify-content:space-between; margin:10px 0 10px; gap:12px; }
.exam-mid .big { font-size:2.6rem; line-height:1; letter-spacing:-.04em; display:block; } .exam-mid span { color:var(--muted); font-size:.86rem; } .ready { text-align:right; } .ready b { font-size:1.4rem; display:block; color:var(--green); }
.bar { height:6px; background:var(--panel2); border-radius:3px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--green); border-radius:3px; transition:width .6s; }
.week { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; align-items:center; } .week > span:first-child { flex:1 1 100%; }
.exam.empty { display:flex; align-items:center; gap:12px; } .exam.empty b { display:block; } .exam.empty span { color:var(--muted); font-size:.86rem; } .exam.empty .ic { color:var(--muted2); }
.due { display:flex; align-items:center; gap:12px; } .due b { display:block; } .due span { color:var(--muted); font-size:.85rem; }
.quick { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.quick button { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; min-height:118px; padding:14px; border-radius:18px; background:var(--panel); text-align:left; font-weight:400; } .quick button:hover { background:#232325; }
.quick b { font-size:1rem; margin-top:auto; } .quick span:not(.qi) { color:var(--muted); font-size:.8rem; line-height:1.3; }
.qi { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; margin-bottom:10px; } .qi .ic { width:20px; height:20px; }

/* ---- Listen (inset grouped) ---- */
.group { background:var(--panel); border-radius:14px; overflow:hidden; margin-top:10px; }
.row { display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:8px 14px; background:transparent; border-radius:0; text-align:left; color:var(--text); font-weight:400; text-decoration:none; position:relative; justify-content:flex-start; }
.row + .row::before, .row + .row.static::before { content:""; position:absolute; top:0; right:0; left:14px; height:.5px; background:var(--line); } .group .row:has(.row-ic) + .row::before { left:60px; }
.row:hover { background:#252527; } .row:active { transform:none; background:#2c2c2e; } .row.static:hover { background:transparent; }
.row > .ic { width:16px; height:16px; color:var(--muted2); } .row.danger b { color:var(--red); font-weight:400; }
.row-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:1.2rem; background:var(--panel2); flex:none; } .row-ic.tint { color:#fff; } .row-ic .ic { width:19px; height:19px; }
.row-tx { flex:1; min-width:0; display:flex; flex-direction:column; } .row-tx b { font-weight:500; font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .row-tx small { color:var(--muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .val { color:var(--muted); font-size:.92rem; white-space:nowrap; } .tick { color:var(--accent); } .tick .ic { width:18px; height:18px; }
.row-ring { position:relative; width:34px; height:34px; flex:none; } .row-ring i { position:absolute; inset:0; display:grid; place-items:center; font-style:normal; font-size:.62rem; font-weight:600; color:var(--muted); }
.tbar { display:block; height:5px; border-radius:3px; background:var(--panel2); overflow:hidden; margin-top:6px; max-width:100%; } .tbar i { display:block; height:100%; border-radius:3px; }
.score { font-weight:600; font-size:.95rem; } .score.g { color:var(--green); } .score.o { color:var(--orange); } .score.r { color:var(--red); }
.cards-list .crow { border-top:.5px solid var(--line); } .cards-list .crow:first-child { border-top:0; }
.crow summary { list-style:none; cursor:pointer; padding:12px 14px; display:flex; gap:10px; align-items:flex-start; font-size:.92rem; } .crow summary::-webkit-details-marker { display:none; } .crow p { margin:0; padding:0 14px 12px 32px; color:var(--muted); font-size:.88rem; line-height:1.45; user-select:text; -webkit-user-select:text; }
.dotlvl { width:8px; height:8px; border-radius:50%; flex:none; margin-top:6px; }

/* ---- Plan ---- */
.examcard .countdown { display:flex; align-items:center; justify-content:space-between; margin:12px 0; } .huge { font-size:3.2rem; font-weight:700; letter-spacing:-.05em; line-height:1; display:block; } .countdown span { color:var(--muted); font-size:.88rem; }
.kv, .kv4 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .kv4 { grid-template-columns:1fr 1fr; } .kv div, .kv4 div { background:var(--panel2); border-radius:12px; padding:10px 12px; } .kv b, .kv4 b { display:block; font-size:1.2rem; } .kv span, .kv4 span { color:var(--muted); font-size:.76rem; }
.timeline { margin:14px 0 0 6px; padding-left:18px; border-left:2px solid var(--panel2); }
.wk { position:relative; padding:4px 0 18px; } .wk-dot { position:absolute; left:-25px; top:8px; width:12px; height:12px; border-radius:50%; background:var(--panel3); border:2px solid #000; }
.wk.now .wk-dot { background:var(--accent); box-shadow:0 0 0 4px rgba(10,132,255,.25); } .wk.gone { opacity:.45; } .wk.end .wk-dot { background:var(--green); }
.wk-h { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .wk-h b { font-size:.95rem; } .wk-t { display:flex; flex-wrap:wrap; gap:6px; } .wk-body p { margin:0; }
.empty-plan { text-align:center; padding:28px 20px; } .empty-plan b { font-size:1.2rem; } .empty-plan p { margin:8px 0 18px; font-size:.92rem; line-height:1.45; }
.big-ic { width:64px; height:64px; margin:0 auto 12px; border-radius:18px; display:grid; place-items:center; background:rgba(10,132,255,.16); color:var(--accent); } .big-ic .ic { width:32px; height:32px; }
.form .frow { display:flex; align-items:center; gap:12px; margin:0; padding:6px 14px; min-height:50px; color:var(--text); font-size:1rem; font-weight:400; } .form .frow + .frow { border-top:.5px solid var(--line); } .form .frow span { flex:none; width:110px; }
.form input { background:transparent; border:0; text-align:right; padding:6px 0; min-height:38px; color:#9cc9ff; } .form input:focus { box-shadow:none; background:transparent; } .form input[type=date] { color-scheme:dark; }

/* ---- Fortschritt ---- */
.two { display:grid; gap:12px; grid-template-columns:1fr; } .two .tile { margin:12px 0 0; } @media (min-width:640px) { .two { grid-template-columns:1fr 1fr; } }
.bars { position:relative; display:flex; align-items:flex-end; gap:8px; height:160px; padding-bottom:34px; } .bar-c { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; position:relative; }
.bar-v { width:100%; max-width:34px; border-radius:6px; background:var(--accent); min-height:3px; } .bar-c b { position:absolute; bottom:calc(var(--h,0) + 2px); font-size:.7rem; color:var(--muted); display:none; } .bar-c span { position:absolute; bottom:-24px; font-size:.75rem; color:var(--muted); } .bar-c.td span { color:var(--text); font-weight:700; }
.goal-l { position:absolute; left:0; right:0; border-top:1px dashed rgba(255,255,255,.25); pointer-events:none; } .goal-l span { position:absolute; right:0; top:-17px; font-size:.68rem; color:var(--muted); }
.heat { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:3px; } .heat i { aspect-ratio:1; border-radius:3px; display:block; }
.l0 { background:#1f1f22; } .l1 { background:#0e4429; } .l2 { background:#006d32; } .l3 { background:#26a641; } .l4 { background:#39d353; } .heat .fut { opacity:.25; } .heat .td { outline:1.5px solid #fff; outline-offset:-1px; }
.heat-leg { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:10px; font-size:.7rem; color:var(--muted); } .heat-leg i { width:11px; height:11px; border-radius:2px; display:inline-block; }
.steps { margin:0; padding-left:20px; line-height:1.9; } .steps .ic { width:16px; height:16px; vertical-align:-3px; color:var(--accent); }

/* ---- Sheets ---- */
.sh-scrim { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.5); display:flex; align-items:flex-end; justify-content:center; animation:fade .2s; } .sh-scrim.out { animation:fade .2s reverse forwards; } @keyframes fade { from { opacity:0; } }
.sh { width:min(560px,100%); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; background:#1c1c1e; border-radius:16px 16px 0 0; padding-bottom:env(safe-area-inset-bottom); animation:up .32s cubic-bezier(.2,.9,.3,1); } .sh.full { height:calc(100dvh - 40px); } .sh-scrim.out .sh { animation:up .22s reverse forwards; } @keyframes up { from { transform:translateY(100%); } }
@media (min-width:700px) { .sh-scrim { align-items:center; } .sh { border-radius:16px; max-height:min(86vh,760px); } .sh.full { height:min(86vh,760px); } .sh-grab { display:none; } }
.sh-grab { width:36px; height:5px; border-radius:3px; background:#48484a; margin:6px auto 0; flex:none; }
.sh header { display:flex; align-items:center; padding:10px 16px 6px; } .sh h2 { flex:1; margin:0; font-size:1.1rem; text-align:center; padding-left:30px; }
.sh-x { width:30px; height:30px; min-height:0; padding:0; border-radius:50%; background:#2c2c2e; color:#aeaeb2; } .sh-x .ic { width:15px; height:15px; }
.sh-body { padding:8px 16px 20px; overflow:auto; -webkit-overflow-scrolling:touch; } .sh-text { color:var(--muted); line-height:1.45; margin:4px 0 12px; } .sh-body .group { background:#2c2c2e; } .sh-body .row:hover { background:#353538; }
.sh-quote { background:#2c2c2e; border-radius:12px; padding:10px 12px; margin-bottom:10px; font-size:.9rem; } .sh-body textarea { background:#2c2c2e; }
.tp-head { display:flex; align-items:center; gap:16px; margin:4px 0 14px; } .tp-head .big { font-size:2rem; display:block; line-height:1; } .tp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .tp-stats div { background:#2c2c2e; border-radius:12px; padding:10px; text-align:center; } .tp-stats b { display:block; font-size:1.2rem; } .tp-stats span { color:var(--muted); font-size:.74rem; }
.btn-tint .ic { width:19px; height:19px; }

/* ---- Lernen & Quiz (Vollbild) ---- */
.player { position:fixed; inset:0; z-index:90; background:#000; display:flex; flex-direction:column; padding:env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left)); animation:fade .18s; }
.pl-top { display:flex; align-items:center; gap:12px; padding:12px 0 8px; max-width:680px; width:100%; margin:0 auto; }
.pl-x { width:34px; height:34px; min-height:0; padding:0; border-radius:50%; background:#1c1c1e; color:#aeaeb2; flex:none; } .pl-x .ic { width:16px; height:16px; }
.pl-bar { flex:1; height:6px; border-radius:3px; background:#1c1c1e; overflow:hidden; } .pl-bar i { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .3s; }
.pl-n, .pl-clock { font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; min-width:44px; text-align:right; } .pl-clock { font-weight:600; color:var(--text); } .pl-clock.low { color:var(--red); }
.pl-stage { flex:1; display:flex; align-items:center; justify-content:center; perspective:1400px; min-height:0; padding:8px 0; }
.flip { position:relative; width:min(640px,100%); height:min(62vh,460px); cursor:pointer; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.3,.9,.3,1); outline:none; } .flip.on { transform:rotateY(180deg); }
.flip.out-r { transform:rotateY(180deg) translateX(-40px); opacity:0; transition:transform .18s, opacity .18s; } .flip.out-l { transform:rotateY(180deg) translateX(40px); opacity:0; transition:transform .18s, opacity .18s; }
.face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:24px; padding:20px; display:flex; flex-direction:column; background:linear-gradient(160deg,#1f1f23,#141416); border:.5px solid #2c2c2e; box-shadow:0 20px 60px rgba(0,0,0,.6); overflow:auto; }
.face.back { transform:rotateY(180deg); background:linear-gradient(160deg,#16233a,#111827); border-color:#22314d; }
.fc-top { display:flex; align-items:center; gap:6px; } .fc-flag { margin-left:auto; width:32px; height:32px; min-height:0; padding:0; border-radius:50%; background:transparent; color:var(--muted2); } .fc-flag:hover { color:var(--orange); background:rgba(255,159,10,.12); } .fc-flag .ic { width:17px; height:17px; }
.fc-text { margin:auto 0; font-size:clamp(1.25rem,3.6vw,1.65rem); font-weight:600; line-height:1.3; letter-spacing:-.015em; text-align:center; padding:12px 4px; } .fc-text.ans { font-size:clamp(1.05rem,3vw,1.3rem); font-weight:500; line-height:1.45; text-align:left; user-select:text; -webkit-user-select:text; }
.fc-q { color:#8fb4ff; font-size:.9rem; margin-top:14px; line-height:1.35; } .fc-hint { text-align:center; color:var(--muted2); font-size:.8rem; }
.pl-act { padding:10px 0 14px; max-width:680px; width:100%; margin:0 auto; min-height:84px; }
.grades { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .grades button { flex-direction:column; gap:1px; min-height:62px; padding:6px 2px; border-radius:14px; background:color-mix(in srgb,var(--c) 18%,#1c1c1e); color:var(--c); } .grades button:hover { background:color-mix(in srgb,var(--c) 28%,#1c1c1e); } .grades b { font-size:.95rem; } .grades span { font-size:.72rem; color:var(--muted); font-weight:500; }
.row2 { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:8px; }
.pl-done { margin:auto; max-width:520px; width:100%; text-align:center; padding:20px 0; } .pl-done.scroll { overflow:auto; margin:0 auto; padding-top:30px; }
.done-ic { width:84px; height:84px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#000; animation:pop .45s cubic-bezier(.2,1.4,.4,1); } .done-ic .ic { width:44px; height:44px; stroke-width:3; } .done-ic.bad { background:var(--orange); } @keyframes pop { from { transform:scale(.4); opacity:0; } }
.pl-done h2 { font-size:1.6rem; margin:0 0 16px; letter-spacing:-.02em; } .done-stats { display:flex; justify-content:center; gap:10px; margin-bottom:12px; } .done-stats div { background:#1c1c1e; border-radius:14px; padding:12px 16px; min-width:94px; } .done-stats b { display:block; font-size:1.4rem; } .done-stats span { color:var(--muted); font-size:.78rem; }
.note { margin:0 auto 10px; } .note b { font-size:3.6rem; display:block; line-height:1; letter-spacing:-.04em; } .note span { color:var(--muted); } .note-n { margin-top:10px; display:inline-block; padding:6px 14px; border-radius:99px; background:#1c1c1e; font-weight:600; }
.qz { flex:1; max-width:680px; width:100%; margin:0 auto; overflow:auto; padding:6px 0; } .qz-meta { display:flex; align-items:center; gap:8px; } .qz-q { font-size:clamp(1.2rem,3.4vw,1.5rem); line-height:1.35; letter-spacing:-.015em; margin:16px 0 18px; user-select:text; -webkit-user-select:text; }
.opts { display:grid; gap:10px; } .opt { justify-content:flex-start; gap:12px; text-align:left; min-height:56px; padding:12px 14px; border-radius:14px; background:#1c1c1e; font-weight:500; font-size:.98rem; line-height:1.35; border:1.5px solid transparent; } .opt:hover { background:#252527; }
.opt .key { flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:#2c2c2e; color:var(--muted); font-size:.82rem; font-weight:700; }
.opt.sel { border-color:var(--accent); background:rgba(10,132,255,.14); } .opt.sel .key { background:var(--accent); color:#fff; }
.opt.right { border-color:var(--green); background:rgba(48,209,88,.14); } .opt.right .key { background:var(--green); color:#000; } .opt.wrong { border-color:var(--red); background:rgba(255,69,58,.14); } .opt.wrong .key { background:var(--red); color:#fff; } .opt:disabled { opacity:1; cursor:default; } .opt:disabled:not(.right):not(.wrong) { opacity:.5; }
.fb { margin-top:14px; padding:12px 14px; border-radius:14px; animation:fade .2s; } .fb.ok { background:rgba(48,209,88,.12); } .fb.no { background:rgba(255,69,58,.12); } .fb b { color:var(--green); } .fb.no b { color:var(--red); } .fb p { margin:4px 0 0; color:#d1d1d6; font-size:.92rem; line-height:1.45; }
.review { text-align:left; } .rv { padding:12px 14px; display:grid; gap:4px; border-top:.5px solid var(--line); } .rv:first-child { border-top:0; } .rv b { font-weight:500; } .rv-a { color:var(--green); font-size:.9rem; } .rv-c { color:var(--red); font-size:.9rem; } .rv p { margin:2px 0 0; color:var(--muted); font-size:.86rem; line-height:1.4; }
.toasts { bottom:calc(96px + env(safe-area-inset-bottom)); top:auto; left:50%; right:auto; transform:translateX(-50%); }
@media (min-width:900px) { .lt h1 { font-size:2.4rem; } .quick { grid-template-columns:repeat(4,1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
/* ---- Klassenarbeiten ---- */
.sec.first { margin-top:14px; }
.dbadge { width:42px; height:44px; border-radius:10px; background:rgba(255,159,10,.16); color:#ffb340; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; line-height:1; }
.dbadge b { font-size:1.05rem; } .dbadge small { font-size:.62rem; text-transform:uppercase; font-weight:700; margin-top:2px; letter-spacing:.03em; }
.row.addrow b { color:var(--accent); font-weight:500; } .row-ic.plus { background:rgba(10,132,255,.16); color:var(--accent); } .row-ic.plus .ic { width:18px; height:18px; }
.pill.orange { background:#ff9f0a; color:#000; }
.tile.arbeit { background:linear-gradient(160deg,#2a1d06,#1c1c1e 70%); }
.dbig { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:rgba(255,159,10,.16); color:#ffb340; flex:none; } .dbig .ic { width:34px; height:34px; }
.glab { font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; margin:16px 4px -4px; }
.row.tog { cursor:pointer; margin:0; font-size:1rem; } .row.tog input { position:absolute; opacity:0; width:0; height:0; min-height:0; }
.row.tog .swi { flex:none; width:51px; height:31px; border-radius:16px; background:#39393d; position:relative; transition:background .2s; } .row.tog .swi::after { content:""; position:absolute; left:2px; top:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .2s; }
.row.tog input:checked + .swi { background:var(--green); } .row.tog input:checked + .swi::after { transform:translateX(20px); }
.row.tog .chk { flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid #48484a; display:grid; place-items:center; color:transparent; } .row.tog .chk .ic { width:15px; height:15px; stroke-width:3; }
.row.tog input:checked + .chk { background:var(--accent); border-color:var(--accent); color:#fff; } .row.tog input:focus-visible + .chk, .row.tog input:focus-visible + .swi { outline:3px solid rgba(10,132,255,.5); }
.form .frow.note { padding:4px 14px; } .form textarea { background:transparent; border:0; padding:8px 0; min-height:0; resize:none; } .form textarea:focus { box-shadow:none; background:transparent; }