/* Modul Faktura (Offerten & Rechnungen) – Stile, siehe docs/FAKTURA.md §9. Präfix fk-. Nur Tokens aus theme.css. Mobile first. */

/* ------------------------------------------------------------------ Allgemein */
.fk-page { gap: 14px; }
.fk-pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 .6em; }
.fk-pre:last-child { margin-bottom: 0; }
.fk-tone-danger { color: var(--danger); font-weight: 600; }
.fk-tone-warning { color: var(--warning); font-weight: 600; }
.fk-tone-success { color: var(--success); font-weight: 600; }
.fk-ref { font-size: var(--fs-sm); letter-spacing: .02em; overflow-wrap: anywhere; }
.fk-neg { color: var(--danger); }
.fk-inline-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--brand); cursor: pointer; }
.fk-inline-link:hover { text-decoration: underline; }
.fk-empty-line { margin: 0; }
.fk-card-lead { display: flex; gap: 6px; align-items: flex-start; margin: -4px 0 12px; }
.fk-card-lead .icon { margin-top: 2px; }
.fk-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fk-btn-success { background: var(--success); color: var(--success-contrast); }
.fk-btn-success:hover:not(:disabled) { filter: brightness(.95); }
.fk-setup-hint a { font-weight: 600; color: inherit; text-decoration: underline; }
.fk-form-error { margin: 0; }

/* Status-Punkte (Filter-Chips) und Zähler */
.fk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-faint); }
.fk-dot-info { background: var(--info); }
.fk-dot-danger { background: var(--danger); }
.fk-dot-success { background: var(--success); }
.fk-dot-warning { background: var(--warning); }
.fk-dot-brand { background: var(--brand); }
.fk-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1;
}
.chip.is-active .fk-count { background: var(--brand); color: var(--brand-contrast); }
.fk-status-cancelled { text-decoration: line-through; }

/* ------------------------------------------------------------------ Unter-Navigation (nur Handy) */
.fk-nav {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 20;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin: -16px -14px 0; padding: 4px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.fk-nav::-webkit-scrollbar { display: none; }
.fk-nav-link {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 999px;
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; text-decoration: none !important;
}
.fk-nav-link:hover { background: var(--surface-2); color: var(--text); }
.fk-nav-link.is-active { background: var(--brand-soft); color: var(--brand-strong); }
.fk-nav-link.is-active .icon { color: var(--brand); }
@media (min-width: 900px) { .fk-nav { display: none; } }

/* ------------------------------------------------------------------ Kopf, Filter, Listen */
.fk-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 599px) {
  .fk-page .page-actions { width: 100%; }
  .fk-head-actions { width: 100%; }
  .fk-head-actions > .btn { flex: 1 1 0; min-width: 0; }
  .fk-head-actions-wrap > .btn { flex: 1 1 100%; }
  .fk-head-actions > .btn > span { overflow: hidden; text-overflow: ellipsis; }
  /* Hauptaktion über die ganze Breite, Nebenaktionen + Menü darunter */
  .fk-head-actions:not(.fk-head-keep) > .btn-primary { order: -1; flex: 1 1 100%; }
}
.fk-filters { display: flex; flex-direction: column; gap: 10px; }
.fk-filters .ad-search { flex: none; max-width: none; } /* admin.css: flex-basis 240px wäre hier die Höhe */
.fk-chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
.fk-chips::-webkit-scrollbar { display: none; }
.fk-chips .chip { flex: none; }
@media (min-width: 900px) {
  .fk-filters { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .fk-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .fk-filters .ad-search { width: 280px; flex: none; }
}

.fk-list-card { overflow: hidden; }
.fk-list-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  grid-template-areas: "no amount" "main main" "status status";
  padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none !important;
}
.fk-list-row:hover { background: var(--surface-2); }
.fk-list-row:last-child { border-bottom: 0; }
.fk-cell-no { grid-area: no; font-weight: 650; font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fk-no { font-weight: 650; font-variant-numeric: tabular-nums; flex: none; }
.fk-cell-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.fk-row-title { font-weight: 650; }
.fk-row-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.fk-cell-amount { grid-area: amount; font-weight: 650; }
.fk-cell-status { grid-area: status; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.fk-cell-date, .fk-cell-valid, .fk-row-caret { display: none; }
.fk-list-row.is-declined .fk-row-title, .fk-list-row.is-declined .fk-cell-amount { color: var(--text-muted); }
.fk-list-head { display: none; }
.fk-list-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface-2); border-top: 1px solid var(--border); font-size: var(--fs-sm);
}
.fk-list-card { container-type: inline-size; }
@media (min-width: 900px) {
  .fk-cols-offers { grid-template-columns: 110px minmax(0, 1fr) 100px 100px 190px 130px 18px; grid-template-areas: none; }
  /* schmale Karte (Seitenleiste sichtbar, 900–~1250 px): ohne Datum/Gültig bis, damit «Titel · Kunde» Platz hat */
  @container (max-width: 960px) {
    .fk-cols-offers { grid-template-columns: 96px minmax(0, 1fr) 150px 120px 18px; }
    .fk-cols-offers > :nth-child(3), .fk-cols-offers > :nth-child(4) { display: none; }
  }
  .fk-list-head {
    display: grid; gap: 12px; padding: 9px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  }
  .fk-list-row { gap: 12px; padding: 10px 16px; min-height: 56px; }
  .fk-list-row > * { grid-area: auto; }
  .fk-cell-no { color: var(--text); }
  .fk-cell-date, .fk-cell-valid { display: block; font-size: var(--fs-sm); }
  .fk-cell-status { margin: 0; }
  .fk-row-caret { display: block; color: var(--text-faint); }
}

/* Rechnungsliste (erweitert die Tabelle aus reports.css) */
.fk-click { cursor: pointer; }
.fk-no-link { color: var(--text); }
.fk-inv-table td small { display: block; }
/* Nummer nie umbrechen, Datum · Titel darunter gekürzt (ganzer Titel im Tooltip) – bestimmt nicht die Spaltenbreite */
.fk-inv-table .rp-inv-no strong { white-space: nowrap; }
.fk-inv-table .fk-inv-sub { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-inv-table th:nth-child(2) { min-width: 180px; }
.fk-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fk-status-cell .badge { margin-top: 0; }
.fk-inv-table tr.is-cancelled td:not(.rp-actions-col) { color: var(--text-muted); }
@media (max-width: 1299px) {
  .fk-inv-table .rp-col-wide, .fk-inv-table .fk-col-wide-btn { display: none; }
}
.fk-inv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rp-inv-title { color: var(--text); text-decoration: none !important; }
.rp-inv-actions a.btn { flex: 1; }

/* ------------------------------------------------------------------ Detailseite (Offerte/Rechnung) */
.fk-doc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: -10px; min-width: 0; }
.fk-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.fk-doc-main, .fk-doc-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) {
  .content:has(> .fk-doc-page) { max-width: 1280px; }
  .fk-doc { grid-template-columns: minmax(0, 1fr) 340px; }
}
/* Entwurf: Positionen über die ganze Breite; am Handy Kopf → Positionen → Texte → Empfänger → Notiz */
.fk-draft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.fk-area-head { order: 1; }
.fk-area-items { order: 2; }
.fk-area-texts { order: 3; }
.fk-area-recipient { order: 4; }
.fk-area-side { order: 5; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) {
  .fk-draft { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "head recipient" "items items" "texts side"; }
  .fk-area-head { grid-area: head; align-self: stretch; }
  .fk-area-recipient { grid-area: recipient; align-self: stretch; }
  .fk-area-items { grid-area: items; }
  .fk-area-texts { grid-area: texts; }
  .fk-area-side { grid-area: side; }
}
.fk-head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 600px) { .fk-head-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fk-field-narrow { flex: 0 1 180px; }
.fk-toggle-row { padding: 2px 0; }
.fk-notes { gap: 8px; }
.fk-notes-actions { display: flex; justify-content: flex-end; }
.fk-inline-form { display: flex; gap: 8px; }
.fk-inline-form .input { flex: 1; min-width: 0; }

/* Status-Hinweis (gesendet, angenommen, abgelehnt, über bexio) */
.fk-banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); border: 1px solid transparent;
}
.fk-banner .icon { margin-top: 1px; }
.fk-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk-banner-text > span { font-size: var(--fs-sm); }
.fk-banner-info { background: var(--info-soft); color: var(--info); }
.fk-banner-warning { background: var(--warning-soft); color: var(--warning); }
.fk-banner-success { background: var(--success-soft); color: var(--success); }
.fk-banner-danger { background: var(--danger-soft); color: var(--danger); }
.fk-banner a { color: inherit; font-weight: 650; text-decoration: underline; }
.fk-banner .fk-inline-link { color: inherit; text-decoration: underline; }

/* Kennzahlen einer gestellten Rechnung */
.fk-hero { display: flex; flex-direction: column; gap: 12px; }
.fk-hero.is-overdue { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.fk-hero.is-paid { box-shadow: inset 4px 0 0 var(--success); }
.fk-hero.is-open { box-shadow: inset 4px 0 0 var(--info); }
.fk-hero-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fk-hero-figures > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk-hero-figures > div:first-child { grid-column: 1 / -1; }
.fk-hero-value { font-size: var(--fs-xxl); font-weight: 700; letter-spacing: -.01em; text-align: left; }
.fk-hero-sub { font-size: var(--fs-lg); font-weight: 650; text-align: left; }
@media (min-width: 600px) {
  .fk-hero-figures { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .fk-hero-figures > div:first-child { grid-column: auto; }
}
.fk-hero-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); padding-top: 10px; border-top: 1px solid var(--border); }
.fk-hero-note > span { flex: 1 1 200px; }

/* Infos */
.fk-facts { display: flex; flex-direction: column; margin: 0; }
.fk-fact { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.fk-fact:last-child { border-bottom: 0; }
.fk-fact dt { color: var(--text-muted); }
.fk-fact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Zeilen (Zahlungen, Mahnungen, offene Posten) */
.fk-rows { list-style: none; margin: 0; padding: 0; }
/* Wird es für den Text zu eng (Betrag, PDF, Menü, Löschen am Handy), rutschen Betrag und Knöpfe rechtsbündig auf
   eine zweite Zeile, statt den Text buchstabenweise umzubrechen */
.fk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.fk-row:last-child { border-bottom: 0; }
.fk-rows-flush .fk-row { padding: 10px 8px 10px 16px; }
.fk-open-items > .card-head { padding: 14px 16px 2px; margin: 0; }
.fk-open-items > .empty { padding-top: 24px; }
.fk-row.is-overdue { box-shadow: inset 3px 0 0 var(--danger); }
.fk-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 8em; min-width: 0; color: var(--text); text-decoration: none !important; }
a.fk-row-main:hover .fk-row-title { color: var(--brand); }
.fk-row-main .fk-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.fk-row-main .fk-row-title > span:first-child { white-space: nowrap; }   /* «1. Mahnung» bleibt zusammen */
.fk-row-main .fk-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; overflow-wrap: anywhere; min-width: 0; }
.fk-row > strong.num, .fk-row > .btn, .fk-row > .btn-icon { flex: none; }
.fk-row > strong.num { margin-left: auto; }
.fk-row-actions { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.fk-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; margin-left: auto; }
.fk-dunning-row { flex-wrap: wrap; }
@media (max-width: 599px) {
  .fk-dunning-row > .btn { flex: 1 1 100%; }
}
.fk-mini-list { list-style: none; margin: 0; padding: 0; }
.fk-mini-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.fk-mini-list li:last-child { border-bottom: 0; }
.fk-mini-list li > strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; }

/* Kennzahlen (Zahlungen) */
.fk-kpi-head { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.fk-kpi .stat-value { font-size: var(--fs-lg); overflow-wrap: anywhere; }
@media (min-width: 900px) { .fk-kpi .stat-value { font-size: var(--fs-xl); } }
.fk-kpi-danger .stat-value { color: var(--danger); }
.fk-kpi-warning .stat-value { color: var(--warning); }

/* ------------------------------------------------------------------ Positionseditor */
.fk-items { display: flex; flex-direction: column; gap: 10px; }
.fk-items-list { display: flex; flex-direction: column; gap: 10px; }
.fk-items-head { display: none; }
.fk-item {
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.2fr) minmax(0, 1.1fr); gap: 8px 10px; align-items: end;
  grid-template-areas: "pos pos tools" "desc desc desc" "qty unit price" "amount amount amount";
  padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.fk-item.is-text { grid-template-areas: "pos pos tools" "desc desc desc"; background: var(--surface-2); }
.fk-item.is-locked { grid-template-areas: "pos pos tools" "desc desc desc" "fixed fixed fixed" "amount amount amount"; }
.fk-item.has-error { border-color: var(--danger); }
.fk-item-pos { grid-area: pos; display: flex; align-items: center; gap: 8px; align-self: center; min-width: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); }
.fk-pos-no { display: none; }
.fk-item.is-text .fk-pos-no { display: inline-flex; color: var(--text-faint); }
.fk-item-desc { grid-area: desc; min-width: 0; }
.fk-grow { min-height: 44px; resize: none; overflow: hidden; line-height: 1.4; }
textarea.input.fk-grow { min-height: 44px; resize: none; }
.fk-text-title { font-weight: 650; }
.fk-item-qty { grid-area: qty; }
.fk-item-unit { grid-area: unit; }
.fk-item-price { grid-area: price; }
.fk-item-qty, .fk-item-unit, .fk-item-price { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fk-item-unit .input { padding-left: 8px; padding-right: 6px; }   /* «pauschal» + Auswahlpfeil passen auch bei 375 px */
.fk-mini-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.fk-items .input.num { text-align: right; }
.fk-items .input.is-invalid, .fk-items textarea.is-invalid { border-color: var(--danger); }
.fk-item-amount { grid-area: amount; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 2px; }
.fk-item-amount strong { font-size: var(--fs-lg); }
.fk-item-fixed { grid-area: fixed; display: flex; flex-direction: column; gap: 4px; }
.fk-fixed-val { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.fk-item-tools { grid-area: tools; display: flex; justify-content: flex-end; align-items: center; gap: 2px; align-self: center; }
.fk-lock { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--text-faint); }
.fk-item-del:hover:not(:disabled) { color: var(--danger); }
.fk-item-error { grid-column: 1 / -1; margin: 0; }
.fk-items-empty { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.fk-items-empty .icon { margin-top: 2px; }
.fk-items-add { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 599px) { .fk-items-add > .btn { flex: 1 1 0; } }
@media (pointer: coarse), (max-width: 899px) {
  .fk-lock { width: var(--tap); height: var(--tap); }
}
/* Tabellenzeile erst, wenn die Karte breit genug ist (nicht schon ab 900 px Fenster – mit Seitenleiste bliebe der
   Beschreibung sonst zu wenig Platz); darunter die Kartenansicht wie am Handy */
.fk-items { container-type: inline-size; }
@container (min-width: 800px) {
  .fk-items-head, .fk-item { --fk-cols: 30px minmax(200px, 1fr) 72px 112px 112px 110px 104px; }
  .fk-items-head {
    display: grid; grid-template-columns: var(--fk-cols); gap: 8px; padding: 0 0 6px;
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
  }
  .fk-items-list { gap: 0; }
  .fk-item {
    grid-template-columns: var(--fk-cols); gap: 8px; align-items: start;
    grid-template-areas: "pos desc qty unit price amount tools";
    padding: 8px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none;
  }
  .fk-item.is-text { grid-template-areas: "pos desc desc desc desc desc tools"; background: none; }
  .fk-item.is-locked { grid-template-areas: "pos desc fixed fixed fixed amount tools"; }
  .fk-item.has-error { border-color: var(--border); box-shadow: inset 3px 0 0 var(--danger); }
  .fk-item-pos { align-self: start; padding-top: 10px; }
  .fk-pos-no { display: inline-flex; }
  .fk-item-kind { display: none; }
  .fk-mini-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fk-item-amount { justify-content: flex-end; padding-top: 10px; }
  .fk-item-amount strong { font-size: var(--fs); }
  .fk-item-fixed { padding-top: 10px; }
  .fk-item-tools { align-self: start; padding-top: 4px; }
  .fk-grow { min-height: 40px; }
  textarea.input.fk-grow { min-height: 40px; }
}

/* Summen wie auf dem PDF */
.fk-totals { display: flex; flex-direction: column; width: 100%; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fk-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.fk-total-row + .fk-total-row { border-top: 1px solid var(--border); }
.fk-total-gross { font-weight: 700; font-size: var(--fs-lg); border-top: 1px solid var(--border-strong) !important; border-bottom: 3px double var(--text); padding: 8px 0 6px; }
@media (min-width: 600px) { .fk-totals { align-self: flex-end; max-width: 380px; } }

/* Positionen (nur lesen) */
.fk-ro-list { display: flex; flex-direction: column; }
.fk-ro-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px;
  grid-template-areas: "pos desc amount" ". qty price"; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.fk-ro-head { display: none; }
.fk-ro-pos { grid-area: pos; color: var(--text-muted); font-size: var(--fs-sm); padding-top: 1px; }
.fk-ro-desc { grid-area: desc; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.fk-ro-amount { grid-area: amount; font-weight: 650; }
.fk-ro-qty { grid-area: qty; text-align: left; font-size: var(--fs-sm); color: var(--text-muted); }
.fk-ro-price { grid-area: price; font-size: var(--fs-sm); color: var(--text-muted); }
.fk-ro-price:not(:empty)::before { content: 'à '; }
.fk-ro-row.is-text { grid-template-areas: "pos desc desc"; }
.fk-ro-row.is-text .fk-ro-desc { font-weight: 650; padding-top: 6px; }
@media (min-width: 900px) {
  .fk-ro-row { grid-template-columns: 34px minmax(0, 1fr) 110px 120px 130px; grid-template-areas: "pos desc qty price amount"; gap: 10px; }
  .fk-ro-head {
    display: grid; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong); padding-top: 0;
  }
  .fk-ro-head > :nth-child(1) { grid-area: pos; } .fk-ro-head > :nth-child(2) { grid-area: desc; }
  .fk-ro-head > :nth-child(3) { grid-area: qty; } .fk-ro-head > :nth-child(4) { grid-area: price; } .fk-ro-head > :nth-child(5) { grid-area: amount; }
  .fk-ro-qty { text-align: right; font-size: var(--fs); color: var(--text); }
  .fk-ro-price { font-size: var(--fs); color: var(--text); }
  .fk-ro-price:not(:empty)::before { content: none; }
  .fk-ro-row.is-text { grid-template-areas: "pos desc desc desc desc"; }
}

/* Speicherleiste: am Handy über der Tab-Leiste, am Desktop unten im Inhalt */
.fk-savebar {
  position: sticky; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); z-index: 25;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 8px 8px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--brand);
  box-shadow: var(--shadow-lg);
}
.fk-savebar-short { display: none; }
@media (max-width: 599px) { .fk-savebar-long { display: none; } .fk-savebar-short { display: inline; } }
.fk-savebar-text { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-strong); }
/* Handy: eine Zeile, «Speichern» rechts; der Hinweistext darf verschwinden (Stift bleibt) */
@media (max-width: 599px) {
  .fk-savebar { flex-wrap: nowrap; padding-left: 12px; }
  .fk-savebar-text { min-width: 0; overflow: hidden; white-space: nowrap; }
  .fk-savebar > .btn { flex: none; padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 389px) { .fk-savebar-short { display: none; } }
@media (min-width: 900px) { .fk-savebar { bottom: 16px; } }

/* ------------------------------------------------------------------ Dialoge */
.fk-modal-lead { margin: 0; }
.fk-modal-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.fk-modal-note .icon { margin-top: 2px; }
.fk-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.fk-choices { display: flex; flex-direction: column; gap: 8px; }
.fk-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.fk-choice:hover { background: var(--surface-2); }
.fk-choice.is-active { border-color: var(--brand); background: var(--brand-soft); }
.fk-choice > .icon { color: var(--brand); }
.fk-choice-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fk-choice-text > span { font-size: var(--fs-sm); color: var(--text-muted); }
.fk-choice-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.fk-choice.is-active .fk-choice-dot { border: 6px solid var(--brand); }
.fk-pay-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
.fk-pay-sum > div { display: flex; flex-direction: column; min-width: 0; }
.fk-pay-sum span { font-size: var(--fs-xs); color: var(--text-muted); }
.fk-pay-sum strong { font-size: var(--fs-sm); text-align: left; }

/* camt-Import */
.fk-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; padding: 20px;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); text-align: center; cursor: pointer;
  color: var(--text);
}
.fk-drop .icon { color: var(--brand); }
.fk-drop:hover, .fk-drop.is-drag { border-color: var(--brand); background: var(--brand-soft); }
.fk-drop:focus-within { box-shadow: var(--focus); }
.fk-drop.is-busy { cursor: progress; }
.fk-help { margin-top: 12px; }
.fk-help summary { display: flex; align-items: center; gap: 6px; min-height: var(--tap); cursor: pointer; font-weight: 600; color: var(--brand); list-style: none; }
.fk-help summary::-webkit-details-marker { display: none; }
.fk-help p { margin: 4px 0 0; }
.fk-camt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.fk-camt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fk-camt-item { display: flex; gap: 4px; padding: 8px 10px 10px 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.fk-camt-item.is-on { border-color: var(--success); box-shadow: inset 3px 0 0 var(--success); }
.fk-camt-item.is-locked { background: var(--surface-2); color: var(--text-muted); }
.fk-camt-item.is-error { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.fk-camt-item .field-error { margin: 0; }
.fk-camt-check { display: grid; place-items: center; align-self: flex-start; width: var(--tap); min-height: var(--tap); flex: none; cursor: pointer; }
.fk-camt-check input { width: 20px; height: 20px; accent-color: var(--success); }
.fk-camt-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.fk-camt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px; }
.fk-camt-sub { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.fk-camt-assign { display: block; margin-top: 4px; }
.fk-camt-total { margin: 12px 0 0; }
@media (min-width: 720px) {
  .fk-camt-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 4px 12px; align-items: center; }
  .fk-camt-assign { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* «Neue Abrechnung»: Rechnungsweg */
.rp-mode .segmented { align-self: flex-start; }

/* ------------------------------------------------------------------ Einstellungen «Rechnungen & Offerten» */
.fk-settings-status { display: flex; gap: 10px; align-items: flex-start; }
.fk-settings-group { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.fk-settings-group:first-of-type { border-top: 0; padding-top: 0; }
.fk-settings-group > h3 { font-size: var(--fs); font-weight: 650; }
.fk-addr-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; }
.fk-addr-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 599px) { .fk-addr-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .fk-addr-grid-2 > :last-child { grid-column: 1 / -1; } }
.fk-dunning-levels { display: flex; flex-direction: column; gap: 12px; }
.fk-dunning-level { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.fk-dunning-level > strong { font-size: var(--fs-sm); }
.fk-dunning-level .form-row { gap: 10px; }

/* ------------------------------------------------------------------ CRM: Offerten am Deal und an der Firma */
/* Reihenfolge am Handy (crm.css: info 1, contacts 2, deals 3, main 4, time 5); am Desktop in der freien Zelle links */
.crm-area-offers { order: 2; }
.crm-area-docs { order: 3; }
.fk-crm-docs { display: flex; flex-direction: column; gap: 4px; }
.fk-crm-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
  grid-template-areas: "title amount" "sub sub" "badges badges";
  padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none !important; min-height: var(--tap);
}
.fk-crm-row:last-child { border-bottom: 0; }
.fk-crm-row:hover .fk-crm-title { color: var(--brand); }
.fk-crm-title { display: flex; gap: 8px; align-items: center; min-width: 0; font-weight: 600; }
.fk-crm-sub { font-size: var(--fs-sm); color: var(--text-muted); min-width: 0; }
.fk-crm-no { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.fk-crm-title { grid-area: title; }
.fk-crm-sub { grid-area: sub; }
.fk-crm-amount { grid-area: amount; }
.fk-crm-badges { grid-area: badges; margin-top: 3px; }
.fk-crm-group { margin: 10px 0 2px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.fk-crm-group:first-child { margin-top: 0; }
.fk-crm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

@media print {
  .fk-nav, .fk-savebar, .fk-head-actions, .fk-items-add, .fk-item-tools { display: none !important; }
}

/* ------------------------------------------------------------------ Touch-Ziele ≥ 44 px (SPEC §11 Kern) */
@media (pointer: coarse), (max-width: 899px) {
  .fk-page .input, .fk-page .picker, .fk-modal .input, .fk-modal .picker { min-height: var(--tap); }
  .fk-page .btn, .fk-page .btn-sm, .fk-modal .btn { min-height: var(--tap); }
  .fk-page .btn-icon, .fk-page .btn-icon.btn-sm { width: var(--tap); min-width: var(--tap); }
  .fk-page .segmented-item, .fk-modal .segmented-item, .fk-chips .chip, .fk-reasons .chip { min-height: var(--tap); }
  .fk-fact dd a, .fk-banner a, .fk-inline-link, .fk-setup-hint a, .fk-crm-card .crm-more-link, .fk-settings-status a {
    display: inline-flex; align-items: center; min-height: var(--tap);
  }
  .fk-fact { align-items: center; padding: 2px 0; min-height: var(--tap); }
  .rp-inv-title { min-height: var(--tap); justify-content: center; }
  .fk-page .toggle, .fk-modal .toggle { min-height: var(--tap); }
  .fk-row-main { min-height: var(--tap); justify-content: center; }
}

/* Dialog-Fuss am Handy: Hauptaktion über die ganze Breite, die übrigen darunter */
@media (max-width: 599px) {
  .fk-modal .modal-foot > .btn { flex: 1 1 0; }
  .fk-modal .modal-foot > .btn-primary, .fk-modal .modal-foot > .btn-danger { order: -1; flex: 1 1 100%; }
  .fk-modal .modal-foot .btn-left { margin-right: 0; }
}