/**
 * 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;
}
.entries.still .entry { animation: none; }
.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);
}
.scrim.still, .peek.still, .src-panel.still { animation: none; }
.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 { overflow-wrap: anywhere; }
.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; }
.field-error { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-brick); }
/* A text of the invoice is the same element in edit mode and in the preview, so the letter does not move
   when the mode changes (v5). The edit hint is fill and shadow only: neither changes the layout. */
.lt-lines { white-space: pre-line; }
.lt[contenteditable], input.sw {
  background: var(--color-edit); box-shadow: inset 0 -2px 0 var(--color-teal); border-radius: 2px; outline: none;
}
.lt[contenteditable]:focus, input.sw:focus { box-shadow: inset 0 -2px 0 var(--color-teal), 0 0 0 3px var(--color-teal-soft); }
.lt[data-ask] { background: var(--color-amber-tint); box-shadow: inset 0 -2px 0 var(--color-amber-fg); }
.lt[aria-invalid="true"], input.sw[aria-invalid="true"] { background: var(--color-brick-tint); box-shadow: inset 0 -2px 0 var(--color-brick); }
span.sw { display: inline-block; }
input.sw {
  display: inline-block; padding: 0; margin: 0; border: 0; height: 1lh; min-width: 3ch; field-sizing: content;
  font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; vertical-align: baseline;
}
/* Zurück, an error and the address hint float under their text, so they never push the letter down. */
.lt-wrap { position: relative; }
.edit-aside {
  position: absolute; top: 100%; left: 0; z-index: 2; display: none; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 6px 10px; border-radius: 8px; background: white; box-shadow: var(--shadow-hover); white-space: normal;
}
.lt-wrap:hover > .edit-aside, .lt-wrap:focus-within > .edit-aside, .edit-aside.show { display: flex; }
.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; }
/* The "angepasst" chip fits the line of the name: a changed fee keeps its height in the preview (v5). */
.f-name .chip-edit { padding-block: 1px; line-height: 15px; }
.f-name .pin { margin-block: -1px; }
.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; min-height: 28px; }
.f-satz output { min-width: 26px; text-align: center; font-weight: 600; }
.f-amt { text-align: right; font-weight: 600; white-space: nowrap; }
.fee-r .f-amt { transition: opacity .15s; }
.fee-r.is-pending .f-amt { opacity: .5; }
/* The amount of a Rahmen fee (Bußgeldsache, 2026-15): the green edit look of the Streitwert, right-aligned. */
/* No taller than a line of text, so the row keeps its height in the preview (v5). */
input.f-betrag {
  width: 100%; height: 1lh; padding: 0 4px; margin: 0; border: 0; border-radius: 2px; outline: none; font: inherit;
  font-weight: 600; line-height: inherit; text-align: right; color: inherit; background: var(--color-edit);
  box-shadow: inset 0 -2px 0 var(--color-teal);
}
input.f-betrag:focus { box-shadow: inset 0 -2px 0 var(--color-teal), 0 0 0 3px var(--color-teal-soft); }
input.f-betrag[aria-invalid="true"] { background: var(--color-brick-tint); box-shadow: inset 0 -2px 0 var(--color-brick); }
.fee > .field-error { grid-column: 2 / -1; }
/* Fees found but not priced (2026-15 US-007): quieter than the fee rows, outside the totals. */
.ob { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--color-sheet-rule); }
.ob-h { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: var(--color-grey); }
.ob ul { margin: 0; padding: 0; list-style: none; }
.ob .fee { padding: 6px 0; color: var(--color-grey); }
.ob-space { visibility: hidden; }
.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); }
.r { text-align: right; }
/* The totals end where the Betrag column ends, left of the × column (v5 US-002). */
.tot { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; padding-right: 38px; margin-left: auto; width: min(100%, 358px); 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; }
  /* The five fee columns do not fit a phone: Satz, amount and × move to a second line, in both modes (v5 US-002). */
  .fee { grid-template-columns: 32px minmax(0, 1fr) auto 28px; grid-template-areas: "nr main main main" "satz satz amt x"; gap: 2px 6px; }
  .fee > :nth-child(1) { grid-area: nr; align-self: start; }
  .f-name { overflow-wrap: anywhere; hyphens: auto; }
  .tot { padding-right: 0; width: 100%; }
  .fee > :nth-child(2) { grid-area: main; }
  .fee > :nth-child(3) { grid-area: satz; }
  .fee > :nth-child(4) { grid-area: amt; }
  .fee > :nth-child(5) { grid-area: x; }
  .fee .f-satz { justify-content: flex-start; }
  .fee-h > :nth-child(3) { text-align: left; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   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; }
}