/* Custom Tooltips für LANDWANDEL - Clean Design */
.tooltip {
  position: absolute;
  background: #d0d7cb;
  border: solid 4px #fff;
  border-radius: 7px;
  padding: 6px 10px 4px 10px;
  font-size: 1em;
  font-family: "mnkywilson-medium", Arial, sans-serif;
  font-weight: 500;
  color: #000;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  z-index: 1001;
  opacity: 0;
  transform: translateY(3px);
  transition: all 0.15s ease-out;
  pointer-events: none;
  white-space: nowrap;
  max-width: 220px;
  line-height: 1.3;
  backdrop-filter: blur(2px);
}

.tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Verschiedene Tooltip-Positionen */
.tooltip.top {
  transform-origin: bottom;
}

.tooltip.bottom {
  transform-origin: top;
}

.tooltip.left {
  transform-origin: right;
}

.tooltip.right {
  transform-origin: left;
}

/* Spezielle Styling für CO₂ und andere chemische Formeln */
.tooltip sub {
  font-size: 0.7em;
  vertical-align: sub;
}

.tooltip sup {
  font-size: 0.7em;
  vertical-align: super;
}

/* Tooltip-Arrow - clean minimalistisch */
.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.tooltip.top::after {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #fff;
}

.tooltip.bottom::after {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: #fff;
}

.tooltip.left::after {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: #fff;
}

.tooltip.right::after {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: #fff;
}