/* DensityBar — Komponenten-spezifische Styles
   Das Container-Element (z.B. div#...) wird vom Aufrufer bereitgestellt.
   Die Klasse .v4-density-container setzt die benötigten Container-Regeln
   (position:relative für Tooltip, max-width für sinnvolle Skalierung).
*/

.v4-density-container{
  display:block;
  width:100%;
  max-width:none;        /* volle Breite der Parent-Spalte nehmen */
  position:relative;
}
/* Labels & Werte im SVG etwas größer für Lesbarkeit */
.v4-density-label{font-size:13px}
.v4-density-value{font-size:13px}
.v4-density-axis{font-size:11px}

.v4-density-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible; /* Labels rechts außerhalb der Strip-Box */
}

.v4-density-label{
  font-family:var(--font-d);
  font-size:12px;
  font-weight:600;
  fill:var(--gray-800);
}
.v4-density-value{
  font-family:var(--font-d);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  fill:var(--gray-700);
  font-weight:500;
}
.v4-density-axis{
  font-family:var(--font-d);
  font-size:10px;
  fill:var(--gray-400);
  font-variant-numeric:tabular-nums;
}
.v4-density-msg{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-400);
  text-align:center;
  padding:2rem 1rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  background:var(--gray-50);
  border:1px solid var(--gray-200);
}

.v4-density-row:hover rect[fill^="url"]{
  /* subtiler Highlight-Effekt auf Hover */
  filter:brightness(1.05);
}

/* === Tooltip === */
.v4-density-tooltip{
  position:absolute;
  pointer-events:none;
  background:var(--white);
  border:1px solid var(--gray-300);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  padding:.6rem .8rem;
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  line-height:1.55;
  color:var(--gray-800);
  max-width:280px;
  z-index:10;
  border-radius:var(--radius);
  font-variant-numeric:tabular-nums;
}
.v4-density-tooltip .v4-tt-head{
  font-weight:700;
  font-size:var(--fs-sm);
  margin-bottom:.25rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.v4-density-tooltip .v4-tt-main strong{font-weight:700;color:var(--black)}
.v4-density-tooltip .v4-tt-ci{color:var(--gray-700)}
.v4-density-tooltip .v4-tt-dim{color:var(--gray-500);font-size:.88em}

@media (prefers-reduced-motion: reduce){
  .v4-density-row:hover rect[fill^="url"]{filter:none}
}