/*
 * highlight-fix.css — Korrigiert die Position der "hand-underlined" Hervorhebungen.
 *
 * Problem: Onepage-JS berechnet left/width/top per getBoundingClientRect() für die
 * Desktop-Viewport-Breite. Ohne JS bleiben diese Inline-Style-Werte eingefroren.
 * Auf Mobile sind die Werte falsch (z.B. left: 311px, width: 526px bei 375px Viewport).
 * Außerdem: height: auto !important würde den Container auf 0 collapsieren,
 * weil das Kind position:absolute ist und nicht zur Eltern-Höhe beiträgt.
 *
 * Fix: left auf 50% + translateX(-50%) zentrieren, feste Höhe setzen.
 */

/* === Desktop + Mobile: horizontal zentrieren === */
.highlight-container {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* === Mobile: Höhe fixieren + an Unterkante des Textes positionieren === */
@media (max-width: 1024px) {
  .highlight-container {
    top: auto !important;
    bottom: 0px !important;
    height: 22px !important;      /* Explizit — auto kollabiert auf 0 (Kind ist absolut) */
    width: 90% !important;        /* Desktop-Breite (526px) durch passende Mobile-Breite ersetzen */
    max-width: 340px !important;
    overflow: visible !important;
  }

  /* Innerer Effekt-Wrapper: Container ausfüllen */
  .highlight-effect-hand-underlined,
  .highlight-effect-hand-underlined-1,
  .highlight-effect-hand-underlined-2,
  .highlight-effect-hand-underlined-3 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* SVG: auf Containergröße strecken */
  .highlight-effect-hand-underlined svg,
  .highlight-effect-hand-underlined-1 svg,
  .highlight-effect-hand-underlined-2 svg,
  .highlight-effect-hand-underlined-3 svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
}