/* Paket K Teil 2 – Angebot: Liste, Neues Angebot, Status/Finanzierung, Sparten, Dialoge, Statusleiste/Übersicht */
.offer-k { display: grid; gap: 12px; }
.offer-k .ok-head { margin: 0; }
.offer-k .ok-new-btn { margin-left: auto; }
.offer-k .offer-empty[hidden], .ok-new[hidden] { display: none; }
.ok-new { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--bg); }
.ok-new h4 { margin: 0 0 10px; }
.ok-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin-top: 12px; }
.ok-f { display: grid; gap: 4px; font-size: 12.5px; min-width: 0; }
.ok-f > span { color: var(--muted); font-weight: 600; }
.ok-f select, .ok-f input { width: 100%; min-width: 0; font: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--text); }
.ok-kwp b { font-size: 15px; padding: 6px 0; }
.ok-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.ok-form-foot .small { flex: 1 1 220px; }
.ok-list { display: grid; gap: 10px; }
.ok-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--card); display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.ok-card.current { border-color: var(--yellow); box-shadow: inset 3px 0 0 var(--yellow); }
.ok-card.ok-flash { animation: flash 1.2s; }
.ok-card p { margin: 0; }
.ok-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ok-top h5 { margin: 0; font-size: 14.5px; font-weight: 700; outline: 0; }
.ok-cat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.ok-current { display: inline-flex; align-items: center; gap: 4px; background: var(--ink, #0d0d0d); color: var(--yellow); }
.ok-make-current { padding: 0 2px; }
.ok-amt { margin-left: auto; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.ok-comps { color: var(--text); }
.ok-row, .ok-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ok-row-l, .ok-fin-l { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 86px; }
.ok-fin { padding-top: 6px; border-top: 1px dashed var(--line); }
.ok-fin > b { font-size: 13px; }
.ok-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); max-width: 100%; }
.ok-seg button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ok-seg button + button { border-left: 1px solid var(--line); }
.ok-seg button:hover { background: var(--bg); }
.ok-seg button.on.y { background: var(--yellow-soft); color: var(--yellow-text, #8a5a00); }
.ok-seg button.on.g { background: #e2f2e9; color: #267043; }
.ok-seg button.on.r { background: #fbe4e2; color: #b3261e; }
.ok-hist { flex-basis: 100%; font-size: 12px; }
.ok-hist summary { cursor: pointer; color: var(--muted); }
.ok-hist ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ok-hist small { display: block; color: var(--muted); }
.ok-sent { display: flex; gap: 5px; align-items: flex-start; color: #267043; }
.ok-sent svg { flex: none; margin-top: 2px; }
.ok-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ok-actions .btn { max-width: 100%; white-space: normal; text-align: left; }
/* Sparten */
.ok-sparten { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.ok-sp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.ok-sp-head h4 { margin: 0; }
.ok-sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.ok-sp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.ok-sp-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.ok-sp-name small { font-weight: 400; }
.ok-sp.abgeschlossen { background: #f3faf5; }
.ok-sp.kein { background: #fbf6f5; }
/* Statusleiste: 4 Felder */
.cstatus:has(> .ok-cs) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ok-fin-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); margin-right: 5px; vertical-align: 1px; }
.ok-fin-dot.g { background: var(--green); } .ok-fin-dot.r { background: var(--red, #d6453d); }
@media (max-width: 900px) {
  .cstatus:has(> .ok-cs) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cstatus:has(> .ok-cs) > :nth-child(3) { grid-column: auto; border-left: 0; border-top: 1px solid var(--line); }
  .cstatus:has(> .ok-cs) > .ok-cs { border-top: 1px solid var(--line); }
}
/* Übersicht */
.ok-ov { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.ok-ov-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 6px; }
.ok-ov-head h4 { margin: 0; }
.ok-ov-list { display: grid; gap: 6px; }
.ok-ov-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ok-ov-row > span:first-child { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ok-ov-fin { flex: 1 1 260px; }
/* Dialoge */
.ok-dialog .ok-in { width: 100%; font: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--text); box-sizing: border-box; }
.ok-dialog textarea.ok-in { resize: vertical; line-height: 1.45; }
.ok-dialog .rc-error { color: var(--red, #b3261e); font-size: 12.5px; min-height: 0; margin: 6px 0 0; }
.ok-dialog .dialog-foot { flex-wrap: wrap; align-items: center; }
.ok-dialog .dialog-foot .right { margin-left: auto; display: flex; gap: 8px; }
.ok-att { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 12px 0 0; display: grid; gap: 6px; min-width: 0; }
.ok-att legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.ok-att label { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ok-att label svg { flex: none; margin-top: 3px; color: var(--muted); }
.ok-att-h { margin: 4px 0 0; }
.ok-partners { display: grid; gap: 6px; }
.ok-partner { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.ok-partner:has(:checked) { border-color: var(--yellow); background: var(--yellow-soft); }
.ok-partner input { margin-top: 3px; }
.ok-partner small { display: block; font-size: 12px; }
.ok-cc-cust { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; flex-wrap: wrap; }
.ok-toast { z-index: 60; }
@media (max-width: 480px) {
  .offer-k .ok-new-btn { margin-left: 0; }
  .ok-sp-grid { grid-template-columns: 1fr; }
  .ok-row-l, .ok-fin-l { min-width: 0; }
  .ok-amt { margin-left: 0; flex-basis: 100%; }
  .ok-seg button { padding: 4px 9px; }
}
.ok-actions .ok-del { color: var(--red, #d6453d); }