/* Bereich Rechnungen: Ausgang, Eingang, Rechnungsansicht, Dokumente, Export (Agent A) */
/* rl- = Liste (Design 8a/8d), rd- = Detail (Design Modern 4d) (die Rechnung selbst: vorlagen.css, rv-), ton- = Statusfarben */

/* Statusfarben (Design Runde 8: Bezahlt grün, Offen gelb, Abgelehnt rot, Neu blau, neutral grau) */
.ton-neutral { --ton-bg: #F1F2F4; --ton-fg: #3A4354; --ton-punkt: #9AA2B1; }
.ton-info { --ton-bg: #EEF1F6; --ton-fg: #17325C; --ton-punkt: #5B7BB0; }
.ton-ok { --ton-bg: #E5F4EB; --ton-fg: #23764A; --ton-punkt: #3E9B66; }
.ton-warn { --ton-bg: #FDF3DE; --ton-fg: #8A5A0B; --ton-punkt: #E3B04B; }
.ton-fehler { --ton-bg: #FBE7E5; --ton-fg: #B5402F; --ton-punkt: #D9534F; }
.ton-text-fehler { color: var(--fehler) !important; }

.rl-badge { display: inline-flex; height: 20px; align-items: center; padding: 0 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--ton-bg, #F1F2F4); color: var(--ton-fg, #3A4354); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ Liste */
.rl-seite { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; overflow: auto; }

.rl-kennzahlen { flex: none; padding: 12px 16px; gap: 9px; }
.rl-kz-kopf { display: flex; align-items: baseline; gap: 8px; }
.rl-kz-titel { font-weight: 600; }
.rl-kz-anzahl { color: var(--text-4); }
.rl-kz-summe { margin-left: auto; font-weight: 600; }
.rl-balken { display: flex; gap: 3px; height: 6px; }
.rl-balken span { border-radius: 999px; min-width: 0; }
.rl-b-ok { background: #3E9B66; }
.rl-b-warn { background: #E3B04B; }
.rl-b-fehler { background: #D9534F; }
.rl-b-leer { flex: 1; background: var(--rand); }
.rl-legende { display: flex; flex-wrap: wrap; gap: 6px 24px; color: var(--text-3); font-size: 12.5px; align-items: center; }
.rl-legende > span { display: flex; align-items: center; gap: 6px; }
.rl-legende b { color: var(--text); font-weight: 600; }
.rl-punkt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rl-probleme { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--fehler); font-weight: 600; text-decoration: none; }
.rl-probleme .icon { width: 13px; height: 13px; }

.rl-kacheln { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rl-kachel { padding: 12px 16px; gap: 2px; }
.rl-kachel-text { color: var(--text-4); font-size: 12px; }
.rl-kachel-wert { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

.rl-liste { flex: 1 0 auto; min-height: 320px; }
.rl-reiterzeile { display: flex; align-items: flex-end; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--rand); min-height: 46px; flex-wrap: wrap; }
.rl-reiter { display: flex; gap: 14px; flex-wrap: wrap; }
.rl-reiter-punkt { height: 38px; padding: 0 4px; display: flex; align-items: center; font-weight: 500; color: var(--text-3); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.rl-reiter-punkt:hover { color: var(--primaer); }
.rl-reiter-punkt.aktiv { color: var(--primaer); box-shadow: inset 0 -2px 0 var(--primaer); }
.rl-reiter-zahl { color: var(--text-5); font-weight: 400; margin-left: 4px; }
.rl-werkzeuge { margin-left: auto; display: flex; gap: 6px; padding: 8px 0; align-items: center; }
.rl-suche { position: relative; width: 220px; }
.rl-suche .icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-5); }
.rl-suche .eingabe { height: 28px; padding-left: 28px; }
.rl-filterknopf { width: 28px; height: 28px; padding: 0; justify-content: center; }
.rl-filterknopf.aktiv { background: var(--primaer-hell); border-color: var(--primaer); }
.rl-anker { position: relative; }
.rl-menue { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 240px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.12); padding: 5px; display: flex; flex-direction: column; }
.rl-menue-punkt { height: 32px; padding: 0 9px; border-radius: 6px; display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; white-space: nowrap; }
.rl-menue-punkt:hover { background: var(--bg); color: var(--text); }
.rl-menue-hinweis { padding: 6px 9px 4px; font-size: 11.5px; color: var(--text-4); border-top: 1px solid var(--rand-fein); margin-top: 3px; }
.rl-filter { width: 280px; padding: 12px; gap: 10px; }
.rl-filter-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rl-filter-knoepfe { display: flex; justify-content: flex-end; gap: 6px; }

.rl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px 0; }
.rl-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 6px 0 9px; border-radius: 999px; background: var(--primaer-hell); color: var(--primaer); font-weight: 500; font-size: 12px; text-decoration: none; }
.rl-chip .icon { width: 12px; height: 12px; }
.rl-chip:hover { background: var(--fokus); }

.rl-raster { display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr) 84px 84px 112px 160px 130px 16px; gap: 12px; padding: 0 10px; align-items: center; }
.rl-kopf { margin: 8px 10px 0; height: 30px; border-radius: 7px; background: var(--feld-grau); font-size: 12px; font-weight: 600; color: var(--text-3); }
.rl-zeilen { padding: 0 10px; }
.rl-zeile { min-height: 38px; padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--rand-fein); color: var(--text); text-decoration: none; }
.rl-zeile:hover { background: #F8F9FA; color: var(--text); }
.rl-zeile > span { min-width: 0; }
.rl-raster > .r { text-align: right; }
.rl-nummer { color: var(--text-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-neu { width: 6px; height: 6px; border-radius: 50%; background: var(--primaer); flex: none; }
.rl-partei { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-grau { color: var(--text-3); }
.rl-betrag { font-weight: 600; white-space: nowrap; }
.rl-durch { text-decoration: line-through; color: var(--text-5); }
.rl-status { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.rl-frist { font-size: 11px; color: var(--text-4); white-space: nowrap; }
.rl-pfeil { color: var(--text-5); display: flex; }
.rl-pfeil .icon { width: 14px; height: 14px; }
.rl-leer { padding: 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-4); text-align: center; }
.rl-leer .icon { width: 28px; height: 28px; color: var(--text-5); }
.rl-leer strong { color: var(--text-2); font-size: 14px; }
.rl-fuss { height: 44px; flex: none; display: flex; align-items: center; padding: 0 16px; gap: 12px; color: var(--text-3); border-top: 1px solid var(--rand-fein); margin-top: auto; }
.rl-blaettern { margin-left: auto; display: flex; gap: 4px; }
.rl-blaettern .knopf { width: 28px; height: 28px; padding: 0; justify-content: center; }
.rl-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-4); }
.rl-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok-icon); }

/* ------------------------------------------------------------------ Detail */
/* Rechnung ansehen zum Arbeiten (Design 11a): Karten links, Seitenspalte rechts (Gegenpartei, Verlauf, Dateien; beim
   Ausgang oben die Kopie als PDF, ausblendbar). Die Rechnung als Blatt gibt es sonst nur beim Drucken (.rd-druck). */
.rd-arbeit { flex: 1; min-height: 0; overflow: auto; padding-block: 16px; }
.rd-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
.rd-raster.mit-dok { grid-template-columns: minmax(0, 1fr) 470px; }
.rd-karten, .rd-seitenkarten { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rd-zurueck { width: 28px; height: 28px; margin-left: -6px; color: var(--text-4); text-decoration: none; }
.rd-zurueck .icon { width: 16px; height: 16px; }
.rd-kopfdaten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.rd-feld { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-feld > :first-child { font-size: 12px; color: var(--text-4); }
.rd-feld > :last-child { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-rot { color: var(--fehler); }
.rd-pruef-summe { font-size: 12.5px; font-weight: 500; }
.rd-pruef-summe.ok { color: #23764A; }
.rd-pruef-summe.warn { color: #8A5A0B; }
.rd-pruef { display: flex; flex-direction: column; }
.rd-pruef-punkt { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rand-fein); }
.rd-pruef-punkt > .icon { width: 16px; height: 16px; flex: none; }
.rd-pruef-punkt > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rd-pruef-punkt.ton-ok > .icon { color: #23764A; }
.rd-pruef-punkt.ton-info > .icon { color: #5B3E8A; }
.rd-pruef-punkt.ton-warn > .icon { color: #B07A12; }
.rd-pruef-punkt.ton-fehler > .icon { color: #B5402F; }
.rd-pruef-titel { font-weight: 600; }
.rd-pruef-text { font-size: 12px; color: var(--text-3); text-wrap: pretty; overflow-wrap: anywhere; }
.rd-pos { display: flex; flex-direction: column; margin: 0 -6px; }
.rd-pos-kopf, .rd-pos-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 96px 120px; gap: 12px; padding: 0 12px; }
.rd-pos-kopf { height: 30px; align-items: center; border-radius: 7px; background: #F6F7F9; font-size: 12px; font-weight: 600; color: var(--text-3); }
.rd-pos-zeile { padding-block: 8px; align-items: center; border-bottom: 1px solid var(--rand-fein); }
.rd-pos-kopf .r, .rd-pos-zeile .r { text-align: right; }
.rd-pos-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rd-pos-text > :first-child { font-weight: 500; text-wrap: pretty; }
.rd-pos-sub { font-size: 12px; color: var(--text-4); }
.rd-pos-mwst { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-pos-betrag { font-weight: 600; white-space: nowrap; }
.rd-summen { align-self: flex-end; width: min(320px, 100%); display: flex; flex-direction: column; gap: 6px; padding: 2px 6px 0 0; }
.rd-summen > div { display: flex; justify-content: space-between; gap: 12px; }
.rd-summen > div > :first-child { color: var(--text-3); }
.rd-summen > div > :last-child { white-space: nowrap; }
.rd-summe-ende { padding-top: 8px; border-top: 1px solid var(--rand); }
.rd-summe-ende > :first-child { color: var(--text) !important; font-weight: 600; }
.rd-summe-ende > :last-child { font-size: 17px; font-weight: 700; }
.rd-pos-hinweise { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-3); padding-top: 8px; border-top: 1px solid var(--rand-fein); }
.rd-formular-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: 10px; }
.rd-partei { display: flex; flex-direction: column; gap: 1px; }
.rd-partei-name { font-weight: 600; font-size: 14px; }
.rd-dok { background: #E9ECF0; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rd-dok-kopf { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; }
.rd-dok-kopf .icon { width: 13px; height: 13px; }
.rd-dok-kopf a { margin-left: auto; color: var(--primaer); font-weight: 600; text-decoration: none; }
/* Blatt auf die Spaltenbreite verkleinert (794 px → 442 px), mit allen Seiten eines Lotto. */
.rd-dok-blatt { zoom: .5567; }
.rd-dok-blatt .rv-papier { gap: 16px; overflow: visible; }
.rd-dok-blatt .rv-blatt { min-width: 794px; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.rd-druck { display: none; }
@media print {
    .hauptbereich .rd-arbeit { display: none !important; }
    .rd-druck { display: block !important; }
}
@media (min-width: 2000px) {
    .rd-raster { grid-template-columns: minmax(0, 1fr) 400px; }
    .rd-raster.mit-dok { grid-template-columns: minmax(0, 1fr) 520px; }
    .rd-dok-blatt { zoom: .6146; }
}

.rd-karte { padding: 16px 18px; gap: 10px; flex: none; }
.rd-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-karte-titel { font-weight: 600; }
.rd-text { margin: 0; color: var(--text-3); line-height: 1.45; font-size: 12.5px; }
.rd-hinweis { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 8px; line-height: 1.45; font-size: 12.5px; }
.rd-hinweis .icon { width: 14px; height: 14px; margin-top: 1px; }
.rd-hinweis.fehler { background: var(--fehler-bg); color: var(--fehler); }
.rd-hinweis.warn { background: var(--warn-bg); color: var(--warn); }
.rd-hinweis.neutral { background: var(--feld-grau); color: var(--text-3); }
.rd-unterkopf { font-size: 12px; font-weight: 600; color: var(--text-3); }
.rd-fehlerliste { display: flex; flex-direction: column; gap: 8px; }
.rd-fehler { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
.rd-fehler > div { display: flex; flex-direction: column; gap: 2px; }
.rd-code { font-weight: 700; color: var(--fehler); font-size: 12.5px; }
.rd-it { font-style: italic; color: var(--text-2); font-size: 12px; line-height: 1.4; }
.rd-de { color: var(--text); font-size: 12.5px; line-height: 1.45; }
.rd-daten { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 12.5px; }
.rd-daten dt { color: var(--text-4); }
.rd-daten dd { margin: 0; }
.rd-umbruch { word-break: break-all; }
.rd-formular { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--rand-fein); }
.rd-zeitleiste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rd-zeitleiste li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; position: relative; padding-bottom: 12px; }
.rd-zeitleiste li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 0; width: 1px; background: var(--rand); }
.rd-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--ton-punkt, #9AA2B1); margin: 4px 0 0 2px; position: relative; z-index: 1; }
.rd-zeitleiste li.erwartet .rd-punkt { background: #fff; border: 1.5px dashed #B4BAC4; }
.rd-zeitleiste li.erwartet .rd-schritt-titel { color: var(--text-4); }
.rd-schritt { display: flex; flex-direction: column; gap: 1px; }
.rd-schritt-titel { font-weight: 500; }
.rd-schritt-text { font-size: 12px; color: var(--text-4); line-height: 1.4; }
.rd-schritt-zeit { font-size: 11.5px; color: var(--text-4); white-space: nowrap; }
.rd-dateien { display: flex; flex-direction: column; gap: 6px; }
.rd-datei { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 9px; border-radius: 8px; background: var(--feld-grau); border: 1px solid var(--feld-grau-rand); }
.rd-datei .icon { width: 14px; height: 14px; color: #6B7486; margin-top: 2px; }
.rd-datei-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rd-datei-text a { font-weight: 500; word-break: break-all; text-decoration: none; }
.rd-datei-text span { font-size: 11.5px; color: var(--text-4); }

@media (max-width: 1180px) {
    .rd-raster, .rd-raster.mit-dok { grid-template-columns: minmax(0, 1fr); }
    .rd-kopfdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rl-raster { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) 80px 104px 140px 120px 12px; }
    .rl-raster > :nth-child(4) { display: none; }
}
@media (max-width: 860px) {
    .rl-raster { grid-template-columns: minmax(0, 1fr) 100px 130px; row-gap: 2px; }
    .rl-kopf { display: none; }
    .rl-raster > :nth-child(1) { grid-column: 1 / -1; font-size: 12px; }
    .rl-raster > :nth-child(3), .rl-raster > :nth-child(7), .rl-raster > :nth-child(8) { display: none; }
    .rl-kacheln { grid-template-columns: 1fr; }
    .rl-suche { width: 160px; }
}