/*
 * highlight-fix.css — Statische Nachbildung der Onepage-Text-Hervorhebungen.
 *
 * Onepage rendert die Hervorhebungen zur Laufzeit als absolut positionierte
 * .highlight-container-Overlays, deren Rechteck per JS exakt auf das
 * Bounding-Rect des <span class="con-kit-quark-highlight"> gelegt wird
 * (verifiziert auf der Live-Seite: Container-Rect == Span-Rect).
 *
 * Da die statische Kopie ohne JS auskommt, werden die identischen
 * Original-Effektregeln (assets/highlight/*-config-tsx.css) hier direkt
 * relativ zum Span positioniert — das ist bei jeder Viewport-Breite
 * deckungsgleich mit dem JS-Overlay und fließt beim Umbruch mit.
 *
 * Farben/Werte kommen aus den CSS-Variablen, die Onepage auf jeden Span
 * schreibt (--color-border, --color-bg, --alpha-*, --one-kit-quark-*).
 */

.con-kit-quark-highlight {
  position: relative;
}

/* === marker: grüner Balken hinter dem Text (Hero) === */
.con-kit-quark-highlight[data-highlight-type="marker"]::before {
  content: "";
  position: absolute;
  left: -2.5%;
  bottom: 5%;
  width: 105%;
  height: 40%;
  min-height: 1px;
  background-color: rgba(var(--color-border), var(--alpha-border));
  border-radius: 1px;
  transform: var(--one-kit-quark-transform, none);
  z-index: -1;
}

/* === underline: gerade Linie unter dem Text === */
.con-kit-quark-highlight[data-highlight-type="underline"]::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--one-kit-quark-border-width, 1) * .04em);
  min-height: 1px;
  background-color: rgba(var(--color-border), var(--alpha-border));
}

/* === brush-underline: handgezeichneter Pinselstrich (Inline-SVG im Span) ===
   Das Original blendet das Inline-SVG aus ([data-highlight-type=brush-underline]
   svg{display:none}) und klont es ins Overlay — wir zeigen es stattdessen direkt
   an derselben Position an. */
.con-kit-quark-highlight[data-highlight-type="brush-underline"] svg {
  display: block !important;
  position: absolute;
  height: 15%;
  width: 100%;
  left: 0;
  bottom: -3%;
  transform: var(--one-kit-quark-transform, none);
}
.con-kit-quark-highlight[data-highlight-type="brush-underline"] svg path,
.con-kit-quark-highlight[data-highlight-type="brush-underline"] svg ellipse {
  fill: rgba(var(--color-border), var(--alpha-border));
}

/* === background: farbige Box hinter dem Text (Formular-Seite) === */
.con-kit-quark-highlight[data-highlight-type="background"] {
  padding-left: .5ch;
  padding-right: .5ch;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.con-kit-quark-highlight[data-highlight-type="background"]::before {
  content: "";
  position: absolute;
  height: 100%;
  width: calc(100% + 1ch);
  left: -.5ch;
  top: 2%;
  border-radius: calc(var(--one-kit-quark-radius, 4) * .02em);
  transform: var(--one-kit-quark-transform, none);
  background-color: rgba(var(--color-bg), var(--alpha-bg));
  z-index: -1;
}