/* ====================  css/kundenportal-buchhaltung.css  ====================
   Buchhaltung · Lieferanten (/kunden/admin/buchhaltung/, 16.10.2026). Rahmen, Karten, Marken und Farben kommen aus
   konto-app.css; hier steht nur, was diese Seite zusätzlich hat: offene Fragen, Warnzeile, Beleg-Tabelle im Panel. */

/* ---------- Offene Fragen ---------- */
.bh-fragen{ padding: 14px 18px; border-radius: 12px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); border-left: 4px solid #d4a106 }
.ld-app .bh-fragen-titel{ display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.bh-fragen-liste{ margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px }
.bh-fragen-liste li{ color: var(--ld-text); font-size: 14px; line-height: 1.55 }
.bh-fragen-liste li::marker{ color: var(--ld-text-3); font-weight: 600 }
.bh-fragen-liste p{ margin: 0 0 2px; max-width: 95ch }
.bh-fragen-liste .ld-link{ font-size: 13px }
.bh-fragen-leer{ margin: 0; color: var(--ld-text-2); font-size: 14px }
.bh-fragen-erledigt{ margin-top: 12px; color: var(--ld-text-2); font-size: 13.5px }
.bh-fragen-erledigt summary{ cursor: pointer; font-weight: 600 }
.bh-fragen-erledigt .bh-fragen-liste{ margin-top: 10px }
.bh-fragen-erledigt .bh-fragen-liste li{ color: var(--ld-text-2) }

/* ---------- Karten ---------- */
.bh-warnung{ margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(212,161,6,.08); border: 1px solid rgba(212,161,6,.35);
  color: #7a5300; font-size: 13px; line-height: 1.45 }
.bh .ld-kz-verlauf span{ -webkit-line-clamp: 3 }

/* ---------- Seitenpanel ---------- */
.kp-panel .bh-zwischen{ margin: 22px 0 8px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ld-text-2, var(--ld-text-2)) }
.kp-panel .bh-warnung{ margin-top: -2px }
.bh-hinweisbox{ margin: 10px 0 4px; padding: 10px 12px; border-radius: 8px; background: rgba(234,108,16,.08); border: 1px solid rgba(234,108,16,.4);
  color: #a8430a; font-size: 13.5px; line-height: 1.5 }
.bh-tabelle-rahmen{ max-width: 100%; overflow-x: auto }
.bh-tabelle{ width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums }
.bh-tabelle th{ padding: 6px 10px 6px 0; border-bottom: 1px solid var(--ld-rand-stark, var(--ld-rand-stark)); text-align: left; font-size: 12px; font-weight: 600; color: var(--ld-text-2, var(--ld-text-2)); white-space: nowrap }
.bh-tabelle td{ padding: 7px 10px 7px 0; border-bottom: 1px solid var(--ld-rand, var(--ld-rand)); color: var(--ld-text, var(--ld-text)); white-space: nowrap }
.bh-tabelle td:nth-child(3){ white-space: normal; overflow-wrap: anywhere }
.bh-tabelle a{ color: var(--ld-link, #1d4ed8); text-underline-offset: 3px }
.bh-tabelle .bh-fremd td{ color: #a51c1c }
.bh-pdf{ margin: 0; padding-left: 18px; color: var(--ld-text-2, var(--ld-text-2)); font-size: 13.5px; line-height: 1.6 }
.kp-panel .kp-haken{ margin-top: 10px }
.kp-panel .kp-haken input:disabled + *{ opacity: .6 }

/* ---------- Reiter „Rosa · Belege“ (19.10.2026) ---------- */
.bh-ansicht{ display: flex; flex-direction: column; gap: 16px }
.bh-ansicht[hidden]{ display: none }
.bh-klein{ color: var(--ld-text-2); font-size: 13px; line-height: 1.5 }
p.bh-klein{ margin: 0; max-width: 95ch }
.bh-rosa-kopf{ display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: 12px; background: var(--ld-flaeche);
  border: 1px solid var(--ld-rand); border-left: 4px solid #16a34a }
.bh-rosa-person{ display: flex; gap: 12px; align-items: flex-start; font-size: 15px }
.bh-rosa-bild{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(22,163,74,.16);
  border: 1px solid rgba(22,163,74,.6); color: #146c35; font-weight: 700 }
.bh-rosa-steuer{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px }
.bh-rosa-steuer .kp-feld{ flex: 1 1 320px; margin: 0 }
.bh-rosa-steuer select{ min-height: 42px }
.bh-rosa-kosten{ display: flex; flex-direction: column; gap: 2px; min-width: 150px }
.bh-rosa-kosten b{ font-size: 20px; font-variant-numeric: tabular-nums }
.bh-rosa-deckel{ display: flex; gap: 8px; margin-top: 6px }
.bh-rosa-deckel input{ width: 90px; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ld-rand-stark);
  background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit }
.bh-zahlen--5{ grid-template-columns: repeat(5, minmax(0, 1fr)) }
.ld-app .bh-abschnitt{ display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-family: inherit; font-size: 18px; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.bh-paket{ padding: 12px 16px; border-radius: 12px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); border-left: 4px solid #3b82f6 }
.bh-paket-kopf{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px }
.bh-paket-knopf{ display: flex; align-items: center; gap: 10px; min-width: 200px }
.bh-paket-knopf .ld-weiter, .bh-paket-knopf .ld-details{ width: auto; padding: 0 16px }
.bh-paket details{ margin-top: 8px }
.bh-paket summary{ cursor: pointer; color: var(--ld-text-2); font-size: 13px; font-weight: 600 }
.bh-tabelle--breit td.bh-grund{ white-space: normal; min-width: 220px; color: var(--ld-text-2) }
.bh-tabelle td.bh-aktionen{ white-space: nowrap }
.bh-tabelle .ld-link{ font-size: 13px; margin-left: 8px }
@media (max-width: 1100px){ .bh-zahlen--5{ grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 520px){ .bh-zahlen--5{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.bh-rosa-anstoss{ width: auto; padding: 0 16px; min-height: 42px }
.bh-fortschritt{ display: flex; flex-direction: column; gap: 6px }
.bh-fortschritt-balken{ height: 8px; border-radius: 999px; background: var(--ld-flaeche-3); overflow: hidden }
.bh-fortschritt-balken span{ display: block; height: 100%; background: #16a34a; border-radius: 999px }
.bh-rosa-steuer .bh-rosa-start{ flex: 0 1 190px }
.bh-rosa-start input{ min-height: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; color-scheme: dark }

/* ---------- Rosa V2 (01.11.2026): Freigaben im Hintergrund, Listen mit Filter/Seiten, PDF ---------- */
.bh-hintergrund{ display: flex; flex-direction: column; gap: 10px }
.ld-app .bh-hintergrund .bh-zwischen{ margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ld-text-2) }
.bh-auftrag{ display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2);
  border: 1px solid var(--ld-rand) }
.bh-hintergrund .bh-auftrag{ margin-top: 0; background: var(--ld-flaeche) }
.bh-auftrag-kopf{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px }
.bh-auftrag-text{ font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ld-text) }
.bh-auftrag-balken span{ transition: width .4s ease }
.bh-auftrag--wartend .bh-auftrag-balken span{ background: #8a91a3 }
.bh-auftrag--laeuft .bh-auftrag-balken span{ background: var(--zk-akzent, #6a2cd8) }
.bh-auftrag--abgebrochen{ border-color: rgba(220,38,38,.35) }
.bh-auftrag--abgebrochen .bh-auftrag-balken span{ background: #dc2626 }
.bh-auftrag-fuss:empty{ display: none }
@media (prefers-reduced-motion: reduce){ .bh-auftrag-balken span{ transition: none } }

.bh-liste{ border-radius: 12px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); overflow: hidden; box-shadow: var(--zk-schatten, none);
  scroll-margin-top: 80px }
.bh-liste-leiste{ display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ld-rand); background: var(--ld-flaeche-2) }
.bh-chips{ display: flex; flex-wrap: wrap; gap: 6px }
.bh-chip{ display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ld-rand-stark);
  background: var(--ld-flaeche); color: var(--ld-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap }
.bh-chip span{ font-weight: 700; color: var(--ld-text-2); font-variant-numeric: tabular-nums }
.bh-chip:hover{ background: var(--ld-flaeche-3) }
.bh-chip--an{ background: var(--zk-akzent-hell, #f1eafe); border-color: var(--zk-ring, #cbb6f5); color: var(--zk-akzent-h, #5b22c7) }
.bh-chip--an span{ color: inherit }
.bh-chip-punkt{ width: 8px; height: 8px; border-radius: 50%; background: var(--ton) }
.bh-chip:focus-visible, .bh-mini:focus-visible, .bh-seite:focus-visible, .bh-z-text:focus-visible{ outline: 2px solid var(--zk-akzent, #6a2cd8); outline-offset: 2px }
.bh-liste-werkzeuge{ display: flex; flex-wrap: wrap; gap: 8px }
.bh-suche, .bh-sort{ min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche);
  color: var(--ld-text); font: inherit; font-size: 14px }
.bh-suche{ flex: 1 1 260px; min-width: 0 }
.bh-sort{ flex: 0 0 auto }

.bh-z{ display: grid; grid-template-columns: 92px minmax(150px, 1.1fr) minmax(220px, 2fr) 112px 150px; gap: 6px 16px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--ld-rand); font-size: 14px }
.bh-z:last-of-type{ border-bottom: 0 }
/* Jede Zeile ist ein eigenes Raster: die Knopfspalte braucht deshalb eine feste Breite, sonst rutscht „Brutto“ im Kopf nach rechts */
.bh-liste--aktionen .bh-z{ grid-template-columns: 88px minmax(140px, 1.1fr) minmax(190px, 2fr) 108px 356px }
.bh-z:not(.bh-z--kopf):hover{ background: var(--ld-flaeche-2) }
.bh-z--kopf{ padding-top: 8px; padding-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--ld-text-2); background: var(--ld-flaeche) }
.bh-z-datum{ display: flex; flex-direction: column; font-variant-numeric: tabular-nums; color: var(--ld-text); white-space: nowrap }
.bh-z-wer{ display: flex; flex-direction: column; min-width: 0 }
.bh-z-wer b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bh-z-wer .bh-klein{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bh-z-grund{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0 }
.bh-z-text{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; padding: 0; border: 0; background: none;
  color: var(--ld-text-2); font: inherit; font-size: 12.5px; line-height: 1.45; text-align: left; cursor: pointer }
.bh-z--offen .bh-z-text{ display: block; -webkit-line-clamp: unset }
.bh-z-betrag{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ld-text) }
.bh-waehrung{ font-size: 11px; font-weight: 600; color: var(--ld-text-2) }
.bh-z-aktionen{ display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px }
.bh-tabelle td.bh-z-aktionen{ display: table-cell; white-space: nowrap }
.bh-tabelle td.bh-z-aktionen .bh-mini + .bh-mini{ margin-left: 6px }
.bh-tabelle .bh-zahl{ text-align: right; white-space: nowrap }
.bh-mini{ display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche); color: var(--ld-text); font: inherit; font-size: 12.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap }
.bh-mini:hover{ background: var(--ld-flaeche-3); color: var(--ld-text) }
.bh-mini:disabled{ opacity: .55; cursor: wait }
.bh-mini--leise{ border-color: transparent; background: transparent; color: var(--ld-text-2) }
.bh-mini--leise:hover{ background: var(--ld-flaeche-3) }
.bh-liste-leer{ margin: 0; padding: 18px 14px; color: var(--ld-text-2); font-size: 14px }
.bh-seiten{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--ld-rand);
  background: var(--ld-flaeche-2) }
.bh-seiten-knoepfe{ display: flex; align-items: center; gap: 4px }
.bh-seite{ min-width: 34px; min-height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche);
  color: var(--ld-text); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer }
.bh-seite:hover:not(:disabled){ background: var(--ld-flaeche-3) }
.bh-seite:disabled{ opacity: .4; cursor: default }
.bh-seite--an{ background: var(--zk-akzent, #6a2cd8); border-color: var(--zk-akzent, #6a2cd8); color: #fff }
.bh-seite--an:hover:not(:disabled){ background: var(--zk-akzent-h, #5b22c7) }
.bh-seiten-luecke{ padding: 0 4px; color: var(--ld-text-3) }
.bh-belegknoepfe .ld-link{ font-size: 13px; margin-right: 8px }

@media (max-width: 860px){
  .bh-z--kopf{ display: none }
  .bh-z{ grid-template-columns: 1fr auto; grid-template-areas: "datum betrag" "wer wer" "grund grund" "aktionen aktionen";
    margin: 10px; padding: 12px; border: 1px solid var(--ld-rand); border-radius: 10px; background: var(--ld-flaeche) }
  .bh-z:last-of-type{ border-bottom: 1px solid var(--ld-rand) }
  .bh-z-datum{ grid-area: datum; flex-direction: row; gap: 8px; align-items: baseline }
  .bh-z-betrag{ grid-area: betrag }
  .bh-z-wer{ grid-area: wer }
  .bh-z-wer b, .bh-z-wer .bh-klein{ white-space: normal }
  .bh-z-grund{ grid-area: grund }
  .bh-z-text{ -webkit-line-clamp: 2 }
  .bh-z-aktionen{ grid-area: aktionen; justify-content: flex-start; flex-wrap: wrap }
  .bh-mini{ min-height: 36px }
  .bh-seiten{ justify-content: center }
}