@font-face{font-family:"Swiza";src:url("fonts/swiza-regular-webfont.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Swiza";src:url("fonts/swiza-semibold-webfont.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Swiza";src:url("fonts/swiza-bold-webfont.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
 --navy:oklch(20.1% 0.05 264.7);--navy-2:oklch(27% 0.055 264.7);--ink:oklch(20.1% 0.05 264.7);--ink-2:oklch(36% 0.03 264.7);--ink-3:oklch(46% 0.025 264.7);
 --cyan:#0fc1f3;--petrol:#0b6e8c;--green:#9ad65a;--bg:#f4f8fb;--soft:#e5f6fb;--line:oklch(0.91 0.01 250);--surface:#fff;
 --ok:#2b6e16;--ok-bg:#eaf7dd;--warn:#7a4f00;--warn-bg:#fff4dc;--err:#a3261b;--err-bg:#fdecea;--info:#0b6e8c;--info-bg:#e5f6fb;
 --r-s:10px;--r-m:14px;--r-l:20px;--r-xl:28px;
}
body{margin:0;background:#eef2f6}
.ak{font-family:Swiza,system-ui,sans-serif;color:var(--ink);font-size:15px;line-height:1.55}
.ak *{box-sizing:border-box}
.ak button{font:inherit;color:inherit}
.ak a{color:var(--petrol)}

/* Entwurfsleiste */
.draft{background:#f4f6f9;border-bottom:2px dashed oklch(0.82 0.02 250);padding:12px 24px;display:grid;gap:10px}
.drow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dl{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-right:6px;min-width:84px}
.pill{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line)}
.pill.on{background:var(--navy);color:#fff;border-color:transparent}
.pill.st.on{background:#7a4f00;color:#fff}
.pill:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.proto{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;background:#fff4dc;border:1px solid #f0d49a;color:#5c3d00;font-size:13px}
.proto b{font-weight:700}

/* Bühne */
.stage{padding:32px 24px 48px;display:flex;justify-content:center}
.frame{container-type:inline-size;background:var(--bg);border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(13,24,48,.18);border:1px solid var(--line);width:1360px;height:880px;position:relative}
.frame.m{width:390px;height:844px;border-radius:44px;border:10px solid #0d1830;box-shadow:0 30px 70px rgba(13,24,48,.3)}

/* App-Gerüst – Kopfleiste wie Website (gn-header) */
.app{display:flex;flex-direction:column;height:100%}
.hdr{height:72px;flex-shrink:0;display:flex;align-items:center;gap:18px;padding:0 28px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:relative;z-index:10}
.logo{text-decoration:none;display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo img{height:38px}
.logo span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);border-left:1px solid var(--line);padding-left:10px;line-height:1.1}
.hnav{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:12px;font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap}
.nav:hover{background:#f4f8fb}
.nav.on::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--cyan)}
.nav:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.nav .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--cyan);color:#000;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.hright{margin-left:auto;display:flex;align-items:center;gap:10px}
.av{width:36px;height:36px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.av.c{background:var(--cyan);color:#000}
.av.s{width:28px;height:28px;font-size:11px}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.scroll{flex:1;overflow:auto;padding:0 0 40px;min-height:0}
.wrapc{max-width:1120px;margin:0 auto;padding:0 32px}
.pad{padding-top:28px}
.mtop{display:none}
.tabbar{display:none}
/* Hero-Fläche wie Website */
.herosec{position:relative;padding:20px 0 34px}
.herobg{position:absolute;top:10px;left:14px;right:14px;bottom:0;border-radius:32px 40px 40px 120px;overflow:hidden;background:radial-gradient(79.12% 153.68% at 99.5% -1.61%,rgba(141,233,28,.1494) 0%,rgba(28,223,233,.1494) 39.84%,rgba(15,193,243,.18) 100%)}
.dots{position:absolute;inset:0;background-image:radial-gradient(oklch(20.1% 0.05 264.7 / .14) 1.2px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 75% 25%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 75% 25%,#000 30%,transparent 75%)}
.herosec .wrapc{position:relative;padding-top:18px}
.chipb{margin:0;display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;box-shadow:0 1px 2px rgba(13,24,48,.08)}
.chipb span{padding:3px 10px;border-radius:999px;background:var(--cyan);color:#000}
.crumbs{font-size:13.5px;color:var(--ink-3);margin-bottom:12px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.sect{padding-top:28px}
/* Buttons */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-m);font-weight:700;font-size:15px;white-space:nowrap}
.btn.pri{background:var(--cyan);color:#000}
.btn.pri:hover{background:#00b0e3}
.btn.navy{background:var(--navy);color:#fff}
.btn.sec{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
.btn.sec:hover{box-shadow:inset 0 0 0 1.5px var(--petrol)}
.btn.ghost{color:var(--petrol);padding:0 10px}
.btn.sm{min-height:36px;padding:0 12px;font-size:13.5px;border-radius:11px}
.btn.lg{min-height:52px;padding:0 22px;font-size:16px}
.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.card-link:focus-visible,.chip:focus-visible,.opt:focus-visible,.tab:focus-visible,.icb:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.icb{all:unset;box-sizing:border-box;cursor:pointer;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--ink-2);position:relative}
.icb .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:999px;background:var(--cyan);border:2px solid #fff}

/* Typo */
.kick{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol)}
.h1{margin:4px 0 0;font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.015em}
.h2{margin:0;font-size:20px;line-height:1.25;font-weight:700}
.h3{margin:0;font-size:16px;line-height:1.3;font-weight:700}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.lead{margin:8px 0 0;color:var(--ink-2);font-size:16px}

/* Karten */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:20px}
.card.soft{background:#f8fbfd}
.card-link{all:unset;box-sizing:border-box;cursor:pointer;display:block;background:#f6fbfd;border:1px solid var(--line);border-radius:var(--r-l);padding:18px;transition:border-color .15s,box-shadow .15s}
.card-link:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,24,48,.07)}
.secth{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.stack{display:grid;gap:16px}
.row{display:flex;align-items:center;gap:12px}
.ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--petrol)}
.ico.s{width:30px;height:30px;border-radius:9px}
.ico.navy{background:var(--navy);color:var(--cyan)}

/* Tags & Status (immer mit Text/Icon) */
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;background:#f1f4f7;color:var(--ink-2);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.err{background:var(--err-bg);color:var(--err)}
.tag.info{background:var(--info-bg);color:var(--info)}
.tag.navy{background:var(--navy);color:#fff}
.tag.sample{background:#fff4dc;color:#7a4f00;border:1px dashed #e0b85c}
.tag svg{flex-shrink:0}

/* Fortschritt */
.bar{height:8px;border-radius:999px;background:#e4ebf1;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--petrol)}
.bar.c i{background:var(--cyan)}
.ring{--p:60;width:64px;height:64px;border-radius:999px;background:conic-gradient(var(--petrol) calc(var(--p)*1%),#e4ebf1 0);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ring b{width:50px;height:50px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.segs{display:flex;gap:4px}.segs i{flex:1;height:8px;border-radius:999px;background:#e4ebf1}.segs i.d{background:var(--petrol)}.segs i.n{background:var(--cyan)}

/* Mein Lerntag */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.next{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:26px 28px;box-shadow:0 24px 60px rgba(13,24,48,.18);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background-image:radial-gradient(70% 120% at 100% 0%,rgba(15,193,243,.22),transparent 70%)}
.next .kick{color:var(--cyan)}
.next h2{margin:6px 0 0;font-size:24px;line-height:1.2}
.next p{margin:8px 0 0;color:rgba(255,255,255,.8)}
.next .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.next .tag{background:rgba(255,255,255,.12);color:#fff}
.plan{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plan li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fff}
.plan li.done{background:#f7faf5}
.plan li.done .pt{text-decoration:line-through;color:var(--ink-3)}
.chk{width:24px;height:24px;border-radius:999px;border:2px solid #b9c7d3;display:flex;align-items:center;justify-content:center;color:#fff}
.chk.d{background:var(--ok);border-color:var(--ok)}
.chk.n{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(15,193,243,.2)}
.mins{font-size:13px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.week{display:flex;gap:6px;align-items:flex-end;height:60px}
.week div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ink-3)}
.week div i{width:100%;max-width:26px;border-radius:6px;background:#dbe5ec}
.week div i.g{background:var(--petrol)}
.news{display:grid;gap:10px}
.news a{text-decoration:none;color:inherit}

/* Lernpfade */
.path{display:grid;grid-template-columns:auto minmax(0,1fr) 220px;gap:18px;align-items:center}
.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.lock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}

/* Bibliothek */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600}
.chip.on{background:var(--navy);color:#fff;border-color:transparent}
.libgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.libc{display:flex;flex-direction:column;gap:8px;min-height:176px}
.libc .foot{margin-top:auto;display:flex;align-items:center;gap:8px;justify-content:space-between}
.star{all:unset;cursor:pointer;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3)}
.star.on{color:#c98a00}
.star:focus-visible{outline:3px solid var(--cyan)}
.fresh{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}

/* Lektion */
.lesson{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.toc{position:sticky;top:0;display:grid;gap:2px}
.toc a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;font-size:13.5px;color:var(--ink-2);text-decoration:none}
.toc a.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--cyan)}
.toc a.d{color:var(--ink-3)}
.prose{max-width:70ch;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:30px 36px}
.prose h2{margin:28px 0 8px;font-size:21px;line-height:1.3}
.prose h2:first-child{margin-top:0}
.prose p{margin:8px 0 0;font-size:17px;line-height:1.7;color:oklch(26% 0.04 264.7)}
.goal svg,.notice svg,.fb svg,.mistakes svg,.req svg{flex:none;margin-top:2px}
.fab{display:none}
.goal{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:var(--info-bg);font-size:15.5px}
.short{padding:16px 18px;border-radius:14px;border:1px solid #bde7f5;background:#f2fbfe}
.short p{margin:4px 0 0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:12px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:none}
.tbl th{background:#f6f9fb;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.scen{padding:16px 18px;border-radius:14px;background:#fffaf0;border:1px solid #f0dfb8}
.vid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);margin-top:12px}
.vidp{aspect-ratio:16/9;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.vidp small{position:absolute;bottom:6px;right:8px;font-size:11px;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:6px}
.mistakes{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.mistakes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:15.5px}
.quiz{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fbfcfd;margin-top:12px}
.opts{display:grid;gap:8px;margin-top:12px}
.opt{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:48px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:15px}
.opt:hover{border-color:var(--petrol)}
.opt .k{width:28px;height:28px;border-radius:8px;background:#f1f4f7;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--err);background:var(--err-bg)}
.fb{margin-top:12px;padding:14px 16px;border-radius:12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.fb.ok{background:var(--ok-bg);color:#1f4f10}
.fb.no{background:var(--warn-bg);color:#5c3d00}
.lessonbar{position:sticky;bottom:0;margin-top:20px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 -10px 30px rgba(13,24,48,.06)}
.saved{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ok)}

/* Lernbegleiter */
.drawer{position:absolute;top:72px;right:0;bottom:0;width:420px;background:#fff;border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(13,24,48,.14);display:flex;flex-direction:column;z-index:20}
.dhead{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.dbody{flex:1;overflow:auto;padding:16px 18px;display:grid;gap:12px;align-content:start}
.dfoot{padding:12px 18px 16px;border-top:1px solid var(--line);display:grid;gap:8px}
.bub{max-width:92%;padding:12px 14px;border-radius:16px;font-size:14.5px;line-height:1.55}
.bub.u{justify-self:end;background:var(--navy);color:#fff;border-bottom-right-radius:6px}
.bub.a{background:#f4f8fb;border:1px solid var(--line);border-bottom-left-radius:6px}
.src{display:grid;gap:6px;margin-top:10px}
.src a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;text-decoration:none;color:var(--ink)}
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:14px;font-size:14.5px}
.notice.warn{background:var(--warn-bg);color:#5c3d00}
.notice.err{background:var(--err-bg);color:#6e1a12}
.notice.info{background:var(--info-bg);color:#06475b}
.notice.navy{background:var(--navy);color:#fff}
.inp{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 6px 6px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink-3);font-size:14.5px}
.inp.dis{background:#f4f6f8}
.budget{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3)}
.budget .bar{flex:1}

/* Training */
.setup{display:grid;gap:18px}
.selgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.chipb span{white-space:nowrap}
.saved{white-space:nowrap}
.atabs{flex-wrap:wrap}
.todo li{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px 12px}
.todo li>span:nth-child(2){flex:1 1 220px}
.sel{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:14px}
.sel b{font-size:14.5px}
.sel small{color:var(--ink-3);font-size:12.5px;line-height:1.4}
.sel.on{border-color:var(--petrol);box-shadow:inset 0 0 0 1.5px var(--petrol);background:#f2fbfe}
.sel:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.chat{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.thread{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);display:flex;flex-direction:column;min-height:560px}
.thead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.tbody{flex:1;padding:18px;display:grid;gap:12px;align-content:start}
.msg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;max-width:86%}
.msg.me{justify-self:end;grid-template-columns:minmax(0,1fr) auto}
.msg .b{padding:11px 14px;border-radius:16px;background:#f4f8fb;border:1px solid var(--line);font-size:14.5px}
.msg.me .b{background:var(--navy);color:#fff;border-color:transparent}
.msg small{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:3px;font-weight:700}
.msg.me small{color:rgba(255,255,255,.7)}
.compose{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.score{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.crit{padding:14px;border-radius:14px;border:1px solid var(--line);background:#fff}
.crit .lv{display:flex;gap:3px;margin-top:8px}.crit .lv i{flex:1;height:6px;border-radius:999px;background:#e4ebf1}.crit .lv i.f{background:var(--petrol)}
.quote{border-left:3px solid var(--cyan);padding:8px 12px;background:#f6fbfd;border-radius:0 10px 10px 0;font-size:14px;margin-top:8px}
.quote.b{border-left-color:#e0a400;background:#fffaf0}

/* Wiederholen */
.flash{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:32px;min-height:300px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px rgba(13,24,48,.06)}
.rate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.topicbars{display:grid;gap:12px}
.topicbars .row{justify-content:space-between}

/* Erfolge */
.certs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cert{position:relative;padding:20px;border-radius:var(--r-l);border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:10px}
.cert.got{background:linear-gradient(160deg,#fff 60%,#eaf7dd)}
.seal{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--soft);color:var(--petrol)}
.cert.got .seal{background:var(--navy);color:var(--green)}
.req{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px}
.req li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px}
.board{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.board li{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.board li.me{border-color:var(--petrol);background:#f2fbfe}
.board .pos{font-weight:700;color:var(--ink-3);text-align:center}
.rules{font-size:13.5px;display:grid;gap:4px}

/* Verwaltung */
.atabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 14px;font-weight:600;font-size:14px;color:var(--ink-3);border-bottom:3px solid transparent;white-space:nowrap}
.tab.on{color:var(--ink);border-bottom-color:var(--cyan)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.kpi b{display:block;font-size:26px;line-height:1.1;margin-top:4px}
.dtbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dtbl th,.dtbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.dtbl th{background:#f6f9fb;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.dtbl tr:last-child td{border-bottom:none}
.editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.blk{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.grip{color:#b9c7d3;padding-top:2px}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.flow .st{padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600}
.flow .st.on{background:var(--warn-bg);border-color:#e0b85c;color:var(--warn)}
.flow .st.d{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

/* Zustände */
.sk{background:linear-gradient(90deg,#e8eef3 25%,#f3f6f9 37%,#e8eef3 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:10px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion: reduce){.sk{animation:none}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;border-radius:var(--r-xl);border:1.5px dashed #c7d4de;background:#fff}
.empty .ico{width:56px;height:56px;border-radius:16px}

/* Anmeldung */
.login{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.loginl{background:var(--navy);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;background-image:radial-gradient(60% 80% at 100% 0%,rgba(15,193,243,.25),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(154,214,90,.16),transparent 70%)}
.loginr{display:flex;align-items:center;justify-content:center;padding:32px}
.lbox{width:100%;max-width:380px;display:grid;gap:16px}
.ms{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;border-radius:14px;background:#fff;border:1.5px solid #8c8c8c;font-weight:700;font-size:15.5px;color:#1b1b1b}
.ms:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ===== Mobil (Container < 600 px) ===== */
@container (max-width:600px){
 .kpi b{font-size:21px}

 .tabbar .tbtn span:not(.cnt){font-size:10.5px;white-space:nowrap;letter-spacing:-.01em}
 .lessonbar .ask{display:none}
 .lessonbar{padding:10px 12px}
 .atabs{flex-wrap:nowrap;overflow-x:auto}

 .app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .hdr{display:none}
 .mtop{display:flex;align-items:center;gap:10px;height:58px;padding:8px 14px 0;flex-shrink:0;background:var(--bg)}
 .mtop img{height:24px}
 .scroll{padding:0 0 96px}
 .wrapc{padding:0 16px}
 .herobg{left:8px;right:8px;border-radius:24px 24px 24px 64px}
 .herosec{padding:10px 0 22px}
 .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:absolute;left:0;right:0;bottom:0;height:78px;padding:6px 6px 18px;background:#fff;border-top:1px solid var(--line);z-index:15}
 .tbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--ink-3);position:relative;border-radius:12px}
 .tbtn.on{color:var(--ink)}
 .tbtn.on svg{color:var(--petrol)}
 .tbtn .cnt{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:999px;background:var(--cyan);color:#000;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
 .tbtn:focus-visible{outline:3px solid var(--cyan)}
 .fab{display:inline-flex;width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;position:absolute;right:16px;bottom:92px;z-index:14}
 .h1{font-size:24px}
 .hello{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}
 .next{grid-template-columns:minmax(0,1fr);padding:20px;border-radius:22px;gap:14px}
 .next h2{font-size:20px}
 .next .btn{width:100%}
 .cols,.grid2,.grid3,.libgrid,.certs,.kpis,.chat,.editor,.lesson,.score,.selgrid,.path{grid-template-columns:minmax(0,1fr)}
 .selgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .score{grid-template-columns:repeat(2,minmax(0,1fr))}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .toc{display:none}
 .prose{padding:18px 16px;border-radius:16px}
 .prose p{font-size:16.5px}
 .vid{grid-template-columns:minmax(0,1fr)}
 .drawer{width:auto;left:0;top:40px;border-radius:24px 24px 0 0;border-left:none}
 .thread{min-height:0}
 .side-only{display:none}
 .lessonbar{bottom:84px}
 .board li{grid-template-columns:24px auto minmax(0,1fr) auto}
 .board li .hide-m{display:none}
 .login{grid-template-columns:minmax(0,1fr)}
 .loginl{padding:28px 22px;min-height:300px}
 .dtbl .hide-m{display:none}
 .atabs{margin-left:-16px;margin-right:-16px;padding:0 12px}
 .flash{padding:22px;min-height:260px}
 .rate{grid-template-columns:minmax(0,1fr)}
}

/* Board-Rahmen */
.notes{padding:40px 48px 56px;background:#fffaf0;border-top:2px dashed #e7c27a}
.notes h2{margin:0;font-size:26px}
.ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.nbox{border-radius:16px;background:#fff;border:1px solid #f0dfb8;padding:16px;font-size:14px}
.nbox h3{margin:0 0 6px;font-size:15px}
.nbox p{margin:0}
.nbox ul{margin:0;padding-left:18px;display:grid;gap:4px}