/*
 * highlight-skew.css — stellt die Marker-Optik der Headline-Highlights her.
 *
 * Die Quellseite zeichnet pro TEXTZEILE eine eigene, um skew(-10deg,0) gescherte
 * Flaeche in einem Overlay-Div (.highlight-container > .highlight-effect-background,
 * bemalt per ::before mit transform: matrix(1,0,-0.176327,1,0,0)). Der Text bleibt
 * dabei aufrecht — nur die Flaeche ist schraeg.
 *
 * Bei der Migration wurde das auf background-color am Span selbst umgebaut. Dabei
 * ging der Skew verloren (aus schraegen Markern wurden gerade Rechtecke) und die
 * Variable --one-kit-quark-border-width landete als sichtbarer
 * box-shadow: inset 0 0 0 2px in wechselnden Falschfarben auf dem Kasten — den das
 * Original gar nicht zeichnet. Auch das Padding wich ab (0.22em statt 0.3395em),
 * wodurch die Kaesten 14px zu schmal und 5px zu hoch waren.
 *
 * Hier wird die Span-Bemalung neutralisiert und das Original-Padding
 * wiederhergestellt. Die gescherten Flaechen setzt interactions.js (Abschnitt 6)
 * pro Zeilenfragment — reines CSS kann das nicht leisten, weil jede Zeile eine
 * eigene schraege Form mit eigener Breite braucht und transform immer das ganze
 * Element (also auch den Text) kippen wuerde.
 */

.con-kit-quark-highlight {
  /* Rechteck-Bemalung der Migration abschalten */
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Original: 0.3395em horizontal, vertikal nichts */
  padding: 0 0.3395em !important;
  /* Text ueber die eingesetzten Flaechen legen (die sind position:absolute) */
  position: relative;
  z-index: 1;
}

/* Solange interactions.js die Formen noch nicht gesetzt hat (oder wenn das JS
   ausfaellt), bleibt der alte gerade Kasten stehen. Ohne diese Regel stuende
   weisser Text auf hellem Grund — unlesbar. Lieber gerade als unsichtbar. */
.con-kit-quark-highlight[data-hl-painted] {
  background-color: transparent !important;
}

/* Mobil bewusst ohne Flaeche (die Quellseite hebt bei <=992px nur zwei Stellen
   hervor, siehe interactions.js Abschnitt 6). Hier steht der Text auf dunklem
   Grund, weiss ist also lesbar. */
.con-kit-quark-highlight[data-hl-off] {
  background-color: transparent !important;
}

.ar-hl-shape {
  position: absolute;
  pointer-events: none;
  transform: skew(-10deg, 0);
}