/**
 * Elementor-Widget "Scroll-Textanimation" — Basis-Styles.
 *
 * Scroll-Reveal statt Sticky/Pin: der Text steht ganz normal im
 * Dokumentfluss (keine künstliche Scroll-Strecke), die Buchstaben fliegen
 * beim Reinscrollen an ihre finale Position. Die Buchstaben bleiben dabei
 * durchgängig voll sichtbar (opacity: 1) — nur transform (Position/Rotation)
 * wird per JS animiert.
 *
 * .clarity-scroll-text-anim bleibt an ihrer natürlichen Spalten-
 * Position/-Breite (kein Full-Bleed-Stretch, kein margin/padding-Trick) —
 * dadurch richten sich text-align: left/center/right an der Spalte aus,
 * nicht am Fenster.
 *
 * Clipping-Strategie (zweimal überarbeitet, siehe Historie unten):
 * - Horizontal clippt jetzt ein per JavaScript berechneter clip-path
 *   direkt an diesem Element (updateClipPath() in der JS-Datei), exakt an
 *   der echten Fensterkante — unabhängig davon, wie schmal/breit oder wo
 *   auf der Seite die Spalte liegt. clip-path betrifft nur die Malebene
 *   dieses Elements, nicht sein Boxmodell/Layout, kann also keinen
 *   horizontalen Seiten-Scrollbalken verursachen.
 * - Vertikal wird bewusst NICHT geclippt. Buchstaben dürfen beim
 *   Reinscrollen kurz sichtbar in Nachbarabschnitte hineinragen — das ist
 *   bei diesem Effekt gewünscht.
 *
 * Historie (falls das nochmal auftaucht):
 * 1. Erste Version: margin-left/right: -50vw + padding-left/right: 50vw als
 *    Clip-Grenze. Problem: die eigene Box wurde dadurch fast doppelt so
 *    breit wie der Viewport und trug selbst zur Seiten-Scrollbreite bei
 *    (overflow-x:hidden auf demselben Element verhindert nur sichtbares
 *    Herausragen von INHALT, nicht dass die BOX SELBST die Seite breiter
 *    macht) — plus vw bezieht vielerorts die Scrollbar-Breite mit ein.
 *    Ergebnis: Scrollbalken auf der ganzen Seite.
 * 2. Zweite Version: html { overflow-x: hidden; } als globale Clip-Grenze.
 *    Behob den Scrollbalken, legte aber auf dieser Seite die Animation
 *    komplett lahm: hier läuft GSAP ScrollSmoother (Animation Addons for
 *    Elementor Pro), das Scrollen komplett selbst übernimmt und dafür sehr
 *    spezifische Anforderungen an overflow auf html/body hat. Jede globale
 *    Änderung an html/body ist auf Seiten mit aktivem Scroll-Hijacking
 *    riskant.
 * 3. Aktuelle Version: clip-path statt overflow, lokal am Widget selbst
 *    (siehe oben) — fasst html/body gar nicht mehr an.
 */

.clarity-scroll-text-anim {
    position: relative;
    text-align: center;
}

.clarity-scroll-text-anim__text {
    display: inline-block;
    max-width: 92vw;
}

/* Wörter bleiben beim Zusammenfügen ganz (kein Umbruch mitten im Wort). */
.clarity-scroll-text-anim__word {
    display: inline-block;
    white-space: nowrap;
}

.clarity-scroll-text-anim__char {
    display: inline-block;
    opacity: 1;
    will-change: transform;
    backface-visibility: hidden;
}

/* JS setzt diese Klasse bei prefers-reduced-motion — Text bleibt dann
   direkt lesbar, ohne Zerlegung/Animation. */
.clarity-scroll-text-anim--static .clarity-scroll-text-anim__char {
    transform: none !important;
}

/* CSS-only-Fallback, falls JS (noch) nicht ausgeführt wurde. */
@media (prefers-reduced-motion: reduce) {
    .clarity-scroll-text-anim .clarity-scroll-text-anim__char {
        transform: none !important;
    }
}