.gap-3 {
  gap: 0.25rem !important;
}

g.mud-charts-xaxis text {
  font-size: 8px;
}

g.mud-charts-yaxis text {
  font-size: 8px;
}

.sonagram-wrapper {
  position: relative;
  width: 100%;
  max-width: 1280px;
  /* KORREKTUR: Zwingt den Container in die neue 1200er Höhe */
  aspect-ratio: 1280 / 1200;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

.sonagram-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.axis-text {
  fill: rgba(255, 255, 255, 0.9);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: bold;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.9));
}

.time-text {
  font-size: 24px;
  fill: rgba(200, 220, 255, 0.9);
}

.axis-line-main {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 3;
}

.grid-line {
  stroke: rgba(255, 255, 255, 0.3); /* Minimal transparenter, da es mehr Linien sind */
  stroke-width: 4;
  stroke-dasharray: 20, 10;
}