/*
 * highlight-fix.css — Korrigiert die Position der "hand-underlined" Hervorhebungen.
 *
 * Onepage berechnet die Position der gelben/grünen Unterstreichungs-SVGs per
 * JavaScript bei Resize. Da wir alle Scripts entfernt haben, bleiben die
 * Inline-Styles auf den Desktop-Snapshot-Werten "eingefroren" — auf einer
 * Headline mit anderer Text-Position (z.B. nach Umbruch auf Mobile) sitzt
 * die Underline dann an der falschen Stelle.
 *
 * Fix: Container horizontal zentrieren + auf Mobile an die Bodenkante setzen.
 * Gilt für Desktop UND Mobile.
 */

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

/* Die SVG-Wrapper bekommt auch eine maximale Breite damit sie nicht zu breit ragt */
.highlight-effect-hand-underlined-3 {
  left: 0 !important;
  right: 0 !important;
}

/* === Mobile: Underline an die Bodenkante des Headers === */
@media (max-width: 1024px) {
  .highlight-container {
    top: auto !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: 50% !important;
  }
  .highlight-effect-hand-underlined-3 {
    top: auto !important;
    bottom: 0 !important;
    height: 100% !important;
  }
}