/* aeradex — ledger-book workspace. Register (nav) on top, working sheet below, agent drawer right.
   Totals carry the ledger's red double rule; amounts are set in a tabular mono like a Kassabuch. */
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-display: swap; src: url(fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap; src: url(fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 700; font-display: swap; src: url(fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  /* Same system as the landing page (site/style.css): hairlines instead of solid rules, near-black green in dark. */
  --paper: #f7f8f6; --sheet: #ffffff; --ink: #111814; --muted: #5b6862; --faint: #8a958f;
  --rule: rgba(17, 24, 20, .09); --rule-strong: rgba(17, 24, 20, .18); --red: #c8281c; --red-soft: #fbe9e7; --on-red: #ffffff;
  --ok: #2d7a4c; --ok-soft: #e4f2e9; --warn: #9a6a12; --warn-soft: #f8efd9; --info: #2c5d8a; --info-soft: #e6eef6;
  --hover: rgba(17, 24, 20, .04); --add: #e4f2e9; --del: #fbe9e7;
  --shadow: 0 0 0 1px rgba(17,24,20,.04), 0 10px 30px -12px rgba(17,24,20,.18);
  --f-ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 12px; --ease: cubic-bezier(.2, .7, .2, 1); color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #08090a; --sheet: #101513; --ink: #eef2ef; --muted: #8e9b94; --faint: #5f6b65;
  --rule: rgba(238, 242, 239, .08); --rule-strong: rgba(238, 242, 239, .16); --red: #ff5c4d; --red-soft: #3a1714; --on-red: #1a0806;
  --ok: #6cc893; --ok-soft: #15301f; --warn: #e3b456; --warn-soft: #33270f; --info: #7fb0e0; --info-soft: #142536;
  --hover: rgba(238, 242, 239, .045); --add: #15301f; --del: #3a1714;
  --shadow: 0 0 0 1px rgba(255,255,255,.04), 0 16px 40px -14px rgba(0,0,0,.7); color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #08090a; --sheet: #101513; --ink: #eef2ef; --muted: #8e9b94; --faint: #5f6b65;
  --rule: rgba(238, 242, 239, .08); --rule-strong: rgba(238, 242, 239, .16); --red: #ff5c4d; --red-soft: #3a1714; --on-red: #1a0806;
  --ok: #6cc893; --ok-soft: #15301f; --warn: #e3b456; --warn-soft: #33270f; --info: #7fb0e0; --info-soft: #142536;
  --hover: rgba(238, 242, 239, .045); --add: #15301f; --del: #3a1714;
  --shadow: 0 0 0 1px rgba(255,255,255,.04), 0 16px 40px -14px rgba(0,0,0,.7); color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--f-ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.right { text-align: right; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.link { color: var(--info); text-decoration: none; }
.link:hover { text-decoration: underline; }
h2 { font-size: 14px; margin: 0; }
p { margin: 0; }

.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.app.chat-open { grid-template-columns: minmax(0, 1fr) 380px; }
#page { display: contents; }
.top { grid-column: 1 / -1; grid-row: 1; }
.main { grid-column: 1; grid-row: 2; }
.chat { grid-column: 2; grid-row: 2; }

/* ---------- register (top navigation) ---------- */
.top { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule); position: relative; z-index: 6; }
.toprow { display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.coin { width: 26px; height: 26px; color: var(--red); flex: none; display: block; }
.coin svg { width: 100%; height: 100%; display: block; }
.brand b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.sections { display: flex; align-items: stretch; gap: 2px; height: 100%; min-width: 0; flex: 0 1 auto;
  overflow-x: auto; scrollbar-width: none; }
.sections::-webkit-scrollbar { display: none; }
.sections > a, .more > summary { display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--muted);
  text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; border-top: 2px solid transparent; cursor: pointer; }
.sections > a:hover, .more > summary:hover { color: var(--ink); }
.sections > a.on, .more.on > summary { color: var(--ink); border-bottom-color: var(--red); }
.sections .sep { width: 1px; background: var(--rule); margin: 16px 6px; flex: none; }
.badge { font-family: var(--f-num); font-size: 10.5px; line-height: 16px; min-width: 18px; text-align: center; background: var(--red); color: var(--on-red); border-radius: 999px; padding: 0 6px; }
.system { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.system .icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--muted);
  background: none; border: 0; cursor: pointer; }
.system .icon:hover, .system .icon.on { background: var(--hover); color: var(--ink); }
.system .icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.system .icon svg .fill { fill: currentColor; stroke: none; }
.system .icon svg .knob { fill: var(--paper); }
.status { display: flex; align-items: center; gap: 2px; padding: 0 8px; height: 32px; border-radius: 7px; color: var(--muted);
  text-decoration: none; font-family: var(--f-num); font-size: 12px; }
.status.bad { color: var(--red); background: var(--red-soft); }
.status .dot { margin-right: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* header menus (Mehr, Firma): <details> without JS; app.js closes them on Escape or a click elsewhere */
.menu { position: relative; }
.more { flex: none; align-self: stretch; display: flex; }
.more > summary { height: 100%; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "▾"; font-size: 12px; margin-left: 6px; color: var(--muted); }
.mandant > summary { display: flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--rule-strong);
  border-radius: 999px; background: var(--sheet); cursor: pointer; font-weight: 500; }
.mandant .firma { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menubox { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 20; }
.menubox.right { left: auto; right: 0; min-width: 240px; padding: 12px; gap: 6px; }
.menubox a { padding: 7px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menubox a:hover, .menubox a.on { background: var(--hover); }
.tabsrow { display: flex; gap: 4px; height: 40px; padding: 0 20px; border-top: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabsrow a { display: flex; align-items: center; padding: 0 10px; color: var(--muted); text-decoration: none; font-weight: 500;
  white-space: nowrap; border-bottom: 2px solid transparent; }
.tabsrow a:hover { color: var(--ink); }
.tabsrow a.on { color: var(--ink); border-bottom-color: var(--red); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
.dot.bad { background: var(--red); }

/* ---------- main sheet ---------- */
.main { overflow-y: auto; padding-inline: 32px; padding-block: 22px 64px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.topbar { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.topbar h1 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; margin: 0; text-wrap: balance; }
.topbar .sub { color: var(--muted); font-size: 13px; }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.crumbs a { color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { border: 1px solid var(--rule-strong); background: var(--sheet); border-radius: 10px; padding: 7px 13px; cursor: pointer; font-weight: 500;
  display: inline-flex; gap: 6px; align-items: center; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, box-shadow .2s; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--red); border-color: transparent; color: var(--on-red); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px color-mix(in srgb, var(--red) 70%, black), 0 6px 18px -8px var(--red); }
.btn.primary:hover { filter: brightness(1.06); background: var(--red); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px color-mix(in srgb, var(--red) 70%, black), 0 10px 24px -10px var(--red); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--red); }
.btn.small { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
kbd { font-family: var(--f-num); font-size: 11px; border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; opacity: .7; }

.subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); overflow-x: auto; flex-shrink: 0; }   /* in a long column page it must not be squeezed to its border */
.subnav a { padding: 8px 10px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; }
.subnav a.on { color: var(--ink); border-bottom-color: var(--red); }

.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); min-width: 0; }
.panel > header, .panel > summary > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.panel > summary > header h2 { color: var(--ink); }
.panel > header .hint, .panel > summary > header .hint { font-size: 12px; color: var(--muted); }
.panel .body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.panel .empty { padding: 26px 16px; color: var(--muted); text-align: center; }

/* figures */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.figure { background: linear-gradient(180deg, var(--sheet), color-mix(in srgb, var(--sheet) 55%, var(--paper))); border: 1px solid var(--rule); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none; }
a.figure:hover { border-color: var(--rule-strong); }
.figure .label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.figure .value { font-family: var(--f-num); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.figure .meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.figure svg { width: 100%; height: 34px; display: block; }

.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.red { background: var(--red-soft); color: var(--red); }
.pill.lock, .pill.muted { background: var(--hover); color: var(--muted); }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.grid2.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.todo { list-style: none; margin: 0; padding: 0; }
.todo li { border-top: 1px solid var(--rule); }
.todo li:first-child { border-top: 0; }
.todo a { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; text-decoration: none; }
.todo a:hover { background: var(--hover); }
.todo .stripe { align-self: stretch; border-radius: 2px; background: var(--info); }
.todo .stripe.warn { background: var(--warn); }
.todo .stripe.red { background: var(--red); }
.todo .stripe.muted { background: var(--rule-strong); }
.todo .t { font-weight: 500; }
.todo .d { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-family: var(--f-num); font-size: 10px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); padding: 0 16px 12px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 8px 16px; border-top: 1px solid var(--rule); font-size: 13px; }
.activity li:first-child { border-top: 0; }
.activity .h { font-family: var(--f-num); font-size: 12px; color: var(--faint); text-decoration: none; }
.activity .h:hover { color: var(--info); }
.who { font-size: 11px; color: var(--muted); }

/* ledger tables */
.tablewrap { overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; font-family: var(--f-num); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 500;
  padding: 8px 12px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.ledger th.right { text-align: right; }
.ledger td { padding: 7px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger tr.row:hover td { background: var(--hover); }
.ledger td.acc { font-family: var(--f-num); font-size: 13px; white-space: nowrap; }
.ledger .acc small { display: block; font-family: var(--f-ui); font-size: 11px; color: var(--faint); white-space: normal; max-width: 18ch; }
.beleg { font-family: var(--f-num); font-size: 12px; border: 1px solid var(--rule-strong); border-radius: 6px; padding: 0 6px; white-space: nowrap; text-decoration: none; }
.ledger tr.group > td { cursor: pointer; }
.ledger tr.sub td { background: var(--paper); font-size: 13px; }
.ledger tr.sub td:first-child { border-left: 2px solid var(--rule-strong); }
.caret { display: inline-block; width: 12px; color: var(--faint); transition: transform .15s; }
tr.open .caret { transform: rotate(90deg); }
.ledger tfoot td { border-bottom: 0; padding-top: 10px; font-weight: 600; }
.ledger td.total, .ledger tr.total td.num { border-bottom: 3px double var(--red); }
.ledger tr.sum td { font-weight: 600; }
.ledger tr.zw td { font-weight: 600; border-bottom-color: var(--rule-strong); }
.ledger tr.total td { font-weight: 700; }
.ledger tr.member td { font-size: 12.5px; color: var(--muted); background: var(--paper); }
.src { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rowactions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); padding: 0 12px; overflow-x: auto; }
.tabs a { padding: 10px 9px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; text-decoration: none; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--red); }
.tabs a .count, .subnav a .count { font-family: var(--f-num); font-size: 10px; color: var(--faint); margin-left: 3px; }
section[data-tab] { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.filters { display: flex; gap: 8px; padding: 10px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); align-items: center; }

/* forms */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label, .lbl { font-size: 12px; color: var(--muted); font-weight: 500; }
.input { border: 1px solid var(--rule-strong); background: var(--sheet); border-radius: 9px; padding: 7px 10px; min-width: 0; width: 100%; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: none; border-color: color-mix(in srgb, var(--red) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent); }
.input.num { text-align: right; }
textarea.input { min-height: 90px; resize: vertical; line-height: 1.5; }
select.input { width: auto; }
.search { flex: 1 1 220px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form .wide { grid-column: 1 / -1; }
.formfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.errors:empty { display: none; }
.alert { border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.alert.error { background: var(--red-soft); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.info { background: var(--info-soft); color: var(--info); }
details.drawer > summary { list-style: none; cursor: pointer; }
details.drawer > summary::-webkit-details-marker { display: none; }
details.inline { border-top: 1px solid var(--rule); }
details.inline > summary { padding: 10px 16px; cursor: pointer; font-weight: 500; }
details.inline > .body { padding-top: 0; }
.splitrows { display: flex; flex-direction: column; gap: 6px; }
.splitrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px minmax(0, 1.2fr) auto; gap: 6px; }
.posrow { display: grid; grid-template-columns: minmax(0, 3fr) 80px 70px 110px minmax(0, 1.3fr) auto; gap: 6px; align-items: center; }
.withvat .posrow, .posrow.poshead:has(+ .withvat) { grid-template-columns: minmax(0, 3fr) 70px 60px 100px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; }
.splitrows:has(select) .splitrow, .splitrow.poshead:has(+ .splitrows select) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.splitrows.billrows .splitrow, .splitrow.billhead { grid-template-columns: minmax(0, 1.2fr) 110px minmax(0, 1.4fr) auto; }
.splitrows.billrows:has(select) .splitrow, .splitrow.billhead.vat { grid-template-columns: minmax(0, 1.2fr) 110px minmax(0, 1.2fr) minmax(0, 1.2fr) auto; }
.poshead { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* review */
.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.filelist { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.filelist a { font-size: 12px; text-decoration: none; border: 1px solid var(--rule); border-radius: 6px; padding: 3px 8px; }
.filelist a.on { border-color: var(--red); color: var(--red); }
.stage { background: var(--paper); border-bottom: 1px solid var(--rule); }
.stage iframe { width: 100%; height: 560px; border: 0; display: block; background: var(--sheet); }
.stage img { display: block; max-width: 100%; max-height: 560px; margin: auto; }
.stage pre { margin: 0; padding: 18px; font-family: var(--f-num); font-size: 12px; white-space: pre-wrap; max-height: 560px; overflow: auto; }
.filemeta { display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.agentnote { display: flex; gap: 10px; background: var(--info-soft); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.agentnote .who2 { font-weight: 600; color: var(--info); white-space: nowrap; }
.dropzone { border: 1.5px dashed var(--rule-strong); border-radius: 10px; padding: 26px; text-align: center; color: var(--muted); }

.proposal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rule); }
.proposal:first-of-type { border-top: 0; }
.proposal .what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.proposal .why { font-size: 12px; color: var(--muted); }
.proposal .posting { font-family: var(--f-num); font-size: 13px; }

/* statements */
.stmt td:first-child { width: 100%; }
.stmt tr.member td:first-child { padding-left: 28px; }

/* diff */
.diff { font-family: var(--f-num); font-size: 12px; overflow-x: auto; }
.diff div { white-space: pre; padding: 0 12px; }
.diff .add { background: var(--add); }
.diff .del { background: var(--del); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 50%, transparent); }
.diff .hunk { color: var(--faint); padding-top: 6px; }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper);
  padding: 9px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow); z-index: 20; max-width: calc(100% - 32px); }
.toast.error { background: var(--red); color: var(--on-red); }
.livebar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 20; }

/* agent drawer */
.chat { --paper: #0b0e0d; --sheet: #111614; --ink: #e6ece8; --muted: #8a978f; --faint: #5f6b65; --hover: rgba(230,236,232,.05);
  --rule: rgba(230, 236, 232, .09); --rule-strong: rgba(230, 236, 232, .18); --red: #ff5c4d; --red-soft: #3a1714; --on-red: #1a0806;
  --ok: #6cc893; --info: #7fb0e0; --info-soft: #142536; color-scheme: dark;
  border-left: 1px solid var(--rule); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; min-width: 0; height: 100%; }
.chat[hidden] { display: none; }
.chat header .actions { flex-wrap: nowrap; }
.chat header { padding: 14px 16px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat header strong { display: flex; align-items: center; gap: 8px; }
.chat header strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.chat header span { font-size: 12px; color: var(--muted); }
.msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 13px; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 3px; white-space: pre-wrap; }
.msg.ai { align-self: flex-start; background: var(--sheet); border: 1px solid var(--rule); border-bottom-left-radius: 3px; }
.msg.ai p + p, .msg.ai ul { margin-top: 6px; }
.msg.ai ul { padding-left: 18px; margin-bottom: 0; }
.msg.err { align-self: flex-start; background: var(--red-soft); color: var(--red); }
.tool { align-self: flex-start; display: flex; gap: 8px; align-items: baseline; font-family: var(--f-num); font-size: 11.5px; color: #ffb4a6; padding: 1px 0; overflow-wrap: anywhere; }
.tool::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; transform: translateY(-1px); }
.chat .ctx { margin: 0 16px; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.composer { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; border-top: 1px solid var(--rule); margin-top: 10px; }
.composer textarea { resize: none; height: 42px; min-height: 42px; }
.chatopen { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 4; border-radius: 999px; padding: 9px 16px 9px 14px;
  background: #0b0e0d; color: #e6ece8; border-color: rgba(230,236,232,.14); box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); }
.chatopen:hover { background: #111614; }
.chatopen::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5c4d; box-shadow: 0 0 10px #ff5c4d; }
.suggest { display: flex; gap: 6px; flex-wrap: wrap; }
.suggest button { border: 1px solid var(--rule-strong); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; transition: border-color .2s, background .2s; }
.suggest button:hover { border-color: var(--muted); background: var(--hover); }
.thinking { align-self: flex-start; font-size: 12px; color: var(--muted); }
.thinking::after { content: "…"; animation: blink 1s steps(3) infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* responsive */
@media (max-width: 1240px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid2, .grid2.even, .review { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1280px) { .mandant .firma { max-width: 120px; } .brand b { display: none; } .toprow { gap: 12px; } }
@media (max-width: 1120px) { .app.chat-open { grid-template-columns: minmax(0, 1fr); } .app.chat-open .chat { position: fixed; inset: 0 0 0 auto; width: min(380px, 100%); z-index: 10; box-shadow: var(--shadow); } }
@media (max-width: 760px) {
  .toprow { padding: 0 12px; gap: 8px; height: auto; flex-wrap: wrap; }
  .brand, .system { height: 48px; }
  .sections { order: 3; flex: 1 0 100%; height: 42px; margin: 0 -12px; padding: 0 6px; border-top: 1px solid var(--rule); }
  .more { order: 4; }
  .mandant .firma { max-width: 90px; }
  .tabsrow { padding: 0 12px; }
  .main { padding-inline: 16px; }
  .figures, .form, .form.three, .form.four { grid-template-columns: minmax(0, 1fr); }
  .proposal { grid-template-columns: minmax(0, 1fr); }
  .splitrow, .posrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* booking grid: a spreadsheet for simple bookings */
table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.grid th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: 8px; border-bottom: 1px solid var(--rule-strong); }
table.grid td { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 0; vertical-align: top; }
table.grid td.nr, table.grid th.nr { width: 34px; color: var(--faint); text-align: right; padding: 8px 6px; font-family: var(--f-num); font-size: 12px; border-right: 1px solid var(--rule); }
table.grid td.x, table.grid th.x { width: 40px; border-right: 0; text-align: center; }
table.grid .c-datum { width: 110px; } table.grid .c-konto { width: 150px; } table.grid .c-betrag { width: 120px; } table.grid .c-mwst { width: 84px; }
table.grid input { width: 100%; border: 0; background: transparent; padding: 8px; font: inherit; color: var(--ink); border-radius: 0; }
table.grid input.num { text-align: right; font-family: var(--f-num); }
table.grid input:focus { outline: 2px solid var(--red); outline-offset: -2px; background: var(--paper); }
table.grid small.accname { display: block; font-size: 11px; color: var(--muted); padding: 0 8px 5px; margin-top: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.grid small.accname:empty { display: none; }
table.grid small.accname.bad { color: var(--red); }
table.grid tr.err td { background: var(--red-soft); }
table.grid tfoot td { border: 0; padding: 8px; font-family: var(--f-num); }
table.grid td.x .btn { opacity: .35; } table.grid tr:hover td.x .btn { opacity: 1; }
@media (max-width: 760px) { table.grid { min-width: 720px; } }
/* bank: a suggestion for an open movement, taken with one click */
form.suggest { display: flex; align-items: center; gap: 10px; justify-content: space-between; max-width: 460px; }
form.suggest + form.suggest, details > form.suggest { margin-top: 6px; }
form.suggest > div { min-width: 0; }

/* ---- global upload (header) ---- */
.menu.upload > summary::after { content: ""; margin: 0; }
.menu.upload > summary.btn { border-radius: 999px; padding-inline: 14px; }
.menu.upload .menubox { min-width: 340px; max-width: min(420px, calc(100vw - 32px)); }
.menu.upload .dropzone { display: flex; flex-direction: column; gap: 10px; padding: 18px; text-align: left; cursor: pointer; }
.menu.upload form { display: flex; flex-direction: column; gap: 10px; }

/* ---- Übersicht inbox rows ---- */
.todo .row2 { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; }
.panel > header form { display: inline-flex; gap: 8px; align-items: center; }

/* ---- review pages: position in the draft list ---- */
.crumbs.draftnav { display: flex; align-items: center; gap: 6px; }

/* ---- Bank › Abgleichen: one card per open movement ---- */
.bankimport input[type=file] { width: 240px; }
.recline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.recline a { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 12px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--sheet); text-decoration: none; font-size: 13px; }
.recline a.bad { border-color: var(--red); }
.bankcard { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; flex-shrink: 0; scroll-margin-top: 120px; }
.bankcard:target { border-color: var(--info); }
.bankcard.done { display: block; padding: 14px 18px; color: var(--ok); background: var(--ok-soft); border-color: transparent; box-shadow: none; font-weight: 500; }
.bankline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 16px 18px;
  border-right: 1px solid var(--rule); background: var(--paper); }
.bankline .party { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.bankline .party .pill { align-self: flex-start; }
.bankline .amount { font-size: 15px; font-weight: 600; }
.bankline .amount.in { color: var(--ok); }
.ctabs { display: flex; flex-wrap: wrap; align-content: flex-start; min-width: 0; }
.ctabs > input { position: absolute; opacity: 0; pointer-events: none; }
.ctabs > label { padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.ctabs > label:hover { color: var(--ink); }
.ctabs > input:checked + label { color: var(--ink); border-bottom-color: var(--ink); }
.ctabs > input:focus-visible + label { outline: 2px solid var(--red); outline-offset: -2px; }
.ctabs > .pane { display: none; order: 1; flex-basis: 100%; padding: 12px 18px 16px; border-top: 1px solid var(--rule); min-width: 0; }
.ctabs > input:nth-of-type(1):checked ~ .pane:nth-of-type(1),
.ctabs > input:nth-of-type(2):checked ~ .pane:nth-of-type(2),
.ctabs > input:nth-of-type(3):checked ~ .pane:nth-of-type(3),
.ctabs > input:nth-of-type(4):checked ~ .pane:nth-of-type(4) { display: flex; flex-direction: column; gap: 8px; }
.match { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--rule); }
.match:first-child { border-top: 0; }
.match.first { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); }
.match.first.sure { border-color: var(--ok); background: var(--ok-soft); }
.match form { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.match.first .btn.primary { min-width: 72px; }
.pane form.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pane form.inline .input { flex: 1 1 220px; }
.pane .formfoot.wide { grid-column: 1 / -1; }
.treffer { display: flex; flex-direction: column; }
@media (max-width: 900px) {
  .bankcard { display: block; }
  .bankline { border-right: 0; border-bottom: 1px solid var(--rule); }
  .bankimport input[type=file] { width: 100%; }
}
.tabsrow a .badge { margin-left: 6px; }

/* Journal: select Belege and recode them in bulk */
.ledger th.sel, .ledger td.sel { width: 28px; padding-right: 0; text-align: center; }
.ledger td.sel input, .ledger th.sel input { accent-color: var(--red); cursor: pointer; }
.bulkbar { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--info-soft); border-bottom: 1px solid var(--rule); }
.bulkbar[hidden] { display: none; }
.bulkbar .bulkfield { display: inline-flex; align-items: center; gap: 6px; }
.bulkbar .bulkfield label { font-size: 12px; color: var(--muted); }
.bulkbar .bulkfield .input { width: 180px; }
.bulkbar .actions { margin-left: auto; }
.recodepreview { margin: 12px; box-shadow: var(--shadow); }
.recodepreview tr.muted td { color: var(--muted); }
@media (max-width: 700px) { .bulkbar .bulkfield .input { width: 100%; } .bulkbar .bulkfield { flex: 1 1 100%; } }

/* Tabs inside a form (radio + label, no script): the n-th radio shows the n-th pane */
.tabset { display: flex; flex-wrap: wrap; align-items: flex-end; }
.tabset > .tabradio { position: absolute; opacity: 0; pointer-events: none; }
.tabset > label { order: 0; padding: 9px 12px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; cursor: pointer; white-space: nowrap; }
.tabset > label:hover { color: var(--ink); }
.tabset > .tabradio:checked + label { color: var(--ink); border-bottom-color: var(--red); }
.tabset > .tabradio:focus-visible + label { outline: 2px solid var(--info); outline-offset: -2px; }
.tabset > .tabpane { order: 1; flex: 1 1 100%; display: none; padding-top: 14px; border-top: 1px solid var(--rule); }
.tabset > .tabpane > * + * { margin-top: 12px; }
.tabset > .tabradio:nth-of-type(1):checked ~ .tabpane:nth-of-type(1),
.tabset > .tabradio:nth-of-type(2):checked ~ .tabpane:nth-of-type(2),
.tabset > .tabradio:nth-of-type(3):checked ~ .tabpane:nth-of-type(3),
.tabset > .tabradio:nth-of-type(4):checked ~ .tabpane:nth-of-type(4),
.tabset > .tabradio:nth-of-type(5):checked ~ .tabpane:nth-of-type(5) { display: block; }
/* Employee form: monthly or hourly fields after the Lohnart */
.empform:has(select[name=lohnart] option[value=stunde]:checked) .only-monat,
.empform:has(select[name=lohnart] option[value=monat]:checked) .only-stunde { display: none; }
.qstline { padding: 10px 12px; border-radius: var(--r); background: var(--info-soft); line-height: 1.6; }
.qstline.ok { background: var(--ok-soft); }
.qstline.warn { background: var(--warn-soft); }