/* ── Baum-Darstellung ──────────────────────────────────────────────────────
   Gemeinsam von app.php (Empfehlungsbaum) und admin.php (Vertragsbaum).
   Nutzt die Farbvariablen der jeweiligen Seite, die in beiden gleich heißen. */

.kpi-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px;}
.kpi-reihe .kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:13px 16px;}
.kpi-reihe .kpi .k{font-size:10.5px;letter-spacing:.07em;font-weight:600;color:var(--text-muted);text-transform:uppercase;}
.kpi-reihe .kpi .v{font-size:21px;font-weight:500;margin-top:4px;font-variant-numeric:tabular-nums;}

.baum-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
/* app.php gibt den Feldern .field-input mit; admin.php hat keine eigene
   Feldklasse und bekommt hier dasselbe Aussehen. */
.baum-filter input:not(.field-input), .baum-filter select:not(.field-input){
  border:1px solid var(--border);border-radius:8px;padding:8px 11px;
  font-size:13.5px;font-family:inherit;color:var(--text);background:var(--card);outline:none;}
.baum-filter input:not(.field-input):focus, .baum-filter select:not(.field-input):focus{
  border-color:var(--gold-500);}

.baum .ast{position:relative;}
.baum .kinder{margin-left:26px;padding-left:16px;border-left:1px solid var(--border);}
.baum .kinder.zu{display:none;}
.baum .knoten{display:flex;align-items:center;gap:10px;padding:9px 13px;margin:5px 0;
  border:1px solid var(--border);border-radius:11px;background:var(--card);}
.baum .knoten:hover{border-color:var(--gold-500);}
.baum .knoten.eigen{border-color:var(--gold-500);background:linear-gradient(0deg,rgba(197,160,72,.06),rgba(197,160,72,.06));}
.baum .knoten.treffer{box-shadow:0 0 0 2px rgba(197,160,72,.35);}
/* Ohne laufenden Vertrag: blass, aber lesbar — beim Überfahren wieder voll da. */
.baum .knoten.ruht{opacity:.5;}
.baum .knoten.ruht:hover{opacity:1;}
.baum .knoten.ruht .ebene{background:var(--bg-muted);color:var(--text-muted);}
.baum .chev{width:22px;height:22px;flex:0 0 22px;border:none;background:transparent;cursor:pointer;
  color:var(--text-muted);display:grid;place-items:center;border-radius:6px;}
.baum .chev:hover{background:var(--bg-muted);}
.baum .chev svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .15s;}
.baum .chev.zu svg{transform:rotate(-90deg);}
.baum .chev.leer{visibility:hidden;}
.baum .ebene{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--gold-600);
  background:rgba(197,160,72,.14);border-radius:20px;padding:3px 8px;}
.baum .bname{font-weight:600;}
.baum .nr{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:12.5px;}
.baum .fuell{flex:1;}
.baum .zahlen{display:flex;gap:14px;font-size:12px;color:var(--text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.baum .zahlen b{color:var(--text);font-weight:600;}
.baum .frei{font-size:12px;color:#b45309;}

@media (max-width:760px){
  .baum .zahlen{flex-direction:column;gap:2px;align-items:flex-end;}
  .baum .kinder{margin-left:10px;padding-left:10px;}
}