/* ==========================================================
   Lowprint Motion – Animationen für lowprint.de
   Effekte: 1 Tipp-Überschrift · 2 Hero (Video + Schweben)
            4 Leistungen · 5 Pakete · 6 Web→Print-Linie
            7 Ablauf-Zeitleiste
   Einbinden NACH style.css
   ========================================================== */

/* ---------- Effekt 1: Tipp-Überschrift ---------- */
.hero h1 .lpm-line{display:inline-block;opacity:0;transform:translateY(28px);animation:lpm-up .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .lpm-line:nth-of-type(2){animation-delay:.14s}
.hero h1 .lpm-line:nth-of-type(3){animation-delay:.28s}
@keyframes lpm-up{to{opacity:1;transform:none}}
.hero h1 .lpm-line{color:inherit}
.hero h1 .lpm-adj{display:inline-block;color:inherit;transition:opacity .18s,transform .18s}
.hero h1 .lpm-adj.lpm-swap{opacity:0;transform:translateY(-8px)}
.hero h1 .lpm-word{color:var(--orange);white-space:nowrap}
.lpm-caret{display:inline-block;width:.07em;height:.82em;background:var(--orange);margin-left:.06em;vertical-align:-.04em;animation:lpm-blink 1s steps(1) infinite}
@keyframes lpm-blink{50%{opacity:0}}

/* ---------- Effekt 2: Hero-Video + schwebende Elemente ---------- */
.hero-visual video{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--soft)}
.hero-visual .value-badge{will-change:transform;transition:box-shadow .3s}
.hero-visual .value-badge.lpm-float{animation:lpm-bob 5s ease-in-out infinite}
.hero-visual .value-badge:hover{box-shadow:0 22px 44px rgba(233,84,0,.35)}
@keyframes lpm-bob{50%{translate:0 -10px}}
.caption-plus{display:inline-block;animation:lpm-spin 10s linear infinite}
@keyframes lpm-spin{to{transform:rotate(360deg)}}
.hero-visual img,.hero-visual video{transition:transform .2s linear}

/* ---------- Gemeinsam: Einblenden beim Scrollen ---------- */
.lpm-rv{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.lpm-rv.lpm-on{opacity:1;transform:none}

/* ---------- Effekt 4: Leistungen ---------- */
.services article{transition:background .35s}
.services article:hover{background:linear-gradient(90deg,transparent,var(--soft) 30%,var(--soft) 70%,transparent)}
.lpm-vis{height:150px;max-width:480px;background:var(--soft);margin-bottom:26px;display:grid;place-items:center;overflow:hidden;perspective:700px}
/* Laptop */
.lpm-lap{width:150px}
.lpm-lap .scr{height:92px;border:6px solid var(--ink);border-bottom-width:8px;border-radius:7px 7px 0 0;overflow:hidden;background:#fff}
.lpm-lap .base{height:8px;background:#3a3a38;border-radius:0 0 7px 7px;margin:0 -12px}
.lpm-lap .pg{animation:lpm-scroll 6s cubic-bezier(.6,0,.3,1) infinite}
.lpm-lap .pg i{display:block;margin:6px;border-radius:2px;background:#e3e3df}
@keyframes lpm-scroll{0%,15%{transform:translateY(0)}45%,60%{transform:translateY(-60px)}90%,100%{transform:translateY(-120px)}}
/* Visitenkarte */
.lpm-flip{width:150px;height:88px;position:relative;transform-style:preserve-3d;animation:lpm-flip 5s ease-in-out infinite}
.lpm-flip>div{position:absolute;inset:0;backface-visibility:hidden;box-shadow:0 10px 24px rgba(0,0,0,.18);padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.lpm-flip .f{background:var(--ink);color:#fff;font-weight:800;font-size:19px;letter-spacing:-1px;line-height:1}
.lpm-flip .f em{color:var(--orange);font-style:normal}
.lpm-flip .f small{font-size:9px;font-weight:400;letter-spacing:0;opacity:.7}
.lpm-flip .b{background:#fff;transform:rotateY(180deg);font-size:9px;line-height:1.4;color:var(--gray)}
.lpm-flip .b strong{color:var(--ink);font-size:11px}
@keyframes lpm-flip{0%,35%{transform:rotateY(0) rotateX(8deg)}50%,85%{transform:rotateY(180deg) rotateX(8deg)}100%{transform:rotateY(360deg) rotateX(8deg)}}
/* Flyer */
.lpm-fold{display:flex;transform-style:preserve-3d}
.lpm-fold i{display:block;width:42px;height:96px;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.lpm-fold i:nth-child(1){background:linear-gradient(#fff 55%,#fbd9c5 55%);transform-origin:right;animation:lpm-f1 5s ease-in-out infinite}
.lpm-fold i:nth-child(2){background:linear-gradient(var(--orange) 40%,#fff 40%)}
.lpm-fold i:nth-child(3){background:linear-gradient(#fff 30%,#e3e3df 30% 50%,#fff 50%);transform-origin:left;animation:lpm-f3 5s ease-in-out infinite}
@keyframes lpm-f1{0%,15%{transform:rotateY(170deg)}45%,85%{transform:rotateY(0)}100%{transform:rotateY(170deg)}}
@keyframes lpm-f3{0%,25%{transform:rotateY(-170deg)}55%,85%{transform:rotateY(0)}100%{transform:rotateY(-170deg)}}
/* Roll-up */
.lpm-roll{display:flex;flex-direction:column;align-items:center}
.lpm-roll .ban{width:58px;height:112px;background:linear-gradient(var(--ink) 0 30%,var(--orange) 30% 62%,#fff 62%);transform-origin:bottom;animation:lpm-roll 4.5s cubic-bezier(.5,0,.2,1) infinite;box-shadow:0 8px 18px rgba(0,0,0,.15);display:flex;justify-content:center;padding-top:9px;color:#fff;font-weight:800;font-size:9px}
.lpm-roll .foot{width:74px;height:8px;background:#9a9a96;border-radius:2px}
@keyframes lpm-roll{0%{transform:scaleY(0)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* ---------- Effekt 5: Pakete ---------- */
.lpm-best{position:relative;isolation:isolate}
.lpm-best::before{content:"";position:absolute;inset:-2px;padding:3px;background:conic-gradient(from var(--lpm-a),var(--orange),#ffc29d,var(--orange),#8a2f00,var(--orange));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:lpm-rot 4s linear infinite;pointer-events:none;z-index:2}
@property --lpm-a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes lpm-rot{to{--lpm-a:360deg}}
.lpm-num{font-variant-numeric:tabular-nums}

/* ---------- Effekt 6: Web → Print-Linie (.statement) ---------- */
.statement.lpm-pin{height:250vh;padding:0;position:relative}
.statement .lpm-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.statement .lpm-sticky>.wrap{width:100%}
.statement .lpm-dim span{color:inherit}
.statement .lpm-dim{color:#4a4a47;transition:color .5s}
.statement .lpm-dim.lpm-lit{color:#fff}
.statement .lpm-dim.lpm-lit.lpm-o{color:#ff7f35}
.lpm-track{position:relative;height:300px;margin-top:20px}
.lpm-track svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lpm-track path{fill:none;stroke-linecap:round}
.lpm-items{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;justify-items:center}
.lpm-it{opacity:.12;transform:scale(.85) translateY(20px);transition:opacity .7s,transform .7s cubic-bezier(.2,.9,.3,1.3);text-align:center}
.lpm-it.lpm-on{opacity:1;transform:none}
.lpm-it label{display:block;margin:14px 0 0;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#a5a59f}
.lpm-brand{font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.lpm-brand i{font-style:normal;color:var(--orange)}
.lpm-phone{width:112px;height:214px;border-radius:22px;background:#fff;border:5px solid #3a3a38;padding:22px 10px 10px;position:relative;overflow:hidden;text-align:left}
.lpm-phone:before{content:"";position:absolute;top:7px;left:50%;width:34px;height:6px;margin-left:-17px;border-radius:9px;background:#3a3a38}
.lpm-phone .lpm-brand{font-size:11px}
.lpm-phone .hb{height:64px;background:linear-gradient(135deg,var(--orange),#ffa36e);margin:8px 0}
.lpm-ln{height:6px;border-radius:3px;background:#e3e3df;margin:5px 0}
.lpm-phone .cta{height:16px;background:var(--ink);margin-top:10px;width:70%}
.lpm-bcard{width:172px;height:104px;background:#fff;padding:14px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;box-shadow:0 14px 30px rgba(0,0,0,.45);border-left:6px solid var(--orange)}
.lpm-bcard .lpm-brand{font-size:17px}
.lpm-bcard small{font-size:9px;color:var(--gray);line-height:1.4}
.lpm-flyer{width:124px;height:176px;background:#fff;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.45);text-align:left;transform:rotate(-4deg)}
.lpm-flyer .top{height:88px;background:linear-gradient(135deg,var(--orange),#ffa36e);padding:10px;color:#fff;display:flex;align-items:flex-end;font-weight:800;font-size:14px;line-height:1.05}
.lpm-flyer .bt{padding:10px}
.lpm-flyer .lpm-brand{font-size:12px}
.lpm-rup{display:flex;flex-direction:column;align-items:center}
.lpm-rup .ban{width:92px;height:224px;background:#fff;padding:14px 10px;display:flex;flex-direction:column;gap:9px;text-align:left;transform-origin:bottom}
.lpm-rup .ban .lpm-brand{font-size:13px}
.lpm-rup .blk{flex:1;background:linear-gradient(160deg,var(--orange),#ffa36e)}
.lpm-rup .ft{width:110px;height:10px;background:#777;border-radius:2px}
.lpm-it.lpm-on .lpm-rup .ban{animation:lpm-rollup 1s cubic-bezier(.5,0,.2,1)}
@keyframes lpm-rollup{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- Effekt 7: Ablauf ---------- */
.steps article{position:relative;border-top-color:var(--line)}
.steps article .lpm-fill{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--orange)}
.steps article span,.steps article h3,.steps article p{transition:color .4s,opacity .4s}
.steps article:not(.lpm-on) span{color:#b9b9b4}
.steps article:not(.lpm-on) h3{color:#b9b9b4}
.steps article:not(.lpm-on) p{opacity:.45}
.steps article.lpm-on span{animation:lpm-pop .5s}
@keyframes lpm-pop{50%{transform:scale(1.35)}}

/* ---------- Mobil ---------- */
@media(max-width:760px){
  .statement.lpm-pin{height:auto;padding:50px 0}
  .statement .lpm-sticky{position:static;height:auto}
  .lpm-track{height:auto;margin-top:30px}
  .lpm-track svg{display:none}
  .lpm-items{position:static;grid-template-columns:1fr 1fr;gap:28px 10px}
  .lpm-phone{width:96px;height:184px}.lpm-bcard{width:146px;height:88px}.lpm-flyer{width:104px;height:148px}.lpm-rup .ban{width:76px;height:180px}
  .steps article .lpm-fill{display:none}
}

/* ---------- Bewegung reduzieren ---------- */
@media(prefers-reduced-motion:reduce){
  .hero h1 .lpm-line,.lpm-rv,.lpm-it{opacity:1!important;transform:none!important;animation:none!important}
  .lpm-caret,.caption-plus,.lpm-lap .pg,.lpm-flip,.lpm-fold i,.lpm-roll .ban,.lpm-best::before,.value-badge{animation:none!important}
  .statement.lpm-pin{height:auto;padding:74px 0}
  .statement .lpm-sticky{position:static;height:auto}
}

/* Text unter der Statement-Überschrift behält seine Farbe */
.statement .wrap>p:not(.eyebrow){color:#d3d3cd;max-width:510px;margin-top:26px}