/* Gemeinsame Bewegungs-Regeln der Beispielseiten Elektro, Café und Friseur (Physio hat diese Regeln in physio.css). */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease); }
.in .w > span, .w.in > span, body.ready .hero [data-split] .w > span { transform: none; }
.rv { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.rv.in, body.ready .hero .rv { opacity: 1; transform: none; }
#hl span { color: var(--hl-off, rgba(255,255,255,.2)); transition: color .5s var(--ease); } #hl span.on { color: var(--fg); }
.pin { position: relative; } .pin > .pane { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .rv, .w > span { opacity: 1; transform: none !important; transition: none; } }
.w.punct { margin-left: -.3em; }