.stacked-bar-chart {
  display: flex;
  gap: 2%;
  align-items: flex-end;
  width: 100%;
}

.bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  flex: 1;
  height: 220px;
  position: relative;
}

/* Optional: Highlight species bars 
.bar[data-type="emblematic-species-aggregated"],
.bar[data-type="pest-control-species-aggregated"] {
  outline: 2px solid #2980b9;
  background: #f5faff;
}*/

/* Flexible bars for aggregated charts (chart.html) */
.stacked-bar-chart.flexible .bar {
  min-width: 60px;
  flex: 1;
  width: 0; /* Explizit auf 0 setzen für bessere Cross-Browser-Flex-Berechnung */
}

.bar-segment {
  width: 100%;
  transition: background 0.2s;
}

.bar-label {
  text-align: center;
  font-size: 13px;
  margin-top: 8px;
  height: 2.2em;
  width: 6em;
  word-break: break-word;
}

.bar-segment.empty {
  box-shadow: inset 0px 0px 2px #0000006e;
}

.bar-segment.strongly-decreases {
  background: var(--color-strongly-decreases, #d73027);
}

.bar-segment.moderately-decreases {
  background: var(--color-moderately-decreases, #fc8d59);
}

.bar-segment.slightly-decreases {
  background: var(--color-slightly-decreases, #fee08b);
}

.bar-segment.slightly-increases {
  background: var(--color-slightly-increases, #d9ef8b);
}

.bar-segment.moderately-increases {
  background: var(--color-moderately-increases, #91bfdb);
}

.bar-segment.strongly-increases {
  background: var(--color-strongly-increases, #4575b4);
}

.bar-segment-service {
  border-top: 1px solid #fff;
}

.stacked-bar-chart-legend-wrap {
  width: 90%;
  display: flex;
  gap: 32px;
  margin-left: 10px;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.chart-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-legend-color {
  display: inline-block;
  width: 19px;
  height: 18px;
  border-radius: 4px;
  margin-right: 3px;
}

.chart-legend-label {
  font-size: 13px;
  color: #555;
}

/* Custom Tooltip für Chart */
.custom-chart-tooltip {
  position: fixed;
  z-index: 9999;
  background: #fff;
  color: #222;
  border: 1px solid #bbb;
  border-radius: 6px;
  box-shadow: 0 2px 8px #0002;
  padding: 7px 13px;
  font-size: 13px;
  pointer-events: none;
  white-space: pre-line;
  max-width: 260px;
  opacity: 0.97;
  transition: opacity 0.1s;
}

.bar-segment.no-pv-impact {
  background: var(--color-no-pv-impact, #b0b0b0);
}