/* === Light / Default === */
:root {
  --kpi-card-bg: #fff;
  --kpi-card-border: rgba(0,0,0,.2);

  --listbars-track: rgba(0,0,0,.2);

  --stackbar-track-color: rgba(0,0,0,.2);

  --social-card-bg: #fff;
  --social-card-border: rgba(0,0,0,.2);
}

/* === Dark Mode === */
[data-bs-theme="dark"] {
  --kpi-card-bg: rgba(255,255,255,.04);
  --kpi-card-border: rgba(255,255,255,.12);
  --listbars-track: rgba(255,255,255,.10);
  --stackbar-track-color: rgba(255,255,255,.12);

  --social-card-bg: rgba(255,255,255,.04);
  --social-card-border: rgba(255,255,255,.12);
}


.kpi-card{
  background: var(--kpi-card-bg);
  border: 1px solid var(--kpi-card-border);
  border-radius: 16px;
  color: var(--kpi-text);
}
.kpi-title{
  font-weight: 800;
  letter-spacing:.2px;
  color: var(--kpi-text);
}
.kpi-value{
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
}
.kpi-sub{
  color: var(--kpi-muted);
}
.kpi-sublabel{
  display:block;
  font-size:.9rem;
  color: var(--kpi-muted);
}
.kpi-split .col-6{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.badge-trend{
  font-weight:700;
  letter-spacing:.2px;
  padding:.4rem .55rem;
  border-radius:.5rem;
}
.badge-trend.up{    background: rgba(25,135,84,.15);  color:#29c48a; }
.badge-trend.down{  background: rgba(220,53,69,.15);  color:#ff6b7a; }

.listbars-card{
  border:1px solid rgba(255,255,255,.2);
  border-radius:16px;
  background: var(--kpi-card-bg);
  color: var(--listbars-text);
}
.lb-name{ color: var(--listbars-text); max-width: 70%; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.lb-val { color: var(--listbars-muted); white-space: nowrap; }

.lb-track{
  width:100%; height:10px; border-radius:6px;
  background: var(--listbars-track);
  overflow:hidden;
}
.lb-bar{
  height:100%;
  width: var(--bar-w, 0%);
  background: var(--bar-c, #0d6efd);
  border-radius:6px;
  transition: width .4s ease;
}

/* Farben anwenden */
.stackbar-card h5,
.stackbar-card .name { color: var(--stackbar-text-color); }
.stackbar-card .val  { color: var(--stackbar-muted-color); }

/* Kartenoptik */
.stackbar-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background: var(--kpi-card-bg);
}

/* Balken */
.stackbar-wrap{ width:100%; }
.stackbar-track{
  position:relative;
  width:100%;
  height:18px;
  border-radius:9px;
  background: var(--stackbar-track-color);
  overflow:hidden;
}
.stackbar-seg{ height:100%; display:inline-block; }

/* Legende EINSPALTIG untereinander */
.legend-grid{
  display:grid;
  grid-template-columns: 1fr;            /* immer eine Spalte */
  gap:.5rem .75rem;
}
.legend-row{
  display:grid;
  grid-template-columns: 14px minmax(0,1fr) auto; /* Swatch | Label | Wert */
  align-items:center;
  column-gap:.5rem;
}
.swatch{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.val { white-space:nowrap; text-align:right; }

.social-card{
  background: var(--social-card-bg);
  border: 1px solid var(--social-card-border);
  border-radius: 16px;
  color: var(--social-text);
  transition: transform .2s ease, box-shadow .2s ease;
}
.social-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}
.social-icon{
  font-size: 1.6rem;
  vertical-align: middle;
}
.social-name a{
  color: var(--social-text);
  text-decoration: none;
}
.social-value{
  font-size: clamp(1.8rem,2.5vw,2.4rem);
  font-weight: 800;
  color: var(--social-text);
}
.social-updated{
  color: var(--social-muted);
  font-size: .9rem;
}
.social-note{
  border: 1px solid var(--social-card-border);
  background: var(--social-card-bg);
  border-radius: 14px;
  color: var(--social-muted);
}