:root{
  --bg:#f4f7fb; --panel:#fff; --line:#e6edf5; --text:#15253a; --muted:#6d7b90;
  --accent:#216cff; --accent-soft:#e9f0ff; --ok:#18a36b; --warn:#c78f00; --danger:#d84d64;
  --shadow:0 18px 40px rgba(18,32,51,.08); --radius:20px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(180deg,#f8fafd 0%,#eef3f9 100%);color:var(--text)}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:#0f1724;color:#e8eef8;padding:22px 16px;position:sticky;top:0;height:100vh}
.brand{font-weight:800;font-size:22px;letter-spacing:-.03em;margin-bottom:20px}
.brand small{display:block;color:#8ea2c0;font-size:12px;margin-top:4px}
.nav{display:grid;gap:6px}
.nav a{color:#d8e3f5;text-decoration:none;padding:11px 12px;border-radius:12px;display:block}
.nav a.active,.nav a:hover{background:rgba(255,255,255,.08)}
.content{padding:28px;max-width:1380px}
h1{margin:0 0 8px;font-size:34px;letter-spacing:-.03em}
h2{margin:0 0 10px}
h3{margin:0 0 10px}
.sub{color:var(--muted);margin-bottom:20px}
.card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1.05fr .95fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.kpi,.metric{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.kpi small,.metric small{display:block;color:var(--muted);margin-bottom:8px}
.kpi strong,.metric strong{font-size:26px;letter-spacing:-.03em}
.small{font-size:12px;color:var(--muted)}
.note{margin-top:10px;color:var(--muted);font-size:13px}
.flag{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.green{background:rgba(24,163,107,.12);color:var(--ok)}
.yellow{background:rgba(199,143,0,.12);color:#9a7200}
.red{background:rgba(216,77,100,.12);color:var(--danger)}
.blue{background:#e9f0ff;color:#216cff}
.impact{padding:14px;border-radius:18px;border:1px solid var(--line);background:#fff}
.impact.critical{background:#fff5f6;border-color:#ffd7de}
.impact.warn{background:#fffaf0;border-color:#ffe5ad}
.link-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
ul.clean{margin:0;padding-left:18px}
table{width:100%;border-collapse:separate;border-spacing:0 10px;font-size:14px}
th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:0 10px}
td{background:#fff;padding:12px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top}
td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}
td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.tabs button,.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700}
.tabs button.active{background:var(--accent-soft);color:var(--accent);border-color:#d8e5ff}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.danger{background:#fff5f6;color:var(--danger);border-color:#ffd7de}
.hidden{display:none !important}
.placeholder{padding:40px;border:1px dashed var(--line);border-radius:18px;background:#fbfdff;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px}
.field label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.field input,.field select{padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text)}
.modal-backdrop{position:fixed;inset:0;background:rgba(9,16,27,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000}
.modal-backdrop.show{display:flex}
.modal{width:min(760px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(10,20,30,.28);padding:18px}
.individual-box{margin-top:12px;padding:12px;border:1px dashed var(--line);border-radius:14px;background:#fbfdff}
#schemaTable{table-layout:auto}
#schemaTable th:nth-child(1), #schemaTable td:nth-child(1),
#schemaTable th:nth-child(2), #schemaTable td:nth-child(2),
#schemaTable th:nth-child(4), #schemaTable td:nth-child(4),
#schemaTable th:nth-child(5), #schemaTable td:nth-child(5){white-space:nowrap}
#schemaTable th:nth-child(3), #schemaTable td:nth-child(3){white-space:normal; min-width:220px}
@media (max-width:1100px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.grid-4,.grid-3,.grid-2,.link-row,.form-grid{grid-template-columns:1fr}}

.nav a{display:flex;align-items:center;gap:10px}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9fb4d6;font-size:14px}
.brand{letter-spacing:-.03em}
.sidebar{box-shadow:inset -1px 0 0 rgba(255,255,255,.05)}


.nav{margin-top:10px}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;transition:all .18s ease}
.nav a.active,.nav a:hover{background:rgba(255,255,255,.1);transform:translateX(1px)}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;font-size:14px;font-weight:800;flex:0 0 24px}
.icon-dashboard{background:#e9f0ff;color:#216cff}
.icon-bau{background:#fff3e6;color:#c96a00}
.icon-kaeufer{background:#eefbf4;color:#18a36b}
.icon-mabv{background:#f4ecff;color:#7a42d8}
.icon-finanzen{background:#eef7ff;color:#0b76c5}
.icon-todos{background:#fff8e7;color:#b88600}
.icon-dokumente{background:#f2f4f8;color:#64748b}
.icon-settings{background:#f7eef7;color:#9b4d96}
.brand{letter-spacing:-.03em}
.brand small{margin-top:6px}
.sidebar{box-shadow:inset -1px 0 0 rgba(255,255,255,.05)}


/* Sidebar refinement closer to V18.3 */
.sidebar{
  background:linear-gradient(180deg,#101927 0%, #111d2d 45%, #0f1824 100%);
  padding:24px 16px 20px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  font-weight:800;
  font-size:24px;
  letter-spacing:-.04em;
}
.brand small{
  display:block;
  color:#8ea2c0;
  font-size:12px;
  margin-top:4px;
  font-weight:600;
  letter-spacing:0;
}
.brand-mark{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(180deg,#2c78ff 0%, #1f63e8 100%);
  color:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(33,108,255,.28);
}
.nav{
  margin-top:10px;
  gap:8px;
}
.nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  border-radius:14px;
  transition:all .18s ease;
  border:1px solid transparent;
  font-weight:600;
  color:#dce6f7;
}
.nav a span:last-child{
  line-height:1.2;
}
.nav a:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.05);
  transform:translateX(1px);
}
.nav a.active{
  background:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.09) 100%);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:9px;
  font-size:14px;
  font-weight:800;
  flex:0 0 26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.icon-dashboard{background:#e9f0ff;color:#216cff}
.icon-bau{background:#fff0e0;color:#c96a00}
.icon-kaeufer{background:#e9fbf1;color:#18a36b}
.icon-mabv{background:#f2e9ff;color:#7a42d8}
.icon-finanzen{background:#eaf6ff;color:#0b76c5}
.icon-todos{background:#fff7dd;color:#b88600}
.icon-dokumente{background:#eef2f7;color:#64748b}
.icon-settings{background:#f6ebf7;color:#9b4d96}


/* Sidebar refinement v4.3 */
.sidebar{
  background:
    radial-gradient(1200px 300px at -10% -10%, rgba(62,120,255,.18) 0%, rgba(62,120,255,0) 42%),
    linear-gradient(180deg,#101927 0%, #111d2d 42%, #0f1824 100%);
  padding:26px 16px 22px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
  font-weight:800;
  font-size:24px;
  letter-spacing:-.04em;
}
.brand-copy{display:flex;flex-direction:column;line-height:1.02}
.brand small{display:block;color:#8ea2c0;font-size:12px;margin-top:5px;font-weight:600}
.brand-mark{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:13px;
  background:linear-gradient(180deg,#2f80ff 0%, #215fdd 100%);
  color:#fff;font-size:13px;font-weight:900;
  box-shadow:0 14px 28px rgba(33,108,255,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.nav{margin-top:12px;gap:9px}
.nav a{
  display:flex;align-items:center;gap:12px;
  padding:12px 13px;
  border-radius:15px;
  transition:all .18s ease;
  border:1px solid transparent;
  font-weight:650;
  color:#dce6f7;
  min-height:48px;
}
.nav a span:last-child{line-height:1.18}
.nav a:hover{
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.05);
  transform:translateX(1px);
}
.nav a.active{
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.1) 100%);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.nav-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:10px;
  font-size:14px;font-weight:800;flex:0 0 28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px rgba(0,0,0,.06);
}
.icon-dashboard{background:#eaf1ff;color:#246cff}
.icon-bau{background:#fff1e2;color:#c96a00}
.icon-kaeufer{background:#e8fbf0;color:#18a36b}
.icon-mabv{background:#f4ebff;color:#7a42d8}
.icon-finanzen{background:#eaf7ff;color:#0b76c5}
.icon-todos{background:#fff7dd;color:#b88600}
.icon-dokumente{background:#eef2f7;color:#64748b}
.icon-settings{background:#f6ebf7;color:#9b4d96}


/* Icon visibility fix */
.nav-icon{
  font-size:18px !important;
  font-weight:900 !important;
}


/* Sidebar icon polish v4.5 */
.nav-icon{
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:-.02em;
}
.icon-dashboard{background:#eaf1ff;color:#246cff}
.icon-bau{background:#fff1e2;color:#c96a00}
.icon-kaeufer{background:#e8fbf0;color:#18a36b}
.icon-mabv{background:#f4ebff;color:#7a42d8}
.icon-finanzen{background:#eaf7ff;color:#0b76c5}
.icon-todos{background:#fff7dd;color:#b88600}
.icon-dokumente{background:#eef2f7;color:#64748b}
.icon-settings{background:#f6ebf7;color:#9b4d96}


/* Embedded SVG icon refinement v4.6 */
.nav-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:10px;flex:0 0 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px rgba(0,0,0,.06);
}
.nav-icon svg{
  width:18px;height:18px;
  stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.icon-dashboard{background:#eaf1ff;color:#246cff}
.icon-bau{background:#fff1e2;color:#c96a00}
.icon-kaeufer{background:#e8fbf0;color:#18a36b}
.icon-mabv{background:#f4ebff;color:#7a42d8}
.icon-finanzen{background:#eaf7ff;color:#0b76c5}
.icon-todos{background:#fff7dd;color:#b88600}
.icon-dokumente{background:#eef2f7;color:#64748b}
.icon-settings{background:#f6ebf7;color:#9b4d96}


/* =========================================================
   10. Design System Extensions
   Additiv vorbereitet, noch ohne Live-Umbau der Module
   ========================================================= */
.context-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
  box-shadow:var(--shadow);
}
.context-bar-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,auto));
  gap:14px;
  align-items:center;
}
.context-bar-main .item small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.context-bar-main .item strong{
  display:block;
}

.info-note{
  background:#fbfdff;
  border:1px solid #e2eaf3;
  border-radius:16px;
  padding:14px;
}

.action-card-link{
  display:block;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
}
.action-card-link:hover{
  transform:translateY(-1px);
}

.metric-card{
  background:#fff;
  border:1px solid #e3ebf5;
  border-radius:16px;
  padding:12px 14px;
}
.metric-card small{
  display:block;
  margin-bottom:4px;
  color:#5b6573;
  font-weight:700;
}
.metric-card strong{
  font-size:22px;
  line-height:1.15;
}

@media (max-width: 980px){
  .context-bar-main{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 560px){
  .context-bar-main{grid-template-columns:1fr}
}
/* =========================================
   Projektsteuerung - UI Harmonisierung
   ========================================= */

/* Risk Cards */
.ps-risk-card{
  padding:14px;
  border-width:1px;
}

/* Driver / MaAŸnahmen Rows */
.ps-driver-row{
  border-radius:12px;
  background:#f9fbff;
  border:1px solid #eef2f7;
}

/* Logic + Task Items */
.logic-item,
.task-card{
  border-radius:16px;
  padding:12px;
}

/* Einheitlicher Hover fA¼r klickbare Elemente */
.card.is-clickable:hover,
.logic-item.is-clickable:hover,
.task-card.is-clickable:hover,
.ps-risk-card.is-clickable:hover{
  border-color:#bfd4ff;
  box-shadow:0 8px 24px rgba(36,86,214,.10);
  transform:translateY(-1px);
}
/* =========================================
   Projektsteuerung - UI Step 2 (Semantik)
   ========================================= */

/* ---------- PRIORITA„TEN (P0-P3) ---------- */

.flag.P0,
.flag.red{
  background:#fdeaea;
  color:#c0392b;
}

.flag.P1{
  background:#fff4db;
  color:#b7791f;
}

.flag.P2{
  background:#eef4ff;
  color:#2456d6;
}

.flag.P3,
.flag.green{
  background:#eaf7ef;
  color:#198754;
}


/* ---------- TREIBER (Root Cause) ---------- */

.ps-driver-row{
  position:relative;
  padding-left:14px;
}

.ps-driver-row::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:4px;
  background:#2456d6;
  opacity:.6;
}


/* ---------- MASSNAHMEN ---------- */

.task-card{
  background:#ffffff;
  border:1px solid #e8eef6;
}

.task-card::before{
  content:"MaAŸnahme";
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:#6b7280;
  margin-bottom:4px;
}


/* ---------- AUTO SIGNAL ---------- */

.ps-driver-row[data-source="auto"],
.logic-item[data-source="auto"]{
  background:#f8fafc;
  border-style:dashed;
}

.ps-driver-row[data-source="auto"]::before{
  background:#7a42d8;
}


/* ---------- ENTSCHEIDUNGEN ---------- */

.logic-item{
  background:#ffffff;
  border:1px solid #e6edf5;
}

.logic-item::before{
  content:"Entscheidung";
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:#6b7280;
  margin-bottom:4px;
}


/* ---------- FOKUS / HERVORHEBUNG ---------- */

.ps-row-highlight,
.ps-row-highlight td{
  outline:2px solid #bfd4ff;
  background:#f8fbff;
}


/* ---------- BESSERE KLICK-WAHRNEHMUNG ---------- */

.panel-row-link{
  cursor:pointer;
}


/* ---------- MICRO TYPO IMPROVEMENT ---------- */

.ps-driver-row b,
.task-card b,
.logic-item b{
  font-weight:700;
  letter-spacing:-.01em;
}


/* ---------- ABSTA„NDE VERBESSERN ---------- */

.ps-driver-row .small,
.task-card .small,
.logic-item .small{
  margin-top:2px;
  line-height:1.4;
}
/* =========================================
   Projektsteuerung - UI Step 3
   Hierarchie / Gewichtung / Cockpit-Feeling
   ========================================= */

/* ---------- CARD HIERARCHIE ---------- */

.ps-risk-card.state-red{
  box-shadow:
    0 10px 28px rgba(192,57,43,.08),
    0 2px 10px rgba(0,0,0,.04);
}

.ps-risk-card.state-yellow{
  box-shadow:
    0 10px 28px rgba(183,121,31,.08),
    0 2px 10px rgba(0,0,0,.04);
}

.ps-risk-card.state-green{
  box-shadow:
    0 10px 28px rgba(25,135,84,.06),
    0 2px 10px rgba(0,0,0,.04);
}

/* ---------- SCORE / ESKALATION PRA„SENTER ---------- */

.ps-risk-card .flag.red,
.ps-risk-card .flag.yellow,
.ps-risk-card .flag.green{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.ps-risk-card h3{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
}

/* ---------- SEKTIONEN IN RISK-KARTEN ---------- */

.ps-risk-card .ps-driver-list{
  gap:10px;
}

.ps-risk-card .small[style*="font-weight:700"]{
  color:#445066;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:11px;
}

/* ---------- DRIVER ROW MEHR COCKPIT ---------- */

.ps-driver-row{
  padding:12px 12px 12px 16px;
  transition:all .15s ease;
}

.ps-driver-row:hover{
  background:#f4f8ff;
  border-color:#dbe6f5;
}

/* ---------- BOARD-SPALTEN STA„RKER ---------- */

.board-col{
  border-radius:22px;
  overflow:hidden;
}

.board-head{
  font-size:13px;
  letter-spacing:.02em;
}

#boardOpen .task-card{
  border-left:4px solid #2456d6;
}

#boardWork .task-card{
  border-left:4px solid #b7791f;
}

#boardDone .task-card{
  border-left:4px solid #198754;
  opacity:.92;
}

/* ---------- TASK CARDS WERTIGER ---------- */

.task-card{
  position:relative;
  min-height:84px;
}

.task-title{
  font-size:14px;
  line-height:1.3;
  letter-spacing:-.01em;
}

/* ---------- CONTROL TABLE FEINSCHLIFF ---------- */

#controlTable td,
#liveTable td{
  transition:background-color .15s ease, border-color .15s ease;
}

#controlTable tbody tr:hover td,
#liveTable tbody tr:hover td{
  background:#f8fbff;
  border-top-color:#dbe6f5;
  border-bottom-color:#dbe6f5;
}

/* ---------- KPI-REIHE RUHIGER ---------- */

.ps-kpi-row .kpi,
.ps-kpi-row .metric,
.ps-kpi-row > .kpi{
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ps-kpi-row .kpi:hover,
.ps-kpi-row .metric:hover,
.ps-kpi-row > .kpi:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(18,32,51,.08);
}

/* ---------- KONTEXTBEREICHE KLARER ---------- */

.context-bar{
  position:relative;
  overflow:hidden;
}

.context-bar::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg,#216cff 0%, #dfe9ff 100%);
  opacity:.7;
}

/* ---------- EMPTY STATES RUHIGER ---------- */

.empty-note{
  border:1px dashed #dbe6f5;
  background:#fbfdff;
  border-radius:12px;
}

/* ---------- MOBILE FEINTUNING ---------- */

@media (max-width: 700px){
  .ps-risk-card{
    padding:12px;
  }

  .ps-driver-row{
    padding:10px 10px 10px 14px;
  }

  .task-card{
    min-height:auto;
  }
}
/* =========================================
   Dashboard - zentrale UI-Bausteine
   Schritt 1: sichere Auslagerung nach app.css
   ========================================= */

.dashboard-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.dashboard-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.dashboard-context{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
  box-shadow:var(--shadow);
}

.dashboard-context-main{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,auto));
  gap:14px;
  align-items:center;
}

.dashboard-context-main .item small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dashboard-context-main .item strong{
  display:block;
}

.dashboard-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.dashboard-kpis .kpi{
  background:#fff;
  border:1px solid #dde7f2;
  box-shadow:0 10px 26px rgba(15,23,36,.05);
  border-radius:18px;
  padding:16px;
  min-height:128px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.dashboard-kpis .kpi small{
  display:block;
  font-weight:700;
  color:#4b5563;
}

.dashboard-kpis .kpi strong{
  font-size:28px;
  line-height:1.08;
}

.dashboard-kpis .kpi .meta{
  font-size:12px;
  color:var(--muted);
}

.dashboard-kpis .kpi-link{
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
  cursor:pointer;
}

.dashboard-kpis .kpi-link:hover{
  border-color:#cfdced;
  box-shadow:0 10px 26px rgba(15,23,36,.08);
  transform:translateY(-1px);
}

.dashboard-kpi-wide{
  grid-column:span 2;
  min-height:128px;
}

.dashboard-top-band{
  display:contents;
}

.dashboard-main-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(220px,1fr);
  gap:14px;
  align-items:start;
}

.dashboard-left-stack,
.dashboard-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.dashboard-panels{
  display:contents;
}

.dashboard-right-rail{
  width:100%;
  max-width:none;
  justify-self:stretch;
}

.dashboard-right-rail .card{
  padding:18px;
  min-width:0;
  overflow:visible;
}

.dashboard-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dashboard-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  min-width:0;
}

.dashboard-row.is-clickable{
  position:relative;
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
}

.dashboard-row.is-clickable:hover{
  border-color:#bfd4ff;
  box-shadow:0 8px 24px rgba(36,86,214,.10);
  transform:translateY(-1px);
}

.dashboard-row-link{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:14px;
}

.dashboard-row-content{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
}

.dashboard-row-content > div{
  min-width:0;
}

.dashboard-row strong{
  display:block;
}

.dashboard-row .meta{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.35;
}

.dashboard-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.dashboard-card-head h3{
  margin-bottom:8px;
}

.dashboard-card-head .small{
  max-width:760px;
  line-height:1.35;
}

.warning-group{
  border:1px solid #e5ebf3;
  border-radius:16px;
  background:#fff;
  padding:14px;
  box-shadow:none;
}

.warning-group h4{
  margin:0 0 10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.warning-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  padding:5px 9px;
  border-radius:999px;
  background:#eef4ff;
  color:#2456d6;
}

.warning-badge.red{
  background:#fee2e2;
  color:#991b1b;
}

.warning-badge.yellow{
  background:#fef3c7;
  color:#92400e;
}

.warning-badge.blue{
  background:#dbeafe;
  color:#1d4ed8;
}

.quick-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.quick-links a{
  display:block;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
  min-width:0;
}

.quick-links a:hover{
  transform:translateY(-1px);
}

.quick-links .small{
  line-height:1.35;
}

.chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.chart-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:18px;
  min-width:0;
}

.chart-card h3{
  margin-bottom:8px;
}

.chart-card .small{
  line-height:1.35;
}

.chart-wrap{
  position:relative;
  height:300px;
  min-width:0;
}

.empty-note{
  padding:14px;
  border:1px dashed #d5deea;
  border-radius:14px;
  background:#fbfdff;
  color:var(--muted);
}

/* Responsive Basis */
@media (max-width: 1280px){
  .dashboard-top-band,
  .dashboard-panels{
    display:contents;
  }
}

@media (max-width: 980px){
  .dashboard-context-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .chart-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 560px){
  .dashboard-context-main{
    grid-template-columns:1fr;
  }
}
/* =========================================
   Projekte - zentrale UI-Bausteine
   ========================================= */

.pm-shell{display:flex;flex-direction:column;gap:14px}

.pm-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pm-tabs button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
}
.pm-tabs button.active{
  background:#eef4ff;
  border-color:#bfd4ff;
  color:#2456d6;
}

.pm-actions{display:flex;gap:8px;flex-wrap:wrap}

.pm-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.pm-stack{display:flex;flex-direction:column;gap:14px}

.pm-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:18px;
}

.pm-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.pm-kpi{
  background:#fff;
  border:1px solid #dde7f2;
  box-shadow:0 10px 26px rgba(15,23,36,.05);
  border-radius:18px;
  padding:16px;
  min-height:128px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.pm-heatmap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}

.pm-heat{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  padding:16px;
}

.pm-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.pm-link{
  display:block;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow);
}

.pm-link:hover{
  transform:translateY(-1px);
}

.pm-badge{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

/* Responsive */
@media (max-width: 1180px){
  .pm-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 980px){
  .pm-grid{grid-template-columns:1fr}
}

@media (max-width: 760px){
  .pm-kpis,.pm-links{grid-template-columns:1fr}
}
/* =========================================
   Projekte - fehlender Restblock fA¼r Cleanup
   ========================================= */

.pm-metric.metric-card{
  padding:16px;
  border-radius:18px;
}
.pm-metric.metric-card small{
  margin-bottom:8px;
}
.pm-metric.metric-card strong{
  font-size:26px;
}

.pm-kpi small{
  display:block;
  font-weight:700;
  color:#4b5563;
}
.pm-kpi strong{
  font-size:28px;
  line-height:1.08;
}
.pm-kpi .meta{
  font-size:12px;
  color:var(--muted);
}

.pm-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.pm-hero-copy{
  max-width:820px;
}
.pm-hero-copy h3{
  margin-bottom:6px;
}

.pm-filters{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
}

.pm-heat .title{
  font-size:16px;
  font-weight:800;
  margin-bottom:4px;
}
.pm-heat .meta{
  font-size:12px;
  color:var(--muted);
  margin-bottom:10px;
}
.pm-heat .stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.pm-heat .stats div{
  border:1px solid #e5ebf3;
  border-radius:12px;
  padding:8px;
  background:#fcfdff;
}
.pm-heat .stats small{
  display:block;
  font-size:11px;
  color:var(--muted);
}
.pm-heat .stats strong{
  font-size:15px;
}
.pm-heat .bar{
  height:8px;
  border-radius:999px;
  margin-top:12px;
  position:relative;
  overflow:hidden;
  background:#e5ebf3;
}
.pm-heat .bar > span{
  display:block;
  height:100%;
  border-radius:999px;
  transition:width .2s ease;
}

.pm-heat.is-green{
  background:linear-gradient(180deg,#f8fff9 0%,#e7f7ea 100%);
  border-color:#b8e0c0;
}
.pm-heat.is-green .bar{
  background:#dfeee3;
}

.pm-heat.is-yellow{
  background:linear-gradient(180deg,#fffdf7 0%,#fff7da 100%);
  border-color:#f1df9a;
}
.pm-heat.is-yellow .bar{
  background:#f7edbf;
}

.pm-heat.is-red{
  background:linear-gradient(180deg,#fff8f8 0%,#ffe5e5 100%);
  border-color:#f0b6b6;
}
.pm-heat.is-red .bar{
  background:#f3d6d6;
}

.pm-heat.is-blue{
  background:linear-gradient(180deg,#fbfdff 0%,#f3f7fc 100%);
  border-color:#d7e1ee;
}
.pm-heat.is-blue .bar{
  background:#dbe4ef;
}

#projectsTab-cockpit .pm-cockpit-bottom{
  grid-template-columns:1fr 1fr;
}

.pm-status-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.pm-next-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pm-next{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.pm-admin-shell .pm-card{
  box-shadow:none;
  border-color:#e5ebf3;
}
.pm-table{
  border-collapse:separate;
  border-spacing:0;
}
.pm-table thead th{
  background:#f7faff;
  position:sticky;
  top:0;
  z-index:1;
}
.pm-table tbody tr:hover{
  background:#fafcff;
}

.pm-akten-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:12px;
}
.pm-akten-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pm-source{
  font-size:11px;
  font-weight:700;
  padding:4px 8px;
  border-radius:999px;
  background:#eef4ff;
  color:#2456d6;
  display:inline-flex;
}
.pm-source.manual{
  background:#eefaf4;
  color:#198556;
}
.pm-source.standard{
  background:#eef4ff;
  color:#2456d6;
}
.pm-source.imported{
  background:#fff7e8;
  color:#b26a00;
}

.pm-info-list{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:8px 12px;
}
.pm-info-list div:nth-child(odd){
  color:var(--muted);
}

.pm-doc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.pm-doc-stat{
  background:#fff;
  border:1px solid #e3ebf5;
  border-radius:16px;
  padding:12px 14px;
}
.pm-doc-stat small{
  display:block;
  margin-bottom:4px;
  color:#5b6573;
  font-weight:700;
}
.pm-doc-stat strong{
  font-size:22px;
  line-height:1.15;
}
.pm-doc-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pm-doc-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.pm-doc-row-main{
  min-width:0;
}
.pm-doc-row-title{
  font-weight:700;
}
.pm-doc-row-meta{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  margin-top:4px;
}
.pm-doc-row-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.pm-chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pm-doc-badge{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#eef4ff;
  color:#2456d6;
}
.pm-doc-badge.type-contract{
  background:#eefaf4;
  color:#198556;
}
.pm-doc-badge.type-finance{
  background:#fff7e8;
  color:#b26a00;
}
.pm-doc-badge.type-plan{
  background:#eef4ff;
  color:#2456d6;
}
.pm-doc-badge.type-note{
  background:#f5f3ff;
  color:#6d28d9;
}
.pm-doc-badge.type-image{
  background:#fff1f2;
  color:#be123c;
}

@media (max-width: 980px){
  .pm-akten-grid{
    grid-template-columns:1fr;
  }
  .pm-context-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .pm-status-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 560px){
  .pm-context-main{
    grid-template-columns:1fr;
  }
}


/* =========================================
   Projekte - Projektakte / Gesundheitsbereich
   ========================================= */

#projectsTab-file .pm-status-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

#projectsTab-file .pm-status-grid .pm-metric{
  min-width:0;
  max-width:none;
}

#projectsTab-file .pm-status-grid .pm-metric:last-child{
  grid-column:span 2;
}

#projectsTab-file .pm-status-grid .pm-metric.health-link{
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#projectsTab-file .pm-status-grid .pm-metric.health-link:hover{
  border-color:#cfdced;
  box-shadow:0 10px 26px rgba(15,23,36,.08);
  transform:translateY(-1px);
}

#projectsTab-file #projectHealthPanel{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:2px 0;
}

#projectsTab-file #projectHealthPanel .pm-badge{
  width:max-content;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

#projectsTab-file #projectHealthPanel .small{
  line-height:1.35;
}

#projectsTab-file .pm-metric.health-link{
  background:#fff;
  border-color:#dde7f2;
}

#projectsTab-file .pm-metric.health-link .small{
  color:#5b6573;
}

#projectsTab-file .pm-metric.health-link.is-green{
  background:linear-gradient(180deg,#f8fff9 0%,#e7f7ea 100%);
  border-color:#b8e0c0;
}

#projectsTab-file .pm-metric.health-link.is-yellow{
  background:linear-gradient(180deg,#fffdf7 0%,#fff7da 100%);
  border-color:#f1df9a;
}

#projectsTab-file .pm-metric.health-link.is-red{
  background:linear-gradient(180deg,#fff8f8 0%,#ffe5e5 100%);
  border-color:#f0b6b6;
}

#projectsTab-file .pm-metric.health-link.is-blue{
  background:linear-gradient(180deg,#fbfdff 0%,#f3f7fc 100%);
  border-color:#d7e1ee;
}

#projectsTab-file #projectLogicPanel{
  display:block;
  font-size:12px;
  line-height:1.3;
}

#projectsTab-file #projectLogicPanel .small{
  line-height:1.35;
}

#projectsTab-file .pm-akten-grid{
  grid-template-columns:1fr;
}

#projectsTab-file .pm-akten-grid > .pm-akten-stack:last-child{
  display:block;
}

#projectsTab-file #fileModuleLinks{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  font-size:14px;
}

#projectsTab-file #fileModuleLinks .pm-next{
  height:100%;
  display:block;
  text-decoration:none;
  color:inherit;
}

#projectsTab-file #fileModuleLinks .pm-next:hover{
  border-color:#cfdced;
  box-shadow:0 10px 26px rgba(15,23,36,.08);
}

@media (max-width: 1180px){
  #projectsTab-file .pm-status-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  #projectsTab-file .pm-status-grid .pm-metric:last-child{
    grid-column:span 3;
  }

  #projectsTab-file #fileModuleLinks{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 760px){
  #projectsTab-file .pm-status-grid{
    grid-template-columns:1fr;
  }

  #projectsTab-file .pm-status-grid .pm-metric:last-child{
    grid-column:span 1;
  }

  #projectsTab-file #fileModuleLinks{
    grid-template-columns:1fr;
  }
}
/* =========================================
   Projekte - Projektgesundheit als Mini-Heatmap
   Variante A: nur CSS, kein Markup-Umbau
   ========================================= */

#projectsTab-file .pm-metric.health-link{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:16px;
  background:#fff;
  border:1px solid #dde7f2;
  box-shadow:0 10px 26px rgba(15,23,36,.05);
}

/* subtiler unterer Heatmap-Akzent */
#projectsTab-file .pm-metric.health-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  opacity:.9;
  background:#d7e1ee;
}

/* Hover bleibt wertig, aber ruhig */
#projectsTab-file .pm-metric.health-link:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(15,23,36,.08);
}

/* Health-Inhalt geordneter wie kleine Cockpit-Kachel */
#projectsTab-file #projectHealthPanel{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:2px 0 4px;
}

#projectsTab-file #projectHealthPanel .pm-badge{
  width:max-content;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

#projectsTab-file #projectHealthPanel .small{
  line-height:1.35;
  color:#526173;
}

/* Typografie etwas cockpit-nA¤her */
#projectsTab-file .pm-metric.health-link strong{
  display:block;
  letter-spacing:-.02em;
}

#projectsTab-file .pm-metric.health-link .small{
  color:#5b6573;
}

/* -------- ZustA¤nde wie im Cockpit -------- */

#projectsTab-file .pm-metric.health-link.is-green{
  background:linear-gradient(180deg,#f8fff9 0%,#e7f7ea 100%);
  border-color:#b8e0c0;
}
#projectsTab-file .pm-metric.health-link.is-green::after{
  background:#7dcf95;
}

#projectsTab-file .pm-metric.health-link.is-yellow{
  background:linear-gradient(180deg,#fffdf7 0%,#fff7da 100%);
  border-color:#f1df9a;
}
#projectsTab-file .pm-metric.health-link.is-yellow::after{
  background:#e4c85d;
}

#projectsTab-file .pm-metric.health-link.is-red{
  background:linear-gradient(180deg,#fff8f8 0%,#ffe5e5 100%);
  border-color:#f0b6b6;
}
#projectsTab-file .pm-metric.health-link.is-red::after{
  background:#df7f7f;
}

#projectsTab-file .pm-metric.health-link.is-blue{
  background:linear-gradient(180deg,#fbfdff 0%,#f3f7fc 100%);
  border-color:#d7e1ee;
}
#projectsTab-file .pm-metric.health-link.is-blue::after{
  background:#9cb6d8;
}

/* =========================================
   Dokumente - zentrale UI-Bausteine
   Step 1: sichere Auslagerung nach app.css
   ========================================= */

.doc-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.doc-statusbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
  box-shadow:var(--shadow);
}

.doc-status-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,auto));
  gap:14px;
  align-items:center;
}

.doc-status-main .item small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.doc-status-main .item strong{
  display:block;
}

.doc-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
}

.doc-note{
  background:#fbfdff;
  border:1px solid #e2eaf3;
  border-radius:16px;
  padding:14px;
}

.doc-list-card{
  border-color:#e5ebf3;
  box-shadow:0 10px 26px rgba(15,23,36,.04);
}

.doc-list-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.doc-list-head .small{
  max-width:760px;
}

.doc-chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}

.doc-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

.doc-chip.type{
  background:#eef4ff;
  color:#2456d6;
}

.doc-chip.status-active{
  background:#eefaf4;
  color:#198556;
}

.doc-chip.status-archiviert{
  background:#f3f4f6;
  color:#475569;
}

.doc-chip.status-entwurf{
  background:#fff6e6;
  color:#b67800;
}

.doc-chip.confidential{
  background:#fee2e2;
  color:#991b1b;
}

.doc-empty{
  padding:14px;
  border:1px dashed #d5deea;
  border-radius:14px;
  background:#fbfdff;
  color:var(--muted);
}

.doc-overview-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}

.doc-mini-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.doc-mini-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid #e7edf5;
  border-radius:14px;
  background:#fff;
}

.doc-mini-row b{
  display:block;
}

.doc-mini-row .small{
  line-height:1.35;
}

.doc-kpi-link{
  cursor:pointer;
}

.doc-kpi-link:hover{
  border-color:#cfdced;
  box-shadow:0 10px 26px rgba(15,23,36,.08);
}

.doc-table-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.doc-table-meta .small{
  line-height:1.3;
}

.doc-modal-state{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1d4ed8;
}

.doc-modal-state.state-red{
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}

.doc-modal-state.state-green{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}

.doc-assignment-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

@media (max-width: 980px){
  .doc-status-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .doc-overview-grid,
  .doc-assignment-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 560px){
  .doc-status-main{
    grid-template-columns:1fr;
  }
}
/* =========================================
   Kontakte - zentrale UI-Bausteine
   Step 1: sichere Auslagerung
   ========================================= */

.contact-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contact-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
}

.contact-list-card{
  border-color:#e5ebf3;
  box-shadow:0 10px 26px rgba(15,23,36,.04);
}

.contact-list-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.contact-list-head .small{
  max-width:640px;
}

.contact-empty{
  padding:14px;
  border:1px dashed #d5deea;
  border-radius:14px;
  background:#fbfdff;
  color:var(--muted);
}

.contact-chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* Tabs sind global schon vorhanden → nur Override vermeiden */

/* Responsive */
@media (max-width: 980px){
  .contact-status-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 560px){
  .contact-status-main{
    grid-template-columns:1fr;
  }
}
/* =========================================
   Kontaktdetail - zentrale UI-Bausteine
   Step 1: sichere Auslagerung
   ========================================= */

.contact-detail-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contact-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:14px;
  align-items:start;
}

.contact-detail-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contact-info-list{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:8px 12px;
}

.contact-info-list div:nth-child(odd){
  color:var(--muted);
}

.contact-related-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact-related-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.contact-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#eef4ff;
  color:#2456d6;
}

.contact-chip.ok{
  background:#eefaf4;
  color:#198556;
}

.contact-chip.warn{
  background:#fff6e6;
  color:#b67800;
}

.contact-chip.muted{
  background:#f3f4f6;
  color:#4b5563;
}

.contact-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width: 980px){
  .contact-detail-grid{
    grid-template-columns:1fr;
  }

  .contact-detail-status-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 560px){
  .contact-detail-status-main{
    grid-template-columns:1fr;
  }

  .contact-info-list{
    grid-template-columns:1fr;
  }
}
/* =========================================
   Design System 2.0 - Global Tune Step 1
   ========================================= */

/* 1. Typografie */
body{
  font-size:14.5px;
  line-height:1.45;
  color:#1e293b;
}

h1{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
}

h2{
  font-size:18px;
  font-weight:700;
}

h3{
  font-size:15.5px;
  font-weight:700;
}

.small{
  font-size:12px;
  color:#64748b;
}

/* 2. Cards (globaler Look) */
.card{
  border-radius:18px;
  border:1px solid #e5ebf3;
  box-shadow:0 8px 22px rgba(15,23,36,.04);
  background:#fff;
}

/* 3. KPI / Metric Karten */
.pm-kpi,
.metric-card{
  border-radius:16px;
  border:1px solid #e5ebf3;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,36,.04);
}

/* 4. Hover-Effekt (subtil, aber wichtig) */
.card:hover,
.pm-kpi:hover,
.metric-card:hover{
  border-color:#d8e2ee;
  box-shadow:0 12px 28px rgba(15,23,36,.08);
  transition:all .15s ease;
}

/* 5. Buttons */
.btn{
  border-radius:12px;
  font-weight:600;
  padding:6px 12px;
  border:1px solid #dbe3ec;
  background:#fff;
}

.btn:hover{
  background:#f4f7fb;
  border-color:#cfdced;
}

/* 6. Chips / Badges */
.contact-chip,
.doc-chip{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
}

/* 7. Layout-AbstA¤nde */
.pm-shell,
.contact-shell,
.doc-shell,
.contact-detail-shell{
  gap:16px;
}

/* 8. Context Bars ruhiger */
.context-bar{
  border-radius:18px;
  border:1px solid #e5ebf3;
  background:#fbfdff;
}
/* =========================================
   Design System 2.0 - Global Tune Step 2
   Farben / Status / States harmonisieren
   ========================================= */

:root{
  --text:#1e293b;
  --muted:#64748b;
  --line:#e5ebf3;

  --accent:#2456d6;
  --accent-soft:#eef4ff;

  --ok:#198556;
  --ok-soft:#eefaf4;
  --warn:#b67800;
  --warn-soft:#fff6e6;
  --danger:#c0392b;
  --danger-soft:#fdeaea;
  --info:#2456d6;
  --info-soft:#eef4ff;
}

/* Grundfarben konsistenter */
.small{
  color:var(--muted);
}

.field label,
.context-bar-main .item small,
.doc-status-main .item small,
.dashboard-context-main .item small{
  color:var(--muted);
}

/* Buttons */
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.btn.primary:hover{
  background:#1f4fc7;
  border-color:#1f4fc7;
}

/* Standard-Flags */
.flag.green,
.green{
  background:var(--ok-soft);
  color:var(--ok);
}

.flag.yellow,
.yellow{
  background:var(--warn-soft);
  color:var(--warn);
}

.flag.red,
.red{
  background:var(--danger-soft);
  color:var(--danger);
}

.flag.blue,
.blue{
  background:var(--info-soft);
  color:var(--info);
}

/* Kontakt-Chips */
.contact-chip{
  background:var(--info-soft);
  color:var(--info);
}

.contact-chip.ok{
  background:var(--ok-soft);
  color:var(--ok);
}

.contact-chip.warn{
  background:var(--warn-soft);
  color:var(--warn);
}

.contact-chip.muted{
  background:#f3f4f6;
  color:#4b5563;
}

/* Dokument-Chips */
.doc-chip.type{
  background:var(--info-soft);
  color:var(--info);
}

.doc-chip.status-active{
  background:var(--ok-soft);
  color:var(--ok);
}

.doc-chip.status-archiviert{
  background:#f3f4f6;
  color:#475569;
}

.doc-chip.status-entwurf{
  background:var(--warn-soft);
  color:var(--warn);
}

.doc-chip.confidential{
  background:var(--danger-soft);
  color:var(--danger);
}

/* Projekt-Badges */
.pm-badge.green{
  background:var(--ok-soft);
  color:var(--ok);
}

.pm-badge.yellow{
  background:var(--warn-soft);
  color:var(--warn);
}

.pm-badge.red{
  background:var(--danger-soft);
  color:var(--danger);
}

.pm-badge.blue{
  background:var(--info-soft);
  color:var(--info);
}

/* Warn-Badges Dashboard */
.warning-badge.red{
  background:var(--danger-soft);
  color:var(--danger);
}

.warning-badge.yellow{
  background:#fef3c7;
  color:#92400e;
}

.warning-badge.blue{
  background:var(--info-soft);
  color:var(--info);
}
/* =========================================
   Design System 2.0 - Global Tune Step 3
   Hover / Klick / Interaktion harmonisieren
   ========================================= */

/* Einheitliche Transition-Basis */
.card,
.pm-kpi,
.metric-card,
.pm-link,
.action-card-link,
.quick-links a,
.doc-kpi-link,
.pm-next,
.contact-related-row,
.doc-mini-row,
.doc-list-card,
.contact-list-card,
.btn,
.tabs button{
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

/* Karten-Hover global */
.card:hover,
.pm-kpi:hover,
.metric-card:hover,
.doc-list-card:hover,
.contact-list-card:hover{
  border-color:#d8e2ee;
  box-shadow:0 12px 28px rgba(15,23,36,.08);
}

/* Klickbare Karten / Links */
.pm-link:hover,
.action-card-link:hover,
.quick-links a:hover,
.pm-next:hover,
.doc-mini-row:hover,
.contact-related-row:hover{
  border-color:#cfdced;
  box-shadow:0 10px 24px rgba(15,23,36,.08);
  transform:translateY(-1px);
}

/* KPI-KlickflA¤chen etwas klarer */
.doc-kpi-link:hover,
.kpi.kpi-link:hover,
.dashboard-kpis .kpi-link:hover{
  border-color:#cfdced;
  box-shadow:0 10px 26px rgba(15,23,36,.08);
  transform:translateY(-1px);
}

/* Buttons */
.btn:hover,
.tabs button:hover{
  background:#f4f7fb;
  border-color:#cfdced;
}

.btn:active,
.tabs button:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 2px rgba(15,23,36,.08);
}

/* FokuszustA¤nde fA¼r Tastaturbedienung */
.btn:focus-visible,
.tabs button:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.pm-link:focus-visible,
.action-card-link:focus-visible,
.quick-links a:focus-visible{
  outline:none;
  border-color:#bfd4ff;
  box-shadow:
    0 0 0 3px rgba(36,86,214,.12),
    0 8px 24px rgba(15,23,36,.06);
}

/* Inputs ruhiger, aber klar fokussiert */
.field input,
.field select{
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.field input:hover,
.field select:hover{
  border-color:#d2dce8;
}

.field input:focus,
.field select:focus{
  outline:none;
  border-color:#bfd4ff;
  box-shadow:0 0 0 3px rgba(36,86,214,.10);
  background:#fff;
}

/* Tabellenzeilen mit sanftem Hover */
tbody tr:hover td{
  background:#f8fbff;
}

/* Klickbare Tabellenzeilen */
.project-table tr.is-clickable,
.pm-table-row-link,
.contact-table-row-clickable{
  cursor:pointer;
}

.project-table tr.is-clickable:hover td,
.pm-table-row-link:hover td,
.contact-table-row-clickable:hover td{
  background:#f8fbff;
}

/* Badge/Chip-Ruhe */
.contact-chip,
.doc-chip,
.pm-badge,
.flag,
.warning-badge{
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .card,
  .pm-kpi,
  .metric-card,
  .pm-link,
  .action-card-link,
  .quick-links a,
  .doc-kpi-link,
  .pm-next,
  .contact-related-row,
  .doc-mini-row,
  .doc-list-card,
  .contact-list-card,
  .btn,
  .tabs button,
  .field input,
  .field select{
    transition:none;
  }
}

/* =========================================
   UI Utilities - Inline Style Replacement Step 2
   ========================================= */

.ui-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.ui-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ui-stack-sm{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ui-stack-md{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* =========================================
   UI Utilities - Inline Style Replacement Step 4
   Dokumente / Form / Spacing
   ========================================= */

.form-grid-220-4{
  grid-template-columns:220px 220px 220px 220px;
  gap:10px;
}

.ui-stack-lg{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ui-inline-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.ui-text-right{
  text-align:right;
}

.span-full{
  grid-column:1 / -1;
}

.mt-14{
  margin-top:14px;
}

.mb-4{ margin-bottom:4px; }

/* =========================================
   UI Utilities - Inline Style Replacement Step 5
   Projekte / Form / Spacing
   ========================================= */

.mb-14{ margin-bottom:14px; }
.mt-12{ margin-top:12px; }
.mt-8{ margin-top:8px; }
.mt-6{ margin-top:6px; }

.form-grid-220-2{
  grid-template-columns:220px 220px;
  gap:10px;
}

.form-grid-220-4{
  grid-template-columns:220px 220px 220px 220px;
  gap:10px;
}

.ui-card-head-center{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ui-width-auto{
  width:auto;
  min-width:0;
}

.ui-margin-0{
  margin:0;
}



/* =========================================
   Dashboard - fehlende Restklassen nach Forensik-Fix
   ========================================= */
.dash-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px 0;
}
.dash-tabs button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
}
.dash-tabs button.active{
  background:#eef4ff;
  border-color:#bfd4ff;
  color:#2456d6;
}

.dashboard-filter-grid{
  grid-template-columns:260px;
  gap:10px;
  min-width:min(100%,260px);
}

.mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.dashboard-kpi-wide .metric{
  min-height:0;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.dashboard-kpi-wide .metric strong{
  font-size:22px;
  line-height:1.15;
}
.dashboard-kpi-wide .metric small{
  display:block;
  margin-bottom:4px;
  color:#5b6573;
  font-weight:700;
}

.dashboard-finance-full{
  width:100%;
  min-width:0;
}
.finance-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
.finance-grid .metric{
  grid-column:span 4;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.finance-grid .metric.wide-half{
  grid-column:span 6;
  min-height:60px;
}
.finance-grid .metric.wide-full{
  grid-column:span 12;
  min-height:60px;
}

.dashboard-progress{
  background:#fbfdff;
  border:1px solid #e2eaf3;
  border-radius:12px;
  padding:4px 6px;
}
.progress-track{
  height:10px;
  background:#e8eef6;
  border-radius:999px;
  overflow:hidden;
}
.progress-bar{
  height:100%;
  background:#2563eb;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}

.project-table{
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  width:100%;
}
.project-table td,
.project-table th{
  vertical-align:middle;
  padding:8px 10px;
}
.project-table thead th{
  background:#f7faff;
  position:sticky;
  top:0;
  z-index:1;
  white-space:nowrap;
}
.project-table tr.is-clickable{
  cursor:pointer;
  transition:background .15s ease;
}
.project-table tr.is-clickable:hover td{
  background:#f8fbff;
}
#dashboardProjectRows td:nth-child(1), .project-table thead th:nth-child(1){width:9%}
#dashboardProjectRows td:nth-child(2), .project-table thead th:nth-child(2){width:23%}
#dashboardProjectRows td:nth-child(3), .project-table thead th:nth-child(3){width:11%}
#dashboardProjectRows td:nth-child(4), .project-table thead th:nth-child(4){width:9%}
#dashboardProjectRows td:nth-child(5), .project-table thead th:nth-child(5){width:9%}
#dashboardProjectRows td:nth-child(6), .project-table thead th:nth-child(6){width:11%}
#dashboardProjectRows td:nth-child(7), .project-table thead th:nth-child(7){width:15%}
#dashboardProjectRows td:nth-child(8), .project-table thead th:nth-child(8){width:10%}
#dashboardProjectRows td:nth-child(9), .project-table thead th:nth-child(9){width:3%}

.health-dot{
  display:inline-flex;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
  padding:8px 10px;
}
.health-green{background:#16a34a}
.health-yellow{background:#eab308}
.health-red{background:#dc2626}

.kpi-state{margin-top:1px}
.kpi-state .flag{font-size:12px}

.note-soft{
  background:#fbfdff;
  border:1px solid #e2eaf3;
  border-radius:16px;
  padding:14px;
}
.note-soft .small{line-height:1.4}
.note-soft.risk-green{border-color:#bbf7d0;background:#f7fff9}
.note-soft.risk-yellow{border-color:#fde68a;background:#fffdf5}
.note-soft.risk-red{border-color:#fecaca;background:#fff8f8}
.metric strong.is-risk-green{color:#16a34a}
.metric strong.is-risk-yellow{color:#ca8a04}
.metric strong.is-risk-red{color:#dc2626}
.card.fin-highlight{
  background:#fff;
  border-top:1px solid var(--line);
}

.mt-3{margin-top:3px}
.mt-4{margin-top:4px}

@media (max-width:760px){
  .dashboard-kpis,
  .mini-grid,
  .quick-links,
  .finance-grid{
    grid-template-columns:1fr;
  }
  .finance-grid .metric,
  .finance-grid .metric.wide-half,
  .finance-grid .metric.wide-full{
    grid-column:span 1;
  }
}


/* =========================================
   Projekte - fehlende Basis-Klassen nach TiefenprA¼fung
   ========================================= */
.pm-context{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
  box-shadow:var(--shadow);
}

.pm-context-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,auto));
  gap:14px;
  align-items:center;
}

.pm-context-main .item small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.pm-context-main .item strong{
  display:block;
}

.pm-metric{
  background:#fff;
  border:1px solid #e3ebf5;
  border-radius:16px;
  padding:12px 14px;
}

.pm-metric small{
  display:block;
  margin-bottom:4px;
  color:#5b6573;
  font-weight:700;
}

.pm-metric strong{
  font-size:22px;
  line-height:1.15;
}

/* =========================================
   Kontakt-Module - sichere ErgA¤nzungen vor Cleanup
   Nur fehlende Basisklassen, kein Cleanup
   ========================================= */

.contact-statusbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
  box-shadow:var(--shadow);
}

.contact-status-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,auto));
  gap:14px;
  align-items:center;
}

.contact-status-main .item small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.contact-status-main .item strong{
  display:block;
}

.contact-note{
  background:#fbfdff;
  border:1px solid #e2eaf3;
  border-radius:16px;
  padding:14px;
}

.contact-detail-status{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
  box-shadow:var(--shadow);
}

.contact-detail-status-main{
  display:flex;
  align-items:center;
  gap:24px;
  flex:1;
  min-width:0;
  flex-wrap:wrap;
  justify-content:space-evenly;
}

.contact-detail-status-main .item{
  min-width:0;
}

.contact-detail-status-main .item small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.contact-detail-status-main .item strong{
  display:block;
  white-space:nowrap;
}

.form-grid-220-3{
  grid-template-columns:220px 220px 220px;
  gap:10px;
}

.ui-align-end{
  display:flex;
  align-items:end;
}

.span-2{
  grid-column:1 / span 2;
}

/*css issue report von mir angehA¤ngt */

.issue-report-button{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1100;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid #ffd7de;
  background:#fff5f6;
  color:#d84d64;
  font-weight:800;
  box-shadow:0 14px 32px rgba(18,32,51,.14);
  cursor:pointer;
}

.issue-report-button:hover{
  transform:translateY(-1px);
}

.issue-report-modal{
  width:min(760px,100%);
}

.issue-report-textarea{
  min-height:140px;
  resize:vertical;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font:inherit;
}

.issue-report-status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#fbfdff;
  border:1px solid #e2eaf3;
  min-height:42px;
}

@media (max-width: 980px){
  .issue-report-button{
    right:16px;
    bottom:16px;
  }
}
/* =========================================
   Fehlermeldungen - KPI Compact (globalisiert)
   ========================================= */

.kpi.compact{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}

.kpi.compact strong{
  font-size:20px;
  min-width:40px;
}

.kpi.compact .kpi-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.kpi.compact small{
  font-size:18px;
  color:var(--muted);
}


/* =========================================
   Kontakte - Firmen-Modal mit Scroll / Mobile-Sicherheit
   ========================================= */

#companyModal{
  align-items:flex-start;
  overflow:auto;
  padding:20px;
}

#companyModal .modal{
  width:min(820px,96vw);
  max-height:calc(100vh - 40px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

#companyModal .ui-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  padding-top:12px;
  margin-top:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 18px);
}

#companyModal .company-project-link-editor,
#companyModal .company-contact-editor{
  max-width:100%;
}

#companyModal .company-project-link-row,
#companyModal .company-contact-row{
  align-items:start;
}

#companyModal .company-project-link-row select,
#companyModal .company-project-link-row input,
#companyModal .company-contact-row input{
  width:100%;
}

#companyModal .project-primary-toggle,
#companyModal .contact-primary-toggle{
  cursor:pointer;
}

#companyModal .project-primary-toggle input,
#companyModal .contact-primary-toggle input{
  cursor:pointer;
}

/* PrimA¤r besser sichtbar */
#companyModal .company-project-link-row input[type="radio"],
#companyModal .company-contact-row input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border:2px solid #cbd5e1;
  border-radius:50%;
  display:inline-block;
  position:relative;
  background:#fff;
}

#companyModal .company-project-link-row input[type="radio"]:checked,
#companyModal .company-contact-row input[type="radio"]:checked{
  border-color:var(--accent);
  background:var(--accent);
}

#companyModal .company-project-link-row input[type="radio"]:checked::after,
#companyModal .company-contact-row input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
}

@media (max-width: 760px){
  #companyModal{
    padding:10px;
  }

  #companyModal .modal{
    width:min(96vw,96vw);
    max-height:calc(100vh - 20px);
    padding:14px;
  }

  #companyModal .ui-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  #companyModal .ui-actions .btn{
    width:100%;
  }
}


/* =========================================
   Kontakte - zentrale Interaktion / Detail-Hub
   ========================================= */

body.embed-mode .main-content{padding:0 !important;}
body.embed-mode .sidebar{display:none !important;}

.contact-table-row-clickable{
  cursor:pointer;
}
.contact-table-row-clickable td{
  transition:background-color .15s ease, border-color .15s ease;
}
.contact-table-row-clickable:hover td{
  background:#f8fbff;
  border-top-color:#dbe6f5;
  border-bottom-color:#dbe6f5;
}
.contact-table-row-clickable:focus-within td{
  background:#f8fbff;
}

.contact-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.contact-submodal .modal,
.modal.contact-submodal,
#companyContactModal .modal,
#companyProjectLinkModal .modal,
#companyMasterModal .modal{
  width:min(760px,96vw);
  max-height:calc(100vh - 40px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.contact-related-row .btn,
.contact-detail-status .btn,
.ui-actions .btn,
.btn{
  text-decoration:none;
}

.contact-related-row .contact-actions{
  align-items:flex-start;
}

.contact-role-input{
  width:100%;
}

@media (max-width: 760px){
  #companyContactModal .modal,
  #companyProjectLinkModal .modal,
  #companyMasterModal .modal{
    width:min(96vw,96vw);
    max-height:calc(100vh - 20px);
    padding:14px;
  }
}


/* =========================================
   Kontakte - Detail-Hub Modal Feinschliff
   ========================================= */

.company-master-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.company-master-grid .field.span-2,
.company-contact-grid .field.span-2{
  grid-column:1 / -1;
}

.company-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.contact-inline-hint{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

@media (max-width: 760px){
  .company-master-grid,
  .company-contact-grid{
    grid-template-columns:1fr;
  }

  .company-master-grid .field.span-2,
  .company-contact-grid .field.span-2{
    grid-column:auto;
  }
}

/* Kontakte - Modal Feldfeinschliff */
#companyContactModal select,
#companyMasterModal select{
  width:100%;
}


/* =========================================
   Projekte - kompakte Kontextleisten + Statusfarben
   ========================================= */

.pm-context-main.pm-context-main-compact{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.pm-context-main.pm-context-main-compact .item{
  min-width:0;
}

.pm-context-main.pm-context-main-compact .item strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pm-badge.status-stock{background:#f1f5f9;color:#475569;}
.pm-badge.status-plan{background:#f5f3ff;color:#7c3aed;}
.pm-badge.status-approval{background:#fff7ed;color:#c97a00;}
.pm-badge.status-sales{background:#eff6ff;color:#2563eb;}
.pm-badge.status-build{background:#ecfeff;color:#0f766e;}
.pm-badge.status-done{background:#eefaf4;color:#198556;}

@media (max-width: 980px){
  .pm-context-main.pm-context-main-compact{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 560px){
  .pm-context-main.pm-context-main-compact{grid-template-columns:1fr;}
}



/* =========================================
   Kontaktdetail - Entity Cards
   Zentrale Kartenbasis fA¼r Ansprechpartner / ProjektbezA¼ge
   ========================================= */

.entity-card{
  padding:14px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:grid;
  gap:8px;
}

.entity-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.entity-card-main{
  display:grid;
  gap:4px;
  min-width:0;
}

.entity-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.entity-card-title strong{
  letter-spacing:-.01em;
}

.entity-card-meta{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

.entity-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.entity-card-body{
  display:grid;
  gap:6px;
}

.entity-card-row{
  font-size:12.5px;
  color:#334155;
  line-height:1.45;
}

.entity-card-row strong{
  color:#64748b;
  font-weight:700;
}

.entity-card-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.entity-card-tools .small{
  color:var(--muted);
}

@media (max-width:760px){
  .entity-card-head{
    flex-direction:column;
  }

  .entity-card-actions{
    width:100%;
  }
}

/* =========================================
   Kontaktdetail - RA¼cknavigation + klickbare Projektzeilen
   ========================================= */

.contact-detail-status-tabs{
  align-items:flex-start;
}

.contact-detail-back-tabs{
  width:100%;
  margin:0;
}

.contact-detail-back-tabs .btn{
  text-decoration:none;
}

.contact-detail-back-tabs .btn.active{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:#d8e5ff;
}

.contact-related-row-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

.contact-related-row-link:hover{
  border-color:#bfd4ff;
  box-shadow:0 8px 24px rgba(36,86,214,.10);
  transform:translateY(-1px);
}

.contact-row-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:#2456d6;
  font-weight:600;
  white-space:nowrap;
}


/* =========================================
   Kontakte - KA¤uferdetail Finalisierung April 2026
   ========================================= */

.contact-detail-status-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:nowrap;
}

.contact-detail-status-main-inline{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
  min-width:0;
}

.contact-detail-status-main-inline .item{
  min-width:0;
}

.contact-detail-status-main-inline .item strong{
  white-space:nowrap;
}

.contact-embedded-frame{
  width:100%;
  height:auto;
  min-height:520px;
  border:0;
  border-radius:14px;
  background:#fff;
}

.modal.modal-iframe{
  width:min(820px,94vw);
}

.contact-embedded-frame{
  width:100%;
  height:620px;
  border:0;
  border-radius:14px;
  background:#fff;
}

.contact-related-row-flat{
  display:block;
}

.contact-related-row-flat .contact-actions,
.contact-related-row-flat .contact-row-arrow{
  display:none !important;
}

.pm-row-highlight td{
  background:#f8fbff;
  border-top-color:#bfd4ff;
  border-bottom-color:#bfd4ff;
}

@media (max-width: 1240px){
  .contact-detail-status-inline{
    flex-wrap:wrap;
  }

  .contact-detail-status-main-inline{
    flex-wrap:wrap;
  }
}


/* =========================================
   DEV - STATE BADGE (ImmoPilot)
   ========================================= */

.imp-state-badge{
  position:fixed;
  top:12px;
  right:16px;
  z-index:9999;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(15,23,36,.88);
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  opacity:.78;
  pointer-events:auto;
  white-space:pre-line;
}

.imp-state-badge.subtle{
  opacity:.55;
}
.imp-state-badge:hover{
  opacity:1;
  transform:translateY(-1px);
  transition:.15s ease;
}


/* Kontakte - KA¤ufer-Embedded-Modal Optimierung K-LIVE-20260407-1428-95ef */
.modal.modal-iframe{
  width:min(980px,96vw);
  max-height:calc(100vh - 32px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#buyerEmbeddedModal{
  align-items:center;
  justify-content:center;
  padding:16px;
}

#buyerEmbeddedModal .modal{
  overflow:hidden;
}

#buyerEmbeddedModal .ui-card-head-center{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
  padding-bottom:10px;
  margin-bottom:10px;
}

.contact-embedded-frame{
  display:block;
  width:100%;
  height:74vh;
  min-height:560px;
  max-height:calc(100vh - 120px);
  border:0;
  border-radius:14px;
  background:#fff;
}

@media (max-width: 760px){
  .modal.modal-iframe{
    width:min(96vw,96vw);
    max-height:calc(100vh - 20px);
  }

  .contact-embedded-frame{
    height:70vh;
    min-height:420px;
    max-height:calc(100vh - 96px);
  }
}



/* Kontakte - KA¤ufer-Modal kompakter */
#buyerModal .modal{
  width:min(820px,96vw);
  max-width:820px;
}

#buyerModal .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:760px){
  #buyerModal .modal{
    width:min(96vw,96vw);
    max-width:none;
  }

  #buyerModal .form-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================
   Kontakte - ausgelagertes Live-CSS
   APP-LIVE-20260414-1222-95e5
   Basis: K-LIVE-20260414-1222-943a / KD-LIVE-20260414-1222-4619
   ========================================= */

body.embed-mode{ background:transparent !important; }
body.embed-mode .page-head, body.embed-mode h1, body.embed-mode .sub, body.embed-mode .contact-shell, body.embed-mode .contact-note, body.embed-mode .issue-report-fab, body.embed-mode .sidebar, body.embed-mode .main-sidebar, body.embed-mode .topbar{ display:none !important; }
body.embed-mode .main-content{ padding:0 !important; width:100% !important; max-width:none !important; }
body.embed-mode #buyerModal{ display:block !important; position:static !important; inset:auto !important; background:transparent !important; padding:0 !important; min-height:0 !important; overflow:visible !important; }
body.embed-mode #buyerModal .modal{ width:100% !important; max-width:none !important; min-height:0 !important; margin:0 !important; border-radius:0 !important; box-shadow:none !important; border:none !important; padding:0 !important; background:transparent !important; }
body.embed-mode #buyerModal .btn[onclick="closeBuyerModal()"]{ display:none !important; }
.contact-list-card table tbody tr{ cursor:pointer; }
.contact-company-card,.contact-person-lines{ display:flex; flex-direction:column; gap:2px; }
.contact-row-muted{ color:#667085; }
.contact-form-grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.contact-form-grid-2 .span-2{ grid-column:1 / -1; }
.contact-inline-state{ margin-top:12px; }
.contact-inline-state.state-red{ color:#b42318; }
.contact-inline-state.state-green{ color:#027a48; }

.contact-statusbar-topnav{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid #e7ebf2;
  background:#fff;
  box-shadow:0 14px 32px rgba(16,24,40,.05);
  margin-bottom:18px;
}

.trash-hero{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:18px;
  margin-bottom:18px;
}

.trash-panel{
  background:#fff;
  border:1px solid #e7ebf2;
  border-radius:22px;
  box-shadow:0 14px 32px rgba(16,24,40,.05);
  padding:18px 20px;
}

.trash-panel h3{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.2;
}

.trash-panel .small{
  color:#667085;
}

.trash-empty{
  display:grid;
  place-items:center;
  min-height:220px;
  text-align:center;
  border:1px dashed #d0d5dd;
  border-radius:18px;
  background:#fcfcfd;
  color:#667085;
  padding:24px;
}

.trash-empty strong{
  display:block;
  font-size:16px;
  color:#101828;
  margin-bottom:6px;
}

.trash-list{
  display:grid;
  gap:12px;
}

.trash-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border:1px solid #e7ebf2;
  border-radius:18px;
  background:#fff;
  transition:box-shadow .15s ease, transform .15s ease;
}

.trash-item:hover{
  box-shadow:0 10px 20px rgba(16,24,40,.05);
  transform:translateY(-1px);
}

.trash-item-main{
  min-width:0;
  display:grid;
  gap:4px;
}

.trash-item-line1{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.trash-item-name{
  font-size:16px;
  font-weight:700;
  color:#101828;
}

.trash-item-meta{
  font-size:14px;
  color:#667085;
}

.trash-item-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.flag.rose{
  background:#fff1f3;
  color:#be123c;
  border:1px solid #fecdd3;
}

.btn-ghost-danger{
  background:#fff;
  color:#b42318;
  border:1px solid #fecdca;
  box-shadow:none;
}

.btn-ghost-danger:hover{
  background:#fff5f4;
}

.trash-stat{
  display:grid;
  gap:12px;
}

.trash-stat-box{
  border:1px solid #f2f4f7;
  border-radius:18px;
  background:#f8fafc;
  padding:14px 16px;
}

.trash-stat-box small{
  display:block;
  color:#667085;
  margin-bottom:4px;
}

.trash-stat-box strong{
  font-size:24px;
  color:#101828;
}

@media (max-width: 1000px){
  .trash-hero{
    grid-template-columns:1fr;
  }

  .trash-item{
    align-items:flex-start;
    flex-direction:column;
  }

  .trash-item-actions{
    width:100%;
  }
}
@media (max-width: 900px){ .contact-form-grid-2{ grid-template-columns:1fr; } 
}
.contact-filter-card{
  position:sticky;
  top:12px;
  z-index:45;

  background:#f9fafb;
  border-radius:14px;

  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}

/* =========================================
   Kontaktdetail - ausgelagertes Live-CSS
   APP-LIVE-20260414-1222-95e5
   Basis: KD-LIVE-20260414-1222-4619
   ========================================= */

.detail-hero{
  display:grid;
  gap:16px;
  margin:0 0 10px;
}

.detail-hero-top{
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}

.detail-hero-main{
  display:grid;
  gap:10px;
  flex:1;
  min-width:0;
}

.detail-hero h1{
  margin:0;
  font-size:42px;
  line-height:1.04;
  letter-spacing:-.035em;
}

.detail-subline{
  color:#667085;
  font-size:17px;
  line-height:1.45;
}
.detail-context-chips{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.detail-context-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0;
  border:none;
  background:transparent;
  color:#98a2b3;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  box-shadow:none;
  
}

.detail-context-chip:hover{
  color:#2f5bd2;
}

.detail-context-chip.is-static{
  color:#344054;
  font-weight:700;
}

.detail-context-sep{
  color:#98a2b3;
  font-size:14px;
  line-height:1;
}

.badgeline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.badgeline .flag{
  border-radius:999px;
  padding:7px 12px;
}
.section-note{color:#667085;font-size:12px;margin-top:6px}

#detailRoot{
  max-width:1480px;
}
#detailRoot.overview-mode .contact-detail-grid{
  grid-template-columns:1.75fr 1fr;
}
#detailRoot.overview-mode .contact-detail-stack.primary-stack{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
#detailRoot.overview-mode #masterDataCard{
  grid-column:1 / -1;
}
#detailRoot.overview-mode #buyerAssignmentCard{
  grid-column:1 / -1;
}
#detailRoot.overview-mode #companyContactsCard,
#detailRoot.overview-mode #projectLinksCard,
#detailRoot.overview-mode #correspondenceCard{
  min-height:100%;
}

.btn-secondary{
  background:#fff;
  border:1px solid #d0d5dd;
  color:#344054;
  box-shadow:none;
}

.btn-secondary:hover{
  background:#f9fafb;
  border-color:#cfd6e2;
}

.btn-danger{
  background:#fff1f3;
  border:1px solid #fecdd3;
  color:#be123c;
  box-shadow:none;
}
.btn-danger:hover{
  background:#ffe4e6;
  border-color:#fda4af;
}

/* Icon im Button */
.btn-icon{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-icon svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
}



.contact-statusbar .ui-actions{
  align-items:flex-start;
}
.contact-statusbar .ui-actions .btn{
  min-height:52px;
  padding:0 18px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e7ebf2;
  box-shadow:0 10px 24px rgba(16,24,40,.04);
}

#entityEditBtn{display:none !important;}

.entity-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:10px 0 8px;
}

.entity-summary .box{
  position:relative;
  padding:18px 20px 18px 86px;
  min-height:88px;
  border-radius:24px;
  background:#fff;
  border:1px solid #e7ebf2;
  box-shadow:
    0 1px 2px rgba(16,24,40,.04),
    0 14px 30px rgba(16,24,40,.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.summary-icon{
  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#2f5bd2;
  background:#eef4ff;
  border-radius:50%;
}

.summary-icon svg{
  width:24px;
  height:24px;
  stroke:currentColor;
  fill:none;
}
.entity-summary small{
  display:block;
  color:#667085;
  margin-bottom:6px;
  font-size:13px;
}

.entity-summary strong{
  display:block;
  font-size:18px;
  line-height:1.2;
  font-weight:700;
  color:#101828;
}
.summary-meta{
  margin-top:6px;
  font-size:13px;
  line-height:1.35;
  color:#667085;
}
.detail-section-tabs{
  display:flex;
  gap:10px;
  margin:26px 0 24px;
  padding:0;
  flex-wrap:wrap;
  align-items:flex-end;
  border-bottom:2px solid #d7deea;
  box-shadow: 0 6px 12px -8px rgba(16,24,40,.25);
  padding-bottom:2px;
  
  
}

.detail-section-tabs .btn{
  min-height:46px;
  padding:11px 20px;
  border:1px solid #dbe3ef;
  border-bottom:none;
  background:#fff;
  color:#101828;
  border-radius:14px 14px 0 0;
  font-weight:600;
  font-size:14px;
  box-shadow:none;
  margin-bottom:-2px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.detail-section-tabs .btn .tab-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  flex:0 0 18px;
}

.detail-section-tabs .btn svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
}

.detail-section-tabs .btn:hover{
  background:#f8fafc;
  border-color:#cfd6e2;
}

.detail-section-tabs .btn.active{
  background:#2f5bd2;
  border-color:#2f5bd2;
  color:#fff;
  font-weight:700;
  box-shadow:0 10px 22px rgba(47,91,210,.20);
}

.detail-section-tabs .btn.active::after{display:none}

.contact-detail-grid{
  display:grid;
  grid-template-columns:2fr 1.1fr;
  gap:20px;
}
.contact-detail-stack{
  display:grid;
  gap:18px;
}

.card{
  background:#fff;
  border:1px solid #e7ebf2;
  border-radius:24px;
  box-shadow:0 14px 32px rgba(16,24,40,.05);
  padding:18px 20px;
}
.ui-card-head-center{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.ui-card-head-center h3{
  margin:0;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.02em;
}

#masterEditBtn{
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  box-shadow:none;
}

.contact-info-list{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:12px 16px;
}
.contact-info-list div:nth-child(odd){
  color:#667085;
}
.contact-info-list div:nth-child(even){
  color:#101828;
}
.kv-label-with-icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.kv-label-icon{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#98a2b3;
  flex:0 0 16px;
}

.kv-label-icon svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
}
.entity-card-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:6px 0 0;
}
.entity-card-tools .small{
  color:#667085;
}

.entity-card{
  border-radius:18px;
  padding:16px;
  border:1px solid #e7ebf2;
  background:#fff;
  transition:box-shadow .2s ease, transform .2s ease;
}
.entity-card:hover{
  box-shadow:0 10px 20px rgba(16,24,40,.05);
  transform:translateY(-1px);
}
.entity-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.entity-card-main{
  display:grid;
  gap:6px;
}
.entity-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.entity-card-meta{
  color:#667085;
}
.entity-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.entity-card-body{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.entity-card-row{
  color:#475467;
}
.entity-card-row strong{
  color:#101828;
}
.contact-person-card{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border:1px solid #e7ebf2;
  border-radius:18px;
  background:#fff;
  transition:box-shadow .2s ease, transform .2s ease;
}

.contact-person-card:hover{
  box-shadow:0 10px 20px rgba(16,24,40,.06);
  transform:translateY(-1px);
}

.contact-person-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1;
}

.contact-person-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#eaf2ff;
  color:#2f5bd2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
  flex:0 0 48px;
}

.contact-person-content{
  min-width:0;
  display:grid;
  gap:4px;
}

.contact-person-line1{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.contact-person-name{
  font-size:16px;
  font-weight:700;
  color:#101828;
}

.contact-person-role{
  font-size:14px;
  color:#667085;
}

.contact-person-meta{
  font-size:14px;
  color:#475467;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.contact-person-side{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.contact-person-chevron{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#98a2b3;
}

.contact-person-chevron svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
}

.contact-person-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.project-link-card{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border:1px solid #e7ebf2;
  border-radius:18px;
  background:#fff;
  transition:box-shadow .2s ease, transform .2s ease;
}

.project-link-card:hover{
  box-shadow:0 10px 20px rgba(16,24,40,.06);
  transform:translateY(-1px);
}

.project-link-card:active{
  transform:scale(0.99);
}

.project-link-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1;
}

.project-link-media{
  width:56px;
  height:56px;
  border-radius:14px;
  background:#eef4ff;
  color:#2f5bd2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-weight:700;
  font-size:16px;
  flex:0 0 56px;
  border:1px solid #e1eafc;
}

.project-link-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.project-link-fallback{
  padding:0 6px;
  text-align:center;
  line-height:1.1;
}

.project-link-content{
  min-width:0;
  display:grid;
  gap:4px;
}

.project-link-line1{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.project-link-name{
  font-size:16px;
  font-weight:700;
  color:#101828;
}

.project-link-role{
  font-size:14px;
  color:#667085;
}

.project-link-meta{
  font-size:14px;
  color:#475467;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.project-link-side{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

@media (max-width: 900px){
  .contact-person-card{
    align-items:flex-start;
  }

  .contact-person-side{
    flex-direction:column;
    align-items:flex-end;
  }

  .contact-person-actions{
    justify-content:flex-end;
  }

  .project-link-side{
    flex-direction:column;
    align-items:flex-end;
  }
}
.detail-location-card{display:grid;gap:14px}
.detail-location-leaflet{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#f8fafc;
}
.detail-location-map-empty{
  min-height:320px;border-radius:18px;border:1px dashed #d0d5dd;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#667085;padding:20px;text-align:center
}
.location-address{
  margin-top:2px;
  font-size:14px;
  line-height:1.5;
  color:#344054;
}
.location-address .muted{
  color:#667085;
}
.custom-location-pin{
  background:transparent;
  border:none;
}

.project-switch-card .field{
  display:grid;
  gap:8px;
}
.project-switch-card label{
  font-size:13px;
  color:#667085;
}
.project-switch-card select{
  min-height:48px;
  border:1px solid #d0d5dd;
  border-radius:14px;
  background:#fff;
  padding:0 14px;
  font:inherit;
}

.contact-inline-state{margin-top:12px}
.contact-inline-state.state-red{color:#b42318}
.contact-inline-state.state-green{color:#027a48}
.hidden{display:none !important}
.ui-actions-wrap{display:flex;gap:8px;flex-wrap:wrap}

.correspondence-toolbar{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #e7ebf2;
  border-radius:14px;
  background:#f8fafc;
}

.correspondence-toolbar .small{
  color:#667085;
  line-height:1.45;
}

.correspondence-toolbar-main{
  flex:1 1 320px;
  max-width:520px;
  min-width:260px;
}

.correspondence-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:1 1 380px;
  min-width:280px;
  flex-wrap:nowrap;
}

.correspondence-channel-select{
  width:170px;
  height:42px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  padding:0 12px;
  font:inherit;
  background:#fff;
  color:#344054;
  box-shadow:none;
}

.correspondence-search{
  width:300px;
  max-width:100%;
  height:42px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  padding:0 14px;
  font:inherit;
  background:#fff;
  color:#101828;
  box-shadow:none;
}

.correspondence-search::placeholder{
  color:#98a2b3;
}

.correspondence-results-meta{
  margin:0 0 12px;
  color:#667085;
  font-size:13px;
}
.correspondence-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.correspondence-filters .btn.small{
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
}
.correspondence-filters .btn.small.active{
  background:#eef4ff;
  border-color:#c7d7fe;
  color:#1d4ed8;
}
.correspondence-timeline{
  position:relative;
  display:grid;
  gap:16px;
}
.correspondence-empty{
  border:1px dashed #d0d5dd;
  border-radius:22px;
  padding:22px;
  background:linear-gradient(180deg,#f8fafc 0%,#fdfefe 100%);
  color:#667085;
}
.correspondence-empty strong{
  display:block;
  margin-bottom:6px;
  color:#101828;
  font-size:16px;
}
.correspondence-entry{
  cursor:pointer;
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  padding:14px;
  border:1px solid #e7ecf3;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.correspondence-entry.is-new{
  outline:2px solid rgba(47,91,210,.14);
}
.correspondence-entry::before{
  content:"";
  position:absolute;
  left:27px;
  top:-16px;
  bottom:-16px;
  width:2px;
  z-index:0;
  background:linear-gradient(
  to bottom,
  #e6edf7 0%,
  #dbe5f3 50%,
  #e6edf7 100%
);
}
.correspondence-entry:first-child::before{ top:28px; }
.correspondence-entry:last-child::before{ bottom:28px; }
.correspondence-icon{
  position:relative;
  z-index:1;
  width:62px;
  height:62px;
  border-radius:18px;
  background:#eef4ff;
  color:#2f5bd2;
  border:1px solid #dbe7ff;
  font-size: 26px;   /* probier 28-32px */
  display:flex;
  align-items:center;
  justify-content:center;
}
.correspondence-entry[data-channel="email"] .correspondence-icon{ background:#eef4ff; color:#2f5bd2; border-color:#dbe7ff; }
.correspondence-entry[data-channel="letter"] .correspondence-icon{ background:#f5f3ff; color:#7a3cff; border-color:#e6ddff; }
.correspondence-entry[data-channel="phone"] .correspondence-icon{ background:#ecfdf3; color:#039855; border-color:#ccebd8; }
.correspondence-entry[data-channel="note"] .correspondence-icon{ background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.correspondence-icon svg{
  width:78px;
  height:78px;
  stroke:currentColor;
  fill:none;
}
.correspondence-main{
  display:grid;
  gap:10px;
  min-width:0;
}
.correspondence-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.correspondence-title-wrap{
  min-width:0;
  display:grid;
  gap:8px;
}
.correspondence-title{
  font-size:17px;
  font-weight:700;
  color:#101828;
  line-height:1.35;
}
.correspondence-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  color:#667085;
  font-size:13px;
}
.correspondence-date{
  color:#667085;
  font-size:13px;
  white-space:nowrap;
}
.correspondence-preview{
  color:#475467;
  line-height:1.6;
  white-space:pre-wrap;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.correspondence-linkline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.correspondence-composer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.correspondence-composer-grid .span-2{
  grid-column:1 / -1;
}
.correspondence-composer-grid textarea{
  min-height:140px;
  border:1px solid #d0d5dd;
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  resize:vertical;
}
@media (max-width: 900px){
  .correspondence-composer-grid{
    grid-template-columns:1fr;
  }

  .correspondence-composer-grid .span-2{
    grid-column:auto;
  }

  .correspondence-entry{
    grid-template-columns:1fr;
    padding:16px;
  }

  .correspondence-entry::before{
    display:none;
  }

  .correspondence-head{
    flex-direction:column;
  }

  .correspondence-date{
    white-space:normal;
  }

  .correspondence-toolbar{
    align-items:stretch;
  }

  .correspondence-toolbar-main,
  .correspondence-toolbar-actions{
    max-width:none;
    min-width:0;
    flex:1 1 100%;
  }

  .correspondence-toolbar-actions{
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  .correspondence-channel-select,
  .correspondence-search{
    width:100%;
  }
}

@media (max-width: 1200px){
  .contact-detail-grid{grid-template-columns:1fr}
}
@media (max-width: 1100px){
  .contact-status-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entity-summary{
  grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #detailRoot.overview-mode .contact-detail-stack.primary-stack{
    grid-template-columns:1fr;
  }
}
@media (max-width: 600px){
  .entity-summary{
    grid-template-columns:1fr;
  }
}
@media (max-width: 900px){
  .contact-form-grid-2{grid-template-columns:1fr}
  .contact-info-list{grid-template-columns:1fr}
  .detail-hero-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .detail-hero h1{font-size:32px}
  .detail-section-tabs{
    overflow:auto;
    padding-bottom:6px;
    flex-wrap:nowrap;
  }
  
}

/* =========================================
   Kontakte - Topnavigation final bereinigt
   Eine einzige gueltige Version
   ========================================= */

.contact-statusbar.context-bar.contact-statusbar-topnav{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:12px 16px 14px;
  border-radius:22px;
  border:1px solid #e7ebf2;
  background:#fff;
  box-shadow:0 14px 32px rgba(16,24,40,.05);
  margin-bottom:18px;
  position:relative;
}

.contact-statusbar.context-bar.contact-statusbar-topnav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  border-radius:0 0 22px 22px;
  background:linear-gradient(90deg,#7ea6ff 0%, #a9c2ff 100%);
  opacity:.9;
}

.contact-statusbar-topnav > div:last-child{
  min-width:0;
  display:grid;
  gap:6px;
  align-self:center;
}

/* =========================================
   Modul-Topnavigation (zentral)
   ========================================= */

   .module-status-tabs{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
    position:relative;
    z-index:2;
  }
  
  .module-status-tabs button{
    position:relative;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border-radius:12px;
    border:1px solid #dbe3ef;
    background:#fff;
    color:#344054;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    transition:
      background-color .18s ease,
      border-color .18s ease,
      color .18s ease,
      box-shadow .18s ease,
      transform .18s ease;
  }
  
  .module-status-tabs button::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:-10px;
    height:4px;
    border-radius:999px;
    background:transparent;
    opacity:0;
    transform:scaleX(.65);
    transition:
      opacity .18s ease,
      transform .18s ease,
      background-color .18s ease;
  }
  
  .module-status-tabs button:hover{
    background:#f8fafc;
    border-color:#cfd6e2;
  }
  
  .module-status-tabs button.active{
    background:#2f5bd2;
    border-color:#2f5bd2;
    color:#fff;
    box-shadow:0 10px 22px rgba(47,91,210,.20);
  }
  
  .module-status-tabs button.active::after{
    background:linear-gradient(90deg,#7ea6ff 0%, #a9c2ff 100%);
    opacity:1;
    transform:scaleX(1);
  }

/* =========================================
   Modul-Topnavigation (zentral) ENDE
   ========================================= */

/* =========================================
   Bauzeitenplan - Topnavigation
   ========================================= */

   .bp-statusbar.context-bar.bp-statusbar-topnav{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:18px;
    align-items:start;
    padding:12px 16px 14px;
    border-radius:22px;
    border:1px solid #e7ebf2;
    background:#fff;
    box-shadow:0 14px 32px rgba(16,24,40,.05);
    margin-bottom:14px;
    position:relative;
  }
  
  .bp-statusbar.context-bar.bp-statusbar-topnav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    border-radius:0 0 22px 22px;
    background:linear-gradient(90deg,#7ea6ff 0%, #a9c2ff 100%);
    opacity:.9;
  }
  
  .bp-statusbar-topnav > div:last-child{
    min-width:0;
    display:grid;
    gap:6px;
    align-self:center;
  }
  
  .bp-statusbar-topnav .bp-status-main.context-bar-main{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    align-items:start;
  }
  
  .bp-statusbar-topnav .item small{
    margin-bottom:4px;
  }
  
  .bp-statusbar-topnav .item strong{
    font-size:15px;
    line-height:1.15;
  }
  
  .bp-statusbar-topnav .bp-status-info{
    margin:0;
    color:#667085;
    font-size:12px;
    line-height:1.25;
  }
  
  @media (max-width: 1100px){
    .bp-statusbar.context-bar.bp-statusbar-topnav{
      grid-template-columns:1fr;
      gap:12px;
    }
  
    .bp-statusbar-topnav .bp-status-main.context-bar-main{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
  }
  
  @media (max-width: 700px){
    .bp-statusbar-topnav .module-status-tabs{
      width:100%;
    }
  
    .bp-statusbar-topnav .module-status-tabs button{
      flex:1 1 auto;
    }
  
    .bp-statusbar-topnav .bp-status-main.context-bar-main{
      grid-template-columns:1fr;
    }
  }

/* =========================================
   Bauzeitenplan - Topnavigation ENDE
   ========================================= */




.contact-statusbar-topnav .contact-status-main.context-bar-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.contact-statusbar-topnav .item small{
  margin-bottom:4px;
}

.contact-statusbar-topnav .item strong{
  font-size:15px;
  line-height:1.15;
}

.contact-statusbar-topnav .contact-status-info{
  margin:0;
  color:#667085;
  font-size:12px;
  line-height:1.25;
  text-align:left;
  grid-column:auto;
}

@media (max-width: 1100px){
  .contact-statusbar.context-bar.contact-statusbar-topnav{
    grid-template-columns:1fr;
    gap:12px;
  }

  .contact-statusbar-topnav .contact-status-main.context-bar-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 700px){

  .contact-statusbar-topnav .contact-status-main.context-bar-main{
    grid-template-columns:1fr;
  }
}

/* =========================================
   Korrespondenz 
   ========================================= */


body.embed-mode .main-content{padding:0 !important;}
body.embed-mode .sidebar{display:none !important;}
.korr-shell{display:flex;flex-direction:column;gap:14px}
.korr-statusbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fbfdff;box-shadow:var(--shadow)}
.korr-status-main{display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:14px;align-items:center}
.korr-status-main .item small{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.korr-status-main .item strong{display:block}
.korr-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.korr-filter-card .form-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px 12px;
  align-items:end;
}

.korr-filter-card .form-grid .field{
  min-width:0;
}

.korr-filter-card .form-grid .span-2{
  grid-column:span 2;
}
.korr-context-note{padding:12px 14px;border:1px solid #dbeafe;background:#eff6ff;border-radius:14px;color:#1d4ed8}
.korr-entry-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.korr-entry-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}

.korr-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#f5f7fb;
  color:#475569;
  border:1px solid #e2e8f0;
}

.korr-tag.link{
  background:#eff6ff;
  color:#1d4ed8;
  border-color:#bfdbfe;
}

.korr-modal-state{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1d4ed8;
}

.korr-modal-state.hidden{display:none !important}

.korr-modal-state.error{
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}

.korr-modal-state.success{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}

.korr-entry-expand{
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid #e7ecf3;
}

.korr-entry-body{
  white-space:pre-wrap;
  line-height:1.65;
  color:#344054;
}
.korr-doc-results {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  margin-top: 4px;
  max-height: 180px;
  overflow-y: auto;
  display: none;
}

.korr-doc-results.show {
  display: block;
}

.korr-doc-item {
  padding: 8px 10px;
  cursor: pointer;
}

.korr-doc-item:hover {
  background: #f3f5f7;
}
.korr-doc-selected-row{
  margin-top:6px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.korr-toolbar-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}

.korr-toolbar-title h3{
  margin-bottom:4px;
}

.korr-toolbar-actions{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:0 0 auto;
}
.contact-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}

.korr-filter-row{
  display:flex;
  flex:1;
  gap:10px;
}

@media (max-width: 1400px){
  .korr-filter-row{
    flex-wrap:wrap;
  }
}
.korr-filter-card{
  position:sticky;
  top:12px;              /* Abstand zur Topbar */
  z-index:50;

  background:#f9fafb;    /* wichtig fA¼r Aœberlagerung */
  border-radius:14px;

  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}
.korr-filter-card.sticky-active{
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  border:1px solid #e5e7eb;
}
/* =========================================
   Korrespondenz - Timeline Feinschliff
   ========================================= */

.correspondence-results-meta{
  margin:0 0 12px;
  color:#667085;
  font-size:13px;
}

.correspondence-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.correspondence-filters .btn.small{
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
}

.correspondence-filters .btn.small.active{
  background:#eef4ff;
  border-color:#c7d7fe;
  color:#1d4ed8;
}

.correspondence-timeline{
  position:relative;
  display:grid;
  gap:18px;
}

.correspondence-empty{
  border:1px dashed #d0d5dd;
  border-radius:22px;
  padding:22px;
  background:linear-gradient(180deg,#f8fafc 0%,#fdfefe 100%);
  color:#667085;
}

.correspondence-empty strong{
  display:block;
  margin-bottom:6px;
  color:#101828;
  font-size:16px;
}

.correspondence-entry{
  cursor:pointer;
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  padding:16px;
  border:1px solid #e7ecf3;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease,
    background-color .16s ease;
}

.correspondence-entry:hover{
  border-color:#d9e3f2;
  box-shadow:0 14px 28px rgba(15,23,42,.07);
  transform:translateY(-1px);
}

.correspondence-entry.open{
  border-color:#cfe0ff;
  background:#f8fbff;
  box-shadow:0 14px 30px rgba(36,86,214,.08);
}

.correspondence-entry.is-new{
  outline:2px solid rgba(47,91,210,.14);
}

.correspondence-entry::before{
  content:"";
  position:absolute;
  left:41px;
  top:-18px;
  bottom:-18px;
  width:3px;
  background:linear-gradient(
    to bottom,
    #d6e0f5 0%,
    #c3d2f2 50%,
    #d6e0f5 100%
  );
  border-radius:2px;
  z-index:0;
  box-shadow:0 0 0 1px rgba(47,91,210,0.04);
}

.correspondence-entry:first-child::before{
  top:28px;
}

.correspondence-entry:last-child::before{
  bottom:28px;
}

.correspondence-entry.open::before{
  background:linear-gradient(180deg,#dbe7ff 0%, #c8d8ff 100%);
}

.correspondence-icon{
  position:relative;
  z-index:1;
  width:50px;
  height:50px;
  border-radius:18px;
  padding:8px;
  background:#eef4ff;
  color:#2f5bd2;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dbe7ff;
  box-shadow:0 4px 10px rgba(15,23,42,.08);
  transition:transform .16s ease, box-shadow .16s ease, outline-color .16s ease;
}
.correspondence-entry[data-direction="outbound"] .correspondence-icon{
  transform:translateX(-10px);
  box-shadow:
    -6px 0 12px rgba(36,86,214,.18),
    0 4px 10px rgba(15,23,42,.08);
  outline:1px solid rgba(36,86,214,.10);
}

.correspondence-entry[data-direction="inbound"] .correspondence-icon{
  transform:translateX(10px);
  box-shadow:
    6px 0 12px rgba(3,152,85,.18),
    0 4px 10px rgba(15,23,42,.08);
  outline:1px solid rgba(3,152,85,.12);
}

.correspondence-entry[data-direction="internal"] .correspondence-icon{
  transform:none;
  box-shadow:0 4px 10px rgba(15,23,42,.08);
  outline:1px solid rgba(36,86,214,.10);
  outline-offset:0;
}
.correspondence-doc-indicator{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:18px;
  height:18px;

  background:transparent;   /* geA¤ndert */
  border:none;              /* geA¤ndert */
  box-shadow:none;          /* optional */

  display:flex;
  align-items:center;
  justify-content:center;

  color:#5b6b84;
}
.correspondence-doc-indicator svg{
  width:11px;
  height:11px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(90deg);
  transform-origin:center;
}

.correspondence-entry[data-channel="email"] .correspondence-icon{
  background:#eef4ff;
  color:#2f5bd2;
  border-color:#dbe7ff;
}

.correspondence-entry[data-channel="letter"] .correspondence-icon{
  background:#f5f3ff;
  color:#7a3cff;
  border-color:#e6ddff;
}

.correspondence-entry[data-channel="phone"] .correspondence-icon{
  background:#ecfdf3;
  color:#039855;
  border-color:#ccebd8;
}

.correspondence-entry[data-channel="note"] .correspondence-icon{
  background:#fff7ed;
  color:#c2410c;
  border-color:#fed7aa;
}

.correspondence-icon svg{
  width:48px;
  height:48px;
}

.correspondence-main{
  display:grid;
  gap:10px;
  min-width:0;
}

.correspondence-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.correspondence-title-wrap{
  min-width:0;
  display:grid;
  gap:8px;
}

.correspondence-title{
  font-size:17px;
  font-weight:700;
  color:#101828;
  line-height:1.35;
}

.correspondence-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  color:#667085;
  font-size:13px;
}

.correspondence-date{
  color:#667085;
  font-size:13px;
  white-space:nowrap;
}

.correspondence-preview{
  color:#475467;
  line-height:1.6;
  white-space:pre-wrap;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.correspondence-linkline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.correspondence-composer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.correspondence-composer-grid .span-2{
  grid-column:1 / -1;
}

.correspondence-composer-grid textarea{
  min-height:140px;
  border:1px solid #d0d5dd;
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  resize:vertical;
}
@media (max-width: 1200px){
  .korr-filter-card .form-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 980px){
  .korr-status-main,
  .korr-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .korr-filter-card .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .korr-filter-card .form-grid .span-2{
    grid-column:1 / -1;
  }
}

@media (max-width: 640px){
  .korr-status-main,
  .korr-kpis,
  .korr-filter-card .form-grid{
    grid-template-columns:1fr;
  }

  .korr-filter-card .form-grid .span-2{
    grid-column:auto;
  }
}

/* =========================================
   Korrespondenz - Topbar Override (NEU)
   ========================================= */

.korr-statusbar{
  display:block;
  padding:12px 16px 14px;
  border-radius:22px;
  border:1px solid #e7ebf2;
  background:#fff;
  box-shadow:0 14px 32px rgba(16,24,40,.05);
  margin-bottom:14px;
  position:relative;
}

.korr-statusbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  border-radius:0 0 22px 22px;
  background:linear-gradient(90deg,#7ea6ff 0%, #a9c2ff 100%);
  opacity:.9;
}

.korr-status-main{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

#korrStatusText{
  margin-top:6px;
  color:#667085;
  font-size:12px;
  line-height:1.25;
}
.korr-kpis{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:14px;
}

.korr-kpis .kpi{
  background:#fff;
  border:1px solid #e7ebf2;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 6px 16px rgba(16,24,40,.04);
}
.korr-direction-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
}

.korr-direction-dot.outbound{
  background:#2f5bd2;
}

.korr-direction-dot.inbound{
  background:#039855;
}

.korr-direction-dot.internal{
  background:#98a2b3;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 110%;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  display: none;
  min-width: 220px;
  padding: 6px;
  z-index: 50;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu button {
  width: 100%;
  border: none;
  background: none;
  padding: 10px 12px;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
font-weight: 600;
color: #1f2937;
background: #f8fafc;
}

.dropdown-menu button:hover {
  background: #f3f5f7;
}
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: white;
  border-left: 1px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
  transform: rotate(45deg);
}


/* =========================================
   Global - Referenzlinks (Dokumente, IDs, etc.)
   ========================================= */

.doc-ref-link{
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.doc-ref-link:hover{
  text-decoration: underline;
}

.doc-row-highlight td{
  background:#f8fbff !important;
  border-top-color:#bfd4ff !important;
  border-bottom-color:#bfd4ff !important;
}

.doc-row-highlight td:first-child{
  border-left-color:#bfd4ff !important;
}

.doc-row-highlight td:last-child{
  border-right-color:#bfd4ff !important;
}

.doc-row-highlight{
  animation:docHighlightPulse 1.2s ease-out 1;
}

.doc-row-open td{
  background:#f5f8ff;
  border-bottom:0 !important;
}

.doc-row-highlight.doc-row-open td{
  background:#eef4ff;
}

.doc-row-open td:first-child{
  border-left:1px solid #d9e4ff;
}

.doc-row-open td:last-child{
  border-right:1px solid #d9e4ff;
}

.doc-detail-row td{
  background:#f5f8ff;
  border-top:0 !important;
  padding-top:0 !important;
}

.doc-detail-row td:first-child{
  border-left:1px solid #d9e4ff;
}

.doc-detail-row td:last-child{
  border-right:1px solid #d9e4ff;
}

.doc-inline-detail{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:12px 4px 4px;
}

.doc-inline-main{
  flex:1 1 50%;
  min-width:280px;
}

.doc-inline-preview{
  flex:1 1 50%;
  min-width:280px;
}

.doc-inline-main .doc-note{
  background:#f8fbff;
  border:1px solid #dde6f5;
  border-radius:12px;
  padding:14px;
}

.doc-preview-card{
  background:#fff;
  border:1px solid #dbe3ef;
  border-radius:12px;
  padding:12px;
  min-height:420px;
  box-shadow:0 1px 3px rgba(16,24,40,0.06);
}

.doc-preview-card.image{
  display:flex;
  align-items:center;
  justify-content:center;
}

.doc-preview-card.pdf{
  min-height:360px;
}

.doc-preview-media{
  width:100%;
  max-height:360px;
  object-fit:contain;
  border-radius:8px;
  display:block;
}

.doc-preview-frame{
  width:100%;
  height:336px;
  border:0;
  border-radius:8px;
  background:#f8fafc;
}

.doc-preview-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
  padding:20px;
  border:1px dashed #c7d2e3;
  border-radius:12px;
  background:#f8fafc;
  color:#667085;
  font-weight:600;
  text-align:center;
}

@keyframes docHighlightPulse{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.005); }
  100%{ transform:scale(1); }
}

@media (max-width: 900px){
  .doc-inline-detail{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    align-items:stretch !important;
  }

  .doc-inline-main,
  .doc-inline-preview{
    flex:1 1 100% !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .doc-preview-card.image{
    min-height:260px;
  }

  .doc-preview-card.pdf{
    min-height:300px;
  }

  .doc-preview-media{
    max-height:280px;
  }

  .doc-preview-frame{
    height:276px;
  }
}
/* offene Dokumentzeile + Detail als eine visuelle Einheit */
.doc-row-open td{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

.doc-detail-row td{
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
}

.doc-row-open td:first-child{
  border-top-left-radius:14px;
}

.doc-row-open td:last-child{
  border-top-right-radius:14px;
}

.doc-detail-row td:first-child{
  border-bottom-left-radius:14px;
}

.doc-detail-row td:last-child{
  border-bottom-right-radius:14px;
}

.doc-detail-row .doc-inline-detail{
  margin-top:-2px;
}
.doc-row-open + .doc-detail-row td{
  box-shadow:inset 0 1px 0 #eef4ff;
}
/* =========================================
   Dokumente - Topnavigation wie Kontakte
   ========================================= */

.doc-statusbar.context-bar.doc-statusbar-topnav{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:12px 16px 14px;
  border-radius:22px;
  border:1px solid #e7ebf2;
  background:#fff;
  box-shadow:0 14px 32px rgba(16,24,40,.05);
  margin-bottom:18px;
  position:relative;
}

.doc-statusbar.context-bar.doc-statusbar-topnav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  border-radius:0 0 22px 22px;
  background:linear-gradient(90deg,#7ea6ff 0%, #a9c2ff 100%);
  opacity:.9;
}



.doc-statusbar-topnav > div:last-child{
  min-width:0;
  display:grid;
  gap:6px;
  align-self:center;
}

.doc-statusbar-topnav .doc-status-main.context-bar-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.doc-statusbar-topnav .item small{
  margin-bottom:4px;
}

.doc-statusbar-topnav .item strong{
  font-size:15px;
  line-height:1.15;
}

.doc-statusbar-topnav .doc-status-info{
  margin:0;
  color:#667085;
  font-size:12px;
  line-height:1.25;
  text-align:left;
}

@media (max-width: 1100px){
  .doc-statusbar.context-bar.doc-statusbar-topnav{
    grid-template-columns:1fr;
    gap:12px;
  }

  .doc-statusbar-topnav .doc-status-main.context-bar-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 700px){

  .doc-statusbar-topnav .doc-status-main.context-bar-main{
    grid-template-columns:1fr;
  }
  }
  .doc-ref-primary{
    background:#eef2ff;
    border:1px solid #c7d2fe;
    color:#3730a3;
  }

.doc-stat-bar{
  height:10px;
  background:#eef2f7;
  border-radius:999px;
  overflow:hidden;
}

.doc-stat-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, #5b8def 0%, #7aa2ff 100%);
  border-radius:999px;
}

.doc-alert-item.warning{
  background:#fff8f1;
  border-color:#f3d3a3;
}

.doc-alert-item.neutral{
  background:#f8fafc;
}

.doc-alert-item.info{
  background:#f3f7ff;
  border-color:#cfe0ff;
}

.doc-alert-title{
  font-weight:700;
  margin-bottom:4px;
  color:#1f2a44;
}



.document-overview-side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.doc-stat-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.doc-stat-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 40px;
  gap:12px;
  align-items:center;
}

.doc-stat-main strong{
  display:block;
  margin-bottom:2px;
}

.doc-stat-value{
  text-align:right;
  font-weight:700;
  color:#1f2a44;
}

.doc-alert-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.doc-alert-item{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
}

.doc-alert-item.warning{
  background:#fff8f1;
  border-color:#f3d3a3;
}

.doc-alert-item.neutral{
  background:#f8fafc;
}

.doc-alert-item.info{
  background:#f3f7ff;
  border-color:#cfe0ff;
}

.doc-alert-title{
  font-weight:700;
  margin-bottom:4px;
  color:#1f2a44;
}



/* =========================
   GLOBAL FILTER FIELDS
   ========================= */

   .ui-filter-field{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1 1 0;
  }
  
  .ui-filter-field label{
    font-size:11px;
    color:#6b7280;
    margin-bottom:2px;
  }
  
  .ui-filter-field input,
  .ui-filter-field select{
    width:100%;
    height:34px;
    padding:4px 8px;
    font-size:13px;
  
    background:#ffffff;
    border:1px solid #d1d5db;
    border-radius:8px;
    transition:all 0.15s ease;
  }
  
  .ui-filter-field input:focus,
  .ui-filter-field select:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 2px rgba(59,130,246,0.12);
    outline:none;
  }
  
  /* =========================
     GLOBAL SEARCH FIELD
     ========================= */
  
  .ui-search-field{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1.6 1 0;
  }
  
  .ui-search-field label{
    font-size:11px;
    color:#6b7280;
    margin-bottom:2px;
  }
  
  .ui-search-field input{
    width:100%;
    height:34px;
    padding:4px 8px;
  
    background:#f3f4f6;
    border:1px solid #d1d5db;
    border-radius:8px;
  
    font-size:13px;
    font-weight:500;
    transition:all 0.15s ease;
  }
  
  .ui-search-field input::placeholder{
    color:#9ca3af;
  }
  
  .ui-search-field input:focus{
    background:#ffffff;
    border-color:#3b82f6;
    box-shadow:0 0 0 2px rgba(59,130,246,0.15);
    outline:none;
  }
  /* =========================================
   Finanzen - Topnavigation
   ========================================= */

.finance-statusbar.context-bar.finance-statusbar-topnav{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:18px 16px 18px;
  border-radius:22px;
  border:1px solid #e7ebf2;
  background:#fff;
  box-shadow:0 14px 32px rgba(16,24,40,.05);
  margin-bottom:18px;
  position:relative;
}

.finance-statusbar.context-bar.finance-statusbar-topnav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  border-radius:0 0 22px 22px;
  background:linear-gradient(90deg,#7ea6ff 0%, #a9c2ff 100%);
  opacity:.9;
}

.finance-statusbar-topnav .finance-status-main.context-bar-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.finance-statusbar-topnav .item small{
  margin-bottom:4px;
}

.finance-statusbar-topnav .item strong{
  font-size:15px;
  line-height:1.15;
}

@media (max-width:1100px){
  .finance-statusbar.context-bar.finance-statusbar-topnav{
    grid-template-columns:1fr;
    gap:12px;
  }

  .finance-statusbar-topnav .finance-status-main.context-bar-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  .finance-statusbar-topnav .finance-status-main.context-bar-main{
    grid-template-columns:1fr;
  }
}
/* =========================================
   Einstellungen - Topnavigation
   ========================================= */

   .settings-statusbar.context-bar.settings-statusbar-topnav{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:18px;
    align-items:start;
    padding:22px 18px 22px;
    border-radius:22px;
    border:1px solid #e7ebf2;
    background:#fff;
    box-shadow:0 14px 32px rgba(16,24,40,.05);
    margin-bottom:24px;
    position:relative;
  }
  
  .settings-statusbar.context-bar.settings-statusbar-topnav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    border-radius:0 0 22px 22px;
    background:linear-gradient(90deg,#7ea6ff 0%, #a9c2ff 100%);
    opacity:.9;
  }
  
  .settings-statusbar-topnav .settings-status-main.context-bar-main{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    align-items:start;
  }
  
  .settings-statusbar-topnav .item small{
    margin-bottom:4px;
  }
  
  .settings-statusbar-topnav .item strong{
    font-size:15px;
    line-height:1.15;
  }
  
  @media (max-width:1100px){
    .settings-statusbar.context-bar.settings-statusbar-topnav{
      grid-template-columns:1fr;
      gap:12px;
    }
  
    .settings-statusbar-topnav .settings-status-main.context-bar-main{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
  }
  
  @media (max-width:700px){
    .settings-statusbar-topnav .settings-status-main.context-bar-main{
      grid-template-columns:1fr;
    }
  }
  .pm-project-health-red td{
    background:#fff8f8;
  }
  
  .pm-project-health-yellow td{
    background:#fffdf6;
  }
  
  .pm-project-health-green td{
    background:#f8fffb;
  }
/* =========================
   BASE RESET
   ========================= */
html, body {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* =========================
   APP LAYOUT ROOT
   ========================= */
.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  height: auto;
  width: 100%;
}

/* =========================
   SIDEBAR
   ========================= */
.app-sidebar,
aside.sidebar,
.sidebar,
#sidebar {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
}

/* Scroll nur innen Sidebar */
.sidebar-content {
  flex: 1;
  overflow-y: auto;
}

/* =========================
   MAIN AREA
   ========================= */
.app-main {
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

/* =========================
   VERSION BLOCK (clean)
   ========================= */
   .ip-sidebar-version {
    width:280px;
    min-width:280px;
    background:linear-gradient(180deg,#0f1724 0%,#162234 100%);
    color:#fff;
    padding:24px 18px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    padding-bottom:40px;
    box-sizing:border-box;
  }
.ip-version-title {
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
}

.ip-version-main {
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.ip-version-admin {
  margin-top: 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
}
/* Papierkorb Toolbar */
.trash-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 220px;
  gap:12px;
  align-items:end;
}

.trash-toolbar .field{
  margin:0;
}

.trash-toolbar input,
.trash-toolbar select{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  color:var(--text);
  font:inherit;
  min-height:42px;
}

.trash-toolbar input:focus,
.trash-toolbar select:focus{
  outline:none;
  border-color:#bfd4ff;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

@media (max-width: 760px){
  .trash-toolbar{
    grid-template-columns:1fr;
  }
}
/* Sidebar navigation alignment fix */
.nav a{
  justify-content:flex-start;
  text-align:left;
}

.nav a span:last-child{
  flex:1 1 auto;
  min-width:0;
  text-align:left;
}
/* Papierkorb: kompakte KPI-Zeile */
.trash-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.trash-kpi-grid .kpi{
  margin:0;
  min-height:82px;
}

@media (max-width: 1100px){
  .trash-kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .trash-kpi-grid{
    grid-template-columns:1fr;
  }
}