/* ===== Aufgabenboard – alle Farben/Maße kommen aus CSS-Variablen (siehe theme.js) ===== */
:root {
  --bg: #16181d; --sidebar: #1d2027; --surface: #22262e; --card: #2b3039; --text: #e6e8eb; --muted: #9aa3ae;
  --accent: #7c83ff; --accent-text: #0d0f14; --border: #343a45; --danger: #f87171; --success: #4ade80; --warning: #fbbf24;
  --surface-a: var(--surface); --card-a: var(--card); --sidebar-a: var(--sidebar); --blur: 0px;
  --font: system-ui, sans-serif; --font-head: var(--font); --fs: 14px; --radius: 10px; --col-w: 290px; --pad: 12px; --gap: 12px;
  --side-w: 250px; --shadow: 0 1px 2px rgba(0,0,0,.12); --app-bg: var(--bg);
  --r-sm: calc(var(--radius) * .6);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--app-bg); background-attachment: fixed; color: var(--text); font-family: var(--font); font-size: var(--fs); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.25; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.ic { flex-shrink: 0; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .92em; }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }
.row.end { justify-content: flex-end; }
.row.wrap { flex-wrap: wrap; }
.strike { text-decoration: line-through; opacity: .7; }
.invisible { visibility: hidden; }
.error { color: var(--danger); min-height: 1.2em; margin: 0; }
.boot { display: grid; place-items: center; height: 100vh; color: #888; font-family: system-ui; }
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ----- Buttons & Eingaben ----- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card-a); color: var(--text); white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: transparent; }
.btn.icon { padding: 6px; }
.btn.slim { padding: 4px 9px; font-size: .9em; }
.input { width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 60%, var(--card)); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.input.slim { padding: 5px 8px; width: auto; }
.input.big { font-size: 1.15em; border: none; box-shadow: none; background: transparent; padding: 14px 4px; }
textarea.input { resize: vertical; line-height: 1.5; }
select.input { cursor: pointer; }
kbd { font-family: inherit; font-size: .75em; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); }
input[type=color] { width: 36px; height: 32px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; background: transparent; cursor: pointer; }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.switch { appearance: none; width: 40px !important; height: 22px !important; border-radius: 22px; background: var(--border); position: relative; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.emoji-btn { font-size: 1.5em; background: none; border: none; padding: 2px 4px; border-radius: var(--r-sm); line-height: 1; }
button.emoji-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }

/* ----- Grundlayout ----- */
.app-frame { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; flex: 1; min-height: 0; transition: grid-template-columns .2s; }
.shell.side-collapsed { grid-template-columns: 56px 1fr; }
.sidebar { background: var(--sidebar-a); backdrop-filter: blur(var(--blur)); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.side-scrim, .mobile-menu, .mobile-menu-top { display: none; }

/* ----- Bereich-Tabs ----- */
.tabbar { display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 0; background: color-mix(in srgb, var(--sidebar) 80%, #000); border-bottom: 1px solid var(--border); min-height: 44px; flex-shrink: 0; }
.tabs { display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid transparent; border-bottom: none; border-radius: var(--r-sm) var(--r-sm) 0 0; background: transparent; color: var(--muted); white-space: nowrap; position: relative; top: 1px; transition: background .15s, color .15s; }
.tab:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.tab.active { background: var(--app-bg); background: var(--bg); color: var(--text); border-color: var(--border); font-weight: 600; }
.tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; background: var(--accent); border-radius: 2px; }
.tab-ico { font-size: 1.05em; }
.tab-ro { color: var(--muted); display: inline-flex; }
.tab-add { background: none; border: none; color: var(--muted); padding: 8px; border-radius: var(--r-sm); margin-bottom: 2px; display: grid; }
.tab-add:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.user-btn { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; padding: 4px 10px 4px 4px; border-radius: 20px; margin-bottom: 5px; color: var(--text); }
.user-btn:hover { border-color: var(--border); background: color-mix(in srgb, var(--text) 5%, transparent); }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-text); font-size: .75em; font-weight: 700; flex-shrink: 0; letter-spacing: .02em; }
.avatar.sm { width: 22px; height: 22px; font-size: .65em; vertical-align: middle; }
.badges .card-avatar { margin-left: auto; }
.readonly .add-card, .readonly .add-col, .readonly .nav-head .btn, .readonly .tree-add, .readonly .tree-head .btn, .readonly .md-toolbar,
.readonly .col-head .btn, .readonly .topbar > .btn, .readonly .seg button:not(:first-child), .readonly .mm-tools, .readonly .side-box .btn.slim { display: none !important; }
.readonly .card, .readonly .col-head { cursor: pointer; }
.readonly .cd-main, .readonly .cd-side label, .readonly .cd-side select { pointer-events: none; }
.readonly .cd-side .row .btn { display: none; }
.disabled-block { opacity: .55; pointer-events: none; }
.set-table { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.set-table th, .set-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.set-table th { font-size: .78em; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.set-table td .btn { margin-right: 4px; }
.nowrap { white-space: nowrap; }
.set-sub { font-size: .95em; margin-top: 8px; }
.set-nav-sep { font-size: .72em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 10px 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.set-group-title { font-family: var(--font-head); font-weight: 700; font-size: 1.15em; margin: 26px 0 12px; max-width: 860px; }
.stack { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.stack .btn { align-self: flex-start; }
.set-section .row .input { flex: 1; }
.set-section .row .input.slim { flex: 0 1 auto; }

.brand { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px 16px; }
.brand-icon { font-size: 1.4em; }
.brand-title { font-family: var(--font-head); font-weight: 700; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; transition: background .2s; }
.status.dirty, .status.saving { background: var(--warning); }
.status.error, .status.offline, .status.login { background: var(--danger); }
.search-btn { display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 40%, transparent); color: var(--muted); text-align: left; }
.search-btn span { flex: 1; }
.search-btn:hover { border-color: var(--accent); }
.nav { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.nav-head { display: flex; align-items: center; gap: 6px; padding: 14px 8px 4px; color: var(--muted); font-size: .78em; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.nav-head .btn { opacity: .6; }
.nav-head:hover .btn { opacity: 1; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--text); text-decoration: none !important; }
.nav-item:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.nav-item.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); font-weight: 600; }
.nav-label { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-ico { width: 1.3em; text-align: center; flex-shrink: 0; }
.nav-count { font-size: .75em; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); padding: 0 7px; border-radius: 10px; }
.side-foot { padding: 8px; border-top: 1px solid var(--border); }
.side-collapsed .brand-title, .side-collapsed .search-btn span, .side-collapsed .search-btn kbd, .side-collapsed .nav-head span, .side-collapsed .nav-head .btn,
.side-collapsed .nav-count, .side-collapsed .status { display: none; }
.side-collapsed .brand { flex-direction: column; padding: 12px 0; }
.side-collapsed .brand .spacer { display: none; }
.side-collapsed .search-btn { justify-content: center; margin: 0 8px 8px; }
.side-collapsed .nav-label { font-size: 0; gap: 0; justify-content: center; }
.side-collapsed .nav-label .nav-ico, .side-collapsed .nav-label .ic { font-size: calc(var(--fs) * 1.1); }
.side-collapsed .nav-head { justify-content: center; padding: 12px 0 4px; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; min-height: 60px; flex-wrap: wrap; }
.topbar h1 { font-size: 1.35em; font-weight: 700; }
.title-edit { outline: none; border-radius: var(--r-sm); padding: 2px 6px; margin-left: -6px; }
.title-edit:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.title-edit:focus { background: var(--card-a); box-shadow: 0 0 0 2px var(--accent); }
.filter { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.filter .input { max-width: 160px; }
.empty { display: grid; place-items: center; gap: 12px; padding: 60px; color: var(--muted); text-align: center; flex: 1; }

/* ----- Board ----- */
.board-scroll { flex: 1; overflow: auto; padding: 4px 20px 20px; }
.board-scroll.panning { cursor: grabbing; }
.board { display: flex; align-items: flex-start; gap: var(--gap); min-height: 100%; width: max-content; }
.column { width: var(--col-w); flex-shrink: 0; max-height: calc(100dvh - 146px); display: flex; flex-direction: column; background: var(--surface-a); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); box-shadow: var(--shadow); }
html:not(.plain-columns) .column { border-top: 3px solid var(--col-color); }
.column.over { box-shadow: 0 0 0 2px var(--danger), var(--shadow); }
.column.over .count { color: var(--danger); font-weight: 700; }
.column.collapsed { width: 46px; cursor: pointer; }
.column.collapsed .cards, .column.collapsed .col-foot, .column.collapsed .col-head .btn { display: none; }
.column.collapsed .col-head { writing-mode: vertical-rl; padding: 12px 0; align-items: center; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 6px 12px; cursor: grab; user-select: none; }
.col-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col-color); flex-shrink: 0; }
.plain-columns .col-head .dot { display: none; }
.col-title { font-weight: 650; font-family: var(--font-head); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { font-size: .8em; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); padding: 1px 8px; border-radius: 10px; }
.cards { flex: 1; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: calc(var(--gap) * .66); min-height: 12px; }
.col-foot { padding: 4px 8px 8px; }
.add-card { width: 100%; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: none; background: transparent; color: var(--muted); border-radius: var(--r-sm); text-align: left; }
.add-card:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.qa-form { display: flex; flex-direction: column; gap: 6px; }
.add-col { flex-shrink: 0; width: var(--col-w); display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius); border: 2px dashed color-mix(in srgb, var(--muted) 40%, transparent); background: transparent; color: var(--muted); }
.add-col:hover { border-color: var(--accent); color: var(--text); }

.card { position: relative; background: var(--card-a); border-radius: var(--r-sm); padding: var(--pad); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--border) 50%, transparent); cursor: pointer; user-select: none; touch-action: manipulation; transition: border-color .15s, transform .15s, box-shadow .15s; overflow: hidden; outline: none; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.card:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.card .cover { height: 6px; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) calc(var(--pad) * .7); background: var(--card-cover); }
.card-title { font-weight: 500; word-break: break-word; }
.card .no { color: var(--muted); font-size: .82em; margin-right: 6px; font-weight: 400; }
.card-desc { color: var(--muted); font-size: .86em; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.is-done .card-title { text-decoration: line-through; opacity: .65; }
.labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.label { --l: #888; display: inline-flex; align-items: center; font-size: .74em; font-weight: 600; padding: 1px 8px; border-radius: 20px; background: color-mix(in srgb, var(--l) 22%, transparent); color: color-mix(in srgb, var(--l) 70%, var(--text)); border: 1px solid color-mix(in srgb, var(--l) 45%, transparent); }
[data-label-style=bar] .card .label { font-size: 0; width: 34px; height: 7px; padding: 0; background: var(--l); border: none; }
[data-label-style=dot] .card .label { background: transparent; border: none; padding: 0 6px 0 0; color: var(--muted); }
[data-label-style=dot] .card .label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--l); margin-right: 5px; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: .8em; color: var(--muted); }
.badges:empty { display: none; }
.badge { display: inline-flex; align-items: center; gap: 4px; }
.badge.ok { color: var(--success); }
.badge.due.soon { color: var(--warning); }
.badge.due.overdue { color: var(--danger); font-weight: 600; }
[data-card-style=compact] .card { padding: calc(var(--pad) * .55) calc(var(--pad) * .8); }
[data-card-style=compact] .card .labels { margin-bottom: 3px; }
[data-card-style=compact] .card .badges { margin-top: 4px; }
[data-card-style=outline] .card { background: transparent; box-shadow: none; border: 1.5px solid var(--border); }
[data-card-style=accent] .card { border-left: 4px solid var(--card-cover, var(--accent)); }
[data-card-style=accent] .card .cover { display: none; }

.drag-ghost { position: fixed !important; z-index: 1000; pointer-events: none; opacity: .92; box-shadow: 0 16px 40px rgba(0,0,0,.35) !important; margin: 0; }
.placeholder { border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent); flex-shrink: 0; }
.col-placeholder { flex-shrink: 0; border-radius: var(--radius); border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }

/* ----- Dialoge ----- */
.modal-back { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; animation: fade .15s; }
.modal { background: var(--sidebar); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.4); width: min(460px, 100%); animation: pop .18s; }
.modal.wide { width: min(940px, 100%); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.dialog { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialog h3 { font-size: 1.1em; }
.dialog p { margin: 0; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: var(--r-sm); z-index: 2000; transition: all .25s; box-shadow: var(--shadow); max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.ctx { position: fixed; z-index: 1500; min-width: 200px; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.35); animation: pop .12s; }
.ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 10px; background: none; border: none; border-radius: calc(var(--r-sm) * .7); }
.ctx-item:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ctx-item.danger { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 15%, transparent); padding: 0; }
.swatch:hover { transform: scale(1.12); }
.swatch.none { background: transparent; color: var(--muted); }
.swatch.big { width: 64px; height: 40px; border-radius: var(--r-sm); }
.swatch.mini { width: 14px; height: 14px; display: inline-block; border-width: 1px; }
.archive-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.archive-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--card); border-radius: var(--r-sm); }
.pick-list { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; gap: 2px; }
.pick-item { text-align: left; background: none; border: none; padding: 7px 10px; border-radius: var(--r-sm); }
.pick-item:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* Karten-Details */
.card-detail { display: grid; grid-template-columns: 1fr 250px; min-height: 420px; }
.cd-main { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd-main h4, .cd-side h4 { margin-top: 14px; font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cd-side { padding: 20px 18px; border-left: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 35%, transparent); display: flex; flex-direction: column; gap: 10px; border-radius: 0 var(--radius) var(--radius) 0; }
.cd-side label { display: flex; flex-direction: column; gap: 4px; font-size: .85em; color: var(--muted); }
.cd-side .input, .cd-side label .btn { color: var(--text); font-size: calc(var(--fs) * .95); }
.cd-head { display: flex; align-items: center; gap: 10px; }
.no.big { font-size: 1.1em; color: var(--muted); font-weight: 600; }
.title-input { flex: 1; min-width: 0; font-size: 1.35em; font-weight: 700; font-family: var(--font-head); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 4px 6px; outline: none; color: var(--text); }
.title-input:hover { border-color: var(--border); }
.title-input:focus { border-color: var(--accent); background: var(--card-a); }
.title-input.big { font-size: 1.8em; }
.label-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.label.pick { font-size: .82em; padding: 3px 10px; cursor: pointer; opacity: .45; }
.label.pick.on { opacity: 1; box-shadow: 0 0 0 1.5px var(--l); }
.progress { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.progress div { height: 100%; background: var(--success); transition: width .3s; }
.checklist { display: flex; flex-direction: column; gap: 2px; }
.cl-item { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: var(--r-sm); }
.cl-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.cl-item.done .cl-text { text-decoration: line-through; color: var(--muted); }
.cl-text { flex: 1; background: none; border: none; outline: none; padding: 4px; color: var(--text); }
.linked { display: flex; flex-direction: column; gap: 4px; }
.linked-item { display: flex; align-items: center; gap: 6px; font-size: .92em; padding: 4px 6px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--text) 5%, transparent); }
.linked-item a { flex: 1; }

/* ----- Markdown ----- */
.md { line-height: 1.65; word-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3 { margin: 1.2em 0 .5em; }
.md h1 { font-size: 1.7em; } .md h2 { font-size: 1.35em; padding-bottom: .25em; border-bottom: 1px solid var(--border); } .md h3 { font-size: 1.12em; }
.md p { margin: .6em 0; }
.md ul, .md ol { padding-left: 1.5em; margin: .5em 0; }
.md li.task { list-style: none; margin-left: -1.3em; display: flex; gap: 6px; align-items: baseline; }
.md li.task input { transform: translateY(2px); }
.md li.task input:checked + span { text-decoration: line-through; color: var(--muted); }
.md code { background: color-mix(in srgb, var(--text) 10%, transparent); padding: .1em .35em; border-radius: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .88em; }
.md pre { background: color-mix(in srgb, var(--bg) 70%, #000); padding: 12px 14px; border-radius: var(--r-sm); overflow-x: auto; border: 1px solid var(--border); }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: .8em 0; padding: .2em 1em; border-left: 3px solid var(--accent); color: var(--muted); }
.md table { border-collapse: collapse; margin: .8em 0; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.md th { background: color-mix(in srgb, var(--text) 6%, transparent); }
.md img { max-width: 100%; border-radius: var(--r-sm); }
.md hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
.md mark { background: color-mix(in srgb, var(--warning) 45%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.md a.wl, .md a.tl, .md a.ml { cursor: pointer; border-radius: 4px; padding: 0 3px; text-decoration: none; }
.md a.wl { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.md a.wl.missing { color: var(--danger); background: none; border-bottom: 1px dashed var(--danger); border-radius: 0; }
.md a.tl { background: color-mix(in srgb, var(--success) 14%, transparent); color: color-mix(in srgb, var(--success) 70%, var(--text)); font-weight: 500; }
.md a.tl.archived { text-decoration: line-through; opacity: .7; }
.md a.ml { background: color-mix(in srgb, var(--warning) 16%, transparent); color: color-mix(in srgb, var(--warning) 70%, var(--text)); }
.callout { margin: .8em 0; padding: 10px 14px; border-radius: var(--r-sm); border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.callout.tip { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.callout.warn, .callout.warning { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.callout.danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.callout > b { display: block; margin-bottom: 2px; }
.callout p { margin: .2em 0; }

/* ----- Wiki ----- */
.wiki { display: grid; grid-template-columns: 240px 1fr 260px; flex: 1; min-height: 0; }
.wiki-tree { border-right: 1px solid var(--border); overflow-y: auto; padding: 14px 8px; background: color-mix(in srgb, var(--sidebar-a) 50%, transparent); }
.tree-head { display: flex; align-items: center; padding: 0 6px 8px; }
.tree { list-style: none; margin: 0; padding: 0; }
.tree-item { display: flex; align-items: center; gap: 2px; border-radius: var(--r-sm); padding: 2px 4px; }
.tree-item:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.tree-item.active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tree-item a { flex: 1; color: var(--text); padding: 4px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.tree-toggle { background: none; border: none; padding: 2px; color: var(--muted); display: grid; transition: transform .15s; }
.tree-toggle.open { transform: rotate(90deg); }
.tree-add { opacity: 0; }
.tree-item:hover .tree-add { opacity: .7; }
.wiki-page { overflow-y: auto; padding: 22px 36px 60px; min-width: 0; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--card-a) 35%, transparent); backdrop-filter: blur(var(--blur)); }
.crumbs { font-size: .85em; }
.wiki-head { display: flex; align-items: center; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.seg button { background: none; border: none; padding: 6px 12px; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--accent-text); }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-a); position: sticky; top: -22px; z-index: 2; }
.tb { background: none; border: none; padding: 5px 9px; border-radius: 5px; font-size: .9em; color: var(--text); }
.tb:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tb-sep { width: 1px; background: var(--border); margin: 2px 4px; }
.wiki-body { flex: 1; display: grid; gap: 20px; min-height: 300px; }
.wiki-body.mode-split { grid-template-columns: 1fr 1fr; }
.wiki-editor { width: 100%; min-height: 60vh; resize: vertical; border: 1px solid var(--border); border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 50%, var(--card)); color: var(--text); padding: 14px; line-height: 1.6; outline: none; tab-size: 2; }
.wiki-editor:focus { border-color: var(--accent); }
.wiki-md { max-width: 860px; }
.wiki-side { border-left: 1px solid var(--border); overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 16px; background: color-mix(in srgb, var(--sidebar-a) 50%, transparent); }
.side-box { display: flex; flex-direction: column; gap: 4px; }
.side-box h4 { font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.side-box .btn { align-self: flex-start; margin-top: 4px; }
.toc { color: var(--text); font-size: .9em; padding: 2px 0; }
.toc.l2 { padding-left: 12px; } .toc.l3 { padding-left: 24px; color: var(--muted); }
.side-card { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); background: var(--card-a); color: var(--text); font-size: .9em; text-decoration: none !important; border: 1px solid transparent; }
.side-card:hover { border-color: var(--accent); }
.side-card > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-card .no { color: var(--muted); font-size: .85em; }
.pill { --l: var(--accent); font-size: .72em; padding: 1px 7px; border-radius: 10px; background: color-mix(in srgb, var(--l) 20%, transparent); color: color-mix(in srgb, var(--l) 70%, var(--text)); white-space: nowrap; }
.side-link { font-size: .92em; padding: 3px 0; }
.ac { position: fixed; z-index: 800; width: 290px; max-height: 260px; overflow-y: auto; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 4px; }
.ac-item { padding: 6px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item.on { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ----- Mindmap ----- */
.mm-wrap { position: relative; flex: 1; min-height: 0; margin: 0 20px 20px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-a) 60%, transparent); }
.mm-stage { position: absolute; inset: 0; overflow: hidden; cursor: default; outline: none; touch-action: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 30%, transparent) 1px, transparent 1.2px); }
.mm-stage.panning { cursor: grabbing; }
.mm-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mm-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.mm-node { --n: var(--accent); position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 260px; padding: 8px 14px; border-radius: var(--r-sm); background: var(--card); border: 2px solid var(--n); color: var(--text); box-shadow: var(--shadow); cursor: grab; user-select: none; text-align: center; white-space: pre-wrap; word-break: break-word; transition: box-shadow .15s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mm-node.d0 { background: var(--n); color: var(--accent-text); font-weight: 700; font-size: 1.15em; padding: 12px 20px; border-radius: var(--radius); }
.mm-node.d1 { font-weight: 600; background: color-mix(in srgb, var(--n) 18%, var(--card)); }
.mm-node.d3 { font-size: .92em; padding: 5px 10px; }
.mm-node.shape-pill { border-radius: 999px; }
.mm-node.shape-rect { border-radius: 0; }
.mm-node.shape-plain { background: transparent !important; border-color: transparent; box-shadow: none; border-bottom: 2px solid var(--n); border-radius: 0; color: var(--text) !important; }
.mm-node.shape-circle { border-radius: 50%; aspect-ratio: 1; justify-content: center; min-width: 80px; }
.mm-node.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--n) 50%, transparent), var(--shadow); }
.mm-node.drop { box-shadow: 0 0 0 4px var(--success); }
.mm-text { outline: none; min-width: 20px; }
.mm-text[contenteditable="true"] { cursor: text; user-select: text; background: color-mix(in srgb, var(--bg) 30%, transparent); border-radius: 4px; padding: 0 4px; }
.mm-link { font-size: .72em; font-weight: 500; border: none; border-radius: 10px; padding: 1px 8px; background: color-mix(in srgb, var(--bg) 40%, transparent); color: inherit; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-link:hover { background: var(--bg); color: var(--text); }
.mm-badge { position: absolute; right: -10px; top: -10px; background: var(--n); color: var(--accent-text); font-size: .7em; border-radius: 10px; padding: 0 6px; font-weight: 700; }
.mm-tools { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.mm-tools > * { pointer-events: auto; }
.mm-tools .btn { background: var(--sidebar); box-shadow: var(--shadow); }
.mm-hint { font-size: .82em; color: var(--muted); background: var(--sidebar); padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.mm-zoombar { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px; align-items: center; background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px; box-shadow: var(--shadow); }
.mm-zoombar .btn { border: none; }
.mm-zoom { min-width: 44px; text-align: center; font-size: .85em; color: var(--muted); }

/* ----- Suche ----- */
.search-modal { display: flex; flex-direction: column; max-height: 70vh; }
.search-input { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.search-results { overflow-y: auto; padding: 6px; }
.search-item { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; border-radius: var(--r-sm); }
.search-item.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.si-main { display: flex; flex-direction: column; min-width: 0; }
.si-main > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad { padding: 12px; }

/* ----- Einstellungen ----- */
.settings { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.set-body { display: grid; grid-template-columns: 180px 1fr; flex: 1; min-height: 0; }
.set-nav { display: flex; flex-direction: column; padding: 8px 12px; gap: 2px; overflow-y: auto; }
.set-nav a { color: var(--muted); padding: 6px 10px; border-radius: var(--r-sm); text-decoration: none; }
.set-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.set-content { overflow-y: auto; padding: 0 24px 80px 12px; }
.set-section { background: var(--card-a); backdrop-filter: blur(var(--blur)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; max-width: 860px; display: flex; flex-direction: column; gap: 10px; }
.set-section h2 { font-size: 1.1em; }
.set-section > p { margin: -4px 0 4px; }
.set-field { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 12px; }
.set-field .input { max-width: 360px; }
.set-label { display: flex; flex-direction: column; }
.slider { display: flex; align-items: center; gap: 10px; max-width: 360px; }
.slider input { flex: 1; accent-color: var(--accent); }
.slider output { min-width: 52px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.preset { background: none; border: 2px solid transparent; border-radius: var(--radius); padding: 4px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; font-size: .9em; }
.preset.on { border-color: var(--accent); }
.preset:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.preset-prev { height: 72px; border-radius: calc(var(--radius) * .7); display: grid; grid-template-columns: 22% 1fr; overflow: hidden; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.pp-cols { display: flex; gap: 4px; padding: 6px; }
.pp-cols > div { flex: 1; border-radius: 3px; padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.pp-cols i { display: block; height: 10px; border-radius: 2px; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field .input { width: 100px; margin-top: 2px; }
.label-edit { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.label-edit .row .input { width: 180px; }

/* ----- Login ----- */
.login { display: grid; place-items: center; height: 100vh; padding: 20px; }
.login-box { width: min(360px, 100%); background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 12px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.login-logo { font-size: 3em; }
.login-box .btn { justify-content: center; }

/* ----- Glas-Effekt ----- */
.glass .card { backdrop-filter: blur(calc(var(--blur) / 2)); }
.glass .topbar { text-shadow: 0 1px 8px rgba(0,0,0,.25); }

/* ----- Responsiv ----- */
@media (max-width: 1200px) { .wiki { grid-template-columns: 220px 1fr; } .wiki-side { display: none; } }
@media (max-width: 860px) {
  .shell, .shell.side-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 400; left: 0; top: 0; bottom: 0; width: min(290px, 85vw); transform: translateX(-100%); transition: transform .2s; background: var(--sidebar); }
  .side-open .sidebar { transform: none; }
  .side-open .side-scrim { display: block; position: fixed; inset: 0; z-index: 399; background: rgba(0,0,0,.4); border: none; }
  .side-collapsed .sidebar * { display: revert; }
  .collapse-btn { display: none !important; }
  .mobile-menu-top { display: inline-flex; margin-bottom: 4px; }
  .tabbar { padding: 4px 6px 0; gap: 4px; }
  .tab { padding: 8px 10px; }
  .user-name { display: none; }
  .user-btn { padding: 4px; }
  .topbar { padding: 12px 14px 8px; }
  .set-table td:nth-child(2), .set-table th:nth-child(2) { display: none; }
  .filter { order: 10; width: 100%; }
  .filter .input { max-width: none; flex: 1; min-width: 0; }
  .filter select.input { flex: 0 1 auto; max-width: 34%; }
  .board-scroll { padding: 4px 12px 16px; scroll-snap-type: x proximity; }
  .column { scroll-snap-align: start; max-height: calc(100dvh - 150px); }
  .wiki { grid-template-columns: 1fr; }
  .wiki-tree { display: none; }
  .wiki-page { padding: 12px 16px 60px; }
  .wiki-body.mode-split { grid-template-columns: 1fr; }
  .card-detail { grid-template-columns: 1fr; }
  .cd-side { border-left: none; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
  .set-body { grid-template-columns: 1fr; }
  .set-nav { display: none; }
  .set-content { padding: 0 14px 60px; }
  .set-field { grid-template-columns: 1fr; gap: 4px; }
  .mm-wrap { margin: 0 8px 8px; }
  .hide-sm { display: none; }
  .modal-back { padding: 2vh 8px; }
}

/* ----- MFA / Sicherheit ----- */
.qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr svg { width: 200px; height: 200px; background: #fff; border-radius: 8px; padding: 4px; }
.qr svg rect[fill="#ffffff"], .qr svg path[fill="#ffffff"] { fill: #fff; }
.secret { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .95em; letter-spacing: .05em; background: color-mix(in srgb, var(--text) 8%, transparent); padding: 2px 6px; border-radius: 4px; user-select: all; word-break: break-all; }
.code-input { text-align: center; font-size: 1.6em !important; letter-spacing: .35em; font-family: "JetBrains Mono", ui-monospace, monospace; }
.steps { text-align: left; margin: 0; padding-left: 1.3em; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.set-table tr.bad td:nth-child(2) { color: var(--danger); font-weight: 600; }
.audit { max-height: 520px; overflow: auto; }

/* ----- Kalender: Mini-Monat in der Seitenleiste ----- */
.mini-cal { margin: 6px 4px 4px; padding: 8px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--text) 4%, transparent); }
.mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mini-head .btn { padding: 0 8px; font-size: 1.1em; line-height: 1.4; }
.mini-title { font-weight: 600; font-size: .9em; color: var(--text); text-decoration: none !important; }
.mini-title:hover { color: var(--accent); }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.mini-wd { font-size: .68em; color: var(--muted); padding: 2px 0; font-weight: 600; }
.mini-day { position: relative; font-size: .78em; padding: 4px 0 7px; border-radius: 6px; color: var(--text); text-decoration: none !important; line-height: 1.1; }
.mini-day:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mini-day.other { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.mini-day.today { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.mini-dots { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; gap: 2px; justify-content: center; }
.mini-dots b { width: 4px; height: 4px; border-radius: 50%; }
.mini-day.today .mini-dots b { background: var(--accent-text) !important; }
.mini-next { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.mini-ev { display: grid; grid-template-columns: 3px auto 1fr; gap: 6px; align-items: center; font-size: .8em; color: var(--text); padding: 3px 4px; border-radius: 5px; text-decoration: none !important; }
.mini-ev:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.mini-ev-bar { width: 3px; height: 100%; min-height: 14px; border-radius: 2px; }
.mini-ev-when { color: var(--muted); white-space: nowrap; }
.mini-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-collapsed .mini-cal, .side-collapsed .cal-nav .nav-label { display: none; }

/* ----- Kalender: große Monatsansicht ----- */
.cal-wrap { flex: 1; min-height: 0; overflow: auto; padding: 0 20px 20px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(110px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 100%; }
.cal-wd { background: var(--surface); padding: 8px; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: center; }
.cal-day { background: var(--card-a); padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: background .12s; }
.cal-day.weekend { background: color-mix(in srgb, var(--card) 85%, var(--surface)); }
.cal-day.other { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.cal-day.other .cal-num span { opacity: .45; }
.cal-day.focus { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.drop { background: color-mix(in srgb, var(--accent) 20%, var(--card)); }
.cal-num { display: flex; align-items: center; justify-content: space-between; font-size: .85em; font-weight: 600; padding: 0 2px; }
.cal-day.today .cal-num span { background: var(--accent); color: var(--accent-text); border-radius: 20px; padding: 1px 7px; }
.cal-add { background: none; border: none; color: var(--muted); padding: 2px; border-radius: 4px; opacity: 0; display: grid; }
.cal-day:hover .cal-add { opacity: 1; }
.cal-add:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.cal-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chip { --c: var(--accent); display: flex; align-items: center; gap: 5px; font-size: .8em; padding: 3px 7px; border-radius: 6px; cursor: pointer; user-select: none; touch-action: manipulation;
  background: color-mix(in srgb, var(--c) 14%, var(--card)); border-left: 3px solid var(--c); color: var(--text); min-width: 0; outline: none; transition: filter .12s; }
.chip:hover, .chip:focus-visible { filter: brightness(1.12); }
.chip.allday { background: var(--c); color: #fff; border-left-color: transparent; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.chip.task { background: transparent; border: 1px dashed color-mix(in srgb, var(--c) 70%, transparent); border-left: 3px solid var(--c); }
.chip.task.done .chip-title { text-decoration: line-through; opacity: .6; }
.chip-time { font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
.chip-no { color: var(--muted); font-size: .9em; }
.chip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-ic { opacity: .7; display: inline-flex; }
.cal-more { background: none; border: none; color: var(--muted); font-size: .76em; text-align: left; padding: 1px 6px; }
.cal-more:hover { color: var(--accent); }
.cal-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .9em; color: var(--muted); cursor: pointer; }
.pill.gsync { border: none; cursor: pointer; padding: 4px 10px; font-size: .8em; }
.day-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }

/* ----- Termin-Dialog ----- */
.ev-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.ev-when { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--text) 4%, transparent); margin: 6px 0; }
.ev-field { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.wd-pick, .rem-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.wd, .rem { background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--border); border-radius: 20px; padding: 3px 9px; font-size: .82em; color: var(--text); }
.wd.on, .rem.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.swatch.sel { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.stack.wide { max-width: none; }

@media (max-width: 860px) {
  .cal-wrap { padding: 0 6px 10px; }
  .cal-grid { grid-template-rows: auto repeat(6, minmax(70px, 1fr)); }
  .chip { font-size: .7em; padding: 2px 4px; }
  .chip-time, .chip-no, .chip-ic { display: none; }
  .cal-day { padding: 2px; }
}
.brand-icon img { width: 1.4em; height: 1.4em; object-fit: contain; vertical-align: middle; border-radius: 4px; display: block; }
.side-cal { padding: 0 8px 6px; border-top: 1px solid var(--border); flex-shrink: 0; }
.side-cal .nav-head { padding-top: 10px; }
.side-collapsed .side-cal .nav-head { padding-top: 8px; }
@media (max-height: 760px) { .side-cal .mini-next { display: none; } }