/* IT Quiz – Neues Design (Trenning/Fikri-Stil) – eigenständige Testversion */
:root{
  --bg:#e9e9ec; --app:#f8f8fb;
  --ink:#191921; --ink2:#3d3d47; --muted:#8d8d97; --faint:#b6b6bf;
  --line:#efeff2; --line2:#dadae1;
  --primary:#5a46e8; --primary-d:#4b39d6; --primary-soft:#efedfd;
  --good:#26c281; --good-soft:#e7f7ee; --good-d:#1a9c67;
  --bad:#ef5a6f; --bad-soft:#fdeaec;
  --review:#9aa0ab; --skip:#c3c7cf; --skip-soft:#f2f3f5;
  --gold:#f5b731; --gold-soft:#fdf3dd;
  --track:#eaeaef; --chip:#f3f3f6; --chip-ink:#6c6c77;
  --yellow:#ffc93c; --warn:#f2a33c;
  --peach:#f7d7a6; --sky:#b7def4; --lav:#cec7f2; --blue2:#a9d9f2; --mint:#bfe6d6;
  --shadow:0 24px 60px rgba(40,38,70,.12); --shadow-sm:0 2px 6px rgba(30,30,50,.05);
  --ground:#ffffff;
  --panel:#f2f2f5; --panel-line:#e4e4ea;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e0e12; --app:#17171d;
  --ink:#f2f2f5; --ink2:#c9c9d2; --muted:#8a8a95; --faint:#5c5c66;
  --line:#25252d; --line2:#2c2c35;
  --primary:#7a68ff; --primary-d:#6a56f0; --primary-soft:#241f45;
  --good:#3ad698; --good-soft:#12281f; --good-d:#3ad698;
  --bad:#ff6c7e; --bad-soft:#2a1417;
  --skip:#4a4e57; --skip-soft:#1e2026;
  --gold:#f5b731; --gold-soft:#2a2413;
  --track:#2a2a33; --chip:#23232b; --chip-ink:#b4b4bf;
  --shadow:0 24px 60px rgba(0,0,0,.5); --shadow-sm:0 2px 6px rgba(0,0,0,.3);
  --ground:#0e0e12;
  --panel:#131318; --panel-line:#26262e;
}}
:root[data-theme="dark"]{
  --bg:#0e0e12; --app:#17171d;
  --ink:#f2f2f5; --ink2:#c9c9d2; --muted:#8a8a95; --faint:#5c5c66;
  --line:#25252d; --line2:#2c2c35;
  --primary:#7a68ff; --primary-d:#6a56f0; --primary-soft:#241f45;
  --good:#3ad698; --good-soft:#12281f; --good-d:#3ad698;
  --bad:#ff6c7e; --bad-soft:#2a1417;
  --skip:#4a4e57; --skip-soft:#1e2026;
  --gold:#f5b731; --gold-soft:#2a2413;
  --track:#2a2a33; --chip:#23232b; --chip-ink:#b4b4bf;
  --shadow:0 24px 60px rgba(0,0,0,.5); --shadow-sm:0 2px 6px rgba(0,0,0,.3);
  --ground:#0e0e12;
  --panel:#131318; --panel-line:#26262e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh}
svg{display:block}
img{max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
a{text-decoration:none;color:inherit}
[hidden]{display:none!important}
.tabnum{font-variant-numeric:tabular-nums}

/* ===== App-Shell (randlos, eckig, bündig links) ===== */
#app-shell{padding:0;margin:0}
.shell{background:var(--app);height:100vh;height:100dvh;display:flex;flex-direction:row;overflow:hidden}
.mainpane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--ground)}

/* ===== Linke Icon-Leiste (Sidebar) – grau ===== */
.rail{width:68px;flex:0 0 68px;border-right:1px solid var(--panel-line);padding:18px 0 14px;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel);overflow:visible}
.rail .logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(140deg,#6a4bff,#4b39d6);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px;box-shadow:0 6px 14px rgba(90,70,232,.4);cursor:pointer}
.rail .ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;transition:.15s;position:relative}
.rail .ic i{font-size:20px}
.rail .ic:hover{background:var(--app);color:var(--ink)}
.rail .ic.on{background:none;color:var(--ink)}
.rail .ic .lbl{position:absolute;left:56px;top:50%;transform:translateY(-50%) translateX(-6px);background:var(--ink);color:var(--app);font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.14s;z-index:20}
.rail .ic:hover .lbl{opacity:1;transform:translateY(-50%) translateX(0)}
.rail .sp{flex:1}
.rail .bolt{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,#ffd54a,#ffb020);color:#7a5600;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 14px rgba(255,176,32,.35);transition:.15s}
.rail .bolt:hover{filter:brightness(1.05)}
.rail .railav{width:38px;height:38px;border-radius:50%;background:#33a1e0;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:8px;cursor:pointer}
@media (max-width:760px){ .rail{display:none} }

/* ===== Zweite Ebene: Lernbereich-Sidebar ===== */
.side2{width:240px;flex:0 0 240px;border-right:1px solid var(--panel-line);padding:20px 14px 16px;display:flex;flex-direction:column;overflow-y:auto;background:var(--panel)}
.side2 .s2head{font-size:18px;font-weight:800;margin:0 0 16px;padding:0 6px;letter-spacing:-.01em}
.s2nav{display:flex;flex-direction:column;gap:2px}
.s2nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:var(--ink2);font-size:14px;font-weight:500;cursor:pointer}
.s2nav a:hover{background:var(--app)}
.s2nav a.on{background:var(--primary-soft);color:var(--ink);font-weight:600}
.s2nav a svg{color:var(--faint);flex:0 0 auto} .s2nav a.on svg{color:var(--primary)}
.s2nav a .dot{width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden}
.s2nav a .dot i{font-size:13px}
.s2nav a .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side2.admin .s2nav a{color:var(--ink2)}
.side2.admin .s2nav a i{font-size:16px;width:20px;text-align:center;color:var(--ink);flex:0 0 auto}
.side2.admin .s2nav a.on{background:none;color:var(--ink)}
.side2.admin .s2nav a.on i{color:var(--ink)}
.s2sec{margin-top:22px}
.s2sec .h{display:flex;align-items:center;padding:0 10px 8px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.02em}
.s2sec .h .cnt{background:var(--chip);color:var(--chip-ink);border-radius:20px;padding:1px 7px;font-size:11px;margin-left:6px}
.s2pill{display:flex;align-items:center;border-radius:10px;width:100%}
.s2pill:hover{background:var(--app)}
.s2pill.on{background:var(--primary-soft)}
button.s2pill{gap:11px;padding:8px 10px;border:none;background:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink2);cursor:pointer;text-align:left}
button.s2pill.on{color:var(--ink);font-weight:600}
.s2pill-go{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:8px 10px;border:none;background:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink2);cursor:pointer;text-align:left;border-radius:10px}
.s2pill.on .s2pill-go{color:var(--ink);font-weight:600}
.s2pill .dot{width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden}
.s2pill .dot img{width:100%;height:100%;object-fit:cover}
.s2pill .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2pin{opacity:0;flex:0 0 auto;width:26px;height:26px;margin-right:5px;border:none;background:none;color:var(--muted);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s}
.s2pill:hover .s2pin{opacity:1}
.s2pin:hover{background:var(--chip);color:var(--ink)}
.s2pin.on{opacity:1;color:var(--faint)}
.s2pin.on:hover{background:var(--bad-soft);color:var(--bad)}
.s2promo{margin-top:auto;border:1px solid var(--line2);border-radius:16px;padding:16px;text-align:center;background:linear-gradient(180deg,rgba(90,70,232,.06),rgba(90,70,232,.13))}
.s2promo .hat{font-size:24px}
.s2promo h4{margin:6px 0 4px;font-size:14.5px;font-weight:700}
.s2promo p{margin:0 0 12px;font-size:12px;color:var(--muted);line-height:1.5}
.s2promo button{width:100%;background:var(--primary);color:#fff;border-radius:10px;padding:9px;font-size:13px;font-weight:700}
.s2promo button:hover{background:var(--primary-d)}
@media (max-width:1000px){ .side2{display:none} }

/* ===== Top-Nav ===== */
.nav{display:flex;align-items:center;gap:18px;padding:15px 28px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.02em;cursor:pointer}
.brand .mk{width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,#6a4bff,#4b39d6);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 14px rgba(90,70,232,.35)}
.srch{flex:1;max-width:420px;display:flex;align-items:center;gap:10px;background:var(--chip);border-radius:12px;padding:10px 15px;color:var(--muted);font-size:14px}
.srch input{border:none;background:none;outline:none;color:var(--ink);font:inherit;flex:1;min-width:0}
.nav .grow{flex:1}
.nbtn{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.nbtn:hover{background:var(--chip)}
.me{display:flex;align-items:center;gap:10px;padding-left:6px;cursor:pointer;border-radius:12px}
.me:hover{background:var(--chip)}
.me .av{width:38px;height:38px;border-radius:50%;background:#33a1e0;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.me .nm{font-size:14px;font-weight:700;line-height:1.2}
.me .ro{font-size:12px;color:var(--muted)}

/* ===== Tabs ===== */
.tabs{display:none!important}
.tabs a{padding:14px 0;font-size:15px;font-weight:600;color:var(--muted);position:relative;white-space:nowrap;display:flex;align-items:center;gap:8px}
.tabs a:hover{color:var(--ink2)}
.tabs a.on{color:var(--ink)}
.tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:3px;background:var(--primary)}
.tabs .b{background:var(--chip);color:var(--chip-ink);border-radius:20px;padding:0 8px;font-size:12px;font-weight:700}

.body{flex:1;min-height:0;padding:26px 28px 34px;overflow-y:auto}
.wrap{display:flex;gap:26px}
.col-main{flex:1;min-width:0}
.rail2{width:322px;flex:0 0 322px;display:flex;flex-direction:column;gap:18px}
@media (max-width:1120px){ .rail2{display:none} }

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-size:14px;font-weight:700;padding:11px 18px;transition:.14s}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(90,70,232,.3)}
.btn.primary:hover{background:var(--primary-d)}
.btn.ghost{background:var(--app);border:1px solid var(--line2);color:var(--ink)}
.btn.ghost:hover{background:var(--chip)}
.btn:disabled{opacity:.5;cursor:default}
.btn.block{width:100%;padding:13px}

/* ===== Login (moderne, zentrierte Split-Card) ===== */
.login{display:flex;align-items:center;justify-content:center;flex:1;min-height:100vh;min-height:100dvh;width:100%;padding:28px;
  background:
    radial-gradient(1100px 620px at 12% 6%, rgba(90,70,232,.20), transparent 58%),
    radial-gradient(900px 640px at 92% 96%, rgba(126,86,240,.16), transparent 55%),
    radial-gradient(720px 520px at 86% 2%, rgba(60,120,240,.10), transparent 60%),
    var(--ground)}
.auth-card{position:relative;display:flex;width:min(1020px,100%);
  min-height:min(640px,calc(100dvh - 56px));max-height:calc(100dvh - 56px);
  border-radius:26px;overflow:hidden;background:var(--app);
  box-shadow:0 40px 90px -34px rgba(24,20,60,.55),0 6px 22px rgba(24,20,60,.12)}
.auth-card .brand-side{position:relative;flex:1.06;min-width:0;overflow:hidden;color:#fff;
  background:#0a1230 url("login-bg.webp") center/cover no-repeat;
  padding:44px 46px;display:flex;flex-direction:column}
/* Dunkler Verlauf über dem Bild, damit die weisse Schrift links/unten lesbar bleibt */
.auth-card .brand-side::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(8,10,42,.88) 0%,rgba(10,14,52,.52) 46%,rgba(34,22,86,.12) 100%),
             linear-gradient(0deg,rgba(6,10,38,.7) 0%,transparent 46%)}
.auth-card .brand-side::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:42px 42px;-webkit-mask-image:linear-gradient(155deg,#000,transparent 72%);mask-image:linear-gradient(155deg,#000,transparent 72%)}
.bs-top{position:relative;display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:-.01em}
.bs-top .mk{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.bs-top .mk.mk-app{background:none;backdrop-filter:none;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.bs-top .mk.mk-app img{width:100%;height:100%;border-radius:inherit;display:block;object-fit:cover}
.bs-mid{position:relative;margin-top:auto}
.bs-mid .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.bs-mid .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#7dd88f;box-shadow:0 0 0 3px rgba(125,216,143,.28)}
.bs-mid h2{font-size:35px;font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.bs-mid p{font-size:15px;opacity:.84;max-width:400px;line-height:1.6;margin:0 0 24px}
.feat{display:flex;flex-direction:column;gap:11px}
.feat > div{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600}
.feat .ic{width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:15px}
.bs-bot{position:relative;margin-top:30px;font-size:12.5px;opacity:.62}
.bs-bot a{color:inherit;text-decoration:none}
.bs-bot a:hover{text-decoration:underline}

.auth-card .form-side{flex:.92;min-width:0;display:flex;align-items:center;justify-content:center;padding:44px 48px;background:var(--app);overflow:auto}
.form-box{width:100%;max-width:372px}
.form-box .logo-sm{display:none;width:52px;height:52px;border-radius:14px;overflow:hidden;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 18px rgba(90,70,232,.4)}
.form-box .logo-sm img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.form-box h1{font-size:28px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
.form-box .sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.seg{display:flex;background:var(--chip);border-radius:12px;padding:4px;margin-bottom:24px}
.seg button{flex:1;padding:11px;border-radius:9px;font-weight:700;font-size:14px;color:var(--muted);transition:.14s}
.seg button.on{background:var(--app);color:var(--ink);box-shadow:var(--shadow-sm)}
.field2{margin-bottom:16px}
.field2 label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:7px}
.field2 .inp{display:flex;align-items:center;gap:11px;border:1.6px solid var(--line2);border-radius:12px;padding:0 14px;background:var(--app);transition:.14s}
.field2 .inp:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.field2 .inp > svg{color:var(--faint);flex:0 0 auto}
.field2 input{border:none;background:none;outline:none;padding:13px 0;font:inherit;color:var(--ink);flex:1;min-width:0}
.field2 .eye{cursor:pointer;color:var(--muted);display:flex;padding:4px}
.field2 .eye:hover{color:var(--ink2)}
.form-box .sublogin{text-align:center;font-size:13.5px;color:var(--muted);margin-top:22px}
.form-box .sublogin b{color:var(--primary);cursor:pointer}
.err{background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:9px}
/* Auffälligerer CTA nur im Login */
.auth-card .btn.primary.block{background:linear-gradient(135deg,#6a53ff 0%,#5a46e8 55%,#4a38d4 100%);box-shadow:0 12px 24px -8px rgba(90,70,232,.6);transition:filter .14s,transform .14s,box-shadow .14s}
.auth-card .btn.primary.block:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 16px 30px -10px rgba(90,70,232,.66)}
.auth-card .btn.primary.block:active{transform:translateY(0)}
/* Gestapeltes Layout auf schmalen Screens */
@media (max-width:900px){
  .login{padding:0}
  .auth-card{flex-direction:column;width:100%;max-height:none;min-height:100dvh;border-radius:0;box-shadow:none}
  .auth-card .brand-side{flex:0 0 auto;padding:34px 26px 30px}
  .auth-card .brand-side .bs-mid{margin-top:22px}
  .bs-mid h2{font-size:27px}
  .bs-mid p,.feat,.bs-bot{display:none}
  .auth-card .form-side{flex:1 1 auto;padding:30px 24px 44px}
}
@media (max-width:560px){
  .auth-card .brand-side{display:none}
  .form-box .logo-sm{display:flex}
  .auth-card .form-side{padding:38px 22px}
}

/* ===== Home ===== */
.hero{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.hero .g{flex:1;min-width:220px}
.hero h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.hero p{margin:0;color:var(--muted);font-size:15px}
.hstats{display:flex;gap:12px;flex-wrap:wrap}
.hstat{background:var(--app);border:1px solid var(--line2);border-radius:14px;padding:13px 17px;min-width:112px;display:flex;align-items:center;gap:12px}
.hstat .ig{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px}
.hstat .n{font-size:20px;font-weight:800;line-height:1}
.hstat .l{font-size:12px;color:var(--muted);margin-top:3px}

.banner{display:flex;align-items:center;gap:14px;background:var(--good-soft);border-radius:14px;padding:15px 18px;margin-bottom:28px;font-size:14.5px;color:var(--ink2);flex-wrap:wrap}
.banner .new{background:var(--good);color:#fff;border-radius:7px;padding:3px 10px;font-size:12.5px;font-weight:700}
.banner b{font-weight:800;color:var(--ink)}
.banner .go{margin-left:auto;color:var(--good-d);font-weight:700;cursor:pointer;white-space:nowrap}

.sec-h{display:flex;align-items:center;gap:10px;margin:0 0 15px}
.sec-h h2{font-size:18px;font-weight:800;margin:0;letter-spacing:-.01em}
.sec-h .all{margin-left:auto;color:var(--primary);font-weight:700;font-size:13.5px;cursor:pointer}

/* Fortschritts-Zeilen */
.prog{background:var(--app);border:1px solid var(--line2);border-radius:16px;overflow:hidden;margin-bottom:30px}
.prow{display:flex;align-items:center;gap:16px;padding:15px 18px}
.prow + .prow{border-top:1px solid var(--line)}
.prow .thumb{width:52px;height:52px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden}
.prow .thumb img{width:100%;height:100%;object-fit:cover}
.prow .pmain{flex:1;min-width:0}
.prow .tg{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:3px}
.prow h3{font-size:15.5px;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pcol{width:96px;flex:0 0 auto}
.prow .cl{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:5px}
.prow .cv{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px}
@media (max-width:760px){ .prow .pcol{display:none} }

.miniring{width:26px;height:26px;flex:0 0 auto}

/* ===== Karten-Grid (Kategorien) ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;align-content:start}
.card{border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:var(--app);transition:.16s;cursor:pointer;text-align:left}
.card:hover{box-shadow:0 14px 30px rgba(40,38,70,.12);transform:translateY(-2px)}
.card .thumb{position:relative;height:140px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.card .thumb img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.2))}
.card .thumb .emoji{font-size:60px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.2))}
.card .badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;background:#282830;color:#fff;border-radius:9px;padding:5px 9px;font-size:12px;font-weight:600}
.card .badge.neu{background:#fff;color:#7b5bd6;left:auto;right:12px;box-shadow:var(--shadow-sm)}
.card .cpin{position:absolute;bottom:12px;right:12px;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.9);color:#4a4a55;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:.14s;z-index:2}
.card .thumb-tr{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:7px;z-index:2}
.card .thumb-tr .badge.neu{position:static;top:auto;right:auto;left:auto}
.card .thumb-tr .diffbadge{background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm)}
.card .cpin:hover{background:#fff;color:var(--primary);transform:translateY(-1px)}
.card .cpin.on{background:var(--primary);color:#fff}
.cbody{padding:16px}
.cbody h3{font-size:16.5px;font-weight:700;line-height:1.3;margin:2px 0 15px;letter-spacing:-.01em;min-height:43px;text-wrap:balance}
.stats{display:flex;gap:14px;margin-bottom:15px}
.stat{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ring{width:42px;height:42px;flex:0 0 auto;position:relative}
.ring .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800}
.stat .lab{font-size:11.5px;color:var(--muted)}
.stat .val{font-size:15px;font-weight:800;margin-top:1px}
.chips{display:flex;align-items:center;gap:8px}
.chip{background:var(--chip);color:var(--chip-ink);border-radius:8px;padding:5px 11px;font-size:12.5px;font-weight:600;white-space:nowrap}
.chips .grow{flex:1}
.cfoot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);margin-top:14px;padding-top:12px;color:var(--muted);font-size:12.5px}
.cfoot .q{color:var(--ink2);font-weight:600}
.diffbadge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.diffbadge i{font-size:10px}
.diffbadge.de{background:var(--good-soft);color:var(--good-d)}
.diffbadge.dm{background:rgba(230,170,20,.16);color:#b8860b}
.diffbadge.dh{background:var(--bad-soft);color:var(--bad)}

.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.toolbar .count{font-weight:700}
.toolbar .bar{width:1px;height:18px;background:var(--line2)}
/* Suchfeld, Dropdown und Buttons in der Toolbar exakt gleich hoch */
.toolbar .admselect,.toolbar .srch2,.toolbar .btn{height:42px}
.toolbar .admselect{padding-top:0;padding-bottom:0}
.toolbar .btn{padding-top:0;padding-bottom:0}
.toolbar .srch2{display:flex;align-items:center;gap:9px;background:var(--chip);border-radius:11px;padding:0 13px;color:var(--muted);font-size:14px;flex:1;max-width:320px}
.toolbar .srch2 input{border:none;background:none;outline:none;color:var(--ink);font:inherit;flex:1;min-width:0}

/* ===== Quiz ===== */
.quiz{max-width:760px;margin:0 auto}
.qtop{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.iconbtn:hover{background:var(--chip)}
.iconbtn.on{color:var(--gold);border-color:var(--gold)}
.bmrow{display:flex;align-items:center;gap:13px;padding:14px 18px}
.bmrow+.bmrow{border-top:1px solid var(--line)}
.bmrow .hi{width:34px;height:34px;border-radius:9px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.bmrow .bmq{flex:1;min-width:0}
.bmrow .bmc{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:3px}
.bmrow .bmt{font-size:14.5px;font-weight:600;line-height:1.4}
.bmrow .bmx{width:32px;height:32px;border-radius:9px;border:1px solid var(--line2);color:var(--muted);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bmrow .bmx:hover{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.qcat{font-size:18px;font-weight:800}
.qtag{background:var(--chip);color:var(--chip-ink);border-radius:8px;padding:5px 11px;font-size:12.5px;font-weight:600}
.qtop .grow{flex:1}
.timer{display:inline-flex;align-items:center;gap:7px;background:var(--chip);border-radius:11px;padding:9px 13px;font-size:14px;font-weight:700;color:var(--ink2)}
.prg{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.pbar{flex:1;height:9px;border-radius:6px;background:var(--track);overflow:hidden}
.pbar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--primary),#8a79ff);transition:width .3s}
.pnum{font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.pnum b{color:var(--ink)}
.qlabel{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.qtext{font-size:25px;font-weight:800;line-height:1.3;letter-spacing:-.01em;margin:0 0 22px;text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.opt{display:flex;align-items:center;gap:14px;border:1.6px solid var(--line2);border-radius:14px;padding:16px 18px;background:var(--app);text-align:left;font-size:15.5px;font-weight:600;color:var(--ink);width:100%;transition:.12s}
.opt:hover:not(:disabled){border-color:var(--primary);background:var(--primary-soft)}
.opt .k{width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--chip);color:var(--chip-ink);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.opt .otext{flex:1}
.opt .mark{width:22px;height:22px;flex:0 0 auto;opacity:0}
.opt.correct{border-color:var(--good);background:var(--good-soft)} .opt.correct .k{background:var(--good);color:#fff} .opt.correct .mark{opacity:1;color:var(--good-d)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)} .opt.wrong .k{background:var(--bad);color:#fff} .opt.wrong .mark{opacity:1;color:var(--bad)}
.opt.dim{opacity:.5}
.opt.joker-hidden{opacity:.32;filter:grayscale(1);pointer-events:none}
/* Mehrfachauswahl: eckigere Buchstabenbox + ausgewählter Zustand vor dem Bestätigen */
.opt.multi .k{border-radius:7px}
.opt.multi.sel{border-color:var(--primary);background:var(--primary-soft)}
.opt.multi.sel .k{background:var(--primary);color:#fff}
.jokerbar{margin:-4px 0 20px}
.jokerbtn{display:inline-flex;align-items:center;gap:9px;border:1.8px solid var(--bad);border-radius:12px;padding:10px 16px;font-size:14px;font-weight:800;color:var(--bad);background:var(--bad-soft);transition:.14s;animation:jokerPulse 1.5s ease-in-out infinite}
.jokerbtn:hover{background:var(--bad);color:#fff;animation:none;transform:translateY(-1px)}
.jokerbtn:hover .jn{background:rgba(255,255,255,.25);color:#fff}
.jokerbtn .jn{background:var(--bad);color:#fff;border-radius:20px;padding:1px 9px;font-size:12px;font-weight:800}
@keyframes jokerPulse{0%{box-shadow:0 0 0 0 rgba(239,90,111,.5)}70%{box-shadow:0 0 0 12px rgba(239,90,111,0)}100%{box-shadow:0 0 0 0 rgba(239,90,111,0)}}
@media (prefers-reduced-motion:reduce){ .jokerbtn{animation:none} }
.opt:disabled{cursor:default}
.explain{background:var(--app);border:1px solid var(--line2);border-left:4px solid var(--good);border-radius:14px;padding:16px 18px;margin-bottom:8px}
.explain.no{border-left-color:var(--bad)}
.explain h4{margin:0 0 6px;font-size:14.5px;font-weight:800;color:var(--good-d);display:flex;align-items:center;gap:8px}
.explain.no h4{color:var(--bad)}
.explain p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink2)}
.qfoot{display:flex;align-items:center;gap:12px;padding-top:18px;margin-top:8px;border-top:1px solid var(--line)}
.qfoot .grow{flex:1}

/* ===== Ergebnis ===== */
.result{max-width:760px;margin:0 auto}
.rhero{text-align:center;padding:14px 0 24px}
.rhero .em{font-size:54px}
.rhero h1{font-size:28px;font-weight:800;margin:8px 0 4px;letter-spacing:-.01em}
.rhero p{margin:0;color:var(--muted);font-size:15px}
.kpis{display:flex;justify-content:center;align-items:stretch;gap:14px;flex-wrap:wrap;margin:20px 0 28px}
.kpi{flex:1 1 0;min-width:140px;max-width:210px;background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.kpi .lab{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi .big{font-size:27px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:7px;line-height:1}
.kpi .accring{position:relative;width:66px;height:66px}
.kpi .accring .p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}
.dia{width:18px;height:18px;border-radius:5px;background:var(--gold);display:inline-block;transform:rotate(45deg);flex:0 0 auto}
.qgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:9px;margin-bottom:18px}
.qc{border-radius:13px;padding:9px 4px;background:var(--chip);color:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;aspect-ratio:1;transition:.14s}
.qc .num{font-size:15px;font-weight:800;line-height:1}
.qc .ic{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.qc .ic svg{width:12px;height:12px}
.qc.ok{background:var(--good-soft);color:var(--good-d)} .qc.ok .ic{background:var(--good)}
.qc.no{background:var(--bad-soft);color:var(--bad)} .qc.no .ic{background:var(--bad)}
.qc.skip{background:var(--skip-soft);color:var(--muted)} .qc.skip .ic{background:var(--skip)}
@media (max-width:640px){ .qgrid{grid-template-columns:repeat(5,1fr)} }
.legend{display:flex;flex-wrap:wrap;gap:20px;padding:14px 0 24px;border-bottom:1px solid var(--line);margin-bottom:22px;font-size:13.5px}
.legend span{display:flex;align-items:center;gap:8px;color:var(--ink2);font-weight:600}
.legend i{width:14px;height:14px;border-radius:5px;display:inline-block}
.rreview{background:var(--app);border:1px solid var(--line2);border-radius:14px;padding:15px 17px;margin-bottom:12px}
.rreview .rh{display:flex;align-items:center;gap:11px;font-weight:700}
.rreview .st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border-radius:7px;padding:3px 9px}
.rreview .st.ok{background:var(--good-soft);color:var(--good-d)} .rreview .st.no{background:var(--bad-soft);color:var(--bad)}
.rreview .rq{font-size:15px;font-weight:700;margin:12px 0 0;line-height:1.4}
.rreview .ra{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.rreview .ra b{color:var(--good-d)} .rreview .ra .x{color:var(--bad)}

/* ===== Rechte Spalte ===== */
.rc{background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:16px 18px}
.rc.mini{display:flex;align-items:center;gap:13px}
.rc.mini .ig{width:38px;height:38px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center}
.rc.mini .n{font-size:21px;font-weight:800;line-height:1}
.rc.mini .l{font-size:12.5px;color:var(--muted);margin-top:2px}
.rc h4{margin:0 0 15px;font-size:15px;font-weight:800}
.rc-lbh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rc-lbh h4{margin:0}
.rc-lbh .all{font-size:12px;font-weight:600;color:var(--primary);cursor:pointer;letter-spacing:normal}
.rc-lbh .all:hover{text-decoration:underline}
.lb-list{display:flex;flex-direction:column}
.lbrow{display:flex;align-items:center;gap:11px;padding:9px 10px;border-bottom:1px solid var(--line)}
.lbrow:last-child{border-bottom:none}
.lbrow.lbme{background:var(--primary-soft);border-radius:10px;border-bottom:none}
.lbrank{width:26px;height:26px;flex:0 0 26px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--muted);line-height:1;border-radius:50%;background:var(--chip)}
.lbrank.r1{background:linear-gradient(135deg,#ffd75e,#f0a500);color:#5a3a00}
.lbrank.r2{background:linear-gradient(135deg,#e4e8f0,#b7bfcc);color:#39414f}
.lbrank.r3{background:linear-gradient(135deg,#f0b98a,#cf8a52);color:#5a2f10}
.lbav{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#7b5bd6;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;line-height:1}
.lbav img{width:100%;height:100%;object-fit:cover}
.lbnm{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbnm b{color:var(--primary);font-weight:700}
.lbpts{font-size:13px;font-weight:800;color:var(--ink);flex:0 0 auto;font-variant-numeric:tabular-nums}
.lbpts::after{content:' P';font-size:11px;font-weight:600;color:var(--muted)}
.goal{display:flex;flex-direction:column;align-items:center;text-align:center}
.goalring{width:120px;height:120px;position:relative;margin-bottom:12px}
.goalring .c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px}
.goal .gt{font-size:14px;font-weight:700}.goal .gt b{color:var(--primary)}
.goal .gs{font-size:12.5px;color:var(--muted);margin-top:4px}
.lb{display:flex;flex-direction:column;gap:3px}
.lrow{display:flex;align-items:center;gap:11px;padding:8px;border-radius:10px}
.lrow.me{background:var(--primary-soft)}
.lrow .rk{width:20px;text-align:center;font-weight:800;font-size:13px;color:var(--muted)}
.lrow.me .rk{color:var(--primary)}
.lrow .av{width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center}
.lrow .nm{flex:1;font-size:13.5px;font-weight:600}
.lrow .pt{font-size:13px;font-weight:800}
.medal{font-size:15px;width:20px;text-align:center}

.empty{text-align:center;color:var(--muted);padding:50px 20px}
.empty .em{font-size:40px;margin-bottom:10px}

/* ===== Admin ===== */
.admtabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.admtabs button{padding:9px 16px;border-radius:11px;font:inherit;font-size:14px;font-weight:700;color:var(--muted);background:var(--chip);cursor:pointer}
.admtabs button.on{background:var(--primary);color:#fff}
.admselect{border:1.6px solid var(--line2);border-radius:11px;padding:10px 13px;font:inherit;font-weight:600;background:var(--app);color:var(--ink);cursor:pointer;outline:none}
.admselect:focus{border-color:var(--primary)}
.admqrow{display:flex;align-items:center;gap:13px;padding:13px 18px}
.admqrow+.admqrow{border-top:1px solid var(--line)}
.admqrow .hi{width:34px;height:34px;border-radius:9px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.admqrow .aqinfo{flex:1;min-width:0}
.admqrow .aqt{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admqrow .aqs{font-size:12px;color:var(--muted);margin-top:2px}
.aqbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);color:var(--ink2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.aqbtn:hover{background:var(--chip)}
.aqbtn.del:hover{background:var(--bad-soft);color:var(--bad);border-color:transparent}
/* Editor */
.editor{max-width:680px;margin:0 auto}
.edform{display:flex;flex-direction:column;gap:18px;margin-bottom:8px}
.edrow{display:flex;flex-direction:column;gap:8px}
.edrow>label{font-size:13px;font-weight:700;color:var(--ink2)}
.edrow select,.edrow textarea{border:1.6px solid var(--line2);border-radius:12px;padding:12px 14px;font:inherit;background:var(--app);color:var(--ink);outline:none;resize:vertical}
.edrow select:focus,.edrow textarea:focus{border-color:var(--primary)}
.edseg{display:flex;background:var(--chip);border-radius:12px;padding:4px;gap:0}
.edseg button{flex:1;padding:9px;border-radius:9px;font:inherit;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer}
.edseg button.on{background:var(--app);color:var(--ink);box-shadow:var(--shadow-sm)}
.edopt{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.edopt input[type=radio]{width:18px;height:18px;accent-color:var(--primary);flex:0 0 auto;cursor:pointer}
.edopt .ott{flex:1;border:1.5px solid var(--line2);border-radius:10px;padding:10px 13px;font:inherit;background:var(--app);color:var(--ink);outline:none}
.edopt .ott:focus{border-color:var(--primary)}
.edopt .ot{font-size:14.5px;font-weight:600}
.tsecrow{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line2);border-radius:12px;padding:12px;margin-bottom:10px}
.tsechead{display:flex;align-items:center;gap:8px}
.tsechead .th{flex:1;min-width:0}
.tsecrow .del{flex:0 0 auto}
.tsecrow .th{border:1.4px solid var(--line2);border-radius:9px;padding:9px 12px;font:inherit;font-weight:700;background:var(--app);color:var(--ink);outline:none}
.tsecrow .tt{border:1.4px solid var(--line2);border-radius:9px;padding:9px 12px;font:inherit;background:var(--app);color:var(--ink);outline:none;resize:vertical}
.tsecrow .th:focus,.tsecrow .tt:focus{border-color:var(--primary)}
/* Formular-Modal */
.modal.modal-form{text-align:left;max-width:460px;padding:22px}
.modal-form h3{margin:0 0 16px}
.mf-body{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.mf-inp{width:100%;border:1.6px solid var(--line2);border-radius:11px;padding:11px 13px;font:inherit;background:var(--app);color:var(--ink);outline:none;resize:vertical}
.mf-inp:focus{border-color:var(--primary)}
input[type=color].mf-inp{height:44px;padding:4px;cursor:pointer}
/* Coloris-Farbwähler an unser Design angepasst */
.clr-field{width:100%;display:block}
.clr-field input.mf-inp{padding-left:44px;text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.clr-field button{width:26px;height:26px;left:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.clr-picker{border-radius:16px;box-shadow:0 12px 34px rgba(20,16,45,.22);border:1px solid var(--line2);background:var(--panel);z-index:100000}
.clr-swatches button{border-radius:50%}
.clr-field button, .clr-swatches button{outline:none}
.clr-picker input.clr-color{border-radius:9px;border:1.4px solid var(--line2);background:var(--app);color:var(--ink)}
.clr-preview{border-radius:50%}
[data-theme=dark] .clr-picker{background:var(--panel)}

/* ===== Lernpfade: Editor-Schritte ===== */
.steprow{display:flex;align-items:center;gap:11px;border:1px solid var(--line2);border-radius:12px;padding:9px 12px;margin-bottom:8px}
.steprow .stepn{width:24px;height:24px;border-radius:7px;background:var(--primary-soft);color:var(--primary-d);font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.steprow .hi{width:30px;height:30px;border-radius:8px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.steprow .stepname{flex:1;font-size:14px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steprow .aqbtn{width:30px;height:30px;font-weight:800}

/* ===== Lernende zuweisen (Assign Learners) ===== */
.assign{max-width:1100px;margin:0 auto}
.assign-layout{display:flex;gap:22px;align-items:flex-start}
.assign-left{flex:1;min-width:0}
.assign-right{width:280px;flex:0 0 280px;background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:16px;position:sticky;top:0}
.assign-bar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.assign-bar .count{font-weight:700}
.assign-bar .srch2{display:flex;align-items:center;gap:9px;background:var(--chip);border-radius:11px;padding:9px 13px;color:var(--muted);font-size:14px;flex:1;max-width:240px}
.assign-bar .srch2 input{border:none;background:none;outline:none;color:var(--ink);font:inherit;flex:1;min-width:0}
.learner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.lcard{position:relative;border:1.6px solid var(--line2);border-radius:14px;padding:16px 14px;background:var(--app);cursor:pointer;text-align:left;transition:.14s}
.lcard:hover{border-color:var(--primary)}
.lcard.on{border-color:var(--primary);background:var(--primary-soft)}
.lcard .lcheck{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;color:#fff}
.lcard.on .lcheck{background:var(--primary);border-color:var(--primary)}
.lcard .lav{width:42px;height:42px;border-radius:50%;color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.lcard .ln{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard .lt{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.assign-rh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin-bottom:12px}
.assign-rh .cnt{background:var(--primary);color:#fff;border-radius:20px;padding:1px 9px;font-size:12px}
.assign-rh .clear{margin-left:auto;color:var(--primary);font-weight:700;font-size:12.5px;cursor:pointer}
.assigned-list{display:flex;flex-direction:column;gap:7px;max-height:60vh;overflow-y:auto}
.lchip{display:flex;align-items:center;gap:9px;background:var(--chip);border-radius:11px;padding:6px 8px}
.lchip .av{width:28px;height:28px;border-radius:50%;color:#fff;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.lchip .nm{flex:1;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lchip .x{width:24px;height:24px;border-radius:7px;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.lchip .x:hover{background:var(--bad-soft);color:var(--bad)}
@media (max-width:820px){ .assign-layout{flex-direction:column} .assign-right{width:100%;flex:0 0 auto;position:static} }

/* ===== Meine Lernpfade (Lernende) ===== */
.pathcard{background:var(--app);border:1px solid var(--line2);border-radius:18px;padding:18px 20px;margin-bottom:18px}
.pathhead{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pathhead .pi{width:48px;height:48px;border-radius:13px;background:var(--lav);display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;overflow:hidden}
.pathhead .pi img.pathimg{width:100%;height:100%;object-fit:contain;padding:5px}
.prow .thumb img.pathimg{object-fit:contain;padding:6px}
.pathhead .phinfo{flex:1;min-width:0}
.pathhead .phn{font-size:17px;font-weight:800;letter-spacing:-.01em}
.pathhead .phd{font-size:13px;color:var(--muted);margin-top:2px}
.pathhead .phprog{text-align:right;flex:0 0 auto}
.pathhead .phpct{font-size:20px;font-weight:800;color:var(--good-d)}
.pathhead .phsub{font-size:11.5px;color:var(--muted);font-weight:600}
.pathbar{height:8px;border-radius:6px;background:var(--track);overflow:hidden;margin-bottom:16px}
.pathbar span{display:block;height:100%;background:linear-gradient(90deg,var(--good),#34d19b);border-radius:6px}
.pathsteps{display:flex;flex-direction:column;gap:9px}
.pstep{display:flex;align-items:center;gap:13px;border:1px solid var(--line2);border-radius:13px;padding:12px 14px}
.pstep.done{background:var(--good-soft);border-color:transparent}
.pstep.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.pstep .pstepic{width:30px;height:30px;border-radius:9px;background:var(--chip);color:var(--ink2);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pstep.done .pstepic{background:var(--good);color:#fff}
.pstep.active .pstepic{background:var(--primary);color:#fff}
.pstep .psinfo{flex:1;min-width:0}
.pstep .psn{font-size:14.5px;font-weight:700}
.pstep .pss{font-size:12.5px;color:var(--muted);margin-top:1px}

/* ===== Duell-Arena ===== */
.duelnew{display:flex;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.duelnew input{flex:1;min-width:200px;border:1.6px solid var(--line2);border-radius:12px;padding:12px 15px;font:inherit;background:var(--app);color:var(--ink);outline:none}
.duelnew input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.duelrow{display:flex;align-items:center;gap:14px;padding:14px 18px}
.duelrow+.duelrow{border-top:1px solid var(--line)}
.duelrow .dav{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,#a06bff,#7b5bd6);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.duelrow .dinfo{flex:1;min-width:0}
.duelrow .dn{font-weight:700;font-size:14.5px}
.duelrow .ds{font-size:12.5px;color:var(--muted);margin-top:1px}
.duelrow .dend{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.duelrow .dscore{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.dbadge{font-size:12.5px;font-weight:700;border-radius:8px;padding:5px 11px;white-space:nowrap}
.dbadge.won{background:var(--good-soft);color:var(--good-d)}
.dbadge.lost{background:var(--bad-soft);color:var(--bad)}
.dbadge.tie{background:var(--chip);color:var(--chip-ink)}
.dbadge.wait{background:rgba(242,163,60,.15);color:#d97a12}

/* ===== Shop + Avatar-Rahmen ===== */
.avframe{padding:2.5px;border-radius:50%;display:inline-flex}
.avframe.rainbow{background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#3dd598,#4c86e0,#a06bff,#ff5f6d)}
/* Rahmen als sauberer Ring mit Abstand (Nav + Rail) statt voller Scheibe */
.rail .avframe,.me .avframe{padding:4px}
.rail .avframe .railav{box-shadow:0 0 0 2px var(--panel)}
.me .avframe .av{box-shadow:0 0 0 2px var(--ground)}
.av.lg{width:54px;height:54px;font-size:24px;font-weight:800;color:#26262e;display:flex;align-items:center;justify-content:center;line-height:1}
.diachip{margin-left:auto;background:var(--gold-soft);color:#b8860b;border-radius:10px;padding:7px 14px;font-size:14px;font-weight:800;white-space:nowrap}
:root[data-theme="dark"] .diachip, :root:not([data-theme="light"]) .diachip{color:var(--gold)}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px}
.shopcard{background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.shopcard .sname{font-size:15px;font-weight:800;margin-top:2px}
.shopcard .sprice{font-size:13px;font-weight:700;color:var(--muted)}
.shopcard .sprice .owned{color:var(--good-d)}
.shopcard .sbtn{width:100%;margin-top:2px}
.jokercard{background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jokercard .ji{width:46px;height:46px;border-radius:12px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto;overflow:hidden}
.jokercard .ji img{width:100%;height:100%;object-fit:contain;padding:3px}
.jokercard .jd{flex:1;min-width:160px}
.jokercard .jn{font-size:15.5px;font-weight:800}
.jokercard .jm{font-size:12.5px;color:var(--muted);margin-top:2px}
.jokercard .sprice{font-size:14px;font-weight:800;color:var(--muted);white-space:nowrap}
.jokercard .sbtn{min-width:120px}

/* ===== Glossar ===== */
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-content:start}
.gcard{background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:18px;cursor:pointer;text-align:left;transition:.15s;display:flex;flex-direction:column}
.gcard:hover{box-shadow:0 12px 26px rgba(40,38,70,.1);transform:translateY(-2px)}
.gcard .gi{width:44px;height:44px;border-radius:12px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:13px}
.gcard h3{font-size:16px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em;line-height:1.3}
.gcard p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard .gchip{align-self:flex-start;margin-top:auto;background:var(--chip);color:var(--chip-ink);border-radius:7px;padding:4px 10px;font-size:12px;font-weight:600}
.topic{max-width:760px;margin:0 auto}
.topic .thead{display:flex;align-items:center;gap:15px;margin-bottom:6px}
.topic .thead .ti{width:58px;height:58px;border-radius:15px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:28px;flex:0 0 auto}
.topic .thead h1{font-size:25px;font-weight:800;margin:0;letter-spacing:-.015em;line-height:1.2}
.topic .tintro{font-size:16px;line-height:1.6;color:var(--ink2);margin:16px 0 24px}
.tsection{background:var(--app);border:1px solid var(--line2);border-radius:14px;padding:17px 20px;margin-bottom:13px}
.tsection h3{font-size:15.5px;font-weight:800;margin:0 0 7px}
.tsection p{font-size:14.5px;line-height:1.65;color:var(--ink2);margin:0}

/* ===== Statistik ===== */
.stat-h{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px}
.stat-sub{color:var(--muted);font-size:14.5px;margin:0 0 22px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px;margin-bottom:30px}
.kpicard{background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:17px 18px}
.kpicard .ig{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px}
.kpicard .n{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.01em}
.kpicard .l{font-size:13px;color:var(--muted);margin-top:4px}
.sec-h2{font-size:17px;font-weight:800;margin:0 0 13px}
.catlist{background:var(--app);border:1px solid var(--line2);border-radius:16px;overflow:hidden;margin-bottom:30px}
.catrow{display:flex;align-items:center;gap:14px;padding:14px 18px}
.catrow+.catrow{border-top:1px solid var(--line)}
.catrow .cdot{width:36px;height:36px;border-radius:9px;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--chip)}
.catrow .cdot img{width:100%;height:100%;object-fit:cover}
.catrow .cn{flex:1;min-width:0}
.catrow .cn .nm{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catrow .cn .trk{height:7px;border-radius:5px;background:var(--track);margin-top:8px;overflow:hidden}
.catrow .cn .trk span{display:block;height:100%;background:var(--good);border-radius:5px}
.catrow .cend{text-align:right;flex:0 0 auto}
.catrow .cend .big{font-size:15px;font-weight:800}
.catrow .cend .sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.histrow{display:flex;align-items:center;gap:12px;padding:13px 18px;font-size:14px}
.histrow+.histrow{border-top:1px solid var(--line)}
.histrow .hi{width:32px;height:32px;border-radius:9px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;overflow:hidden}
.histrow .hi img{width:100%;height:100%;object-fit:contain;padding:3px}
.histrow .hi .emoji{font-size:16px;line-height:1}
.histrow .hn{flex:1;min-width:0}
.histrow .hn .t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.histrow .hn .d{font-size:12px;color:var(--muted);margin-top:1px}
.histrow .hr{font-weight:800;font-size:14px;white-space:nowrap}
.histrow .hp{color:var(--primary);font-weight:800;font-size:13px;white-space:nowrap;display:flex;align-items:center;gap:5px}
.badgewrap{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.badgechip{display:flex;align-items:center;gap:11px;background:var(--app);border:1px solid var(--line2);border-radius:13px;padding:11px 15px}
.badgechip.locked{opacity:.5}
.badgechip .bi{font-size:22px;filter:grayscale(0)}
.badgechip.locked .bi{filter:grayscale(1)}
.badgechip .bt .nm{font-size:13.5px;font-weight:800}
.badgechip .bt .ds{font-size:11.5px;color:var(--muted);margin-top:1px}

/* ===== Blitz-Quiz + Fehler-Training ===== */
.modi{margin-bottom:30px;display:flex;flex-direction:column;gap:14px}
.blitzcta{display:flex;align-items:center;gap:18px;border-radius:18px;padding:20px 24px;color:#3a2a00;background:linear-gradient(120deg,#ffd54a,#ffb020);position:relative;overflow:hidden;cursor:pointer;transition:transform .14s,box-shadow .14s}
.blitzcta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(40,38,70,.14)}
.blitzcta::after{content:"⚡";position:absolute;right:-14px;bottom:-30px;font-size:130px;opacity:.18;transform:rotate(-12deg);z-index:0;pointer-events:none}
.blitzcta.fehler{color:#fff;background:linear-gradient(120deg,#ff8f8f,#ef5a6f)}
.blitzcta.fehler::after{content:"🎯"}
.blitzcta.fehler .best{background:rgba(255,255,255,.22);color:#fff}
.blitzcta.fehler .btn{background:#1c1c22;color:#fff}
.blitzcta.fehler .btn:hover{background:#000}
.blitzcta.exam{color:#fff;background:linear-gradient(120deg,#7a68ff,#4b2fce)}
.blitzcta.exam::after{content:"📝"}
.blitzcta.exam .best{background:rgba(255,255,255,.2);color:#fff}
.blitzcta.exam .btn{background:#1c1c22;color:#fff}
.blitzcta.exam .btn:hover{background:#000}
.timer.low{color:var(--bad)}
.blitzcta .bi{font-size:38px;position:relative;z-index:1;width:56px;height:56px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.blitzcta .bi img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.22))}
.blitzcta .bt{flex:1;position:relative;min-width:0;z-index:1}
.blitzcta h3{margin:0 0 3px;font-size:19px;font-weight:800}
.blitzcta p{margin:0;font-size:14px;font-weight:600;opacity:.82}
.blitzcta .best{position:relative;z-index:1;font-size:13px;font-weight:800;background:rgba(0,0,0,.13);border-radius:20px;padding:5px 13px;white-space:nowrap}
.blitzcta .btn{position:relative;z-index:1;background:#1c1c22;color:#fff;min-width:132px}
.blitzcta .btn:hover{background:#000}
@media (max-width:560px){ .blitzcta .best{display:none} }

.bintro{max-width:520px;margin:14px auto;text-align:center}
.bintro .big{width:90px;height:90px;border-radius:24px;background:linear-gradient(140deg,#ffd54a,#ffb020);display:flex;align-items:center;justify-content:center;font-size:46px;margin:0 auto 20px;box-shadow:0 14px 30px rgba(255,176,32,.4)}
.bintro h1{font-size:28px;font-weight:800;margin:0 0 8px;letter-spacing:-.01em}
.bintro .sub{color:var(--muted);font-size:15px;margin-bottom:24px;line-height:1.6}
.brules{background:var(--app);display:flex;flex-direction:column;gap:13px;text-align:left;border:1px solid var(--line2);border-radius:16px;padding:18px 20px;margin-bottom:24px}
.brules > div{display:flex;align-items:center;gap:13px;font-size:14.5px;font-weight:500}
.brules .ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden}
.brules .ic.catic{background:var(--panel)}
.brules .ic img{width:26px;height:26px;object-fit:contain}
.brules .ic .emoji{font-size:17px;line-height:1}
.kpi .big img.kpi-tr{width:26px;height:26px;object-fit:contain;vertical-align:middle}
.bintro .bestline{font-size:14px;color:var(--muted);margin-bottom:18px}
/* Themen-Dropdown (Prüfung) */
.thema{text-align:left;margin:0 0 22px}
.thema>label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.dropdown{position:relative}
.dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.6px solid var(--line2);border-radius:12px;padding:12px 15px;background:var(--app);font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.dd-btn:hover,.dropdown.open .dd-btn{border-color:var(--primary)}
.dropdown.open .dd-btn{box-shadow:0 0 0 3px var(--primary-soft)}
.dd-btn .dd-val{display:flex;align-items:center;gap:10px;min-width:0}
.dd-btn .dd-val .ov{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-btn svg{color:var(--muted);flex:0 0 auto;transition:transform .16s}
.dropdown.open .dd-btn svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--app);border:1px solid var(--line2);border-radius:14px;box-shadow:0 20px 50px rgba(20,16,50,.22);z-index:30;padding:8px;max-height:320px;display:flex;flex-direction:column}
.dd-search{padding:2px 2px 8px}
.dd-search input{width:100%;border:1.4px solid var(--line2);border-radius:10px;padding:9px 13px;font:inherit;background:var(--app);color:var(--ink);outline:none}
.dd-search input:focus{border-color:var(--primary)}
.dd-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.dd-opt{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;width:100%}
.dd-opt:hover{background:var(--chip)}
.dd-opt.selected{background:var(--primary-soft);color:var(--primary-d)}
.dd-opt .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-opt .chk{color:var(--primary);opacity:0;display:flex;flex:0 0 auto}
.dd-opt.selected .chk{opacity:1}
.oi{width:26px;height:26px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;background:var(--chip)}
.oi img{width:100%;height:100%;object-fit:cover}
.bintro .bestline b{color:var(--ink)}

.blitz{max-width:680px;margin:0 auto}
.btop{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.btop .iconbtn{flex:0 0 auto}
.btime{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.btime.low{color:var(--bad)}
.bscore{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--good-soft);color:var(--good-d);border-radius:12px;padding:9px 15px;font-weight:800;font-size:16px}
.btimebar{height:8px;border-radius:6px;background:var(--track);overflow:hidden;margin-bottom:26px}
.btimebar span{display:block;height:100%;background:linear-gradient(90deg,#ffb020,#ff8a00);width:100%}
.btimebar span.low{background:linear-gradient(90deg,#ef5a6f,#e0475d)}
.bflash{animation:bpop .25s}
@keyframes bpop{0%{transform:scale(.99)}50%{transform:scale(1.004)}100%{transform:scale(1)}}

/* ===== Modal (Mission-Success-Dialog-Stil) ===== */
.modal-ov{position:fixed;inset:0;background:rgba(16,14,34,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;transition:opacity .2s;padding:20px}
.modal-ov.show{opacity:1}
.modal{position:relative;background:var(--app);border:1px solid var(--line2);border-radius:24px;padding:30px 28px 26px;max-width:430px;width:100%;box-shadow:0 30px 80px rgba(20,16,50,.34);transform:translateY(16px) scale(.92);transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .22s;opacity:0;color:var(--ink);text-align:center}
.modal-ov.show .modal{transform:none;opacity:1}
.m2-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.m2-x:hover{background:var(--chip);color:var(--ink)}
.m2-badge{position:absolute;top:15px;left:16px;display:inline-flex;align-items:center;gap:5px;background:var(--chip);color:var(--ink2);font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px}
.m2-hero{position:relative;margin:4px auto 16px;width:104px;height:104px;display:flex;align-items:center;justify-content:center}
.m2-hero::before{content:'';position:absolute;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,var(--primary-soft),transparent 70%);z-index:0}
.modal.danger .m2-hero::before{background:radial-gradient(circle,var(--bad-soft),transparent 72%)}
.m2-hero img,.m2-emoji{position:relative;z-index:1}
.m2-hero img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 15px rgba(120,100,255,.4))}
.m2-emoji{font-size:52px;line-height:1;filter:drop-shadow(0 10px 14px rgba(120,100,255,.35))}
.modal.danger .m2-emoji{filter:drop-shadow(0 10px 14px rgba(239,90,111,.4))}
.m2-title{font-size:22px;font-weight:800;margin:0 0 8px;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.m2-desc{font-size:14px;color:var(--muted);margin:0 0 22px;line-height:1.55}
.m2-content{display:flex;flex-direction:column;gap:14px;margin:0 0 20px;text-align:left}
.m2-actions{display:flex;flex-direction:column;gap:9px}
.m2-link{border:none;background:none;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;padding:5px}
.m2-link:hover{color:var(--ink2);text-decoration:underline}
.m2-form{max-width:450px}
/* Feier-/Erfolgs-Modal */
.m2-cheer .m2-hero,.m2-cheer .m2-title,.m2-cheer .m2-desc,.m2-cheer .m2-actions{position:relative;z-index:1}
.m2-hero.cheer::before{background:radial-gradient(circle,rgba(240,180,41,.42),transparent 66%)}
.m2-cheer .m2-emoji{font-size:56px;filter:drop-shadow(0 8px 16px rgba(240,180,41,.5))}
.m2-burst{position:absolute;top:16px;left:50%;width:196px;height:196px;transform:translateX(-50%);background:repeating-conic-gradient(from 0deg,rgba(240,180,41,.17) 0deg 5deg,transparent 5deg 13deg);-webkit-mask-image:radial-gradient(circle,#000 6%,transparent 62%);mask-image:radial-gradient(circle,#000 6%,transparent 62%);pointer-events:none;z-index:0;animation:burstspin 24s linear infinite}
@keyframes burstspin{to{transform:translateX(-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.m2-burst{animation:none}}
.btn.danger{background:var(--bad);color:#fff;box-shadow:0 8px 18px rgba(239,90,111,.28)}
.btn.danger:hover{background:#e0475d}

/* ===== Avatar-Fotos ===== */
.me .av img,.railav img,.drawer-user .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.me{gap:8px}
.mechev{color:var(--muted);flex:0 0 auto;margin-left:2px}
.nbtn .dotn{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--app)}
.nbtn .nbadge{position:absolute;top:1px;right:1px;box-sizing:border-box;min-width:18px;height:18px;padding:0 3px;border-radius:999px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--app);line-height:1;font-variant-numeric:tabular-nums;z-index:1}
.nbtn{position:relative}

/* ===== Popover-Menü (Bell + Avatar) ===== */
.pop-ov{position:fixed;inset:0;z-index:120;opacity:0;transition:opacity .13s}
.pop-ov.show{opacity:1}
.pop{position:absolute;min-width:210px;max-width:min(300px,92vw);background:var(--app);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 46px rgba(20,16,50,.22);padding:7px;transform:translateY(-4px);transition:transform .14s}
.pop-ov.show .pop{transform:none}
.popitem{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;text-align:left}
.popitem:hover{background:var(--chip)}
.popitem>svg{color:var(--faint);flex:0 0 auto}
.popitem.danger{color:var(--bad)} .popitem.danger:hover{background:var(--bad-soft)} .popitem.danger>svg{color:var(--bad)}
.pop-div{height:1px;background:var(--line);margin:5px 8px}
.pop-bell{min-width:288px;padding:4px}
.pop-h{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);padding:12px 14px 8px}
.pop-empty{padding:20px 14px 24px;text-align:center;color:var(--muted);font-size:13.5px}
.noti{display:flex;align-items:flex-start;gap:11px;width:100%;padding:11px 12px;border-radius:11px;cursor:pointer;text-align:left;background:none;border:none}
.noti:hover{background:var(--chip)}
.noti .ni{width:34px;height:34px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.noti .nt{font-size:14px;font-weight:700;color:var(--ink)}
.noti .nx{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}

/* ===== Profil-Modal ===== */
.prof-body{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px}
.prof-av{width:96px;height:96px;border-radius:50%;overflow:hidden;background:#33a1e0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800}
.prof-av img{width:100%;height:100%;object-fit:cover}
.prof-name{text-align:center;font-size:17px;font-weight:800}
.prof-role{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.prof-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.prof-acts .btn{width:max-content}
.m2 .prof-acts{margin:4px 0 16px}
.m2 .prof-av{margin:0 auto}

/* ===== Mobile: Hamburger + Drawer ===== */
.navburger{display:none;width:40px;height:40px;border-radius:11px;align-items:center;justify-content:center;color:var(--ink2);flex:0 0 auto}
.navburger:hover{background:var(--chip)}
@media (max-width:1000px){ .navburger{display:flex} }
.drawer-ov{position:fixed;inset:0;background:rgba(16,14,34,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:110;opacity:0;transition:opacity .22s}
.drawer-ov.show{opacity:1}
.drawer{position:absolute;left:0;top:0;bottom:0;width:284px;max-width:86vw;background:var(--app);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,.9,.3,1);box-shadow:0 0 60px rgba(0,0,0,.3)}
.drawer-ov.show .drawer{transform:none}
.drawer-head{display:flex;align-items:center;gap:10px;padding:17px 18px;font-size:19px;font-weight:800;border-bottom:1px solid var(--line)}
.drawer-head .mk{width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,#6a4bff,#4b39d6);display:flex;align-items:center;justify-content:center;color:#fff}
.drawer-x{margin-left:auto;width:32px;height:32px;border-radius:9px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.drawer-x:hover{background:var(--chip)}
.drawer-user{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line)}
.drawer-user .av{width:40px;height:40px;border-radius:50%;background:#33a1e0;color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.drawer-user .nm{font-weight:700;font-size:15px}
.drawer-user .ro{font-size:12.5px;color:var(--muted)}
.drawer-nav{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:2px}
.drawer-item{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink2);cursor:pointer;text-align:left;width:100%}
.drawer-item:hover{background:var(--chip)}
.drawer-item.on{background:var(--primary-soft);color:var(--primary-d)}
.drawer-item>svg{color:var(--faint);flex:0 0 auto;width:20px}.drawer-item.on>svg{color:var(--primary)}
.drawer-item>span{flex:1}
.drawer-bot{border-top:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:2px}

/* Toast */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--app);padding:12px 20px;border-radius:12px;font-size:14px;font-weight:700;box-shadow:var(--shadow);opacity:0;transition:.25s;z-index:50;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:860px){
  .login .brand-side{display:none}
  .form-side{width:100%;flex:1 1 auto;padding:28px 22px}
  .form-box .logo-sm{display:flex}
}
@media (max-width:860px){
  .nav{padding-left:14px;padding-right:14px;gap:10px}
  .body{padding:18px 14px 30px}
  .hero{margin-bottom:20px}
  .hero h1{font-size:24px}
  .hstats{width:100%}
  .hstat{flex:1;min-width:0;padding:12px 12px}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .kpis{gap:10px}
  .kpi{min-width:0;padding:16px 10px}
  .qtext{font-size:21px}
  .admtabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .admtabs button{white-space:nowrap;flex:0 0 auto}
  .modal,.modal.modal-form{padding:20px}
  .prow{gap:12px;padding:14px}
  .banner{font-size:13.5px}
  .sec-h h2{font-size:16px}
}
@media (max-width:640px){
  .srch{display:none}
  .me .nm,.me .ro{display:none}
  .blitzcta{padding:16px 16px;flex-wrap:wrap}
  .blitzcta .best{order:3}
  .prow .pcol{display:none}
}

/* ---- Admin-Sidebar (ersetzt Lernbereich-Sidebar) ---- */
.side2.admin{overflow:hidden}
.side2.admin.slidein{animation:adminSlide .28s cubic-bezier(.2,.8,.2,1)}
@keyframes adminSlide{from{transform:translateX(-14px);opacity:.2}to{transform:none;opacity:1}}
.s2head.admin-h{display:flex;align-items:center;gap:9px}
.ah-badge{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center}
.s2back{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;padding:8px 8px;margin:-4px 0 12px;border-radius:9px}
.s2back:hover{background:var(--app);color:var(--ink2)}
.s2back svg{width:16px;height:16px}

/* ---- Weiter lernen (Continue-Learning-Karten) ---- */
.clgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:18px;margin-bottom:8px}
.clcard{background:var(--app);border:1px solid var(--line2);border-radius:18px;overflow:hidden}
.cl-top{display:flex;align-items:center;gap:18px;padding:16px}
.cl-thumb{width:148px;height:110px;flex:0 0 148px;border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.cl-thumb img{width:100%;height:100%;object-fit:cover}
.cl-thumb .emoji{font-size:50px}
.cl-badge{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;background:#282830;color:#fff;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:600}
.cl-main{flex:1;min-width:0}
.cl-type{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.cl-ti{display:inline-flex;width:18px;height:18px;border-radius:5px;overflow:hidden;align-items:center;justify-content:center;font-size:13px}
.cl-ti img{width:100%;height:100%;object-fit:cover}
.cl-main h3{margin:0 0 13px;font-size:16.5px;font-weight:800;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cl-pl{font-size:12.5px;color:var(--muted);font-weight:600;display:block;margin-bottom:7px}
.cl-pl b{color:var(--ink)}
.cl-bar{height:8px;border-radius:6px;background:var(--track);overflow:hidden}
.cl-bar span{display:block;height:100%;background:var(--good);border-radius:6px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.cl-btn{flex:0 0 auto;align-self:center}
.cl-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--ground);font-size:13px;color:var(--muted);font-weight:500}
.cl-fi{width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}
.cl-foot a{color:var(--primary);font-weight:700;cursor:pointer}
.cl-foot a:hover{text-decoration:underline}
@media (max-width:560px){
  .clgrid{grid-template-columns:1fr}
  .cl-top{flex-wrap:wrap}
  .cl-thumb{width:96px;height:74px;flex-basis:96px}
  .cl-main{flex-basis:calc(100% - 114px)}
  .cl-btn{width:100%;order:3}
}

/* ---- Kategorie-Detail (Kurs-Übersicht) ---- */
.cd-hero{display:flex;gap:32px;align-items:center;background:var(--app);border:1px solid var(--line2);border-radius:20px;padding:30px 32px;margin-bottom:22px}
.cd-left{flex:1;min-width:0}
.cd-crumb{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:14px}
.cd-crumb a{color:var(--muted);cursor:pointer}
.cd-crumb a:hover{color:var(--primary)}
.cd-crumb span{color:var(--ink2)}
.cd-type{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:12px}
.cd-ti{display:inline-flex;width:24px;height:24px;border-radius:7px;overflow:hidden;align-items:center;justify-content:center;font-size:15px;background:var(--chip)}
.cd-ti img{width:100%;height:100%;object-fit:cover}
.cd-title{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 15px;line-height:1.15}
.cd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.cd-tags span{background:var(--chip);color:var(--chip-ink);font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px}
.cd-tags .done{background:var(--good-soft);color:var(--good-d)}
.cd-actions{display:flex;gap:12px;flex-wrap:wrap}
.cd-fav{display:inline-flex;align-items:center;gap:7px}
.cd-fav svg{width:15px;height:15px}
.cd-fav.on{border-color:var(--primary);color:var(--primary)}
.cd-art{flex:0 0 380px;max-width:44%;height:230px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cd-art img{width:auto;height:70%;max-width:80%;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.18))}
.cd-art .emoji{font-size:92px}
.cd-body{display:flex;gap:24px;align-items:flex-start}
.cd-main{flex:1;min-width:0}
.cd-side{flex:0 0 300px}
.cd-desc{font-size:14.5px;color:var(--ink2);line-height:1.6;margin:0}
.cd-cert{display:flex;gap:14px;align-items:center;background:linear-gradient(120deg,var(--primary-soft),transparent);border:1px solid var(--line2);border-radius:14px;padding:16px 18px;margin-top:18px}
.cd-certic{font-size:30px;flex:0 0 auto}
.cd-cert .nm{font-weight:800;font-size:15px}
.cd-cert .sub{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.cd-count{display:inline-flex;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:var(--chip);color:var(--ink2);font-size:12px;font-weight:700;align-items:center;justify-content:center;margin-left:6px}
.cd-content{display:flex;flex-direction:column;gap:10px}
.cd-item{display:flex;align-items:center;gap:14px;background:var(--app);border:1px solid var(--line2);border-radius:13px;padding:13px 16px;cursor:pointer;text-align:left;width:100%;transition:.14s}
.cd-item:hover{border-color:var(--primary);background:var(--primary-soft)}
.cd-in{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:18px}
.cd-in svg{width:18px;height:18px}
.cd-it{flex:1;min-width:0}
.cd-it .nm{font-size:14.5px;font-weight:700;color:var(--ink)}
.cd-it .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.cd-go{font-size:13px;font-weight:700;color:var(--primary);white-space:nowrap;flex:0 0 auto}
.cd-card{background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:20px;margin-bottom:16px}
.cd-card h3{margin:0 0 12px;font-size:15px;font-weight:800}
.cd-row{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ink2);font-weight:500;padding:8px 0}
.cd-row+.cd-row{border-top:1px solid var(--line)}
.cd-row b{margin-left:auto;text-align:right;font-weight:700;color:var(--ink)}
.cd-ri{width:22px;text-align:center;font-size:15px;flex:0 0 auto}
.pd-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.pd-h h3{margin:0!important}
.pd-h .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px}
.pd-h .btn svg{width:15px;height:15px}
.cd-stat{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cd-sn{font-size:16px;font-weight:800}
.cd-ss{font-size:12.5px;color:var(--muted);margin-top:2px}
.cd-mini{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--muted);font-weight:600;border-top:1px solid var(--line);padding-top:13px}
.cd-mini b{color:var(--ink)}
@media (max-width:900px){
  .cd-hero{flex-direction:column;align-items:stretch;gap:22px;padding:24px}
  .cd-art{width:100%;flex-basis:auto;max-width:none;height:180px;order:-1}
  .cd-body{flex-direction:column}
  .cd-side{flex-basis:auto;width:100%}
}

/* ---- Zertifikat ---- */
.cd-cert.done{cursor:pointer;text-align:left;width:100%;border-color:var(--primary);transition:.14s}
.cd-cert.done:hover{background:linear-gradient(120deg,var(--primary-soft),transparent);transform:translateY(-1px);box-shadow:0 8px 20px rgba(90,70,232,.14)}
.cert-page{padding:6px 2px 40px}
.cert-bar{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.cert-bar .btn{display:inline-flex;align-items:center;gap:7px}
.cert{position:relative;display:flex;max-width:940px;margin:0 auto;aspect-ratio:1.44/1;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#7a5cff,#4b2fce);padding:8px;box-shadow:0 34px 80px rgba(40,25,100,.34)}
.cert-l{flex:1.72;background:radial-gradient(circle at 93% 5%,rgba(122,92,255,.07),transparent 40%),linear-gradient(135deg,#fbfaff,#eee9fb);padding:min(4.4%,44px) min(4.8%,48px);display:flex;flex-direction:column;position:relative}
.cert-date{font-size:12px;font-weight:700;letter-spacing:1px;color:#5a5570;margin-bottom:min(4%,26px)}
.cert-h{font-size:clamp(22px,3.6vw,32px);font-weight:900;letter-spacing:1px;color:#181230;margin:0 0 min(3%,18px)}
.cert-akk{font-size:14px;color:#6a6580;margin-bottom:6px}
.cert-name{font-size:clamp(24px,3.8vw,34px);font-weight:800;color:#2a1d5e;margin-bottom:min(2.4%,16px);letter-spacing:-.01em}
.cert-txt{font-size:clamp(13px,1.5vw,15px);color:#3a3550;line-height:1.6;margin:0 0 10px}
.cert-txt b{color:#2a1d5e}
.cert-desc{font-size:clamp(11.5px,1.35vw,13px);color:#6a6580;line-height:1.6;margin:0}
.cert-sigs{display:flex;gap:clamp(20px,5%,48px);margin-top:auto;padding-top:22px}
.cert-sig{display:flex;flex-direction:column}
.cert-sig .cert-line{width:min(140px,100%);height:1px;background:#c3bdd6;margin:2px 0 8px}
.cert-sig b{font-size:14px;color:#181230}
.cert-sig small{font-size:12px;color:#8a85a0;margin-top:1px}
.cert-id{font-size:10.5px;color:#a8a3bd;margin-top:14px;letter-spacing:.6px}
.cert-r{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 72% 26%,rgba(150,120,255,.32),transparent 55%),linear-gradient(160deg,#3a2a72,#120a2a)}
.cert-r::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(165,140,255,.16) 1px,transparent 1.5px);background-size:15px 15px;opacity:.5;pointer-events:none}
.cert-emblem{position:relative;z-index:1;filter:drop-shadow(0 6px 26px rgba(150,120,255,.7))}
.cert-emblem::before{content:'';position:absolute;left:50%;top:50%;width:196px;height:196px;border-radius:50%;transform:translate(-50%,-52%);background:radial-gradient(circle,rgba(150,120,255,.4),transparent 60%);z-index:-1}
.cert-seal{position:absolute;left:-60px;top:58%;transform:translateY(-50%);z-index:3;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
.cert-brand{position:absolute;bottom:24px;right:26px;display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:15px}
.cert-brand svg{color:#b9a6ff}
@media (max-width:640px){
  .cert{aspect-ratio:auto;flex-direction:column}
  .cert-l{padding:28px 24px}
  .cert-r{min-height:200px;padding:26px}
  .cert-seal{position:static;transform:none;margin-top:14px;left:auto}
}
@media print{
  .rail,.side2,.nav,.tabs,.tabbar,.cert-bar,#toast,.rail2{display:none!important}
  html,body,#app-shell,.shell,.mainpane,.body,.cert-page{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;display:block!important;background:#fff!important;margin:0!important;padding:0!important}
  /* Vollflächig: keine runden Ecken, kein Rahmen, volle Seitenbreite, genau eine Seite */
  .cert{max-width:none!important;width:100%!important;margin:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;max-height:100vh!important;overflow:hidden!important;page-break-inside:avoid;break-inside:avoid;page-break-after:avoid}
  /* Hintergründe/Farben beim Drucken erzwingen (sonst fehlt der dunkle Teil) */
  .cert,.cert *,.cert *::before,.cert *::after{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .m2-burst{animation:none!important}
  @page{size:landscape;margin:0}
}

/* ---- Merksatz (Eselsbrücke) ---- */
.merksatz{background:linear-gradient(120deg,rgba(240,180,41,.13),transparent 72%);border:1px solid var(--line2);border-radius:16px;padding:18px 20px;margin-top:18px}
.ms-h{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:10px}
.ms-s{font-size:18px;font-weight:600;color:var(--ink2);margin-bottom:14px;line-height:1.4}
.ms-w b{color:var(--primary);font-weight:800}
.ms-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.ms-item{display:flex;align-items:center;gap:9px;background:var(--app);border:1px solid var(--line2);border-radius:10px;padding:8px 11px}
.ms-num{width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:var(--chip);color:var(--muted);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ms-let{width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:var(--primary-soft);color:var(--primary);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ms-lay{font-size:13px;font-weight:600;color:var(--ink2);min-width:0;line-height:1.3}
.ms-note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
/* ---- Zertifikate-Liste (Profil) ---- */
.pcertlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pcert{display:flex;align-items:center;gap:12px;background:var(--app);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;cursor:pointer;text-align:left;width:100%;transition:.14s}
.pcert:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-1px)}
.pcert .pc-ic{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--good-soft);display:flex;align-items:center;justify-content:center;font-size:20px}
.pcert .pc-t{flex:1;min-width:0}
.pcert .pc-nm{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcert .pc-s{font-size:12px;color:var(--muted);margin-top:2px}
.pcert .pc-go{font-size:13px;font-weight:700;color:var(--primary);flex:0 0 auto}

/* ---- Kategorie-Detail: Tabs + Fragen-Analyse ---- */
.cd-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line2);margin-bottom:20px}
.cd-tabs button{border:none;background:none;padding:11px 2px;margin-right:22px;font-size:14.5px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent}
.cd-tabs button.on{color:var(--ink);border-bottom-color:var(--primary)}
.qa-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:18px}
.qa-info svg{width:15px;height:15px;flex:0 0 auto}
.qa-kpis{display:flex;gap:34px;margin-bottom:24px;flex-wrap:wrap}
.qak .n{font-size:23px;font-weight:800;letter-spacing:-.02em}
.qak .l{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.qa-list{display:flex;flex-direction:column;gap:16px}
.qa-card{border:1px solid var(--line2);border-radius:16px;padding:20px;background:var(--app)}
.qa-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.qa-num{font-size:13px;font-weight:800}
.qa-meta{font-size:12.5px;color:var(--muted);font-weight:600}
.qa-q{font-size:15.5px;font-weight:700;margin-bottom:16px;line-height:1.4}
.qa-body{display:flex;gap:20px;align-items:flex-start}
.qa-opts{flex:1;min-width:0;display:flex;flex-direction:column;gap:13px}
.qa-ol{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.qa-ol span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa-ol b{color:var(--ink);flex:0 0 auto}
.qa-bar{height:9px;border-radius:6px;background:var(--track);overflow:hidden}
.qa-bar span{display:block;height:100%;background:var(--faint);border-radius:6px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.qa-opt.ok .qa-bar span{background:var(--good)}
.qa-opt.ok .qa-ol,.qa-opt.ok .qa-ol b{color:var(--good-d)}
.qa-oc{font-size:11.5px;color:var(--muted);margin-top:4px;font-weight:600}
.qa-stats{flex:0 0 168px;border:1px solid var(--line2);border-radius:12px;padding:14px 16px}
.qa-stats h4{margin:0 0 10px;font-size:13.5px;font-weight:800}
.qa-sr{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);font-weight:600;padding:6px 0}
.qa-sr b{margin-left:auto;font-weight:800;color:var(--ink)}
.qa-sr .d{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.qa-sr.ok .d{background:var(--good)}
.qa-sr.no .d{background:var(--bad)}
@media (max-width:640px){ .qa-body{flex-direction:column} .qa-stats{flex-basis:auto;width:100%} }

/* ---- Diskussion ---- */
.disc-av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:#7b5bd6;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.disc-av img{width:100%;height:100%;object-fit:cover}
.disc-composer{border:1px solid var(--line2);border-radius:16px;padding:16px;background:var(--app);margin-bottom:20px}
.disc-crow{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.disc-title{flex:1;min-width:0;border:1px solid var(--line2);border-radius:10px;padding:9px 13px;font:inherit;font-weight:700;background:var(--ground);color:var(--ink);outline:none}
.disc-title:focus,.disc-text:focus,.disc-rinp:focus{border-color:var(--primary)}
.disc-text{width:100%;border:1px solid var(--line2);border-radius:10px;padding:11px 13px;font:inherit;background:var(--ground);color:var(--ink);outline:none;resize:vertical}
.disc-cact{display:flex;justify-content:flex-end;margin-top:10px}
.disc-head{margin:0 0 14px}
.disc-head h3{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center}
.disc-thread{border:1px solid var(--line2);border-radius:16px;padding:16px 18px;margin-bottom:14px;background:var(--app)}
.dt-head{display:flex;align-items:center;gap:12px}
.dt-who{flex:1;min-width:0}
.dt-name{font-size:14px;font-weight:700;color:var(--ink)}
.dt-time{font-size:12px;color:var(--muted);margin-top:1px}
.dt-del,.dr-del{border:none;background:none;color:var(--faint);width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.dt-del:hover,.dr-del:hover{background:var(--bad-soft);color:var(--bad)}
.dt-title{font-size:15.5px;font-weight:700;color:var(--ink);margin:12px 0 4px}
.dt-text{font-size:14px;color:var(--ink2);line-height:1.55;white-space:pre-wrap;margin-top:8px}
.dt-meta{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:12px}
.dt-replies{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding-left:6px}
.dr-row{display:flex;gap:11px}
.dr-row .disc-av{width:30px;height:30px;flex-basis:30px;font-size:11px}
.dr-body{flex:1;min-width:0;background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.dr-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.dr-top b{font-size:13px;color:var(--ink)}
.dr-top span{font-size:11.5px;color:var(--muted)}
.dr-top .dr-del{margin-left:auto;width:22px;height:22px}
.dr-text{font-size:13.5px;color:var(--ink2);line-height:1.5;white-space:pre-wrap}
.dt-replybox{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.dt-replybox .disc-av{width:30px;height:30px;flex-basis:30px;font-size:11px}
.disc-rinp{flex:1;min-width:0;border:1px solid var(--line2);border-radius:20px;padding:9px 15px;font:inherit;background:var(--ground);color:var(--ink);outline:none}
.dt-rbtn{flex:0 0 auto}
/* Standalone-Diskussionsmodul */
.disc-crow{flex-wrap:wrap}
.disc-catsel{flex:0 0 auto;border:1px solid var(--line2);border-radius:10px;padding:9px 12px;font:inherit;font-weight:600;background:var(--ground);color:var(--ink);cursor:pointer;max-width:190px;outline:none}
.disc-catsel:focus{border-color:var(--primary)}
.disc-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.disc-filter button{border:none;background:var(--chip);color:var(--muted);font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:9px;cursor:pointer}
.disc-filter button.on{background:var(--primary-soft);color:var(--primary)}
.dt-cat{display:inline-flex;align-items:center;gap:7px;background:var(--chip);border:none;border-radius:20px;padding:5px 12px 5px 6px;font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer;flex:0 0 auto;transition:.14s}
.dt-cat:hover{background:var(--primary-soft);color:var(--primary)}
.dt-cati{width:22px;height:22px;flex:0 0 22px;border-radius:6px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:var(--app)}
.dt-cati img{width:100%;height:100%;object-fit:cover}

/* ---- Einstellungen (Profil-Seite) ---- */
.settings .cd-card{max-width:680px;margin-bottom:16px}
.set-card h3{margin:0 0 16px;font-size:16px}
.set-avrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.set-av{width:88px;height:88px;flex:0 0 88px;border-radius:50%;overflow:hidden;background:#33a1e0;color:#fff;font-weight:800;font-size:30px;display:flex;align-items:center;justify-content:center}
.set-av img{width:100%;height:100%;object-fit:cover}
.set-avacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.set-avacts .btn{width:max-content}
.set-hint{flex-basis:100%;font-size:12px;color:var(--muted);margin-top:2px}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.set-foot{display:flex;justify-content:flex-end;margin-top:16px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0}
.set-row+.set-row{border-top:1px solid var(--line)}
.set-rl{font-size:14px;font-weight:700;color:var(--ink)}
.set-rs{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.set-theme{display:inline-flex;background:var(--chip);border-radius:10px;padding:3px;flex:0 0 auto}
.set-theme button{border:none;background:none;font-size:13px;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:8px;cursor:pointer;white-space:nowrap}
.set-theme button.on{background:var(--app);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.07)}
@media (max-width:560px){ .set-grid{grid-template-columns:1fr} }

/* ---- Profil-Seite ---- */
.phero{position:relative;overflow:hidden;border-radius:22px;padding:34px 24px 30px;text-align:center;background:linear-gradient(135deg,#7b68ff,#5a46e8 55%,#4b39d6);color:#fff;margin-bottom:16px}
.phdeco{position:absolute;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.phdeco.a{width:190px;height:190px;top:-70px;right:-40px}
.phdeco.b{width:150px;height:150px;bottom:-70px;left:-30px}
.pav{position:relative;z-index:1;width:max-content;margin:0 auto 16px}
.pav .avframe{padding:4px}
.pav-in{width:92px;height:92px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--primary);font-weight:800;font-size:32px;box-shadow:0 0 0 5px rgba(255,255,255,.95),0 12px 26px rgba(0,0,0,.25)}
.pav .avframe .pav-in{box-shadow:0 10px 24px rgba(0,0,0,.25)}
.pav-in img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pname{font-size:26px;font-weight:800;margin:0 0 9px;position:relative;z-index:1}
.prole{display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:20px;position:relative;z-index:1}
.pcrest{position:relative;z-index:1;margin:16px auto 0;display:flex;justify-content:center}
.pcrest .avframe{padding:3px}
.pc-in{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.plevel{position:relative;z-index:1;max-width:440px;margin:20px auto 2px}
.plv-top{display:flex;justify-content:space-between;color:#fff;font-size:13.5px;font-weight:700;margin-bottom:9px}
.plv-bar{height:9px;border-radius:6px;background:rgba(255,255,255,.26);overflow:hidden}
.plv-bar span{display:block;height:100%;background:#fff;border-radius:6px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.plv-sub{text-align:center;color:rgba(255,255,255,.82);font-size:12.5px;font-weight:600;margin-top:9px}
.pkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:6px}
.pkcard{background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:20px 16px;text-align:center}
.pkcard .n{font-size:29px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.pkcard .l{font-size:13px;color:var(--muted);margin-top:6px;font-weight:600}
.pbadges{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pbadge{background:var(--app);border:1px solid var(--line2);border-radius:14px;padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.pb-ic{font-size:30px;line-height:1}
.pb-nm{font-size:12.5px;font-weight:700;color:var(--ink2)}
.pbadge.locked{opacity:.5;filter:grayscale(.75)}
@media (max-width:720px){ .pkgrid,.pbadges{grid-template-columns:repeat(2,1fr)} }

/* ---- Admin-Report-Dashboard ---- */
.rrow{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;align-items:stretch}
.rrow>.rcol{flex:1;min-width:260px;display:flex;flex-direction:column;gap:16px}
.rcard{flex:1;min-width:280px;background:var(--app);border:1px solid var(--line2);border-radius:16px;padding:18px 20px}
.rcard.feed{flex:1.55}
.rcol .rcard{min-width:0}
.rc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.rc-h h3{font-size:15px;font-weight:700;margin:0}
.rc-note{font-size:12px;color:var(--muted);font-weight:600}
.rfilters{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.rfilters button{border:none;background:var(--chip);color:var(--muted);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer}
.rfilters button.on{background:var(--primary-soft);color:var(--primary)}
.rfeed{display:flex;flex-direction:column;max-height:352px;overflow-y:auto;margin:0 -4px}
.rfeed-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.rfeed-row:last-child{border-bottom:none}
.fav{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#7b5bd6;color:#fff;font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fav img{width:100%;height:100%;object-fit:cover}
.fav.sm{width:28px;height:28px;flex:0 0 28px;font-size:11px}
.rf-txt{flex:1;min-width:0;font-size:13px;color:var(--ink2);line-height:1.35}
.rf-txt b{color:var(--ink);font-weight:700}
.rf-ago{font-size:11.5px;color:var(--faint);white-space:nowrap;flex:0 0 auto}
.rpts{font-size:11px;font-weight:700;color:var(--good-d);background:var(--good-soft);padding:3px 9px;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.rpts.no{color:#d64b3f;background:#fdeceb}
.rbig{font-size:30px;font-weight:800;color:var(--ink);display:flex;align-items:baseline;gap:8px;line-height:1}
.rbig span{font-size:13px;font-weight:600;color:var(--muted)}
.rbreak{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin-top:18px}
.rbreak>div{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);font-weight:600}
.rbreak b{margin-left:auto;font-weight:800;color:var(--ink)}
.rdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.rsub2{margin-top:16px;font-size:12.5px;color:var(--muted);font-weight:600}
.rlegend{display:flex;gap:14px;font-size:11.5px;color:var(--muted);font-weight:600}
.rlegend i{display:inline-block;width:13px;height:0;border-top:2px solid var(--faint);margin-right:5px;vertical-align:middle}
.rlegend .lp{border-color:var(--primary)}
.rlegend .ll{border-top-style:dashed}
.rchart-wrap{height:130px}
.rchart{width:100%;height:100%;display:block;overflow:visible}
.rxlabels{display:flex;justify-content:space-between;margin-top:7px}
.rxlabels span{font-size:10.5px;color:var(--faint);font-weight:600}
.rbars{display:flex;flex-direction:column;gap:13px;margin-top:2px}
.rbar{display:flex;align-items:center;gap:10px}
.rb-ic{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;overflow:hidden;background:var(--chip)}
.rb-ic img{width:100%;height:100%;object-fit:cover}
.rb-nm{font-size:13px;font-weight:600;color:var(--ink2);width:112px;flex:0 0 112px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-track{flex:1;height:8px;background:var(--track);border-radius:6px;overflow:hidden}
.rb-track span{display:block;height:100%;background:var(--primary);border-radius:6px}
.rb-val{font-size:12.5px;font-weight:700;color:var(--ink2);width:36px;text-align:right;flex:0 0 36px;font-variant-numeric:tabular-nums}
@media (max-width:760px){ .rcard.feed,.rrow>.rcol{flex:1 1 100%} .rb-nm{width:88px;flex-basis:88px} }

/* ---- Metric-Cards (Progress-Metric-Card-Stil) ---- */
.mcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.mcard{position:relative;display:flex;flex-direction:column;min-height:300px;overflow:hidden;border-radius:24px;border:1px solid var(--line2);background:var(--app);box-shadow:0 2px 12px rgba(30,30,50,.05)}
.mc-region{position:absolute;top:0;bottom:0;right:0;width:62%;z-index:0}
.mc-grad{position:absolute;inset:0}
.mc-grid{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);opacity:.12;-webkit-mask-image:linear-gradient(to right,transparent,#000 55%);mask-image:linear-gradient(to right,transparent,#000 55%)}
.mc-plot{position:absolute;inset:0}
.mc-svg{width:100%;height:100%;display:block}
.mc-dots{position:absolute;inset:0}
.mc-dot{position:absolute;width:4.5px;height:4.5px;border-radius:50%;transform:translate(-50%,-50%);opacity:.5}
.mc-dot.last{width:9px;height:9px;opacity:1;box-shadow:0 0 0 3px var(--app)}
.mc-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px;padding:16px 12px 0}
.mc-bar{flex:1;border-radius:4px 4px 0 0;min-height:3px}
.mc-guide{position:absolute;top:0;bottom:0;width:1px;background:var(--ink);opacity:.16;pointer-events:none;z-index:3}
.mc-marker{position:absolute;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--app);pointer-events:none;z-index:4}
.mc-tip{position:absolute;top:56px;transform:translateX(-50%);background:var(--ink);color:var(--app);padding:6px 11px;border-radius:9px;white-space:nowrap;pointer-events:none;z-index:12;display:flex;flex-direction:column;gap:1px;box-shadow:0 8px 18px rgba(0,0,0,.28)}
.mc-tip b{font-size:13px;font-weight:800}
.mc-tip span{opacity:.72;font-size:11px}
.mc-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;padding:20px 22px 0;pointer-events:none}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mc-titw{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mc-title{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--ink)}
.mc-toggle{display:inline-flex;background:var(--chip);border-radius:9px;padding:2px}
.mc-toggle button{border:none;background:none;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 9px;border-radius:7px;cursor:pointer}
.mc-toggle button.on{background:var(--app);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.mc-right{display:flex;align-items:center;gap:12px;font-size:13px}
.mc-trend{display:flex;align-items:center;gap:3px;font-weight:600}
.mc-period{border:none;background:none;font-weight:600;cursor:pointer;font-size:13px}
.mc-headline{margin-top:auto;padding-bottom:16px;font-size:clamp(44px,6.5vw,64px);font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.mc-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);background:var(--app);padding:12px 22px;font-size:13px}
.mc-delta{color:var(--muted)}
.mc-delta b{font-weight:800}
.mc-stats{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.mc-stats b{color:var(--ink2);font-weight:700}
.mc-stats i{opacity:.4;font-style:normal}
.mc-ctl{pointer-events:auto}

/* ---- Kalender-Datumsfeld ---- */
.calfield{width:100%}
.calfield-trig{display:flex;align-items:center;gap:11px;width:100%;border:1.6px solid var(--line2);border-radius:12px;padding:11px 14px;background:var(--app);color:var(--ink);font:inherit;cursor:pointer;text-align:left;transition:.14s}
.calfield-trig:hover{border-color:var(--faint)}
.calfield-trig:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.calfield-trig .cf-ic{color:var(--faint);display:inline-flex;flex:0 0 auto}
.calfield-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calfield-trig.empty .calfield-val{color:var(--muted)}
.calfield-trig .cf-ch{color:var(--faint);flex:0 0 auto;display:inline-flex}
.pop.cal-pop{width:290px;max-width:92vw;padding:12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-nav{width:32px;height:32px;border:none;background:none;border-radius:9px;color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.cal-nav:hover{background:var(--chip)}
.cal-my{border:none;background:none;font:inherit;font-size:14.5px;font-weight:800;color:var(--ink);cursor:pointer;padding:6px 10px;border-radius:8px}
.cal-my:hover{background:var(--chip)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0 6px}
.cal-empty{height:34px}
.cal-day{height:34px;border:none;background:none;border-radius:9px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;padding:0}
.cal-day:hover:not(:disabled){background:var(--primary-soft);color:var(--primary)}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--line2)}
.cal-day.sel{background:var(--primary);color:#fff;box-shadow:none}
.cal-day:disabled{color:var(--faint);cursor:default}
.cal-years{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:4px}
.cal-yr{height:42px;border:none;background:var(--chip);border-radius:10px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.cal-yr:hover:not(:disabled){background:var(--primary-soft);color:var(--primary)}
.cal-yr.sel{background:var(--primary);color:#fff}
.cal-yr:disabled{opacity:.4;cursor:default}

/* ---- Benachrichtigungs-Drawer ---- */
.ndrawer{width:420px}
.nd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line2)}
.nd-head h3{margin:0;font-size:17px;font-weight:800;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-hact{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.nd-read{border:none;background:none;color:var(--primary);font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 8px;border-radius:8px;white-space:nowrap;flex:0 0 auto}
.nd-head .ud-x{position:static;top:auto;right:auto;flex:0 0 auto}
.nd-read:hover{background:var(--primary-soft)}
.nd-body{flex:1;min-height:0;overflow-y:auto;padding:6px 12px 24px}
.nd-day{font-size:12px;font-weight:700;color:var(--muted);padding:14px 10px 8px;letter-spacing:.02em}
.nd-item{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:none;background:none;cursor:pointer;padding:12px 10px;border-radius:12px;position:relative}
.nd-item:hover{background:var(--app)}
.nd-item.unread{background:var(--primary-soft)}
.nd-item.unread:hover{background:var(--primary-soft)}
.nd-dot{position:absolute;left:2px;top:18px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.nd-ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:18px}
.nd-ic.t-cert{background:var(--good-soft)}
.nd-ic.t-reply{background:var(--primary-soft)}
.nd-av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;overflow:hidden;background:#7b5bd6;display:flex;align-items:center;justify-content:center}
.nd-av img{width:100%;height:100%;object-fit:cover}
.nd-c{flex:1;min-width:0}
.nd-t{font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.nd-x{font-size:13px;color:var(--ink2);line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nd-cert{margin-top:7px;font-size:12.5px;font-weight:700;color:var(--good-d);background:var(--good-soft);display:inline-block;padding:5px 10px;border-radius:8px}
.nd-time{font-size:11.5px;color:var(--faint);margin-top:5px;font-weight:600}
@media (max-width:520px){ .ndrawer{width:100vw;max-width:100vw} }

/* ---- Nutzer-Detail-Drawer ---- */
.admqrow.click{cursor:pointer;transition:.14s}
.admqrow.click:hover{border-color:var(--primary);background:var(--primary-soft)}
.udrawer-ov{position:fixed;inset:0;z-index:80;background:rgba(20,18,40,.34);opacity:0;transition:opacity .24s;display:flex;justify-content:flex-end}
.udrawer-ov.show{opacity:1}
.udrawer{width:480px;max-width:94vw;height:100%;background:var(--ground);box-shadow:var(--shadow);display:flex;flex-direction:column;transform:translateX(24px);opacity:.4;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .26s}
.udrawer-ov.show .udrawer{transform:none;opacity:1}
.ud-head{padding:22px 24px 0;border-bottom:1px solid var(--line2);position:relative}
.ud-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border:none;border-radius:10px;background:var(--chip);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ud-x:hover{background:var(--line2);color:var(--ink)}
.ud-top{display:flex;gap:15px;align-items:center;padding-right:40px}
.ud-av{width:60px;height:60px;flex:0 0 60px;border-radius:16px;background:#33a1e0;color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ud-av img{width:100%;height:100%;object-fit:cover}
.ud-name{font-size:20px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.ud-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.ud-meta>div{font-size:13.5px;font-weight:700;color:var(--ink2)}
.ud-meta .l{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:1px}
.ud-tabs{display:flex;gap:4px;margin-top:18px}
.ud-tabs button{border:none;background:none;padding:10px 4px;margin-right:16px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent}
.ud-tabs button.on{color:var(--ink);border-bottom-color:var(--primary)}
.ud-body{flex:1;min-height:0;overflow-y:auto;padding:20px 24px 30px}
.ud-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.udk{border:1px solid var(--line2);border-radius:13px;padding:13px 6px;text-align:center}
.udk .n{font-size:18px;font-weight:800;color:var(--ink)}
.udk .l{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px}
.ud-log{display:flex;flex-direction:column;gap:2px}
.logrow{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.logrow:last-child{border-bottom:none}
.lgi{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px}
.lgi.ok{background:var(--good-soft);color:var(--good-d)}
.lgi.no{background:#fdeceb;color:#d64b3f}
.lgc{flex:1;min-width:0}
.lgt{font-size:13.5px;font-weight:600;color:var(--ink2);line-height:1.4}
.lgd{font-size:12px;color:var(--muted);margin-top:2px}
.ud-foot{padding:14px 24px;border-top:1px solid var(--line2);display:flex;gap:10px}
.ud-foot .btn{flex:1}
@media (max-width:520px){ .udrawer{width:100vw;max-width:100vw} .ud-kpis{grid-template-columns:repeat(2,1fr)} }

/* ===== Quiz-Builder ===== */
.qbuild{padding:4px 0 40px}
.qb-top{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
/* alle Bedienelemente oben exakt gleich hoch und in einer Linie */
.qb-top .iconbtn{width:40px;height:40px;flex:0 0 auto}
.qb-top .qb-eyebrow{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);white-space:nowrap}
.qb-top .admselect{height:40px;padding:0 34px 0 13px;font-size:14px;font-weight:700;max-width:260px}
.qb-top .btn{height:40px;padding:0 16px;min-width:max-content}
.qb-tb{min-width:max-content}
.qb-cols{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
.qb-nav{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:sticky;top:12px}
.qb-navh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line2);font-size:13px;font-weight:700;color:var(--muted)}
.qb-add{border:none;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:13px;border-radius:8px;padding:6px 12px;cursor:pointer}
.qb-add:hover{filter:brightness(.97)}
.qb-list{max-height:calc(100vh - 190px);overflow:auto;padding:8px}
.qb-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.qb-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;cursor:pointer;transition:background .12s}
.qb-item:hover{background:var(--ground)}
.qb-item.on{background:var(--primary-soft)}
.qb-num{flex:0 0 26px;height:26px;border-radius:8px;background:var(--ground);color:var(--muted);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.qb-item.on .qb-num{background:var(--primary);color:#fff}
.qb-itxt{flex:1;min-width:0}
.qb-iq{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qb-imeta{font-size:12px;color:var(--muted);margin-top:2px}
.qb-iord{display:flex;flex-direction:column;gap:2px}
.qb-ub{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:10px;line-height:1;padding:2px 4px;border-radius:5px}
.qb-ub:hover:not(:disabled){background:var(--ground);color:var(--ink)}
.qb-ub:disabled{opacity:.3;cursor:default}
.qb-edit{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;min-height:340px}
.qb-eh{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:16px}
.qb-placeholder{color:var(--muted);font-size:14px;padding:40px 8px;text-align:center}
.qb-switch{display:flex;align-items:center;gap:12px;cursor:pointer;margin-bottom:18px}
.qb-switch input{position:absolute;opacity:0;pointer-events:none}
.qb-sw{flex:0 0 42px;height:24px;border-radius:12px;background:var(--track);position:relative;transition:background .16s}
.qb-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .16s}
.qb-switch input:checked + .qb-sw{background:var(--primary)}
.qb-switch input:checked + .qb-sw::after{transform:translateX(18px)}
.qb-swl{display:flex;flex-direction:column;gap:1px}
.qb-swl b{font-size:14px;color:var(--ink)}
.qb-swl small{font-size:12px;color:var(--muted)}
@media (max-width:820px){ .qb-cols{grid-template-columns:1fr} .qb-nav{position:static} .qb-list{max-height:300px} }

/* ===== Quiz-Builder: Abschnitte + Karten ===== */
.qb-sub{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.qb-count{font-size:13px;font-weight:700;color:var(--muted)}
.qb-sub .grow,.qb-sub{}
.qb-sub{justify-content:space-between}
.qb-board{display:flex;flex-direction:column;gap:16px;max-width:760px}
.qb-board .qb-placeholder{color:var(--muted);font-size:14px;padding:40px 8px;text-align:center}
.qsec{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.qsec.ung{border-style:dashed;background:transparent}
.qsec-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line2)}
.qsec.ung .qsec-h{border-bottom-color:var(--line2)}
.qsec-grip{color:var(--muted);font-size:14px;cursor:grab;display:flex;align-items:center}
.qsec.ung .qsec-grip{cursor:default;color:var(--primary)}
.qsec-name{font-size:15px;font-weight:800;color:var(--ink)}
.qsec-cnt{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.qsec-b{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.qsec-b:hover:not(:disabled){background:var(--ground);color:var(--ink)}
.qsec-b:disabled{opacity:.3;cursor:default}
.qsec-b[data-a="del"]:hover{background:var(--bad-soft);color:var(--bad)}
.qsec-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.qsec-empty{padding:16px;text-align:center;color:var(--muted);font-size:13px}
.qsec-foot{padding:0 12px 12px}
.qsec-add{width:100%;border:1px dashed var(--line);background:transparent;color:var(--primary);font-weight:700;font-size:13px;border-radius:10px;padding:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .12s,border-color .12s}
.qsec-add:hover{background:var(--primary-soft);border-color:var(--primary)}
.qcard{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--ground);transition:border-color .12s,box-shadow .12s}
.qcard:hover{border-color:var(--line);box-shadow:var(--shadow-sm)}
.qcard-grip{color:var(--muted);font-size:13px;cursor:grab;flex:0 0 auto}
.qcard-main{flex:1;min-width:0;cursor:pointer}
.qcard-q{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard-meta{display:flex;align-items:center;gap:8px;margin-top:4px}
.qbadge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.qbadge.mc{background:var(--primary-soft);color:var(--primary)}
.qbadge.tf{background:var(--good-soft);color:var(--good-d)}
.qbadge.fill{background:var(--gold-soft,rgba(230,170,20,.16));color:var(--gold,#b8860b)}
.qbadge.code{background:#2b2f3a;color:#61afef}
.qcard-pts{font-size:12px;color:var(--muted);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.qcard-pts i{font-size:10px;color:var(--gold,#e0a500)}
.qcard-ord{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.qcard-b{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;width:30px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.qcard-ord .qcard-b{height:15px}
.qcard-b:hover:not(:disabled){background:var(--chip);color:var(--ink)}
.qcard-b:disabled{opacity:.3;cursor:default}
.qcard-b.edit:hover{color:var(--primary)}
.qcard-b.del:hover{background:var(--bad-soft);color:var(--bad)}
.qb-editor .m2-content{text-align:left}
.qb-editor .edseg{display:flex}
/* Frage-Editor als rechte Sidebar (wie Nutzer-Drawer) */
.qb-drawer .ud-head{padding:22px 24px 20px}
.qbd-hero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-right:0}
.qbd-ic{width:54px;height:54px;border-radius:16px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:21px}
.qbd-hero h3{font-size:19px;font-weight:800;color:var(--ink);margin:0}
.qb-drawer .ud-body .edrow{margin-bottom:16px}
.qb-drawer .ud-body .edrow:last-child{margin-bottom:0}
/* Drag & Drop */
.qcard{cursor:default}
.qcard-grip{cursor:grab}
.qcard-grip:active{cursor:grabbing}
.qcard.dragging{opacity:.4}
.qsec-body{min-height:10px}
.qsec-body.dropzone{outline:2px dashed var(--primary);outline-offset:-3px;border-radius:12px;background:var(--primary-soft)}
.qcard.dropbefore{box-shadow:0 -3px 0 -1px var(--primary)}
.qsec-h[draggable=true]{cursor:grab}
.qsec-h[draggable=true] .qsec-grip{cursor:grab}
.qsec.secdragging{opacity:.5}
.qsec.secdrop-before{box-shadow:0 -4px 0 -1px var(--primary)}
.qsec.secdrop-after{box-shadow:0 4px 0 -1px var(--primary)}
@media (max-width:820px){ .qb-board{max-width:100%} }

/* ===== Globale Suche ===== */
.sresults{display:flex;flex-direction:column;gap:8px}
.sresults .sec-h2{margin:18px 0 6px}
.sresults .sec-h2:first-child{margin-top:4px}
.scats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.scat{display:flex;align-items:center;gap:13px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);text-align:left;transition:.12s}
.scat:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.scat .sthumb{width:48px;height:48px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.scat .sthumb img{width:100%;height:100%;object-fit:cover}
.scat .sthumb .emoji{font-size:24px}
.scat .sct{min-width:0;display:flex;flex-direction:column;gap:2px}
.scat .sct b{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scat .sct small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sqlist{display:flex;flex-direction:column;gap:8px}
.sqrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:left;transition:.12s}
.sqrow:hover{border-color:var(--primary);background:var(--primary-soft)}
.sqrow .hi{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:17px}
.sqrow .sqt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sqrow .sqt b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.sqrow .sqt small{font-size:12px;color:var(--muted)}
.sqrow .sqgo{flex:0 0 auto;color:var(--muted);font-weight:800}

/* ===== Lückentext-Frage ===== */
.fillbox{margin:4px 0 8px}
.fillinp{width:100%;border:1.8px solid var(--line2);border-radius:14px;padding:16px 18px;font-size:17px;font-weight:600;color:var(--ink);background:var(--app);outline:none;transition:.12s}
.fillinp::placeholder{color:var(--faint);font-weight:500}
.fillinp:focus{border-color:var(--primary);background:var(--primary-soft)}
.fillinp.ok{border-color:var(--good);background:var(--good-soft);color:var(--good-d)}
.fillinp.no{border-color:var(--bad);background:var(--bad-soft)}

/* ===== Segmentierte Fortschrittsleiste (Ticks + Marker) ===== */
.segbar{position:relative;height:20px;margin-top:8px;--tick:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 6px)}
.segbar::before{content:"";position:absolute;inset:0;border-radius:5px;background:var(--track);-webkit-mask:var(--tick);mask:var(--tick)}
.segbar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px 0 0 5px;background:linear-gradient(90deg,#f9a8d4 0%,#a78bfa 55%,var(--primary) 100%);-webkit-mask:var(--tick);mask:var(--tick);transition:width .55s cubic-bezier(.4,0,.2,1)}
.segbar-mark{position:absolute;top:-3px;bottom:-3px;width:2.5px;border-radius:2px;background:var(--ink);transform:translateX(-1px);transition:left .55s cubic-bezier(.4,0,.2,1)}

/* ===== Gestapelte Teilnehmer-Avatare ===== */
.avstack{display:flex;align-items:center;margin:4px 0 12px}
.avs-a{width:26px;height:26px;border-radius:50%;border:2px solid var(--panel);margin-left:-8px;overflow:hidden;background:var(--chip);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.avs-a:first-child{margin-left:0}
.avs-a img{width:100%;height:100%;object-fit:cover}
.avs-i{font-size:10px;font-weight:800;color:var(--chip-ink)}
.avs-more{margin-left:-8px;min-width:26px;height:26px;border-radius:50%;border:2px solid var(--panel);background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 6px;position:relative;z-index:1}
.avs-lbl{margin-left:10px;font-size:12.5px;color:var(--muted);font-weight:600}
.avstack.compact{margin:0}
.avstack.compact .avs-a{width:22px;height:22px;margin-left:-7px}
.avstack.compact .avs-a:first-child{margin-left:0}
.avstack.compact .avs-more{min-width:22px;height:22px;margin-left:-7px;font-size:10px;padding:0 5px}
.cfoot .avstack{margin:0}
.cfoot .grow{flex:1}
.cfoot .avstack.compact{margin-left:auto}

/* ===== Forum (Lern-Community) ===== */
.forum-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.forum-top h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0}
.forum-sub{color:var(--muted);font-size:14px;margin:4px 0 0}
.forum-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:start}
.ff-card{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(160deg,var(--primary-soft),var(--panel));border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;min-height:300px}
.ff-illu{align-self:flex-end;width:150px;height:150px;margin:-6px -6px -20px 0;cursor:pointer}
.ff-illu img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(90,70,232,.25))}
.ff-body{position:relative;margin-top:auto}
.ff-chip{display:inline-block;background:var(--panel);border:1px solid var(--line2);color:var(--primary);font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;margin-bottom:14px}
.ff-body h3{font-size:27px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.ff-stats{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:14px;font-weight:600;margin-bottom:20px}
.ff-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ff-cat{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink2)}
.ff-cat img{width:20px;height:20px;border-radius:5px;object-fit:cover;vertical-align:middle}
.fr-col{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px 22px}
.fr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.fr-head h3{font-size:18px;font-weight:800;margin:0}
.fr-list{display:flex;flex-direction:column}
.fd-item{display:flex;align-items:center;gap:12px;padding:15px 4px;border-bottom:1px solid var(--line2);text-align:left;width:100%;transition:.12s}
.fd-item:last-child{border-bottom:none}
.fd-item:hover{padding-left:8px}
.fd-main{flex:1;min-width:0}
.fd-title{font-size:15.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-meta{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:12.5px;color:var(--muted);font-weight:600}
.fd-go{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:16px;transition:.12s}
.fd-item:hover .fd-go{background:var(--primary);color:#fff;border-color:var(--primary)}
.forum-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.fb-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.fb-card h4{font-size:15px;font-weight:800;margin:0 0 14px}
.fb-tags{display:flex;flex-wrap:wrap;gap:8px}
.fb-tag{display:inline-flex;align-items:center;gap:7px;background:var(--chip);border-radius:20px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink)}
.fb-tag:hover{background:var(--primary-soft);color:var(--primary)}
.fb-ti{display:inline-flex}.fb-ti img{width:16px;height:16px;border-radius:4px;object-fit:cover}
.fb-tn{background:var(--panel);border-radius:10px;padding:1px 7px;font-size:11px;font-weight:800;color:var(--muted)}
.fb-contrib{display:flex;flex-direction:column;gap:12px}
.fb-crow{display:flex;align-items:center;gap:10px}
.fb-rank{width:20px;font-weight:800;color:var(--muted);font-size:13px;text-align:center}
.fb-cn{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-cc{font-size:12px;font-weight:800;color:var(--primary);background:var(--primary-soft);border-radius:10px;padding:2px 9px}
.fb-stats{display:flex;justify-content:space-between;gap:8px;text-align:center}
.fb-stat b{display:block;font-size:24px;font-weight:800;color:var(--ink);line-height:1}
.fb-stat span{font-size:12px;color:var(--muted);font-weight:600}
/* Avatare im Forum */
.fd-av,.fb-cav,.dtf-av{width:24px;height:24px;border-radius:50%;overflow:hidden;background:var(--chip);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}
.fb-cav{width:32px;height:32px}
.dtf-av{width:44px;height:44px}
.fd-av img,.fb-cav img,.dtf-av img,.disc-av img{width:100%;height:100%;object-fit:cover}
.di{font-size:10px;font-weight:800;color:var(--chip-ink)}
.fb-cav .di{font-size:12px}.dtf-av .di{font-size:16px}
/* Thread-Detail */
.dt-full{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-bottom:18px}
.dtf-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dtf-who{flex:1;min-width:0}
.dtf-name{font-weight:700;font-size:15px}
.dtf-time{font-size:12.5px;color:var(--muted)}
.dtf-title{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:6px 0 10px;line-height:1.2}
.dtf-text{font-size:15.5px;line-height:1.6;color:var(--ink2);white-space:pre-wrap}
.dtf-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--muted);font-weight:600;display:flex;gap:16px}
.dtf-replies{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.dtf-replybox{display:flex;align-items:center;gap:10px}
.dtf-replybox .disc-rinp{flex:1;border:1px solid var(--line2);border-radius:11px;padding:12px 14px;font:inherit;background:var(--app);color:var(--ink);outline:none}
.dtf-replybox .disc-rinp:focus{border-color:var(--primary)}
@media (max-width:820px){ .forum-grid{grid-template-columns:1fr} .forum-bottom{grid-template-columns:1fr} .ff-illu{width:120px;height:120px} }

/* ===== Multicheck-Vorbereitung ===== */
.mc-promo{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin:14px 0 28px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(100deg,var(--primary-soft),var(--panel));transition:.14s}
.mc-promo:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.mc-pi{width:46px;height:46px;flex:0 0 auto;border-radius:12px;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.mc-pi img{width:100%;height:100%;object-fit:contain}
.mc-pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mc-pt b{font-size:15.5px;color:var(--ink)}
.mc-pt small{font-size:12.8px;color:var(--muted);line-height:1.45}
.mc-pgo{flex:0 0 auto;color:var(--primary);font-weight:800;font-size:18px}
.mc-hero{display:flex;gap:22px;align-items:flex-start;background:linear-gradient(150deg,#5a46e8,#4225b8);color:#fff;border-radius:22px;padding:30px 32px;overflow:hidden;position:relative}
.mc-hi{width:76px;height:76px;flex:0 0 auto;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px}
.mc-hi img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
.mc-htxt{position:relative;min-width:0}
.mc-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.mc-htxt h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.mc-htxt p{font-size:15px;line-height:1.6;opacity:.92;max-width:620px;margin:0 0 20px}
.mc-heroact{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mc-simbtn{background:#fff;color:var(--primary);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.mc-simbtn:hover{background:#f2f0ff}
.mc-simnote{font-size:13px;opacity:.85;font-weight:600}
.mck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-content:start;align-items:start;grid-auto-rows:min-content}
.mc-card{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);transition:.14s}
.mc-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.mc-cicon{width:52px;height:52px;flex:0 0 auto;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden}
.mc-cicon img{width:100%;height:100%;object-fit:contain}
.mc-cicon .emoji{font-size:24px}
.mc-cbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mc-cname{font-size:16px;font-weight:800;color:var(--ink)}
.mc-cdesc{font-size:12.8px;color:var(--muted);line-height:1.45}
.mc-cmeta{font-size:12px;color:var(--ink2);font-weight:600;margin-top:6px}
.mc-card .segbar{margin-top:6px}
.mc-disc{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.55;background:var(--chip);border-radius:12px;padding:14px 16px}
@media (max-width:640px){ .mc-hero{flex-direction:column;gap:16px;padding:24px} .mc-htxt h1{font-size:25px} }

/* ===== Font-Awesome-Inline-Icons (klein) ===== */
.ff-stats i,.dtf-meta i{color:var(--primary);margin-right:5px;font-size:.92em}
.mc-disc i{color:var(--primary);margin-right:5px}

/* ===== Aktivitäts-Widget (rechte Spalte) ===== */
.aw-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.aw .aw-sub{font-size:12px;color:var(--muted);font-weight:600}
.aw-big{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:2px 0 14px}
.aw-big span{font-size:14px;font-weight:600;color:var(--muted)}
.aw-week{display:flex;align-items:flex-end;gap:8px;height:78px}
.aw-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.aw-bar{flex:1;width:100%;max-width:26px;background:var(--track);border-radius:7px;display:flex;align-items:flex-end;overflow:hidden;min-height:8px}
.aw-bar span{display:block;width:100%;background:var(--line2);border-radius:7px;transition:height .5s cubic-bezier(.4,0,.2,1)}
.aw-bar.today span{background:linear-gradient(180deg,#22d3ee,var(--primary))}
.aw-lbl{font-size:11px;font-weight:700;color:var(--muted)}
.aw-lbl.on{color:var(--primary)}
.aw-hmh{margin:18px 0 8px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.aw-hmrow{display:flex;gap:6px}
.aw-days{display:grid;grid-template-rows:repeat(7,1fr);gap:3px;font-size:9px;font-weight:700;color:var(--faint);text-align:center}
.aw-days span{display:flex;align-items:center;justify-content:center;line-height:1}
.aw-heat{flex:1;display:grid;grid-template-columns:repeat(13,1fr);gap:3px}
.aw-cell{width:100%;aspect-ratio:1;border-radius:3px;background:var(--track)}
.aw-cell.l0{background:var(--track)}
.aw-cell.l1{background:rgba(90,70,232,.28)}
.aw-cell.l2{background:rgba(90,70,232,.5)}
.aw-cell.l3{background:rgba(90,70,232,.72)}
.aw-cell.l4{background:var(--primary)}
.aw-cell.lx{background:transparent}
.aw-legend{display:flex;align-items:center;gap:4px;margin-top:12px;font-size:10.5px;color:var(--muted)}
.aw-legend i{width:11px;height:11px;aspect-ratio:auto;border-radius:3px}
.aw-legend span:first-child{margin-right:2px}
.aw-legend span:last-child{margin-left:2px}
/* FA-Icons in bestehenden Emoji-Slots */
.rc.mini .ig i{color:var(--primary);font-size:17px}
.goalring .c i{color:var(--good);font-size:22px}
.cl-fi i{color:var(--primary)}
.rc-lbh h4 i{color:var(--gold);margin-right:5px}

/* ===== Passwort-Generator ===== */
.pwg-sub{color:var(--muted);font-size:14px;margin:-6px 0 18px;max-width:620px;line-height:1.5}
.pwg-card{max-width:580px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 26px}
.pwg-h{font-size:13px;font-weight:800;color:var(--ink2);margin:0 0 12px}
.pwg-h:not(:first-child){margin-top:24px;padding-top:20px;border-top:1px solid var(--line2)}
.pwg-seg{display:flex;width:100%;gap:0}
.pwg-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.pwg-seg button i{font-size:12px;opacity:.9}
.pwg-len{display:flex;align-items:center;gap:16px}
.pwg-ll{font-size:14px;font-weight:600;color:var(--muted);min-width:64px}
.pwg-len input[type=range]{flex:1;accent-color:var(--primary);height:6px;cursor:pointer}
.pwg-lnum{min-width:54px;text-align:center;border:1px solid var(--line2);border-radius:10px;padding:7px 0;font-weight:800;font-variant-numeric:tabular-nums}
.pwg-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:16px}
.pwg-tog{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.pwg-tog>span{font-size:14px;font-weight:600;color:var(--ink2)}
.tgl{position:relative;flex:0 0 auto;width:42px;height:24px}
.tgl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.tgl-sw{display:block;width:42px;height:24px;border-radius:12px;background:var(--track);transition:background .16s}
.tgl-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .16s}
.tgl input:checked + .tgl-sw{background:var(--primary)}
.tgl input:checked + .tgl-sw::after{transform:translateX(18px)}
.pwg-out{border:1px solid var(--line2);border-radius:14px;padding:20px 18px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:22px;font-weight:600;letter-spacing:1px;color:var(--ink);word-break:break-all;min-height:64px;display:flex;align-items:center;justify-content:center;background:var(--app)}
.pwg-out .pw-num{color:var(--primary)}
.pwg-out .pw-sym{color:var(--bad)}
.pwg-str{margin-top:14px}
.pwg-sbar{display:flex;gap:6px}
.pwg-sseg{flex:1;height:6px;border-radius:3px;background:var(--track)}
.pwg-sl{font-size:12.5px;font-weight:700;margin-top:7px}
.pwg-actions{display:flex;gap:12px;margin-top:22px}
.pwg-actions .btn{flex:1}
.s2pill .dot i{font-size:13px}
@media (max-width:560px){ .pwg-opts{grid-template-columns:1fr} .pwg-actions{flex-direction:column} }

/* Hero-Stat + Multicheck-Gruppen-Icons */
.hstat .ig i{font-size:18px}
.mc-gh{display:flex;align-items:center;gap:10px}
.mc-xchip{font-size:11px;font-weight:700;color:var(--muted);background:var(--chip);border-radius:20px;padding:2px 10px;text-transform:none;letter-spacing:0}

/* ===== Multicheck: Gedächtnis-Button im Hero ===== */
.mc-membtn{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);min-width:max-content}
.mc-membtn:hover{background:rgba(255,255,255,.26)}

/* ===== Gedächtnis-Training ===== */
.memg-card{max-width:560px;margin:8px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 28px;min-height:340px;display:flex;flex-direction:column;justify-content:center}
.memg-hero{text-align:center}
.memg-ic{width:78px;height:78px;margin:0 auto 14px;border-radius:22px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--primary);overflow:hidden}
.memg-ic.memg-ic-img{width:92px;height:92px;background:var(--primary-soft)}
.memg-ic-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.memg-ic.ok{background:var(--good-soft);color:var(--good-d)}
.memg-ic.no{background:var(--bad-soft);color:var(--bad)}
.memg-hero h2{font-size:24px;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
.memg-hero p{color:var(--muted);font-size:15px;line-height:1.55;max-width:420px;margin:0 auto 20px}
.memg-seg{display:inline-flex;margin:4px auto 22px}
.memg-seg button{padding:9px 16px;display:inline-flex;align-items:center;gap:7px}
.memg-best{display:inline-flex;align-items:center;gap:7px;background:var(--gold-soft);color:#8a6d00;font-weight:800;font-size:13.5px;border-radius:20px;padding:6px 14px;margin:0 auto 16px}
.memg-best i{color:var(--gold)}
.memg-startbtn{display:block;margin:0 auto;min-width:200px}

/* ===== IT-Tools ===== */
.it-seg{display:flex;gap:4px;background:var(--chip);border-radius:12px;padding:4px;margin:0 0 16px;max-width:600px;flex-wrap:wrap}
.it-seg button{flex:1;min-width:max-content;padding:9px 12px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.14s}
.it-seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm)}
.it-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;max-width:600px}
.it-h{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 16px}
.it-form{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.it-row{display:flex;flex-direction:column;gap:6px}
.it-row label{font-size:13px;font-weight:700;color:var(--muted)}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.02em}
.it-res{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.it-kv{display:flex;flex-direction:column;gap:2px;background:var(--ground);border:1px solid var(--line2);border-radius:11px;padding:9px 12px}
.it-kv span{font-size:12px;color:var(--muted);font-weight:600}
.it-kv b{font-size:15px;color:var(--ink);font-weight:800}
.it-err{color:var(--bad);font-weight:700;font-size:13.5px;padding:6px 0}
.it-note{color:var(--muted);font-size:13px;margin-top:10px}
.it-ports{display:flex;flex-direction:column;gap:6px;margin-top:12px;max-height:440px;overflow:auto}
.it-port{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line2);border-radius:11px}
.it-pn{flex:0 0 54px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.it-pp{flex:0 0 64px;font-size:11px;font-weight:700;color:var(--muted);background:var(--chip);border-radius:6px;padding:3px 6px;text-align:center}
.it-pd{flex:1;font-size:14px;color:var(--ink);font-weight:600}
.it-osi{display:flex;flex-direction:column;gap:8px}
.it-layer{background:var(--ground);border:1px solid var(--line2);border-left:4px solid var(--primary);border-radius:11px;padding:11px 14px}
.it-lh{display:flex;align-items:center;gap:9px}
.it-ln{flex:0 0 24px;height:24px;border-radius:7px;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.it-lh b{font-size:14.5px;color:var(--ink)}
.it-lh small{color:var(--muted);font-size:12.5px;font-weight:600}
.it-ld{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.it-lp{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.it-lp span{font-size:11.5px;font-weight:700;color:var(--ink2);background:var(--chip);border-radius:6px;padding:2px 8px}
@media (max-width:560px){ .it-res{grid-template-columns:1fr} }

/* ===== Code-Snippet (highlight.js) ===== */
.qcode{margin:2px 0 20px;border-radius:12px;overflow:auto;max-width:100%;background:#282c34;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm)}
.qcode code{display:block;padding:14px 16px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace;font-size:13.5px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;color:#abb2bf}
.qb-editor #qbcode{white-space:pre;font-size:13px;line-height:1.5}

/* ===== Karteikarten (Spaced Repetition) ===== */
.fc-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;max-width:620px;margin:0 auto;min-height:340px;display:flex;flex-direction:column}
.fc-hero{text-align:center;margin:auto 0}
.fc-ic{width:70px;height:70px;margin:0 auto 16px;border-radius:20px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:30px}
.fc-ic.ok{background:var(--good-soft);color:var(--good-d)}
.fc-hero h2{font-size:22px;font-weight:800;margin:0 0 8px}
.fc-hero p{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:430px;margin:0 auto 18px}
.fc-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:16px}
.fc-prog{color:var(--primary);display:inline-flex;align-items:center;gap:7px}
.fc-face{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 0 12px}
.fc-cat{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.fc-q{font-size:20px;font-weight:800;color:var(--ink);line-height:1.4}
.fc-al{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--good-d);margin-bottom:8px}
.fc-ans{font-size:18px;font-weight:800;color:var(--ink);line-height:1.4}
.fc-exp{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:10px}
/* unscharfe Lösungskarte mit Countdown darüber */
.fc-solution{position:relative;border:1px solid var(--line2);border-radius:14px;overflow:hidden;margin-top:4px;min-height:132px;background:var(--ground)}
.fc-sol-inner{padding:16px 18px;filter:blur(9px);opacity:.55;transition:filter .45s ease,opacity .45s ease;user-select:none;pointer-events:none}
.fc-solution.revealed .fc-sol-inner{filter:none;opacity:1;user-select:auto}
.fc-timer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .3s}
.fc-solution.revealed .fc-timer{opacity:0;pointer-events:none;display:none}
.fc-ring{position:relative;width:66px;height:66px}
.fc-ring svg{width:66px;height:66px;transform:rotate(-90deg)}
.fc-ring-bg{fill:none;stroke:var(--track);stroke-width:5}
.fc-ring-fg{fill:none;stroke:var(--primary);stroke-width:5;stroke-linecap:round}
.fc-ring-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.fc-timer-t{font-size:13px;font-weight:700;color:var(--muted)}
.fc-actions{margin-top:18px}
.fc-actions .btn.block{width:100%}
.fc-hint{font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px;justify-content:center;text-align:center;padding:4px 0 2px}
.fc-hint.good{color:var(--good-d)}
.fc-hint b{color:inherit}
.fc-rates{display:flex;gap:10px;margin-top:12px}
/* Timeout: Antwortauswahl wie im Quiz */
.fc-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.fc-opt{text-align:left;border:1.6px solid var(--line2);background:var(--ground);border-radius:12px;padding:12px 14px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s}
.fc-opt:hover:not(:disabled){border-color:var(--primary);background:var(--primary-soft)}
.fc-opt:disabled{cursor:default}
.fc-opt.ok{border-color:var(--good);background:var(--good-soft);color:var(--good-d)}
.fc-opt.no{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.fc-trev{margin-top:14px;padding:14px 16px;border-radius:12px;border:1px solid var(--line2)}
.fc-trev.ok{border-color:var(--good);background:var(--good-soft)}
.fc-trev.no{border-color:var(--bad);background:var(--bad-soft)}
.fc-trev .fc-al{color:var(--ink2)}
#fcnextbar{margin-top:14px}
.fillinp.ok{border-color:var(--good)}
.fillinp.no{border-color:var(--bad)}
.fc-rate{flex:1;border:none;border-radius:12px;padding:11px 6px;cursor:pointer;font-weight:800;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:.14s}
.fc-rate small{font-size:11px;font-weight:600;opacity:.85}
.fc-rate.again{background:var(--bad-soft);color:var(--bad)}
.fc-rate.good{background:var(--primary-soft);color:var(--primary)}
.fc-rate.easy{background:var(--good-soft);color:var(--good-d)}
.fc-rate:hover{filter:brightness(.97);transform:translateY(-1px)}
.memg-play{text-align:center}
.memg-lv{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);margin-bottom:6px}
.memg-hint{font-size:16px;font-weight:600;color:var(--ink2);margin-bottom:22px}
.memg-seq{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px}
.memg-seq span{width:52px;height:64px;border-radius:14px;background:var(--app);border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-sm)}
.memg-timebar{height:6px;border-radius:3px;background:var(--track);overflow:hidden;max-width:340px;margin:0 auto}
.memg-timebar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22d3ee,var(--primary));border-radius:3px}
.memg-inp{width:100%;max-width:340px;margin:0 auto;display:block;border:1.8px solid var(--line2);border-radius:14px;padding:15px 16px;font-size:24px;font-weight:700;text-align:center;letter-spacing:6px;font-variant-numeric:tabular-nums;outline:none;background:var(--app)}
.memg-inp:focus{border-color:var(--primary)}
.memg-pairs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:26px}
.memg-pair{display:flex;align-items:center;gap:10px;background:var(--app);border:1.5px solid var(--line2);border-radius:14px;padding:10px 14px}
.memg-ps{font-size:26px}
.memg-pn{font-size:22px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.memg-ask{font-size:64px;margin-bottom:22px}
.memg-opts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.memg-opt{width:64px;height:64px;border-radius:16px;border:1.8px solid var(--line2);background:var(--app);font-size:26px;font-weight:800;transition:.12s}
.memg-opt:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}

/* Zertifikat-Icon (Bild statt Emoji) */
.cd-certic img,.pc-ic img{width:100%;height:100%;object-fit:contain}
.cd-certic{width:58px;height:58px;flex:0 0 58px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pc-ic{overflow:hidden;display:flex;align-items:center;justify-content:center}

/* Feier-/Ergebnis-Icons als Bild (Pokal/Stern) */
.m2-img{display:inline-flex;width:78px;height:78px}
.m2-cheer .m2-img{width:104px;height:104px}
.m2-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.16))}
.rhero .em .rhero-img{display:inline-flex;width:88px;height:88px}
.rhero-img img{width:100%;height:100%;object-fit:contain}
.set-avacts .btn i,.pfacts .btn i{margin-right:2px}

/* ===== Custom-Tooltips (schwarz, ersetzen native title) ===== */
.uitip{position:fixed;z-index:9999;background:#1c1c22;color:#fff;font-size:12.5px;font-weight:600;line-height:1.35;padding:6px 10px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.32);pointer-events:none;max-width:240px;white-space:normal;border:1px solid rgba(255,255,255,.08);animation:uitipIn .12s ease}
.uitip::after{content:"";position:absolute;left:var(--tipax,50%);transform:translateX(-50%);border:5px solid transparent}
.uitip[data-place=top]::after{top:100%;border-top-color:#1c1c22}
.uitip[data-place=bottom]::after{bottom:100%;border-bottom-color:#1c1c22}
@keyframes uitipIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .uitip{animation:none} }

/* ===== Forum: Upvote / Downvote ===== */
.dvote{display:inline-flex;gap:8px;align-items:center}
.dvbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);border-radius:20px;padding:6px 13px;font-size:13px;font-weight:700;transition:.12s;cursor:pointer}
.dvbtn:hover{border-color:var(--ink2);color:var(--ink)}
.dvbtn i{font-size:13px}
.dvbtn.up.on{background:var(--good-soft);border-color:var(--good);color:var(--good-d)}
.dvbtn.up.on:hover{color:var(--good-d)}
.dvbtn.down.on{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.dvbtn.down.on:hover{color:var(--bad)}
.dvn{font-variant-numeric:tabular-nums}
.dtf-meta{justify-content:space-between;flex-wrap:wrap;gap:12px}
.dtf-meta>span{display:inline-flex;align-items:center}

/* Reply-Vote-Bar + Beste-Antwort */
.dr-foot{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dr-foot .dvbtn{padding:4px 10px;font-size:12px;border-radius:16px}
.dr-foot .dvbtn i{font-size:12px}
.dr-top .grow{flex:1}
.dr-row.best{background:var(--good-soft);border-radius:12px;padding:10px 12px;box-shadow:inset 3px 0 0 var(--good)}
.dr-best{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--good-d);background:var(--panel);border-radius:20px;padding:2px 9px;margin-left:8px}
.dr-bestbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);border-radius:16px;padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer}
.dr-bestbtn:hover{border-color:var(--good);color:var(--good-d)}
.dr-bestbtn.on{background:var(--good-soft);border-color:var(--good);color:var(--good-d)}

/* ===== Rankboard (Rangliste) ===== */
.rb-sub{color:var(--muted);font-size:14px;margin:-6px 0 20px}
.rb-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.rb-pcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px;overflow:hidden}
.rb-pcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px}
.rb-pcard.r1::before{background:linear-gradient(90deg,#f7c948,#f0932b)}
.rb-pcard.r2::before{background:linear-gradient(90deg,#c9d1dc,#9aa3b2)}
.rb-pcard.r3::before{background:linear-gradient(90deg,#e0a06b,#b3703c)}
.rb-pcard.me{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.rb-medal{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;box-shadow:var(--shadow-sm)}
.rb-pcard.r1 .rb-medal{background:radial-gradient(circle at 35% 30%,#ffe38a,#f0932b)}
.rb-pcard.r2 .rb-medal{background:radial-gradient(circle at 35% 30%,#eef1f6,#9aa3b2)}
.rb-pcard.r3 .rb-medal{background:radial-gradient(circle at 35% 30%,#f0c49a,#b3703c)}
.rb-phead{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-right:36px}
.rb-av{width:52px;height:52px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--chip);display:inline-flex;align-items:center;justify-content:center}
.rb-av img{width:100%;height:100%;object-fit:cover}
.rb-av .di{font-size:18px;font-weight:800;color:var(--chip-ink)}
.rb-pwho{min-width:0}
.rb-pn{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-pm{font-size:12.5px;color:var(--muted);margin-top:2px}
.rb-pstats{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;border-top:1px solid var(--line2);padding-top:14px}
.rb-sp{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rb-sl{font-size:12.5px;color:var(--muted)}
.rb-sv{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.rb-list{display:flex;flex-direction:column;gap:10px}
.rb-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.rb-row.me{border-color:var(--primary);background:var(--primary-soft)}
.rb-rank{width:30px;flex:0 0 auto;text-align:center;font-weight:800;color:var(--muted);font-size:14px}
.rb-row .rb-av{width:44px;height:44px}
.rb-who{flex:1 1 180px;min-width:0}
.rb-n{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-m{font-size:12px;color:var(--muted);margin-top:2px}
.rb-cols{display:grid;grid-template-columns:repeat(4,minmax(88px,1fr));gap:10px}
.rb-cols .rb-sp{flex-direction:column;align-items:flex-start;gap:2px}
.rb-cols .rb-sl{font-size:11.5px}
@media (max-width:820px){ .rb-podium{grid-template-columns:1fr} .rb-cols{grid-template-columns:repeat(2,1fr)} .rb-who{flex-basis:120px} }