/* Bereich Verkauf: Kunden, Artikel, Entwürfe, Neue Rechnung, Senden (Agent B). Design Runde 9/10, Stil Runde 12. */

.vk-seite { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.vk-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: contents; }
.vk-grau { color: var(--text-5); }
.vk-fett { font-weight: 600; }
.vk-rechts { margin-left: auto; }
.vk-rot { color: var(--fehler); width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; }
.vk-ellipse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vk-leer { color: var(--text-4); }
.rechts { text-align: right; justify-content: flex-end; }
.vk-zurueck { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #6B7486; }
.vk-zurueck:hover { background: var(--bg); color: var(--text); }
.vk-marke { font-size: 11px; font-weight: 600; padding: 0 6px; line-height: 17px; border-radius: 4px; background: var(--primaer-hell); color: var(--primaer); flex: none; }

/* Listen */
.vk-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vk-filter-text { color: var(--text-4); margin-left: auto; }
.vk-suche { position: relative; width: 300px; max-width: 100%; }
.vk-suche .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-5); width: 13px; height: 13px; }
.vk-suche .eingabe { padding-left: 30px; }
.vk-liste { padding: 6px 10px 8px; }
.vk-zeile { display: grid; gap: 12px; align-items: center; min-height: 40px; padding: 0 10px; border-bottom: 1px solid var(--rand-fein); color: var(--text); text-decoration: none; }
.vk-zeile > * { min-width: 0; }
a.vk-zeile:hover { background: var(--feld-grau); color: var(--text); }
.vk-zeile.vk-kopf { min-height: 30px; border-radius: 7px; background: var(--feld-grau); border: 0; font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.vk-zeile.inaktiv { opacity: .55; }
.vk-kunden-raster { grid-template-columns: minmax(0, 2.2fr) 90px minmax(0, 1.2fr) minmax(0, 1.2fr) 100px; }
.vk-artikel-raster { grid-template-columns: 110px minmax(0, 2fr) minmax(0, 1.2fr) 70px 110px 100px; }
.vk-entwurf-raster { grid-template-columns: 130px 90px 56px minmax(0, 1.6fr) 110px 150px minmax(0, 1fr) 32px; }
.vk-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.vk-code { font-weight: 600; color: var(--text-2); }
.vk-typ { font-size: 11px; font-weight: 600; padding: 0 7px; line-height: 19px; border-radius: 5px; flex: none; }
.vk-typ-f { background: #EEF1F6; color: #17325C; }
.vk-typ-p { background: #F3EFF8; color: #5B3E8A; }
.vk-typ-pa { background: var(--ok-bg); color: var(--ok); }
.vk-typ-eu { background: var(--warn-bg); color: var(--warn); }
.vk-typ-x { background: var(--rand-fein); color: var(--text-2); }
.vk-leer-gross { padding: 32px 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--text-4); }
.vk-leer-gross strong { color: var(--text); font-size: 14px; }
.vk-zweispaltig { flex-direction: row; align-items: flex-start; }
.vk-zweispaltig .unternav { width: 232px; flex: none; position: sticky; top: 0; }
.vk-spalte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vk-knopf-rein { border: 0; background: none; text-align: left; cursor: pointer; font: inherit; width: 100%; }
.vk-unter { padding-left: 26px; font-weight: 400; }
.vk-zahl { margin-left: auto; font-size: 12px; color: var(--text-5); flex: none !important; }

.vk-status { font-size: 11.5px; font-weight: 600; padding: 0 7px; line-height: 19px; border-radius: 5px; background: var(--rand-fein); color: var(--text-3); white-space: nowrap; }
.vk-status-festgeschrieben { background: var(--primaer-hell); color: var(--primaer); }
.vk-status-sendet { background: var(--warn-bg); color: var(--warn); }
.vk-status-gesendet { background: var(--ok-bg); color: var(--ok); }
.vk-status-unklar { background: var(--fehler-bg); color: var(--fehler); }

/* Formulare mit Reitern (Kunde) */
.vk-reiter { display: flex; gap: 22px; padding: 0 24px; border-bottom: 1px solid var(--rand); align-items: center; flex-wrap: wrap; }
.vk-reiter > button { height: 42px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; color: var(--text-3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; padding: 0; }
.vk-reiter > button.aktiv { font-weight: 600; color: var(--primaer); border-bottom-color: var(--primaer); }
.vk-reiter-zahl { font-size: 12px; color: var(--text-5); font-weight: 500; }
.vk-reiter-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--text-4); font-size: 12px; }
.vk-kontakt-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) 90px 24px; align-items: center; }
.vk-haken { display: flex; align-items: center; gap: 6px; color: var(--text-3); cursor: pointer; }
.vk-haken input { accent-color: var(--primaer); width: 15px; height: 15px; }
.vk-code-zeile { display: grid; grid-template-columns: 120px minmax(0, 260px) 24px; gap: 6px; align-items: center; }
.vk-zaehler { font-size: 11.5px; color: var(--text-5); align-self: flex-end; }
.vk-zaehler.warn { color: var(--fehler); }
.vk-gross { text-transform: uppercase; font-weight: 600; }
.vk-mini-liste { display: flex; flex-direction: column; }
.vk-mini-zeile { display: grid; grid-template-columns: 130px 90px 56px minmax(0, 1fr) 140px; gap: 10px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--rand-fein); color: var(--text); text-decoration: none; }
.vk-mini-zeile:hover { background: var(--feld-grau); color: var(--text); }

/* Neue Rechnung */
.vk-band { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--primaer-hell); color: var(--primaer); line-height: 1.4; flex-wrap: wrap; }
.vk-band > span { flex: 1; min-width: 220px; }
.vk-band .icon { width: 15px; height: 15px; }
.vk-band a { font-weight: 600; }
.vk-band.ok { background: var(--ok-bg); color: var(--ok); }
.vk-band.warn { background: var(--warn-bg); color: var(--warn); }
.vk-band.fehler { background: var(--fehler-bg); color: var(--fehler); }

.vk-bericht { padding: 12px 16px; gap: 10px; }
.vk-bericht-kopf { display: flex; align-items: center; gap: 8px; }
.vk-bericht-titel { display: flex; align-items: center; gap: 8px; font-weight: 600; flex: 1; }
.vk-bericht-titel.fehler { color: var(--fehler); }
.vk-bericht-titel.ok { color: var(--ok); }
.vk-bericht-gruppe { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 16px; padding-top: 8px; border-top: 1px solid var(--rand-fein); }
.vk-bericht-bereich { grid-row: span 50; font-weight: 600; color: var(--text-3); font-size: 12px; padding-top: 2px; }
.vk-bericht-eintrag { display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; color: var(--text-2); grid-column: 2; }
.vk-bericht-eintrag .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--text-5); }
.vk-bericht-eintrag.fehler { color: var(--fehler); }
.vk-bericht-eintrag.fehler .icon { color: var(--fehler); }

.vk-kopfkarte { padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.vk-label-zeile { display: flex; align-items: center; }
.vk-label-aktion { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--primaer); cursor: pointer; font-size: 12px; border: 0; background: none; padding: 0; font-weight: 600; }
.vk-label-aktion .icon { width: 12px; height: 12px; }
.vk-meta { font-size: 12px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
select.vk-fett { font-weight: 600; }
.vk-nummer { font-weight: 600; }
.vk-vorlaeufig { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-5); }

.vk-karten-kopf { display: flex; align-items: center; gap: 8px; }
.vk-karten-titel { font-weight: 600; font-size: 14px; }
.vk-positionen { padding: 12px 10px 4px; }
.vk-positionen > .vk-karten-kopf { padding: 0 6px 8px; }
.vk-pos-raster { display: grid; grid-template-columns: 28px 104px minmax(0, 1fr) 72px 70px 100px 84px 116px 104px 84px; gap: 8px; padding: 0 10px; position: relative; }
.vk-pos-kopf { height: 30px; align-items: center; border-radius: 7px; background: var(--feld-grau); font-size: 12px; font-weight: 600; color: var(--text-3); }
.vk-pos { border-radius: 8px; border-bottom: 1px solid var(--rand-fein); }
.vk-pos.offen { background: var(--feld-grau); border-bottom-color: transparent; margin: 2px 0; }
.vk-pos-zeile { padding-top: 6px; padding-bottom: 6px; align-items: start; }
.vk-pos-nr { height: 28px; display: flex; align-items: center; }
.vk-zelle { height: 28px; border-radius: 6px; border-color: transparent; background: transparent; padding: 0 8px; }
.vk-pos:hover .vk-zelle, .vk-pos.offen .vk-zelle { border-color: var(--eingabe-rand); background: #fff; }
.vk-zelle:focus { background: #fff; }
.vk-zelle.ungueltig { border-color: var(--fehler); }
.vk-pos-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vk-pos-meta { display: flex; align-items: center; gap: 6px; padding: 0 9px; font-size: 12px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-rabatt { cursor: pointer; text-align: right; white-space: nowrap; overflow: hidden; }
.vk-betrag { height: 28px; display: flex; align-items: center; justify-content: flex-end; font-weight: 600; white-space: nowrap; }
.vk-betrag.negativ { color: var(--fehler); }
.vk-pos-knoepfe { height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.knopf-x.aktiv { background: var(--fokus); color: var(--primaer); }
.vk-vorschlag { position: absolute; top: 38px; left: 48px; width: 560px; max-width: calc(100% - 60px); z-index: 30; background: #fff; border-radius: 10px; border: 1px solid var(--rand); box-shadow: 0 12px 32px rgba(16,24,40,.14); padding: 5px; display: flex; flex-direction: column; }
.vk-vorschlag-kopf { display: flex; align-items: center; gap: 6px; padding: 4px 9px 6px; font-size: 11.5px; color: var(--text-5); }
.vk-vorschlag-kopf .icon { width: 12px; height: 12px; }
.vk-vorschlag-zeile { height: 32px; padding: 0 9px; border-radius: 6px; display: grid; grid-template-columns: 96px minmax(0, 1fr) 52px 90px; gap: 10px; align-items: center; cursor: pointer; border: 0; background: none; text-align: left; font: inherit; color: var(--text); }
.vk-vorschlag-zeile:hover { background: var(--bg); }
.vk-pos-details { margin: 0 10px 10px 48px; background: #fff; border: 1px solid #E3E6EB; border-radius: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.04); display: flex; flex-direction: column; }
.vk-details-zeile { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 12px 16px; }
.vk-details-zeile + .vk-details-zeile { border-top: 1px solid var(--feld-grau-rand); }
.vk-details-titel { display: flex; flex-direction: column; gap: 2px; }
.vk-details-titel span:first-child { font-size: 12px; font-weight: 600; }
.vk-details-titel span:last-child { font-size: 11.5px; color: var(--text-5); }
.vk-stapel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vk-rabatt-zeile { display: grid; grid-template-columns: max-content 110px 24px; gap: 8px; align-items: center; }
.vk-zeile-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vk-chip { height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--eingabe-rand); background: #fff; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text-2); font: inherit; font-weight: 500; }
.vk-chip .icon { width: 12px; height: 12px; }
.vk-chip.an { border-color: var(--primaer); background: var(--primaer-hell); color: var(--primaer); }
.vk-pos-fuss { display: flex; gap: 10px; align-items: center; padding: 8px 10px 10px; }
.vk-pos-fuss .knopf-link { margin-left: 0; }
.vk-aus-stamm { width: 280px; height: 28px; color: var(--text-3); }

.vk-zusatz { padding: 14px 16px 10px; gap: 10px; }
.vk-zusatz-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vk-zusatz-gruppe { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vk-zusatz-kopf { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--text-5); padding: 0 8px 4px; text-transform: uppercase; }
.vk-zusatz-punkt { height: 32px; padding: 0 8px; border-radius: 7px; display: flex; align-items: center; gap: 9px; cursor: pointer; min-width: 0; border: 0; background: none; font: inherit; color: var(--text); text-align: left; }
.vk-zusatz-punkt:hover { background: var(--bg); }
.vk-zusatz-punkt .icon { width: 14px; height: 14px; color: var(--text-5); }
.vk-zusatz-name { white-space: nowrap; }
.vk-zusatz-wert { margin-left: auto; font-size: 12px; color: var(--platzhalter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vk-zusatz-punkt.aktiv .icon { color: var(--primaer); }
.vk-zusatz-punkt.aktiv .vk-zusatz-name { font-weight: 600; }
.vk-zusatz-punkt.aktiv .vk-zusatz-wert { color: var(--text); }
.vk-zusatz-punkt.empfohlen .vk-zusatz-wert { color: var(--warn); }
.vk-zusatz-punkt.fehler .vk-zusatz-wert, .vk-zusatz-punkt.fehler .icon { color: var(--fehler); }

.vk-unten { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; align-items: start; }
.vk-zahlung, .vk-berechnung { padding: 14px 16px; gap: 10px; }
.vk-raten { display: flex; flex-direction: column; }
.vk-raten-zeile { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 12px; padding: 0 10px; min-height: 32px; align-items: center; border-bottom: 1px solid var(--rand-fein); }
.vk-raten-zeile.vk-pos-kopf { min-height: 28px; height: 28px; border-bottom: 0; }
.vk-berechnung { gap: 7px; }
.vk-rechen-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vk-rechen-zeile > span:first-child { color: var(--text-3); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vk-rechen-zeile small { font-size: 11.5px; color: var(--text-5); }
.vk-rechen-zeile > span:last-child { white-space: nowrap; }
.vk-summe, .vk-zahlbetrag { padding-top: 8px; border-top: 1px solid var(--rand); }
.vk-summe > span, .vk-zahlbetrag > span:first-child { font-weight: 600; color: var(--text) !important; }
.vk-zahlbetrag > span:last-child { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

/* Dialoge */
.vk-schleier { position: fixed; inset: 0; background: rgba(16,24,40,.28); z-index: 60; }
.vk-dialog { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); z-index: 61; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(16,24,40,.25); display: flex; flex-direction: column; overflow: hidden; }
.vk-dialog.breit { width: 920px; }
.vk-dialog-hoch { height: calc(100vh - 96px); }
.vk-dialog-kopf { padding: 16px 20px 4px; display: flex; align-items: flex-start; gap: 12px; }
.vk-dialog-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--primaer-hell); color: var(--primaer); display: flex; align-items: center; justify-content: center; flex: none; }
.vk-dialog-titel { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vk-dialog-titel strong { font-size: 15px; font-weight: 600; }
.vk-dialog-titel span { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.vk-dialog-rumpf { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; overflow: auto; }
.vk-dialog-scroll { flex: 1; min-height: 0; overflow: auto; }
.vk-dialog-fuss { padding: 12px 20px; border-top: 1px solid var(--rand-fein); display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.vk-dialog-fuss .vk-grau { margin-right: auto; font-size: 12px; }
.vk-werte { display: flex; gap: 28px; flex-wrap: wrap; border-radius: 8px; background: var(--feld-grau); padding: 10px 12px; }
.vk-werte span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-4); }
.vk-werte strong { font-size: 13px; color: var(--text); font-weight: 600; }
.vk-causale { min-height: 96px; }
.vk-ablage { border: 1.5px dashed #D5D9E0; border-radius: 10px; padding: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); cursor: pointer; }
.vk-ablage:hover { background: var(--feld-grau); }
.vk-anhang { height: 32px; padding: 0 10px; border-radius: 7px; background: var(--feld-grau); display: flex; align-items: center; gap: 8px; }
.vk-anhang .knopf-x { margin-left: auto; }
.vk-bezug-raster { display: grid; grid-template-columns: 170px minmax(0, 1fr) 140px 110px 140px 80px 24px; gap: 6px; align-items: center; }
.vk-bezug-raster.vk-pos-kopf { height: auto; background: none; padding: 0; }

@media (max-width: 1180px) {
    .vk-pos-raster { grid-template-columns: 24px 84px minmax(0, 1fr) 60px 56px 90px 64px 96px 92px 72px; gap: 6px; }
    .vk-unten { grid-template-columns: minmax(0, 1fr); }
    .vk-kunden-raster { grid-template-columns: minmax(0, 2fr) 80px minmax(0, 1fr) minmax(0, 1fr); }
    .vk-kunden-raster > :nth-child(5) { display: none; }
    .vk-entwurf-raster { grid-template-columns: 120px 84px 50px minmax(0, 1fr) 100px 130px 32px; }
    .vk-entwurf-raster > :nth-child(7) { display: none; }
}
@media (max-width: 860px) {
    .vk-kopfkarte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vk-zusatz-raster { grid-template-columns: minmax(0, 1fr); }
    .vk-zweispaltig { flex-direction: column; align-items: stretch; }
    .vk-zweispaltig .unternav { width: auto; position: static; flex-direction: row; flex-wrap: wrap; }
    .vk-pos-raster.vk-pos-kopf { display: none; }
    .vk-pos-zeile { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    .vk-pos-zeile > .vk-pos-text { grid-column: 2 / -1; }
    .vk-pos-details { margin-left: 10px; }
    .vk-details-zeile { grid-template-columns: minmax(0, 1fr); }
    .vk-artikel-raster { grid-template-columns: 90px minmax(0, 1fr) 90px; }
    .vk-artikel-raster > :nth-child(3), .vk-artikel-raster > :nth-child(4), .vk-artikel-raster > :nth-child(6) { display: none; }
    .vk-bezug-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}