/* Nur das Wenige, das dem Betriebsportal eigen ist. Alles Übrige kommt
   aus portal.css -- die beiden sollen sich nicht auseinanderentwickeln. */

/* Der Betrieb sieht Geld. Ein farbiger Streifen oben macht auf einen Blick
   klar, dass man NICHT im Portal eines Kunden ist. */
.b-kennung {
  display: flex; align-items: center; gap: 8px;
  background: #11302A; color: #fff;
  font-size: 12px; padding: 6px 12px; border-radius: 6px; margin: 0 12px 6px;
}
.b-kennung b { font-weight: 600; }

.b-zeile { display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid #F2F2F2; font-size: 14px; }
.b-zeile:last-child { border-bottom: none; }
.b-zeile-name { color: var(--p-gedaempft); }

/* Anbindungen */
.b-anbindung { display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid #F2F2F2; }
.b-anbindung:last-child { border-bottom: none; }
.b-ampel { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }
.b-ampel.gut { background: #3EBF4D; }
.b-ampel.warnung { background: #FF8500; }
.b-ampel.aus { background: #C4C4C4; }
.b-anbindung-text { flex: 1; min-width: 0; }
.b-anbindung-text b { display: block; font-size: 14px; font-weight: 600; }
.b-anbindung-text span { display: block; font-size: 13px; color: var(--p-gedaempft); margin-top: 2px; }

/* --------------------------------------------------------- Buchhaltung --
   Aufbau und Farben sind die des Betriebsportals; hier steht nur, was die
   Belege zusätzlich brauchen. Es kommt keine neue Formensprache dazu. */

.b-verweis { border: none; background: transparent; font: inherit; padding: 0;
  color: var(--p-akzent); cursor: pointer; text-align: left; }
.b-verweis:hover { text-decoration: underline; }
.b-offen { color: var(--red-500, #FB472E); font-weight: 600; }
.b-anschrift { line-height: 1.6; font-size: 14px; }
.b-etikett { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--p-gedaempft); margin-bottom: 6px; }
.b-angaben { display: flex; flex-direction: column; gap: 6px; }
.b-angabe { display: flex; justify-content: space-between; gap: 24px; font-size: 14px;
  max-width: 460px; }
.b-angabe span { color: var(--p-gedaempft); }

.b-positionen { display: flex; flex-direction: column; gap: 10px; }
.b-postabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.b-postabelle th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--p-gedaempft); padding: 0 6px 6px; font-weight: 600; }
.b-postabelle td { padding: 3px 6px; vertical-align: top; }
.b-postabelle.fest td { padding: 8px 6px; border-bottom: 1px solid var(--p-linie); }
.b-postabelle .rechts, .b-postabelle td.rechts { text-align: right; }
.b-zeilensumme { text-align: right; white-space: nowrap; padding-top: 9px !important; }
.b-feld { width: 100%; padding: 6px 8px; border: 1px solid var(--p-linie);
  background: #fff; font: inherit; font-size: 14px; }
.b-feld:focus { outline: none; border-color: var(--p-akzent); }
.b-feld.schmal { width: 96px; }
.b-weg { border: none; background: transparent; color: var(--p-gedaempft);
  cursor: pointer; padding: 6px; }
.b-weg:hover { color: var(--red-500, #FB472E); }
.b-poszeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.b-summe { margin-left: auto; width: 280px; display: flex; flex-direction: column; gap: 4px;
  padding-top: 10px; }
.b-summezeile { display: flex; justify-content: space-between; font-size: 14px; }
.b-summezeile.gesamt { border-top: 1px solid var(--p-linie); margin-top: 6px;
  padding-top: 8px; font-weight: 700; font-size: 16px; }

.b-belegkopf { display: flex; gap: 48px; flex-wrap: wrap; margin-bottom: 20px; }
.b-betreff { font-size: 16px; margin: 0 0 12px; }
.b-bemerkung { font-size: 14px; color: var(--p-gedaempft); margin-top: 16px; }

.b-zahlteil { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.b-qr { flex: 0 0 auto; }
.b-qr svg { width: 160px; height: 160px; display: block; }
.b-zahlangaben { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.b-kennzahlen { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

@media (max-width: 900px) {
  .b-summe { width: 100%; margin-left: 0; }
  .b-belegkopf { gap: 20px; }
  .b-postabelle { min-width: 560px; }
  .b-positionen { overflow-x: auto; }
}