/* ===== Pinsel-Unterstreichung (robust, ohne Animation) ===== */
.u-brush {
  --u-color: yellow;     /* Farbe der Unterstreichung */
  --u-height: 0.55em;     /* Höhe der Unterstreichung */
  --u-offset: 0.32em;     /* Abstand vom Text nach unten */

  /* Der Wrapper bekommt die Unterstreichungsfarbe */
  color: var(--u-color);

  /* SVG als Background (füllt mit currentColor) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'>\
  <path d='M4 28 \
           C25 30, 55 31, 95 26 \
           C135 21, 165 21, 196 24 \
           C188 31, 170 34, 145 35 \
           C110 36, 70 36, 25 34 \
           C14 33, 6 30, 4 28 Z' fill=\"currentColor\"/>\
</svg>");
  background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--u-offset));
  background-size: 100% var(--u-height);

  /* Platz für die Unterstreichung schaffen */
  padding-bottom: calc(var(--u-offset) + 6px);

  /* Der Rest für Stabilität */
  display: inline-block;      /* falls im Fließtext */
  line-height: 1.05;
}

/* Textfarbe separat setzen (sonst würde er --u-color annehmen) */
.u-brush__text {
  color: #000;                /* gewünschte Textfarbe */
}