/* Motion Design für die Landingpages für Marken (Entwurf 28.10.2026, nur mit TT_MOTION=1 gebaut) */
.lp-motion .phero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lp-motion .phero h1 .w > span { display: inline-block; transform: translateY(105%); animation: lpWort .9s cubic-bezier(.2,.75,.15,1) forwards; animation-delay: calc(var(--i) * .08s + .1s); }
@keyframes lpWort { to { transform: none; } }
.lp-motion .text h2 { position: relative; padding-bottom: 12px; }
.lp-motion .text h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; opacity: .35; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2,.75,.15,1); }
.lp-motion .text h2.lp-da::after { transform: scaleX(1); }
.lp-steps { position: relative; }
.lp-steps::before { content: ""; position: absolute; left: 16px; top: 30px; bottom: 30px; width: 2px; background: rgba(0,0,0,.1); }
.lp-steps::after { content: ""; position: absolute; left: 16px; top: 30px; width: 2px; height: calc((100% - 60px) * var(--lp-fort, 0)); background: #161513; }
.lp-steps li { border-bottom: 0 !important; opacity: .38; transition: opacity .6s ease; }
.lp-steps li::before { z-index: 1; background: #c9c7c3 !important; transform: scale(.85); transition: background .45s ease, transform .45s cubic-bezier(.2,.75,.15,1); }
.lp-steps li.lp-an { opacity: 1; }
.lp-steps li.lp-an::before { background: #161513 !important; transform: scale(1); }
.lp-motion .tgrid a { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.75,.15,1); transition-delay: calc(var(--i, 0) * .07s); }
.lp-motion .tgrid.lp-da a { opacity: 1; transform: none; }
.lp-motion .faq details .answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.75,.15,1); }
.lp-motion .faq details .answer > p { overflow: hidden; margin: 0; }
.lp-motion .faq details.lp-offen .answer { grid-template-rows: 1fr; }
.lp-motion .lead { animation: lpEin 1.1s .5s cubic-bezier(.2,.75,.15,1) both; }
@keyframes lpEin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lp-motion .phero h1 .w > span, .lp-motion .lead { animation: none; transform: none; opacity: 1; }
  .lp-steps li, .lp-motion .tgrid a { opacity: 1; transform: none; transition: none; }
  .lp-motion .text h2::after { transform: scaleX(1); }
}