/* --- Tooltip Trigger  */

.ark-tooltip-trigger {
  all: unset;
  display: inline-block;
  cursor: pointer;
  line-height: 1;
}

.ark-tooltip-trigger svg {
  display: inline-block;
  vertical-align: top;
  width: 0.95em;
  height: 0.95em;
}

/* Popper-Container (wird von Popper positioniert) */
.ark-tooltip {
  position: absolute;
  z-index: 9999;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.ark-tooltip[data-show] { opacity: 1; }

/* Sichtbare Box */
.ark-tooltip-box {
  position: relative;         /* fürs Layout der Box */
  background: #363636 !important;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  max-width: 280px;
  padding: 8px 10px;
  pointer-events: auto;
  text-align: center;
}

@media (max-width: 680px){
  .ark-tooltip-box {
    font-size: 13px;
    line-height: 1.2;
  }
}

.ark-tooltip-content{
  color: #fff !important;
}

/* Pfeil: nur Größe/Form, KEINE manuelle Zentrierung */
.ark-tooltip > .ark-arrow {
  position: absolute;         /* Popper setzt left/top/right/bottom inline */
  width: 10px;
  height: 10px;
}
.ark-tooltip > .ark-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  background: #363636;
}

/* Optional: „heraustreten“ lassen (reiner Look) */
.ark-tooltip[data-popper-placement^="top"]    > .ark-arrow { bottom: -4px; }
.ark-tooltip[data-popper-placement^="bottom"] > .ark-arrow { top: -4px; }
.ark-tooltip[data-popper-placement^="left"]   > .ark-arrow { right: -4px; }
.ark-tooltip[data-popper-placement^="right"]  > .ark-arrow { left: -4px; }