/* = Elementor Tooltip Widget – Full CSS (mit Headline)
   ------------------------------------------------------------------ */

.etw-tooltip-wrapper {
  position: relative;
  display: inline-block; /* wichtig: Wrapper nicht strecken */
  vertical-align: middle;

  /* Design-Variablen (werden per PHP überschrieben) */
  --etw-icon-size: 20px;
  --etw-tooltip-max: 240px;
  --etw-tooltip-bg: #333333;
  --etw-tooltip-color: #ffffff;
  --etw-tooltip-radius: 6px;
  --etw-title-color: #ffffff;
  --etw-title-size: 14px;
  --etw-trigger-bg: #00b48f;
  --etw-trigger-bg-hover: #009a7a;
  --etw-trigger-radius: 999px;
  --etw-trigger-padding: 6px;
}

/* Trigger-Button (Icon-Button) */
.etw-trigger {
  border: 0;
  background: var(--etw-trigger-bg);
  padding: var(--etw-trigger-padding);
  margin: 0;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--etw-trigger-radius);
  transition: background .18s ease;
}

.etw-trigger:hover,
.etw-trigger:focus-visible {
  background: var(--etw-trigger-bg-hover);
  outline: none;
}

/* Icon-Größe */
.etw-icon,
.etw-fallback-icon {
  width: var(--etw-icon-size);
  height: var(--etw-icon-size);
}

/* Bild als Block, verhindert Baseline-Versatz */
.etw-icon { display: block; }

/* Fallback „i“-Icon (weiß auf Button) */
.etw-fallback-icon {
  color: #ffffff;
  font-weight: 700;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Screenreader-Text (a11y) */
.screen-reader-text {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Tooltip-Box */
.etw-tooltip {
  position: absolute;
  display: inline-block;      /* wichtig: damit max-width wirkt */
  box-sizing: border-box;     /* Padding in die Breite einrechnen */
  max-width: var(--etw-tooltip-max);
  background: var(--etw-tooltip-bg);
  color: var(--etw-tooltip-color);
  border-radius: var(--etw-tooltip-radius);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;        /* Zeilenumbruch erlauben */
  overflow-wrap: anywhere;    /* sehr lange Wörter umbrechen */
  word-break: break-word;     /* Fallback */
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,0,0);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  pointer-events: none;
}
/* Headline im Tooltip */
.etw-tooltip-title {
  margin: 0 0 6px 0;
  padding: 0;
  display: block;
  font-size: var(--etw-title-size);
  line-height: 1.2;
  font-weight: 600;
  color: var(--etw-title-color);
}

/* Tooltip-Pfeil */
.etw-tooltip::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
}

/* === Positionen === */

/* Oben (zentriert über dem Icon) */
.etw-pos-top .etw-tooltip {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
}
.etw-pos-top .etw-tooltip::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--etw-tooltip-bg);
}

/* Unten (zentriert) */
.etw-pos-bottom .etw-tooltip {
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -4px);
}
.etw-pos-bottom .etw-tooltip::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--etw-tooltip-bg);
}

/* Links (mittig) */
.etw-pos-left .etw-tooltip {
  right: calc(100% + 8px);
  top: 50%;
  transform: translate(4px, -50%);
}
.etw-pos-left .etw-tooltip::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--etw-tooltip-bg);
}

/* Rechts (mittig) */
.etw-pos-right .etw-tooltip {
  left: calc(100% + 8px);
  top: 50%;
  transform: translate(-4px, -50%);
}
.etw-pos-right .etw-tooltip::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--etw-tooltip-bg);
}

/* === Sichtbar-Zustand (positionsspezifisch) === */
.etw-tooltip-wrapper.etw-pos-top:hover .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-top:focus-within .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-top.is-open .etw-tooltip {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}

.etw-tooltip-wrapper.etw-pos-bottom:hover .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-bottom:focus-within .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-bottom.is-open .etw-tooltip {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}

.etw-tooltip-wrapper.etw-pos-left:hover .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-left:focus-within .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-left.is-open .etw-tooltip {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(0, -50%);
}

.etw-tooltip-wrapper.etw-pos-right:hover .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-right:focus-within .etw-tooltip,
.etw-tooltip-wrapper.etw-pos-right.is-open .etw-tooltip {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(0, -50%);
}


/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .etw-tooltip,
  .etw-trigger {
    transition: none !important;
  }
}


@media (max-width: 767px) {
  /* Tooltip oben */
  .etw-pos-top .etw-tooltip {
    left: -400px!important;                 /* am linken Rand des Wrappers ausrichten */
    transform: translate(0, 4px); /* nur vertikal verschieben */
  }
  .etw-pos-top .etw-tooltip::after {
    left: 20px; /* Pfeil weiter nach links setzen, damit er noch auf den Button zeigt */
    transform: none;
  }

  /* Tooltip unten */
  .etw-pos-bottom .etw-tooltip {
    left: -400px;
    transform: translate(0, -4px);
  }
  .etw-pos-bottom .etw-tooltip::after {
    left: 20px;
    transform: none;
  }

  .etw-tooltip {
    max-width: min(var(--etw-tooltip-max), calc(100vw - 24px));
    min-width:250px;
  }
}