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

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

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

.sonagram-image-wrapper {
  position: relative;
  aspect-ratio: 1280 / 600;
  background: #000;
  border-radius: 4px;
  overflow: scroll;
}

.sonagram-video-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;
}

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

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

.sonagram-image-detection-rect-line {
  stroke: rgba(255, 128, 255, 0.7);
  stroke-width: 3;
}

.sonagram-image-species-sci-name {
  fill: darkmagenta;
  font-size: 14px;
}

.sonagram-image-species-local-name {
  fill: darkgreen;
  font-size: 16px;
  font-weight: bold;
}

.sonagram-image-species-probability {
  fill: darkmagenta;
  font-size: 14px;
  font-weight: bold;
}

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

.thumb-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.check-overlay {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  opacity: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transition: opacity 0.15s ease-in-out;
}

.check-overlay button {
  pointer-events: none;
}

.thumb-container:hover .check-overlay,
.thumb-container.selected .check-overlay {
  opacity: 1;
}