/* smuain – app-spezifische Styles. Baut auf glaze.css auf und ändert dessen Tokens nicht. */

.grow { flex: 1; min-width: 0; }
.grow b, .grow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow small.wrap { white-space: normal; overflow: visible; }
pre.code { font: var(--fs-sm)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; margin: var(--sp-5) 0 0; padding: var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 5%, transparent); }
button.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent-t); cursor: pointer; }
.sub-title { font-size: var(--fs-sm); font-weight: 620; color: var(--muted); margin: var(--sp-7) 0 var(--sp-3); }
.dlg.wide { width: min(720px, 94vw); }
.menu-title { font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: var(--sp-2) var(--sp-4) 2px; }
.card-foot { margin-top: var(--sp-6); }
.count { font-size: var(--fs-sm); }
main:focus, main:focus-visible, #main:focus-visible { outline: none; }
main .icon-btn:hover, main .icon-btn:hover:active { transform: none; }

/* ---------- Einrichtung und Verwaltung (Assistent kommt aus glaze-wizard.js) ---------- */
.reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.reqs li { display: flex; align-items: flex-start; gap: var(--sp-4); }
.reqs .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-t); }
.sum { display: grid; gap: var(--sp-3); }
.sum .kv { grid-template-columns: 150px minmax(0, 1fr); }
.sum .kv .v code { user-select: all; overflow-wrap: anywhere; }
.dns { display: grid; gap: var(--sp-3); }
ol.steps { margin: 0; padding-left: var(--sp-8); display: grid; gap: var(--sp-6); }
ol.steps li { padding-left: var(--sp-1); }
ol.steps li > .copy { margin-top: var(--sp-3); }
ol.steps li::marker { color: var(--accent-t); font-weight: 700; }
.shell:has(.auth-body) { padding: 0; max-width: none; } /* glaze-ok: .auth-body steckt in #page */

/* ---------- Zwei-Faktor ---------- */
.tf-scan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
@media (max-width: 620px) { .tf-scan { grid-template-columns: 1fr; justify-items: center; } .tf-steps { width: 100%; } }


/* ---------- Kopfzeile: Zähler an „Meine Aufgaben“ ---------- */
.nav-count { position: relative; }
.dot-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 700 10px/16px var(--font-ui); text-align: center; pointer-events: none; }

/* ---------- Übersicht ---------- */
.home-search { margin: var(--gap) 0; }
.home-search .search { flex: 1; max-width: 560px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: 1fr; } }
.home-side { position: sticky; top: var(--sp-7); }
.list-head { align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-7) 0 var(--sp-5); }
.list-head .sec-title { margin: 0; }
.board-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.board-grid.recent { margin-bottom: var(--sp-9); }
.board-tile { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; text-decoration: none; }
.bt-cover { aspect-ratio: 16 / 9; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 7%, transparent); border-bottom: 1px solid var(--line); overflow: hidden; }
.bt-cover img { width: 100%; height: 100%; object-fit: cover; }
.bt-body { padding: var(--sp-6) var(--sp-7) var(--sp-7); display: grid; gap: var(--sp-2); min-width: 0; }
.bt-title { display: flex; gap: var(--sp-2); align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-title .fav { width: 14px; height: 14px; color: var(--crit); flex: none; }
.bt-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.bt-more { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .15s; }
.board-tile:hover .bt-more, .board-tile:focus-within .bt-more { opacity: 1; }
@media (hover: none) { .bt-more { opacity: 1; } }
.board-list { padding: var(--sp-3); }
.task-group + .task-group { margin-top: var(--sp-6); }
.task-group h3 { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.pc-pick { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0; }
.pc-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg2); background: var(--pc); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; }
.pc-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--pc); }
.icon-pick { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pick-list { max-height: 50vh; overflow: auto; display: grid; gap: 2px; }
.pick-list .li { width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit; }
.share-add { flex-wrap: wrap; gap: var(--sp-3); } .share-add select { width: auto; flex: 0 1 170px; } .share-add select:first-child { flex: 1 1 240px; }

/* ---------- Board-Seite (glaze .shell.full) ---------- */
body:has(.shell.full) .g-bg { display: none; }   /* bewegter Hintergrund ist in Boards immer aus (Konzept 8.7) */
.board-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.board-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg2) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-height: 52px; position: relative; z-index: 3; }
.board-bar .crumbs { margin: 0; flex-wrap: nowrap; min-width: 0; overflow: hidden; white-space: nowrap; }
.crumb-cur { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 650; color: var(--text) !important; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.crumb-cur .ic { width: 16px; height: 16px; color: var(--accent-t); flex: none; }
.cv-tabs { margin: 0; min-width: 0; flex: 0 1 auto; }
.cv-tabs button { padding: 6px 12px; }
.tab-add { border: 1px dashed var(--line-strong) !important; color: var(--muted); }
.board-bar .spacer { flex: 1; }
.cp-toggle { position: relative; }
.share-btn { flex: none; }
.brand-mini { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; } .brand-mini .ic { width: 20px; height: 20px; color: var(--accent-t); }
@media (max-width: 760px) {
  .board-bar { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5); }
  .board-bar .crumbs a, .board-bar .crumbs .sep { display: none; }
  .cv-tabs { order: 10; flex-basis: 100%; }
  .share-btn span { display: none; }
}
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; }

/* Leinwand */
.vp { position: relative; flex: 1; overflow: hidden; touch-action: none; outline: none; cursor: default; user-select: none; -webkit-user-select: none; --z: 1; }
.vp.grid { background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 45%, transparent) 1px, transparent 1.2px); }
.vp[data-tool="hand"], .vp.panning { cursor: grab; } .vp.panning:active { cursor: grabbing; }
.vp[data-tool="note"], .vp[data-tool="text"], .vp[data-tool="color"], .vp[data-tool="table"], .vp[data-tool="todo"], .vp[data-tool="link"], .vp[data-tool="line"] { cursor: crosshair; }
.vp[data-tool="comment"] { cursor: cell; }
.vp.dragging .el { transition: none; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.lines g { pointer-events: visiblePainted; color: var(--muted); cursor: pointer; }
.lines g[class*="c-s"] { color: var(--lc); }
.lines .hit { fill: none; stroke: transparent; stroke-width: calc(14px / var(--z)); }
.lines .stroke { fill: none; stroke: currentColor; }
.lines .stroke.tmp { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; pointer-events: none; }
.lines .head { fill: currentColor; }
.lines .label { fill: var(--text); font: 600 13px var(--font-ui); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.lines g.sel .stroke { stroke: var(--accent); } .lines g.sel .head { fill: var(--accent); }
.c-s1 { --lc: var(--s1); } .c-s2 { --lc: var(--s2); } .c-s3 { --lc: var(--s3); } .c-s4 { --lc: var(--s4); } .c-s5 { --lc: var(--s5); } .c-s6 { --lc: var(--s6); }

/* Karten (smuain-eigen, nur Tokens; Konzept 8.4) */
.el { position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: 14px; background: linear-gradient(var(--card-hi), var(--card-hi)), var(--bg2); border: 1px solid var(--line-strong); color: var(--text);
  box-shadow: var(--shadow-xs), 0 6px 18px -10px var(--shadow-c); overflow: hidden; font-size: 15px; line-height: 1.5; contain: layout style; }
.el[class*="c-s"] { background: color-mix(in srgb, var(--lc) 15%, var(--bg2)); border-color: color-mix(in srgb, var(--lc) 30%, var(--line)); }
.el .el-body { width: 100%; height: 100%; overflow: hidden; }
.el.sel { box-shadow: var(--shadow), 0 0 0 calc(1px / var(--z)) var(--accent); }
.el.flash { animation: el-flash 1.5s ease-out; }
@keyframes el-flash { 0%, 40% { box-shadow: 0 0 0 calc(6px / var(--z)) color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: var(--shadow-xs); } }
.el.editing { overflow: visible; z-index: 100000 !important; }
.el .ph { color: var(--muted); font-style: italic; margin: 0; }
.t-note .el-body { padding: 12px 14px; overflow: auto; }
.t-text { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.t-text.sel { outline: calc(1px / var(--z)) dashed var(--accent); }
.t-text .el-body { padding: 2px 4px; }
.t-text[data-size="s"] { font-size: 13px; } .t-text[data-size="l"] { font-size: 22px; line-height: 1.3; } .t-text[data-size="xl"] { font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md h1 { font-size: 1.35em; margin: .2em 0 .35em; line-height: 1.2; } .md h2 { font-size: 1.12em; margin: .2em 0 .3em; }
.md p { margin: 0 0 .35em; } .md ul, .md ol { margin: .2em 0 .4em; padding-left: 1.3em; } .md blockquote { margin: .3em 0; padding-left: .7em; border-left: 3px solid var(--line-strong); color: var(--muted); }
.md pre { font: .85em/1.45 var(--font-mono); background: color-mix(in srgb, var(--text) 6%, transparent); padding: 6px 8px; border-radius: 8px; white-space: pre-wrap; margin: .3em 0; }
.md code { font: .88em var(--font-mono); background: color-mix(in srgb, var(--text) 7%, transparent); padding: 1px 4px; border-radius: 5px; }
.md a { color: var(--accent-t); } .md .md-gap { height: .5em; }
.mention { color: var(--pc, var(--accent-t)); font-weight: 650; }
.el-edit { width: 100%; min-height: 100%; border: 0; outline: 0; resize: none; background: transparent; color: inherit; font: inherit; line-height: inherit; padding: 0; margin: 0; box-shadow: none; display: block; overflow: hidden; }
.t-note.editing .el-body, .t-text.editing .el-body { overflow: visible; }
.edit-dlg textarea { min-height: 40vh; font-size: 16px; }

.t-image { background: var(--bg2); }
.t-image .el-body { display: flex; flex-direction: column; }
.img-box { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.img-box img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.img-missing { height: 100%; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); }
.caption { flex: none; height: 28px; padding: 4px 10px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.t-color .el-body { display: flex; flex-direction: column; }
.swatch { flex: 1; min-height: 0; padding: 10px 12px; display: flex; align-items: flex-start; }
.swatch.big { height: 120px; border-radius: var(--r-md); margin-bottom: var(--sp-6); flex: none; border: 1px solid var(--line); }
.sw-name { font-weight: 650; font-size: 13px; }
.hex { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--text); font: 650 14px var(--font-mono); cursor: copy; text-align: left; }
.hex .ic { width: 14px; height: 14px; color: var(--muted); }

.t-table .el-body { overflow: auto; }
.tbl-wrap { padding: 4px; }
.tbl { border-collapse: collapse; table-layout: fixed; width: max-content; min-width: 100%; font-size: 14px; }
.tbl td, .tbl th { border-bottom: 1px solid var(--line-strong); padding: 6px 10px; text-align: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; height: 36px; box-sizing: border-box; }
.tbl td + td, .tbl th + th, .tbl th + td, .tbl td + th { border-left: 1px solid var(--line); }
.tbl th { font-weight: 650; background: color-mix(in srgb, var(--text) 4%, transparent); }
.tbl tfoot td { font-weight: 650; border-bottom: 0; border-top: 2px solid var(--line-strong); }
.cell-in { width: 100%; border: 0; padding: 0; margin: 0; background: transparent; font: inherit; color: inherit; box-shadow: none; min-height: 0; height: auto; outline: 2px solid var(--accent); border-radius: 2px; }

.t-todo .el-body { padding: 12px 14px; overflow: auto; }
.todo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.todo-title { font-size: 15px; }
.t-todo .pbar { margin-bottom: 8px; }
.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.todo-list li { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.todo-list li.ind { padding-left: 22px; }
.todo-list li.done .todo-text { color: var(--muted); text-decoration: line-through; }
.todo-list input[type="checkbox"] { width: 17px; height: 17px; flex: none; margin: 0; cursor: pointer; }
.todo-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.due { font-size: 12px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.due.late { color: var(--warn); font-weight: 650; } .due .ic { width: 12px; height: 12px; }
.avatar.xs { width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 2px var(--pc); }   /* glaze-ok: Mini-Avatar in To-do-Zeilen */
.todo-edit { display: grid; gap: 6px; }
.todo-title-in, .todo-in { border: 0; background: transparent; box-shadow: none; padding: 2px 4px; min-height: 0; font: inherit; color: inherit; flex: 1; }
.todo-title-in { font-weight: 650; }
.todo-list.edit li { gap: 4px; }

.t-link .el-body { display: flex; }
.link-card { display: flex; flex-direction: column; width: 100%; }
.link-card.denied { color: var(--muted); }
.lk-cover { flex: 1; min-height: 0; overflow: hidden; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lk-cover.icon { display: grid; place-items: center; color: var(--accent-t); } .lk-cover.icon .ic { width: 40px; height: 40px; }
.lk-body { padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center; }
.lk-body b, .lk-body small { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-body small { color: var(--muted); }
.lk-open { grid-column: 2; grid-row: 1 / span 2; }
.lk-empty { margin: auto; display: grid; justify-items: center; gap: 6px; color: var(--muted); padding: 12px; text-align: center; }

/* Detailstufen beim Herauszoomen (Konzept 4.3) */
.world[data-lod="low"] .md, .world[data-lod="low"] .todo-list, .world[data-lod="low"] .tbl td, .world[data-lod="low"] .tbl th { color: transparent; }
.world[data-lod="low"] .md *, .world[data-lod="low"] .tbl * { color: transparent; }
.world[data-lod="low"] .md p, .world[data-lod="low"] .md li, .world[data-lod="low"] .md h1, .world[data-lod="low"] .md h2 { background: color-mix(in srgb, var(--muted) 25%, transparent); border-radius: 4px; }
.world[data-lod="min"] .el { box-shadow: none; }
.lod-min { width: 100%; height: 100%; }

/* Bildschirm-Ebene: Auswahl, Griffe, Zeiger, Nadeln */
.ov { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sel-box, .sel-group { position: absolute; border: 1.5px solid var(--accent); border-radius: 4px; }
.sel-box.locked { border-style: dashed; }
.sel-group { border-style: dashed; }
.lock-ic { position: absolute; top: -22px; left: 0; color: var(--muted); } .lock-ic .ic { width: 14px; height: 14px; }
.sel-other { position: absolute; border: 2px solid var(--pc); border-radius: 4px; }
.sel-other .who, .lock-tag { position: absolute; top: -20px; left: -2px; font: 650 11px var(--font-ui); background: var(--pc); color: white; padding: 1px 6px; border-radius: 6px 6px 6px 0; white-space: nowrap; }
.lock-tag { display: inline-flex; gap: 4px; align-items: center; top: auto; } .lock-tag .ic { width: 11px; height: 11px; }
.handles { position: absolute; }
.rh { position: absolute; width: 10px; height: 10px; background: var(--bg2); border: 1.5px solid var(--accent); border-radius: 3px; pointer-events: auto; transform: translate(-50%, -50%); touch-action: none; }
.rh[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; } .rh[data-h="n"] { left: 50%; top: 0; cursor: ns-resize; } .rh[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.rh[data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; } .rh[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; } .rh[data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.rh[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; } .rh[data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }
.ch { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg2); pointer-events: auto; cursor: crosshair; transform: translate(-50%, -50%); opacity: .0; transition: opacity .15s; }
.handles:hover .ch, .ch:hover { opacity: 1; }
@media (hover: none) { .ch { opacity: .85; } }
.ch[data-side="t"] { left: 50%; top: -18px; } .ch[data-side="r"] { left: calc(100% + 18px); top: 50%; } .ch[data-side="b"] { left: 50%; top: calc(100% + 18px); } .ch[data-side="l"] { left: -18px; top: 50%; }
.end-h { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--accent); transform: translate(-50%, -50%); pointer-events: auto; cursor: move; }
.guide { position: absolute; background: var(--s4); }
.guide.v { top: 0; bottom: 0; width: 1px; } .guide.h { left: 0; right: 0; height: 1px; }
.marquee { position: absolute; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ghost { position: absolute; border: 2px dashed var(--accent); border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--muted); font-size: var(--fs-sm); }
.drop-mark { position: absolute; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transform: translate(-50%, -50%); box-shadow: var(--shadow); }
.pin { position: absolute; display: inline-flex; align-items: center; gap: 2px; height: 28px; min-width: 28px; padding: 0 6px; border-radius: 14px 14px 14px 3px; border: 2px solid var(--bg2);
  background: var(--accent); color: var(--on-accent); pointer-events: auto; cursor: pointer; transform: translate(-4px, -100%); box-shadow: var(--shadow); font: 700 12px var(--font-ui); }
.pin.on-card { transform: translate(-60%, -60%); }
.pin.done { background: var(--muted); opacity: .7; }
.pin .ic { width: 14px; height: 14px; }
.cursor { position: absolute; color: var(--pc); pointer-events: none; transition: left .08s linear, top .08s linear; }
.cursor .ic { width: 18px; height: 18px; fill: var(--pc); stroke: white; stroke-width: 1.2; }
.cursor span { position: absolute; left: 14px; top: 16px; background: var(--pc); color: white; font: 650 11px var(--font-ui); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }

/* Werkzeugleiste, Zoom, Übersichtskarte (glaze 6.17) */
.stage > .toolrail { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; }
.stage > .toolrail.h { left: 50%; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
.stage > .zoombar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; }
.stage:has(.toolrail.h) > .zoombar { left: auto; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); transform: none; }
.minimap { position: absolute; right: 14px; bottom: 14px; width: 200px; height: 130px; z-index: 2; border-radius: var(--r-lg); border: 1px solid var(--line-strong); cursor: pointer;
  background: color-mix(in srgb, var(--bg2) 88%, transparent); box-shadow: var(--shadow); --mm-card: color-mix(in srgb, var(--muted) 55%, transparent); --mm-view: var(--accent); }
.stage.with-panel > .minimap { right: 354px; }

/* Kommentare */
.cpanel { width: 340px; flex: none; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 94%, transparent); display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); overflow: auto; z-index: 2; }
@media (max-width: 760px) { .cpanel { position: absolute; inset: 0; width: auto; } }
.cp-head { display: flex; align-items: center; justify-content: space-between; }
.cp-head h2 { font-size: var(--fs-lg); margin: 0; display: flex; align-items: center; gap: var(--sp-3); }
.cp-list { display: grid; gap: var(--sp-5); }
.cp-thread { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); display: grid; gap: var(--sp-4); background: var(--card); }
.cp-thread.on { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cp-thread.done { opacity: .75; }
.cp-where { align-items: center; font-size: var(--fs-sm); }
.cp-c { display: grid; gap: var(--sp-2); }
.cp-c .row { align-items: center; gap: var(--sp-3); }
.cp-c .avatar.sm { width: 24px; height: 24px; font-size: 10px; box-shadow: 0 0 0 2px var(--pc); }   /* glaze-ok: kleiner Avatar in Kommentaren */
.cp-compose { display: grid; gap: var(--sp-2); }
.cp-compose textarea { min-height: 60px; }
.cp-empty { text-align: center; padding: var(--sp-9) var(--sp-5); }

/* Bilder groß, Zuschneiden */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.92); display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0,0,0,.6); }
.lightbox img { max-width: 92vw; max-height: 84dvh; object-fit: contain; }
.lb-x, .lb-prev, .lb-next { position: absolute; }
.lb-x { top: 16px; right: 16px; } .lb-prev { left: 16px; top: 50%; } .lb-next { right: 16px; top: 50%; }
.lb-cap { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: color-mix(in srgb, white 90%, transparent); margin: 0; }
.crop-stage { position: relative; display: inline-block; max-width: 100%; touch-action: none; user-select: none; cursor: crosshair; }
.crop-stage img { display: block; max-width: 100%; max-height: 60vh; }
.crop-box { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0,0,0,.45); cursor: move; }

/* Öffentlicher Link */
.board-page.public { position: fixed; }

/* ---------- Versionen ---------- */
.vers { display: grid; gap: var(--sp-2); max-height: 60vh; overflow: auto; }