/* Schiller Tree – Gestaltung
   Layout: App-Rahmen. Schmal = Tab-Leiste unten, breit (Handy am Monitor) = Seitenleiste links.
   Welt: Herbarium-Bogen – kühles Salbeipapier, Rinde für den Stamm, Blattgrün als Akzent, Medaillenmetalle. */
:root {
  --paper: #edf1ea;        /* Seitengrund */
  --sheet: #fafbf7;        /* Flächen */
  --sheet-2: #f2f5ef;
  --ink: #1d2a22;          /* Text */
  --ink-2: #4c5c51;        /* gedämpft */
  --ink-3: #7b897e;
  --line: #d3dcd1;
  --leaf: #2f7d4f;         /* Akzent */
  --leaf-soft: #d6eadb;
  --leaf-ink: #ffffff;
  --bark: #6e5338;
  --bark-soft: #e8dfd2;
  --bronze: #b0733b; --bronze-soft: #f1e1cf;
  --silber: #85919e; --silber-soft: #e3e8ee;
  --gold: #c08f12; --gold-soft: #f6eac3;
  --ok: #2f7d4f; --warn: #b7791f; --warn-soft: #f8ecd2; --bad: #b4443a; --bad-soft: #f6dcd8;
  --info: #3a6ea5; --info-soft: #dce8f5;
  --shadow: 0 1px 2px rgba(29, 42, 34, .06), 0 4px 16px rgba(29, 42, 34, .06);
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Charter, "Bitstream Charter", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r: 10px;
  --scale: 1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111713; --sheet: #18201b; --sheet-2: #1e2721; --ink: #e3eae2; --ink-2: #a6b3a8; --ink-3: #78867b; --line: #2d3a31;
    --leaf: #6cc08b; --leaf-soft: #1f3a28; --leaf-ink: #0d1a12; --bark: #b89474; --bark-soft: #2e261e;
    --bronze: #d49a62; --bronze-soft: #3a2a1b; --silber: #aeb9c5; --silber-soft: #2a3038; --gold: #e6b83a; --gold-soft: #3a3115;
    --ok: #6cc08b; --warn: #e0a94a; --warn-soft: #3a2e17; --bad: #e57d72; --bad-soft: #3d201d; --info: #7fb0e6; --info-soft: #1c2a3b;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111713; --sheet: #18201b; --sheet-2: #1e2721; --ink: #e3eae2; --ink-2: #a6b3a8; --ink-3: #78867b; --line: #2d3a31;
  --leaf: #6cc08b; --leaf-soft: #1f3a28; --leaf-ink: #0d1a12; --bark: #b89474; --bark-soft: #2e261e;
  --bronze: #d49a62; --bronze-soft: #3a2a1b; --silber: #aeb9c5; --silber-soft: #2a3038; --gold: #e6b83a; --gold-soft: #3a3115;
  --ok: #6cc08b; --warn: #e0a94a; --warn-soft: #3a2e17; --bad: #e57d72; --bad-soft: #3d201d; --info: #7fb0e6; --info-soft: #1c2a3b;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
:where(svg[viewBox="0 0 24 24"]:not([width])) { width: 1.25em; height: 1.25em; flex: none; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: calc(16px * var(--scale)); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--paper); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; letter-spacing: -.005em; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; }
p { margin: 0; }
a { color: var(--leaf); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; }
.mono { font-family: var(--font-mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ───── Rahmen ───── */
.shell { display: grid; grid-template-columns: 1fr; min-height: 100%; }
.rail { display: none; }
.main { min-width: 0; padding-block: 16px 96px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.page { max-width: 1120px; margin: 0 auto; display: grid; gap: 20px; }
.page.narrow { max-width: 760px; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around;
  background: var(--sheet); border-top: 1px solid var(--line);
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
}
.tabbar a { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--ink-2); font-size: .7rem; padding: 4px 6px; border-radius: 8px; min-width: 56px; position: relative; }
.tabbar a[aria-current="page"] { color: var(--leaf); font-weight: 700; }
.tabbar svg { width: 22px; height: 22px; }
.badge-dot { position: absolute; top: 0; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.topbar { display: flex; align-items: center; gap: 12px; justify-content: space-between; max-width: 1120px; margin: 0 auto 4px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
.brand svg { width: 28px; height: 28px; }
.topbar .who { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.who-name { font-size: .9rem; font-weight: 700; }
.demo-pill { font-size: .7rem; font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 2px 8px; }

@media (min-width: 900px) {
  .shell { grid-template-columns: 236px 1fr; }
  .tabbar { display: none; }
  .rail {
    display: flex; flex-direction: column; gap: 4px; position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; overflow-y: auto;
    border-right: 1px solid var(--line); background: var(--sheet);
    padding: 20px 12px 20px max(12px, env(safe-area-inset-left, 0px));
  }
  .rail .brand { padding: 4px 10px 16px; }
  .rail a.nav { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 600; position: relative; }
  .rail a.nav:hover { background: var(--sheet-2); color: var(--ink); }
  .rail a.nav[aria-current="page"] { background: var(--leaf-soft); color: var(--ink); }
  .rail a.nav svg { width: 20px; height: 20px; flex: none; }
  .rail .badge-dot { position: static; margin-left: auto; }
  .rail .rail-foot { margin-top: auto; display: grid; gap: 8px; padding: 12px 10px 0; border-top: 1px solid var(--line); }
  .topbar .brand { display: none; }
  .main { padding-block: 24px 48px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
}

/* ───── Bausteine ───── */
.card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 12px; min-width: 0; align-content: start; }
.card.flat { box-shadow: none; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 8px; align-content: start; }
.stack.lg { gap: 14px; }
.divider { height: 1px; background: var(--line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink); border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: .92rem; min-height: 40px;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--leaf); border-color: var(--leaf); color: var(--leaf-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--sheet-2); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 5px 10px; min-height: 32px; font-size: .84rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }
.btn.bronze { background: var(--bronze-soft); border-color: var(--bronze); }
.btn.silber { background: var(--silber-soft); border-color: var(--silber); }
.btn.gold { background: var(--gold-soft); border-color: var(--gold); }

.field { display: grid; gap: 4px; }
.field > span { font-size: .84rem; font-weight: 700; color: var(--ink-2); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea {
  width: 100%; border: 1px solid var(--line); background: var(--sheet); border-radius: 8px; padding: 9px 11px; min-height: 40px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--leaf); outline-offset: 0; border-color: var(--leaf); }

.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: .76rem; font-weight: 700; background: var(--sheet-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.chip .sw { width: 8px; height: 8px; border-radius: 50%; }
.chip.leaf { background: var(--leaf-soft); color: var(--ink); border-color: transparent; }
.chip.warn { background: var(--warn-soft); color: var(--ink); border-color: transparent; }
.chip.bad { background: var(--bad-soft); color: var(--ink); border-color: transparent; }
.chip.info { background: var(--info-soft); color: var(--ink); border-color: transparent; }
.chip.bark { background: var(--bark-soft); color: var(--ink); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.medal { width: 1.15em; height: 1.15em; border-radius: 50%; display: inline-block; vertical-align: -0.18em; border: 2px solid; flex: none; }
.medal.bronze { background: var(--bronze-soft); border-color: var(--bronze); }
.medal.silber { background: var(--silber-soft); border-color: var(--silber); }
.medal.gold { background: var(--gold-soft); border-color: var(--gold); }
.medal.none { background: transparent; border-color: var(--line); border-style: dashed; }
.medal-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

.bar { height: 8px; background: var(--sheet-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: var(--leaf); border-radius: 4px; }
.bar.bark > i { background: var(--bark); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--leaf); }
.tabs button svg { width: 18px; height: 18px; }

.empty { padding: 20px; text-align: center; color: var(--ink-2); border: 1px dashed var(--line); border-radius: var(--r); }
.notice { border-radius: var(--r); padding: 12px 14px; background: var(--info-soft); display: flex; gap: 10px; align-items: flex-start; }
.notice.warn { background: var(--warn-soft); }
.notice.ok { background: var(--leaf-soft); }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

.list { display: grid; }
.list > * { padding: 10px 0; border-top: 1px solid var(--line); }
.list > *:first-child { border-top: 0; }
.item { display: flex; gap: 12px; align-items: center; min-width: 0; }
.item .grow { flex: 1; min-width: 0; }
.item .t { font-weight: 700; overflow-wrap: anywhere; }
a.item { text-decoration: none; color: inherit; }
a.item:hover .t { color: var(--leaf); }

.toast { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; font-weight: 700; box-shadow: var(--shadow); max-width: calc(100% - 32px); animation: toast-in .2s ease; }
@media (min-width: 900px) { .toast { bottom: 28px; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(15, 22, 18, .45); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.modal { background: var(--sheet); border-radius: 14px; padding: 20px; width: min(640px, 100%); max-height: 90vh; overflow-y: auto; display: grid; grid-auto-rows: max-content; gap: 14px; box-shadow: var(--shadow); }
.modal.wide { width: min(980px, 100%); }

/* ───── Login ───── */
.login { min-height: 100%; display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.login-card { width: min(440px, 100%); display: grid; gap: 18px; }
.login-hero { display: grid; justify-items: center; gap: 6px; text-align: center; }
.login-hero svg { width: 160px; height: auto; }
.login-hero h1 { font-size: 2.1rem; }
.demo-box { display: grid; gap: 8px; background: var(--warn-soft); border-radius: var(--r); padding: 14px; }

/* ───── Startseite ───── */
.hello { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.hello .av { width: 88px; height: 88px; }
.lvl { display: grid; gap: 4px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.kpi { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 2px; text-decoration: none; color: inherit; }
.kpi b { font-size: 1.5rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
a.kpi:hover { border-color: var(--leaf); }
.banner { background: var(--leaf); color: var(--leaf-ink); border-radius: var(--r); padding: 14px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner .btn { background: var(--leaf-ink); color: var(--leaf); border-color: transparent; }
.event { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; }
.event .date { text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 4px 0; background: var(--sheet-2); line-height: 1.1; }
.event .date b { display: block; font-size: 1.25rem; font-family: var(--font-display); }
.event .date span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.type-input { --ev: var(--info); } .type-nachweis { --ev: var(--gold); } .type-zusammenfassung { --ev: var(--bark); } .type-projekt { --ev: var(--leaf); }
.ev-type { color: var(--ev); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }

/* ───── Baum ───── */
.tree-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .tree-wrap { grid-template-columns: minmax(0, 1fr) 300px; } }
.tree-stage { background: linear-gradient(var(--sheet), var(--sheet-2)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: relative; }
.tree-stage > svg { display: block; width: 100%; height: auto; }
.legend svg { flex: none; }
.tree-svg .leaf { cursor: pointer; transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
.tree-svg .leaf:hover, .tree-svg .leaf:focus-visible { transform: scale(1.35); outline: none; }
.tree-svg .branch-label { cursor: pointer; }
.tree-svg text { font-family: var(--font-body); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: .8rem; color: var(--ink-2); padding: 10px 14px; border-top: 1px solid var(--line); background: var(--sheet); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.subj-list { display: grid; gap: 10px; }
.subj { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r); background: var(--sheet); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.subj:hover { border-color: var(--sc); }
.subj .bar > i { background: var(--sc); }
.depth { display: flex; gap: 3px; }
.depth i { flex: 1; height: 6px; border-radius: 2px; background: var(--sheet-2); border: 1px solid var(--line); }
.depth i.on { background: var(--sc); border-color: var(--sc); }

.graph-scroller { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); max-height: 74vh; position: relative; }
.graph { position: relative; }
.graph svg.edges { position: absolute; inset: 0; pointer-events: none; }
.node {
  position: absolute; width: 164px; height: 58px; overflow: hidden; border-radius: 10px; border: 1.5px solid var(--line); background: var(--sheet);
  padding: 6px 9px 6px 10px; display: grid; gap: 2px; cursor: pointer; text-align: left; font-size: .8rem; line-height: 1.25; color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
.node:hover { border-color: var(--leaf); z-index: 2; }
.node .nt { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.node .nm { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: .68rem; color: var(--ink-2); }
.node.locked { opacity: .55; border-style: dashed; }
.node.learning { border-color: var(--leaf); background: var(--leaf-soft); }
.node.ready { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); }
.node.m-bronze { border-color: var(--bronze); background: var(--bronze-soft); }
.node.m-silber { border-color: var(--silber); background: var(--silber-soft); }
.node.m-gold { border-color: var(--gold); background: var(--gold-soft); }
.node.inactive { opacity: .35; }
.node .ncross { display: flex; gap: 2px; }
.node .ncross i { width: 7px; height: 7px; border-radius: 50%; }
.row-label { position: absolute; left: 8px; font-family: var(--font-display); font-weight: 700; color: var(--ink-3); font-size: .9rem; }
.col-label { position: absolute; top: 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-2); text-align: center; }
.stage-band { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }

/* ───── Thema ───── */
.skill-head { display: grid; gap: 10px; }
.crumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); }
.prose { max-width: 68ch; display: grid; gap: 12px; }
.prose p, .prose li { line-height: 1.65; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.prose strong { color: var(--ink); }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.medal-card { border-radius: var(--r); padding: 12px; display: grid; gap: 6px; border: 1.5px solid var(--mc); background: var(--ms); }
.medal-card.bronze { --mc: var(--bronze); --ms: var(--bronze-soft); }
.medal-card.silber { --mc: var(--silber); --ms: var(--silber-soft); }
.medal-card.gold { --mc: var(--gold); --ms: var(--gold-soft); }
.medal-card.dim { opacity: .55; }
.quiz-q { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.quiz-q:first-child { border-top: 0; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--sheet); }
.opt:hover { border-color: var(--ink-3); }
.opt input { margin-top: 4px; accent-color: var(--leaf); }
.opt.right { border-color: var(--ok); background: var(--leaf-soft); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.lvl-tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lvl-tag.bronze { color: var(--bronze); } .lvl-tag.silber { color: var(--silber); } .lvl-tag.gold { color: var(--gold); }
.cross { display: grid; gap: 6px; padding: 12px; border-radius: var(--r); background: var(--sheet-2); border-left: 4px solid var(--cc, var(--ink-3)); }
.solution { border-radius: 8px; background: var(--leaf-soft); padding: 8px 10px; }

/* Visualisierungen */
.viz { display: grid; gap: 10px; }
.flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.flow .st { flex: 1 1 140px; min-width: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 10px; position: relative; display: grid; gap: 4px; align-content: start; }
.flow .st b { font-size: .92rem; }
.flow .st span { font-size: .82rem; color: var(--ink-2); }
.flow .st .n { font-family: var(--font-display); color: var(--leaf); font-weight: 700; font-size: .85rem; }
.cycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; counter-reset: c; }
.concept { display: grid; gap: 10px; justify-items: center; }
.concept .center { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; padding: 10px 20px; border-radius: 999px; background: var(--leaf); color: var(--leaf-ink); }
.concept .items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; width: 100%; }
.concept .it { border: 1px solid var(--line); border-top: 3px solid var(--leaf); background: var(--sheet); border-radius: 8px; padding: 10px; display: grid; gap: 2px; }
.cmp-wrap { overflow-x: auto; }
table.cmp { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.cmp th, table.cmp td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.cmp thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
table.cmp tbody th { font-weight: 700; }
.formula { font-family: var(--font-display); font-size: 1.35rem; text-align: center; padding: 16px; background: var(--sheet-2); border-radius: 10px; overflow-x: auto; white-space: nowrap; }
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.parts div { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.parts code { font-family: var(--font-display); font-weight: 700; color: var(--leaf); }

/* Interaktiv */
.sortable { display: grid; gap: 6px; }
.sortable .si { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; }
.sortable .si.ok { border-color: var(--ok); background: var(--leaf-soft); }
.sortable .si.no { border-color: var(--bad); background: var(--bad-soft); }
.sortable .si .grow { flex: 1; min-width: 0; }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.match-grid button { text-align: left; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); cursor: pointer; min-height: 44px; }
.match-grid button.sel { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf-soft); }
.match-grid button.done { border-color: var(--ok); background: var(--leaf-soft); cursor: default; }
.match-grid button.err { border-color: var(--bad); background: var(--bad-soft); }
.plot { width: 100%; height: auto; display: block; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.plot text { font-size: 11px; fill: var(--ink-2); font-family: var(--font-body); }
.sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.sliders label { display: grid; gap: 2px; font-size: .85rem; }
input[type=range] { width: 100%; accent-color: var(--leaf); }
.punnett { display: grid; grid-template-columns: auto repeat(2, 1fr); gap: 4px; max-width: 320px; text-align: center; }
.punnett div { padding: 10px; border-radius: 6px; background: var(--sheet-2); font-family: var(--font-display); font-weight: 700; }
.punnett .hd { background: transparent; color: var(--ink-2); }
.punnett .dom { background: var(--leaf-soft); }
.punnett .rec { background: var(--gold-soft); }
.codon-row { display: flex; flex-wrap: wrap; gap: 6px; }
.codon { display: grid; gap: 4px; justify-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); min-width: 76px; }
.codon b { font-family: var(--font-mono); letter-spacing: .1em; }

/* Lernkarten */
.flash { min-height: 260px; display: grid; place-items: center; text-align: center; padding: 24px; border-radius: 14px; border: 1px solid var(--line); background: var(--sheet); cursor: pointer; position: relative; }
.flash .side { display: grid; gap: 12px; max-width: 56ch; font-size: 1.12rem; }
.flash .q { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade button { display: grid; gap: 2px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); cursor: pointer; font-weight: 700; }
.grade button span { font-size: .72rem; color: var(--ink-2); font-weight: 400; }
.grade button.g1 { border-color: var(--bad); } .grade button.g2 { border-color: var(--warn); } .grade button.g3 { border-color: var(--ok); } .grade button.g4 { border-color: var(--info); }
kbd { font-family: var(--font-mono); font-size: .75rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--sheet-2); }

/* Avatar */
.av-stage { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .av-stage { grid-template-columns: 260px 1fr; } }
.av-big { display: grid; justify-items: center; gap: 10px; align-content: start; }
.av-big svg { width: 220px; height: 220px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.itm { display: grid; justify-items: center; gap: 4px; padding: 8px 6px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--sheet); cursor: pointer; font-size: .78rem; text-align: center; }
.itm svg { width: 64px; height: 64px; }
.itm.on { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); }
.itm.locked { cursor: not-allowed; opacity: .6; }
.itm.locked svg { filter: grayscale(1); }
.itm .cond { color: var(--ink-2); font-size: .7rem; }

/* Lehrkräfte */
.matrix-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: .8rem; }
table.matrix th, table.matrix td { padding: 4px; border-bottom: 1px solid var(--line); }
table.matrix thead th { position: sticky; top: 0; background: var(--sheet); z-index: 2; height: 150px; vertical-align: bottom; }
table.matrix thead th .vt { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 140px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--ink-2); }
table.matrix tbody th { position: sticky; left: 0; background: var(--sheet); z-index: 1; text-align: left; white-space: nowrap; }
table.matrix .who { display: flex; align-items: center; gap: 8px; cursor: pointer; }
table.matrix .who svg { width: 28px; height: 28px; }
.cell { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: .7rem; font-weight: 800; border: 1.5px solid transparent; position: relative; margin: auto; }
.cell.empty { background: transparent; border: 1px dashed var(--line); }
.cell.learning { background: var(--leaf-soft); }
.cell.ready { background: var(--leaf-soft); border-color: var(--leaf); }
.cell.bronze { background: var(--bronze-soft); border-color: var(--bronze); }
.cell.silber { background: var(--silber-soft); border-color: var(--silber); }
.cell.gold { background: var(--gold-soft); border-color: var(--gold); }
.cell.stuck::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid var(--sheet); }
.diff { display: inline-block; width: 40px; height: 6px; border-radius: 3px; background: var(--sheet-2); overflow: hidden; vertical-align: middle; border: 1px solid var(--line); }
.diff i { display: block; height: 100%; }
.place-col { display: grid; gap: 6px; }
.av-row { display: flex; flex-wrap: wrap; gap: 4px; }
.av-row svg { width: 34px; height: 34px; }
.code-big { font-family: var(--font-mono); font-size: 2.4rem; letter-spacing: .2em; font-weight: 800; text-align: center; padding: 10px; background: var(--gold-soft); border-radius: 10px; border: 2px solid var(--gold); }
table.simple { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.simple th, table.simple td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.simple thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.tbl-wrap { overflow-x: auto; }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--leaf); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--sheet); padding: 6px 10px; cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--leaf); color: var(--leaf-ink); }
.pass-sheet { display: grid; gap: 16px; }
.pass-sub { display: grid; gap: 6px; }
.pass-line { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--line); }

@media (max-width: 520px) {
  h1 { font-size: 1.45rem; }
  .match-grid { grid-template-columns: 1fr; }
  .card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print {
  .rail, .tabbar, .topbar, .no-print { display: none !important; }
  .shell { display: block; } body { background: #fff; } .card { border: 0; }
}

/* Aufgaben mit Material */
.material { border-left: 4px solid var(--bark); background: var(--bark-soft); border-radius: 0 8px 8px 0; padding: 10px 12px; display: grid; gap: 6px; font-size: .92rem; }
.material p { line-height: 1.5; }
.material ul { margin: 0; padding-left: 1.2em; }

/* ───── Schillern: Wort-Heatmap & Flamme ───── */
.schillern-grid { --hc: var(--leaf); display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: clamp(2px, .45vw, 4px); max-width: 640px; }
.schillern-grid.round-1 { --hc: var(--info); }
.schillern-grid.round-2 { --hc: var(--gold); }
.schillern-grid.round-3 { --hc: #9b7ad8; }
.px { display: block; aspect-ratio: 1; border-radius: 22%; }
.px.blank { visibility: hidden; }
.px.off { border: 1.5px dashed color-mix(in srgb, var(--ink-3) 50%, transparent); }
.px.on.l1 { background: color-mix(in srgb, var(--hc, var(--leaf)) 32%, var(--sheet)); }
.px.on.l2 { background: color-mix(in srgb, var(--hc, var(--leaf)) 55%, var(--sheet)); }
.px.on.l3 { background: color-mix(in srgb, var(--hc, var(--leaf)) 78%, var(--sheet)); }
.px.on.l4 { background: var(--hc, var(--leaf)); }
.px.shimmer {
  background: linear-gradient(120deg, #22c39a, #3d8bff, #9d5cff, #ff7a3d, #ff4f9a, #22c39a);
  background-size: 500% 500%;
  animation: schillern 5s linear infinite;
  animation-delay: calc(var(--i) * -0.25s);
  box-shadow: 0 0 7px color-mix(in srgb, #9d5cff 55%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.px.next { border: 2px solid var(--hc, var(--leaf)); animation: px-pulse 1.8s ease-in-out infinite; }
@keyframes schillern { 0% { background-position: 0% 50%; } 100% { background-position: 500% 50%; } }
@keyframes px-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.heat-legend { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-3); }
.heat-legend .px { width: 12px; }
.streak-badge { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--sheet-2); border: 1px solid var(--line); }
.streak-badge b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; display: block; }
.streak-badge span { font-size: .72rem; color: var(--ink-2); }
.streak-badge.t2, .streak-badge.t3 { background: color-mix(in srgb, #f28c28 14%, var(--sheet)); border-color: color-mix(in srgb, #f28c28 45%, var(--line)); }
.streak-badge.t4 { background: linear-gradient(120deg, color-mix(in srgb, #8fb8ff 22%, var(--sheet)), color-mix(in srgb, #c9a7ff 22%, var(--sheet))); }
.flame.lit .flame-body, .flame.lit .flame-side { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.6s ease-in-out infinite alternate; }
.flame.lit .flame-core { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.1s ease-in-out infinite alternate-reverse; }
@keyframes flicker { 0% { transform: scale(1, 1) skewX(0deg); } 50% { transform: scale(.97, 1.04) skewX(-2deg); } 100% { transform: scale(1.02, .97) skewX(2deg); } }
.schillern.compact { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet-2); }
.schillern.compact .schillern-grid { gap: 2px; }
.mini-flame { display: inline-flex; align-items: center; gap: 1px; font-size: .75rem; font-weight: 700; color: var(--ink-2); }

/* ───── Karten-Rallye ───── */
:root { --road: #59615c; --road-line: rgba(255, 255, 255, .75); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --road: #303833; --road-line: rgba(255, 255, 255, .55); } }
:root[data-theme="dark"] { --road: #303833; --road-line: rgba(255, 255, 255, .55); }
.rally-me { text-align: right; display: grid; }
.rally-me b { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.rally-me span { font-size: .72rem; color: var(--ink-2); }
.lanes { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 2px; }
.lane { display: grid; gap: 2px; }
.lane-label { display: flex; gap: 8px; align-items: center; font-size: .78rem; }
.lane-label .t { font-weight: 700; }
.lane.me .lane-label .t { color: var(--leaf); }
.road {
  position: relative; height: 40px; border-radius: 8px; background-color: var(--road); overflow: hidden;
  background-image: linear-gradient(90deg, var(--road-line) 0 50%, transparent 50% 100%);
  background-size: 24px 2px; background-repeat: repeat-x; background-position: 0 31px;
}
.lane.me .road { box-shadow: 0 0 0 2px var(--leaf); }
.finish {
  position: absolute; top: 0; bottom: 0; right: 10px; width: 10px;
  background-image: linear-gradient(45deg, #fff 25%, #222 25%, #222 50%, #fff 50%, #fff 75%, #222 75%);
  background-size: 10px 10px; opacity: .9;
}
.car { position: absolute; top: 2px; left: calc(var(--p) * (100% - 84px)); transition: left 1.2s cubic-bezier(.2, .8, .2, 1); }
.car-art { position: relative; width: 64px; height: 36px; }
.car-body { position: absolute; left: 0; bottom: 0; }
.car-driver { position: absolute; left: 30px; top: -2px; width: 22px; height: 22px; }
.car-driver svg { width: 100%; height: 100%; }
.rally-invite { border-style: dashed; }

/* ───── Live-Quiz ───── */
.big-btn { min-height: 52px; font-size: 1.05rem; padding: 12px 22px; }
.live-wait { text-align: center; justify-items: center; }
.lobby-me svg { width: 96px; height: 96px; }
.live-q { font-size: clamp(1.2rem, 2.6vw, 2rem); }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.answer-grid.three { grid-template-columns: 1fr; }
@media (min-width: 560px) { .answer-grid.three { grid-template-columns: repeat(3, 1fr); } }
.answer {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--ac); color: #fff; font-weight: 700; font-size: 1.02rem; text-align: left; box-shadow: 0 3px 0 rgba(0, 0, 0, .22); transition: transform .08s;
}
.answer:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }
.answer span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.answer.static { cursor: default; }
.answer .count { font-size: 1.4rem; font-family: var(--font-display); }
.answer.is-wrong { opacity: .35; }
.answer.is-right { box-shadow: 0 0 0 4px var(--sheet), 0 0 0 7px var(--ac); }
.answer-grid.stage .answer { min-height: 96px; font-size: clamp(1rem, 1.8vw, 1.4rem); }
@media (max-width: 420px) { .answer-grid { grid-template-columns: 1fr; } }
.live-card-front { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; text-align: center; padding: 22px 16px; border-radius: 12px; background: var(--sheet-2); border: 1px solid var(--line); }
.live-card-front.small { font-size: 1rem; padding: 10px; }
.live-card-front.big, .live-card-back.big { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.live-card-back { text-align: center; padding: 16px; border-radius: 12px; background: var(--leaf-soft); }
.fb { border-radius: 14px; padding: 22px 16px; text-align: center; position: relative; overflow: hidden; display: grid; gap: 6px; }
.fb h1 { font-size: 2rem; }
.fb.ok { color: #fff; background: linear-gradient(120deg, #22c39a, #3d8bff, #9d5cff, #ff7a3d, #22c39a); background-size: 400% 400%; animation: schillern 6s linear infinite; }
.fb.ok p { color: #fff; }
.fb.learn { background: var(--info-soft); }
.fb.celebrate h1 { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.xp-pop { justify-self: center; font-weight: 800; font-size: .85rem; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.fb.learn .xp-pop { background: var(--sheet); }
.energy { display: grid; gap: 4px; }
.energy-bar { height: 12px; border-radius: 6px; background: var(--sheet-2); border: 1px solid var(--line); overflow: hidden; }
.energy-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c39a, #3d8bff, #9d5cff, #ff7a3d); background-size: 300% 100%; animation: schillern 8s linear infinite; transition: width .8s ease; }
.energy.big .energy-bar { height: 18px; }
.end-ring { --p: 0; width: 150px; aspect-ratio: 1; margin: 6px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--leaf) calc(var(--p) * 360deg), var(--sheet-2) 0); }
.end-ring > div { width: 76%; aspect-ratio: 1; border-radius: 50%; background: var(--sheet); display: grid; place-items: center; align-content: center; }
.end-ring b { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.end-ring span { font-size: .8rem; color: var(--ink-2); }
.pulse-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--leaf); animation: px-pulse 1.4s ease-in-out infinite; }
.pulse-dot.small { width: 10px; height: 10px; }
.live-stage { gap: 16px; }
.live-stage .lead { font-size: 1.15rem; }
.lobby { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 10px 0; }
.lobby h1 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.big-count { font-size: 1.2rem; }
.big-count b { font-family: var(--font-display); font-size: 2rem; }
.big-timer { font-size: 1.2rem; padding: 4px 14px; }
.av-cloud { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 760px; }
.av-cloud svg { width: 44px; height: 44px; animation: pop .4s ease; }
.reveal-sum { font-size: 1.2rem; }
.reveal-sum b { font-family: var(--font-display); font-size: 2rem; }
.dist { display: grid; gap: 8px; }
.dist-row { display: grid; grid-template-columns: 130px 1fr 40px; gap: 10px; align-items: center; }
.dist-bar { height: 22px; border-radius: 6px; background: var(--sheet-2); overflow: hidden; }
.dist-bar i { display: block; height: 100%; }
.solution.big { font-size: 1.3rem; padding: 14px; }
.private { border: 1px dashed var(--line); border-radius: var(--r); padding: 10px 12px; }
.live-pill {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); top: calc(10px + env(safe-area-inset-top, 0px));
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; text-decoration: none;
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow); font-size: .9rem; white-space: nowrap; max-width: calc(100% - 32px);
}
.live-pill .pulse-dot { background: #ff4f6d; }

/* ── Lernkarten: Anki-Zähler, Zusatzinfo, eigene Notiz, Warten auf Lernschritt ── */
.rv-counts { display: flex; gap: 12px; font-variant-numeric: tabular-nums; font-weight: 700; }
.rv-counts .n { color: var(--info); } .rv-counts .l { color: var(--bad); } .rv-counts .r { color: var(--ok); }
.rv-counts span { display: inline-flex; gap: 4px; align-items: baseline; }
.rv-counts small { font-weight: 400; color: var(--ink-2); font-size: .72rem; }
.rv-counts .cur { text-decoration: underline; text-underline-offset: 3px; }
.flash .phase { position: absolute; top: 10px; left: 12px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.card-info { text-align: left; font-size: .92rem; background: var(--info-soft); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; }
.card-info::before { content: 'Mehr dazu'; display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--info); margin-bottom: 2px; }
.card-note { text-align: left; font-size: .92rem; background: var(--warn-soft); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; cursor: default; }
.card-note::before { content: 'Meine Notiz'; display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); margin-bottom: 2px; }
.card-note textarea { width: 100%; min-height: 70px; font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--sheet); color: var(--ink); resize: vertical; }
.note-btn { justify-self: center; }
.rv-wait { text-align: center; justify-items: center; }
.rv-wait .clock { font-family: var(--font-display); font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.steps-line { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-size: .78rem; color: var(--ink-2); }
.steps-line i { font-style: normal; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.steps-line i.on { background: var(--leaf-soft); border-color: transparent; color: var(--ink); font-weight: 700; }
.steps-line i.done { color: var(--ink-3); text-decoration: line-through; }

/* ── Rallye: Fahrzeuge, Garage, Ziel-Feier ── */
.car { left: calc(var(--p) * (100% - var(--w, 64px) - 20px)); }
.car-art.fly { animation: v-bob 2.4s ease-in-out infinite; }
.car-art.fly .car-body { bottom: 3px; }
@keyframes v-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.v-flame { transform-box: fill-box; transform-origin: right center; animation: v-flick .18s ease-in-out infinite alternate; }
@keyframes v-flick { from { transform: scaleX(.75); opacity: .85; } to { transform: scaleX(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .car-art.fly, .v-flame { animation: none; } }
.rally-me b small { font-size: .9rem; color: var(--ink-2); font-family: var(--font-body, inherit); }
.rally-done { background: var(--leaf-soft); }
.garage-preview { display: grid; place-items: center; padding: 22px 0 10px; border-radius: 12px; background: var(--road); background-image: linear-gradient(90deg, var(--road-line) 0 50%, transparent 50% 100%); background-size: 24px 2px; background-repeat: repeat-x; background-position: 0 calc(100% - 9px); }
.garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.garage-item { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); cursor: pointer; font: inherit; }
.garage-item .garage-art { min-height: 40px; display: grid; place-items: end center; }
.garage-item .nm { font-size: .8rem; font-weight: 700; }
.garage-item.on { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf); }
.garage-item.locked { cursor: not-allowed; }
.garage-item.locked .garage-art { filter: grayscale(1) brightness(.85); opacity: .45; }
.garage-item .lock { position: absolute; top: 4px; right: 6px; font-size: .66rem; font-weight: 700; color: var(--ink-2); background: var(--paper, var(--bg)); border-radius: 999px; padding: 0 6px; }
.paint-row { display: flex; flex-wrap: wrap; gap: 8px; }
.paint { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: var(--pc); cursor: pointer; display: grid; place-items: center; color: #fff; font-style: normal; position: relative; }
.paint i { font-style: normal; font-weight: 700; font-size: .78rem; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.paint .pl svg { width: 14px; height: 14px; }
.paint.on { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--leaf); }
.paint.locked { opacity: .45; cursor: not-allowed; }
.rally-win .win-road { width: 100%; display: grid; place-items: center; padding: 26px 0 12px; border-radius: 12px; background: var(--road); background-image: linear-gradient(90deg, var(--road-line) 0 50%, transparent 50% 100%); background-size: 24px 2px; background-repeat: repeat-x; background-position: 0 calc(100% - 9px); }
.rally-win .win-road .car-art { animation: v-arrive 1.2s cubic-bezier(.2, .8, .2, 1); }
@keyframes v-arrive { from { transform: translateX(-140px); opacity: 0; } to { transform: none; opacity: 1; } }
.win-points { display: grid; justify-items: center; padding: 10px 22px; border-radius: 14px; background: linear-gradient(135deg, #7fd1b9, #8fb8ff, #c9a7ff, #ffc98f); color: #10251a; }
.win-points b { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
.win-points span { font-size: .75rem; font-weight: 700; }
.rally-me b span { font-size: inherit; color: inherit; }
.garage-item:focus, .garage-item:focus-visible { outline: none; box-shadow: none; }
.garage-item:focus-visible:not(.on) { outline: 2px dashed var(--ink-3); outline-offset: 2px; }
.garage-item.on:focus, .garage-item.on:focus-visible { box-shadow: 0 0 0 2px var(--leaf); }
/* Avatar sitzt im Fahrzeug: hinter der Karosserie, sichtbar durch die Scheiben */
.car-art .car-driver { z-index: 0; }
.car-art .car-body { z-index: 1; }

/* ── Trophäenraum ── */
:root { --room-wall: #efe4d3; --room-wain: #e4d5bf; --room-floor: #c9a27a; --room-plank: rgba(80, 50, 20, .18); --room-wood: #8a6440; --room-rug: #b9d8c4; --room-ghost: rgba(60, 40, 20, .13); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --room-wall: #2c2823; --room-wain: #35302a; --room-floor: #4a3a2c; --room-plank: rgba(0, 0, 0, .3); --room-wood: #7a5a3c; --room-rug: #2f4a3a; --room-ghost: rgba(255, 255, 255, .09); } }
:root[data-theme="dark"] { --room-wall: #2c2823; --room-wain: #35302a; --room-floor: #4a3a2c; --room-plank: rgba(0, 0, 0, .3); --room-wood: #7a5a3c; --room-rug: #2f4a3a; --room-ghost: rgba(255, 255, 255, .09); }
.room { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); max-width: 820px; width: 100%; justify-self: center; }
.room-svg { display: block; width: 100%; height: auto; }
.room-svg .r-wall { fill: var(--room-wall); } .room-svg .r-wain { fill: var(--room-wain); } .room-svg .r-floor { fill: var(--room-floor); }
.room-svg .r-line { stroke: var(--room-wood); stroke-width: 1.5; } .room-svg .r-plank { stroke: var(--room-plank); stroke-width: 1; fill: none; }
.room-svg .r-wood { fill: var(--room-wood); } .room-svg .r-frame { stroke: var(--room-wood); stroke-width: 4; } .room-svg .r-frame.thin { stroke-width: 2; }
.room-svg .r-rug { fill: var(--room-rug); }
.room-svg .trophy { cursor: pointer; outline: none; }
.room-svg .trophy .hit { fill: transparent; }
.room-svg .trophy.sel .hit, .room-svg .trophy:focus-visible .hit { fill: rgba(255, 255, 255, .35); stroke: var(--leaf); stroke-width: 1.5; }
.room-svg .trophy.earned:hover { filter: brightness(1.08) drop-shadow(0 0 3px rgba(255, 220, 120, .8)); }
.room-svg .ghost *:not(.hit), svg.ghost * { fill: var(--room-ghost) !important; stroke: none !important; }
.room-flame { transform-box: fill-box; transform-origin: center bottom; animation: flicker 1.6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .room-flame { animation: none; } }
.room-cap { min-height: 1.5em; font-size: .88rem; }
.trophy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 8px; }
.trophy-row { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); }
.trophy-row.on { background: var(--leaf-soft); border-color: transparent; }
.av-profile .hint { text-align: center; max-width: 30ch; }
/* Garage hinter dem Fenster */
:root { --g-wall: #b9c0c4; --g-slab: #7d868c; --g-line: #e8c54a; --g-empty: rgba(60, 70, 80, .35); --g-glass: rgba(255, 255, 255, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-wall: #3d4448; --g-slab: #262b2e; --g-empty: rgba(220, 230, 240, .3); --g-glass: rgba(255, 255, 255, .03); } }
:root[data-theme="dark"] { --g-wall: #3d4448; --g-slab: #262b2e; --g-empty: rgba(220, 230, 240, .3); --g-glass: rgba(255, 255, 255, .03); }
.room-svg .g-wall { fill: var(--g-wall); } .room-svg .g-slab { fill: var(--g-slab); }
.room-svg .g-line { stroke: var(--g-line); stroke-width: 1.4; }
.room-svg .g-empty { fill: none; stroke: var(--g-empty); stroke-width: 1; stroke-dasharray: 3 2; }
.room-svg .g-pts { font: 700 6.5px system-ui, sans-serif; fill: var(--g-empty); text-anchor: middle; }
.room-svg .g-glass { fill: var(--g-glass); pointer-events: none; }
.room-svg .g-lamp { fill: #6b7378; } .room-svg .g-lamp.on { fill: #ffe9a8; }
.room-svg .g-spot { fill: rgba(255, 236, 170, .18); }
.room-svg .g-sign { fill: var(--room-wood); } .room-svg .g-sign-t { font: 700 7px system-ui, sans-serif; fill: #fff6e6; text-anchor: middle; letter-spacing: 1.5px; }
.room-svg .wincar { cursor: pointer; outline: none; }
.room-svg .wincar .hit { fill: transparent; }
.room-svg .wincar.sel .hit, .room-svg .wincar:focus-visible .hit { fill: rgba(255, 255, 255, .22); stroke: var(--leaf); stroke-width: 1.2; }
.room-svg .wincar.open:hover { filter: brightness(1.1); }
/* Perspektive: Seitenwände, Decke, Laibung, Hallenboden */
:root { --room-side: #e6d9c5; --room-ceil: #f6efe3; --room-wain-side: #d9c8ae; --room-reveal: #d8c9b2; --g-floor: #a7adb0; --g-ceil: #8d9498; --g-side: #9ea6aa; --g-joint: rgba(0, 0, 0, .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --room-side: #26221e; --room-ceil: #322d28; --room-wain-side: #2e2924; --room-reveal: #3a342d; --g-floor: #33393c; --g-ceil: #23282b; --g-side: #2d3336; --g-joint: rgba(0, 0, 0, .3); } }
:root[data-theme="dark"] { --room-side: #26221e; --room-ceil: #322d28; --room-wain-side: #2e2924; --room-reveal: #3a342d; --g-floor: #33393c; --g-ceil: #23282b; --g-side: #2d3336; --g-joint: rgba(0, 0, 0, .3); }
.room-svg .r-side { fill: var(--room-side); } .room-svg .r-ceil { fill: var(--room-ceil); } .room-svg .r-wain-side { fill: var(--room-wain-side); }
.room-svg .r-reveal { fill: var(--room-reveal); } .room-svg .r-reveal-top { fill: var(--room-reveal); filter: brightness(.9); }
.room-svg .r-shelf { fill: var(--room-wood); filter: brightness(1.15); }
.room-svg .g-floor { fill: var(--g-floor); } .room-svg .g-ceil { fill: var(--g-ceil); } .room-svg .g-side { fill: var(--g-side); }
.room-svg .g-joint { stroke: var(--g-joint); stroke-width: .8; }
.room-svg .g-line { stroke: var(--g-line); stroke-width: 1.2; }
.room-svg .g-empty { fill: rgba(255, 255, 255, .04); }
.room-svg .g-lamp { fill: #fff3c4; }
.room-svg .c3d { stroke: rgba(0, 0, 0, .18); stroke-width: .4; stroke-linejoin: round; }

/* ── Wissensbaum: Gesamtansicht mit allen Fächern ── */
.tree-svg .t-ground { fill: var(--bark-soft); }
.tree-svg .t-bark { stroke: var(--bark); }
.tree-svg .t-trunk { fill: var(--bark); }
.tree-svg .t-trunk-t { fill: var(--paper); font-weight: 700; font-size: 13px; letter-spacing: .12em; }
.tree-svg .t-knot { fill: var(--sheet); stroke: var(--line); stroke-width: 2.5; }
.tree-svg .t-knot.k-open { stroke: var(--leaf); } .tree-svg .t-knot.k-learning, .tree-svg .t-knot.k-ready { fill: var(--leaf-soft); stroke: var(--leaf); }
.tree-svg .t-knot.k-bronze { fill: #c07a3e; stroke: #c07a3e; } .tree-svg .t-knot.k-silber { fill: #aeb8c4; stroke: #aeb8c4; } .tree-svg .t-knot.k-gold { fill: #e2b33a; stroke: #e2b33a; }
.t-leaf { fill: var(--sheet); stroke: color-mix(in srgb, var(--sc) 45%, var(--line)); stroke-width: 1; }
.t-leaf.started { fill: color-mix(in srgb, var(--sc) 28%, var(--sheet)); }
.t-leaf.lit { fill: var(--sc); stroke: var(--sc); }
.tree-svg .t-crown { cursor: pointer; }
.tree-svg .t-crown-core { fill: var(--sc); stroke: var(--sheet); stroke-width: 2; }
.tree-svg .t-crown.draft .t-crown-core { stroke-dasharray: 3 2; }
.tree-svg .t-crown:hover .t-crown-core, .tree-svg .t-crown:focus-visible .t-crown-core { filter: brightness(1.12); stroke: var(--ink); }
.tree-svg .on-color, .skilltree .on-color { stroke: #fff; }
.tree-svg .t-crown-n { fill: #fff; font-weight: 700; font-size: 8.5px; }
.tree-svg .t-crown-label { fill: var(--ink); font-weight: 700; font-size: 13px; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.tree-svg .t-pip { stroke: var(--sheet); stroke-width: 1.5; }
.tree-svg .t-vine-dot { fill: var(--sheet); stroke: var(--ink-3); stroke-width: 1.2; }
.tree-svg .t-vine.lit .t-vine-dot { fill: #f2d27a; stroke: #b8860b; }
.tree-svg .t-vine-n { fill: var(--ink); font-weight: 700; font-size: 10px; }
.tree-svg .t-field { fill: var(--ink-2); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }

/* ── Fach-Ansicht: Skill-Tree (immer dunkles Spielfeld) ── */
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; align-items: start; }
@media (max-width: 900px) { .st-layout { grid-template-columns: 1fr; } }
.st-scroller { background: #111715; border-radius: 14px; max-height: 76vh; overflow: auto; border: 1px solid var(--line); }
.st-info { position: sticky; top: 12px; }
.skilltree { display: block; margin: 0 auto; }
.skilltree .t-panel { fill: #111715; }
.skilltree .t-band { fill: rgba(255, 255, 255, .0); } .skilltree .t-band.alt { fill: rgba(255, 255, 255, .03); }
.skilltree .t-band-t { fill: rgba(255, 255, 255, .38); font: 700 11px system-ui, sans-serif; letter-spacing: .06em; }
.skilltree .t-lane-t { fill: rgba(255, 255, 255, .45); font: 600 10px system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.skilltree .t-edge { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.skilltree .t-edge.dim { stroke: rgba(255, 255, 255, .17); stroke-width: 1.6; }
.skilltree .t-edge.open { stroke: color-mix(in srgb, var(--sc) 70%, #fff); stroke-width: 2; opacity: .85; }
.skilltree .t-edge.lit { stroke: #e8c25a; stroke-width: 3; filter: url(#tglow); }
.skilltree .tnode { cursor: pointer; outline: none; }
.skilltree .t-node { fill: #1b2320; stroke: rgba(255, 255, 255, .25); stroke-width: 2; }
.skilltree .ticon { stroke: rgba(255, 255, 255, .38); }
.skilltree .tnode.open .t-node { stroke: #e9efe9; stroke-width: 2.4; }
.skilltree .tnode.open .ticon { stroke: #f2f6f2; }
.skilltree .tnode.learning .t-node, .skilltree .tnode.ready .t-node { fill: color-mix(in srgb, var(--sc) 30%, #1b2320); stroke: color-mix(in srgb, var(--sc) 75%, #fff); stroke-width: 3; }
.skilltree .tnode.learning .ticon, .skilltree .tnode.ready .ticon { stroke: #fff; }
.skilltree .tnode.m-bronze .t-node { fill: #c07a3e; stroke: #e7b07e; stroke-width: 2.6; filter: url(#tglow); }
.skilltree .tnode.m-silber .t-node { fill: #aeb8c4; stroke: #e6ecf2; stroke-width: 2.6; filter: url(#tglow); }
.skilltree .tnode.m-gold .t-node { fill: #e2b33a; stroke: #fff0b8; stroke-width: 2.6; filter: url(#tglow); }
.skilltree .tnode.m-bronze .ticon, .skilltree .tnode.m-silber .ticon, .skilltree .tnode.m-gold .ticon { stroke: #1d1a14; }
.skilltree .tnode.uni .t-node { stroke-dasharray: 3 3; }
.skilltree .tnode.inactive { opacity: .32; }
.skilltree .tnode:hover .t-node, .skilltree .tnode:focus-visible .t-node { stroke: #fff; stroke-width: 3; }
.skilltree .t-label { fill: rgba(255, 255, 255, .8); font: 600 10.5px system-ui, sans-serif; paint-order: stroke; stroke: #111715; stroke-width: 3px; stroke-linejoin: round; }
.skilltree .tnode.locked .t-label { fill: rgba(255, 255, 255, .45); }
.skilltree .t-xring { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.skilltree .t-xtag { fill: rgba(255, 255, 255, .72); font: 700 8.5px system-ui, sans-serif; letter-spacing: .04em; paint-order: stroke; stroke: #111715; stroke-width: 3px; }
.skilltree .t-extdot { stroke: #111715; stroke-width: 1.2; }
.skilltree .t-selring { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 3 3; }
.skilltree .t-root-c { fill: var(--sc); stroke: rgba(255, 255, 255, .7); stroke-width: 2.5; filter: url(#tglow); }
.skilltree .t-root-arc { fill: none; stroke: #e8c25a; stroke-width: 4; stroke-linecap: round; }
.skilltree .t-root-track { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 4; }
.skilltree .t-root-t { fill: rgba(255, 255, 255, .9); font: 700 12px system-ui, sans-serif; }
.skilltree.mini { display: inline-block; margin: 0; background: #111715; border-radius: 50%; }
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; color: var(--ink-2); }
.st-legend span { display: inline-flex; align-items: center; gap: 5px; }
.st-legend .lg { width: 14px; height: 14px; border-radius: 50%; display: inline-block; background: #1b2320; border: 2px solid rgba(0, 0, 0, .25); }
.st-legend .lg.open { border-color: #9aa; background: #1b2320; box-shadow: inset 0 0 0 2px #e9efe9; }
.st-legend .lg.learning { background: color-mix(in srgb, var(--sc) 40%, #1b2320); border-color: var(--sc); }
.st-legend .lg.locked { opacity: .5; }
.st-legend .lg.m-bronze { background: #c07a3e; } .st-legend .lg.m-silber { background: #aeb8c4; } .st-legend .lg.m-gold { background: #e2b33a; }
.st-legend .lg.cross { background: #1b2320; border: 3px solid transparent; background-image: linear-gradient(#1b2320, #1b2320), conic-gradient(var(--sc) 0 50%, #2f5fb3 50% 100%); background-origin: border-box; background-clip: padding-box, border-box; }
.st-legend .lg.line { width: 18px; height: 3px; border-radius: 2px; border: 0; background: #e8c25a; box-shadow: 0 0 4px #e8c25a; }
.skilltree .t-edge.stub { stroke: rgba(255, 255, 255, .28); stroke-width: 1.6; stroke-dasharray: 2 3; }
.skilltree .t-stubdot { fill: rgba(255, 255, 255, .35); }

/* ── Zeit zu schillern: Lernkalender ── */
.schillern .cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.schillern .cal-nav b { font-family: var(--font-display); font-size: 1.05rem; }
.schillern .cal-nav .btn { min-width: 34px; font-size: 1.1rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-wd { text-align: center; font-size: .72rem; font-weight: 700; color: var(--ink-2); padding-bottom: 2px; }
.cal-wd.we { color: var(--ink-3); }
.cal-d { position: relative; aspect-ratio: 1 / 1; max-height: 64px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); display: grid; place-items: center; }
.cal-d b { font-size: .8rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cal-d.pad { border: 0; background: none; }
.cal-d.we:not(.l1):not(.l2):not(.l3):not(.shine) { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--line) 45%, transparent) 5px 6px); }
.cal-d.l1 { background: color-mix(in srgb, var(--leaf) 22%, var(--sheet)); border-color: transparent; }
.cal-d.l2 { background: color-mix(in srgb, var(--leaf) 45%, var(--sheet)); border-color: transparent; }
.cal-d.l3 { background: color-mix(in srgb, var(--leaf) 70%, var(--sheet)); border-color: transparent; }
.cal-d.l2 b, .cal-d.l3 b { color: var(--ink); }
.cal-d.shine, .cal-key.shine, .cal-today.done .cal-bar i {
  background: linear-gradient(115deg, #7fd1b9, #8fb8ff, #c9a7ff, #ffc98f, #f7a8c4, #7fd1b9);
  background-size: 500% 100%; animation: schillern 7s linear infinite; animation-delay: calc(var(--i, 0) * -.35s);
}
.cal-d.shine { border-color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 2px 10px rgba(143, 184, 255, .45); }
.cal-d.shine b { color: #17241d; font-weight: 800; }
.cal-d.shine::after { content: ''; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: .9; }
.cal-d.today { outline: 2.5px solid var(--ink); outline-offset: 1px; }
.cal-d.future { opacity: .45; }
.cal-today { display: grid; gap: 5px; }
.cal-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.cal-bar i { display: block; height: 100%; border-radius: inherit; background: var(--leaf); transition: width .6s ease; }
.cal-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.cal-key.l1 { background: color-mix(in srgb, var(--leaf) 22%, var(--sheet)); } .cal-key.l2 { background: color-mix(in srgb, var(--leaf) 45%, var(--sheet)); } .cal-key.l3 { background: color-mix(in srgb, var(--leaf) 70%, var(--sheet)); }
.schillern.compact { display: grid; gap: 8px; }
.schillern.compact .cal-grid { gap: 3px; }
.schillern.compact .cal-d { border-radius: 6px; max-height: 34px; }
.schillern.compact .cal-d b { font-size: .62rem; }
.schillern.compact .cal-d.shine::after { display: none; }
@media (prefers-reduced-motion: reduce) { .cal-d.shine, .cal-key.shine, .cal-today.done .cal-bar i { animation: none; } }
.cal-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cal-month { display: grid; gap: 8px; align-content: start; }
.cal-mt { font-family: var(--font-display); font-size: 1rem; text-align: center; }
.cal-d { max-height: none; }
@media (max-width: 640px) { .cal-months { grid-template-columns: 1fr; } .cal-month.prev { display: none; } }
.schillern.compact .cal-months { gap: 14px; }
.schillern.compact .cal-mt { font-size: .85rem; }

/* ── Aufgaben, Abgaben, Mitteilungen ── */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar .bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink); margin-left: auto; }
.topbar .bell svg { width: 22px; height: 22px; }
.topbar .bell .badge-dot { position: absolute; top: 2px; right: 0; }
.ticon2 { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--leaf-soft); color: var(--leaf); flex: none; }
.ticon2 svg { width: 20px; height: 20px; }
.task-row { align-items: flex-start; }
.chip.due svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.chip.bad { background: var(--bad-soft); color: var(--ink); border-color: transparent; }
.chip.strong { font-weight: 700; }
.chip.st-ueberarbeiten { background: var(--warn-soft); border-color: transparent; }
.sub-bar { display: flex; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; margin-top: 6px; max-width: 320px; }
.sub-bar i { display: block; height: 100%; }
.sub-bar .ab { background: var(--info); } .sub-bar .an { background: var(--leaf); } .sub-bar .ue { background: var(--warn); }
.files { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); max-width: 100%; }
.fchip .thumb { border: 0; padding: 0; background: none; cursor: zoom-in; width: 44px; height: 44px; border-radius: 7px; overflow: hidden; flex: none; }
.fchip .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--line); }
.fchip .ficon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink-2); }
.fchip .ficon svg { width: 20px; height: 20px; }
.fchip .fname { border: 0; background: none; color: var(--leaf); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; padding: 0; }
.fchip .frm { border: 0; background: none; cursor: pointer; color: var(--ink-3); width: 26px; height: 26px; display: grid; place-items: center; }
.fchip .frm svg { width: 16px; height: 16px; }
.img-full { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: 10px; justify-self: center; }
.sub-text { white-space: pre-wrap; background: var(--paper, var(--bg)); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; max-height: 40vh; overflow: auto; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; max-height: 220px; overflow: auto; padding: 6px 2px; }
.pick-list svg { width: 20px; height: 20px; vertical-align: -5px; }
.note.unread { background: color-mix(in srgb, var(--leaf-soft) 60%, transparent); }
.note.unread .t::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); margin-right: 6px; vertical-align: 1px; }
.note-body { white-space: pre-wrap; color: var(--ink-2); }
.notice.ok { background: var(--leaf-soft); }
fieldset.field { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
fieldset.field legend { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
#push-box h2 svg, #export-box h2 svg { width: 20px; height: 20px; vertical-align: -3px; }

/* ───────── Baum wächst mit dem Schuljahr ───────── */
.tree-svg .t-ghost { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .45; }
.tree-svg .t-ghost-t { fill: var(--ink-3); font-size: 12px; font-style: italic; opacity: .8; }
.tree-svg .t-root-line { stroke: var(--bark); opacity: .65; }
.tree-svg .t-fruit circle { fill: #e2b33a; stroke: #8a5f0c; stroke-width: 1.2; }
.tree-svg .t-fruit-cap { fill: none; stroke: #6b4a1c; stroke-width: 2.2; stroke-linecap: round; }
.t-fruit circle { fill: #e2b33a; stroke: #8a5f0c; stroke-width: 1.2; }
.timeline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--sheet) 85%, transparent); }
.tl-label { font-weight: 700; font-size: .85rem; }
.tl-track { display: flex; align-items: flex-start; position: relative; flex: 1 1 320px; min-width: 260px; }
.tl-track::before { content: ''; position: absolute; left: 14px; right: 14px; top: 9px; height: 3px; border-radius: 2px; background: var(--line); }
.tl-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0 2px; cursor: pointer; position: relative; color: var(--ink-2); font: inherit; font-size: .78rem; }
.tl-dot i { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--ink-3); transition: transform .15s; }
.tl-dot.past i { background: var(--leaf); border-color: var(--leaf); }
.tl-dot.cur i { width: 18px; height: 18px; margin-top: 1px; background: var(--leaf); border: 3px solid var(--sheet); box-shadow: 0 0 0 2px var(--leaf), 0 0 10px var(--leaf); }
.tl-dot.cur span { font-weight: 800; color: var(--ink); }
.tl-dot.shown:not(.cur) i { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.tl-dot:hover i { transform: scale(1.2); }
.tl-dot:focus-visible { outline: 2px solid var(--focus, var(--leaf)); outline-offset: 2px; border-radius: 6px; }
.tl-info { flex-basis: 100%; color: var(--ink-2); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--leaf); text-decoration: underline; cursor: pointer; font: inherit; }
.breadth { display: grid; gap: 8px; margin-bottom: 10px; border-left: 4px solid var(--gold); }
.breadth.ok { border-left-color: var(--leaf); }
.breadth p { margin: 0; }
.br-list { display: grid; gap: 4px; }
.br-row { display: grid; grid-template-columns: 6em 1fr 2.6em; align-items: center; gap: 8px; }
.br-bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.br-bar i { display: block; height: 100%; background: var(--sc); border-radius: 4px; }
.br-row:not(.ok) .tiny { color: var(--warn, #b5651d); font-weight: 700; }
.ahead-n { color: var(--gold); font-weight: 800; }
.star { color: var(--gold); }
.depth-note { margin: 0; padding: 7px 9px; border-radius: 8px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.depth-note.ok { background: var(--leaf-soft); border-color: color-mix(in srgb, var(--leaf) 45%, transparent); }
.depth-note svg { width: 14px; height: 14px; vertical-align: -2px; }
.skilltree .t-band.cur { fill: rgba(232, 194, 90, .045); stroke: rgba(232, 194, 90, .3); stroke-width: 1; stroke-dasharray: 4 4; }
.skilltree .t-band.ahead { fill: rgba(120, 140, 255, .045); }
.skilltree .t-band-t.cur { fill: #f0cf73; }
.skilltree .t-ahead-ring { fill: none; stroke: rgba(240, 207, 115, .55); stroke-width: 1.4; stroke-dasharray: 2 4; }
.skilltree .tnode.ahead.locked .t-node, .skilltree .tnode.ahead.open .t-node { fill-opacity: .8; }
.skilltree .t-gate circle { fill: #3a3115; stroke: #e6b83a; stroke-width: 1.4; }
.skilltree .t-gate rect { fill: #e6b83a; } .skilltree .t-gate path { fill: none; stroke: #e6b83a; stroke-width: 1.5; }
.st-legend .lg.ahead { background: #1b2320; border: 2px dashed #d4a72c; }
.st-legend .lg.gated { background: #3a3115; border: 2px solid #e6b83a; }
@media (max-width: 640px) { .tl-dot span { font-size: .7rem; } .timeline { padding: 8px 10px; } }

.tree-svg .t-canopy-g { opacity: .2; }
.tree-svg .t-canopy { fill: color-mix(in srgb, var(--sc) 55%, var(--leaf)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tree-svg .t-canopy-g { opacity: .16; } }
:root[data-theme="dark"] .tree-svg .t-canopy-g { opacity: .16; }