/* ============================================================
   u flow – KI-Änderungs-Ansicht (Modul, gehört zu kiview.js)
   Karten-Markierungen (neu/geändert), Banner, vorher→nachher-Popup.
   ============================================================ */

/* Karten-Markierung (Ring stört das Layout nicht) */
.karte.ki-neu { outline: 2px solid var(--lamp-gruen); outline-offset: 1px; }
.karte.ki-geaendert { outline: 2px solid var(--akzent); outline-offset: 1px; }

.ki-badge {
  position: absolute; top: -10px; left: 10px; z-index: 5;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
  padding: 3px 9px; border-radius: 999px; line-height: 1; border: none;
  box-shadow: var(--schatten-ruhe); white-space: nowrap;
}
.ki-badge-neu { background: var(--lamp-gruen); color: #fff; }
.ki-badge-diff { background: var(--akzent); color: #fff; cursor: pointer; transition: filter 0.12s ease, transform 0.12s ease; }
.ki-badge-diff:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Banner (unten zentriert) */
.kiv-banner {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 11500;
  display: flex; align-items: center; gap: 14px;
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand);
  border-radius: 16px; box-shadow: var(--schatten-drag); padding: 11px 14px 11px 16px;
  max-width: calc(100vw - 32px); animation: kiv-auf 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.kiv-ico { color: var(--akzent); font-size: 15px; }
.kiv-txt { font-size: 13.5px; color: var(--text-stark); }
.kiv-txt b { font-weight: 700; }
.kiv-aktionen { display: flex; gap: 7px; }
.kiv-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; border-radius: 999px; cursor: pointer;
  padding: 7px 13px; border: 1px solid var(--karte-rand); background: none; color: var(--text-mittel);
  transition: color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.kiv-btn:hover { color: var(--text-stark); background: rgba(120, 104, 84, 0.07); }
.kiv-btn.primary { color: #fff; background: var(--akzent); border-color: var(--akzent); }
.kiv-btn.primary:hover { color: #fff; background: #9d6c48; box-shadow: var(--schatten-hover); }
.kiv-btn.warn { color: var(--lamp-rot); border-color: rgba(216, 81, 63, 0.4); }
.kiv-btn.warn:hover { color: #fff; background: var(--lamp-rot); border-color: var(--lamp-rot); }

/* vorher→nachher-Popup */
.kiv-pop {
  position: fixed; z-index: 12500; width: 300px; max-height: 60vh; overflow-y: auto;
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand);
  border-radius: 14px; box-shadow: var(--schatten-drag); padding: 14px; animation: kiv-auf 0.14s ease-out;
}
.kiv-pop-kopf { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.kiv-tag { font-size: 10.5px; font-weight: 700; color: var(--akzent); background: rgba(176, 125, 86, 0.12); padding: 2px 7px; border-radius: 999px; }
.kiv-pop-titel { font-size: 14px; font-weight: 600; color: var(--text-stark); }
.kiv-pop-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-leise); margin: 10px 0 5px; }
.kiv-pop-label:first-of-type { margin-top: 0; }
.kiv-feld { margin-bottom: 8px; }
.kiv-feld-name { font-size: 11.5px; font-weight: 600; color: var(--text-mittel); }
.kiv-vn { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.kiv-vor { color: var(--text-leise); text-decoration: line-through; }
.kiv-pfeil { color: var(--akzent); font-weight: 700; }
.kiv-nach { color: var(--text-stark); font-weight: 600; }
.kiv-liste { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.kiv-neu { color: var(--text-stark); }
.kiv-done { color: var(--text-leise); text-decoration: line-through; }
.kiv-leer { font-size: 12.5px; color: var(--text-leise); font-style: italic; }

@keyframes kiv-auf { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.kiv-pop { animation-name: kiv-pop-auf; }
@keyframes kiv-pop-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }