/* SVG-Unterstreichung – 2026-07-16, achtunddreißigster Durchgang
   Handgezeichnet wirkende, geschwungene Unterstreichung analog zu
   wibify.agency (siehe S01 Startseite.md, 37. Durchgang für die
   Detail-Recherche). KEIN CSS-text-decoration, sondern ein <svg> mit einem
   einzelnen quadratischen Bézier-Pfad pro Wort, das die Wortbreite über
   viewBox/preserveAspectRatio="none" mitskaliert.

   Eingesetzt zusätzlich zum Fraunces-Serif-Akzent (.drg-accent-serif), nicht
   als Ersatz dafür – auf Wunsch auf beide Hero-Akzentwörter angewendet
   ("moderieren", "Lösung"), anders als bei wibify (dort nur ein Wort im
   Hero). Gleiches Orange wie .drg-accent-serif und die Font-Awesome-Icons,
   für einen einheitlichen Akzentton.

   Markup-Konvention: <span class="drg-underline"><Wort><svg
   class="drg-underline__svg" ...><path .../></svg></span> – manuell im
   "Text"-Reiter des Fusion-Builder-Editors gesetzt, wie schon bei
   .drg-accent-serif (kein WYSIWYG-Button dafür).

   Animation (Pfad zeichnet sich beim Scroll-in-View) läuft in
   drg-underline.js über GSAP/ScrollTrigger, stroke-dasharray/-dashoffset.
   Progressive Enhancement: Ohne JS/GSAP bleibt der Pfad einfach dauerhaft
   sichtbar (kein per-CSS versteckter Ausgangszustand) – Sichtbarkeit wird
   ausschließlich per JS animiert, nie per CSS verborgen. */
.drg-underline {
	position: relative;
	display: inline-block;
}

.drg-underline__svg {
	position: absolute;
	left: 0;
	bottom: -0.14em;
	width: 100%;
	height: 0.4em;
	overflow: visible;
	pointer-events: none;
}

.drg-underline__svg path {
	fill: none;
	stroke: #FF6D00; /* gleiches Orange wie .drg-accent-serif / iconcolor */
	stroke-width: 2.4;
	stroke-linecap: round;
}