/**
 * Scrolling-Effekt (2 Zeilen, Endlos-Scroll, gegensätzliche Richtung).
 *
 * Erweiterungspunkt: Farben/Größen/Abstände über zusätzliche Klassen oder eigene CSS-Overrides.
 */

.inform-ta-scroll {
  /* Typografie nur innerhalb der Komponente (Theme/Elementor bleibt unabhängig). */
  font-family: "Futura", sans-serif;
  --inform-ta-gap: clamp(18px, 3vw, 42px);
  --inform-ta-font-size: clamp(44px, 8.5vw, 120px);
  --inform-ta-stroke-width: 2px;
  --inform-ta-color: #000;
  --inform-ta-outline-color: #000;
  --inform-ta-row-gap: clamp(8px, 1.6vw, 20px);
  width: 100%;
}

.inform-ta-scroll__row {
  position: relative;
}

.inform-ta-scroll__row + .inform-ta-scroll__row {
  margin-top: var(--inform-ta-row-gap);
}

.inform-ta-scroll__viewport {
  overflow: hidden;
  width: 100%;
}

.inform-ta-scroll__track {
  display: inline-flex;
  align-items: center;
  gap: var(--inform-ta-gap);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.inform-ta-scroll__row--right .inform-ta-scroll__track {}
.inform-ta-scroll__row--left .inform-ta-scroll__track {}

.inform-ta-scroll__item {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.inform-ta-scroll__phrase {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: var(--inform-ta-font-size);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.inform-ta-scroll__spacer {
  display: inline-block;
  width: clamp(14px, 2.4vw, 34px);
}

.inform-ta-word {
  display: inline-block;
}

/* Variante: erstes Wort gefüllt, zweites Wort Outline */
.inform-ta-scroll__row--fill-outline .inform-ta-word--first {
  color: var(--inform-ta-color);
}

.inform-ta-scroll__row--fill-outline .inform-ta-word--second {
  color: transparent;
  -webkit-text-stroke: var(--inform-ta-stroke-width) var(--inform-ta-outline-color);
  text-stroke: var(--inform-ta-stroke-width) var(--inform-ta-outline-color);
}

/* Variante: erstes Wort Outline, zweites Wort gefüllt */
.inform-ta-scroll__row--outline-fill .inform-ta-word--first {
  color: transparent;
  -webkit-text-stroke: var(--inform-ta-stroke-width) var(--inform-ta-outline-color);
  text-stroke: var(--inform-ta-stroke-width) var(--inform-ta-outline-color);
}

.inform-ta-scroll__row--outline-fill .inform-ta-word--second {
  color: var(--inform-ta-color);
}

@media (prefers-reduced-motion: reduce) {
  .inform-ta-scroll__track {
    transform: none !important;
  }
}