/* Textabschnitt, dessen Woerter sich beim Scrollen von Hellgrau nach Schwarz faerben */

.tx {
  background: var(--bg);
  color: var(--ink);
}
/* An der Stelle der Ueberfahrt: Rundung und Schatten bleiben, Flaeche weiss */
.js .tx.sd-ueberfahrt-js { background: var(--bg); }
.tx .wrap {
  padding-block: clamp(6rem, 12vw, 10rem);
}
.tx__text {
  margin: 0 auto;
  max-width: 32ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.7rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.tx__wort {
  color: var(--ink);
  transition: color 140ms linear;
}
.tx.is-tx .tx__wort {
  color: color-mix(in srgb, var(--ink) calc(var(--w, 0) * 100%), #c9ccd1);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .tx.is-tx .tx__wort { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .tx.is-tx .tx__wort { color: var(--ink); transition: none; }
}
@media (max-width: 700px) {
  .tx .wrap { padding-block: 4.5rem 4rem; }
  .tx__text { max-width: none; font-size: clamp(1.35rem, 6vw, 1.7rem); line-height: 1.32; }
}