/* kf.css — Stilvorlage Klimafreunde Buchhaltung
   Eine Datei für die ganze App. Vorlagen benutzen NUR diese Klassen,
   kein style-Attribut, keine seiteneigenen Regeln. */

:root {
  --ink: #17171a;
  --ink-2: #55544e;
  --mut: #7d7c74;
  --faint: #b0aea5;
  --line: #ecebe7;
  --line-2: #e4e2dc;
  --hover: #f6f5f2;
  --ground: #ffffff;      /* Arbeitsflaeche */
  --grund: #f7f5f1;       /* warmer Seitengrund, traegt die Flaeche */
  --sunk: #faf9f6;
  --akzent: #2f6fc4;      /* Klarblau - Balken, Hauptknopf, Zaehler */
  --akzent-hell: #e9f1fb; /* Grund des aktiven Menuepunkts */
  --amber: #8a6a17;
  --amber-line: #d1a94a;
  --amber-bg: #fdfbf5;
  --green: #2f6b4f;
  --green-bg: #f1f6f2;
  --red: #a33b30;
  --blue: #3d5a8a;
  --radius: 4px;
  --row: 36px;
  --sidebar: 250px;
}

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

body {
  margin: 0;
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

.n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Gerüst ---------- */

.app { display: flex; flex-direction: column; min-height: 100vh; }

.kopfleiste {
  height: 54px; flex: none;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 0 18px;
}
.kopfleiste__marke { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; }
.kopfleiste__rechts { display: flex; align-items: center; gap: 16px; }
.kopfleiste__abruf { font-size: 11.5px; color: var(--faint); }
.kopfleiste__nutzer { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex: none;
}

.rumpf { flex: 1; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 0; }

/* ---------- Seitenleiste ---------- */

.nav { border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 20px; }
.nav__gruppe { display: flex; flex-direction: column; gap: 2px; }
.nav__titel {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); padding: 0 11px 4px;
}
.nav__summe { font-size: 11.5px; color: var(--faint); padding: 0 11px 9px; }
.nav__trenner { height: 1px; background: var(--line); margin: 0 11px; }
.nav__punkt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px; border-radius: 9px;
  color: var(--ink-2); text-decoration: none;
}
.nav__punkt:hover { background: var(--hover); }
.nav__punkt--aktiv { background: #f2f1ed; color: var(--ink); font-weight: 600; }
.nav__label { display: flex; align-items: center; gap: 11px; font-size: 13.5px; }
.nav__zahl { font-size: 12.5px; color: var(--faint); }
.nav__punkt--aktiv .nav__zahl { color: var(--ink); font-weight: 600; }
.nav__zahl--warn { color: var(--amber); font-weight: 600; }
.nav__zahl--rot { color: var(--red); font-weight: 600; }
.nav svg { flex: none; width: 17px; height: 17px; }

/* ---------- Seite ---------- */

.seite { padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.brotkrumen { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.brotkrumen__hier { color: var(--ink-2); }

.seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.seitenkopf__text { display: flex; flex-direction: column; gap: 5px; }
.seitenkopf h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.seitenkopf__unter { font-size: 12.5px; color: var(--mut); }
.seitenkopf__aktionen { display: flex; align-items: center; gap: 8px; }

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

.reiter { display: flex; align-items: center; gap: 6px; }
.reiter__punkt {
  font-size: 13.5px; color: var(--mut);
  padding: 6px 12px; border-radius: var(--radius);
  text-decoration: none;
}
.reiter__punkt--aktiv { background: var(--hover); color: var(--ink); font-weight: 500; }
.reiter__zahl { color: var(--faint); }

/* ---------- Tabelle ---------- */

.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  font-size: 11.5px; font-weight: 400; color: var(--faint);
  text-align: left; padding: 0 6px 9px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.tabelle th a { color: inherit; text-decoration: none; }
.tabelle th.sortiert { color: var(--ink-2); }
.tabelle td { padding: 11px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelle tbody tr { cursor: pointer; }
.tabelle tbody tr:hover { background: var(--hover); }
.zelle-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zelle-mut { color: var(--mut); }
.zweitzeile { display: block; font-size: 13px; color: var(--mut); margin-top: 3px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; white-space: nowrap; }
.punkt { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--mut); }
.punkt--pruef { background: var(--blue); }
.punkt--sperr { background: var(--red); }
.punkt--ok { background: var(--green); }
.punkt--warn { background: var(--amber); }

/* ---------- Formular ---------- */

.feldgruppe {
  display: grid;
  grid-template-columns: 220px 340px;
  column-gap: 16px;
  row-gap: 10px;
  align-items: center;
}
.feldgruppe > label { font-size: 13px; color: var(--mut); }
.feldgruppe > input,
.feldgruppe > select,
.feldgruppe > textarea,
.feldgruppe > .feld {
  width: 100%;
  height: var(--row);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 0 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--ground);
}
.feldgruppe > textarea { height: auto; min-height: 84px; padding: 9px 10px; }
.feld--erkannt { background: var(--green-bg); border-color: var(--green); }
.feld--unsicher { background: var(--amber-bg); border-color: var(--amber-line); }
.feld--zahl { text-align: right; font-variant-numeric: tabular-nums; }
.feld-hinweis { grid-column: 2; font-size: 12px; color: var(--amber); margin-top: -3px; }
.feld-neben { display: flex; align-items: center; gap: 6px; }
.feld-neben > input, .feld-neben > .feld { flex: 1; }
.feld-knopf {
  width: 30px; height: var(--row); flex: none;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ground); color: var(--mut);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer;
}

.abschnitt { display: flex; flex-direction: column; gap: 12px; }
.abschnitt__kopf { display: flex; align-items: center; gap: 12px; }
.abschnitt__titel {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.abschnitt__linie { flex: 1; height: 1px; background: var(--line); }

.legende { display: flex; align-items: center; gap: 18px; font-size: 12px; color: var(--mut); }
.legende span { display: flex; align-items: center; gap: 7px; }
.legende i { width: 22px; height: 12px; border-radius: 2px; border: 1px solid var(--line-2); }
.legende i.erkannt { background: var(--green-bg); border-color: var(--green); }
.legende i.unsicher { background: var(--amber-bg); border-color: var(--amber-line); }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 12.5px; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ground); padding: 7px 12px;
  cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--hover); }
.knopf--primaer { background: var(--ink); border-color: var(--ink); color: #fff; padding: 8px 16px; font-weight: 500; }
.knopf--primaer:hover { background: #000; }
.knopf--gefahr { color: var(--red); border-color: var(--line-2); }

/* ---------- Hinweisleiste ---------- */

.hinweis {
  border: 1px solid var(--line-2); border-left: 3px solid var(--amber-line);
  border-radius: var(--radius); background: var(--sunk);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.hinweis__titel { font-size: 13.5px; font-weight: 600; color: var(--amber); }
.hinweis__text { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ---------- Leerer Zustand ---------- */

.leer {
  border: 1px dashed var(--line-2); border-radius: 6px;
  background: var(--sunk); padding: 40px 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: 620px;
}
.leer__titel { font-size: 15px; font-weight: 600; }
.leer__text { font-size: 13px; color: var(--mut); line-height: 1.55; }
.leer .knopf { margin-top: 6px; }

/* ---------- Fußzeile Stapelbearbeitung ---------- */

.fusszeile {
  border-top: 1px solid var(--line);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ground);
}
.fusszeile__zaehler { font-size: 12.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.fusszeile__aktionen { display: flex; align-items: center; gap: 8px; }

/* ---------- Belegansicht ---------- */

.beleg { display: flex; gap: 20px; min-height: 0; }
.beleg__vorschau { width: 400px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.beleg__blatt {
  flex: 1; border: 1px solid var(--line); border-radius: 6px;
  background: var(--sunk); display: flex; align-items: center; justify-content: center; padding: 16px;
}
.beleg__blatt img { max-width: 100%; max-height: 100%; background: #fff; border: 1px solid var(--line-2); }
.beleg__erfassung { width: 600px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.beleg__verlauf { width: 84px; flex: none; border-left: 1px solid var(--line); padding-left: 14px; }
.beleg__verlauf li { list-style: none; font-size: 11.5px; color: var(--mut); line-height: 1.45; margin-bottom: 10px; }
.beleg__verlauf ul { margin: 0; padding: 0; }
.blaettern {
  width: 30px; height: 44px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ground); color: var(--mut);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}


/* ---------- Tiefe und Akzent (Nachtrag) ----------
   Der warme Grund traegt die weisse Arbeitsflaeche. Das ergibt
   Tiefe ohne Schatten. Blau erscheint an genau drei Stellen:
   aktiver Menuepunkt, Hauptknopf, hervorgehobene Zahl. */

body { background: var(--grund); }

.kopfleiste { background: var(--ground); }

.nav { background: var(--grund); }

/* aktiver Menuepunkt: hellblauer Grund, blauer Balken links */
.nav__punkt--aktiv {
  background: var(--akzent-hell);
  border-radius: 0 6px 6px 0;
  border-left: 2px solid var(--akzent);
  padding-left: 9px;
  color: var(--akzent);
}
.nav__punkt--aktiv .nav__zahl { color: var(--akzent); }

/* die Arbeitsflaeche liegt sichtbar auf dem Grund */
.seite {
  background: var(--ground);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  margin: 18px 20px;
  padding: 24px 26px 30px;
}

/* Groessenhierarchie: die wichtige Zahl fuehrt das Auge */
.kennzahl {
  display: flex; align-items: baseline; gap: 8px;
}
.kennzahl__wert {
  font-size: 27px; font-weight: 700; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.kennzahl__einheit { font-size: 15px; font-weight: 600; color: var(--mut); }
.kennzahl__unter { font-size: 12px; color: var(--mut); }

/* ruhigere Zeilen */
.tabelle td { padding: 13px 6px; }

.knopf--primaer {
  background: var(--akzent);
  border-color: var(--akzent);
}
.knopf--primaer:hover { background: #265ba6; }

/* Verweise und Sortierpfeile in der Akzentfarbe */
a.verweis, .tabelle th.sortiert { color: var(--akzent); }

/* =====================================================================
   WIEDER ANGEHAENGT 29.08.2026 — die Ergaenzungen aus dem vorigen
   Durchgang, die in der neuen Fassung des Auftraggebers nicht
   enthalten sind. Sie stehen NACH dem Nachtrag, damit dessen
   Tiefe-, Groessen- und Akzentregeln gelten.
   Bewusst NICHT wieder angehaengt: .kennzahl und .kennzahl__wert -
   die kommen jetzt aus dem Nachtrag (Groessenhierarchie).
   ERGÄNZUNGEN 29.08.2026 — nur, was beim Bauen gefehlt hat.
   Der Teil darüber ist die unveränderte Stilvorlage des Auftraggebers.
   Jede Ergänzung steht mit einem Satz Grund dabei.
   ===================================================================== */

/* Schrift selbst ausliefern. Die Vorlage lädt sie von Google — eine
   Buchhaltung meldet beim Seitenaufruf aber nicht die Adressen ihrer
   Nutzer an Dritte (GESTALTUNG.md). Die Dateien liegen im Projekt. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/oeffentlich/schrift/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/oeffentlich/schrift/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Verweise erben Farbe, kein Unterstrich; sichtbarer Tastaturfokus —
   ohne ihn ist die Anwendung mit der Tastatur nicht bedienbar. */
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Seitenleiste bleibt beim Scrollen stehen — bei 87 Zeilen wäre die
   Navigation sonst nach dem ersten Scrollen weg. */
.nav { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }

/* Vier Kennzahlen über einer Liste (Rechnungseingang der Vorlage). */
.kennzahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.kennzahl__label { font-size: 12.5px; color: var(--mut); }
.kennzahl__wert--rot { color: var(--red); }
.kennzahl__wert--grau { color: var(--faint); }

/* Suche: als Unterstrich-Zeile (Rechnungseingang) und als Kasten
   (Alle Rechnungen) — beide Formen stehen so in der Vorlage. */
.suchzeile {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0 7px 2px; border: none; border-bottom: 1px solid var(--line);
  width: 206px; font-size: 13.5px; font-family: inherit; color: var(--ink); background: none;
}
.suchzeile::placeholder { color: var(--faint); }
.suchkasten {
  display: flex; align-items: center; gap: 10px;
  padding: 0 13px; height: 38px; border: 1px solid var(--line-2); border-radius: 8px; flex-grow: 1;
}
.suchkasten input {
  flex: 1; border: none; background: none; font-size: 13.5px; font-family: inherit; color: var(--ink); height: 100%;
}
.suchkasten input::placeholder { color: var(--faint); }
.suchkasten input:focus, .suchzeile:focus { outline: none; }

/* Filterknöpfe der Ansicht „Alle Rechnungen" (Monat, Status, …). */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--line-2); color: var(--ink); background: var(--ground);
  font-family: inherit; cursor: pointer;
}
.chip--aktiv { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--still { border: none; color: var(--faint); }
.chipzeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Summenzeile unter den Filtern („78 Rechnungen · 243.108,40 € gesamt …"). */
.summenzeile {
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.summenzeile b { font-weight: 600; }
.summenzeile .zusatz { color: var(--faint); font-weight: 400; }
.summenzeile--gruen { color: var(--green); }
.summenzeile--warn { color: var(--amber); }

/* Echte Ankreuzfelder im 15-px-Kasten der Vorlage. */
.haken { width: 15px; height: 15px; accent-color: var(--ink); cursor: pointer; margin: 0; }
.zelle-haken { width: 28px; }
.tabelle tr.gewaehlt { background: var(--sunk); }

/* Sortierpfeil im Spaltenkopf: blass, in der aktiven Spalte kräftig. */
.pfeil { font-size: 9px; opacity: .32; }
th.sortiert .pfeil { opacity: 1; }

/* Aufgabenzeile: 3-px-Farbbalken, Satz + Grund, Betrag, Handlungswort. */
.aufgabe {
  display: grid; grid-template-columns: 3px minmax(0, 1fr) 130px 190px;
  align-items: center; gap: 18px; min-height: 66px;
  border-top: 1px solid var(--line); color: inherit;
}
.aufgabe:first-child { border-top: none; }
.aufgabenliste { display: flex; flex-direction: column; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.aufgabenliste .aufgabe:first-child { border-top: none; }
.balken { width: 3px; height: 34px; border-radius: 2px; background: #c9c7bf; }
.balken--rot { background: var(--red); }
.balken--warn { background: var(--amber); }
.balken--blau { background: var(--blue); }
.balken--gruen { background: var(--green); }
.aufgabe__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aufgabe__satz { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.aufgabe__grund { font-size: 12.5px; color: var(--mut); }
.aufgabe__wert { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.aufgabe__tat { justify-self: end; }

/* Erklärender Randtext mit 2-px-Balken (steht unter fast jeder Liste). */
.notiz { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; }
.notiz--oben { border-top: 1px solid var(--line); }
.notiz__balken { width: 2px; min-height: 30px; align-self: stretch; background: #c9c7bf; flex: none; }
.notiz__balken--blau { background: var(--blue); }
.notiz__balken--gruen { background: var(--green); }
.notiz__balken--warn { background: var(--amber); }
.notiz__text { font-size: 12.5px; line-height: 1.55; color: var(--mut); }
.notiz__text b { font-weight: 600; color: var(--ink); }

/* Liste links, Seitenteil rechts (Zahlungsmodul 300 px, Transit 372 px). */
.geteilt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.geteilt--breit { grid-template-columns: minmax(0, 1fr) 372px; }
.seitenteil { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.seitenteil__block { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.seitenteil__block:first-child { border-top: none; padding-top: 0; }
.seitenteil__gross { font-size: 30px; font-weight: 600; letter-spacing: -0.038em; line-height: 1; font-variant-numeric: tabular-nums; }
.seitenteil__reihe { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; }
.seitenteil__reihe b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.seitenteil__reihe b.rot { color: var(--red); }
.seitenteil__label { color: var(--mut); }

/* Zahlungsavis-Vorschau: die Karte, wie die Mail beim Lieferanten ankommt. */
.avis { border: 1px solid var(--line-2); border-radius: 10px; padding: 17px 19px; display: flex; flex-direction: column; gap: 12px; }
.avis__kopf { display: flex; flex-direction: column; gap: 4px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.avis__meta { font-size: 12px; color: var(--faint); }
.avis__betreff { font-size: 13.5px; font-weight: 600; padding-top: 3px; }
.avis__text { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.avis__posten { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px; background: var(--sunk); border-radius: 7px; }
.avis__zeile { display: flex; justify-content: space-between; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.avis__zeile--summe { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 600; }

/* Lieferanten: Auswahlliste links, Detail rechts an einer Trennlinie. */
.wahl { width: 320px; flex: none; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.wahlliste { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.wahl__punkt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius); color: inherit;
}
.wahl__punkt:hover { background: var(--hover); }
.wahl__punkt--aktiv { background: var(--hover); }
.wahl__punkt--aktiv .wahl__name { font-weight: 600; }
.wahl__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wahl__name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wahl__unter { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.wahl__wert { font-size: 12.5px; color: var(--ink-2); flex: none; font-variant-numeric: tabular-nums; }
.nebeneinander { display: flex; gap: 26px; min-height: 0; align-items: flex-start; }
.detailspalte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--line); padding-left: 26px; }

/* Kleine Namenskreise in Listen („Kümmert sich": TR, SK, YZ). */
.avatar--klein { width: 19px; height: 19px; font-size: 8.5px; font-weight: 700; background: var(--blue); }
.avatar--leer { background: #dedcd5; color: var(--mut); }
.person { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--faint); }

/* Wortfarbe des Status, wo die Vorlage das Wort selbst einfärbt. */
.status--rot { color: var(--red); }
.status--warn { color: var(--amber); }
.status--ok { color: var(--green); }
.status--blau { color: var(--blue); }
.status--streit { color: #8a4a8c; }
.punkt--streit { background: var(--red); }
.punkt--frei { background: #a3a199; }

/* Auswahlfeld: eigener Pfeil als Datenadresse — nichts wird nachgeladen. */
.feldgruppe select, select.feld {
  appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d7c74' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* Eingaben im .feld-neben (Betrag+Währung, Skonto %+Tage) brauchen dieselbe
   Form wie direkte Kinder der .feldgruppe. */
.feld-neben > input, .feld-neben > select {
  height: var(--row); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 0 10px; font-size: 14px; font-family: inherit; color: var(--ink); background: var(--ground);
  min-width: 0;
}
.feld-neben > .kurz { flex: none; width: 92px; }

/* Beleg-Vorschau: das eingebettete PDF füllt das Blatt. */
.beleg__blatt { min-height: 420px; height: calc(100vh - 330px); overflow: hidden; }
.beleg__blatt iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.beleg__leiste { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--mut); }
.beleg__mitte { flex: 1; display: flex; align-items: stretch; gap: 8px; min-height: 0; }
.beleg__verlauf ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* Untereinträge im Transit: die einzelnen Rechnungen eines Lieferanten. */
.unterliste { display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px 26px; font-size: 12.5px; color: var(--mut); font-variant-numeric: tabular-nums; }

/* Upload: Raster der wartenden Dokumente. */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.kachel { display: flex; flex-direction: column; gap: 6px; }
.kachel__bild { height: 176px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--ground); overflow: hidden; }
.kachel__bild iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.kachel__name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel__unter { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ablage { border: 1px dashed var(--line-2); border-radius: 6px; background: var(--sunk); padding: 28px 20px; text-align: center; }
.ablage p { margin: 6px 0 14px; font-size: 13px; color: var(--mut); }

/* Anmeldung und Einladung: schmale Mitte ohne Seitenleiste. */
.tor { max-width: 380px; margin: 96px auto; padding: 0 24px; display: flex; flex-direction: column; gap: 14px; }
.tor__marke { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }
.tor h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.tor__unter { font-size: 12.5px; color: var(--mut); }
.tor label { display: block; font-size: 13px; color: var(--mut); margin-bottom: 5px; }
.tor input {
  width: 100%; height: var(--row); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 0 10px; font-size: 14px; font-family: inherit;
}
.tor__fehler { border: 1px solid var(--red); border-radius: var(--radius); padding: 9px 12px; font-size: 13px; color: var(--red); }

/* Einladungslink: einmal sichtbar, bequem markierbar. */
.link-kasten {
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  word-break: break-all; user-select: all; background: var(--ground);
}

/* Aufklappbarer Bereich (Löschen, Formulare zum Anlegen). */
details.klapp > summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--mut); }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::before { content: '+ '; }
details.klapp[open] > summary::before { content: '– '; }
details.klapp > summary:hover { color: var(--ink); }
details.klapp > .klapp__inhalt { padding-top: 14px; }

/* Begleit-E-Mail: zugeklappt eine Zeile, kein HTML, keine externen Bilder. */
details.mail { border-top: 1px solid var(--line); padding-top: 12px; }
details.mail > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; }
details.mail > summary::-webkit-details-marker { display: none; }
details.mail > summary::before { content: '▸'; font-size: 9px; color: var(--mut); }
details.mail[open] > summary::before { content: '▾'; }
.mail__titel { font-size: 13px; font-weight: 600; flex: none; }
.mail__zeile { font-size: 12px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__kopf { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; margin: 12px 0; }
.mail__kopf dt { font-size: 12.5px; color: var(--mut); }
.mail__kopf dd { margin: 0; font-size: 12.5px; }
.mail__text { white-space: pre-wrap; max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 12px 0; }
details.mailrest > summary { cursor: pointer; font-size: 12px; color: var(--mut); list-style: none; }
details.mailrest > summary::-webkit-details-marker { display: none; }
.anhang { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.anhang .rechts { margin-left: auto; font-size: 12px; color: var(--mut); }

/* Symbole ausserhalb der Seitenleiste (Suche, Blaettern) schrumpfen nicht. */
svg[aria-hidden] { flex: none; }

/* Filter der Ansicht "Alle Rechnungen" als Auswahlfelder in Chip-Form. */
select.chip {
  appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2317171a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
select.chip--aktiv {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Fester Wert in Feldform (zugeordneter Lieferant) und die Trefferliste
   der Lieferantensuche. */
.feld-neben { position: relative; }
.feld-neben > .feld {
  display: flex; align-items: center; height: var(--row);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 0 10px; font-size: 14px; background: var(--ground); min-width: 0;
  overflow: hidden; white-space: nowrap;
}
.treffer {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(var(--row) + 4px);
  background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .07); max-height: 320px; overflow: auto;
}
.treffer__zeile { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.treffer__zeile:last-child { border-bottom: none; }
.treffer__zeile:hover { background: var(--hover); }
.treffer__name { font-size: 13.5px; font-weight: 500; }
.treffer__unter { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Rohtextzeile aus der Mahnung neben einem leeren Betragsfeld: wortwoertlich
   und unveraendert, klein und gedaempft. Wer nachtraegt, tippt ab, statt im
   PDF zu suchen (Rechenwerk 29.08.2026). */
.rohtext {
  grid-column: 2; display: flex; flex-direction: column; gap: 2px;
  margin-top: -2px; padding: 9px 11px;
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius);
}
.rohtext__kopf { font-size: 11.5px; color: var(--mut); margin-bottom: 3px; }
.rohtext__zeile {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ink-2); white-space: pre-wrap;
}
.rohtext .knopf { align-self: flex-start; margin-top: 8px; }

/* Die Zellen des Kennzahlen-Rasters: Beschriftung ueber der Zahl.
   Beruehrt .kennzahl selbst nicht - das ist die Zeile aus dem
   Nachtrag (grosse Zahl + Einheit auf gemeinsamer Grundlinie). */
.kennzahlen > * { display: flex; flex-direction: column; gap: 6px; }

/* Sammelaktion "strittig / zurueckstellen" unter den Listen: zwei Spalten,
   damit die Pflichtangabe (Grund) und die Frist nebeneinander stehen und
   niemand die zweite uebersieht. */
.klapp--sammel { margin-top: 14px; }
.sammelzustand { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .sammelzustand { grid-template-columns: 1fr; } }

/* Anklickbare Kennzahl (Rechnungseingang: "faellig in 3 Tagen",
   "tatsaechlich ueberfaellig"). Sieht aus wie die Zahl daneben, fuehrt
   aber zur Liste dahinter - eine Zahl ohne Weg zu ihren Belegen ist eine
   Behauptung. */
a.kennzahl { text-decoration: none; color: inherit; }
a.kennzahl:hover .kennzahl__wert { text-decoration: underline; text-underline-offset: 3px; }

/* Benutzermenue oben rechts. Als <details>, damit es ohne Javascript
   funktioniert - "Abmelden" darf an keiner Skriptdatei haengen. */
.nutzermenue { position: relative; }
.nutzermenue > summary { cursor: pointer; list-style: none; }
.nutzermenue > summary::-webkit-details-marker { display: none; }
.nutzermenue__blatt {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px;
  background: var(--ground); border: 1px solid var(--line-2); border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0,0,0,.09); padding: 6px; display: flex; flex-direction: column;
}
.nutzermenue__kopf { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.nutzermenue__name { font-size: 13.5px; font-weight: 600; }
.nutzermenue__unter { font-size: 11.5px; color: var(--faint); }
.nutzermenue__punkt {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius);
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.nutzermenue__punkt:hover { background: var(--hover); color: var(--ink); }
.nutzermenue__punkt--gefahr:hover { color: var(--red); }

/* Darstellung je Benutzer: nur Schriftgroesse und Zeilenhoehe. Das Raster der
   Erfassung (220/340) bleibt unberuehrt - sonst zerfaellt die Maske. */
body.dichte--kompakt { font-size: 13px; }
body.dichte--kompakt .tabelle td { padding: 7px 6px; }
body.dichte--kompakt { --row: 32px; }
body.dichte--gross { font-size: 15.5px; }
body.dichte--gross .tabelle td { padding: 15px 6px; }
body.dichte--gross { --row: 40px; }
body.leiste-zu .rumpf { grid-template-columns: 0 minmax(0, 1fr); }
body.leiste-zu .nav { display: none; }

/* Hinweiskasten auf der Anmeldeseite (abgelaufene Sitzung). */
.tor__hinweis {
  border-left: 3px solid var(--amber-line); background: var(--amber-bg);
  padding: 10px 12px; border-radius: var(--radius); font-size: 13px; color: var(--ink-2);
}

/* Hinterlegte Unterschrift im eigenen Profil. */
.unterschrift { display: flex; flex-direction: column; gap: 6px; }
.unterschrift__bild { max-width: 320px; max-height: 120px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; padding: 6px; }

/* Auswahlliste im eigenen Profil: Knopf und Beschriftung nebeneinander.
   Nicht .wahl benutzen - das ist die 320px breite Spalte der Listenseiten. */
.optionsliste { display: flex; flex-direction: column; gap: 8px; }
.option { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.option input { margin: 0; flex: none; }
.option--getrennt { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }

/* =====================================================================
   BREITE (29.08.2026). Die Deckelung bei .seite galt fuer JEDE Seite und
   liess auf einem breiten Bildschirm alles in der Mitte stehen. Sie ist
   ersatzlos gestrichen: der Inhalt nutzt die Fensterbreite, der
   Innenabstand bleibt.

   Nur FLIESSTEXT bekommt eine Zeilenlaengenbegrenzung - ein Satz ueber
   den ganzen Bildschirm ist unlesbar. Tabellen, Formulare und die
   Belegansicht bekommen sie NICHT.
   ===================================================================== */
.seitenkopf__unter, .notiz__text, .leer__text, .feld-hinweis, .hinweis__text {
  max-width: 70ch;
}

/* Tabellen nutzen die volle Breite. Den zusaetzlichen Platz bekommen die
   Text-Spalten (Lieferant, Grund); die Zahlenspalten bleiben so schmal wie
   ihr Inhalt, sonst wandern die Betraege weit vom Namen weg. Kein Umbruch
   mehr bei "REISSER HAUSTECHNIK GmbH". */
.tabelle { table-layout: auto; }
.tabelle td.zelle-zahl, .tabelle th.zelle-zahl { width: 1%; white-space: nowrap; }
.tabelle td.zelle-haken, .tabelle th.zelle-haken { width: 1%; }
.tabelle td a { overflow-wrap: normal; }

/* Belegansicht: nur die Vorschau waechst mit. Die Erfassung bleibt bei
   600 px, sonst zerfaellt das Raster 220/340; der Verlauf bleibt schmal. */
.beleg { align-items: stretch; }
.beleg__vorschau { width: auto; flex: 1 1 0; min-width: 380px; }
.beleg__erfassung { width: 600px; flex: 0 0 600px; }
.beleg__verlauf { width: 84px; flex: 0 0 84px; }

/* Die Lieferantenspalte ist die, in der ein Verweis auf den Beleg steht.
   Sie bekommt so viel Platz, dass ein Name wie "REISSER HAUSTECHNIK GmbH"
   auf EINE Zeile passt; laengere duerfen weiter umbrechen. */
.tabelle td:has(> a[href^="/rechnung/"]) { min-width: 17rem; }
.tabelle td:has(> a[href^="/rechnung/"]) > a { overflow-wrap: normal; }

/* Aktionsleiste der Sammelauswahl. Sie bleibt beim Scrollen oben stehen -
   bei 75 Belegen scrollt man weit, und die Leiste muss erreichbar bleiben. */
.sammelleiste {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 9px 12px; margin-bottom: -4px;
}
.sammelleiste__zaehler { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sammelleiste__aktionen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sammelleiste__aktionen .knopf:disabled { opacity: .45; cursor: not-allowed; }
.sammelfeld {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--sunk); padding: 14px 16px;
}
.sammelfeld__inhalt { display: flex; flex-direction: column; gap: 12px; }
.tabelle tr.gewaehlt { background: var(--akzent-hell); }

/* Belegvorschau: nichts wird beschnitten (29.08.2026). Der Rahmen laesst
   scrollen statt abzuschneiden, und das Blatt bekommt so viel Hoehe, wie
   die Seite hergibt - der Beleg ist das Dokument, an dem geprueft wird. */
.beleg__blatt { overflow: auto; height: auto; min-height: 0; flex: 1 1 auto; }
.beleg__mitte { min-height: calc(100vh - 320px); }
.beleg__blatt iframe { min-height: calc(100vh - 330px); }

/* Auswahlstand im Spaltenkopf: erscheint erst, wenn etwas gewaehlt ist. */
.sammel-stand { margin-left: 12px; font-size: 11.5px; color: var(--ink-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sammel-stand a { margin-left: 8px; color: var(--akzent); }

/* Erklaerkasten: zugeklappt eine Zeile. Beim ersten Besuch offen. */
details.klapp--hinweis > summary { font-size: 12.5px; }
details.klapp--hinweis > .klapp__inhalt { padding-top: 10px; }

/* Nummernliste zum Kopieren ("Mahnung ohne Rechnung", 29.08.2026). Ein
   Textfeld statt einer Tabelle: nur so laesst sich die Liste in EINEM Zug
   markieren und in eine Mail an den Lieferanten setzen. Feste Schrittweite,
   damit Nummer, Datum und Betrag untereinander stehen. */
.nummernliste {
  width: 100%; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.65; color: var(--ink-2);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px;
}

/* Fortschrittsbalken des Abrufs (Punkt J, 29.08.2026). Eigener Name, weil
   ".balken" schon der 3-px-Farbstreifen der Aufgabenliste ist. Die Breite
   setzt Javascript; ohne Javascript bleibt die Zeile darüber trotzdem
   lesbar - sie sagt die Zahlen im Klartext. */
.fortschritt {
  display: block; width: 100%; height: 6px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.fortschritt__fuell {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--akzent); transition: width .6s ease;
}
/* Der Abruf hat vier Zustaende, und jeder hat seine Farbe (04.09.2026):
   Laeuft blau · Wartet auf Freigabe bernstein · Fehler rot · Fertig/Bereit
   grau. Rot heisst in dieser App „etwas ist kaputt" - ein angehaltener Lauf
   ist die Kostenbremse bei der Arbeit, kein Fehler. */
.hinweis.lauf { border-left-color: var(--blue); }
.hinweis.lauf .hinweis__titel { color: var(--ink); }
.hinweis.lauf--wartet { border-left-color: var(--amber-line); background: var(--amber-bg); }
.hinweis.lauf--wartet .hinweis__titel { color: var(--amber); }
.hinweis.lauf--fehler { border-left-color: var(--red); }
.hinweis.lauf--fehler .hinweis__titel { color: var(--red); }
.hinweis.lauf--fertig { border-left-color: var(--line-2); }
.hinweis__aktionen { display: flex; gap: 10px; align-items: center; }

/* Filterzeile des Protokolls „Freigaben" (04.09.2026): Beschriftung und
   Feld nebeneinander, eine Zeile, die bei Bedarf umbricht. */
.filterzeile { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 14px; font-size: 12.5px; color: var(--mut); }
.filterzeile input, .filterzeile select { width: 140px; }

/* Der Kennzahlenblock ueber „Alle Vorgaenge" in drei Ebenen (04.09.2026):
   die grosse Zahl wie auf der Startseite, darunter die Faelligkeit in drei
   Teilen, darunter der Zustand als eine Zeile mit Mittelpunkten. */
.aufteilung { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.aufteilung__neben { display: block; font-size: 13px; color: var(--faint); margin-top: 2px; }
.aufteilung__ebene2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 18px; }
.aufteilung__teil { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.aufteilung__teil .kennzahl__wert { font-size: 22px; }
.aufteilung__ebene3 { font-size: 13px; gap: 10px; align-items: baseline; }
.aufteilung__ebene3 a { color: inherit; text-decoration: none; }
.aufteilung__punkt { color: var(--faint); }

/* Nachtragen einer fehlenden Rechnung: schmale Seite, die nur diese eine
   Frage stellt. Kein verstecktes Dateifeld in der Tabellenzeile - das
   Auslesen kostet Geld und gehoert ausdruecklich bestaetigt. */
.schmal { max-width: 640px; display: flex; flex-direction: column; gap: 18px; }

/* Zahlungsmodul als eine Arbeitsflaeche (Punkt M, 29.08.2026): je Lieferant
   ein Block, Gutschriften direkt unter seinen Rechnungen, darunter die
   mitlaufende Gruppensumme. Kein Kasten, keine Karte - Gliederung durch
   Abstand und Haarlinie, wie ueberall in dieser App. */
.zahlgruppen { display: flex; flex-direction: column; gap: 26px; }
.zahlgruppe__kopf {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line-2);
}
.zahlgruppe__name { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.zahlgruppe__iban { margin-left: auto; font-size: 12px; color: var(--faint); }
.zahlgruppe__fuss {
  display: flex; align-items: baseline; gap: 12px; justify-content: space-between;
  padding: 9px 6px 0; border-top: 1px solid var(--line); font-size: 13.5px;
}
.zahlgruppe__rest { padding: 4px 6px 0; font-size: 12px; text-align: right; }
/* Eine Gruppe ohne zahlbare Rechnung ist nur ein Hinweis auf Guthaben. */
.zahlgruppe--still .tabelle td { color: var(--faint); }
.tabelle--eng td { padding: 8px 6px; }
/* Eine Gutschrift ist gruen und traegt ein Minus. Rot bleibt den
   ueberfaelligen Terminen vorbehalten. */
.zeile--gutschrift td { background: var(--green-bg); }
.gs-grund { font-size: 11.5px; }

/* Das Fenster vor der Freigabe (Punkt O, 29.08.2026). Ein <dialog>, damit es
   ohne fremde Bibliothek auskommt und die Tastatur es schliessen kann. Ohne
   Javascript steht es als normaler Kasten auf der Seite (?zeig=freigabe). */
.fenster {
  border: 1px solid var(--line-2); border-radius: 9px; padding: 0;
  background: var(--ground); color: var(--ink); max-width: 520px; width: 92%;
  box-shadow: 0 10px 40px rgba(0,0,0,.14);
}
.fenster::backdrop { background: rgba(23,23,26,.32); }

.fenster__titel { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.fenster__kopf { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fenster__daten { display: flex; flex-direction: column; gap: 7px; }
.fenster__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.fenster__label { color: var(--mut); }
/* Der Pflichthaken steht auf einer eigenen Zeile, gross genug zum Treffen. */
.haken-zeile { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.haken-zeile input { margin-top: 3px; flex: none; }

/* Ein ausgeschalteter Knopf muss auch ausgeschaltet AUSSEHEN - sonst klickt
   man dagegen und haelt die Anwendung fuer kaputt (29.08.2026). */
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Das Archiv steht gedaempft und kleiner ganz unten: Bezahltes ist erledigt
   und soll die taegliche Arbeit nicht mehr belegen (Punkt P, 29.08.2026). */
.nav__gruppe--still .nav__punkt { font-size: 13px; color: var(--faint); }
.nav__gruppe--still .nav__label { font-size: 12.5px; }
.nav__gruppe--still .nav__punkt:hover { color: var(--ink-2); }
.nav__gruppe--still .nav__punkt--aktiv { color: var(--ink); }
.nav__gruppe--still svg { opacity: .6; }

/* Die Kennzahlenzeile traegt je nach Liste drei bis fuenf Zahlen. Feste vier
   Spalten haben die fuenfte abgeschnitten (29.08.2026). */
.kennzahlen { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Nachweis-Teil im Freigabefenster (Punkt R b): Der Weg steht neben dem
   Hinweis, nicht drei Klicks entfernt. Eigene Formulare - verschachtelte
   Formulare gibt es in HTML nicht. */
.fenster__inhalt { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; }
.fenster__form { display: flex; flex-direction: column; gap: 16px; }
.fenster__nachweis {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; background: var(--sunk);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.fenster__reihe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.fenster__reihe select, .fenster__reihe input[type="file"] {
  font-family: inherit; font-size: 13px; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 5px 8px; background: var(--ground);
}

/* Zustandstabelle ueber „Alle Vorgaenge" (Punkt V, 29.08.2026): rechnet vor,
   woraus der Bestand besteht. Schmal, ruhig, jede Zeile ein Weg in die
   Liste darunter. */
.tabelle--zustand { max-width: 560px; }
.tabelle--zustand td { padding: 6px 6px; border-bottom: none; }
.tabelle--zustand tbody tr:hover { background: var(--hover); }
.tabelle--zustand a { color: inherit; text-decoration: none; }
.tabelle--zustand tr.gewaehlt { background: var(--akzent-hell); }
.zustand__gruppe td {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding-top: 16px !important;
}
.zustand__gruppe:hover { background: none !important; }
.zustand__summe td { border-top: 1px solid var(--line-2); }
.zustand__unter td { padding-top: 0 !important; font-size: 12.5px; }
.zustand__unter:hover { background: none !important; }
/* Die Probe: eine Zeile, gruen und still - oder ein roter Kasten. */
.probe { font-size: 12.5px; }
.probe--gut { color: var(--green); }

/* =====================================================================
   STARTSEITE (Punkt AA, 29.08.2026)
   Sie muss in fuenf Sekunden lesbar sein. Deshalb genau vier Bausteine:
   eine grosse Zeile, drei Ringe, was Geld kostet, die Suche. Keine
   neuen Farben - alles aus den Variablen oben.
   ===================================================================== */

/* Die eine Zeile: der Betrag fuehrt, alles andere ordnet sich unter. */
.startkopf { padding: 4px 0 26px; }
.startkopf__gross { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.startkopf__zahl {
  font-size: 40px; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.startkopf__wort { font-size: 16px; font-weight: 600; color: var(--mut); }
.startkopf__neben { font-size: 14px; color: var(--faint); }
.startkopf__zweite {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 10px;
  font-size: 13.5px; color: var(--ink-2);
}
.startkopf__zweite b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Drei Ringe nebeneinander. Nie mehr als drei - ein viertes Feld
   zwingt zum Vergleichen statt zum Lesen. */
.ringe {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;
  padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ring { display: grid; grid-template-columns: 82px 1fr; grid-template-rows: auto auto; gap: 2px 16px; align-items: center; }
.ring__titel { grid-column: 2; font-size: 12.5px; color: var(--mut); }
.ring__bild { grid-row: 1 / 3; grid-column: 1; width: 82px; height: 82px; }
.ring__bild svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__spur { stroke: var(--line); }
/* Die vier erlaubten Farben, nicht mehr: gruen gut, bernstein gefaehrdet,
   rot verloren, grau Rest. */
.ring__teil--gruen { stroke: var(--green); }
.ring__teil--bernstein { stroke: var(--amber-line); }
.ring__teil--rot { stroke: var(--red); }
.ring__teil--grau { stroke: var(--faint); }
/* Die Schrift in der Mitte dreht zurueck, sonst steht sie hochkant. */
.ring__mitte {
  transform: rotate(90deg); transform-origin: 21px 21px;
  font-size: 9px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums;
}
.ring__zeilen { grid-column: 2; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.ring__leer { font-weight: 600; color: var(--ink); }
.ring__grund { font-size: 11.5px; color: var(--faint); line-height: 1.45; }

/* Die Suche: gross, mit Knopf daneben. */
.startsuche { display: flex; gap: 10px; align-items: center; padding: 22px 0 6px; }

/* „Bestand im Detail" - zugeklappt. Taeglich braucht das niemand. */
.bestand { padding: 6px 0 2px; border-top: 1px solid var(--line); }
.bestand > summary {
  display: flex; gap: 12px; align-items: baseline; cursor: pointer;
  padding: 12px 0; font-size: 13px; font-weight: 600; list-style: none;
}
.bestand > summary::-webkit-details-marker { display: none; }
.bestand > summary::before { content: '▸'; color: var(--faint); font-weight: 400; }
.bestand[open] > summary::before { content: '▾'; }
.bestand .tabelle--zustand { margin-top: 0; }
.startfuss { padding: 14px 0 4px; font-size: 12px; }

/* Die Zustandszeile in den Listen - der Ersatz fuer die Tabelle dort. */
.chipzeile--zustand { padding-bottom: 16px; }
.chipzeile--zustand .chip .n { color: var(--mut); font-weight: 600; }
.chipzeile--zustand .chip--aktiv .n { color: #fff; }

@media (max-width: 900px) {
  .ringe { grid-template-columns: 1fr; gap: 18px; }
}

/* =====================================================================
   KOPFBAND DER STARTSEITE (Punkt EE, 30.08.2026)
   Erzeugter Verlauf nach Tageszeit - KEINE Fotos, nichts wird geladen.
   Aus demselben Grund, aus dem wir die Schrift selbst ausliefern: eine
   Buchhaltung meldet beim Seitenaufruf nicht die Adressen ihrer Nutzer
   an Dritte.
   ===================================================================== */
.band {
  /* Volle Breite der Arbeitsflaeche: Die Polsterung von .seite (24px oben,
     26px seitlich) wird zurueckgenommen, die Rundung der Karte oben
     mitgenommen - sonst steht das Band ueber den Ecken. */
  position: relative; height: 260px; overflow: hidden;
  margin: -24px -26px 0; border-radius: 7px 7px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}

/* Der Verlauf, diagonal von links oben nach rechts unten. Vier Stimmungen;
   die Farben stehen NUR hier. */
.band--morgen { background: linear-gradient(135deg, #1b2a4a 0%, #4a5c8a 52%, #e8a56b 100%); }
.band--tag    { background: linear-gradient(135deg, #2f6fc4 0%, #7fb3e8 52%, #e6f0fa 100%); }
.band--abend  { background: linear-gradient(135deg, #17233f 0%, #6b3f6e 52%, #d97b4a 100%); }
.band--nacht  { background: linear-gradient(135deg, #0d1424 0%, #1b2a4a 52%, #2f3f63 100%); }

/* Jahreszeit: nur eine leichte Verschiebung, kein neuer Verlauf. */
.band--winter    { filter: saturate(0.88) hue-rotate(-8deg) brightness(0.97); }
.band--fruehling { filter: saturate(1.04) hue-rotate(4deg); }
.band--sommer    { filter: saturate(1.08) brightness(1.03); }
.band--herbst    { filter: saturate(0.92) hue-rotate(-12deg) brightness(0.98); }

/* Zwei weiche Lichtflecken nehmen dem Verlauf das Flaechige. */
.band::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 62% at 18% 22%, rgba(255,255,255,0.20), transparent 70%),
    radial-gradient(46% 70% at 82% 78%, rgba(255,255,255,0.12), transparent 72%);
}

/* Unten dunkel nach transparent, damit die Schrift immer steht - auch auf
   dem hellen Tagverlauf. */
.band::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(8,12,22,0.62) 0%, rgba(8,12,22,0.28) 34%, transparent 68%);
}

/* Das Korn liegt als eigenes Element ueber dem Verlauf: ohne es entstehen
   in grossen Verlaeufen sichtbare Streifen. */
.band__korn {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
}
.band__korn svg { width: 100%; height: 100%; display: block; }

.band__text {
  position: relative; z-index: 4; padding: 0 26px 22px; color: #fff;
  text-shadow: 0 1px 2px rgba(8,12,22,0.35);
}
.band__gruss { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.band__datum { display: block; font-size: 14px; opacity: 0.92; margin-top: 4px; }
.band__wetter { display: block; font-size: 13px; opacity: 0.82; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Unter dem Band beginnt die weisse Flaeche - kein Foto hinter Zahlen. */
.nachband { padding-top: 26px; }

@media (prefers-reduced-motion: no-preference) { .band { transition: none; } }
@media (max-width: 900px) {
  .band { height: 200px; }
  .band__gruss { font-size: 23px; }
}

/* =====================================================================
   MEINE AUFGABEN: drei Gruppen nach Folge (Punkt W, 30.08.2026)
   ===================================================================== */

/* „Was zuerst" — die eine Zeile, die man liest, wenn man nur drei
   Sekunden hat. Deshalb steht sie ueber allem und ist anklickbar. */
.zuerst {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin: 16px 0 20px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--hover);
}
.zuerst--dringend { border-color: var(--amber-line); background: var(--amber-bg); }
.zuerst__wort {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mut);
}
.zuerst__satz { font-size: 14.5px; font-weight: 600; flex: 1; }
.zuerst__wert { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Eine Gruppe ist aufklappbar: „Kann warten" startet zu. */
.gruppe { border-top: 1px solid var(--line); }
.gruppe > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 0 10px; cursor: pointer; list-style: none;
}
.gruppe > summary::-webkit-details-marker { display: none; }
.gruppe > summary::before { content: '▸'; color: var(--faint); font-size: 11px; }
.gruppe[open] > summary::before { content: '▾'; }
.gruppe__titel { font-size: 13px; font-weight: 600; }
.gruppe__zahl { color: var(--mut); font-weight: 600; }
.gruppe__unter { font-size: 12px; color: var(--faint); }

/* „und N weitere" — hoechstens fuenf stehen offen. */
.mehr > summary {
  padding: 8px 0 4px; font-size: 12.5px; color: var(--mut); cursor: pointer; list-style: none;
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::before { content: '+ '; }

/* =====================================================================
   AUSWERTUNG (Punkt Z, 30.08.2026)
   Eine Kennzahl ohne Daten zeigt keine Null, sondern ihren Grund - und
   ist dabei sichtbar gedaempft, damit sie nicht wie ein Ergebnis wirkt.
   ===================================================================== */
.zahlenfeld {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px 30px; padding: 4px 0 8px;
}
.zahl { display: flex; flex-direction: column; gap: 4px; }
.zahl__titel { font-size: 12.5px; color: var(--mut); }
.zahl__wert {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.zahl__wert--leer { color: var(--faint); font-weight: 400; }
.zahl__einheit { font-size: 14px; font-weight: 600; color: var(--mut); margin-left: 6px; }
.zahl__unter { font-size: 11.5px; color: var(--faint); line-height: 1.5; }
.zahl__leer { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.zahl--leer .zahl__titel { color: var(--faint); }

/* Ein gesperrtes Feld sieht gesperrt aus UND nennt den Grund darunter
   (Punkt DD, 30.08.2026). Ein Feld, das sich stumm nicht speichern laesst,
   sieht aus wie ein Fehler der Anwendung. */
.feld--gesperrt {
  background: var(--hover); color: var(--ink-2); cursor: not-allowed;
  border-style: dashed;
}
.feld-hinweis--gesperrt { color: var(--mut); }

/* Belegart in den Listen (30.08.2026). Keine neuen Farben: gruen fuer die
   Gutschrift (sie mindert), gedaempft fuer alles, was 0 zaehlt. */
.art { font-size: 12px; }
.art--gutschrift { color: var(--green); }
.art--mahnung, .art--angebot, .art--lieferschein, .art--sonstiges,
.art--ausgangsrechnung { color: var(--faint); }
.art--offen { color: var(--amber); }

/* Zahlungslauf-Register im Transitmodul (15.09.2026): eine aufklappbare
   Zeile je Lauf, darunter Ueberweisungen je Lieferant mit ihren Rechnungen.
   Baut auf den Zahlgruppen des Zahlungsmoduls auf; nur die Zeile selbst ist
   neu, damit Kopf und Inhalt ohne Skript auf- und zuklappen. */
.lauf { border: 1px solid var(--line-2); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.lauf > summary { display: grid; grid-template-columns: 1.4fr 1.3fr 0.9fr 1fr 1fr 1.6fr; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.lauf > summary::-webkit-details-marker { display: none; }
.lauf > summary:hover { background: var(--sunk); }
.lauf__nr { font-weight: 600; }
.lauf__zustand { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sunk); color: var(--mut); }
.lauf__zustand--eingereicht { background: #eaf2fb; color: #1f5f99; }
.lauf__zustand--bestaetigt { background: #e6f4ea; color: var(--green); }
.lauf__zustand--verworfen { background: #fdecec; color: var(--red); }
.lauf__zustand--ueberfaellig { background: #fff3e0; color: var(--amber); }
.lauf__inhalt { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.lauf__ueberweisung { border: 1px solid var(--line); border-radius: 8px; }
.lauf__ueberweisung > .zahlgruppe__kopf { padding: 10px 14px; }
.lauf__aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lauf__aktionen form { display: flex; gap: 8px; align-items: center; }
.lauf__aktionen input[type="date"], .lauf__aktionen input[type="text"] { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; }
.zeile--zurueck td { color: var(--faint); text-decoration: line-through; }
.zeile--zurueck td .zweitzeile { text-decoration: none; }
@media (max-width: 900px) { .lauf > summary { grid-template-columns: 1fr 1fr; } }
.lauf--kopf { border: 0; background: transparent; margin-bottom: 4px; }
.lauf__kopfzeile { display: grid; grid-template-columns: 1.4fr 1.3fr 0.9fr 1fr 1fr 1.6fr; gap: 12px; padding: 0 16px; font-size: 12px; }
.knopf--klein { padding: 4px 10px; font-size: 12px; }
@media (max-width: 900px) { .lauf--kopf { display: none; } }