/* TECDOOR ERP – Oberflaeche. Corporate-Farben wie SharedUI/tec-ui.css */
:root {
  --brand: #003878; --brand-700: #002c60; --brand-500: #0a4f9e; --brand-100: #dbe7f5; --brand-50: #eef4fb;
  --ink: #1d2b3a; --ink-2: #344c67; --muted: #64748b; --faint: #94a3b8;
  --line: #dfe5ec; --line-2: #edf1f5; --bg: #f3f5f8; --surface: #fff; --surface-2: #f8fafc;
  --ok: #15803d; --ok-bg: #e8f6ee; --warn: #b45309; --warn-bg: #fdf3e2; --err: #c62828; --err-bg: #fdecec; --info-bg: #eaf2fd;
  --focus: #e69926; --radius: 10px; --radius-sm: 7px;
  --shadow: 0 1px 2px #1633530d, 0 2px 8px #1633530a; --shadow-lg: 0 18px 50px #152b4933;
  --side: 252px; --top: 54px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-500); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.neg { color: var(--err); }

/* ── Shell ─────────────────────────────────────────────────────────── */
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--top); background: var(--brand); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 10px; z-index: 50; box-shadow: 0 1px 4px #18335330; }
.topbar .burger { background: none; border: 0; color: #fff; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.topbar .burger:hover { background: #ffffff1a; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.brand img { height: 26px; background: #fff; border-radius: 4px; padding: 2px 5px; }
.brand .sep { width: 1px; height: 22px; background: #ffffff40; }
.brand .coname { font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.brand .product { font-weight: 500; opacity: .95; }
a.brand { color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
a.brand:hover { background: #ffffff14; }
/* Seitenmenü: alle auf/zu, Link «Alle Menüs» (20.10.2026) */
.nav-tools { display: flex; align-items: center; gap: 4px; padding: 0 4px 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; font-size: 12px; }
.nav-tools a { color: var(--brand-500); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.nav-tools button { all: unset; cursor: pointer; color: var(--muted); padding: 2px 6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; }
.nav-tools button:hover { background: var(--line-2); color: var(--ink); }
/* Alle Menüs auf einer Seite */
.menu-all { columns: 280px; column-gap: 14px; }
.menu-all .card { break-inside: avoid; margin: 0 0 14px; }
.menu-all .card-h h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.menu-all .mi { display: block; padding: 3px 0; color: var(--ink); text-decoration: none; }
.menu-all .mi:hover { color: var(--brand-500); text-decoration: underline; }
.menu-all .ms { margin: 8px 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
/* Summenzeilen (Saldenliste, Dimensionsanalyse) */
tr.tb-sum td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line); }
.menu-all mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
.search { flex: 1; max-width: 560px; margin-left: 12px; position: relative; }
.topbar .search input { width: 100%; height: 34px; border-radius: 8px; border: 1px solid #ffffff30; background: #ffffff18; color: #fff; padding: 0 12px 0 34px; }
.topbar .search input::placeholder { color: #ffffffa8; }
.topbar .search input:focus { background: #fff; color: var(--ink); outline: none; }
.search svg { position: absolute; left: 10px; top: 9px; opacity: .8; pointer-events: none; }
.search .results { position: absolute; top: 40px; left: 0; right: 0; background: #fff; color: var(--ink); border-radius: 10px; box-shadow: var(--shadow-lg); max-height: 420px; overflow: auto; padding: 6px; }
.search .results .r { display: flex; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; align-items: baseline; }
.search .results .r:hover, .search .results .r.sel { background: var(--brand-50); }
.search .results .k { font-size: 11px; color: var(--muted); width: 120px; flex: none; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.company-switch { height: 34px; border-radius: 8px; border: 1px solid #ffffff40; background: #ffffff14; color: #fff; padding: 0 10px; cursor: pointer; }
.company-switch option { color: var(--ink); }
.userbtn { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.userbtn:hover { background: #ffffff1a; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 12px; }

.sidebar { position: fixed; top: var(--top); bottom: 0; left: 0; width: var(--side); background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 8px 24px; z-index: 40; transition: transform .18s; scrollbar-width: thin; }
.nav-group { margin-top: 6px; }
.nav-group > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.nav-group > button:hover { background: var(--surface-2); }
.nav-group > button .chev { margin-left: auto; transition: transform .15s; opacity: .6; }
.nav-group.open > button .chev { transform: rotate(90deg); }
.nav-group .items { display: none; padding: 2px 0 4px 0; }
.nav-group.open .items { display: block; }
.nav-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); padding: 8px 12px 3px 40px; }
.nav-item { display: block; padding: 6px 10px 6px 40px; border-radius: 7px; color: var(--ink); position: relative; }
.nav-item:hover { background: var(--surface-2); text-decoration: none; }
.nav-item.active { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.nav-item.active::before { content: ""; position: absolute; left: 28px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--brand); }
.nav-single { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 600; }
.nav-single:hover { background: var(--surface-2); text-decoration: none; }
.nav-single.active { background: var(--brand-50); color: var(--brand); }
.nav-ico { width: 20px; height: 20px; display: grid; place-items: center; color: var(--brand-500); flex: none; }

.main { margin-left: var(--side); padding: calc(var(--top) + 18px) 24px 40px; min-height: 100vh; transition: margin .18s; }
body.nav-collapsed .sidebar { transform: translateX(-100%); }
body.nav-collapsed .main { margin-left: 0; }

/* ── Seitenkopf & Aktionsleiste ───────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.2px; }
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.crumbs a { color: var(--brand); text-decoration: none; font-weight: 500; }
.crumbs a:hover { text-decoration: underline; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; max-width: 900px; }
.page-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actionbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px; margin-bottom: 14px; box-shadow: var(--shadow); }
.actionbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.actionbar .grow { flex: 1; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; color: var(--brand); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--brand-50); border-color: var(--brand-100); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-700); }
.btn.danger { color: var(--err); }
.btn.danger:hover { background: var(--err-bg); border-color: #f5c2c2; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--brand-50); }
.btn.sm { height: 28px; padding: 0 9px; font-size: 12.5px; }
.btn.icon { width: 34px; padding: 0; justify-content: center; }
.btn svg { flex: none; }

/* ── Karten & Layout ──────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card > .card-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.card > .card-h h2, .card > .card-h h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card > .card-h .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card > .card-b { padding: 14px 16px; }
.card > .card-b.flush { padding: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1100px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ── KPI ──────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; cursor: default; }
.kpi[data-href] { cursor: pointer; }
.kpi[data-href]:hover { border-color: var(--brand-100); }
.kpi .l { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.kpi .v { font-size: 24px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-500); }
.kpi.ok::after { background: var(--ok); } .kpi.warn::after { background: var(--warn); } .kpi.err::after { background: var(--err); }

/* ── Tabellen ─────────────────────────────────────────────────────── */
.grid-tools { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.grid-tools .count { color: var(--muted); font-size: 12px; margin-left: auto; }
.grid-tools input[type=search] { height: 32px; width: 260px; }
.tbl-wrap { overflow: auto; max-width: 100%; }
.tbl-wrap.tall { max-height: calc(100vh - 260px); }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.tbl th { position: sticky; top: 0; background: #f1f5f9; color: var(--ink-2); font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; user-select: none; }
table.tbl th.num { text-align: right; }   /* Titel über Zahlen rechtsbündig wie die Zahlen (sonst gewinnt «th» oben mit left) */
table.tbl th.sortable { cursor: pointer; }
table.tbl th.sortable:hover { color: var(--brand); }
table.tbl th .arrow { font-size: 10px; margin-left: 4px; opacity: .7; }
table.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tbl tbody tr:hover td { background: #f6f9fd; }
table.tbl tbody tr.click { cursor: pointer; }
table.tbl tbody tr.sel td { background: var(--brand-50); }
table.tbl tfoot td { font-weight: 600; background: var(--surface-2); border-top: 1px solid var(--line); position: sticky; bottom: 0; }
table.tbl td.chk, table.tbl th.chk { width: 34px; text-align: center; }
table.tbl tr.group td { background: var(--surface-2); font-weight: 600; color: var(--ink-2); }
table.tbl tr.section td { padding-top: 14px; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); }   /* Erfolgsrechnung: Ertrag / Aufwand */
table.tbl tr.total td { font-weight: 700; border-top: 2px solid var(--ink-2); }
table.tbl tr.subtotal td { font-weight: 600; border-top: 1px solid var(--line); }
table.tbl td.indent { padding-left: 26px; }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* Editierbare Tabelle (Journal-/Rechnungszeilen) */
table.edit { min-width: 1180px; }
table.edit td { padding: 3px 4px; }
table.edit td input, table.edit td select { width: 100%; height: 30px; border: 1px solid transparent; border-radius: 5px; padding: 3px 6px; background: transparent; min-width: 0; }
table.edit td input:hover, table.edit td select:hover { border-color: var(--line); background: #fff; }
table.edit td input:focus, table.edit td select:focus { border-color: var(--brand-500); background: #fff; outline: none; box-shadow: 0 0 0 3px #0a4f9e22; }
table.edit td input.num { text-align: right; }
table.edit tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.edit tr.err td:first-child { box-shadow: inset 3px 0 0 var(--err); }
table.edit[data-readonly] td input, table.edit[data-readonly] td select { pointer-events: none; }
.lk { position: relative; }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); } .badge.info { background: var(--info-bg); color: var(--brand-500); }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Formulare ────────────────────────────────────────────────────── */
input[type=text], input[type=search], input[type=number], input[type=date], input[type=password], input[type=email], select, textarea {
  border: 1px solid var(--line); border-radius: 6px; background: #fff; min-height: 34px; padding: 5px 9px; max-width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-500); outline: none; box-shadow: 0 0 0 3px #0a4f9e1f; }
input[readonly], input:disabled, select:disabled, textarea[readonly] { background: #f6f8fa; color: #55657a; }
textarea { min-height: 80px; resize: vertical; width: 100%; }
.form { display: flex; flex-direction: column; gap: 12px; }
.fasttab { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.fasttab > summary { list-style: none; cursor: pointer; padding: 11px 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.fasttab > summary::-webkit-details-marker { display: none; }
.fasttab > summary .chev { transition: transform .15s; color: var(--muted); }
.fasttab[open] > summary .chev { transform: rotate(90deg); }
.fasttab > summary .hint { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 8px; }
.fasttab > .fields { padding: 4px 16px 16px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 18px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 600; color: #42556b; }
.field label .req { color: var(--err); margin-left: 2px; }
.field .help { font-size: 11.5px; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 34px; }
.toggle input { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px #0003; }
.toggle input:checked { background: var(--brand-500); }
.toggle input:checked::after { transform: translateX(16px); }
.dimrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }

/* Lookup-Dropdown */
/* Wertliste: eigene Ebene im <body>, Liste scrollt in sich (Mausrad/Touch nicht an die Seite weiterreichen) */
.lookup-pop { position: fixed; z-index: 2000; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); max-height: 380px; min-width: 280px; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; }
.lookup-pop .lk-head { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--muted); flex: none; }
.lookup-pop .lk-head .grow, .lk-info .grow { flex: 1; }
.lookup-pop .lk-tip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lookup-pop .lk-cnt { font-weight: 600; white-space: nowrap; }
.lookup-pop .lk-big { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; color: var(--brand-500); font-weight: 600; white-space: nowrap; }
.lookup-pop .lk-big:hover { background: var(--brand-50); }
.lookup-pop .lk-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; flex: 1 1 auto; min-height: 0; padding: 4px; }
.lookup-pop .lk-foot { flex: none; border-top: 1px solid var(--line-2); padding: 4px 10px; font-size: 12px; color: var(--muted); }
.lookup-pop .o, .lk-res .o { display: flex; align-items: flex-start; gap: 10px; padding: 6px 9px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.lookup-pop .o .k, .lk-res .o .k { font-weight: 600; min-width: 64px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lookup-pop .o .n, .lk-res .o .n { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.lookup-pop .o .n .s, .lk-res .o .n .s { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.lookup-pop .o mark, .lk-res .o mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
.lookup-pop .o.sel, .lookup-pop .o:hover, .lk-res .o.sel, .lk-res .o:hover { background: var(--brand-50); }
.lookup-pop .o.sel, .lk-res .o.sel { box-shadow: inset 3px 0 0 var(--brand-500); }
.lookup-pop .o.blocked, .lk-res .o.blocked { opacity: .55; }
.lookup-pop .lk-star { color: #d97706; }
.lookup-pop .lk-grp, .lk-res .lk-grp { position: sticky; top: -4px; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 5px 9px 3px; margin: 2px 0; border-radius: 4px; }
.lookup-pop .lk-grp.sub, .lk-res .lk-grp.sub { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.lookup-pop .lk-more { padding: 7px 9px; text-align: center; color: var(--brand-500); font-weight: 600; cursor: pointer; border-radius: 6px; }
.lookup-pop .lk-more:hover { background: var(--brand-50); }
.lookup-pop .lk-empty, .lk-res .lk-empty { padding: 10px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lk-res .lk-empty.big { display: block; text-align: center; padding: 28px 12px; font-size: 14px; }
/* Lupe im Feld (Klick = grosse Suche, F4) */
input.lk-in:not([readonly]):not(:disabled) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; padding-right: 26px; }
input.lk-in.lk-narrow:not([readonly]):not(:disabled) { background-image: none; padding-right: 6px; }
/* Grosse Suche (F4): Suchfeld zuerst, volle Höhe; Handy ganzer Bildschirm */
.lk-ov { position: fixed; inset: 0; z-index: 2100; background: #142c4966; display: flex; justify-content: center; align-items: flex-start; padding: 5vh 16px; animation: fade .12s; }
.lk-dlg { background: var(--surface, #fff); border-radius: 14px; box-shadow: var(--shadow-lg); width: min(760px, 100%); height: 90vh; height: 90dvh; display: flex; flex-direction: column; overflow: hidden; }
.lk-dh { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px 18px; } .lk-dh h2 { margin: 0; font-size: 17px; flex: 1; }
.lk-sb { display: flex; align-items: center; gap: 10px; margin: 6px 16px 8px; padding: 0 12px; border: 2px solid var(--brand-500); border-radius: 12px; color: var(--muted); }
.lk-sb input { flex: 1; border: 0; outline: 0; font-size: 18px; padding: 12px 0; background: transparent; min-width: 0; }
.lk-sb input:focus-visible { outline: none; } .lk-sb:focus-within { box-shadow: 0 0 0 3px var(--brand-100); }
.lk-flt { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 6px; }
.lk-chip { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lk-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.lk-info { display: flex; align-items: center; gap: 8px; padding: 2px 18px 6px; font-size: 12.5px; color: var(--muted); } .lk-info .lk-cnt { font-weight: 600; }
.lk-res { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 10px 10px; border-top: 1px solid var(--line-2); }
.lk-res .o { padding: 9px 10px; font-size: 14px; align-items: center; }
.lk-res .o .k { min-width: 80px; }
.lk-res .lk-more { display: block; margin: 8px auto; }
.lk-fav { all: unset; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; color: var(--faint); border-radius: 6px; }
.lk-fav.on { color: #d97706; } .lk-fav:hover { background: var(--line-2); }
.lk-df { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.lk-df:empty { display: none; }
@media (max-width: 600px) {
  .lk-ov { padding: 0; }
  .lk-dlg { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; }
  .lk-sb input { font-size: 17px; }
  .lk-info .small { display: none; }
  .lookup-pop .o { padding: 9px 9px; }
  .lookup-pop .lk-tip { display: none; }
}

/* ── Tabs ─────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tabs button { all: unset; cursor: pointer; padding: 9px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { all: unset; cursor: pointer; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button.active { background: var(--brand); color: #fff; }

/* ── Dialoge & Meldungen ──────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: #142c4966; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; animation: fade .12s; }
.dialog { background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); width: min(640px, 100%); display: flex; flex-direction: column; max-height: 88vh; }
.dialog.wide { width: min(1100px, 100%); }
.dialog.xwide { width: min(1400px, 100%); }
.dialog .d-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dialog .d-h h2 { margin: 0; font-size: 17px; font-weight: 600; }
.dialog .d-h .x { margin-left: auto; }
.dialog .d-b { padding: 16px 18px; overflow: auto; }
.dialog .d-f { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 12px 12px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 3000; max-width: 460px; }
.toast { background: #1d2b3a; color: #fff; padding: 11px 14px; border-radius: 9px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; animation: slide .18s; white-space: pre-line; }
.toast.ok { background: #14532d; } .toast.err { background: #8f1d1d; } .toast.warn { background: #7c4a03; }
@keyframes slide { from { transform: translateY(8px); opacity: 0; } }
.msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; white-space: pre-line; }
.msg.err { background: var(--err-bg); color: var(--err); border: 1px solid #f5c2c2; }
.msg.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #bfe5cc; }
.msg.info { background: var(--info-bg); color: var(--brand-500); border: 1px solid var(--brand-100); }
.msg.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #f3d7a6; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--brand-100); border-top-color: var(--brand); animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 30px; justify-content: center; }

/* ── Diverses ─────────────────────────────────────────────────────── */
.statusline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 500; }
.chart { width: 100%; height: 240px; }
.chart text { font-size: 11px; fill: var(--muted); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tasklist a { display: flex; justify-content: space-between; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.tasklist a:last-child { border-bottom: 0; }
.tasklist a:hover { color: var(--brand); text-decoration: none; }
.bs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .bs { grid-template-columns: 1fr; } }
.kbd { font: 11px/1 var(--font); border: 1px solid #ffffff55; border-radius: 4px; padding: 2px 5px; opacity: .8; }
.voucher-link { font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer; color: var(--brand-500); }
.voucher-link:hover { text-decoration: underline; }
.totalsbox { margin-left: auto; min-width: 320px; }
.totalsbox table { width: 100%; }
.totalsbox td { padding: 4px 0; }
.totalsbox tr.grand td { font-weight: 700; font-size: 16px; border-top: 2px solid var(--ink-2); padding-top: 8px; }
.dropzone { display: block; border: 2px dashed var(--line); border-radius: 10px; padding: 26px; text-align: center; color: var(--muted); cursor: pointer; }
.dropzone.over { border-color: var(--brand-500); background: var(--brand-50); }

@media (max-width: 900px) {
  :root { --side: 270px; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: none; }
  .main { margin-left: 0; padding: calc(var(--top) + 12px) 12px 30px; }
  .search { display: none; }
  .brand .product { display: none; }
}
@media print {
  .topbar, .sidebar, .actionbar, .page-head .right, .grid-tools, .toasts { display: none !important; }
  .main { margin: 0; padding: 0; }
  .card { box-shadow: none; border: 0; }
  body { background: #fff; }
}

/* ══ Corporate-Design-Erweiterungen (Cockpit, Palette, Visierung, Controlling) ══ */
.topbar { background: linear-gradient(90deg, var(--brand-700), var(--brand) 55%, #0b4a92); }
.cmdbtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #ffffff30; background: #ffffff12; color: #fff; cursor: pointer; font-weight: 600; }
.cmdbtn:hover { background: #ffffff22; }
.company-switch.single { pointer-events: none; appearance: none; padding-right: 10px; }
.nav-badge { margin-left: 6px; background: var(--focus); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 7px; line-height: 18px; display: inline-block; }
.nav-item .nav-badge { position: absolute; right: 10px; top: 7px; }

/* Befehlspalette */
.palette-ov { align-items: flex-start; padding-top: 12vh; }
.palette { width: min(680px, 100%); background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.palette .p-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette .p-in input { flex: 1; border: 0; box-shadow: none; font-size: 16px; padding: 6px 0; min-height: 0; color: var(--ink); }
.palette .p-in input:focus { box-shadow: none; }
.kbd2 { font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
.palette .p-list { overflow: auto; padding: 6px; }
.palette .p-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); padding: 8px 10px 4px; }
.palette .p-it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.palette .p-it.sel, .palette .p-it:hover { background: var(--brand-50); }
.palette .p-ico { color: var(--brand-500); display: grid; place-items: center; }
.palette .p-l { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .p-g { color: var(--muted); font-size: 12px; }
.palette .p-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--muted); background: var(--surface-2); }

/* Cockpit */
.hello { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hello h1 { margin: 0; font-size: 22px; font-weight: 600; }
.hello .sub { color: var(--muted); font-size: 13px; }
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.task { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); cursor: pointer; transition: border-color .12s, transform .12s; }
.task:hover { border-color: var(--brand-100); text-decoration: none; transform: translateY(-1px); }
.task .t-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-500); flex: none; }
.task.warn .t-ico { background: var(--warn-bg); color: var(--warn); } .task.err .t-ico { background: var(--err-bg); color: var(--err); } .task.ok .t-ico { background: var(--ok-bg); color: var(--ok); }
.task .t-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.task .t-l { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.task.done { opacity: .6; box-shadow: none; }
.section-h { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; }
.section-h h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .5px; }
.section-h .right { margin-left: auto; }
.autolist .a { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.autolist .a:last-child { border-bottom: 0; }
.autolist .a > * { min-width: 0; }
.autolist .a .muted.small[style] { max-width: 100% !important; }
.st { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); display: inline-block; }
.st.s1 { background: var(--ok); } .st.s0 { background: var(--brand-100); } .st.s2 { background: var(--warn); } .st.s3 { background: var(--err); } .st.off { background: var(--line); }

/* Fortschritt / Plan-Ist-Balken */
.pbar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; min-width: 80px; }
.pbar > i { display: block; height: 100%; background: var(--brand-500); border-radius: 999px; }
.pbar.over > i { background: var(--err); } .pbar.good > i { background: var(--ok); }

/* Geteilte Ansicht: Beleg-PDF neben Formular */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.docview { position: sticky; top: calc(var(--top) + 12px); height: calc(100vh - var(--top) - 40px); background: #525659; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.docview iframe, .docview img { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #525659; }
.docview .none { color: #dfe5ec; display: grid; place-items: center; height: 100%; font-size: 13px; }
@media (max-width: 1200px) { .split { grid-template-columns: 1fr; } .docview { position: static; height: 70vh; } }

/* Visumsschritte */
.steps { display: flex; gap: 0; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; font-size: 13px; }
.step .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); color: var(--muted); font-weight: 700; font-size: 12px; }
.step.ok .dot { background: var(--ok); color: #fff; } .step.err .dot { background: var(--err); color: #fff; } .step.cur .dot { background: var(--focus); color: #fff; }
.step + .step::before { content: ""; width: 24px; height: 2px; background: var(--line); margin-right: 6px; }

/* Visa-Karten (mobil) */
.appr { display: grid; gap: 12px; }
.appr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
.appr-card .who { font-weight: 600; }
.appr-card .amt { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.appr-card .meta { color: var(--muted); font-size: 12.5px; }
.appr-card .acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 600px) { .appr-card .acts .btn { flex: 1; justify-content: center; height: 42px; } }

/* Matrix (Dimensionskombination) */
table.matrix td.cell { text-align: right; font-variant-numeric: tabular-nums; }
table.matrix td.cell.pos { background: #e8f6ee; } table.matrix td.cell.neg { background: #fdecec; }
table.matrix th.rowh { position: sticky; left: 0; background: #f1f5f9; z-index: 2; }

/* Budget-Raster */
table.budget td input { text-align: right; width: 84px; }
table.budget td.acc { white-space: nowrap; }

/* Drop-Zone gross */
.dropzone.big { padding: 38px 20px; background: var(--surface); }
.dropzone .dz-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-50); color: var(--brand-500); display: grid; place-items: center; margin: 0 auto 10px; }
.dropzone b { color: var(--ink); }

/* Kennzahl-Mini */
.kpi .trend { font-size: 12px; font-weight: 600; margin-left: 6px; }
.kpi .trend.up { color: var(--ok); } .kpi .trend.down { color: var(--err); }
.spark { width: 100%; height: 36px; margin-top: 6px; }
.chart.line path.area { fill: #0a4f9e14; } .chart.line path.ln { fill: none; stroke: var(--brand-500); stroke-width: 2; }
.chart.line path.ln2 { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart.line line.zero { stroke: var(--err); stroke-dasharray: 3 3; }

/* Kopfzeilen-Statuschips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.codebox { font: 12px/1.45 Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
@media (max-width: 900px) { .cmdbtn span { display: none; } .tasks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tasks { grid-template-columns: 1fr; } }
.docview { display: flex; flex-direction: column; }
.docview .dv-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #3b3f42; color: #e8ecef; }
.docview .dv-bar .btn { color: #fff; } .docview .dv-bar .btn:hover { background: #ffffff1f; } .docview .dv-bar select { min-height: 28px; height: 28px; padding: 2px 6px; max-width: 220px; }
.docview .dv-img { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 10px; }
.docview .dv-img img { width: 100%; height: auto; max-width: 900px; box-shadow: 0 2px 12px #0006; background: #fff; }
@media (max-width: 600px) {
  .topbar { gap: 8px; padding-right: 8px; }
  .company-switch { max-width: 120px; text-overflow: ellipsis; }
  .userbtn #userName { display: none; }
  .brand .sep { display: none; }
}

/* Jahresrechnung */
.annual-doc { display: flex; flex-direction: column; gap: 16px; }
.doc-cover h1 { margin: 6px 0 4px; font-size: 26px; color: var(--brand); }
table.fin td, table.fin th { padding: 6px 12px; }
table.fin th.num, table.fin td.num { width: 150px; }
table.fin tr.sp td { height: 10px; padding: 0; border: 0; }
.sub-h { padding: 10px 16px 4px; font-weight: 600; color: var(--ink-2); }
.notes { padding: 6px 16px 16px; }
.note h3 { font-size: 13.5px; margin: 14px 0 4px; color: var(--ink-2); }
.note p { margin: 0; line-height: 1.55; }
.note-ed { padding: 10px 16px 0; } .note-ed label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 4px; color: #42556b; }
@media print {
  .annual-doc .card { border: 0; }
  .annual-doc .doc-sec { break-before: page; }
  .annual-doc .doc-cover { padding-top: 30vh; text-align: center; }
  .annual-doc .doc-cover h1 { font-size: 34px; }
  table.fin { font-size: 11px; }
  .tbl-wrap.tall { max-height: none; }
}

/* Grid: Nachladen grosser Listen */
.tbl tr.grid-more td { text-align: center; padding: 10px; background: transparent; }
.tbl tr.grid-more:hover td { background: transparent; }

/* Benutzer & Rollen */
.perm { display: inline-block; min-width: 18px; text-align: center; font-weight: 700; }
.perm.p2 { color: var(--ok); } .perm.p1 { color: var(--brand-500); } .perm.p0 { color: var(--muted); }
.role-info { margin-top: 6px; line-height: 1.6; }
.comp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; padding: 8px 0; }
.pwbox { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.pwbox code { font-size: 18px; letter-spacing: 1px; padding: 8px 12px; background: var(--line-2); border-radius: 8px; user-select: all; }
.perm-tbl { margin-top: 14px; } .perm-tbl td { vertical-align: middle; }
.row-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.role-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.role-card .rc-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .role-card .rc-h b { font-size: 15px; margin-right: auto; }
.rc-perms { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-p { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.rc-p.lv0 { text-decoration: line-through; opacity: .55; }
.rc-p.lv1 { background: var(--info-bg); color: var(--brand-500); border-color: transparent; }
.rc-p.lv2 { background: var(--ok-bg); color: var(--ok); border-color: transparent; font-weight: 600; }
.rc-f { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-2); }
.rc-f .btn { margin-left: 6px; }
.perm-matrix th.c, .perm-matrix td.c { text-align: center; white-space: nowrap; }
.dialog .seg button { padding: 5px 10px; font-size: 12.5px; }
@media (max-width: 700px) { .perm-tbl td:nth-child(2), .perm-tbl th:nth-child(2) { display: none; } }

/* Import & Export */
.card.pad { padding: 18px 20px; } .card.pad h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 15px; }
.grid2 + .card, .grid2 { margin-bottom: 16px; }
.tbl.transfer tr.grp td { background: var(--line-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tbl.transfer td.r { text-align: right; white-space: nowrap; } .tbl.transfer td.r .btn { margin-left: 4px; }
.imp-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 22px; display: flex; gap: 16px; align-items: center; cursor: pointer; color: var(--ink-2); transition: .15s; }
.imp-drop:hover, .imp-drop.over, .imp-drop:focus { border-color: var(--brand-500); background: var(--info-bg); outline: none; }
.imp-drop.has { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.imp-help { margin: 10px 2px 14px; line-height: 1.5; } .imp-help a { white-space: nowrap; }
.imp-sum { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.imp-err { max-height: 240px; overflow: auto; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; }
.imp-res details { margin-top: 6px; } .imp-res summary { cursor: pointer; padding: 6px 0; }
.imp-map select { width: 100%; } .imp-map tr.unmapped td:first-child b { color: var(--muted); font-weight: 600; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } .tbl.transfer td:nth-child(2), .tbl.transfer th:nth-child(2) { display: none; } }

/* Notizen & Dateien (Sticky Notes, Anhänge, Schnellansicht) */
.rx .card-h { display: flex; align-items: center; gap: 12px; } .rx .card-h h2 { display: flex; gap: 8px; align-items: center; margin-right: auto; }
.rx-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; padding: 14px 16px 16px; }
.note-new textarea { width: 100%; resize: vertical; min-height: 54px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; background: #fffdf2; }
.note-new textarea:focus { outline: 2px solid var(--brand-500); outline-offset: -1px; background: #fff; }
.note-tools { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; flex-wrap: wrap; }
.note-colors { display: inline-flex; gap: 6px; }
.nc { all: unset; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,.08); }
.nc.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-500); }
.nc.yellow, .note.yellow, .note-banner.yellow { background: #fff3b0; } .nc.green, .note.green, .note-banner.green { background: #d9f5d6; }
.nc.blue, .note.blue, .note-banner.blue { background: #d8ebff; } .nc.pink, .note.pink, .note-banner.pink { background: #ffdbe8; }
.nc.orange, .note.orange, .note-banner.orange { background: #ffe0bf; }
.notes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.note { position: relative; padding: 12px 12px 8px; border-radius: 3px 3px 14px 3px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 14px -8px rgba(0,0,0,.25);
  transform: rotate(-.4deg); transition: transform .12s; display: flex; flex-direction: column; min-height: 96px; }
.note:nth-child(even) { transform: rotate(.5deg); } .note:hover { transform: rotate(0) translateY(-1px); }
.note.pinned { outline: 2px solid #e0a400; }
.note-pin { position: absolute; top: -8px; right: -6px; background: #e0a400; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; }
.note-txt { white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.45; color: #3b3320; flex: 1; }
.note-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11.5px; color: rgba(0,0,0,.55); gap: 6px; }
.btn.xs { padding: 3px 6px; min-height: 0; }
.note-banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; margin: 0 0 12px; color: #3b3320; border-left: 4px solid #e0a400; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.note-banner svg { flex: none; margin-top: 2px; color: #b07d00; }
.file-drop { border: 2px dashed var(--line); border-radius: 10px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; cursor: pointer; color: var(--muted); margin-bottom: 10px; transition: .15s; }
.file-drop:hover, .file-drop.over, .file-drop:focus { border-color: var(--brand-500); background: var(--info-bg); color: var(--ink-2); outline: none; }
.files-list { display: flex; flex-direction: column; gap: 6px; }
.file { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
.file:hover { border-color: var(--line); box-shadow: 0 2px 8px -4px rgba(0,0,0,.2); }
.file .fn { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.file .fn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ft { flex: none; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #fff; background: #8a94a6; }
.ft.pdf { background: #d64545; } .ft.bild { background: #7a5af5; } .ft.xls { background: #1f8a4c; } .ft.doc { background: #2b6cd4; } .ft.mail { background: #e08a00; }
.qv-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .qv-bar .grow { flex: 1; }
.qv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.qv-body { height: 72vh; overflow: auto; background: var(--line-2); border-radius: 10px; padding: 10px; }
.qv-img { display: flex; justify-content: center; } .qv-img img { max-width: 100%; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
.qv-text { white-space: pre-wrap; word-break: break-word; background: #fff; padding: 16px; border-radius: 8px; margin: 0; font-size: 12.5px; min-height: 100%; }
.qv-tbl { background: #fff; border-radius: 8px; max-height: 100%; } .qv-tbl td, .qv-tbl th { white-space: nowrap; }
.tbl td.xcol { padding-left: 6px; padding-right: 0; white-space: nowrap; }
.xi { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; margin-right: 2px; }
.xi.pin { background: #fff3b0; color: #b07d00; } .xi.note { background: #fff8d6; color: #9a7b00; } .xi.file { background: var(--info-bg); color: var(--brand-500); }
@media (max-width: 900px) { .rx-grid { grid-template-columns: 1fr; } .qv-body { height: 65vh; } }

/* Auswertungen Debitoren/Kreditoren, Berichtsübersicht */
.actionbar.wrap { flex-wrap: wrap; row-gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--info-bg); color: var(--brand-500); border-radius: 999px; padding: 2px 4px 2px 10px; font-weight: 600; font-size: 12.5px; }
.pos { color: var(--ok); } td .pos, td .neg { font-weight: 600; }
.aging-card { padding: 14px 16px; margin-bottom: 16px; }
.aging-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line-2); }
.aging-bar span { height: 100%; } .aging-bar span + span { border-left: 2px solid #fff; }
.aging-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; }
.aging-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.aging-bar .ok, .aging-legend i.ok { background: #2e9d63; } .aging-bar .b1, .aging-legend i.b1 { background: #f2c14e; }
.aging-bar .b2, .aging-legend i.b2 { background: #f09a3e; } .aging-bar .b3, .aging-legend i.b3 { background: #e46a3a; }
.aging-bar .b4, .aging-legend i.b4 { background: #cf3e3e; } .aging-bar .b5, .aging-legend i.b5 { background: #8f1d2c; }
.tbl td.bk3, .tbl td.bk4, .tbl td.bk5 { color: var(--err); }
/* Kennzahl-Kacheln und Legenden als Klickfilter (kpiFilter in ui.js) */
.kf { cursor: pointer; user-select: none; }
.kpi.kf:hover { border-color: var(--brand-100); background: var(--surface-2, #f6f8fb); }
.kpi.kf:focus-visible, .kf:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.kpi.kf-on { border-color: var(--brand-500); background: var(--info-bg); box-shadow: 0 0 0 1px var(--brand-500) inset, var(--shadow); }
.kpi.kf-on .l::after { content: " · gefiltert"; color: var(--brand-500); text-transform: none; letter-spacing: 0; }
.aging-legend .kf { border-radius: 6px; padding: 2px 6px; margin: -2px -6px; }
.aging-legend .kf:hover { background: var(--line-2); }
.aging-legend .kf-on { background: var(--info-bg); box-shadow: 0 0 0 1px var(--brand-500) inset; }
.aging-bar span.kf:hover { filter: brightness(1.12); }
.aging-bar span.kf-on { box-shadow: 0 0 0 2px var(--brand-500) inset; }
.chip.kf-chip { background: var(--brand-500); color: #fff; } .chip.kf-chip .btn { color: #fff; }
.kf-hint { margin: 0 0 8px; font-size: 12.5px; }
.msg .kf { text-decoration: underline dotted; text-underline-offset: 3px; } .msg .kf-on { font-weight: 600; text-decoration-style: solid; }
.sharebar { display: inline-block; width: 60px; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.sharebar i { display: block; height: 100%; background: var(--brand-500); }
.report-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.report-hub .card { margin: 0; } .report-hub h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.report-link { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; margin: 0 -10px; border-radius: 8px; color: inherit; text-decoration: none; }
.report-link:hover { background: var(--info-bg); } .report-link b { color: var(--brand); font-weight: 600; }
@media print {
  #sidebar, .topbar, header, .actionbar, .grid-tools, .page-head .right, .toast, .rx .note-new, .rx .file-drop { display: none !important; }
  body, #main { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .tbl-wrap.tall { max-height: none !important; overflow: visible !important; }
  .card, .kpi { box-shadow: none !important; break-inside: avoid; }
  tr.grid-more { display: none; }
}

/* E-Mail */
.mail-atts { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.mail-log { margin-top: 14px; } .mail-log h3 { display: flex; gap: 6px; align-items: center; font-size: 13px; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mail-log .ml { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--line-2); }
.mail-log .ml-s { display: flex; flex-direction: column; min-width: 0; } .mail-log .ml-s b { font-weight: 600; }

.fields .field.full { grid-column: 1 / -1; }
.fields .field.full textarea { width: 100%; }

/* Personal: Abwesenheitskalender */
.cal-card { padding: 12px 14px; margin-bottom: 16px; }
.cal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .cal-bar b { min-width: 130px; text-align: center; } .cal-bar .grow { flex: 1; }
.cal-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.cal-legend i.req { background: repeating-linear-gradient(45deg, #8a94a6 0 2px, #fff 2px 4px); border: 1px solid #8a94a6; }
table.cal { border-collapse: collapse; width: 100%; font-size: 11px; }
table.cal th, table.cal td { border: 1px solid var(--line-2); text-align: center; padding: 0; min-width: 22px; height: 28px; }
table.cal th { color: var(--muted); font-weight: 600; line-height: 1.15; padding: 3px 0; background: #fff; }
table.cal .nm { text-align: left; padding: 4px 8px; min-width: 170px; white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; }
table.cal .nm b { display: block; font-size: 12.5px; } table.cal .nm span { display: block; }
table.cal .we { background: #f3f4f6; } table.cal .hol { background: #fdf2d6; } table.cal .td { box-shadow: inset 0 0 0 2px var(--brand-500); }
table.cal td[data-d] { cursor: cell; }
table.cal .ab { display: block; height: 18px; margin: 0 1px; border-radius: 4px; background: var(--c); }
table.cal .ab.req { background: repeating-linear-gradient(45deg, var(--c) 0 4px, color-mix(in srgb, var(--c) 35%, #fff) 4px 8px); }
table.cal .ab.half { height: 9px; margin-top: 9px; }
.kpis.compact .kpi { padding: 10px 12px; } .kpis.compact .kpi .v { font-size: 18px; }

/* Rundgänge */
.help-btn { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); margin-left: 8px; flex: none; }
.help-btn:hover, .help-btn:focus-visible { background: rgba(255,255,255,.26); }
.tour-shade { position: fixed; inset: 0; z-index: 9990; background: rgba(15, 23, 42, .62); }
.tour-shade.clear { background: transparent; } .tour-shade.pass { pointer-events: none; }
.tour-spot { position: fixed; z-index: 9991; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .62), 0 0 0 3px #f2c14e inset;
  transition: left .25s, top .25s, width .25s, height .25s; }
.tour-spot.click { animation: tourpulse 1.4s infinite; }
@keyframes tourpulse { 0%,100% { box-shadow: 0 0 0 9999px rgba(15,23,42,.62), 0 0 0 3px #f2c14e inset; } 50% { box-shadow: 0 0 0 9999px rgba(15,23,42,.62), 0 0 0 6px #f2c14e inset; } }
.tour-tip { position: fixed; z-index: 9992; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.45); padding: 14px 16px 12px; width: 360px; max-width: calc(100vw - 24px); }
.tour-tip.center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 440px; }
.tour-tip.sheet { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; }
.tt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .tt-h b { font-size: 15px; flex: 1; }
.tt-n { font-size: 11px; font-weight: 700; color: var(--brand-500); background: var(--info-bg); border-radius: 999px; padding: 2px 8px; }
.tt-b { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.tt-do { margin-top: 8px; font-weight: 600; color: #b07d00; display: flex; gap: 4px; align-items: center; }
.tt-f { display: flex; align-items: center; gap: 6px; margin-top: 12px; justify-content: flex-end; } .tt-dots { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.tt-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .tt-dots i.past { background: var(--brand-100, #9fb7d9); } .tt-dots i.on { background: var(--brand-500); width: 16px; border-radius: 3px; }
.help-pop { position: fixed; z-index: 9000; width: 380px; max-width: calc(100vw - 16px); max-height: 75vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.35); border: 1px solid var(--line); }
.hp-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.hp-it { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 14px; }
.hp-it:hover, .hp-it:focus-visible { background: var(--info-bg); } .hp-ic { color: var(--brand-500); margin-top: 2px; } .hp-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hp-ok { color: var(--ok); } .hp-f { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line-2); }
.tour-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tour-card { display: flex; gap: 14px; padding: 16px; margin: 0; } .tour-card .tc-ic { color: var(--brand-500); background: var(--info-bg); border-radius: 12px; width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.tour-card.done .tc-ic { color: var(--ok); background: var(--ok-bg); } .tc-b { flex: 1; display: flex; flex-direction: column; } .tc-b p { margin: 4px 0 10px; }
.tc-f { display: flex; align-items: center; gap: 8px; margin-top: auto; } .tc-f .btn { margin-left: auto; }

/* Fehlermeldungen mit Lösungshinweis */
.toast .t-b { flex: 1; } .toast .t-h { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.2); font-size: 12.5px; opacity: .95; display: flex; gap: 6px; align-items: flex-start; }
.toast .t-h svg { flex: none; margin-top: 2px; }
.toast .t-x { all: unset; cursor: pointer; opacity: .7; font-size: 18px; line-height: 1; padding: 0 2px; } .toast .t-x:hover { opacity: 1; }
.msg .msg-hint { margin-top: 6px; font-weight: 400; display: flex; gap: 6px; align-items: flex-start; } .msg .msg-hint svg { flex: none; margin-top: 2px; }
input.inv, select.inv, textarea.inv, .btn.inv { border-color: var(--err) !important; box-shadow: 0 0 0 3px rgba(207, 62, 62, .18) !important; background: #fff7f7; }

/* Journalprüfung und Saldovorschau */
.msg.problems ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.msg.problems li { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 6px 8px; background: rgba(255,255,255,.55); border-radius: 8px; font-weight: 400; color: var(--ink-2); }
.msg.problems li.go { cursor: pointer; } .msg.problems li.go:hover { background: #fff; } .msg.problems .pl { font-weight: 700; color: var(--err); white-space: nowrap; }
.msg.problems .msg-hint { display: flex; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.bal-card .card-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bal-card .card-h h2 { display: flex; gap: 8px; align-items: center; margin-right: auto; }
.bal-card td.mv { font-weight: 600; }
@media (max-width: 700px) { .msg.problems li { grid-template-columns: 1fr; gap: 2px; } }

.pbal { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--line-2); font-size: 13px; }
.pbal .pb-h { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.pbal .pb-r { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; align-items: center; }

/* Kontierungseinstellungen */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.ps-card { margin: 0; } .ps-card .card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ps-card .card-h h2 { display: flex; gap: 8px; align-items: center; }
.ps-d { margin: 0; padding: 0 16px 6px; } .ps-dims { padding: 0 16px 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ps-tbl td { padding-top: 6px; padding-bottom: 6px; } .ps-tbl .ps-grp td { background: var(--line-2); font-weight: 700; font-size: 12.5px; }
.ps-tbl .ps-f { color: var(--muted); width: 38%; } .ps-tbl td.r { text-align: right; width: 32%; } .ps-tbl .ps-m { color: var(--muted); margin-top: 3px; text-align: right; }
.ps-tbl tr.err td.ps-f { color: var(--err); font-weight: 600; } .ps-tbl tr.warn td.ps-f { color: var(--warn); font-weight: 600; }
@media (max-width: 520px) { .ps-grid { grid-template-columns: 1fr; } }

/* ══ Mobile (Handy/Tablet) ═════════════════════════════════════════════ */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  /* iOS zoomt bei Schrift < 16px in Eingabefeldern */
  input, select, textarea { font-size: 16px; }
  .main { padding-left: 10px; padding-right: 10px; }
  .page-head { align-items: flex-start; }
  .page-head h1 { font-size: 19px; }
  .page-head .right { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .actionbar { flex-wrap: wrap; gap: 6px; }
  .actionbar > input, .actionbar > select { flex: 1 1 130px; min-width: 0; }
  .actionbar .grow { display: none; }
  .actionbar .sep { display: none; }
  .btn { min-height: 38px; }
  .btn.sm { min-height: 34px; }
  .kpis { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .v { font-size: 18px; }
  .kpi .s { font-size: 11.5px; }
  .fields { grid-template-columns: 1fr !important; }
  .grid2, .grid3, .split, .main [style*="grid-template-columns"]:not(.kpis) { grid-template-columns: 1fr !important; }
  .grid2 > *, .grid3 > *, .split > * { min-width: 0; }
  .seg { display: flex; flex-wrap: wrap; }
  .card { border-radius: 10px; }
  /* Tabellen ausserhalb eines Scrollcontainers horizontal scrollbar machen */
  .main table.tbl:not(.tbl-wrap table):not(.grid) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  .tbl-wrap.tall { max-height: none; }
  /* Dialoge bildschirmfüllend */
  /* Dialoge als Bottom-Sheet: volle Breite, Aktionen immer sichtbar */
  .overlay { padding: 0; align-items: flex-end; }
  .dialog, .dialog.wide, .dialog.xwide { width: 100%; max-height: 94dvh; border-radius: 14px 14px 0 0; }
  .dialog.wide, .dialog.xwide { height: 94dvh; }
  .dialog .d-b { flex: 1; padding: 14px; }
  .dialog .d-f { border-radius: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .dialog .d-f .btn { flex: 1 1 auto; justify-content: center; }
  .grid-tools { flex-wrap: wrap; }
  .card > .card-h { flex-wrap: wrap; }
  .card > .card-h > * { min-width: 0; }
  .main .right { flex-wrap: wrap; }
  .grid-tools input[type=search] { flex: 1 1 100%; max-width: none; }
  .topbar .help-btn, .topbar .cmdbtn kbd { display: none; }
}
@media (max-width: 640px) {
  /* Listen als Karten: jede Zeile eine Karte, Spaltenname als Beschriftung */
  table.tbl.grid.cards thead { display: none; }
  table.tbl.grid.cards, table.tbl.grid.cards tbody, table.tbl.grid.cards tfoot { display: block; width: 100%; }
  table.tbl.grid.cards tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); position: relative; }
  table.tbl.grid.cards tr.click:active { background: var(--brand-50); }
  table.tbl.grid.cards td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; border: 0; text-align: right; min-height: 0; white-space: normal; }
  table.tbl.grid.cards td:empty { display: none; }
  table.tbl.grid.cards td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; flex: 0 0 auto; max-width: 45%; }
  table.tbl.grid.cards td[data-label=""]::before { display: none; }
  table.tbl.grid.cards td.c0 { font-weight: 600; font-size: 15px; text-align: left; justify-content: flex-start; padding-right: 34px; }
  table.tbl.grid.cards td.c0::before { display: none; }
  table.tbl.grid.cards td.chk { position: absolute; right: 10px; top: 8px; padding: 0; }
  table.tbl.grid.cards td.xcol { position: absolute; right: 40px; top: 10px; padding: 0; }
  table.tbl.grid.cards td.xcol::before { display: none; }
  table.tbl.grid.cards tr { display: flex; flex-direction: column; }
  table.tbl.grid.cards td.c0 { order: -1; }
  table.tbl.grid.cards td.chk::before { display: none; }
  table.tbl.grid.cards td[colspan] { display: block; text-align: center; }
  table.tbl.grid.cards td[colspan]::before { display: none; }
  table.tbl.grid.cards tfoot tr { background: var(--bg-2, #f4f6f9); font-weight: 600; }
}

.searchbtn { display: none; background: none; border: 0; color: #fff; width: 38px; height: 38px; border-radius: 8px; place-items: center; cursor: pointer; }
.searchbtn:hover { background: #ffffff1a; }
@media (max-width: 900px) {
  .searchbtn { display: grid; }
  body.search-open .search { display: block; position: absolute; left: 8px; right: 8px; top: 7px; max-width: none; z-index: 5; }
  body.search-open .search input { background: #fff; color: var(--ink); height: 40px; }
  body.search-open .search .results { position: fixed; left: 8px; right: 8px; top: calc(var(--top) + 4px); width: auto; max-height: 75dvh; }
}
@media (max-width: 600px) {
  .topbar { gap: 4px; padding-left: 6px; }
  .top-right { gap: 4px; }
  .company-switch { max-width: 92px; padding-left: 8px; padding-right: 22px; }
  .userbtn { padding: 0 2px; }
  .brand img { height: 28px; }
}

/* ══ Sticky Notes & Aufgaben ═══════════════════════════════════════════ */
.nc.grey, .note.grey, .note-banner.grey { background: #e8eaee; }
.note-row { display: flex; gap: 8px; align-items: flex-start; }
.note-row input[type=checkbox] { margin-top: 3px; flex: none; }
.note.done { opacity: .55; } .note.done .note-txt { text-decoration: line-through; }
.note-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.ntag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: rgba(0,0,0,.06); color: #4a5568; white-space: nowrap; text-decoration: none; }
.ntag.over { background: #fde2e1; color: #b42318; font-weight: 600; } .ntag.today { background: #fff1c2; color: #8a5a00; font-weight: 600; }
.ntag.hi { background: #fde2e1; color: #b42318; } .ntag.src { background: var(--brand-50, #eef3fa); color: var(--brand, #183353); }
.note-tools .ndue { height: 30px; width: 140px; }
.notes-done { margin-top: 8px; }
.sticky-tab { position: fixed; right: 0; top: 42%; z-index: 60; background: #f5c400; color: #3b3320; border: 0; border-radius: 10px 0 0 10px; padding: 10px 8px; cursor: pointer;
  box-shadow: -2px 2px 10px rgba(0,0,0,.18); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sticky-tab .n { background: #b42318; color: #fff; border-radius: 9px; font-size: 11px; min-width: 18px; padding: 0 4px; text-align: center; }
.sticky-drawer { position: fixed; right: 0; top: var(--top); bottom: 0; width: min(380px, 100vw); background: var(--surface, #fff); z-index: 70; box-shadow: -6px 0 24px rgba(0,0,0,.18);
  display: flex; flex-direction: column; animation: slidein .15s; }
@keyframes slidein { from { transform: translateX(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.sticky-drawer .sd-h { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sticky-drawer .sd-b { padding: 12px 14px; overflow: auto; flex: 1; }
.sticky-drawer .notes-list { grid-template-columns: 1fr !important; }
.stk-sum { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; flex-wrap: wrap; border-left: 4px solid #f5c400; }
.stk-sum-t { flex: 1; font-size: 15px; font-weight: 500; min-width: 220px; } .stk-sum-a { display: flex; gap: 8px; align-items: center; }
.tabs .tb-n { margin-left: 6px; background: var(--brand-50, #eef3fa); color: var(--brand, #183353); border-radius: 9px; padding: 0 6px; font-size: 11px; }
.stk-list { display: flex; flex-direction: column; }
.stk-item { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: start; padding: 10px 14px; border-bottom: 1px solid var(--line-2, #eef1f5); border-left: 4px solid transparent; }
.stk-item:last-child { border-bottom: 0; }
.stk-item.c-yellow { border-left-color: #f5d742; } .stk-item.c-green { border-left-color: #8fd18a; } .stk-item.c-blue { border-left-color: #8ec2f5; }
.stk-item.c-pink { border-left-color: #f5a3c0; } .stk-item.c-orange { border-left-color: #f5b77a; } .stk-item.c-grey { border-left-color: #c3c8d0; }
.stk-item.src-flow { border-left-color: #7c5cff; } .stk-item.src-hint { border-left-color: #e0a400; }
.stk-item.done .stk-t { text-decoration: line-through; color: var(--muted); }
.stk-item input[type=checkbox] { margin-top: 3px; } .stk-ic { color: var(--muted); padding-top: 1px; }
.stk-main { min-width: 0; } .stk-t { white-space: pre-wrap; word-break: break-word; }
.stk-s { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stk-facts { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-top: 4px; color: #4a5568; } .stk-facts s { color: #b42318; }
.stk-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; }
.stk-act { display: flex; gap: 2px; } .stk-act .sstar { font-size: 16px; line-height: 1; color: #b3b9c4; } .stk-act .sstar.on { color: #e0a400; }
.stk-grp { padding: 8px 14px; background: var(--surface-2, #f6f8fb); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--line-2, #eef1f5); }
.stk-goals .card-b { display: flex; flex-direction: column; gap: 8px; }
.stk-goal { display: flex; gap: 10px; align-items: center; } .stk-goal input[type=text] { flex: 1; font-size: 17px; font-weight: 500; height: 42px; }
.stk-goal input[type=checkbox] { width: 20px; height: 20px; }
.stk-review summary { cursor: pointer; list-style: none; }
.stk-link { display: flex; gap: 6px; margin-bottom: 6px; } .stk-link input:first-child { width: 34%; } .stk-link input:nth-child(2) { flex: 1; }
@media (max-width: 700px) {
  .stk-item { grid-template-columns: 22px 1fr auto; } .stk-tags { grid-column: 2 / 3; justify-content: flex-start; max-width: none; }
  .sticky-tab { top: auto; bottom: 90px; }
}

/* ══ Listen: Filter, Gruppen, Ansichten, Pivot ═══════════════════════ */
.grid-tools .vsel { height: 30px; max-width: 200px; font-size: 13px; }
.grid-tools .btn.active { background: var(--brand-50, #eef3fa); color: var(--brand, #183353); }
.grid-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px; }
.grid-chips:not(:empty) { padding: 0 12px 8px; }
.grid-chips .chip { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-50, #eef3fa); border-radius: 12px; padding: 2px 4px 2px 10px; font-size: 12px; }
.tbl tr.filter-row th { padding: 4px 6px; background: var(--surface-2, #f6f8fb); position: static; }
.tbl tr.filter-row input { width: 100%; height: 26px; font-size: 12px; padding: 2px 6px; min-width: 60px; }
.tbl tr.grp-row td { background: var(--surface-2, #f6f8fb); font-weight: 600; cursor: pointer; border-top: 1px solid var(--line); }
.tbl tr.grp-row .chev { display: inline-block; width: 14px; color: var(--muted); }
.gcfg-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gcfg-col { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--line-2, #eef1f5); }
.gcfg-f { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; margin-bottom: 5px; font-size: 13px; }
.gcfg-f input { height: 28px; }
.pivot-wrap { max-height: 60vh; overflow: auto; margin-top: 8px; }
.tbl.pivot tfoot td, .tbl.pivot td:last-child { font-weight: 600; }
@media (max-width: 700px) {
  .gcfg-wrap { grid-template-columns: 1fr; }
  table.tbl.grid.cards tr.grp-row { display: block; }
  table.tbl.grid.cards tr.grp-row td { display: none; }
  table.tbl.grid.cards tr.grp-row td.grp-l { display: block !important; text-align: left; }
  table.tbl.grid.cards tr.grp-row td.grp-l::before { display: none; }
  .grid-tools .vsel { max-width: 140px; }
}

/* Drill-down: Zahlen in Berichten führen zu den Buchungen */
a.drill { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(24, 51, 83, .35); cursor: pointer; }
a.drill:hover { color: var(--brand-500, #2563eb); border-bottom-style: solid; }
td.neg a.drill, .neg a.drill { color: inherit; }

/* Schlussrechnung: automatisch berechnete Abzüge */
.tbl.edit tr.deduction td { background: var(--surface-2, #f6f7f9); }
.tbl.edit tr.deduction input { color: var(--muted); font-style: italic; }

/* Kontext-Hilfe */
.hlp-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0,0,0,.12); z-index: 1200; display: flex; flex-direction: column; animation: hlpIn .18s ease-out; }
@keyframes hlpIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.hlp-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hlp-h b { display: flex; gap: 8px; align-items: center; }
.hlp-b { padding: 12px 16px 24px; overflow-y: auto; flex: 1; }
.hlp-b input[type=search] { width: 100%; margin-bottom: 10px; }
.hlp-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 16px 0 6px; }
.hlp-topic h3 { margin: 4px 0 6px; font-size: 15px; }
.hlp-what { margin: 0 0 8px 18px; padding: 0; font-size: 13px; }
.hlp-what li { margin: 3px 0; }
.hlp-how { border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; padding: 6px 10px; background: var(--surface-2, #f7f8fa); }
.hlp-how summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.hlp-how ol { margin: 6px 0 2px 18px; padding: 0; font-size: 13px; }
.hlp-how li { margin: 3px 0; }
.hlp-f { margin-top: 16px; font-size: 12px; color: var(--muted); }
.hlp-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.hlp-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
@media (max-width: 640px) { .hlp-panel { width: 100vw; } }

/* Erfassungsjournal: Spalten ziehbar/verschiebbar, Detailbereich */
table.jt th { overflow: hidden; text-overflow: ellipsis; cursor: grab; }
table.jt th .rz { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; }
table.jt th .rz:hover, table.jt th.rzing .rz { background: var(--brand-500); opacity: .35; }
table.jt th.dragging { opacity: .45; }
table.jt th.drop-l { box-shadow: inset 3px 0 0 var(--brand-500); }
table.jt th.drop-r { box-shadow: inset -3px 0 0 var(--brand-500); }
table.jt td { overflow: hidden; white-space: nowrap; }
table.jt td .jt-tax, table.jt td .jt-bal { display: block; text-align: right; padding: 0 6px; }
table.jt tr.sel td { background: var(--brand-50); }
.jt-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.jdet .jd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.jdet h3 { font-size: 13px; margin: 0 0 6px; color: var(--ink-2); }
.jdet .jd-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 2px 0; align-items: center; }
.jdet .jd-kv > span:first-child { color: var(--muted); }
.jdet .jd-kv > span:last-child { min-width: 0; max-width: 70%; }
.jdet .jd-bal + .jd-bal { margin-top: 10px; }

/* Einfach buchen: Kontofeld mit erkannter Kontoart */
.acc-in { display: flex; align-items: center; gap: 4px; }
.acc-in input { flex: 1; min-width: 0; }
.acc-t { flex: none; width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: transparent; }
.acc-t:empty { width: 0; }
.acc-t.tS { background: #64748b; } .acc-t.tD { background: #0a7d4f; } .acc-t.tK { background: #b45309; } .acc-t.tB { background: #0a4f9e; } .acc-t.tA { background: #7c3aed; }
.acc-t:not([class*=" t"]):not(:empty) { background: var(--warn); }

/* Lernende Erfassung: übernommener Vorschlag */
table.jt tr.suggested td { background: #fffbea; }

/* Heute: Kacheln als Links mit Status */
.today-k a.kpi { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.today-k a.kpi:hover { border-color: var(--brand-100); }

/* Monatsabschluss: Schritte untereinander */
.steps.vertical { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.steps.vertical .step { display: flex; gap: 12px; width: 100%; padding: 8px 4px; border-bottom: 1px solid var(--line-2); }
.steps.vertical .step::after, .steps.vertical .step::before { display: none; }
.steps.vertical .step:last-child { border-bottom: 0; }

/* Anleitungen mit Bildschirmfotos */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 6px; }
.guide-card { display: flex; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; align-items: flex-start; }
.guide-card:hover { border-color: var(--primary, #1d4ed8); }
.guide-card > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.guide { max-width: 1100px; }
.guide-step { display: flex; gap: 14px; margin: 0 0 22px; }
.guide-step .gs-n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--primary, #1d4ed8); color: #fff; display: grid; place-items: center; font-weight: 700; }
.guide-step .gs-b { flex: 1; min-width: 0; }
.guide-step p { margin: 4px 0 10px; line-height: 1.55; }
.guide-step figure { margin: 0; }
.guide-step img { max-width: 100%; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.06); cursor: zoom-in; }
.guide-nav { display: flex; justify-content: space-between; margin: 24px 0; }
.guide-doc { page-break-after: always; margin-bottom: 30px; }
@media print {
  .guide-step { break-inside: avoid; }
  .guide-step img { box-shadow: none; max-height: 120mm; }
  .no-print { display: none !important; }
}

/* Journal: laufende Statuszeile «was fehlt noch» */
.jstatus { margin: 0 0 10px; }
.jstatus .msg { margin: 0; }
.jst-list { margin: 6px 0 2px 18px; padding: 0; }
.jst-list li { cursor: pointer; margin: 2px 0; }
.jst-list li:hover { text-decoration: underline; }
.jst-list .pl { font-weight: 600; margin-right: 6px; }

/* Verlauf (Chatter) */
.tl-new { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tl-new input:first-child { flex: 1 1 200px; min-width: 0; }
.tl { display: flex; flex-direction: column; gap: 8px; }
.tl-i { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.tl-i:last-child { border-bottom: 0; }
.tl-ico { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft, #f1f5f9); color: var(--muted, #64748b); }
.tl-task .tl-ico { background: #fef3c7; color: #92400e; }
.tl-change .tl-ico { background: #e0e7ff; color: #3730a3; }
.tl-ch { display: inline-block; margin-right: 10px; }
details.validity { display: inline-block; margin-left: 6px; }
details.validity[open] { padding: 4px 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; }
/* Kanban */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kb-col { flex: 0 0 260px; background: var(--soft, #f1f5f9); border-radius: 10px; padding: 8px; min-height: 120px; }
.kb-col.over { outline: 2px dashed var(--accent, #2563eb); }
.kb-h { font-weight: 600; display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-card { background: var(--card, #fff); border-radius: 8px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: pointer; }
.kb-card.drag { opacity: .5; }
@media (max-width: 700px) { .kb-col { flex-basis: 85vw; } }
/* Testsystem-Kennzeichnung */
#testbanner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 3000; pointer-events: none; max-width: calc(100vw - 24px); background: repeating-linear-gradient(45deg, #b45309, #b45309 14px, #d97706 14px, #d97706 28px); color: #fff; font-weight: 700; text-align: center; font-size: 12px; padding: 3px 14px; border-radius: 0 0 8px 8px; box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.testsys .topbar { border-top: 3px solid #d97706; }
/* ── Menü-Zähler (Badges wie Handy-App) und Modul-Übersicht ── */
.nav-badge { min-width: 18px; text-align: center; box-sizing: border-box; background: var(--brand-500); }
.nav-badge.act { background: var(--err); color: #fff; }
.nav-badge.inf { background: var(--brand-500); color: #fff; }
.nav-badge.dot { min-width: 0; width: 9px; height: 9px; padding: 0; line-height: 9px; }
.nav-item { padding-right: 46px; }
.nav-single .nav-badge { margin-left: auto; }
.nav-group > button .nav-gbadge { margin-left: auto; }
.nav-group > button .nav-gbadge:not(.hidden) + .chev { margin-left: 6px; }
.nav-group.open > button .nav-gbadge { display: none; }
.nav-group.current > button { background: var(--brand-50); color: var(--brand); }
.nav-group > button .chev { padding: 2px; border-radius: 5px; }
.nav-group > button .chev:hover { background: var(--line-2); }
.topbar .burger { position: relative; }
.burger-badge { position: absolute; top: 1px; right: 0; margin: 0; display: none; box-shadow: 0 0 0 2px var(--brand); }
body.nav-collapsed .burger-badge:not(.hidden) { display: inline-block; }
@media (max-width: 900px) { body:not(.nav-open) .burger-badge:not(.hidden) { display: inline-block; } }
.nav-defs { display: grid; gap: 0; margin: 2px 0 0 12px; }
.nav-defs .nav-badge.dot { margin: 0 6px 0 0; vertical-align: middle; }
.mod-pend { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.mod-pend .badge { text-decoration: none; }
.mod-sec { margin: 0 0 18px; }
.mod-sec h3, .mod-h { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mod-h { margin-top: 22px; font-size: 13px; }
.mod-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mod-tile { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 40px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); min-height: 64px; box-sizing: border-box; }
.mod-tile:hover { border-color: var(--brand-500); text-decoration: none; background: var(--brand-50); }
.mod-tile:focus-visible { outline: 3px solid #0a4f9e44; outline-offset: 1px; }
.mod-tile .mt-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-500); flex: none; }
.mod-tile .mt-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mod-tile .mt-d { font-size: 12.5px; color: var(--muted); }
.mod-tile .mt-no { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-500); }
.mod-tile .nav-badge { position: absolute; top: 10px; right: 10px; margin: 0; }
.mod-proc { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; align-items: stretch; }
.mod-proc > li { display: flex; align-items: center; }
.mod-proc .mod-tile.step { width: 190px; height: 100%; }
.mod-proc .mp-arrow { color: var(--faint); display: grid; place-items: center; width: 26px; flex: none; }
@media (max-width: 700px) {
  .mod-proc { flex-direction: column; flex-wrap: nowrap; }
  .mod-proc > li { flex-direction: column; align-items: stretch; }
  .mod-proc .mod-tile.step { width: 100%; }
  .mod-proc .mp-arrow { width: 100%; height: 24px; transform: rotate(90deg); }
  .mod-tiles { grid-template-columns: 1fr; }
}
/* ── Prozessleiste (Belegfluss) in Einzelansichten ── */
.flowbar { margin: 0 0 14px; overflow-x: auto; scrollbar-width: thin; }
.flowbar ol { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; align-items: stretch; gap: 0; min-width: min-content; }
.flowbar .fs { flex: 0 0 auto; min-width: 128px; max-width: 220px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.flowbar .fs-arr { flex: 0 0 22px; display: grid; place-items: center; color: var(--faint); }
.flowbar .fs-h { display: flex; align-items: center; gap: 6px; }
.flowbar .fs-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--line-2); color: var(--muted); flex: none; }
.flowbar .fs-n { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--brand-50); color: var(--brand-500); border-radius: 999px; padding: 0 6px; }
.flowbar .fs-meta { color: var(--muted); font-size: 11.5px; }
.flowbar .fs-dt { color: var(--muted); font-weight: 400; }
.flowbar .fs-b { margin-top: auto; }
.flowbar .fs-doc, .flowbar .fs-mi { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flowbar .linkbtn { all: unset; cursor: pointer; color: var(--brand-500); }
.flowbar .linkbtn:hover, .flowbar a:hover { text-decoration: underline; }
.flowbar .fs-none { color: var(--faint); font-style: italic; }
.flowbar .fs-nolink { color: var(--ink-2); }
.flowbar .fs-act { height: 26px; padding: 0 8px; font-size: 12px; }
.flowbar .fs-more summary { cursor: pointer; color: var(--brand-500); font-weight: 600; }
.flowbar .fs-menu { display: grid; gap: 3px; margin-top: 4px; max-height: 180px; overflow-y: auto; }
.flowbar .st-done .fs-ic { background: var(--ok); color: #fff; }
.flowbar .st-partial .fs-ic { background: var(--warn); color: #fff; }
.flowbar .st-open, .flowbar .st-skip { background: var(--surface-2); }
.flowbar .st-open b, .flowbar .st-skip b { color: var(--muted); }
.flowbar .fs.cur { border-color: var(--brand-500); box-shadow: 0 0 0 2px #0a4f9e33; background: var(--brand-50); }
.flowbar .fs.cur b { color: var(--brand); }
@media (max-width: 700px) {
  .flowbar ol { flex-direction: column; min-width: 0; }
  .flowbar .fs { max-width: none; }
  .flowbar .fs-arr { flex-basis: 18px; transform: rotate(90deg); }
}

/* ── Befunde der Automatisierung: Banner am Datensatz, Liste, Läufe ── */
.fnd-banner { border: 1px solid var(--line); border-left: 4px solid var(--warn); background: var(--warn-bg); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; }
.fnd-banner.sev3 { border-left-color: var(--err); background: var(--err-bg); }
.fnd-banner.sev0 { border-left-color: var(--ok); background: var(--ok-bg); }
.fnd-bh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fnd-bh .grow { flex: 1; }
.fnd-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 8px 0 2px; border-top: 1px solid rgba(0, 0, 0, .07); margin-top: 8px; }
.fnd-item .fnd-txt { min-width: 0; flex: 1; }
.fnd-item .fnd-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
input.fnd-field, select.fnd-field, textarea.fnd-field { border-color: var(--warn) !important; box-shadow: 0 0 0 3px rgba(214, 140, 0, .18); }
tr.fnd-focus > td { background: var(--info-bg) !important; }
.fnd-inline { padding: 6px 4px 10px; }
.fnd-prev { border-top: 1px solid var(--line); padding: 8px 0; }
@media (max-width: 720px) { .fnd-item { flex-direction: column; } .fnd-item .fnd-act { justify-content: flex-start; } }

/* Anzahl in Listen: Hinweis, wenn nicht alle Einträge geladen sind */
.count.warn-text { color: var(--warn, #b45309); font-weight: 600; cursor: help; }

/* Finanzbericht-Studio (pages-finrep.js): Matrix, Ampeln, Wasserfall */
.fr-wrap { max-height: calc(100vh - 230px); }
table.fr-matrix th.fr-sticky, table.fr-matrix td.fr-sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 220px; }
table.fr-matrix thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; }
table.fr-matrix thead th.fr-sticky { z-index: 3; }
table.fr-matrix td.fr-tot, table.fr-matrix th.fr-tot { background: var(--brand-50); font-weight: 600; }
table.fr-matrix td.fr-lbl { cursor: pointer; }
table.fr-matrix tr.fr-selrow td { background: #fff7e6; }
table.fr-matrix a.fr-cell { color: inherit; border-bottom: 1px dotted var(--faint); }
table.fr-matrix a.fr-cell:hover { color: var(--brand-500); text-decoration: none; }
table.fr-matrix .fr-good { color: var(--ok); } table.fr-matrix .fr-bad { color: var(--err); }
table.fr-matrix td.fr-hot { font-weight: 700; background: var(--warn-bg); }
table.fr-matrix td.fr-note { max-width: 260px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.fr-matrix td.fr-note a { color: var(--muted); }
.fr-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--focus); margin-right: 4px; vertical-align: 2px; cursor: help; }
.fr-wf rect.fr-wf-total { fill: var(--brand-500); } .fr-wf rect.fr-wf-up { fill: var(--ok); } .fr-wf rect.fr-wf-down { fill: var(--err); }
.fr-wf text.neg { fill: var(--err); }
.fr-prose { margin: 8px 0 0 18px; padding: 0; font-size: 13px; color: var(--ink-2); }
.fr-prose li { margin: 3px 0; }
.fr-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 14px; }
.kpi .fr-tg { color: var(--muted); text-decoration: none; font-weight: 400; }
@media print { .fr-wrap { max-height: none; overflow: visible; } table.fr-matrix th.fr-sticky, table.fr-matrix td.fr-sticky { position: static; } }
/* Journal-Erfassung auf dem Handy (15.10.2026): jede Zeile als Karte, Feldname über dem Feld, Text über die ganze Breite */
@media (max-width: 700px) {
  table.jt { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
  table.jt thead { display: none; }
  table.jt tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 10px 8px; border-bottom: 1px solid #e2e8f0; }
  table.jt tbody td { display: block; width: auto !important; padding: 0; border: 0; min-width: 0; }
  table.jt tbody td::before { content: attr(data-label); display: block; font-size: 11px; color: #64748b; margin-bottom: 2px; }
  table.jt tbody td[data-c="txt"], table.jt tbody td[data-c="soll"], table.jt tbody td[data-c="haben"], table.jt tbody td[data-c="settle"] { grid-column: 1 / -1; }
  table.jt tbody td:last-child::before { content: ''; }
  table.jt input, table.jt select { width: 100% !important; font-size: 16px; }
  table.jt tfoot { display: block; }
  .jd-grid { grid-template-columns: 1fr !important; }
  #bkT td, #opt td { font-size: 13px; }
}

/* Handy: von Hand gebaute Tabellen als Karten (Beschriftung aus dem Tabellenkopf, core.js autoCards) */
@media (max-width: 640px) {
  table.tbl.acards thead { display: none; }
  table.tbl.acards, table.tbl.acards tbody, table.tbl.acards tfoot { display: block; width: 100%; }
  table.tbl.acards tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.tbl.acards td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; border: 0; text-align: right; white-space: normal; }
  table.tbl.acards td:empty { display: none; }
  table.tbl.acards td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; flex: 0 0 auto; max-width: 45%; }
  table.tbl.acards td[data-label=""]::before { display: none; }
  table.tbl.acards td:first-child { font-weight: 600; text-align: left; justify-content: flex-start; }
  table.tbl.acards td:first-child::before { display: none; }
  table.tbl.acards td input, table.tbl.acards td select { max-width: 60%; }
  .tbl-wrap:has(> table.acards) { overflow-x: visible; }
}

/* Automatisierung: Gruppen auf-/zuklappbar (19.10.2026) */
.ag-grp { margin: 0 0 8px; }
.ag-grp > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; padding: 9px 12px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 10px; }
.ag-grp > summary::-webkit-details-marker { display: none; }
.ag-grp > summary::before { content: '\25B8'; color: var(--ink-3, #94a3b8); width: 12px; transition: transform .15s; }
.ag-grp[open] > summary::before { transform: rotate(90deg); }
.ag-grp[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ag-grp > .card { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.ag-grp .ag-name { font-weight: 600; text-transform: uppercase; letter-spacing: .4px; font-size: 13px; color: var(--ink-2); }
.ag-grp .ag-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ag-off { display: none !important; }
/* ── Eingebettet in die Pipeline (21.10.2026): ohne ERP-Kopf und Seitenmenü, Optik wie die Pipeline (tec-seite.css) ── */
.erp-eingebettet { --top: 0px; --side: 0px; --radius: 6px; --radius-sm: 5px; --shadow: none; --bg: #f4f6f9; }
.erp-eingebettet .topbar, .erp-eingebettet .sidebar, .erp-eingebettet #burger { display: none !important; }
.erp-eingebettet .main { margin-left: 0 !important; padding: 8px 16px 24px !important; min-height: 0; }
.erp-eingebettet body { background: var(--bg); }
.erp-eingebettet .main h1 { font-size: 18px; font-weight: 600; }
.erp-eingebettet .main h2 { font-size: 16px; font-weight: 600; }
.erp-eingebettet .card, .erp-eingebettet .panel { box-shadow: none; border-radius: 6px; }