/* ============================================================
   u flow – Firmenprofil (Modul, gehört zu firmen.js)
   Body-Ebene, helle Modal-Optik (globale Tokens). Tags = anklickbar.
   ============================================================ */

/* Anklickbare Tags (Fokus → Profil) + Karten-Pille (→ Picker) */
[data-firma], [data-firma-pick] { cursor: pointer; transition: filter 0.12s ease; }
[data-firma]:hover, [data-firma-pick]:hover { filter: brightness(0.96); }
.zuordnung-pick.leer { opacity: 0.6; font-weight: 600; }

/* Auswahl-Picker an der Karte */
.zu-picker {
  position: fixed; z-index: 12300; width: 244px; max-height: 320px; display: flex; flex-direction: column;
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand); border-radius: 13px; box-shadow: var(--schatten-drag);
  padding: 8px; animation: setup-ein 0.14s ease-out;
}
.zu-picker-such { border: 1px solid var(--karte-rand); border-radius: 8px; padding: 6px 9px; font-family: inherit; font-size: 13px; outline: none; margin-bottom: 6px; background: #fff; color: var(--text-stark); }
.zu-picker-such:focus { border-color: rgba(176, 125, 86, 0.5); }
.zu-picker-liste { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.zu-picker-item { display: flex; align-items: center; gap: 8px; text-align: left; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; color: var(--text-stark); }
.zu-picker-item:hover { background: rgba(120, 104, 84, 0.08); }
.zu-picker-tag { font-weight: 700; color: var(--akzent); flex: 0 0 auto; }
.zu-picker-name { color: var(--text-mittel); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zu-keine { color: var(--text-leise); font-style: italic; }
.zu-picker-neu { margin-top: 6px; border: none; background: none; color: var(--akzent); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; padding: 6px 8px; border-radius: 8px; }
.zu-picker-neu:hover { background: rgba(176, 125, 86, 0.08); }

/* Zentrale Zuordnungs-Verwaltung */
.zv-overlay { position: fixed; inset: 0; z-index: 12200; display: grid; place-items: center; padding: 24px; }
.zv-backdrop { position: absolute; inset: 0; background: rgba(58, 47, 34, 0.34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: setup-fade 0.2s ease-out; }
.zv-card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: linear-gradient(178deg, #fffdf9, #faf3e9); border: 1px solid var(--karte-rand); border-radius: 22px; box-shadow: var(--schatten-drag); padding: 22px; animation: setup-ein 0.24s cubic-bezier(0.2, 0.7, 0.3, 1); }
.zv-kopf { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.zv-liste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.zv-row { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--karte-rand); background: #fff; border-radius: 10px; padding: 9px 11px; cursor: pointer; font-family: inherit; transition: background 0.12s ease; }
.zv-row:hover { background: rgba(176, 125, 86, 0.08); }
.zv-row-tag { font-weight: 700; color: var(--akzent); flex: 0 0 auto; }
.zv-row-name { flex: 1; min-width: 0; color: var(--text-stark); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zv-row-anz { flex: 0 0 auto; font-size: 11.5px; color: var(--text-leise); }
.zv-neu { width: 100%; }

/* Firmen-Zeile im Karten-Panel (Kürzel-Pill + Auswahl) */
.panel-firma-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-firma-select {
  border: 1px solid var(--karte-rand); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 12.5px; color: var(--text-mittel); padding: 4px 8px; cursor: pointer; outline: none;
}
.panel-firma-select:hover { color: var(--text-stark); }
.panel-firma-select:focus { border-color: rgba(176, 125, 86, 0.5); }

/* Filter-Button im Profil */
.fi-filter-zeile { margin: -6px 0 14px; }
.fi-filter {
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--akzent); background: rgba(176, 125, 86, 0.10); border: 1px solid transparent;
  padding: 6px 12px; border-radius: 999px; transition: filter 0.12s ease;
}
.fi-filter:hover { filter: brightness(1.05); }

/* Schwebender Filter-Chip (Board/Fokus gefiltert) */
.filter-chip {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 11400;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand); border-radius: 999px;
  box-shadow: var(--schatten-drag); padding: 6px 8px 6px 14px; animation: setup-fade 0.18s ease-out;
}
.filter-chip-label { font-size: 13px; color: var(--text-stark); }
.filter-chip-label b { color: var(--akzent); font-weight: 700; }
.filter-chip-x {
  width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(120, 104, 84, 0.10);
  color: var(--text-mittel); cursor: pointer; font-size: 14px; line-height: 1;
}
.filter-chip-x:hover { background: var(--lamp-rot); color: #fff; }

/* Overlay + Karte */
.fi-overlay { position: fixed; inset: 0; z-index: 12200; display: grid; place-items: center; padding: 24px; }
.fi-backdrop { position: absolute; inset: 0; background: rgba(58, 47, 34, 0.34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: setup-fade 0.2s ease-out; }
.fi-card {
  position: relative; width: min(480px, 100%); max-height: calc(100vh - 48px); overflow-y: auto;
  background: linear-gradient(178deg, #fffdf9, #faf3e9);
  border: 1px solid var(--karte-rand); border-radius: 22px; box-shadow: var(--schatten-drag);
  padding: 22px 22px 20px; animation: setup-ein 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fi-x {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--karte-rand); background: none; color: var(--text-mittel); cursor: pointer; font-size: 16px; line-height: 1;
}
.fi-x:hover { background: rgba(120, 104, 84, 0.08); color: var(--text-stark); }

.fi-kopf { display: flex; align-items: center; gap: 10px; margin: 2px 30px 18px 0; }
.fi-tag {
  flex: 0 0 auto; width: 5.5em; border: 1px solid var(--karte-rand); border-radius: 999px; background: rgba(176, 125, 86, 0.10);
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--akzent); padding: 6px 12px; outline: none; text-align: center;
}
.fi-tag:focus { border-color: rgba(176, 125, 86, 0.5); }
.fi-name {
  flex: 1; min-width: 0; border: none; border-bottom: 1px solid transparent; background: none;
  font-family: inherit; font-size: 19px; font-weight: 700; color: var(--text-stark); padding: 4px 2px; outline: none;
}
.fi-name:focus { border-bottom-color: rgba(176, 125, 86, 0.5); }
.fi-name::placeholder { color: var(--text-leise); font-weight: 600; }

.fi-feld { margin-bottom: 14px; }
.fi-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-leise); margin-bottom: 6px; }
.fi-input {
  width: 100%; border: 1px solid var(--karte-rand); border-radius: 10px; background: #fff;
  font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--text-stark); padding: 8px 10px; outline: none; resize: vertical;
}
.fi-input:focus { border-color: rgba(176, 125, 86, 0.5); }
.fi-input::placeholder { color: var(--text-leise); }

/* Beteiligte */
.fi-beteiligte { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.fi-bet-row { display: flex; gap: 6px; align-items: center; }
.fi-bet { flex: 1; min-width: 0; border: 1px solid var(--karte-rand); border-radius: 8px; background: #fff; font-family: inherit; font-size: 13px; color: var(--text-stark); padding: 6px 9px; outline: none; }
.fi-bet:focus { border-color: rgba(176, 125, 86, 0.5); }
.fi-bet-x { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--karte-rand); background: none; color: var(--text-mittel); cursor: pointer; font-size: 15px; line-height: 1; }
.fi-bet-x:hover { background: rgba(216, 81, 63, 0.12); color: var(--lamp-rot); }
.fi-add { border: none; background: none; color: var(--akzent); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.fi-add:hover { text-decoration: underline; }

/* Projekte */
.fi-proj-grp { margin-bottom: 8px; }
.fi-proj-grp-t { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-leise); margin-bottom: 5px; }
.fi-proj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fi-proj {
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-stark);
  background: rgba(120, 104, 84, 0.07); border: 1px solid var(--karte-rand); border-radius: 999px; padding: 5px 12px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.fi-proj:hover { background: rgba(176, 125, 86, 0.12); box-shadow: var(--schatten-hover); }
.fi-leer { font-size: 12.5px; color: var(--text-leise); font-style: italic; }
.fi-anlegen-zeile { margin-top: 8px; }
.fi-anlegen { width: 100%; }