/*
 * highlight-fix.css — Korrigiert die Position der "hand-underlined" Hervorhebungen.
 *
 * Plattform 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 eingefrorene Inline-Breite stammt vom Desktop-Snapshot. Auf schmalen
     Geräten ragt sie über die Überschrift hinaus und erzeugt horizontales
     Scrollen der ganzen Seite — deshalb auf die Breite des Textblocks kappen. */
  max-width: 100% !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;
  }
  /* Auch die SVG-Hülle selbst trägt eingefrorene Desktop-Maße. Auf schmalen
     Geräten stimmt ihr Versatz ohnehin nicht mehr — sie deshalb auf den
     Textblock legen, statt sie über den Rand hinausragen zu lassen. */
  [class*="highlight-effect-hand-underlined"] {
    left: 0 !important;
    right: auto !important;
    max-width: 100% !important;
  }
}