body{margin:0}[hidden]{display:none!important}

/* Layout: Prüfungsheft auf Karopapier – links die Aufgabenleiste, rechts das Blatt mit Reitern */
:root{
  --paper:#f3f5f4; --grid:rgba(36,74,140,.075); --sheet:#ffffff; --sheet-2:#f7f9fb;
  --ink:#16243a; --muted:#56657a; --line:#d4dbe4; --line-2:#e6ebf1;
  --accent:#2350a0; --accent-soft:#e3ebf8; --pen:#c42f2b; --pen-soft:#fbe6e4;
  --ok:#1d7a4c; --ok-soft:#e0f2e8; --warn:#9a6400; --warn-soft:#fbf0d9;
  --q1:#e9edf2; --q2:#e1ecf8; --q3:#f9e3dc; --q4:#fbf0d2;
  --p1:#2350a0; --p2:#c47a12; --p3:#3a8f6a;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r:6px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0f141c; --grid:rgba(122,160,230,.055); --sheet:#161e2a; --sheet-2:#1b2533;
  --ink:#e4eaf2; --muted:#98a6b9; --line:#2c3a4d; --line-2:#233041;
  --accent:#86aef2; --accent-soft:#1f3150; --pen:#f0756c; --pen-soft:#3a1f22;
  --ok:#5cc694; --ok-soft:#173326; --warn:#e6b35a; --warn-soft:#3a2d14;
  --q1:#1d2633; --q2:#1a2a40; --q3:#3a2420; --q4:#38301a;
  --p1:#86aef2; --p2:#e6a64a; --p3:#62c497;
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --paper:#0f141c; --grid:rgba(122,160,230,.055); --sheet:#161e2a; --sheet-2:#1b2533;
  --ink:#e4eaf2; --muted:#98a6b9; --line:#2c3a4d; --line-2:#233041;
  --accent:#86aef2; --accent-soft:#1f3150; --pen:#f0756c; --pen-soft:#3a1f22;
  --ok:#5cc694; --ok-soft:#173326; --warn:#e6b35a; --warn-soft:#3a2d14;
  --q1:#1d2633; --q2:#1a2a40; --q3:#3a2420; --q4:#38301a;
  --p1:#86aef2; --p2:#e6a64a; --p3:#62c497;
  color-scheme:dark; }

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.55;
}
a{color:var(--accent)}
code,.mono{font-family:var(--f-mono); font-size:.92em}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; line-height:1.15; margin:0}
h1{font-size:clamp(1.7rem,3.2vw,2.35rem); letter-spacing:-.01em}
h2{font-size:1.35rem}
h3{font-size:1.06rem}
p{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.app{display:grid; grid-template-columns:250px minmax(0,1fr); gap:24px; max-width:1240px; margin:0 auto; padding-inline:20px; padding-block:22px 60px}
@media (max-width:900px){ .app{grid-template-columns:minmax(0,1fr); gap:14px; padding-inline:16px} }

/* Sidebar */
.side{position:sticky; top:calc(env(safe-area-inset-top,0px) + 18px); align-self:start; display:flex; flex-direction:column; gap:14px}
.brand{display:flex; flex-direction:column; gap:2px; padding:4px 2px 6px}
.brand b{font-family:var(--f-display); font-size:1.18rem; letter-spacing:-.01em}
.brand span{font-size:.78rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.nav{display:flex; flex-direction:column; gap:2px}
.nav a{display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--r); text-decoration:none; color:var(--ink); border:1px solid transparent}
.nav a:hover{background:var(--sheet); border-color:var(--line-2)}
.nav a.on{background:var(--sheet); border-color:var(--line); box-shadow:inset 3px 0 0 var(--accent)}
.nav .sep{font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; padding:12px 10px 3px}
.nav .code{font-family:var(--f-mono); font-size:.78rem; color:var(--muted)}
.nav .t{font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav .sc{font-family:var(--f-mono); font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums}
.nav .sc.full{color:var(--ok); font-weight:600}
.side small{color:var(--muted); font-size:.76rem; line-height:1.4}
@media (max-width:900px){
  .side{position:static}
  .nav{flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; scrollbar-width:thin}
  .nav a{grid-template-columns:auto; gap:0; flex:0 0 auto; padding:6px 10px; background:var(--sheet); border-color:var(--line-2)}
  .nav a .t,.nav a .sc{display:none}
  .nav a .code{color:var(--ink); font-weight:600}
  .nav .sep{display:none}
  .side small{display:none}
}

/* Sheet */
.sheet{background:var(--sheet); border:1px solid var(--line); border-radius:8px; min-width:0; box-shadow:0 1px 0 var(--line-2), 0 10px 30px -18px rgba(20,40,80,.25)}
.sheet-head{padding:22px 28px 0; display:flex; flex-direction:column; gap:10px}
.sheet-body{padding:20px 28px 30px; display:flex; flex-direction:column; gap:22px}
@media (max-width:600px){ .sheet-head{padding:18px 16px 0} .sheet-body{padding:16px 16px 24px} }
.eyebrow{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:.78rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.eyebrow .code{font-family:var(--f-mono); letter-spacing:0; text-transform:none; color:var(--accent); font-weight:600}
.lede{color:var(--muted); max-width:70ch}

.modebar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:10px 0 0}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--sheet-2)}
.seg button{font:inherit; font-size:.86rem; border:0; background:transparent; color:var(--muted); padding:6px 12px; cursor:pointer}
.seg button.on{background:var(--accent); color:var(--sheet)}
.seed{font-family:var(--f-mono); font-size:.8rem; color:var(--muted)}

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-top:6px; overflow-x:auto}
.tabs button{font:inherit; font-size:.92rem; background:none; border:0; border-bottom:2px solid transparent; padding:9px 12px 8px; color:var(--muted); cursor:pointer; white-space:nowrap}
.tabs button.on{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.tabs button:hover{color:var(--ink)}

.btn{font:inherit; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; border-radius:var(--r); border:1px solid var(--line); background:var(--sheet); color:var(--ink); padding:7px 14px; cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--sheet); font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.small{padding:4px 10px; font-size:.82rem}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

.prose{display:flex; flex-direction:column; gap:12px; max-width:76ch}
.prose ul,.prose ol{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:5px}
.block{display:flex; flex-direction:column; gap:12px}
.block > h2,.block > h3{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.pts{font-family:var(--f-mono); font-size:.76rem; color:var(--muted); font-weight:500; border:1px solid var(--line); border-radius:99px; padding:1px 8px}
.note{border-left:3px solid var(--accent); background:var(--accent-soft); padding:10px 14px; border-radius:0 var(--r) var(--r) 0; font-size:.92rem; max-width:80ch}
.note.warn{border-color:var(--warn); background:var(--warn-soft)}
.note.pen{border-color:var(--pen); background:var(--pen-soft)}
.req{color:var(--pen); font-weight:700}

/* Tables */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); max-width:100%}
table{border-collapse:collapse; width:100%; font-size:.9rem; font-variant-numeric:tabular-nums}
th,td{padding:7px 10px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top}
thead th{background:var(--sheet-2); font-weight:600; font-size:.82rem; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.mono{white-space:nowrap}
td.n,th.n{text-align:right; font-family:var(--f-mono); font-size:.86rem; white-space:nowrap}
td.c,th.c{text-align:center}
tr.sum td,tr.sum th{font-weight:600; background:var(--sheet-2)}
.hl{background:var(--pen-soft); color:var(--pen); font-weight:600}
.okc{background:var(--ok-soft)}
.tag{display:inline-block; font-size:.75rem; padding:1px 7px; border-radius:99px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}

/* Fields */
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 18px}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field.wide{grid-column:1/-1}
.field label,.flabel{font-size:.86rem; font-weight:500}
.crit{font-family:var(--f-mono); font-size:.7rem; color:var(--muted); font-weight:400; margin-left:6px}
.inwrap{display:flex; align-items:stretch; gap:0; position:relative}
.inwrap .unit{display:flex; align-items:center; padding:0 9px; font-size:.8rem; color:var(--muted); border:1px solid var(--line); border-left:0; border-radius:0 var(--r) var(--r) 0; background:var(--sheet-2); white-space:nowrap}
.inwrap .unit.pre{border-left:1px solid var(--line); border-right:0; border-radius:var(--r) 0 0 var(--r)}
input[type=text],textarea,select{font:inherit; font-size:.92rem; color:var(--ink); background:var(--sheet); border:1px solid var(--line); border-radius:var(--r); padding:7px 10px; width:100%; min-width:0}
input.num{font-family:var(--f-mono); text-align:right; font-variant-numeric:tabular-nums}
.inwrap input:not(:last-child){border-radius:var(--r) 0 0 var(--r)}
.inwrap .unit.pre + input{border-radius:0 var(--r) var(--r) 0}
textarea{font-family:var(--f-mono); font-size:.82rem; min-height:110px; resize:vertical; line-height:1.45}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field.is-ok input,.field.is-ok textarea,.field.is-ok select,td.is-ok input,td.is-ok select{border-color:var(--ok); background:var(--ok-soft)}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select,td.is-bad input,td.is-bad select{border-color:var(--pen); background:var(--pen-soft)}
.fb{font-size:.8rem; line-height:1.4; display:flex; flex-direction:column; gap:2px}
.fb:empty{display:none}
.fb .m-ok{color:var(--ok); font-weight:600}
.fb .m-bad{color:var(--pen); font-weight:600}
.fb .m-sol{color:var(--muted); font-family:var(--f-mono); font-size:.78rem}
.fb .m-hint{color:var(--muted)}
.checks{display:flex; flex-direction:column; gap:6px}
.checks label{display:flex; gap:9px; align-items:flex-start; font-size:.9rem; font-weight:400; cursor:pointer}
.checks input{margin-top:4px; accent-color:var(--accent)}
.checks.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:6px 18px}
.field.is-ok .checks{outline:1px solid var(--ok); outline-offset:6px; border-radius:2px}
.field.is-bad .checks{outline:1px solid var(--pen); outline-offset:6px; border-radius:2px}

/* answer grid */
.agrid td{vertical-align:middle}
.agrid td input,.agrid td select{min-width:100px}
.agrid .fb{margin-top:3px}

.actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:4px}
.score{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:14px 16px; border:1px dashed var(--line); border-radius:var(--r); background:var(--sheet-2)}
.score .big{font-family:var(--f-display); font-size:1.7rem; font-variant-numeric:tabular-nums}
.score .big.full{color:var(--ok)}
.critlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; width:100%; font-size:.86rem}
.critlist li{display:grid; grid-template-columns:22px 70px minmax(0,1fr) auto; gap:8px; align-items:baseline}
.critlist .k{font-family:var(--f-mono); font-size:.76rem; color:var(--muted)}
.critlist .p{font-family:var(--f-mono); font-size:.76rem; color:var(--muted); white-space:nowrap}
.mk{font-weight:700; font-family:var(--f-mono)}
.mk.ok{color:var(--ok)} .mk.bad{color:var(--pen)}
@media (max-width:520px){ .critlist li{grid-template-columns:20px minmax(0,1fr) auto} .critlist .k{display:none} }

/* Overview */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.card{display:flex; flex-direction:column; gap:8px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink); background:var(--sheet)}
.card:hover{border-color:var(--accent)}
.card .top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.card .code{font-family:var(--f-mono); color:var(--accent); font-weight:600; font-size:.85rem}
.card h3{font-size:1.02rem}
.card p{font-size:.86rem; color:var(--muted)}
.card .tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:auto}
.bar{height:4px; border-radius:2px; background:var(--line-2); overflow:hidden}
.bar i{display:block; height:100%; background:var(--ok)}

/* Charts */
.chart{border:1px solid var(--line); border-radius:var(--r); padding:10px; background:var(--sheet); overflow-x:auto}
.chart svg{display:block; width:100%; height:auto; min-width:520px}
.chart svg text{fill:var(--ink); font-family:var(--f-body)}
.chart svg .mut{fill:var(--muted)}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.82rem; color:var(--muted); padding:6px 4px 0}
.legend i{display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:6px}

/* JSON explorer */
.jx{display:flex; flex-direction:column; gap:10px}
.dlbar{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; padding:10px 12px; border:1px dashed var(--line); border-radius:var(--r); background:var(--sheet-2)}
.dlbar .flabel{margin-right:4px}
.logpre{margin:0; max-height:420px; overflow:auto; background:var(--sheet-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; font-family:var(--f-mono); font-size:.74rem; line-height:1.55; white-space:pre}
.jx pre{margin:0; max-height:380px; overflow:auto; background:var(--sheet-2); border:1px solid var(--line); border-radius:var(--r); padding:12px; font-family:var(--f-mono); font-size:.76rem; line-height:1.5; white-space:pre}
.jx mark{background:var(--warn-soft); color:var(--ink); outline:1px solid var(--warn)}
.urlbox{font-family:var(--f-mono); font-size:.82rem; background:var(--sheet-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; overflow-x:auto; white-space:pre; line-height:1.6}

/* Survey mock */
.mock{border:1px solid var(--line); border-radius:var(--r); background:var(--sheet); overflow:hidden}
.mock .mh{background:var(--accent); color:var(--sheet); padding:12px 16px}
.mock .mh b{font-family:var(--f-display); font-size:1.1rem; display:block}
.mock .mb{padding:14px 16px; display:flex; flex-direction:column; gap:14px}
.mock fieldset{border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; margin:0; display:flex; flex-direction:column; gap:8px; min-width:0}
.mock legend{font-weight:600; font-size:.88rem; padding:0 6px}
.mock .fake-select{border:1px solid var(--line); border-radius:var(--r); max-width:300px; font-size:.86rem}
.mock .fake-select div{padding:3px 10px}
.mock .fake-select .sel{background:var(--accent-soft); font-weight:600}
.mock .radio{display:inline-block; width:13px; height:13px; border:1.5px solid var(--muted); border-radius:50%}
.mock .btns{display:flex; gap:8px; justify-content:flex-end}
.mock .fbtn{border:1px solid var(--accent); border-radius:var(--r); padding:5px 18px; font-weight:600; font-size:.86rem; color:var(--accent)}
.mock .fbtn.p{background:var(--accent); color:var(--sheet)}
.mock .roletitle{font-family:var(--f-display); font-size:1.15rem}

.hat{display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid var(--muted); vertical-align:-1px; margin-right:6px}

details.more{border:1px solid var(--line); border-radius:var(--r); background:var(--sheet-2)}
details.more > summary{cursor:pointer; padding:9px 12px; font-weight:600; font-size:.9rem}
details.more > div{padding:0 12px 12px; display:flex; flex-direction:column; gap:10px}

.steps{counter-reset:s; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.steps > li{counter-increment:s; display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px}
.steps > li::before{content:counter(s); font-family:var(--f-mono); font-weight:600; font-size:.8rem; color:var(--accent); border:1px solid var(--accent); border-radius:50%; width:24px; height:24px; display:grid; place-items:center}
.steps > li > div{display:flex; flex-direction:column; gap:6px; min-width:0}
.calc{font-family:var(--f-mono); font-size:.84rem; background:var(--sheet-2); border-radius:var(--r); padding:8px 12px; border:1px solid var(--line-2); overflow-x:auto; white-space:pre-wrap; line-height:1.6}

.foot{color:var(--muted); font-size:.78rem; text-align:center; padding-top:8px}
@media (prefers-reduced-motion: no-preference){ .sheet-body > *{animation:rise .25s ease both} @keyframes rise{from{transform:translateY(4px)} to{transform:none}} }

/* Lernbereich */
.tabs a{font-size:.92rem; border-bottom:2px solid transparent; padding:9px 12px 8px; color:var(--muted); text-decoration:none; white-space:nowrap}
.tabs a.on{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.tabs a:hover{color:var(--ink)}
a.btn{text-decoration:none}
.tags{display:flex; flex-wrap:wrap; gap:6px}
a.tlink{text-decoration:none; color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft)}
a.tlink:hover{border-color:var(--accent)}
.lh{font-size:1.12rem; padding-top:6px; border-top:1px solid var(--line-2); margin-top:4px}
.sheet-body > .lh:first-child,.sheet-body > .dlbar + .lh{border-top:0; padding-top:0}
.week{padding:14px 16px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--sheet-2)}
.kcard{display:flex; flex-direction:column; gap:14px; padding:22px 24px; border:1px solid var(--line); border-radius:8px; background:var(--sheet-2); max-width:760px}
.kq{font-family:var(--f-display); font-size:1.35rem; line-height:1.25}
.ka{border-left:3px solid var(--ok); background:var(--ok-soft); padding:12px 14px; border-radius:0 var(--r) var(--r) 0; font-size:1rem; max-width:70ch}
.ka{display:flex; flex-direction:column; gap:8px; line-height:1.55}
.ka ul,.ka ol{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:5px}
.ka table{width:auto; font-size:.9rem}
.ka td{padding:3px 14px 3px 0; border-bottom:1px solid var(--line-2)}
.nav .sep.lern{color:var(--accent)}
@media (max-width:600px){ .kcard{padding:16px} .kq{font-size:1.15rem} }

/* Sessions, Fortschritt, Notizen */
.side{grid-column:1; grid-row:1}
.sheet{grid-column:2; grid-row:1}
.app.notes-right{grid-template-columns:250px minmax(0,1fr) 330px; max-width:1640px}
.app.notes-left{grid-template-columns:250px 330px minmax(0,1fr); max-width:1640px}
.app.notes-left .notes{grid-column:2; grid-row:1} .app.notes-left .sheet{grid-column:3}
.app.notes-right .notes{grid-column:3; grid-row:1}
@media (max-width:1200px) and (min-width:901px){ .app.notes-right{grid-template-columns:220px minmax(0,1fr) 280px} .app.notes-left{grid-template-columns:220px 280px minmax(0,1fr)} }
.notes{position:sticky; top:calc(env(safe-area-inset-top,0px) + 18px); align-self:start; max-height:calc(100vh - 36px); display:flex; flex-direction:column; gap:10px; background:var(--sheet); border:1px solid var(--line); border-radius:8px; padding:14px; overflow:auto; box-shadow:0 10px 30px -18px rgba(20,40,80,.25)}
.notes .nh{display:flex; align-items:center; gap:8px; justify-content:space-between}
.notes .nh b{font-family:var(--f-display); font-size:1.05rem}
.notes .seg button{padding:4px 8px; font-size:.78rem}
.nctx{font-size:.8rem; color:var(--accent); font-weight:600; line-height:1.35}
#ntext{min-height:280px; font-family:var(--f-body); font-size:.92rem; line-height:1.5}
.nall > div{gap:6px}
.nitem{display:flex; flex-direction:column; gap:1px; padding:6px 8px; border-radius:var(--r); text-decoration:none; color:var(--ink); border:1px solid transparent; font-size:.82rem}
.nitem span{color:var(--muted)} .nitem:hover,.nitem.on{border-color:var(--line); background:var(--sheet)}
.fab{position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); z-index:21; box-shadow:0 6px 20px -8px rgba(20,40,80,.4); font-weight:600}
.app.notes-open .fab{display:none}
@media (max-width:900px){
  .app.notes-open{grid-template-columns:minmax(0,1fr)!important}
  .app .sheet,.app.notes-left .sheet{grid-column:1; grid-row:auto}
  .side{grid-row:auto}
  .notes{position:fixed; left:0; right:0; bottom:0; top:auto; max-height:62vh; border-radius:12px 12px 0 0; z-index:22; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
  .notes .seg{display:none}
  #ntext{min-height:160px}
}
.meter{display:flex; height:8px; border-radius:4px; background:var(--line-2); overflow:hidden; flex:1 1 auto; min-width:60px}
.meter i{display:block; height:100%} .meter .m-ok{background:var(--ok)} .meter .m-again{background:var(--warn)}
.meter.big{height:10px; border-radius:5px}
.mini{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.76rem; color:var(--muted); text-decoration:none; padding:9px 10px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--sheet)}
.mini b{color:var(--ink); font-family:var(--f-mono); font-weight:600}
.mini .meter{flex-basis:100%; height:6px}
.mini:hover{border-color:var(--accent)}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.tile{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--sheet-2)}
.tile .tl{font-size:.78rem; color:var(--muted)} .tile .tv{font-family:var(--f-display); font-size:1.5rem; font-variant-numeric:tabular-nums} .tile .ts{font-size:.78rem; color:var(--muted)}
.tile .bar{margin-top:4px}
.prow{display:grid; grid-template-columns:220px minmax(0,1fr) auto; gap:12px; align-items:center; font-size:.9rem}
@media (max-width:600px){ .prow{grid-template-columns:minmax(0,1fr) auto} .prow .meter{grid-column:1/-1; grid-row:2} }
.setup{padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--sheet-2); max-width:760px}
.srow{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.srow .flabel{min-width:100px}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.runbar{display:flex; flex-direction:column; gap:6px; max-width:760px}

/* ---------- Server-Version: Login, Konto, Dashboard ---------- */
input[type=password]{font:inherit; font-size:.92rem; color:var(--ink); background:var(--sheet); border:1px solid var(--line); border-radius:var(--r); padding:7px 10px; width:100%; min-width:0}
input[type=password]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.userbox{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:0 2px}
.userbox:empty{display:none}
.userbox .uname{font-size:.86rem; font-weight:600; margin-right:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
#syncinfo.err{color:var(--pen)}
.resume{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid var(--accent); border-radius:8px; background:var(--accent-soft)}
.resume > div{display:flex; flex-direction:column; gap:2px}
.dgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px 28px}
.chart.act{position:relative}
.chart.act svg{min-width:480px}
.chart.act .hit{cursor:default}
.chart.act .hit:hover{fill:var(--accent-soft)!important; fill-opacity:.35}
.tip{position:absolute; top:6px; width:170px; padding:6px 9px; font-size:.8rem; background:var(--ink); color:var(--sheet); border-radius:var(--r); pointer-events:none; text-align:center}
.loginpage .loginwrap{max-width:420px; margin:0 auto; padding:clamp(28px,10vh,90px) 16px 40px; display:flex; flex-direction:column; gap:16px}
.loginbrand{display:flex; flex-direction:column; gap:2px; text-align:center}
.loginbrand b{font-family:var(--f-display); font-size:1.7rem; letter-spacing:-.01em}
.loginbrand span{font-size:.78rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.logincard .sheet-body{gap:14px}
.btn.big{justify-content:center; padding:10px 14px; font-size:1rem}

/* Eigene Dokumente */
.drop{position:relative; display:flex; flex-direction:column; gap:4px; padding:22px; border:2px dashed var(--line); border-radius:8px; background:var(--sheet-2); cursor:pointer}
.drop.over,.drop:focus-within{border-color:var(--accent); background:var(--accent-soft)}
.drop input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.dprev{white-space:pre-wrap; max-height:260px; overflow:auto; font-size:.86rem; color:var(--muted)}
.gapin{font:inherit; padding:2px 8px; margin:0 4px; width:14ch; max-width:100%; border:0; border-bottom:2px solid var(--accent); background:var(--sheet); color:var(--ink)}
.gap{display:inline-block; padding:0 6px; margin:0 2px; border-radius:4px; font-weight:600}
.gap.ok,.gap.sol{background:var(--ok-soft); color:var(--ok)}
.gap.bad{background:var(--pen-soft); color:var(--pen); text-decoration:line-through}