/* ==========================================================================
   Baukasten: Angebote und Rechnungen (Positionseditor, Kunde/Projekt-Auswahl).
   Farben nur über Klassen (CSP: keine Inline-Styles).
   ========================================================================== */

.waehlen-karte { max-width: 640px; }
.waehlen-zurueck { margin-bottom: 12px; }

.pos-editor { display: flex; flex-direction: column; gap: 12px; }
.pos-tabelle { width: 100%; border-collapse: collapse; }
.pos-tabelle th { text-align: left; padding: 6px 8px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.pos-tabelle td { padding: 6px 8px; vertical-align: top; border-top: 1px solid var(--border); }
.pos-c-nr { width: 56px; text-align: center; }
.pos-c-typ { width: 150px; }
.pos-c-menge { width: 76px; }
.pos-c-preis { width: 130px; }
.pos-c-inhalt { min-width: 260px; }
.pos-c-loeschen { width: 38px; text-align: center; }

.pos-nr { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pos-nr-zahl { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.86rem; }
.pos-nr-knoepfe { display: flex; gap: 2px; }
.pos-nr-knoepfe button {
    display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
    color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.pos-nr-knoepfe button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.pos-nr-knoepfe button:disabled { opacity: 0.35; cursor: default; }

.pos-produktauswahl { width: 100%; margin-bottom: 6px; }
.pos-titel { width: 100%; margin-bottom: 6px; }
.pos-beschreibung { width: 100%; resize: vertical; }
.pos-menge, .pos-preis { width: 100%; }

.pos-zeile--leer[hidden] { display: none; }

@media (max-width: 720px) {
    .pos-tabelle, .pos-tabelle tbody, .pos-tabelle tr, .pos-tabelle td { display: block; width: 100%; }
    .pos-tabelle thead { display: none; }
    .pos-tabelle tr { padding: 10px 0; border-top: 1px solid var(--border); }
    .pos-tabelle td { border-top: 0; padding: 4px 0; }
}