/*
 * workforceOS® Summa — Oberflaeche.
 *
 * DIE PROPORTIONEN SIND DIE DES REACH-EDITORS, und das ist eine Entscheidung,
 * keine Bequemlichkeit: wer Reach verwaltet, verwaltet Summa ohne etwas Neues
 * zu lernen (accounting_boundary.md §7.1). Uebernommen ist die STRUKTUR — feste
 * Schiene links, gruppierte Navigation, eine Kopfzeile, ein Akzent — nicht die
 * Farbe. Reach ist die Marke nach aussen und traegt Violett; Summa ist das
 * Werkzeug, in dem jemand acht Stunden Zahlen liest, und traegt ein ruhiges
 * Schieferblau.
 *
 * ⚠️ EIN SATZ WERTE, DREIMAL ANGEWANDT — genau wie in Reach, und aus demselben
 * Grund: einmal als Vorgabe, einmal fuer „richte dich nach dem System", einmal
 * fuer die ausdrueckliche Wahl. CSS kennt keine Variablengruppen; doppelt
 * geschrieben ist ehrlicher als eine Klasse, die irgendwo vergessen wird.
 *
 * ⚠️ KEIN RAHMENWERK UND KEIN BAUSCHRITT. Eine Appliance im Keller einer
 * Kundin soll kein Node mitschleppen, um eine Liste und ein Formular zu zeigen.
 */

/* ⚠️ DIE HAUSSCHRIFT REIST MIT, sie wird nicht geladen. Eine Appliance im
   Keller einer Kundin hat kein Internet, und eine Marke, die nur online
   stimmt, stimmt beim Kunden nie. Fünf Schnitte statt der ganzen Familie:
   was nicht gebraucht wird, macht das Bündel nur schwerer. */
@font-face {
  font-family: "Suisse Intl";
  src: url("/assets/SuisseIntl-Regular-bfaae45d.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("/assets/SuisseIntl-Medium-875dcb80.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("/assets/SuisseIntl-SemiBold-5d0af068.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Regrade";
  src: url("/assets/NeueRegrade-Semibold-bbceec4f.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Regrade";
  src: url("/assets/NeueRegradeBold-a566d288.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

.ui {
  color-scheme: light;

  /* ⚠️ DIE FARBEN SIND DIE VON NETSUISSE, nicht die einer Anwendung. Deep
     Purple #341539 ist die Hausfarbe (`--corporate-color` im Portal), Midnight
     #0C061E und Purple #A020F0 stehen daneben. Hier war einmal ein
     Schieferblau, weil „Reach trägt Violett und Summa ist das Werkzeug" — das
     war eine Erfindung dieses Repositoriums und nicht die Marke.

     ⚠️ UND EIN LINK IST DEEP PURPLE MIT GEWICHT 500, nicht helles Purple. So
     macht es das Portal (`.corporate-link`), und #A020F0 hätte auf Weiss einen
     Kontrast von 4.4 — zu wenig für 13px Text. Purple trägt hier, was auf
     DUNKLEM Grund steht: die Schiene und die dunkle Darstellung. */
  --bg: #f6f4f7;
  --surface: #ffffff;
  --surface-2: #faf8fa;
  --surface-3: #f1edf1;
  --line: #e4dde5;
  --line-strong: #cfc3d1;

  --ink: #1b111d;
  --ink-soft: #625565;
  --ink-faint: #8e8291;

  --accent: #341539;
  --accent-ink: #ffffff;
  --accent-wash: rgba(52, 21, 57, .09);
  --accent-strong: #4a1f4f;

  --ok: #0f7b4f;
  --ok-wash: rgba(15, 123, 79, .12);
  --warn: #8a5a00;
  --warn-wash: rgba(138, 90, 0, .12);
  --bad: #b3261e;
  --bad-wash: rgba(179, 38, 30, .12);

  /* Die Schiene steht dunkel auf hellem Grund: sie ist Moebel, nicht Inhalt.
     Midnight, die zweite Hausfarbe. */
  --rail-bg: #0C061E;
  --rail-ink: #ece7f1;
  --rail-ink-soft: #9b90a8;
  --rail-line: #221a32;
  --rail-active: rgba(160, 32, 240, .22);
  /* ⚠️ DIE SCHIENE IST IMMER DUNKEL, AUCH IM HELLMODUS. Dort ist `--accent`
     #341539 — auf #0C061E praktisch unsichtbar. Violettes AUF der Schiene nimmt
     deshalb diesen Wert und nicht den Akzent des Inhalts. Genau einmal erklärt,
     weil er in keinem Modus anders ist. */
  --rail-accent: #A020F0;

  --radius: 8px;
  --stack: 20px;  /* zwischen zwei Blöcken untereinander */
  --gutter: 16px; /* zwischen zwei Blöcken nebeneinander */
  --radius-sm: 5px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 2px 10px rgba(16, 24, 40, .07);
  --shadow-lg: 0 18px 44px -20px rgba(16, 24, 40, .3);

  --rail-w: 232px;
}

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

    --bg: #0C061E;
    --surface: #170f26;
    --surface-2: #1d1430;
    --surface-3: #251a3b;
    --line: #2c2140;
    --line-strong: #453558;

    --ink: #f2eef7;
    --ink-soft: #ada2bb;
    --ink-faint: #857a93;

    /* ⚠️ HIER TRÄGT PURPLE. Deep Purple auf Midnight wäre dunkel auf dunkel;
       #A020F0 hat auf #0C061E Kontrast genug und ist dieselbe Marke, nur die
       Farbe, die für dunklen Grund gedacht ist. */
    --accent: #c069f7;
    --accent-ink: #14081f;
    --accent-wash: rgba(160, 32, 240, .20);
    --accent-strong: #d79bfa;

    --ok: #4cc38a;
    --ok-wash: rgba(76, 195, 138, .16);
    --warn: #e2a336;
    --warn-wash: rgba(226, 163, 54, .16);
    --bad: #ff6b63;
    --bad-wash: rgba(255, 107, 99, .16);

    /* Heller als --bg, damit die Schiene sich abhebt statt zu verschmelzen. */
    --rail-bg: #170f26;
    --rail-ink: #ece7f1;
    --rail-ink-soft: #9b90a8;
    --rail-line: #2c2140;
    --rail-active: rgba(160, 32, 240, .22);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 10px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
  }
}

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

  --bg: #0C061E;
  --surface: #170f26;
  --surface-2: #1d1430;
  --surface-3: #251a3b;
  --line: #2c2140;
  --line-strong: #453558;

  --ink: #f2eef7;
  --ink-soft: #ada2bb;
  --ink-faint: #857a93;

  --accent: #c069f7;
  --accent-ink: #14081f;
  --accent-wash: rgba(160, 32, 240, .20);
  --accent-strong: #d79bfa;

  --ok: #4cc38a;
  --ok-wash: rgba(76, 195, 138, .16);
  --warn: #e2a336;
  --warn-wash: rgba(226, 163, 54, .16);
  --bad: #ff6b63;
  --bad-wash: rgba(255, 107, 99, .16);

  --rail-bg: #170f26;
  --rail-ink: #ece7f1;
  --rail-ink-soft: #9b90a8;
  --rail-line: #2c2140;
  --rail-active: rgba(160, 32, 240, .22);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14.5px/1.55 "Suisse Intl", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ EIN LINK IST DIE HAUSFARBE UND GEWICHT 500 — so wie `.corporate-link` im
   Portal. Deep Purple allein unterschiede sich zu wenig vom Fliesstext. */
a { color: var(--accent); font-weight: 500; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Titel tragen Neue Regrade, Lauftext Suisse Intl — die zwei Schriften der
   Marke, hier wie im Portal auf dieselben Rollen verteilt. */
h1, h2, h3, th { font-family: "Neue Regrade", "Suisse Intl", sans-serif; }
h1, h2, h3 { letter-spacing: -0.012em; }
h1 { font-size: 22px; font-weight: 640; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 640; margin: 26px 0 10px; }
h3 { font-size: 14px; font-weight: 640; margin: 18px 0 8px; }

/* ⚠️ ZAHLEN IMMER RECHTS UND IMMER TABELLARISCH. Eine Spalte Betraege, deren
   Ziffern unterschiedlich breit sind, laesst sich nicht ueberfliegen — und
   Ueberfliegen ist, was man mit einer Saldenliste tut. */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* ---- Gestell ------------------------------------------------------------- */

body.backend { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }
/* ⚠️ WAS KLEBT, KLEBT UNTER DEM KOPF — UND DEN GIBT ES NICHT IMMER. Die
 * Reiter und die Tabellenkoepfe standen fest bei 56px; im Summa-Widget von
 * Pulse faellt die Kopfzeile weg, und sie hingen mitten ueber dem Inhalt
 * (gemeldet: „liegt die tableiste ueber dem hintergrund statt oben"). */
body.backend { --sticky-top: 56px; }
/* Im Summa-Widget von Pulse: der Rahmen gehoert dem Widget. */
body.backend.backend--embedded { grid-template-columns: 1fr; --sticky-top: 0px; }

.sidebar {
  background: var(--rail-bg);
  color: var(--rail-ink);
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__brand { display: flex; flex-direction: column; gap: 3px; padding: 4px 8px 0; }
.sidebar__mark { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sidebar__logo { flex: 0 0 auto; color: var(--rail-ink); }
.sidebar__wordmark {
  font-size: 15px; font-weight: 640; letter-spacing: -0.01em; color: var(--rail-ink);
}
/* Das Zeichen gehoert an die MARKE workforceOS, nicht an den Produktnamen. */
.sidebar__rmark { font-size: .62em; vertical-align: super; font-weight: 500; margin-left: 1px; }
.sidebar__mandate {
  font-size: 12px; color: var(--rail-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sidebar__group { display: flex; flex-direction: column; gap: 1px; }
.sidebar__grouplabel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--rail-ink-soft); padding: 0 8px 5px; font-weight: 600;
}

/* Einklappbare Gruppen ({ApplicationHelper#sidebar_group}): die Überschrift ist
   der Schalter, offen ist die Gruppe der aktuellen Seite. */
button.sidebar__grouplabel {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
  padding: 4px 8px; border-radius: var(--radius-sm);
}
button.sidebar__grouplabel:hover { color: var(--rail-ink); }
button.sidebar__grouplabel::after { content: "›"; font-size: 13px; transition: transform .15s; }
.sidebar__group--collapsible.is-open > button.sidebar__grouplabel::after { transform: rotate(90deg); }
.sidebar__links { display: flex; flex-direction: column; gap: 1px; }
.sidebar__group--collapsible:not(.is-open) > .sidebar__links { display: none; }
/* Zugeklappte Gruppen stehen enger: eine Überschrift unter der anderen, nicht je 20px Luft. */
.sidebar__group--collapsible + .sidebar__group--collapsible { margin-top: -14px; }

.sidebar__link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  color: var(--rail-ink); text-decoration: none; font-size: 13.5px;
}
.sidebar__link:hover { background: var(--rail-active); text-decoration: none; }
.sidebar__link--active { background: var(--rail-active); font-weight: 600; }
/* ⚠️ EIN STRICH, NICHT NUR FETTSCHRIFT. „Welche Seite ist das hier" muss man
   im Vorbeigehen sehen; Fettschrift allein erkennt man erst beim Lesen. */
.sidebar__link--active { box-shadow: inset 2px 0 0 var(--accent); }
.sidebar__link--quiet { color: var(--rail-ink-soft); font-size: 13px; }

.sidebar__ico { width: 16px; text-align: center; opacity: .8; flex: none; }

.sidebar__foot {
  margin-top: auto; display: flex; flex-direction: column; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--rail-line);
}
.sidebar__build { font-size: 10.5px; color: var(--rail-ink-soft); opacity: .8; padding: 0 9px; }

/* ---- Kopfzeile ----------------------------------------------------------- */

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

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 24px; min-height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.topbar .crumbs { padding: 0; font-size: 14px; min-width: 0; }
.topbar .crumbs__step { white-space: nowrap; }
.topbar .crumbs__step--here { overflow: hidden; text-overflow: ellipsis; }
.topbar__spacer { margin-left: auto; }

.content { padding: 22px 24px 60px; max-width: 1180px; width: 100%; }

/* ---- Offene Bereiche ------------------------------------------------------
 * ⚠️ DIE LEISTE KLEBT UNTER DER KOPFZEILE, NICHT AN IHR. Sie gehört zum
 * Inhalt — wer scrollt, soll sehen, in welchem Bereich er ist, ohne nach oben
 * zu fahren.
 * ⚠️ `button_to` IST EIN FORMULAR UND DAMIT EIN BLOCK. Ohne eine eigene Regel
 * für die Hülle steht das × unter dem Namen statt daneben.
 */
/* ⚠️ KEIN `overflow-x: auto` AUF DER LEISTE. Ein Behaelter, der scrollt,
 * SCHNEIDET AB — und zwar auch das Kontextmenue, das an seinem Reiter haengt:
 * der Rechtsklick tat sichtbar nichts, weil das Menue unterhalb der Leiste
 * abgeschnitten wurde. Statt das Menue mit gerechneten Koordinaten aus dem
 * Behaelter zu heben, bleibt die Leiste ohne Bildlauf. Seit die Reiter den
 * Namen dessen tragen, was sie zeigen (16.10.), brachen acht davon auf zwei
 * Zeilen um; jetzt schrumpfen die inaktiven und kuerzen ihren Namen, der
 * aktive behaelt seine Breite.
 */
.areatabs {
  display: flex; flex-wrap: nowrap; gap: 2px; align-items: flex-end;
  padding: 6px 24px 0; background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: var(--sticky-top); z-index: 19;
}
/* ⚠️ DER AKTIVE REITER IST EIN STÜCK DER SEITE, KEIN UNTERSTRICHENES WORT.
 * Gewünscht am 16.10.: „das aktive tab auch besser visualisieren". Er trägt
 * den Grund des Inhalts, steht mit Rahmen über der Linie der Leiste und
 * verdeckt sie (`margin-bottom: -1px`) — so sieht man, welcher Reiter die
 * Seite darunter IST. Die anderen bleiben blass. */
.areatabs__tab {
  display: flex; align-items: center; gap: 2px; position: relative;
  padding: 0 2px 0 0; margin-bottom: -1px; min-width: 0; flex: 0 1 auto;
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
}
.areatabs__tab:hover:not(.areatabs__tab--active) { background: var(--surface-2); }
.areatabs__tab--active {
  background: var(--bg); border-color: var(--line); flex-shrink: 0;
  box-shadow: inset 0 3px 0 var(--rail-accent);
}
.areatabs__name {
  display: flex; align-items: center; padding: 9px 2px 9px 10px; max-width: 150px; min-width: 0;
  font-size: 13px; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.areatabs__label { overflow: hidden; text-overflow: ellipsis; }
.areatabs__tab--active .areatabs__name { color: var(--ink); font-weight: 600; }
.areatabs__tab--mask .areatabs__label { font-style: italic; font-weight: 500; }
/* Ungespeichert: ein Punkt, wie im Editor. */
.areatabs__dirty { display: none; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%;
                   background: var(--rail-accent); flex: none; }
.areatabs__tab.is-dirty .areatabs__dirty { display: inline-block; }
.areatabs__name:hover { color: var(--ink); }
.areatabs__closeform { display: inline-flex; margin: 0; }
.areatabs__close {
  border: 0; background: none; cursor: pointer;
  padding: 2px 6px; border-radius: 6px; line-height: 1;
  font-size: 14px; color: var(--ink-faint);
}
.areatabs__close:hover { background: var(--surface-2); color: var(--ink); }
/* ⚠️ DAS MENUE STEHT IM REITER, NICHT AM DOKUMENT. So traegt es dessen Ort mit
 * sich und braucht keine gerechneten Koordinaten — die beim Scrollen der Leiste
 * ohnehin falsch wuerden. */
/* ⚠️ DAS VERBERGEN GEHOERT INS STYLESHEET, NICHT ALLEIN ANS ATTRIBUT. `hidden`
 * wirkt nur ueber die Regel des Browsers `[hidden] { display: none }` — die
 * schwaechste Regel, die es gibt. Jede spaetere Regel, die auf dieser Klasse
 * oder ueber einen Vorfahren `display` setzt, schlaegt sie STILL, und dann
 * steht das Menue offen, ohne dass jemand geklickt hat. Hier verbirgt die
 * Klasse, und `:not([hidden])` zeigt: beide Seiten sagen dasselbe, und das
 * Attribut bleibt das, was Hilfsmittel lesen.
 */
.areatabs__menu {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 30; min-width: 190px;
  padding: 4px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-menu, 0 10px 30px rgba(0,0,0,.18));
}
.areatabs__menu:not([hidden]) { display: block; }
/* Eine Überschrift IN einem Formular trennt zwei Gruppen von Feldern; ohne
 * eigenen Abstand klebt sie an der Zeile darüber. */
.formsection { margin: 22px 0 10px; font-size: 14px; }
.areatabs__itemform { margin: 0; }
.areatabs__item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; border-radius: 7px;
  padding: 7px 10px; font-size: 13px; color: var(--ink); white-space: nowrap;
}
.areatabs__item:hover { background: var(--surface-2); }


/* ---- Benutzermenue und Mandatswechsel ------------------------------------
 * ⚠️ `<details>`, NICHT JAVASCRIPT. Ein Menue, das ohne Skript nicht aufgeht,
 * sperrt niemanden aus einer Marketingseite aus — hier waere es der Ausgang aus
 * der Anwendung. Abmelden muss immer erreichbar sein.
 */
.menu { position: relative; }
.menu > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 9px 5px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 13px; color: var(--ink); list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--surface-3); }
.menu[open] > summary { border-color: var(--line-strong); }

.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

.menu__panel {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 30;
  min-width: 248px; padding: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.menu__head { padding: 8px 9px 9px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu__name { font-weight: 620; font-size: 13.5px; }
.menu__meta { font-size: 12px; color: var(--ink-soft); }
.menu__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); font-weight: 600; padding: 7px 9px 3px;
}
.menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit;
}
.menu__item:hover { background: var(--surface-3); text-decoration: none; }
.menu__item--current { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.menu__sep { height: 1px; background: var(--line); margin: 6px 0; }

/* ---- Inhaltsflaechen ----------------------------------------------------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm);
}
.lede { color: var(--ink-soft); margin: 0 0 20px; }
.hint { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.detail { color: var(--ink-soft); font-size: 13px; }
.journal__partner { display: block; font-size: 12px; }

/* ⚠️ EINE `<dl>` HATTE NIE EIN LAYOUT. `.detail` setzte nur die Textfarbe, und
   der Browser rückte jedes `<dd>` ein: Bezeichnung, darunter eingerückt der
   Wert, dazwischen Leerraum. Auf sechs Masken sah die Rechnungsadresse deshalb
   aus, als wäre sie zerfallen. Paare stehen nebeneinander. */
dl.detail {
  display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: 9px 18px; margin: 0; align-items: baseline;
}
dl.detail > dt { color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
dl.detail > dd { margin: 0; color: var(--ink); font-size: 13.5px; }

@media (max-width: 860px) {
  dl.detail { grid-template-columns: 1fr; gap: 2px 0; }
  dl.detail > dd { margin-bottom: 10px; }
}
.build { font-size: 11px; color: var(--ink-faint); margin-top: 26px; }

/* ⚠️ EINE LEISTE IST EIN GEGENSTAND, KEINE ANSAMMLUNG. Vorher standen Knöpfe
   und Felder frei nebeneinander, jedes mit eigener Höhe: der Knopf 35 px hoch,
   das Feld 38, die Klappliste 32 — nichts lag auf einer Linie, und auf jeder
   Seite sah es anders aus. Die Leiste hat deshalb eine Fläche, und ALLES
   darin ist gleich hoch. */
.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* ⚠️ EIN SUCHFORMULAR IN DER LEISTE WAR EIN BLOCK, und ein Block in einem
   Flex-Behälter nimmt seine eigene Zeile: das Feld stand oben, der Knopf
   darunter, und der Knopf daneben auf falscher Höhe. Auf sieben Masken. */
.toolbar form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.toolbar .num { margin-left: auto; }
/* Ein Feld in einer Werkzeugleiste ist so breit wie sein Inhalt. Die
   Vorgabe `width: 100%` gilt dem Formular, und dort ist sie richtig — hier
   stellte sie drei Eingaben untereinander, wo eine Zeile hingehoert.
   ⚠️ UND DER SELEKTOR MUSS DEN TYP NENNEN. `.toolbar input` und
   `input[type=search]` wiegen gleich schwer, und die zweite Regel steht
   weiter unten: das Suchfeld blieb 100 % breit und schob den Knopf in die
   naechste Zeile — genau das, was auf `banks` und `bookings` zu sehen war. */
.toolbar input[type=text], .toolbar input[type=search], .toolbar input[type=date],
.toolbar input[type=number], .toolbar select {
  width: auto; min-width: 180px;
}
/* ⚠️ DIE HÖHE GEHÖRT AN DIE STEUERELEMENTE, NICHT AN IHRE BEHÄLTER. Erst stand
   sie an `.toolbar > *`, und damit auch an einem `.field`, das Beschriftung UND
   Feld übereinander legt: der Kasten wurde auf 34 px geschnitten und der Inhalt
   ragte über die Leiste hinaus — gemeldet am Kontoauszug. Gemeint war immer nur
   das, was ein Mensch anklickt, und zwar in JEDER Tiefe. */
.toolbar input, .toolbar select, .toolbar button,
.toolbar input[type=submit], .toolbar .button {
  box-sizing: border-box;
  height: 34px;
  margin: 0;
  font-size: 13px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.toolbar .button, .toolbar button, .toolbar input[type=submit] { padding: 0 13px; }
.toolbar form, .toolbar__gap, .toolbar .badge { margin: 0; min-height: 34px; }
.toolbar form { align-items: center; }
.toolbar .badge { display: inline-flex; }

/* ⚠️ IN EINER LEISTE STEHT DIE BESCHRIFTUNG DANEBEN, NICHT DARÜBER. Übereinander
   ist die Form eines Formulars; eine Leiste ist eine Zeile, und zwei Zeilen
   darin machen sie doppelt so hoch wie ihre Knöpfe. */
.toolbar .field {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-height: 34px;
}
.toolbar .field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Das Zeichen eines Knopfes — dasselbe Alphabet wie die Seitenleiste. */
.button__ico { display: inline-flex; line-height: 0; opacity: .9; }
.button__ico .line-icon { width: 15px; height: 15px; }
.button:has(.button__ico) { display: inline-flex; align-items: center; gap: 7px; }
/* Gesucht wird rechts, gehandelt links — eine Anordnung, nicht sieben.
   ⚠️ MIT DEM TYP IM SELEKTOR, sonst gewinnt das `margin: 0` aus `.toolbar form`. */
.toolbar form.toolbar__search { margin-left: auto; }
/* Schiebt, was danach kommt, ans andere Ende der Leiste. */
.toolbar__gap { flex: 1 1 auto; }
/* The amount search ({AmountFilter}): operator, amount, and "bis" for a range
   only. After the toolbar rules, which would otherwise widen both. */
.amount-filter { display: inline-flex; align-items: center; gap: 4px; }
.amount-filter select, .toolbar .amount-filter select, .filters .amount-filter select { width: auto; min-width: 0; flex: 0 0 auto; }
.amount-filter input[type=text], .toolbar .amount-filter input[type=text], .filters .amount-filter input[type=text] { width: 7.5rem; min-width: 0; flex: 0 0 auto; }
.amount-filter:not([data-op=between]) .amount-filter__to { display: none; }

/* ---- Uebersicht ---------------------------------------------------------- */

.hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.hero h1 { margin-bottom: 4px; }
.hero .lede { margin: 0; }
.hero__figure { text-align: right; }
.hero__label { display: block; font-size: 12px; color: var(--ink-soft); }
.hero__value {
  display: block; font-size: 30px; font-weight: 680; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.hero__value.is-ok { color: var(--ok); }
.hero__value.is-bad { color: var(--bad); }
/* Die Marke fuer Anhaenge: eine Zahl, kein Wort — sie steht in einer Spalte,
   die in jeder Zeile etwas anderes sagt. */
.badge--file { background: var(--surface-3); color: var(--ink-soft); }
a.badge--file { text-decoration: none; }
a.badge--file:hover { color: var(--ink); }
/* Ein Beleg öffnet ohne Umweg — das Zeichen in der Zeile, die Auswahl erst bei mehreren. */
.filelink { display: inline-flex; vertical-align: -3px; color: var(--ink-soft); }
.filelink:hover { color: var(--ink); }
.filelink .line-icon { width: 16px; height: 16px; }
.filemenu { position: relative; display: inline-block; }
.filemenu > summary { list-style: none; }
.filemenu > summary::-webkit-details-marker { display: none; }
.filemenu__list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 220px;
  display: flex; flex-direction: column; padding: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / 12%); }
.filemenu__list a { padding: 6px 8px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.filemenu__list a:hover { background: var(--surface-3); }

/* Ein Bestand, der ins Minus laeuft, ist die eine Zahl, die man sofort sieht. */
.num.is-bad { color: var(--bad); }
.tile--bad .tile__value { color: var(--bad); }
.tile--warn .tile__value { color: var(--warn); }

/* ⚠️ DAS DIAGRAMM IST CSS, KEINE BIBLIOTHEK. Auf einer Appliance ist jedes
   nachgeladene Skript eine Abhaengigkeit, die offline fehlt — dieselbe
   Begruendung, aus der die PDFs mit Prawn statt mit einem Browser entstehen. */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 132px; margin: 6px 0 10px; }
.chart__col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 5px; }
.chart__bar {
  background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px;
  transition: height .2s ease;
}
.chart__col:hover .chart__bar { filter: brightness(1.1); }
.chart__tick { font-size: 10px; color: var(--ink-soft); text-align: center; overflow: hidden; white-space: nowrap; }

.doctext {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  white-space: pre-wrap; word-break: break-word; margin: 0;
  max-height: 340px; overflow: auto; color: var(--ink-soft);
}

.meter { background: var(--surface-3); border-radius: 99px; height: 7px; overflow: hidden; }
.meter__fill { background: var(--accent); height: 100%; border-radius: 99px; }
.meter__fill--bad { background: var(--bad); }

.card h2 { font-size: 14px; margin: 0 0 12px; }
.card table { border: 0; box-shadow: none; background: transparent; }
.card table tbody tr:last-child td { border-bottom: 0; }
.card table tbody td { padding: 7px 0; }

/* Zwei Spalten, die auf dem Telefon untereinander stehen — Bilanz links gegen
   rechts, Ertrag gegen Aufwand. */
/* ⚠️ ZWISCHEN ZWEI BLÖCKEN GEHÖRT LUFT. Umsatz, Fälligkeiten und Vorschau
   standen bündig aneinander; ohne Abstand liest man sie als einen Block und
   sucht den Zusammenhang, den es nicht gibt. Der Abstand INNERHALB einer Reihe
   bleibt kleiner als der zwischen den Reihen — sonst sagt er nichts. */
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; margin: 0 0 var(--stack); }
.columns > div > table { margin-bottom: 14px; }
/* Eine Spalte allein nimmt die ganze Breite, statt eine halbe leer zu lassen. */
.columns > :only-child { grid-column: 1 / -1; }
/* Eine einzelne Kachel bleibt eine Kachel, statt die ganze Breite zu füllen. */
.tiles--fill { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Drei Kästen in einer Reihe, auf schmalen Schirmen untereinander. */
.columns--auto { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: var(--gutter); margin: 0 0 var(--stack); }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.tile__label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.dunning-levels .input--narrow { width: 6.5em; }
.dunning-levels td { vertical-align: top; }
.dunning-levels details .field { margin-top: 8px; }
.tile__as-of { font-size: 11px; color: var(--ink-faint); }
/* Kopf einer Diagrammkarte mit dem Total rechts — das Total ist die Antwort, das Bild die Begründung. */
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { margin-bottom: 0; }
.panel-head__links { display: flex; gap: 16px; flex-wrap: wrap; }
.panel-total { display: flex; flex-direction: column; align-items: flex-end; }
.panel-total__label { font-size: 12px; color: var(--ink-soft); }
.panel-total__value { font-size: 23px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile__value {
  display: block; font-size: 23px; font-weight: 650; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.empty {
  padding: 34px 20px; text-align: center; color: var(--ink-soft);
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.warnbox__causes { width: 100%; margin-top: 8px; font-size: 13px; }
.warnbox__causes td { padding: 3px 0; border: 0; }
.warnbox__causes .warnbox__items td { padding: 0 0 6px; opacity: .85; }
.warnbox__causes .warnbox__items a { margin-right: 12px; white-space: nowrap; }

.warnbox {
  padding: 12px 14px; border-radius: var(--radius); margin: 0 0 var(--stack);
  background: var(--warn-wash); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  font-size: 13.5px;
}

.flash { padding: 10px 14px; border-radius: var(--radius); margin: 14px 24px 0; font-size: 13.5px; }
.flash--notice { background: var(--ok-wash); color: var(--ok); }
.flash--alert { background: var(--bad-wash); color: var(--bad); }
body.plain .flash { margin: 0 0 16px; }

.errors {
  padding: 11px 14px; border-radius: var(--radius); margin: 0 0 14px;
  background: var(--bad-wash); color: var(--bad); font-size: 13.5px;
}
.errors ul { margin: 4px 0 0; padding-left: 18px; }

/* ---- Reiter -------------------------------------------------------------- */

.tabs { display: flex; gap: 2px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.tabs a {
  padding: 8px 12px; font-size: 13.5px; color: var(--ink-soft);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---- Marken -------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 620; letter-spacing: .01em;
  background: var(--surface-3); color: var(--ink-soft); white-space: nowrap;
}
.badge--ok { background: var(--ok-wash); color: var(--ok); }
.badge--warn { background: var(--warn-wash); color: var(--warn); }
.badge--bad { background: var(--bad-wash); color: var(--bad); }

/* ---- Tabellen ------------------------------------------------------------ */

table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  font-size: 13.5px;
}
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); font-weight: 650;
  padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--sticky-top); z-index: 1;
}
thead th.num { text-align: right; }
/* Die runden Ecken kamen von `overflow: hidden` am Tisch — und genau das macht
   jeden klebrigen Kopf kaputt: ein Vorfahr mit `overflow` wird zum Bezugsrahmen,
   der Kopf klebt dann an einem Kasten, der gar nicht scrollt, und steht neben
   der Tabelle statt an ihr. Also Ecke für Ecke. */
thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
/* ⚠️ ZEBRA MACHT DAS LESEN, NICHT DIE DEKORATION. Über 1258 Buchungen hinweg
   verrutscht das Auge zwischen Nummer und Betrag um eine Zeile — und in einer
   Buchhaltung ist die falsche Zeile die falsche Zahl. Der Streifen ist deshalb
   sehr hell (--surface-2 ist auch die Farbe des Tabellenkopfes) und kommt im
   dunklen Modus aus derselben Variablen, statt als zweite, festgeschriebene
   Farbe zu existieren. */
tbody tr:nth-child(even) td { background: var(--surface-2); }
tbody tr:hover td { background: var(--surface-3); }

/* ⚠️ `button_to` IST EIN FORMULAR, UND EIN FORMULAR IST EIN BLOCK. Ein Link
   neben einem Knopf in derselben Zelle stapelt sich deshalb übereinander und
   macht die Zeile doppelt so hoch — sichtbar auf jeder Liste, die neben einem
   Link noch eine Aktion trägt (Geschäftsjahre, Aufgaben, Sicherungen). Eine
   Regel statt derselben Notlösung je Maske. */
td.row-actions { white-space: nowrap; }
td.row-actions > * { display: inline-flex; vertical-align: middle; margin: 0; }
td.row-actions > * + * { margin-left: 12px; }

/* Eine vergebene Nummer steht da, wo das Eingabefeld stand — gleiche Hoehe,
   gleiche Grundlinie, damit die Zeile nicht springt. */
/* Der Hinweis auf einen Zugriff von aussen, in der Schiene. Er nimmt den
   Akzent der Schiene, nicht den des Inhalts — siehe --rail-accent. */
.sidebar__trustee {
  display: inline-block; margin-top: 4px; padding: 2px 7px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--rail-accent); background: var(--rail-active);
}

.field__fixed {
  margin: 0; padding: 8px 0; font-weight: 600;
  font-variant-numeric: tabular-nums; min-height: 22px;
}
tfoot td { padding: 10px 12px; font-weight: 650; background: var(--surface-2); }

/* ---- Formulare ----------------------------------------------------------- */

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.wide, .field--wide { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.field--check { flex-direction: row; align-items: center; gap: 8px; }
.field--check label { font-weight: 500; color: var(--ink); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=url], select, textarea {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
/* ⚠️ HÄKCHEN UND SCHALTER TRUGEN SYSTEMBLAU. Auf einer violetten Oberfläche
   ist das die einzige Stelle, an der noch eine Fremdfarbe stand. */
input[type=checkbox], input[type=radio], progress { accent-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }
input[type=number], .field .num { font-variant-numeric: tabular-nums; }

.actions { display: flex; align-items: center; gap: 9px; margin-top: 18px; flex-wrap: wrap; }

/* Viele kurze Wahlmöglichkeiten nebeneinander — Währungscodes, Steuercodes. */
.table-wrap + .card, table + .card { margin-top: 20px; }

/* Sprungmarken innerhalb einer langen Auswertung — keine Reiter. */
.jumps { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; font-size: 13px; }
.jumps a { color: var(--ink-soft); }
.jumps a:hover { color: var(--accent); }

.picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 4px 10px; margin-top: 4px;
}
.picker__item {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px;
  border-radius: var(--radius-sm); font-size: 13px; cursor: pointer;
}
.picker__item:hover { background: var(--surface-3); }
.picker__item input { width: auto; }
.actions--quiet { justify-content: center; }

/* ⚠️ `.button` IST DER EINE NAME. Das neue Stylesheet kannte nur `.btn`, und
   damit war JEDER verlinkte Knopf im ganzen Backend blauer Fliesstext: „Neues
   Konto", „Artikel anlegen", „Verbuchen". Es sah nicht nach einem Fehler aus,
   sondern nach einem lieblosen Layout — und genau so wurde es gemeldet. Zwei
   Namen nebeneinander stehen zu lassen wäre dieselbe Falle mit Ansage. */
button, input[type=submit], .button {
  font: inherit; font-weight: 600; font-size: 13.5px;
  padding: 8px 15px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: 1px solid transparent;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
button:hover, input[type=submit]:hover, .button:hover {
  filter: brightness(1.06); text-decoration: none;
}
/* ⚠️ EIN LEISER ABSENDEKNOPF WAR WEISS AUF WEISS. Auf `input[type=submit]`
   wiegt die Regel darüber schwerer als `.button--quiet` (Element plus
   Attribut gegen eine Klasse): die Schrift blieb weiss, während der
   Hintergrund beim Überfahren und Anwählen hell wurde — gemeldet an
   „Auswahl zeigen" der Kontoauszüge. Die leise Variante nennt deshalb das
   Element mit, damit Farbe UND Fläche aus derselben Regel kommen. */
.button--quiet, button.hint,
input[type=submit].button--quiet, button.button--quiet {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
  font-weight: 500;
}
.button--quiet:hover, button.hint:hover,
input[type=submit].button--quiet:hover, button.button--quiet:hover,
input[type=submit].button--quiet:active, button.button--quiet:active {
  background: var(--surface-3); color: var(--ink); filter: none;
}
.button--bad, .button--danger { background: var(--bad); color: #fff; border-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Anmeldung und Warten -----------------------------------------------
 * Die zwei Seiten, die jemand sieht, bevor er drin ist — und die einzigen, die
 * noch keinem Mandanten gehoeren: keine Schiene, kein Mandat, nur die Marke.
 */
body.plain {
  display: grid; place-items: center; padding: 48px 20px; min-height: 100vh;
  background: radial-gradient(900px 440px at 50% -90px, var(--accent-wash), transparent 70%), var(--bg);
}
.panel {
  width: min(430px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 30px 30px 24px;
  box-shadow: var(--shadow-lg);
}
.panel__brand {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 22px; font-size: 15px; font-weight: 650; color: var(--accent);
}
.panel__brand .sidebar__logo { width: 26px; height: 26px; color: var(--accent); }
.panel__rmark { font-size: .62em; vertical-align: super; font-weight: 500; margin-left: 1px; }
.panel__title { margin: 0 0 18px; font-size: 21px; font-weight: 640; }
.panel .fields { grid-template-columns: 1fr; }
.panel .hint { margin-top: 18px; }
.panel .build { margin-top: 22px; }
.panel input[type=submit] { width: 100%; justify-content: center; }

.wait { text-align: center; }
.wait__ring {
  width: 54px; height: 54px; margin: 6px auto 20px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: summa-spin 1s linear infinite;
}
@keyframes summa-spin { to { transform: rotate(360deg); } }
/* Wer Bewegung abgestellt hat, sieht den Ring ohne Drehung — der Akzentbogen
   bleibt, der Zustand ist also weiterhin ablesbar. */
@media (prefers-reduced-motion: reduce) { .wait__ring { animation: none; } }
.wait__body { color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ---- Schmale Bildschirme ------------------------------------------------ */

@media (max-width: 900px) {
  /* ⚠️ `grid-template-rows` GEHOERT DAZU. Ein Raster mit `min-height: 100vh`
     und zwei automatischen Zeilen verteilt die uebrige Hoehe GLEICHMAESSIG:
     auf einer kurzen Seite wurde das Band damit 160px hoch, und es sah nach
     zu viel Polsterung aus, obwohl die Polsterung stimmte. */
  body.backend { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* ⚠️ AUF DEM TELEFON IST DIE SCHIENE EIN BAND, KEINE SPALTE. Ohne `height`
     und `overflow-y` zurueckzunehmen bleibt sie 100vh hoch und schiebt den
     Inhalt aus dem Bild — die Regeln der Spalte gelten sonst weiter. */
  .sidebar {
    position: static; height: auto; min-height: 0; flex-direction: row;
    align-items: center; gap: 6px; padding: 6px 10px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar__foot, .sidebar__grouplabel, .sidebar__build { display: none; }
  .sidebar__group { flex-direction: row; gap: 2px; }
  /* ⚠️ AUF DEM TELEFON KLAPPT NICHTS: das Band zeigt alle Einträge nebeneinander. */
  .sidebar__links, .sidebar__group--collapsible:not(.is-open) > .sidebar__links { display: flex; flex-direction: row; gap: 2px; }
  .sidebar__group--collapsible + .sidebar__group--collapsible { margin-top: 0; }
  .sidebar__brand { flex: 0 0 auto; padding: 0 10px 0 2px; }
  .sidebar__logo { width: 18px; height: 18px; }
  .sidebar__wordmark { font-size: 13.5px; white-space: nowrap; }
  .sidebar__link { padding: 6px 8px; font-size: 13px; white-space: nowrap; }
  .sidebar__mandate { display: none; }
  .content { padding: 16px 14px 48px; }
  .topbar { padding: 10px 14px; }
  .fields, .columns { grid-template-columns: 1fr; }
  .hero__figure { text-align: left; }
  thead th { position: static; }
  /* Eine Tabelle mit acht Spalten auf 360px ist keine Tabelle. Sie darf
     schieben — der Inhalt bleibt lesbar, statt in acht Spalten zu zerfallen.
     ⚠️ UND DAS GILT FÜR JEDE TABELLE, nicht nur für die mit Umhüllung. Der
     Wrapper stand in der Hälfte der Masken und fehlte in der anderen; eine
     Regel, die man vergessen kann, wird vergessen. */
  .table-wrap { overflow-x: auto; }
  .content table { display: block; overflow-x: auto; white-space: nowrap; }
  /* Auf dem Telefon steht alles untereinander; „rechts" gibt es dort nicht. */
  .toolbar form.toolbar__search { margin-left: 0; width: 100%; }
  .toolbar__gap { display: none; }
}

/* ---- Belegbetrachter -----------------------------------------------------
 * ⚠️ DIE HOEHE KOMMT AUS DEM FENSTER, NICHT AUS DEM INHALT. Ein `<object>` hat
 * keine eigene Hoehe; ohne Mass ist es 150px hoch und zeigt eine Briefmarke.
 */
.viewer { display: flex; flex-direction: column; gap: 10px; }
.viewer__bar { display: flex; align-items: center; gap: 10px; }
.viewer__title { font-size: 15px; font-weight: 620; color: var(--ink); }
.viewer__page {
  width: 100%; height: calc(100vh - 210px); min-height: 380px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}

/* ---- Marken zum Filtern -------------------------------------------------- */
/* Der Weg zurück, über der Überschrift. Eine Zeile, kein Pfad: tiefer als
 * zwei Ebenen wird es in dieser Anwendung nicht. */
.crumb { margin: 0 0 6px; font-size: 13px; }
.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--ink); }

/* Blättern: zwei Knöpfe und die Zahl dazwischen, die sagt, wie viel es
 * insgesamt ist. */
/* ⚠️ „WEITER" ALLEIN IST KEINE NAVIGATION. Bei 26 Seiten heisst die letzte
   Seite 25-mal klicken, und wer auf Seite 14 etwas gesehen hat, findet es nicht
   wieder. Die Nummern sind der Weg; Anfang und Ende stehen immer da, um die
   aktuelle herum ein Fenster, dazwischen ein Auslassungszeichen. */
.pager { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 0; }
.pager__pages { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pager__page, .pager__gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-soft);
  text-decoration: none;
}
.pager__page:hover { background: var(--surface-2); color: var(--ink); }
.pager__page.is-active {
  background: var(--accent, var(--chart-1)); color: #fff; font-weight: 650;
}
.pager__gap { color: var(--ink-soft); opacity: .6; }
.pager__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chip {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
}
.chip:hover { color: var(--ink); text-decoration: none; }
.chip--on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Diagramme: SVG und CSS, keine Fremdbibliothek — eine Appliance im Keller
   lädt nichts nach. Acht Farben, dann wiederholt es sich; wer mehr Konten hat,
   liest die Legende. */
:root {
  --chart-1: #3b82f6; --chart-2: #10b981; --chart-3: #f59e0b; --chart-4: #8b5cf6;
  --chart-5: #ef4444; --chart-6: #14b8a6; --chart-7: #ec4899; --chart-8: #64748b;
  /* ⚠️ DIE BEIDEN SEITEN HABEN FESTE FARBEN (17.10.: „debitoren grün und
     kreditoren rot"). Nach der Reihenfolge gefärbt wurden Debitoren blau und
     Kreditoren grün — Grün hiess also einmal Geld herein, einmal hinaus.
     Eigene Merkmale statt `--chart-n`, weil die Marke die Reihenfarben umfärbt. */
  --receivable: #10b981; --payable: #ef4444;
}
.chart__stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; height: 100%; }
.chart__seg { border-radius: 2px; min-height: 2px; }
.chart__seg + .chart__seg { margin-bottom: 1px; }
.donut { width: 132px; height: 132px; transform: rotate(-90deg); flex: 0 0 auto; }
.donut__slice { transition: stroke-width .15s ease; }
.split { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; font-size: 12px; }
.legend__row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.legend__dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.legend__name { flex: 1 1 auto; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend__value { color: var(--ink); white-space: nowrap; }
.tabs--inline { margin: -4px 0 10px; font-size: 12px; }

/* ⚠️ ABSTAND IST KEINE VERZIERUNG. Zwei Kästen, die sich berühren, lesen sich
   als EIN Kasten — gemeldet als „bei vielen Boxen gibt es keinen Abstand zur
   nächsten Box". Der Abstand gehört an den Kasten selbst, nicht an jede Seite,
   die zufällig daran denkt.
   ⚠️ EIN MASS, NICHT FÜNF. Es standen 16, 18, 22 und 26 px nebeneinander,
   dazu `:last-child { margin: 0 }` — und weil die Übersicht ihre Teile in
   `turbo-frame`s nachlädt, war jeder Kasten darin ein letzter Kasten: die
   Fälligkeiten klebten an der Vorschau („teils mit Abstand, teils ohne").
   Jetzt hat jeder Block unten `--stack`, ohne Ausnahme, und innerhalb einer
   Reihe `--gutter`. */
.card { margin: 0 0 var(--stack); }
.columns > .card, .columns > section, .columns > turbo-frame { margin-bottom: 0; }
.columns > section, .columns > .card { display: flex; flex-direction: column; }
.content > table, .content > .table-wrap { margin-bottom: var(--stack); }
.card + h2, table + h2, .table-wrap + h2 { margin-top: 26px; }
.card > :last-child { margin-bottom: 0; }
table + table, .table-wrap + .table-wrap { margin-top: 18px; }
table + .actions, .card + .actions, .table-wrap + .actions { margin-top: 16px; }
.pager + h2 { margin-top: 24px; }

/* Eine Zeile, die sich aufklappt: die Zahlung gehört zu IHRER Rechnung und
   nicht als Formular unter jede Zeile der Liste. `details` kann das ohne
   JavaScript — und ohne Skript bleibt es bedienbar. */
.rowform { font-size: 13px; }
.rowform > summary {
  cursor: pointer; color: var(--accent); list-style: none; white-space: nowrap;
}
.rowform > summary::-webkit-details-marker { display: none; }
.rowform > summary:hover { text-decoration: underline; }
.rowform[open] > summary { color: var(--ink-soft); }
.rowform__body {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: end;
  padding: 10px 0 4px;
}
.rowform__body label { font-size: 12px; color: var(--ink-soft); }

/* Ein Beleg als Blatt: links der Empfänger, rechts die Eckdaten. */
.sheet { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
.sheet__label { font-size: 12px; color: var(--ink-soft); display: block; margin-bottom: 6px; }
.sheet__address { margin: 0; line-height: 1.6; }
.sheet__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; align-content: start; }
.sheet__facts dt { color: var(--ink-soft); font-size: 13px; }
.sheet__facts dd { margin: 0; font-size: 13px; text-align: right; }
@media (max-width: 720px) { .sheet { grid-template-columns: 1fr; gap: 14px; } }

/* Die Wortmarke des Resellers, falls eine geholt wurde. Sie ist ein Bild und
   keine Schrift: die Höhe ist die des Zuges, die Breite ergibt sich. */
.brand__image { max-height: 22px; max-width: 168px; width: auto; height: auto; display: block; }
.panel__brand .brand__image { max-height: 26px; max-width: 200px; margin: 0 auto; }

/* Balken mit Vorzeichen — MWST-Abrechnung je Quartal.
   ⚠️ DIE NULLLINIE IST DAS DIAGRAMM. Ohne sie sind es zwei Balkenreihen, und
   welche davon Geld kostet, muss man am Vorzeichen ablesen. */
.bars { display: flex; align-items: stretch; gap: 14px; height: 190px; margin: 0 0 18px; }
.bars__col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.bars__half { flex: 1 1 0; display: flex; min-height: 0; }
.bars__half--up { align-items: flex-end; }
.bars__half--down { align-items: flex-start; }
.bars--up-only .bars__half--down, .bars--down-only .bars__half--up { flex: 0 0 0; }
.bars__zero { height: 1px; background: var(--line-strong, var(--line)); }
.bars__bar { width: 100%; border-radius: 3px; }
.bars__bar--payable { background: var(--chart-1); }
.bars__bar--credit { background: var(--chart-3); }
.bars .chart__tick { display: block; text-align: center; padding-top: 6px; }

/* Der Kontoauszug: Soll, Haben, Saldo sind eine eigene Zone.
   ⚠️ DREI ZAHLENSPALTEN NEBENEINANDER SIND OHNE TRENNUNG EIN BLOCK. Der Strich
   links der Sollspalte sagt, wo die Beschreibung aufhört und die Rechnung
   anfängt; der Saldo steht noch einmal abgesetzt, weil er nicht zur Bewegung
   gehört, sondern ihr Ergebnis ist. */
.statement td, .statement th { font-variant-numeric: tabular-nums; }
.statement__debit { border-left: 1px solid var(--line); }
.statement__balance { border-left: 1px solid var(--line); font-weight: 600; }
.statement__edge td { background: var(--surface-3); font-weight: 600; }
.statement tbody tr.statement__edge:hover td { background: var(--surface-3); }

/* ⚠️ EIN KONTENPLAN IST EINE LISTE MIT ÜBERSCHRIFTEN, KEIN GESTREIFTES BAND.
   Als gefüllte Zeile gezeichnet, wie die Kante im Kontoauszug, war der Plan bei
   vierzig Gruppen mehr Fläche als Inhalt. Der gedruckte Abacus-Kontenplan setzt
   die Überschrift einfach fett in dieselben Spalten — Nummer bleibt Nummer,
   Bezeichnung bleibt Bezeichnung. */
.chart__group td { font-weight: 600; color: var(--ink); padding-top: 11px; }
.chart__group td:first-child { color: var(--ink-soft); }
.chart__rule { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.statements__account { flex: 0 1 17rem; min-width: 12rem; }
.toolbar__check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.chart__edit { font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.chart__edit:hover { color: var(--accent); }
tbody tr.chart__group:hover td { background: none; }
.amount-link { color: inherit; text-decoration: none; }
.amount-link:hover { color: var(--accent); text-decoration: underline; }
.chart__account--draggable { cursor: grab; }
.chart__account--draggable.is-dragging { opacity: .45; }
.chart__grip { color: var(--ink-faint); font-size: .8rem; letter-spacing: -2px; margin-right: 6px; user-select: none; }
tr.chart__group.is-drop-target td { background: var(--accent-wash); box-shadow: inset 0 -2px 0 var(--accent); }
.badge__reset { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; font: inherit; }
.chart-check { margin-bottom: 18px; }
.chart-check h2 { display: flex; align-items: center; gap: 8px; }
.chart-check h3 { margin: 12px 0 4px; font-size: 13.5px; }

/* Das Zeichen im Tab — dasselbe wie in der Leiste, nur kleiner. */
.areatabs__ico { display: inline-block; width: 1.1em; margin-right: 5px; opacity: .7; text-align: center; }

/* Das Zeichen der Schnittstelle an einer eingelesenen Zeile. */
.origin__icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 4px;
                border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1;
                vertical-align: 1px; opacity: .65; cursor: help; }

/* ⚠️ EIN RAHMEN IST VON HAUS AUS INLINE. Ohne das hier stünden die
   nachgeladenen Teile der Übersicht nebeneinander statt untereinander. */
turbo-frame { display: block; }

/* Der Platzhalter eines noch ladenden Teils: er hält Höhe, damit die Seite
   beim Eintreffen nicht springt. */
.panel-wait {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  margin: 18px 0 6px;
}
.panel-wait span {
  flex: 1;
  border-radius: 3px;
  background: var(--surface-3);
  animation: panel-wait-pulse 1.4s ease-in-out infinite;
}
.panel-wait span:nth-child(1) { height: 40%; animation-delay: 0s; }
.panel-wait span:nth-child(2) { height: 70%; animation-delay: .12s; }
.panel-wait span:nth-child(3) { height: 55%; animation-delay: .24s; }
.panel-wait span:nth-child(4) { height: 85%; animation-delay: .36s; }
.panel-wait span:nth-child(5) { height: 50%; animation-delay: .48s; }

@keyframes panel-wait-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-wait span { animation: none; }
}

/* Der Monatsunterteiler in einer absteigenden Liste. */
tbody tr.divider th {
  background: var(--surface-3);
  border-top: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
tbody tr.divider:first-child th { border-top: 0; }
.divider__sum {
  float: right;
  font-weight: 400;
  opacity: .72;
}

.filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 13px;
}

/* ⚠️ SOLL UND HABEN SIND ZWEI RICHTUNGEN, KEINE ZWEI ZAHLEN. In einer einzigen
   Spalte sehen „1 200 Aufwand" und „1 200 Ertrag" gleich aus, obwohl sie
   gegenläufig sind. Die Seite steht deshalb als Wort daneben, und der Betrag
   trägt eine Farbe: grün, wo der Saldo auf der natürlichen Seite des Kontos
   steht, rot, wo er ihr entgegenläuft.
   ⚠️ DIE FARBE IST NICHT DIE AUSKUNFT, SIE VERSTÄRKT SIE. Wer keine Farben
   unterscheidet, liest dieselbe Sache am Wort und am Minuszeichen. */
.side {
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.amount--natural { color: var(--ok); font-variant-numeric: tabular-nums; }
.amount--against { color: var(--bad); font-variant-numeric: tabular-nums; }

/* Im Kontoauszug tragen die zwei Spalten dieselbe Sprache. */
.statement__debit { color: var(--ink); }
td.statement__debit:not(:empty) { font-variant-numeric: tabular-nums; }

/* Wie viele hinter einem Reiter stehen. „Sind das alle?" ist die erste Frage
   an jede Liste, und sie war ohne Zählen nicht zu beantworten. */
.tabs__count {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.tabs a.is-active .tabs__count { background: var(--accent); color: var(--accent-ink); }

/* ⚠️ EIN BALKEN OHNE SKALA IST EIN MUSTER, KEINE ZAHL. Ablesbar war nur „dieser
   ist höher als der daneben"; wie viel, stand im Titel, und einen Titel sieht
   man erst mit der Maus darauf. Die Linien liegen HINTER den Balken, damit sie
   die Fläche nicht teilen. */
.chart-wrap {
  position: relative;
  padding-left: 42px;
  margin: 6px 0 10px;
}
.chart-wrap .chart { margin: 0; position: relative; z-index: 1; }

.chart__scale {
  position: absolute;
  top: 0;
  left: 42px;
  right: 0;
  /* Die Höhe des Diagramms minus der Zeile mit den Monatsnamen. */
  height: 111px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.chart__line {
  position: relative;
  border-top: 1px solid var(--line);
  height: 0;
}
/* Die Grundlinie darf kräftiger sein — sie ist die Null. */
.chart__line:last-child { border-top-color: var(--line-strong); }
.chart__scale-label {
  position: absolute;
  right: calc(100% + 6px);
  top: -0.62em;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Ein Schritt weiter: ein Wort zwischen zwei Pfeilen. */
.stepper {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.stepper a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}
.stepper a:hover { background: var(--surface-3); text-decoration: none; }
/* ⚠️ EIN PFEIL BRAUCHT EIN ZIEL, DAS MAN TRIFFT. 10px Polsterung links und
   rechts sind auf einem Berührungsbildschirm zu wenig, und ein Pfeil, den man
   danebendrückt, lädt die Seite ohne Wirkung neu. */
.stepper__arrow { min-width: 34px; font-size: 15px; line-height: 1; }
.stepper__unit {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-weight: 600;
  white-space: nowrap;
}
.period-name { margin: -8px 0 12px; font-weight: 600; }

/* ⚠️ DIE TREFFERZAHL GEHÖRT AN DIE LEISTE, AN DER SIE ENTSTEHT. Der Blätterer
   nennt sie unter der Tabelle und nur bei mehr als einer Seite — wer oben
   filtert, sah das Ergebnis erst nach dem Scrollen. Eingefärbt wird sie nur,
   wenn wirklich eine Einschränkung aktiv ist: sonst hiesse Farbe nichts. */
.badge--count { font-variant-numeric: tabular-nums; }
.toolbar .badge--count { margin-left: auto; }
.toolbar .toolbar__search ~ .badge--count,
.toolbar .toolbar__form ~ .badge--count { margin-left: 8px; }
.badge--count.is-filtered { background: var(--accent); color: var(--accent-ink); }

/* ⚠️ DER AUSDRUCK WIRD NEBEN EINEN ANDEREN GELEGT. Die Gliederung eines
   Abschlusses liest man am Einzug und an der Auszeichnung ab — Gruppen und
   Totale fett, Zwischenergebnisse mit einer Linie darüber, Konten schlicht.
   Mehr Farbe wäre hier kein Gewinn, sondern ein Unterschied zum Beleg. */
.structure { width: 100%; }
.structure td { padding: 3px 8px; border: none; }
.structure__number { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.structure__group td, .structure__total td { font-weight: 640; }
.structure__total td { padding-bottom: 10px; }
.structure__result td {
  font-weight: 640;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.structure--level1 td:nth-child(2) { padding-left: 8px; }
.structure--level2 td:nth-child(2) { padding-left: 24px; }
.structure--level3 td:nth-child(2) { padding-left: 40px; }
.structure--level4 td:nth-child(2) { padding-left: 56px; }
.structure__account td:nth-child(2) { font-weight: 400; }

/* ⚠️ EINE SAMMELBUCHUNG IST DRÜBEN EINE ZEILE. Zugeklappt steht die Summe,
   aufgeklappt stehen die Bewegungen darunter.

   ⚠️ EIN KLEINES DREIECK IST KEIN KNOPF. Die erste Fassung war ein 11px-Zeichen
   in der Farbe des Fliesstexts: man sah nicht, dass man klicken kann, und
   aufgeklappt sah der Block aus wie sechs gewöhnliche Zeilen. Der Schalter ist
   deshalb eine Pille mit Rahmen, das Zeichen wird gezeichnet statt gesetzt (ein
   Glyph ist in jeder Schrift anders gross), und der ganze Block trägt links
   eine Kante, damit man sieht, wo er anfängt und wo er aufhört. */
.disclose {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 2px 11px 2px 9px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface);
  color: var(--ink); font-size: 12px; font-weight: 620; line-height: 1.7;
  text-decoration: none; white-space: nowrap;
}
.disclose:hover { border-color: var(--accent); background: var(--accent-wash); }
.disclose:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Gezeichnet, nicht gesetzt: ein Dreieck aus Rändern ist in jeder Schrift
   gleich gross und dreht sich sauber. */
.disclose__mark {
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .12s ease;
}
.statement__run.is-open .disclose__mark { transform: rotate(90deg); }

.statement__run > td { background: var(--surface-3); }
.statement__run.is-open > td { font-weight: 620; }
/* Die Kante läuft über den Kopf und alle Bewegungen des Blocks. */
.statement__run.is-open > td:first-child,
.statement__member > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.statement__member > td { background: var(--surface-2); }
.statement__member > td:first-child { padding-left: 26px; }
.statement__member.is-last > td { border-bottom: 1px solid var(--line-strong); }

/* Die Auswahl der Quellen eines Laufs: eine Liste zum Ankreuzen, nicht ein
   Formular in Spaltenform — es sind acht kurze Wörter. */
.sources__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 18px; margin: 10px 0 4px;
}
.sources__item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sources__item input { margin: 0; }

/* Der Umfang einer Rücknahme steht am Knopf, nicht daneben. */
.withdraw { display: grid; gap: .6rem; }
.withdraw .field { max-width: 22rem; }
.withdraw__stray { display: flex; align-items: center; gap: .5rem; }

/* Buchungsmaske: getippt wird die Nummer, der Name steht daneben.
   ⚠️ EIN FELD MUSS AUSSEHEN WIE EIN FELD. Rahmenlose Eingaben auf einer
   Tabelle sind hübsch und unbedienbar: die erste Fassung zeigte acht leere
   Zeilen, in denen nicht zu erkennen war, wo man tippt. */
.posting__rows { width: 100%; border-collapse: collapse; table-layout: fixed; }
.posting__rows th { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
                    color: var(--ink-soft); font-weight: 600; padding: .3rem .4rem .45rem;
                    border-bottom: 1px solid var(--line-strong); text-align: left; }
.posting__rows th.num, .posting__rows td.num { text-align: right; }
.posting__rows td { padding: .18rem .25rem; vertical-align: middle; }
.posting__rows input, .posting__rows select { width: 100%; font: inherit; padding: .34rem .45rem;
                                              border: 1px solid var(--line); border-radius: 4px;
                                              background: var(--surface-2); color: inherit; }
.posting__rows input:hover, .posting__rows select:hover { border-color: var(--line-strong); }
.posting__rows input:focus, .posting__rows select:focus { outline: none; background: var(--surface-3);
                                                          border-color: var(--accent);
                                                          box-shadow: 0 0 0 3px var(--accent-wash); }
.posting__rows .num input { text-align: right; font-variant-numeric: tabular-nums; }

/* Nummer und Bezeichnung teilen sich eine Zelle — eine zweite Zeile je Konto
   machte die Maske doppelt so hoch, auch wenn nichts darin stand. */
.posting__account { display: flex; align-items: center; gap: .45rem; }
.posting__number { flex: 0 0 5.5rem; font-variant-numeric: tabular-nums; }
.posting__number.is-unknown { border-color: var(--bad, #c0392b); }
td .posting__account #row_0_tax, .posting__rows [id$="_tax"] { flex: 0 0 4rem; }
.posting__name { flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--ink-soft);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.posting__rows col.c-account { width: 22%; }
.posting__rows col.c-tax { width: 13rem; }
.posting__rows col.c-tax + col { width: 9rem; }
.posting__rows col.c-amount { width: 9rem; }
.posting__rows col.c-taxsum { width: 6.5rem; }
.posting__rows tfoot td { padding: .55rem .45rem; font-weight: 600;
                          border-top: 2px solid var(--line-strong); }
.posting__rows tfoot .num { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.posting__tax { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .9rem; }
.statement__fx { display: block; font-size: .78rem; color: var(--ink-soft);
                 font-variant-numeric: tabular-nums; font-weight: 400; }

/* Der Abschluss einer Rechnung: rechtsbündig, eigener Block, Total betont.
   Ohne Rahmen und Fläche — es ist die Summe der Tabelle darüber, keine zweite. */
.totals { width: auto; margin: .6rem 0 0 auto; border-collapse: collapse;
          background: none; box-shadow: none; border: 0; }
.totals tr, .totals th, .totals td,
.totals tbody tr:nth-child(even), .totals tbody tr:hover { background: none; border: 0; }
.totals th { text-align: right; font-weight: 400; color: var(--ink-soft);
             padding: .28rem 1.6rem .28rem 0; white-space: nowrap; font-size: .9rem;
             text-transform: none; letter-spacing: 0; }
.totals td { text-align: right; font-variant-numeric: tabular-nums;
             padding: .28rem .9rem .28rem 0; min-width: 9.5rem; }
.totals .totals__sum th, .totals .totals__sum td { font-weight: 600; font-size: 1.05rem;
             border-top: 1px solid var(--line); padding-top: .5rem; }
.posting__tax.is-unknown { color: var(--bad); }
.posting .counter { margin: .2rem 0 0; font-size: .75rem; color: var(--ink-soft);
                    text-align: right; font-variant-numeric: tabular-nums; }
.posting .counter.is-tight { color: var(--accent); font-weight: 600; }

/* Ein Pfeil auf ein Jahr, das nicht geführt wird, ist kein Pfeil. */
.stepper__arrow.is-off { opacity: .28; cursor: default; }

/* Buchungssätze oder Sammelbuchung — die Wahl steht vor dem Tippen. */
.modes { display: flex; align-items: center; gap: .4rem; margin: 1.1rem 0 .7rem;
         flex-wrap: wrap; }
.modes__tab { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px;
              font-size: .85rem; text-decoration: none; color: var(--ink-soft); }
.modes__tab:hover { border-color: var(--line-strong); color: inherit; }
.modes__tab.is-on { background: var(--accent-wash); border-color: var(--accent);
                    color: inherit; font-weight: 600; }
.modes__hint { flex: 1 1 18rem; font-size: .78rem; color: var(--ink-soft); }

/* Die Spur: wo man ist, und wie man von dort zurueckkommt. */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
          padding: .55rem 2rem .1rem; font-size: .82rem; }
.crumbs__step { color: var(--ink-soft); text-decoration: none; }
.crumbs__step:hover { color: inherit; text-decoration: underline; }
.crumbs__step--here { color: inherit; font-weight: 600; }
.crumbs__sep { color: var(--ink-soft); opacity: .6; }

/* Monat, Quartal, Geschaeftsjahr: eine Gruppe, die gemeinsam umbricht. */
.steppers { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }

/* Die Belege einer Buchung: je Beleg eine Zeile, Art vorne. */
.booking__documents { display: flex; flex-direction: column; gap: 4px; }
.booking__document { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.booking__partner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.booking__partner input[type=text] { width: min(320px, 100%); height: 32px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface-3); color: var(--ink); font: inherit; }
.booking__partner input[type=text]:focus { outline: none; border-color: var(--accent); }

/* Linien-Symbole im Text: so gross wie die Schrift, Farbe von ihr. */
.line-icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.15em; }

/* Ansprechpersonen am Geschäftspartner: je Person eine Karte. */
.contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; gap: var(--gutter); margin-bottom: var(--stack); }
/* ⚠️ GLEICH HOCH IN EINER REIHE, der Fuss unten bündig — gemeldet: „die boxen
   … sollten alle gleich gross sein". */
.contact { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.contact__lines { margin-top: 6px; }
.contact__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; min-height: 30px; }
.contact__foot:empty { display: none; }
.contact__head { display: flex; gap: 12px; align-items: flex-start; }
.contact__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); flex: none; }
.contact__avatar .line-icon { width: 20px; height: 20px; }
.contact__roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.contact__role { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); background: var(--surface-3); border-radius: 999px; padding: 1px 8px; }
.contact__ways { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.contact__ways li { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); min-width: 0; }
.contact__ways a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Adressen am Geschäftspartner: dieselben Karten, über den Reitern. */
.partner-places__past { margin: calc(-1 * var(--stack) + 8px) 0 var(--stack); }
.partner-places__past summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }
.contact--past { opacity: .7; }

/* Artikel: Bild neben den Eckdaten, die Dateien als Liste darunter. */
.article__head { display: flex; gap: 16px; align-items: flex-start; }
.article__head > .card { flex: 1; min-width: 0; }
.article__photo { flex: none; width: 180px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 8px; }
.article__photo img { display: block; width: 100%; height: auto; }
.article__media { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 6px; }
.article__media a { display: flex; gap: 10px; align-items: baseline; }
@media (max-width: 700px) { .article__head { flex-direction: column; } .article__photo { width: 140px; } }

/* Die Medien eines Artikels: je Medium eine Karte mit Vorschau. */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 0 0 24px; align-items: start; }
.media-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.media-card__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.media-card__head h2 { margin: 0; font-size: 14px; color: var(--ink); }
.media-card__preview { aspect-ratio: 4 / 3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.media-card__preview > a { display: flex; width: 100%; height: 100%; }
.media-card__preview img, .media-card__preview video { width: 100%; height: 100%; object-fit: contain; background: var(--surface-2); }
.media-card__preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.media-card--empty .media-card__preview { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px); }
.media-card__placeholder { color: var(--ink-faint); }
.media-card__placeholder .line-icon { width: 44px; height: 44px; }
.media-card__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 12px 14px 0; font-size: 13px; }
.media-card__facts dt { color: var(--ink-soft); }
.media-card__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.media-card__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px 14px; margin-top: auto; }
.media-card__upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.media-card__upload input[type=file] { flex: 1; min-width: 0; font-size: 12px; }

/* Einkaufsquellen in der Artikelmaske: eine Zeile je Lieferant. */
.purchases-form input, .purchases-form select { width: 100%; }
.purchases-form .input--narrow { width: 5.5em; }

/* ── Angebotsmaske ─────────────────────────────────────────────────────────
   ⚠️ „HÄSSLICHES LAYOUT" WAR DER BEFUND. Vorher: eine Formularseite mit zwei
   Tabellenzeilen je Position und Klapplisten für den Artikel. Jetzt: Kopf als
   Karte, Positionen als Raster zum Durchtippen, Summen rechts daneben und
   beim Blättern stehend — wer die zwanzigste Zeile tippt, sieht die Summe. */
.offer-editor__top { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 18px; align-items: start;
                     margin-bottom: 18px; }
.offer-editor__top > .card, .offer-editor__aside > .card, .offer-editor__main > .card { margin: 0; }
.offer-editor__main { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 1100px) { .offer-editor__top { grid-template-columns: 1fr; } }
.offer-editor > .card { margin-bottom: 18px; }

.offer-head__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.offer-head__partner, .offer-head__title { grid-column: span 2; }
.offer-head__intro { margin-top: 12px; }
.offer-head__intro textarea { min-height: 4.5rem; max-height: 14rem; resize: vertical; }
.offer-head .field__fixed { margin: 0; padding: .45rem 0; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 900px) { .offer-head__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .offer-head__fields { grid-template-columns: 1fr; }
  .offer-head__partner, .offer-head__title { grid-column: auto; }
}

.offer-grid { padding: 12px 10px 0; }
.offer-grid__scroll { overflow-x: auto; }
.offer-lines { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed;
               border: 0; box-shadow: none; background: transparent; }
.offer-lines col.c-handle { width: 1.4rem; }
.offer-lines col.c-number { width: 7.5rem; }
.offer-lines col.c-qty { width: 4.6rem; }
.offer-lines col.c-unit { width: 4.4rem; }
.offer-lines col.c-price { width: 6.6rem; }
.offer-lines col.c-disc { width: 4.2rem; }
.offer-lines col.c-amount { width: 8.4rem; }
.offer-lines col.c-tools { width: 3.6rem; }
.offer-lines thead th { position: static; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
                        font-weight: 600; padding: .3rem .3rem .45rem; border-bottom: 1px solid var(--line-strong);
                        text-align: left; background: none; }
.offer-lines thead th.num { text-align: right; }
.offer-lines tbody tr, .offer-lines tbody tr:nth-child(even), .offer-lines tbody tr:hover { background: none; }
.offer-lines td { padding: .16rem .2rem; vertical-align: middle; border: 0; }
.offer-row + .offer-row .offer-row__main td { border-top: 1px solid var(--line); }
.offer-row--child + .offer-row--child .offer-row__main td { border-top-color: transparent; }
.offer-lines input, .offer-lines select, .offer-lines textarea {
  width: 100%; font: inherit; font-size: .9rem; padding: .32rem .42rem; border: 1px solid transparent;
  border-radius: 4px; background: transparent; color: inherit; }
.offer-lines .offer-row__main input { background: var(--surface-2); border-color: var(--line); }
.offer-lines input:hover, .offer-lines select:hover { border-color: var(--line-strong); }
.offer-lines input:focus, .offer-lines select:focus, .offer-lines textarea:focus {
  outline: none; background: var(--surface-3); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.offer-lines .num input { text-align: right; font-variant-numeric: tabular-nums; }
.offer-row__number { font-variant-numeric: tabular-nums; }
.offer-row__number.is-unknown { border-color: var(--bad) !important; }
.offer-row__handle { cursor: grab; color: var(--ink-faint); font-size: .8rem; text-align: center; user-select: none;
                     letter-spacing: -2px; }
.offer-row.is-dragging { opacity: .45; }
.offer-row__name { white-space: nowrap; }
.offer-row__name > * { vertical-align: middle; }
.offer-row--child .offer-row__name { padding-left: 1.4rem; position: relative; }
.offer-row--child .offer-row__name::before { content: ""; position: absolute; left: .55rem; top: 0; bottom: 50%;
                                             width: .55rem; border-left: 1px solid var(--line-strong);
                                             border-bottom: 1px solid var(--line-strong); }
.offer-row--child .offer-row__name input { width: calc(100% - 5.2rem); }
.offer-row__role { display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
                   padding: .1rem .35rem; border-radius: 3px; margin-right: .3rem; background: var(--surface-3);
                   color: var(--ink-soft); width: 4.6rem; text-align: center; }
.offer-row__role--accessory { background: var(--accent-wash); color: var(--accent); }
.offer-row.is-muted .offer-row__main input { color: var(--ink-soft); font-style: italic; }
.offer-row__amount { font-variant-numeric: tabular-nums; font-size: .88rem; line-height: 1.25; white-space: nowrap; }
.offer-row__sum { display: block; }
.offer-row__sum--monthly { color: var(--ink-soft); font-size: .82rem; }
.offer-row__tools { text-align: right; white-space: nowrap; }
.offer-row__tools button { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 1rem;
                           width: 1.5rem; height: 1.6rem; border-radius: 4px; padding: 0; }
.offer-row__tools button:hover, .offer-row__tools button:focus-visible { color: var(--ink); background: var(--surface-3); }
.offer-row__toggle[aria-expanded="true"] { color: var(--accent); background: var(--accent-wash); }
.offer-row__main.has-errors td { background: var(--bad-wash); }
.offer-row__errors { color: var(--bad); font-size: .82rem; margin: .2rem 0 .4rem; }

.offer-row__details td { padding: .2rem .2rem .8rem; }
.offer-details { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px;
                 padding: .7rem .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.offer-details .field label { font-size: .72rem; }
.offer-details .field.wide { grid-column: span 3; }
.offer-details input, .offer-details select, .offer-details textarea { background: var(--surface); border-color: var(--line); }
.offer-details__flags { grid-column: 1 / -1; display: flex; gap: 18px; flex-wrap: wrap; }
.offer-details__flags label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.offer-details__flags input { width: auto; }

.offer-grid__foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                    margin: 0 -10px; padding: .7rem 16px; background: var(--surface); border-top: 1px solid var(--line);
                    border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -8px 16px -12px rgba(16, 24, 40, .25); }
.offer-grid__sum { flex: 1 1 auto; display: flex; gap: 22px; justify-content: flex-end; flex-wrap: wrap;
                   font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--ink-soft); }
.offer-grid__sum strong { color: var(--ink); font-weight: 600; margin-left: .3rem; }
.offer-grid__sumpart--soft { color: var(--ink-faint); }
.offer-grid__keys { font-size: .75rem; color: var(--ink-faint); margin: .6rem .3rem .7rem; }
/* ⚠️ AM TELEFON KLEBT DIE LEISTE NICHT. Drei Summen und zwei Knöpfe nehmen dort
   ein Drittel des Bildschirms ein — über dem Raster, das man gerade tippt. */
@media (max-width: 720px) {
  .offer-grid__foot { position: static; box-shadow: none; }
  .offer-grid__sum { justify-content: flex-start; gap: 4px 16px; width: 100%; order: -1; }
  .offer-grid__keys { display: none; }
}
.offer-grid__keys kbd { font: inherit; font-size: .7rem; padding: .05rem .3rem; border: 1px solid var(--line-strong);
                        border-bottom-width: 2px; border-radius: 3px; background: var(--surface-2); color: var(--ink-soft); }

.offer-texts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 720px) { .offer-texts { grid-template-columns: 1fr; } }

.offer-aside { padding: 16px; }
.offer-aside__conditions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding-bottom: 12px;
                           border-bottom: 1px solid var(--line); }
.offer-aside__conditions .field label { font-size: .7rem; line-height: 1.2; white-space: nowrap; }
.offer-aside__conditions input { text-align: right; font-variant-numeric: tabular-nums; }

.offer-totals__block { padding: 10px 0 4px; }
.offer-totals__block + .offer-totals__block { border-top: 1px dashed var(--line); }
.offer-totals__label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.offer-totals .totals { display: table; width: 100%; margin: .2rem 0 0; }
.offer-totals .totals th { padding-right: .6rem; text-align: left; }
.offer-totals .totals td { padding-right: 0; min-width: 0; }
.offer-totals .totals th, .offer-totals .totals td, .offer-totals .totals tr { background: none !important; }
.offer-totals__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0 0; padding-top: 10px;
                       border-top: 1px solid var(--line); font-size: .85rem; }
.offer-totals__facts dt { color: var(--ink-soft); }
.offer-totals__facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Die Ansicht: Positionen nach Kategorie, Unterpositionen eingerückt. */
.offer-sheet td:nth-child(5), .offer-sheet td.num { white-space: nowrap; }
.offer-sheet__category th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
                            padding-top: 1rem; background: none; border-bottom: 1px solid var(--line-strong); }
.offer-sheet__category .offer-sheet__dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
                                           margin-right: .45rem; vertical-align: middle; }
.offer-sheet__child td:first-child { padding-left: 1.6rem; }
.offer-sheet__child td:first-child::before { content: "└ "; color: var(--ink-faint); }
.offer-sheet .is-muted td { color: var(--ink-soft); }
.offer-sheet__layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 20px; align-items: start; }
.offer-sheet__totals { position: sticky; top: calc(var(--sticky-top) + 56px); margin-top: 0; }
/* ⚠️ `table + .card` gibt jeder Karte nach einer Tabelle 20px Abstand — und
   ist spezifischer als die Klasse oben. Neben der Tabelle stand die Summe
   deshalb 20px tiefer als die erste Zeile. */
.offer-sheet__layout > .offer-sheet__totals { margin-top: 0; }
@media (max-width: 1180px) {
  .offer-sheet__layout { grid-template-columns: 1fr; }
  .offer-sheet__totals { position: static; }
}

/* Kategorie-Überschrift im Raster: dieselbe Zeile wie im Blatt. */
.offer-lines tbody.offer-group th { text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); padding: .9rem .2rem .3rem; border: 0; }
.offer-lines tbody.offer-group:first-of-type th { padding-top: .4rem; }

/* Vorschläge unter einem Feld — Zefix beim Anlegen eines Partners. */
[data-controller~="zefix"] { position: relative; }
/* The list stands under its own field, also where the controller wraps several. */
.field:has(> .suggest) { position: relative; }
.suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
           max-height: 320px; overflow: auto; }
.suggest__item { display: grid; gap: 2px; padding: 8px 10px; border-radius: calc(var(--radius) - 2px); cursor: pointer; }
.suggest__item:hover, .suggest__item.is-on { background: var(--accent-wash); }
.suggest__item.is-gone { opacity: .55; }

/* Stichtag in der Werkzeugleiste der offenen Posten. */
.toolbar .inline-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.toolbar .inline-form label { font-size: 13px; color: var(--ink-soft); }

/* Ein Häkchen in der Werkzeugleiste steht auf der Höhe der Felder. */
.toolbar label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.toolbar label.check input { margin: 0; }

/* Periodenabschluss: die laufende Periode ist zu erkennen. */
.closings tr.is-current td { background: var(--warn-wash); }

/* MWST-Verprobung: eine Gruppe je Code und Konto, aufklappbar. */
.verification__group { padding: 0; margin: 0 0 12px; }
.verification__group > form { padding: 0 14px 12px; }
.verification__head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 12px 14px; cursor: pointer; }
.verification__head .num { margin-left: auto; font-variant-numeric: tabular-nums; }
.verification__confirmed > summary { cursor: pointer; list-style: revert; }
.verification__confirmed > summary h2 { display: inline; }

/* Buchungsmaske: Steuercode weicht vom Standard des Kontos ab. */
.posting__number.is-deviating { border-color: var(--warn); background: var(--warn-wash); }

/* Periodenvergleich: Charts nebeneinander, Trendlinie in der Zeile. */
.trend__charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0 0 18px; }
.trend__chart h3 { font-size: 13px; margin: 0 0 8px; }
.trend__line { color: var(--ink-soft); }
.sparkline { display: block; }

/* ---- Übermittlung an die ESTV ----------------------------------------------
 * Das Blatt links, daneben was die Datei sagen wird; auf dem Telefon
 * untereinander, das Blatt zuerst — es ist das, was geprüft wird.
 */
.estv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.estv__side { display: flex; flex-direction: column; gap: 12px; }
.estv__side .warnbox ul { margin: 0; padding-left: 18px; }
.estv__deviation { color: var(--warn); font-weight: 600; }
@media (max-width: 900px) {
  .estv { grid-template-columns: minmax(0, 1fr); }
  .estv__sheet { height: 70vh; }
}
/* Ein gesperrter Knopf darf nicht aussehen wie einer, der etwas tut. */
.button:disabled, .button[disabled] { opacity: .45; cursor: not-allowed; }

/* SHAB-Meldungen am Geschäftspartner */
.register-notice h3 { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.register-notice + .register-notice { margin-top: 12px; }

.register-notice__before { color: var(--ink-soft); text-decoration: line-through; }
.register-news h2 { display: flex; align-items: baseline; gap: 12px; }
.register-news__all { font-size: 13px; font-weight: 400; margin-left: auto; }
.register-news__list { list-style: none; margin: 0; padding: 0; }
.register-news__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.register-news__list li:first-child { border-top: 0; }
.register-news__date { flex: 0 0 48px; color: var(--ink-soft); white-space: nowrap; }
.register-news__name { flex: 0 1 200px; font-weight: 600; }
.register-news__what { flex: 1 1 280px; }

/* ---- Seitenkopf: Titel links, Handlungen rechts --------------------------- */
/* ⚠️ DIE HANDLUNGEN GEHÖREN ZUM KOPF, NICHT IN EINE EIGENE LEISTE darunter —
   eine Leiste mit drei Knöpfen war ein ganzer grauer Block zwischen Titel und
   Inhalt. Eine Werkzeugleiste bleibt für Listen mit Suche und Filter. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--stack); }
.page-head h1 { margin-bottom: 4px; }
.page-head .lede { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.section-head { display: flex; align-items: center; gap: 10px; }
.button--small { padding: 4px 10px; font-size: 12.5px; min-height: 28px; }
.button--small .line-icon { width: 13px; height: 13px; }
.badge--lock { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-3); color: var(--ink-soft); }
.badge--lock .line-icon { width: 12px; height: 12px; }
.tabs a .badge--count { margin-left: 4px; }
.rule-line + .rule-line { margin-top: 2px; }
/* Der Link „Alle anzeigen" sitzt unten im Kasten, auch wenn der Nachbar höher ist. */
.columns > .card > p.detail:last-child { margin-top: auto; padding-top: 10px; }
.tasks__done { display: flex; align-items: center; gap: 8px; color: var(--ok); margin: 4px 0 0; }
.register-news__list li.is-bad .register-news__what { color: var(--bad); }
/* ⚠️ REITER ROLLEN SEITLICH, statt die Seite zu verbreitern — auf dem Telefon
   stand „Register" halb ausserhalb. */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs a { white-space: nowrap; flex: none; }
/* ⚠️ ROLLEN NUR IN EINEM KASTEN. Ein rollender Behälter fängt den mitlaufenden
   Tabellenkopf ein (`position: sticky` gilt dann für den Behälter, nicht für
   die Seite) — global gesetzt, lag der Kopf der Artikelliste über den Zeilen.
   In einem Kasten läuft kein Kopf mit. */
.card .table-wrap { overflow-x: auto; }
.card thead th { position: static; }
/* ⚠️ EIN RASTERFELD IST SONST SO BREIT WIE SEIN BREITESTER INHALT, und eine
   Tabelle ohne Umbruch schob den Kasten über den Rand des Telefons. */
.columns > * { min-width: 0; }
/* In einem Kasten haben die Zellen keinen Innenabstand; ohne diesen Abstand
   lief „01.06.2026" in „2026-1" hinein. */
.card table td + td, .card table th + th { padding-left: 14px; }

/* ---- Artikel ------------------------------------------------------------- */
.article-hero { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--gutter); align-items: stretch; margin-bottom: var(--stack); }
.article-hero .tiles { margin: 0; }
.article-hero__photo { display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-sm); min-height: 120px; }
.article-hero__photo img { display: block; max-width: 100%; max-height: 180px; object-fit: contain; }
.article-hero__placeholder { color: var(--ink-faint); }
.article-hero__placeholder .line-icon { width: 44px; height: 44px; stroke-width: 1.2; }
@media (max-width: 700px) { .article-hero { grid-template-columns: 1fr; } .article-hero__photo { max-height: 200px; } }
.articles__thumb { width: 52px; }
.articles__thumb img, .articles__thumb span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-3); object-fit: contain; color: var(--ink-faint); }
.articles__name { font-weight: 600; }
.articles__lock { color: var(--ink-faint); margin-left: 6px; }
.articles tr.is-retired td { opacity: .6; }
.is-bad { color: var(--bad); }

/* ---- Offene Posten: Zusammenfassung --------------------------------------- */
.op-summary__check .tile__value { display: flex; align-items: center; gap: 8px; }
.tile--ok .tile__value { color: var(--ok); }
.ageing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ageing-list__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px; align-items: center; gap: 12px; font-size: 13px; }
.ageing-list__bar { height: 10px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.ageing-list__bar span { display: block; height: 100%; border-radius: 99px; background: var(--chart-2); }
.ageing-list__row--d1_30 .ageing-list__bar span { background: var(--chart-3); }
.ageing-list__row--d31_60 .ageing-list__bar span, .ageing-list__row--d61_90 .ageing-list__bar span { background: #f97316; }
.ageing-list__row--over_90 .ageing-list__bar span { background: var(--bad); }
.ageing-list__value { text-align: right; font-variant-numeric: tabular-nums; }
.op-summary__top { margin-top: 18px; }
.op-summary__partners { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; }
.op-summary__partners li span { float: right; font-variant-numeric: tabular-nums; }
.badge .line-icon { width: 12px; height: 12px; vertical-align: -2px; }

/* ---- Filterzeile ---------------------------------------------------------- */
/* ⚠️ EINE ZEILE, ALLES GLEICH HOCH. Suche zuerst und breit, dann die
   Auswahllisten, dann Schalter als Chips; auf dem Telefon untereinander. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--stack); }
.filters__field, .filters .button { height: 36px; box-sizing: border-box; margin: 0; font-size: 13px; }
.filters select.filters__field { width: auto; min-width: 170px; max-width: 320px; }
.filters__search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-faint); }
.filters__search input { border: 0; outline: 0; padding: 0; height: 34px; width: 100%; background: transparent; box-shadow: none; }
.filters .badge--count { margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: 13px; white-space: nowrap; text-decoration: none; }
.chip.is-active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.chip .line-icon { width: 14px; height: 14px; }
@media (max-width: 700px) { .filters select.filters__field { flex: 1 1 100%; max-width: none; } }

/* ---- Zeitleiste (Periodenabschluss) --------------------------------------- */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.timeline__step { position: relative; padding: 0 12px 0 0; }
/* die Linie zwischen den Punkten */
.timeline__step::before { content: ""; position: absolute; top: 15px; left: 32px; right: 0; height: 2px; background: var(--line-strong); }
.timeline__step:last-child::before { display: none; }
.timeline__step--locked::before, .timeline__step--vat::before { background: var(--ink-soft); }
.timeline__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); color: var(--ink-faint); }
.timeline__dot .line-icon { width: 15px; height: 15px; }
.timeline__step--locked .timeline__dot { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.timeline__step--vat .timeline__dot { background: var(--ok-wash); border-color: var(--ok); color: var(--ok); }
.timeline__step--current .timeline__dot { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.timeline__step--open .timeline__dot { border-color: var(--warn); color: var(--warn); }
.timeline__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 10px; }
.timeline__body a.detail { display: inline-flex; align-items: center; gap: 4px; }
.timeline__action { margin-top: 6px; }
.timeline__action form { margin: 0; }
@media (max-width: 700px) {
  .timeline { grid-template-columns: 1fr; gap: 16px; }
  .timeline__step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
  .timeline__step::before { top: 32px; bottom: -16px; left: 15px; right: auto; width: 2px; height: auto; }
  .timeline__body { margin-top: 0; }
}

/* Die Kontoart als Abzeichen in der Farbe ihrer Klasse. */
.kind { font-weight: 600; }
.kind--asset { background: color-mix(in srgb, var(--chart-1) 14%, transparent); color: var(--chart-1); }
.kind--liability { background: color-mix(in srgb, var(--chart-4) 14%, transparent); color: var(--chart-4); }
.kind--equity { background: color-mix(in srgb, var(--chart-8) 16%, transparent); color: var(--chart-8); }
.kind--revenue { background: color-mix(in srgb, var(--chart-2) 14%, transparent); color: var(--chart-2); }
.kind--expense { background: color-mix(in srgb, var(--chart-5) 12%, transparent); color: var(--chart-5); }

/* ---- Kontomaske ----------------------------------------------------------- */
.account-form__name { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--gutter); }
@media (max-width: 600px) { .account-form__name { grid-template-columns: 1fr; } }
.account-form__name + .field { margin-top: 14px; }
fieldset.field { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
fieldset.field legend { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; padding: 0; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented__option { position: relative; cursor: pointer; }
.segmented__option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__option span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.segmented__option input:checked + span { color: inherit; border-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.segmented__option.kind--asset, .segmented__option.kind--liability, .segmented__option.kind--equity, .segmented__option.kind--revenue, .segmented__option.kind--expense { background: none; }
.segmented__option input:not(:checked) + span { color: var(--ink-soft); }
.segmented__option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; cursor: pointer; }
.toggle input { width: auto; margin: 0; }
.toggle span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }

/* ---- Abschluss: Filter mit Datum, Herleitung der Differenz ----------------- */
.filters__date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.filters__date input { width: auto; }
.chip__box { width: auto; margin: 0; }
.jumps--chips { gap: 8px; }
.jumps--chips a { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.difference { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.difference__step { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 0 0 8px; }
.calc { width: 100%; }
.calc td { padding: 6px 0; vertical-align: top; }
.calc tr.calc__total td { border-top: 2px solid var(--line-strong); font-weight: 650; }
.calc__items { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.calc__items li { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); }
.difference__fix { display: flex; align-items: center; gap: 6px; margin-top: 12px; }

/* ---- Periodenvergleich: Veränderung statt zwei Balken ------------------------ */
.filters__field--narrow { min-width: 0 !important; width: 64px !important; }
.filters__field--year { width: 84px; }
.trend__figure { font-size: 24px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.delta { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta--up, td.delta--up { color: var(--ok); }
.delta--down, td.delta--down { color: var(--bad); }
.delta--flat { color: var(--ink-soft); }
.delta__arrow { font-size: 10px; }
.delta__against { color: var(--ink-soft); }
.trend-cols { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 14px; }
.trend-cols__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.trend-cols__track { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; }
.trend-cols__bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--line-strong); }
.trend-cols__bar.is-current { background: var(--accent); }
.trend-cols__bar.is-negative { background: color-mix(in srgb, var(--bad) 35%, var(--surface)); }
.trend-cols__bar.is-current.is-negative { background: var(--bad); }
.trend-cols__tick { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.movers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.movers__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(60px, 1fr) auto; align-items: center; gap: 14px; }
.movers__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movers__bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.movers__fill { display: block; height: 100%; border-radius: 4px; }
.movers__fill--up { background: var(--ok); }
.movers__fill--down { background: var(--bad); }
@media (max-width: 640px) { .movers__row { grid-template-columns: minmax(0, 1fr) auto; } .movers__bar { display: none; } }

/* ---- MWST-Verprobung: gebucht → erwartet ------------------------------------- */
.code-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--accent-wash); color: var(--accent); font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.code-chip--off { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.verification__pair { display: inline-flex; align-items: center; gap: 6px; }
.verification__arrow { color: var(--ink-soft); }
.verification__head { align-items: center; }
.verification__account { font-weight: 600; }
.verification__ok { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); }
.verification__ok .line-icon { width: 14px; height: 14px; }
.verification__off { color: var(--bad); font-weight: 600; }
.verification__matrix tr.verification__first td { border-top: 2px solid var(--line-strong); }
.verification__matrix tbody tr:first-child td { border-top: 0; }
.verification__matrix tr.is-off { background: color-mix(in srgb, var(--bad) 5%, transparent); }
.verification__clean { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }

/* Druckmaske der offenen Posten: fünf Felder in einem Raster, die Häkchen darunter. */
.print-mask { margin-bottom: 18px; }
.print-mask__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.print-mask__checks { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0; }

/* Ausgangsstapel: der Plan einer Zeile klappt auf, die Knöpfe stehen untereinander. */
.outbound__plan summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); }
.outbound__plan pre { font-size: 11.5px; max-width: 520px; overflow-x: auto; white-space: pre-wrap; }
/* ⚠️ Die Knöpfe stehen untereinander: nebeneinander trieben drei davon die
   Tabelle bei 1440px über den Rand. */
.outbound__actions { width: 1%; white-space: nowrap; }
.outbound__actions form { display: block; margin: 0 0 6px; }
.outbound__actions form button { width: 100%; justify-content: flex-start; }

/* Die Übersicht, angeordnet von der Person ({DashboardLayout}).
   ⚠️ AUSSERHALB DES BEARBEITENS GIBT ES DIE LEISTE NICHT, und Verborgenes
   auch nicht — nicht einmal als Lücke. */
.dash__tools { display: flex; justify-content: flex-end; gap: 8px; margin: -6px 0 10px; }
.dash__tools form { margin: 0; }
.dash .dash__done, .dash .dash__tools form { display: none; }
.dash.is-editing .dash__edit { display: none; }
.dash.is-editing .dash__done, .dash.is-editing .dash__tools form { display: inline-flex; }

.dash__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin: 0 0 var(--stack); }
.dash__block--card { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.dash__block--card > p.detail:last-child { margin-top: auto; padding-top: 10px; }
.dash__block--wide { grid-column: 1 / -1; }
.dash__block--tile { display: flex; flex-direction: column; min-width: 0; }
.dash__block--tile > .tile { flex: 1; }
.dash__block.is-hidden, .dash__block.is-idle { display: none; }

.dash__bar { display: none; }
.dash.is-editing .dash__block { display: flex; flex-direction: column; outline: 1px dashed var(--line); outline-offset: 3px; border-radius: var(--radius); }

.dash.is-editing .dash__block.is-hidden { opacity: .45; }
.dash.is-editing .dash__block.is-dragging { opacity: .3; }
.dash.is-editing .dash__bar {
  display: flex; align-items: center; gap: 2px; margin: 0 0 8px;
  color: var(--ink-soft);
}
.dash__bar button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: none; color: inherit; cursor: pointer;
}
.dash__bar button:hover { border-color: var(--line); color: var(--ink); }
.dash__bar .line-icon { width: 16px; height: 16px; }
.dash__grip { display: inline-flex; margin-right: auto; cursor: grab; }
.dash.is-editing .dash__block.is-hidden .dash__eye { color: var(--accent); }

@media (max-width: 900px) {
  .dash__cards { grid-template-columns: minmax(0, 1fr); }
}

/* Budget ({Budget}): ein Raster zum Tippen und ein Vergleich zum Lesen. */
.num.is-ok { color: var(--ok); }
.budget-grid td:first-child, .budget-grid th:first-child { white-space: nowrap; }
.budget-grid__cell {
  width: 100%; min-width: 92px; text-align: right; font-variant-numeric: tabular-nums;
  padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit;
}
.budget-grid__cell:hover { border-color: var(--line); }
.budget-grid__cell:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.budget-grid__sum th, .budget-grid__result th { text-align: left; padding: 8px 12px; }
.budget-grid__sum th.num, .budget-grid__result th.num { text-align: right; }
.budget-grid__sum th { font-weight: 600; background: var(--surface-2, transparent); }
.budget-grid__result th, .budget-compare__level td { font-weight: 700; border-top: 2px solid var(--line); }
.budget-compare__class td { font-weight: 600; }
.budget-compare__account td:first-child { padding-left: 24px; color: var(--ink-soft); }

/* VR-Cockpit ({Reports::BoardCockpit}). */
.board-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gutter); margin: 0 0 var(--stack); }
.board-kpi .tile__label { margin: 0 0 6px; }
.board-kpi__foot { min-height: 18px; margin-top: 4px; }
.board-kpi__delta { font-size: 12px; color: var(--ink-soft); }
.board-kpi__delta.is-ok { color: var(--ok); }
.board-kpi__delta.is-bad { color: var(--bad); }
.board-chart { width: 100%; height: auto; display: block; }
.board-chart__grid { stroke: var(--line); stroke-width: 1; }
.board-chart__axis { font-size: 9px; fill: var(--ink-soft); }
.board-chart__value { font-size: 9px; font-weight: 600; fill: var(--ink); }
.board-chart__line { stroke-width: 2; }
.board-chart__area { opacity: .15; }
.board-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; color: var(--ink-soft); }
.board-legend li { display: inline-flex; align-items: center; gap: 6px; }
.board-facts dd { text-align: right; font-variant-numeric: tabular-nums; }
.board-light { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.board-light--green { background: #2E9E5B; }
.board-light--yellow { background: #E0A800; }
.board-light--red { background: #C62828; }
.board-thresholds .budget-grid__cell { max-width: 120px; margin-left: auto; display: block; }
.board-compare { margin: 0 0 var(--stack); }
.board-compare h2 .detail { font-weight: 400; margin-left: 8px; }
.board-compare__budget { background: var(--surface-2); }
.board-compare__level td { font-weight: 600; }
.board-compare .is-ok { color: var(--ok); }
.board-compare .is-bad { color: var(--bad); }

/* Der Verlauf der flüssigen Mittel ({ChartsHelper#course_chart}): ausgezogen
   was war, gestrichelt was nach den Fälligkeiten kommt. */
.course { display: block; width: 100%; height: auto; margin: 6px 0 12px; overflow: visible; }
.course__grid { stroke: var(--line); stroke-width: 1; }
.course__zero { stroke: var(--line-strong); stroke-width: 1.5; }
.course__today { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.course__actual, .course__forecast { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; }
.course__forecast { stroke-dasharray: 6 4; }
.course__dot { fill: var(--chart-1); }
.course__dot--forecast { fill: var(--surface, #fff); stroke: var(--chart-1); stroke-width: 1.5; }
.course__dot--bad { fill: var(--bad); stroke: var(--bad); }
.course__label { font-size: 10px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Das Änderungsprotokoll: je Änderung die Felder mit vorher → nachher. */
.changes td { vertical-align: top; }
.changes__when { white-space: nowrap; }
.changes__fields { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; font-size: 13px; }
.changes__fields dt { color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.changes__fields dd { margin: 0; overflow-wrap: anywhere; }
.changes__who { display: flex; align-items: flex-start; gap: 8px; }
.changes__who .avatar { flex: none; }
.avatar--system { background: var(--surface-2); color: var(--ink-soft); }
.avatar--picture { object-fit: cover; background: var(--surface-2); }
.avatar--large { width: 44px; height: 44px; font-size: 16px; }
.page-head__person { display: flex; align-items: center; gap: 12px; }
.changes__filters > select, .changes__filters > input { width: auto; flex: 0 1 auto; }

/* Die Verwaltung ({Tabs::ADMINISTRATION}): je Gruppe die Bereiche als Kacheln. */
.admin-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 0 var(--stack); }
.admin-links__item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.admin-links__item:hover { border-color: var(--accent); text-decoration: none; }
.admin-links__ico { width: 18px; text-align: center; color: var(--ink-soft); }

/* Datei-Symbole ({AttachmentsHelper#file_type_icon}): das Kürzel in der Farbe,
   an der man das Programm erkennt. */
:root { --file-pdf: #d93025; --file-word: #2b579a; --file-excel: #217346; --file-powerpoint: #c43e1c;
        --file-image: #8e44ad; --file-mail: #0b7bc1; --file-archive: #7a6a53; --file-xml: #5f6b7a; --file-file: #7c8494; }
.file-icon { width: 20px; height: 22px; flex: none; vertical-align: -6px; }
.file-icon__sheet { fill: var(--surface, #fff); stroke: var(--ink-faint, #9aa0aa); stroke-width: 1.2; stroke-linejoin: round; }
.file-icon__fold { fill: none; stroke: var(--ink-faint, #9aa0aa); stroke-width: 1.2; stroke-linejoin: round; }
.file-icon__band { fill: var(--file-file); }
.file-icon__label { fill: #fff; font: 700 6.2px/1 system-ui, sans-serif; letter-spacing: .02em; }
.file-icon--pdf .file-icon__band { fill: var(--file-pdf); }
.file-icon--word .file-icon__band { fill: var(--file-word); }
.file-icon--excel .file-icon__band { fill: var(--file-excel); }
.file-icon--powerpoint .file-icon__band { fill: var(--file-powerpoint); }
.file-icon--image .file-icon__band { fill: var(--file-image); }
.file-icon--mail .file-icon__band { fill: var(--file-mail); }
.file-icon--archive .file-icon__band { fill: var(--file-archive); }
.file-icon--xml .file-icon__band { fill: var(--file-xml); }
.filelink .file-icon { width: 18px; height: 20px; }
.file-cell { display: inline-flex; align-items: center; gap: 8px; }
td.file-cell { display: table-cell; }
td.file-cell .file-icon { margin-right: 8px; }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.file-list__item { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.file-list__open { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.file-list__open:hover .file-list__name { text-decoration: underline; }
.file-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .file-icon { width: 26px; height: 28px; }
.section-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }

/* Beleg neben den Angaben ({shared/_beside_document}). Unter 1100px steht der
   Beleg darunter — nebeneinander wären beide zu schmal zum Lesen. */
.beside-document { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gutter, 20px); align-items: start; }
/* ⚠️ THE PAGE WIDTH IS LIFTED WHERE A DOCUMENT STANDS BESIDE THE DATA. `.content`
   stops at 1180px for reading; split in two, both halves were squeezed while
   the rest of the window stayed empty. */
.content:has(.beside-document) { max-width: none; }
/* ⚠️ DIE ANGABEN SCROLLEN IN IHRER SPALTE, statt unter den Beleg zu laufen. */
.beside-document__data { min-width: 0; overflow-x: auto; }
.beside-document__file { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.beside-document__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.beside-document__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beside-document__choice { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.beside-document__choice a { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.beside-document__choice a.is-active { border-color: var(--accent); }
.beside-document__page { width: 100%; height: calc(100vh - 140px); min-height: 520px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); object-fit: contain; }
@media (max-width: 1100px) {
  .beside-document { grid-template-columns: 1fr; }
  .beside-document__file { position: static; }
  .beside-document__page { height: 80vh; }
}

/* Debitor | Kreditor auf der Partnerseite — nur, wenn der Partner beides ist. */
.side-switch { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.side-switch__item { padding: 5px 14px; border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-weight: 550; font-size: 13.5px; }
.side-switch__item:hover { color: var(--ink); text-decoration: none; }
.side-switch__item.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.side-switch__item--receivable.is-active { box-shadow: inset 0 -2px 0 var(--receivable); }
.side-switch__item--payable.is-active { box-shadow: inset 0 -2px 0 var(--payable); }

/* Umsatz je Partner ({PartnerTurnoversHelper}): Abweichung farbig, Balken je Partner. */
.change { white-space: nowrap; font-variant-numeric: tabular-nums; }
.change.is-ok, .num.is-ok { color: var(--ok); }
.change.is-bad, .num.is-bad { color: var(--bad); }
.change__arrow { font-size: .75em; }
.change__pct { margin-left: 6px; font-size: .85em; opacity: .85; }
.tile--ok .tile__value { color: var(--ok); }
.tbars { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tbars__row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.tbars__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbars__bars { display: flex; flex-direction: column; gap: 2px; }
.tbars__bar { display: block; height: 9px; border-radius: 3px; min-width: 2px; }
.tbars__bar--receivable, .tbars__dot--receivable { background: var(--receivable); }
.tbars__bar--payable, .tbars__dot--payable { background: var(--payable); }
.tbars__bar--prior, .tbars__dot--prior { background: var(--line-strong, #c9c6d3); height: 5px; }
.tbars__value { font-variant-numeric: tabular-nums; text-align: right; min-width: 90px; }
.tbars__legend { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
.tbars__legend .legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
@media (max-width: 720px) { .tbars__row { grid-template-columns: 1fr auto; } .tbars__bars { grid-column: 1 / -1; grid-row: 2; } }

/* Journal: group rows by period ({Journal::Periods}) and the amount column
   set apart — shaded, with a rule, digits of equal width.
   ⚠️ THE SHADE FOLLOWS THE ROW (2026-10-17: "summenspalte journal hat
   überall das gleiche grau statt itterierend wie die zeile links daneben").
   One fixed background painted over the zebra, so the column stood as one
   grey bar. Now it is the row's own colour, a step darker. */
.journal .journal__amount { border-left: 1px solid var(--line);
  font-variant-numeric: tabular-nums; font-weight: 560; white-space: nowrap; }
.journal tbody td.journal__amount { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.journal tbody tr:nth-child(even) td.journal__amount { background: color-mix(in srgb, var(--ink) 4%, var(--surface-2)); }
.journal tbody tr:hover td.journal__amount { background: color-mix(in srgb, var(--ink) 4%, var(--surface-3)); }
.journal thead .journal__amount { font-weight: 600; }
/* ⚠️ IN THE HOUSE COLOUR, NOT IN ZEBRA GREY (2026-10-17: „die gruppierungen
   … sind genau gleich grau wie zeilen sonst in grau, abheben, evtl. anlehnung
   an corporate colours"). Mixed opaque rather than translucent: the row
   sticks at the top and the bookings run underneath. */
.journal__group th { position: sticky; top: 0; z-index: 1; text-align: left;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-top: 1px solid color-mix(in srgb, var(--accent) 35%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--surface));
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); padding: 9px 12px; }
.journal__group th:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.journal__group th.journal__amount { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); text-align: right; }
.journal__groupcount { margin-left: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-soft); }
.filters__account input { min-width: 220px; }


/* ---------------------------------------------------------------------------
   Belegeingang: Dropzone. Die ganze Fläche ist das Auswahlfeld (ein <label>),
   gezogen wird auf das Formular. */
.dropzone { margin: 0 0 var(--gutter); }
.dropzone__area {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 168px; padding: 28px 16px; text-align: center; cursor: pointer;
  background: var(--surface); border: 2px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--ink-soft); transition: border-color .15s, background-color .15s, transform .15s;
}
.dropzone__area:hover, .dropzone__area:focus-within { border-color: var(--accent); }
.dropzone.is-over .dropzone__area { border-color: var(--accent); background: var(--accent-wash); transform: scale(1.005); }
.dropzone__ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent); margin-bottom: 4px;
}
.dropzone__ico .line-icon { width: 26px; height: 26px; }
.dropzone.is-over .dropzone__ico { background: var(--accent); color: var(--accent-ink); }
.dropzone__title { color: var(--ink); font-size: 15px; }
.dropzone__choose { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dropzone__types { font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); }
.dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.is-busy .dropzone__area { pointer-events: none; opacity: .6; }
.dropzone.is-failed .dropzone__area { border-color: var(--bad); background: var(--bad-wash); }
.dropzone__files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dropzone__files li {
  display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 10px; font-size: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; max-width: 100%;
}
.dropzone__files li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__size { color: var(--ink-faint); }
.dropzone__bar { height: 4px; margin-top: 10px; background: var(--line); border-radius: 2px; overflow: hidden; }
.dropzone__bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ---------------------------------------------------------------------------
   Schnellzugriff: Funktionsknöpfe auf der Übersicht, Stern in der Kopfzeile. */
.quick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
  margin: 0 0 var(--gutter);
}
.quick__item { position: relative; }
.quick__link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%;
  padding: 14px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s;
}
.quick__link:hover, .quick__link:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.quick__ico {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--accent-wash); color: var(--accent); font-size: 17px; line-height: 1;
}
.quick__label { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.quick__item form { position: absolute; top: 6px; right: 6px; margin: 0; }
.quick__remove {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-faint); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.quick__item:hover .quick__remove, .quick__remove:focus-visible { opacity: 1; }
.quick__remove:hover { background: var(--bad-wash); color: var(--bad); }
@media (hover: none) { .quick__remove { opacity: .6; } }

.pin > summary.pin__star { font-size: 17px; line-height: 1; padding: 4px 8px; color: var(--ink-soft); }
.pin > summary.pin__star.is-pinned { color: var(--warn); }
.pin__panel { min-width: 260px; }
.pin__form { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; }
.pin__label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.pin__label input { width: 100%; }

/* Aktivieren: die Markierung an der Position ist ein Knopf in Badge-Form. */
button.badge { border: 0; font-family: inherit; cursor: pointer; }
.badge--quiet { background: transparent; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--line-strong); }
.check-head { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; font-weight: inherit; }

/* Übersicht anpassen: Stern, Tabelle und Programmnamen. */
.pin > summary.pin__star { display: inline-flex; align-items: center; gap: 6px; }
.pin__text { font-size: 12.5px; }
@media (max-width: 760px) { .pin__text { display: none; } }
.shortcut-table input[type=text] { width: 100%; }
.shortcut-table__ico { width: 28px; color: var(--accent); }
.shortcut-table__path { font-size: 12px; color: var(--ink-faint); word-break: break-all; }
.shortcut-table__move { white-space: nowrap; }
.alias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 18px; margin-bottom: var(--gutter); }
.alias-grid__row { display: grid; grid-template-columns: 22px 1fr 96px; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.alias-grid__ico { color: var(--accent); text-align: center; }
.alias-grid__name { font-size: 13px; }
.alias-grid__input { width: 96px; }

/* Übersicht in Tabs; der Verlauf des Handelsregisters als Zeitleiste. */
.dash-head { display: flex; align-items: flex-end; gap: 12px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.dash-head .dash-views { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; }
.dash-head .dash__tools { flex: none; margin: 0 0 6px; }
@media (max-width: 760px) {
  .dash-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .dash-head .dash__tools { justify-content: flex-start; }
}
.dash-views a { font-size: 14px; }
.regline-card h2 { margin-bottom: 8px; }
.regline__month {
  margin: 18px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent);
}
.regline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.regline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background: color-mix(in srgb, var(--accent) 25%, var(--surface)); border-radius: 1px; }
.regline__item { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; padding: 8px 0; }
.regline__item::before { content: ""; position: absolute; left: -17px; top: 13px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.regline__item.is-bad::before { background: var(--bad); box-shadow: none; }
.regline__date { color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 1px; }
.regline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.regline__name { font-weight: 600; }
.regline__source { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.regline__what { margin: 3px 0 0; color: var(--ink-soft); font-size: 13px; }
.regline__item.is-bad .regline__what { color: var(--bad); }
.regline__more { margin: 14px 0 0; }
/* The proof of a document: fingerprints are long and must break anywhere. */
.seal__table td:first-child { width: 220px; color: var(--ink-soft); }
.seal__hash { font-size: 12px; word-break: break-all; }
.dropzone__kind { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 760px) {
  .regline__item { grid-template-columns: 1fr; }
  .timeline__source { margin-left: 0; }
}

/* ---- Filter bars, one look everywhere ------------------------------------
   ⚠️ REQUESTED 2026-10-17: "systemweit die filterkriterienleisten
   modernisieren das sind jetzt teilweise plumpe dropdowns und buttons".
   Two bars had grown apart: `.toolbar` was a grey box of system drop-downs,
   `.filters` a bare row with its own heights. Both are now the same card,
   and every control in them is the same filled, soft-cornered field.
   ⚠️ HERE, AT THE END, ON PURPOSE: these rules override the older bar rules
   above without touching them, so a page that still sets its own sizes keeps
   them. */
.toolbar, .filters {
  --control-h: 34px;
  --control-radius: 9px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 var(--stack); padding: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
/* A bar of buttons only filters nothing; it stays a plain row instead of a
   second card above the filter card. */
.toolbar:not(:has(input:not([type=hidden]), select, .segments)) {
  padding: 0; background: none; border: 0; box-shadow: none;
}
.toolbar input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.toolbar select, .toolbar .button, .toolbar button, .filters__field,
.filters input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .filters select, .filters .button {
  height: var(--control-h); border-radius: var(--control-radius); font-size: 13px;
}
/* The fields: filled, with the border only on hover and focus. */
.toolbar input[type=text], .toolbar input[type=search], .toolbar input[type=date], .toolbar input[type=number],
.toolbar select, .filters input[type=text], .filters input[type=search], .filters input[type=date],
.filters input[type=number], .filters select, .filters__search {
  background-color: var(--surface-3); border: 1px solid transparent; color: var(--ink);
  transition: border-color .12s ease, background-color .12s ease;
}
.toolbar input:hover, .toolbar select:hover, .filters input:hover, .filters select:hover, .filters__search:hover {
  border-color: var(--line-strong);
}
.toolbar input:focus-visible, .toolbar select:focus-visible, .filters input:focus-visible,
.filters select:focus-visible, .filters__search:focus-within {
  background-color: var(--surface); border-color: var(--accent); outline: 2px solid var(--accent-wash); outline-offset: 0;
}
/* The search field inside its icon label carries no frame of its own. */
.filters__search input, .filters__search input:hover, .filters__search input:focus-visible {
  background: transparent; border: 0; outline: 0;
}
/* ⚠️ A DROP-DOWN WITHOUT THE SYSTEM ARROW. The native one looked different
   in every browser and sat off-centre; the chevron is two gradients in the
   ink colour, so it follows the theme without an image per theme. */
.toolbar select, .filters select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 0 32px 0 12px; font-weight: 550;
  background-image: linear-gradient(45deg, transparent 50%, var(--chevron, var(--ink-soft)) 50%),
                    linear-gradient(135deg, var(--chevron, var(--ink-soft)) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
/* ⚠️ A SET FILTER SHOWS. A drop-down with an "all" entry that is not on
   "all" narrows the list; it is tinted so nobody wonders why rows are missing.
   One without an empty entry (a year) always has a value and stays plain. */
.toolbar select:has(option[value=""]):not(:has(option[value=""]:checked)),
.filters select:has(option[value=""]):not(:has(option[value=""]:checked)) {
  --chevron: var(--accent);
  background-color: var(--accent-wash); color: var(--accent); border-color: transparent;
}
/* A search field says what it is with a magnifier. */
.toolbar input[type=search], .filters input[type=search] {
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e8291' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px 50%;
}
.filters__search { border-radius: var(--control-radius); height: var(--control-h); flex-basis: 200px; }
/* ⚠️ THE SEARCH BUTTON BELONGS TO ITS FIELD. Side by side with a gap they
   read as two things; joined they read as one. */
.toolbar input[type=search]:has(+ input[type=submit]), .toolbar input[type=text]:has(+ input[type=submit]) {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.toolbar input[type=search] + input[type=submit], .toolbar input[type=text] + input[type=submit] {
  margin-left: -8px; border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* Quiet buttons in a bar are filled like the fields beside them, so a row
   of field, button and switch reads as one set of controls. */
.toolbar .button--quiet, .toolbar input[type=submit].button--quiet, .toolbar button.button--quiet,
.filters .button--quiet, .filters input[type=submit].button--quiet, .filters button.button--quiet {
  background: var(--surface-3); border: 1px solid transparent; color: var(--ink); font-weight: 550;
}
.toolbar .button--quiet:hover, .toolbar input[type=submit].button--quiet:hover, .toolbar button.button--quiet:hover,
.filters .button--quiet:hover, .filters input[type=submit].button--quiet:hover, .filters button.button--quiet:hover {
  background: var(--surface-3); border-color: var(--line-strong); color: var(--ink);
}
.toolbar input[type=search] + input[type=submit].button--quiet,
.toolbar input[type=text] + input[type=submit].button--quiet { border-left-color: var(--line); }
/* A tick box in a bar is a switch chip: the whole chip is the target, and
   ticked it takes the accent like a set filter. */
.toolbar__check, .filters .toolbar__check {
  height: var(--control-h); padding: 0 12px; border-radius: var(--control-radius);
  background: var(--surface-3); color: var(--ink-soft); cursor: pointer; font-weight: 550;
  transition: background-color .12s ease, color .12s ease;
}
.toolbar__check:hover { color: var(--ink); }
.toolbar__check:has(input:checked) { background: var(--accent-wash); color: var(--accent); }
.toolbar__check input { margin: 0; }
.filters__date, .toolbar .field label { font-weight: 550; }
.filters .chip, .toolbar .chip { height: var(--control-h); border-radius: var(--control-radius); border-color: transparent; background: var(--surface-3); }
.filters .chip.is-active, .toolbar .chip.is-active { background: var(--accent-wash); color: var(--accent); border-color: transparent; }

/* A few short choices side by side instead of a drop-down
   ({FilterHelper#filter_segments}): a track with the chosen one raised. */
.segments {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  height: var(--control-h, 34px); box-sizing: border-box;
  background: var(--surface-3); border-radius: var(--control-radius, 9px);
}
.segments__item {
  display: inline-flex; align-items: center; height: 100%; padding: 0 11px;
  border-radius: calc(var(--control-radius, 9px) - 3px);
  font-size: 13px; font-weight: 550; color: var(--ink-soft); white-space: nowrap; text-decoration: none;
}
.segments__item:hover { color: var(--ink); text-decoration: none; }
.segments__item.is-active {
  background: var(--surface); color: var(--ink); font-weight: 650;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 0 0 1px var(--line);
}
@media (max-width: 700px) {
  .segments { max-width: 100%; overflow-x: auto; }
}
/* The property tab: the property table needs the width, the mortgages next
   to it need little. */
.board-property { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
@media (max-width: 1000px) { .board-property { grid-template-columns: minmax(0, 1fr); } }

/* Loans: the books' facet of a loan in one row, and interest lines set back
   from the principal lines whose running balance they do not change. */
.loan-facet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 4px; }
.loan-facet label { color: var(--ink-soft); font-size: 13px; }
.loan-facet select { max-width: 320px; }
.loan-facet input[type="text"] { width: 90px; }
/* Subscriptions: a new price and a notice, each in one row. */
.subscription-facet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 4px; }
.subscription-facet label { color: var(--ink-soft); font-size: 13px; }
.subscription-facet input { width: auto; }
.subscription-facet input[inputmode="decimal"] { width: 110px; text-align: right; }

/* ── Subscription order mask ──────────────────────────────────────────────
   ⚠️ "KATASTROPHAL DARGESTELLT" WAS THE VERDICT (2026-10-18): seventeen fields
   in a two-column grid, each half the page wide, whether customer or number
   of months. Now: two header cards side by side (customer and invoice,
   terms), each with a grid sized to its content, and below them the
   positions as rows to type through — as in the offer mask. */
.sub-order__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start;
                   margin-bottom: 18px; }
.sub-order__head > .card { margin: 0; }
.sub-order__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.sub-order__head > .card:first-child .sub-order__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub-order__head > .card:last-child .sub-order__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-order__span { grid-column: span 2; }
.sub-order__span3 { grid-column: span 3; }
.sub-order__span4 { grid-column: 1 / -1; }
.sub-order__months input { max-width: 7rem; }
@media (max-width: 1100px) { .sub-order__head { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .sub-order__fields, .sub-order__head > .card .sub-order__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-order__span3 { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .sub-order__fields, .sub-order__head > .card .sub-order__fields { grid-template-columns: 1fr; }
  .sub-order__span { grid-column: auto; }
}

.sub-order__lines { padding-bottom: 10px; }
.sub-lines__scroll { overflow-x: auto; }
.sub-lines { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed;
             border: 0; box-shadow: none; background: transparent; }
.sub-lines col.c-article { width: 6.6rem; }
.sub-lines col.c-qty { width: 4.6rem; }
.sub-lines col.c-unit { width: 4.6rem; }
.sub-lines col.c-price { width: 7rem; }
.sub-lines col.c-disc { width: 4.4rem; }
.sub-lines col.c-tax { width: 5.4rem; }
.sub-lines col.c-date { width: 9.6rem; }
.sub-lines col.c-amount { width: 7rem; }
.sub-lines col.c-tools { width: 4.4rem; }
.sub-lines thead th { position: static; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
                      font-weight: 600; padding: .3rem .3rem .45rem; border-bottom: 1px solid var(--line-strong);
                      text-align: left; background: none; }
.sub-lines thead th.num { text-align: right; }
.sub-lines tbody tr, .sub-lines tbody tr:nth-child(even), .sub-lines tbody tr:hover { background: none; }
.sub-lines td { padding: .16rem .2rem; vertical-align: middle; border: 0; }
.sub-line + .sub-line td { border-top: 1px solid var(--line); }
.sub-lines input {
  width: 100%; font: inherit; font-size: .9rem; padding: .32rem .42rem; border: 1px solid var(--line);
  border-radius: 4px; background: var(--surface-2); color: inherit; }
.sub-lines input:hover { border-color: var(--line-strong); }
.sub-lines input:focus { outline: none; background: var(--surface-3); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.sub-lines .num input { text-align: right; font-variant-numeric: tabular-nums; }
.sub-line.has-errors input { border-color: var(--bad); }
.sub-line__number { font-variant-numeric: tabular-nums; }
.sub-line__number.is-unknown { border-color: var(--bad) !important; }
.sub-line__price { display: block; text-align: right; padding: .32rem .42rem; font-variant-numeric: tabular-nums; }
.sub-line__amount { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.sub-line__tools { white-space: nowrap; text-align: right; }
.sub-line__open, .sub-line__remove { display: inline-block; width: 1.5rem; text-align: center; color: var(--ink-faint);
                                     background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.sub-line__open:hover, .sub-line__remove:hover { color: var(--ink); }
.sub-lines__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
                   padding: 10px .2rem 0; }
.sub-lines__total { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sub-lines__total strong { color: var(--ink); margin-left: 8px; }
.loan-assign__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.loan-assign__actions select { max-width: 360px; }
.loan-lines__interest td { color: var(--ink-soft); }
.loan-lines__interest td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
a.loan-ref { white-space: nowrap; }

/* Offer positions: the add menu beside a row, the picture and fields in its
   details, the acceptance choices. */
.offer-row__add { position: relative; display: inline-block; }
.offer-row__add > summary { list-style: none; cursor: pointer; width: 24px; height: 24px; line-height: 22px; text-align: center;
  border-radius: 6px; color: var(--ink-soft); }
.offer-row__add > summary::-webkit-details-marker { display: none; }
.offer-row__add > summary:hover, .offer-row__add[open] > summary { background: var(--surface-2); color: var(--ink); }
.offer-row__menu { position: absolute; right: 0; top: 26px; z-index: 20; min-width: 180px; padding: 4px; display: grid;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.offer-row__menu button { text-align: left; padding: 6px 10px; border: 0; background: none; border-radius: 6px; font: inherit; color: var(--ink); cursor: pointer; }
.offer-row__menu button:hover { background: var(--surface-2); }
/* Lines selected by their handle, and the bar that edits them together. */
.offer-row.is-selected .offer-row__main td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.offer-row.is-selected .offer-row__handle { color: var(--accent); }
.offer-bulk { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; padding: 8px 10px; margin: 0 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.offer-bulk[hidden] { display: none; }
.offer-bulk > strong { align-self: center; margin-right: 4px; }
.offer-bulk__field { display: grid; gap: 2px; font-size: 12px; color: var(--ink-soft); }
.offer-bulk__field input { width: 7rem; }
.offer-bulk__field input[type="date"] { width: 9.5rem; }
.offer-details__fields { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.offer-details__fields:empty { display: none; }
.offer-details__image { display: flex; gap: 12px; align-items: flex-start; }
.offer-details__thumb, .offer-sheet__thumb { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); }
.offer-sheet__thumb { width: 48px; height: 48px; margin: 4px 0; }
.offer-accept__group { margin-bottom: 16px; display: grid; gap: 4px; }
.offer-accept__group legend { font-weight: 600; padding: 0 4px; }
.offer-accept__choice { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 4px;
  border-bottom: 1px solid var(--line); }
.offer-accept__choice:last-child { border-bottom: 0; }

/* Contract documents of an offer ({Offer#terms_for_sheet}). */
.offer-terms { padding: 14px 16px; }
.offer-editor__aside > .offer-terms { margin-top: 12px; }
.offer-terms__title { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
                      margin: 0 0 8px; }
.offer-terms__item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.offer-terms__item input { margin: 0; }
.offer-terms__item .badge { margin-left: auto; }
.terms-list { margin: 4px 0 0; padding-left: 18px; }

/* Disputed payables, apart from the open ones ({OpenItem.counted}). */
.op-disputed { margin-top: 18px; }
.op-disputed h2 .detail { font-weight: 500; margin-left: 8px; }
form.inline-form { display: inline-block; margin: 0 0 0 6px; }

/* This year beside the year before ({ChartsHelper#paired_bars}). */
.chart__pair { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.chart__pair .chart__seg { flex: 1; max-width: 14px; }
.num .is-good { color: var(--ok); }

/* ⚠️ The document's subject as its title, edited in place (2026-10-18). */
.title-form { display: flex; gap: .5rem; align-items: center; margin: 0 0 .25rem; }
.row-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 12px; }
.row-form select { width: auto; min-width: 220px; }
.title-input { flex: 1; min-width: 0; font: inherit; font-size: 1.6rem; font-weight: 600; line-height: 1.25;
               padding: .2rem .4rem; margin-left: -.4rem; border: 1px solid transparent; border-radius: var(--radius);
               background: transparent; color: var(--ink); }
.title-input:hover { border-color: var(--line); }
.title-input:focus { border-color: var(--accent); outline: none; background: var(--surface); }

/* The offer funnel ({Reports::SalesPipeline}): a centred bar per stage, its
   width the share of the widest, cut to a trapezoid. */
.funnel { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; container-type: inline-size; }
.funnel__row { display: grid; grid-template-columns: minmax(7em, 10em) 1fr minmax(6em, auto); align-items: center; gap: 12px;
               padding: 3px 6px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; font-size: 13px; }
a.funnel__row:hover { background: var(--accent-wash); }
.funnel__stage.is-active .funnel__row { background: var(--accent-wash); font-weight: 600; }
.funnel__count { color: var(--ink-faint); font-size: 12px; margin-left: 4px; }
.funnel__track { display: flex; justify-content: center; }
.funnel__bar { display: block; height: 22px; width: calc(12% + 88% * var(--w, 0)); background: var(--accent);
               clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%); }
.funnel__stage:nth-child(2) .funnel__bar { opacity: .8; }
.funnel__stage:nth-child(3) .funnel__bar { opacity: .64; }
.funnel__value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pipeline { margin-bottom: var(--stack); }
.pipeline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 10px; }
.pipeline__head h2 { margin: 0; }
.pipeline__figures { color: var(--ink-soft); font-size: 13px; }
.pipeline__head .tabs--inline { margin: 0 0 0 auto; border-bottom: 0; }
/* In a narrow card the bar takes a line of its own below name and value. */
@container (max-width: 460px) {
  .funnel__row { grid-template-columns: 1fr auto; gap: 2px 8px; }
  .funnel__track { grid-column: 1 / -1; grid-row: 2; }
  .funnel__bar { height: 16px; }
}
@media (max-width: 600px) { .pipeline__head .tabs--inline { margin-left: 0; } }

/* Subscription volume ({Reports::SubscriptionVolume}): the course beside the
   comparison, one below the other when narrow. */
.subscription-volume__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--gutter); align-items: start; }
.subscription-volume td:first-child { white-space: nowrap; }
.subscription-volume__delta { display: block; font-size: 11px; color: var(--ink-faint); }