/*
 * X-Factura design system (Design Handoff v1).
 *
 * A calm document workspace: white space instead of stacked cards, fine
 * rules, floating labels, one action colour. Type: Nexa (local, Book and
 * Bold only) for everything read; IBM Plex Mono for code only. All assets
 * are local (public/fonts, licences alongside); no runtime request leaves
 * the site.
 *
 * Layers keep specificity flat: tokens < base < layout < components < pages
 * < utilities.
 */
@layer reset, tokens, base, layout, components, pages, utilities;

/* ------------------------------------------------------------------ fonts */

@font-face { font-family: "Nexa"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Nexa-Book.woff2") format("woff2"); }
@font-face { font-family: "Nexa"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Nexa-Bold.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ui/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ui/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ui/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------ reset */

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
    ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
    img, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; color: inherit; }
    button { cursor: pointer; }
    table { border-collapse: collapse; }
    [hidden] { display: none !important; }
}

/* ----------------------------------------------------------------- tokens */

@layer tokens {
    /* The palette of the handoff (dist/style.css): ink #242d3c, muted
       #697485, hairline #e4e7ed, preview canvas #f5f6f9. The accent is the
       SMACT contrast colour #7239ea (Release 2, DESIGN.md "Farben"): its
       hover, tints, focus ring and selected states are derived from
       --accent right here, so one value moves the whole interface.
       Success, warning and error keep colours of their own. The dark theme
       keeps the dark values X-Factura already had, with the accent stepped
       for the dark surface. */
    :root {
        color-scheme: light;

        --paper: #ffffff;
        --sheet: #ffffff;
        --sheet-2: #f5f6f9;
        --canvas: #f5f6f9;
        --pale: var(--accent-soft);
        --ink: #242d3c;
        --ink-2: #465263;
        --muted: #697485;
        /* Muted text on the preview canvas: the handoff's muted tone,
           darkened just enough for WCAG AA on #f5f6f9. */
        --muted-canvas: #636e7f;
        /* Muted text on a chosen option (--control-selected). */
        --muted-selected: #636e7f;
        --faint: #8b94ab;
        --line: #e4e7ed;
        --line-strong: #ccd1dd;
        --rule: #e4e7ed;
        --rule-2: #cdd2df;
        --field-border: #8791a3;
        --accent: #7239ea;
        --accent-hover: color-mix(in oklab, var(--accent) 82%, #000);
        --accent-soft: color-mix(in srgb, var(--accent) 9%, #fff);
        --accent-ink: #ffffff;
        --row-tint: color-mix(in srgb, var(--accent) 4%, #fff);
        /* Success: a quiet sage / teal green (text and icon on its soft
           surface >= 4.5:1), no Bootstrap green. */
        --ok: #2e6b5f;
        --ok-soft: #eaf2ee;
        /* A state that is alive (the save point): decorative, so it may be
           brighter than --ok, which text uses. */
        --live: #2f9e6f;
        --warn: #8a5a00;
        --warn-soft: #fbf1dc;
        --danger: #b3261e;
        --danger-soft: #fbe8e6;
        --info-soft: #f5f6f9;
        /* A contextual hint (x-hint, the "!" badge): information, not an
           error - berry, apart from the accent and from --danger; the "!"
           and the fine outline in it, on the sheet. */
        --hint: #a8235f;
        --hint-soft: color-mix(in srgb, var(--hint) 9%, #fff);
        /* Monat für Monat (dataviz check: both >= 3:1 on the sheet, CVD
           separation 21.5): income in the accent, expenses in teal;
           expected ones hatched. */
        --chart-income: var(--accent);
        --chart-expense: #0e9488;
        /* The direction of an invoice (x-invoice.direction, v5). */
        --direction-out: var(--accent);
        --direction-out-soft: var(--accent-soft);
        --direction-in: #4b666b;
        --direction-in-soft: #edf3f4;
        /* The kind of an invoice in the lists (x-invoice.type): one quiet
           colour per family, the same lightness, darker than the list's
           grey and far lighter than its ink - text >= 5.2:1 on the sheet
           and on a hovered or selected row. A plain invoice keeps the grey;
           petrol, not violet, for self-billing (violet is the accent and
           "Ausgang"). */
        --doc-type-partial: #396295;
        --doc-type-correction: #93415e;
        --doc-type-self-billed: #1d6c77;
        /* The printed sheet of the previews (the PDF's layout 3): its greys,
           in both themes - paper stays white. Text >= 4.5:1 on white. */
        --print-ink: #1a1a1a;
        --print-text: #2b2b2b;
        --print-muted: #555555;
        --print-quiet: #666666;
        --print-rule: #bdbdbd;
        --print-line: #e3e3e3;

        --font-sans: "Nexa", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --font-display: var(--font-sans);
        --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

        --text-xs: 0.78125rem;     /* 12.5px */
        --text-sm: 0.875rem;       /* 14px */
        --text-md: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.375rem;
        --text-2xl: 1.75rem;
        --text-3xl: 2.25rem;

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 2.5rem;
        --space-8: 3rem;

        --radius-sm: 4px;
        --radius: 6px;
        --radius-lg: 9px;

        --shadow-sheet: 0 8px 20px rgb(37 53 84 / 6%), 0 0 0 1px #e8ebf0;
        --shadow-pop: 0 30px 120px rgb(23 35 63 / 25%);
        --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

        /* Select/date popovers and choice blocks (Design Handoff v2). */
        --control-hover: color-mix(in srgb, var(--accent) 5%, #fff);
        --control-selected: var(--accent-soft);
        --control-border: #e0e5ef;
        --control-shadow: 0 16px 55px rgb(28 43 73 / 12.5%), 0 3px 9px rgb(28 43 73 / 3%);
        --footer-height: 50px;
        /* The sticky header's height (Design Handoff v4) - kept current by
           app.js; these are its heights before the script has run. */
        --header-height: 69px;
        /* A surface raised above its surroundings: the chosen tool of the
           header's tool pair. */
        --surface-raised: #ffffff;

        /* Buttons - the one place of their colours (see "Buttons" in
           @layer components). The main action takes the dark surface of the
           login card (Design Handoff v3); the others stay quiet. */
        --button-radius: 6px;
        --button-primary-bg: #151621;
        --button-primary-bg-hover: #2a2c45;
        --button-primary-surface: radial-gradient(ellipse at 100% 0%, #2c2e4a 0, transparent 70%), #151621;
        --button-primary-fg: #f3f3fa;
        --button-primary-border: #151621;
        --button-secondary-bg: var(--sheet);
        --button-secondary-bg-hover: var(--sheet);
        --button-secondary-fg: var(--ink);
        --button-secondary-border: var(--line-strong);
        --button-secondary-border-hover: var(--ink-2);
        --button-ghost-fg: var(--ink-2);
        --button-ghost-bg-hover: var(--sheet-2);
        --button-destructive-fg: var(--danger);
        --button-destructive-border: color-mix(in srgb, var(--danger) 45%, var(--rule));
        --button-destructive-bg-hover: var(--danger-soft);
        --button-link-fg: var(--accent);
        --button-focus: var(--accent);

        --shell: 76rem;
        --ease: cubic-bezier(0.2, 0, 0, 1);
    }

    :root[data-theme="dark"] {
        color-scheme: dark;

        --paper: #0f141a;
        --sheet: #161c24;
        --sheet-2: #1b222c;
        --canvas: #161c24;
        --pale: var(--accent-soft);
        --ink: #e7ebf0;
        --ink-2: #c6cdd6;
        --muted: #9ba5b1;
        --muted-canvas: #9ba5b1;
        --muted-selected: #b8c1cc;
        --faint: #7d8794;
        --line: #2a323d;
        --line-strong: #3a4450;
        --rule: #2a323d;
        --rule-2: #3a4450;
        --field-border: #6a7582;
        --accent: #ad94ff;
        --accent-hover: color-mix(in oklab, var(--accent) 78%, #fff);
        --accent-soft: color-mix(in srgb, var(--accent) 16%, #161c24);
        --accent-ink: #0f141a;
        --row-tint: color-mix(in srgb, var(--accent) 6%, #161c24);
        --ok: #7fc7b0;
        --ok-soft: #16302a;
        --live: #62c392;
        --warn: #e4b45c;
        --warn-soft: #33270f;
        --danger: #ff8f84;
        --danger-soft: #3a1714;
        --info-soft: #1b2230;
        --hint: #f07ab0;
        --hint-soft: color-mix(in srgb, var(--hint) 14%, #161c24);
        --chart-income: #8f6ff2;
        --chart-expense: #139a8e;
        --direction-in: #a6c9cd;
        --direction-in-soft: #1c2b2e;
        /* Text >= 5.9:1 on the dark sheet and rows. */
        --doc-type-partial: #90b7ea;
        --doc-type-correction: #e999b1;
        --doc-type-self-billed: #7dc1cc;

        --shadow-sheet: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px -14px rgb(0 0 0 / 60%);
        --shadow-pop: 0 30px 120px rgb(0 0 0 / 70%);
        --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

        --control-hover: color-mix(in srgb, var(--accent) 9%, #1b222c);
        --control-selected: color-mix(in srgb, var(--accent) 20%, #161c24);
        --control-border: #3a4254;
        --control-shadow: 0 16px 55px rgb(0 0 0 / 33%);
        --surface-raised: #2b3242;

        /* On a dark page the main action turns light, like the login
           card's own button on its dark surface. */
        --button-primary-bg: #e8e0ff;
        --button-primary-bg-hover: #f4f0ff;
        --button-primary-surface: #e8e0ff;
        --button-primary-fg: #261a47;
        --button-primary-border: #e8e0ff;
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            color-scheme: dark;

            --paper: #0f141a;
            --sheet: #161c24;
            --sheet-2: #1b222c;
            --canvas: #161c24;
            --pale: var(--accent-soft);
            --ink: #e7ebf0;
            --ink-2: #c6cdd6;
            --muted: #9ba5b1;
            --muted-canvas: #9ba5b1;
            --muted-selected: #b8c1cc;
            --faint: #7d8794;
            --line: #2a323d;
            --line-strong: #3a4450;
            --rule: #2a323d;
            --rule-2: #3a4450;
            --field-border: #6a7582;
            --accent: #ad94ff;
            --accent-hover: color-mix(in oklab, var(--accent) 78%, #fff);
            --accent-soft: color-mix(in srgb, var(--accent) 16%, #161c24);
            --accent-ink: #0f141a;
            --row-tint: color-mix(in srgb, var(--accent) 6%, #161c24);
            --ok: #7fc7b0;
            --ok-soft: #16302a;
            --live: #62c392;
            --warn: #e4b45c;
            --warn-soft: #33270f;
            --danger: #ff8f84;
            --danger-soft: #3a1714;
            --info-soft: #1b2230;
            --hint: #f07ab0;
            --hint-soft: color-mix(in srgb, var(--hint) 14%, #161c24);
            --chart-income: #8f6ff2;
            --chart-expense: #139a8e;
            --direction-in: #a6c9cd;
            --direction-in-soft: #1c2b2e;
            --doc-type-partial: #90b7ea;
            --doc-type-correction: #e999b1;
            --doc-type-self-billed: #7dc1cc;

            --shadow-sheet: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px -14px rgb(0 0 0 / 60%);
            --shadow-pop: 0 30px 120px rgb(0 0 0 / 70%);
            --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

            --control-hover: color-mix(in srgb, var(--accent) 9%, #1b222c);
            --control-selected: color-mix(in srgb, var(--accent) 20%, #161c24);
            --control-border: #3a4254;
            --control-shadow: 0 16px 55px rgb(0 0 0 / 33%);
            --surface-raised: #2b3242;

            --button-primary-bg: #e8e0ff;
            --button-primary-bg-hover: #f4f0ff;
            --button-primary-surface: #e8e0ff;
            --button-primary-fg: #261a47;
            --button-primary-border: #e8e0ff;
        }
    }

    /* Phones: the header has two rows (logo and account, then the tools). */
    @media (max-width: 680px) { :root { --header-height: 103px; } }

    /* A dark surface of its own (like the login card; the panel of the
       access pages, css/auth.css): its main action is the light one,
       whatever the page's theme. The quieter buttons are derived once more
       here, from the surface's own --sheet, --ink, --line-strong, --danger
       and --accent - derived only on :root, they would keep the page's
       colours on the dark surface. */
    [data-surface="dark"] {
        --button-primary-bg: #e8e0ff;
        --button-primary-bg-hover: #f4f0ff;
        --button-primary-surface: #e8e0ff;
        --button-primary-fg: #261a47;
        --button-primary-border: #e8e0ff;
        --button-secondary-bg: var(--sheet);
        --button-secondary-bg-hover: var(--sheet);
        --button-secondary-fg: var(--ink);
        --button-secondary-border: var(--line-strong);
        --button-secondary-border-hover: var(--ink-2);
        --button-ghost-fg: var(--ink-2);
        --button-ghost-bg-hover: var(--sheet-2);
        --button-destructive-fg: var(--danger);
        --button-destructive-border: color-mix(in srgb, var(--danger) 45%, var(--rule));
        --button-destructive-bg-hover: var(--danger-soft);
        --button-link-fg: var(--accent);
        --button-focus: #c9b6ff;
    }
}

/* ------------------------------------------------------------------- base */

@layer base {
    /* A target of a jump, a scroll or the focus comes to rest below the
       sticky header (Design Handoff v4). */
    /* Native check boxes, radios and ranges take the accent, too. */
    html { background: var(--paper); scroll-padding-top: calc(var(--header-height) + var(--space-5)); accent-color: var(--accent); }

    body {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background: var(--paper);
        color: var(--ink);
        font-family: var(--font-sans);
        font-size: var(--text-md);
        line-height: 1.5;
        font-feature-settings: "kern";
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }

    p + p { margin-top: var(--space-3); }

    a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
    a:hover { color: var(--accent-hover); }

    :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

    code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

    hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-5) 0; }

    ::selection { background: var(--accent-soft); color: var(--ink); }

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

/* ----------------------------------------------------------------- layout */

@layer layout {
    .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--space-4); }
    @media (min-width: 48rem) { .shell { padding-inline: var(--space-6); } }

    .skip-link {
        position: absolute; left: var(--space-4); top: -100px; z-index: 100;
        background: var(--accent); color: var(--accent-ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
        text-decoration: none; font-weight: 700;
    }
    .skip-link:focus { top: var(--space-3); color: var(--accent-ink); }

    main { flex: 1 0 auto; }
    main:focus { outline: none; }
    .flash { padding-top: var(--space-5); }

    .page { padding-block: var(--space-7) var(--space-8); }
    .page__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
    .page__title { font-size: 2rem; letter-spacing: -0.03em; }
    .page__lead { color: var(--muted); max-width: 44rem; margin-top: var(--space-2); }
    .page--narrow .shell { max-width: 44rem; }
    .page--reading .shell { max-width: 50rem; }
}

/* ------------------------------------------------------------- components */

@layer components {
    /* Header (Design Handoff v4, x-site-header): the logo on the left, the
       tool pair "Erstellen" / "Ansehen" in the middle, one account control
       on the right. It stays at the top while the page scrolls, lightly
       translucent over a blur - a nearly opaque surface where the browser
       has no backdrop-filter - and casts a faint shadow once the page has
       moved (.is-scrolled, site-shell.js). More opaque than the handoff
       (94 % instead of 81 %): its words keep WCAG AA contrast even over a
       dark or bright area passing beneath. A change of colour scheme is instant
       (no fading surface). Its real height is kept in --header-height:
       jumps, focus and the editor's sticky preview leave room for it. */
    .site-header {
        position: sticky; top: 0; z-index: 40; isolation: isolate;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
        background: color-mix(in srgb, var(--paper) 97%, transparent);
        transition: box-shadow 0.25s var(--ease);
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .site-header { background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(24px) saturate(125%); backdrop-filter: blur(24px) saturate(125%); }
    }
    .site-header.is-scrolled { box-shadow: 0 5px 24px -16px rgb(39 51 77 / 15%); }
    .site-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 24px; min-height: 68px; padding-inline: 4%; }
    .site-header__brand { display: flex; align-items: center; gap: 24px; min-width: 0; }
    .brand { display: inline-flex; flex: none; align-items: center; color: var(--ink); text-decoration: none; border-radius: 3px; }
    /* The logo file (200 x 35) at the handoff's width, its own proportions. */
    .brand__logo { width: 155px; height: auto; }
    .site-header__note { padding-left: 24px; border-left: 1px solid var(--line); color: var(--muted-canvas); font-size: 11px; white-space: nowrap; }

    /* The tool pair: two links, the current one raised (a surface of its
       own and aria-current - not the colour alone). */
    .tool-switch {
        display: flex; gap: 3px; padding: 4px;
        border: 1px solid color-mix(in srgb, var(--control-border) 60%, transparent); border-radius: 13px;
        background: color-mix(in srgb, var(--control-hover) 60%, transparent);
    }
    .tool-switch__item {
        display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 36px; padding: 7px 18px;
        border-radius: 9px; color: var(--muted-canvas); font-size: 13px; text-decoration: none; white-space: nowrap;
    }
    .tool-switch__item .icon { width: 17px; height: 17px; }
    @media (hover: hover) { .tool-switch__item:hover { background: color-mix(in srgb, var(--surface-raised) 60%, transparent); color: var(--accent); transition: background-color 0.2s, color 0.2s; } }
    .tool-switch__item[aria-current="page"] {
        background: var(--surface-raised); color: var(--accent);
        box-shadow: 0 1px 4px rgb(37 48 78 / 7%), 0 0 0 1px color-mix(in srgb, var(--control-border) 70%, transparent);
    }
    .tool-switch__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 9px; }

    /* The account control (x-account-menu): a disclosure. The trigger is
       quiet - its words and the initials or the account's logo, no outline
       and no arrow; the whole of it opens the panel, a soft surface on
       hover and while open, the focus ring on the keyboard. The panel hangs
       below its right edge. */
    /* The right side of the header: the language switch, then the account
       control. */
    .site-header__end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; justify-self: end; min-width: 0; }

    /* The language switch (x-language-switch, Milestone 6): "DE | EN", quiet
       like the tool pair. The current language is raised on a surface of its
       own and bold - not the colour alone - and announced as pressed. */
    .lang-switch { display: flex; margin: 0; }
    .lang-switch__group { display: flex; align-items: center; padding: 3px; border: 1px solid color-mix(in srgb, var(--control-border) 60%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--control-hover) 60%, transparent); }
    .lang-switch > .lang-switch__option:first-child { margin-left: 0; }
    .lang-switch__option {
        position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; margin: 0; padding: 4px 8px;
        border: 0; border-radius: 8px; background: none; color: var(--muted-canvas); font: inherit; font-size: 11px; letter-spacing: 0.06em; text-decoration: none; cursor: pointer;
    }
    .lang-switch__option + .lang-switch__option { margin-left: 5px; }
    .lang-switch__option + .lang-switch__option::before {
        content: ""; position: absolute; left: -3px; top: 8px; bottom: 8px; border-left: 1px solid var(--line);
    }
    .lang-switch__option[aria-pressed="true"], .lang-switch__option[aria-current="true"] {
        background: var(--surface-raised); color: var(--accent); font-weight: 700;
        box-shadow: 0 1px 4px rgb(37 48 78 / 7%), 0 0 0 1px color-mix(in srgb, var(--control-border) 70%, transparent);
    }
    .lang-switch__option[aria-pressed="true"]::before, .lang-switch__option[aria-pressed="true"] + .lang-switch__option::before { border-color: transparent; }
    @media (hover: hover) { .lang-switch__option:hover { color: var(--accent); } }
    .lang-switch__option:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .lang-switch[aria-busy="true"] { opacity: 0.7; }

    .account-menu { position: relative; justify-self: end; min-width: 0; }
    .account-menu__trigger {
        display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 5px 4px 11px;
        border: 0; border-radius: 10px; background: transparent;
        color: var(--ink-2); font-size: 12.5px; white-space: nowrap; list-style: none; cursor: pointer; user-select: none;
    }
    .account-menu__trigger::-webkit-details-marker { display: none; }
    .account-menu__trigger::marker { content: ""; }
    .account-menu[open] > .account-menu__trigger { background: var(--control-hover); color: var(--ink); }
    .account-menu__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
    .account-menu__avatar {
        display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
        background: var(--pale); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    }
    .account-menu__avatar .icon { width: 16px; height: 16px; }
    /* The account's logo in place of the initials: small, whole, in its own
       proportions - on white, as on its invoices, in both themes. */
    .account-menu__logo {
        display: inline-flex; align-items: center; justify-content: center; flex: none; height: 30px; max-width: 72px; padding: 3px 7px;
        border: 1px solid var(--line); border-radius: 8px; background: #fff;
    }
    .account-menu__logo img { display: block; width: auto; height: auto; max-width: 56px; max-height: 22px; object-fit: contain; }
    .account-menu__panel {
        position: absolute; top: calc(100% + 13px); right: 0; z-index: 1;
        width: 255px; max-height: calc(100dvh - var(--header-height) - 24px); overflow-y: auto; overscroll-behavior: contain;
        padding: 9px; border: 1px solid var(--control-border); border-radius: 16px;
        background: color-mix(in srgb, var(--sheet) 96%, transparent); color: var(--ink);
        box-shadow: 0 20px 65px -16px rgb(36 50 82 / 19%), 0 4px 12px rgb(36 50 82 / 2%);
        animation: account-menu-in 0.16s var(--ease);
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .account-menu__panel { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
    }
    .account-menu__panel:focus { outline: none; }
    .account-menu__heading { display: grid; gap: 4px; margin: 0 0 6px; padding: 12px 11px 15px; border-bottom: 1px solid var(--line); }
    .account-menu__heading strong { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
    .account-menu__heading small { color: var(--muted); font-size: 11px; }
    .account-menu__item {
        display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; margin: 0; padding: 11px;
        border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 13px; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer;
    }
    .account-menu__item .icon { width: 17px; height: 17px; color: var(--muted); }
    @media (hover: hover) {
        .account-menu__trigger:hover { background: var(--control-hover); color: var(--ink); transition: background-color 0.2s, color 0.2s; }
        .account-menu__item:hover { background: var(--control-hover); color: var(--ink); }
    }
    .account-menu__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
    .account-menu__item[aria-current="page"] { color: var(--accent); font-weight: 700; }
    .account-menu__item[aria-current="page"] .icon { color: currentColor; }
    .account-menu__note { margin: 7px 11px 13px; color: var(--muted); font-size: 11px; line-height: 1.6; }
    /* The last entry (a guest's colour scheme, an account's "Abmelden")
       under a fine rule. */
    .account-menu__end { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
    .account-menu__end .account-menu__item { color: var(--muted); }
    [data-theme-toggle] .theme-icon-light, [data-theme-toggle][data-effective="dark"] .theme-icon-dark { display: none; }
    [data-theme-toggle][data-effective="dark"] .theme-icon-light { display: block; }
    @keyframes account-menu-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

    /* Narrower desktops: the note gives way first. */
    @media (max-width: 1200px) {
        .site-header__bar { gap: 18px; }
        .site-header__note { display: none; }
    }
    @media (max-width: 900px) and (min-width: 681px) {
        .brand__logo { width: 140px; }
        .tool-switch__item { padding-inline: 14px; }
        .account-menu__logo { max-width: 60px; }
        .account-menu__logo img { max-width: 44px; }
    }
    /* Just above the phones' two rows the right side ("Mein X-Factura" with
       the language switch) needs its room: the logo and the gaps give way. */
    @media (max-width: 760px) and (min-width: 681px) {
        .site-header__bar { gap: 14px; }
        .brand__logo { width: 118px; }
    }
    /* Phones: two rows - logo and account, then the tool pair. */
    @media (max-width: 680px) {
        .site-header__bar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; min-height: 102px; padding: 10px 20px 8px; }
        .brand__logo { width: 127px; }
        .tool-switch { grid-row: 2; grid-column: 1 / -1; justify-self: center; padding: 3px; }
        .tool-switch__item { min-height: 34px; padding: 7px 21px; font-size: 12px; }
        .site-header__end { grid-row: 1; grid-column: 2; gap: 8px; }
        .lang-switch__option { min-width: 30px; min-height: 28px; padding: 3px 6px; }
        .account-menu__trigger { gap: 8px; min-height: 36px; padding: 3px 4px 3px 8px; font-size: 11px; }
        .account-menu__avatar { width: 28px; height: 28px; }
        .account-menu__logo { height: 28px; max-width: 60px; padding: 3px 6px; }
        .account-menu__logo img { max-width: 46px; max-height: 20px; }
        .account-menu__panel { width: min(255px, calc(100vw - 40px)); }
    }
    /* Small phones: the account control keeps its avatar, its words stay
       for screen readers only - room for the language switch. */
    @media (max-width: 400px) {
        .account-menu__trigger { padding-left: 4px; }
        .account-menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    }
    @media (max-width: 360px) {
        .brand__logo { width: 112px; }
        .account-menu__logo { max-width: 48px; }
        .account-menu__logo img { max-width: 34px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .site-header, .tool-switch__item { transition: none; }
        .account-menu__panel { animation: none; }
    }

    /* Footer (Design Handoff v4, x-site-footer): fixed at the lower edge of
       the window, flat and lightly translucent over a blur (nearly opaque
       without backdrop-filter), a fine light line along its top. The brand
       line on the left; the legal links and "Nach oben" on the right - on
       narrow screens in rows of their own. Its real height is kept in
       --footer-height (site-shell.js), so pages, the phone's dock and
       notices leave room for it and a focused field is never hidden behind
       it. The legal links must read well, wherever the page stands: type
       at 12 px (11 px on phones; the handoff's demo footer uses 10 px), the
       darker muted tone, and a surface of 94 % instead of the handoff's
       65 % - over a dark button or panel, or the white invoice in the dark
       theme, the links keep WCAG AA contrast. */
    html { scroll-padding-bottom: calc(var(--footer-height) + var(--help-reach, 0px) + var(--space-4)); }
    body { padding-bottom: calc(var(--footer-height) + var(--help-reach, 0px)); }
    .site-footer {
        position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; margin: 0;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
        min-height: 47px; padding: 11px 4%;
        border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
        background: color-mix(in srgb, var(--paper) 97%, transparent);
        box-shadow: 0 -6px 22px -16px rgb(43 54 82 / 17%);
        color: var(--muted-canvas); font-size: 12px;
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .site-footer { background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
    }
    .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--paper), transparent); pointer-events: none; }
    .site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; }
    /* The logo file (200 x 35) at footer size, its own proportions, quiet. */
    .site-footer__logo { display: block; width: 68px; height: auto; opacity: 0.65; }
    .site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
    .site-footer__links { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; list-style: none; }
    .site-footer a { color: inherit; text-decoration: none; }
    @media (hover: hover) { .site-footer a:hover { color: var(--accent); text-decoration: underline; } }
    /* A link to a new tab ends with the small arrow (.icon--external), on
       the text's middle, with no stray space before it or after it. */
    .site-footer a[target="_blank"] { display: inline-flex; align-items: center; }
    .site-footer a[aria-current="page"] { color: var(--ink); }
    .site-footer__top { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 2px 0; border: 0; background: none; color: inherit; font-size: inherit; cursor: pointer; }
    @media (hover: hover) { .site-footer__top:hover { color: var(--accent); } }
    .site-footer__top .icon { width: 13px; height: 13px; }
    /* The Help button (x-help-pill), the one Help control: a small light
       pill centred on the footer's upper edge - most of it above, its lower
       part (--help-dip) in the footer's top padding, never on the footer's
       text and links. The footer, fixed, is its frame; nothing of the footer
       moves for it. On the editor's phone layout it stands on the dock above
       the footer (--dock-height, site-shell.js). The page keeps the room it
       takes above the footer (--help-reach): the end of a page, a focused
       field and the notices stay clear of it. Its tooltip shows on hover and
       on keyboard focus; Escape hides it (site-shell.js, .is-quiet). */
    :root { --help-pill-height: 30px; --help-dip: 9px; }
    :root:has(.help-pill) { --help-reach: calc(var(--help-pill-height) - var(--help-dip)); }
    .site-footer a.help-pill {
        position: absolute; z-index: 1; left: 50%; bottom: calc(100% + var(--dock-height, 0px) - var(--help-dip));
        display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box; height: var(--help-pill-height); padding: 0 13px 0 6px;
        border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 999px;
        background: var(--sheet); color: var(--accent); box-shadow: 0 6px 16px -10px rgb(43 54 82 / 38%);
        font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
        transform: translateX(-50%);
    }
    .help-pill__sign { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; }
    @media (hover: hover) { .site-footer a.help-pill:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-soft); color: var(--accent); text-decoration: none; } }
    .site-footer a.help-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
    .help-pill__tip {
        position: absolute; left: 50%; bottom: calc(100% + 8px);
        padding: 5px 9px; border-radius: 6px; background: var(--ink); color: var(--paper);
        font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap;
        box-shadow: 0 6px 18px -8px rgb(15 20 26 / 45%);
        opacity: 0; visibility: hidden; transform: translate(-50%, 2px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    }
    /* The pointer may move onto the tooltip without it closing (WCAG 1.4.13): the gap is part of it. */
    .help-pill__tip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
    .help-pill:focus-visible .help-pill__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    @media (hover: hover) { .help-pill:hover .help-pill__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); } }
    .help-pill.is-quiet .help-pill__tip { opacity: 0; visibility: hidden; }
    @media (prefers-reduced-motion: reduce) { .help-pill__tip { transition: none; } }
    @media (max-width: 680px) { :root { --help-dip: 5px; } }
    @media (max-width: 820px) {
        :root:has(.mobile-dock) { --help-dip: 0px; --dock-height: 65px; }
        /* A focused field of the editor stays above the dock and the button on it. */
        html:has(.mobile-dock) { scroll-padding-bottom: calc(var(--footer-height) + var(--dock-height) + var(--help-reach, 0px) + var(--space-4)); }
    }
    /* Phones: the brand line and "Nach oben" (its sign only) in the first
       row, the legal links below - wrapping between links, never inside. */
    @media (max-width: 680px) {
        .site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; min-height: 42px; padding: 8px 20px calc(8px + env(safe-area-inset-bottom)); font-size: 11px; }
        .site-footer__logo { width: 61px; }
        .site-footer__meta { display: contents; }
        .site-footer__brand { grid-row: 1; grid-column: 1; }
        .site-footer__top { grid-row: 1; grid-column: 2; justify-content: center; min-width: 24px; }
        .site-footer__top-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        .site-footer__links { grid-row: 2; grid-column: 1 / -1; gap: 2px 12px; }
        .site-footer__links a { white-space: nowrap; }
    }

    .icon { width: 1.25rem; height: 1.25rem; flex: none; stroke-width: 1.5; }
    .icon--sm { width: 1rem; height: 1rem; }
    .icon--lg { width: 1.5rem; height: 1.5rem; }
    /* After a link that opens a new tab (site footer): small, in the link's
       colour, on the text's line. Decorative - the link says "(neuer Tab)". */
    .icon--external { display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.2em; vertical-align: -0.02em; stroke-width: 2; }

    /* Buttons - one system for every page. Views use these semantic
       classes; their colours come only from the --button-* tokens (@layer
       tokens), so the whole look changes in one place:

         .btn.btn--primary     the one main action of a view: the dark
                               surface of the login card (light on a dark
                               page or a [data-surface="dark"] card)
         .btn, .btn--secondary a bordered, quiet action
         .btn--ghost           an action that is almost text
         .btn--destructive     deleting or removing (.btn--danger is the
                               older name of the same)

       The editor's large call to action (.primary), the account's bordered
       action (.outline-action) and the acting text links (.text-action,
       .link-button) take the same tokens. */
    .btn {
        --btn-bg: var(--button-secondary-bg); --btn-fg: var(--button-secondary-fg); --btn-border: var(--button-secondary-border);
        display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
        min-height: 2.75rem; padding: 0 var(--space-4);
        border: 1px solid var(--btn-border); border-radius: var(--button-radius);
        background: var(--btn-bg); color: var(--btn-fg);
        font-weight: 400; font-size: var(--text-sm); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
        transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), box-shadow 120ms var(--ease), transform 120ms var(--ease);
    }
    .btn:hover { --btn-bg: var(--button-secondary-bg-hover); --btn-border: var(--button-secondary-border-hover); color: var(--btn-fg); }
    .btn:active:not(:disabled, [aria-disabled="true"]) { transform: translateY(1px); }
    .btn:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 2px; }
    .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
    .btn--primary { --btn-bg: var(--button-primary-bg); --btn-fg: var(--button-primary-fg); --btn-border: var(--button-primary-border); background: var(--button-primary-surface); }
    .btn--primary:hover { --btn-bg: var(--button-primary-bg-hover); --btn-border: var(--button-primary-bg-hover); background: var(--btn-bg); }
    .btn--ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--button-ghost-fg); }
    .btn--ghost:hover { --btn-bg: var(--button-ghost-bg-hover); --btn-border: transparent; }
    .btn--destructive, .btn--danger { --btn-fg: var(--button-destructive-fg); --btn-border: var(--button-destructive-border); }
    .btn--destructive:hover, .btn--danger:hover { --btn-bg: var(--button-destructive-bg-hover); --btn-border: var(--button-destructive-fg); }
    .btn--lg { min-height: 3.1rem; padding: 0 var(--space-5); font-size: var(--text-md); }
    .btn--sm { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-xs); }
    .btn--icon { padding: 0; width: 2.75rem; }
    .btn--icon.btn--sm { width: 2.25rem; }
    .btn--block { width: 100%; }
    .btn[aria-busy="true"], .primary[aria-busy="true"] { cursor: progress; }
    .btn[aria-busy="true"] .icon, .primary[aria-busy="true"] .icon { display: none; }
    .btn[aria-busy="true"]::before, .primary[aria-busy="true"]::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .link-button { background: none; border: 0; padding: 0; color: var(--button-link-fg); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
    .link-button:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 2px; border-radius: 2px; }

    /* Boxed form fields (account, sign-in, upload) */
    .field { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
    .field__label { font-size: var(--text-sm); color: var(--ink); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
    .field__req { color: var(--muted); font-size: var(--text-xs); }
    .field__term { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.02em; }
    .field__hint { font-size: var(--text-xs); color: var(--muted); line-height: 1.45; }
    .field__error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--danger); line-height: 1.4; }
    .field__error .icon { width: 1rem; height: 1rem; margin-top: 0.1rem; }

    .control {
        width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem;
        border: 1px solid var(--field-border); border-radius: var(--radius-sm);
        background: var(--sheet); color: var(--ink);
        font-size: var(--text-md); line-height: 1.4;
        transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
    }
    .control::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
    .control:hover { border-color: var(--ink-2); }
    .control:focus, .control:focus-within { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
    .control[aria-invalid="true"] { border-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 55%, var(--sheet)); }
    .control[readonly] { background: var(--sheet-2); color: var(--ink-2); }
    .control:disabled { background: var(--sheet-2); color: var(--muted); cursor: not-allowed; }
    .control--mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.02em; }
    .control--num { text-align: right; font-variant-numeric: tabular-nums; }
    textarea.control { min-height: 5rem; resize: vertical; }
    select.control {
        appearance: none; -webkit-appearance: none; padding-right: 2.25rem;
        background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
        background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.7rem) 55%;
        background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
        background-repeat: no-repeat;
    }
    input[type="date"].control { min-width: 0; }
    input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
    input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

    .input-affix { position: relative; display: flex; align-items: stretch; }
    .input-affix .control { padding-right: 2.25rem; }
    .input-affix__suffix { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--text-sm); pointer-events: none; }

    .check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); line-height: 1.45; }
    .check input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.12rem 0 0; accent-color: var(--accent); cursor: pointer; }
    .check__text strong { font-weight: 700; color: var(--ink); }
    .check__hint { display: block; color: var(--muted); font-size: var(--text-xs); margin-top: 0.1rem; }

    /* Switch (checkbox shown as a toggle) */
    .switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); }
    .switch input { appearance: none; -webkit-appearance: none; position: relative; width: 2.4rem; height: 1.35rem; border-radius: 999px; background: var(--line-strong); transition: background 150ms var(--ease); cursor: pointer; flex: none; margin: 0; }
    .switch input::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 25%); transition: transform 150ms var(--ease); }
    .switch input:checked { background: var(--accent); }
    .switch input:checked::after { transform: translateX(1.05rem); }
    .switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    /* Cards and sections (account, receipt, import) */
    .card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-lg); }
    .card__body { padding: var(--space-5); }
    @media (min-width: 48rem) { .card__body { padding: var(--space-6); } }
    .card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
    .card__title { font-size: var(--text-lg); }
    .card__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }

    .section-title { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-xl); }
    .section-title__note { font-weight: 400; font-size: var(--text-sm); color: var(--muted); }

    .grid { display: grid; gap: var(--space-4); }
    .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
    .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
    .span-all { grid-column: 1 / -1; }

    /* Disclosure (import notes, statistics) */
    .disclosure { border-top: 1px solid var(--line); padding-top: var(--space-3); }
    .disclosure > summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; color: var(--accent); font-size: var(--text-sm); min-height: 2.25rem; }
    .disclosure > summary::-webkit-details-marker { display: none; }
    .disclosure > summary .icon { width: 1rem; height: 1rem; transition: transform 150ms var(--ease); }
    .disclosure[open] > summary .icon { transform: rotate(90deg); }
    .disclosure__body { padding-top: var(--space-4); }

    /* Alerts */
    /* Status and flash messages of the application (Release 2, DESIGN.md
       "Hinweise"): a calm flat surface - no border, no rounded corners -,
       the icon names the state, the text stays in ink. Dialogs, drawers
       and toasts keep their own surfaces. */
    .alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 0; border-radius: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.5; }
    .alert .icon { flex: none; margin-top: 0.1rem; }
    .alert__title { font-weight: 700; color: var(--ink); }
    .alert--info { background: var(--info-soft); }
    .alert--info .icon { color: var(--ink-2); }
    .alert--ok { background: var(--ok-soft); }
    .alert--ok .icon { color: var(--ok); }
    .alert--warn { background: var(--warn-soft); }
    .alert--warn .icon { color: var(--warn); }
    .alert--error { background: var(--danger-soft); }
    .alert--error .icon { color: var(--danger); }
    .alert ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; }
    .alert li + li { margin-top: 0.2rem; }

    /* Badges */
    .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: var(--text-xs); line-height: 1.6; background: var(--sheet-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
    .badge--ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
    .badge--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
    .badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
    .badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
    .code-tag { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }

    /* Tables */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { width: 100%; font-size: var(--text-sm); }
    .table th { text-align: left; font-weight: 400; color: var(--muted); font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
    .table td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
    .table tr:last-child td { border-bottom: 0; }
    .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .table tbody tr:hover td { background: color-mix(in srgb, var(--sheet-2) 70%, transparent); }

    /* Definition lists (facts, totals) */
    .facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
    .facts dt { color: var(--muted); }
    .facts dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

    .totals { display: grid; gap: var(--space-1); font-variant-numeric: tabular-nums; }
    .totals__row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--muted); }
    .totals__row dd, .totals__row > :last-child { margin: 0; text-align: right; white-space: nowrap; }
    .totals__row--grand { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink); font-size: var(--text-md); align-items: center; }
    .totals__row--grand > :last-child { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.03em; }

    /* Stat tiles */
    .stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
    .stat { padding: var(--space-4); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 0.15rem; align-content: start; }
    .stat__label { font-size: var(--text-xs); color: var(--muted); }
    .stat__value { font-weight: 400; font-size: var(--text-2xl); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
    .stat__meta { font-size: var(--text-xs); color: var(--muted); }

    /* Confirmation dialogs (app.js) */
    .dialog { width: min(32rem, calc(100vw - 2rem)); border: 0; border-radius: 10px; padding: 0; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-pop); }
    .dialog::backdrop { background: rgb(24 34 59 / 33%); backdrop-filter: blur(5px); }
    .dialog__body { padding: var(--space-6) var(--space-6) var(--space-5); display: grid; gap: var(--space-3); }
    .dialog__title { font-size: var(--text-xl); }
    .dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-5); }
    .dialog__actions > form { display: contents; }
    /* The invoice a duplicate import matched: labels and values in a grid. */
    .duplicate-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: var(--space-1) 0 0; font-size: var(--text-sm); }
    .duplicate-facts > div { display: contents; }
    .duplicate-facts dt { color: var(--muted); }
    .duplicate-facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
    .duplicate-notice form { margin-top: var(--space-1); }
    /* Narrow screens: each label above its value, a date never broken. */
    @media (max-width: 30rem) {
        .duplicate-facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
        .duplicate-facts > div + div dt { margin-top: var(--space-2); }
    }

    /* Empty state */
    .empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--muted); display: grid; gap: var(--space-3); justify-items: center; }
    .empty .icon { width: 2rem; height: 2rem; color: var(--line-strong); }
    .empty__title { color: var(--ink); font-weight: 700; }

    /* Pagination */
    .pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--muted); }
    .pagination__links { display: flex; gap: var(--space-2); }

    /* Prose (legal pages) */
    .prose { font-size: var(--text-md); line-height: 1.7; color: var(--ink-2); }
    .prose h2 { font-size: var(--text-lg); color: var(--ink); margin-top: var(--space-6); margin-bottom: var(--space-2); }
    .prose p { margin-top: var(--space-3); }
    .prose ul { margin-top: var(--space-3); padding-left: 1.2rem; }
    .prose li + li { margin-top: var(--space-2); }

    /* Muted text on the light grey and tinted surfaces takes the darker
       muted tone (the handoff's muted grey is below WCAG AA there). */
    .alert--info, .dropzone, .receipt__note, .preview-rail, .preview-dialog { --muted: var(--muted-canvas); }

    /* Screen reader only */
    .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    /* ---------------------------------------------------- line field
       The one form primitive of the invoice editor (handoff "Form
       system"): borderless, a single bottom rule, the label floating
       above a focused or filled value, focus in the accent colour. The
       Blade components x-line.input / x-line.select / x-line.textarea
       render it; restyling fields means changing this block only. */
    .lf { position: relative; display: block; padding-top: 18px; min-width: 0; }
    .lf__control {
        display: block; width: 100%; min-height: 44px; margin: 0; padding: 10px 0 9px;
        border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
        background: transparent; color: var(--ink); font-size: 16px; line-height: 1.5;
        outline: none; transition: border-color 0.18s, box-shadow 0.18s;
    }
    .lf__control::placeholder { color: transparent; }
    .lf__control:focus::placeholder { color: var(--faint); }
    .lf__label {
        position: absolute; left: 0; top: 31px; max-width: 100%;
        color: var(--muted); font-size: 16px; line-height: 1.2;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        pointer-events: none; transition: top 0.18s, font-size 0.18s, color 0.18s;
    }
    .lf__optional { color: var(--muted); }
    .lf__control:focus ~ .lf__label,
    .lf__control:not(:placeholder-shown) ~ .lf__label,
    .lf--select .lf__label, .lf--date .lf__label, .lf--static .lf__label { top: 0; font-size: 14px; }
    .lf__control:is(:focus, :focus-within) { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
    .lf:focus-within > .lf__label { color: var(--accent); }
    .lf__control[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 1px 0 var(--danger); }
    .lf__control[aria-invalid="true"] ~ .lf__label { color: var(--danger); }
    .lf__control:disabled { color: var(--muted); cursor: not-allowed; }
    .lf__control[readonly] { color: var(--ink-2); }
    textarea.lf__control { resize: vertical; min-height: 75px; line-height: 1.6; }
    input[type="date"].lf__control { min-width: 0; }
    .lf__hint { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
    .lf__error, .field-error { display: flex; gap: 7px; align-items: flex-start; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--danger); }
    .lf__error .icon, .field-error .icon { width: 15px; height: 15px; margin-top: 1px; }
    .lf--strong .lf__control { font-weight: 700; }
    /* A value the editor shows but nobody types (an account's automatic
       invoice number): the field's rhythm, a quieter rule, no control. */
    .lf__static { min-height: 44px; margin: 0; padding: 10px 0 9px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
    .lf__static:focus { outline: none; }
    .lf__static:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

    /* Contextual field hint (x-hint, DESIGN.md "Hinweise im Feld"): a small
       rectangular "!" badge - information in berry (--hint), not an error:
       the paper's surface with a fine berry outline and a berry "!", quiet
       but plain to see -, its text in a calm bubble on hover, keyboard
       focus or tap (hints.js), closed with Escape. */
    .hint { position: relative; display: inline-flex; margin-left: 6px; vertical-align: 1px; }
    .hint__trigger {
        position: relative; display: inline-grid; place-items: center; width: 14px; height: 15px; padding: 0;
        border: 1px solid var(--hint); border-radius: 3px; background: var(--sheet); color: var(--hint);
        font: 700 10px/1 var(--font-sans); cursor: help;
    }
    .hint:is([data-open], :has(:focus-visible)) .hint__trigger { background: var(--hint-soft); }
    @media (hover: hover) { .hint__trigger:hover { background: var(--hint-soft); } }
    /* A target of 24 x 25 px around the small badge (WCAG 2.5.8): 6 px
       beyond its padding box (12 x 13 inside the 1 px border). */
    .hint__trigger::after { content: ""; position: absolute; inset: -6px; }
    .hint__trigger:focus-visible { outline: 2px solid var(--hint); outline-offset: 2px; }
    .hint__bubble {
        /* Below the header (40), as the layer of a field's hint below. */
        position: absolute; top: calc(100% + 8px); left: -8px; z-index: 35; display: none;
        width: max-content; max-width: min(300px, calc(100vw - 48px)); padding: 10px 12px;
        border-radius: var(--radius); background: var(--ink); color: var(--paper); box-shadow: var(--control-shadow);
        font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-align: left; white-space: normal; overflow-wrap: break-word;
        /* Moved back into the window beside a field at its edge (hints.js). */
        translate: var(--hint-shift, 0px) 0;
    }
    /* A bridge over the gap: the pointer can move into the text (WCAG 1.4.13). */
    .hint__bubble::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
    .hint:has(:focus-visible) .hint__bubble, .hint[data-open] .hint__bubble { display: block; }
    /* Hover only where there is one: a touch screen keeps a tapped badge
       "hovered", and the second tap could not close its text. */
    @media (hover: hover) {
        .hint:hover .hint__bubble { display: block; }
    }
    .hint[data-dismissed] .hint__bubble { display: none; }
    .hint__bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    .hint__bubble a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
    /* A way on from the text, on a line of its own ("Nummerierung ändern"). */
    .hint__more { display: block; width: fit-content; margin-top: 6px; }
    /* Beside a label: in a static field's label, or at the top right of a line field. */
    .lf--static .lf__label { overflow: visible; pointer-events: auto; }
    .lf__help { position: absolute; top: 0; right: 0; z-index: 2; }
    /* Its layer holds the text: open, above the next field's badge, the
       footer (25) and a phone's dock (30) - still below the header (40). */
    .lf__help:has(:focus-visible, [data-open]) { z-index: 35; }
    @media (hover: hover) {
        .lf__help:hover { z-index: 35; }
    }
    .lf__help .hint { margin-left: 0; }
    .lf__help .hint__bubble { left: auto; right: -8px; }

    /* Select look without the script (close to the browser's own control).
       With the script, controls.js draws the selects of the editor and of
       the account area as the v2 control ("controls (v2)" below). */
    .xf-select { position: relative; display: block; min-width: 0; }
    .xf-select > select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; text-overflow: ellipsis; }
    .xf-select > select::-ms-expand { display: none; }
    .xf-select::after {
        content: ""; position: absolute; right: 7px; top: 50%; width: 7px; height: 7px;
        border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
        color: var(--ink); transform: translateY(-75%) rotate(45deg); pointer-events: none;
    }
    .xf-select:has(> select:disabled)::after { opacity: 0.35; }
    .lf--select .xf-select::after { top: auto; bottom: 21px; transform: rotate(45deg); }
    .xf-select > select option { color: var(--ink); background: var(--sheet); font-weight: 400; }

    /* ------------------------------------------------ controls (v2)
       Select and date fields of Design Handoff v2 (public/js/controls.js):
       the native field stays in the form, hidden; a button shows its
       value and opens a list or a calendar. Without the script the native
       select keeps the .xf-select look above. */
    .source-control[hidden] { display: none !important; }
    .xf-select:has(> .custom-control)::after { content: none; }
    .custom-control {
        display: flex; width: 100%; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px;
        margin: 0; padding: 10px 0 9px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
        background: transparent; color: var(--ink); font-size: 16px; line-height: 1.5; text-align: left; cursor: pointer;
        transition: border-color 0.18s, box-shadow 0.18s, color 0.18s;
    }
    .custom-control__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .custom-control > .icon { width: 15px; height: 15px; opacity: 0.65; transition: transform 0.2s var(--ease); }
    .custom-control:hover { border-color: var(--field-border); }
    .custom-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
    .custom-control[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); color: var(--accent); }
    .custom-control[aria-expanded="true"] > .icon { transform: rotate(180deg); }
    .custom-control[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 1px 0 var(--danger); }
    .custom-control:disabled { color: var(--muted); cursor: default; opacity: 1; }
    .custom-control:disabled > .icon { opacity: 0.35; }
    .lf--strong .custom-control { font-weight: 700; }
    .date-control > .icon { display: none; }
    .date-control.is-empty .custom-control__value { color: var(--muted); }
    .date-control::after { content: "Ändern"; margin-left: auto; color: var(--accent); font-size: 12px; opacity: 0; transition: opacity 0.2s; }
    .date-control:hover::after, .date-control:focus-visible::after { opacity: 1; }
    .date-control:disabled::after { content: none; }

    .control-popover {
        position: fixed; z-index: 70; margin: 0; padding: 7px; overflow: auto; overscroll-behavior: contain;
        border: 1px solid var(--control-border); border-radius: 12px; background: var(--sheet); color: var(--ink);
        box-shadow: var(--control-shadow); animation: control-in 0.16s ease;
    }
    .control-option {
        display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 12px 14px;
        border-radius: 7px; font-size: 14px; cursor: pointer;
    }
    .control-option:hover, .control-option.is-active { background: var(--control-hover); }
    .control-option.is-active { box-shadow: inset 2px 0 0 var(--accent); }
    .control-option[aria-selected="true"] { background: var(--control-selected); color: var(--accent); font-weight: 700; }
    .control-option .icon { width: 16px; height: 16px; }

    .calendar { width: 320px; padding: 18px; }
    .calendar-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 17px; }
    .calendar-heading strong { font-size: 17px; font-weight: 700; }
    .calendar-nav { display: flex; gap: 4px; }
    .calendar-nav button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 21px; line-height: 1; }
    .calendar-nav button:hover { background: var(--control-hover); color: var(--accent); }
    .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
    .calendar-weekdays span { padding-bottom: 10px; color: var(--muted); font-size: 12px; text-align: center; }
    .calendar-day { height: 37px; min-width: 0; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink); font-size: 14px; }
    .calendar-day:hover, .calendar-day:focus-visible { background: var(--control-hover); outline: 2px solid var(--accent); outline-offset: -2px; }
    .calendar-day.outside { color: var(--muted); }
    .calendar-day.today { box-shadow: inset 0 0 0 1px var(--control-border); font-weight: 700; }
    .calendar-day.selected { background: var(--accent); color: var(--accent-ink); }
    .calendar-footer { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 11px; border-top: 1px solid var(--control-border); }
    .calendar-footer button { padding: 8px 7px; border: 0; background: none; color: var(--accent); font-size: 13px; }

    @keyframes control-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

    /* ------------------------------------------------- notices (v2)
       One notice at a time at the lower right (public/js/notify.js). */
    .xf-notices { position: fixed; z-index: 90; right: 26px; bottom: calc(var(--footer-height) + var(--help-reach, 0px) + 22px); width: min(410px, calc(100vw - 36px)); pointer-events: none; }
    .xf-notice {
        position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 20px; overflow: hidden; pointer-events: auto;
        border: 1px solid color-mix(in srgb, var(--ok) 18%, var(--line)); border-radius: 12px; background: var(--sheet); color: var(--ink);
        box-shadow: 0 12px 50px rgb(22 41 56 / 14%); animation: notice-enter 0.25s ease;
    }
    .notice-body { min-width: 0; flex: 1; }
    .xf-notice strong { display: block; font-size: 15px; font-weight: 700; }
    .xf-notice p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
    .notice-icon { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
    .notice-close { flex: none; min-width: 28px; min-height: 28px; margin: -4px -6px 0 auto; padding: 0; border: 0; background: none; color: var(--muted); font-size: 23px; line-height: 1; }
    .notice-close:hover { color: var(--ink); }
    .notice-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
    .notice-action { padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; text-decoration: underline; text-underline-offset: 0.18em; }
    .notice-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: color-mix(in srgb, var(--ok) 60%, transparent); transform-origin: left; animation: notice-progress 6s linear forwards; }
    .xf-notice.paused .notice-progress { animation-play-state: paused; }
    .xf-notice.error { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
    .xf-notice.error .notice-icon { background: var(--danger-soft); color: var(--danger); }
    .xf-notice.info { border-color: var(--line); }
    .xf-notice.info .notice-icon { background: var(--pale); color: var(--accent); }
    .xf-notice.info .notice-progress { background: color-mix(in srgb, var(--accent) 45%, transparent); }
    dialog .xf-notices { position: sticky; right: auto; bottom: 0; width: 100%; margin-top: 20px; }
    @keyframes notice-progress { to { transform: scaleX(0); } }
    @keyframes notice-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    @media (max-width: 820px) {
        .custom-control { font-size: 16px; min-height: 44px; }
        .xf-notices { right: 18px; }
    }

    /* A small secondary disclosure: "+ Steuerliche Angaben" */
    .optional > summary {
        display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer;
        padding: 14px 0; color: var(--muted); font-size: 13px;
    }
    .optional > summary::-webkit-details-marker { display: none; }
    .optional > summary:hover { color: var(--accent); }
    .optional > summary .icon { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
    .optional[open] > summary .icon { transform: rotate(45deg); }
    .optional__meta { margin-left: auto; font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
    .optional__content { padding: 7px 0 23px; animation: unfold 0.2s ease; }

    .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 22px; }
    .field-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .field-grid > .span-full { grid-column: 1 / -1; }

    .icon-button { display: inline-grid; place-items: center; width: 30px; height: 34px; padding: 4px; border: 0; border-radius: 4px; background: none; color: var(--muted); }
    .icon-button:hover { background: var(--pale); color: var(--accent); }
    .icon-button .icon { width: 18px; height: 18px; }

    .eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 1.25px; text-transform: uppercase; }

    @keyframes unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
}

/* ------------------------------------------------------------------ pages */

@layer pages {
    /* Auth and small forms */
    .auth { display: grid; gap: var(--space-5); max-width: 26rem; margin-inline: auto; }
    .auth__foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; font-size: var(--text-sm); }

    /* ============================================================ editor
       The invoice workspace (handoff: InvoiceEditorPage). One continuous
       document divided by fine rules, a narrow sticky preview rail. */

    .workspace { width: 100%; max-width: 1440px; margin: 0 auto; padding: 48px 50px 0; }
    .page-heading { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 43px; }
    .page-heading h1 { margin: 0 0 12px; font-size: 35px; line-height: 1.25; letter-spacing: -1.3px; }
    .page-heading__lead { margin: 0; color: var(--muted); font-size: 15px; }
    .mobile-break { display: none; }

    .work-layout { display: grid; grid-template-columns: minmax(0, 1fr) 278px; gap: 64px; }
    .editor { min-width: 0; }

    /* Section anchors: orientation, not a wizard */
    .section-nav { display: flex; gap: 36px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
    .section-nav a { position: relative; display: inline-flex; align-items: baseline; gap: 10px; padding: 0 0 17px; color: var(--muted); font-size: 15px; text-decoration: none; }
    .section-nav a:hover { color: var(--accent); }
    .section-nav__num { color: var(--muted); font-size: 12px; }
    .section-nav a.is-active { color: var(--accent); }
    .section-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
    .section-nav__state { display: none; }
    .section-nav__state.is-error { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; align-self: center; }

    /* Error summary: a fine rule, not a box */
    .error-summary { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 26px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: var(--space-5); }
    .error-summary > .icon { color: var(--danger); margin-top: 3px; }
    .error-summary:focus { outline: none; }
    .error-summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--danger) 45%, transparent); outline-offset: 4px; }
    .error-summary__title { color: var(--danger); font-size: 17px; font-weight: 700; letter-spacing: 0; }
    .error-summary__list { margin: 8px 0 0; padding-left: 1.1rem; font-size: 14px; }
    .error-summary__list li + li { margin-top: 4px; }
    .error-summary__list a { color: var(--danger); }

    .editor-section { scroll-margin-top: var(--space-5); }
    /* Reached from the section navigation: the heading holds the focus - or,
       where it is not visible (01 Angaben), the section. */
    .editor-section h2[tabindex="-1"]:focus, .editor-section[tabindex="-1"]:focus { outline: none; }
    .editor-section h2[tabindex="-1"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
    .editor-section[tabindex="-1"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 6px; }

    /* 01 Angaben */
    .invoice-meta { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; }
    .type-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; max-width: 46rem; }
    .case-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 30px; margin-top: 22px; }
    .case-fields > .span-full { grid-column: 1 / -1; }

    .parties { display: grid; grid-template-columns: minmax(0, 1fr) 45px minmax(0, 1fr); gap: 12px; align-items: start; padding: 35px 0 25px; }
    .party { min-width: 0; }
    .party__summary { position: relative; display: block; list-style: none; cursor: pointer; border-radius: 3px; }
    .party__summary::-webkit-details-marker { display: none; }
    .party__label { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
    .party__label > [data-role-prefix] { text-transform: uppercase; }
    .party__role { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
    .party__name { display: block; font-size: 19px; letter-spacing: -0.3px; overflow-wrap: anywhere; }
    .party__name.is-empty { color: var(--muted); }
    .party__address { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
    .party__edit { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--accent); font-size: 13px; }
    .party__edit .icon { width: 13px; height: 13px; }
    .party[open] .party__edit { color: var(--muted); }
    .party__summary:hover .party__edit { text-decoration: underline; }
    .party__fields { padding-top: 20px; animation: unfold 0.2s ease; }
    .party__note { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
    .party__note a { color: var(--accent); }
    .party__remember { display: grid; gap: 6px; padding-top: 14px; }
    .party__remember .lf__hint { margin: 0; }
    .party__own { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0 0 14px; color: var(--muted); font-size: 13px; }
    .party__done { display: inline-flex; align-items: center; gap: 10px; padding: 17px 0 0; border: 0; background: none; color: var(--accent); font-size: 14px; }
    .party__done .icon { width: 16px; height: 16px; }
    .parties__direction { padding-top: 45px; color: #a2abc0; }
    .parties__direction .icon { width: 20px; height: 20px; transition: transform 0.2s var(--ease); }
    .parties.is-self-billing .parties__direction .icon { transform: scaleX(-1); }
    .party .combobox { position: relative; }
    /* Festnetz and Mobil flow into the grid of the party that holds them. */
    .own-phones, .own-phones-slot { display: contents; }

    .references { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

    /* 02 Positionen: set well apart from the parties above - space, not
       another rule or card (smaller screens: 1200px and 820px below). */
    .positions-section { padding-top: 84px; }
    .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 23px; }
    .section-heading h2 { font-size: 27px; letter-spacing: -0.7px; }
    .item-count { margin-left: 12px; color: var(--muted); font-size: 12px; letter-spacing: 0; vertical-align: middle; }
    .tax-mode { display: flex; flex-direction: column; gap: 3px; text-align: right; }
    .tax-mode > label { color: var(--muted); font-size: 12px; }
    .tax-mode select { border: 0; background: transparent; color: var(--ink); font-size: 14px; padding: 4px 26px 4px 0; text-align: right; }
    .tax-mode select:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }

    .tax-detail { max-width: 460px; margin: 0 0 25px auto; display: grid; gap: 14px; }
    .tax-detail__note { margin: 0; color: var(--muted); font-size: 13px; }
    .tax-detail__note.is-requirement { color: var(--ink-2); }
    .delivery { display: grid; gap: 10px; }

    .items { container-type: inline-size; }
    /* The VAT column is wider than the handoff's (62px): every choice - also
       "anderer Satz" beside the select's arrow - is read in full. */
    .items-heading, .item { display: grid; grid-template-columns: minmax(140px, 1fr) 52px 70px 92px 104px 109px 24px; gap: 12px; }
    .items-heading { padding: 0 0 12px 27px; border-bottom: 1px solid var(--rule-2); color: var(--muted); font-size: 12px; text-transform: uppercase; }
    .items-heading span:nth-child(4), .items-heading span:nth-child(6) { text-align: right; }
    .items__list { margin: 0; padding: 0; list-style: none; }
    .item { position: relative; align-items: start; padding: 22px 0 20px 27px; border-bottom: 1px solid var(--line); transition: background 0.2s; }
    .item:focus-within, .item.is-expanded { background: linear-gradient(90deg, var(--row-tint), transparent); }
    .item__number { position: absolute; left: 0; top: 31px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
    .item__main { min-width: 0; }
    .item__name {
        display: block; width: 100%; height: 34px; padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
        background: transparent; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.3px; outline: none;
    }
    .item__name::placeholder { color: #8791a3; font-weight: 400; }
    .item__name:focus { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
    .item__name[aria-invalid="true"] { border-color: var(--danger); }
    .item__toggle { padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 13px; text-align: left; }
    .item__toggle:hover { color: var(--accent); }
    .item__cell { display: block; min-width: 0; }
    .item__label { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .item__input {
        display: block; width: 100%; height: 34px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
        background: transparent; color: var(--ink); font-size: 14px; outline: none; font-variant-numeric: tabular-nums;
    }
    .item__input:focus { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
    .item__input[aria-invalid="true"] { border-color: var(--danger); }
    .item__input:disabled { color: var(--ink-2); cursor: default; }
    .item__cell--price .item__input { text-align: right; }
    .item__amount { padding-top: 7px; font-size: 15px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .item__chevron .icon { transition: transform 0.2s var(--ease); }
    .item.is-expanded .item__chevron .icon { transform: rotate(180deg); }
    .item__errors { grid-column: 1 / -1; display: grid; gap: 2px; }
    .item__errors:not(:has(> :not([hidden]))) { display: none; }
    .item__details { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 30px; align-items: end; padding: 10px 0 0; animation: unfold 0.2s ease; }
    .item__rate { max-width: 220px; }
    .item__implied { margin: 0; color: var(--muted); font-size: 13px; }
    .item__actions { display: flex; gap: 25px; justify-content: flex-end; grid-column: 2; }
    .item__actions button { display: inline-flex; align-items: center; gap: 7px; padding: 5px; border: 0; background: none; color: var(--muted); font-size: 13px; }
    .item__actions button:hover { color: var(--accent); }
    .item__actions .icon { width: 15px; height: 15px; }

    .add-item { display: flex; align-items: center; gap: 10px; padding: 20px 0; border: 0; background: none; color: var(--accent); font-size: 14px; }
    .add-item > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--pale); }
    .add-item .icon { width: 15px; height: 15px; }
    .add-item:disabled { cursor: not-allowed; opacity: 0.5; }
    .items-limit { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

    .items-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0 34px; }
    .items-bottom__notes { max-width: 240px; }
    .items-bottom__notes > p { margin: 6px 0; color: var(--muted); font-size: 12px; }
    .items-bottom__notes > .money-note { color: var(--ink-2); }
    .money-note:empty { display: none; }
    .totals-block { width: 290px; max-width: 100%; margin: 0; font-variant-numeric: tabular-nums; }
    .totals-block > div { display: flex; justify-content: space-between; gap: 15px; padding: 5px 0; color: var(--muted); font-size: 14px; }
    .totals-block dd { margin: 0; text-align: right; white-space: nowrap; }
    .totals-block > .grand-total { align-items: center; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); }
    .grand-total dd { font-size: 24px; font-weight: 700; letter-spacing: -0.8px; }
    .totals-block__note { margin: 8px 0 0; color: var(--muted); font-size: 12px; text-align: right; }

    /* 03 Abschluss */
    .finish-section { padding: 31px 0 35px; border-top: 1px solid var(--line); }
    .section-heading__aside { color: var(--muted); font-size: 13px; }
    .finish-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 35px; padding: 25px 0; }
    /* A rule between two rows only: after the last one (Dateiformat) the
       check draws the one line (.invoice-check), not a second. */
    .finish-row + .finish-row { border-top: 1px solid var(--line); }
    .row-context h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; letter-spacing: 0; }
    .row-context p { max-width: 170px; margin: 0; color: var(--muted); font-size: 13px; }
    .row-controls { min-width: 0; }
    .row-controls > .optional { margin-top: 12px; }
    .row-controls > .field-grid + .field-grid { margin-top: 17px; }

    .choice-line { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
    .choice-line label { position: relative; display: inline-flex; cursor: pointer; }
    .choice-line input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
    .choice-line span { padding: 5px 0; border-bottom: 1px solid transparent; color: var(--muted); font-size: 13px; }
    .choice-line label:hover span { color: var(--accent); }
    .choice-line input:checked + span { color: var(--accent); border-color: var(--accent); }
    .choice-line input:checked + span::before { content: "\2713"; margin-right: 6px; }
    .choice-line input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
    .service-fields { margin-top: 20px; }

    /* OutputFormatPicker (Design Handoff v2): two equal blocks, each the
       label of a real radio button - clickable as a whole, arrow keys move
       between them. The radio is drawn as the round mark at the top right. */
    .output-format { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
    .output-option {
        position: relative; display: block; min-width: 0; min-height: 158px; padding: 20px 18px 18px;
        border: 1px solid var(--control-border); border-radius: 10px; background: var(--sheet); color: var(--ink); cursor: pointer;
        transition: border-color 0.2s, background 0.2s, transform 0.2s;
    }
    .output-option:hover { border-color: var(--accent); transform: translateY(-2px); }
    .output-option input { position: absolute; top: 19px; right: 17px; width: 17px; height: 17px; margin: 0; opacity: 0; cursor: pointer; }
    .output-option__kind { display: block; margin: 0 26px 14px 0; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
    .output-option__mark { position: absolute; top: 19px; right: 17px; width: 17px; height: 17px; border: 1px solid var(--control-border); border-radius: 50%; background: var(--sheet); pointer-events: none; }
    /* On narrow phones a block leaves its text little room (107 px at
       320 px): a longer word ("Rechnungseingangsportal") breaks instead of
       crossing the block's border - at 320 px it even widened the page. */
    .output-option__text { overflow-wrap: break-word; }
    .output-option strong { display: block; font-size: 15px; font-weight: 700; }
    .output-option small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .output-option:has(input:checked) { --muted: var(--muted-selected); border-color: var(--accent); background: var(--control-selected); }
    .output-option:has(input:checked) strong { color: var(--accent); }
    .output-option:has(input:checked) .output-option__mark { border-color: var(--accent); background: var(--accent); }
    .output-option:has(input:checked) .output-option__mark::after {
        content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
        border: solid var(--accent-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
    }
    .output-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
    .row-controls > .output-format + .optional { margin-top: 12px; }

    .finish-action { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; font-size: 13px; }
    .finish-action > span { display: flex; gap: 9px; align-items: center; color: var(--muted); }
    .finish-action .icon { width: 18px; height: 18px; }
    .text-action { display: inline-flex; gap: 10px; align-items: center; padding: 6px 0; border: 0; background: none; color: var(--button-link-fg); font-size: 14px; white-space: nowrap; cursor: pointer; }
    .text-action:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 2px; border-radius: 2px; }
    .text-action .icon { width: 17px; height: 17px; }

    /* Preview rail (InvoicePreviewRail) */
    .preview-rail { align-self: stretch; padding: 20px 22px; border-radius: 4px; background: var(--canvas); color: var(--ink); }
    /* Below the sticky header (Design Handoff v4) - and on a window too short
       for the whole preview higher up, so that its end ("Rechnung
       erstellen", the note why it waits) stays above the footer; then the
       sheet's top passes under the header instead (--rail-height:
       invoice-editor.js). */
    .preview-sticky { position: sticky; top: min(calc(var(--header-height) + 23px), calc(100dvh - var(--footer-height) - 16px - var(--rail-height, 0px))); }
    .preview-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
    .preview-heading h2 { font-size: 14px; letter-spacing: 0; }
    .preview-heading .icon-button .icon { width: 16px; height: 16px; }
    .paper-button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; transition: transform 0.3s var(--ease); }
    .paper-button:hover { transform: translateY(-3px); }
    .paper-button:focus-visible { outline-offset: 7px; }

    /* The miniature invoice: always paper white, in both themes, in the
       hierarchy and greys of the PDF's layout 4 (PdfLetterhead4) - the logo
       top left, the sender right-aligned top right, the window with the
       return line and the addressee (its name leading) beside the
       information block on the right edge, title and number, positions,
       totals and the footer's three columns - left, centred, right - with
       the legal line on the bottom edge. A column: the positions give way
       when the sheet is full, the footer keeps its place. */
    .paper {
        position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 210 / 297; overflow: hidden;
        padding: 16px 16px 12px; background: #fff; box-shadow: 0 8px 20px rgb(37 53 84 / 6%), 0 0 0 1px #e8ebf0;
        color: var(--print-text); font-size: 5px; line-height: 1.5;
    }
    .paper > span { flex: none; }
    .paper-letterhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 10px; }
    .paper-logo-area { display: flex; flex: 0 1 42%; align-items: center; min-width: 0; }
    .paper-seller { display: block; flex: 0 1 56%; min-width: 0; color: var(--print-muted); font-size: 3.6px; line-height: 1.45; text-align: right; overflow-wrap: anywhere; }
    .paper-issuer { display: block; margin-bottom: 1.5px; color: var(--print-ink); font-size: 6.5px; line-height: 1.2; }
    .paper-seller__group { display: block; }
    .paper-seller__group + .paper-seller__group:not(:empty) { margin-top: 1.5px; }
    .paper-address-row { display: grid; grid-template-columns: minmax(0, 48%) minmax(0, 1fr); gap: 10px; min-height: 48px; }
    .paper-window { display: block; min-width: 0; }
    .paper-return { display: block; margin-bottom: 2px; color: var(--print-quiet); font-size: 3.2px; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .paper-address { display: block; color: var(--print-text); font-size: 5px; line-height: 1.45; overflow-wrap: anywhere; }
    .paper-address > .paper-name, .large-paper-recipient > .paper-name { color: var(--print-ink); }
    .paper-address > .paper-name { font-size: 5.2px; }
    .paper-info { display: grid; grid-template-columns: auto minmax(0, max-content); gap: 0 4px; align-content: start; justify-self: end; font-size: 3.6px; line-height: 1.6; }
    .paper-info > span:nth-child(odd) { color: var(--print-quiet); white-space: nowrap; }
    .paper-info > span:nth-child(even) { color: var(--print-ink); overflow-wrap: anywhere; }
    .paper-title { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 7px; min-width: 0; }
    .paper-title__text { color: var(--print-ink); font-size: 11px; line-height: 1.15; letter-spacing: -0.2px; }
    .paper-title__number { min-width: 0; overflow: hidden; color: var(--print-quiet); font-size: 5px; white-space: nowrap; text-overflow: ellipsis; }
    .paper-columns, .paper-lines > span { display: flex; justify-content: space-between; gap: 8px; padding: 3.5px 0; border-bottom: 1px solid var(--print-line); }
    .paper-columns { border-bottom-color: var(--print-rule); color: var(--print-quiet); font-size: 3.8px; }
    .paper > .paper-lines { display: block; flex: 0 1 auto; min-height: 0; overflow: hidden; }
    .paper-lines span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .paper-lines span:last-child { white-space: nowrap; }
    .paper-more { color: var(--print-quiet); }
    .paper-totals { display: block; width: 58%; margin: 5px 0 0 auto; font-variant-numeric: tabular-nums; }
    .paper-totals > span { display: flex; justify-content: space-between; gap: 6px; padding: 1.5px 0; color: var(--print-muted); }
    .paper-totals > span > span:last-child { white-space: nowrap; }
    .paper-totals > .paper-total { margin-top: 1.5px; padding-top: 3px; border-top: 1px solid var(--print-rule); color: var(--print-ink); font-size: 6px; font-weight: 700; }
    .paper > .paper-footer {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding-top: 4px;
        border-top: 1px solid var(--print-rule); color: var(--print-quiet); font-size: 3px; line-height: 1.45;
    }
    .paper-footer > span { display: block; min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
    .paper-footer > span:nth-child(2) { text-align: center; }
    .paper-footer > span:nth-child(3) { text-align: right; }
    .paper > .paper-legal { margin-top: 2px; overflow: hidden; color: var(--print-quiet); font-size: 2.8px; line-height: 1.45; text-align: center; overflow-wrap: anywhere; }

    /* The small document's physical response (Design Handoff v4,
       paper-motion.js): while a fine pointer rests on it, the sheet tilts a
       little towards it (at most 1.8° up/down and 2.2° sideways), a soft
       light follows and its shadow moves; it settles back when the pointer
       leaves. Only these CSS values change - the preview, a click or a key
       that opens the large one stay as they are. Nothing moves on touch
       screens or with reduced motion (and no endless animation at all). */
    .paper-button.xf-paper-motion { perspective: 1100px; overflow: visible; transform: none; transition: none; }
    .xf-paper-motion .paper {
        isolation: isolate; transform: rotateX(var(--paper-rx, 0deg)) rotateY(var(--paper-ry, 0deg)); transform-origin: 50% 50%;
        box-shadow: 0 4px 14px rgb(38 48 74 / 4%), 0 1px 3px rgb(38 48 74 / 2%);
        transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.65s;
    }
    .xf-paper-motion .paper::after {
        content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
        background: linear-gradient(118deg, rgb(89 99 135 / 4%) 0%, transparent 32%, rgb(255 255 255 / 70%) 48%, rgb(170 178 217 / 15%) 61%, transparent 80%);
        background-position: var(--paper-light, 50%) 50%; background-size: 180% 100%;
        transition: opacity 0.5s, background-position 0.5s;
    }
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
        .xf-paper-motion.is-paper-active .paper {
            box-shadow: var(--paper-shadow-x, 0px) 15px 28px -12px rgb(38 48 74 / 19%), 0 2px 5px rgb(38 48 74 / 5%);
            transition: transform 0.2s ease-out, box-shadow 0.45s;
        }
        .xf-paper-motion.is-paper-active .paper::after { opacity: 0.7; }
        .xf-paper-motion:focus-visible .paper { box-shadow: 0 10px 25px -12px color-mix(in srgb, var(--accent) 22%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) {
        .xf-paper-motion .paper { transform: none !important; transition: none; }
        .xf-paper-motion .paper::after { display: none; }
    }

    .preview-caption { display: flex; justify-content: space-between; margin-top: 15px; color: var(--muted-canvas); font-size: 12px; }
    .output-summary { display: flex; gap: 12px; align-items: center; padding: 25px 0 19px; }
    .output-summary > .icon { width: 23px; height: 23px; color: var(--accent); }
    .output-summary strong { display: block; font-size: 14px; }
    .output-summary span { display: block; margin-top: 4px; color: var(--muted-canvas); font-size: 12px; }
    /* The large call to action (Design Handoff v2) in the button system's
       primary colours (@layer components, "Buttons"). */
    .primary {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 49px; padding: 12px 17px;
        border: 1px solid var(--button-primary-border); border-radius: var(--button-radius); background: var(--button-primary-surface); color: var(--button-primary-fg); font-size: 14px; text-align: left;
        cursor: pointer; transition: background 0.2s, transform 0.2s;
    }
    .primary:hover { background: var(--button-primary-bg-hover); border-color: var(--button-primary-bg-hover); transform: translateY(-1px); }
    .primary:active { transform: translateY(0); }
    .primary:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 3px; }
    .primary .icon { width: 18px; height: 18px; }
    .primary[aria-busy="true"] { opacity: 0.75; }
    /* Not ready yet (invoice-editor.js): the quiet look of a secondary
       button - still focusable and clickable, it leads to the check. */
    .primary[data-ready="false"] { border-color: var(--button-secondary-border); background: var(--button-secondary-bg); color: var(--muted); }
    .primary[data-ready="false"]:hover { border-color: var(--button-secondary-border-hover); background: var(--button-secondary-bg); transform: none; }
    .submit-note { margin: 10px 0 0; color: var(--muted-canvas); font-size: 12px; line-height: 1.5; text-align: center; }
    .download-note { margin: 13px 0 0; color: var(--muted-canvas); font-size: 12px; line-height: 1.6; text-align: center; }
    .download-note a { color: var(--accent); }

    /* Preview dialog (InvoicePreviewDialog) */
    .preview-dialog { width: 760px; max-width: calc(100% - 32px); max-height: 90dvh; padding: 28px 35px; border: 0; border-radius: 10px; background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-pop); overflow: hidden; }
    .preview-dialog[open] { display: flex; flex-direction: column; }
    .preview-dialog__scroll { min-height: 0; overflow: auto; border-radius: 2px; }
    .preview-dialog__scroll:focus-visible { outline-offset: -2px; }
    .preview-dialog::backdrop { background: rgb(24 34 59 / 33%); backdrop-filter: blur(5px); }
    .preview-dialog__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
    .dialog-eyebrow { margin: 0; color: var(--muted-canvas); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
    /* The large preview in the hierarchy and greys of the PDF's layout 4:
       letterhead, window and information block, title, positions, totals,
       payment, the closing text, and the footer's three columns - left,
       centred, right - with the legal line at the end of the sheet. */
    .large-paper {
        display: flex; flex-direction: column; min-height: 900px; padding: 40px 44px 30px;
        background: #fff; color: var(--print-text); font-size: 13px; line-height: 1.5; box-shadow: 0 4px 20px rgb(23 35 59 / 4%);
    }
    .large-paper-letterhead { display: flex; justify-content: space-between; align-items: center; gap: 28px; min-height: 84px; margin-bottom: 30px; }
    .large-paper-logo-area { display: flex; flex: 0 1 42%; align-items: center; min-width: 0; }
    .large-paper-logo { display: block; max-width: 100%; max-height: 72px; object-fit: contain; object-position: left center; }
    .large-paper-seller { flex: 0 1 52%; min-width: 0; margin: 0; color: var(--print-muted); font-size: 11.5px; line-height: 1.5; text-align: right; overflow-wrap: anywhere; }
    .large-paper-seller > strong { display: block; margin-bottom: 5px; color: var(--print-ink); font-size: 17px; font-weight: 400; line-height: 1.3; }
    .large-paper-seller > span { display: block; }
    .large-paper-seller > span + span:not(:empty) { margin-top: 5px; }
    .large-paper-address-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 40px; align-items: start; min-height: 150px; }
    .large-paper-return { margin: 0 0 8px; color: var(--print-quiet); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
    .large-paper-recipient { margin: 0; color: var(--print-text); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
    .large-paper-recipient > .paper-name { font-size: 14px; }
    .large-paper-info { display: grid; grid-template-columns: max-content minmax(0, max-content); gap: 3px 14px; justify-self: end; margin: 0; font-size: 12.5px; line-height: 1.45; }
    .large-paper-info dt { color: var(--print-quiet); font-size: 11.5px; }
    .large-paper-info dd { margin: 0; color: var(--print-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .large-paper-title { margin: 26px 0 0; color: var(--print-ink); font-size: 25px; font-weight: 400; line-height: 1.25; letter-spacing: -0.4px; overflow-wrap: anywhere; }
    .large-paper-number { color: var(--print-quiet); font-size: 14px; letter-spacing: 0; }
    .large-paper-note { margin: 10px 0 0; color: #444444; font-size: 13px; overflow-wrap: anywhere; }
    .large-paper-message { margin: 18px 0 0; overflow-wrap: anywhere; }
    .large-paper-items { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: 12.5px; }
    .large-paper-items th { padding: 0 6px 7px; border-bottom: 1px solid var(--print-rule); color: var(--print-quiet); font-size: 11px; font-weight: 400; text-align: left; white-space: nowrap; }
    .large-paper-items td { padding: 9px 6px; border-bottom: 1px solid var(--print-line); vertical-align: top; }
    .large-paper-items th:first-child, .large-paper-items td:first-child { padding-left: 0; color: var(--print-quiet); font-size: 11px; }
    .large-paper-items th:last-child, .large-paper-items td:last-child { padding-right: 0; }
    .large-paper-items td:nth-child(2) { width: 100%; overflow-wrap: anywhere; }
    .large-paper-items .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .large-paper-line-detail { display: none; }
    .large-paper-totals { width: min(100%, 310px); margin: 14px 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; }
    .large-paper-totals > div { display: flex; justify-content: space-between; gap: 20px; padding: 3px 0; }
    .large-paper-totals > div[hidden] { display: none; }
    .large-paper-totals dt { color: var(--print-muted); }
    .large-paper-totals dd { margin: 0; white-space: nowrap; }
    .large-paper-totals > .large-paper-gross { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--print-rule); color: var(--print-ink); font-size: 15px; font-weight: 700; }
    .large-paper-totals > .large-paper-gross dt { color: inherit; }
    .large-paper-totals > .large-paper-final { color: var(--print-quiet); }
    .large-paper-totals > .large-paper-final dt { color: inherit; }
    .large-paper-closing { margin: 26px 0 40px; font-size: 12.5px; }
    .large-paper-closing > .large-paper-note { margin: 0 0 12px; }
    .large-paper-eyebrow { margin: 0 0 5px; color: var(--print-quiet); font-size: 11px; font-weight: 400; letter-spacing: 0; }
    .large-paper-payment { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 18px; margin: 0; }
    .large-paper-payment dt { color: var(--print-quiet); font-size: 11.5px; }
    .large-paper-payment dd { margin: 0; color: var(--print-ink); overflow-wrap: anywhere; }
    .large-paper-closing > .large-paper-note:last-child { margin: 12px 0 0; }
    /* The closing text: document text after the payment, not a footnote. */
    .large-paper-outro { margin: -14px 0 40px; color: var(--print-text); font-size: 13px; overflow-wrap: anywhere; }
    .large-paper-footer { margin-top: auto; color: var(--print-quiet); font-size: 10.5px; line-height: 1.5; }
    .large-paper-footer__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 10px; border-top: 1px solid var(--print-rule); }
    .large-paper-footer__columns > p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
    .large-paper-footer__columns > p:first-child::first-line { color: var(--print-text); }
    .large-paper-footer__columns > p:nth-child(2) { text-align: center; }
    .large-paper-footer__columns > p:nth-child(3) { text-align: right; }
    .large-paper-footer__legal { margin: 8px 0 0; text-align: center; overflow-wrap: anywhere; }
    .preview-explanation { margin-top: 26px !important; padding-top: 12px; border-top: 1px dashed var(--print-line); color: var(--print-quiet); font-size: 11px; }

    @media (max-width: 680px) {
        .large-paper-items th:nth-child(3), .large-paper-items td:nth-child(3),
        .large-paper-items th:nth-child(4), .large-paper-items td:nth-child(4),
        .large-paper-items th:nth-child(5), .large-paper-items td:nth-child(5) { display: none; }
        .large-paper-line-detail { display: block; margin-top: 3px; color: var(--print-quiet); font-size: 11px; }
    }

    /* Mobile total + preview (MobileInvoiceDock) */
    .mobile-dock { display: none; }

    /* The account's logo in the previews where layout 3 prints it: top
       left, whole, in its own proportions. */
    .paper-logo { display: block; max-width: 100%; max-height: 26px; object-fit: contain; object-position: left center; }

    /* Where the work is kept (autosave): quiet, next to the heading. */
    .save-state {
        --muted: var(--muted-canvas);
        display: inline-flex; flex: none; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 5px;
        background: var(--canvas); color: var(--muted); font-size: 12px; white-space: nowrap;
    }
    /* The point beside the words (which alone tell the state): saved, a
       small green point with a soft halo - lit, never flashing; the halo
       fades in as a save completes (a transition, so quick saves in a row
       never restart it). Saving: the accent colour, breathing slowly. */
    .save-state__mark {
        flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--live);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 18%, transparent), 0 0 7px 1px color-mix(in srgb, var(--live) 50%, transparent);
        transition: background-color 240ms var(--ease), box-shadow 420ms var(--ease);
    }
    .save-state[data-state="saving"] .save-state__mark { background: var(--accent); box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; animation: save-breathe 1.8s ease-in-out infinite; }
    .save-state[data-state="error"], .save-state[data-state="blocked"] { background: var(--danger-soft); color: var(--danger); }
    .save-state[data-state="error"] .save-state__mark, .save-state[data-state="blocked"] .save-state__mark { background: var(--danger); box-shadow: none; }
    .save-state[data-state="local"] .save-state__mark { background: var(--muted); box-shadow: none; }
    .save-state__action { flex: none; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; }
    .save-state[data-state="error"] .save-state__action, .save-state[data-state="blocked"] .save-state__action { color: var(--danger); }
    @keyframes save-breathe { 50% { opacity: 0.55; } }
    @media (prefers-reduced-motion: reduce) { .save-state[data-state="saving"] .save-state__mark { animation: none; } }

    /* Open drafts of the account, offered to a new invoice. */
    .draft-notice {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
        margin: -14px 0 32px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px;
    }
    .draft-notice__text { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; min-width: 0; }
    .draft-notice__text > :first-child { font-weight: 700; }
    .draft-notice__meta { color: var(--muted); overflow-wrap: anywhere; }
    .draft-notice__actions { display: flex; align-items: center; gap: 22px; }
    .draft-notice__all { font-size: 13px; }

    /* "Fertig" and, for a counterparty that is no contact yet, "In Kontakten speichern". */
    .party__actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 24px; }
    .contact-save-slot { min-width: 0; max-width: 100%; }
    .contact-save-slot:empty { display: none; }
    .contact-save { padding-top: 17px; max-width: 100%; }
    .contact-save[hidden] { display: none; }
    .contact-save__status .link-button { margin-left: 10px; font-size: 13px; }

    /* Saved contacts found while typing the name (accounts): part of the
       form, not a floating box - also full width with large rows on a phone. */
    .contact-suggestions {
        margin: 8px 0 0; padding: 4px; list-style: none; max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
        border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); box-shadow: 0 8px 24px rgb(38 50 81 / 6%);
    }
    .field-grid > .contact-suggestions { grid-column: 1 / -1; margin-top: -8px; }
    .contact-suggestion { display: grid; gap: 2px; min-height: 48px; padding: 10px 12px; border-radius: 6px; cursor: pointer; }
    .contact-suggestion[aria-selected="true"], .contact-suggestion:hover { --muted: var(--muted-canvas); background: var(--pale); }
    .contact-suggestion[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent); }
    .contact-suggestion__name { color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
    .contact-suggestion__meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

    /* Rechnungs-Check (Design Handoff v2, "Was steht in Ihrer Rechnung?") */
    .invoice-check { margin-top: 12px; padding: 38px 0 25px; border-top: 1px solid var(--line); scroll-margin-top: var(--space-5); }
    .check-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; margin-bottom: 25px; }
    .check-heading h2 { font-size: 25px; letter-spacing: -0.5px; }
    /* Focused when "Rechnung erstellen" leads here (keyboard: visible ring). */
    .check-heading h2:focus { outline: none; }
    .check-heading h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
    .check-heading p { max-width: 550px; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
    .check-count { padding-top: 27px; color: var(--ok); font-size: 12px; white-space: nowrap; }
    .check-count.needs-input { color: var(--warn); }
    .check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
    .check-entry {
        display: flex; width: 100%; min-width: 0; align-items: center; gap: 12px; padding: 16px 0;
        border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left;
    }
    .check-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
    .check-text { flex: 1; min-width: 0; }
    .check-text strong { display: block; font-size: 13px; font-weight: 400; }
    .check-text small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .check-symbol { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 12px; }
    .check-entry.is-missing .check-symbol { background: var(--warn-soft); color: var(--warn); }
    .check-entry.is-missing small { color: var(--warn); }
    .check-edit { color: var(--accent); font-size: 14px; opacity: 0; transition: opacity 0.15s; }
    .check-entry:hover .check-edit, .check-entry:focus-visible .check-edit { opacity: 1; }
    .check-foot { margin: 20px 0 0; color: var(--muted); font-size: 12px; }

    /* The brand mark at the end of the page (x-brand-watermark): the flat
       SMACT wordmark, cut off at its base, sitting on the footer. The file
       itself is only 4 % grey - no further fading here, or it would vanish. */
    .brand-watermark { position: relative; margin-top: 40px; overflow: hidden; pointer-events: none; user-select: none; }
    .brand-watermark img { display: block; width: 100%; height: auto; }

    /* The editor's h1 begins with the eyebrow line (e-invoice/editor): it
       looks exactly like the eyebrow paragraph it replaced - body font and
       line height, its own line - and the headline follows unchanged. */
    .page-heading h1 .page-heading__eyebrow { display: block; margin: 0 0 8px; font-family: var(--font-sans); line-height: 1.5; }

    /* Below the workflow (e-invoice/editor/_about, docs/seo/XFACTURA_SEO_RELEASE2.md):
       quiet and after the tool - a short intro, the facts in a row, two
       links, the questions folded. */
    .about { display: grid; gap: 34px; margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--line); }
    .about__title { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: -0.6px; }
    .about__lead { max-width: 44rem; margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
    .about__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: 28px 40px; margin: 0; padding: 0; list-style: none; }
    .about__fact h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; letter-spacing: -0.2px; }
    .about__fact p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
    .about__links { display: flex; flex-wrap: wrap; gap: 4px 36px; margin: -12px 0 0; padding: 0; list-style: none; }
    /* Inline, so a wrapping link keeps its arrow after the last word. */
    .about__links .text-action, .viewer-about .text-action { display: inline; white-space: normal; }
    .about__links .text-action .icon, .viewer-about .text-action .icon { display: inline-block; margin-left: 8px; vertical-align: -3px; }
    .about__questions { display: grid; gap: 16px; max-width: 52rem; }
    .faq { border-top: 1px solid var(--line); }
    .faq__item { border-bottom: 1px solid var(--line); }
    .faq__question { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; line-height: 1.4; }
    .faq__question::-webkit-details-marker { display: none; }
    .faq__question .icon { width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s var(--ease); }
    .faq__item[open] > .faq__question .icon { transform: rotate(180deg); }
    .faq__question:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
    @media (hover: hover) { .faq__question:hover { color: var(--accent); } }
    .faq__answer { max-width: 44rem; margin: 0 0 18px; color: var(--ink-2); font-size: 14px; line-height: 1.7; }

    /* The viewer's explanation below its form (e-invoice/import). */
    .viewer-about { margin-top: var(--space-5); }
    .viewer-about h2 { margin-top: 0; }

    /* The guide "XRechnung oder ZUGFeRD?" (guide/formats): a reading page
       with one table - fixed columns that wrap, never wider than the text. */
    .guide > .prose, .guide > .guide__table, .guide > .guide__actions { margin-top: var(--space-5); }
    .guide__note { color: var(--muted); font-size: var(--text-sm); }
    .guide__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); line-height: 1.55; }
    .guide__table caption { margin-bottom: var(--space-2); color: var(--muted); font-size: var(--text-xs); text-align: left; }
    .guide__table th, .guide__table td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
    .guide__table thead th { border-bottom-color: var(--line-strong); color: var(--ink); font-weight: 700; }
    .guide__table thead th:first-child { width: 28%; }
    .guide__table tbody th { color: var(--ink); font-weight: 700; }
    .guide__table td { color: var(--ink-2); }
    .guide__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
    /* Phones: three columns would break the long German words - each aspect
       stands above its two values, the formats keep their two columns (the
       table's roles in guide/formats keep it a table for screen readers). */
    @media (max-width: 560px) {
        .guide__table, .guide__table caption, .guide__table thead, .guide__table tbody { display: block; }
        .guide__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; border-bottom: 1px solid var(--line); }
        .guide__table thead tr { border-bottom-color: var(--line-strong); }
        .guide__table th, .guide__table td { padding-right: 0; border-bottom: 0; }
        .guide__table thead th:first-child { display: none; }
        .guide__table tbody th { grid-column: 1 / -1; padding-bottom: 0; }
        .guide__table tbody td { padding-top: 4px; }
    }

    /* The selects of a position row and of "Besteuerung" (controls.js). */
    .item__cell .custom-control { height: 34px; min-height: 34px; padding: 4px 0; gap: 3px; border-color: var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
    .item__cell .custom-control > .icon { width: 10px; height: 10px; }
    .tax-mode .custom-control { width: auto; min-height: 32px; padding: 3px 0; gap: 8px; border: 0; font-size: 14px; justify-content: flex-end; }
    .tax-mode .custom-control:focus-visible { outline-offset: 4px; }

    @media (min-width: 1700px) {
        .workspace { padding-top: 60px; }
        .page-heading { margin-bottom: 50px; }
        .work-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 76px; }
        .item { padding-top: 27px; padding-bottom: 25px; }
        .item__number { top: 36px; }
        .preview-rail { padding: 25px; }
    }

    @media (max-width: 1200px) {
        .workspace { padding: 36px 30px 0; }
        .positions-section { padding-top: 68px; }
        .page-heading h1 { font-size: 31px; }
        .work-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 32px; }
        .items-heading, .item { grid-template-columns: minmax(130px, 1fr) 44px 62px 78px 104px 94px 22px; gap: 8px; }
        .items-heading { font-size: 10px; }
        .item__name { font-size: 15px; }
        .preview-rail { padding: 17px; }
        .finish-row { grid-template-columns: 140px minmax(0, 1fr); gap: 22px; }
        .choice-line { gap: 13px; }
    }

    /* Tablet: one column, the preview after the form */
    @media (max-width: 1000px) {
        .workspace { max-width: 870px; }
        .page-heading { align-items: flex-start; }
        .work-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
        .invoice-meta { gap: 24px; }
        .items-heading, .item { grid-template-columns: minmax(150px, 1fr) 52px 70px 95px 104px 112px 25px; gap: 12px; }
        .items-heading { font-size: 11px; }
        .item__name { font-size: 16px; }
        .preview-rail { margin-top: 10px; padding: 25px; }
        .preview-sticky { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 35px; }
        .preview-heading { grid-column: 1 / -1; }
        .paper-button { grid-column: 1; grid-row: 2 / 7; max-width: 270px; justify-self: center; }
        .preview-caption { grid-column: 1; margin-top: 20px; }
        .output-summary, .preview-sticky > .primary, .submit-note, .download-note { grid-column: 2; }
        .output-summary { grid-row: 2; align-self: end; }
        .preview-sticky > .primary { grid-row: 3; align-self: start; }
        .submit-note { grid-row: 4; }
        .download-note { grid-row: 5; align-self: start; }
    }

    /* Phone: everything stacked, positions as compact blocks */
    @media (max-width: 820px) {
        body.is-editor { padding-bottom: calc(var(--footer-height) + 76px + var(--help-reach, 0px)); }
        .workspace { padding: 32px 22px 0; }
        .page-heading { display: block; margin-bottom: 27px; }
        .page-heading h1 { font-size: 29px; line-height: 1.3; letter-spacing: -0.8px; }
        .mobile-break { display: block; }
        .page-heading__lead { max-width: 300px; font-size: 14px; line-height: 1.7; }
        .eyebrow { font-size: 11px; letter-spacing: 1px; }

        .section-nav { gap: 0; justify-content: space-between; }
        .section-nav a { gap: 6px; font-size: 13px; }
        .section-nav__num { font-size: 11px; }

        .invoice-meta { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
        .invoice-meta > .type-field { grid-column: 1 / -1; }
        .case-fields { grid-template-columns: minmax(0, 1fr); }

        .parties { grid-template-columns: minmax(0, 1fr); gap: 25px; padding: 30px 0; }
        .parties__direction { display: none; }
        .party { position: relative; padding-left: 42px; }
        .party__label { margin-bottom: 4px; }
        .party__label::before { content: ""; position: absolute; left: -42px; top: 4px; width: 24px; height: 24px; border: 1px solid #d0d7ee; border-radius: 50%; }
        .party__label::after { content: ""; position: absolute; left: -35px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--pale); }
        .party__name { padding-right: 12px; font-size: 18px; }
        .party__edit { position: absolute; right: 0; top: 0; margin-top: 0; font-size: 12px; }
        .party__fields { margin-left: -42px; padding-top: 23px; }
        .optional > summary { flex-wrap: wrap; font-size: 12px; }
        .optional__meta { display: none; }
        .field-grid, .field-grid--three { grid-template-columns: minmax(0, 1fr); gap: 18px; }

        .positions-section { padding-top: 52px; }
        .positions-section > .section-heading { display: block; }
        .section-heading { align-items: flex-start; gap: 9px; margin-bottom: 20px; }
        .section-heading h2 { font-size: 25px; white-space: nowrap; }
        .tax-mode { flex-direction: row; align-items: center; gap: 15px; margin-top: 17px; text-align: left; }
        .tax-mode > .xf-select { margin-left: auto; }
        .tax-mode select { font-size: 14px; }
        .tax-detail { max-width: none; }

        .items-heading { display: none; }
        .item { grid-template-columns: 1fr 1fr 1.25fr 1fr; gap: 13px 15px; padding: 22px 0 18px; border-top: 1px solid var(--line); border-bottom: 0; }
        .item__number { top: 28px; left: 0; font-size: 11px; }
        .item__main { grid-column: 1 / -1; padding-left: 26px; padding-right: 25px; }
        .item__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin-bottom: 3px; color: var(--muted); font-size: 12px; }
        .item__label .visually-hidden { position: absolute !important; }
        .item__input { height: 40px; font-size: 16px; }
        .item__amount { grid-column: 3 / 5; grid-row: 3; padding-top: 0; font-size: 17px; font-weight: 700; }
        .item__amount::before { content: "Netto"; margin-right: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
        .item > .item__chevron { position: absolute; right: -2px; top: 22px; }
        .item__details { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
        .item__actions { grid-column: 1; justify-content: flex-start; }
        .add-item { width: 100%; border-top: 1px solid var(--line); }
        .items-bottom { display: block; padding-top: 0; }
        .items-bottom__notes { max-width: none; }
        .totals-block { width: 100%; margin-top: 25px; }

        .finish-section { padding-bottom: 25px; }
        .section-heading__aside { display: none; }
        .finish-row { grid-template-columns: minmax(0, 1fr); gap: 17px; padding: 23px 0; }
        .row-context p { max-width: none; }
        .choice-line { gap: 16px; }
        .finish-action { flex-direction: column; align-items: flex-start; gap: 15px; }

        .preview-rail { margin-top: 0; padding: 22px; border-radius: 5px; }
        .preview-sticky { display: block; }
        .paper-button { max-width: 240px; margin: auto; }
        .preview-caption { max-width: 240px; margin: 16px auto 0; }
        .preview-heading h2 { font-size: 15px; }
        .output-summary strong { font-size: 15px; }
        .primary { font-size: 15px; }

        .preview-dialog { padding: 20px 12px 15px; }
        .dialog-eyebrow { margin-left: 10px; font-size: 11px; }
        .large-paper { min-height: 0; padding: 22px 17px 18px; }
        .large-paper-letterhead { flex-direction: column; align-items: stretch; gap: 14px; min-height: 0; margin-bottom: 22px; }
        .large-paper-logo-area, .large-paper-seller { flex: none; }
        .large-paper-logo { max-height: 56px; }
        .large-paper-seller { text-align: left; }
        .large-paper-info { justify-self: start; }
        .large-paper-address-row { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; }
        .large-paper-title { font-size: 22px; }
        .large-paper-closing { margin-bottom: 28px; }
        .large-paper-footer__columns { grid-template-columns: minmax(0, 1fr); gap: 8px; }
        .large-paper-footer__columns > p:nth-child(n), .large-paper-footer__legal { text-align: left; }

        .mobile-dock {
            position: fixed; left: 0; right: 0; bottom: var(--footer-height); z-index: 30;
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
            border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent);
            backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 -5px 24px rgb(32 48 72 / 2%);
        }
        .mobile-dock__total span { display: block; color: var(--muted); font-size: 12px; }
        .mobile-dock__total strong { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
        .mobile-dock button { display: flex; align-items: center; gap: 14px; padding: 10px 0 10px 15px; border: 0; background: none; color: var(--accent); font-size: 14px; }
        .mobile-dock .icon { width: 17px; height: 17px; }
        body.is-editor .xf-notices { bottom: calc(var(--footer-height) + 82px + var(--help-reach, 0px)); }

        .check-heading { display: block; }
        .check-heading h2 { font-size: 24px; }
        .check-count { display: inline-block; padding: 10px 0 0; }
        .check-list { grid-template-columns: minmax(0, 1fr); }
        .output-format { gap: 10px; }
        .output-option { min-height: 182px; padding: 18px 12px; }
        .output-option strong { font-size: 14px; }
        .output-option__kind { margin-right: 22px; }
        .item__cell .custom-control { height: 40px; min-height: 40px; font-size: 16px; }
        .tax-mode .custom-control { margin-left: auto; }
        .save-state { margin-top: 16px; white-space: normal; }
        .draft-notice { margin-top: -6px; }
        .contact-save { justify-items: start; text-align: left; }
        .brand-watermark { margin-top: 25px; }
        .about { gap: 26px; margin-top: 64px; padding-top: 36px; }
        .about__title { font-size: 22px; letter-spacing: -0.4px; }
        .about__lead { font-size: 15px; }
        .about__links { flex-direction: column; gap: 2px; margin-top: -8px; }
    }

    /* Read invoice (upload or stored snapshot) */
    .doc { overflow: hidden; }
    .doc__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--line); }
    .doc__type { color: var(--muted); font-size: var(--text-sm); display: flex; gap: var(--space-2); align-items: baseline; }
    .doc__number { font-size: var(--text-2xl); overflow-wrap: anywhere; }
    .doc__dates { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--text-sm); }
    .doc__dates div { display: grid; }
    .doc__dates dt { color: var(--muted); font-size: var(--text-xs); }
    .doc__dates dd { margin: 0; font-variant-numeric: tabular-nums; }
    .doc__parties { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); padding: var(--space-5); border-bottom: 1px solid var(--line); }
    .doc__label { font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-2); letter-spacing: 0.04em; text-transform: uppercase; }
    .doc__party-name { font-weight: 700; overflow-wrap: anywhere; }
    .doc__party-line, .doc__party-id { font-size: var(--text-sm); color: var(--ink-2); overflow-wrap: anywhere; }
    .doc__party-line { margin-top: 0; }
    .doc__party-id { font-family: var(--font-mono); font-size: var(--text-xs); margin-top: var(--space-1); }
    .doc__facts { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
    .doc__facts:empty { display: none; }
    .doc__lines { border-bottom: 1px solid var(--line); }
    .doc__lines .table th:first-child, .doc__lines .table td:first-child { padding-left: var(--space-5); width: 3rem; }
    .doc__lines .table th:last-child, .doc__lines .table td:last-child { padding-right: var(--space-5); }
    .doc__sums { display: grid; gap: var(--space-5); padding: var(--space-5); grid-template-columns: 1fr; align-items: start; }
    @media (min-width: 48rem) { .doc__sums { grid-template-columns: 1fr 18rem; } }
    .doc__tax th:first-child, .doc__tax td:first-child { padding-left: 0; }
    .doc__totals { align-self: end; }

    /* Receipt */
    .receipt { display: grid; gap: var(--space-6); }
    .receipt__head { display: flex; gap: var(--space-4); align-items: flex-start; }
    .receipt__check { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
    .receipt__check .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.25; }
    .receipt__saved { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); color: var(--ok); font-size: var(--text-sm); }
    .receipt__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
    @media (min-width: 60rem) { .receipt__grid { grid-template-columns: 1.4fr 1fr; } }
    .downloads { list-style: none; margin: 0; padding: 0; }
    .download { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
    .download:last-child { border-bottom: 0; }
    .download__icon { color: var(--accent); align-self: start; margin-top: 0.15rem; }
    .download__title { font-weight: 700; }
    .download__hint { font-size: var(--text-xs); color: var(--muted); max-width: 34rem; }
    .download__action { grid-column: 2; justify-self: start; }
    @media (min-width: 40rem) {
        .download { grid-template-columns: auto 1fr auto; }
        .download__action { grid-column: auto; justify-self: end; }
    }
    /* The chosen format first and marked; the other representation after it. */
    .download__eyebrow { font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.02em; }
    .download.is-chosen .download__eyebrow { color: var(--accent); }
    .receipt__started { margin-top: var(--space-2); color: var(--ink-2); font-size: var(--text-sm); }
    .receipt__started:empty { display: none; }

    .receipt__note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: var(--sheet-2); color: var(--muted-canvas); font-size: var(--text-xs); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
    .receipt__note .icon { margin-top: 0.1rem; }
    .receipt__account { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-sm); }

    .fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-3); }
    .fieldset__legend { padding: 0; font-size: var(--text-lg); margin-bottom: var(--space-1); }

    /* Upload */
    .dropzone {
        display: grid; justify-items: center; gap: var(--space-2); text-align: center;
        padding: var(--space-6) var(--space-4); border: 1.5px dashed var(--field-border); border-radius: var(--radius-lg);
        background: var(--sheet-2); color: var(--ink-2); cursor: pointer; transition: border-color 120ms var(--ease), background 120ms var(--ease);
    }
    .dropzone .icon { color: var(--accent); }
    .dropzone:hover, .dropzone.is-dragging { border-color: var(--accent); background: var(--accent-soft); }
    .dropzone.has-focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
    .dropzone.has-file { border-style: solid; border-color: var(--accent); }
    .dropzone.is-invalid { border-color: var(--danger); background: var(--danger-soft); }
    .dropzone__title { font-weight: 700; color: var(--ink); }
    .dropzone__hint { font-size: var(--text-xs); color: var(--muted-canvas); max-width: 28rem; }
    .dropzone__file { font-size: var(--text-sm); color: var(--accent); overflow-wrap: anywhere; }

    /* "Ansehen" (Design Handoff v4, x-viewer-dialog): "Rechnung ansehen -
       Was steht drin?" - a calm, rounded dialog with one file choice (a
       dashed, lightly tinted field; drop a file on it or choose one) and
       the one action "Rechnung anzeigen". */
    .viewer-dialog {
        width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 38px;
        overflow-y: auto; overscroll-behavior: contain;
        border: 1px solid var(--control-border); border-radius: 21px; background: var(--sheet); color: var(--ink);
        box-shadow: 0 28px 100px rgb(38 50 82 / 14%);
    }
    .viewer-dialog::backdrop { background: rgb(41 50 73 / 13%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
    .viewer-dialog__close { position: absolute; top: 17px; right: 17px; width: 36px; height: 36px; }
    .viewer-dialog .eyebrow { margin: 0; }
    .viewer-dialog__title { margin: 20px 0 12px; font-size: 28px; letter-spacing: -1px; }
    .viewer-dialog__lead { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
    .viewer-dialog__error { margin: -8px 0 16px; }
    .viewer-dialog__keep { margin: 0 0 20px; }
    .viewer-dialog__note { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .file-choice {
        display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0 20px; padding: 28px 16px;
        border: 1px dashed color-mix(in srgb, var(--accent) 18%, var(--line-strong)); border-radius: 12px;
        background: color-mix(in srgb, var(--pale) 55%, var(--sheet)); color: var(--accent); font-size: 14px; text-align: center; cursor: pointer;
        transition: border-color 0.2s;
    }
    .file-choice__icon { width: 27px; height: 27px; }
    .file-choice__hint { max-width: 26rem; color: var(--muted-canvas); font-size: 12px; line-height: 1.5; }
    .file-choice__file { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
    .file-choice__file:empty { display: none; }
    .file-choice.is-dragging { border-color: var(--accent); background: var(--pale); }
    @media (hover: hover) { .file-choice:hover { border-color: var(--accent); background: var(--pale); } }
    .file-choice.has-focus { outline: 2px solid var(--accent); outline-offset: 4px; }
    .file-choice.has-file { border-style: solid; border-color: var(--accent); }
    .file-choice.is-invalid { border-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 60%, var(--sheet)); }
    @media (max-width: 680px) {
        .viewer-dialog { padding: 29px 23px; }
        .viewer-dialog__title { font-size: 25px; }
    }

    .source { overflow: hidden; }
    .source__summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); cursor: pointer; font-size: var(--text-sm); color: var(--accent); list-style: none; }
    .source__summary::-webkit-details-marker { display: none; }
    .source__code { margin: 0; max-height: 32rem; overflow: auto; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); background: var(--sheet-2); font-size: 0.75rem; line-height: 1.55; white-space: pre; tab-size: 2; }

    /* ============================================================ account
       Mein Bereich (Design Handoff v2, account.css): four views without a
       sidebar, headings like the editor's, fine rules, one table surface. */
    .account-workspace { max-width: 1370px; padding-bottom: 110px; }
    .account-nav { display: flex; align-items: center; gap: 36px; margin-bottom: 52px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
    .account-nav > a { position: relative; flex: none; padding: 0 0 20px; color: var(--muted); font-size: 14px; text-decoration: none; white-space: nowrap; }
    .account-nav > a:hover { color: var(--accent); }
    .account-nav > a[aria-current="page"] { color: var(--accent); }
    .account-nav > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
    .account-nav > .account-nav__new { display: inline-flex; gap: 22px; margin-left: auto; color: var(--accent); }

    .account-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
    .account-heading h1 { margin: 12px 0 0; font-size: 38px; line-height: 1.2; letter-spacing: -1.2px; }
    .account-heading__lead { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
    .account-heading__actions { flex: none; }
    .account-workspace h2 { font-size: 23px; letter-spacing: -0.4px; }
    /* The account's bordered action (Design Handoff v2) - the secondary
       button of the system (@layer components, "Buttons"). */
    .outline-action {
        display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 12px 17px;
        border: 1px solid var(--button-secondary-border); border-radius: var(--button-radius); background: var(--button-secondary-bg); color: var(--button-secondary-fg); font-size: 13px; text-decoration: none; white-space: nowrap; cursor: pointer;
    }
    .outline-action:hover { border-color: var(--button-secondary-border-hover); background: var(--button-secondary-bg-hover); }
    .outline-action:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 2px; }
    .outline-action .icon { width: 16px; height: 16px; }
    .account-smallprint { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .account-empty { padding: 32px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
    .account-empty__title { margin: 0 0 6px; color: var(--ink); font-size: 17px; }
    .account-empty .text-action { margin-top: 12px; }

    /* Dashboard */
    .period-note { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--muted); font-size: 12px; }
    .account-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-bottom: 38px; padding: 24px 0 32px; border-bottom: 1px solid var(--line); }
    .account-metrics > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .account-metrics span { font-size: 13px; }
    .account-metrics strong { font-size: 31px; font-weight: 400; letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .account-metrics small { color: var(--muted); font-size: 12px; }
    .dashboard-middle { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 65px; margin-bottom: 48px; }
    .chart-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    /* Monat für Monat: paid solid, expected the same colour lighter and
       hatched (never colour alone); both sides on one scale. */
    .chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
    .legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
    .legend::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; }
    .legend--income::before, .bar--income { --series: var(--chart-income); background: var(--series); }
    .legend--expense::before, .bar--expense { --series: var(--chart-expense); background: var(--series); }
    .legend--income-expected::before, .bar--income-expected { --series: var(--chart-income); }
    .legend--expense-expected::before, .bar--expense-expected { --series: var(--chart-expense); }
    .legend--income-expected::before, .legend--expense-expected::before, .bar--income-expected, .bar--expense-expected {
        border: 1px dashed color-mix(in srgb, var(--series) 70%, var(--sheet));
        background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--series) 45%, transparent) 0 1.5px, transparent 1.5px 5px), color-mix(in srgb, var(--series) 12%, var(--sheet));
    }
    .month-chart {
        display: flex; justify-content: space-around; gap: 16px; height: 188px; padding-top: 25px; border-bottom: 1px solid var(--line);
        background: repeating-linear-gradient(to top, transparent 0, transparent 49px, var(--line) 50px);
    }
    .month { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; max-width: 48px; }
    .bars { display: flex; flex: 1; align-items: flex-end; justify-content: center; gap: 5px; width: 100%; }
    /* One column per side: the expected segment on top of the paid one, a
       2px gap of surface between them; empty segments take no room. */
    .bar-stack { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: 17px; height: 100%; }
    .bar { display: block; width: 100%; border-radius: 3px 3px 0 0; }
    .bar[style*="height: 0%"] { display: none; }
    .bar-stack > .bar:last-child { border-radius: 0; }
    .bar-stack > .bar:only-child, .bar-stack > .bar[style*="height: 0%"] + .bar { border-radius: 3px 3px 0 0; }
    .month > span { width: 100%; height: 25px; padding-top: 6px; background: var(--paper); color: var(--muted); font-size: 11px; text-align: center; }
    .chart-empty { margin: 25px 0 0; color: var(--muted); font-size: 13px; }
    .chart-data { margin-top: 12px; color: var(--muted); font-size: 12px; }
    .chart-data summary { display: inline-flex; min-height: 32px; align-items: center; cursor: pointer; }
    .chart-data table { width: 100%; margin-top: 8px; border-collapse: collapse; }
    .chart-data th, .chart-data td { padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 400; text-align: left; }
    .chart-data .num { text-align: right; font-variant-numeric: tabular-nums; }
    .continue-note { padding: 5px 0 0 30px; border-left: 1px solid var(--line); }
    .continue-note h2 { margin: 0; }
    .continue-note p { margin: 12px 0 18px; color: var(--muted); font-size: 13px; }
    .resume-draft {
        display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 17px; padding: 14px 0;
        border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; text-decoration: none;
    }
    .resume-draft small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
    .resume-draft > span:last-child { color: var(--accent); font-size: 22px; }
    .resume-draft:hover { color: var(--accent); }
    .recent-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin-bottom: 20px; }
    .recent-heading a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; text-decoration: none; }
    .recent-heading .icon { width: 15px; height: 15px; }

    /* Stammdaten */
    .profile-form { max-width: 1010px; }
    .profile-status { max-width: 1010px; margin-bottom: 24px; }
    .profile-section { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 45px; padding: 33px 0 38px; border-top: 1px solid var(--line); }
    .profile-section h2 { font-size: 21px; }
    .profile-section > div:first-child p { max-width: 205px; margin: 8px 0; color: var(--muted); font-size: 13px; }
    .profile-section .field-grid { gap: 22px 28px; }
    .profile-save { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 25px; border-top: 1px solid var(--line); }
    .profile-save > span { color: var(--muted); font-size: 12px; }
    .profile-save .primary { width: auto; min-width: 240px; }
    /* Stammdaten: the security section below the master data (AUTH.md). */
    .profile-save + .profile-section { margin-top: 38px; }
    .security-summary__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
    .security-summary__text { max-width: 520px; margin: 8px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.6; }
    .logo-block { display: grid; align-content: start; gap: 10px; }
    .logo-upload { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 23px; }
    .logo-pick__input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
    .logo-pick { display: flex; align-items: center; gap: 23px; padding: 8px 0 12px; border-radius: 4px; cursor: pointer; }
    .logo-pick__input:focus-visible + .logo-pick { outline: 2px solid var(--accent); outline-offset: 5px; }
    .logo-pick__preview { display: grid; place-items: center; flex: none; width: 96px; height: 65px; overflow: hidden; border-radius: 7px; background: var(--pale); color: var(--accent); }
    .logo-pick__preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
    .logo-pick__text strong { display: block; color: var(--accent); font-size: 14px; }
    .logo-pick__text small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
    /* What makes a good logo file - before the fine print, in the same quiet voice. */
    .logo-guidance { max-width: 62ch; margin: 10px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
    .logo-current { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--muted); font-size: 12px; }

    /* Stammdaten: "Rechnungsnummern" (account/_numbering.blade.php). The
       fields of the chosen structure, one below the other, beside a quiet
       live preview - no box: a thin rule, the number large. Where the
       section is narrow the preview follows the fields. */
    .numbering__form { container-type: inline-size; min-width: 0; }
    .numbering__layout { display: grid; gap: 30px; }
    .numbering__fields { display: grid; gap: 22px; align-content: start; min-width: 0; }
    /* With a script, a part the stored structure does not use is not
       painted at all (invoice-numbers.js takes over after the first paint). */
    @media (scripting: enabled) { .numbering-unused { display: none; } }
    .numbering__placeholders { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
    .numbering__placeholders p { margin: 0 0 6px; }
    .numbering__placeholders dl { display: grid; gap: 3px; margin: 0 0 8px; }
    .numbering__placeholders dl > div { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 12px; }
    .numbering__placeholders dt { color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; }
    .numbering__placeholders dd { margin: 0; }
    .numbering__pattern { font-family: var(--font-mono); }
    .numbering__reset .check__hint { margin-top: 5px; }
    /* An invoice number in a sentence: on the next line rather than broken
       inside - broken only where it is longer than the line itself. */
    .numbering__number { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
    .numbering__preview { align-self: start; min-width: 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
    .numbering__eyebrow { margin: 0 0 14px; color: var(--muted); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
    .numbering__eyebrow span { letter-spacing: 0; text-transform: none; }
    .numbering__label { margin: 0; color: var(--muted); font-size: 13px; }
    .numbering__next { display: block; margin: 4px 0 14px; color: var(--ink); font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .numbering__next.is-invalid { color: var(--muted); font-size: 16px; line-height: 1.5; }
    .numbering__reason { margin: -6px 0 14px; color: var(--danger); font-size: 13px; line-height: 1.5; }
    .numbering__following { display: grid; gap: 6px; margin: 0 0 16px; }
    .numbering__following > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
    .numbering__following > div[hidden] { display: none; }
    .numbering__following dt { color: var(--muted); font-size: 13px; }
    .numbering__following dd { margin: 0; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .numbering__note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    /* A structure's name wraps on a narrow phone instead of ending in "…". */
    .numbering .custom-control__value { overflow: visible; white-space: normal; }
    .numbering__save { margin-top: 32px; }
    .numbering__save .primary { flex: none; }
    @container (min-width: 600px) {
        .numbering__layout { grid-template-columns: minmax(0, 1fr) minmax(210px, 250px); gap: 44px; }
        .numbering__preview { position: sticky; top: calc(var(--header-height) + 24px); padding: 4px 0 4px 26px; border-top: 0; border-left: 1px solid var(--line); }
    }

    /* Kontakte */
    .contacts-table { min-height: 120px; }
    .contact-hint { display: flex; align-items: center; gap: 22px; padding: 28px 0; }
    .contact-hint > span { color: var(--accent); font-size: 30px; }
    .contact-hint p { margin: 0; font-size: 13px; }
    .contact-hint p span { color: var(--muted); }
    .contact-hint a { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--accent); font-size: 13px; text-decoration: none; }
    .contact-hint .icon { width: 15px; height: 15px; }

    /* The drawer on the right (a modal dialog). */
    .account-drawer {
        position: fixed; inset: 0 0 0 auto; width: min(540px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 55px 42px 40px;
        overflow: auto; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--sheet); color: var(--ink); box-shadow: -20px 0 80px rgb(26 38 64 / 10%);
    }
    .account-drawer::backdrop { background: rgb(28 41 75 / 19%); backdrop-filter: blur(3px); }
    .account-drawer[open] { animation: drawer-arrive 0.2s ease-out; }
    .drawer-close { position: absolute; top: 16px; right: 20px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); }
    .drawer-close:hover { background: var(--pale); color: var(--accent); }
    .account-drawer h2 { margin: 0 0 28px; font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; }
    .contact-role { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0 0 18px; padding: 0; border: 0; }
    .contact-role legend { margin-bottom: 10px; padding: 0; color: var(--muted); font-size: 13px; }
    .contact-form .optional { margin-top: 12px; }
    .contact-duplicates { margin-top: 18px; padding: 16px; border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); border-radius: 8px; background: var(--warn-soft); font-size: 13px; }
    .contact-duplicates p { margin: 0 0 8px; }
    .contact-duplicates ul { margin: 0 0 14px; padding-left: 18px; }
    .contact-form__error { margin: 16px 0 0; color: var(--danger); font-size: 13px; }
    .drawer-buttons { display: grid; gap: 14px; margin-top: 32px; }
    .contact-form__delete { justify-self: start; color: var(--danger); font-size: 13px; }
    @keyframes drawer-arrive { from { opacity: 0; transform: translateX(35px); } to { opacity: 1; transform: translateX(0); } }

    @media (max-width: 1000px) {
        .account-workspace { padding-inline: 28px; }
        .account-nav { gap: 24px; }
        .account-heading h1 { font-size: 33px; }
        .account-metrics { gap: 15px; }
        .account-metrics strong { font-size: 27px; }
        .dashboard-middle { grid-template-columns: minmax(0, 1fr) 245px; gap: 30px; }
        .chart-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
        .profile-section { grid-template-columns: 190px minmax(0, 1fr); gap: 30px; }
    }

    @media (max-width: 680px) {
        .account-workspace { padding: 25px 20px 95px; }
        .account-nav { flex-wrap: wrap; gap: 0 24px; margin-bottom: 33px; }
        .account-nav > a { padding-bottom: 14px; font-size: 13px; }
        .account-nav > .account-nav__new { justify-content: space-between; width: 100%; margin: 0; padding: 2px 0 15px; }
        .account-heading { display: block; margin-bottom: 27px; }
        .account-heading h1 { font-size: 31px; }
        .account-heading__actions { margin-top: 20px; }
        .period-note { flex-direction: column; gap: 4px; }
        .account-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 18px; margin-bottom: 27px; padding: 23px 0 28px; }
        .account-metrics strong { font-size: 25px; }
        .dashboard-middle { grid-template-columns: minmax(0, 1fr); margin-bottom: 34px; }
        .chart-heading { flex-direction: row; align-items: center; }
        .month-chart { gap: 6px; height: 175px; }
        .continue-note { padding: 23px 0 0; border-top: 1px solid var(--line); border-left: 0; }
        .recent-heading { align-items: flex-start; }
        .contact-hint { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
        .contact-hint p { flex: 1; }
        .contact-hint a { width: 100%; margin-left: 52px; }
        .profile-section { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 25px 0 30px; }
        .profile-section > div:first-child p { max-width: none; }
        .profile-save { flex-direction: column; align-items: flex-start; gap: 16px; }
        .profile-save .primary { width: 100%; }
        .account-drawer { padding: 53px 22px 30px; }
    }

    @media (prefers-reduced-motion: reduce) { .account-drawer[open] { animation: none; } }

    /* Error pages */
    .error-page { text-align: center; display: grid; gap: var(--space-4); justify-items: center; padding-block: var(--space-8); }
    .error-page__code { font-size: 4.5rem; line-height: 1; color: var(--muted); letter-spacing: -0.04em; }
}

/* -------------------------------------------------------------- utilities */

@layer utilities {
    .is-hidden { display: none !important; }
    /* Out of sight but still submitted (e.g. a date the editor computes). */
    .is-hidden-soft { display: none !important; }
    .muted { color: var(--muted); }
    .strong { font-weight: 700; }
    .block { display: block; }
    .inline-icon { display: inline-block; vertical-align: -0.15em; margin-right: 0.25rem; }
    .small { font-size: var(--text-sm); }
    .xsmall { font-size: var(--text-xs); }
    .num { font-variant-numeric: tabular-nums; }
    .mono { font-family: var(--font-mono); }
    .nowrap { white-space: nowrap; }
    .stack > * + * { margin-top: var(--space-4); }
    .stack-sm > * + * { margin-top: var(--space-2); }
    .stack-lg > * + * { margin-top: var(--space-6); }
    .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
    .row--end { justify-content: flex-end; }
    .row--between { justify-content: space-between; }
    .mt-0 { margin-top: 0 !important; }
    .mt-2 { margin-top: var(--space-2); }
    .mt-4 { margin-top: var(--space-4); }
    .mt-6 { margin-top: var(--space-6); }
}

/* ------------------------------------------------------- EventLane table
   The table of the contacts page (css/eventlane-data-table.css, Design
   Handoff v2) in X-Factura's colours - in both themes. Outside the layers
   on purpose: the table's own stylesheet has none, so only rules outside
   the layers (and specific enough) win over it. */
:root .account-workspace .eldt {
    --eldt-font: var(--font-sans);
    --eldt-bg: var(--sheet);
    --eldt-bg-subtle: var(--canvas);
    --eldt-bg-hover: var(--row-tint);
    --eldt-bg-selected: var(--pale);
    --eldt-bg-bulk: var(--pale);
    --eldt-text: var(--ink);
    --eldt-text-strong: var(--ink);
    --eldt-muted: var(--muted-canvas);
    --eldt-faint: var(--muted-canvas);
    --eldt-line: var(--line);
    --eldt-line-strong: var(--line-strong);
    --eldt-accent: var(--accent);
    --eldt-accent-soft: var(--pale);
    --eldt-green: var(--ok);
    --eldt-green-bg: var(--ok-soft);
    --eldt-amber: var(--warn);
    --eldt-amber-bg: var(--warn-soft);
    --eldt-blue: var(--accent);
    --eldt-blue-bg: var(--pale);
    --eldt-radius: 10px;
    --eldt-control: 44px;
}
:root .account-workspace .eldt-surface { border-radius: 10px; box-shadow: none; }
/* The table's scroll box holds its hidden texts (the name of the actions
   column, the sort states, the caption): positioned against the page, they
   escaped it - and wherever the table is wider than its box, the actions
   column's name made the whole page wider. */
:root .account-workspace .eldt-table-wrap { position: relative; }
:root .account-workspace .eldt td { height: 77px; font-size: 13px; }
/* A row opens on a click anywhere (contacts.js), as its hover suggests. */
:root .account-workspace .eldt tbody tr.is-clickable { cursor: pointer; }
:root .account-workspace .eldt th { color: var(--muted-canvas); font-size: 11px; }
:root .account-workspace .eldt th > button i { color: var(--muted-canvas); }
:root .account-workspace .eldt-pair strong { font-size: 14px; }
:root .account-workspace .eldt-pair small { margin-top: 5px; font-size: 12px; }
:root .account-workspace .eldt-tabs button { font-size: 13px; }
:root .account-workspace .eldt-tabs button[aria-selected="true"] { border-color: var(--accent); }
:root .account-workspace .eldt-tabs button > span { background: var(--canvas); color: var(--muted-canvas); font-size: 11px; }
:root .account-workspace .eldt-tabs button[aria-selected="true"] > span { background: var(--pale); color: var(--accent); }
:root .account-workspace .eldt-context, :root .account-workspace .eldt-actionbar, :root .account-workspace .eldt-footer { font-size: 12px; }
:root .account-workspace .eldt-search input { font-size: 14px; }
:root .account-workspace .eldt-search input::placeholder { color: var(--muted-canvas); }
:root .account-workspace .eldt-search > i, :root .account-workspace .eldt-search > i::after { border-color: var(--muted); }
:root .account-workspace .eldt-search > i::after { background: var(--muted); }
:root .account-workspace .eldt-search kbd { font-size: 10px; }
:root .account-workspace .eldt-search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
:root .account-workspace .eldt-badge { padding: 5px 8px; font-size: 12px; }
:root .account-workspace .eldt-avatar { background: var(--pale); color: var(--accent); font-size: 11px; }
:root .account-workspace .eldt-refresh { color: var(--muted); }
:root .account-workspace .eldt-drill button { color: var(--muted); }
:root .account-workspace .eldt-state > span { color: var(--accent); }
:root .account-workspace .eldt-state strong { font-size: 17px; }
:root .account-workspace .eldt-state p, :root .account-workspace .eldt-state button, :root .account-workspace .eldt-pagination button { font-size: 12px; }
:root .account-workspace .eldt .custom-control { min-width: 110px; min-height: 40px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
:root .account-workspace .eldt-per-page .custom-control { min-width: 110px; min-height: 32px; padding: 5px 9px; font-size: 12px; }
:root .account-workspace .eldt-tabs button:focus-visible,
:root .account-workspace .eldt button:focus-visible,
:root .account-workspace .eldt tr[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* A narrow table without a check column (Kontakte: no mass actions) shows
   each row as a card; the component would put its second and third column
   into the same place there. The third one gets a line of its own. */
@container (max-width: 560px) {
    :root .account-workspace .eldt td { height: auto; }
    :root .account-workspace .eldt:not(:has(.eldt-check-cell)) tbody tr { grid-template-areas: 'main drill' 'detail drill' 'more drill'; }
    :root .account-workspace .eldt:not(:has(.eldt-check-cell)) tbody td:nth-child(3) { grid-area: more; }
}
/* Tablet widths (Release 2 final polish): every column stays readable and
   the table fits its box - the fixed columns give way, never the customer.
   Narrower first (up to 1000 px of table); then the status moves under the
   amount (760 px) and the date under the number (640 px) - in words, as in
   their own columns, only there; below 561 px the rows are cards
   (eventlane-data-table.css). The contacts: role and town narrower. */
:root .account-workspace .invoice-center .center-row__compact { display: none; }
@container (min-width: 561px) and (max-width: 1000px) {
    :root .account-workspace .invoice-center table.center-table,
    :root .account-workspace .contacts-table.eldt table { min-width: 0; }
    :root .account-workspace .invoice-center th.eldt-check-cell,
    :root .account-workspace .invoice-center td.eldt-check-cell { width: 48px !important; }
    :root .account-workspace .invoice-center th.eldt-drill-head,
    :root .account-workspace .invoice-center td.eldt-drill { width: 56px !important; }
    :root .account-workspace .invoice-center th[data-col="number"] { width: 150px; }
    :root .account-workspace .invoice-center th[data-col="date"] { width: 104px; }
    :root .account-workspace .invoice-center th[data-col="amount"] { width: 124px; }
    :root .account-workspace .invoice-center th[data-col="status"] { width: 118px; }
    :root .account-workspace .contacts-table.eldt thead th:nth-child(2) { width: 130px; }
    :root .account-workspace .contacts-table.eldt thead th:nth-child(3) { width: 120px; }
}
@container (min-width: 561px) and (max-width: 760px) {
    :root .account-workspace .invoice-center th[data-col="status"],
    :root .account-workspace .invoice-center td.center-row__status { display: none; }
    :root .account-workspace .invoice-center .center-row__compact[data-compact="status"] { display: block; margin-top: 5px; }
}
@container (min-width: 561px) and (max-width: 640px) {
    :root .account-workspace .invoice-center th[data-col="date"],
    :root .account-workspace .invoice-center td.center-row__date { display: none; }
    :root .account-workspace .invoice-center .center-row__compact[data-compact="date"] { display: block; }
}

/* ------------------------------------------------------- invoice center
   Rechnungen and the dashboard's short list (Account Milestone 3): the
   EventLane table's look, but rendered by the server - its tabs, column
   headings, quick periods and pages are links, not the component's
   buttons, so they get the component's look here. Outside the layers like
   the block above, for the same reason. */
:root .account-workspace .center-tabs a {
    display: inline-flex; flex: none; align-items: center; padding: 0 18px;
    border-bottom: 2px solid transparent; color: var(--muted-canvas); font-size: 13px; text-decoration: none; white-space: nowrap;
}
:root .account-workspace .center-tabs a:first-child { padding-left: 0; }
:root .account-workspace .center-tabs a:hover { color: var(--ink); }
:root .account-workspace .center-tabs a[aria-current="page"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }
:root .account-workspace .center-tabs a > span {
    display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 7px; padding: 0 5px;
    border-radius: 5px; background: var(--canvas); color: var(--muted-canvas); font-size: 11px; font-weight: 400;
}
:root .account-workspace .center-tabs a[aria-current="page"] > span { background: var(--pale); color: var(--accent); }
:root .account-workspace .center-tabs a:focus-visible,
:root .account-workspace .invoice-center a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

:root .account-workspace .invoice-center th > a {
    display: flex; align-items: center; gap: 6px; padding: 9px 0;
    color: inherit; text-decoration: none; text-transform: inherit; letter-spacing: inherit;
}
:root .account-workspace .invoice-center th > a i { font-style: normal; font-size: 10px; color: var(--muted-canvas); opacity: 0.55; }
:root .account-workspace .invoice-center th[aria-sort] > a i { color: var(--accent); opacity: 1; }
:root .account-workspace .invoice-center th.eldt-type-money > a { justify-content: flex-end; width: 100%; }
:root .account-workspace .invoice-center th > a:hover { color: var(--ink); }

:root .account-workspace .invoice-center .eldt-quick a {
    padding: 6px 10px; border-radius: 5px; color: var(--muted-canvas); font-size: 12px; text-decoration: none; white-space: nowrap;
}
:root .account-workspace .invoice-center .eldt-quick a[aria-current="true"] { background: var(--sheet); color: var(--accent); box-shadow: 0 1px 4px rgb(26 38 64 / 8%); }
:root .account-workspace .invoice-center .eldt-quick { flex-wrap: wrap; }
:root .account-workspace .invoice-center .eldt-clear-date { font-size: 12px !important; text-decoration: none; }
:root .account-workspace .invoice-center .eldt-date-range label { font-size: 11px; color: var(--muted-canvas); }
:root .account-workspace .invoice-center .eldt-filter > span { font-size: 12px; color: var(--muted-canvas); }
:root .account-workspace .invoice-center .eldt-filter-button { font-size: 12px; color: var(--ink); }
:root .account-workspace .invoice-center .eldt-filter-button > span { color: var(--accent); }
:root .account-workspace .invoice-center .eldt-filter-button.is-active { border-color: var(--accent); background: var(--pale); color: var(--accent); }
:root .account-workspace .invoice-center .eldt-bulk-actions button { font-size: 13px; }
:root .account-workspace .invoice-center .eldt-clear-selection { font-size: 12px !important; }
:root .account-workspace .invoice-center .center-reset { margin-left: auto; color: var(--accent); font-size: 12px; }
:root .account-workspace .invoice-center .eldt-actionbar.has-selection .center-reset { display: none; }
:root .account-workspace .invoice-center[aria-busy="true"] .eldt-table-wrap { opacity: 0.55; transition: opacity 120ms var(--ease) 120ms; }

:root .account-workspace .invoice-center .center-pagination a,
:root .account-workspace .invoice-center .center-pagination span {
    display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
    border: 1px solid transparent; border-radius: 6px; color: var(--muted-canvas); font-size: 12px; text-decoration: none;
}
:root .account-workspace .invoice-center .center-pagination a:hover { border-color: var(--line); background: var(--canvas); color: var(--ink); }
:root .account-workspace .invoice-center .center-pagination a[aria-current="page"] { background: var(--pale); color: var(--accent); font-weight: 700; }
:root .account-workspace .invoice-center .center-pagination .is-disabled { opacity: 0.35; }
:root .account-workspace .invoice-center .eldt-per-page label { display: flex; align-items: center; gap: 7px; }

/* A row: the number is its link; the rest of the row opens it, too. */
:root .account-workspace .invoice-center .center-row__link { color: inherit; text-decoration: none; }
:root .account-workspace .invoice-center .center-row__link:hover { color: var(--accent); text-decoration: underline; }
:root .account-workspace .invoice-center tr.is-draft .eldt-pair strong { font-weight: 400; }
:root .account-workspace .invoice-center .center-row__date { font-variant-numeric: tabular-nums; }
:root .account-workspace .invoice-center .center-row__mobile { display: none; }
:root .account-workspace .invoice-center .overdue { display: block; margin-top: 5px; color: var(--warn); font-size: 11px; }
:root .account-workspace .invoice-center td { overflow: visible; }
:root .account-workspace .invoice-center .eldt-state a { margin-top: 4px; }

.center-status { margin-bottom: 24px; }
.center-status a { margin-left: 8px; color: var(--accent); }

/* The row menu: a native popover at its button (invoice-center.js). */
.row-menu__trigger {
    display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;
}
.row-menu__trigger:hover, .row-menu__trigger[aria-expanded="true"] { background: var(--pale); color: var(--accent); }
.row-menu__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.row-menu__trigger .icon { width: 18px; height: 18px; }
/* As wide as its entries - wherever it stands: placing it never changes its size. */
.row-menu {
    position: fixed; inset: auto; margin: 0; width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 16px)); padding: 6px;
    border: 1px solid var(--control-border); border-radius: 9px; background: var(--sheet); color: var(--ink); box-shadow: var(--control-shadow);
}
.row-menu.is-placing { visibility: hidden; }
/* Focused itself only by a press on an entry in Safari; the entries show the focus. */
.row-menu:focus { outline: none; }
.row-menu form { margin: 0; }
.row-menu__item {
    display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 8px 11px;
    border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer;
}
.row-menu__item .icon { width: 16px; height: 16px; color: var(--muted); }
.row-menu__item:hover, .row-menu__item:focus-visible { background: var(--control-hover); color: var(--accent); outline: none; }
.row-menu__item:hover .icon, .row-menu__item:focus-visible .icon { color: currentColor; }
.row-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.row-menu__item--danger, .row-menu__item--danger .icon { color: var(--danger); }
.row-menu__item--danger:hover, .row-menu__item--danger:focus-visible { background: var(--danger-soft); color: var(--danger); }

/* The drawer's invoice (Design Handoff v2). */
.invoice-drawer .eyebrow { margin: 0 0 10px; }
.invoice-drawer h2:focus { outline: none; }
.invoice-drawer-summary { display: flex; flex-direction: column; gap: 12px; padding: 26px 0 20px; border-top: 1px solid var(--line); }
.invoice-drawer-summary > strong { font-size: 42px; font-weight: 400; letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.invoice-drawer-summary > span { font-size: 18px; overflow-wrap: anywhere; }
.invoice-drawer-summary .overdue { display: block; margin-top: 6px; color: var(--warn); font-size: 12px; }
.invoice-facts { margin: 5px 0 30px; }
.invoice-facts > div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 13px; }
.invoice-facts dt { color: var(--muted); }
.invoice-facts dd { margin: 0; text-align: right; }
.invoice-drawer .drawer-buttons { margin-top: 0; }
.invoice-drawer .drawer-buttons form { margin: 0; }
.invoice-drawer .drawer-buttons .btn { justify-content: space-between; min-height: 48px; }
/* The table's badges in the drawer, outside the table: its colours here too. */
:root .account-drawer {
    --eldt-bg-subtle: var(--canvas); --eldt-muted: var(--muted-canvas);
    --eldt-green: var(--ok); --eldt-green-bg: var(--ok-soft); --eldt-amber: var(--warn); --eldt-amber-bg: var(--warn-soft);
    --eldt-blue: var(--accent); --eldt-blue-bg: var(--pale); --eldt-red: var(--danger); --eldt-red-bg: var(--danger-soft);
}
:root .account-drawer .eldt-badge { padding: 5px 9px; font-size: 12px; }

/* The menu lives in the table's drill cell: the component's drill button
   (a 30 px square with a large glyph) must not reach its entries. */
:root .account-workspace .eldt-drill .row-menu { text-align: left; }
:root .account-workspace .eldt-drill .row-menu__item {
    width: 100%; height: auto; min-height: 40px; padding: 8px 11px; border-radius: 6px;
    background: none; color: var(--ink); font-size: 13px; text-align: left;
}
:root .account-workspace .eldt-drill .row-menu__item:hover,
:root .account-workspace .eldt-drill .row-menu__item:focus-visible { background: var(--control-hover); color: var(--accent); }
:root .account-workspace .eldt-drill .row-menu__item--danger { color: var(--danger); }
:root .account-workspace .eldt-drill .row-menu__item--danger:hover,
:root .account-workspace .eldt-drill .row-menu__item--danger:focus-visible { background: var(--danger-soft); color: var(--danger); }
:root .account-workspace .eldt-drill .row-menu__trigger { width: 34px; height: 34px; font-size: inherit; color: var(--muted); }
:root .account-workspace .eldt-drill .row-menu__trigger:hover,
:root .account-workspace .eldt-drill .row-menu__trigger[aria-expanded="true"] { background: var(--pale); color: var(--accent); }

/* Drawer actions: the words first, the sign at the end (Design Handoff v2). */
.invoice-drawer .drawer-buttons .btn { flex-direction: row-reverse; justify-content: space-between; }

/* The direction of an invoice right under its number (Design Handoff v5,
   x-invoice.direction): always on a line of its own, words first - the
   arrow is decoration and the colour only helps. */
.invoice-direction {
    display: flex; align-items: center; gap: 5px; width: fit-content; margin-top: 5px; padding: 2px 7px; border-radius: 5px;
    font-size: 11px; font-weight: 400; line-height: 1.5; white-space: nowrap;
}
.invoice-direction > span { font-size: 13px; line-height: 1; }
.invoice-direction--out { background: var(--direction-out-soft); color: var(--direction-out); }
.invoice-direction--in { background: var(--direction-in-soft); color: var(--direction-in); }
.invoice-direction--unknown { background: var(--sheet-2); color: var(--muted-canvas); }
.invoice-facts .invoice-direction { margin: 0 0 0 auto; }

/* The kind of an invoice under its number and in the quick view
   (x-invoice.type, App\Support\DocumentType): the families differ only in
   the colour of the word - no badge, no dot, no background, the same size
   and line; quieter than number, amount and status. Corrections and
   cancellations share one colour; "standard" keeps the grey it stands in.
   Specific enough to win over the table's own (unlayered) grey. */
:root .doc-type--partial { color: var(--doc-type-partial); }
:root .doc-type--correction, :root .doc-type--cancellation { color: var(--doc-type-correction); }
:root .doc-type--self-billed { color: var(--doc-type-self-billed); }

/* The toolbar and the period below it, like the component's own. */
.center-filters { display: block; }

/* Monat für Monat: the value of a month on hover (the table below the
   chart has all values for everyone). */
.chart-tooltip {
    position: absolute; bottom: 40%; left: 50%; z-index: 2; display: none; min-width: 200px; padding: 10px 13px;
    border-radius: 5px; background: var(--ink); color: var(--paper); font-size: 11px; transform: translateX(-50%);
    box-shadow: 0 4px 20px rgb(37 48 75 / 12%); pointer-events: none;
}
.month:hover .chart-tooltip { display: block; }
.period-note__year { display: inline-flex; align-items: center; gap: 10px; }
.period-note__year a {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
    color: var(--accent); font-size: 16px; text-decoration: none;
}
.period-note__year a:hover { background: var(--pale); }
.period-note__year a:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 1px; }

/* The import drawer (Design Handoff v2, "E-Rechnung hinzufügen."). */
.drawer-intro { color: var(--muted); font-size: 14px; }
.import-upload { margin: 24px 0 18px; }
.import-submit { justify-content: space-between; }
/* Where a row is a card (narrow screens, the EventLane table's container
   query), amount and state stand under the number. */
@container (max-width: 560px) {
    :root .account-workspace .invoice-center .center-row__mobile { display: block; margin-top: 5px; color: var(--accent); font-size: 12px; font-weight: 700; }
}

/* Stammdaten: a line of information among the fields. */
.profile-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13px; }

/* The search field shows its focus on the whole field (focus-within), not
   a second ring inside it. */
:root .account-workspace .eldt-search input:focus-visible { outline: none; }

/* Monat für Monat on a phone: twelve months fit, the bars get narrower. */
@media (max-width: 680px) {
    .month-chart .bars { gap: 2px; }
    .month-chart .bar-stack { width: min(17px, 42%); }
    .chart-tooltip { display: none !important; }
}

/* ------------------------------------------------ account closure
   "Konto löschen" (ACCOUNT.md, account/delete/*): two calm steps in the
   account's language - the complete archive first, the second step shown
   locked until its receipt counts. Red only for the last page's one
   button (.btn--danger); a state is always said in words, never by its
   colour alone. */
.closure { display: grid; max-width: 44rem; }
.closure > .alert { margin-bottom: 24px; }
.closure > .alert:focus { outline: none; }
.closure > .alert:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.closure-step { padding: 28px 0 32px; border-top: 1px solid var(--line); }
.closure-step h2 { margin: 0 0 12px; font-size: 21px; }
.closure-step.is-locked h2 { color: var(--muted); }
.closure-step__text { max-width: 38rem; margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.closure-counts-title { margin: 20px 0 8px; color: var(--ink); font-size: 15px; font-weight: 400; letter-spacing: 0; }
/* As the archive page counts: the names keep their words, the numbers line up. */
.closure-counts { display: grid; grid-template-columns: minmax(min-content, 1fr) auto; gap: 10px 20px; margin: 0 0 20px; padding: 14px 0; border-block: 1px solid var(--line); font-size: 14px; }
.closure-counts dt { color: var(--muted); }
.closure-counts dt small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; }
.closure-counts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.closure-counts .closure-counts__total { padding-top: 4px; color: var(--ink); }
/* What the deletion removes: a name and a number - or a few words. */
.closure-counts--summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.closure-counts--summary .closure-counts__text { color: var(--ink-2); overflow-wrap: break-word; hyphens: auto; }
.closure-status { margin: 0 0 18px; }
.closure-status:focus { outline: none; }
.closure-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.closure-status > * + * { margin-top: 12px; }
.closure-status__none { margin: 0; color: var(--muted); font-size: 13px; }
.closure-ready { padding: 14px 16px; background: var(--ok-soft); --muted: var(--muted-canvas); }
.closure-ready__title { margin: 0; color: var(--ink); font-size: 15px; }
.closure-ready__details { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.closure-ready__details > span { white-space: nowrap; }
.closure-download { margin: 0; }
.closure-download .btn, .closure-actions .btn { max-width: 100%; white-space: normal; text-align: center; }
.closure-live { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.closure-live:empty { margin: 0; }
.closure-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.closure-refresh .text-action { font-size: 13px; }
.closure-refresh .text-action .icon { width: 15px; height: 15px; }
.closure-locked { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.closure-locked .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.closure-confirm { display: grid; gap: 14px; margin: 0; }
.closure-confirm .closure-step__text { margin: 0; }
.closure-check { color: var(--ink); font-size: 15px; }
.closure-check input { margin-top: 0.2rem; }
.closure-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 4px 0 0; }
.closure-actions--final { padding-top: 24px; border-top: 1px solid var(--line); }
.closure-final__archive { margin: 0 0 24px; }
.closure-back { justify-self: start; margin-top: 4px; }
.closure-deleted { max-width: 36rem; padding: 48px 0 64px; }
.closure-deleted__mark { margin: 0 0 12px; color: var(--ok); }
.closure-deleted__mark .icon { width: 32px; height: 32px; }
@media (max-width: 560px) {
    .closure-step { padding: 24px 0 28px; }
    .closure-step h2 { font-size: 19px; }
    .closure-download .btn, .closure-actions .btn { width: 100%; }
    /* A number stays beside its name; a few words go below it. */
    .closure-counts--summary { grid-template-columns: minmax(0, 1fr) auto; }
    .closure-counts--summary .closure-counts__label--text, .closure-counts--summary .closure-counts__text { grid-column: 1 / -1; }
    .closure-counts--summary .closure-counts__text { margin-top: -8px; text-align: left; }
}

/* ------------------------------------------------ hiding and cancelling
   (ACCOUNT.md, "Ausblenden und Stornieren") */

/* The short notice of a confirmation ("Das Ausblenden storniert oder löscht
   … nicht."). */
.dialog__note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: 6px; background: var(--canvas); color: var(--muted-canvas); font-size: var(--text-xs); line-height: 1.5; }

/* "Rechnung stornieren?": the server's form in a dialog - a little wider
   than a confirmation, scrolling inside on a short screen. */
.dialog--form { width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
.cancel-form { margin: 0; }
.cancel-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: 8px; font-size: var(--text-sm); }
.cancel-facts dt { color: var(--muted); }
.cancel-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cancel-fields { gap: 14px 18px; }
.cancel-fields .field { min-width: 0; }
.cancel-card .dialog__body, .cancel-card .dialog__actions { padding-left: var(--space-5); padding-right: var(--space-5); }
@media (max-width: 520px) {
    .cancel-fields { grid-template-columns: minmax(0, 1fr); }
    .cancel-facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .cancel-facts dd + dt { margin-top: var(--space-2); }
    .dialog--form .dialog__actions { justify-content: stretch; }
    .dialog--form .dialog__actions > .btn { flex: 1 1 auto; justify-content: center; }
}

/* A menu entry with its one sentence below ("Nur aus Ihrer normalen
   Ansicht entfernen."): hiding and cancelling told apart at a glance. */
.action-with-hint > span { display: grid; gap: 2px; min-width: 0; }
.action-with-hint > span > small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.35; white-space: normal; }
.action-with-hint:hover > span > small, .action-with-hint:focus-visible > span > small { color: inherit; opacity: 0.8; }
.row-menu__item.action-with-hint { align-items: flex-start; }
.row-menu__item.action-with-hint .icon { margin-top: 2px; }
:root .account-workspace .eldt-drill .row-menu__item.action-with-hint { align-items: flex-start; }
.drawer-buttons .action-with-hint > span { text-align: left; }

/* "Storniert": calm, never the colour of something to do. */
.eldt-badge.eldt-muted, :root .account-drawer .eldt-badge.eldt-muted { background: var(--canvas); color: var(--muted-canvas); }

/* An invoice's page: the other end of its cancellation, its date and reason. */
.lifecycle-facts { max-width: 34rem; }
.invoice-hidden-notice form { margin: var(--space-2) 0 0; }

/* Three tabs - AUSGANG, EINGANG, AUSGEBLENDET - fit a phone's width. */
@container (max-width: 560px) {
    :root .account-workspace .center-tabs { padding-inline: 14px; }
    :root .account-workspace .center-tabs a { padding: 0 10px; font-size: 12px; }
    :root .account-workspace .center-tabs a > span { min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px; font-size: 10px; }
}
@container (max-width: 360px) {
    :root .account-workspace .center-tabs { padding-inline: 10px; }
    :root .account-workspace .center-tabs a { padding: 0 7px; font-size: 11.5px; }
    :root .account-workspace .center-tabs a > span { margin-left: 4px; }
}

/* "Archivexport" (ARCHIVE.md): the year's archive - its year, its counts,
   one download -, the complete archive below it, and the way to it from
   "Exportieren". */
.archive-export { max-width: 36rem; }
.archive-card { padding: 24px 0 0; border-top: 1px solid var(--line); }
.archive-card .eyebrow { margin: 0; }
.archive-year { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.archive-year .field { flex: 1 1 14rem; min-width: 0; margin: 0; }
.archive-year > .btn { flex: none; }
.archive-preview-title { margin: 12px 0 2px; font-size: 17px; font-weight: 400; letter-spacing: 0; }
/* The names keep their words (the label column is never narrower than its
   longest word); a long value ("2 von 4 vorhanden") wraps instead. */
.archive-counts { display: grid; grid-template-columns: minmax(min-content, 1fr) auto; gap: 10px 20px; margin: 0; padding: 14px 0; border-block: 1px solid var(--line); font-size: 14px; }
.archive-counts dt { color: var(--muted); }
.archive-counts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
/* "Gesamtes Archiv": a heading of its own, the same counts and button. */
.archive-complete .archive-preview-title { margin-top: 0; }
.archive-complete__text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.archive-complete__text + .archive-counts { margin-top: 10px; }
.archive-complete__text + .archive-complete__text { margin-top: 8px; }
.archive-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 18px 0 24px; padding: 14px 16px; background: var(--info-soft); --muted: var(--muted-canvas); }
.archive-entry > .icon { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.archive-entry__text { flex: 1 1 14rem; min-width: 0; }
.archive-entry__text p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.archive-entry__text .archive-entry__title { color: var(--ink); font-size: 14px; }
.archive-entry > .btn { flex: none; }