/* The platform is laid out like the JEHNEN website (artifact "JEHNEN", Oct 2026): concrete
   ground, open tables with thin rules instead of boxes, mono labels, Archivo headings with
   air around them, panels only for asides. The tokens (palette, fonts, the spacing scale
   --s1..--s6, day / night) live in static/tokens.css, loaded before this file - no palette
   and no colour literal here. The class contract of the readability overhaul (Oct 2026) is
   documented in docs/design.md §2, §3, §10 and §11. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; line-height: 1.25; }
p { margin: 0; }
.wrap { max-width: 1180px; width: 100%; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
/* the mono kicker (T1): 12 px caps, never smaller. Mono caps stay only here, on th, the sidebar
   module names, badges / chips and td.time / td.num - everything else is the body font. */
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.muted { color: var(--ink-2); } .small { font-size: 14px; }
.small.muted, td .small.muted { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
/* counts (T6): a plain mono numeral next to a tab, a sidebar entry or a heading - never a badge */
.count { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* header: the site's */
header.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 52px; }
.mark { display: block; text-decoration: none; color: var(--ink); }
.mark svg { height: 17px; width: auto; display: block; }
header nav { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
header nav::-webkit-scrollbar { display: none; }
header nav a { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: 6px 10px; white-space: nowrap; border-radius: 2px; transition: background .15s, color .15s; }
header nav a:hover { color: var(--ink); background: var(--wash); }
header nav a.active { color: var(--accent-ink); background: var(--accent); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--led); margin-right: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--led) 25%, transparent); vertical-align: 1px; }
header .logout { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 2px; }
header .logout:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
@media (max-width: 900px) { header.top .wrap { height: auto; padding-block: 10px; flex-wrap: wrap; row-gap: 8px; } header nav { width: 100%; margin-inline: -4px; } header .label { display: none; } header .logout { order: 2; margin-left: auto; } }

main { flex: 1; padding-block: clamp(12px, 1.6vw, 20px) 64px; }

/* page head (T3): ONE row on every page, list pages too - the mono breadcrumb label inline,
   h1 22 px, the count / summary in .small.muted inside the h1, ONE primary action right in
   .page-actions. A lede is one line of .small.muted (a longer help text belongs in
   details.hints under the content, never above it). The module tab row follows the head. */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: 0 0 var(--s4); min-width: 0; }
.page-head h1, h1 { font-variation-settings: "wdth" 106; font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -.005em; }
h1 .small, h1 .muted { font-family: var(--body); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); margin-left: var(--s2); vertical-align: 1px; font-variation-settings: "wdth" 100; display: inline-block; }
h1 .badge { vertical-align: middle; margin-left: var(--s2); }
.page-head .lede { flex: 0 0 100%; width: 100%; max-width: 100%; padding-right: calc(100% - min(100%, 76ch)); font-size: 14px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
h1 { margin-bottom: var(--s3); } .page-head h1 { margin: 0; }
.page-head .page-actions { float: none; position: static; margin: 0 0 0 auto; align-self: center; display: flex; gap: var(--s2); }
.page-head.list { display: flex; margin: 0 0 var(--s4); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* section heads (T4): h2 = the sec-head arrangement - title left (17 px), a hint or actions
   right as mono links, ONE thin ink rule under it, no accent stub. h3 (15 px, 600) sits below. */
h2 { font-variation-settings: "wdth" 108; font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -.005em; color: var(--ink);
  margin: var(--s6) 0 var(--s3); padding: 0 0 var(--s2); border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); flex-wrap: wrap; }
h2 > a, h2 .small, h2 .muted { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; font-variation-settings: "wdth" 100; }
h2 > a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
h2 .count, h3 .count { margin-left: var(--s1); }
h3 { font-variation-settings: "wdth" 104; font-weight: 600; font-size: 15px; line-height: 1.25; margin: var(--s4) 0 var(--s2); }
h4 { font-size: 14px; font-weight: 600; margin: var(--s3) 0 var(--s1); }

/* layout: open, no boxes. .card is a block with air; sections follow each other with --s6 */
.grid { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .grid.two { grid-template-columns: 1fr 1fr; } }
.card { background: transparent; border: 0; padding: 0; min-width: 0; overflow-x: auto; }
.card > h2:first-child { margin-top: 0; }
.card + .card { margin-top: var(--s6); } /* the section rhythm; the .mt-* utilities win over it */
.grid > .card + .card { margin-top: 0; }
.card:has(details[open] > .pop), .card:has(details.chip-edit[open]), .scroll-x:has(details[open] > .pop) { overflow: visible; } /* an open popover is not clipped */
.card.k, .aside { background: var(--panel); border: 1px solid var(--rule); padding: clamp(20px, 3vw, 28px); }
.card.k { background: var(--ink); color: var(--ground); border-color: var(--ink); }
/* the dark card (inverted in dark mode too): headings, labels and quiet text take its light
   foreground - var(--ink) / var(--ink-2) would vanish into the card (the "Timer" title) */
.card.k :is(h1, h2, h3, h4, h2 > a, .label, .muted, .small, .hint) { color: var(--ground); }
.card.k :is(.label, .muted, .small.muted, .hint) { opacity: .8; }

/* stat strips (T7): .kpis / .facts / .fin-strip are one component - tiles of label · number ·
   delta (.d / .h) · bar, separated by air, no rules; at most 4 per row (5+ wrap), 2 on phones */
.kpis, .facts, .fin-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(150px, calc(25% - var(--s5))), 1fr)); gap: var(--s3) var(--s5); margin: 0 0 var(--s5); border: 0; }
.kpi, .fact, .fin-cell { display: grid; gap: var(--s1); align-content: start; padding: 0; border: 0; color: var(--ink); text-decoration: none; min-width: 0; position: relative; }
.kpi .l, .fact .l, .fin-cell .l { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); order: -1; }
.kpi .l .hint { text-transform: none; letter-spacing: 0; color: var(--ink-2); opacity: .8; }
.kpi .n, .fact .n, .fin-cell .n { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1.05; letter-spacing: -.015em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .d, .kpi .h, .fact .h, .fin-cell .d, .fin-cell .h { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.fact .h a { color: inherit; } .fact .h a:hover { color: var(--accent); }
a.kpi:hover .n, a.fact:hover .n { color: var(--accent); }
a.kpi::after { content: "→"; position: absolute; right: 0; top: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-2); opacity: 0; transition: opacity .15s; }
a.kpi:hover::after { opacity: 1; }

/* tables (T5): mono header under ONE ink rule, a hairline between rows, none under the last */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; line-height: 1.25; vertical-align: bottom; padding: 0 var(--s4) var(--s2) 0; border-bottom: 1px solid var(--ink); }
td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: 15px; line-height: 1.25; font-variant-numeric: tabular-nums; transition: background .12s; }
tbody > tr:last-child > td { border-bottom: 0; }
tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; }
tbody tr:hover td { background: var(--wash); }
td:last-child, th:last-child { padding-right: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.num, td.time, td.due, td.mono, .mono { font-family: var(--mono); font-size: 13px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
td.time, td.due { white-space: nowrap; color: var(--ink-2); padding-top: 14px; text-transform: uppercase; }
td.label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); width: 120px; padding-top: 14px; }
tr.overdue td.due { color: var(--danger); } tr.soon td.due { color: var(--warn); }
tr.done td { color: var(--ink-2); text-decoration: line-through; } tr.done td.actions { text-decoration: none; }
tr.hl td { border-bottom-color: var(--accent); }

/* badges (T6): neutral = tinted, no border; ok / warn / danger / accent keep their tint, no
   border. One status badge per table row - further states go into the title attribute. */
.badge { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; padding: 2px 8px; border: 0; border-radius: 2px; background: var(--hair); color: var(--ink-2); white-space: nowrap; }
.badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.badge.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.badge.accent { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

/* buttons (T2): exactly three looks - .primary (filled accent), default (1 px rule border,
   ink text; .ghost is that same look, kept for existing templates) and .quiet (text only,
   accent on hover). .danger only on destructive actions (red rule, filled on hover). Body
   font, sentence case, 14 px (.small 13 px) - a toolbar has one button size. */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 8px 14px; font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; line-height: 1.25; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); background: transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
button:hover, .btn:hover { border-color: var(--ink-2); background: var(--wash); text-decoration: none; }
button:active, .btn:active { background: var(--hair); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover, .btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 86%, var(--ink)); color: var(--accent-ink); }
button.ghost, .btn.ghost { border-color: var(--rule); color: var(--ink); }
button.quiet, .btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding-inline: var(--s2); }
button.quiet:hover, .btn.quiet:hover { color: var(--accent); background: transparent; border-color: transparent; }
button.danger, .btn.danger { border-color: var(--danger); color: var(--danger); }
button.danger:hover, .btn.danger:hover { background: var(--danger); border-color: var(--danger); color: var(--accent-ink); }
button.small, .btn.small { padding: 5px 10px; font-size: 13px; }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
/* filter toggles (T2): never primary buttons - a quiet segmented control, the pressed one in
   accent with an underline. Markup: class="btn" aria-pressed="true|false", grouped in .seg */
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s1); }
button[aria-pressed], .btn[aria-pressed] { border-color: transparent; background: transparent; color: var(--ink-2); border-radius: 0; box-shadow: inset 0 -2px 0 transparent; }
button[aria-pressed]:hover, .btn[aria-pressed]:hover { color: var(--ink); background: var(--wash); border-color: transparent; }
button[aria-pressed="true"], .btn[aria-pressed="true"] { color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
form.inline { display: inline; }
.actions form { display: inline; margin-right: 6px; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: 1px solid var(--rule); border-radius: 0; padding: 10px 12px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
td select, td input { padding: 6px 8px; font-size: 13px; max-width: 150px; }
td.actions { white-space: nowrap; width: 1%; }
.toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s5); }
.newtodo { display: grid; gap: var(--s2); grid-template-columns: 1fr; margin-bottom: var(--s5); }
@media (min-width: 700px) { .newtodo { grid-template-columns: 3fr 1fr 1fr 1fr auto; } }
.note { background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: var(--s3) var(--s4); margin: var(--s4) 0; color: var(--ink-2); font-size: 14px; }
pre { background: var(--field); border: 1px solid var(--rule); padding: 14px; overflow: auto; font-family: var(--mono); font-size: 13px; }
.login { max-width: 440px; margin: clamp(40px, 8vw, 96px) auto 0; }
.login h1 { margin: 12px 0 28px; }
form.cf { display: grid; gap: 18px; border-top: 1px solid var(--ink); padding-top: var(--s5); }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.f label .hint { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 13px; }
.f input, .f select, .f textarea { width: 100%; }
.cf .err { font-size: 14px; color: var(--danger); }
.cf-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
details summary { cursor: pointer; }

/* help-text diet (T10): legends and explanations fold into details.hints ("Hinweise") under
   the content - a quiet mono summary, 14 px muted prose inside */
details.hints { margin: var(--s4) 0 0; max-width: 76ch; }
details.hints > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: var(--s1) 0; }
details.hints > summary::-webkit-details-marker { display: none; }
details.hints > summary::before { content: "▸"; font-size: 12px; transition: transform .12s; }
details.hints[open] > summary::before { transform: rotate(90deg); }
details.hints > summary:hover { color: var(--ink); }
details.hints > :not(summary) { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
details.hints > p, details.hints > ul, details.hints > ol, details.hints > dl, details.hints > div { margin: var(--s2) 0 0; }
details.hints ul, details.hints ol { padding-left: 18px; }

/* "…" overflow (A1 / A2 contract): details.chip-pop > summary (a quiet "…") + .pop, the panel
   with the folded actions, one per line, each a quiet button or link */
details.chip-pop { position: relative; display: inline-block; }
details.chip-pop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 var(--s2); border-radius: 3px; color: var(--ink-2); font-size: 16px; line-height: 1; letter-spacing: .08em; }
details.chip-pop > summary::-webkit-details-marker { display: none; }
details.chip-pop > summary:hover, details.chip-pop[open] > summary { color: var(--ink); background: var(--wash); }
details.chip-pop > .pop { position: absolute; z-index: 8; right: 0; top: calc(100% + 4px); min-width: 200px; max-width: min(340px, 90vw); background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 10px 30px var(--shadow); padding: var(--s2); display: grid; gap: 2px; text-align: left; }
details.chip-pop > .pop form { margin: 0; display: block; }
details.chip-pop > .pop > a, details.chip-pop > .pop > button, details.chip-pop > .pop > .btn, details.chip-pop > .pop form > button, details.chip-pop > .pop form > .btn { display: flex; width: 100%; justify-content: flex-start; border-color: transparent; background: transparent; padding: 7px 10px; font-size: 14px; font-weight: 400; color: var(--ink); text-decoration: none; border-radius: 3px; white-space: normal; text-align: left; }
details.chip-pop > .pop > a:hover, details.chip-pop > .pop > button:hover, details.chip-pop > .pop > .btn:hover, details.chip-pop > .pop form > button:hover, details.chip-pop > .pop form > .btn:hover { background: var(--wash); }
details.chip-pop > .pop .danger { color: var(--danger); }
details.chip-pop > .pop .sep { height: 1px; background: var(--rule); margin: var(--s1) 0; }
details.chip-pop > .pop .label { padding: var(--s1) 10px 0; }
td > details.chip-pop { vertical-align: middle; }

footer.site { padding-block: 24px 40px; }
footer.site .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--rule); padding-top: 20px; }
footer.site a { text-decoration: none; } footer.site a:hover { text-decoration: underline; }

/* manual */
.manual h2 { margin-top: clamp(40px, 5vw, 64px); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.features article { padding: 20px 0 26px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.features h3 { font-size: 15px; margin: 0; }
.features p { color: var(--ink-2); font-size: 15px; max-width: 48ch; }
table.plain td { padding: 13px 16px 13px 0; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  body { font-size: 15px; }
  main { padding-top: var(--s4); }
  .page-head h1, h1 { font-size: 20px; }
  td, th { padding: 10px 10px 10px 0; font-size: 14px; }
  td .small.muted { display: none; }
  .kpis, .facts, .fin-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
  .kpi .n, .fact .n, .fin-cell .n { font-size: 20px; }
  .features { grid-template-columns: 1fr; }
  .tabs a, .ptabs a { margin-right: var(--s4); }
  .toolbar { gap: 6px; }
  footer.site .wrap { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* tabs (T5): body font 14 px like the segmented control, no rules on the row - only the
   active underline. .mod-tabs (the module rows from nav.MODULES) hide where the sidebar shows. */
.tabs, .ptabs { display: flex; gap: 0; border: 0; margin: 0 0 var(--s5); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .ptabs::-webkit-scrollbar { display: none; }
.tabs a, .ptabs a { font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); text-decoration: none; padding: 8px 0; margin-right: var(--s5); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover, .ptabs a:hover { color: var(--ink); }
.tabs a.active, .ptabs a.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.tabs .count, .ptabs .count { margin-left: var(--s1); }
@media (min-width: 1100px) { .tabs.mod-tabs { display: none; } }
.area-select { padding: 3px 6px; font-size: 13px; }
.missing { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.missing-head { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.missing-head b { font-variation-settings: "wdth" 108; font-weight: 700; font-size: 17px; }
.missing-actions { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.missing-actions .toolbar { margin: 0; }
.area-ask { display: inline-block; margin-left: 8px; vertical-align: middle; } .area-ask form { display: inline; }
.bars { display: flex; flex-direction: column; gap: 2px; }
.bars .bar { display: block; height: 5px; min-width: 1px; }
.bars .bar.in { background: var(--accent); } .bars .bar.out { background: var(--ink-2); opacity: .55; }

/* scanner */
.scan-cam { background: var(--ink); aspect-ratio: 4 / 3; max-height: 60vh; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.scan-cam video { width: 100%; height: 100%; object-fit: cover; }
.scan-hit { padding: 12px 0; border-bottom: 1px solid var(--rule); }

/* mail preview on the send page: a white "sheet" like the recipient's client */
.mail-preview { background: #fff; color: #111419; border: 1px solid var(--rule); padding: 20px 24px; margin-top: 8px; overflow: auto; }
.mail-preview p { max-width: none; }
.send-grid .cf { max-width: none; }
.note.danger { border-left-color: var(--danger); }
td.danger { color: var(--danger); font-weight: 600; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::before { content: "+ "; font-family: var(--mono); }
details[open].card > summary::before { content: "– "; }
/* sortable table headers (inventory list, Rendite, ...) */
th a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sort:hover, th a.sort.active { color: var(--accent); }
tr.flash td { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 14%, transparent); } to { background: transparent; } }
.kpi .l .hint { text-transform: none; letter-spacing: 0; color: var(--ink-2); opacity: .8; }
th.check { text-align: center; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x table { min-width: 720px; }

/* assistant chat on the start page */
.chat-log { display: grid; gap: 12px; max-height: 420px; overflow-y: auto; padding: 4px 0 12px; }
.chat .msg { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; }
.chat .msg .who { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 4px; }
.chat .msg.user .text { color: var(--ink-2); }
.chat .msg .text p { margin: 0 0 8px; max-width: none; }
.chat .msg .text ul, .chat .msg .text ol { margin: 0 0 8px 18px; }
.chat .msg .text a { color: var(--accent); }
.chat-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chat-form input { flex: 1 1 320px; }
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* document sheet: looks like the PDF, every text editable in place */
.sheet { background: #fff; color: #111419; max-width: 820px; padding: 48px 56px 40px; margin: 0 auto; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.10); font-size: 14px; line-height: 1.45; }
.sheet .cobalt { color: #2438E8; }
.sheet .mono, .sheet .num { font-family: var(--mono); font-size: 12px; }
.sheet .small { font-size: 12px; } .sheet .muted { color: #5B6168; }
.sh-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1.5px solid #111419; padding-bottom: 16px; margin-bottom: 26px; }
.sh-brand svg { height: 22px; width: auto; color: #111419; display: block; }
.sh-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; margin-top: 6px; }
.sh-doc { text-align: right; } .sh-title { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: 15px; letter-spacing: .02em; } .sh-co { font-size: 12px; color: #5B6168; margin-top: 4px; } .sh-co b { color: #111419; }
.sh-meta { display: grid; grid-template-columns: 1fr 260px; gap: 24px; margin-bottom: 28px; }
.sh-label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #5B6168; margin-bottom: 4px; }
.sh-addr div { min-height: 1.2em; }
.sh-facts td { padding: 2px 8px 2px 0; border: 0; font-size: 13px; vertical-align: top; } .sh-facts td.sh-label { margin: 0; padding-top: 4px; white-space: nowrap; }
.sh-h { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: 26px; margin: 0; letter-spacing: -.01em; }
.sh-sub2 { color: #5B6168; margin: 2px 0 14px; }
.sh-p { margin: 10px 0 14px; } .sh-cond { font-size: 12px; color: #5B6168; white-space: pre-line; margin-top: 18px; }
.sh-group { margin-top: 18px; position: relative; }
.sh-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.sh-gh .cobalt .ed { text-transform: uppercase; }
.sh-table { width: 100%; border-collapse: collapse; }
.sh-table th { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5B6168; text-align: left; padding: 4px 8px 6px 0; border-bottom: 1.2px solid #111419; }
.sh-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid #E3E5EA; vertical-align: top; font-size: 13px; color: #111419; background: transparent; }
.sh-table th.num, .sh-table td.num { text-align: right; white-space: nowrap; }
.sh-table tr.opt td { color: #8a9099; }
.sh-totals { margin: 18px 0 0 auto; border-collapse: collapse; min-width: 300px; }
.sh-totals td { padding: 5px 0 5px 24px; border: 0; font-size: 13px; } .sh-totals td.num { font-family: var(--mono); text-align: right; }
.sh-totals tr.hl td { border-top: 1.2px solid #111419; font-weight: 700; }
.sh-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } .sh-sign div { border-top: 1px solid #111419; padding-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #5B6168; }
.sh-foot { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; border-top: 1px solid #E3E5EA; margin-top: 40px; padding-top: 10px; font-size: 12px; color: #5B6168; }
.sheet .ed { display: inline; min-width: 1.2em; border-radius: 2px; outline: 1px dashed transparent; outline-offset: 2px; transition: outline-color .15s, background .15s; cursor: text; }
.sheet .ed.block { display: block; }
.sheet:hover .ed { outline-color: rgba(36,56,232,.25); }
.sheet .ed:hover { background: rgba(36,56,232,.06); }
.sheet .ed:focus { outline: 1.5px solid #2438E8; background: rgba(36,56,232,.06); }
.sheet .ed:empty::before { content: attr(data-placeholder); color: #b0b5bd; }
.sheet .rowtool, .sheet .addrow, .sh-gh .rowtool { opacity: 0; transition: opacity .15s; }
.sheet:hover .rowtool, .sheet:hover .addrow { opacity: 1; }
.sheet .rowtool { width: 20px; text-align: right; }
.sheet button.x { all: unset; cursor: pointer; color: #b0b5bd; font-size: 15px; line-height: 1; padding: 0 4px; } .sheet button.x:hover { color: #c0392b; }
.sheet .addrow { margin-top: 4px; } .sheet .addrow button { padding: 3px 8px; font-size: 12px; }
.doc-tools .save-bar { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
@media (max-width: 700px) { .sheet { padding: 24px 18px; } .sh-meta { grid-template-columns: 1fr; } .sh-foot { grid-template-columns: 1fr; } }
:root[data-theme="dark"] .sheet { box-shadow: 0 12px 40px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet { box-shadow: 0 12px 40px rgba(0,0,0,.5); } }
.sheet h2, .sheet .sh-h, .sheet td, .sheet th, .sheet p { color: #111419; }
.sheet a { color: #2438E8; }
.sheet .ed:empty::before { opacity: 0; transition: opacity .15s; }
.sheet:hover .ed:empty::before, .sheet .ed:focus:empty::before { opacity: .7; }
.save-bar[hidden] { display: none !important; }
.sheet .pick-contact { margin-top: 8px; } .sheet .pick-contact select { font-size: 12px; padding: 4px 8px; max-width: 320px; color: #5B6168; background: #fff; border-color: #E3E5EA; }
/* serial number pickers on the sheet and the project plan */
.serials-pick { display: inline-block; margin-top: 2px; }
.serials-pick > summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity .15s; }
tr:hover .serials-pick > summary, .serials-pick[open] > summary { opacity: 1; }
.serials-form { display: grid; gap: 4px; padding: 8px 10px; margin-top: 4px; background: var(--panel); border: 1px solid var(--rule); max-height: 220px; overflow: auto; min-width: 220px; }
.serials-form label { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink); cursor: pointer; }
.serials-form input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.serials-form button { justify-self: start; margin-top: 4px; }
.sheet .serials-form { background: #f3f4f8; border-color: #E3E5EA; } .sheet .serials-form label { color: #111419; }
/* item search pickers and the editable plan */
.item-search { position: relative; display: inline-block; min-width: 280px; margin-left: 8px; }
.item-search input[type=search] { padding: 5px 8px; font-size: 13px; width: 100%; }
.item-search .hits { position: absolute; z-index: 5; left: 0; right: 0; background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.item-search .hits:empty { display: none; }
.hits-table { width: 100%; } .hits-table td { padding: 6px 8px; font-size: 13px; }
.sheet .item-search .hits { background: #fff; } .sheet .hits-table td { border-bottom-color: #E3E5EA; }
.addrow-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-table input[type=number] { padding: 4px 6px; font-size: 13px; }
.plan-table .rowtool { width: 24px; } .plan-table button.x { all: unset; cursor: pointer; color: var(--ink-2); padding: 0 4px; font-size: 15px; } .plan-table button.x:hover { color: var(--danger); }
.plan-table .item-search { margin: 4px 0; }
.compact-todos td { padding-top: 7px; padding-bottom: 7px; } .compact-todos a.plain { color: inherit; text-decoration: none; } .compact-todos a.plain:hover { color: var(--accent); }
.item-search .hits { min-width: 560px; max-width: 90vw; }
.hits-table td { white-space: nowrap; } .hits-table td:first-child { white-space: normal; min-width: 260px; }
@media (max-width: 700px) { .item-search .hits { min-width: 0; right: auto; width: 90vw; } }
/* project checks (the status bar's checklist popover), pipeline board */
.checks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.checks .check { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 4px 10px; border: 1px solid var(--rule); color: var(--ink-2); }
.checks .check.ok { color: var(--ok); border-color: var(--ok); } .checks .check.open:hover { color: var(--accent); border-color: var(--accent); }
.board { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; }
.board .col { border-top: 2px solid var(--ink); padding-top: 8px; min-height: 240px; }
.board .col.over { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.board h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; color: var(--ink-2); }
.board .kard { background: var(--panel); border: 1px solid var(--rule); padding: 10px 12px; margin-bottom: 8px; }
.board .kard[draggable=true] { cursor: grab; } .board .kard a { font-weight: 600; text-decoration: none; color: var(--ink); } .board .kard a:hover { color: var(--accent); }
.suggestions td { vertical-align: middle; } .suggestions tr.done td { opacity: .5; }
@media (max-width: 900px) { .board { grid-template-columns: repeat(7, 220px); } }
/* availability timeline */
.timeline { border-collapse: collapse; font-size: 12px; }
.timeline th, .timeline td { padding: 2px 0; border-bottom: 1px solid var(--rule); text-align: center; }
.timeline .tl-name { text-align: left; white-space: nowrap; padding-right: 12px; position: sticky; left: 0; background: var(--ground); z-index: 1; min-width: 220px; }
.timeline th.tl-day { font-family: var(--mono); font-size: 12px; min-width: 18px; color: var(--ink-2); vertical-align: bottom; }
.timeline th.tl-day .m { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.timeline .we { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.timeline .tl-project td.on { background: var(--accent); opacity: .85; }
.timeline td.tl-cell { font-family: var(--mono); font-size: 12px; min-width: 18px; height: 20px; }
.timeline td.busy { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.timeline td.tight { background: color-mix(in srgb, var(--warn) 45%, transparent); }
.timeline td.short { background: var(--danger); color: var(--accent-ink); font-weight: 700; }

/* Rentman-style module sidebar on wide screens; the top nav stays for phones */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.layout > main { min-width: 0; } /* a wide table or form must not stretch the page */
.side { display: none; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
  .layout.bare { grid-template-columns: 1fr; }
  .side { display: block; position: sticky; top: 72px; padding-top: clamp(12px, 1.6vw, 20px); max-height: calc(100vh - 72px); overflow-y: auto; scrollbar-width: thin; }
  header.top nav { display: none; }
  .wrap.layout { max-width: 1400px; }
}
.side .mod { border-top: 1px solid var(--rule); }
.side .mod:last-child { border-bottom: 1px solid var(--rule); }
.side .mod-link { display: block; padding: 10px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.side .mod-link:hover { color: var(--ink); }
.side .mod.on .mod-link { color: var(--ink); font-weight: 600; }
.side .mod.on { border-top-color: var(--ink); }
.side .subs { display: grid; padding: 0 0 var(--s3) var(--s3); border-left: 2px solid var(--accent); margin: 0 0 var(--s3) 2px; }
.side .subs a { font-family: var(--body); font-size: 14px; line-height: 1.3; color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.side .subs a:hover { color: var(--ink); } .side .subs a.active { color: var(--accent); font-weight: 600; }
/* group kickers inside the sub-list (nav.Sub.group): "Einkauf", "Buchhaltung", ... */
.side .subs .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); opacity: .75; margin: var(--s3) 0 2px; }
.side .subs .count { margin-left: var(--s1); }
/* project tabs (.ptabs): the shared tab rules above; the tab panels */
.tab[hidden] { display: none; }
tr.rowlink { cursor: pointer; } tr.rowlink:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
/* clickable rows: the name reads as text, the row itself is the link */
tr.rowlink td:first-child > a { text-decoration: none; color: var(--ink); font-weight: 500; }
tr.rowlink:hover td:first-child > a { color: var(--accent); }
table.selectable tr { user-select: none; } table.selectable tr.picked td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
table.selectable input.pick { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
table.selectable select.changed { border-color: var(--accent); }
tr.rowlink td > a:not(.btn) { text-decoration: none; }
tr.rowlink:hover td > a:not(.btn) { color: var(--accent); }
table.selectable td > a:not(.btn) { text-decoration: none; } table.selectable tr:hover td > a:not(.btn) { color: var(--accent); }

/* ---- titled panels (.k-panel .k-head .k-title, settings / item card / Lager) restyled to the
   open layout (T4): no box, the head is a sec-head line, the inset utilities are neutralised */
.k-panel { background: transparent; border: 0; padding: 0; margin: 0 0 var(--s6); min-width: 0; }
.k-panel .k-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); padding: 0 0 var(--s2); margin: 0 0 var(--s3); border-bottom: 1px solid var(--ink); flex-wrap: wrap; }
.k-title { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.k-panel table { margin: 0; } .k-panel td, .k-panel th { padding-left: 0; padding-right: var(--s4); } .k-panel td:last-child, .k-panel th:last-child { padding-right: 0; }
.k-panel.inner { margin: 0; }
.k-panel .p-14-20, .k-panel .p-16-20, .k-panel .p-0-20-16, .k-panel .p-0-20-18, .k-panel .p-12-16, .k-panel .p-20 { padding-inline: 0 !important; }
.k-panel + .k-panel { margin-top: var(--s6); }
.pill { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2); white-space: nowrap; }
.cell { width: 84px; padding: 6px 8px; font-size: 14px; text-align: right; }
.sel { width: 28px; padding-right: 8px !important; }
.mat { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.mat-tree { background: var(--panel); border: 1px solid var(--rule); position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; }
.mat-search { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--panel); } .mat-search input, .mat-search select { padding: 8px 10px; font-size: 14px; }
.mat-items td { padding: 8px 12px; font-size: 14px; } .mat-items .cell { width: 52px; }
.mat-table tr.grp td { background: color-mix(in srgb, var(--ink) 4%, transparent); } .mat-table .cell { width: 72px; }
.mat-tools { margin-bottom: 12px; }
.times td.mono { font-family: var(--mono); font-size: 13px; }
.tl { margin-top: 20px; border: 1px solid var(--rule); background: var(--panel); overflow: hidden; }
.tl-head { margin-left: 180px; border-bottom: 1px solid var(--rule); position: relative; }
.tl-months, .tl-ticks { position: relative; height: 22px; } .tl-months span, .tl-ticks span { position: absolute; top: 2px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding-left: 4px; white-space: nowrap; }
.tl-months span { border-left: 1px solid var(--ink); font-weight: 600; color: var(--ink); }
.tl-row { display: grid; grid-template-columns: 180px 1fr; min-height: 48px; border-bottom: 1px solid var(--rule); }
.tl-label { padding: 12px; font-size: 13px; color: var(--ink-2); border-right: 1px solid var(--rule); }
.tl-track { position: relative; } .tl-track i { position: absolute; top: 0; bottom: 0; border-left: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.tl-bar { position: absolute; top: 6px; bottom: 6px; background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-left: 3px solid var(--accent); padding: 3px 8px; overflow: hidden; white-space: nowrap; font-size: 12px; }
.tl-bar b { display: block; color: var(--accent); } .tl-bar span { color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
.tl-bar.usage { background: color-mix(in srgb, var(--ink) 10%, var(--panel)); border-left-color: var(--ink-2); } .tl-bar.usage b { color: var(--ink); }
.tl-bar.window { background: color-mix(in srgb, var(--ok) 22%, var(--panel)); border-left-color: var(--ok); padding: 3px 4px; } .tl-bar.window b { color: var(--ok); font-size: 12px; }
.tl-bar.window.off { opacity: .45; border-left-style: dashed; }
@media (max-width: 1000px) { .mat { grid-template-columns: 1fr; } .mat-tree { position: static; max-height: 320px; } }

/* ---- document viewer with side panel ------------------------------------------ */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.doc-side { background: var(--panel); border: 1px solid var(--rule); position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; }
.ds-actions { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.ds-actions .link { background: none; border: 0; color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 0; }
.ds-icons { display: flex; gap: 6px; } .ds-icons a, .ds-icons button { background: none; border: 1px solid transparent; color: var(--accent); font-size: 16px; line-height: 1; padding: 6px; text-decoration: none; cursor: pointer; } .ds-icons a:hover, .ds-icons button:hover { border-color: var(--rule); }
.ds-block { padding: 16px; border-bottom: 1px solid var(--rule); } .ds-block h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; display: flex; justify-content: space-between; } .ds-block h3 a { text-transform: none; letter-spacing: .04em; }
.ds-tip { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-left: 3px solid var(--accent); padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }
.ds-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; }
.ds-history { list-style: none; padding: 0; margin: 0; } .ds-history li { display: grid; gap: 2px; padding: 8px 0 8px 14px; border-left: 2px solid var(--accent); margin-bottom: 8px; font-size: 14px; } .ds-history li span { color: var(--ink-2); font-size: 13px; }
@media (max-width: 1000px) { .doc-layout { grid-template-columns: 1fr; } .doc-side { position: static; max-height: none; } }

/* ---- settings in Rentman's layout: sub-nav, sections ------------------------- */
.cfg { display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cfg-nav { position: sticky; top: 72px; display: grid; gap: 2px; } .cfg-nav a { text-decoration: none; color: var(--ink-2); font-size: 14px; padding: 6px 0 6px 16px; } .cfg-nav a:hover { color: var(--ink); }
.cfg-group { font-family: var(--display); font-weight: 800; font-size: 16px; margin: 14px 0 6px; } .cfg-group:first-child { margin-top: 0; }
.cfg-section { margin-bottom: var(--s5); } .cfg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; padding: var(--s3) 0 var(--s4); }
.cfg-fields .f input { border: 0; border-bottom: 1px solid var(--rule); background: transparent; padding: 8px 0; } .cfg-fields .f input:focus { outline: none; border-bottom-color: var(--accent); }
.cfg-fields .consent { grid-column: 1 / -1; }
.cfg-save { position: sticky; bottom: 0; background: var(--ground); padding: 12px 0; }
@media (max-width: 1100px) { .cfg { grid-template-columns: 1fr; } .cfg-nav { position: static; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .cfg-group { grid-column: 1 / -1; } }
@media (max-width: 700px) { .cfg-fields { grid-template-columns: 1fr; } }

/* compact document lists on the project page */
table.compact td { padding-top: 8px; padding-bottom: 8px; font-size: 14px; white-space: nowrap; } table.compact td:first-child { white-space: normal; }
.k-more { padding: 10px 0; border-top: 1px solid var(--hair); } .k-more summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .k-more summary:hover { color: var(--ink); }
.k-more table { margin-top: 8px; }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--rule); background: var(--panel); }
.cal-wd { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 8px; border-bottom: 1px solid var(--rule); }
.cal-day { min-height: 96px; padding: 6px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; align-content: start; gap: 3px; } .cal-day:nth-child(7n) { border-right: 0; }
.cal-day.out { background: var(--ground); color: var(--ink-2); } .cal-day.today .cal-n { color: var(--accent); font-weight: 700; }
.cal-n { font-family: var(--mono); font-size: 12px; } .cal-chip { display: block; font-size: 12px; padding: 2px 6px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-key { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 12px; } .cal-key i { width: 10px; height: 10px; display: inline-block; }
/* crew day grid */
.crew-grid-wrap { overflow-x: auto; } .crew-grid th.num, .crew-grid td.cg { text-align: center; padding: 6px 8px; font-size: 12px; white-space: nowrap; }
.crew-grid td.cg.on { background: color-mix(in srgb, var(--accent) 16%, transparent); } .crew-grid td.cg.on.zugesagt { background: color-mix(in srgb, var(--ok) 22%, transparent); } .crew-grid td.cg.on.abgesagt { background: color-mix(in srgb, var(--danger) 18%, transparent); }
td.num.danger { color: var(--danger); font-weight: 700; }

/* configuration list rows */
.cfg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; }
.cfg-row input, .cfg-row select, .cfg-row textarea { padding: 6px 8px; font-size: 14px; min-width: 110px; flex: 1 1 140px; } .cfg-row input.num { flex: 0 1 90px; min-width: 70px; text-align: right; } .cfg-row textarea { flex: 2 1 260px; }
.cfg-row .dot { background: none; border: 0; color: var(--accent); font-size: 16px; cursor: pointer; padding: 0 4px; } .cfg-list td { padding: 0; }
.cfg-nav a.active { color: var(--accent); }

/* --- utilities (replace inline styles) ---------------------------------------
   One class per declaration, named after the value: .mt-18 = margin-top:18px,
   .minw-160 = min-width:160px, .p-14-20 = padding:14px 20px, .cols-15-1-a =
   grid-template-columns:1.5fr 1fr auto (15 = 1.5fr, 06 = .6fr, a = auto).
   They replaced inline style="..." attributes, which always won over the
   stylesheet; !important keeps exactly that behaviour. */
/* spacing */
.gap-8 { gap:8px !important; }
.gap-12 { gap:12px !important; }
.gap-14 { gap:14px !important; }
.gap-18 { gap:18px !important; }
.m-0 { margin:0 !important; }
.m-0-0-6 { margin:0 0 6px !important; }
.m-0-0-10 { margin:0 0 10px !important; }
.m-4-0-0 { margin:4px 0 0 !important; }
.m-6-0-0 { margin:6px 0 0 !important; }
.m-8-0-0 { margin:8px 0 0 !important; }
.m-10-0-0 { margin:10px 0 0 !important; }
.m-12-0-0 { margin:12px 0 0 !important; }
.mb-6 { margin-bottom:6px !important; }
.mb-10 { margin-bottom:10px !important; }
.mb-16 { margin-bottom:16px !important; }
.mb-18 { margin-bottom:18px !important; }
.mb-24 { margin-bottom:24px !important; }
.ml-6 { margin-left:6px !important; }
.ml-8 { margin-left:8px !important; }
.ml-auto { margin-left:auto !important; }
.mt-4 { margin-top:4px !important; }
.mt-8 { margin-top:8px !important; }
.mt-10 { margin-top:10px !important; }
.mt-12 { margin-top:12px !important; }
.mt-14 { margin-top:14px !important; }
.mt-16 { margin-top:16px !important; }
.mt-18 { margin-top:18px !important; }
.mt-20 { margin-top:20px !important; }
.mt-24 { margin-top:24px !important; }
.mt-32 { margin-top:32px !important; }
.mt-neg8 { margin-top:-8px !important; }
.my-6 { margin:6px 0 !important; }
.p-0-0-10 { padding:0 0 10px !important; }
.p-0-20-16 { padding:0 20px 16px !important; }
.p-0-20-18 { padding:0 20px 18px !important; }
.p-2 { padding:2px !important; }
.p-4 { padding:4px !important; }
.p-10-0-0 { padding:10px 0 0 !important; }
.p-14-20 { padding:14px 20px !important; }
.p-16-20 { padding:16px 20px !important; }
.p-20 { padding:20px !important; }
.pt-12 { padding-top:12px !important; }
/* sizing */
.h-17 { height:17px !important; }
.h-200 { height:200px !important; }
.maxh-40 { max-height:40px !important; }
.maxh-260 { max-height:260px !important; }
.maxw-160 { max-width:160px !important; }
.maxw-220 { max-width:220px !important; }
.maxw-260 { max-width:260px !important; }
.maxw-420 { max-width:420px !important; }
.maxw-520 { max-width:520px !important; }
.maxw-600 { max-width:600px !important; }
.maxw-640 { max-width:640px !important; }
.maxw-720 { max-width:720px !important; }
.maxw-760 { max-width:760px !important; }
.maxw-full { max-width:100% !important; }
.minw-52 { min-width:52px !important; }
.minw-120 { min-width:120px !important; }
.minw-140 { min-width:140px !important; }
.minw-150 { min-width:150px !important; }
.minw-160 { min-width:160px !important; }
.minw-180 { min-width:180px !important; }
.minw-200 { min-width:200px !important; }
.minw-220 { min-width:220px !important; }
.minw-240 { min-width:240px !important; }
.minw-260 { min-width:260px !important; }
.minw-280 { min-width:280px !important; }
.minw-320 { min-width:320px !important; }
.w-9-5em { width:9.5em !important; }
.w-28 { width:28px !important; }
.w-56 { width:56px !important; }
.w-60 { width:60px !important; }
.w-64 { width:64px !important; }
.w-70 { width:70px !important; }
.w-80 { width:80px !important; }
.w-84 { width:84px !important; }
.w-90 { width:90px !important; }
.w-100 { width:100px !important; }
.w-110 { width:110px !important; }
.w-120 { width:120px !important; }
.w-130 { width:130px !important; }
.w-140 { width:140px !important; }
.w-150 { width:150px !important; }
.w-160 { width:160px !important; }
.w-180 { width:180px !important; }
.w-220 { width:220px !important; }
.w-10em { width:10em !important; }
.w-28p { width:28% !important; }
.w-full { width:100% !important; }
/* layout */
.abs { position:absolute !important; }
.ai-center { align-items:center !important; }
.ai-start { align-items:flex-start !important; }
.col-1-3 { grid-column:1/3 !important; }
.col-2-4 { grid-column:2/4 !important; }
.cols-1-1-1-1-1-a { grid-template-columns:1fr 1fr 1fr 1fr 1fr auto !important; }
.cols-1-1-1-15-a { grid-template-columns:1fr 1fr 1fr 1.5fr auto !important; }
.cols-1-3-1-a { grid-template-columns:1fr 3fr 1fr auto !important; }
.cols-1-15-06-08-08-a { grid-template-columns:1fr 1.5fr .6fr .8fr .8fr auto !important; }
.cols-1-15-15-a { grid-template-columns:1fr 1.5fr 1.5fr auto !important; }
.cols-2-1-1-1-a { grid-template-columns:2fr 1fr 1fr 1fr auto !important; }
.cols-2-1-1-2-a { grid-template-columns:2fr 1fr 1fr 2fr auto !important; }
.cols-2-1-1-a { grid-template-columns:2fr 1fr 1fr auto !important; }
.cols-12-1-1-1-1-a { grid-template-columns:1.2fr 1fr 1fr 1fr 1fr auto !important; }
.cols-15-1-1-1-1-a { grid-template-columns:1.5fr 1fr 1fr 1fr 1fr auto !important; }
.cols-15-2-1-a-1-1-a { grid-template-columns:1.5fr 2fr 1fr auto 1fr 1fr auto !important; }
.cols-15-15-1-1-a { grid-template-columns:1.5fr 1.5fr 1fr 1fr auto !important; }
.cols-15-15-15-1-1-a { grid-template-columns:1.5fr 1.5fr 1.5fr 1fr 1fr auto !important; }
.d-block { display:block !important; }
.d-grid { display:grid !important; }
.flex { display:flex !important; }
.flex-1 { flex:1 !important; }
.flex-2-220 { flex:2 1 220px !important; }
.flex-2-300 { flex:2 1 300px !important; }
.flex-wrap { flex-wrap:wrap !important; }
.grid-auto-140 { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important; }
.grid-auto-150 { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; }
.inline-block { display:inline-block !important; }
.jc-between { justify-content:space-between !important; }
.span-all { grid-column:1/-1 !important; }
/* text */
.nowrap { white-space:nowrap !important; }
.pre-wrap { white-space:pre-wrap !important; }
.ta-center { text-align:center !important; }
.ta-left { text-align:left !important; }
.ta-right { text-align:right !important; }
.wrap-anywhere { overflow-wrap:anywhere !important; }
/* colour & border */
.b-ink { border:1px solid var(--ink) !important; }
.b-rule { border:1px solid var(--rule) !important; }
.bb-rule { border-bottom:1px solid var(--rule) !important; }
.bc-rule { border-color:var(--rule) !important; }
.bg-tint { background:var(--tint) !important; }
.bg-white { background:#fff !important; }
.bt-rule { border-top:1px solid var(--rule) !important; }
.c-danger { color:var(--danger) !important; }
.c-inherit { color:inherit !important; }
.c-ink { color:var(--ink) !important; }
.op-70 { opacity:.7 !important; }
.op-80 { opacity:.8 !important; }
.op-85 { opacity:.85 !important; }
/* misc */
.touch-none { touch-action:none !important; }
.mt-0 { margin-top:0 !important; }
.p-4-10 { padding:4px 10px !important; }
.p-12-16 { padding:12px 16px !important; }
.fs-15 { font-size:15px !important; }
/* components that used to be inline styles */
.btn-xl { padding:16px 32px !important; font-size:16px !important; }
.timer-clock { font-family:var(--mono) !important; font-size:clamp(36px,8vw,56px) !important; font-weight:700 !important; margin:8px 0 4px !important; letter-spacing:.02em !important; }
.timer-clock-sm { font-size:22px !important; }

/* global search in the header: a small field that widens while focused, its dropdown below;
   where the header gets tight (and on phones) only an icon that opens the field under the bar */
header.top .wrap { gap: 16px; }
.gsearch { position: relative; display: flex; align-items: center; flex: 0 1 110px; min-width: 100px; }
.gsearch input { width: 100%; padding: 6px 26px 6px 10px; font-size: 14px; }
.gsearch input:focus { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 300px; z-index: 31; }
.gsearch-key { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 12px; color: var(--ink-2); border: 1px solid var(--rule); padding: 0 5px; line-height: 16px; pointer-events: none; }
.gsearch input:focus + .gsearch-key, .gsearch input:not(:placeholder-shown) + .gsearch-key { display: none; }
.gsearch-toggle { display: none; padding: 6px 8px; border-color: var(--rule); color: var(--ink-2); border-radius: 3px; }
.gsearch-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gsearch-hits { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(460px, 92vw); max-height: 70vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.gsearch-hits:empty { display: none; }
.gs-group { padding: 10px 14px 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gs-hit { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 7px 14px; text-decoration: none; color: var(--ink); }
.gs-hit:hover, .gs-hit:focus { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.gs-text { display: flex; flex-direction: column; min-width: 0; }
.gs-label { font-size: 14px; overflow-wrap: anywhere; }
.gs-sub { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.gs-hit .badge { font-size: 12px; padding: 1px 6px; }
.gs-all { display: block; padding: 10px 14px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-decoration: none; color: var(--accent); }
.gs-all:hover, .gs-all:focus { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.gs-empty { padding: 12px 14px; font-size: 14px; }
@media (max-width: 1100px) {
  .gsearch { flex: 0 0 auto; min-width: 0; position: static; }
  .gsearch-toggle { display: inline-flex; }
  .gsearch input, .gsearch-key { display: none; }
  .gsearch.open input { display: block; position: absolute; top: 100%; right: clamp(16px, 4vw, 40px); width: min(420px, calc(100vw - 24px)); transform: none; margin-top: 6px; z-index: 31; }
  .gsearch-hits { top: calc(100% + 54px); right: clamp(16px, 4vw, 40px); width: min(420px, calc(100vw - 24px)); }
}
@media (max-width: 900px) { header nav { order: 3; } .gsearch { margin-left: auto; } .gsearch ~ .logout { margin-left: 0; } }
@media (max-width: 700px) { .gsearch.open input, .gsearch-hits { left: 12px; right: 12px; width: auto; } }

/* toasts: the "Gespeichert." after a form and the htmx error messages */
.toasts { position: fixed; z-index: 50; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; background: var(--ink); color: var(--ground); border-left: 3px solid var(--ok); padding: 10px 16px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: opacity .4s, transform .4s; max-width: 420px; overflow-wrap: anywhere; }
.toast.warn { border-left-color: var(--warn); }
.toast.error { border-left-color: var(--danger); }
.toast.out { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* error page */
.error-box { max-width: 64ch; }
.error-box .note { color: var(--ink); }

/* --- phones: nothing may be wider than the screen --------------------------------- */
@media (max-width: 700px) {
  /* wide tables scroll inside themselves instead of widening the page */
  main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* multi-column form rows stack (the cols-* utilities carry !important for desktop) */
  main [class*="cols-"] { grid-template-columns: minmax(0, 1fr) !important; }
  main input, main select, main textarea { max-width: 100%; }
  .page-head h1 { overflow-wrap: anywhere; }
  .checks, .chips { flex-wrap: wrap; }
}


/* --- page actions (base.html {% block page_actions %}, partials/macros.html): the save
   button top right, sticky under the header; static/app.js marks it dirty ------------- */
.page-actions { float: right; position: sticky; top: calc(var(--header-h, 53px) + 8px); z-index: 9; display: flex; align-items: center; gap: 8px; margin: 0 0 8px 16px; }
.page-actions:not(:has(> :not([hidden]))) { display: none; }
.page-save { padding: 8px 14px; font-size: 12px; background: var(--ground); box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 10%, transparent); }
.page-save.dirty { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.page-save[hidden], .page-saved[hidden] { display: none; }
.page-saved { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--ground); border: 1px solid var(--rule); padding: 6px 10px; white-space: nowrap; }
.page-saved.ok { color: var(--ok); border-color: var(--ok); }
.page-saved.busy { color: var(--ink); }
.page-saved.error { color: var(--danger); border-color: var(--danger); }
@media (max-width: 700px) { .page-actions { top: calc(var(--header-h, 53px) + 6px); margin-left: 10px; } }

/* --- live filters (form[data-live], static/app.js): the submit button only without JS -- */
form.is-live .live-submit { display: none; }
[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.chips { display: flex; gap: 0 var(--s1); flex-wrap: wrap; align-items: center; }
/* a value chip (design.md §5: "Rabatt 50 %", a source, a warning): mono 12 px with a rule */
.chip { position: relative; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 2px; padding: 4px 9px; cursor: pointer; white-space: nowrap; user-select: none; transition: color .15s, border-color .15s, background .15s, box-shadow .15s; }
.chip:hover { color: var(--ink); border-color: var(--ink-2); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip:has(input:checked), .chip.on { color: var(--accent); border-color: var(--accent); }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* filter chips (.chips > .chip, radios or links): the quiet segmented control (T2) */
.chips > .chip { border-color: transparent; border-radius: 0; padding: 6px 8px; box-shadow: inset 0 -2px 0 transparent; }
.chips > .chip:hover { color: var(--ink); background: var(--wash); border-color: transparent; }
.chips > .chip:has(input:checked), .chips > .chip.on { color: var(--accent); background: transparent; border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
.chips > .chip.chip-ok.on { color: var(--ok); box-shadow: inset 0 -2px 0 var(--ok); }

/* --- inventory list (inventar.html, partials/inventar_results.html, inventar_row.html) --- */
.filterbar { position: sticky; top: var(--header-h, 53px); z-index: 8; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 0; margin-bottom: 8px; background: var(--ground); border-bottom: 1px solid var(--ink); }
.filterbar input[type=search] { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; font-size: 15px; }
.filterbar select { padding: 8px 10px; font-size: 14px; max-width: 240px; }
.inv-new { margin: 8px 0 4px; } .inv-new > summary { padding: 6px 0; }
.inv-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; padding: 14px 0 6px; }
.inv-links { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.inv-links a { color: var(--ink-2); text-decoration: none; } .inv-links a:hover { color: var(--accent); }
table.inv-table { border-collapse: separate; border-spacing: 0; }
.inv-table th { padding-top: 6px; }
.inv-table td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
.inv-table td.num, .inv-table th.num { padding-left: 12px; }
.inv-table th.col-name { width: 38%; }
.inv-table.grouped .col-folder { display: none; }
.inv-table .col-folder { max-width: 220px; }
tr.inv-folder th { position: sticky; top: calc(var(--header-h, 53px) + var(--filter-h, 62px)); z-index: 2; background: var(--ground); padding: 22px 0 8px; font-size: 12px; color: var(--ink); border-bottom: 1px solid var(--ink); text-transform: uppercase; letter-spacing: .08em; }
tr.inv-folder th span { color: var(--ink-2); margin-left: 8px; font-weight: 400; }
.inv-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.inv-title a { color: var(--ink); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
tr.rowlink:hover .inv-title a { color: var(--accent); }
.inv-title .badge { font-size: 12px; padding: 1px 6px; }
.inv-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--ink-2); margin: 2px 0 0 18px; text-decoration: none; overflow-wrap: anywhere; }
a.inv-sub:hover { color: var(--accent); }
.inv-table th.col-opt:not(.num), .inv-table td.inv-next { padding-left: 24px; }
.inv-next { white-space: nowrap; font-size: 13px; } .inv-next .mono { font-size: 12px; } .inv-next .inv-sub { margin-left: 0; }
.dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--led); } .dot.danger { background: var(--danger); }
.dot.none { background: transparent; border: 1.5px solid var(--ink-2); opacity: .6; }
.dot.flat { background: transparent; border: 1.5px dashed var(--ink-2); opacity: .6; }
.dot.hire { background: color-mix(in srgb, var(--ink-2) 65%, var(--accent)); } /* nur Zumiete: grey-blue */
.badge.zumiete { background: color-mix(in srgb, var(--accent) 10%, transparent); color: color-mix(in srgb, var(--ink-2) 65%, var(--accent)); }
tr.inv-folder.sub th { padding-top: 12px; font-size: 12px; border-bottom-style: dotted; }
/* Inventar › Ordner & Aufräumen: tree beside the item list */
.ordner-split { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 24px; align-items: start; }
.ordner-tree { position: sticky; top: calc(var(--header-h, 53px) + 12px); max-height: calc(100vh - 90px); overflow: auto; }
tr.ordner-unsure td { background: color-mix(in srgb, var(--led) 12%, transparent); }
@media (max-width: 860px) { .ordner-split { grid-template-columns: 1fr; } .ordner-tree { position: static; max-height: none; } }
.inv-table td.num a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; } .inv-table td.num a:hover { color: var(--accent); }
.inv-table .col-price { width: 1%; }
.inv-table input.qe { width: 92px; max-width: none; padding: 5px 8px; text-align: right; font-family: var(--mono); font-size: 13px; background: transparent; border: 1px solid transparent; }
.inv-table tr:hover input.qe { border-bottom-color: var(--rule); }
.inv-table input.qe:hover { border-color: var(--rule); background: var(--panel); }
.inv-table input.qe:focus { border-color: var(--accent); background: var(--field); outline: none; }
.th-short { display: none; }
@media (max-width: 700px) {
  main table.inv-table { display: table; overflow: visible; }
  .inv-table .th-long { display: none; } .inv-table .th-short { display: inline; }
  .inv-table th { font-size: 12px; letter-spacing: .04em; }
  .filterbar { position: static; }
  tr.inv-folder th { top: var(--header-h, 53px); }
  .inv-table .col-opt, .inv-table .col-folder { display: none; }
  .inv-table th.col-name { width: auto; }
  .inv-table td, .inv-table th { font-size: 14px; }
  .inv-table td.num, .inv-table th.num { padding-left: 8px; padding-right: 8px; }
  .inv-table th:last-child, .inv-table td:last-child { padding-right: 0; }
  .inv-table input.qe { width: 60px; padding: 4px 2px; font-size: 12px; }
  .inv-sub { margin-left: 18px; }
  .filterbar { gap: 6px; padding: 8px 0; }
  .filterbar input[type=search] { flex-basis: 100%; }
  .filterbar select { flex: 1 1 40%; max-width: none; }
  .filterbar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
  .filterbar .chips::-webkit-scrollbar { display: none; }
}

/* --- item card (inventar_detail.html): head with status dot; .facts is the shared strip --- */
.card-head h1 .dot { width: 10px; height: 10px; margin-right: 10px; vertical-align: 3px; }
.facts-links { display: flex; justify-content: flex-end; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: clamp(20px, 3vw, 32px); }
.facts-links a { color: var(--ink-2); text-decoration: none; } .facts-links a:hover { color: var(--accent); }
/* Rendite: placeholder rows (flat rates, licences) read grey */
tr.rowlink.muted td, tr.rowlink.muted td:first-child > a { color: var(--ink-2); }

/* --- day / night switch in the header (base.html .amp, static/theme.js): a chrome
   bat-handle toggle like on an amp or a Les Paul, lever up = Nacht, down = Tag; next to it
   the pilot LED, unlit by day, blue at night (--led-lens / --led-halo in the tokens) ---- */
.amp { display: flex; align-items: center; gap: 10px; flex: none; }
.amp .logout { margin-right: 6px; }
@media (max-width: 900px) { .amp { order: 2; } .amp .logout { order: 0; margin-left: 0; } }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 2px; border: 0; border-radius: 3px; background: none; color: var(--ink-2); cursor: pointer; }
.toggle:hover { transform: none; }
.tg-legend { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; height: 28px; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.tg-legend span { opacity: .5; transition: opacity .15s, color .15s; }
/* the lever and legend follow data-theme on <html> (set by theme-init.js before the first
   paint) and the system setting - not aria-checked, which theme.js only sets after the page
   is drawn: that made the switch flick to "Tag" on every page load */
.toggle .tg-day { opacity: 1; color: var(--ink); }
:root[data-theme="dark"] .toggle .tg-night { opacity: 1; color: var(--ink); }
:root[data-theme="dark"] .toggle .tg-day { opacity: .5; color: inherit; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toggle .tg-night { opacity: 1; color: var(--ink); }
  :root:not([data-theme="light"]) .toggle .tg-day { opacity: .5; color: inherit; }
}
.tg-plate { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 9.2px, rgba(0,0,0,.22) 9.6px 10.1px, rgba(255,255,255,.55) 10.5px, transparent 11px),
    conic-gradient(from 210deg, #F7F9FA, #A4ABB3 14%, #EDF0F2 30%, #868D95 48%, #E9ECEF 64%, #9DA4AC 82%, #F7F9FA);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.75);
  filter: brightness(var(--metal)) drop-shadow(0 1.5px 1.2px var(--shadow)); transition: transform .1s; }
.toggle:active .tg-plate { transform: scale(.96); }
.tg-nut { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  background: linear-gradient(155deg, #FFFFFF 0, #C9CED3 35%, #8C939B 60%, #5B626A 100%); }
.tg-nut::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #9AA1A9, #30353B 72%); }
/* the bat: a wrapper turning about the bushing (perspective flip = lever through the panel's
   normal), a tapered chrome shaft (::before) and its rounded tip (::after) */
.tg-bat { position: absolute; left: 50%; bottom: 50%; width: 8px; height: 16px; margin-left: -4px; transform-origin: 50% 100%; filter: drop-shadow(0 0 .8px rgba(0,0,0,.55));
  transform: perspective(48px) rotateX(180deg); transition: transform .15s cubic-bezier(.4, 0, .2, 1.35); }
/* lever up = Nacht, from the theme itself (see the legend above) */
:root[data-theme="dark"] .toggle .tg-bat { transform: perspective(48px) rotateX(0deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toggle .tg-bat { transform: perspective(48px) rotateX(0deg); }
}
.tg-bat::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; bottom: 0;
  clip-path: polygon(30% 100%, 70% 100%, 96% 0, 4% 0);
  background: linear-gradient(90deg, #5E656D 0, #C3C9CF 22%, #FFFFFF 42%, #D5DADF 58%, #6A7179 100%); }
.tg-bat::after { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0 1.2px, #E1E5E9 2.5px, #9AA1A9 70%, #6A7179 100%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.led { width: 10px; height: 10px; margin: 0; flex: none; vertical-align: middle; background: var(--led-lens);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.45), 0 0 0 1.5px #8E959D, 0 0 0 2.5px rgba(0,0,0,.22), var(--led-halo);
  transition: box-shadow .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .tg-bat, .led, .tg-legend span { transition: none; } }
@media (max-width: 700px) { header.top .wrap { gap: 10px; } .amp { gap: 8px; } .tg-legend { display: none; } header .logout { padding: 6px 8px; } }

/* --- Rendite progress ("abbezahlt", partials/payback_bar.html): own revenue to date against
   the purchase value; accent while < 100 %, green from 100 %, a tick at 100 %, beyond it
   hatched and written as "+x %" -------------------------------------------------------- */
.payback { display: grid; gap: 6px; min-width: 0; }
.pb-track { position: relative; height: 10px; background: var(--rule); }
.pb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pb-fill); background: var(--accent); transition: width .4s ease-out; }
.payback.done .pb-fill { background: var(--ok); }
.payback.done .pb-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pb-mark); right: calc(100% - var(--pb-fill));
  background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ground) 50%, transparent) 3px 5px); }
.pb-mark { position: absolute; top: -3px; bottom: -3px; left: var(--pb-mark); width: 2px; margin-left: -2px; background: var(--ink); }
.pb-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.payback.done .pb-label, .payback.done .pb-pct, .pb-ok { color: var(--ok); font-weight: 500; }
.pb-over { font-size: 12px; color: var(--ok); border: 1px solid var(--ok); padding: 0 5px; line-height: 16px; }
.pb-hint { font-size: 13px; color: var(--ink-2); }
.pb-note { font-size: 13px; color: var(--ink-2); }
.payback.compact { grid-template-columns: 56px auto; align-items: center; gap: 8px; padding-top: 4px; }
.payback.compact .pb-track { height: 6px; }
.payback.compact .pb-text { font-size: 12px; gap: 4px 6px; flex-wrap: nowrap; white-space: nowrap; }
td.pb-col, th.pb-col { min-width: 124px; }
.rendite-table td:first-child { min-width: 190px; }
@media (prefers-reduced-motion: reduce) { .pb-fill { transition: none; } }
/* item card: the Rendite strip under the quick facts */
.pb-strip { display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto; gap: 14px 36px; align-items: center; padding: 4px 0 16px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.pb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 8px; }
.pb-head .label { font-size: 12px; }
.pb-figs { display: flex; gap: 28px; margin: 0; }
.pb-figs dt { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.pb-figs dd { margin: 4px 0 0; font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: 17px; line-height: 1.15; white-space: nowrap; }
.pb-link { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.pb-link:hover { color: var(--accent); }
@media (max-width: 900px) { .pb-strip { grid-template-columns: minmax(0, 1fr); } .pb-figs { flex-wrap: wrap; gap: 12px 24px; } }
/* per-item Rendite page */
.pb-block { max-width: 680px; margin: -6px 0 clamp(16px, 2.4vw, 28px); }
/* Rendite page: the "Abbezahlt" summary (one fleet bar, three counts that filter) */
.pb-summary h2 { margin-top: 0; }
.pb-summary-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); margin-bottom: clamp(16px, 2.4vw, 24px); }
.pb-summary-bar { display: grid; gap: 8px; align-content: center; padding: 12px 24px 14px 0; }
.pb-summary-bar .pb-track { height: 16px; }
.pb-summary-bar .pb-text { font-size: 14px; }
.pb-cell { display: grid; gap: 6px; align-content: start; padding: 12px 16px 14px; border-left: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: background .15s; }
.pb-cell:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pb-cell.on { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 0 -2px 0 var(--accent); }
.pb-cell .n { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.05; }
.pb-cell.ok .n { color: var(--ok); }
.pb-cell .l { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pb-cell .h { font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) { .pb-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pb-summary-bar { grid-column: 1 / -1; padding-right: 0; } .pb-summary-grid .pb-cell:nth-child(2) { border-left: 0; padding-left: 0; } }
/* filter chips as links (Rendite: abbezahlt / in Arbeit / noch nichts) */
a.chip { text-decoration: none; }
.chip.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.chip.chip-ok.on { background: var(--ok); border-color: var(--ok); }

/* --- the assistant on the start page (dashboard.html .card.assistant, partials/chat.html):
   a tinted panel with a cobalt rule, a "Claude" tag and a big input; tokens only, so the
   tint follows day / night by itself ------------------------------------------------ */
.card.assistant { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--rule)); border-left: 3px solid var(--accent);
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.6vw, 28px) clamp(16px, 2.2vw, 22px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 8px 24px -16px var(--shadow); overflow: visible; }
.card.assistant > h2 { margin-top: 0; }
.card.assistant > h2 > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.ai-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: 2px 8px; font-variation-settings: normal; }
.ai-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
.card.assistant .chat-log > p.muted { color: var(--ink); opacity: .82; }
.card.assistant .chat-form { gap: 10px; align-items: stretch; }
.card.assistant .chat-form input { flex: 1 1 420px; font-size: 17px; padding: 14px 16px; background: var(--field); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)); transition: border-color .15s, box-shadow .15s; }
.card.assistant .chat-form input:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--rule)); }
.card.assistant .chat-form input:focus, .card.assistant .chat-form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.card.assistant .chat-form button.primary { padding: 14px 26px; font-size: 15px; font-weight: 600; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.card.assistant .chat-form button.ghost { align-self: center; }
@media (max-width: 700px) { .card.assistant { padding: 14px 14px 16px; } .card.assistant .chat-form input { flex-basis: 100%; } .card.assistant .chat-form button.primary { flex: 1; justify-content: center; } }

/* --- start page on phones: the todo card must not push the page sideways ------------- */
.grid > * { min-width: 0; }
@media (max-width: 700px) {
  main table.compact-todos { display: table; width: 100%; table-layout: fixed; }
  .compact-todos td.actions { width: 40px; }
  .compact-todos td.due { width: 78px; white-space: nowrap; }
  .compact-todos td:nth-child(4) { width: 64px; }
  .compact-todos td:nth-child(2) { overflow-wrap: anywhere; }
}

/* Analyse › Profitabilität: DB % bar (width inline from data; colour by class), plan figures in
   italics, the "Umsatz vs. DB %" chart */
.dbbar { display: inline-flex; align-items: center; gap: 6px; --db: var(--ink-2); }
.dbbar.good { --db: var(--ok); } .dbbar.warn { --db: var(--warn); } .dbbar.bad { --db: var(--danger); }
.dbbar .track { display: inline-block; width: 56px; height: 6px; background: var(--rule); position: relative; }
.dbbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--db); }
.dbbar .pct { color: var(--db); }
.pf-plan { font-style: italic; }
.pf-scatter { display: block; max-width: 860px; }
.pf-scatter line { stroke: var(--rule); } .pf-scatter line.th { stroke-dasharray: 4 3; }
.pf-scatter text { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); }
.pf-scatter text.lbl { font-family: var(--body); }
.pf-scatter circle { fill: var(--ink-2); fill-opacity: .7; stroke: var(--ink); stroke-width: .5; }
.pf-scatter circle.good { fill: var(--ok); } .pf-scatter circle.warn { fill: var(--warn); }
.pf-scatter circle.bad { fill: var(--danger); }

/* --- assistant: thinking line inside the conversation ------------------------------- */
.chat .chat-pending .text { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.chat .think-dots { display: inline-flex; gap: 5px; align-items: center; height: 14px; }
.chat .think-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .25; animation: think-pulse 1.2s ease-in-out infinite; }
.chat .think-dots i:nth-child(2) { animation-delay: .18s; }
.chat .think-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes think-pulse { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat .think-label { font-style: italic; }
.chat .think-time { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); margin-left: auto; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; }
.chat .chat-echo .text { color: var(--ink-2); }
.chat-form[aria-busy="true"] input, .chat-form[aria-busy="true"] button { opacity: .6; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .chat .think-dots i { animation: none; opacity: .7; } }

/* --- header aligned with the page grid (wide screens) ---------------------------------
   The header used the 1180 px container while the page used 1400 px, so the logo and the
   sidebar started at different points and the search floated in the middle. On wide
   screens the header now uses the same container and the same columns as .layout:
   logo over the sidebar (200 px), search where the content starts, account group right. */
@media (min-width: 1100px) {
  header.top .wrap, footer.site .wrap { max-width: 1400px; }
  header.top .wrap {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    column-gap: 40px;
    justify-content: stretch;
  }
  header.top .mark { justify-self: start; }
  header.top .gsearch { flex: none; width: 100%; max-width: 560px; min-width: 0; justify-self: start; }
  header.top .gsearch input,
  header.top .gsearch input:focus {
    position: static; transform: none; width: 100%;
    padding: 8px 40px 8px 36px; font-size: 14px;
    background-color: var(--field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a828c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 11px 50%; background-size: 16px 16px;
    border: 1px solid var(--rule); border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
  }
  header.top .gsearch input:hover { border-color: var(--ink-2); }
  header.top .gsearch input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  header.top .gsearch-key { right: 10px; }
  header.top .gsearch-hits { left: 0; right: auto; width: 100%; max-width: 560px; }
  header.top .amp { justify-self: end; }
  /* the sidebar's first entry sits on the same line as the content's first row */
  .side { padding-top: clamp(16px, 2vw, 24px); }
}

/* no visible shortcut hint in the search field (the / key still focuses it) */
.gsearch-key { display: none !important; }
@media (min-width: 1100px) { header.top .gsearch input, header.top .gsearch input:focus { padding-right: 14px; } }

/* a hidden chat line stays hidden (.chat .msg sets display:grid, which beat [hidden]) */
.chat .msg[hidden], .chat [hidden] { display: none !important; }

/* "im Web nachgesehen": under the answer text, not squeezed into the name column */
.chat .msg .chat-web {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  margin-top: -4px; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--ink-2);
}
.chat .msg .chat-web-icon {
  width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 700px) { .chat .msg .chat-web { grid-column: 1 / -1; } }

/* assistant: compact mode – only the input line; the conversation opens while asking */
.card.assistant h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card.assistant .assistant-size { margin-left: auto; align-self: center; }
.card.assistant.compact { padding-top: 12px; padding-bottom: 12px; }
.card.assistant.compact .assistant-sub,
.card.assistant.compact .chat-log { display: none; }
.card.assistant.compact.asking .chat-log { display: grid; max-height: 260px; }
.card.assistant.compact h2 { margin-bottom: 8px; }
.card.assistant.compact .chat-form input { padding: 10px 14px; font-size: 15px; }
.card.assistant.compact .chat-form button.primary { padding: 10px 20px; }

/* evidence lines of the receipt -> project matcher (project tab Eingangsrechnungen, /belege/zuordnung) */
.ev { display: inline-block; font-size: 12px; line-height: 1.35; border: 1px solid var(--rule); padding: 1px 6px; margin: 3px 4px 0 0; color: var(--ink-2); }
.ev.score { font-family: var(--mono); border-color: var(--accent); color: var(--accent); }
.card.assistant .icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; }
.card.assistant .icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card.assistant .icon-btn .ic-max { display: none; }
.card.assistant.compact .icon-btn .ic-min { display: none; }
.card.assistant.compact .icon-btn .ic-max { display: block; }

/* Projekt › Zeitplan › Ablauf (partials/project_ablauf.html): one row per programme point as
   an inline form; days outside the Einsatzzeiträume are collapsed <details>. */
.abl-tools { margin-bottom: 12px; }
.abl-feed { margin-bottom: 12px; }
.abl-feed .abl-feed-url { flex: 1 1 320px; min-width: 0; }
.abl-mail { margin-bottom: 8px; }
.abl-day { border-top: 1px solid var(--rule); padding: 10px 0 6px; }
.abl-day > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.abl-date { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.abl-facts { margin: 8px 0; }
.abl-facts-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.abl-facts-form label { display: flex; flex-direction: column; gap: 2px; }
.abl-facts-form .abl-wide { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.abl-facts-form label.abl-wide { flex-direction: column; }
.abl-rows { margin-top: 6px; }
.abl-row { display: grid; grid-template-columns: 76px 76px minmax(150px, 2fr) 130px minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) 118px; gap: 6px; align-items: center; padding: 4px 0; margin: 0; border-bottom: 1px solid var(--rule); }
.abl-row input, .abl-row select { width: 100%; min-width: 0; padding: 5px 7px; font-size: 14px; }
.abl-row.hl { border-bottom: 2px solid var(--accent); }
.abl-row.hl input[name="start"] { color: var(--accent); font-weight: 600; }
.abl-headrow { border-bottom: 1px solid var(--ink); font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.abl-new { border-bottom: 0; opacity: .85; }
.abl-actions { display: flex; gap: 2px; align-items: center; white-space: nowrap; }
.abl-actions button.x { all: unset; cursor: pointer; color: var(--ink-2); padding: 0 4px; font-size: 15px; line-height: 1; }
.abl-actions button.x:hover { color: var(--accent); }
.abl-actions button.x[disabled] { opacity: .3; cursor: default; }
.abl-actions button.abl-star.on { color: var(--accent); }
.abl-table td.time { width: 110px; white-space: nowrap; font-weight: 600; }
.abl-table tr.hl td { border-bottom: 2px solid var(--accent); }
.abl-table tr.hl td.time { color: var(--accent); }
@media (max-width: 900px) {
  .abl-row { grid-template-columns: 70px 70px 1fr; }
  .abl-row > :nth-child(n+4) { grid-column: 1 / -1; }
  .abl-headrow { display: none; }
}

/* --- user menu top right (partials/user_menu.html, static/user-menu.js): replaces the plain
   "Abmelden" link; avatar + name + role, a role="menu" list below. Phones: avatar only. */
.umenu { position: relative; flex: none; }
.umenu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; cursor: pointer; max-width: 260px; }
.umenu-btn:hover, .umenu.open .umenu-btn { border-color: var(--ink-2); transform: none; }
.umenu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.umenu-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.umenu-avatar.role-admin { background: var(--accent); color: var(--accent-ink); }
.umenu-avatar.big { width: 36px; height: 36px; font-size: 13px; }
.umenu-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.umenu-role { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); padding: 0 6px; white-space: nowrap; }
.umenu-caret { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-2); transition: transform .15s; }
.umenu.open .umenu-caret { transform: rotate(180deg); }
.umenu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 248px; max-width: min(320px, calc(100vw - 24px)); padding: 6px 0; background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 14px 36px var(--shadow); display: grid; }
.umenu-list[hidden] { display: none; }
.umenu-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px 12px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.umenu-who { display: grid; min-width: 0; line-height: 1.3; }
.umenu-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu-mail { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu-list [role="menuitem"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 16px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink); font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; text-align: left; text-decoration: none; cursor: pointer; }
.umenu-list [role="menuitem"]:hover, .umenu-list [role="menuitem"]:focus { outline: none; background: color-mix(in srgb, var(--accent) 10%, transparent); transform: none; }
.umenu-list [role="menuitem"]:focus-visible { border-left-color: var(--accent); }
.umenu-list [aria-current="page"] { font-weight: 600; border-left-color: var(--ink); }
.umenu-list .umenu-out { color: var(--danger); }
.umenu-sep { height: 1px; background: var(--rule); margin: 6px 0; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; font-family: var(--mono); font-size: 12px; line-height: 1.4; text-align: center; color: var(--ink-2); background: var(--field); }
@media (max-width: 1250px) and (min-width: 701px) { .umenu-role { display: none; } }
@media (max-width: 700px) { .umenu-btn { padding: 2px; gap: 0; border-color: transparent; } .umenu-name, .umenu-btn .umenu-role, .umenu-caret { display: none; } .umenu-list { position: fixed; right: 12px; left: auto; top: calc(var(--header-h, 53px) + 4px); } }
@media (prefers-reduced-motion: reduce) { .umenu-caret { transition: none; } }

/* the "Tastenkürzel" dialog (? key or the user menu) */
dialog.shortcuts { width: min(460px, calc(100vw - 32px)); padding: 22px 24px 24px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px var(--shadow); }
dialog.shortcuts::backdrop { background: rgba(0, 0, 0, .35); }
.shortcuts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.shortcuts-head h2 { margin: 0; padding: 0; border: 0; font-size: 17px; }
dialog.shortcuts dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0; align-items: baseline; }
dialog.shortcuts dt { white-space: nowrap; font-size: 13px; color: var(--ink-2); }
dialog.shortcuts dd { margin: 0; font-size: 14px; }

/* Profil / Sicherheit (profil.html, sicherheit.html) */
.acct-grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .acct-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.acct-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; border-top: 1px solid var(--ink); padding-top: 14px; }
.acct-facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.acct-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pw-meter { font-size: 13px; color: var(--ink-2); min-height: 1.2em; }
.pw-meter[data-score="0"], .pw-meter[data-score="1"] { color: var(--danger); }
.pw-meter[data-score="2"] { color: var(--warn); }
.pw-meter[data-score="3"], .pw-meter[data-score="4"] { color: var(--ok); }
.acct-rules { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.acct-rules dt { font-weight: 600; }
.acct-rules dd { margin: 0; color: var(--ink-2); }
h3.acct-h { font-size: 15px; font-weight: 700; margin: 22px 0 8px; }
.neu-day h2 { margin: var(--s5) 0 var(--s2); }
.neu-day ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.neu-day code { font-size: 12px; color: var(--ink-2); margin-right: 6px; }

/* Assistant actions: chips (direkt) and the card of proposals (bestätigen) under an answer */
.chat .msg .chat-actions { grid-column: 2; display: grid; gap: 8px; min-width: 0; }
@media (max-width: 700px) { .chat .msg .chat-actions { grid-column: 1 / -1; } }
.action-card-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.action-card-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.action-card-summary { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.action-card-diff { width: auto; border-collapse: collapse; font-size: 14px; }
.action-card-diff th, .action-card-diff td { padding: 2px 10px 2px 0; border: 0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.action-card-diff th { font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.action-card-diff .before { color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-2) 60%, transparent); }
.action-card-diff .after { font-weight: 600; }
.action-card-diff .arrow { color: var(--ink-2); }
.action-card-warning { margin: 0; font-size: 14px; color: var(--warn); }
.action-card-untrusted { margin: 0; font-size: 14px; color: var(--warn); border-top: 1px dashed color-mix(in srgb, var(--warn) 50%, transparent); padding-top: 6px; }
.action-card-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.action-card-foot form { margin: 0; }
.action-chip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; border: 1px solid var(--rule); border-left: 3px solid var(--ok); padding: 5px 10px; background: var(--field); min-width: 0; }
.action-chip.undone { border-left-color: var(--rule); color: var(--ink-2); }
.action-chip.undone .action-chip-text { text-decoration: line-through; }
.action-chip-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.action-chip-text { overflow-wrap: anywhere; min-width: 0; }
.action-chip form { margin: 0 0 0 auto; }
.action-chip a { color: var(--accent); }
/* the one card of proposals under an answer (partials/chat_action_batch.html,
   static/assistant-actions.js): a checklist, risky lines unticked at the bottom */
.action-batch { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule)); border-left: 3px solid var(--accent); background: var(--field); padding: 8px 12px; display: grid; gap: 6px; min-width: 0; margin: 0; }
.action-batch:not(.open) { border-color: var(--rule); border-left-color: var(--ok); }
.action-batch.untrusted.open { border-color: color-mix(in srgb, var(--warn) 55%, var(--rule)); border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--field)); }
.action-batch:focus { outline: none; }
.action-batch:focus-visible, .action-batch.open:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.action-batch-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.action-batch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.action-batch-list.risky { border-top: 1px dashed color-mix(in srgb, var(--danger) 45%, var(--rule)); padding-top: 4px; }
.action-batch-risky-head { margin: 4px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--danger); }
.action-line { display: grid; gap: 2px; padding: 3px 0; min-width: 0; }
.action-line-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.action-line-row input[type="checkbox"] { flex: none; margin: 2px 0 0; width: 18px; height: 18px; align-self: flex-start; accent-color: var(--accent); }
.action-line-row button { margin: 0; }
.action-line-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
label.action-line-text { cursor: pointer; }
.action-line-label { color: var(--ink-2); }
.action-line:not(.pending) .action-line-text { color: var(--ink-2); }
.action-line.undone .action-line-text { text-decoration: line-through; }
.action-line-why, .action-line-risk, .action-line-result, .action-line-more { margin: 0 0 0 26px; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; }
.action-batch.single .action-line-why, .action-batch.single .action-line-risk, .action-batch.single .action-line-result, .action-batch.single .action-line-more, .action-line:not(.pending) > :not(.action-line-row) { margin-left: 0; }
.action-line-why { color: var(--warn); }
.action-batch .action-batch-why { margin: 0; }
.action-line-risk { color: var(--danger); }
.action-line-result.danger { color: var(--danger); }
.action-line-more summary { cursor: pointer; width: max-content; }
.action-line-more .action-card-diff { margin-top: 2px; }
.action-batch-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (pointer: coarse) {
  .action-batch-keys { display: none; }
  .action-line-row input[type="checkbox"] { width: 22px; height: 22px; }
}
@media (max-width: 700px) { .action-batch-foot button { flex: 1 1 auto; min-height: 40px; } }
.chat-form .chat-log-link { align-self: center; }
/* "↓ neue Antwort" (app.js): the answer arrived while the user had scrolled up */
.chat-log .chat-jump { position: sticky; bottom: 6px; justify-self: center; z-index: 2; padding: 4px 12px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-size: 13px; box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 20%, transparent); }
.action-log-details { margin: 4px 0 0 16px; padding: 0; }
.note.warn { border-left-color: var(--warn); }

/* login security: 2FA step, enrolment, lock screen and the unlock overlay (static/lock.js) */
.login.wide { max-width: 620px; }
.login.ml-0 { margin-left: 0; }
.login details { margin: 14px 0; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 10px 0; text-transform: none; letter-spacing: 0; }
.mfa-steps { padding-left: 20px; }
.mfa-steps > li { margin: 0 0 18px; }
.mfa-qr { margin: 12px 0; }
.mfa-qr img { display: block; width: 240px; height: 240px; background: #fff; padding: 8px; border: 1px solid var(--rule); image-rendering: pixelated; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; list-style: none; padding: 12px 16px; margin: 10px 0; background: var(--panel); border: 1px solid var(--rule); }
.lock-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lock-overlay .lock-card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--rule); padding: 24px; box-shadow: 0 12px 40px var(--shadow); }
.lock-overlay h2 { margin: 6px 0 12px; padding: 0; border: 0; }
.lock-overlay input { width: 100%; }
.lock-overlay .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.device-current { font-weight: 600; }

/* Künstler list: the "neu" marker of seeded artists (one line, never wraps under the name) */
.seed-mark { display:inline-block; margin-left:6px; padding:0 5px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; line-height:16px; color:var(--warn); border:1px solid currentColor; vertical-align:1px; }
.seed-note { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 10px; }
.seed-note .seed-mark { margin-left:0; }

/* Künstler › Showfiles aus Dropbox prüfen: file facts on one line, the assignment below */
.dbx-review { width:100%; table-layout:fixed; }
.dbx-review th:nth-child(1) { width:32%; }
.dbx-review th:nth-child(2) { width:24%; }
.dbx-review th:nth-child(3) { width:13%; }
.dbx-review td { vertical-align:top; overflow-wrap:anywhere; }
.dbx-review .dbx-item > tr:first-child td { border-bottom:0; padding-bottom:4px; }
.dbx-review .dbx-actions td { padding-top:0; padding-bottom:14px; }
.dbx-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dbx-form select { max-width:280px; }
.dbx-path { overflow-wrap:anywhere; }

/* --- assistant: files (partials/chat.html, chat_file_card.html, static/chat-files.js) -------- */
.card.assistant { position: relative; }
.card.assistant.drop-active::after { content: "Dateien hier ablegen"; position: absolute; inset: 6px; display: grid; place-items: center; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--panel) 88%, var(--accent)); color: var(--accent); font-family: var(--mono); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; z-index: 5; pointer-events: none; }
.chat-files { display: grid; gap: 6px; margin: 0 0 8px; }
.chat-files[aria-busy="true"] .chat-file-chips { opacity: .6; }
.chat-file-chips, .chat-msg-files { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-file-chips:empty { display: none; }
.chat-msg-files { grid-column: 2; }
@media (max-width: 700px) { .chat-msg-files { grid-column: 1 / -1; } }
.chat-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)); background: var(--field); font-size: 13px; }
.chat-chip.sent { padding-right: 10px; }
.chat-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chat-chip-size { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.chat-chip-x { border: 0; background: transparent; color: var(--ink-2); font-size: 16px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.chat-chip-x:hover, .chat-chip-x:focus-visible { color: var(--danger); }
.chat-file-errors:empty { display: none; }
.chat-file-errors { font-size: 13px; color: var(--ink-2); }
.chat-file-errors[data-kind="error"] { color: var(--danger); }
.chat-form .chat-attach { align-self: center; font-size: 18px; padding: 8px 10px; line-height: 1; }
.chat-file-card { border: 1px solid var(--rule); background: var(--panel); padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.chat-diff { width: 100%; font-size: 13px; border-collapse: collapse; }
.chat-diff th { font-weight: 500; white-space: nowrap; text-align: left; padding: 4px 8px 4px 0; vertical-align: top; color: var(--ink-2); }
.chat-diff td { padding: 4px 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }
.chat-diff tr.changed td { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.chat-diff tr.added td { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chat-diff tr.removed td { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.chat-diff s, .chat-diff-cell s { color: var(--danger); }
.chat-diff ins, .chat-diff-cell ins { color: var(--ok); text-decoration: none; }
.chat-diff-cell { display: inline-block; margin-right: 12px; }
.chat-diff-text { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; border: 1px solid var(--rule); padding: 6px 8px; }
.chat-diff-text .add { color: var(--ok); }
.chat-diff-text .del { color: var(--danger); }
.chat-diff-text .hunk { color: var(--ink-2); }
.card.assistant.compact .chat-files { margin-bottom: 6px; }

/* header: the Lager-Bildschirm button next to the user menu (base.html, office/admin) */
.hdr-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; color: var(--ink-2); text-decoration: none; }
.hdr-icon:hover, .hdr-icon:focus-visible { color: var(--ink); background: var(--line, rgba(0,0,0,.06)); }

/* --- start page: "Jetzt erledigen" (partials/todo_empfohlen.html, services/todos/recommend.py) - */
.todo-reco { border: 1px solid var(--rule); background: var(--panel); padding: 10px 12px 6px; margin: 0 0 14px; }
.todo-reco .reco-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.todo-reco .reco-head h3 { margin: 0; font-size: 15px; }
.todo-reco .reco-why { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px dotted var(--ink-2); cursor: help; }
.reco-list { list-style: none; margin: 0; padding: 0; }
.reco-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--rule); transition: opacity .25s, transform .25s; }
.reco-row:first-child { border-top: 0; }
.reco-row.leaving { opacity: 0; transform: translateX(14px); }
.reco-row.arriving { animation: reco-in .35s ease-out; }
@keyframes reco-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.reco-check { min-width: 32px; }
.reco-body { min-width: 0; }
.reco-title { display: block; overflow-wrap: anywhere; line-height: 1.3; }
.reco-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reco-chips .why { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 1px 6px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.reco-chips .why.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--rule)); }
.reco-chips .why.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--rule)); }
.reco-chips .why.quick { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--rule)); }
.reco-chips a.why.link { text-decoration: none; color: var(--accent); }
.reco-effort { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-left: 4px; }
.reco-effort .muted { font-size: 12px; }
.reco-effort form { display: inline; margin: 0; }
.chip.tiny { padding: 1px 6px; font-size: 12px; background: transparent; }
.reco-later { position: relative; }
.reco-later summary { cursor: pointer; list-style: none; color: var(--ink-2); padding: 4px 2px; white-space: nowrap; }
.reco-later summary::-webkit-details-marker { display: none; }
.reco-later[open] summary { color: var(--ink); }
.reco-later-menu { position: absolute; right: 0; top: 100%; z-index: 6; display: grid; gap: 4px; padding: 6px; background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.reco-later-menu form { margin: 0; }
.reco-later-menu button { width: 100%; white-space: nowrap; text-align: left; }
.toast .toast-undo { margin-left: 12px; background: transparent; color: inherit; border: 1px solid currentColor; padding: 2px 8px; font-size: 13px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .reco-row { transition: none; } .reco-row.arriving { animation: none; } }

/* --- Daysheets (/tagesplan, tagesplan.html + tagesplan_plan.html) --- */
.dp-table td { vertical-align: top; }
.dp-table td.dp-time, .dp-entry .dp-time { font-family: var(--mono); font-weight: 500; white-space: nowrap; width: 120px; }
.dp-table tr.dp-hl td { border-bottom: 2px solid var(--accent); }
.dp-table tr.dp-hl td.dp-time, .dp-entry.dp-hl .dp-time { color: var(--accent); }
.dp-src { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.dp-src-plan { border-color: var(--accent); color: var(--accent); }
.dp-src-ablauf, .dp-src-einsatz { border-color: var(--ink-2); color: var(--ink); }
.dp-src-todo { border-color: var(--warn); color: var(--warn); }
.dp-src-abwesend { border-color: var(--danger); color: var(--danger); }
.dp-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; margin-bottom: 18px; }
.dp-col { border: 1px solid var(--rule); padding: 10px; min-width: 0; }
.dp-col.dp-today { border-color: var(--accent); }
.dp-col-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; text-decoration: none; color: var(--ink); margin-bottom: 8px; }
.dp-entry { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.dp-entry .dp-time { width: auto; font-size: 12px; }
.dp-entry .dp-src { grid-column: 2; justify-self: start; }
.dp-entry .dp-title { overflow-wrap: anywhere; }
.dp-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.dp-edit td { vertical-align: top; }
.dp-edit input, .dp-edit textarea { display: block; width: 100%; margin-bottom: 4px; }
.dp-edit tr.dp-new input::placeholder { color: var(--ink-2); opacity: .6; }
.dp-card { border: 1px solid var(--rule); padding: 10px; display: grid; gap: 6px; min-width: 0; }
@media (max-width: 860px) { .dp-week { grid-template-columns: 1fr; } }
/* Daysheets / "Mein Tag": todos ticked in place (partials/dp_entry.html), the focus entry */
.dp-check { min-width: 28px; padding: 2px 6px; margin-right: 4px; }
.dp-check-done { display: inline-block; min-width: 20px; color: var(--ok); font-weight: 600; margin-right: 4px; }
.dp-done .dp-title a, .dp-done .dp-title, .dp-done td b, .dp-done .mt-title a, .dp-done .mt-title { color: var(--ink-2); text-decoration: line-through; }
.dp-tick { display: inline-flex; vertical-align: middle; }
.dp-tick[data-dp-undo] { transition: opacity .4s; } .dp-tick.out { opacity: 0; }
.dp-undo { text-decoration: none; margin-right: 6px; }
.mein-tag h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mt-list { list-style: none; margin: 0; padding: 0; }
.mt-entry { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.mt-entry .dp-time { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.mt-body { display: flex; flex-direction: column; min-width: 0; }
.mt-title { overflow-wrap: anywhere; }
.mt-place { cursor: help; }
.mt-entry.dp-hl .dp-time { color: var(--accent); }
.mt-entry.dp-focus { border-left: 3px solid var(--accent); padding-left: 8px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dp-table tr.dp-focus td.dp-time, .dp-entry.dp-focus .dp-time { color: var(--accent); }
.todo-desc { overflow-wrap: anywhere; }
h1.todo-done { color: var(--ink-2); }
.todo-actions { align-items: center; gap: 10px; flex-wrap: wrap; }
.todo-actions .chip.tiny.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 600px) { .mt-entry { grid-template-columns: 64px minmax(0, 1fr); } .mt-entry .dp-src { grid-column: 2; justify-self: start; } }

/* ==== JEHNEN design language, project page (docs/design.md) =============================
   section label line, status bar, Finanzen strip / bridge / category rows / chip editor /
   Konditionen / Belege & Zahlungen. Tokens only; dark mode follows the tokens. */

/* section label line: mono label left, a hint, actions right - instead of titled panels */
.sec-head { display: flex; align-items: baseline; gap: var(--s2) var(--s4); flex-wrap: wrap; padding: 0 0 var(--s2); margin: var(--s6) 0 var(--s3); border-bottom: 1px solid var(--ink); }
.sec-head .label { color: var(--ink); font-weight: 600; }
.sec-head h2, .sec-head h3 { margin: 0; padding: 0; border: 0; display: inline; }
.sec-head .hint, .sec-head .small { font-size: 14px; color: var(--ink-2); }
.sec-head .sec-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sec-head .sec-actions form.inline { display: inline; }
.fin > .sec-head:first-child, .fin-bridge .sec-head { margin-top: 0; }

/* key / value tables (Allgemein: Stammdaten): the label column is a th, rules stay thin */
table.kv th { border-bottom: 1px solid var(--hair); padding-top: 12px; vertical-align: top; width: 150px; }
table.kv td.num { text-align: left; }

/* --- status bar (project.html): stage pill · segmented progress line · checklist · next step · warnings */
.pstatus { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 clamp(14px, 1.8vw, 20px); padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pstage { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.pstage.danger { background: var(--danger); color: #fff; }
.stages { display: flex; align-items: center; gap: 3px; flex: 1 1 160px; min-width: 120px; max-width: 360px; height: 18px; }
.stages form.inline { display: contents; }
.stages .stage { all: unset; display: block; flex: 1 1 0; height: 5px; background: var(--rule); border-radius: 2px; transition: height .12s, background .15s; }
.stages .stage.done { background: var(--ink); }
.stages .stage.active { background: var(--accent); height: 9px; }
.stages form.inline .stage { cursor: pointer; }
.stages form.inline .stage:hover { height: 9px; background: color-mix(in srgb, var(--accent) 60%, var(--ink)); }
.stages .stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pchecks { position: relative; }
.pchecks summary { list-style: none; }
.pchecks summary::-webkit-details-marker { display: none; }
.pchecks-pop.checks { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; min-width: 260px; max-width: 90vw; background: var(--panel); border: 1px solid var(--rule); padding: 12px; box-shadow: 0 10px 30px var(--shadow); gap: 6px; margin: 0; }
.pnext .btn, .pnext button { white-space: nowrap; }
.pwarn { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.danger { color: var(--danger); border-color: var(--danger); }
a.chip.warn:hover { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }
a.chip.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
@media (max-width: 700px) {
  .pstatus { gap: 8px 10px; }
  .stages { flex-basis: 100%; max-width: none; order: 5; }
  .pwarn { margin-left: 0; flex-basis: 100%; }
  .pchecks-pop.checks { left: auto; right: 0; }
}

/* --- Finanzen: category colours (tokens, so dark mode follows) ---------------------------- */
:root { --cat-rental: var(--accent); --cat-sale: var(--led); --cat-crew: var(--ok); --cat-transport: var(--ink-2);
  --cat-other: color-mix(in srgb, var(--ink-2) 50%, var(--ground)); --cat-insurance: color-mix(in srgb, var(--accent) 40%, var(--ground)); }
.seg-rental { fill: var(--cat-rental); background: var(--cat-rental); }
.seg-sale { fill: var(--cat-sale); background: var(--cat-sale); }
.seg-crew { fill: var(--cat-crew); background: var(--cat-crew); }
.seg-transport { fill: var(--cat-transport); background: var(--cat-transport); }
.seg-other { fill: var(--cat-other); background: var(--cat-other); }
.seg-insurance { fill: var(--cat-insurance); background: var(--cat-insurance); }
.seg-net { fill: var(--ink); background: var(--ink); }
.seg-discount { fill: url(#fin-hatch); background: repeating-linear-gradient(45deg, var(--danger) 0 2px, transparent 2px 6px); }

/* the cost basis (geplant / tatsächlich / geschätzt): radios outside the form, CSS :has() shows
   the matching .fin-v blocks; without :has() the planned figures stay */
.fin-toggle { border: 0; padding: 0; margin: 0 0 10px; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.fin-toggle .label { margin-right: 4px; }
.fin-v { display: none; }
.fin-v[data-which="planned"] { display: block; }
.fin-cell .fin-v[data-which="planned"] { display: grid; gap: 4px; }
@supports selector(:has(a)) {
  .fin:has(.fin-toggle input[value="actual"]:checked) .fin-v[data-which="planned"],
  .fin:has(.fin-toggle input[value="estimated"]:checked) .fin-v[data-which="planned"] { display: none; }
  .fin:has(.fin-toggle input[value="actual"]:checked) .fin-v[data-which="actual"],
  .fin:has(.fin-toggle input[value="estimated"]:checked) .fin-v[data-which="estimated"] { display: block; }
  .fin:has(.fin-toggle input[value="actual"]:checked) .fin-cell .fin-v[data-which="actual"],
  .fin:has(.fin-toggle input[value="estimated"]:checked) .fin-cell .fin-v[data-which="estimated"] { display: grid; gap: 4px; }
}

/* headline strip (.fin-strip / .fin-cell): the shared stat strip (see .kpis above) plus
   the small print and the thin bar of a cell */
.fin-cell .n small { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--ink-2); margin-left: 4px; }
.fin-cell .n .lock { font-size: 14px; vertical-align: middle; }
.kpi .bar, .fact .bar, .fin-cell .bar, .fin-cats .bar { display: block; position: relative; height: 4px; background: var(--hair); margin-top: var(--s1); overflow: hidden; }
.kpi .bar i, .fact .bar i, .fin-cell .bar i, .fin-cats .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 0) * 1%); background: var(--accent); }
.kpi .bar i.cost, .fin-cell .bar i.cost { background: var(--ink-2); }
.kpi .bar i.neg, .fin-cell .bar i.neg { background: var(--danger); }

/* the bridge: inline SVG (percent coordinates, no library), legend as the phone's list */
.fin-bridge-svg { display: block; margin: 6px 0 10px; overflow: visible; }
.fin-bridge-svg .seg { stroke: var(--ground); stroke-width: 1; }
.fin-bridge-svg .hatch { stroke: var(--danger); stroke-width: 2; }
.fin-bridge-svg .seg-text { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; fill: #fff; pointer-events: none; }
.fin-bridge-svg .seg-text.dark { fill: var(--ink); }
.fin-bridge-svg .seg-axis { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; fill: var(--ink-2); }
.fin-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.fin-legend li { display: inline-flex; align-items: center; gap: 8px; }
.fin-legend .sw { width: 12px; height: 12px; flex: none; border-radius: 2px; }
.fin-legend b { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.fin-legend .minus { color: var(--danger); }
.fin-legend .total b { font-weight: 700; }

/* category rows: revenue bar over cost bar on one scale, chips instead of input columns */
.fin-cats th.bars, .fin-cats td.bars { width: 24%; min-width: 150px; }
.fin-cats td.bars .bar + .bar { margin-top: 5px; }
.fin-cats td.bars .bar.cost i { background: var(--ink-2); }
.fin-cats td.bars .bar.cost i.fin-v { display: none; }
.fin-cats td.bars .bar.cost i.fin-v[data-which="planned"] { display: block; }
@supports selector(:has(a)) {
  .fin:has(.fin-toggle input[value="actual"]:checked) .fin-cats td.bars i.fin-v[data-which="planned"],
  .fin:has(.fin-toggle input[value="estimated"]:checked) .fin-cats td.bars i.fin-v[data-which="planned"] { display: none; }
  .fin:has(.fin-toggle input[value="actual"]:checked) .fin-cats td.bars i.fin-v[data-which="actual"],
  .fin:has(.fin-toggle input[value="estimated"]:checked) .fin-cats td.bars i.fin-v[data-which="estimated"] { display: block; }
}
.fin-cats td.costs .h { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.fin-cats .neg { color: var(--danger); }
.fin-cats td.chipcell { white-space: nowrap; }
.fin-cats tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; }
.chip-edit { position: relative; display: inline-block; }
.chip-edit summary { list-style: none; }
.chip-edit summary::-webkit-details-marker { display: none; }
.chip.static { cursor: default; }
div.chip-pop { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; background: var(--panel); border: 1px solid var(--rule); padding: 10px 12px; box-shadow: 0 10px 30px var(--shadow); display: grid; gap: 6px; min-width: 180px; }
.chip-pop .chip-field { display: flex; align-items: center; gap: 6px; }
.chip-pop .cell { width: 84px; }
.fin-sum { margin: 16px 0 0 auto; max-width: 440px; }
.fin-sum .row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.fin-sum .row.big { font-family: var(--display); font-weight: 800; font-size: 17px; border-bottom-color: var(--ink); }
.fin-sum .val { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fin-sum .row.big .val { font-family: var(--display); font-size: 17px; letter-spacing: -.01em; }

/* Konditionen: one card, three groups side by side */
.fin-cond-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 40px); }
.fin-group { display: grid; gap: 14px; align-content: start; min-width: 0; }
.fin-group h3.label { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.fin-group .unit { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-group .unit > input, .fin-group .unit > select { width: auto; flex: 1 1 auto; min-width: 0; }
.fin-group .unit > input.cell { flex: 0 0 110px; width: 110px; text-align: left; }
.fin-group textarea { width: 100%; min-height: 120px; }
.fin-group select.small { width: auto; justify-self: start; }
@media (max-width: 1000px) { .fin-cond-grid { grid-template-columns: 1fr 1fr; } }

/* Belege & Zahlungen: one chronological list with a timeline rail */
.fin-ledger-table td.led-mark { width: 14px; padding: 0 12px 0 0; position: relative; }
.fin-ledger-table td.led-mark::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.fin-ledger-table td.led-mark i { position: absolute; left: 0; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--ground); border: 2px solid var(--ink-2); box-sizing: border-box; }
.fin-ledger-table tr.led-angebot td.led-mark i { border-color: var(--accent); }
.fin-ledger-table tr.led-auftrag td.led-mark i { background: var(--accent); border-color: var(--accent); }
.fin-ledger-table tr.led-rechnung td.led-mark i, .fin-ledger-table tr.led-teilrechnung td.led-mark i, .fin-ledger-table tr.led-invoice td.led-mark i, .fin-ledger-table tr.led-gutschrift td.led-mark i { background: var(--ink); border-color: var(--ink); }
.fin-ledger-table tr.led-plan td.led-mark i { border-style: dashed; }
.fin-ledger-table tr.led-plan td { color: var(--ink-2); }
.fin-ledger-table tr:first-child td.led-mark::before { top: 17px; }
.fin-ledger-table tr:last-child td.led-mark::before { bottom: auto; height: 17px; }
.fin-ledger-table td.time:first-child { width: 96px; }

/* phones: one column, the bridge becomes its legend list, nothing wider than the screen */
@media (max-width: 700px) {
  .fin-toggle { justify-content: flex-start; flex-wrap: wrap; }
  .fin-bridge-svg { display: none; }
  .fin-legend { display: grid; gap: 6px; }
  .fin-legend li { display: flex; }
  .fin-legend b { margin-left: auto; }
  .fin-sum { max-width: none; }
  .fin-cond-grid { grid-template-columns: 1fr; }
  .sec-head .sec-actions { margin-left: 0; }
  .fin-cats th.bars, .fin-cats td.bars { display: none; }
}

/* Material tab: the project's discounts next to the line discounts (one form, htmx) */
.mat-rabatt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mat-rabatt .label { margin-right: 4px; cursor: help; }
.mat-table td.chipcell { white-space: nowrap; }
.mat-eff { display: block; white-space: nowrap; font-family: var(--mono); font-size: 12px; letter-spacing: .03em; cursor: help; }
@media (max-width: 700px) { .mat-rabatt .ml-auto { margin-left: 0 !important; flex-basis: 100%; } }

/* Finanzen: a category row opens its positions (finanzen_positionen.html) */
.fin-row-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fin-row-toggle::before { content: "▸"; font-size: 12px; color: var(--ink-2); transition: transform .12s; }
.fin-row-toggle.open::before { transform: rotate(90deg); color: var(--accent); }
.fin-row-toggle:hover b { color: var(--accent); }
.fin-row-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
tr.fin-pos > td { padding: 0 0 14px 22px; background: color-mix(in srgb, var(--ink) 3%, transparent); border-bottom: 1px solid var(--rule); }
tr.fin-pos[hidden] { display: none; }
.fin-pos-table { margin: 0; }
.fin-pos-table th { padding-top: 10px; font-size: 12px; border-bottom-color: var(--hair); }
.fin-pos-table td { padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
.fin-pos-table tr.grp td { background: transparent; color: var(--ink-2); padding-top: 12px; }
.fin-pos-table tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; }
tr.fin-pos p { margin: 10px 0 0; }
/* Personal tab: the effective values of a booking and the footer that equals Finanzen */
.crew-eff { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 6px; color: var(--ink); }
.crew-eff .label { margin-right: 4px; }
.crew-foot { font-size: 14px; } .crew-foot .label { margin-right: 8px; } .crew-foot b.mono { font-size: 13px; }
tr.crew-open td { padding-top: 8px; padding-bottom: 8px; }
/* Personal tab: the crew table with real columns (inputs bound by form="crew-row-<id>") */
.crew-table td { vertical-align: top; }
.crew-table td input, .crew-table td select { width: 100%; min-width: 0; }
.crew-table td input.cell { width: 88px; text-align: right; }
.crew-table td, .crew-table th { padding-right: 10px; }
/* a figure that is not the booking's own: the applied rate as placeholder, its source as a chip */
.crew-table input.cell::placeholder { font-family: var(--mono); font-size: 12px; color: var(--ink-2); opacity: .75; }
.chip.crew-src { margin: 4px 0 0; cursor: default; }
.crew-table .crew-src { display: inline-flex; }
.crew-table th:nth-child(1), .crew-table td:nth-child(1) { min-width: 140px; }
.crew-table th:nth-child(2), .crew-table td:nth-child(2) { min-width: 110px; }
.crew-table td input[type="datetime-local"] { width: 138px; font-size: 13px; padding-inline: 6px; }
.crew-table td select { font-size: 13px; }
.crew-table td.actions { white-space: normal; min-width: 150px; }
.crew-table td.actions button.small { padding: 5px 8px; }
.crew-table .crew-hint { display: block; margin-top: 4px; white-space: nowrap; font-family: var(--body); letter-spacing: 0; text-transform: none; }
.crew-table .crew-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crew-table td.actions form.inline { display: inline; }
.crew-table td.actions button { margin-bottom: 4px; }
.crew-table th { white-space: nowrap; }
.crew-new { grid-template-columns: 1.5fr 1fr 1fr 1fr .8fr .8fr auto; }
@media (max-width: 700px) { .crew-new { grid-template-columns: minmax(0, 1fr); } }

/* === area: dokumente === */
/* document page side panel: the one next step, the Bearbeiten strip with "Mehr ▾", payments */
.ds-next { border: 1px solid var(--rule); background: var(--wash); padding: var(--s2) var(--s3); }
.ds-next .label { margin-bottom: 6px; }
.ds-next-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.ds-next-form button.primary { flex: 1 1 auto; }
.ds-pay { display: inline-flex; gap: 6px; align-items: center; }
.ds-pay input, .inv-pay input, .ds-partial input { font-size: 13px; padding: 4px 6px; }
.ds-pay input.cell, .inv-pay input.cell, .ds-partial input.cell { width: 96px; text-align: right; }
.ds-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ds-actions > .label { margin: 0; }
.ds-icons { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
details.chip-pop.ds-more > summary { font-size: 13px; letter-spacing: 0; padding: 0 8px; border: 1px solid var(--rule); }
details.chip-pop.ds-more > .pop { min-width: 260px; }
details.chip-pop > .pop form.ds-partial, details.chip-pop > .pop form.inv-pay { display: grid; gap: 6px; padding: 6px 10px; }
details.chip-pop > .pop form.ds-partial > button, details.chip-pop > .pop form.inv-pay > button { padding: 7px 10px; }
.doc-side .danger a { color: inherit; }
@media (max-width: 700px) { details.chip-pop.ds-more > .pop { right: auto; left: 0; } }

/* === area: crew-functions (Rentman functions listed under the crew table) === */
.crew-function-list { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.crew-function-list li { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s1) 0; border-bottom: 1px solid var(--hair); }
.crew-function-list li:last-child { border-bottom: 0; }
.crew-function-list .num { margin-left: auto; font-family: var(--mono); }

/* === area: lists-paging (Inventar, Dokumente, Mail) === */
/* the "Mehr laden (n weitere)" row at the end of a paged list */
tbody.more td { border-bottom: 0; padding: var(--s3) 0; text-align: center; }
tbody.more .btn { font-size: 14px; }
tr.more-row.htmx-request .btn { opacity: .5; pointer-events: none; }
/* Inventar: "Neuer Artikel" as the one primary action, its form in a popover under it */
.page-actions details.inv-new { position: relative; }
.page-actions details.inv-new > summary { list-style: none; }
.page-actions details.inv-new > summary::-webkit-details-marker { display: none; }
.page-actions details.inv-new > .pop { position: absolute; z-index: 9; right: 0; top: calc(100% + var(--s1)); width: min(480px, calc(100vw - 2 * var(--s4))); display: grid; gap: var(--s2); margin: 0; padding: var(--s3); background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 10px 30px var(--shadow); text-align: left; }
.page-actions details.inv-new > .pop input, .page-actions details.inv-new > .pop select { width: 100%; max-width: none; padding: 8px 10px; font-size: 15px; }
.page-actions details.inv-new > .pop button { justify-self: end; }
.inv-low { margin: 0 0 var(--s4); }
/* phones hide the Reparatur column: the count moves into the code line (.inv-fix) */
.inv-sub .inv-fix { display: none; }
/* Inventar filter bar: five chips, the rest behind "Mehr …" */
.filterbar details.inv-more { position: relative; display: inline-block; }
.filterbar details.inv-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-width: 0; height: auto; padding: 6px 8px; border-radius: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); box-shadow: inset 0 -2px 0 transparent; background: transparent; }
.filterbar details.inv-more > summary::-webkit-details-marker { display: none; }
.filterbar details.inv-more > summary:hover { color: var(--ink); background: var(--wash); }
.filterbar details.inv-more > summary.on, .filterbar details.inv-more[open] > summary { color: var(--accent); background: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
.filterbar details.inv-more > .pop { right: 0; left: auto; min-width: 240px; padding: var(--s2) var(--s3) var(--s3); gap: var(--s1); }
.filterbar details.inv-more > .pop > .label { padding: var(--s2) 0 0; }
.filterbar details.inv-more > .pop select { width: 100%; max-width: none; padding: 6px 8px; font-size: 14px; }
.filterbar details.inv-more > .pop .chips { gap: 0 var(--s2); }
/* Dokumente: the PDF icon-link at the row end */
.dok-files { text-align: right; }
.dok-pdf svg { display: block; }
.dok-pdf .dok-ext { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
nav.chips.dok-status { margin: calc(-1 * var(--s3)) 0 var(--s4); }
/* Mail: segmented category filter, the sender's filter state as a dot, "Kontakt" as a tag */
.mail-cats { margin: 0 0 var(--s4); }
.mail-cats .btn { padding: 6px 8px; }
.mail-cats .count { margin-left: var(--s1); }
.mail-from { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.mail-name { overflow-wrap: anywhere; }
.mail-tag { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mail-table td.actions { text-align: right; }
form.mail-more-form { display: inline-block; margin: 0; }
.mail-more > .pop > .label { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .page-actions details.inv-new > .pop { right: 0; left: auto; top: calc(100% + var(--s2)); width: calc(100vw - 2 * var(--s4)); max-height: calc(100vh - var(--header-h, 53px) - 80px); overflow-y: auto; }
  .filterbar details.inv-more > .pop { right: auto; left: 0; }
  .mail-cats { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .mail-cats .btn { flex: none; }
  /* phones: the mail and document tables scroll inside themselves instead of squeezing */
  .mail-from, .mail-name { white-space: nowrap; }
  .mail-table td > a, .dok-table td > a { display: inline-block; max-width: 64vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  .mail-table td .mail-project { display: block; } /* the global phone rule hides td .small.muted */
  .mail-table td .mail-project a { display: inline-block; max-width: 64vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  .mail-table td.time { white-space: normal; min-width: 84px; }
  tbody.more td { text-align: left; }
  .inv-sub .inv-fix { display: inline; }
}

/* === area: projects-todos (project.html, Allgemein / Material tabs, projects, pipeline, todos) === */
/* a count in a tab that carries a warning keeps its colour (the badge it replaced) */
.ptabs .count.warn { color: var(--warn); }
.ptabs .count.danger { color: var(--danger); }
.ptabs .count:empty { display: none; }
/* status bar: "Mehr ▾" (Verschieben / Kopieren / Vorlage) as a default button with a popover */
details.chip-pop.pmore > summary { font-family: var(--body); font-size: 13px; letter-spacing: 0; text-transform: none; padding: 0 10px; border: 1px solid var(--rule); color: var(--ink); background: transparent; }
details.chip-pop.pmore > summary:hover, details.chip-pop.pmore[open] > summary { border-color: var(--ink-2); background: var(--wash); }
details.chip-pop.pmore > .pop { left: 0; right: auto; min-width: 300px; max-width: min(360px, 92vw); }
details.chip-pop.pmore > .pop form.pop-form { display: grid; gap: var(--s2); padding: var(--s1) 10px var(--s2); }
details.chip-pop.pmore > .pop form.pop-form > input { width: 100%; min-width: 0; font-size: 14px; padding: 6px 8px; }
details.chip-pop.pmore > .pop form.pop-form > button { justify-content: center; border: 1px solid var(--rule); padding: 6px 10px; font-size: 13px; }
details.chip-pop.pmore > .pop form.pop-form > button:hover { border-color: var(--ink-2); }
.pstatus:has(details.pmore[open]) { overflow: visible; }
/* Allgemein tab: the log shows five lines, the rest folds */
details.log-more { margin-top: var(--s2); }
details.log-more > summary { list-style: none; display: inline-flex; cursor: pointer; }
details.log-more > summary::-webkit-details-marker { display: none; }
details.log-more[open] > summary { margin-bottom: var(--s2); }
/* Material tab: the table fits the tab from 1280 px up (short headers, 60 px cells, the row's
   ⇄/× and the group's period in popovers); below that .mat-scroll scrolls, an open popover
   lifts the clipping; popovers near the right edge open leftwards so nothing widens the page */
.mat-main.card { overflow: visible; }
.mat-scroll { overflow-x: auto; }
.mat-table td, .mat-table th { padding-left: 5px; padding-right: 5px; }
.mat-table th { white-space: nowrap; }
.mat-table .cell { width: 60px; padding: 4px 5px; font-size: 13px; }
.mat-table .rowtool { width: 32px; padding-left: 2px; padding-right: 2px; }
@media (min-width: 1001px) and (max-width: 1500px) { .mat { grid-template-columns: 240px 1fr; gap: var(--s4); } }
.mat-scroll:has(details[open]) { overflow: visible; }
.mat-table td.chipcell div.chip-pop { left: auto; right: 0; }
.mat-table details.mat-row-more > .pop { min-width: 220px; max-width: 280px; }
.mat-table details.mat-row-more > .pop form.mat-swap { padding: 0 10px var(--s1); }
.mat-table details.mat-row-more > .pop form.mat-swap select { width: 100%; font-size: 13px; }
.mat-table details.mat-grp-zeit { vertical-align: middle; }
.mat-table details.mat-grp-zeit > summary.chip { font-size: 12px; }
.mat-table details.mat-grp-zeit > .chip-pop { min-width: 200px; }
.mat-table details.mat-grp-zeit > .chip-pop form { display: grid; gap: var(--s1); }
.mat-table details.mat-grp-zeit input.cell { width: 100%; font-size: 13px; }
.mat-table tr.hl .mat-eff { white-space: normal; }
.mat-table th.sel, .mat-table td.sel { width: 28px; padding-right: 0; }
.mat-table td.sel input, .mat-table th.sel input { margin: 0; vertical-align: middle; accent-color: var(--accent); }
.mat-table tr.is-selected td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mat-bulk { position: sticky; bottom: 0; z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0 0; padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 -8px 24px -16px var(--shadow); }
.mat-bulk[hidden] { display: none; }
.mat-bulk-count { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.mat-bulk-count b { color: var(--ink); font-size: 14px; }
.mat-bulk-sep { width: 1px; height: 20px; background: var(--rule); }
.mat-bulk input.cell { width: 72px; text-align: right; font-size: 14px; }
.mat-bulk select { font-size: 13px; max-width: 180px; }
@media (max-width: 700px) { .mat-bulk { position: static; } .mat-bulk-sep { display: none; } .mat-bulk .ml-auto { margin-left: 0 !important; } }
/* project list: the Notion shows fold into a hint block with a table */
details.hints.notion-shows table { margin-top: var(--s2); }
details.hints.notion-shows td, details.hints.notion-shows th { font-size: 14px; }
/* todos: one control row (search · status chips · person), descriptions on two lines */
.todo-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s4); }
.todo-filter input[type="search"] { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.todo-filter select { max-width: 200px; }
.todo-desc-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 60ch; overflow-wrap: anywhere; }
.todo-table td .small.muted + .small.muted { margin-top: 2px; }
details.chip-pop.todo-more > .pop { min-width: 220px; }
details.chip-pop.todo-more > .pop .reco-effort { display: flex; gap: var(--s1); margin: 0; padding: 0 10px var(--s1); }
details.chip-pop.todo-more > .pop .reco-effort form { display: inline; width: auto; }
details.chip-pop.todo-more > .pop .reco-effort form > button.chip { display: inline-flex; width: auto; border: 1px solid var(--rule); padding: 3px 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
details.chip-pop.todo-more > .pop .reco-effort form > button.chip:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
details.chip-pop.todo-more > .pop form.todo-assign { padding: 0 10px var(--s1); }
details.chip-pop.todo-more > .pop form.todo-assign select { width: 100%; font-size: 14px; }
.card:has(details.todo-more[open]) { overflow: visible; }
.todo-count { margin: 0 0 var(--s2); }
/* phones: a table scrolls inside itself (main table: display block, overflow-x auto) and so
   clips a popover at its rows - the row popovers of the todo list and the Material tab open
   as a sheet above the bottom edge instead (position fixed is not clipped by the table) */
@media (max-width: 700px) {
  details.chip-pop.todo-more > .pop, .mat-table details.chip-pop.mat-row-more > .pop, .mat-table details.mat-grp-zeit > div.chip-pop { position: fixed; left: var(--s3); right: var(--s3); top: auto; bottom: var(--s3); min-width: 0; max-width: none; z-index: 12; box-shadow: 0 -10px 30px var(--shadow); }
  /* the group's period chip (its inputs sit in the popover) stays on the phone although
     secondary lines in table cells are hidden there (td .small.muted) */
  .mat-table td .mat-grp-line { display: block; }
}

/* === area: home-customers-settings (A3) === */
/* start page: the assistant folded to its input row; the conversation opens while a question
   is on its way (app.js adds .asking) and lives in full on /assistent */
.card.assistant.folded { padding-top: var(--s3); padding-bottom: var(--s3); }
.card.assistant.folded > h2 { margin-bottom: var(--s2); }
.card.assistant.folded:not(.asking) .chat-log { display: none; }
.card.assistant.folded.asking .chat-log { display: grid; max-height: 320px; }
.card.assistant.folded .chat-form input { padding: 10px 14px; font-size: 15px; }
.card.assistant.folded .chat-form button.primary { padding: 10px 20px; }
.card.assistant.assistant-page .chat-log { max-height: 64vh; }
/* /assistent is the full panel: a "compact" flag an earlier size toggle left in localStorage
   (app.js still applies it to every [data-assistant] card) must not hide the conversation here */
.card.assistant.assistant-page.compact { padding-top: var(--s4); padding-bottom: var(--s4); }
.card.assistant.assistant-page.compact .chat-log { display: grid; max-height: 64vh; }
.card.assistant.assistant-page.compact .assistant-sub { display: block; }
/* an open amount is a plain mono number; the warn tint only when an invoice is overdue */
.open-amount { color: inherit; text-decoration: none; }
.open-amount.overdue { color: var(--warn); }
a.open-amount:hover { color: var(--accent); }
/* section head with actions right (settings sections: Als Standard, Archivieren) */
h2 .sec-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
h2 .sec-actions .mono { font-size: 12px; }
/* settings pages without the third nav level: one column, the field grid keeps a readable width */
.cfg.solo { grid-template-columns: minmax(0, 1fr); }
.cfg.solo .cfg-main { max-width: 1040px; }
/* config lists: jump list + the editor over the rest of the width (no third column) */
.cfg.two { grid-template-columns: 220px minmax(0, 1fr); }
@media (max-width: 1100px) { .cfg.two { grid-template-columns: minmax(0, 1fr); } }
/* actions inside an h2 head are buttons (T1: body font, sentence case), not the mono kicker
   that h2 .small gives to hints */
h2 .sec-actions button, h2 .sec-actions .btn { font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.25; font-variation-settings: normal; }
/* the quiet jump list of einstellungen.html and the config lists: mono kickers, body links */
.cfg-nav.jump { gap: 0; }
.cfg-nav.jump .label { display: block; margin: var(--s3) 0 var(--s1); }
.cfg-nav.jump .label:first-child { margin-top: 0; }
.cfg-nav.jump a { padding: 3px 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.cfg-nav.jump a:hover, .cfg-nav.jump a.active { color: var(--accent); }
@media (max-width: 1100px) { .cfg-nav.jump { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; margin-bottom: var(--s4); } .cfg-nav.jump .label { margin: 0 var(--s1) 0 0; } }
/* the one primary action as a popover with a small form (Künstler › Neuer Künstler) */
.page-actions details.chip-pop > summary.btn.primary, .page-actions details.chip-pop[open] > summary.btn.primary { height: auto; min-width: 0; padding: 8px 14px; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.25; color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); }
.page-actions details.chip-pop > summary.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
details.chip-pop.new-pop > .pop { min-width: min(360px, 92vw); max-width: 92vw; padding: var(--s3); }
details.chip-pop > .pop form.new-form { display: grid; gap: var(--s2); }
details.chip-pop > .pop form.new-form input { width: 100%; }
details.chip-pop > .pop form.new-form > button.primary { justify-content: center; color: var(--accent-ink); background: var(--accent); border-color: var(--accent); padding: 8px 14px; }
/* the start page's headline tiles: the delta line in body size */
.home-kpis .kpi .d { font-size: 13px; }
/* customer card: the persons card sits in a half column - the add form wraps instead of clipping */
#personen form.newtodo { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
#personen form.newtodo input, #personen form.toolbar input, #personen form.toolbar select { min-width: 0; }
.toolbar[hidden] { display: none; }
/* long code tokens in help text (install commands) wrap instead of widening a phone page */
details.hints code, .acct-grid code, .note code { overflow-wrap: anywhere; white-space: normal; }

/* === area: calm (owner 2026-10-14 "still feels cluttered": quieter navigation, labels and
   rules; layout, data and actions unchanged) === */
/* sidebar: module names in the body font, sentence case, no rule between the modules - the
   open module is bold, its sub-list hangs on one hairline; the group kickers stay mono */
.side .mod, .side .mod.on, .side .mod:last-child { border: 0; }
.side .mod-link { padding: 7px 0; font-family: var(--body); font-size: 15px; letter-spacing: 0; text-transform: none; line-height: 1.3; }
.side .mod.on .mod-link { font-weight: 700; }
.side .subs { border-left: 1px solid var(--rule); padding-bottom: var(--s2); margin-bottom: var(--s2); }
.side .subs a { font-size: 14px; }
/* the module row of the header (narrow screens): the same names, the same face */
header nav a { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; }
/* table heads and section-head actions: mono labels that step back so the data reads first */
th { color: var(--ink-2); font-size: 12px; font-weight: 400; letter-spacing: .06em; }
@media (max-width: 700px) { th { font-size: 12px; } }
h2 > a, h2 .small, h2 .muted, .sec-head .sec-actions > a:not(.btn) { color: var(--ink-2); font-size: 12px; letter-spacing: .06em; }
/* filter chips are the segmented control: body font, sentence case (like tabs and buttons) */
.chips > .chip { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; }
.filterbar details.inv-more > summary { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; }
/* "Mein Tag": no source column any more (the source is the time's tooltip); a ticked todo
   row fades out after the undo window (static/app.js) */
.mt-entry { grid-template-columns: 90px minmax(0, 1fr); transition: opacity .4s; }
.mt-entry.out { opacity: 0; }
.mt-entry .dp-time[title] { cursor: default; }
/* todo rows: category · effort, the dots between the parts (partials/todo_row.html) */
.todo-meta > * + *::before { content: "·\a0"; color: var(--ink-2); }
/* "Jetzt erledigen": the reasons are tinted tags without a frame, so they do not read as
   buttons (T6); the box loses its frame too (cards have none) */
.todo-reco { border: 0; }
.reco-chips .why { border: 0; border-radius: 2px; background: var(--hair); }
.reco-chips .why.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.reco-chips .why.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.reco-chips .why.quick { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.reco-chips a.why.link { background: transparent; padding-inline: 2px; }
/* the assistant card: tint and the cobalt edge stay, frame and shadow go; the "Claude" tag
   is a quiet mono word with its dot, not an outlined button */
.card.assistant { border: 0; border-left: 3px solid var(--accent); box-shadow: none; }
.ai-tag { border: 0; padding: 0; letter-spacing: .06em; }
/* the footer rule spans the content, not the padded box (it stuck out 40 px on each side) */
/* the build stamp keeps its case (a commit hash is lower case) */
footer.site .build { text-transform: none; }
footer.site .wrap { border-top: 0; position: relative; }
footer.site .wrap::before { content: ""; position: absolute; top: 0; left: clamp(16px, 4vw, 40px); right: clamp(16px, 4vw, 40px); border-top: 1px solid var(--rule); }
/* inventory: the folder row directly under the head row - a hairline, not a second ink rule */
tr.inv-folder th { border-bottom-color: var(--rule); }
/* project log: regular weight on a hairline instead of bold on a cobalt bar per entry */
#log ~ .ds-history li, .log-more .ds-history li { border-left: 1px solid var(--rule); }
#log ~ .ds-history li b, .log-more .ds-history li b { font-weight: 500; }

/* === area: documents-flow === */
/* Projekt › Dokumente: one-click buttons (current project state) + "Mehr ▾" with the rest */
.doc-oneclick { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0 var(--s1); }
.doc-oneclick > form { margin: 0; }
details.chip-pop.doc-more > summary { font-family: var(--body); font-size: 14px; letter-spacing: 0; padding: 0 var(--s3); height: 34px; border: 1px solid var(--rule); color: var(--ink); }
details.chip-pop.doc-more > .pop { left: 0; right: auto; min-width: 260px; max-width: min(360px, 92vw); }
details.chip-pop > .pop form.doc-partial { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0 var(--s1) 10px; }
details.chip-pop > .pop form.doc-partial > button { flex: 1 1 auto; width: auto; }
.doc-more .unit { display: inline-flex; align-items: center; gap: var(--s1); font-size: 14px; color: var(--ink-2); }
.doc-more .unit input.cell { width: 64px; text-align: right; font-size: 14px; padding: 4px 6px; }
details.doc-basis > summary { cursor: pointer; padding: 7px 10px; font-size: 14px; color: var(--ink-2); border-radius: 3px; }
details.doc-basis > summary:hover { background: var(--wash); color: var(--ink); }
details.chip-pop > .pop form.doc-basis-form { display: grid; gap: var(--s2); padding: var(--s1) 10px var(--s2); }
.doc-basis-form select { width: 100%; min-width: 0; font-size: 14px; }
details.chip-pop > .pop form.doc-basis-form > button { justify-content: center; border: 1px solid var(--rule); padding: 6px 10px; font-size: 13px; }
.doc-oneclick-note { margin: 0 0 var(--s4); }
/* document page: the panel's content block (Aus Projekt aktualisieren, Empfänger, Texte) */
.ds-content { display: grid; gap: var(--s2); }
.ds-content p { margin: 0; }
.ds-refresh { margin: 0; }
.ds-refresh > button { width: 100%; justify-content: center; }
.ds-recipient { display: grid; gap: var(--s1); margin: 0; }
.ds-recipient select { width: 100%; min-width: 0; font-size: 14px; }
details.ds-texts > summary { cursor: pointer; font-size: 14px; color: var(--ink-2); padding: var(--s1) 0; }
details.ds-texts > summary:hover { color: var(--accent); }
.ds-texts-form { display: grid; gap: var(--s1); margin: var(--s2) 0 0; }
.ds-texts-form textarea { width: 100%; min-width: 0; font-size: 14px; }
.ds-texts-form > button { justify-self: start; margin-top: var(--s1); }
/* the preview sheet never widens a phone page: its position tables scroll inside themselves */
.doc-layout > .doc-main { min-width: 0; }
@media (max-width: 700px) { .sheet .sh-table { display: block; overflow-x: auto; } }
/* phones: the popover hangs from the button row, never wider than the screen */
@media (max-width: 700px) { details.chip-pop.doc-more { position: static; } details.chip-pop.doc-more > .pop { left: 0; right: 0; min-width: 0; max-width: none; } }

/* === area: planung (P3: Ressourcenplan, Verfügbarkeit, Überbuchungen, Kalender, Zeitplan, Ablauf) === */
/* stage colours as tokens (.st-<stage>): calendar chips, resource bars and their legends set --c;
   a project's own colour arrives as inline data (--c) and wins */
.st-anfrage { --c: color-mix(in srgb, var(--ink-2) 55%, var(--ground)); }
.st-angebot { --c: var(--led); }
.st-bestaetigt { --c: var(--accent); }
.st-geplant { --c: var(--ok); }
.st-unterwegs { --c: color-mix(in srgb, var(--accent) 55%, var(--ground)); }
.st-zurueck { --c: var(--ink-2); }
.st-abgerechnet { --c: var(--ink); }
.st-abgesagt { --c: var(--danger); }
.st-own { --c: var(--ink-2); }
.rp-legend, .cal-legend { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 13px; color: var(--ink-2); }
.rp-legend li, .cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend i, .cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.rp-legend i.absence { background: repeating-linear-gradient(45deg, var(--ink-2) 0 2px, transparent 2px 5px); }

/* Ressourcenplan: label line as the head, mono day heads, a load bar and conflict chips per name */
.rp-head { align-items: baseline; }
.rp-conflicts { color: var(--danger); font-weight: 600; }
.rp-tools { gap: var(--s2) var(--s5); }
.rp-tools details.chip-pop { margin-left: auto; }
.rp th.tl-day { min-width: 44px; padding: var(--s1) 0 6px; line-height: 1.25; vertical-align: bottom; }
.rp th.tl-day .m { display: block; min-height: 15px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.rp th.tl-day .wd { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rp th.tl-day .dn { display: block; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp th.tl-day.we .dn { color: var(--ink-2); }
.rp th.tl-day.today .wd, .rp th.tl-day.today .dn { color: var(--accent); font-weight: 600; }
.rp th.tl-day.today { box-shadow: inset 0 -2px 0 var(--accent); }
.rp td.today { box-shadow: none; background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
.rp th, .rp td { border-bottom-color: var(--hair); }
.rp .tl-name { min-width: 200px; max-width: 240px; white-space: normal; padding: 6px var(--s3) 6px 0; vertical-align: top; }
.rp .tl-name b { font-weight: 600; font-size: 14px; }
.rp .tl-name .sub { display: block; font-size: 12px; color: var(--ink-2); font-family: var(--mono); }
.rp-load { display: flex; width: 100%; max-width: 160px; height: 4px; margin: 6px 0 2px; background: var(--hair); overflow: hidden; }
.rp-load i { display: block; flex: none; width: calc(var(--w, 0) * 1%); background: var(--accent); }
.rp-load i.away { background: repeating-linear-gradient(45deg, var(--ink-2) 0 2px, transparent 2px 4px); }
.chip.rp-clash { margin: var(--s1) var(--s1) 0 0; padding: 2px 6px; cursor: help; background: color-mix(in srgb, var(--danger) 8%, transparent); }
.rp tr.rp-more-lane td { border-top: 0; }
.rp td.rp-cell { height: 32px; min-width: 44px; padding: 2px; vertical-align: top; text-align: left; }
.rp td.rp-cell.over { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rp tr.rp-group th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: var(--s4) 0 var(--s1); border-bottom: 1px solid var(--ink); background: var(--ground); }
:where(.rp-bar) { --c: var(--ink-2); }
.rp-bar { display: block; height: 28px; padding: 2px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 16%, var(--panel)); color: var(--ink); text-decoration: none; }
.rp-bar[draggable=true] { cursor: grab; } .rp-bar.dragging { opacity: .5; }
.rp-bar b { display: block; font-weight: 600; font-size: 12px; line-height: 13px; overflow: hidden; text-overflow: ellipsis; }
.rp-bar span { display: block; font-family: var(--mono); font-size: 12px; line-height: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.rp-bar.absence { --c: var(--ink-2); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 14%, var(--panel)) 0 6px, var(--panel) 6px 12px); }
.rp-bar.angefragt { border-left-style: dashed; } .rp-bar.abgesagt { opacity: .45; text-decoration: line-through; }
.rp-open td.rp-cell { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.rp-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: var(--s3) 18px; font-size: 14px; z-index: 50; max-width: 90vw; box-shadow: 0 8px 30px var(--shadow); }
.rp-toast.danger { border-left: 4px solid var(--danger); }

/* Verfügbarkeit: one bar per item - the days as ticks (height = share used of the stock),
   the projects on the same day axis; the number matrix folded below */
.av-tools { gap: var(--s2) var(--s5); }
.av-tools details.chip-pop { margin-left: auto; }
.av { --name: 260px; }
.av-row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); gap: 0 var(--s3); align-items: center; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.av-track { display: grid; grid-template-columns: repeat(var(--n, 56), minmax(0, 1fr)); gap: 1px; align-items: end; min-width: 0; }
.av-track > i { display: block; min-width: 0; }
.av-name { min-width: 0; font-size: 14px; line-height: 1.3; }
.av-name a { color: var(--ink); text-decoration: none; font-weight: 600; } .av-name a:hover { color: var(--accent); }
.av-name .sub { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.av-miss, .av-short-count { color: var(--danger); font-weight: 600; }
.av-name .bar { display: block; position: relative; height: 4px; max-width: 180px; margin-top: var(--s1); background: var(--hair); overflow: hidden; }
.av-name .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 0) * 1%); background: var(--accent); }
.av-name .bar.over i { background: var(--danger); }
.av-sec { margin: var(--s5) 0 0; }
.av-axis { border-bottom: 1px solid var(--ink); padding: 0 0 var(--s1); }
.av-axis .av-track > i { position: relative; height: 30px; font-style: normal; }
.av-axis .av-track > i b, .av-axis .av-track > i span { position: absolute; left: 0; white-space: nowrap; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-2); }
.av-axis .av-track > i b { top: 0; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.av-axis .av-track > i span { bottom: 0; font-variant-numeric: tabular-nums; }
.av-axis .av-track > i.mon { box-shadow: inset 1px 0 0 var(--rule); }
.av-axis .av-track > i.we { background: none; }
.av-project .av-track > i { height: 8px; background: var(--hair); }
.av-project .av-track > i.on { background: var(--accent); }
.av-ticks { height: 28px; }
.av-ticks > i { height: 100%; position: relative; background: var(--wash); }
.av-ticks > i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h, 0) * 1%); background: color-mix(in srgb, var(--accent) 55%, var(--ground)); }
.av-ticks > i.tight::after { background: var(--led); }
.av-ticks > i.short { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.av-ticks > i.short::after { height: 100%; background: var(--danger); }
.av-track > i.we { background-color: var(--hair); }
.av-project .av-track > i.on.we { background: color-mix(in srgb, var(--accent) 75%, var(--ground)); }
.av-matrix { margin-top: var(--s5); }
.av-matrix > summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: var(--s1) 0; }
.av-matrix > summary:hover { color: var(--ink); }
.av-matrix .card { margin-top: var(--s2); }

/* Überbuchungen: a calm list grouped by item, the projects as links with one action each */
.ob-tools > .btn.quiet { margin-left: auto; }
.ob-item { margin: 0 0 var(--s5); }
.ob-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.ob-name { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; } .ob-name:hover { color: var(--accent); }
.ob-figures { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ob-figures b { color: var(--ink); font-weight: 500; }
.ob-projects { list-style: none; margin: 0; padding: 0; }
.ob-projects li { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px auto; gap: var(--s3); align-items: center; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.ob-projects li:last-child { border-bottom: 0; }
.ob-qty, .ob-date { font-family: var(--mono); font-size: 13px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.ob-project { color: var(--ink); } .ob-project:hover { color: var(--accent); }

/* Kalender: Monat · Woche, today marked, chips in the stage tokens */
.cal-tools { gap: var(--s2) var(--s5); }
.cal-nav { display: flex; align-items: center; gap: var(--s1); }
.cal-label { min-width: 150px; text-align: center; font-size: 15px; }
.cal-events { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.cal-events .cal-chip { padding: 4px 10px; }
.cal { border: 0; border-top: 1px solid var(--ink); background: transparent; }
.cal-wd { border-bottom-color: var(--hair); }
.cal-day { border-right-color: var(--hair); border-bottom-color: var(--hair); min-width: 0; }
.cal-day.out { background: var(--wash); }
:where(.cal-chip) { --c: var(--ink-2); }
.cal-day.today { box-shadow: inset 0 2px 0 var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cal-day.today .cal-n { color: var(--accent); font-weight: 700; }
.cal-more { text-decoration: none; } .cal-more:hover { color: var(--accent); }
.cal-week .cal-day { min-height: 220px; }
.cal-week .cal-day.we { background: var(--wash); }
.cal-week .cal-n { font-size: 13px; margin-bottom: var(--s1); }
.cal-week .cal-wd { display: inline; padding: 0; border: 0; }
.cal-week .cal-chip { white-space: normal; padding: 4px 6px; line-height: 1.3; }
.cal-sub { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.cal-empty { color: var(--ink-2); font-size: 13px; }

/* Projekt › Zeitplan: the Einsatzzeiträume strip, the bars in the category tokens */
.zp-strip { margin-top: var(--s3); }
.zp-strip .h a { color: inherit; } .zp-strip .h a:hover { color: var(--accent); }
.zp-tl .tl-bar { --c: var(--cat-other); background: color-mix(in srgb, var(--c) 20%, var(--panel)); border-left-color: var(--c); }
.zp-tl .tl-bar b { color: var(--ink); }
.zp-tl .tl-bar.cat-rental { --c: var(--cat-rental); }
.zp-tl .tl-bar.cat-sale { --c: var(--cat-sale); }
.zp-tl .tl-bar.cat-crew { --c: var(--cat-crew); }
.zp-tl .tl-bar.cat-transport { --c: var(--cat-transport); }
.zp-tl .tl-bar.cat-other { --c: var(--cat-other); }
.zp-tl .tl-row { border-bottom-color: var(--hair); }
.zp-tl .tl-label { border-right-color: var(--hair); }
.zp-legend { margin: var(--s3) 0 0; font-size: 13px; color: var(--ink-2); }
.zp-table { margin-top: var(--s3); }
.zp-mode .unit { display: inline-flex; align-items: center; gap: var(--s1); font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.zp-windows { margin: var(--s2) 0; }
.zp-windows td { padding: var(--s1) 0; }
.zp-proposals { margin-top: var(--s4); }

/* Projekt › Zeitplan › Ablauf: one action per block, the rest in "…" */
.abl-tools { align-items: center; }
.abl-tools details.abl-more { margin-left: auto; }
.abl-more > .pop { min-width: 280px; }
.abl-more > .pop .abl-feed-url { width: 100%; min-width: 0; margin: 0 0 var(--s1); }
.abl-more > .pop form.abl-mail { display: grid; gap: var(--s1); }
.abl-mail-to { display: flex; gap: var(--s3); padding: 0 10px; }
.abl-more > .pop form.abl-mail > .muted { padding: 0 10px; font-size: 13px; line-height: 1.4; }
.abl-actions details.abl-row-more > summary { min-width: 28px; height: 26px; }
.abl-row-more > .pop { min-width: 170px; }
details.chip-pop > .pop button[disabled] { opacity: .4; cursor: default; }

@media (max-width: 700px) {
  .rp .tl-name { min-width: 150px; }
  .av { --name: 1fr; }
  .av-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .av-axis .av-name { display: none; }
  .ob-projects li { grid-template-columns: minmax(0, 1fr) auto; }
  .ob-projects .ob-date { grid-column: 1; text-align: left; }
  .ob-figures { margin-left: 0; flex-basis: 100%; }
  .cal-tools .cal-nav { flex: 1 1 100%; }
  .cal-label { min-width: 0; flex: 1; }
  .cal-week { grid-template-columns: minmax(0, 1fr); }
  .cal-week .cal-day { min-height: 0; border-right: 0; }
  .cal-day { min-height: 64px; padding: var(--s1); }
  .cal-chip { font-size: 12px; padding: 2px 3px; }
  .rp-tools details.chip-pop, .av-tools details.chip-pop { margin-left: 0; }
  .abl-tools details.abl-more { position: static; }
  .abl-tools details.abl-more > .pop { left: 0; right: 0; min-width: 0; max-width: none; }
}

/* === area: p3-rest (P3: Pipeline, Lager, Zugänge, Reparaturen, Lizenzen, Kunde, Künstler, Mail-Detail) === */
/* pipeline: one row per stage, the stage line of the status bar as the row head */
.board.pl-board { display: block; overflow: visible; }
.pl-board .col { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s2) var(--s3); align-items: start; border-top: 0; padding: 0 0 var(--s2); min-height: 0; margin: 0 0 var(--s5); border-radius: 3px; }
.pl-board .col.over { background: var(--wash); outline: 1px dashed var(--accent); outline-offset: 4px; }
.pl-board .pl-head { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; padding: 0 0 var(--s2); margin: 0 0 var(--s1); border-bottom: 1px solid var(--ink); }
.pl-board .pl-head h3 { margin: 0; color: var(--ink); font-weight: 600; min-width: 140px; }
.pl-board .pl-head h3 .count { margin-left: var(--s1); color: var(--ink-2); font-weight: 400; }
.pl-board .pl-head .stages { flex: 0 1 220px; min-width: 120px; }
.pl-board .kard { margin: 0; display: grid; gap: var(--s1); padding: var(--s3); border-color: var(--hair); }
.pl-board .kard a.kard-name { font-size: 15px; line-height: 1.25; }
.pl-board .kard-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.pl-board .kard-foot .kard-step { margin-left: auto; }
.pl-board .kard a.btn { font-weight: 400; }
.pl-board .kard a.btn:hover { color: var(--accent); }
.pl-board .pl-empty { margin: 0; padding: var(--s1) 0; }
.pl-board .col:has(.kard) .pl-empty { display: none; }
/* a popover with small forms (row editors behind "…": Reparaturen, Lizenzen import, Lager) */
details.chip-pop.p3-pop > .pop { min-width: 260px; }
details.chip-pop > .pop form.pop-form { display: grid; gap: var(--s2); padding: var(--s1) 10px var(--s2); }
details.chip-pop > .pop form.pop-form > input, details.chip-pop > .pop form.pop-form > select { width: 100%; min-width: 0; max-width: none; font-size: 14px; padding: 6px 8px; }
details.chip-pop > .pop form.pop-form > button { justify-content: center; border: 1px solid var(--rule); padding: 6px 10px; font-size: 13px; }
details.chip-pop > .pop form.pop-form > button:hover { border-color: var(--ink-2); }
.page-actions details.chip-pop { align-self: center; }
/* the message of an htmx swap (the toast region is outside the swapped fragment) */
.note.live-flash { margin: 0 0 var(--s4); }
.note.ok { border-left-color: var(--ok); }
/* Lager: "Fertigstellen" folded, the actions as rows */
details.lager-finish > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s3); padding: 0 0 var(--s2); border-bottom: 1px solid var(--ink); }
details.lager-finish > summary::-webkit-details-marker { display: none; }
details.lager-finish > summary::before { content: "▸"; color: var(--ink-2); font-size: 12px; }
details.lager-finish[open] > summary::before { content: "▾"; }
details.lager-finish > summary .label { color: var(--ink); font-weight: 600; }
details.lager-finish > summary .small { color: var(--ink-2); }
.lager-actions { display: grid; }
.lager-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: 0; padding: var(--s2) 0; border-bottom: 1px solid var(--hair); }
.lager-actions form:last-child { border-bottom: 0; }
.lager-actions form > button { min-width: 200px; justify-content: center; }
.lager-actions form > select, .lager-actions form > input[type=datetime-local] { max-width: 100%; }
/* Zugänge: the group head, "Übernahme als" stacks its three choices */
.zg-head { margin-top: var(--s6); }
.zg-head h2 { font-size: 17px; }
.zg-table td.zg-take { display: grid; gap: var(--s1); min-width: 180px; }
.zg-table td.zg-take select.zg-sel { width: 100%; max-width: 230px; font-size: 14px; padding: 5px 8px; }
.zg-table input.zg-name { width: 100%; min-width: 150px; max-width: 220px; }
.zg-table textarea.zg-serials { width: 130px; min-width: 0; }
.zg-table td { padding-left: var(--s2); padding-right: var(--s2); }
.zg-table td:first-child { padding-left: 0; }
.zg-why, details.zw-why { margin-top: var(--s1); }
details.zw-why .ev.warn { border-color: var(--warn); color: var(--warn); }
/* Reparaturen: the proposal's accept form and its "…" side by side */
.rep-take { display: flex; align-items: flex-start; gap: var(--s2); }
/* Kunde: the contact tile reads as text, not as a headline number */
.kd-facts .kd-contact .n { font-family: var(--body); font-variation-settings: normal; font-weight: 400; font-size: 15px; line-height: 1.4; letter-spacing: 0; display: grid; }
.kd-facts .kd-contact .n a { color: var(--ink); overflow-wrap: anywhere; }
.kd-facts a.fact { color: inherit; text-decoration: none; }
.kd-facts a.fact:hover .l { color: var(--accent); }
section.card h2 .count { margin-left: var(--s1); margin-right: auto; }
.kd-more { margin-top: var(--s6); }
.kd-more + section.card { margin-top: var(--s6); }
.kd-more section.card + section.card { margin-top: var(--s6); }
/* Mail-Detail: sender line - name, one badge, "…" */
.md-from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.md-from > span:first-child { overflow-wrap: anywhere; }
details.chip-pop.md-sender > .pop { min-width: 240px; }
details.chip-pop.md-sender > .pop .label { overflow-wrap: anywhere; }
.md-warn { color: var(--warn); }
/* pipeline: a card dragged into another row keeps its old next step until the page reloads -
   pipeline.html marks the stage it was rendered for (data-at), the stale step and checks hide */
.pl-board .col[data-stage="anfrage"] .kard:not([data-at="anfrage"]) :is(.kard-step, .kard-checks) { display: none; }
.pl-board .col[data-stage="angebot"] .kard:not([data-at="angebot"]) :is(.kard-step, .kard-checks) { display: none; }
.pl-board .col[data-stage="bestaetigt"] .kard:not([data-at="bestaetigt"]) :is(.kard-step, .kard-checks) { display: none; }
.pl-board .col[data-stage="geplant"] .kard:not([data-at="geplant"]) :is(.kard-step, .kard-checks) { display: none; }
.pl-board .col[data-stage="unterwegs"] .kard:not([data-at="unterwegs"]) :is(.kard-step, .kard-checks) { display: none; }
.pl-board .col[data-stage="zurueck"] .kard:not([data-at="zurueck"]) :is(.kard-step, .kard-checks) { display: none; }
.pl-board .col[data-stage="abgerechnet"] .kard:not([data-at="abgerechnet"]) :is(.kard-step, .kard-checks) { display: none; }
/* chips: label and count apart (.chip is inline-flex, the space between them collapses) */
.chips .chip .count { margin-left: var(--s1); }
/* Lager: the table fits the phone - Seriennummern fold under the article name */
.lg-table .lg-sn-sub { display: none; }
/* Kunde: open invoices fit the phone - Datum and Status fold under Nr. */
.kd-inv .kd-inv-sub { display: none; }
@media (max-width: 700px) {
  .pl-board .col { grid-template-columns: minmax(0, 1fr); }
  .lg-table .lg-sn-col { display: none; }
  .lg-table .lg-sn-sub { display: block; margin-top: 2px; overflow-wrap: anywhere; white-space: normal; }
  .lg-table { display: table; width: 100%; overflow: visible; }
  .lg-table td, .lg-table th { padding-right: var(--s1); }
  .lg-table th { letter-spacing: 0; }
  .lg-table td:first-child { overflow-wrap: anywhere; }
  .lg-table td.actions { white-space: nowrap; padding-right: 0; }
  .lg-table td.actions button { padding-left: var(--s2); padding-right: var(--s2); }
  .lg-table td.actions details.chip-pop > summary { min-width: 28px; padding: 0 var(--s1); }
  details.chip-pop.md-sender > .pop { right: auto; left: 0; }
  .lager-actions form > button { min-width: 0; }
  .kd-inv .kd-inv-col { display: none; }
  .kd-inv .kd-inv-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); margin-top: 2px; }
  .kd-inv .kd-inv-sub .badge { white-space: normal; }
  table.kd-inv { display: table; width: 100%; overflow: visible; }
  .kd-inv td, .kd-inv th { padding-right: var(--s1); }
  .kd-inv td.actions { white-space: nowrap; padding-right: 0; }
  .kd-inv td.num { white-space: nowrap; }
  .rep-take { flex-wrap: wrap; }
}

/* === area: p3-finanzen (Rechnungen, Buchhaltung, Analyse, Profitabilität, AfA, Investitionen, Fixkosten, Wiederkehrend, Verträge, Belege-Zuordnung, Projekt › Eingang) === */
/* "Mehr" next to the page's primary action: a default button opening the "…" panel */
details.chip-pop.fz-more > summary { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; height: auto; min-width: 0; padding: 7px 12px; border: 1px solid var(--rule); color: var(--ink); background: transparent; }
details.chip-pop.fz-more > summary:hover, details.chip-pop.fz-more[open] > summary { border-color: var(--ink-2); background: var(--wash); }
details.chip-pop.fz-more > .pop { min-width: 240px; }
.page-actions form { margin: 0; display: inline-block; }
/* per-row drill-down: the columns that left the table, as a key/value list or small forms */
details.chip-pop.fz-drill > .pop, details.chip-pop.fz-sort > .pop { min-width: 260px; }
details.chip-pop.fz-wide > .pop { min-width: 300px; max-width: min(380px, 92vw); }
details.chip-pop > .pop table.kv { margin: 0; font-size: 14px; }
details.chip-pop > .pop table.kv th { width: 120px; padding: var(--s1) 10px; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--hair); }
details.chip-pop > .pop table.kv td { padding: var(--s1) 10px; border-bottom: 1px solid var(--hair); }
details.chip-pop > .pop table.kv tr:last-child th, details.chip-pop > .pop table.kv tr:last-child td { border-bottom: 0; }
details.chip-pop > .pop .fz-field { display: grid; gap: 2px; padding: var(--s1) 10px; font-size: 13px; color: var(--ink-2); }
details.chip-pop > .pop .fz-field select, details.chip-pop > .pop .fz-field input { width: 100%; max-width: none; font-size: 14px; padding: 6px 8px; }
details.chip-pop > .pop form.fz-form { display: grid; gap: var(--s2); padding: var(--s1) 10px var(--s2); }
details.chip-pop > .pop form.fz-form > input, details.chip-pop > .pop form.fz-form > select { width: 100%; min-width: 0; max-width: none; font-size: 14px; padding: 6px 8px; }
details.chip-pop > .pop form.fz-form > button { justify-content: center; border: 1px solid var(--rule); padding: 6px 10px; font-size: 13px; }
details.chip-pop > .pop form.fz-form > button:hover { border-color: var(--ink-2); }
details.chip-pop > .pop form.fz-form p { margin: 0; display: flex; gap: var(--s3); }
details.chip-pop > .pop .fz-split { display: flex; gap: var(--s2); }
details.chip-pop > .pop .fz-split input:first-child { flex: 1; min-width: 0; }
details.chip-pop > .pop .fz-pad { margin: 0; padding: var(--s1) 10px var(--s2); line-height: 1.5; }
details.chip-pop.fz-sort > summary { font-family: var(--body); font-size: 13px; letter-spacing: 0; text-transform: none; }
details.chip-pop.fz-sort > .pop a.on { color: var(--accent); }
th.actions { text-align: right; }
/* the second line of a number cell (DB I in €, min/max, the parts of a forecast) */
.fz-rows td.num .h, .fz-rows td .h, .inv-open td .h, td.num > .h { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.fz-rows td .h.neg, td.num > .h.neg { color: var(--danger); }
.fz-rows td.num.neg { color: var(--danger); }
.pf-rows .dbbar .pct { font-weight: 600; }
.fz-warn { color: var(--warn); }
/* status line of a body swapped in place (Belege-Zuordnung, Investitionen) */
.fz-status { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); font-size: 14px; color: var(--ink); background: var(--wash); border-left: 3px solid var(--ok); }
.fz-status.error { border-left-color: var(--danger); }
.fz-status.warn { border-left-color: var(--warn); }
/* Verträge › Vertrag: the upload folded behind one button */
details.fz-add { margin-top: var(--s3); }
details.fz-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
details.fz-add > summary::-webkit-details-marker { display: none; }
/* Projekt › Eingang: Ist-Kosten as a small stacked bar in the Finanzen category colours */
.fz-eingang { margin: 0 0 var(--s5); }
.fz-eingang .sec-head { margin-top: 0; }
.fz-eingang .sec-head b { font-family: var(--mono); font-weight: 600; font-size: 13px; }
svg.fz-stack { margin: var(--s2) 0 var(--s3); }
td .small .sw, .fz-eingang .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
@media (max-width: 700px) {
  details.chip-pop.fz-drill > .pop, details.chip-pop.fz-wide > .pop, details.chip-pop.fz-sort > .pop { right: 0; left: auto; min-width: 0; width: min(320px, calc(100vw - 2 * var(--s4))); }
  details.chip-pop.fz-more > .pop { right: 0; left: auto; }
}
/* p3-finanzen: more rows of a list folded behind a "Hinweise"-style summary, full width */
details.hints.fz-full { max-width: none; margin-top: var(--s2); }
details.hints.fz-full > div { font-size: inherit; color: var(--ink); }
/* p3-finanzen: a create form in a grid row - long option labels must not widen the page */
form.fz-new > * { min-width: 0; }
form.fz-new select { width: 100%; max-width: 100%; }
/* p3-finanzen: the generic .bars (flex column) must not turn the bar cell out of the table */
.fz-rows th.bars, .fz-rows td.bars { display: table-cell; }
.fz-rows td.bars .bar:first-child { margin-top: 6px; }
/* p3-finanzen: Vertrag - the form's own top rule would double the facts block's air */
form.cf.fz-contract { border-top: 0; padding-top: 0; }
form.cf.fz-contract > h2 { margin-top: 0; }
form.cf.fz-contract > h3.label { margin: var(--s3) 0 0; font-size: 12px; font-weight: 600; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
@media (max-width: 700px) { .fz-rows th.bars, .fz-rows td.bars { display: none; } }
/* p3-finanzen: a key/value table inside a row's popover is not a wide list table */
main details.chip-pop > .pop table, .scroll-x details.chip-pop > .pop table { min-width: 0; width: 100%; display: table; overflow: visible; }
/* p3-finanzen: a row's popover wraps its text (the actions cell does not) and, on phones,
   opens as a sheet at the bottom, so the table keeps scrolling inside its card */
details.chip-pop.fz-sheet > .pop { white-space: normal; }
@media (max-width: 700px) {
  .card.scroll-x:has(details.fz-sheet[open]), main table:has(details.fz-sheet[open]) { overflow-x: auto; }
  details.chip-pop.fz-sheet[open] > .pop { position: fixed; left: var(--s4); right: var(--s4); top: auto; bottom: var(--s4); width: auto; min-width: 0; max-width: none; max-height: 70vh; overflow-y: auto; z-index: 60; }
}
@media (max-width: 700px) { details.chip-pop.fz-sheet > .pop .small.muted { display: block; } }
/* p3-finanzen: sub-lines that hold data of a former column stay visible on phones (the
   site-wide phone rule hides "td .small.muted"); fz-ph-off / fz-ph-on swap a column for its
   phone place (a sub-line or the row's "…"), so name · amount · "…" fit 390 px */
td .fz-sub { display: block; }
.kpi .d.fz-acct .mono { color: var(--ink); white-space: nowrap; }
@media (min-width: 701px) { .fz-ph-on, td .fz-sub.fz-ph-on { display: none; } }
@media (max-width: 700px) {
  td .small.muted.fz-sub { display: block; }
  .fz-ph-off { display: none; }
  .inv-open td .badge { white-space: normal; }
  /* the folded lists fit the phone, so they drop the wide-table minimum (720 px) */
  .scroll-x.inv-open table, .scroll-x table.pf-rows { min-width: 0; }
}

/* === Look "Ruhig + Farbe" (Okt 2026, owner's choice B) ===================================
   Readable labels instead of small mono capitals, every section a white card, a blue accent
   bar on section titles, key numbers with a coloured top edge, status as soft colour pills,
   links black until hovered. Tokens only (static/tokens.css), light and dark. */
body { font-size: 15.5px; }
.label, th, .kicker, .sec-head .label, h2 .small, h2 a, .page-head .label, .badge, .chip,
.tabs a, .ptabs a, .kpi .l, .fact .l, .fin-cell .l, .count, .seg .btn {
  font-family: var(--body) !important; text-transform: none !important; letter-spacing: 0 !important;
}
th { font-size: 13px !important; font-weight: 600 !important; color: var(--ink-2) !important; }
.label, .kpi .l, .fact .l, .fin-cell .l { font-size: 13px !important; font-weight: 500; color: var(--ink-2) !important; }
td.time, .dp-time, td.num, .num {
  font-family: var(--body) !important; font-variant-numeric: tabular-nums; letter-spacing: 0 !important;
}
/* sections as cards */
main .card:not(.k):not(.assistant), main section.card {
  background: var(--surface); border-radius: 10px; padding: 18px 20px; box-shadow: var(--surface-shadow);
}
main .card + .card { margin-top: var(--s5); }
main h2 {
  border-bottom: 0 !important; padding: 0 0 0 12px !important; margin-bottom: 12px !important;
  border-left: 4px solid var(--accent); line-height: 1.25;
}
main h2::after { display: none !important; }
main h2 a, main .sec-head a { color: var(--accent-fg) !important; }
table td { border-bottom-color: var(--hair) !important; }
tbody tr:hover > td { background: var(--wash); }
/* key numbers */
.kpi, .fin-cell, .fact {
  background: var(--surface); border-radius: 10px; padding: 14px 16px !important;
  border-top: 4px solid var(--edge-1) !important; box-shadow: var(--surface-shadow);
}
.kpi:nth-child(4n+2), .fin-cell:nth-child(4n+2), .fact:nth-child(4n+2) { border-top-color: var(--edge-2) !important; }
.kpi:nth-child(4n+3), .fin-cell:nth-child(4n+3), .fact:nth-child(4n+3) { border-top-color: var(--edge-3) !important; }
.kpi:nth-child(4n+4), .fin-cell:nth-child(4n+4), .fact:nth-child(4n+4) { border-top-color: var(--edge-4) !important; }
.kpis, .facts, .fin-strip { gap: var(--s4) !important; border: 0 !important; }
/* status pills */
.badge {
  border: 0 !important; border-radius: 999px !important; padding: 2px 9px !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  background: var(--neutral-bg) !important; color: var(--ink-2) !important;
}
.badge.ok { background: var(--ok-bg) !important; color: var(--ok-fg) !important; }
.badge.warn { background: var(--warn-bg) !important; color: var(--warn-fg) !important; }
.badge.danger { background: var(--danger-bg) !important; color: var(--danger-fg) !important; }
.badge.accent { background: var(--accent-bg) !important; color: var(--accent-fg) !important; }
/* sidebar: the open page as a tinted pill */
aside.side .subs a.active {
  background: var(--accent-bg); color: var(--accent-fg) !important; border-radius: 6px;
  padding-left: 8px; margin-left: -8px;
}
/* links: black, colour on hover */
main a:not(.btn):not(.chip):not(.badge) { color: var(--ink); text-decoration: none; }
main a:not(.btn):not(.chip):not(.badge):hover { color: var(--accent-fg); text-decoration: underline; }
td.danger, .due.over { color: var(--danger-fg) !important; font-weight: 600; }

/* the document preview is the PDF on paper: it keeps its own typography */
main .sheet h2 { border-left: 0 !important; padding-left: 0 !important; }
main .sheet th, main .sheet .label, main .sheet td.num, main .sheet td.time {
  font-family: var(--mono) !important; text-transform: uppercase !important; letter-spacing: .06em !important;
}
main .sheet th { font-size: 12px !important; font-weight: 500 !important; }
main .sheet td.num { text-transform: none !important; letter-spacing: 0 !important; }
main .sheet tbody tr:hover > td { background: none; }
/* side panels of the document page: headings like the section titles */
.doc-side h3 {
  font-family: var(--body) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 15px !important; font-weight: 700;
}
/* the settings jump list scrolls inside itself on phones */
nav.cfg-nav.jump { max-width: 100%; overflow-x: auto; }
/* tab rows never widen the page: they scroll inside themselves */
nav.tabs, .ptabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
nav.tabs::-webkit-scrollbar, .ptabs::-webkit-scrollbar { display: none; }

/* grid children of the settings layout may shrink below their content (the jump list scrolls) */
.cfg > * { min-width: 0; }

/* === area: todos-grouping (todos by topic and urgency, Aufräumen; static/todos.js) === */
.todo-topics { display: grid; gap: var(--s4); }
main .todo-topics > .card + .card { margin-top: 0; }
details.todo-topic > summary { list-style: none; display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
details.todo-topic > summary::-webkit-details-marker { display: none; }
details.todo-topic > summary::before { content: "▸"; font-family: var(--body); font-size: 14px; color: var(--ink-2); width: 14px; flex: none; transition: transform .12s; }
details.todo-topic[open] > summary::before { content: "▸"; transform: rotate(90deg); }
details.todo-topic > summary h2 { margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0; }
details.todo-topic[open] > summary { margin-bottom: var(--s3); }
details.todo-topic > summary:hover .topic-name { color: var(--accent-fg); }
.topic-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-weight: 400; }
.topic-pills .count { font-size: 14px; color: var(--ink-2); }
.todo-batches { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.todo-batches li { border-bottom: 1px solid var(--hair); }
main a.todo-batch { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 10px var(--s2) 10px 0; }
main a.todo-batch:hover { text-decoration: none; background: var(--wash); }
.todo-batch-go { white-space: nowrap; color: var(--accent-fg); font-size: 14px; }
.todo-bucket-label { margin: var(--s4) 0 var(--s1); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.todo-batches + .todo-bucket-label, details.todo-topic > summary + .todo-bucket-label { margin-top: var(--s2); }
table.todo-group { width: 100%; table-layout: fixed; }
.todo-group col.c-tick { width: 52px; } .todo-group col.c-due { width: 116px; }
.todo-group col.c-prio { width: 96px; } .todo-group col.c-who { width: 120px; } .todo-group col.c-more { width: 52px; }
.todo-group td:nth-child(2) { overflow-wrap: anywhere; }
.todo-group tr.todo-proj > td { padding-top: var(--s3); padding-bottom: var(--s1); font-size: 13px; font-weight: 600; color: var(--ink-2); border-bottom: 0 !important; }
.todo-group tr.todo-proj:hover > td, .todo-group tr.todo-more-row:hover > td { background: none; }
.todo-group tr.todo-more-row > td { border-bottom: 0 !important; }
.todo-art { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s2); }
/* Aufräumen */
.cleanup-note { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: 8px; background: var(--ok-bg); color: var(--ok-fg); font-weight: 600; }
.cleanup-count { margin: 0 0 var(--s3); }
.cleanup-all { display: inline-flex; align-items: center; gap: var(--s2); }
.cleanup-rows { list-style: none; margin: 0; padding: 0; }
.cleanup-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); padding: 10px var(--s1); border-bottom: 1px solid var(--hair); }
.cleanup-row:last-child { border-bottom: 0; }
.cleanup-row.is-selected { background: var(--wash); }
.cleanup-title { min-width: 0; overflow-wrap: anywhere; }
.cleanup-age { color: var(--danger-fg); font-weight: 600; }
.cleanup-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); }
.cleanup-date { display: inline-flex; align-items: center; gap: var(--s1); }
.cleanup-date input[type="date"], .cleanup-bulk input[type="date"] { width: 150px; font-size: 14px; padding-top: 5px; padding-bottom: 5px; }
.cleanup-bulk { position: sticky; bottom: var(--s2); z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; padding: var(--s2) var(--s3); background: var(--surface); border-radius: 10px; box-shadow: 0 -8px 24px -12px var(--shadow), var(--surface-shadow); }
.cleanup-bulk[hidden] { display: none; }
.cleanup-bulk-count { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.cleanup-bulk-count b { color: var(--ink); }
.cleanup-bulk-sep { width: 1px; height: 20px; background: var(--rule); }
.cleanup-bulk select { font-size: 14px; max-width: 180px; }
@media (max-width: 700px) {
  main a.todo-batch { flex-wrap: wrap; }
  /* a topic card's rows as two lines: ✓ · title · … / due · prio · who (no sideways scroll) */
  main table.todo-group, main table.todo-group tbody { display: block; width: 100%; overflow: visible; }
  main table.todo-group colgroup { display: none; }
  .todo-group tr { display: grid; grid-template-columns: 36px auto auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--hair); }
  .todo-group tr > td { width: auto; border-bottom: 0 !important; padding: 2px 0 !important; min-width: 0; }
  .todo-group tr > td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .todo-group tr > td:nth-child(2) { grid-column: 2 / 5; grid-row: 1; }
  .todo-group tr > td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 13px; }
  .todo-group tr > td:nth-child(4) { grid-column: 3; grid-row: 2; }
  .todo-group tr > td:nth-child(5) { grid-column: 4; grid-row: 2; font-size: 13px; color: var(--ink-2); }
  .todo-group tr > td:nth-child(6) { grid-column: 5; grid-row: 1; justify-self: end; }
  .todo-group tr.todo-proj, .todo-group tr.todo-more-row { border-bottom: 0; padding-bottom: 0; }
  .cleanup-row { grid-template-columns: auto minmax(0, 1fr); }
  .cleanup-quick { grid-column: 2; justify-content: flex-start; }
  .cleanup-bulk-sep { display: none; }
  .cleanup-bulk .ml-auto { margin-left: 0 !important; }
}
/* the document page shows the real PDF (Rentman layout) */
iframe.doc-pdf {
  display: block; width: 100%; height: calc(100vh - 140px); min-height: 640px;
  border: 0; border-radius: 10px; background: var(--surface); box-shadow: var(--surface-shadow);
}
@media (max-width: 700px) { iframe.doc-pdf { height: 75vh; min-height: 420px; } }


/* --- Finanzen › Umsatz & Prognose (umsatz.html): server-drawn month bars, the tables, the
   months' detail panels; colours only from tokens.css, so day and night follow the theme --- */
.ro-chart { margin: 0; }
.ro-chart svg { display: block; max-width: 960px; }
.ro-chart .ro-grid { stroke: var(--rule); }
.ro-chart .ro-split { stroke: var(--ink-2); stroke-dasharray: 4 3; }
.ro-chart .ro-axis { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); }
.ro-chart .ro-year { opacity: .75; }
.ro-chart rect.ro-past { fill: var(--ink-2); }
.ro-chart rect.ro-secure { fill: var(--accent); }
.ro-chart rect.ro-weighted { fill: url(#ro-hatch); stroke: var(--accent); stroke-width: 1; }
.ro-chart .ro-hatch-bg { fill: var(--accent-bg); }
.ro-chart .ro-hatch-line { stroke: var(--accent); stroke-width: 2; }
.ro-chart .ro-bar:hover rect { opacity: .82; }
.ro-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); color: var(--ink-2); }
.ro-key { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; border-radius: 2px; }
.ro-key.ro-past { background: var(--ink-2); }
.ro-key.ro-secure { background: var(--accent); }
.ro-key.ro-weighted { border: 1px solid var(--accent); background: repeating-linear-gradient(45deg, var(--accent) 0 2px, var(--accent-bg) 2px 5px); }
.ro-table tr.ro-now td { background: var(--wash); }
.ro-table tfoot th { border-top: 1px solid var(--rule); }
.ro-table .neg, .ro-lines .neg { color: var(--danger); }
.ro-table td.ro-w, .ro-table th.ro-w { color: var(--ink-2); font-style: italic; }
.ro-up { color: var(--ok); } .ro-down { color: var(--danger); }
details.ro-month { border-top: 1px solid var(--hair); padding: var(--s2) 0; }
details.ro-month > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; }
details.ro-month h3.ro-col { font-size: 14px; margin: var(--s3) 0 var(--s1); }
table.ro-lines { width: 100%; }
table.ro-lines td { vertical-align: top; }
.ro-probs { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; }
.ro-probs label { display: grid; gap: var(--s1); }
.ro-probs input[type="number"] { width: 6em; }

/* Vorbereitung (partials/prep_box.html, services/prep.py): state, suggestion, buttons - in the
   status bar pop-up, the Material tab and the Lager-Checkliste */
.prep-box { display: grid; gap: var(--s2); }
.prep-box .prep-state { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.prep-box .prep-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.prep-box form.inline { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: 0; }
.prep-box .prep-again input[type="date"] { width: auto; }
.prep-box .prep-again input[name="reason"] { min-width: 0; width: 14em; max-width: 100%; }
.chip.prep-again { color: var(--warn); border-color: var(--warn); }
.mat-checkout .prep-box { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.pprep .pchecks-pop.checks { min-width: 300px; }

/* Zustandsfotos (partials/zustandsfotos.html, the sale form, the sale and the listing page):
   thumbnails in a wrapping grid, the caption and the note field under each */
.photo-grid { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.photo-grid li { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); border-radius: 6px; background: var(--wash); }
.photo-grid label.check { display: block; margin: 0; position: relative; }
.photo-grid label.check input { position: absolute; top: 8px; left: 8px; z-index: 1; }
.photo-grid input[name="note"] { width: 100%; font-size: 13px; }