.foehn-chart body {
  font-family: Arial, sans-serif;
  background-color: #ffffff; /* White background */
  color: #000000; /* Black text */
}
.foehn-chart .line {
  fill: none;
  stroke: #05aafc; /* Light blue for data line */
  stroke-width: 5px;
}

.foehn-chart .horizontal-line {
  stroke: #dddddd; /* Light gray for minor grid lines */
  stroke-width: 2px;
}

.foehn-chart .zero-line {
  stroke: #274e82; /* Strong blue for 0 hPa line */
  stroke-width: 3px;
}

.foehn-chart .highlight-line {
  stroke: #05aafc; /* Light blue dashed line for +/- 4 hPa */
  stroke-width: 2px;
  stroke-dasharray: 5, 5;
}

.foehn-chart .vertical-line {
  stroke: #274e82; /* Solid blue for vertical date lines */
  stroke-width: 2px;
}

.foehn-chart .tooltip {
  position: absolute;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #000000;
  border-radius: 5px;
  pointer-events: none;
  font-size: 12px;
}

.foehn-chart .day-label {
  text-anchor: middle;
  fill: #274e82;
  font-weight: bold;
}

.foehn-chart .date-label {
  text-anchor: middle;
  fill: #274e82;
}

.foehn-chart .current-marker {
  fill: #274e82; /* Square for current time */
}

.foehn-chart .day-background {
  fill: #f0f0f0; /* Light grey background */
}

.foehn-chart .day-background:nth-child(even) {
  fill: #ffffff; /* White background */
}

.foehn-chart .chart-title {
  font-size: 1.2rem;
  font-weight: bold;
  fill: #274e82;
  text-anchor: middle;
}

@media (max-width: 600px) {
  .foehn-chart .chart-title {
    font-size: 1rem;
  }

  .foehn-chart .tooltip {
    font-size: 10px;
  }
}