/**
 * Novos Design System
 * Single source of truth for all design tokens: light ground, navy and teal, Figtree.
 * Values: designs/2026-10-14-pilot-invoicing/HANDOFF.md ("Design tokens").
 * Spec: product/specs/2026-09-pilot-invoice-and-ui-update/v1-pilot-invoice-and-ui-update.md
 *
 * Usage in custom CSS:   color: var(--color-ink);
 * Tailwind config:       app/templates/_head_assets.html maps its colour names to these tokens.
 *
 * Rule: amber means "needs checking" and nothing else. Payment states use neutral and teal.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   FONTS — served from our own server (no request to Google, DSGVO).
   Figtree and IBM Plex Mono, OFL-1.1, from the @fontsource packages (latin subset).
   ───────────────────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/figtree-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* --- Colour: surfaces --- */
  --color-ground: #F2F5F3;      /* page background                                   */
  --color-panel: #FFFFFF;       /* cards, header, peek header and footer, the sheet  */
  --color-pale: #EAF0EE;        /* hover rows, segmented control track               */
  --color-desk: #E8EEEC;        /* peek body behind the sheet                        */
  --color-edit: #F1F7F6;        /* editable field fill, row while its page is open   */

  /* --- Colour: text and lines --- */
  --color-navy: #0E3538;        /* headings, amounts, primary buttons, toast         */
  --color-navy-hover: #1A5357;  /* primary button hover                              */
  --color-ink: #12302F;         /* body text                                         */
  --color-grey: #5B6E6C;        /* secondary text                                    */
  --color-grey-2: #8AA09D;      /* chevrons, dashed borders                          */
  --color-line: #DCE5E2;        /* borders, dividers                                 */
  --color-sheet-rule: #C9D4D1;  /* table header rule on the invoice sheet            */
  --color-sheet-row: #E6ECEA;   /* row lines on the invoice sheet                    */

  /* --- Colour: teal (done, confirmed, links, focus) --- */
  --color-teal: #2F8F8A;        /* active tab underline, editable underline          */
  --color-teal-deep: #23736F;   /* links, done states, Bezahlt chip, focus outline   */
  --color-teal-soft: #DDECE9;   /* positive chips, confirmed states                  */
  --color-teal-ring: #BFDCD7;   /* ring of the partly-paid chip                      */
  --color-toast-muted: #B9CFCB; /* secondary text on the navy toast                  */

  /* --- Colour: amber ("needs checking", nothing else) --- */
  --color-amber-bg: #F4EBDD;    /* Entwurf chip, open-point badges                   */
  --color-amber-tint: #FBF4E6;  /* points strip, highlighted row                     */
  --color-amber-line: #E9DCC4;  /* points strip border and dividers                  */
  --color-amber-fg: #7A5C26;    /* text and pins for "needs checking"                */

  /* --- Colour: errors --- */
  --color-brick: #9A3B2A;       /* errors, "remove" hover, discard confirm           */
  --color-brick-tint: #F7E9E5;  /* light fill behind an invalid field               */

  /* --- Typography --- */
  --font-sans: 'Figtree', 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* --- Shape --- */
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-toast: 14px;
  --radius-strip: 14px;
  --radius-sheet: 2px;
  --control-h: 44px;
  --control-h-sm: 36px;

  /* --- Depth --- */
  --shadow-sheet: 0 1px 2px rgba(14, 53, 56, .08), 0 30px 60px -32px rgba(14, 53, 56, .42);
  --shadow-peek: -24px 0 60px -24px rgba(14, 53, 56, .35);
  --shadow-toast: 0 18px 40px -16px rgba(10, 34, 36, .6);
  --shadow-hover: 0 10px 30px -18px rgba(14, 53, 56, .35);

  /* --- Motion --- */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --duration-base: 200ms;
  --ease-out: ease-out;

  /* --- Z-index scale --- */
  --z-sticky:  40;
  --z-overlay: 50;
  --z-toast:   60;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font-family: inherit; }
input { caret-color: var(--color-teal-deep); }
::selection { background: var(--color-teal-soft); color: var(--color-navy); }
:focus-visible { outline: 2px solid var(--color-teal-deep); outline-offset: 2px; }

/* VV numbers and the Aktenzeichen only. */
code, pre, .mono, .font-mono { font-family: var(--font-mono); }

@keyframes ds-toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes ds-drop-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   APP HEADER
   ───────────────────────────────────────────────────────────────────────────── */
.app-header { background: var(--color-panel); border-bottom: 1px solid var(--color-line); }
.app-header-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 64px;
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--color-navy); text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--color-navy); color: #fff;
  display: grid; place-items: center; font-size: 14px;
}
.app-nav { display: flex; gap: 2px; height: 100%; }
a.navlink {
  display: flex; align-items: center; padding: 0 12px; height: 100%;
  color: var(--color-grey); font-size: 14px; font-weight: 500; text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
}
a.navlink:hover { color: var(--color-navy); }
a.navlink[aria-current="page"] { color: var(--color-navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-teal); }
.app-header-end { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-grey); white-space: nowrap; }
.firm-pill select { appearance: none; background: none; border: 0; padding: 0 18px 0 0; font: inherit; color: inherit; cursor: pointer; }
.avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--color-line);
  background: var(--color-teal-soft); color: var(--color-teal-deep); font-size: 13px; font-weight: 600; cursor: pointer;
}
.avatar-wrap { position: relative; }
.avatar-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 6px;
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: 14px;
  box-shadow: var(--shadow-hover); z-index: var(--z-overlay); animation: ds-drop-in .2s ease-out;
}
.avatar-menu a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--color-ink); font-size: 14px; text-decoration: none;
}
.avatar-menu a:hover { background: var(--color-pale); color: var(--color-navy); }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.page { max-width: 1240px; width: 100%; margin: 0 auto; padding: 32px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.page-title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--color-navy); }
.page-sub { margin: 0; font-size: 15px; color: var(--color-grey); overflow-wrap: anywhere; }
.card { background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 24px; }

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS AND LINKS
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h); padding: 0 20px; border-radius: var(--radius-pill);
  border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.btn-sm { height: var(--control-h-sm); padding: 0 14px; font-size: 13px; }
.btn-navy { background: var(--color-navy); color: #fff; }
.btn-navy:hover { background: var(--color-navy-hover); }
.btn-navy:disabled { background: var(--color-pale); color: var(--color-grey); border-color: var(--color-line); cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--color-navy); border-color: var(--color-line); }
.btn-ghost:hover { border-color: var(--color-teal); color: var(--color-teal-deep); }
.btn-ghost:disabled { opacity: .45; cursor: default; }
.btn-ghost:disabled:hover { border-color: var(--color-line); color: var(--color-navy); }
.btn-ghost[aria-pressed="true"] { border-color: var(--color-teal); color: var(--color-teal-deep); background: var(--color-edit); }
.btn-ok { background: var(--color-teal-soft); color: var(--color-teal-deep); border-color: transparent; }
.btn-danger { background: var(--color-brick); color: #fff; }
.link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--color-teal-deep); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.link:hover { color: var(--color-navy); }
.link.mono { font-family: var(--font-mono); }
.quiet {
  background: none; border: 0; padding: 12px 4px; margin: -12px -4px; font: inherit; font-size: 13px;
  color: var(--color-grey); cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 3px;
}
.quiet:hover { color: var(--color-navy); text-decoration-color: currentColor; }

@media (max-width: 640px) {
  .btn-sm { height: var(--control-h); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHIPS
   ───────────────────────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.chip-sm { padding: 4px 9px; font-size: 11.5px; }
.chip-draft { background: var(--color-amber-bg); color: var(--color-amber-fg); }
.chip-final { background: var(--color-teal-soft); color: var(--color-teal-deep); }
.chip-open { background: var(--color-panel); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line); }
.chip-paid { background: var(--color-teal-deep); color: #fff; }
.chip-part { color: var(--color-teal-deep); box-shadow: inset 0 0 0 1px var(--color-teal-ring); }
.chip-edit { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-amber-bg); color: var(--color-amber-fg); white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   TABS
   ───────────────────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 12px 16px; min-height: 46px;
  font-size: 15px; font-weight: 500; color: var(--color-grey); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.tab:hover { color: var(--color-navy); }
.tab[aria-selected="true"] { color: var(--color-navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-teal); }

/* ─────────────────────────────────────────────────────────────────────────────
   FORM FIELDS
   ───────────────────────────────────────────────────────────────────────────── */
.field-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-ink); }
.field-input {
  width: 100%; height: var(--control-h); padding: 0 14px; border-radius: 10px;
  background: var(--color-panel); border: 1px solid var(--color-line); color: var(--color-ink); font-size: 15px;
}
.field-input::placeholder { color: var(--color-grey-2); }
.field-input:hover { border-color: var(--color-grey-2); }
.field-input:focus { outline: none; border-color: var(--color-teal); box-shadow: 0 0 0 3px var(--color-teal-soft); }
.field-input[aria-invalid="true"] { border-color: var(--color-brick); background: var(--color-brick-tint); }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--color-grey); }

/* ─────────────────────────────────────────────────────────────────────────────
   FLASH MESSAGES (templates/_flash.html). Errors in brick, success in teal, the rest neutral.
   Never amber: amber means "needs checking".
   ───────────────────────────────────────────────────────────────────────────── */
.flash-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flash-list:empty { display: none; }
.flash { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; border: 1px solid transparent; }
.flash-danger { background: var(--color-brick-tint); color: var(--color-brick); border-color: var(--color-brick); }
.flash-success { background: var(--color-teal-soft); color: var(--color-teal-deep); }
.flash-info { background: var(--color-pale); color: var(--color-ink); }

/* ─────────────────────────────────────────────────────────────────────────────
   SIGN-IN AND ACCOUNT PAGES (login, 2FA, password reset, account security)
   ───────────────────────────────────────────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-head { text-align: center; margin-bottom: 28px; }
.brand-mark-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; font-weight: 700; margin: 0 auto 16px; }
.auth-title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--color-navy); }
.auth-sub { margin: 6px 0 0; font-size: 15px; color: var(--color-grey); }
.auth-eyebrow { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--color-navy); }
.auth-text { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--color-grey); }
.auth-foot { margin-top: 20px; text-align: center; font-size: 13px; color: var(--color-grey); }
.auth-foot a { color: var(--color-grey); }
.auth-foot a:hover { color: var(--color-navy); }
.auth-shell-in-app { min-height: auto; }
.auth-ok { color: var(--color-teal-deep); font-weight: 600; }
.code-chip { display: inline-block; padding: 4px 8px; border-radius: 8px; background: var(--color-pale); color: var(--color-ink); font-family: var(--font-mono); font-size: 13px; }
.legal-text { font-size: 15px; line-height: 1.6; color: var(--color-ink); }
.legal-text h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: var(--color-navy); }
.legal-text p { margin: 0 0 16px; }
.legal-text p:last-child { margin-bottom: 0; }
.legal-text strong { color: var(--color-navy); }
.legal-text a { color: var(--color-teal-deep); text-underline-offset: 3px; }
.legal-text a:hover { color: var(--color-navy); }
.link-quiet { font-size: 13px; color: var(--color-grey); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 3px; }
.link-quiet:hover { color: var(--color-navy); text-decoration-color: currentColor; }

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES AND ADMIN
   ───────────────────────────────────────────────────────────────────────────── */
.table-head { padding: 12px 20px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--color-grey); white-space: nowrap; }
.table-cell { padding: 12px 20px; font-size: 14px; color: var(--color-ink); }
.admin-popover {
  position: absolute; right: 0; margin-top: 8px; width: 20rem; padding: 20px; z-index: 10;
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-hover);
}
.api-docs { --tw-prose-body: var(--color-ink); --tw-prose-headings: var(--color-navy); --tw-prose-links: var(--color-teal-deep);
  --tw-prose-code: var(--color-navy); --tw-prose-bold: var(--color-navy); --tw-prose-th-borders: var(--color-line); --tw-prose-td-borders: var(--color-line); }

/* ─────────────────────────────────────────────────────────────────────────────
   MANDATE PAGE (frontend/mandate_view.js): drop zone and the Mandate list
   ───────────────────────────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 4px; }
.page-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 0; }
.dropzone {
  min-height: 360px; border-radius: var(--radius-card); border: 1.5px dashed var(--color-grey-2); background: var(--color-panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 44px 24px; text-align: center; transition: background .15s, border-color .15s;
}
.dropzone-over { border-color: var(--color-teal); background: var(--color-edit); }
.pdf-tile {
  width: 60px; height: 72px; border-radius: 10px; border: 1px solid var(--color-line); background: var(--color-panel);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--color-grey); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.dropzone-over .pdf-tile { border-color: var(--color-teal); color: var(--color-teal-deep); transform: translateY(-6px); }
.dropzone-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-navy); }
.dropzone-body { margin: 0 0 8px; max-width: 500px; font-size: 15px; line-height: 1.55; color: var(--color-grey); text-wrap: pretty; }
.dropzone-hint { margin: 0; font-size: 13px; color: var(--color-grey); }
.dropzone-error { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-brick); }
.dropzone-note { margin: 8px 0 0; max-width: 440px; padding-top: 16px; border-top: 1px solid var(--color-line); font-size: 13px; line-height: 1.5; color: var(--color-grey); }
.mandate-card { padding: 0; overflow-x: auto; }
.mandate-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mandate-table th { padding: 12px 22px; border-bottom: 1px solid var(--color-line); text-align: left; font-size: 12px; font-weight: 600; color: var(--color-grey); }
.mandate-table td { padding: 18px 22px; color: var(--color-ink); overflow-wrap: anywhere; }
.mandate-table tbody tr + tr td { border-top: 1px solid var(--color-line); }
.mandate-table tbody tr { position: relative; cursor: pointer; }
.mandate-table tbody tr:hover { background: var(--color-pale); }
/* The Akte link covers its whole row: one real link, so keyboard and "open in new tab" still work. */
.mandate-table tbody tr a::after { content: ''; position: absolute; inset: 0; }
.mandate-table .mandate-amount { text-align: right; white-space: nowrap; }
.mandate-table td.mandate-amount { font-weight: 700; color: var(--color-navy); }
.mandate-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mandate-hint { font-size: 13px; font-weight: 600; color: var(--color-amber-fg); }
.chip-pending { background: var(--color-pale); color: var(--color-grey); }
.chip-failed { background: var(--color-panel); color: var(--color-brick); box-shadow: inset 0 0 0 1px var(--color-brick); }

/* ─────────────────────────────────────────────────────────────────────────────
   ANALYSIS (frontend/analysis_view.js): the five-step card, cancel confirm, ready banner
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ds-spin { to { transform: rotate(360deg); } }
.run-card { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.run-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.run-head { display: flex; flex-direction: column; gap: 2px; }
.run-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-navy); }
.run-time { font-size: 14px; color: var(--color-grey); }
.run-file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--color-pale); }
.pdf-tile-sm { width: 32px; height: 40px; border-radius: 6px; padding-bottom: 5px; margin: 0; font-size: 10px; }
.run-file-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.run-file-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.run-file-line { font-size: 13px; color: var(--color-grey); }
.run-error { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-brick); }
.run-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.run-actions .quiet { font-size: 14px; }
.run-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; }
.step-row + .step-row { border-top: 1px solid var(--color-line); }
.step-icon { display: grid; place-items: center; height: 22px; }
.step-done { width: 18px; height: 18px; border-radius: 50%; background: var(--color-teal-deep); display: grid; place-items: center; }
.step-open { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--color-grey-2); }
.step-failed { width: 18px; height: 18px; border-radius: 50%; background: var(--color-brick); color: white; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-line); border-top-color: var(--color-teal-deep); animation: ds-spin .8s linear infinite; }
.step-label { font-size: 15px; font-weight: 500; color: var(--color-ink); }
.step-laeuft .step-label, .step-fehler .step-label { font-weight: 600; color: var(--color-navy); }
.step-offen .step-label { color: var(--color-grey); }
.step-detail { font-size: 13px; color: var(--color-grey); padding-top: 2px; text-align: right; }
.inline-confirm {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px;
  background: var(--color-amber-bg); color: var(--color-amber-fg); font-size: 15px; animation: ds-drop-in .2s ease-out;
}
.inline-confirm-text { font-weight: 600; flex: 1 1 260px; }
.inline-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ready-banner {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--radius-card);
  background: var(--color-teal-soft); color: var(--color-navy); animation: ds-drop-in .3s ease-out;
}
.ready-icon .step-done { width: 28px; height: 28px; }
.ready-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.ready-title { font-size: 16px; font-weight: 700; }
.ready-body { font-size: 14px; color: var(--color-teal-deep); }
.upload-card { display: flex; flex-direction: column; gap: 12px; }
.upload-bar { height: 8px; border-radius: 999px; background: var(--color-line); overflow: hidden; }
.upload-bar-fill { height: 100%; background: var(--color-teal-deep); transition: width .2s ease-out; }
.upload-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--color-grey); }
.upload-percent { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-navy); }
.upload-note { margin: 0; font-size: 13px; color: var(--color-grey); }
@media (max-width: 900px) { .run-card { grid-template-columns: minmax(0, 1fr); } }

/* ─────────────────────────────────────────────────────────────────────────────
   AKTE PAGE (frontend/akte_view.js): entries, Aktendaten, Verlauf
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ds-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-peek-in { from { transform: translateX(56px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ds-src-in { from { transform: translateX(40px); opacity: 0; clip-path: inset(0 0 0 30%); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } }
.back-link { align-self: flex-start; font-size: 14px; }
.tab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-amber-bg); color: var(--color-amber-fg); font-size: 11.5px; font-weight: 600; }
.entries { display: flex; flex-direction: column; gap: 12px; max-width: 880px; }
.entry {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 20px; gap: 4px 22px; align-items: center; width: 100%;
  padding: 18px 22px 18px 18px; border-radius: var(--radius-card); border: 1px solid var(--color-line); background: var(--color-panel);
  text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s;
  animation: ds-rise .35s var(--ease-out-expo) both;
}
.entry:hover { border-color: var(--color-teal); box-shadow: 0 12px 28px -22px rgba(14, 53, 56, .5); }
.entry:hover .e-go { color: var(--color-teal-deep); transform: translateX(2px); }
.entry[aria-expanded="true"] { border-color: var(--color-teal); box-shadow: 0 0 0 1px var(--color-teal); }
.entry-pending { cursor: default; border-style: dashed; background: transparent; }
.entry-pending:hover { border-color: var(--color-line); box-shadow: none; }
.thumb { position: relative; display: flex; flex-direction: column; gap: 4px; width: 64px; height: 82px; padding: 10px 9px; border-radius: 5px; border: 1px solid var(--color-line); background: white; box-shadow: 0 6px 14px -10px rgba(14, 53, 56, .35); }
.tl { display: block; height: 3px; border-radius: 2px; background: var(--color-line); }
.tl-head { height: 5px; width: 46%; background: var(--color-sheet-rule); margin-bottom: 5px; }
.tl-total { margin-top: auto; align-self: flex-end; width: 44%; height: 4px; background: var(--color-navy); }
.thumb-tag { position: absolute; top: -1px; right: -1px; width: 16px; height: 16px; border-radius: 0 5px 0 6px; background: var(--color-amber-bg); border-left: 1px solid var(--color-amber-line); border-bottom: 1px solid var(--color-amber-line); }
.thumb-ok { position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-teal-deep); border: 2px solid var(--color-ground); display: grid; place-items: center; }
.thumb-ghost { opacity: .55; }
.thumb-ghost .tl { background: var(--color-pale); }
.e-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.e-title { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 17px; font-weight: 700; color: var(--color-navy); letter-spacing: -0.01em; }
.e-meta { font-size: 13.5px; color: var(--color-grey); line-height: 1.45; }
.e-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.e-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-flag-amber { color: var(--color-amber-fg); }
.e-flag-teal { color: var(--color-teal-deep); }
.e-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.e-amt .amt { font-size: 20px; font-weight: 700; color: var(--color-navy); letter-spacing: -0.01em; white-space: nowrap; }
.e-amt .amt-sub { font-size: 12.5px; color: var(--color-grey); white-space: nowrap; }
.e-go { color: var(--color-grey-2); transition: color .18s, transform .18s; }
.nr-hint { font-size: 12.5px; font-weight: 500; color: var(--color-grey); }
.bar-track { height: 4px; border-radius: 2px; background: var(--color-pale); overflow: hidden; }
.bar-fill { height: 100%; background: var(--color-teal); border-radius: 2px; transition: width .2s linear; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border-radius: var(--radius-card); border: 1.5px dashed var(--color-grey-2); background: var(--color-panel); max-width: 880px; }
.empty h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-navy); }
.empty p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-grey); max-width: 60ch; }
.akte-card { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.akte-card h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-navy); }
.akte-card-intro { margin: 2px 0 0; font-size: 14px; color: var(--color-grey); }
.kv { display: grid; grid-template-columns: minmax(88px, 112px) minmax(0, 1fr) auto; gap: 10px 12px; font-size: 14px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--color-line); }
.kv dt { color: var(--color-grey); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.verlauf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; align-items: start; }
.verlauf h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-navy); }
.run-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; font-size: 14px; }
.ev + .ev { border-top: 1px solid var(--color-line); }
.ev time { font-size: 13px; color: var(--color-grey); }
.src {
  background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--color-teal-deep); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; padding: 12px 6px; margin: -12px -6px;
}
.src:hover { color: var(--color-navy); }
.src[aria-pressed="true"] { color: var(--color-navy); text-decoration-thickness: 2px; }

/* ─────────────────────────────────────────────────────────────────────────────
   PEEK (frontend/peek_view.js): side peek, points strip, invoice sheet, page panel
   ───────────────────────────────────────────────────────────────────────────── */
:root { --pw: min(840px, calc(100vw - 96px)); }
.scrim { position: fixed; inset: 0; z-index: 39; background: rgba(10, 34, 36, .34); animation: ds-fade .2s ease-out; }
.peek {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--pw); z-index: 40; display: flex; flex-direction: column;
  background: var(--color-ground); border-left: 1px solid var(--color-line); box-shadow: -40px 0 80px -48px rgba(10, 34, 36, .55);
  animation: ds-peek-in .3s var(--ease-out-expo);
}
.peek-hd { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 20px 14px 24px; background: var(--color-panel); border-bottom: 1px solid var(--color-line); }
.peek-title-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 220px; }
.peek-title-row { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.peek-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-navy); }
.peek-akte { font-size: 13.5px; color: var(--color-grey); overflow-wrap: anywhere; }
.peek-body { flex: 1; overflow: auto; background: var(--color-desk); padding: 20px 24px 28px; scrollbar-width: thin; scrollbar-color: var(--color-line) transparent; }
.peek-ft { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; padding: 14px 20px 14px 24px; background: var(--color-panel); border-top: 1px solid var(--color-line); }
.ft-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.ft-amount { display: flex; align-items: baseline; gap: 8px; color: var(--color-navy); }
.ft-amount small { font-size: 13px; color: var(--color-grey); }
.ft-amount strong { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ft-status { font-size: 13px; font-weight: 600; }
.ft-status-amber { color: var(--color-amber-fg); }
.ft-status-teal { color: var(--color-teal-deep); }
.ft-question { font-size: 15px; font-weight: 600; color: var(--color-navy); }
.ft-actions { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; justify-content: flex-end; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--color-pale); border: 1px solid var(--color-line); }
.seg button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-size: 13.5px; font-weight: 600; color: var(--color-grey); cursor: pointer; }
.seg button[aria-pressed="true"] { background: white; color: var(--color-navy); box-shadow: 0 1px 3px rgba(14, 53, 56, .14); }
.close-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: white; color: var(--color-navy); cursor: pointer; }
.close-btn:hover { border-color: var(--color-teal); color: var(--color-teal-deep); }
.pin { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; background: var(--color-amber-fg); color: white; flex-shrink: 0; }
.pin.ok { background: var(--color-teal-deep); }
button.pin { cursor: pointer; }
button.pin::before { content: ""; position: absolute; inset: -12px; }
button.pin:hover { box-shadow: 0 0 0 3px var(--color-amber-bg); }
.strip { display: flex; flex-direction: column; padding: 10px 14px 2px; border-radius: var(--radius-strip); border: 1px solid var(--color-amber-line); background: var(--color-amber-tint); animation: ds-drop-in .2s ease-out; }
.strip-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 2px; }
.strip-hd h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-amber-fg); }
.strip-hd span { font-size: 13px; color: var(--color-amber-fg); }
.strip ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.q { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 8px; margin: 0 -8px; border-radius: 10px; transition: background .2s, box-shadow .2s; outline: none; }
.q + .q { border-top: 1px solid var(--color-amber-line); }
.q-where { font-size: 12px; font-weight: 600; color: var(--color-amber-fg); }
.q-text { font-size: 14px; line-height: 1.4; color: var(--color-ink); max-width: 62ch; }
.q-ok { font-size: 14px; font-weight: 600; color: var(--color-teal-deep); }
.q-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.q.hl { background: white; box-shadow: 0 0 0 1.5px var(--color-amber-fg); }
.q:focus-visible { box-shadow: 0 0 0 2px var(--color-teal-deep); }
.strip-ok { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--radius-strip); background: var(--color-teal-soft); color: var(--color-teal-deep); font-size: 14px; font-weight: 600; animation: ds-drop-in .2s ease-out; }
.preview-note { padding: 12px 16px; border-radius: var(--radius-strip); background: var(--color-amber-tint); border: 1px solid var(--color-amber-line); color: var(--color-amber-fg); font-size: 14px; animation: ds-drop-in .2s ease-out; }
.sheet {
  position: relative; min-height: calc(760px * 297 / 210); background: white; border: 1px solid #D5DFDC; border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet); padding: 52px 60px 26px; font-size: 13.5px; line-height: 1.45; color: #1c2b2a;
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
}
.stamp { position: absolute; top: 16px; right: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--color-amber-fg); color: var(--color-amber-fg); background: white; }
.lh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--color-sheet-rule); }
.lh-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-navy); }
.lh-sub { font-size: 12px; color: var(--color-grey); }
.lh-logo { display: block; max-width: 160px; max-height: 56px; width: auto; height: auto; object-fit: contain; margin-bottom: 6px; }
/* A value the firm has not typed yet: a link to the settings, amber because it needs checking. */
.kz-missing { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-amber-bg); color: var(--color-amber-fg); text-decoration: none; }
.kz-missing:hover { text-decoration: underline; }
.lh-contact { display: flex; flex-direction: column; align-items: flex-end; font-size: 11.5px; line-height: 1.5; color: var(--color-grey); text-align: right; }
.sh-addr { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; padding-top: 6px; }
.win { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.win-back { font-size: 9.5px; color: var(--color-grey); text-decoration: underline; text-decoration-color: var(--color-sheet-rule); text-underline-offset: 2px; margin-bottom: 8px; }
.sh-meta { display: grid; grid-template-columns: auto auto; gap: 1px 14px; font-size: 12px; color: var(--color-grey); }
.sh-meta span:nth-child(even) { color: var(--color-ink); text-align: right; }
.sh-subject { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.sh-subject strong { font-weight: 700; font-size: 16px; color: var(--color-navy); }
.sh-subject span { color: var(--color-grey); }
.sh-text { color: #33403f; }
.sh-intro { color: #33403f; line-height: 2.1; }
.inline-field {
  width: 112px; height: 30px; padding: 0 8px; border: 0; border-bottom: 2px solid var(--color-teal); border-radius: 4px 4px 0 0;
  background: var(--color-edit); font: inherit; font-weight: 600; text-align: right; color: var(--color-navy);
}
.inline-field[aria-invalid="true"] { border-bottom-color: var(--color-brick); background: var(--color-brick-tint); }
.field-error { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-brick); }
.txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
/* A text of the invoice the lawyer can change: the same green line as the other fields on the sheet. */
.text-field {
  width: 100%; padding: 4px 8px; border: 0; border-bottom: 2px solid var(--color-teal); border-radius: 4px 4px 0 0;
  background: var(--color-edit); font: inherit; line-height: 1.5; color: inherit; resize: none; field-sizing: content;
}
.text-field:focus { outline: none; box-shadow: 0 0 0 3px var(--color-teal-soft); }
.text-field[aria-invalid="true"] { border-bottom-color: var(--color-brick); background: var(--color-brick-tint); }
.sh-base { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-teal-deep); }
.fee { display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 92px 28px; gap: 2px 10px; align-items: center; }
.fee-h { padding: 0 0 6px; border-bottom: 1px solid var(--color-sheet-rule); font-size: 11.5px; font-weight: 600; color: var(--color-grey); }
.fee-r { padding: 9px 10px; margin: 0 -10px; border-bottom: 1px solid var(--color-sheet-row); border-radius: 8px; transition: background .2s; }
.fee-r.hl-amber { background: var(--color-amber-tint); }
.fee-r.hl-edit { background: var(--color-edit); }
.f-nr { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-grey); }
.f-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--color-grey); line-height: 1.4; }
.f-satz { display: flex; align-items: center; justify-content: center; gap: 6px; }
.f-satz output { min-width: 26px; text-align: center; font-weight: 600; }
.f-amt { text-align: right; font-weight: 600; white-space: nowrap; }
.f-why { grid-column: 2 / -1; margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--color-ink); max-width: 62ch; }
.fee-r.removed .f-nr, .fee-r.removed .f-name, .fee-r.removed .f-sub > span:first-child, .fee-r.removed .f-amt { opacity: .45; text-decoration: line-through; }
.step { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: white; color: var(--color-navy); font-size: 15px; line-height: 1; cursor: pointer; }
.step::before { content: ""; position: absolute; inset: -8px; }
.step:hover { border-color: var(--color-teal); color: var(--color-teal-deep); }
.step:disabled { opacity: .4; cursor: default; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--color-grey); cursor: pointer; font: inherit; }
.icon-btn::before { content: ""; position: absolute; inset: -8px; }
.icon-btn:hover { background: var(--color-pale); color: var(--color-brick); }
.icon-btn.calm { width: auto; padding: 0 6px; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.icon-btn.calm:hover { color: var(--color-navy); }
.pdf-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 96px; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-sheet-row); }
.pdf-row .r, .r { text-align: right; }
.tot { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; margin-left: auto; width: min(100%, 320px); font-size: 13.5px; }
.tot-row { display: flex; justify-content: space-between; gap: 12px; color: var(--color-grey); }
.tot-row > span:last-child, .tot-sum > span:last-child { white-space: nowrap; }
.tot-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--color-sheet-rule); color: var(--color-navy); }
.sh-close { display: flex; flex-direction: column; gap: 30px; }
.sh-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--color-sheet-row); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 10.5px; line-height: 1.5; color: var(--color-grey); }
.sh-empty { padding: 18px 0; color: var(--color-grey); font-size: 14px; }
.sheet-note { margin: 0 4px; font-size: 13px; line-height: 1.5; color: var(--color-grey); }
.src-panel { position: fixed; top: 0; bottom: 0; z-index: 41; display: flex; flex-direction: column; background: var(--color-panel); animation: ds-src-in .28s var(--ease-out-expo); right: var(--pw); width: min(560px, calc(100vw - var(--pw))); border-left: 1px solid var(--color-line); box-shadow: -30px 0 60px -40px rgba(10, 34, 36, .5); }
.src-hd { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--color-line); }
.src-hd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.src-hd-text strong { font-size: 15px; font-weight: 700; color: var(--color-navy); }
.src-hd-text span { font-size: 13px; color: var(--color-grey); }
.src-body { flex: 1; overflow: auto; padding: 16px; background: var(--color-pale); }
.src-page { background: white; border: 1px solid var(--color-line); border-radius: 6px; padding: 24px; font-size: 14px; line-height: 1.6; color: var(--color-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.src-page mark { background: var(--color-teal-soft); outline: 2px solid var(--color-teal); border-radius: 3px; color: var(--color-ink); }
.src-page.schlecht mark { background: var(--color-amber-tint); outline-color: var(--color-amber-fg); }
.src-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-grey); }
.src-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--color-line); font-size: 14px; color: var(--color-ink); }
.narrow-only { display: none; }
@media (max-width: 1180px) {
  :root { --pw: min(840px, calc(100vw - 48px)); }
  .src-panel { right: 0; width: var(--pw); }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
}
@media (max-width: 900px) { .verlauf { grid-template-columns: minmax(0, 1fr); } .sheet { padding: 44px 36px 24px; } }

/* ─────────────────────────────────────────────────────────────────────────────
   TOAST — one component for every success message (frontend/toast.js)
   ───────────────────────────────────────────────────────────────────────────── */
.toast-region {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast);
  width: min(500px, calc(100vw - 24px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px;
  border-radius: var(--radius-toast); background: var(--color-navy); color: #fff; box-shadow: var(--shadow-toast);
  animation: ds-toast-in .34s var(--ease-out-expo);
}
.toast-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--color-teal); display: grid; place-items: center; }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-title { font-size: 14.5px; font-weight: 700; }
.toast-body { font-size: 13px; color: var(--color-toast-muted); overflow-wrap: anywhere; }
.toast-act {
  flex-shrink: 0; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .3);
  background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.toast-act:hover { background: rgba(255, 255, 255, .1); }
.toast-x {
  position: relative; flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--color-toast-muted); cursor: pointer;
}
.toast-x::before { content: ""; position: absolute; inset: -6px; }
.toast-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.toast :focus-visible { outline-color: #9FE0D6; }
.toast-error { background: var(--color-panel); color: var(--color-brick); border: 1px solid var(--color-brick); }
.toast-error .toast-ic { background: var(--color-brick); }
.toast-error .toast-body, .toast-error .toast-x { color: var(--color-ink); }
.toast-error .toast-x:hover { background: var(--color-pale); color: var(--color-navy); }

@media (max-width: 640px) {
  .hide-s { display: none !important; }
  .app-header-inner { padding: 0 12px; gap: 6px; }
  a.navlink { padding: 0 8px; }
  .page { padding: 20px 16px 32px; }
  .card { padding: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CASE DETAIL FULL PAGE
   The found-money figures break the app's 24px type ceiling on purpose — this
   screen is where "money you're not billing" has to land. Everything else on
   the page stays on the house scale.
   ───────────────────────────────────────────────────────────────────────────── */

/* Header-pinned found-money total — the single largest figure in the product. */
.cd-figure {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: var(--font-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* The ledger's ruled sum line. */
.cd-figure-sum {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Fundstellen ledger rows + "warum" disclosure. */
.cd-ledger-row:hover { background: var(--color-pale); }
.cd-caret { transition: transform var(--duration-base) var(--ease-out); }
.cd-caret-open { transform: rotate(90deg); }
.cd-why { animation: cd-why-in var(--duration-base) var(--ease-out); }

@keyframes cd-why-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-caret, .cd-why { transition: none; animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   INVOICE LIST — found-money magnitude bar
   ─────────────────────────────────────────────────────────────────────────────
   Each case row carries a hairline bar under its found-money figure, scaled
   against the largest amount on the page. It compares cases to each other,
   which is a true statement; it deliberately does NOT plot fees against the
   Streitwert, because RVG fees are not a percentage of it and implying they
   are would break the page's whole job — letting a lawyer verify the number.
   ───────────────────────────────────────────────────────────────────────────── */
.inv-bar {
  height: 2px;
  border-radius: 1px;
  background: var(--color-teal);
  transition: width var(--duration-base) var(--ease-out);
}

.inv-bar-track {
  height: 2px;
  border-radius: 1px;
  background: var(--color-line);
}

.inv-row {
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.inv-row:hover { background: var(--color-pale); }

/* The row's real navigation: a genuine link, so it keeps keyboard focus and
   screen-reader semantics that a clickable <tr> would have thrown away. */
.inv-link:focus-visible {
  outline: 2px solid var(--color-teal-deep);
  outline-offset: 2px;
  border-radius: 2px;
}
.inv-row:focus-within { background: var(--color-pale); }

/* ─────────────────────────────────────────────────────────────────────────────
   INVOICE LIST — the open/overdue subset bar
   ─────────────────────────────────────────────────────────────────────────────
   "Überfällig" is a slice of "Offen gesamt", never a sibling of it. The bar sits
   inside the Offen card and fills to the overdue share, so the relationship is
   visible before anyone reads the two numbers: €20.000 open with €2.000 overdue
   has to look like a sliver, not like a second, competing total.
   ───────────────────────────────────────────────────────────────────────────── */
.inv-subset-track {
  height: 4px;
  border-radius: 2px;
  background: var(--color-pale); /* the "open" remainder */
  overflow: hidden;
}

.inv-subset-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-brick); /* the overdue slice */
  transition: width var(--duration-base) var(--ease-out);
}

/* ─────────────────────────────────────────────────────────────────────────────
   INVOICE LIST — Mahnung ladder
   ─────────────────────────────────────────────────────────────────────────────
   Four rungs: 1. Mahnung, 2. Mahnung, letzte Mahnung, Inkasso. The filled rungs
   make escalation scannable down a column of rows, which colour alone does not:
   a lawyer skimming the page has to be able to see how far a Vorgang has gone
   without reading every chip.
   ───────────────────────────────────────────────────────────────────────────── */
.inv-ladder {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.inv-ladder-step {
  width: 4px;
  height: 10px;
  border-radius: 1px;
  background: var(--color-line);
}

.inv-ladder-step-on { background: currentColor; }

/* The Mahnung draft, read as correspondence rather than as table data. */
.inv-draft {
  white-space: pre-wrap;
  line-height: 1.7;
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .inv-bar, .inv-row, .inv-subset-fill { transition: none; }
}