/* ==========================================================================
   Alpiva design system - v3 foundations (phase A1). Spec: docs/design-system.md.
   Class names are shared with app.js, data-grid.js and modules/*: never
   delete a selector without grepping app/public for its usage.
   ========================================================================== */

/* Inter 4.1 subset (OFL 1.1, /fonts/LICENSE-Inter-OFL-1.1.txt). 400 600, font-synthesis:
   style (oblique italic, never bold): 650-900 render at 600. Line metrics = Segoe UI (2210/514 of
   2048), so A1 changes no line box. latin is preloaded, latin-ext only by unicode-range. */
@font-face { font-family: "Inter"; src: url("/fonts/inter-4.1-wght-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-4.1-wght-latin-ext.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%;
  unicode-range: U+0100-017F, U+0218-021B, U+0300-0303, U+0305-0307, U+0309-0328, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Segoe UI at Inter's metrics: the swap does not reflow. */
@font-face { font-family: "Inter Fallback"; src: local("Segoe UI"), local("SegoeUI"), local("Arial"); font-weight: 400; size-adjust: 108.3%; ascent-override: 99.64%; descent-override: 23.18%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"), local("Arial Bold"); font-weight: 500 600; size-adjust: 108.3%; ascent-override: 99.64%; descent-override: 23.18%; line-gap-override: 0%; }

/* 0. Tokens ---------------------------------------------------------------- */
:root {
  /* Ramps (design.json; stone 9/10 regenerated, C1-P1-16) */
  --stone-1: #FBFDFD; --stone-2: #F6F8F9; --stone-3: #EEF1F3; --stone-4: #E6EBEC; --stone-5: #DEE3E5; --stone-6: #D4DADC;
  --stone-7: #C4CBCD; --stone-8: #798285; --stone-9: #6B7679; --stone-10: #5F696D; --stone-11: #535D60; --stone-12: #1B2528; --stone-ink-2: #384245;
  --petrol-2: #F0FAFA; --petrol-3: #E4F5F4; --petrol-4: #D9EFEE; --petrol-6: #BEE1DF; --petrol-7: #A9D4D1; --petrol-8: #34908D;
  --petrol-9: #047471; --petrol-10: #036462; --petrol-11: #006966; --petrol-12: #012928;
  --green-3: #E7F5E9; --green-6: #C4E2C9; --green-9: #2C7641; --green-11: #2E693E;
  --amber-3: #FFEDD9; --amber-6: #FBCF9C; --amber-9: #9C6306; --amber-11: #865403;
  --red-3: #FFECE9; --red-6: #F6CEC9; --red-9: #B12D29; --red-10: #9D201E; --red-11: #9C302A;
  --blue-3: #E8F2FE; --blue-9: #2264B2; --blue-11: #265B9C;

  /* Roles: the only colour names new CSS uses (design-system.md §2.6) */
  --bg-app: var(--bg-surface); /* D-29: one white sheet on every page; the chrome stays stone-2 */
  --bg-surface: #FFFFFF; --bg-chrome: var(--stone-2); --bg-subtle: var(--stone-2); --bg-hover: var(--stone-3);
  --bg-active: var(--stone-4); --bg-selected: var(--petrol-3); --bg-zebra: #F7FBFB;
  --border-hairline: var(--stone-6); --border-default: var(--stone-7); --border-control: var(--stone-8);
  --text-primary: var(--stone-12); --text-secondary: var(--stone-ink-2); --text-muted: var(--stone-11);
  --text-disabled: var(--stone-9); --text-on-solid: #FFFFFF;
  --accent: var(--petrol-9); --accent-hover: var(--petrol-10); --accent-active: var(--petrol-12); --accent-text: var(--petrol-11);
  --focus-ring: var(--petrol-9); --destructive: var(--red-9); --destructive-hover: var(--red-10);
  --hero-bg: #0F2A28; --hero-text: #D7E4E0; --hero-accent: #D9A441; /* the login hero stays dark */

  /* Type */
  --font-sans: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  /* D-29: 14 px UI default (U5 spec §4.1) */
  --text-2xs: 12px; --lh-2xs: 16px;   /* counters, kbd, badges, tiny meta */
  --text-xs: 13px;  --lh-xs: 18px;    /* labels, column heads (Standard), help, meta, chips, small buttons */
  --text-sm: 14px;  --lh-sm: 20px;    /* default UI text, nav items, cells (Standard), buttons, tabs */
  --text-md: 14px;  --lh-md: 20px;    /* body, form values */
  --text-lg: 16px;  --lh-lg: 24px;    /* section, panel and dialog titles */
  --text-xl: 20px;  --lh-xl: 28px;    /* sub-titles, object key figures, task counts */
  --text-2xl: 24px; --lh-2xl: 32px;   /* page titles (h1) */
  --text-kpi: 26px; --lh-kpi: 34px;   /* KPI figures; 28/36 from a 1920 px screen (below) */
  --text-nav-group: 13px; --lh-nav-group: 18px;   /* sidebar group labels, 500 muted */
  --text-compact: 13px; --lh-compact: 18px; --text-compact-head: 12px; --lh-compact-head: 16px;   /* Kompakt tables */
  --tracking-title: -0.015em;         /* h1 and KPI figures */
  /* Tables by density: Standard 14/20 cells and 13/18 heads; html[data-density="compact"] 13/18 and 12/16 */
  --table-text: var(--text-sm); --lh-table: var(--lh-sm); --table-head-text: var(--text-xs); --lh-table-head: var(--lh-xs);
  /* design.json §2: 400 text; 500 labels, headers, buttons, doc numbers; 600 titles, totals */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 500;
  --weight-bold: 600;

  /* Space (4px base) */
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px;
  --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 40px; --space-11: 48px;

  /* Layout (A2, D-29) */
  --sidebar-width: 240px;
  --topbar-height: 48px;
  --page-gutter: 32px;            /* 20 below 1440 px */
  --page-top: 24px;
  --page-max: 1600px;             /* reading pages (object, settings, forms); work surfaces are fluid */
  --section-gap: 32px;            /* between top-level sections */
  --card-pad: 20px;
  --control-xs: 24px;
  --control-sm: 28px;
  --control: 32px;
  --control-lg: 36px;
  /* Density: row heights and cell sides (D-27, D-29); sidebar items and icons */
  --row-compact: 28px; --row-standard: 36px; --row-comfortable: 44px; --cell-x-compact: 8px; --cell-x-standard: 10px; --nav-item-height: 36px; --nav-icon: 18px;
  /* Fixed columns follow the type (widths: ui-v3-foundations); Kompakt below */
  --col-date: 106px; --col-date-journal: 104px; --col-voucher-journal: 124px;

  /* Radius: subtle, one step up (D-29) */
  --radius-xs: 4px;   /* badges, kbd, checkbox */
  --radius-sm: 6px;   /* buttons, inputs, chips, nav items */
  --radius: 8px;      /* cards, grid frame, callouts */
  --radius-lg: 8px;   /* menus, popovers, toasts */
  --radius-xl: 12px;  /* dialogs, palette */
  --radius-full: 999px;

  /* Elevation: the only place for rgba() */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(16, 28, 30, .06);
  --shadow-2: 0 4px 12px -2px rgba(16, 28, 30, .12), 0 2px 4px -2px rgba(16, 28, 30, .08);
  --shadow-3: 0 16px 40px -8px rgba(16, 28, 30, .24), 0 4px 12px -4px rgba(16, 28, 30, .10);
  --backdrop: rgba(16, 28, 30, .40);

  /* Layers */
  --z-sticky: 2;
  --z-topbar: 10;
  --z-popover: 30;
  --z-sidebar: 20;
  --z-mobile-nav: 25;
  --z-toast: 100;

  /* Motion */
  --motion: 120ms cubic-bezier(.2, 0, 0, 1);

  /* Inline icons (img-src allows data:) */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23384245' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%23535D60' stroke-width='1.6'/%3E%3Cpath d='m10.6 10.6 3.2 3.2' stroke='%23535D60' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Compatibility aliases (styles.css and module <style> blocks) */
  --canvas: var(--bg-app); --paper: var(--bg-surface); --surface-2: var(--bg-subtle); --surface-3: var(--stone-4);
  --zebra: var(--bg-zebra); --hover: var(--bg-hover);
  --line: var(--border-hairline); --line-strong: var(--border-default); --line-input: var(--border-control);
  --ink: var(--text-primary); --ink-2: var(--text-secondary); --muted: var(--text-muted);
  --soft: var(--stone-9); --disabled-fg: var(--text-disabled);
  --petrol-950: var(--petrol-12); --petrol-900: var(--petrol-12); --petrol-850: var(--petrol-11); --petrol-800: var(--petrol-10);
  --petrol-700: var(--petrol-9); --petrol-600: var(--petrol-8); --petrol-200: var(--petrol-7); --petrol-100: var(--petrol-4); --petrol-50: var(--petrol-3);
  --brass-700: var(--amber-11); --brass-600: var(--amber-9); --brass-500: var(--amber-9); --brass-400: var(--amber-6); --brass-100: var(--amber-3);
  --primary: var(--accent); --primary-hover: var(--accent-hover); --primary-active: var(--accent-active); --primary-soft: var(--petrol-3);
  --focus: var(--focus-ring); /* petrol, no longer brass */
  --focus-on-dark: var(--hero-accent); /* login hero only */
  --selection: var(--bg-selected);

  --amount-negative: var(--red-11);
  --amount-positive: var(--green-11);

  --success-fg: var(--green-11); --success-bg: var(--green-3); --success-line: var(--green-6); --success-bar: var(--green-9);
  --warning-fg: var(--amber-11); --warning-bg: var(--amber-3); --warning-line: var(--amber-6); --warning-bar: var(--amber-9);
  --error-fg: var(--red-11);     --error-bg: var(--red-3);     --error-line: var(--red-6);     --error-bar: var(--red-9);
  --info-fg: var(--petrol-11);   --info-bg: var(--petrol-3);   --info-line: var(--petrol-7);   --info-bar: var(--petrol-9);
  --neutral-fg: var(--stone-11); --neutral-bg: var(--stone-4);

  /* Light sidebar */
  --sidebar-bg: var(--bg-chrome); --sidebar-hover: var(--bg-hover); --sidebar-active: var(--bg-active);
  --sidebar-text: var(--text-secondary); --sidebar-label: var(--text-muted); --sidebar-marker: var(--accent); --sidebar-rule: var(--border-hairline);

  /* Charts: Aufwand never in the disabled grey (C1-P1-8) */
  --chart-income: var(--petrol-8);
  --chart-expense: var(--stone-10);

  /* Legacy aliases - do not remove (read by module <style> blocks and older rules) */
  --teal: var(--primary);
  --teal-2: var(--primary-hover);
  --blue: var(--primary);
  --mint: var(--primary-soft);
  --cream: var(--canvas);
  --gold: var(--brass-700);
  --gold-soft: var(--brass-100);
  --red: var(--amount-negative);
  --red-soft: var(--error-bg);
  --success: var(--success-fg);
  --success-soft: var(--success-bg);
  --shadow: var(--shadow-2);

  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: style;
  text-rendering: optimizeLegibility;
  accent-color: var(--primary);
}

@media (max-width: 1439px) {
  :root { --page-gutter: 20px; }
}
@media (min-width: 1920px) {
  :root { --text-kpi: 28px; --lh-kpi: 36px; }
}
/* Kompakt (D-27), globally or per list («Ansicht»): the type always matches the row */
html[data-density="compact"], .data-grid.grid-compact {
  --table-text: var(--text-compact); --lh-table: var(--lh-compact); --table-head-text: var(--text-compact-head); --lh-table-head: var(--lh-compact-head);
  --col-date: 92px; --col-date-journal: 96px; --col-voucher-journal: 120px;
}
html[data-density="compact"] .data-grid:is(.grid-standard, .grid-comfortable) {
  --table-text: var(--text-sm); --lh-table: var(--lh-sm); --table-head-text: var(--text-xs); --lh-table-head: var(--lh-xs);
  --col-date: 106px; --col-date-journal: 104px; --col-voucher-journal: 124px;
}

/* 1. Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
/* Scroll padding keeps a focused element clear of the sticky topbar (top) and the sticky
   form action bar (bottom), WCAG 2.2 SC 2.4.11. Chrome only scrolls on focus when the
   element lies outside the padded scrollport. */
html { min-width: 320px; min-height: 100%; scroll-padding-top: calc(var(--topbar-height) + 8px); scroll-padding-bottom: 72px; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); font-size: var(--text-md); line-height: var(--lh-md); }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-weight: var(--weight-bold); letter-spacing: 0; }
strong, b, th { font-weight: var(--weight-semibold); }
p { line-height: var(--lh-md); }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: .92em; }
kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--ink-2); font-size: var(--text-2xs); line-height: 16px; text-align: center; }
::selection { background: var(--petrol-100); color: var(--ink); }
::placeholder { color: var(--soft); opacity: 1; }
/* Figures: tabular only where they align (tnum widens RE-2026-0040). */
:where(.num, .amount, .fs-amount, .bu-num, .bu-editor[data-col="amount"], .op-min, input[inputmode="decimal"], input[inputmode="numeric"], input[type="date"], input[type="month"], .w-date, .journal-date, td[data-sort-value^="19"][data-sort-value*="-"], td[data-sort-value^="20"][data-sort-value*="-"], .stat-value, .worklist-amount, .document-summary-row, .total-row, .totals, .account-code, .report-code, .combo-code, .iban-value, kbd) { font-variant-numeric: tabular-nums lining-nums; }
/* IBAN, QR reference, UID, hashes */
.ref-code { font-variant-numeric: tabular-nums lining-nums slashed-zero; font-feature-settings: "cv05" 1, "cv08" 1; letter-spacing: .02em; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.auth-hero :focus-visible { outline-color: var(--focus-on-dark); }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 2. Boot and brand -------------------------------------------------------- */
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }
.brand-mark { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent); color: var(--text-on-solid); font-size: 22px; font-weight: var(--weight-bold); line-height: 1; }

/* 3. Login and account pages ---------------------------------------------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .82fr) minmax(460px, 1.18fr); background: var(--canvas); }
.auth-hero { background: var(--hero-bg); color: var(--hero-text); padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: relative; overflow: hidden; }
.auth-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 132px), rgba(217, 164, 65, .32) calc(100% - 132px) calc(100% - 131px), transparent calc(100% - 131px) calc(100% - 128px), rgba(217, 164, 65, .32) calc(100% - 128px) calc(100% - 127px), transparent calc(100% - 127px)),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(215, 228, 224, .08) 27px 28px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
.auth-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 20px; font-weight: var(--weight-bold); }
.auth-logo .brand-mark { width: 36px; height: 36px; font-size: 19px; background: var(--paper); color: var(--petrol-800); }
.auth-copy { position: relative; z-index: 1; max-width: 460px; margin: auto 0; }
.auth-copy .eyebrow { color: var(--hero-accent); }
.auth-alpi { display: block; width: 144px; height: 144px; margin: 0 0 12px -14px; }
.auth-copy p.auth-alpi-note { margin-top: 20px; color: var(--hero-accent); font-size: var(--text-md, 15px); line-height: 22px; }
.auth-copy h1 { margin: 0 0 16px; color: #fff; font-size: clamp(28px, 2.6vw, 38px); font-weight: var(--weight-bold); line-height: 1.18; letter-spacing: 0; }
.auth-copy p { color: var(--hero-text); font-size: var(--text-lg); line-height: 26px; }
.auth-form-wrap { display: grid; place-items: center; padding: 32px; background: var(--canvas); }
.auth-card { width: min(440px, 100%); padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.auth-card h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--lh-2xl); margin: 0 0 6px; }
.auth-card > .subtle { margin: 0 0 20px; }
.auth-card .grid { gap: 14px; }
.auth-card .input, .auth-card .select { min-height: var(--control-lg); }
.auth-card .btn { min-height: var(--control-lg); }
.eyebrow { color: var(--text-muted); text-transform: none; font-weight: var(--weight-medium); letter-spacing: 0; font-size: var(--text-2xs); line-height: var(--lh-2xs); margin: 0 0 8px; }

/* 4. Shell: sidebar, navigation, top bar ---------------------------------- */
/* A2: 240 px sidebar (48 px rail) with Mandant head, sections, footer; topbar path and chips. */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text); border-right: 1px solid var(--border-hairline); display: flex; flex-direction: column; z-index: var(--z-sidebar); }
/* D-29: 14/36 px items, 13 px group labels; the head is as high as the topbar */
.side-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: var(--topbar-height); padding: 3px 8px 3px 14px; border-bottom: 1px solid var(--sidebar-rule); }
.side-brand { flex: 0 0 auto; display: flex; text-decoration: none; }
.side-brand .brand-mark { width: 24px; height: 24px; border-radius: var(--radius-sm); font-size: 14px; background: var(--accent); color: var(--text-on-solid); }
.side-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.org-menu { flex: 1 1 auto; min-width: 0; }
.org-button { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 4px 2px 6px; border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; }
.org-button:hover, .org-menu[open] > .org-button { background: var(--sidebar-hover); }
.org-button:focus-visible { outline-offset: -2px; }
.org-button > .ui-icon { color: var(--text-muted); }
.org-name { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; font-size: var(--text-sm); line-height: 18px; font-weight: var(--weight-bold); }
.org-monogram { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--bg-active); color: var(--text-primary); font-size: var(--text-2xs); line-height: 1; font-weight: var(--weight-bold); }
.org-button > .org-monogram { display: none; }
.org-list { left: 0; right: auto; width: 320px; max-height: min(480px, calc(100vh - 56px)); overflow-y: auto; }
.org-search.input { width: 100%; min-height: var(--control-sm); margin-bottom: 2px; }
.menu-label { margin: 6px 10px 2px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-medium); }
.menu-item.org-row { align-items: flex-start; white-space: normal; }
.org-row[aria-current] { background: var(--bg-active); }
.org-row-text { display: grid; min-width: 0; overflow-wrap: break-word; }
.org-row-text > span { font-weight: var(--weight-medium); }
.org-row small { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.side-nav { display: grid; overflow-y: auto; flex: 1; min-height: 0; align-content: start; padding: 8px; scrollbar-color: var(--border-default) transparent; }
.nav-group { margin: 0; }
.nav-group + .nav-group { margin-top: 8px; }
.nav-group-label { position: relative; display: flex; align-items: center; min-height: 28px; padding: 6px 28px 4px 10px; border-radius: var(--radius-sm); color: var(--sidebar-label); cursor: pointer; list-style: none; font-size: var(--text-nav-group); line-height: var(--lh-nav-group); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; user-select: none; }
.nav-group-label::-webkit-details-marker { display: none; }
.nav-group-label::after { content: ""; position: absolute; right: 10px; top: 9px; width: 12px; height: 12px; background: var(--icon-chevron) center / 12px no-repeat; opacity: 0; transition: opacity var(--motion), transform var(--motion); }
.nav-group:not([open]) > .nav-group-label::after { opacity: 1; transform: rotate(-90deg); }
.nav-group-label:hover::after, .nav-group-label:focus-visible::after { opacity: 1; }
/* The compact mode closes sections without motion (P10). */
.nav-group[data-nav-auto] > .nav-group-label::after { transition: none; }
.nav-group-label:hover { color: var(--text-primary); }
.nav-group-label:focus-visible { outline-offset: -2px; }
.nav-group-links { display: grid; }
.side-nav a, .side-bottom a, .modal-nav a { display: flex; align-items: center; gap: 10px; min-height: var(--nav-item-height); padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-regular); transition: background-color var(--motion), color var(--motion); }
.side-nav a, .side-bottom a { color: var(--sidebar-text); }
.side-nav a:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.side-nav a.active { background: var(--sidebar-active); color: var(--text-primary); font-weight: var(--weight-medium); }
.side-nav a:focus-visible, .side-bottom a:focus-visible { outline-offset: -2px; }
.modal-nav a { color: var(--ink-2); }
.modal-nav a:hover { background: var(--hover); color: var(--ink); }
.modal-nav a.active { background: var(--selection); color: var(--petrol-800); font-weight: var(--weight-semibold); box-shadow: inset 3px 0 var(--primary); }
/* One line per item: a label and the count get 176 px at 240 px (longest: «Modèles de documents» and
   «Regelwerk & Parameter» 155 px, «Tâches quotidiennes» 140 px + the count). */
.side-nav .nav-label, .side-bottom .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon { width: var(--nav-icon); flex: 0 0 var(--nav-icon); display: inline-grid; place-items: center; text-align: center; font-size: 15px; opacity: .9; }
.nav-icon svg { width: var(--nav-icon); height: var(--nav-icon); }
.side-nav .nav-icon, .side-bottom .nav-icon { color: var(--text-muted); }
.side-nav a.active .nav-icon { opacity: 1; color: var(--accent); }
/* D-A5 (Alpi guide): «Weitere Seiten» / «Weniger anzeigen» after a section's pages, as quiet as an item. */
.nav-more { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--nav-item-height); padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-regular); text-align: left; cursor: pointer; }
.nav-more:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.nav-more:focus-visible { outline-offset: -2px; }
.nav-more[aria-expanded="true"] .nav-icon svg { transform: rotate(180deg); }
.nav-more-count { flex: 0 0 auto; min-width: 20px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--bg-active); color: var(--text-secondary); font-size: var(--text-2xs); line-height: 18px; font-weight: var(--weight-medium); text-align: center; }
.main-column { grid-column: 2; min-width: 0; }
.topbar { height: var(--topbar-height); padding: 0 var(--page-gutter); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border-hairline); background: var(--bg-surface); position: sticky; top: 0; z-index: var(--z-topbar); container: topbar / inline-size; }
.crumbs { flex: 1 1 auto; min-width: 0; }
.crumbs ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); white-space: nowrap; }
/* Only the last crumb shrinks: the record (= h1), or the page of a list without record (27.09.2026, I-09: at
   1440 px «MWST-Vorbereitung» ran under the search box); a narrow record page drops the section, below desktop
   widths the root may shrink to 160 px. 4 px padding: room for the link's focus ring. */
.crumbs li { flex: 0 0 auto; min-width: 0; padding: 4px 4px 4px 0; margin-right: -4px; overflow: hidden; text-overflow: ellipsis; }
.crumbs .crumb-record { flex-shrink: 1; }
.crumbs .crumb-page:last-child { flex-shrink: 1; }
.crumb-record:has(> :empty) { display: none; }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--stone-8); }
.crumbs li:first-child { min-width: calc-size(max-content, min(size, 160px)); }
@container topbar (max-width: 1180px) { .crumbs:has([data-crumb-record]:not(:empty)) .crumb-section { display: none; } }
@container topbar (max-width: 760px) { .crumbs .crumb-section { display: none; } .crumbs li:first-child { flex-shrink: 1; } }
.crumb-root { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-weight: var(--weight-medium); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text-primary); font-weight: var(--weight-medium); }
.top-context, .top-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.demo-badge, .status-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--brass-100); color: var(--warning-fg); font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: middle; }
.demo-badge { box-shadow: inset 0 0 0 1px var(--warning-line); }
.mobile-menu { display: none; }
/* D-29: content beside the sidebar, never centred; reading pages end at 1600 px, work surfaces are fluid */
.page { padding: var(--page-top) var(--page-gutter) 48px; max-width: calc(var(--page-max) + 2 * var(--page-gutter)); margin: 0; }
.page.page-fill, .page:has(> .dash, > .list-sheet, > .journal-list, > #report-panel) { max-width: none; }
/* h1 24/32, 14 px subtitle; List Report heads stay 32 px (the §2.3 row counts) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; margin-bottom: 20px; }
.page-head:has(.head-info) { min-height: 32px; margin-bottom: 8px; }
.page-head > div:first-child { min-width: auto; }
/* The h1 keeps one line up to 50vw, the actions wrap first */
.page-head h1 { margin: 0; min-width: calc-size(max-content, min(size, 50vw)); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--lh-2xl); letter-spacing: var(--tracking-title); }
.page-head p { margin: 2px 0 0; max-width: 96ch; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.page-head p:empty { display: none; }
.page-head > div:has(> .head-info) { display: flex; align-items: center; gap: 4px; }
.head-info > summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; }
.head-info > summary:hover, .head-info[open] > summary { background: var(--hover); color: var(--ink); }
.head-info > .menu-list { left: 0; right: auto; width: max-content; max-width: min(440px, 80vw); padding: 8px 12px; }
.page-head .head-info p { margin: 0; color: var(--ink-2); }
.head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* 5. Buttons --------------------------------------------------------------- */
/* D-29: 14/20 500 in 32 px, radius 6 */
.btn { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); min-height: var(--control); padding: 5px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: var(--weight-semibold); font-size: var(--text-sm); line-height: var(--lh-sm); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--motion), border-color var(--motion), color var(--motion); }
.btn:hover { border-color: var(--line-input); background: var(--hover); }
.btn:active { background: var(--surface-2); box-shadow: inset 0 1px 0 var(--line-strong); }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--line); background: var(--surface-2); color: var(--disabled-fg); box-shadow: none; opacity: 1; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); box-shadow: none; }
.btn-primary:disabled { border-color: var(--line); background: var(--surface-2); color: var(--disabled-fg); }
.btn-danger { color: var(--error-fg); border-color: var(--error-line); background: var(--paper); }
.btn-danger:hover { color: var(--error-fg); border-color: var(--error-fg); background: var(--error-bg); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--petrol-700); }
.btn-quiet:hover { border-color: transparent; background: var(--petrol-50); color: var(--petrol-800); }
.btn-small { min-height: var(--control-sm); padding: 3px 10px; font-size: var(--text-xs); line-height: var(--lh-xs); }
:is(.head-actions, .form-actions, .head-actions > .menu) > .btn:not(.btn-primary, .btn-quiet, .btn-danger, :disabled, [aria-disabled="true"]) { box-shadow: var(--shadow-1); }
:is(.head-actions, .form-actions, .head-actions > .menu) > .btn:not(.btn-primary, .btn-quiet, .btn-danger):active { box-shadow: inset 0 1px 0 var(--line-strong); }
/* Native file input: a 32 px secondary button until B2d */
input[type="file"].input { padding: 1px 2px; }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 3px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-weight: var(--weight-medium); box-shadow: var(--shadow-1); cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--border-control); background: var(--bg-hover); }
.icon-btn { width: var(--control); height: var(--control); border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); }
.icon-btn:hover { background: var(--hover); border-color: var(--line-input); }

/* 6. Layout helpers, cards, KPI tiles -------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-0); }
.card-pad { padding: var(--card-pad); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px var(--card-pad); border-bottom: 1px solid var(--line); }
.section-head h2, .section-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--lh-lg); }
.section-head p { margin: 1px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.section-body { padding: var(--card-pad); }
.card-pad > .section-head:first-child,
.card-pad > [hidden]:first-child + .section-head,
.card-pad > [hidden]:first-child + [hidden] + .section-head { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 12px; }
[data-document-readiness] { gap: 8px; }
[data-document-readiness]:has(> *) { margin-bottom: 12px; }
.space-top { margin-top: 16px; }
.space-bottom { margin-bottom: 16px; }
.actions-left { justify-content: flex-start; }
.journal-line-row { grid-template-columns: minmax(240px, 1fr) 150px 150px 32px; }
.confirm-row { margin-top: 12px; }
.modal-nav { display: grid; gap: 4px; }
.modal-nav .nav-group { border-bottom: 1px solid var(--line); }
.modal-nav .nav-group:last-child { border-bottom: 0; }
.modal-nav .nav-group-label { color: var(--muted); }
.modal-nav .nav-group-label:hover { color: var(--ink); }

.step-number { grid-row: span 2; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: var(--weight-bold); font-size: var(--text-xs); }
.limitation-list { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }

/* 7. Tables ---------------------------------------------------------------- */
.table-wrap { position: relative; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.table-wrap:focus-visible { outline-offset: -2px; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--lh-sm); }
.data-table th { color: var(--ink-2); background: var(--surface-2); text-transform: none; letter-spacing: 0; font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-semibold); text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; vertical-align: bottom; }
.data-table td { padding: 7px 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table td:has(> .btn:only-child), .data-table td:has(> .btn + .btn) { padding-top: 2px; padding-bottom: 2px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--hover); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.data-table th.num { text-align: right; }
/* Row actions render quiet, also when grouped in a .head-actions wrapper (bank list). */
.data-table td > .head-actions { justify-content: flex-start; gap: 4px; }
.data-table td:has(> .head-actions > .btn) { padding-top: 2px; padding-bottom: 2px; }
.data-table td > .btn.btn-small:not(.btn-primary):not(.btn-danger), .data-table td > .head-actions > .btn.btn-small:not(.btn-primary):not(.btn-danger) { border-color: transparent; background: transparent; color: var(--petrol-700); }
.data-table td > .btn.btn-small:not(.btn-primary):not(.btn-danger):hover, .data-table td > .head-actions > .btn.btn-small:not(.btn-primary):not(.btn-danger):hover { border-color: var(--petrol-200); background: var(--petrol-50); color: var(--petrol-800); }
.data-table td > .btn.btn-small.btn-danger, .data-table td > .head-actions > .btn.btn-small.btn-danger { border-color: transparent; background: transparent; }
.data-table td > .btn.btn-small.btn-danger:hover, .data-table td > .head-actions > .btn.btn-small.btn-danger:hover { border-color: var(--error-line); background: var(--error-bg); }
.data-table td > .btn.btn-small:disabled, .data-table td > .head-actions > .btn.btn-small:disabled { border-color: transparent; background: transparent; color: var(--disabled-fg); }
.row-link { color: var(--petrol-700); font-weight: var(--weight-semibold); text-decoration: none; text-underline-offset: 2px; }
.row-link:hover { color: var(--petrol-800); text-decoration: underline; }
.data-table td:first-child > .row-link { white-space: nowrap; }
.data-table:not(.statement-table) th.num { white-space: normal; }
/* Katalog (B1a): widths by column class (the selection column comes first); Name takes the rest. */
.catalog-table { table-layout: fixed; min-width: 850px; }
.catalog-table th.col-sku { width: 11%; }
.catalog-table th.col-unit { width: 9%; }
.catalog-table th.col-account { width: 16%; }
.catalog-table th.num { width: 14%; }
.catalog-table th.col-state { width: 10%; }
.catalog-table .catalog-name { display: block; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-weight: var(--weight-semibold); text-align: left; color: var(--petrol-700); overflow-wrap: anywhere; cursor: pointer; }
.catalog-table .catalog-name:hover { text-decoration: underline; }
.catalog-table .catalog-name:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.catalog-table .catalog-description { display: block; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
/* One line per row in the grid: the name, then its description, clipped (description as tooltip). */
.data-grid:is(.grid-compact, .grid-standard) .catalog-table td:has(> .catalog-name) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-grid:is(.grid-compact, .grid-standard) .catalog-table .catalog-name,
.data-grid:is(.grid-compact, .grid-standard) .catalog-table .catalog-description { display: inline; overflow-wrap: normal; white-space: nowrap; }
.data-grid:is(.grid-compact, .grid-standard) .catalog-table .catalog-description { margin-left: 6px; }
.subtle { color: var(--muted); }
.strong { font-weight: var(--weight-semibold); }
.positive { color: var(--amount-positive); }
.negative { color: var(--amount-negative); }

/* 8. Status badges and tabs ------------------------------------------------ */
.status-badge { background: var(--neutral-bg); color: var(--neutral-fg); }
.status-posted { background: var(--petrol-100); color: var(--petrol-800); }
.status-paid, .status-valid { background: var(--success-bg); color: var(--success-fg); }
.status-issued { background: var(--paper); color: var(--petrol-700); box-shadow: inset 0 0 0 1px var(--petrol-200); }
.status-accepted, .status-converted { background: var(--success-bg); color: var(--success-fg); }
.status-declined, .status-withdrawn { background: var(--neutral-bg); color: var(--neutral-fg); }
.status-draft { background: var(--brass-100); color: var(--warning-fg); }
.status-void { background: var(--neutral-bg); color: var(--neutral-fg); text-decoration: line-through; text-decoration-thickness: 1px; }
.status-overdue, .status-invalid { background: var(--error-bg); color: var(--error-fg); }
/* Tabs (B3): one look for .status-tabs, .report-nav and .contact-tabs: muted 500 text, the active
   tab in ink with a 2 px accent underline, hover changes the colour only, counters are pills. */
.status-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0; margin-bottom: 12px; border-bottom: 1px solid var(--border-hairline); scrollbar-width: thin; }
.status-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: var(--control); padding: 4px 10px; border: 0; border-radius: 0; color: var(--muted); text-decoration: none; font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-medium); background: transparent; transition: color var(--motion), box-shadow var(--motion); }
.status-tabs a:hover { color: var(--ink); background: transparent; box-shadow: inset 0 -2px 0 var(--border-default); }
.status-tabs a:focus-visible { outline-offset: -2px; }
.status-tabs a span { min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-full); background: var(--bg-active); color: var(--text-secondary); font-size: var(--text-2xs); line-height: 18px; font-weight: var(--weight-medium); text-align: center; }
.status-tabs a.active { border-color: transparent; background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); }
.status-tabs a.active span { background: var(--petrol-4); color: var(--petrol-11); }

/* 9. Data grid (data-grid.js) --------------------------------------------- */
/* UI v3 B1a: a toolbar line (search with its (i), filter chips, «Filter zurücksetzen» | pager,
   «Ansicht», Export), the table (sticky header, only the current page's rows) and a footer with
   the count or the selection. Kompakt rows = header = 28 px, Standard 32, Komfortabel 40. */
.data-grid { position: relative; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.card > .data-grid { border: 0; border-radius: inherit; }
/* A row focused with ArrowUp is scrolled out from under the sticky thead (SC 2.4.11). */
.data-grid > .table-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-padding-top: 36px; }
.data-grid:has(.grid-filter-row:not([hidden])) > .table-wrap { scroll-padding-top: 72px; }
.data-grid-toolbar { position: relative; display: flex; align-items: center; gap: 6px 12px; min-height: 40px; padding: 6px 8px; flex-wrap: wrap; }
.data-grid-meta, .data-grid-actions, .grid-chips, .grid-pager { display: flex; align-items: center; gap: 6px; min-width: 0; }
.data-grid-meta { flex: 1 1 auto; flex-wrap: wrap; }
.data-grid-actions { flex: 0 0 auto; margin-left: auto; }
.grid-chips { flex-wrap: wrap; }
.grid-search.input { flex: 0 1 240px; width: 240px; min-width: 160px; min-height: var(--control-sm); height: var(--control-sm); padding: 3px 8px 3px 28px; font-size: var(--text-sm); background: var(--paper) var(--icon-search) no-repeat 8px center / 14px; }
/* Filter chips: 'Kontakt' (dashed) or 'Kontakt: Muster' with its × (solid petrol). The popover
   holds the column's filter field and, for columns with few values, quick picks. */
.filter-chip-group { display: inline-flex; align-items: center; min-width: 0; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; height: var(--control-sm); max-width: 220px; padding: 0 8px; border: 1px dashed var(--stone-7); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; list-style: none; }
.filter-chip::-webkit-details-marker { display: none; }
.filter-chip:hover, .grid-chip[open] > .filter-chip { border-color: var(--stone-8); background: var(--bg-subtle); color: var(--text-primary); }
.filter-chip:focus-visible { outline-offset: 1px; }
.filter-chip > .ui-icon { flex: 0 0 auto; color: var(--text-muted); }
.filter-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.filter-chip-group.is-active .filter-chip { border-style: solid; border-color: var(--petrol-7); border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--petrol-2); color: var(--petrol-11); }
.filter-chip-group.is-active .filter-chip > .ui-icon { color: var(--petrol-11); }
.filter-chip-clear { display: inline-grid; place-items: center; width: 24px; height: var(--control-sm); padding: 0; border: 1px solid var(--petrol-7); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--petrol-2); color: var(--petrol-11); cursor: pointer; }
.filter-chip-clear:hover { background: var(--petrol-4); }
.grid-chip { position: relative; }
.grid-chip-panel { left: 0; right: auto; width: 260px; padding: 8px; }
.grid-chip-panel .input { min-height: var(--control-sm); height: var(--control-sm); margin-bottom: 4px; font-size: var(--text-sm); }
/* Pager '1–50 von 96 ‹ ›' */
.grid-pager { gap: 2px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-xs); white-space: nowrap; }
.grid-page-text { margin: 0 6px; font-variant-numeric: tabular-nums lining-nums; }
.icon-btn.grid-page-button { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); border: 0; background: transparent; color: var(--text-secondary); }
.icon-btn.grid-page-button:hover { background: var(--bg-hover); }
.icon-btn.grid-page-button:disabled, .icon-btn.grid-page-button[aria-disabled="true"] { background: transparent; color: var(--text-disabled); cursor: not-allowed; }
/* «Ansicht» and Export: popovers on the details.menu machinery (Esc, outside click, one open). */
.grid-view-menu > .menu-button, .grid-export-menu > .menu-button { min-height: var(--control-sm); }
.btn.grid-export-button { width: var(--control-sm); padding: 0; }
.grid-view-panel { width: 272px; max-height: min(520px, calc(100vh - 120px)); overflow-y: auto; padding: 4px 8px 8px; gap: 2px; }
.grid-view-panel .menu-label { margin: 8px 2px 4px; }
.grid-choice-group { display: flex; }
.grid-choice { flex: 1 1 0; min-height: 26px; padding: 2px 8px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; }
.grid-choice + .grid-choice { margin-left: -1px; }
.grid-choice:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.grid-choice:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.grid-choice:hover { background: var(--hover); }
.grid-choice[aria-pressed="true"] { position: relative; z-index: 1; border-color: var(--petrol-7); background: var(--petrol-2); color: var(--petrol-11); }
.grid-columns-list { display: grid; max-height: 220px; overflow-y: auto; }
.grid-columns-list label, .grid-check { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 2px; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; font-size: var(--text-sm); line-height: var(--lh-sm); }
.grid-columns-list label:hover { background: var(--hover); }
.grid-check { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); border-radius: 0; }
.grid-columns-list input, .grid-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.data-grid-table { min-width: 760px; }
.data-grid-table thead { position: sticky; top: 0; z-index: var(--z-sticky); }
.data-grid-table thead th { background: var(--surface-2); padding: 5px 8px; border-bottom: 0; }
.data-grid-table thead tr:first-child th { box-shadow: inset 0 -1px 0 var(--line-strong); }
.data-grid-table thead:has(> .grid-filter-row:not([hidden])) tr:first-child th { box-shadow: none; }
.data-grid-table .grid-filter-row th { padding: 0 8px 5px; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line-strong); }
/* The header casts a shadow only once the rows scroll under it. */
.data-grid.is-scrolled .data-grid-table thead th { box-shadow: inset 0 -1px 0 var(--line-strong), var(--shadow-1); }
.grid-filter-row input { display: block; width: 1px; min-width: 100%; min-height: 24px; height: 24px; border: 1px solid var(--line); border-bottom-color: var(--line-input); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--paper); color: var(--ink); padding: 2px 6px; font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; }
.grid-filter-row input::-webkit-search-cancel-button { cursor: pointer; }
.grid-filter-row input:focus { border-color: var(--ink-2); outline: 2px solid var(--focus); outline-offset: 0; }
.grid-filter-row input:not(:placeholder-shown) { border-color: var(--petrol-200); border-bottom-color: var(--primary); background: var(--petrol-50); }
.grid-sort { display: inline-flex; align-items: center; gap: 4px; width: calc(100% + 16px); min-height: 28px; margin: -5px -8px; padding: 5px 8px; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; white-space: nowrap; }
.data-grid-table th.num .grid-sort { flex-direction: row-reverse; }
.grid-sort > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grid-sort:hover { background: var(--hover); color: var(--ink); }
.grid-sort:focus-visible { outline-offset: -2px; }
.grid-sort-indicator { display: inline-grid; place-items: center; width: 12px; flex: 0 0 12px; color: var(--primary); opacity: 0; transition: opacity var(--motion); }
.grid-sort-indicator .ui-icon { width: 12px; height: 12px; }
.grid-sort:hover .grid-sort-indicator, .grid-sort:focus-visible .grid-sort-indicator { opacity: .7; }
th[aria-sort="ascending"] .grid-sort-indicator, th[aria-sort="descending"] .grid-sort-indicator { opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--ink); }
.data-grid-table tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.data-grid-table tr.is-selected td { background: var(--selection); }
.data-grid-table tr.is-selected td:first-child { box-shadow: inset 3px 0 var(--primary); }
.data-grid .grid-empty-row td { height: 72px; color: var(--muted); text-align: center; background: var(--paper); }
.data-grid [hidden] { display: none !important; }
/* Footer: the count, or 'n ausgewählt · Exportieren · Auswahl aufheben' (docked, never over rows). */
.data-grid-footer { display: flex; align-items: center; gap: 4px 8px; min-height: 28px; padding: 2px 8px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.data-grid-footer .btn-small { min-height: 22px; padding: 1px 8px; }
.grid-result-count { margin-right: 4px; padding-left: 2px; font-variant-numeric: tabular-nums lining-nums; }
.data-grid-footer:has(.btn:not([hidden])) .grid-result-count { color: var(--ink); font-weight: var(--weight-medium); }
/* Kompakt: 28 px rows = the header (5 + 18 + 4 + 1 px). */
.data-grid.grid-compact .data-grid-table td { padding: 5px 8px 4px; }
.data-grid.grid-compact .data-grid-table tbody tr:nth-child(even of :not([hidden])) { background: var(--zebra); }
.data-grid.grid-compact .data-grid-table td:has(> .btn), .data-grid.grid-compact .data-grid-table td:has(> .status-badge) { padding-top: 2px; padding-bottom: 2px; }
.data-grid.grid-compact .data-grid-table td > .btn-small { min-height: 22px; padding-top: 1px; padding-bottom: 1px; }
.data-grid.grid-comfortable .data-grid-table td { padding: 10px 12px; font-size: var(--text-md); line-height: var(--lh-md); }
.data-grid.grid-comfortable .data-grid-table thead th { padding: 8px 12px; }
.data-grid.grid-comfortable .data-grid-table .grid-filter-row th { padding: 0 12px 8px; }
.data-grid.grid-comfortable .grid-filter-row input { height: 28px; min-height: 28px; }
.data-grid.grid-comfortable .grid-sort { width: calc(100% + 24px); margin: -8px -12px; padding: 8px 12px; }

/* Prüfprotokoll: the summary and the closed «Technische Details» share one line (the JSON is
   written when the disclosure first opens); an opened disclosure expands below as a block. */
.audit-summary { display: inline; }
.audit-details:not([open]) { display: inline; margin-left: 8px; }
.audit-details:not([open]) summary { min-height: 0; }
.audit-summary strong, .audit-summary small { display: block; overflow-wrap: anywhere; }
.audit-summary strong { color: var(--ink); font-size: var(--text-xs); line-height: var(--lh-xs); }
.audit-summary small, .audit-user { color: var(--muted); font-size: var(--text-2xs); line-height: var(--lh-2xs); }
.audit-subject { font-weight: var(--weight-semibold); color: var(--ink); }
.audit-details summary { min-height: 22px; display: inline-flex; align-items: center; gap: 4px; color: var(--petrol-700); cursor: pointer; font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
.audit-details summary::before { content: ''; width: 5px; height: 5px; margin: 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--motion); }
.audit-details[open] summary::before { transform: rotate(45deg); }
.audit-details pre { max-width: min(720px, 70vw); max-height: 240px; margin: 6px 0 2px; padding: 8px 10px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font: 11px/1.5 var(--font-mono); }
.audit-grid td.audit-detail { white-space: nowrap; }
.audit-grid td.audit-detail > .audit-summary { display: inline-block; max-width: calc(100% - 136px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.audit-grid td.audit-detail:has(> .audit-details[open]) { white-space: normal; }
.audit-grid td.audit-detail:has(> .audit-details[open]) > .audit-summary { max-width: none; white-space: normal; }

/* 10. Worklist ------------------------------------------------------------- */
.worklist-callout { margin-bottom: 16px; padding: 9px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-color: var(--petrol-200); background: var(--petrol-50); box-shadow: inset 3px 0 var(--primary); transition: background-color var(--motion); }
.worklist-callout:hover { border-color: var(--primary); background: var(--petrol-100); }
.worklist-callout-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-size: 15px; }
.worklist-callout strong, .worklist-callout small { display: block; }
.worklist-callout strong { color: var(--petrol-800); font-size: var(--text-sm); line-height: var(--lh-sm); }
.worklist-callout small { margin-top: 1px; color: var(--ink-2); font-size: var(--text-xs); line-height: var(--lh-xs); }
.worklist-callout > :last-child { color: var(--petrol-700); font-weight: var(--weight-bold); }
.worklist-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.worklist-meta strong { color: var(--ink-2); }
.worklist-note { margin: 0 0 12px; font-size: var(--text-xs); line-height: var(--lh-xs); }
.worklist-tabs { margin-bottom: 12px; }
.worklist-content { min-width: 0; }
.worklist-items { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.worklist-items > .worklist-item { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.worklist-items > .worklist-item:last-child { border-bottom: 0; }
.worklist-item { min-width: 0; padding: 10px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; transition: background-color var(--motion); }
.worklist-item:hover { background: var(--hover); }
.worklist-item-main { min-width: 0; display: grid; gap: 1px; font-size: var(--text-sm); line-height: var(--lh-sm); }
.worklist-item-title { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.worklist-item-title h2 { min-width: 0; margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--lh-md); overflow-wrap: anywhere; }
.worklist-item p { margin: 0; line-height: var(--lh-sm); overflow-wrap: anywhere; }
.worklist-item small { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); overflow-wrap: anywhere; }
.worklist-contact { width: fit-content; margin-top: 1px; font-size: var(--text-xs); }
.worklist-guidance { margin-top: 2px !important; color: var(--petrol-800); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.worklist-item-side { min-width: 150px; display: grid; justify-items: end; gap: 6px; }
.worklist-item-side .btn-primary { background: var(--paper); color: var(--petrol-700); border-color: var(--petrol-200); }
.worklist-item-side .btn-primary:hover { background: var(--petrol-50); border-color: var(--primary); color: var(--petrol-800); }
.worklist-amount-wrap { display: grid; justify-items: end; gap: 0; }
.worklist-amount-wrap small { color: var(--muted); font-size: var(--text-2xs); line-height: var(--lh-2xs); text-align: right; }
.worklist-amount { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.worklist-amount-unknown { max-width: 220px; }
.worklist-reconciliation-meta { margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.worklist-bank-policy { margin: 0 0 12px; }
.worklist-bank-policy p { margin: 4px 0; line-height: var(--lh-sm); }
.worklist-bank-policy small { color: var(--muted); }
.worklist-pagination { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: var(--text-xs); }
/* Nine worklist tabs wrap at 1440 px. Each tab carries its own rule, so every wrapped row
   sits on a continuous line and the active underline sits on that line. */
@media (min-width: 901px) {
  .worklist-tabs { flex-wrap: wrap; overflow-x: visible; border-bottom: 0; column-gap: 0; }
  .worklist-tabs a { box-shadow: inset 0 -1px 0 var(--line-strong); }
  .worklist-tabs a.active { box-shadow: inset 0 -2px 0 var(--primary); }
}
.btn.disabled { border-color: var(--line); background: var(--surface-2); color: var(--disabled-fg); pointer-events: none; }

/* 11. Bank and reconciliation --------------------------------------------- */
.bank-focus-panel { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-color: var(--warning-line); box-shadow: inset 3px 0 var(--warning-bar); }
.bank-focus-panel h2 { margin: 6px 0 2px; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bank-focus-panel p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.bank-focus-copy { min-width: 0; display: grid; justify-items: start; }
.bank-focus-copy .head-actions { margin-top: 10px; justify-content: flex-start; }
.bank-focus-panel > strong { white-space: nowrap; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.bank-row-selected, .bank-row-selected td { background: var(--selection) !important; }
.bank-row-selected { box-shadow: inset 3px 0 var(--primary); }
.bank-row-selected td:first-child { box-shadow: inset 3px 0 var(--primary); }

.reconciliation-form { display: grid; grid-template-columns: minmax(150px, .7fr) repeat(2, minmax(170px, 1fr)) auto; gap: 12px; align-items: end; }
.reconciliation-form > small { grid-column: 1 / -1; color: var(--muted); }
.reconciliation-summary { display: grid; gap: 12px; margin-top: 16px; }
.reconciliation-loading { min-height: 140px; margin-top: 16px; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); }
.reconciliation-error { margin-top: 16px; }
.reconciliation-error p { margin: 6px 0 12px; }
.reconciliation-status { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-left: 0; box-shadow: inset 3px 0 var(--warning-bar); }
.reconciliation-status.is-reconciled { box-shadow: inset 3px 0 var(--success-bar); }
.reconciliation-status h2 { margin: 6px 0 2px; font-size: var(--text-lg); line-height: var(--lh-lg); }
.reconciliation-status p, .reconciliation-coverage small { margin: 0; color: var(--muted); }
.reconciliation-coverage { max-width: 480px; display: grid; gap: 4px; text-align: right; }
.reconciliation-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reconciliation-comparison article { min-width: 0; overflow: hidden; }
.reconciliation-comparison header { padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.reconciliation-comparison h3 { margin: 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.reconciliation-comparison dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reconciliation-comparison dl div { padding: 10px 14px; }
.reconciliation-comparison dl div + div { border-left: 1px solid var(--line); }
.reconciliation-comparison dt { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-semibold); text-transform: none; letter-spacing: 0; }
.reconciliation-comparison dd { margin: 2px 0 0; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.reconciliation-comparison article > p { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.reconciliation-difference-note { margin: -4px 2px 0; font-size: var(--text-xs); }
.reconciliation-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; color: var(--muted); font-size: var(--text-xs); }
.reconciliation-findings > ul { list-style: none; margin: 0; padding: 0; }
.reconciliation-findings > ul > li { padding: 10px var(--card-pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.reconciliation-findings > ul > li:last-child { border-bottom: 0; }
.reconciliation-findings li p { margin: 2px 0 0; line-height: var(--lh-sm); font-size: var(--text-sm); }
.reconciliation-findings li small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-xs); }
.reconciliation-finding-meta { color: var(--muted); font-size: var(--text-xs); }
.reconciliation-findings li > div:first-child, .reconciliation-statement > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.reconciliation-finding-actions { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.reconciliation-clear, .reconciliation-empty-evidence { margin: 0; padding: 16px var(--card-pad); }
.reconciliation-evidence > summary { padding: 10px var(--card-pad); display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.reconciliation-evidence > summary strong, .reconciliation-evidence > summary small { display: block; }
.reconciliation-evidence > summary small { margin-top: 2px; color: var(--muted); }
.reconciliation-evidence[open] > summary { border-bottom: 1px solid var(--line); }
.reconciliation-statements { display: grid; }
.reconciliation-statement { padding: 10px var(--card-pad); display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(330px, 1fr); align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.reconciliation-statement:last-child { border-bottom: 0; }
.reconciliation-statement small { display: block; margin-top: 2px; color: var(--muted); }
.reconciliation-statement > div:nth-child(2) { display: flex; gap: 6px; flex-wrap: wrap; }
.reconciliation-statement dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 10px; }
.reconciliation-statement dt { color: var(--muted); font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-semibold); text-transform: none; }
.reconciliation-statement dd { margin: 2px 0 0; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums lining-nums; }
.reconciliation-disclaimer { margin: -2px 2px 0; font-size: var(--text-xs); }

/* 12. Forms ---------------------------------------------------------------- */
.toolbar { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.search { min-width: min(320px, 100%); flex: 1; }
.toolbar > .field.search > .input { padding-left: 30px; background: var(--paper) var(--icon-search) no-repeat 9px center / 14px; }
.toolbar > .field.search { max-width: 520px; }
.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field label, .label { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-semibold); color: var(--ink-2); }
.field small { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line-input); background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); padding: 5px 8px; min-height: var(--control); font-size: var(--text-md); line-height: var(--lh-md); outline: 0; transition: border-color var(--motion); }
.select { appearance: none; padding-right: 28px; background: var(--paper) var(--icon-chevron) no-repeat right 9px center / 12px; text-overflow: ellipsis; }
.select[multiple], .select[size]:not([size="1"]) { padding-right: 8px; background-image: none; }
.textarea { min-height: 84px; resize: vertical; line-height: var(--lh-md); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink-2); outline: 2px solid var(--focus); outline-offset: 0; box-shadow: none; }
.input:focus:not(:focus-visible), .select:focus:not(:focus-visible), .textarea:focus:not(:focus-visible) { outline: 2px solid var(--focus); }
.input:disabled, .select:disabled, .textarea:disabled { border-color: var(--line-strong); background-color: var(--surface-2); color: var(--disabled-fg); cursor: not-allowed; }
.input[readonly], .textarea[readonly] { border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); }
/* Invalid = a 2 px error boundary (1 px border + 1 px ring, 8.17:1 on paper): a weight
   change, not only a hue change (SC 1.4.1, 1.4.11). */
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error-fg); box-shadow: 0 0 0 1px var(--error-fg); }
/* Kept separate: an unsupported pseudo-class would drop the whole selector list. */
.input:user-invalid { border-color: var(--error-fg); box-shadow: 0 0 0 1px var(--error-fg); }
.select:user-invalid { border-color: var(--error-fg); box-shadow: 0 0 0 1px var(--error-fg); }
.textarea:user-invalid { border-color: var(--error-fg); box-shadow: 0 0 0 1px var(--error-fg); }
.input[type="date"], .input[type="month"], .input[type="time"] { font-variant-numeric: tabular-nums lining-nums; }
.field > .input[type="date"], .field > .input[type="month"] { max-width: 184px; }
.input[inputmode="decimal"], .input[inputmode="numeric"], .input[type="number"] { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.form-grid .field > .input[inputmode="decimal"], .form-grid .field > .input[type="number"] { max-width: 220px; }
.input::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
/* Sticky action bar for long forms inside padded cards: "Speichern" stays in view. */
form.card-pad > .form-actions:last-child, .card-pad > form:last-child > .form-actions:last-child { position: sticky; bottom: 0; z-index: 1; margin-bottom: calc(-1 * var(--card-pad)); padding: 10px 0 var(--card-pad); border-top: 1px solid var(--line); background: var(--paper); }
.check-row { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-sm); }
.check-row input { width: 16px; height: 16px; flex: 0 0 16px; margin: 1px 0 0; accent-color: var(--primary); }
/* Alpi guide D-A4 item 8: the plain-language «?» beside a term (app.js termHelp, ui/tooltip.js). In a
   field it sits right of the label; the control and its help span the field below. */
.term-help-slot { display: inline-flex; margin-left: 2px; vertical-align: middle; }
.term-help-slot:empty { display: none; }
.term-help { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -2px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: help; }
.term-help:hover, .term-help:focus-visible { background: var(--bg-hover); color: var(--accent-text); }
.field:has(> .term-help-slot) { grid-template-columns: max-content minmax(0, 1fr); column-gap: 4px; align-items: center; }
.field:has(> .term-help-slot) > :not(label, .term-help-slot) { grid-column: 1 / -1; }
.field:has(> .term-help-slot) > .term-help-slot { justify-self: start; }
.page-head > div:first-child:has(> .term-help-slot) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.page-head > div:first-child:has(> .term-help-slot) > p { flex-basis: 100%; }
.form-error { background: var(--error-bg); border: 1px solid var(--error-line); border-left: 3px solid var(--error-bar); color: var(--error-fg); border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--text-sm); line-height: var(--lh-sm); margin-bottom: 12px; }
/* Callouts (B3): amber-3 (default) or .info; CSS-mask icon; clamping in app.js (D-14). */
.notice { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); position: relative; background: var(--amber-3); border: 0; color: var(--amber-11); border-radius: var(--radius-lg); padding: 8px 12px 8px 36px; font-size: var(--text-sm); line-height: var(--lh-sm); }
.notice::before { content: ""; position: absolute; left: 12px; top: 9px; width: 16px; height: 16px; background: var(--amber-9); -webkit-mask: var(--callout-icon) center / 16px 16px no-repeat; mask: var(--callout-icon) center / 16px 16px no-repeat; }
.notice a { color: inherit; font-weight: var(--weight-semibold); text-underline-offset: 2px; }
.notice strong { color: inherit; }
.notice.info { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); background: var(--bg-subtle); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.notice.info::before { background: var(--petrol-9); }
.notice:empty::before { content: none; }
form > .notice:not(:last-child), form > .form-error + .notice, .card-pad > .notice:not(:last-child) { margin-bottom: 12px; }
.compact-list { margin: 6px 0 0; padding-left: 18px; }
.camt-preview-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; padding: 0 var(--card-pad) 16px; overflow-wrap: anywhere; }
.camt-preview-meta > * { min-width: 0; }
.camt-confirm { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.code-input { font-family: var(--font-mono); font-size: var(--text-xs); }

/* 13. Line editors and document forms ------------------------------------- */
.line-editor { border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.line-row { display: grid; grid-template-columns: minmax(160px, 2fr) 70px 110px 95px 120px 125px 38px; gap: 8px; align-items: end; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.line-row:nth-child(even) { background: var(--zebra); }
.line-row.journal-line-row { grid-template-columns: minmax(240px, 1fr) 150px 150px 32px; }
.invoice-line-row, .quote-line-row { grid-template-columns: minmax(160px, 2fr) 70px 75px 105px 90px 120px 115px 38px; }
.line-row .line-catalog { grid-column: 1 / -1; }
.line-row:last-child { border-bottom: 0; }
.line-row .field { gap: 2px; }
.line-row .field label { font-size: var(--text-2xs); line-height: var(--lh-2xs); color: var(--ink-2); }
.line-row .input, .line-row .select { min-height: 30px; padding: 4px 7px; font-size: var(--text-sm); line-height: var(--lh-sm); }
.line-row .select { padding-right: 26px; background-position: right 7px center; }
.line-account-details { grid-column: 1 / -2; min-width: 0; }
.line-account-details summary { min-height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; border-radius: 0; color: var(--petrol-700); font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.line-account-details summary::-webkit-details-marker { display: none; }
.line-account-details summary::before { content: '›'; display: inline-block; width: 10px; font-size: 14px; line-height: 1; transition: transform var(--motion); }
.line-account-details[open] summary::before { transform: rotate(90deg); }
.line-account-details summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.line-account-details[open] summary { margin-bottom: 6px; }
.document-summary { width: min(420px, 100%); margin-left: auto; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.document-summary h3 { margin: 0 0 6px; font-size: var(--text-md); line-height: var(--lh-md); font-weight: var(--weight-bold); }
.document-summary-hint { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.document-summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-sm); font-variant-numeric: tabular-nums lining-nums; }
.document-summary-row strong { color: var(--ink); font-weight: var(--weight-bold); }
.document-summary-total { margin-top: 6px; padding: 8px 0 6px; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); color: var(--ink); font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); }
.document-summary-total strong { font-weight: var(--weight-bold); }
.pricing-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.pricing-mode-help { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.line-catalog-label { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.price-provenance { min-width: 0; color: var(--petrol-800); font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-provenance::before { content: "\2022"; margin-right: 6px; color: var(--petrol-600); }
.price-provenance[hidden] { display: none; }
.bill-line-row .input-vat-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding-top: 4px; }
.bill-line-row .input-vat-reason { grid-column: 1 / 3; }
.bill-line-row .input-vat-help { grid-column: 3; align-self: center; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.line-remove { width: 30px; height: 30px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; transition: background-color var(--motion), color var(--motion), border-color var(--motion); }
.line-remove:hover { border-color: var(--error-line); background: var(--error-bg); color: var(--error-fg); }
.line-remove:focus-visible { outline-offset: 0; }
.line-add { margin-top: 8px; justify-self: start; }
.party-panel, .profile-editor { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.party-panel > .section-head h3, .profile-list-head h3 { margin: 0; font-size: var(--text-md); line-height: var(--lh-md); font-weight: var(--weight-bold); }
.party-panel > .section-head p, .profile-list-head p { margin: 1px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.party-grid, .profile-defaults { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px var(--card-pad); }
.party-captured { display: grid; gap: 2px; margin: 12px var(--card-pad) 0; font-size: var(--text-sm); }
.party-captured span { overflow-wrap: anywhere; }
.party-captured-address { display: grid; gap: 2px; padding-top: 4px; }
.party-captured-address b { margin-bottom: 2px; }
.contact-profile-summary { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.contact-profile-summary h3 { font-size: var(--text-sm); line-height: var(--lh-sm); margin: 12px 0 6px; }
.contact-profile-summary h3:first-child { margin-top: 0; }
.contact-profile-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.contact-profile-list li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 2px; min-width: 0; padding: 8px 10px; font-size: var(--text-sm); }
.contact-profile-list span, .contact-profile-list small { overflow-wrap: anywhere; }
.party-empty { margin: 0; }
.profile-editor { margin-top: 8px; }
.profile-defaults { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--card-pad); border-top: 1px solid var(--line); }
.profile-rows { display: grid; gap: 8px; padding: 0 var(--card-pad) var(--card-pad); }
.profile-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); min-width: 0; }
.profile-row .profile-remove { justify-self: end; align-self: end; grid-column: 2; }

/* 14. Empty, loading ------------------------------------------------------- */
.empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.empty-icon { width: 40px; height: 40px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; background: var(--stone-3); color: var(--text-muted); }
.empty-icon svg { width: 20px; height: 20px; }
.empty h3 { color: var(--ink); font-size: var(--text-md); line-height: var(--lh-md); font-weight: var(--weight-bold); margin: 0 0 2px; }
.empty p { max-width: 460px; margin: 0 auto 12px; line-height: var(--lh-sm); }
.empty p:last-child { margin-bottom: 0; }
/* The head's action repeated in an empty state is a quiet link. */
.page:has(> .page-head .btn-primary) .empty .btn-primary { background: transparent; color: var(--accent-text); border-color: transparent; box-shadow: none; }
.page:has(> .page-head .btn-primary) .empty .btn-primary:hover { background: transparent; color: var(--accent-hover); border-color: transparent; text-decoration: underline; text-underline-offset: 2px; }
/* Alpi guide D-A4 item 5: «Zeig es mir» after the action; Alpi (decorative) in place of the icon. */
.empty > .btn + .btn { margin-left: 8px; }
.empty-alpi { display: block; width: 64px; height: 64px; margin: 0 auto 8px; }
.empty-inline .empty-alpi { flex: 0 0 auto; width: 40px; height: 40px; margin: 0; }
.empty-inline .empty-action:has(> .btn + .btn) { display: flex; align-items: center; gap: 8px; }
/* Loading: a static skeleton after 150 ms; spinners only in busy buttons. */
.loading { min-height: 200px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); }
.loading .spinner, .reconciliation-loading .spinner { display: none; }
.loading:not(:has(> .skeleton))::before { content: ""; width: min(320px, 70%); height: 44px; border-radius: var(--radius-xs); background: repeating-linear-gradient(to bottom, var(--stone-4) 0 8px, transparent 8px 18px); opacity: 0; animation: skeleton-in 1ms linear 150ms forwards; }
.loading:has(> .skeleton) { display: block; min-height: 0; place-items: normal; }
.skeleton { display: grid; gap: 0; opacity: 0; animation: skeleton-in 1ms linear 150ms forwards; }
.skeleton-head { padding: 4px 0 20px; }
.skeleton-head i { display: block; width: 220px; height: 14px; border-radius: var(--radius-xs); background: var(--stone-4); }
.skeleton-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 180px 104px; gap: 16px; align-items: center; height: 28px; padding: 0 8px; border-bottom: 1px solid var(--border-hairline); }
.skeleton-row i { display: block; height: 8px; border-radius: var(--radius-xs); background: var(--stone-4); }
.skeleton-row i:nth-child(2) { width: 64%; }
.skeleton-row:nth-child(odd) i:nth-child(2) { width: 48%; }
@keyframes skeleton-in { to { opacity: 1; } }
.spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* 15. Detail layouts, documents, meta, timeline, totals -------------------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 16px; }
[data-vat-declaration-preview] .detail-grid { grid-template-columns: minmax(250px, .9fr) minmax(360px, 1.3fr); align-items: start; }
[data-vat-declaration-preview] .meta-list { align-content: start; }
.document-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .55fr); gap: 16px; align-items: start; }
.document-paper, .detail-side { min-width: 0; max-width: 100%; }
.document-paper .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.document-paper .data-table { min-width: 620px; }
.document-detail-layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
.document-detail-layout > .detail-side { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.document-detail-layout .table-wrap:has(.document-lines-table) { max-height: 54vh; overflow: auto; }
.document-detail-layout .document-lines-table { table-layout: fixed; width: 100%; min-width: 930px; }
.document-lines-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); white-space: normal; overflow-wrap: anywhere; box-shadow: inset 0 -1px 0 var(--line-strong); }
.document-lines-table td { vertical-align: top; overflow-wrap: anywhere; white-space: normal; }
.document-lines-table th:first-child { width: 27%; }
.document-lines-table td:first-child { white-space: pre-line; }
.document-lines-table .num { font-variant-numeric: tabular-nums lining-nums; }
.document-lines-table td.num { white-space: nowrap; }
.document-lines-table td.num .subtle { white-space: normal; }
.document-lines-table td.num small { display: block; white-space: normal; }
.document-lines-table th.num { white-space: normal; overflow-wrap: anywhere; }
.document-lines-table th, .document-lines-table td { padding: 7px 8px; }
.document-lines-table .line-account { width: 6%; }
.document-lines-table .line-vat { width: 12%; }
.document-lines-table .line-quantity { width: 11%; }
.document-lines-table .line-unit-price { width: 11%; }
.document-lines-table .line-discount { width: 13%; }
.document-lines-table .line-net { width: 11%; }
.document-lines-table .line-tax { width: 9%; }
.document-lines-table td.line-quantity { white-space: normal; }
.document-lines-table.quote-lines-table .line-unit { width: 6%; }
.document-detail-layout .document-lines-table.quote-lines-table { min-width: 900px; }
.document-lines-table.purchase-lines-table { min-width: 1120px; }
.document-lines-table.purchase-lines-table .line-description { width: 23%; }
.document-lines-table.purchase-lines-table .line-input-vat { width: 14%; }
.document-detail-layout .detail-side > .card { margin-top: 0; }
.document-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.document-title h2 { margin: 0; font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--weight-bold); }
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 12px 0 16px; border-top: 1px solid var(--line); }
.meta-grid span, .meta-grid strong { display: block; }
.meta-grid span { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); margin-bottom: 2px; }
.detail-side { display: grid; gap: 16px; }
.detail-side .card, .detail-side .meta-row { min-width: 0; }
.detail-side .meta-row > * { min-width: 0; overflow-wrap: anywhere; }
.timeline { display: grid; margin-top: 10px; }
.timeline-item { position: relative; display: grid; gap: 1px; padding: 0 0 14px 18px; border-left: 1px solid var(--line-strong); margin-left: 4px; font-size: var(--text-sm); line-height: var(--lh-sm); }
.timeline-item:last-child { padding-bottom: 2px; border-left-color: transparent; }
.timeline-item::before { content: ''; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--primary); }
.timeline-item:first-child::before { background: var(--primary); }
.timeline-item span { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.note-box { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.note-box p { white-space: pre-wrap; margin: 6px 0 0; line-height: var(--lh-md); }
.full-width { width: 100%; margin-top: 12px; }
.meta-list { display: grid; gap: 0; }
.meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); line-height: var(--lh-sm); }
.meta-row:last-child { border-bottom: 0; }
.meta-row span:first-child { color: var(--muted); }
.meta-row > strong:last-child { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.attachment-list { display: grid; margin: 10px 0 16px; }
.attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.attachment-row strong, .attachment-row small { display: block; overflow-wrap: anywhere; }
.attachment-row small { color: var(--muted); margin-top: 1px; font-size: var(--text-xs); }
.totals { margin-left: auto; width: min(380px, 100%); padding: 12px 16px; }
.total-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: var(--text-sm); line-height: var(--lh-sm); font-variant-numeric: tabular-nums lining-nums; }
.total-row > :last-child { text-align: right; white-space: nowrap; }
.total-row.grand { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); margin-top: 6px; padding: 8px 0 6px; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); }

/* 16. Reports -------------------------------------------------------------- */
.report-nav { display: flex; gap: 2px; overflow-x: auto; padding: 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; margin-bottom: 12px; }
.report-nav button { min-height: var(--control); border: 0; background: transparent; color: var(--muted); padding: 4px 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; white-space: nowrap; cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-sm); line-height: var(--lh-sm); transition: color var(--motion), background-color var(--motion); }
.report-nav button:hover { color: var(--ink); background: var(--hover); }
.report-nav button:focus-visible, .contact-tabs a:focus-visible { outline-offset: -2px; }
.report-nav button.active { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); }
.contact-tabs a { display: inline-flex; align-items: center; min-height: var(--control); color: var(--muted); padding: 4px 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; white-space: nowrap; text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-sm); line-height: var(--lh-sm); }
.contact-tabs a:hover { color: var(--ink); background: var(--hover); }
.contact-tabs a.active { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); }
.contact-range { display: grid; grid-template-columns: minmax(150px, 200px) minmax(150px, 200px) auto auto minmax(220px, 1fr); gap: 8px 12px; align-items: end; margin-bottom: 12px; }
.contact-range small { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); align-self: center; }
.contact-statements { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
.contact-statements > *, .contact-kpis > *, .contact-ledger { min-width: 0; max-width: 100%; }
.contact-statements > section, .contact-statements .table-wrap { width: 100%; max-width: 100%; min-width: 0; }
.contact-statements .table-wrap { overflow-x: auto; }
.contact-balance-card { min-width: 0; }
.contact-section-head { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 12px; }
.contact-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.contact-kpis > div { min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.contact-kpis span, .contact-kpis strong { display: block; }
.contact-kpis span { hyphens: auto; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); margin-bottom: 2px; }
.contact-kpis strong { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums lining-nums; }
.contact-ledger table { min-width: 900px; }
.contact-control-notice p { margin: 4px 0 6px; }
.contact-applied-range { margin: -4px 0 12px; color: var(--muted); font-size: var(--text-xs); }
.contact-applied-range strong { color: var(--ink); }
.contact-print-head { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--ink); }
.contact-print-head span, .contact-print-head p { color: var(--muted); }
.contact-print-head h1 { margin: 4px 0; font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--weight-bold); }
.contact-print-head p { margin: 0; }
.report-sheet { background: var(--paper); padding: 16px 24px 24px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-0); }
.report-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 8px; font-size: var(--text-sm); line-height: var(--lh-sm); }
.report-title > div:last-child { text-align: right; }
.report-title h2 { margin: 0; font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: var(--weight-bold); }
.report-sheet .data-table th { background: transparent; border-bottom-color: var(--ink-2); }
.report-sheet .data-table td.num.strong { font-weight: var(--weight-semibold); }
.report-sheet .data-table tbody tr:hover td { background: var(--petrol-50); }
.report-sheet .grid-2 { align-items: start; gap: 24px; }
.report-group td { padding-top: 12px; font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-bold); color: var(--ink-2); background: var(--surface-2); }
.report-total td { border-top: 1px solid var(--ink); font-weight: var(--weight-bold); }
.report-sheet .data-table tbody tr.report-total:last-child td, .report-sheet .data-table tfoot tr.report-total:last-child td { border-bottom: 3px double var(--ink); }
.report-sheet .data-table tbody tr.report-total:hover td { background: transparent; }
/* Green-bar row tracking on the statements. :hover is excluded so the hover rule above still
   wins on even rows. Group and total rows keep their own fill and are not counted, so the
   stripe rhythm runs on across a group heading. */
.report-sheet .data-table tbody tr:nth-child(even of :not(.report-group, .report-total, .report-subtotal, .report-pad)):not(:hover) td { background: var(--zebra); }
/* Hauptbuch: every account is its own table. One fixed column grid makes Datum, Journal,
   Referenz, Soll and Haben share the same x edges in all account blocks (6 columns,
   app.js reportBody). Beschreibung takes the rest. */
.report-sheet > .card > .table-wrap > .data-table { table-layout: fixed; }
.report-sheet > .card > .table-wrap > .data-table th:nth-child(1) { width: 104px; }
.report-sheet > .card > .table-wrap > .data-table th:nth-child(2) { width: 96px; }
.report-sheet > .card > .table-wrap > .data-table th:nth-child(4) { width: 160px; }
.report-sheet > .card > .table-wrap > .data-table th:nth-child(5),
.report-sheet > .card > .table-wrap > .data-table th:nth-child(6) { width: 150px; }
.report-sheet > .card > .table-wrap > .data-table td { overflow-wrap: anywhere; }
.report-sheet > .notice, .report-sheet > p.notice { margin: 12px 0 0; }
.report-sheet .totals { padding-right: 10px; }
.vat-workspace, .vat-workspace > *, .vat-entry-table { min-width: 0; max-width: 100%; }
.vat-section-head { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 16px; }
.vat-entry-table table { min-width: 980px; }
.vat-entry-table td { vertical-align: top; }
.vat-classification { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(190px, 1.2fr); gap: 8px; min-width: 360px; }
.vat-classification .field { min-width: 0; }
.vat-needs-work { display: inline-block; color: var(--warning-fg); background: var(--brass-100); border-radius: var(--radius-xs); padding: 1px 6px; font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-semibold); white-space: normal; }
/* A not automated Ziffer once the special cases are confirmed as checked (I-10): neutral, no warning colour. */
.vat-manual { display: inline-block; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-xs); white-space: normal; cursor: help; }
.vat-issues { margin-top: 16px; }
.vat-stale { border-color: var(--warning-line); background: var(--warning-bg); color: var(--warning-fg); box-shadow: inset 3px 0 var(--warning-bar); }
.hash-value { max-width: min(620px, 65vw); overflow-wrap: anywhere; text-align: right; }
.validation-details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); }
.validation-details summary { cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink); }
.validation-details code { display: block; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere; white-space: normal; font-size: var(--text-2xs); }

/* 17. Payroll -------------------------------------------------------------- */
.payroll-form { min-width: 0; }
.payroll-contracts { display: grid; gap: 12px; }
.payroll-contract { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px var(--card-pad); background: var(--surface-2); min-width: 0; }
.payroll-contract h3 { margin: 0; font-size: var(--text-md); line-height: var(--lh-md); }
.payroll-manual { min-width: 760px; }
.payroll-manual td:nth-child(2) { width: 170px; }
.payroll-lines { margin-top: 16px; }
.payroll-lines table { min-width: 900px; }
.payroll-lines td:last-child { min-width: 240px; max-width: 420px; overflow-wrap: anywhere; }
.payroll-totals { margin: 16px 0 0 auto; display: grid; gap: 0; max-width: 430px; font-variant-numeric: tabular-nums lining-nums; }
.payroll-totals > div { display: flex; justify-content: space-between; gap: 20px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.payroll-totals .grand { margin-top: 4px; padding: 7px 0 5px; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink); }
.payroll-posting-totals { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin: 16px 0; }
.payroll-posting-totals > div { display: grid; align-content: start; gap: 2px; padding: 6px 0 10px; }
.payroll-posting-totals > div > span { color: var(--muted); font-size: var(--text-xs); }
.payroll-posting-totals > div > strong { font-size: var(--text-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums lining-nums; }
.payroll-stale { margin-bottom: 12px; }
.payroll-model-readonly { display: flex; align-items: center; background: var(--surface-2); color: var(--ink); }
.payroll-context { margin-top: 16px; }
.payroll-context .loading { min-height: 90px; }
.payroll-context-table { min-width: 860px; }
.payroll-context-table details { max-width: 220px; }
.payroll-context-totals { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.payroll-context-totals span { color: var(--muted); }
.payroll-context-totals strong { color: var(--ink); margin-left: 4px; font-variant-numeric: tabular-nums lining-nums; }
.payroll-alv-summary { margin-top: 16px; padding: 12px var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.payroll-alv-summary h3 { margin: 0; font-size: var(--text-md); }
.payroll-alv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; margin-top: 10px; }
.payroll-alv-grid > div { display: grid; gap: 2px; }
.payroll-alv-grid span { color: var(--muted); font-size: var(--text-xs); }
.payroll-alv-grid strong { font-variant-numeric: tabular-nums lining-nums; }
.amount-refund { color: var(--brass-700); }
.payroll-prior-table { min-width: 960px; }
.payroll-prior-table td:nth-child(6) { min-width: 220px; max-width: 360px; overflow-wrap: anywhere; }
.payroll-prior-table td:last-child { white-space: nowrap; }
.payroll-payment-table { min-width: 840px; }
.payroll-payment-table td:first-child input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
.payroll-payment-table code { font-size: var(--text-2xs); overflow-wrap: anywhere; }
.payroll-payment-table small { display: block; margin-top: 2px; color: var(--muted); line-height: var(--lh-xs); }
.iban-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; letter-spacing: .02em; }
.payment-party-review { display: grid; grid-template-columns: 150px minmax(220px, 1fr) auto; gap: 4px 16px; align-items: baseline; margin-top: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.payment-party-review > span:first-child { grid-row: span 2; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.payment-party-review small { grid-column: 2 / -1; color: var(--muted); }
.payroll-payment-detail-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.payment-summary-item { display: grid; grid-template-columns: minmax(120px, .72fr) minmax(0, 1.28fr); gap: 12px; align-items: baseline; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.payment-summary-item > span { color: var(--muted); font-size: var(--text-xs); }
.payment-summary-item > strong { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.payment-summary-wide { grid-column: 1 / -1; grid-template-columns: minmax(180px, .36fr) minmax(0, 1.64fr); }
.payroll-payment-evidence { min-width: 680px; }
#payroll-payment-form .form-grid { align-items: end; }
.payroll-payment-totals { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; }
.payroll-payment-totals > div { display: grid; gap: 4px; }
.hash-value { max-width: 520px; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-2xs); }
.check-row span small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }

/* 18. Annual close, checklist, opening balances --------------------------- */
.annual-table { min-width: 0; }
.annual-table .section-head h2 { font-size: var(--text-lg); }
.annual-tabs { margin-bottom: 12px; }
.annual-print-marker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--muted); font-size: var(--text-xs); }
.annual-finalize, .annual-next-year { display: grid; gap: 12px; }
.annual-blockers ul { margin: 8px 0 0; padding-left: 18px; }
.annual-blockers li + li { margin-top: 6px; }
.annual-blockers li span { color: var(--muted); }
.annual-bank-checks .card-pad { padding-top: 4px; }
.annual-archive-meta { border-left: 0; box-shadow: inset 3px 0 var(--success-bar); }
.account-detail { display: block; color: var(--muted); margin-top: 2px; font-weight: var(--weight-regular); font-size: var(--text-xs); line-height: var(--lh-xs); }
.annual-section-head { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 16px; }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.check-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px var(--card-pad); border-bottom: 1px solid var(--line); font-size: var(--text-sm); line-height: var(--lh-sm); }
.check-item:nth-child(odd) { border-right: 1px solid var(--line); }
.check-item strong, .check-item small { display: block; }
.check-item small { color: var(--muted); margin-top: 1px; font-size: var(--text-xs); line-height: var(--lh-xs); }
.check-item .step-number { background: var(--success-bg); color: var(--success-fg); }
.check-item.review .step-number { background: var(--brass-100); color: var(--warning-fg); }
.print-note { border-top: 1px solid var(--line); padding: 10px 0; }
.print-note p { white-space: pre-wrap; margin: 4px 0 0; line-height: var(--lh-md); }
.opening-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .8fr); gap: 16px; align-items: start; }
.opening-file-picker { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1px dashed var(--line-input); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; }
.opening-file-picker:hover { border-color: var(--primary); background: var(--petrol-50); }
.opening-file-picker:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.opening-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opening-review-toolbar { display: grid; grid-template-columns: minmax(320px, 1fr) auto; gap: 16px; align-items: end; }
.opening-review-toolbar .field { margin: 0; }
.opening-map-select { min-width: 260px; max-width: 420px; }
.opening-table-wrap { max-height: 520px; }
.opening-table { min-width: 920px; }
.opening-wide-table { min-width: 1280px; }
.opening-issue-list, .opening-blockers ul, .opening-warnings ul { margin: 0; padding-left: 18px; }
.opening-issue-list { min-width: 230px; color: var(--error-fg); }
.opening-issue-list li + li, .opening-blockers li + li, .opening-warnings li + li { margin-top: 4px; }
.opening-total-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.opening-total-grid > div { display: grid; gap: 2px; padding: 10px var(--card-pad); background: var(--paper); }
.opening-total-grid span { color: var(--muted); font-size: var(--text-xs); }
.opening-total-grid strong { font-size: var(--text-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums lining-nums; }
.opening-preview-summary { border-left: 0; box-shadow: inset 3px 0 var(--primary); }
.opening-preview-stale { margin-bottom: 12px; }
.opening-readonly-banner { margin-bottom: 12px; }
.opening-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
.opening-pagination .form-actions { margin: 0; }
.opening-inline-details summary { cursor: pointer; color: var(--petrol-700); font-weight: var(--weight-semibold); }
.opening-inline-details dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 6px 0 0; }
.opening-inline-details dt { color: var(--muted); }
.opening-inline-details dd { margin: 0; text-align: right; }

/* 19. Modal and toast ------------------------------------------------------ */
.modal { width: min(600px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); color: var(--ink); background: var(--paper); box-shadow: var(--shadow-3); overflow: auto; scroll-padding-top: 64px; }
.modal::backdrop { background: var(--backdrop); backdrop-filter: none; }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.modal-head h2 { flex: 0 1 auto; min-width: 0; margin: 0; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); }
.modal-body { padding: 16px 20px 20px; }
.modal-close { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; margin-left: auto; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.modal-close:hover { background: var(--hover); color: var(--ink); }

/* Toasts (B3): both live regions in one stack (app.js), inside #modal while it is open. */
.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: grid; gap: 8px; width: min(360px, calc(100% - 48px)); }
.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: grid; gap: 8px; width: min(360px, calc(100% - 48px)); pointer-events: none; }
.toast-stack > .toast-region { position: static; width: auto; }
.toast-region:empty { display: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 11px 8px 11px 14px; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-2); font-size: var(--text-sm); line-height: 20px; pointer-events: auto; animation: toast-in .12s ease-out; }
.toast-icon { display: grid; place-items: center; height: 20px; color: var(--green-9); }
.toast.error .toast-icon { color: var(--red-9); }
.toast.info .toast-icon { color: var(--petrol-9); }
.toast.warning .toast-icon { color: var(--amber-9); }
.toast-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.toast-message { margin: 0; overflow-wrap: anywhere; }
.toast-action { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: var(--weight-medium); cursor: pointer; }
.toast-close { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; margin: -2px 0 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.toast-close:hover { background: var(--hover); color: var(--ink); }
.toast-close:focus-visible { outline-offset: -2px; }
@keyframes toast-in { from { opacity: 0; } }

.mobile-bottom { display: none; }
.only-print { display: none; }

/* 20. Module harmonisation (modules/*.js inject their own <style>).
   Higher-specificity overrides only replace hard-coded colours and weights
   800-900 (which render as Segoe UI Black). Remove once phase-2 markup
   follow-ups 16 (fs, rw) and 19 (bu, ab) are done in the module files. */
.main-column .fs-root .fs-year, .main-column .fs-root .fs-switch, .main-column .rw-root .rw-filter { font-weight: var(--weight-semibold); }
.main-column .fs-root .fs-year .select, .main-column .rw-root .rw-filter .input, .main-column .rw-root .rw-filter .select { min-height: var(--control); padding-top: 4px; padding-bottom: 4px; }
.main-column .fs-root .fs-header h2 { font-weight: var(--weight-bold); font-size: var(--text-lg); }
.main-column .fs-root .fs-meta dt, .main-column .rw-root .rw-meta dt { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .04em; }
.main-column .fs-root .fs-meta dd { font-weight: var(--weight-semibold); }
.main-column .fs-root .fs-table th, .main-column .fs-root .fs-table td { font-weight: var(--weight-regular); }
.main-column .fs-root .fs-colhead th { font-weight: var(--weight-semibold); color: var(--ink-2); }
.main-column .fs-root .fs-colhead th:first-child { font-weight: var(--weight-bold); }
.main-column .fs-root .fs-colhead th span, .main-column .fs-root .fs-prior-row th { font-weight: var(--weight-semibold); }
.main-column .fs-root .fs-ph span, .main-column .rw-root .rw-hash, .rw-form .rw-hash { font-weight: var(--weight-regular); }
.main-column .fs-root .fs-heading th { font-weight: var(--weight-bold); letter-spacing: .04em; }
.main-column .fs-root .fs-section th, .main-column .fs-root .fs-subtotal th, .main-column .fs-root .fs-subtotal td { font-weight: var(--weight-bold); }
.main-column .fs-root .fs-total th, .main-column .fs-root .fs-total td { font-weight: var(--weight-bold); }
.main-column .fs-root .fs-voluntary th, .main-column .fs-root .fs-voluntary td { font-weight: var(--weight-regular); }
.main-column .fs-root .fs-account th, .main-column .fs-root .fs-account td { background: var(--surface-2); }
.main-column .fs-root .fs-ledger { color: var(--petrol-700); font-weight: var(--weight-semibold); }
.main-column .fs-root .fs-tag, .main-column .rw-root .rw-badge { border-radius: var(--radius-xs); background: var(--neutral-bg); color: var(--neutral-fg); font-weight: var(--weight-semibold); }
.main-column .rw-root .rw-badge.rw-ok { background: var(--success-bg); color: var(--success-fg); }
.main-column .rw-root .rw-badge.rw-warn { background: var(--brass-100); color: var(--warning-fg); }
.main-column .rw-root .rw-badge.rw-info { background: var(--petrol-50); color: var(--petrol-800); }
.main-column .rw-root .rw-badge.rw-muted { background: var(--surface-3); color: var(--neutral-fg); }
.main-column .fs-root .fs-badge { border-radius: var(--radius-xs); padding: 2px 8px; font-weight: var(--weight-semibold); }
.main-column .fs-root .fs-tab-badge { border-radius: 9px; font-weight: var(--weight-semibold); }
.main-column .fs-root .fs-status { border-radius: var(--radius-sm); font-weight: var(--weight-bold); }
.main-column .fs-root .fs-info .fs-status { background: var(--petrol-50); color: var(--petrol-800); }
.main-column .fs-root .fs-warn .fs-status { background: var(--brass-100); color: var(--warning-fg); }
.main-column .fs-root .fs-sign-status, .main-column .fs-root .fs-sign-annex { font-weight: var(--weight-semibold); }
.main-column .fs-root .fs-toggle:focus-visible, .main-column .fs-root .fs-ledger:focus-visible { outline-color: var(--focus); }
.main-column .fs-root.fs-preview .fs-panel-statement { background: var(--surface-3); border-radius: var(--radius); }
.main-column .fs-root.fs-preview .fs-sheet { box-shadow: 0 3px 14px rgba(15, 42, 40, .16); }
.main-column .rw-root .rw-stats > div { border-radius: var(--radius); }
.main-column .rw-root .rw-stats strong { font-weight: var(--weight-bold); }
.main-column .rw-root .rw-subhead { font-weight: var(--weight-bold); }
.main-column .rw-root .rw-link { font-weight: var(--weight-semibold); }
.main-column .rw-root .rw-value small { color: var(--petrol-800); }
.main-column .rw-root tr.rw-current td { background: var(--petrol-50); font-weight: var(--weight-semibold); }
.rw-form .rw-file:focus-within .btn { outline-color: var(--focus); }
/* Buchungstabellen (modules/buchen/style.js): the entry grid uses the Alpen table header
   (12 / 600, sentence case, no letter-spacing) and weights 400/600/700 only. */
.main-column .bu-root .bu-hcell { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.main-column .bu-root .bu-c-balance.bu-bad, .main-column .bu-root .bu-stat-bad, .main-column .bu-root .bu-stat-good { font-weight: var(--weight-bold); }
.main-column .bu-root .bu-field, .main-column .bu-root .bu-addr, .main-column .bu-root .bu-rownr, .main-column .bu-root .bu-code, .main-column .bu-root .bu-jnr,
.main-column .bu-root .bu-tag, .main-column .bu-root .bu-opt small, .main-column .bu-root .bu-table .bu-badge, .main-column .bu-root .bu-panel-badge,
.main-column .bu-root .bu-help summary, .main-column .bu-root .bu-preview-table tr.bu-entry-head td { font-weight: var(--weight-semibold); }
.main-column .bu-root .bu-addr { letter-spacing: 0; }
.main-column .bu-root .bu-lock, .main-column .bu-root .bu-subhead, .main-column .bu-root .bu-save.bu-save-ok::before { font-weight: var(--weight-bold); }
/* Ablage (modules/ablage.js): weights 650-800 to 600. The current folder's label and count
   inherit from .is-current > .ab-node; the other folders stay at 400. */
.main-column .ab-root .ab-chip { font-weight: var(--weight-semibold); letter-spacing: 0; }
.main-column .ab-root .ab-name-text strong, .main-column .ab-root .ab-meta dt,
.main-column .ab-root .ab-crumbs [aria-current], .main-column .ab-root .ab-views .btn.is-active,
.main-column .ab-root [role="treeitem"].is-current > .ab-node { font-weight: var(--weight-semibold); }

/* 21. Layout modes --------------------------------------------------------- */
/* List Report pages (listShell sets .page-fill, audit defect 1: the former :has() rule also
   stretched the XML-Dateiarchiv card): the page fills the window below the topbar, the list sheet
   takes the rest and its grid hugs its rows, scrolling inside. */
@media (min-width: 781px) {
  .page.page-fill { height: calc(100dvh - var(--topbar-height)); min-height: 480px; display: flex; flex-direction: column; padding-top: 12px; padding-bottom: 12px; }
  .page-fill > * { flex-shrink: 0; }
  .page-fill > .list-sheet { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .page-fill > .list-sheet > .data-grid { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
  .page-fill > .list-sheet > .data-grid > .table-wrap { flex: 0 1 auto; min-height: 0; overflow: auto; }
  .data-grid-toolbar, .data-grid-footer { flex-shrink: 0; }
}

#report-form .field, #asset-report-form .field { grid-auto-flow: column; align-items: center; gap: 6px; }
#report-form .field > .input[type="date"], #asset-report-form .field > .input[type="date"] { width: 136px; }

@media (min-width: 1101px) {
  .detail-grid > aside .contact-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid > aside .contact-kpis > div { padding-inline: 6px; }
}

@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: 1fr; }
  .document-layout { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; }
  .line-row { grid-template-columns: minmax(160px, 2fr) 70px 100px 90px 110px 110px 38px; }
  .invoice-line-row, .quote-line-row { grid-template-columns: minmax(150px, 2fr) 65px 70px 95px 85px 105px 100px 38px; }
  .line-row.journal-line-row { grid-template-columns: minmax(200px, 1fr) 130px 130px 32px; }
  .reconciliation-statement { grid-template-columns: minmax(0, 1fr) auto; }
  .reconciliation-statement dl { grid-column: 1 / -1; }
}

/* Mobile web is out of scope for the desktop release (AGENTS.md); these rules only keep it usable. */
@media (max-width: 780px) {
  body { padding-bottom: 68px; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-hero { min-height: 240px; padding: 28px; }
  .auth-copy { margin-top: 40px; }
  .auth-copy h1 { font-size: 30px; }
  .auth-copy p { font-size: 15px; margin-bottom: 0; }
  .auth-form-wrap { padding: 24px 16px 40px; }
  .auth-card { padding: 20px; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main-column { display: block; }
  .topbar { height: 52px; padding: 0 12px; }
  .mobile-menu { display: inline-grid; place-items: center; }
  .page { padding: 16px 12px 40px; }
  .page-head { align-items: stretch; flex-direction: column; margin-bottom: 16px; }
  .page-head h1 { font-size: 22px; }
  .head-actions { justify-content: flex-start; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .section-head { flex-wrap: wrap; }
  .checklist { grid-template-columns: 1fr; }
  .check-item:nth-child(odd) { border-right: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .line-editor { overflow-x: auto; }
  #document-form .line-editor { overflow: visible; border: 0; display: grid; gap: 12px; }
  .line-row { min-width: 790px; }
  .invoice-line-row, .bill-line-row { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
  .invoice-line-row > .field, .bill-line-row > .field { min-width: 0; }
  .invoice-line-row > .line-catalog, .invoice-line-row > .line-description, .bill-line-row > .line-description, .line-account-details { grid-column: 1 / -1; }
  .invoice-line-row > .line-remove, .bill-line-row > .line-remove { justify-self: end; grid-column: 2; }
  .quote-line-row { min-width: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .quote-line-row > .field { min-width: 0; }
  .quote-line-row > .field:first-child, .quote-line-row > .field:nth-child(2) { grid-column: 1 / -1; }
  .quote-line-row > .line-remove { justify-self: end; }
  .meta-grid { grid-template-columns: 1fr; }
  .document-paper .totals { width: 100%; max-width: 100%; margin-left: 0; }
  .document-paper, .detail-side, #quote-form, #quote-form .form-grid { width: 100%; max-width: 100%; min-width: 0; }
  #quote-form .line-editor { width: 100%; max-width: 100%; }
  .payroll-contract { padding: 12px; }
  .contact-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-range small { grid-column: 1 / -1; }
  .contact-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-totals { max-width: none; }
  .bill-line-row .input-vat-controls { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .bill-line-row .input-vat-reason, .bill-line-row .input-vat-help { grid-column: 1; }
  .profile-defaults { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-controls { grid-template-columns: 1fr; }
  .pricing-controls .span-2 { grid-column: 1; }
  .worklist-item { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .worklist-item-side { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .worklist-item-side .btn { flex: 0 0 auto; }
  .worklist-meta { display: grid; gap: 4px; }
  .bank-focus-panel { align-items: flex-start; flex-direction: column; }
  .reconciliation-form, .reconciliation-comparison { grid-template-columns: 1fr; }
  .reconciliation-form > small { grid-column: 1; }
  .reconciliation-status, .reconciliation-findings .section-head, .reconciliation-findings > ul > li { align-items: flex-start; flex-direction: column; }
  .reconciliation-coverage { max-width: none; text-align: left; }
  .reconciliation-counts, .reconciliation-finding-actions { justify-content: flex-start; }
  .reconciliation-statement { grid-template-columns: 1fr; }
  .reconciliation-statement dl { grid-column: 1; }
  .vat-classification { grid-template-columns: 1fr; min-width: 230px; }
  .vat-section-head { align-items: flex-start; }
  .hash-value { max-width: 58vw; }
  .data-grid-toolbar, .data-grid-footer { align-items: flex-start; flex-direction: column; }
  .grid-search.input { flex: none; width: 100%; max-width: none; }
  .data-grid-meta, .data-grid-actions, .grid-pagination { width: 100%; margin-left: 0; justify-content: flex-start; }
  .grid-columns-list { right: auto; left: 0; }
  .audit-details pre { max-width: calc(100vw - 72px); }
  .mobile-bottom { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0; height: 68px; z-index: var(--z-mobile-nav); background: var(--sidebar-bg); border-top: 1px solid var(--border-hairline); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bottom a { display: grid; place-content: center; justify-items: center; gap: 3px; text-decoration: none; color: var(--sidebar-label); font-size: 10px; font-weight: var(--weight-semibold); }
  .mobile-bottom a.active { color: var(--accent-text); box-shadow: inset 0 3px var(--sidebar-marker); }
  .mobile-bottom .nav-icon { font-size: 18px; }
  .org-meta, .crumbs li + li { display: none; }
  form.card-pad > .form-actions:last-child, .card-pad > form:last-child > .form-actions:last-child { position: static; margin-bottom: 0; padding: 0; border-top: 0; background: none; }
}

@media (max-width: 430px) {
  .worklist-callout { padding: 12px; grid-template-columns: auto minmax(0, 1fr); }
  .worklist-callout > :last-child { display: none; }
  .worklist-item-title { align-items: flex-start; flex-direction: column; }
  .worklist-item-side { align-items: stretch; flex-direction: column; }
  .worklist-amount-wrap { justify-items: start; }
  .worklist-amount-wrap small { text-align: left; }
  .worklist-item-side .btn { width: 100%; }
  .worklist-pagination { justify-content: space-between; gap: 6px; }
  .contact-range { grid-template-columns: 1fr; }
  .contact-range small { grid-column: 1; }
  .contact-kpis { grid-template-columns: 1fr; }
  .contact-section-head { align-items: flex-start; }
  .party-panel > .section-head, .profile-editor > .section-head, .profile-list-head { align-items: stretch; flex-direction: column; }
  .party-grid, .profile-defaults, .profile-row { grid-template-columns: 1fr; }
  .party-grid .span-2, .profile-row .span-2 { grid-column: 1; }
  .profile-row .profile-remove { grid-column: 1; justify-self: stretch; }
}

#bank-import-form [hidden] { display: none !important; }

/* 22. Forced colors (Windows contrast themes) ------------------------------ */
/* Forced colors drop box-shadow and author backgrounds, which carry the current tab, the
   current nav item and the selected rows above. Replace them with cues that survive. */
@media (forced-colors: active) {
  .status-tabs a.active, .report-nav button.active, .contact-tabs a.active, .side-nav a.active, .side-bottom a.active, .modal-nav a.active, .org-row[aria-current] { text-decoration: underline 2px; text-underline-offset: 4px; }
  .data-grid-table tr.is-selected td, .bank-row-selected td { forced-color-adjust: none; background: SelectedItem !important; color: SelectedItemText; }
  .data-grid-table tr.is-selected td *, .bank-row-selected td * { color: inherit !important; background: transparent !important; border-color: currentColor !important; }
}

/* 23. Print (A4 reports) --------------------------------------------------- */
@media print {
  @page { margin: 14mm; }
  :root { font-size: 10pt; }
  body { background: #fff; padding: 0; color: #000; }
  .sidebar, .topbar, .mobile-bottom, .page-head, .report-nav, .no-print, .toast-region, .data-grid-toolbar, .data-grid-footer, .grid-filter-row { display: none !important; }
  /* Controls mean nothing on paper, and Chrome drops their fills by default, which leaves
     white labels on white (1.00:1): buttons, the worklist callout, the onboarding steps. */
  .btn, .worklist-callout, .onboarding { display: none !important; }
  .app-shell, .main-column { display: block; }
  .page { max-width: none; padding: 0; }
  .page:has(> .card > .data-grid) { display: block; height: auto; min-height: 0; }
  .page > .card:has(> .data-grid), .page > .card > .data-grid { display: block; }
  .page > .card > .data-grid > .table-wrap { overflow: visible; height: auto; max-height: none; }
  .report-sheet { border: 0; box-shadow: none; border-radius: 0; padding: 0; }
  .report-title { border-bottom-color: #000; }
  .report-title h2 { font-size: 16pt; line-height: 1.2; }
  .annual-report .card { break-inside: avoid; }
  .annual-report .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annual-print-marker { border-width: 0 0 2px; border-radius: 0; color: var(--ink); }
  .only-print { display: block; }
  .contact-statements .table-wrap { overflow: visible; }
  .contact-ledger table { min-width: 0; width: 100%; table-layout: fixed; font-size: 8pt; }
  .contact-ledger th, .contact-ledger td { padding: 5px; white-space: normal; overflow-wrap: anywhere; }
  .data-table { font-size: 9pt; line-height: 1.35; }
  .data-table th, .data-table td { padding: 4px 6px; }
  .data-table th { background: none !important; color: #000; border-bottom: 1px solid #000; }
  .data-table td { border-bottom-color: #bbb; }
  .data-table tbody tr:hover td, .data-grid.grid-compact .data-grid-table tbody tr, .report-sheet .data-table td { background: none !important; }
  .report-group td { background: none; color: #000; }
  .report-total td, .total-row.grand { border-top-color: #000; }
  .report-sheet .data-table tbody tr.report-total:last-child td, .report-sheet .data-table tfoot tr.report-total:last-child td, .total-row.grand { border-bottom-color: #000; }
  .status-badge { box-shadow: inset 0 0 0 1px #999; }
  .data-grid { border: 0; }
  .data-grid > .table-wrap { border: 0; overflow: visible; }
  .data-grid-table { min-width: 0; }
  .data-grid-table thead, .data-grid-table thead th { position: static; }
  .data-grid-table tr.is-selected td { background: none; box-shadow: none; }
  .card { break-inside: avoid; box-shadow: none; }
  form.card-pad > .form-actions:last-child, .card-pad > form:last-child > .form-actions:last-child { position: static; margin-bottom: 0; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
}

/* 24. Invoice workspace (X02): searchable fields, result lists, quick dialogs -------------
   Additive rules only; Direction A tokens (docs/design-system.md §3–§5). */
.combo { position: relative; }
/* The keyboard hint of a searchable field is read by screen readers (aria-describedby); the
   open list shows the same choices visually, so the form keeps its dense rows. */
.combo-hint, .combo-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.combo-list { position: absolute; z-index: var(--z-popover); top: calc(100% + 2px); left: 0; min-width: 100%; width: max-content; max-width: min(640px, calc(100vw - 48px)); max-height: 320px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-2); scroll-padding: 4px 0; }
.contact-combo .combo-list { top: 54px; }
.combo-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 1px; align-items: center; min-height: 32px; padding: 5px 12px; color: var(--ink); font-size: var(--text-sm); line-height: var(--lh-sm); cursor: pointer; }
.combo-option:hover { background: var(--hover); }
.combo-option[aria-selected="true"] { background: var(--selection); box-shadow: inset 3px 0 var(--petrol-700); }
.combo-main { grid-column: 1; min-width: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.combo-code { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--ink-2); }
.combo-meta { grid-column: 1; min-width: 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); overflow-wrap: anywhere; }
.combo-side { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.combo-price { color: var(--ink); font-weight: var(--weight-semibold); }
.combo-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 6px; border-radius: var(--radius-xs); font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-semibold); background: var(--neutral-bg); color: var(--neutral-fg); }
.combo-badge.is-open { background: var(--info-bg); color: var(--info-fg); }
.combo-badge.is-overdue { background: var(--error-bg); color: var(--error-fg); }
.combo-action { border-top: 1px solid var(--line); }
.combo-action + .combo-action { border-top: 0; }
.combo-action .combo-main { color: var(--petrol-700); }
.combo-empty, .combo-more { padding: 6px 12px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); cursor: default; }
/* The line editor clips its rounded corners; an open result list must reach past it. */
.line-editor:has(.combo-list:not([hidden])) { overflow: visible; }
.line-row:has(.combo-list:not([hidden])) { position: relative; z-index: 3; }
.last-document { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: var(--text-xs); line-height: var(--lh-xs); }
.last-document:empty { display: none; }
.form-shortcuts { margin: 0 auto 0 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.address-warning { display: grid; gap: 4px; }
.address-warning-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copy-notice { display: block; margin-bottom: 12px; }
.copy-notice p { margin: 6px 0 0; }
.quick-dialog .notice { margin: 0 0 12px; }
.quick-dialog .form-grid { gap: 10px 16px; }
.duplicate-notice { margin: 0; }
.duplicate-notice p { margin: 6px 0 0; }
[data-quick-duplicates]:empty { display: none; }
.duplicate-list { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.duplicate-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.duplicate-list .duplicate-name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.duplicate-list small { grid-column: 1; color: inherit; }
.duplicate-list .btn { grid-column: 2; grid-row: 1 / span 2; }
@media (forced-colors: active) {
  .combo-option[aria-selected="true"] { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; }
  .combo-option[aria-selected="true"] * { color: inherit; }
  .combo-list { border-color: CanvasText; }
}
@media print {
  .combo-list, .combo-hint, .form-shortcuts, .last-document { display: none !important; }
}

/* S71 strukturierte-adressen: structured address fields of the contact form and the report
   «Adressqualität» (#adressen). Additive rules only. */
.contact-address-fieldset, .contact-bank-fieldset { min-width: 0; margin: 0; padding: 10px 14px 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.contact-address-fieldset legend, .contact-bank-fieldset legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.contact-address-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 12px; }
.contact-address-grid > .field { grid-column: span 6; margin: 0; }
.contact-address-grid > .contact-address-street { grid-column: span 9; }
.contact-address-grid > .contact-address-buildingNo { grid-column: span 3; }
.contact-address-grid > .contact-address-postalCode { grid-column: span 2; }
.contact-address-grid > .contact-address-town { grid-column: span 8; }
.contact-address-grid > .contact-address-country { grid-column: span 2; }
.contact-address-grid > .contact-address-poBox { grid-column: span 3; }
.contact-address-grid > .contact-address-careOf { grid-column: span 9; }
.contact-address-fieldset .field-help, .contact-bank-fieldset .field-help { margin: 6px 0 2px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.contact-address-fieldset .contact-house-hint { color: var(--warning-fg); }
.contact-address-proposal { margin: 0 0 10px; }
.contact-address-more { margin-top: 8px; }
.contact-address-more > summary { cursor: pointer; width: fit-content; padding: 2px 4px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--primary); }
.contact-address-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.contact-address-more[open] > summary { margin-bottom: 8px; }
.contact-address-detail span .btn { margin-left: 6px; }
.contact-proposal-confirm { display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 8px; font-weight: var(--weight-semibold); cursor: pointer; }
.contact-proposal-confirm input { width: 16px; height: 16px; margin: 0; }
.contact-proposal-confirm input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ad-root .ad-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ad-root .ad-stat { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.ad-root .ad-stat strong { display: block; font-size: 20px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ad-root .ad-stat span { color: var(--muted); font-size: var(--text-xs); }
.ad-root .ad-stat.ad-good strong { color: var(--success-fg); }
.ad-root .ad-stat.ad-bad { border-color: var(--error-line); background: var(--error-bg); }
.ad-root .ad-stat.ad-bad strong { color: var(--error-fg); }
.ad-root .ad-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 12px; padding: 10px 14px; }
.ad-root .ad-filter { display: grid; gap: 4px; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ad-root .ad-filter .input, .ad-root .ad-filter .select { width: auto; min-height: 34px; padding: 5px 10px; }
.ad-root .ad-profile { margin: 0 0 6px; color: var(--muted); font-size: var(--text-xs); }
.ad-root .ad-card { margin-bottom: 12px; }
.ad-root .ad-table td { vertical-align: top; }
.ad-root .ad-findings { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.ad-root .ad-findings li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--text-sm); }
.ad-root .ad-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--text-2xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.ad-root .ad-badge.ad-sperre { background: var(--error-bg); color: var(--error-fg); }
.ad-root .ad-badge.ad-warnung { background: var(--warning-bg); color: var(--warning-fg); }
.ad-root .ad-badge.ad-hinweis { background: var(--info-bg); color: var(--info-fg); }
.ad-root .ad-badge.ad-ok { background: var(--success-bg); color: var(--success-fg); }
.ad-root .ad-source { font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.ad-root .ad-source-strukturiert { color: var(--success-fg); }
.ad-root .ad-source-freitext, .ad-root .ad-source-leer { color: var(--warning-fg); }
.ad-root .ad-review { color: var(--warning-fg); font-weight: var(--weight-semibold); }
.ad-root .ad-legend ul { margin: 0 0 8px; padding-left: 18px; font-size: var(--text-sm); line-height: 1.5; }
.ad-root .ad-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print {
  .ad-root .ad-toolbar, .ad-root .ad-legend { display: none !important; }
}

/* 25. UI phase 2: markup follow-ups (docs/design-system.md, "Phase 2 umgesetzt") ---------
   Additive rules for the markup that app.js, data-grid.js and icons.js now render. Direction A
   tokens only; the text and boundary pairs are the ones checked in §2.1 / contrast-after. */

/* Utilities */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ui-icon { flex: 0 0 auto; vertical-align: -2px; }
.unit { margin-left: 2px; color: var(--muted); font-size: max(var(--text-2xs), .72em); font-weight: var(--weight-regular); letter-spacing: 0; }

/* Skip link and the main landmark (follow-up 10) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: var(--z-toast); padding: 8px 14px; border: 2px solid var(--focus); border-radius: var(--radius-sm); background: var(--paper); color: var(--petrol-800); font-weight: var(--weight-semibold); text-decoration: none; box-shadow: var(--shadow-2); }
.skip-link:focus { top: 8px; }
.page:focus { outline: 0; }

/* Sidebar footer and the 48 px rail (A2) */
.side-bottom { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-top: 1px solid var(--sidebar-rule); }
.side-bottom a { flex: 1 1 auto; min-width: 0; }
.side-bottom a:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.side-bottom a.active { background: var(--sidebar-active); color: var(--text-primary); font-weight: var(--weight-medium); }
.side-bottom a.active .nav-icon { color: var(--accent); }
.side-rail-toggle { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--sidebar-label); cursor: pointer; }
.side-rail-toggle:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.side-rail-toggle:focus-visible { outline-offset: -2px; }
.app-shell.is-rail { --sidebar-width: 48px; }
.is-rail .side-head { justify-content: center; padding: 3px 0; }
.is-rail .side-brand, .is-rail .org-button > :not(.org-monogram) { display: none; }
.is-rail .org-menu { flex: 0 0 auto; }
.is-rail .org-button { padding: 4px; }
.is-rail .org-button > .org-monogram { display: grid; }
.is-rail .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Rail: every section open (groupedNav), heads hidden (no toggle under 24 px), .side-nav scrolls. */
.is-rail .nav-group-label { display: none; }
.is-rail .nav-group + .nav-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--sidebar-rule); }
.is-rail .side-nav { padding: 8px 6px; }
.is-rail .side-nav a, .is-rail .side-bottom a { justify-content: center; padding: 8px 0; }
.is-rail .side-bottom { flex-direction: column; padding: 6px; }
.is-rail .side-bottom a { width: 100%; }
.is-rail .side-rail-toggle { margin: 0; }

/* Topbar chips; short of space (French first) only their icons, then Neu's (A2) */
.org-meta { display: inline-flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); white-space: nowrap; }
.context-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--ink-2); }
.context-chip + .context-chip { padding-left: 10px; border-left: 1px solid var(--line); }
.context-chip > .ui-icon { flex: 0 0 auto; color: var(--muted); }
.org-lock { font-weight: var(--weight-semibold); }
.top-context .demo-badge { flex-shrink: 0; }
.org-lock.is-open { color: var(--muted); font-weight: var(--weight-regular); }
.org-lock .ui-icon { color: var(--brass-700); }
.org-lock.is-open .ui-icon { color: var(--muted); }
.new-menu > .menu-button { min-height: var(--control); padding: 5px 12px; font-size: var(--text-sm); line-height: var(--lh-sm); }
/* Topbar collapse (impl-plan §2.4): the section crumb yields only beside chip text; chips, then «Neu» */
@container topbar (min-width: 1101px) and (max-width: 1240px) { :lang(de) .crumbs .crumb-section { display: none; } }
@container topbar (min-width: 1181px) and (max-width: 1240px) { :lang(fr) .crumbs .crumb-section { display: none; } }
@container topbar (max-width: 1180px) { :lang(fr) .context-chip > span { position: absolute; width: 1px; overflow: hidden; clip-path: inset(50%); } }
@container topbar (max-width: 1100px) { .context-chip > span { position: absolute; width: 1px; overflow: hidden; clip-path: inset(50%); } }
@container topbar (max-width: 800px) { .new-menu > .menu-button > span { position: absolute; width: 1px; overflow: hidden; clip-path: inset(50%); } }
.language-switch { display: inline-flex; }
.language-switch .btn { min-height: 26px; padding: 2px 9px; border-radius: 0; font-size: var(--text-xs); line-height: var(--lh-xs); }
.language-switch .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.language-switch .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.language-switch .btn + .btn { margin-left: -1px; }
.language-switch .btn.active, .language-switch .btn.btn-primary { position: relative; z-index: 1; background: var(--petrol-50); border-color: var(--petrol-200); color: var(--petrol-800); }
.language-switch .btn.active:hover { background: var(--petrol-100); color: var(--petrol-800); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; padding: 2px 10px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-sm); }
.user-menu > .menu-list { min-width: 264px; }
.menu-item > .ui-icon { color: var(--muted); }
.auth-page { position: relative; }
.auth-lang { position: absolute; top: 16px; right: 20px; z-index: 2; }

/* Menus: disclosure pattern (details.menu); row menus float with position: fixed (app.js). */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-button { gap: 6px; }
.menu[open] > .menu-button { background: var(--surface-2); border-color: var(--line-input); }
.menu-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: var(--z-popover); display: grid; gap: 1px; min-width: 200px; max-width: min(360px, calc(100vw - 24px)); padding: 4px; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-2); }
.menu-list-wide { width: 320px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 4px 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink); font: inherit; font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-regular); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.menu-item > svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--text-muted); }
.menu-item > kbd { margin-left: auto; padding-inline: 4px; }
.menu-item.is-danger > svg { color: currentColor; }
.menu-sep { height: 1px; margin: 4px -4px; background: var(--border-hairline); }
.menu-label { padding: 6px 8px 2px; color: var(--text-muted); font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-medium); }
.menu-item:hover { background: var(--hover); color: var(--ink); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item:disabled { background: transparent; color: var(--disabled-fg); cursor: not-allowed; }
.menu-item[aria-busy="true"] { cursor: progress; }
.menu-item.is-danger { color: var(--error-fg); }
.menu-item.is-danger:hover { background: var(--error-bg); }
.menu-entry { display: grid; }
.menu-reason { display: block; padding: 0 10px 6px 32px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); white-space: normal; }
.menu-note { margin: 4px 10px 6px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); white-space: normal; }
/* A menu in the page head (PDF herunterladen) must not take the page-head subtitle style. */
.menu-list .menu-note { max-width: none; margin: 4px 10px 6px; font-size: var(--text-xs); line-height: var(--lh-xs); }
.menu-meta { display: grid; gap: 1px; margin-bottom: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.menu-meta strong { color: var(--ink); font-size: var(--text-sm); line-height: var(--lh-sm); }
.menu-meta span { overflow-wrap: anywhere; }
.user-menu-button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 6px 2px 2px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-semibold); cursor: pointer; }
.user-menu-button:hover, .user-menu[open] > .user-menu-button { border-color: var(--line); background: var(--hover); }
.user-avatar { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 50%; background: var(--petrol-4); color: var(--petrol-11); font-size: var(--text-2xs); line-height: 1; font-weight: var(--weight-bold); }
.row-menu { display: inline-block; }
.row-menu-button.btn { min-width: 28px; min-height: 24px; padding: 0 4px; color: var(--ink-2); }
.row-menu .menu-list { min-width: 220px; }

/* Amounts (follow-ups 1, 2, 21, 22): minus sign U+2212, red only for negative, overdue or a
   difference; zero muted; incoming bank amounts green with "+". */
.is-negative, .data-table td.is-negative { color: var(--amount-negative); }
.data-table td.num.is-zero, .data-table td.is-empty { color: var(--muted); }
.data-table td.amount-overdue { color: var(--amount-negative); font-weight: var(--weight-semibold); }
.data-table td.amount-open { color: var(--ink); }
.data-table td.is-finding { color: var(--amount-negative); font-weight: var(--weight-semibold); }
.is-incoming, .data-table td.is-incoming { color: var(--amount-positive); }
.data-table td.is-prior { color: var(--muted); }
.data-table td.is-overdue-date { color: var(--error-fg); }
.doc-reference { margin-left: 6px; font-size: var(--text-xs); }
.data-table td.row-actions { width: 1%; padding-top: 2px; padding-bottom: 2px; white-space: nowrap; }
.data-table td > .row-actions-line { flex-wrap: nowrap; }
.data-table td > .row-actions-line > .btn.btn-small:not(.btn-primary):not(.btn-danger) { border-color: transparent; background: transparent; color: var(--petrol-700); }
.data-table td > .row-actions-line > .btn.btn-small:not(.btn-primary):not(.btn-danger):hover { border-color: var(--petrol-200); background: var(--petrol-50); color: var(--petrol-800); }
.data-table td:has(> .row-actions-line) { padding-top: 2px; padding-bottom: 2px; white-space: nowrap; }
.cell-clip { display: block; min-width: 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lists: status tabs and the grid search share one row (follow-up 8) */
.list-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.list-toolbar > .status-tabs { flex: 1 1 auto; min-width: 0; margin: 0 0 -1px; border-bottom: 0; }
.list-search { flex: 0 1 320px; min-width: 200px; padding-bottom: 6px; }
.list-search:empty { display: none; }
.list-search .grid-search.input { width: 100%; max-width: none; min-height: var(--control-sm); }

/* Data grid: Standard density, filter-row toggle, help popover, clipped cells (follow-up 7) */
.data-grid.grid-standard .data-grid-table td { padding: 7px 10px 6px; }
.data-grid.grid-standard .data-grid-table thead th { padding: 6px 10px; }
.data-grid.grid-standard .data-grid-table .grid-filter-row th { padding: 0 10px 6px; }
.data-grid.grid-standard .grid-sort { width: calc(100% + 20px); margin: -6px -10px; padding: 6px 10px; }
.data-grid.grid-standard .data-grid-table td:has(> .btn), .data-grid.grid-standard .data-grid-table td:has(> .status-badge) { padding-top: 3px; padding-bottom: 3px; }
.data-grid.grid-standard .data-grid-table td > .btn-small { min-height: 24px; padding-top: 2px; padding-bottom: 2px; }
.data-grid:is(.grid-compact, .grid-standard) .data-grid-table td.grid-clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-grid.grid-compact .data-grid-table td.row-actions { padding-top: 1px; padding-bottom: 1px; }
.grid-help { position: relative; padding-left: 0; }
.grid-help > summary { list-style: none; }
.grid-help > summary::-webkit-details-marker { display: none; }
.grid-help-button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); color: var(--ink-2); font-size: var(--text-xs); line-height: 1; font-weight: var(--weight-semibold); cursor: pointer; }
.grid-help-button:hover, .grid-help[open] > .grid-help-button { border-color: var(--line-input); background: var(--hover); }
.grid-help-text { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-popover); width: max-content; max-width: min(380px, 80vw); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-2); color: var(--ink-2); font-size: var(--text-xs); line-height: var(--lh-xs); }
.grid-help-text p { margin: 0; }
.grid-help-text p + p { margin-top: 4px; color: var(--muted); }
.data-grid-actions .grid-filter-toggle[aria-pressed="true"] { border-color: var(--petrol-200); background: var(--petrol-50); color: var(--petrol-800); }

/* Buchungsjournal (follow-up 3): one body per journal, Soll/Haben accounts, amount column */
.journal-table th { white-space: nowrap; }
.journal-table tbody.journal-entry td { border-bottom: 0; vertical-align: top; }
.journal-table tbody.journal-entry tr:last-child td, .journal-table tbody.journal-entry td[rowspan] { border-bottom: 1px solid var(--line); }
.journal-table tbody.journal-entry:last-child tr:last-child td, .journal-table tbody.journal-entry:last-child td[rowspan] { border-bottom: 0; }
.journal-table tbody.journal-entry tr + tr td { padding-top: 2px; }
.journal-table tbody.journal-entry:nth-of-type(even) td { background: var(--zebra); }
.journal-table tbody.journal-entry:hover td { background: var(--hover); }
.journal-table .journal-number, .journal-table .journal-date, .journal-table .journal-voucher, .journal-table .journal-source { white-space: nowrap; }
/* One fixed column grid, so the journal fits 1280 px: the accounts take 15 % each, Text the rest. */
.journal-table { table-layout: fixed; }
.journal-table th:nth-child(1) { width: 44px; }
.journal-table th:nth-child(2) { width: 84px; }
.journal-table th:nth-child(3) { width: 120px; }
.journal-table th:nth-child(5), .journal-table th:nth-child(6) { width: 15%; }
.journal-table th:nth-child(7) { width: 104px; }
.journal-table th:nth-child(8) { width: 92px; }
/* Action column: the widest label ("Extourne", 70 px) with 6 px padding on each side, so the
   button and its 2 px focus ring stay inside the card in German and French. */
.journal-table th:nth-child(9) { width: 84px; }
.journal-table td.row-actions { padding-inline: 6px; }
.journal-table .journal-text .cell-clip, .journal-table .journal-account .cell-clip { max-width: none; }
.journal-table .journal-voucher, .journal-table .journal-source { overflow: hidden; text-overflow: ellipsis; }
.journal-table .journal-source small { color: var(--muted); font-size: var(--text-2xs); line-height: var(--lh-2xs); }
.account-code { color: var(--ink-2); font-weight: var(--weight-semibold); }
.journal-compact .cell-clip { max-width: 420px; }

/* Manual journal: account type-ahead and the live control totals (follow-up 4) */
.journal-line-editor { overflow: visible; }
.line-row.journal-line-row { grid-template-columns: minmax(280px, 1fr) 150px 150px 32px; }
.journal-line-row .combo-list { min-width: 360px; }
/* Same column grid as .journal-line-row: the totals sit under the Soll and Haben fields. */
.journal-totals { display: grid; grid-template-columns: minmax(280px, 1fr) 150px 150px 32px; column-gap: 8px; align-items: start; padding: 8px 10px; border-top: 1px solid var(--line-strong); border-radius: 0 0 var(--radius) var(--radius); background: var(--surface-2); font-size: var(--text-sm); line-height: var(--lh-sm); }
.journal-totals-head { display: grid; justify-items: start; gap: 4px; }
.journal-totals-label { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.journal-totals-values { grid-column: 2 / 4; display: grid; grid-template-columns: 150px 150px; column-gap: 8px; row-gap: 4px; margin: 0; }
.journal-totals-values > div { display: grid; justify-items: end; padding-right: 8px; }
.journal-totals-values > .journal-difference { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding: 4px 8px 0 0; border-top: 1px solid var(--line-strong); }
.journal-totals dt { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-semibold); }
.journal-totals dd { margin: 0; color: var(--ink); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.journal-totals.is-unbalanced .journal-difference dd, .journal-totals.is-invalid .journal-difference dd { color: var(--amount-negative); }
.journal-totals-status { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 1px 6px; border-radius: var(--radius-xs); font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-semibold); }
.journal-totals-status:empty { min-height: 0; padding: 0; }
.journal-totals-status.is-balanced { background: var(--success-bg); color: var(--success-fg); }
.journal-totals-status.is-unbalanced, .journal-totals-status.is-invalid { background: var(--error-bg); color: var(--error-fg); }

/* Reports (follow-ups 5, 6, 21): one toolbar row, real tabs, Kontoform totals in <tfoot> */
.report-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.report-range { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 6px; }
.report-toolbar > .report-nav { flex: 0 1 auto; margin: 0 0 -1px; border-bottom: 0; }
.report-tools { display: flex; align-items: center; gap: 12px; margin: 0 16px 0 auto; font-size: var(--text-xs); line-height: var(--lh-xs); }
.report-tools .check-row { align-items: center; font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-semibold); }
.report-tools .check-row input { margin: 0; }
.report-sheet:focus-visible { outline-offset: 2px; }
.report-code { width: 72px; }
.statement-pair { align-items: start; }
/* One line per row (the name clips with its full text as tooltip), so the pad rows give both
   halves the same height and the <tfoot> totals share one line at every width and language. */
.statement-table { table-layout: auto; }
.statement-table th, .statement-table td { white-space: nowrap; }
.statement-table td { overflow: hidden; text-overflow: ellipsis; }
.statement-table td.statement-name { width: 100%; max-width: 0; }
.statement-table tbody tr { height: 32px; }
.statement-table .report-group td { padding-top: 7px; }
.report-subtotal td { border-top: 1px solid var(--ink-2); font-weight: var(--weight-bold); }
.report-pad td { border-bottom-color: transparent; background: transparent !important; }
.report-sheet .data-table tfoot td { background: transparent; }
.report-sheet .data-table tfoot tr.report-total td { border-bottom: 0; }
.report-sheet .data-table tfoot tr.report-total:last-child td { border-bottom: 3px double var(--ink); }
.report-sheet .totals .is-negative { color: var(--amount-negative); }

/* Payroll area: the former header buttons as tabs (follow-up 23) */
.payroll-tabs { margin-bottom: 12px; }

/* Worklist list view (follow-up 12) */
.segmented { display: inline-flex; }
.segmented .btn { gap: 6px; border-radius: 0; }
.segmented .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.segmented .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.segmented .btn + .btn { margin-left: -1px; }
.segmented .btn.is-active { position: relative; z-index: 1; border-color: var(--petrol-200); background: var(--petrol-50); color: var(--petrol-800); }
/* Fixed column grid: Beleg takes the remaining width and clips with its tooltip. */
.worklist-table { table-layout: fixed; }
.worklist-table th:nth-child(1) { width: 176px; }
.worklist-table th:nth-child(3) { width: 21%; }
.worklist-table th:nth-child(4) { width: 196px; }
.worklist-table th:nth-child(5) { width: 112px; }
.worklist-table th:nth-child(6) { width: 104px; }
.worklist-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worklist-table .worklist-subject .cell-clip { max-width: none; }
.worklist-table .worklist-subject .subtle { margin-left: 6px; font-size: var(--text-xs); }

/* Empty state inside a page section, one line and at most 120 px (follow-up 17) */
.empty-inline { display: flex; align-items: center; gap: 12px; padding: 12px var(--card-pad); text-align: left; }
.empty-inline .empty-icon { flex: 0 0 auto; margin: 0; }
.empty-inline .empty-text { min-width: 0; }
.empty-inline h3 { margin: 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.empty-inline p { max-width: none; margin: 0; }
.empty-inline .empty-action { margin-left: auto; flex: 0 0 auto; }
.page:has(> .page-head .btn-primary) .empty-inline .btn-primary { background: var(--paper); color: var(--petrol-700); border-color: var(--petrol-200); }

/* Field widths by content (follow-up 14) */
.input.w-date { max-width: 144px; }
.input.w-amount { max-width: 140px; }
.input.w-percent, .input.w-qty, .input.w-days { max-width: 96px; }
.input.w-code { max-width: 88px; }
.input.w-code-long { max-width: 240px; }
.input.w-iban { max-width: 300px; font-family: var(--font-mono); font-size: var(--text-sm); }
.line-row .input[class*="w-"] { max-width: none; }
.payroll-manual td:nth-child(2) .input { max-width: 170px; }

/* Sticky action bar by class, independent of the card structure (follow-up 24) */
.form-actions-sticky { position: sticky; bottom: 0; z-index: 1; padding: 10px 0; border-top: 1px solid var(--line); background: var(--paper); }
form.card-pad > .form-actions-sticky:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: var(--card-pad); }
.modal .form-actions-sticky { margin: 16px -20px -20px; padding: 10px 20px 20px; }

/* Bank list: one visible action and the overflow menu (follow-up 15) */
.bank-table td:last-child { width: 1%; }
.bank-table td small { white-space: nowrap; }


@media (forced-colors: active) {
  .menu-list, .grid-help-text { border-color: CanvasText; }
  .language-switch .btn.active, .segmented .btn.is-active, .data-grid-actions .grid-filter-toggle[aria-pressed="true"] { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; }
  .journal-totals-status:not(:empty) { border: 1px solid CanvasText; }
}

@media print {
  .skip-link, .side-bottom, .menu, .report-toolbar, .report-tools, .payroll-tabs, .list-toolbar, .segmented, .grid-help { display: none !important; }
  .form-actions-sticky { position: static; margin-bottom: 0; }
  .journal-table tbody.journal-entry td { background: none !important; }
  .cell-clip, .data-grid:is(.grid-compact, .grid-standard) .data-grid-table td.grid-clip { max-width: none; overflow: visible; white-space: normal; text-overflow: clip; }
  .report-pad { display: none; }
  .statement-table th, .statement-table td { white-space: normal; overflow: visible; text-overflow: clip; }
  .statement-table td.statement-name { width: auto; max-width: none; }
}

/* Integration round A (additive). Invoice detail: the notice after an invoice PDF or QR download
   (payment part omitted with its reason, or a demo notification) stays empty and hidden until then.
   Language switch: French is marked as a preview («Vorschau» / «Aperçu») until the specialist review. */
.invoice-output-notice:empty { display: none; }
.language-switch .language-preview { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: var(--radius-xs); background: var(--warning-bg); color: var(--warning-fg); font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-semibold); }
@media print { .invoice-output-notice { display: none !important; } }

/* Integration round B (additive). X04 Handelsregister (Zefix): the host slots around
   zefix-picker.js (which brings its own .zp-* styles). Empty slots take no room; the one-line
   address of the «Neuer Kunde» dialog keeps its grid cells when it is swapped for the structured
   fields after a take-over. */
.zefix-slot:empty, .zefix-results:empty, [data-zefix-reference]:empty { display: none; }
.quick-address { display: contents; }
.zefix-kind { min-width: 0; margin: 0; padding: 0; border: 0; }
.zefix-kind legend { padding: 0; margin-bottom: 4px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-2); }
.zefix-kind-options { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.zefix-kind-help { display: block; margin-top: 4px; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.zefix-notice { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.zefix-results .zp-status:empty { min-height: 0; margin: 0; }
.zefix-results .zp-fields th:first-child, .zefix-results .zp-fields td:first-child { width: 1%; white-space: nowrap; }
.zefix-results .zp-fields th:nth-child(2), .zefix-results .zp-fields td:nth-child(2) { width: 22%; }
.zefix-company-actions { display: flex; justify-content: flex-end; }
.zefix-company-panel { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.zefix-reference { margin-top: 8px; font-size: var(--text-sm); color: var(--ink-2); }
.zefix-reference-label { font-weight: var(--weight-semibold); }
.zefix-reference small { color: var(--muted); font-size: var(--text-xs); }
.zefix-contact-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.zefix-contact-detail:empty { display: none; }
.zefix-settings-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 8px 0; }
.zefix-taken a, .zefix-reference a { color: inherit; text-decoration: underline; }
@media print { .zefix-slot, .zefix-results, .zefix-company-panel, .zefix-contact-detail [data-action] { display: none !important; } }

/* Vorschau (additive, owner request 24.09.2026): app/public/preview.js. One modal layer (no
   stacked dialogs) with the document on the preview desk: a PDF in the browser's own viewer
   (blob: iframe) or an image, the actions Herunterladen / Drucken / In neuem Tab öffnen /
   Schliessen and the notices the page shows for the document. Tokens only, simple markup. */
.doc-preview { width: min(1180px, calc(100vw - 48px)); height: calc(100vh - 48px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); color: var(--ink); background: var(--paper); box-shadow: var(--shadow-3); overflow: hidden; }
.doc-preview[open] { display: flex; flex-direction: column; }
.doc-preview::backdrop { background: var(--backdrop); }
.doc-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 56px; padding: 10px 16px 10px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.doc-preview-heading { min-width: 0; }
.doc-preview-heading h2 { margin: 0; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); }
.doc-preview-file { margin: 2px 0 0; color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-xs); overflow-wrap: anywhere; }
.doc-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-preview-notices { display: grid; gap: 8px; padding: 12px 20px 0; }
.doc-preview-notices:empty { display: none; }
.doc-preview-notices .notice { margin: 0; }
.doc-preview-status { margin: 0; padding: 8px 20px 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.doc-preview-status:empty { display: none; }
.doc-preview-body { flex: 1 1 auto; min-height: 0; margin: 12px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-3); overflow: hidden; }
.doc-preview-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--surface-3); }
.doc-preview-image { display: grid; place-items: center; height: 100%; padding: 16px; overflow: auto; }
.doc-preview-image img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--paper); box-shadow: var(--shadow-1); }
.doc-preview-state { display: grid; place-content: center; justify-items: center; gap: 12px; height: 100%; padding: 24px; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-align: center; }
.doc-preview-state p { max-width: 560px; margin: 0; }
.doc-preview-state .form-error { margin: 0; text-align: left; }
.doc-preview-print-frame { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.doc-preview-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media print { .doc-preview { display: none !important; } }

/* Client step C1 (docs/client-schritt-c1.md), additive: bank file of the CSV import (L37), the
   override of a repeated file, the Kontoblatt filter of the Hauptbuch, the shared demo login. */
.bank-file-note { margin-top: 8px; display: grid; gap: 4px; justify-items: start; }
.bank-file-note p { margin: 0; }
.bank-file-facts .hash-value { font-size: var(--text-xs); }
.bank-file-warning, .bank-file-facts { margin: 0 12px 10px; }
.bank-duplicate { margin: 0 12px 12px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); display: grid; gap: 8px; }
.bank-duplicate legend { padding: 0 4px; font-weight: var(--weight-semibold); color: var(--ink); }
.bank-duplicate .form-actions { margin: 0; }
.report-account-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 10px; }
[data-report-account-heading]:focus-visible, [data-bank-preview-heading]:focus-visible { outline: 2px solid var(--petrol-600); outline-offset: 2px; }
.bank-file-encoding { margin: 8px 0 0; }
.shared-demo-note { margin: 0 16px 12px; }