/* ==========================================================================
   VS-WEALTH — Vermögensaufstellung

   Gestaltung: ein Dokument, keine Oberfläche.

   Die Anwendung erzeugt am Ende ein Blatt Papier, das eine Bank liest. Deshalb
   ist die Bildschirmfassung wie ein Geschäftsbericht gesetzt und nicht wie ein
   Verwaltungswerkzeug: warmes Papierweiß statt Blaugrau, Haarlinien statt
   Schlagschatten, 3px Radius statt weicher Kacheln, Zahlen und Überschriften in
   einer Serifenschrift, laufender Text in der Systemschrift. Summenzeilen tragen
   den doppelten Strich, den ein Buchhalter erwartet.

   Mobile first: die Grundregeln sind die schmale Fassung, die Medienabfragen
   fügen die breite hinzu. Keine Inline-Styles — die Content-Security-Policy
   verbietet sie, und genau das hält ein eingeschleustes style- oder
   script-Attribut wirkungslos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gestaltungsgrößen
   Die kategorialen Reihenfarben sind eine geprüfte Palette: jedes benachbarte
   Paar bleibt bei Farbfehlsichtigkeit unterscheidbar, hell wie dunkel. Die
   dunkle Spalte ist dieselbe Farbfamilie, neu abgestuft — keine Umkehrung.
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --plane: #f2f0ea;
    --surface: #fbfaf6;
    --surface-sunken: #ece9de;
    --surface-raised: #ffffff;

    --text-primary: #16150f;
    --text-secondary: #4c4a42;
    --text-muted: #837f74;

    --border: rgba(22, 21, 15, 0.14);
    --border-strong: rgba(22, 21, 15, 0.28);
    --gridline: rgba(22, 21, 15, 0.10);

    --accent: #1d4e7c;
    --accent-contrast: #ffffff;
    --accent-wash: rgba(29, 78, 124, 0.08);

    --positive: #1c6b3a;
    --negative: #a5322c;

    --series-1: #1d4e7c;
    --series-2: #c25a26;
    --series-3: #1b8f66;
    --series-4: #b4801a;
    --series-5: #a8557c;

    --radius: 3px;
    --radius-sm: 2px;
    --space: 1rem;
    --sidebar-width: 244px;
    --control-h: 2.375rem;

    --shadow: none;
    --shadow-pop: 0 1px 2px rgba(22, 21, 15, 0.10), 0 8px 28px rgba(22, 21, 15, 0.14);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Die Anzeigeschrift trägt Zahlen und Überschriften. Georgia steht als
       Rückfallebene ganz hinten: sie ist auf Windows wie macOS vorhanden. */
    --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

        --plane: #121210;
        --surface: #1b1b18;
        --surface-sunken: #24241f;
        --surface-raised: #26261f;

        --text-primary: #f6f4ec;
        --text-secondary: #bcb8ab;
        --text-muted: #8b8779;

        --border: rgba(246, 244, 236, 0.16);
        --border-strong: rgba(246, 244, 236, 0.34);
        --gridline: rgba(246, 244, 236, 0.11);

        --accent: #7cadde;
        --accent-contrast: #10100e;
        --accent-wash: rgba(124, 173, 222, 0.14);

        --positive: #4fae70;
        --negative: #e0736b;

        --series-1: #7cadde;
        --series-2: #dd8055;
        --series-3: #46b58c;
        --series-4: #cea14a;
        --series-5: #cd85a8;

        --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
    }
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--plane);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

a:hover {
    text-decoration-thickness: 2px;
}

/* Den Fokusring nie entfernen, nur neu zeichnen. Wer mit der Tastatur
   navigiert, findet sich nur an ihm zurecht. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Zahlen stehen überall in gleicher Breite untereinander. */
.num,
.mono,
[class*="__value"],
.table td.num,
.facts dd {
    font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------------
   Anwendungsrahmen
   -------------------------------------------------------------------------- */
.shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

.sidebar {
    display: flex;
    flex-direction: column;
    /* Damit die liegende Fassung auf dem Telefon in sich scrollen kann, statt
       das Raster auseinanderzuziehen. */
    min-width: 0;
    gap: 1.25rem;
    padding: 1.125rem 0.875rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}

.brand__mark {
    flex: 0 0 auto;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand__name {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: 0.06em;
}

.brand__tagline {
    margin-top: 0.1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
}

/* Abschnittsmarke im Kapitälchen-Duktus: sie ordnet, ohne mitzureden.

   Versalien mit weitem Sperrsatz sind hier eine Ausnahme und keine Gewohnheit:
   sie bleiben den wenigen Stellen vorbehalten, die eine Seite gliedern —
   Abschnittsmarke, Tabellenkopf, Gruppenzeile, Leitzahl. Beschriftungen an
   Formularfeldern und Angaben laufen dagegen in gemischter Schrift; eine Seite,
   auf der jede Kleinigkeit ruft, hat keine Rangfolge mehr. */
.nav__section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem 0.55rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.nav__section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gridline);
}

.nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Der aktive Eintrag wird nicht eingefärbt, sondern angestrichen — wie eine
   Markierung am Seitenrand. */
.nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem 0.45rem 0.55rem;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.nav__link:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.nav__link[aria-current="page"] {
    border-left-color: var(--accent);
    background: var(--accent-wash);
    color: var(--text-primary);
    font-weight: 600;
}

/* Ein gesperrter Eintrag ist ein <span>: nichts zum Anspringen, nichts zum Klicken. */
.nav__link--pending {
    color: var(--text-muted);
    cursor: default;
}

.nav__badge {
    flex: 0 0 auto;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.3rem;
}

.nav__badge--count {
    border-color: var(--series-4);
    color: var(--series-4);
    font-size: 0.6875rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Die Seitenleiste auf schmalen Geräten
   Untereinander gestapelt füllten die zwölf Einträge den ganzen ersten
   Bildschirm, und die Zahlen begännen erst darunter. Deshalb hier eine liegende
   Leiste, die in sich scrollt: dieselben Einträge, dieselbe Reihenfolge, aber
   eine Zeile hoch. Die Abschnittsmarken bleiben als Trenner davor stehen.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99em) {
    .sidebar {
        gap: 0.5rem;
        padding: 0.75rem 0 0;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .brand {
        padding: 0 1.25rem 0.75rem;
    }

    .nav {
        flex-direction: row;
        gap: 1.25rem;
        overflow-x: auto;
        padding: 0 1.25rem 0.4rem;
        scrollbar-width: thin;
    }

    .nav > div {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex: 0 0 auto;
    }

    .nav__section-title {
        margin: 0;
    }

    .nav__section-title::after {
        display: none;
    }

    .nav__list {
        flex-direction: row;
        gap: 0.25rem;
    }

    .nav__link {
        border-left: 0;
        border-bottom: 2px solid transparent;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
    }

    .nav__link[aria-current="page"] {
        border-bottom-color: var(--accent);
    }
}

.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.topbar__titles {
    min-width: 0;
}

.topbar__titles h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.topbar__meta {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.topbar__meta strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    background: var(--plane);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.user-chip__avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 0.75rem;
    font-weight: 650;
}

.user-chip__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-chip__name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.user-chip__role {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

/* Ein Raster- oder Flexkind ist von sich aus mindestens so breit wie sein
   Inhalt. Eine breite Tabelle sprengte damit die Karte, obwohl die in sich
   scrollen soll — und die ganze Seite ruckte auf dem Telefon seitwärts.
   min-width: 0 gibt der Karte die Erlaubnis, schmaler zu sein als ihr Inhalt. */
.content > *,
.handwork-grid > *,
.balance-grid > *,
.split > *,
.source-grid > *,
.accounts > *,
.stat-grid > *,
.form__grid > *,
.supplier-form > *,
.drawer__body > * {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Das Infozeichen
   Erklärungen stehen nicht mehr als Absatz unter jeder Zeile, sondern hinter
   einem kleinen Zeichen: beim Überfahren oder mit der Tastatur klappt der Text
   auf. Sichtbar bleibt, was gelesen werden muss; erklärt wird, wer fragt.

   Für Screenreader ist der Text immer da: er wird mit opacity ausgeblendet,
   nicht mit visibility oder display — das nähme ihn aus dem Barrierebaum.
   -------------------------------------------------------------------------- */
.info {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    line-height: 0;
}

.info__mark {
    display: inline-grid;
    place-items: center;
    width: 1.0625rem;
    height: 1.0625rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    cursor: help;
    user-select: none;
}

.info__mark:hover,
.info:focus-within .info__mark {
    color: var(--accent-contrast);
    background: var(--accent);
    border-color: var(--accent);
}

/* display:none, solange niemand hinsieht — nicht bloß durchsichtig. Ein
   ausgeblendeter, aber gesetzter Kasten am rechten Seitenrand zählt zur
   Seitenbreite und schöbe die ganze Seite seitwärts. Für Screenreader steht der
   Text im Zeichen selbst, dieser hier ist rein sichtbares Beiwerk. */
.info__text {
    display: none;
    position: absolute;
    top: calc(100% + 0.45rem);
    left: -0.5rem;
    z-index: 30;
    width: max-content;
    max-width: min(24rem, 74vw);
    padding: 0.6rem 0.75rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: normal;
    color: var(--text-secondary);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    pointer-events: none;
}

/* Das Häkchen zur Marke hin: ohne es schwebt der Kasten beziehungslos. */
.info__text::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0.85rem;
    width: 7px;
    height: 7px;
    background: var(--surface-raised);
    border-left: 1px solid var(--border-strong);
    border-top: 1px solid var(--border-strong);
    transform: rotate(45deg);
}

.info__mark:hover + .info__text,
.info:focus-within .info__text {
    display: block;
}

/* Sitzt die Marke rechts, klappt der Text nach links auf — sonst liefe er
   aus dem Bild. app.js dreht das bei Bedarf auch von selbst um. */
.info--end .info__text,
.info.is-flipped .info__text {
    left: auto;
    right: -0.5rem;
}

.info--end .info__text::before,
.info.is-flipped .info__text::before {
    left: auto;
    right: 0.85rem;
}

/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--control-h);
    padding: 0.4rem 0.85rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-primary);
    /* Auch ein <a> trägt diese Klasse. Ohne das hier bliebe die Unterstreichung
       stehen und die Schaltfläche sähe aus wie ein Link in einem Kasten. */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.button:hover {
    background: var(--surface-sunken);
    border-color: var(--text-secondary);
}

.button--accent,
.button--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.button--accent:hover,
.button--primary:hover {
    background: color-mix(in srgb, var(--accent) 84%, #000);
    border-color: color-mix(in srgb, var(--accent) 84%, #000);
    color: var(--accent-contrast);
}

.button--primary {
    width: 100%;
    min-height: 2.75rem;
    font-size: 0.9375rem;
}

.button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.button--danger {
    border-color: var(--negative);
    color: var(--negative);
    background: transparent;
}

.button--danger:hover {
    background: var(--negative);
    border-color: var(--negative);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Karten
   Kein Schlagschatten, sondern eine Haarlinie: auf Papier gibt es keine
   schwebenden Flächen, und die Aufstellung soll auf beiden Wegen gleich wirken.
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.85rem 1.125rem 0.7rem;
    border-bottom: 1px solid var(--gridline);
}

.card__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.card__hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.card__body {
    padding: 1rem 1.125rem 1.125rem;
}

/* Eine Karte, deren Kopf gleich in eine Tabelle übergeht, braucht unten keine
   zweite Polsterung. */
.card__body.table-wrap {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

.card__body.table-wrap > .table {
    padding: 0 1.125rem;
}

.notice {
    display: flex;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--series-4);
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Die Leitzahl — genau eine je Ansicht
   Serifenschrift, linker Anstrich, viel Luft: das ist die Zahl, wegen der
   jemand die Seite überhaupt öffnet.
   -------------------------------------------------------------------------- */
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border-left: 3px solid var(--accent);
}

.hero__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Mitwachsend statt fest: eine achtstellige Zahl mit Währungszeichen brach auf
   dem Telefon sonst um, und das Euro-Zeichen stand allein in der zweiten Zeile. */
.hero__value {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 7.5vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.02;
    font-variant-numeric: tabular-nums lining-nums;
}

.hero__value.is-negative {
    color: var(--negative);
}

.hero__hint {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.hero__ratio {
    text-align: right;
    padding-bottom: 0.35rem;
}

.hero__ratio-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
}

.hero__ratio-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Kennzahlenfelder
   -------------------------------------------------------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.stat {
    padding: 0.85rem 1rem;
}

.stat__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat__value {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums lining-nums;
}

.stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Die Richtung trägt das Vorzeichen mit, nicht nur die Farbe — sonst geht sie
   für jemanden verloren, der Rot und Grün nicht trennen kann. */
.stat__delta-value {
    font-weight: 600;
}

/* Zustandsklassen statt BEM-Modifikatoren: ein Literal mit __ lässt sich in
   einem Thymeleaf-Ausdruck nicht schreiben — dort ist __…__ Vorverarbeitung. */
.stat__delta.is-favourable .stat__delta-value {
    color: var(--positive);
}

.stat__delta.is-adverse .stat__delta-value {
    color: var(--negative);
}

/* --------------------------------------------------------------------------
   Marken, Hinweise, Rückmeldungen
   Rechteckige Marken statt Pillen: näher am Stempel auf einem Beleg.
   -------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 0.08rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    background: transparent;
    white-space: nowrap;
}

/* Woher eine Zahl stammt, muss auf einen Blick erkennbar sein: in einer
   Aufstellung für die Bank ist der Unterschied zwischen abgerufen und
   eingetippt wesentlich.

   Getragen wird der Unterschied von der Linie — durchgezogen für abgerufen,
   gestrichelt für eingetippt —, nicht von einer Füllung. Gefüllt standen in der
   Quellenspalte drei Dutzend blaue Kästchen untereinander und zogen den Blick
   von den Beträgen weg, um derentwillen die Seite geöffnet wird. Gefüllt bleibt
   nur, was einen Zustand meldet: gelungen, fehlgeschlagen, läuft. */
.badge--auto {
    border-color: color-mix(in srgb, var(--border-strong) 80%, var(--accent));
    color: var(--text-secondary);
}

.badge--manual {
    border-style: dashed;
}

.badge--computed {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.badge--ok {
    border-color: color-mix(in srgb, var(--positive) 45%, transparent);
    color: var(--positive);
    background: color-mix(in srgb, var(--positive) 7%, transparent);
}

.badge--error {
    border-color: color-mix(in srgb, var(--negative) 55%, transparent);
    color: var(--negative);
    background: color-mix(in srgb, var(--negative) 8%, transparent);
}

.badge--running {
    border-color: color-mix(in srgb, var(--series-4) 60%, transparent);
    color: var(--series-4);
    background: color-mix(in srgb, var(--series-4) 10%, transparent);
}

.notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.notes__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.6rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.notes__item svg {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.notes__item.is-warning {
    border-left-color: var(--series-4);
}

.notes__item.is-info {
    border-left-color: var(--accent);
}

.flash {
    margin: 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.flash--ok {
    border-left: 3px solid var(--positive);
}

.flash--error {
    border-left: 3px solid var(--negative);
}

/* --------------------------------------------------------------------------
   Datenquellen-Karten
   -------------------------------------------------------------------------- */
.source-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
}

.source {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.125rem;
}

.source__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--gridline);
}

.source__head .card__title {
    margin-right: auto;
}

/* Gleich breite Spalten, egal wie viele Angaben eine Quelle liefert — sonst
   stehen die beiden Karten nebeneinander unterschiedlich im Raster. */
.source__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem 1rem;
    margin: 0;
}

/* Die Werte stehen auf einer Linie, auch wenn eine Beschriftung zweizeilig
   umbricht — sonst tanzt eine Zahl aus der Reihe. */
.source__facts > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.source__facts dt {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.source__facts dd {
    margin: 0.15rem 0 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
}

.source__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

/* Der Rueckblick am Amazon-Kasten.
   Eigener Block unter der Knopfreihe und nicht darin: Er braucht ein
   Eingabefeld, und ein Kaestchen mit Rahmen zwischen lauter Knoepfen sieht
   aus, als waere etwas verrutscht. Ohne eigene Flaeche, weil er bereits in
   einem Kasten steht — zwei Rahmen ineinander wirken wie ein Fehler. */
.source__lookback {
    background: transparent;
}

.source__lookback .drawer__summary {
    padding: 0.5rem 0.75rem;
}

.source__lookback .drawer__body {
    gap: 0.6rem;
    padding: 0.75rem;
}

/* Datum und Knopf nebeneinander, auf schmalen Schirmen untereinander.
   Am unteren Rand ausgerichtet: Die Beschriftung steht ueber dem Feld, und
   ohne diese Ausrichtung schwebte der Knopf auf Hoehe der Beschriftung. */
.lookback {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.lookback .field {
    flex: 1 1 11rem;
}

/* Fortschritt eines laufenden Abrufs.
   Ein <progress> und kein nachgebauter Balken aus zwei <div>: die Vorleseform
   kennt das Element, es laesst sich ohne style-Attribut fuellen — was die CSP
   verbietet — und ohne Wert zeigt es von selbst den unbestimmten Lauf, wenn
   die Restzeit noch unbekannt ist. */
.runbar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.runbar__meter {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--series-4);
    --runbar-sweep: linear-gradient(90deg,
    var(--surface-sunken) 0 35%,
    color-mix(in srgb, var(--series-4) 45%, var(--surface-sunken)) 35% 65%,
    var(--surface-sunken) 65% 100%);
}

.runbar__meter::-webkit-progress-bar {
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.runbar__meter::-webkit-progress-value {
    border-radius: var(--radius-sm);
    background: var(--series-4);
    transition: width 0.4s ease;
}

.runbar__meter::-moz-progress-bar {
    border-radius: var(--radius-sm);
    background: var(--series-4);
}

/* Ohne Wert faerbt der Balken sich nicht; ein wanderndes Band zeigt, dass
   etwas laeuft, ohne einen Stand zu behaupten. Zweimal derselbe Verlauf, in
   getrennten Regeln: in WebKit liegt die Spurflaeche als eigenes Pseudoelement
   ueber dem Element, und ein Browser, der das Pseudoelement nicht kennt,
   verwirft eine Regel mitsamt aller Selektoren, die daneben stehen. */
.runbar__meter:not([value]) {
    background: var(--runbar-sweep);
    background-size: 250% 100%;
    animation: runbar-sweep 1.6s linear infinite;
}

.runbar__meter:not([value])::-webkit-progress-bar {
    background: var(--runbar-sweep);
    background-size: 250% 100%;
    animation: runbar-sweep 1.6s linear infinite;
}

@keyframes runbar-sweep {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -60% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .runbar__meter:not([value]) {
        animation: none;
    }

    .runbar__meter:not([value])::-webkit-progress-bar {
        animation: none;
    }

    .runbar__meter::-webkit-progress-value {
        transition: none;
    }
}

.runbar__eta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Filterleiste und Seitennavigation
   -------------------------------------------------------------------------- */
.filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.9rem 1.125rem;
}

.filterbar__field {
    display: flex;
    flex-direction: column;
    min-width: 9rem;
}

.filterbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Bearbeiten direkt in der Aufstellung
   <details> statt JavaScript: läuft unter der strengen CSP und bleibt beim
   Ausdrucken zugeklappt, sodass die Aufstellung sauber aufs Papier geht.
   -------------------------------------------------------------------------- */

/* Die Aufklappzeile gehört zur Zeile darüber. Trug diese ihren eigenen Strich,
   stand „+ Betrag ändern“ zwischen zwei Linien und sah aus, als gehörte es zur
   Zeile darunter. Der Strich der Datenzeile entfällt, der der Aufklappzeile
   schließt beide gemeinsam ab. */
.table tbody tr:has(+ .table__edit) > td {
    border-bottom: none;
}

.table__edit td {
    padding-top: 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gridline);
}

.table__edit summary {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--accent);
    cursor: pointer;
    padding: 0.1rem 0;
    list-style: none;
}

.table__edit summary::-webkit-details-marker {
    display: none;
}

.table__edit summary::before {
    content: "+ ";
    font-weight: 700;
}

.table__edit details[open] summary::before {
    content: "− ";
}

.table__edit summary:hover {
    text-decoration: underline;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0.25rem;
}

/* Doppelte Klasse: die Grundregel weiter unten setzt width: 100 %, und ein
   Feld für einen Betrag soll in der Zeile stehen, nicht sie ausfüllen. */
.field__input.field__input--inline {
    width: auto;
    min-width: 7rem;
    min-height: 2rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
}

.inline-form .button {
    min-height: 2rem;
    padding: 0.25rem 0.7rem;
}

/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */
.balance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* Breite Inhalte scrollen in ihrem eigenen Kasten; die Seite selbst rutscht
   nie zur Seite. Passt die Tabelle ohnehin, hebt app.js das Beschneiden auf —
   sonst könnte ein aufgeklapptes Infozeichen nicht über den Rand hinausragen.

   position: relative ist kein Beiwerk: overflow beschneidet nur, was seinen
   Bezugsrahmen im Kasten hat. Ohne die Angabe bezog sich eine abgesetzte
   Beschriftung (.visually-hidden in der letzten Spalte) auf das Fenster, blieb
   also unbeschnitten — und zog auf dem Telefon die ganze Seite nach rechts,
   obwohl die Tabelle sichtbar sauber in ihrem Kasten stand. */
.table-wrap {
    position: relative;
    overflow-x: auto;
}

.table-wrap.fits {
    overflow: visible;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.table caption {
    text-align: left;
    padding-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.table th,
.table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--gridline);
    white-space: nowrap;
    vertical-align: top;
}

.table th:first-child,
.table td:first-child {
    padding-left: 1.125rem;
}

.table th:last-child,
.table td:last-child {
    padding-right: 1.125rem;
}

.table thead th {
    padding-top: 0.6rem;
    padding-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
    vertical-align: bottom;
}

.table td:first-child,
.table th:first-child {
    white-space: normal;
    min-width: 12rem;
}

/* Die Spaltenklasse muss die Grundregel der Tabelle schlagen — sonst stünde die
   Überschrift links und die Zahl darunter rechts. */
.num,
.table th.num,
.table td.num {
    text-align: right;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Eine Gruppe wird angeschrieben, nicht aufgeblasen. */
.table__group td {
    padding-top: 1.1rem;
    padding-bottom: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-strong);
}

.table tbody:first-of-type .table__group:first-child td {
    padding-top: 0.6rem;
}

.table__line td {
    color: var(--text-secondary);
}

.table__line td:not(:first-child) {
    color: var(--text-primary);
}

.table__subtotal td {
    font-weight: 650;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-sunken) 55%, transparent);
}

/* Der doppelte Strich über der Endsumme ist die Schreibweise, die jeder
   Buchhalter erwartet — und der Grund, warum die Zahl gefunden wird. */
.table__total td {
    padding-top: 0.6rem;
    padding-bottom: 0.7rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    border-top: 3px double var(--text-primary);
    border-bottom: none;
}

.table__group-hint {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

/* Beisatz unter einem Wert — Stückzahlen, Zeitstempel, Herkunft. Erklärungen
   gehören dagegen hinter das Infozeichen. */
.table__note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-muted);
    white-space: normal;
    max-width: 34rem;
}

/* „noch nicht erfasst“ muss sich klar von einem echten Betrag 0,00 € abheben. */
.table__empty {
    color: var(--text-muted);
    font-style: italic;
}

/* Ein Wert, der nur die Abwesenheit einer Besonderheit meldet — er soll die
   Zeile nicht so laut besetzen wie die Zahlen daneben. */
.table__muted {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.table__line.is-empty td,
tr.is-empty > td {
    background: color-mix(in srgb, var(--surface-sunken) 40%, transparent);
}

/* Aktionen in einer Zelle: nebeneinander, ohne die Zelle zu einem Flexkasten
   zu machen — das nähme sie aus dem Tabellenraster und verschöbe die Linien. */
.table__actions {
    white-space: nowrap;
}

td.table__actions > * + *,
span.table__actions > * + * {
    margin-left: 0.75rem;
}

/* Mehrere Handlungen an einer Zeile stehen untereinander und linksbündig — in
   einem eigenen Kasten, damit die Zelle eine Tabellenzelle bleibt. */
.rowactions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.rowactions > * {
    margin: 0;
}

.rowactions .confirm {
    margin-top: 0;
}

/* Aufklappen zum Ändern: sieht aus wie ein Link, ist aber keiner — deshalb die
   gepunktete Unterstreichung, dieselbe Schreibweise wie beim Löschen. */
.rowedit > summary {
    display: inline-block;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--accent);
    list-style: none;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
}

.rowedit > summary::-webkit-details-marker {
    display: none;
}

.rowedit > summary:hover {
    text-decoration-style: solid;
}

/* In der Aufstellung ist die Bezeichnung die lange Spalte; Quelle und Betrag
   brauchen nur ihren Inhalt. Ohne das drängte sich der Name auf drei Zeilen,
   während daneben Platz frei bliebe. */
.table--statement td:first-child,
.table--statement th:first-child {
    min-width: 14rem;
    width: 100%;
}

.table--statement td:not(:first-child),
.table--statement th:not(:first-child) {
    width: 1%;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

/* Zwei Kennzahlen sollen sich die Breite teilen und nicht als zwei schmale
   Kacheln neben einer Leerfläche stehen — deshalb schlägt diese Regel auch die
   Vierspaltigkeit der breiten Fassung. */
.stat-grid.stat-grid--two {
    grid-template-columns: repeat(2, 1fr);
}

/* --------------------------------------------------------------------------
   Formularfelder
   -------------------------------------------------------------------------- */
.field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 0;
}

.field--wide {
    grid-column: 1 / -1;
}

.field__label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.field__input {
    width: 100%;
    min-height: var(--control-h);
    padding: 0.45rem 0.65rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.field__input::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
}

.field__input:hover {
    border-color: var(--text-secondary);
}

.field__input:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

/* Eine Auswahl bekommt denselben Rahmen und dieselbe Höhe wie ein Eingabefeld;
   ohne das stünden Beschriftungen in einer Zeile auf verschiedener Höhe. */
select.field__input {
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23837f74' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    cursor: pointer;
}

/* Zahleneingaben stehen rechtsbündig — so wie die Beträge, mit denen sie
   verglichen werden. Und sie sind so breit, wie die Zahl es verlangt: ein Feld
   für „14“ muss nicht so breit sein wie eines für einen Firmennamen.

   Die Grenze gilt für Beträge genauso wie für Stückzahlen. Ohne sie nahm ein
   Betragsfeld die ganze Spalte ein, in der es gerade stand: auf der B2B-Seite
   war der Einkaufspreis dreimal so breit wie die Menge daneben, obwohl in
   beiden dieselben vier Ziffern stehen. */
.field__input[inputmode="decimal"],
.field__input[type="number"] {
    max-width: 11rem;
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
}

.form__grid--three .field__input {
    max-width: 11rem;
}

textarea.field__input {
    min-height: 5rem;
    text-align: left;
}

/* Kennzeichnet ein Feld als freiwillig — sonst rät man beim Ausfüllen. */
.field__optional {
    font-weight: 400;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text-muted);
}

/* Erläuterung unter einem Feld. Bleibt für die wenigen Fälle, in denen sie
   ständig sichtbar sein soll; sonst steht sie hinter dem Infozeichen. */
.field__hint {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.field__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-primary);
}

.field__check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

/* Eine Dateiauswahl bleibt ein echtes <input type=file>; nur die Schaltfläche
   darin bekommt das Aussehen der übrigen statt das des Betriebssystems. */
input[type="file"].field__input,
.dropzone__input {
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 0.6rem;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Anmeldung
   -------------------------------------------------------------------------- */
.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--plane);
}

.login-card {
    width: 100%;
    max-width: 24rem;
    padding: 1.75rem;
    border-top: 3px solid var(--accent);
}

.login-card__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--gridline);
}

.login-card__heading {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
}

.login-card .field {
    margin-bottom: 0.9rem;
}

.alert {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.8rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--plane);
}

/* Zeichen und Text tragen den Zustand; die Farbe verstärkt ihn nur. */
.alert--error {
    border-left: 3px solid var(--negative);
    color: var(--text-primary);
}

.alert--info {
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
}

/* Das Zeichen trägt dieselbe Farbe wie der Streifen links — ein rotes Ausrufezeichen
   an einem blauen Hinweis liest sich als Fehler, der keiner ist. */
.alert__icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    font-weight: 700;
}

.alert--error .alert__icon {
    color: var(--negative);
}

.alert--info .alert__icon {
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Fehlerseiten
   -------------------------------------------------------------------------- */
.error-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    text-align: center;
}

.error-page__box {
    max-width: 28rem;
    padding: 1.75rem 2rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
}

.error-page__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    text-decoration: none;
}

.error-page h1 {
    font-family: var(--font-display);
    font-size: 1.375rem;
}

.error-page__code {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
    font-variant-numeric: lining-nums;
}

.error-page__message {
    margin: 0.5rem 0 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Breite Fassung
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content,
    .topbar {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .card__header,
    .filterbar {
        padding-left: 1.375rem;
        padding-right: 1.375rem;
    }

    .card__body {
        padding-left: 1.375rem;
        padding-right: 1.375rem;
    }

    .card__body.table-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .table th:first-child,
    .table td:first-child {
        padding-left: 1.375rem;
    }

    .table th:last-child,
    .table td:last-child {
        padding-right: 1.375rem;
    }
}

@media (min-width: 64em) {
    .shell {
        grid-template-columns: var(--sidebar-width) 1fr;
    }

    /* Die Leiste bleibt beim Blättern stehen und ist dafür genau einen Bildschirm
       hoch. Auf einer langen Seite endete darunter auch ihre Fläche — quer durch
       die Seite lief eine Kante, unter der die Leiste einfach aufhörte. Der
       Streifen liegt in derselben Rasterzelle, trägt Fläche und Trennlinie über
       die volle Höhe und rührt sich nicht: die Leiste selbst wird durchsichtig. */
    .shell::before {
        content: "";
        grid-column: 1;
        grid-row: 1;
        background: var(--surface);
        border-right: 1px solid var(--border);
    }

    .main {
        grid-column: 2;
        grid-row: 1;
    }

    .sidebar {
        grid-column: 1;
        grid-row: 1;
        background: transparent;
        border-bottom: none;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .source-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .balance-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Die Leitzahl bleibt die größte Zahl der Seite. Sie muss dafür aber nicht
       die halbe Zeile füllen — auf einem breiten Schirm las sich der Betrag wie
       eine Werbezeile und nicht wie der Kopf einer Aufstellung. */
    .hero__value {
        font-size: 2.625rem;
    }
}

/* --------------------------------------------------------------------------
   Handarbeit
   Eine Karte je Artikel statt einer Tabellenzeile: hier muss jemand erst
   herausfinden, *was* der Artikel ist, und dafür brauchen die Kennungen Platz.

   Die Karten stehen im Raster. Über die volle Seitenbreite gezogen war jede
   Karte eine fast leere Fläche mit drei Feldern am unteren Rand — und zehn
   davon untereinander eine Seite, durch die man dreimal scrollen musste.
   auto-fill statt fester Spaltenzahl, damit die Zahl der Spalten der Breite
   folgt, die nach der Seitenleiste übrig bleibt; min() hält die Karte auf dem
   Telefon innerhalb des Bildschirms.
   -------------------------------------------------------------------------- */
.handwork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
}

.handwork {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.875rem 1rem;
}

.handwork__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--gridline);
}

.handwork__ident {
    min-width: 0;
}

.handwork__title {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Der Name wird nach zwei Zeilen gekappt, damit alle Kacheln gleich hoch bleiben:
   ein Artikel mit einem langen Namen zog seine Kachel sonst in die Länge und die
   Reihe wurde unförmig. Vollständig steht der Name im title-Attribut. */
.handwork__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
}

/* Steht die SKU als Überschrift, trägt sie die Identität des Artikels und wird
   entsprechend gesetzt: monospace, damit O und 0 unterscheidbar bleiben. */
.handwork__title.is-sku {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--accent);
    overflow-wrap: anywhere;
}

.handwork__sku {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--accent);
    /* anywhere statt break-all: eine SKU wie AMZDE_10.05_29OCT_B08GBLSDCZ bricht
       dann an ihren Unterstrichen und bleibt in Teilen lesbar. */
    overflow-wrap: anywhere;
}

.handwork__qty {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
}

.handwork__qty-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums lining-nums;
}

.handwork__qty-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Beschriftung über dem Wert statt daneben: nebeneinander kostete die
   Beschriftung in einer schmalen Karte die halbe Zeile, und die Kennung — auf
   die es ankommt — brach um. */
.handwork__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.handwork__facts div {
    min-width: 0;
}

.handwork__facts dt {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.handwork__facts dd {
    margin: 0.1rem 0 0;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.handwork__facts-wide {
    grid-column: 1 / -1;
}

/* Preis und Notiz teilen sich eine Zeile, Position und Knopf bekommen die volle
   Breite: vier Felder untereinander machten das Formular höher als die Kennungen
   darüber, und die Positionsnamen („Warenbestand FBA, eingesendet") wären in
   einer halben Spalte abgeschnitten. */
.handwork__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    align-items: end;
    gap: 0.5rem 0.6rem;
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid var(--gridline);
}

.handwork__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.handwork__field--wide {
    grid-column: 1 / -1;
}

.handwork__submit {
    grid-column: 1 / -1;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Reiter
   Verweise, keine Schaltflächen: Der gewählte Reiter steht in der Adresse und
   überlebt damit einen Seitenwechsel, das Verschicken und die Zurück-Taste.
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tabs__tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.tabs__tab:hover {
    border-color: var(--border-strong);
}

/* Der gewählte Reiter trägt zusätzlich aria-current="page" — die Farbe allein
   wäre für niemanden erkennbar, der sie nicht sieht. */
.tabs__tab.is-active {
    color: var(--text-primary);
    background: var(--surface-raised);
    border-color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.tabs__label {
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
}

.tabs__meta {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tabs__count {
    min-width: 1.5rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    text-align: center;
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border: 1px solid var(--gridline);
    border-radius: var(--radius-sm);
}

.tabs__hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Nachgetragene Preise
   Eine Zeile je SKU, zum Aufklappen: Die Zeile zeigt, was gilt; wer berichtigen
   will, klappt auf und sieht dabei zugleich, was vorher galt.
   -------------------------------------------------------------------------- */
.entered + .entered {
    margin-top: 0.4rem;
}

.entered__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.75rem;
}

.entered__sku {
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.entered__price {
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
}

.entered__source {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.entered__pos,
.entered__when {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.entered__history {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--gridline);
}

.entered__history-title {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.entered__history ul {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.handwork__status {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.handwork__status.is-failed {
    color: var(--negative);
}

/* Der Zustand einer Karte nach dem Übernehmen: Sie bleibt einen Moment stehen,
   damit sichtbar ist, was gerade gespeichert wurde, und geht dann. */
.handwork.is-saved {
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

.handwork.is-saving {
    opacity: 0.7;
}

/* Eine Reihe kurzer Felder mit einem Knopf am Ende — ohne den Trennstrich des
   Artikelformulars, der in einer Karte mit eigener Kopfzeile doppelt wäre. */
.inline-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.inline-fields--divided {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--gridline);
}

.inline-fields .field {
    min-width: 10rem;
}

.handwork__form .field__input.field__input--inline,
.inline-fields .field__input.field__input--inline {
    width: 100%;
    min-height: var(--control-h);
    padding: 0.45rem 0.65rem;
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Ablagefläche für Dateien
   Enthält ein gewöhnliches file-Input: ohne JavaScript bleibt die Auswahl
   benutzbar, Drag and Drop ist nur die bequemere Zutat.
   -------------------------------------------------------------------------- */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface-sunken) 45%, transparent);
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.dropzone svg {
    color: var(--text-muted);
}

.dropzone.is-dragover {
    border-color: var(--accent);
    border-style: solid;
    background: var(--accent-wash);
    color: var(--accent);
}

.dropzone.is-dragover svg {
    color: var(--accent);
}

.dropzone__text {
    margin: 0;
    font-size: 0.875rem;
}

.dropzone__input {
    max-width: 100%;
    border: 0;
    background: none;
}

.dropzone__files {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    word-break: break-all;
}

/* Die Ablagefläche trägt den Knopf direkt darunter. */
.upload {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: flex-start;
}

.upload .dropzone {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Prüfseite vor dem Erstellen
   -------------------------------------------------------------------------- */
.review {
    padding: 1.125rem 1.25rem;
    border-left: 3px solid var(--accent);
}

.review h2 {
    font-family: var(--font-display);
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
}

.review p {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.review p:last-child {
    margin-bottom: 0;
}

.review--blocking {
    border-left-color: var(--negative);
}

.review__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
}

.review__actions .issue__detail {
    margin: 0;
    flex: 1 1 20rem;
}

.issues {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
}

.issue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-left: 3px solid var(--text-muted);
}

.issue--blocking {
    border-left-color: var(--negative);
}

.issue__body {
    flex: 1 1 22rem;
}

.issue__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 650;
}

.issue__detail {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Fakten-Liste: Begriff und Wert nebeneinander, umbruchsicher.
   -------------------------------------------------------------------------- */
.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}

.facts dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 0.15rem;
}

.facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Bankkonten
   Ein Konto hat genau eine Zahl, die zählt. Alles andere ordnet sich ihr unter.
   ========================================================================== */
.accounts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 52em) {
    .accounts {
        grid-template-columns: repeat(3, 1fr);
    }
}

.account {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.125rem;
}

.account__head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--gridline);
}

.account__name {
    font-size: 0.9375rem;
    font-weight: 650;
}

.account__bank {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.account__balance {
    margin: 0.6rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5.5vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums lining-nums;
}

.account__balance.is-negative {
    color: var(--negative);
}

/* Der Anfangszustand ist kein Fehler — er wird auch nicht wie einer gesetzt. */
.account__balance.is-pending {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
}

.account__meta {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.account__action {
    margin-top: auto;
    padding-top: 0.9rem;
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Einrichten: der erste Schritt bekommt die ganze Seite
   -------------------------------------------------------------------------- */
.setup {
    max-width: 34rem;
    padding: 1.5rem 1.625rem 1.625rem;
    border-top: 3px solid var(--accent);
}

.setup__title {
    font-family: var(--font-display);
    font-size: 1.1875rem;
}

.setup__lead {
    margin: 0.4rem 0 1.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.setup__form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.setup__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 34em) {
    .setup__row {
        grid-template-columns: 1fr 1fr;
    }
}

.setup__field {
    display: flex;
    flex-direction: column;
}

.setup__form .button {
    align-self: flex-start;
    margin-top: 0.25rem;
}

.setup__note {
    margin: 1.25rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--gridline);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Kontostand: die Zahl und die Rechnung dahinter
   -------------------------------------------------------------------------- */
.balance {
    padding: 1.125rem 1.375rem 1.25rem;
    border-left: 3px solid var(--accent);
}

.balance__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.balance__value {
    margin: 0.3rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 6.5vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums lining-nums;
}

.balance__value.is-negative {
    color: var(--negative);
}

.balance__value.is-pending {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
}

/* Die Bestandteile nebeneinander: die Zahl oben soll nachrechenbar sein. */
.balance__parts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0.55rem 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums lining-nums;
}

.balance__parts > span::before {
    content: "+ ";
    color: var(--text-muted);
}

.balance__parts > span:first-child::before {
    content: "";
}

.balance__since {
    color: var(--text-muted);
}

.balance__since::before {
    content: "· " !important;
}

/* --------------------------------------------------------------------------
   Schublade für alles Seltene
   -------------------------------------------------------------------------- */
.drawer {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.drawer__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    list-style: none;
}

.drawer__summary::-webkit-details-marker {
    display: none;
}

/* Ein eigenes Zeichen statt des Browserdreiecks: es dreht sich beim Aufklappen
   und sitzt auf der Grundlinie der Beschriftung. */
.drawer__summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s;
}

.drawer[open] > .drawer__summary::before {
    transform: rotate(45deg);
}

.drawer__summary:hover {
    color: var(--text-primary);
}

.drawer[open] > .drawer__summary {
    border-bottom: 1px solid var(--border);
}

.drawer__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--plane);
}

/* --------------------------------------------------------------------------
   Umsatztabelle
   Feste Spaltenbreiten: der Verwendungszweck einer Überweisung ist beliebig
   lang und schöbe den Betrag sonst aus dem Bild — ausgerechnet die Spalte,
   wegen der man hinsieht.
   -------------------------------------------------------------------------- */
.table--transactions {
    table-layout: fixed;
}

.table--transactions th:nth-child(1),
.table--transactions td:nth-child(1) {
    width: 9rem;
    min-width: 0;
}

.table--transactions th:nth-child(2),
.table--transactions td:nth-child(2) {
    width: 22%;
}

.table--transactions th:nth-child(4),
.table--transactions td:nth-child(4) {
    width: 7.5rem;
}

/* Ein Datum darf nicht umbrechen. In 6rem passte „14.08.2026“ samt Zellenrand
   nicht mehr, und weil die Spalten dieser Tabelle Umbruch an jeder Stelle
   erlauben, stand die letzte Ziffer allein in der zweiten Zeile. */
.table--transactions th:nth-child(5),
.table--transactions td:nth-child(5) {
    width: 6.75rem;
    white-space: nowrap;
}

/* Die Grundtabelle setzt white-space: nowrap, weil ihre Spalten kurz sind.
   Hier sind sie es nicht — ohne diese Aufhebung liefe der Partnername quer
   über die Nachbarspalte. */
.table--transactions td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
}

/* Partner und Zweck jeweils höchstens drei Zeilen: eine Überweisung kann einen
   halben Aufsatz im Verwendungszweck tragen, und dann wäre die Zeile eine Wand
   aus Text. */
.table--transactions td:nth-child(2) > span:first-child,
.table--transactions td:nth-child(3) > span:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.table--transactions .num {
    white-space: nowrap;
}

.table--transactions .num.is-negative {
    color: var(--negative);
}

/* --------------------------------------------------------------------------
   Artikellisten
   Ein Amazon-Titel hat gut und gerne zweihundert Zeichen. Ohne feste Spalten
   schöbe er Bestand, Einkaufspreis und Wert aus dem Bild — ausgerechnet die
   Spalten, wegen derer man die Seite öffnet. Deshalb: feste Breiten, der Titel
   bekommt den Rest und bricht nach zwei Zeilen ab.
   -------------------------------------------------------------------------- */
.table--items {
    table-layout: fixed;
}

.table--items th:nth-child(1),
.table--items td:nth-child(1) {
    width: 13rem;
    min-width: 0;
}

.table--items th:nth-child(2),
.table--items td:nth-child(2) {
    width: auto;
}

.table--items th:nth-child(n+3),
.table--items td:nth-child(n+3) {
    width: 6.5rem;
}

.table--items td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.table--items .clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Abrufbericht
   Aufgebaut wie der Bericht des Auswertungsprogramms: Posten, Zwischensummen,
   Gesamtsumme. Die Zahlen sollen sich mit dem Finger nachrechnen lassen.
   ========================================================================== */
.table--report td:first-child,
.table--rates td:first-child {
    width: 55%;
}

.table--report .num,
.table--rates .num {
    white-space: nowrap;
}

/* Zwischensumme: abgesetzt, aber nicht laut. */
.table--report .table__subtotal td {
    border-top: 1px solid var(--border);
    font-weight: 650;
}

/* Zwei Karten nebeneinander, wo Platz ist — sonst untereinander. */
.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 62em) {
    .split {
        grid-template-columns: 1fr 1fr;
    }
}

.run__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

/* ==========================================================================
   Kredite
   ========================================================================== */
.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem 1.25rem;
}

@media (min-width: 46em) {
    .form__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 62em) {
    .form__grid--three {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Der Haken steht mit seinem Infozeichen in einer Zeile, nicht darunter. */
.amazon-check {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.125rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--gridline);
}

.amazon-check .field__check {
    margin-bottom: 0;
}

/* Der Tilgungsplan: Zahlenkolonnen müssen untereinander stehen. */
.table--schedule .num {
    white-space: nowrap;
}

.table--schedule td:first-child {
    white-space: nowrap;
    min-width: 8rem;
}

/* Was noch aussteht, tritt zurück — vergangene Raten sind die belegten. */
.table--schedule tr.is-future td {
    color: var(--text-muted);
}

/* Ein Tilgungsplan hat leicht dreihundert Zeilen. Er soll vollständig da sein —
   zum Vergleich mit dem Plan der Bank braucht man auch das Ende —, aber nicht
   die Seite füllen. Deshalb scrollt er in sich, mit stehender Kopfzeile. */
.schedule-wrap {
    max-height: 32rem;
    overflow: auto;
}


.schedule-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: inset 0 -1px 0 var(--border-strong);
}

/* ==========================================================================
   Erfassungsassistent
   Ein Kredit hat zwei Dutzend mögliche Angaben, aber keiner hat alle. Deshalb
   ein Menü zum Weiterklicken: erst die Art, dann nur noch das, was dazu gehört.
   Die Regeln stehen als data-when-Attribute in der Vorlage, das Umschalten in
   app.js — hier steht nur, wie es aussieht.
   ========================================================================== */

/* Ausgeblendet heißt ausgeblendet. Ohne !important gewinnt jede Klassenregel
   mit eigenem display gegen das hidden-Attribut, und ein Feld, das nicht zur
   Kreditart gehört, stünde trotzdem da. */
[hidden] {
    display: none !important;
}

.wizard__rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wizard__mark {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem 0.3rem 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.wizard__markNo {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
}

.wizard__mark.is-current {
    color: var(--text-primary);
    background: var(--accent-wash);
    font-weight: 600;
}

.wizard__mark.is-current .wizard__markNo {
    color: var(--accent-contrast);
    background: var(--accent);
    border-color: var(--accent);
}

/* Erledigte Schritte sind anklickbar — das ist der Weg zurück. Der Haken sagt
   das zusätzlich zur Farbe: Farbe allein ist kein Signal. */
.wizard__mark.is-done {
    color: var(--text-secondary);
    cursor: pointer;
}

.wizard__mark.is-done .wizard__markNo {
    color: var(--positive);
    border-color: var(--positive);
    /* Die Ziffer weicht dem Haken: ein erledigter Schritt braucht keine Nummer
       mehr, aber die Farbe allein wäre kein Signal. */
    font-size: 0;
}

.wizard__mark.is-done .wizard__markNo::after {
    content: "\2713";
    font-size: 0.8125rem;
}

.wizard__mark.is-done:hover {
    color: var(--text-primary);
}

@media (max-width: 34em) {
    /* Auf dem Telefon zählt der Fortschritt, nicht die Beschriftung. */
    .wizard__markText {
        display: none;
    }

    .wizard__mark.is-current .wizard__markText {
        display: inline;
    }
}

.wizard__step {
    scroll-margin-top: 1rem;
}

.wizard__nav {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-sunken) 55%, transparent);
    border-radius: 0 0 var(--radius) var(--radius);
}

.wizard__fields {
    margin-top: 1.125rem;
}

.wizard__fields:first-child {
    margin-top: 0;
}

.wizard__details {
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Auswahlkarten mit Infozeichen
   Eine Karte ist ein Label um ein Radio: klickbar in ganzer Fläche, mit
   Tastatur bedienbar, und ohne JavaScript genauso brauchbar.
   -------------------------------------------------------------------------- */
.choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    border: 0;
}

@media (min-width: 46em) {
    .choices {
        grid-template-columns: 1fr 1fr;
    }
}

/* Ein Auswahlblock, der auf ein Feldraster folgt, braucht denselben Abstand wie
   das nächste Raster — sonst klebt seine Legende am Feld darüber. */
.card__body > .choices {
    margin-top: 1.125rem;
}

.card__body > .choices:first-child {
    margin-top: 0;
}

.choices__legend {
    padding: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Eine Legende sitzt im Raster quer über alle Spalten, sonst nimmt sie eine
   Karte weg. */
.choices > legend,
.choices__legend {
    grid-column: 1 / -1;
}

.choice {
    position: relative;
    display: flex;
    align-items: stretch;
}

.choice__pick {
    display: flex;
    flex: 1;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.8rem 2.5rem 0.8rem 0.85rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}

.choice__pick:hover {
    border-color: var(--border-strong);
    border-left-color: var(--accent);
}

.choice__pick input {
    margin-top: 0.2rem;
    accent-color: var(--accent);
    flex: none;
}

/* :has ist hier keine Spielerei: ohne es ließe sich die gewählte Karte nur über
   JavaScript hervorheben, und ohne JavaScript sähe man nicht, was angekreuzt
   ist. Browser ohne :has zeigen weiterhin den Radiopunkt. */
.choice__pick:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    border-left-color: var(--accent);
    background: var(--accent-wash);
}

.choice__pick:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.choice__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.choice__label {
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--text-primary);
}

.choice__desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.choice__info {
    position: absolute;
    top: 0.7rem;
    right: 0.6rem;
}

/* --------------------------------------------------------------------------
   Zusammenfassung vor dem Speichern
   -------------------------------------------------------------------------- */
.summary {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface-sunken) 55%, transparent);
}

.summary__title {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Formular für Händlerrechnungen und Ähnliches
   Ein Raster statt einer Reihe: die Felder sind unterschiedlich lang, und was
   zusammengehört, soll auch nebeneinander stehen.
   -------------------------------------------------------------------------- */
.supplier-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem 1.25rem;
    align-items: start;
}

.supplier-form__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.supplier-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (min-width: 48em) {
    .supplier-form {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .supplier-form__field--wide {
        grid-column: 1 / -1;
    }

    .supplier-form__actions {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   Zweistufiges Löschen
   Das <details> hält die eigentliche Schaltfläche zurück, bis sie ausdrücklich
   aufgeklappt wird — ein Fehlklick kostet damit keine Daten.
   -------------------------------------------------------------------------- */
.confirm {
    margin-top: 0.35rem;
}

.confirm > summary {
    display: inline-block;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted);
    list-style: none;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
}

.confirm > summary::-webkit-details-marker {
    display: none;
}

.confirm > summary:hover {
    color: var(--negative);
}

.confirm > form {
    margin-top: 0.4rem;
}

/* --------------------------------------------------------------------------
   Satztabellen der Amazon-Einstellungen
   Kurze Zahlenfelder als Raster statt als Liste, sonst läuft die Seite unnötig
   in die Länge.
   -------------------------------------------------------------------------- */
/* align-items: end — eine zweizeilige Beschriftung darf ihr Feld nicht tiefer
   setzen als die Felder daneben. */
.rates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    align-items: end;
    gap: 0.85rem 1.25rem;
    margin-top: 0.25rem;
}

.rates__item {
    display: flex;
    flex-direction: column;
}

.rates__input {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rates__input .field__input {
    width: 5rem;
    text-align: right;
}

.rates__unit {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Druckfassung
   Eigene Seite statt nur eines Druck-Stylesheets: der Ausdruck braucht einen
   Dokumentkopf mit Firmierung und Stichtag, den die Arbeitsansicht nicht hat.
   ========================================================================== */
.print-page {
    background: var(--plane);
    padding: 1.25rem 0.75rem 2.5rem;
}

.print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 52rem;
    margin: 0 auto 0.75rem;
}

.print-actions > div {
    width: 100%;
}

.sheet {
    max-width: 52rem;
    margin: 0.5rem auto 0;
    padding: 1.5rem 1.125rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Der Rand eines Blattes — erst da, wo Platz dafür ist. */
@media (min-width: 48em) {
    .sheet {
        padding: 2.75rem 3rem 2.5rem;
    }
}

.sheet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--text-primary);
}

.sheet__company {
    margin: 0 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sheet__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
}

.sheet__asof {
    margin: 0.3rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.sheet__meta {
    display: grid;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.75rem;
}

.sheet__meta div {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.sheet__meta dt {
    color: var(--text-muted);
}

.sheet__meta dd {
    margin: 0;
    font-weight: 600;
}

.sheet__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--gridline);
}

.sheet__headline > span:first-child {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sheet__headline strong {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
}

.sheet__headline-sub {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.sheet__block {
    margin-top: 1.75rem;
    /* Ein Abschnitt soll nicht mitten in der Tabelle umbrechen. */
    break-inside: avoid;
    /* Auf dem Telefon passen drei Spalten nicht nebeneinander; dann scrollt der
       Block in sich, statt die ganze Seite seitwärts zu ziehen. Auf Papier ist
       Platz genug — dort wird das unten wieder aufgehoben. */
    overflow-x: auto;
}

.sheet__block h2 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
}

.sheet__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sheet__table th,
.sheet__table td {
    padding: 0.35rem 0.4rem;
    text-align: left;
    border-bottom: 1px solid var(--gridline);
}

.sheet__table th {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
}

.sheet__table .num {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.sheet__group td {
    padding-top: 0.8rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sheet__subtotal td {
    font-weight: 650;
    color: var(--text-secondary);
}

.sheet__total td {
    padding-top: 0.5rem;
    font-weight: 700;
    border-top: 3px double var(--text-primary);
    border-bottom: none;
}

.sheet__empty {
    color: var(--text-muted);
}

.sheet__notes {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.sheet__notes li {
    margin-bottom: 0.3rem;
}

.sheet__foot {
    margin-top: 1.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gridline);
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.sheet__foot p {
    margin: 0 0 0.25rem;
}

/* --------------------------------------------------------------------------
   Nachweis zur Vermögensaufstellung

   Am Bildschirm dieselbe Vorlage wie im PDF, aber mit den Mitteln, die hier zur
   Verfügung stehen: Flexbox statt Tabellenzellen für die Zeile aus Überschrift
   und Summe. Die Tabellen selbst erben von .sheet__table.
   -------------------------------------------------------------------------- */

.sheet__lead {
    margin: 0 0 1.5rem;
    max-width: 60ch;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.evidence__head,
.evidence__title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.sheet__blocksum,
.evidence__sum {
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}

.evidence__group {
    margin-top: 1.5rem;
}

.evidence__title {
    margin: 0 0 0.15rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gridline);
    font-size: 0.9375rem;
    font-weight: 650;
}

.evidence__meta {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Tausende Zeilen: kleiner und dichter als das Hauptblatt, zum Nachschlagen. */
.evidence__table {
    font-size: 0.75rem;
}

.evidence__table th,
.evidence__table td {
    padding: 0.25rem 0.4rem;
}

.evidence__terms {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.evidence__term + .evidence__term:before {
    content: " · ";
    color: var(--text-muted);
}

.evidence__reconcile {
    margin-top: 2.5rem;
}

.evidence__ratio {
    font-weight: 400;
    color: var(--text-muted);
}


/* Bearbeitungsfeld in der Druckansicht */
.sheet__edit {
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
}

@media (min-width: 48em) {
    .sheet__meta {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Papier
   -------------------------------------------------------------------------- */
@page {
    size: A4;
    margin: 18mm 16mm;
}

@media print {
    /* Papier ist weiß. Die Dunkelvariante wird hier bewusst ausgehebelt, sonst
       druckt der Browser je nach Systemeinstellung hellgrau auf weiß. */
    :root {
        --plane: #ffffff;
        --surface: #ffffff;
        --surface-sunken: #ffffff;
        --surface-raised: #ffffff;
        --text-primary: #000000;
        --text-secondary: #333333;
        --text-muted: #555555;
        --border: #999999;
        --border-strong: #666666;
        --gridline: #cccccc;
    }

    .sidebar,
    .topbar__user,
    .print-actions,
    .filterbar,
    .table__edit,
    .pagination,
    .info__mark {
        display: none !important;
    }

    body {
        background: #ffffff;
    }

    .print-page {
        padding: 0;
    }

    .sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
    }

    .sheet__block {
        overflow: visible;
    }

    /* Auf Papier gibt es kein Überfahren mit der Maus: die Erklärung wird
       ausgeschrieben, statt zu verschwinden. */
    .info {
        display: block;
        line-height: inherit;
    }

    .info__text {
        display: block;
        position: static;
        max-width: none;
        padding: 0;
        border: none;
        box-shadow: none;
        background: none;
        font-size: 0.6875rem;
    }

    .info__text::before {
        display: none;
    }

    /* Kopfzeilen einer Tabelle auf jeder Folgeseite wiederholen. */
    thead {
        display: table-header-group;
    }

    tr {
        break-inside: avoid;
    }
}

/* --------------------------------------------------------------------------
   Weniger Bewegung, wenn das System danach fragt
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Aufstellungs-Assistent (Monatslauf)

   Die Schrittleiste ist eine Karte über dem Inhalt: nummerierte Marken, die
   erledigt (Haken-Grün), übersprungen (gedämpft) oder aktuell (Akzent) sind.
   Jede Marke ist ein Link — der Stand liegt in der Datenbank, Springen kostet
   nichts.
   -------------------------------------------------------------------------- */
.flowrail {
    padding: calc(var(--space) * 0.75);
}

.flowrail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.flowrail__link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-secondary);
}

.flowrail__link:hover {
    background: var(--accent-wash);
}

.flowrail__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    flex: none;
}

.flowrail__label {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.flowrail__item.is-current .flowrail__link {
    color: var(--accent);
    background: var(--accent-wash);
}

.flowrail__item.is-current .flowrail__no {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.flowrail__item.is-done .flowrail__no {
    background: var(--positive);
    border-color: var(--positive);
    color: var(--accent-contrast);
}

.flowrail__item.is-skipped .flowrail__link {
    color: var(--text-muted);
}

.flowrail__item.is-skipped .flowrail__label {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Ein Stapel gleichartiger Blöcke innerhalb eines Schritts: je Konto, je
   Meldung, je Posten ein Block mit Haarlinie dazwischen. */
.wizardstack {
    display: grid;
    gap: var(--space);
}

.wizardstack__item {
    padding-top: var(--space);
    border-top: 1px solid var(--gridline);
}

.wizardstack__item:first-child {
    padding-top: 0;
    border-top: none;
}

.wizardstack__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.5rem;
}

.wizardstack__head h3 {
    margin: 0;
    font-size: 1rem;
}

/* Die Navigationszeile unter jedem Schritt: Zurück links, Weiter rechts. */
.wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    padding: calc(var(--space) * 0.75) var(--space);
}

.wizard-nav__forward {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.wizard-question {
    font-family: var(--font-display);
    font-size: 1.125rem;
    margin: 0 0 var(--space);
}

.wizard-complete {
    margin-top: var(--space);
    padding-top: var(--space);
    border-top: 1px solid var(--gridline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
}

/* Der Assistent speichert von selbst — die Zeile sagt es einmal oben, die
   Statusmarke steht neben dem Formular, das gerade gespeichert wurde. */
.autosave-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.autosave-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.autosave-status:empty {
    display: none;
}

.autosave-status.is-saved {
    color: var(--positive);
}

.autosave-status.is-saved::before {
    content: "✓ ";
}

.autosave-status.is-failed {
    color: var(--negative);
    white-space: normal;
}

/* Während des Speicherns wirkt das Formular kurz gedämpft — es ist gerade
   unterwegs, und ein zweiter Anlauf würde ohnehin abgewiesen. */
form.is-saving {
    opacity: 0.7;
    transition: opacity 120ms ease;
}

/* Die Monatskarte auf Startseite und Übersicht: Stand des Monatslaufs plus
   die passende Schaltfläche, nebeneinander wo Platz ist. */
.monthcta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
}

/* Kontrollblick-Listen im Dauerläufer-Schritt: Name links, Betrag rechts. */
.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checklist li {
    display: flex;
    justify-content: space-between;
    gap: var(--space);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--gridline);
}

.checklist li:last-child {
    border-bottom: none;
}

.checklist .num {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Statistiken

   Diagramme als server-gerechnetes SVG: Linien in den geprüften Reihenfarben,
   Gitter und Achsen zurückhaltend, Werte je Punkt als Tooltip und darunter
   dieselben Zahlen als aufklappbare Tabelle.
   -------------------------------------------------------------------------- */
.subnav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.subnav__link {
    padding: 0.5rem 0.9rem;
    text-decoration: none;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.subnav__link:hover {
    color: var(--text-primary);
}

.subnav__link[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.rangebar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rangebar__link {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.rangebar__link[aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.stat__delta.is-positive {
    color: var(--positive);
}

.stat__delta.is-negative {
    color: var(--negative);
}

/* position: relative, weil der Tooltip weiter unten sich daran ausrichtet. */
.chart {
    position: relative;
    margin: 0;
    padding: var(--space);
}

.chart__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.chart__title {
    margin: 0;
    font-size: 1rem;
}

.chart__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.chart__legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.chart__swatch {
    width: 0.9rem;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

.chart__swatch.series-1 { background: var(--series-1); }
.chart__swatch.series-2 { background: var(--series-2); }
.chart__swatch.series-3 { background: var(--series-3); }
.chart__swatch.series-4 { background: var(--series-4); }
.chart__swatch.series-5 { background: var(--series-5); }

.chart__svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart__grid line {
    stroke: var(--gridline);
    stroke-width: 1;
}

.chart__ylabels text,
.chart__xlabels text {
    fill: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.chart__ylabels text {
    text-anchor: end;
}

.chart__xlabels text {
    text-anchor: middle;
}

.chart__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.chart__line.series-1 { stroke: var(--series-1); }
.chart__line.series-2 { stroke: var(--series-2); }
.chart__line.series-3 { stroke: var(--series-3); }
.chart__line.series-4 { stroke: var(--series-4); }
.chart__line.series-5 { stroke: var(--series-5); }

.chart__area {
    fill: var(--accent-wash);
    stroke: none;
}

.chart__dot {
    stroke: var(--surface);
    stroke-width: 1.5;
}

.chart__dot.series-1 { fill: var(--series-1); }
.chart__dot.series-2 { fill: var(--series-2); }
.chart__dot.series-3 { fill: var(--series-3); }
.chart__dot.series-4 { fill: var(--series-4); }
.chart__dot.series-5 { fill: var(--series-5); }

.chart__details {
    margin-top: 0.5rem;
}

.chart__details summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* Wochenbalken der Auszahlungsübersicht: Beschriftung, Balken, Betrag. */
.weekbars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.weekbars li {
    display: grid;
    grid-template-columns: 7.5rem 1fr 8rem;
    align-items: center;
    gap: 0.75rem;
}

.weekbars__label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.weekbars__track {
    display: block;
    width: 100%;
    height: 10px;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}

.weekbars__bar {
    fill: var(--series-1);
}

.weekbars__value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Zwei Diagramme nebeneinander, sobald der Platz reicht — kleiner und vergleichbarer. */
.chart-grid {
    display: grid;
    gap: var(--space);
    align-items: start;
}

@media (min-width: 68em) {
    .chart-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Der Hover-Tooltip: vom Skript neben den nächstgelegenen Punkt gesetzt. */
.chart__tooltip {
    position: absolute;
    transform: translate(-50%, -130%);
    background: var(--text-primary);
    color: var(--surface);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    font-variant-numeric: tabular-nums;
}

.chart__dot.is-active {
    r: 5.5;
}

/* Die gespeicherten Auszüge unter der Ablagefläche: Beweis, dass der Upload da ist. */
.uploadlist {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.uploadlist li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.25rem 0;
    border-top: 1px solid var(--gridline);
}

/* Der Prüf-und-Korrektur-Block je Konto im Banken-Schritt. */
.bankcheck {
    margin-top: 0.6rem;
}

.bankcheck summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.bankcheck[open] summary {
    color: var(--text-primary);
}

.bankcheck > p,
.bankcheck > form {
    margin-top: 0.5rem;
}

/* Der zwischengespeicherte Auszug dieser Aufstellung. */
.pendingupload {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.45rem 0.6rem;
    background: var(--accent-wash);
    border-radius: var(--radius);
    font-size: 0.8125rem;
}

.bankstand strong {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Einstellungen des eigenen Kontos
   Die Angaben stehen als Beschriftung-Wert-Paare in zwei Spalten, damit die
   Werte untereinander auf einer Kante beginnen. Unter 40em wird daraus eine
   Spalte — nebeneinander bliebe für beides zu wenig Platz.
   -------------------------------------------------------------------------- */
.settings-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}

.settings-facts dt {
    color: var(--text-muted);
}

.settings-facts dd {
    margin: 0 0 0.6rem;
    color: var(--text-primary);
}

@media (min-width: 40em) {
    .settings-facts {
        grid-template-columns: 12rem 1fr;
        align-items: baseline;
    }

    .settings-facts dt,
    .settings-facts dd {
        margin-bottom: 0.35rem;
    }
}

/* Die drei Felder bleiben schmal: ein Passwortfeld über die ganze Breite eines
   Bildschirms lässt vermuten, es gehöre etwas Langes hinein. */
.settings-form {
    max-width: 26rem;
}

.settings-form__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Zweiter Faktor
   QR-Code und Erläuterung stehen ab 40em nebeneinander; darunter untereinander,
   weil ein 240px breites Bild neben einem Textblock sonst beide zerdrückt.
   -------------------------------------------------------------------------- */
.totp-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.totp-setup__qr {
    /* Weißer Rahmen um das Muster: ohne die Ruhezone lesen manche Kameras nichts. */
    background: #ffffff;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex: 0 0 auto;
}

.totp-setup__side {
    flex: 1 1 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.totp-setup__secret {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    word-break: break-all;
    padding: 0.5rem 0.6rem;
    background: var(--surface-sunken);
    border-radius: var(--radius);
}

/* Die Codes fallen auf, solange sie einmalig dastehen. */
.card--warning {
    border-left: 3px solid var(--series-4);
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
}

/* Wofuer ein laufender Abruf gilt.
   Eigene Zeile und kein Hinweistext: Sie beantwortet die einzige Frage, die
   waehrend des Wartens offen ist — entsteht hier gerade der heutige Stand oder
   der vom Stichtag? Deshalb in der Schriftfarbe des Textes und nicht gedaempft. */
.source__asof {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   A1: Knopf und Zeitraum
   Der Zeitraum gehoert unter den Knopf und nicht daneben — er beantwortet die
   Frage, die man sich vor dem Klicken stellt: Was steckt in dieser Datei?
   Rechtsbuendig, weil der Block in der Leitzahl-Zeile rechts aussen sitzt.
   -------------------------------------------------------------------------- */
.a1-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    text-align: right;
}

.a1-actions .card__hint {
    max-width: 26rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Bestaetigen im Vordergrund
   Die Ruecknahme einer Aufstellung fragt in einem <dialog> nach statt in einem
   Aufklapper. Der Aufklapper schob die Seite auseinander — in einer
   Tabellenzeile verrutschte alles daneben mit. Der Dialog liegt in der
   obersten Ebene des Browsers: Er verschiebt nichts und dunkelt den Rest ab.
   -------------------------------------------------------------------------- */

/* Der Ausloeser sieht aus wie der fruehere Aufklapper: gepunktet unterstrichen,
   gedaempft, klein. Ein <button> und kein Link — er fuehrt nirgendwohin. */
.confirm-trigger {
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
}

.confirm-trigger:hover {
    color: var(--negative);
}

/* In einer Knopfreihe sitzt der Ausloeser auf der Hoehe der Beschriftungen
   daneben. In einer Spalte — den Aktionen einer Tabellenzeile — bleibt es beim
   linken Rand, sonst ruckte er unter den Knoepfen in die Mitte. */
.source__actions .confirm-trigger,
.wizard-nav > .confirm-trigger {
    align-self: center;
}

.modal {
    width: min(34rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-pop);
}

/* Der abgedunkelte Rest. Ohne ihn schwebte der Kasten ueber einer Seite, die
   weiterhin anklickbar aussieht. */
.modal::backdrop {
    background: rgba(22, 21, 15, 0.45);
}

.modal__panel {
    padding: 1.25rem;
}

.modal__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.modal__text {
    margin: 0.6rem 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Der gefaehrliche Knopf steht rechts aussen, das Behalten links daneben:
   dieselbe Reihenfolge wie in den Dialogen des Betriebssystems. */
.modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.1rem;
}