/* 
   MARKER HIGHLIGHT EFFEKT - SCROLL-BASIERT
   Hebt die "Klarheit schafft Qualität" Überschrift
   mit einem Textmarker-Effekt beim Scrollen hervor
   Erscheint und verschwindet kontinuierlich beim Hoch-/Runterscrollen
   
   Mobile-optimiert:
   - Touch-basierte Scroll-Events
   - Angepasste Positionierung für kleinere Schrift
   - Performance-Optimierung mit will-change
*/

.knowhow-title {
    position: relative;
    display: inline-block;
    --marker-progress: 0; /* Wird vom JavaScript gesetzt (0 bis 1) */
}

.knowhow-title::before {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0.15em;
    height: 0.4em;
    background: rgba(47, 129, 247, 0.12); /* RegioConcept Light Blue */
    transform: scaleX(var(--marker-progress)); /* Skaliert basierend auf Scroll-Position */
    transform-origin: left;
    transition: transform 0.15s ease-out; /* Schneller für Mobile */
    z-index: -1;
    border-radius: 0; /* Gerade Linie ohne Rundung - eckig */
    will-change: transform; /* Performance-Optimierung */
}

/* 
   MOBILE OPTIMIERUNG - Marker Effekt
*/
@media (max-width: 768px) {
    .knowhow-title::before {
        left: -2px;
        right: -2px;
        bottom: 0.1em;
        height: 0.35em;
        background: rgba(47, 129, 247, 0.15); /* Etwas stärker für Mobile */
        transition: transform 0.1s ease-out; /* Noch schneller */
    }
}

@media (max-width: 480px) {
    .knowhow-title::before {
        left: 0;
        right: 0;
        bottom: 0.08em;
        height: 0.3em;
        background: rgba(47, 129, 247, 0.18); /* Noch stärker sichtbar */
    }
}

/* Reduzierte Animation bei Bedarf */
@media (prefers-reduced-motion: reduce) {
    .knowhow-title::before {
        transition: none;
    }
}